@jx3box/jx3box-common-ui 7.0.1 → 7.0.3

package/assets/css/tag-by2.less

@@ -0,0 +1,19 @@
+.w-filter-tags {
+    display: inline-block;
+    .u-toggle {
+        color: #606266;
+        font-size: 14px;
+        .pointer;
+    }
+}
+
+.w-filter-tag__pop {
+    .u-group-title {
+        color: #606266;
+        padding-bottom: 10px;
+    }
+    .u-tag {
+        margin: 0 10px 10px 0;
+        .pointer;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jx3box/jx3box-common-ui",
-  "version": "7.0.1",
+  "version": "7.0.3",
   "description": "JX3BOX UI",
   "main": "index.js",
   "scripts": {
@@ -31,9 +31,9 @@
   ],
   "dependencies": {
     "@jx3box/jx3box-comment-ui": "^1.7.8",
-    "@jx3box/jx3box-common": "^7.7.2",
+    "@jx3box/jx3box-common": "^7.7.3",
     "@jx3box/jx3box-data": "^3.0.4",
-    "@jx3box/jx3box-editor": "^1.7.3",
+    "@jx3box/jx3box-editor": "^1.7.4",
     "axios": "^0.26.1",
     "dayjs": "^1.11.0",
     "element-ui": "^2.13.2",

package/service/cms.js

@@ -18,6 +18,10 @@ function getDecorationJson() {
     let url = __imgPath + "decoration/index.json";
     return axios.get(url);
 }
+function getHonorJson() {
+    let url = __imgPath + "decoration/honor.json";
+    return axios.get(url);
+}
 // 通用上传
 function upload(formData) {
     return $cms().post(`/api/cms/upload`, formData);
@@ -28,4 +32,4 @@ function checkTeamMember() {
     return $cms().get(`/api/cms/config/teammates/check`);
 }
 
-export { getPostAuthors, uploadImage, upload, getDecoration, getDecorationJson, checkTeamMember };
+export { getPostAuthors, uploadImage, upload, getDecoration, getDecorationJson, checkTeamMember, getHonorJson };

package/src/App.vue

@@ -66,6 +66,8 @@
                     <clientBy type="" />
                     <zlpBy />
 
+                    <tagBy2 v-model="tag2" :tags="post_topics" />
+
                     <hr />
                     <uploadImage
                         v-model="upload"
@@ -171,6 +173,7 @@ import orderBy from "./filters/orderBy.vue";
 import tagBy from "./filters/tagBy.vue";
 import clientBy from "./filters/clientBy.vue";
 import zlpBy from "./filters/zlpBy.vue";
+import tagBy2 from "./filters/tagBy2.vue";
 
 import uploadImage from "./upload/upload_banner.vue";
 import AuthorMedal from "./medal/medal.vue";
@@ -181,6 +184,7 @@ import WikiComments from "./wiki/WikiComments.vue";
 import axios from "axios";
 import { __server } from "@jx3box/jx3box-common/data/jx3box.json";
 import { wiki } from "@jx3box/jx3box-common/js/wiki";
+import post_topics from "@jx3box/jx3box-common/data/post_topics.json";
 
 export default {
     name: "App",
@@ -223,6 +227,7 @@ export default {
         tagBy,
         clientBy,
         zlpBy,
+        tagBy2,
 
         uploadImage,
         AuthorMedal,
@@ -249,6 +254,9 @@ export default {
 
             upload: "",
             text: `<Text>text="使用：<BUFF 3222 1 desc>，持续<BUFF 3222 1 time>。\\\n" font=105 </text><Text>text="红豆沙做馅儿，精致细腻的广式月饼。" font=100 </text><Text>text="使用：能在唐门套装供应商处换取如下装备。\\\n" font=105 </text><Text>text="[燕云·重泉靴]" name="iteminfolink" eventid=513 script="this.nVersion=0 this.dwTabType=7 this.dwIndex=35244 this.OnItemLButtonDown=function() OnItemLinkDown(this) end" font=100 r=255 g=40 b=255 </text><Text>text="，" font=105 </text><Text>text="[燕云·铭松靴]" name="iteminfolink" eventid=513 script="this.nVersion=0 this.dwTabType=7 this.dwIndex=35245 this.OnItemLButtonDown=function() OnItemLinkDown(this) end" font=100 r=255 g=40 b=255 </text><Text>text="。" font=100 </text>`,
+
+            post_topics,
+            tag2: ''
         };
     },
     created: function () {

package/src/author/AuthorFollow.vue

@@ -158,7 +158,9 @@ export default {
         cursor: default;
         &:hover {
             cursor: pointer;
-            background: #ecf5ff;
+            background: #409eff;
+            color: #fff;
+            border-color: #409eff;
         }
     }
 

package/src/author/AuthorHonor.vue

@@ -0,0 +1,116 @@
+<template>
+    <div class="c-honor" :style="{ backgroundImage: `url(${imgUrl()})` }" v-if="honor">
+        <span :style="{ color: honor.color }">{{ honor.honor }}</span>
+    </div>
+</template>
+<script>
+import { __imgPath } from "@jx3box/jx3box-common/data/jx3box.json";
+import { getDecoration, getHonorJson } from "../../service/cms";
+import { inRange } from "lodash";
+const HONOR_IMG_KEY = "honor_img";
+export default {
+    props: ["uid"],
+    data: function () {
+        return {
+            honor: "",
+        };
+    },
+    watch: {
+        uid: {
+            immediate: true,
+            handler: function (val) {
+                val && this.getHonor();
+            },
+        },
+    },
+    methods: {
+        imgUrl: function () {
+            let item = this.honor;
+            if (!item) return;
+            if (item.isImgIndex) {
+                return __imgPath + `decoration/honor/${item.val}/${item.val}_${item.imgIndex}.${item.ext}`;
+            }
+            return __imgPath + `decoration/honor/${item.val}/${item.val}.${item.ext}`;
+        },
+        getHonor() {
+            let user_id = this.uid;
+            if (!user_id) return;
+            let honor_local = sessionStorage.getItem(HONOR_IMG_KEY + user_id);
+            if (honor_local) {
+                //解析本地缓存
+                let honor_parse = JSON.parse(honor_local);
+                if (!honor_parse == "no") return;
+                this.honor = honor_parse;
+                return;
+            }
+            getDecoration({ using: 1, user_id: user_id, type: "honor" }).then((data) => {
+                let res = data.data.data;
+                if (res.length == 0) {
+                    //空 则为无主题，不再加载接口，界面设No
+                    sessionStorage.setItem(HONOR_IMG_KEY + user_id, "no");
+                    return;
+                }
+                let honor = res[0];
+                this.getHonorStyle(honor);
+            });
+        },
+        //有称号后，获取样式配置
+        getHonorStyle(data) {
+            getHonorJson().then((res) => {
+                let honorList = res.data;
+                //过滤称号信息
+                let honorConfig = honorList[data.val];
+                //正则取出前缀
+                let prefix = honorConfig.prefix;
+                let regPrefix = honorConfig.prefix.match(/(?<=\{)(.+?)(?=\})/g);
+                let ranking = honorConfig.ranking;
+                let honorStr = honorConfig.year || "";
+                if (regPrefix) {
+                    honorStr = honorStr + (data[regPrefix[0]] || "");
+                } else {
+                    honorStr = honorStr + prefix;
+                }
+                //排名处理
+                if (ranking.length > 0) {
+                    data.imgIndex = 0;
+                    for (let i = 0; i < ranking.length; i++) {
+                        //处在范围内取数组第三个值进行称号拼接
+                        if (data.ranking != undefined && inRange(Number(data.ranking), ranking[i][0], ranking[i][1])) {
+                            data.imgIndex = i;
+                            let str = ranking[i][2];
+                            //正则取出需替换值，如果没有则直接拼接
+                            let regStr = str.match(/(?<=\{)(.+?)(?=\})/g);
+                            if (regStr) {
+                                //包含花括号替换
+                                honorStr = honorStr + str.replace(/\{(.+?)\}/g, data[regStr[0]]);
+                            } else {
+                                honorStr = honorStr + str;
+                            }
+                            break;
+                        }
+                    }
+                }
+                data.honor = honorStr + honorConfig.suffix;
+                data.color = honorConfig.color;
+                data.ext = honorConfig.ext;
+                data.isHave = true;
+                data.isImgIndex = honorConfig.ranking.length > 0 ? true : false;
+                sessionStorage.setItem(HONOR_IMG_KEY + this.uid, JSON.stringify(data));
+                this.honor = data;
+            });
+        },
+    },
+};
+</script>
+<style lang="less">
+.c-honor {
+    .dbi;
+    text-align: center;
+    .mb(10px);
+    .size(220px,45px);
+    // background-color: #494038;
+    color: #ffffff;
+    .fz(10px,45px);
+    .r(2px);
+}
+</style>

package/src/author/AuthorInfo.vue

@@ -35,7 +35,7 @@
                 </div>
             </div>
         </div>
-        <div class="u-honor" :style="honorStyle" v-if="honor">{{ honor }}</div>
+        <Honor :uid="uid"></Honor>
         <div class="u-bio">{{ data.user_bio }}</div>
     </div>
 </template>
@@ -45,25 +45,23 @@ import { __server, __imgPath, __userLevel, __userLevelColor } from "@jx3box/jx3b
 import { authorLink } from "@jx3box/jx3box-common/js/utils";
 import User from "@jx3box/jx3box-common/js/user";
 import { getUserInfo } from "../../service/author";
-import { getDecoration, getDecorationJson } from "../../service/cms";
+import { getDecoration, getHonorJson } from "../../service/cms";
 import Avatar from "./Avatar.vue";
-const DECORATION_JSON = "decoration_json";
-const DECORATION_KEY = "decoration_me";
-const HONOR_KEY = "honor_me";
+import Honor from "./AuthorHonor.vue";
+import { cloneDeep, inRange } from "lodash";
+const HONOR_IMG_KEY = "honor_img";
 export default {
     name: "AuthorInfo",
     props: ["uid"],
     components: {
         Avatar,
+        Honor,
     },
     data: function () {
         return {
             data: {},
-
             isVIP: false,
             super_author_icon: __imgPath + "image/user/" + "superauthor.svg",
-            honor: "",
-            honorStyle: {},
         };
     },
     computed: {
@@ -92,7 +90,7 @@ export default {
         uid: {
             immediate: true,
             handler: function (val) {
-                val && this.loadData() && this.getHonor();
+                val && this.loadData();
             },
         },
     },
@@ -111,80 +109,6 @@ export default {
         showLevelColor: function (level) {
             return __userLevelColor[level];
         },
-        getHonor() {
-            let user_id = this.uid;
-            if (!user_id) {
-                return;
-            }
-            let honor_local = sessionStorage.getItem(HONOR_KEY + user_id);
-            if (honor_local == "no") return;
-            //已有缓存，读取解析
-            if (honor_local) {
-                this.honor = honor_local;
-                this.getHonorStyle();
-                return;
-            }
-            getDecoration({ using: 1, user_id: user_id, type: "honor" }).then((data) => {
-                let res = data.data.data;
-                if (res.length == 0) {
-                    //空 则为无主题，不再加载接口，界面设No
-                    sessionStorage.setItem(HONOR_KEY + user_id, "no");
-                    return;
-                }
-                let honor = res[0];
-                sessionStorage.setItem(HONOR_KEY + user_id, honor.val);
-                this.honor = honor.val;
-                this.getHonorStyle();
-            });
-        },
-        //有称号后，获取样式配置
-        getHonorStyle() {
-            let user_id = this.uid;
-            let decoration_local = sessionStorage.getItem(DECORATION_KEY + user_id);
-            if (decoration_local) {
-                //解析本地缓存
-                let decoration_parse = JSON.parse(decoration_local);
-                if (!decoration_parse.status) return;
-
-                if (decoration_parse) {
-                    this.setHonorStyle(decoration_parse);
-                    return;
-                }
-            }
-            getDecoration({ using: 1, user_id: user_id, type: "homebg" }).then((data) => {
-                let res = data.data.data;
-                if (res.length == 0) {
-                    //空 则为无主题，不再加载接口，界面设No
-                    sessionStorage.setItem(DECORATION_KEY + user_id, JSON.stringify({ status: false }));
-                    return;
-                }
-                let decoration = res[0];
-                let decorationJson = sessionStorage.getItem(DECORATION_JSON);
-                if (!decorationJson) {
-                    //加载远程json，用于Honor颜色配置
-                    getDecorationJson().then((json) => {
-                        let decoration_json = json.data;
-                        let theme = JSON.parse(JSON.stringify(decoration_json[decoration.val]));
-                        theme.status = true;
-                        sessionStorage.setItem(DECORATION_KEY + this.uid, JSON.stringify(theme));
-                        //缓存远程JSON文件
-                        sessionStorage.setItem(DECORATION_JSON, JSON.stringify(decoration_json));
-                        this.setHonorStyle(theme);
-                    });
-                } else {
-                    let theme = JSON.parse(decorationJson)[decoration.val];
-                    theme.status = true;
-                    sessionStorage.setItem(DECORATION_KEY + this.uid, JSON.stringify(theme));
-                    this.setHonorStyle(theme);
-                }
-            });
-        },
-        setHonorStyle(style) {
-            this.honorStyle = {
-                "background-color": style.buttoncolor,
-                color: style.buttontextcolor,
-            };
-        },
     },
     created: function () {},
     mounted: function () {},
@@ -295,12 +219,12 @@ export default {
     }
     .u-honor {
         .dbi;
-        .mt(10px);
-        background-color: #494038;
+        text-align: center;
+        .mb(10px);
+        .size(220px,45px);
+        // background-color: #494038;
         color: #ffffff;
-        padding: 2px 50px 2px 10px;
-        .fz(12px,14px);
-        .mb(6px);
+        .fz(10px,45px);
         .r(2px);
     }
 }

package/src/filters/tagBy2.vue

@@ -0,0 +1,106 @@
+<template>
+    <div class="w-filter-tags" ref="tagBy">
+        <el-popover
+            v-model="visible"
+            trigger="manual"
+            ref="pop"
+            :width="400"
+            popper-class="w-filter-tag__pop"
+            :popper-options="{ boundariesElement: 'parent' }"
+        >
+            <div class="w-filter-tag__content">
+                <div v-for="(group, key) in tags" :key="key">
+                    <div class="u-group-title">{{ key }}</div>
+                    <div class="u-group">
+                        <el-tag
+                            v-for="item in group"
+                            :key="item"
+                            @click="onTagClick(item)"
+                            class="u-tag"
+                            :effect="item === value ? 'dark' : 'plain'"
+                            >{{ item }}</el-tag
+                        >
+                    </div>
+                </div>
+            </div>
+
+            <template #reference>
+                <span @click="onToggle" class="u-toggle" :class="{ active: !!value }">{{ activeText }}</span>
+            </template>
+        </el-popover>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "tagBy2",
+    props: {
+        tags: {
+            type: Object,
+            default: () => {},
+        },
+        modelValue: {
+            type: String,
+            default: "",
+        },
+    },
+    emits: ["update:modelValue"],
+    model: {
+        prop: "modelValue",
+        event: "update:modelValue",
+    },
+    data() {
+        return {
+            visible: false,
+            value: "",
+        };
+    },
+    computed: {
+        activeText() {
+            const { value } = this;
+            return value ? value : "主题";
+        },
+    },
+    watch: {
+        modelValue: {
+            immediate: true,
+            handler(val) {
+                this.value = val;
+            },
+        },
+        value(val) {
+            this.$emit("update:modelValue", val);
+        },
+    },
+    mounted() {
+        document.addEventListener("click", this.clickOutside);
+    },
+    beforeDestroy() {
+        document.removeEventListener("click", this.clickOutside);
+    },
+    methods: {
+        onToggle() {
+            this.visible = !this.visible;
+        },
+        onTagClick(item) {
+            this.value = item;
+
+            setTimeout(() => {
+                this.visible = false;
+            }, 100);
+        },
+        clickOutside(e) {
+            const tagBy = this.$refs.tagBy;
+            const pop = this.$refs.pop;
+
+            if (tagBy && !tagBy.contains(e.target) && pop && !pop.$el.contains(e.target)) {
+                this.visible = false;
+            }
+        },
+    },
+};
+</script>
+
+<style lang="less">
+@import "../../assets/css/tag-by2.less";
+</style>