@jx3box/jx3box-ui 2.3.17 → 2.3.19

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-ui",
-    "version": "2.3.17",
+    "version": "2.3.19",
     "description": "JX3BOX Vue3 UI",
     "main": "index.js",
     "scripts": {
@@ -34,8 +34,8 @@
         "@element-plus/icons-vue": "^2.3.2",
         "@jx3box/jx3box-common": "^9.2.9",
         "@jx3box/jx3box-data": "^3.9.6",
-        "@jx3box/jx3box-editor": "^3.2.9",
-        "@jx3box/jx3box-emotion": "^1.3.1",
+        "@jx3box/jx3box-editor": "^3.2.11",
+        "@jx3box/jx3box-emotion": "^1.3.2",
         "@jx3box/jx3box-macro": "^1.0.4",
         "@jx3box/jx3box-talent": "^1.3.14",
         "@tinymce/tinymce-vue": "^5.1.1",

package/service/author.js

@@ -34,9 +34,10 @@ async function getDouyu(ids) {
     return res.data.data;
 }
 
+// 兼容备用：公共作者组件已改用 /user/skin 聚合数据
 async function getUserMedals(uid, params) {
     return $next({ mute: true })
-        .get("/api/next2/user/" + uid + "/medals", {params})
+        .get("/api/next2/user/" + uid + "/medals", { params })
         .then((res) => {
             return res.data.data;
         });

package/service/cms.js

@@ -170,6 +170,7 @@ function refreshAuth() {
     return $cms().post(`/api/cms/user/account/token/refresh`);
 }
 
+// 兼容备用：公共作者组件已改用 /user/skin 聚合数据
 function getUserHonor(uid) {
     return $cms({ mute: true }).get(`/api/cms/user/honor/${uid}/using`);
 }

package/src/author/AuthorHonor.vue

@@ -1,76 +1,47 @@
 <template>
-    <a class="c-author-honor" :style="{ backgroundImage: `url(${imgUrl()})` }" v-if="honor" :href="url" target="_blank">
-        <span :style="{ color: honor.color }">{{ honor.honor }}</span>
+    <a
+        class="c-author-honor"
+        :style="{ backgroundImage: `url(${imgUrl()})` }"
+        v-if="displayHonor"
+        :href="url"
+        target="_blank"
+    >
+        <span :style="{ color: displayHonor.color }">{{ displayHonor.honor }}</span>
     </a>
 </template>
 <script>
 import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
-import { getUserHonor } from "../../service/cms";
 import { inRange } from "lodash";
 
 const { __cdn, __Root } = JX3BOX;
-const HONOR_IMG_KEY = "honor_img";
 export default {
     props: {
-        uid: {
-            type: [Number, String],
-            default: 0,
-        },
-    },
-    data: function () {
-        return {
-            honor: "",
-        };
-    },
-    watch: {
-        uid: {
-            immediate: true,
-            handler: function (val) {
-                val && this.getHonor();
-            },
+        honor: {
+            type: Object,
+            default: null,
         },
     },
     computed: {
-        isJdt() {
-            return this.honor?.val?.toLowerCase()?.includes("jdt");
+        displayHonor() {
+            return this.formatHonor(this.honor);
         },
         url() {
-            return this.honor?.honor_info?.url ? __Root + this.honor?.honor_info?.url : "";
+            return this.displayHonor?.honor_info?.url ? __Root + this.displayHonor.honor_info.url : "";
         },
     },
     methods: {
         imgUrl: function () {
-            let item = this.honor?.honor_info;
+            let item = this.displayHonor?.honor_info;
             if (!item) return;
-            return __cdn + `design/decoration/honor/${item.img}/${item.img}.${item.img_ext}`;
-        },
-        getHonor() {
-            let user_id = this.uid;
-            if (!user_id) return;
-            let honor_local = sessionStorage.getItem(HONOR_IMG_KEY + user_id) || "";
-            //解析本地缓存
-            if (honor_local == "no") return;
-            try {
-                this.honor = JSON.parse(honor_local);
-            } catch (err) {
-                getUserHonor(user_id).then((res) => {
-                    this.honor = res.data.data;
-                    if (!this.honor) {
-                        //空 则为无主题，不再加载接口，界面设No
-                        sessionStorage.setItem(HONOR_IMG_KEY + user_id, "no");
-                        return;
-                    }
-                    this.getHonorStyle(this.honor);
-                });
-            }
+            return __cdn + `design/decoration/honor/${item.img}/${item.img}.${item.img_ext || "png"}`;
         },
-        //有称号后，获取样式配置
-        getHonorStyle(honor) {
-            const data = honor;
+        formatHonor(honor) {
+            if (!honor?.honor_info) return null;
+            const data = { ...honor };
             let honorConfig = honor?.honor_info;
             let only = honorConfig.only;
-            let prefix = honorConfig.prefix;
-            let regPrefix = honorConfig.prefix.match(/\{([^{}]+?)\}/g);
+            let prefix = honorConfig.prefix || "";
+            let regPrefix = prefix.match(/\{([^{}]+?)\}/g);
             let ranking = honorConfig.ranking || [];
             let honorStr = honorConfig.year || "";
 
@@ -103,14 +74,13 @@ export default {
                     }
                 }
             }
-            data.honor = honorStr + honorConfig.suffix;
+            data.honor = honorStr + (honorConfig.suffix || "");
             data.color = honorConfig.color;
             data.img = honorConfig.img;
             data.img_ext = honorConfig.img_ext;
             data.isHave = true;
             data.isImgIndex = ranking?.length > 0;
-            sessionStorage.setItem(HONOR_IMG_KEY + this.uid, JSON.stringify(data));
-            this.honor = data;
+            return data;
         },
     },
 };

package/src/author/AuthorInfo.vue

@@ -63,7 +63,7 @@
                 </div>
             </div>
         </div>
-        <Honor :uid="uid"></Honor>
+        <Honor :honor="honor"></Honor>
         <div class="u-bio">{{ data.user_bio }}</div>
     </div>
 </template>
@@ -91,6 +91,10 @@ export default {
             type: [Number, String],
             default: 0,
         },
+        honor: {
+            type: Object,
+            default: null,
+        },
     },
     components: {
         Avatar,

package/src/author/AuthorMedals.vue

@@ -24,7 +24,6 @@
 <script>
 import * as utilModule from "@jx3box/jx3box-common/js/utils";
 const { getMedalLink } = utilModule;
-import { getUserMedals } from "../../service/author";
 import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
 import i18nMixin from "../../i18n/mixin";
 const { __cdn, __Root } = JX3BOX;
@@ -32,32 +31,19 @@ const { __cdn, __Root } = JX3BOX;
 export default {
     name: "AuthorMedals",
     mixins: [i18nMixin],
-    props: ["uid"],
-    components: {},
-    data: function () {
-        return {
-            medals: [],
-        };
+    props: {
+        medals: {
+            type: Array,
+            default: () => [],
+        },
     },
+    components: {},
     computed: {
         ready: function () {
-            return this.uid && this.medals && this.medals.length;
-        },
-    },
-    watch: {
-        uid: {
-            immediate: true,
-            handler: function (val) {
-                val && this.loadMedals();
-            },
+            return this.medals && this.medals.length;
         },
     },
     methods: {
-        loadMedals: function () {
-            getUserMedals(this.uid, {is_wear: 1}).then((data) => {
-                this.medals = data || [];
-            });
-        },
         showIcon(medal) {
             return __cdn + "design/medals/user/" + medal + ".webp";
         },

package/src/single/Author.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="c-author" :style="decorationStyles">
-        <AuthorInfo :uid="uid" :anonymous="anonymous" @ready="installModules" />
+        <AuthorInfo :uid="uid" :anonymous="anonymous" :honor="activeHonor" @ready="installModules" />
         <template v-if="data">
             <div class="u-interact">
                 <!-- <AuthorFollow style="margin-right: 8px;" :uid="uid" /> -->
@@ -13,7 +13,7 @@
             </div>
             <!-- <AuthorLink class="u-block u-links" :uid="uid" :data="data" /> -->
             <AuthorRole class="u-block u-roles" :data="data" />
-            <AuthorMedals class="u-block u-trophy" :uid="uid" />
+            <AuthorMedals class="u-block u-trophy" :medals="activeMedals" />
             <!-- <AuthorTeams class="u-block u-teams" :uid="uid" /> -->
             <!-- <AuthorFans class="u-block u-fans" :uid="uid" /> -->
             <slot></slot>
@@ -73,6 +73,8 @@ export default {
             data: "",
             sidebarSkin: "",
             sidebarSkinPosition: "",
+            activeHonor: null,
+            activeMedals: [],
         };
     },
     computed: {
@@ -89,6 +91,8 @@ export default {
         uid() {
             this.sidebarSkin = "";
             this.sidebarSkinPosition = "";
+            this.activeHonor = null;
+            this.activeMedals = [];
             this.loadSidebarSkin();
         },
     },
@@ -146,6 +150,8 @@ export default {
 
             getUserSkin(this.uid).then((res) => {
                 const records = res.data.data || [];
+                this.activeHonor = records.find((item) => item?.type === "honor")?.honor || null;
+                this.activeMedals = records.find((item) => item?.type === "medals")?.medals || [];
                 const record = records.find((item) => this.resolveSkinDetail(item));
                 if (record && this.setSidebarSkin(record)) {
                     return;

package/tests/author-pc-sidebar-skin.test.js

@@ -5,6 +5,8 @@ const root = path.resolve(__dirname, "..");
 const service = fs.readFileSync(path.join(root, "service/cms.js"), "utf8");
 const author = fs.readFileSync(path.join(root, "src/single/Author.vue"), "utf8");
 const authorInfo = fs.readFileSync(path.join(root, "src/author/AuthorInfo.vue"), "utf8");
+const authorHonor = fs.readFileSync(path.join(root, "src/author/AuthorHonor.vue"), "utf8");
+const authorMedals = fs.readFileSync(path.join(root, "src/author/AuthorMedals.vue"), "utf8");
 const authorStyle = fs.readFileSync(path.join(root, "assets/css/single/author.less"), "utf8");
 
 function assert(condition, message) {
@@ -23,6 +25,22 @@ assert(author.includes('item.subtype === "pc_sidebar"'), "Author should consume
 
 assert(author.includes("record.skins"), "Author should resolve active skin resources from skins[]");
 
+assert(author.includes('item?.type === "honor"'), "Author should read active honor from the user skin response");
+
+assert(author.includes('item?.type === "medals"'), "Author should read active medals from the user skin response");
+
+assert(author.includes(':medals="activeMedals"'), "Author should pass active medals to AuthorMedals");
+
+assert(!authorMedals.includes("getUserMedals"), "AuthorMedals should not request medals independently");
+
+assert(!authorMedals.includes("getUserMedals"), "AuthorMedals should not request the legacy medal endpoint");
+
+assert(authorInfo.includes(':honor="honor"'), "AuthorInfo should pass the active honor to AuthorHonor");
+
+assert(!authorHonor.includes("sessionStorage"), "AuthorHonor should not use session storage");
+
+assert(!authorHonor.includes("getUserHonor"), "AuthorHonor should not request the legacy active honor endpoint");
+
 assert(author.includes("backgroundPosition: this.sidebarSkinPosition"), "Author should apply skin position");
 
 assert(author.includes('rt: "right top"'), "Author should map rt to right top");