@jx3box/jx3box-ui 2.0.5 → 2.0.7

package/src/bread/ListAdmin.vue

@@ -0,0 +1,199 @@
+<template>
+    <div v-if="hasRight" class="u-admin-button">
+        <el-button
+            type="primary"
+            icon="Setting"
+            class="c-admin-button u-admin"
+            :size="buttonSize"
+            @click="show = true"
+            >管理</el-button
+        >
+        <el-drawer
+            class="c-admin"
+            title="管理主题"
+            v-model:visible="show"
+            :before-close="close"
+            :append-to-body="true"
+            :modal="false"
+            :withHeader="false"
+        >
+            <div class="c-admin-wrapper" v-loading="loading">
+                <el-divider content-position="left">主题管理</el-divider>
+                <div class="m-bucket-list" v-if="list && list.length">
+                    <div v-for="item in list" :key="item.id" class="m-bucket-item">
+                        <el-tag size="medium" :type="item.status ? '' : 'info'">{{ item.name }}</el-tag>
+                        <div class="m-bucket-op">
+                            <el-button :type="item.status ? 'warning' : 'success'" plain size="mini" class="u-op-btn" :icon="item.status ? 'Download' : 'Upload'" @click="update(item.id, item.status)">{{ item.status ? '下架' : '上架' }}</el-button>
+                            <el-button @click="edit(item)" plain size="mini" icon="Edit">修改</el-button>
+                            <el-button type="info" plain size="mini" class="u-op-btn" icon="Delete" @click="del(item.id)">删除</el-button>
+                        </div>
+                    </div>
+                </div>
+                <el-empty v-else description="暂无主题"></el-empty>
+
+                <div class="c-admin-buttons">
+                    <el-button type="success" @click="add" icon="Plus">新增</el-button>
+                </div>
+            </div>
+        </el-drawer>
+    </div>
+</template>
+
+<script>
+import { addTopicBucket, deleteTopicBucket, updateTopicBucket, getTopicBucket } from "../../service/admin";
+import User from "@jx3box/jx3box-common/js/user";
+export default {
+    name: "ListAdmin",
+    props: {
+        type: {
+            type: String,
+            default: "bbs",
+        },
+        buttonSize: {
+            type: String,
+            default: "medium",
+        },
+    },
+    data() {
+        return {
+            show: false,
+            list: [],
+            loading: false,
+            currentStatus: "",
+        };
+    },
+    computed: {
+        hasRight() {
+            return User.isEditor();
+        },
+    },
+    watch: {
+        show(val) {
+            val && this.loadData();
+        },
+    },
+    methods: {
+        close() {
+            this.show = false;
+        },
+        loadData() {
+            const params = {
+                type: this.type,
+            };
+            this.loading = true;
+            getTopicBucket(params)
+                .then((res) => {
+                    this.list = res.data.data;
+                })
+                .finally(() => {
+                    this.loading = false;
+                });
+        },
+        del(id) {
+            this.$confirm("此操作将删除该主题, 是否继续?", "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning",
+            })
+                .then(() => {
+                    deleteTopicBucket(id).then((res) => {
+                        this.$message({
+                            type: "success",
+                            message: "删除成功!",
+                        });
+                        this.loadData();
+                    });
+                })
+                .catch(() => {});
+        },
+        update(id, status) {
+            const params = {
+                status: status ? 0 : 1,
+            };
+            updateTopicBucket(id, params).then((res) => {
+                this.$message({
+                    type: "success",
+                    message: "更新成功!",
+                });
+                this.loadData();
+            });
+        },
+        add() {
+            this.$prompt("请输入主题名称", "新增主题", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                inputPattern: /\S+/,
+                inputErrorMessage: "主题名称不能为空",
+            })
+                .then(({ value }) => {
+                    const data = {
+                        type: this.type,
+                        name: value,
+                    };
+                    addTopicBucket(data).then((res) => {
+                        this.$message({
+                            type: "success",
+                            message: "添加成功!",
+                        });
+                        this.loadData();
+                    });
+                })
+                .catch(() => {});
+        },
+        edit(item) {
+            this.$prompt("请输入主题名称", "修改主题", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                inputPattern: /\S+/,
+                inputErrorMessage: "主题名称不能为空",
+                inputValue: item.name,
+            })
+                .then(({ value }) => {
+                    const data = {
+                        name: value,
+                    };
+                    updateTopicBucket(item.id, data).then((res) => {
+                        this.$message({
+                            type: "success",
+                            message: "修改成功!",
+                        });
+                        this.loadData();
+                    });
+                })
+                .catch(() => {})
+        }
+    },
+};
+</script>
+
+<style lang="less">
+.u-admin-button {
+    padding: 0;
+    float: right;
+}
+.c-admin-wrapper {
+    .u-admin-setting {
+        .pointer;
+    }
+    .m-bucket-list {
+        max-height: 300px;
+        overflow: auto;
+        .m-bucket-item {
+            .flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 5px;
+            border-radius: 3px;
+
+            // odd
+            &:nth-child(odd) {
+                background-color: #f7f7f7;
+            }
+        }
+    }
+    .u-bucket-add {
+        margin-top: 20px;
+        width: 100%;
+    }
+}
+</style>

