@jx3box/jx3box-common-ui 8.4.6 → 8.4.7

package/package.json

@@ -1,71 +1,71 @@
 {
-  "name": "@jx3box/jx3box-common-ui",
-  "version": "8.4.6",
-  "description": "JX3BOX UI",
-  "main": "index.js",
-  "scripts": {
-    "dev": "cross-env DEV_SERVER=true vue-cli-service serve",
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
-    "inspect": "vue inspect > output.js",
-    "update": "npm --registry https://registry.npmjs.org install @jx3box/jx3box-common@latest @jx3box/jx3box-data@latest @jx3box/jx3box-comment-ui@latest @jx3box/jx3box-editor@latest",
-    "header": "vue-cli-service build --target lib --name newheader src/Header.vue && cp public/index.html dist/newheader.html"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
+    "name": "@jx3box/jx3box-common-ui",
+    "version": "8.4.7",
+    "description": "JX3BOX UI",
+    "main": "index.js",
+    "scripts": {
+        "dev": "cross-env DEV_SERVER=true vue-cli-service serve",
+        "serve": "vue-cli-service serve",
+        "build": "vue-cli-service build",
+        "lint": "vue-cli-service lint",
+        "inspect": "vue inspect > output.js",
+        "update": "npm --registry https://registry.npmjs.org install @jx3box/jx3box-common@latest @jx3box/jx3box-data@latest @jx3box/jx3box-comment-ui@latest @jx3box/jx3box-editor@latest",
+        "header": "vue-cli-service build --target lib --name newheader src/Header.vue && cp public/index.html dist/newheader.html"
     },
-    "extends": [
-      "plugin:vue/essential"
+    "eslintConfig": {
+        "root": true,
+        "env": {
+            "node": true
+        },
+        "extends": [
+            "plugin:vue/essential"
+        ],
+        "rules": {},
+        "parserOptions": {
+            "parser": "babel-eslint"
+        }
+    },
+    "browserslist": [
+        "> 1%",
+        "last 2 versions"
     ],
-    "rules": {},
-    "parserOptions": {
-      "parser": "babel-eslint"
+    "dependencies": {
+        "@jx3box/jx3box-comment-ui": "^1.8.7",
+        "@jx3box/jx3box-common": "^8.2.16",
+        "@jx3box/jx3box-data": "^3.5.8",
+        "@jx3box/jx3box-editor": "^2.1.9",
+        "@jx3box/reporter": "^0.0.4",
+        "axios": "^0.26.1",
+        "dayjs": "^1.11.0",
+        "element-ui": "^2.13.2",
+        "jquery": "^3.5.1",
+        "lodash": "^4.17.15",
+        "qrcode.vue": "^1.7.0",
+        "url": "^0.11.0",
+        "vue": "^2.6.11"
+    },
+    "devDependencies": {
+        "@babel/plugin-proposal-optional-chaining": "^7.14.5",
+        "@vue/cli-plugin-babel": "~4.3.0",
+        "@vue/cli-plugin-eslint": "~4.3.0",
+        "@vue/cli-plugin-vuex": "^4.0.0",
+        "@vue/cli-service": "~4.3.0",
+        "babel-eslint": "^10.1.0",
+        "core-js": "^3.6.5",
+        "cross-env": "^7.0.3",
+        "csslab": "^4.0.3",
+        "eslint": "^6.7.2",
+        "eslint-plugin-vue": "^6.2.2",
+        "less": "^3.0.4",
+        "less-loader": "^5.0.0",
+        "style-resources-loader": "^1.3.3",
+        "vue-cli-plugin-element": "~1.0.1",
+        "vue-svg-inline-loader": "^1.4.6",
+        "vue-template-compiler": "^2.6.11",
+        "weixin-js-sdk": "^1.6.0"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/JX3BOX/jx3box-common-ui.git"
     }
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions"
-  ],
-  "dependencies": {
-    "@jx3box/jx3box-comment-ui": "^1.8.7",
-    "@jx3box/jx3box-common": "^8.2.16",
-    "@jx3box/jx3box-data": "^3.5.8",
-    "@jx3box/jx3box-editor": "^2.1.9",
-    "@jx3box/reporter": "^0.0.4",
-    "axios": "^0.26.1",
-    "dayjs": "^1.11.0",
-    "element-ui": "^2.13.2",
-    "jquery": "^3.5.1",
-    "lodash": "^4.17.15",
-    "qrcode.vue": "^1.7.0",
-    "url": "^0.11.0",
-    "vue": "^2.6.11"
-  },
-  "devDependencies": {
-    "@babel/plugin-proposal-optional-chaining": "^7.14.5",
-    "@vue/cli-plugin-babel": "~4.3.0",
-    "@vue/cli-plugin-eslint": "~4.3.0",
-    "@vue/cli-plugin-vuex": "^4.0.0",
-    "@vue/cli-service": "~4.3.0",
-    "babel-eslint": "^10.1.0",
-    "core-js": "^3.6.5",
-    "cross-env": "^7.0.3",
-    "csslab": "^4.0.3",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^6.2.2",
-    "less": "^3.0.4",
-    "less-loader": "^5.0.0",
-    "style-resources-loader": "^1.3.3",
-    "vue-cli-plugin-element": "~1.0.1",
-    "vue-svg-inline-loader": "^1.4.6",
-    "vue-template-compiler": "^2.6.11",
-    "weixin-js-sdk": "^1.6.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/JX3BOX/jx3box-common-ui.git"
-  }
-}
+}

package/service/community.js

@@ -0,0 +1,10 @@
+import { $cms, $next } from "@jx3box/jx3box-common/js/https";
+const API_PREFIX = `/api/next2`;
+// 获取分类
+export function getTopicBucket(params) {
+    return $cms().get(`/api/cms/topic/bucket`, { params });
+}
+
+export const recoverTopicFromPosts = (data) => {
+    return $next().post(`${API_PREFIX}/community/discussion/manage/topic/recover/from/posts`, data);
+};

package/src/bread/AdminDrop.vue

@@ -11,6 +11,9 @@
                 <el-dropdown-item v-if="isEditor" command="directMessage" icon="el-icon-message">
                     <span>私信</span>
                 </el-dropdown-item>
+                <el-dropdown-item v-if="isEditor && showMove" command="onMoveToCommunity" icon="el-icon-upload">
+                    <span>转移</span>
+                </el-dropdown-item>
                 <el-dropdown-item icon="el-icon-upload" command="designTask" v-if="hasPermission('push_banner')">
                     <span>推送</span>
                 </el-dropdown-item>
@@ -18,6 +21,7 @@
         </el-dropdown>
 
         <design-task v-model="showDesignTask" :post="post"></design-task>
+        <MoveToCommunityDialog v-model="moveVisible" :post="post" />
     </div>
 </template>
 
@@ -25,13 +29,19 @@
 import Bus from "../../service/bus";
 import User from "@jx3box/jx3box-common/js/user";
 import DesignTask from "./DesignTask.vue";
+import MoveToCommunityDialog from "./MoveToCommunityDialog.vue";
 import { sendMessage } from "../../service/admin";
 export default {
     name: "AdminDrop",
     components: {
-        DesignTask
+        DesignTask,
+        MoveToCommunityDialog,
     },
     props: {
+        showMove: {
+            type: Boolean,
+            default: false,
+        },
         buttonSize: {
             type: String,
             default: "medium",
@@ -47,18 +57,19 @@ export default {
     },
     data() {
         return {
+            moveVisible: false,
             showDesignTask: false,
-        }
+        };
     },
     computed: {
         isEditor() {
             return User.isEditor();
         },
         sourceId() {
-            return this.post?.ID
+            return this.post?.ID;
         },
         sourceType() {
-            return this.post?.post_type
+            return this.post?.post_type;
         },
     },
     methods: {
@@ -68,6 +79,9 @@ export default {
         toggleAdminPanel() {
             Bus.$emit("toggleAdminPanel");
         },
+        onMoveToCommunity() {
+            this.moveVisible = true;
+        },
         directMessage() {
             this.$prompt("请输入私信内容", "管理私信", {
                 confirmButtonText: "确定",
@@ -86,25 +100,25 @@ export default {
                             user_id: this.userId,
                             content: "运营通知：" + instance.inputValue,
                             type: "system",
-                            subtype: "admin_message"
+                            subtype: "admin_message",
                         };
                         sendMessage(data).then(() => {
                             this.$message.success("私信成功");
                             done();
-                        })
+                        });
                     } else {
                         done();
                     }
-                }
-            }).catch(() => {})
+                },
+            }).catch(() => {});
         },
         designTask() {
             this.showDesignTask = true;
         },
         hasPermission(permission) {
             return User.hasPermission(permission);
-        }
-    }
+        },
+    },
 };
 </script>
 

