@jx3box/jx3box-common-ui 7.0.2 → 7.0.4

package/assets/css/tag-by2.less

@@ -0,0 +1,23 @@
+.w-filter-topics {
+    display: inline-block;
+    .u-toggle {
+        color: #606266;
+        font-size: 12px;
+        .pointer;
+    }
+}
+
+.w-filter-topic__pop {
+    .u-group-title {
+        color: #606266;
+        padding-bottom: 10px;
+    }
+    .u-group {
+        .flex;
+        flex-wrap: wrap;
+        gap: 10px;
+    }
+    .u-tag {
+        .pointer;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jx3box/jx3box-common-ui",
-  "version": "7.0.2",
+  "version": "7.0.4",
   "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/src/App.vue

@@ -66,6 +66,8 @@
                     <clientBy type="" />
                     <zlpBy />
 
+                    <tagBy2 v-model="tag2" :topics="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: post_topics['pve'],
+            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/filters/tagBy2.vue

@@ -0,0 +1,110 @@
+<template>
+    <div class="w-filter-topics" ref="tagBy">
+        <el-popover
+            v-model="visible"
+            trigger="manual"
+            ref="pop"
+            :width="400"
+            popper-class="w-filter-topic__pop"
+            :popper-options="{ boundariesElement: 'parent' }"
+        >
+            <div class="w-filter-tag__content">
+                <div class="u-group">
+                    <el-tag
+                        v-for="item in computedTopics" :key="item"
+                        @click="onTagClick(item)"
+                        class="u-group-item u-tag"
+                        :effect="item === value ? 'dark' : 'plain'"
+                        >{{ item }}</el-tag
+                    >
+                </div>
+            </div>
+
+            <template #reference>
+                <span @click="onToggle" class="u-toggle" :class="{ active: !!value }">
+                    <i class="el-icon-s-operation"></i>
+                    {{ activeText }}
+                    <i class="el-icon-arrow-down el-icon--right"></i>
+                </span>
+            </template>
+        </el-popover>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "tagBy2",
+    props: {
+        topics: {
+            type: Array,
+            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;
+        },
+        computedTopics() {
+            return ['全部', ...this.topics]
+        },
+    },
+    watch: {
+        modelValue: {
+            immediate: true,
+            handler(val) {
+                this.value = val === '' ? '全部' : val;
+            },
+        },
+        value(val) {
+            if (val === '全部') 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>