package/src/bread/MigrateCommunity.vue

@@ -0,0 +1,192 @@
+<template>
+    <el-dialog
+        custom-class="w-dialog m-migrate-dialog"
+        :width="isPhone ? '95%' : '600px'"
+        v-model="visible"
+        @close="close"
+        title="迁回原板块"
+        append-to-body
+        draggable
+    >
+        <div class="m-migrate-box" v-if="post?.ID">
+            <div class="m-item">
+                <div class="u-label">标题</div>
+                <div class="u-value">{{ post?.post_title }}</div>
+            </div>
+            <div class="m-item">
+                <div class="u-label">作者</div>
+                <div class="u-value">
+                    <a target="_blank" :href="authorLink(post?.post_author)">{{ `${post?.author}` }}</a>
+                </div>
+            </div>
+            <div class="m-item">
+                <div class="u-label">原板块</div>
+                <div class="u-value">{{ showType(post?.post_type) }}</div>
+            </div>
+            <div class="m-item">
+                <div class="u-label">原链接</div>
+                <div class="u-value"><a target="_blank" :href="postLink(post?.post_type, post?.ID)">查看</a></div>
+            </div>
+        </div>
+        <el-alert type="warning" title="该帖子不可迁移，不存在原帖子" :closable="false" show-icon v-else></el-alert>
+        <template #footer v-if="post?.ID">
+            <el-button @click="close" :loading="loading">关闭</el-button>
+            <el-button type="primary" @click="submit" :loading="loading">确认</el-button>
+        </template>
+    </el-dialog>
+</template>
+
+<script>
+import { getOriginalPost, migrateCommunityPost } from "../../service/community";
+import { postLink, authorLink } from "@jx3box/jx3box-common/js/utils";
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+const { __postType } = JX3BOX;
+export default {
+    name: "MigrateCommunity",
+    props: {
+        modelValue: {
+            type: Boolean,
+            default: false,
+        },
+        communityId: {
+            type: Number,
+            default: 0,
+        },
+    },
+    emits: ["update:modelValue"],
+    data() {
+        return {
+            post: {},
+            isPhone: window.innerWidth < 768,
+
+            loading: false,
+
+            visible: false,
+        };
+    },
+    watch: {
+        modelValue(val) {
+            this.visible = val;
+            if (val) {
+                if (this.communityId) {
+                    this.loadPost();
+                }
+            }
+        },
+        visible(val) {
+            this.$emit("update:modelValue", val);
+        }
+    },
+    methods: {
+        postLink,
+        authorLink,
+        close() {
+            this.$emit("update:modelValue", false);
+        },
+        loadPost() {
+            getOriginalPost(this.communityId).then((res) => {
+                this.post = res.data.data;
+            });
+        },
+        submit() {
+            if (!this.post) {
+                return;
+            }
+            this.$confirm("确认将该帖子迁回原板块？")
+                .then(() => {
+                    this.loading = true;
+                    migrateCommunityPost({ community_id: this.communityId })
+                        .then((res) => {
+                            this.$message.success("迁移成功");
+                            this.close();
+                            location.href = "/community";
+                        })
+                        .finally(() => {
+                            this.loading = false;
+                        });
+                })
+                .catch(() => {
+                    // 取消操作
+                });
+        },
+        showType(type) {
+            return __postType[type] || type;
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.m-migrate-dialog {
+    .el-dialog__body {
+        padding-top: 20px;
+    }
+}
+
+// 参考 Element UI Descriptions 样式
+.m-migrate-box {
+    border: 1px solid #ebeef5;
+    border-radius: 4px;
+    background-color: #fff;
+
+    .m-item {
+        display: flex;
+        border-bottom: 1px solid #ebeef5;
+
+        &:last-child {
+            border-bottom: none;
+        }
+
+        .u-label {
+            width: 60px;
+            min-width: 60px;
+            padding: 12px 16px;
+            font-weight: bold;
+            color: #303133;
+            background-color: #fafafa;
+            border-right: 1px solid #ebeef5;
+            display: flex;
+            align-items: center;
+            font-size: 14px;
+        }
+
+        .u-value {
+            flex: 1;
+            padding: 12px 16px;
+            color: #606266;
+            word-break: break-all;
+            display: flex;
+            align-items: center;
+            font-size: 14px;
+            line-height: 1.6;
+
+            a {
+                color: #409eff;
+                text-decoration: none;
+                transition: color 0.3s;
+
+                &:hover {
+                    color: #66b1ff;
+                }
+            }
+        }
+    }
+
+    // 响应式处理
+    @media screen and (max-width: 768px) {
+        .m-item {
+            flex-direction: column;
+
+            .u-label {
+                width: 100%;
+                border-right: none;
+                border-bottom: 1px solid #ebeef5;
+            }
+
+            .u-value {
+                width: 100%;
+            }
+        }
+    }
+}
+</style>

package/src/bread/MoveToCommunityDialog.vue

@@ -0,0 +1,234 @@
+<template>
+    <el-dialog
+        custom-class="m-design-task"
+        :width="isPhone ? '95%' : '600px'"
+        v-model="visible"
+        @close="close"
+        title="迁移至论坛"
+        append-to-body
+    >
+        <el-form :model="form" ref="form" :rules="rules" :label-position="isPhone ? 'top' : 'left'" label-width="80px">
+            <el-form-item label="分类" prop="category">
+                <el-select v-model="form.category" placeholder="请选择帖子分类" style="width: 100%" filterable>
+                    <el-option
+                        v-for="item in categoryList"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item.name"
+                    ></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="简介">
+                <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="form.introduction"> </el-input>
+            </el-form-item>
+        </el-form>
+
+        <el-divider content-position="left">附图</el-divider>
+        <div class="u-imgs">
+            <div :class="`u-imgs-item`" v-for="(item, i) in form.extra_images" :key="i">
+                <el-image :src="item" fit="cover" style="width: 148px; height: 148px" />
+            </div>
+        </div>
+
+        <el-divider content-position="left"></el-divider>
+
+        <div class="u_r_box">
+            <el-popover placement="top" trigger="manual" size="mini" content="请确认此操作不可逆" v-model="visible">
+                <template #reference>
+                    <el-checkbox v-model="checked">我已确认此操作不可逆</el-checkbox>
+                </template>
+            </el-popover>
+        </div>
+        <template #footer>
+            <el-button @click="close">取 消</el-button>
+            <el-button type="primary" @click="onConfirm" :disabled="!checked">确 定</el-button>
+        </template>
+    </el-dialog>
+</template>
+
+<script>
+import { getTopicBucket, recoverTopicFromPosts } from "../../service/community";
+
+export default {
+    name: "MoveToCommunityDialog",
+    props: {
+        modelValue: {
+            type: Boolean,
+            default: false,
+        },
+        post: {
+            type: [Object, String],
+            default: () => {
+                return {};
+            },
+        },
+    },
+    emits: ["update:modelValue"],
+    data() {
+        return {
+            visible: false,
+            checked: false,
+            form: {
+                category: "",
+                id: "",
+                introduction: "",
+                extra_images: undefined,
+            },
+            categoryList: [],
+            isPhone: window.innerWidth < 768,
+            rules: {
+                category: [{ required: true, message: "请选择分类", trigger: "blur" }],
+            },
+        };
+    },
+    watch: {
+        modelValue(val) {
+            this.visible = val;
+            if (val) {
+                this.getCategoryList();
+                this.initForm();
+            }
+        },
+    },
+    methods: {
+        initForm() {
+            this.form.id = this.post.ID;
+            const content = this.post.post_content;
+            this.form.introduction = this.getIntroduction(content);
+            const imgs = this.getImgSrc(content);
+            if (imgs.length > 0) this.form.extra_images = [...new Set(imgs)];
+        },
+
+        close() {
+            this.$emit("update:modelValue", false);
+        },
+        clearForm() {
+            this.form = { category: "", id: "", introduction: "", extra_images: [] };
+        },
+        onConfirm() {
+            if (!this.post?.ID) {
+                this.$message.error("文章ID不存在!");
+                return;
+            }
+            if (!this.form.category) {
+                this.$message.error("请选择分类!");
+                return;
+            }
+            if (!this.checked) {
+                this.visible = true;
+                return;
+            }
+
+            this.$refs.form?.validate((valid) => {
+                if (valid) {
+                    recoverTopicFromPosts(this.form).then(() => {
+                        this.$message.success("操作成功");
+                        this.close();
+                        this.clearForm();
+                    });
+                }
+            });
+        },
+        onCancel() {
+            this.close();
+            this.clearForm();
+        },
+        getCategoryList() {
+            getTopicBucket({ type: "community" }).then((res) => {
+                this.categoryList = res.data.data;
+            });
+        },
+        getIntroduction(str) {
+            // 使用正则表达式匹配HTML标签并将其替换为空字符串
+            const withoutTags = str?.replace(/<[^>]*>|\n|&nbsp;| &nbsp;/g, "");
+
+            // 获取前100个字符，如果字符串长度小于200，则获取全部字符
+            return withoutTags?.slice(0, 200);
+        },
+        getImgSrc: function (htmlString) {
+            // 创建一个正则表达式来匹配没有class属性的<img>标签，并且捕获src属性的值
+            const imgSrcRegex = /<img\s+(?![^>]*\bclass\b)[^>]*src="([^"]*)"/g;
+            let matches;
+            const imgSrcs = [];
+
+            // 使用正则表达式全局匹配HTML字符串中的所有<img>标签
+            while ((matches = imgSrcRegex.exec(htmlString)) !== null) {
+                // matches[1] 是正则表达式中捕获组的内容，即src的值
+                imgSrcs.push(matches[1]);
+            }
+
+            return imgSrcs;
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.u_r_box {
+    display: flex;
+    justify-content: flex-end;
+}
+.u-imgs {
+    display: flex;
+    overflow-x: auto;
+    gap: 8px;
+}
+.u-imgs-item {
+    min-width: 148px;
+    overflow: hidden;
+    border-radius: 6px;
+    box-sizing: border-box;
+    height: 148px;
+    cursor: pointer;
+    position: relative;
+    border: 2px solid transparent;
+    transition: 0.35s;
+    background-color: @bg-light;
+    &:hover {
+        border-color: #0366d6;
+    }
+    &.active {
+        border-color: #0366d6;
+        .u-mark {
+            display: block;
+        }
+    }
+    img {
+        width: 100%;
+    }
+    .u-mark {
+        display: none;
+        position: absolute;
+        top: 2px;
+        right: 2px;
+        padding: 4px 8px;
+        font-size: 12px;
+        background-color: #0366d6;
+        color: white;
+        border-radius: 4px;
+    }
+}
+.m-design-task {
+    .el-form-item {
+        margin-bottom: 12px;
+    }
+    .m-star-line {
+        .el-form-item__content {
+            top: 10px;
+        }
+    }
+    .u-time {
+        color: #c0c4cc;
+    }
+}
+
+@media screen and (max-width: @phone) {
+    .m-design-task {
+        .m-star-line {
+            .el-form-item__content {
+                top: 0;
+            }
+        }
+    }
+}
+</style>

package/src/comment/Avatar.vue

@@ -3,22 +3,16 @@
         <a class="u-avatar" :href="userHref" target="_blank">
             <el-avatar
                 class="u-avatar-pic"
-                :class="avatarSize==36?'xxs': ''"
+                :class="avatarSize == 36 ? 'xxs' : ''"
                 shape="circle"
                 :size="avatarSize"
                 :src="userAvatar"
             ></el-avatar>
-            <i class="u-avatar-frame" :class="avatarSize==36?'xxs':'xs'" v-if="avatarFrame">
+            <i class="u-avatar-frame" :class="avatarSize == 36 ? 'xxs' : 'xs'" v-if="avatarFrame">
                 <img :src="frameUrl" />
             </i>
         </a>
-        <el-link
-            class="u-name"
-            type="primary"
-            target="_blank"
-            :href="userHref"
-            >{{ username }}</el-link
-        >
+        <el-link class="u-name" type="primary" target="_blank" :href="userHref">{{ username }}</el-link>
     </div>
 </template>
 
@@ -54,16 +48,16 @@ export default {
             default: false,
         },
     },
-    data: function() {
+    data: function () {
         return {};
     },
     computed: {
-        frameUrl: function() {
+        frameUrl: function () {
             return __imgPath + `avatar/images/${this.avatarFrame}/${this.avatarFrame}.svg`;
         },
     },
     methods: {},
-    mounted: function() {},
+    mounted: function () {},
 };
 </script>
 
@@ -100,23 +94,23 @@ export default {
     }
     .u-avatar-frame {
         position: absolute;
-        &.xs{
+        &.xs {
             width: 68px;
             height: 68px;
-            left:24px;
-            top:24px;
-            margin-left:-34px;
-            margin-top:-34px;
+            left: 24px;
+            top: 24px;
+            margin-left: -34px;
+            margin-top: -34px;
         }
-        &.xxs{
-            @pic:36px;
-            @frame:48px;
+        &.xxs {
+            @pic: 36px;
+            @frame: 48px;
             width: 48px;
             height: 48px;
-            left:18px;
-            top:18px;
-            margin-left:-24px;
-            margin-top:-24px;
+            left: 18px;
+            top: 18px;
+            margin-left: -24px;
+            margin-top: -24px;
         }
         img {
             width: 100%;