@jx3box/jx3box-ui 2.3.18 → 2.3.20

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-ui",
-    "version": "2.3.18",
+    "version": "2.3.20",
     "description": "JX3BOX Vue3 UI",
     "main": "index.js",
     "scripts": {
@@ -35,7 +35,7 @@
         "@jx3box/jx3box-common": "^9.2.9",
         "@jx3box/jx3box-data": "^3.9.6",
         "@jx3box/jx3box-editor": "^3.2.11",
-        "@jx3box/jx3box-emotion": "^1.3.1",
+        "@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/src/author/AuthorHonor.vue

@@ -11,30 +11,67 @@
 </template>
 <script>
 import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+import { getUserHonor } from "../../service/cms";
 import { inRange } from "lodash";
 
 const { __cdn, __Root } = JX3BOX;
 export default {
     props: {
+        uid: {
+            type: [Number, String],
+            default: 0,
+        },
         honor: {
             type: Object,
-            default: null,
         },
     },
+    data: function () {
+        return {
+            legacyHonor: null,
+            honorRequestId: 0,
+        };
+    },
     computed: {
         displayHonor() {
-            return this.formatHonor(this.honor);
+            const honor = this.honor !== undefined ? this.honor : this.legacyHonor;
+            return this.formatHonor(honor);
+        },
+        legacyRequestKey() {
+            return this.honor === undefined && this.uid ? String(this.uid) : "";
         },
         url() {
             return this.displayHonor?.honor_info?.url ? __Root + this.displayHonor.honor_info.url : "";
         },
     },
+    watch: {
+        legacyRequestKey: {
+            immediate: true,
+            handler(key) {
+                this.loadLegacyHonor(key);
+            },
+        },
+    },
     methods: {
         imgUrl: function () {
             let item = this.displayHonor?.honor_info;
             if (!item) return;
             return __cdn + `design/decoration/honor/${item.img}/${item.img}.${item.img_ext || "png"}`;
         },
+        loadLegacyHonor(key) {
+            const requestId = ++this.honorRequestId;
+            this.legacyHonor = null;
+            if (!key) return;
+
+            getUserHonor(this.uid)
+                .then((res) => {
+                    if (requestId !== this.honorRequestId || key !== this.legacyRequestKey) return;
+                    this.legacyHonor = res?.data?.data || null;
+                })
+                .catch(() => {
+                    if (requestId !== this.honorRequestId || key !== this.legacyRequestKey) return;
+                    this.legacyHonor = null;
+                });
+        },
         formatHonor(honor) {
             if (!honor?.honor_info) return null;
             const data = { ...honor };

package/src/author/AuthorInfo.vue

@@ -63,7 +63,7 @@
                 </div>
             </div>
         </div>
-        <Honor :honor="honor"></Honor>
+        <Honor :uid="uid" :honor="honor"></Honor>
         <div class="u-bio">{{ data.user_bio }}</div>
     </div>
 </template>
@@ -93,7 +93,6 @@ export default {
         },
         honor: {
             type: Object,
-            default: null,
         },
     },
     components: {

package/src/author/AuthorMedals.vue

@@ -4,13 +4,13 @@
             <img svg-inline src="../../assets/img/leftsidebar/medal.svg" />
             <span>{{ $jx3boxT("jx3boxUi.authorMedals.title", "作者荣誉") }}</span>
         </div>
-        <div class="u-medals" v-if="medals && medals.length">
+        <div class="u-medals" v-if="displayMedals.length">
             <el-tooltip
                 class="item"
                 effect="dark"
                 :content="item.medal_desc"
                 placement="top"
-                v-for="item in medals"
+                v-for="item in displayMedals"
                 :key="item.id"
             >
                 <a :href="getMedalLink(item)" target="_blank" class="u-medal">
@@ -24,6 +24,7 @@
 <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,18 +33,59 @@ export default {
     name: "AuthorMedals",
     mixins: [i18nMixin],
     props: {
+        uid: {
+            type: [Number, String],
+            default: 0,
+        },
         medals: {
             type: Array,
-            default: () => [],
         },
     },
     components: {},
+    data: function () {
+        return {
+            legacyMedals: [],
+            medalsRequestId: 0,
+        };
+    },
     computed: {
+        displayMedals: function () {
+            if (this.medals !== undefined) {
+                return Array.isArray(this.medals) ? this.medals : [];
+            }
+            return this.legacyMedals;
+        },
+        legacyRequestKey: function () {
+            return this.medals === undefined && this.uid ? String(this.uid) : "";
+        },
         ready: function () {
-            return this.medals && this.medals.length;
+            return this.displayMedals.length;
+        },
+    },
+    watch: {
+        legacyRequestKey: {
+            immediate: true,
+            handler: function (key) {
+                this.loadLegacyMedals(key);
+            },
         },
     },
     methods: {
+        loadLegacyMedals: function (key) {
+            const requestId = ++this.medalsRequestId;
+            this.legacyMedals = [];
+            if (!key) return;
+
+            getUserMedals(this.uid, { is_wear: 1 })
+                .then((data) => {
+                    if (requestId !== this.medalsRequestId || key !== this.legacyRequestKey) return;
+                    this.legacyMedals = Array.isArray(data) ? data : [];
+                })
+                .catch(() => {
+                    if (requestId !== this.medalsRequestId || key !== this.legacyRequestKey) return;
+                    this.legacyMedals = [];
+                });
+        },
         showIcon(medal) {
             return __cdn + "design/medals/user/" + medal + ".webp";
         },
@@ -63,7 +105,7 @@ export default {
     .u-medals {
         display: flex;
         flex-wrap: wrap;
-        gap:5px;
+        gap: 5px;
         margin-top: 5px;
     }
     .u-medal {

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

@@ -31,15 +31,41 @@ assert(author.includes('item?.type === "medals"'), "Author should read active me
 
 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 retain the legacy uid endpoint");
 
-assert(!authorMedals.includes("getUserMedals"), "AuthorMedals should not request the legacy medal endpoint");
+assert(
+    authorMedals.includes("this.medals === undefined && this.uid"),
+    "AuthorMedals should only use the legacy endpoint when the new medals prop is absent"
+);
 
-assert(authorInfo.includes(':honor="honor"'), "AuthorInfo should pass the active honor to AuthorHonor");
+assert(
+    authorMedals.includes("requestId !== this.medalsRequestId"),
+    "AuthorMedals should ignore stale legacy endpoint responses"
+);
+
+assert(
+    authorInfo.includes('<Honor :uid="uid" :honor="honor">'),
+    "AuthorInfo should pass both the legacy uid and the active honor to AuthorHonor"
+);
+
+assert(
+    !/honor:\s*\{[\s\S]*?default:\s*null/.test(authorInfo),
+    "AuthorInfo should leave an omitted honor undefined so legacy uid consumers still load it"
+);
 
 assert(!authorHonor.includes("sessionStorage"), "AuthorHonor should not use session storage");
 
-assert(!authorHonor.includes("getUserHonor"), "AuthorHonor should not request the legacy active honor endpoint");
+assert(authorHonor.includes("getUserHonor"), "AuthorHonor should retain the legacy uid endpoint");
+
+assert(
+    authorHonor.includes("this.honor === undefined && this.uid"),
+    "AuthorHonor should only use the legacy endpoint when the new honor prop is absent"
+);
+
+assert(
+    authorHonor.includes("requestId !== this.honorRequestId"),
+    "AuthorHonor should ignore stale legacy endpoint responses"
+);
 
 assert(author.includes("backgroundPosition: this.sidebarSkinPosition"), "Author should apply skin position");