@jx3box/jx3box-common-ui 7.0.4 → 7.0.6

package/index.js

@@ -27,6 +27,7 @@ import orderBy from "./src/filters/orderBy.vue";
 import menuBy from "./src/filters/menuBy.vue";
 import clientBy from "./src/filters/clientBy.vue";
 import zlpBy from "./src/filters/zlpBy.vue";
+import topicBy from "./src/filters/topicBy.vue";
 
 import Thx from './src/single/Thx.vue'
 import WikiPanel from './src/wiki/WikiPanel.vue'
@@ -46,7 +47,7 @@ const components = {
     RightSideMsg,
     Author,
     Avatar,
-    
+
     Thx,
     Like,
     Down,
@@ -63,6 +64,7 @@ const components = {
     menuBy,
     clientBy,
     zlpBy,
+    topicBy,
 
     WikiPanel,
 }

package/package.json

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

package/src/App.vue

@@ -15,7 +15,7 @@
 
         <LeftSidebar :open="true" :uid="8">
             <LeftSideToggle :mobileOnly="true" />
-            <Author :author="author" :uid="6037" />
+            <Author :author="author" :uid="37" />
         </LeftSidebar>
 
         <Main :withoutLeft="false" :withoutRight="false">
@@ -66,7 +66,7 @@
                     <clientBy type="" />
                     <zlpBy />
 
-                    <tagBy2 v-model="tag2" :topics="post_topics" />
+                    <topicBy v-model="tag2" :topics="post_topics" />
 
                     <hr />
                     <uploadImage
@@ -173,7 +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 topicBy from "./filters/topicBy.vue";
 
 import uploadImage from "./upload/upload_banner.vue";
 import AuthorMedal from "./medal/medal.vue";
@@ -227,7 +227,7 @@ export default {
         tagBy,
         clientBy,
         zlpBy,
-        tagBy2,
+        topicBy,
 
         uploadImage,
         AuthorMedal,

package/src/author/AuthorFans.vue

@@ -157,8 +157,8 @@ export default {
         .fz(12px, 14px);
         font-weight: 400;
         color: #888;
-        transform: scale(0.8);
-        transform-origin: 0 0;
+        // transform: scale(0.8);
+        // transform-origin: 0 0;
     }
 }
 </style>

package/src/author/AuthorFollow.vue

@@ -6,14 +6,12 @@
             :class="{ 'is-follow': isFollow, 'u-fans-box': isSelf }"
             size="mini"
             plain
-            :icon="btnIcon"
+            icon="el-icon-plus"
             @click="follow"
             :loading="loading"
             :disabled="isSelf"
+            >{{ btnText }}</el-button
         >
-            {{ btnText }}
-            <!-- <span class="u-follow-count">{{ formatFansNum(fansNum) }} </span> -->
-        </el-button>
         <el-popover
             v-else
             placement="bottom"
@@ -26,11 +24,9 @@
                     {{ item.label }}
                 </div>
             </div>
-            <el-button class="u-trigger" size="mini" :type="btnType" slot="reference"
-                >{{ btnText }}
-                <!-- TODO:后续在粉丝榜中展示粉丝数 -->
-                <!-- <span class="u-follow-count">{{ formatFansNum(fansNum) }}</span> -->
-            </el-button>
+            <el-button class="u-trigger" size="mini" :type="btnType" plain slot="reference" icon="el-icon-check">{{
+                btnText
+            }}</el-button>
         </el-popover>
     </div>
 </template>
@@ -55,10 +51,7 @@ export default {
     },
     computed: {
         btnText() {
-            return this.isFollow ? "已关注" : "关注";
-        },
-        btnIcon() {
-            return this.isSelf ? "el-icon-plus" : this.isFollow ? "" : "el-icon-plus";
+            return this.isFollow ? "已粉" : "关注";
         },
         btnType() {
             return this.isFollow ? "info" : "warning";
@@ -158,9 +151,9 @@ export default {
         cursor: default;
         &:hover {
             cursor: pointer;
-            background: #409eff;
+            background-color: @light-pink;
             color: #fff;
-            border-color: #409eff;
+            border-color: darken(@light-pink, 2%);
         }
     }
 
@@ -178,21 +171,21 @@ export default {
 }
 .c-author-follow-popover {
     //.u-follow-popover {
-        &.el-popover {
-            min-width: 100px;
-            padding: 0;
-            margin-top: 5px;
-            .u-action-list {
-                .u-action-item {
-                    text-align: center;
-                    cursor: pointer;
-                    padding: 8px 10px;
-                    &:hover {
-                        background: rgb(248, 248, 251);
-                    }
+    &.el-popover {
+        min-width: 100px;
+        padding: 0;
+        margin-top: 5px;
+        .u-action-list {
+            .u-action-item {
+                text-align: center;
+                cursor: pointer;
+                padding: 8px 10px;
+                &:hover {
+                    background: rgb(248, 248, 251);
                 }
             }
         }
+    }
     //}
     .u-follow-count {
         margin-left: 5px;

package/src/author/AuthorGift.vue

@@ -69,7 +69,7 @@ export default {
         return {
             loading: false,
             visible: false,
-            fitPoints: [50,100, 250, 520, 666, 888, 1314, 2288, 3344, 6666, 8888, 28888, 36888, 68888],
+            fitPoints: [50, 100, 250, 520, 666, 888, 1314, 2288, 3344, 6666, 8888, 28888, 36888, 68888],
 
             left: 0, //剩余量
             status: true, //默认可打赏
@@ -201,16 +201,15 @@ export default {
 <style scoped lang="less">
 .c-author-gift {
     .u-btn {
-        @color: #f9afd4;
-
-        background-color: #fff;
-        color: darken(@color, 10%);
-        border-color: darken(@color, 10%);
+        // @color: #f9afd4;
+        // background-color: #fff;
+        // color: darken(@color, 10%);
+        // border-color: darken(@color, 10%);
 
         &:hover {
-            background-color: @color;
+            background-color: @light-pink;
             color: #fff;
-            border-color: darken(@color, 2%);
+            border-color: darken(@light-pink, 2%);
         }
 
         &.is-disabled {
@@ -246,7 +245,7 @@ export default {
             .y;
             vertical-align: text-bottom;
         }
-        .u-charge{
+        .u-charge {
             .ml(8px);
         }
         .el-progress {

package/src/author/AuthorHonor.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="c-honor" :style="{ backgroundImage: `url(${imgUrl()})` }" v-if="honor">
+    <div class="c-author-honor" :style="{ backgroundImage: `url(${imgUrl()})` }" v-if="honor">
         <span :style="{ color: honor.color }">{{ honor.honor }}</span>
     </div>
 </template>
@@ -58,31 +58,29 @@ export default {
         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 regPrefix = honorConfig.prefix.match(/\{([^{}]+?)\}/g);
                 let ranking = honorConfig.ranking;
                 let honorStr = honorConfig.year || "";
                 if (regPrefix) {
-                    honorStr = honorStr + (data[regPrefix[0]] || "");
+                    honorStr = honorStr + (data[regPrefix[0].slice(1, -1)] || "");
                 } 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])) {
+                        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);
+                            let regStr = str.match(/\{([^{}]+?)\}/g);
                             if (regStr) {
-                                //包含花括号替换
-                                honorStr = honorStr + str.replace(/\{(.+?)\}/g, data[regStr[0]]);
+                                honorStr =
+                                    honorStr +
+                                    str.replace(/\{([^{}]+?)\}/g, function (match, p1) {
+                                        return data[p1] || "";
+                                    });
                             } else {
                                 honorStr = honorStr + str;
                             }
@@ -94,7 +92,7 @@ export default {
                 data.color = honorConfig.color;
                 data.ext = honorConfig.ext;
                 data.isHave = true;
-                data.isImgIndex = honorConfig.ranking.length > 0 ? true : false;
+                data.isImgIndex = ranking.length > 0;
                 sessionStorage.setItem(HONOR_IMG_KEY + this.uid, JSON.stringify(data));
                 this.honor = data;
             });
@@ -103,14 +101,14 @@ export default {
 };
 </script>
 <style lang="less">
-.c-honor {
+.c-author-honor {
     .dbi;
     text-align: center;
     .mb(10px);
     .size(220px,45px);
-    // background-color: #494038;
     color: #ffffff;
     .fz(10px,45px);
     .r(2px);
+    background-size: 100% 100%;
 }
 </style>

package/src/filters/{tagBy2.vue → topicBy.vue}

@@ -1,20 +1,22 @@
 <template>
-    <div class="w-filter-topics" ref="tagBy">
+    <div class="w-filter-topic" ref="tagBy">
         <el-popover
             v-model="visible"
             trigger="manual"
             ref="pop"
-            :width="400"
+            :width="380"
             popper-class="w-filter-topic__pop"
             :popper-options="{ boundariesElement: 'parent' }"
         >
-            <div class="w-filter-tag__content">
+            <div class="w-filter-topic__content">
                 <div class="u-group">
                     <el-tag
-                        v-for="item in computedTopics" :key="item"
+                        v-for="item in computedTopics"
+                        :key="item"
                         @click="onTagClick(item)"
-                        class="u-group-item u-tag"
-                        :effect="item === value ? 'dark' : 'plain'"
+                        class="u-group-item u-topic"
+                        :effect="item === value ? 'dark' : 'light'"
+                        size="small"
                         >{{ item }}</el-tag
                     >
                 </div>
@@ -61,18 +63,18 @@ export default {
             return value === "全部" ? "主题" : value;
         },
         computedTopics() {
-            return ['全部', ...this.topics]
+            return ["全部", ...this.topics];
         },
     },
     watch: {
         modelValue: {
             immediate: true,
             handler(val) {
-                this.value = val === '' ? '全部' : val;
+                this.value = val === "" ? "全部" : val;
             },
         },
         value(val) {
-            if (val === '全部') val = ''
+            if (val === "全部") val = "";
             this.$emit("update:modelValue", val);
         },
     },
@@ -106,5 +108,38 @@ export default {
 </script>
 
 <style lang="less">
-@import "../../assets/css/tag-by2.less";
+.w-filter-topic {
+    display: inline-block;
+    .u-toggle {
+        color: #606266;
+        font-size: 12px;
+        .pointer;
+    }
+}
+.w-filter-topic__content {
+    padding: 5px;
+}
+.w-filter-topic__pop {
+    .u-group-title {
+        color: #606266;
+        padding-bottom: 10px;
+    }
+    .u-group {
+        .flex;
+        flex-wrap: wrap;
+        gap: 10px;
+    }
+    .u-topic {
+        .pointer;
+        border: 1px solid transparent;
+        line-height: 26px;
+        height: 28px;
+        &:not(.el-tag--dark) {
+            background-color: #f1f8ff;
+        }
+        &:hover {
+            border: 1px solid @color-link;
+        }
+    }
+}
 </style>

package/assets/css/tag-by2.less

@@ -1,23 +0,0 @@
-.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;
-    }
-}