package/src/bread/MoveToCommunityDialog.vue

@@ -0,0 +1,219 @@
+<template>
+    <el-dialog
+        custom-class="m-design-task"
+        :width="isPhone ? '95%' : '600px'"
+        :visible="modelValue"
+        @close="close"
+        title="迁移至论坛"
+        append-to-body
+    >
+        <el-form :model="form" ref="form" :label-position="isPhone ? 'top' : 'left'" label-width="80px">
+            <el-form-item label="分类">
+                <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-divider content-position="left">附图</el-divider>
+            <div class="u-imgs">
+                <div
+                    :class="`u-imgs-item ${form.banner_img === item && 'active'}`"
+                    v-for="(item, i) in form.extra_images"
+                    :key="i"
+                    @click="setBannerIndex(item)"
+                >
+                    <el-image :src="item" fit="cover" style="width: 148px; height: 148px" />
+                    <div class="u-mark">封面</div>
+                </div>
+            </div>
+        </el-form>
+        <template #footer>
+            <el-button @click="close">取 消</el-button>
+            <el-button type="primary" @click="onConfirm">确 定</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,
+            default: () => {
+                return {};
+            },
+        },
+    },
+    model: {
+        prop: "modelValue",
+        event: "update:modelValue",
+    },
+    emits: ["update:modelValue"],
+    data() {
+        return {
+            form: {
+                category: "",
+                id: "",
+                introduction: "",
+                banner_img: "",
+                extra_images: [],
+            },
+            categoryList: [],
+            isPhone: window.innerWidth < 768,
+        };
+    },
+    watch: {
+        modelValue(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);
+            this.form.extra_images = [...new Set(imgs)];
+        },
+
+        close() {
+            this.$emit("update:modelValue", false);
+        },
+        clearForm() {
+            this.form = { category: "", id: "", introduction: "", banner_img: "", extra_images: [] };
+        },
+        setBannerIndex(img) {
+            this.form.banner_img = img;
+        },
+        onConfirm() {
+            if (!this.post?.ID) {
+                this.$message.error("文章ID不存在!");
+                return;
+            }
+            if (!this.form.category) {
+                this.$message.error("请选择分类!");
+                return;
+            }
+            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-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>