@jx3box/jx3box-ui 2.3.3 → 2.3.5

package/assets/css/interact/share2.less

@@ -35,7 +35,10 @@
             }
 
             .u-share2-item {
-                .dbi;
+                display: inline-flex;
+                flex-direction: column;
+                align-items: center;
+
                 cursor: pointer;
                 text-align: center;
                 width: 55px;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-ui",
-    "version": "2.3.3",
+    "version": "2.3.5",
     "description": "JX3BOX Vue3 UI",
     "main": "index.js",
     "scripts": {

package/service/cms.js

@@ -19,6 +19,11 @@ function getDecoration(params) {
         params,
     });
 }
+function getDecorationV2(params) {
+    return $cms().get(`/api/cms/user/decoration/v2`, {
+        params,
+    });
+}
 function getDecorationJson() {
     let url = JX3BOX.__cdn + "design/decoration/index.json";
     return axios.get(url);
@@ -143,6 +148,7 @@ export {
     uploadImage,
     upload,
     getDecoration,
+    getDecorationV2,
     getDecorationJson,
     checkTeamMember,
     getSliders,

package/src/App.vue

@@ -18,8 +18,8 @@
                 <AdminDrop :post="community" :isCommunity="false" :user-id="8" :showMove="true" />
             </template>
         </breadcrumb>
-        <LeftSidebar :open="true" :uid="8">
-            <Author :uid="8" />
+        <LeftSidebar :open="true" :uid="8719">
+            <Author :uid="8719" />
         </LeftSidebar>
         <Main :withoutLeft="false" :withoutRight="false">
             <el-tabs v-model="tab" type="card">
@@ -232,7 +232,8 @@ export default {
         return {
             tab: "content",
 
-            post_id: "19382",
+            // post_id: "19382",
+            post_id: "99808",
             post: {},
             client: location.href.includes("origin") ? "origin" : "std",
             item1: null,

package/src/LeftSidebar.vue

@@ -7,7 +7,7 @@
             'without-bread': withoutBread,
         }"
         v-if="!isApp"
-        :style="{ backgroundImage: `url(${bg})` }"
+        :style="decorationStyles"
     >
         <div class="c-sidebar-left-inner">
             <slot></slot>
@@ -29,10 +29,23 @@
 <script>
 import Bus from "../utils/bus";
 import { isApp } from "../assets/js/app.js";
-import { getDecoration } from "../service/cms";
+import { getDecorationV2 } from "../service/cms";
 import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
 import i18nMixin from "../i18n/mixin";
-const DECORATION_SIDEBAR = "decoration_sidebar";
+const { __cdn } = JX3BOX;
+const DECORATION_SIDEBAR = "decoration_sidebar_v2_";
+const DECORATION_EMPTY_VALUE = "no";
+const DECORATION_POSITION_MAP = {
+    lt: "left top",
+    ct: "center top",
+    rt: "right top",
+    lc: "left center",
+    cc: "center center",
+    rc: "right center",
+    lb: "left bottom",
+    cb: "center bottom",
+    rb: "right bottom",
+};
 export default {
     name: "LeftSidebar",
     mixins: [i18nMixin],
@@ -43,12 +56,21 @@ export default {
             user_id: null,
             isApp: isApp(),
             bg: "",
+            decorationPosition: "",
         };
     },
     computed: {
         stickyHeader: function () {
             return this.withoutBread;
         },
+        decorationStyles() {
+            return this.bg
+                ? {
+                      backgroundImage: `url(${this.bg})`,
+                      backgroundPosition: this.decorationPosition,
+                  }
+                : null;
+        },
     },
     watch: {
         open: function (newval) {
@@ -64,32 +86,69 @@ export default {
             let status = !this.isOpen;
             Bus.emit("toggleLeftSide", status);
         },
-        showDecoration: function (val, type) {
-            return JX3BOX.__cdn + `design/decoration/images/${val}/${type}.png`;
+        resolveDecorationDetail(decoration) {
+            if (!decoration) {
+                return null;
+            }
+
+            const decorations = Array.isArray(decoration.decorations) ? decoration.decorations : [];
+            return decorations.find((item) => item && item.image) || null;
+        },
+        normalizeDecorationImage(image) {
+            if (!image) {
+                return "";
+            }
+
+            let url = String(image).trim();
+            if (/^(https?:)?\/\//.test(url)) {
+                return url;
+            }
+
+            return __cdn + url.replace(/^\/+/, "");
+        },
+        resolveDecorationPosition(position) {
+            return DECORATION_POSITION_MAP[position] || position || "";
+        },
+        setDecoration(decoration) {
+            const decorationDetail = this.resolveDecorationDetail(decoration);
+            const image = this.normalizeDecorationImage(decorationDetail?.image);
+            if (!image) {
+                return false;
+            }
+
+            this.bg = image;
+            this.decorationPosition = this.resolveDecorationPosition(decorationDetail.position);
+            return true;
         },
         getDecoration() {
             if (!this.user_id) {
                 return;
             }
             let decoration_sidebar = sessionStorage.getItem(DECORATION_SIDEBAR + this.user_id) || "";
-            if (decoration_sidebar == "no") return;
+            if (decoration_sidebar == DECORATION_EMPTY_VALUE) return;
             //已有缓存，读取解析
-            try {
-                let sidebar = JSON.parse(decoration_sidebar);
-                this.bg = this.showDecoration(sidebar.val, "sidebar");
-            } catch (err) {
-                getDecoration({ using: 1, user_id: this.user_id, type: "sidebar" }).then((data) => {
-                    let res = data.data.data || [];
-                    if (res.length == 0) {
-                        //空 则为无主题，不再加载接口，界面设No
-                        sessionStorage.setItem(DECORATION_SIDEBAR + this.user_id, "no");
+            if (decoration_sidebar) {
+                try {
+                    let sidebar = JSON.parse(decoration_sidebar);
+                    if (sidebar && this.setDecoration(sidebar)) {
                         return;
                     }
-                    let sidebar = res[0];
-                    this.bg = this.showDecoration(sidebar.val, "sidebar");
-                    sessionStorage.setItem(DECORATION_SIDEBAR + this.user_id, JSON.stringify(sidebar));
-                });
+                    sessionStorage.removeItem(DECORATION_SIDEBAR + this.user_id);
+                } catch (err) {
+                    sessionStorage.removeItem(DECORATION_SIDEBAR + this.user_id);
+                }
             }
+            getDecorationV2({ using: 1, user_id: this.user_id, type: "sidebar", subtype: "pc_sidebar" }).then((data) => {
+                let res = data.data.data || [];
+                let sidebar = res.find((item) => item.type == "sidebar" && this.resolveDecorationDetail(item));
+                if (sidebar && this.setDecoration(sidebar)) {
+                    sessionStorage.setItem(DECORATION_SIDEBAR + this.user_id, JSON.stringify(sidebar));
+                    return;
+                }
+
+                //空 则为无主题，不再加载接口，界面设No
+                sessionStorage.setItem(DECORATION_SIDEBAR + this.user_id, DECORATION_EMPTY_VALUE);
+            });
         },
     },
     beforeUnmount() {

package/src/bread/DesignTask.vue

@@ -105,6 +105,11 @@ export default {
         },
     },
     emits: ["update:modelValue"],
+    computed: {
+        client() {
+            return location.href.includes("origin") ? "origin" : "std";
+        },
+    },
     data() {
         return {
             form: {
@@ -149,6 +154,8 @@ export default {
                 if (User.isTeammate()) {
                     this.loadConfig();
                 }
+
+                this.form.version = this.client;
             }
         },
     },

package/src/comment/CommentWithReply.vue

@@ -73,11 +73,23 @@ import CommentContent from "./CommentContent.vue";
 import ReplyList from "./ReplyList.vue";
 import { POST, DELETE, GET } from "../../service/comment";
 import CommentAvatar from "../comment/Avatar.vue";
-import { getDecoration } from "../../service/cms";
+import { getDecorationV2 } from "../../service/cms";
 import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
 import i18nMixin from "../../i18n/mixin";
-const { __imgPath } = JX3BOX;
+const { __cdn } = JX3BOX;
 const DECORATION_KEY = "decoration_comment_";
+const DECORATION_EMPTY_VALUE = "no";
+const DECORATION_POSITION_MAP = {
+    lt: "left top",
+    ct: "center top",
+    rt: "right top",
+    lc: "left center",
+    cc: "center center",
+    rc: "right center",
+    lb: "left bottom",
+    cb: "center bottom",
+    rb: "right bottom",
+};
 export default {
     mixins: [i18nMixin],
     props: {
@@ -122,6 +134,7 @@ export default {
                 total: 0,
             },
             decoration: null,
+            decorationPosition: "",
         };
     },
     computed: {
@@ -132,6 +145,7 @@ export default {
             return this.decoration
                 ? {
                       backgroundImage: `url(${this.decoration})`,
+                      backgroundPosition: this.decorationPosition,
                       borderRadius: "8px",
                   }
                 : null;
@@ -142,29 +156,65 @@ export default {
         this.getDecoration();
     },
     methods: {
+        resolveDecorationDetail(decoration) {
+            if (!decoration) {
+                return null;
+            }
+
+            const decorations = Array.isArray(decoration.decorations) ? decoration.decorations : [];
+            return decorations.find((item) => item && item.image) || null;
+        },
+        normalizeDecorationImage(image) {
+            if (!image) {
+                return "";
+            }
+
+            let url = String(image).trim();
+            if (/^(https?:)?\/\//.test(url)) {
+                return url;
+            }
+
+            return __cdn + url.replace(/^\/+/, "");
+        },
+        resolveDecorationPosition(position) {
+            return DECORATION_POSITION_MAP[position] || position || "";
+        },
         setDecoration(decoration) {
-            this.decoration = __imgPath + `decoration/images/${decoration.val}/comment.png`;
+            const decorationDetail = this.resolveDecorationDetail(decoration);
+            const image = this.normalizeDecorationImage(decorationDetail?.image);
+            if (!image) {
+                return false;
+            }
+
+            this.decoration = image;
+            this.decorationPosition = this.resolveDecorationPosition(decorationDetail.position);
+            return true;
         },
         getDecoration() {
             let decoration_local = sessionStorage.getItem(DECORATION_KEY + this.uid);
+            if (decoration_local == DECORATION_EMPTY_VALUE) return;
             if (decoration_local) {
-                //解析本地缓存
-                let decoration_parse = JSON.parse(decoration_local);
-                if (decoration_parse) {
-                    this.setDecoration(decoration_parse);
-                    this.decoration = __imgPath + `decoration/images/${decoration_parse.val}/comment.png`;
-                    return;
+                try {
+                    let decoration_parse = JSON.parse(decoration_local);
+                    if (decoration_parse && this.setDecoration(decoration_parse)) {
+                        return;
+                    }
+                    sessionStorage.removeItem(DECORATION_KEY + this.uid);
+                } catch (err) {
+                    sessionStorage.removeItem(DECORATION_KEY + this.uid);
                 }
             }
-            getDecoration({ using: 1, user_id: this.uid, type: "comment" }).then((res) => {
-                let decorationList = res.data.data;
-                //筛选个人装扮
-                let decoration = decorationList.find((item) => item.type == "comment");
-                if (decoration) {
-                    this.decoration = __imgPath + `decoration/images/${decoration.val}/comment.png`;
+            getDecorationV2({ using: 1, user_id: this.uid, type: "comment", subtype: "pc_comment" }).then((res) => {
+                let decorationList = res.data.data || [];
+                let decoration = decorationList.find(
+                    (item) => item.type == "comment" && this.resolveDecorationDetail(item)
+                );
+                if (decoration && this.setDecoration(decoration)) {
                     sessionStorage.setItem(DECORATION_KEY + this.uid, JSON.stringify(decoration));
                     return;
                 }
+
+                sessionStorage.setItem(DECORATION_KEY + this.uid, DECORATION_EMPTY_VALUE);
             });
         },
         profileLink: function (uid) {

package/src/interact/BoxcoinAdmin.vue

@@ -19,23 +19,15 @@
             <div class="w-boxcoin-admin-content">
                 <div class="u-left u-total-left">
                     <em class="u-label">{{ $jx3boxT("jx3boxUi.boxcoinAdmin.yearStatus", "全年额度") }}</em>
-                    {{
-                        $jx3boxT("jx3boxUi.boxcoinAdmin.yearSummary", "已用{used} 剩余{left} 总计{total}", {
-                            used: this.postTypeUsed,
-                            left: this.postTypeLeft,
-                            total: this.totalLimit,
-                        })
-                    }}
+                    {{ $jx3boxT("jx3boxUi.boxcoinAdmin.used", "已用") }}<b>{{ postTypeUsed }}</b>
+                    {{ $jx3boxT("jx3boxUi.boxcoinAdmin.left", "剩余") }}<b>{{ postTypeLeft }}</b>
+                    {{ $jx3boxT("jx3boxUi.boxcoinAdmin.total", "总计") }}<b>{{ totalLimit }}</b>
                 </div>
                 <div class="u-left">
                     <em class="u-label">{{ $jx3boxT("jx3boxUi.boxcoinAdmin.monthStatus", "本月状态") }}</em>
-                    {{
-                        $jx3boxT("jx3boxUi.boxcoinAdmin.monthSummary", "已用{used} 剩余{left} 总计{total}", {
-                            used: this.used,
-                            left: this.left,
-                            total: this.total,
-                        })
-                    }}
+                    {{ $jx3boxT("jx3boxUi.boxcoinAdmin.used", "已用") }}<b>{{ used }}</b>
+                    {{ $jx3boxT("jx3boxUi.boxcoinAdmin.left", "剩余") }}<b>{{ left }}</b>
+                    {{ $jx3boxT("jx3boxUi.boxcoinAdmin.total", "总计") }}<b>{{ total }}</b>
                     <el-progress
                         :percentage="this.total ? 100 - (this.used * 100) / this.total : 0"
                         :stroke-width="15"
@@ -44,7 +36,9 @@
                 </div>
                 <div class="u-list">
                     <em class="u-label">❤️ {{ $jx3boxT("jx3boxUi.boxcoinAdmin.appraise", "品鉴") }}</em>
-                    <Contributors v-if="authors && authors.length" :authors="authors" @chosen="handleChosen" />
+                    <div class="u-contributors" v-if="authors && authors.length">
+                        <Contributors :authors="authors" @chosen="handleChosen" />
+                    </div>
                     <div class="u-points">
                         <el-radio-group v-model="count">
                             <el-radio :value="item" v-for="item in fitPoints" :key="item" border>
@@ -319,4 +313,14 @@ export default {
         margin-left: 10px;
     }
 }
+
+.w-boxcoin-admin-content {
+    .u-total-left {
+        .mb(10px);
+    }
+
+    .u-contributors {
+        .mt(20px);
+    }
+}
 </style>

package/src/interact/BoxcoinUser.vue

@@ -248,5 +248,13 @@ export default {
         .underline(var(--el-color-primary));
         .ml(10px);
     }
+
+
+}
+.w-boxcoin-user-content {
+    .m-contributor {
+        .mt(20px);
+    }
+
 }
 </style>

package/src/single/Thx.vue

@@ -22,9 +22,9 @@
         <template v-else>
             <div class="w-thx-panel">
                 <boxcoin-admin
+                    v-if="hasRight && adminBoxcoinEnable && boxcoin_enable && hasPermission"
                     :postId="postId"
                     :postType="postType"
-                    v-if="hasRight && adminBoxcoinEnable && boxcoin_enable && hasPermission"
                     :userId="userId"
                     :max="admin_max"
                     :min="admin_min"

package/tests/comment-decoration-v2.test.js

@@ -0,0 +1,56 @@
+const fs = require("fs");
+const path = require("path");
+
+const root = path.resolve(__dirname, "..");
+const service = fs.readFileSync(path.join(root, "service/cms.js"), "utf8");
+const component = fs.readFileSync(path.join(root, "src/comment/CommentWithReply.vue"), "utf8");
+const leftSidebar = fs.readFileSync(path.join(root, "src/LeftSidebar.vue"), "utf8");
+const app = fs.readFileSync(path.join(root, "src/App.vue"), "utf8");
+
+function assert(condition, message) {
+    if (!condition) {
+        throw new Error(message);
+    }
+}
+
+assert(service.includes("/api/cms/user/decoration/v2"), "getDecoration should support the decoration v2 endpoint");
+
+assert(component.includes("getDecorationV2"), "comment decoration should request the v2 decoration endpoint");
+
+assert(component.includes('subtype: "pc_comment"'), "comment decoration should request the pc_comment subtype");
+
+assert(component.includes("resolveDecorationDetail"), "comment decoration should resolve v2 decorations payload");
+
+assert(component.includes("normalizeDecorationImage"), "comment decoration should normalize returned image URLs");
+
+assert(
+    !component.includes("decoration/images/${decoration.val}/comment.png"),
+    "comment decoration should not depend on the old val/comment.png path"
+);
+
+assert(
+    !/\bdecoration\.decoration\b/.test(component),
+    "comment decoration should not support legacy decoration payloads"
+);
+
+assert(!component.includes("markdownMatch"), "comment decoration should not support markdown-link compatibility");
+
+assert(!component.includes("decoration.image"), "comment decoration should not fall back to legacy top-level image");
+
+assert(leftSidebar.includes("getDecorationV2"), "left sidebar decoration should request the v2 decoration endpoint");
+
+assert(leftSidebar.includes('subtype: "pc_sidebar"'), "left sidebar decoration should request the pc_sidebar subtype");
+
+assert(leftSidebar.includes("resolveDecorationDetail"), "left sidebar decoration should resolve v2 decorations payload");
+
+assert(
+    !leftSidebar.includes("design/decoration/images/${val}/${type}.png"),
+    "left sidebar decoration should not depend on the old val/sidebar.png path"
+);
+
+assert(
+    app.includes('<LeftSidebar :open="true" :uid="8719">') && app.includes('<Author :uid="8719" />'),
+    "local author fixture should pass the same 8719 uid to LeftSidebar and Author"
+);
+
+console.log("decoration v2 checks passed");