@jx3box/jx3box-ui 2.3.5 → 2.3.7

package/assets/css/common/left-sidebar.less

@@ -2,7 +2,7 @@
 .c-sidebar-left {
     .w(@aside-left - 40px);
     box-sizing: border-box;
-    padding: 10px;
+    // padding: 10px;
     .pf;
     .z(600);
     left: 0;

package/assets/css/single/author.less

@@ -1,5 +1,11 @@
 /* assets/css/single/author.less */
 .c-author {
+
+    padding:15px;
+
+    background-repeat: no-repeat;
+    background-size: 100% auto;
+
     .u-tips {
         .db;
         color: #555;
@@ -67,13 +73,53 @@
     }
 
     .u-interact {
-        .mt(5px);
+        .mt(14px);
         display: flex;
         align-items: center;
-        gap:8px;
+        gap: 12px;
+
+        .el-button {
+            margin: 0;
+        }
+
+        .u-btn.el-button {
+            min-width: 70px;
+            height: 28px;
+            padding: 0 12px;
+            border-radius: 5px;
+            border-color: #d6dbe4;
+            background: rgba(255, 255, 255, 0.72);
+            color: #4b5563;
+            font-size: 12px;
+            font-weight: 700;
+            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
+            backdrop-filter: blur(6px);
+
+            &:hover,
+            &:focus {
+                border-color: fade(@v4primary, 40%);
+                background: rgba(255, 255, 255, 0.9);
+                color: @v4primary;
+            }
+
+            .el-icon {
+                font-size: 13px;
+            }
+        }
+
+        .u-btn.el-button.c-author-rss.is-subscribed {
+            border-color: #dcdfe6;
+            background: rgba(245, 247, 250, 0.9);
+            color: #a8abb2;
+            box-shadow: none;
 
-        .el-button{
-            margin:0;
+            &:hover,
+            &:focus {
+                border-color: #dcdfe6;
+                background: rgba(245, 247, 250, 0.9);
+                color: #909399;
+                box-shadow: none;
+            }
         }
     }
     .u-links {
@@ -84,18 +130,18 @@
     }
 
     // .u-btn {
-    //     
+    //
     //     &:hover {
-    //         
+    //
     //         color: @primary;
     //     }
     // }
 }
 
 .c-sidebar-left .c-author {
-    margin: 10px;
+    // margin: 10px;
 }
 
 .c-sidebar-right .c-author {
-    margin: 15px;
+    // margin: 15px;
 }

package/assets/img/author/star.svg

@@ -0,0 +1 @@
+<svg clip-rule="evenodd" fill-rule="evenodd" height="512" image-rendering="optimizeQuality" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" viewBox="0 0 1707 1707" width="512" xmlns="http://www.w3.org/2000/svg"><g id="Layer_x0020_1"><path d="m1128 1066c-312 0-564-253-564-564 0 311-253 564-564 564 311 0 564 252 564 563 0-311 252-563 564-563z" fill="#ffd93b"/><g fill="#ffb030"><path d="m1707 1357c-171 0-309-139-309-309 0 170-139 309-309 309 170 0 309 138 309 309 0-171 138-309 309-309z"/><path d="m1529 417c-208 0-376-168-376-376 0 208-168 376-376 376 208 0 376 168 376 376 0-208 168-376 376-376z"/></g></g></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-ui",
-    "version": "2.3.5",
+    "version": "2.3.7",
     "description": "JX3BOX Vue3 UI",
     "main": "index.js",
     "scripts": {
@@ -34,7 +34,7 @@
         "@element-plus/icons-vue": "^2.3.2",
         "@jx3box/jx3box-common": "^9.2.5",
         "@jx3box/jx3box-data": "^3.9.5",
-        "@jx3box/jx3box-editor": "^3.2.5",
+        "@jx3box/jx3box-editor": "^3.2.7",
         "@jx3box/jx3box-emotion": "^1.3.1",
         "@jx3box/jx3box-macro": "^1.0.4",
         "@jx3box/jx3box-talent": "^1.3.14",

package/service/cms.js

@@ -24,6 +24,18 @@ function getDecorationV2(params) {
         params,
     });
 }
+function getUserSkin(user_id) {
+    return $cms().get(`/api/cms/user/skin`, {
+        params: {
+            user_id,
+        },
+    });
+}
+function getUserSkinBatch(params = {}) {
+    return $cms().get(`/api/cms/user/skin/batch`, {
+        params,
+    });
+}
 function getDecorationJson() {
     let url = JX3BOX.__cdn + "design/decoration/index.json";
     return axios.get(url);
@@ -149,6 +161,8 @@ export {
     upload,
     getDecoration,
     getDecorationV2,
+    getUserSkin,
+    getUserSkinBatch,
     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="8719">
-            <Author :uid="8719" />
+        <LeftSidebar :open="true">
+            <Author :uid="8" />
         </LeftSidebar>
         <Main :withoutLeft="false" :withoutRight="false">
             <el-tabs v-model="tab" type="card">
@@ -101,7 +101,8 @@
                 </el-tab-pane>
                 <el-tab-pane label="文章内容" name="content">
                     <el-radio-group v-model="post_id">
-                        <el-radio value="23240">临时测试</el-radio>
+                        <el-radio value="19382">临时测试</el-radio>
+                        <!-- <el-radio value="23240">临时测试</el-radio> -->
                         <el-radio value="35605">Markdown</el-radio>
                         <el-radio value="32035">仅小册</el-radio>
                         <el-radio value="30017">仅联合创作者</el-radio>
@@ -232,8 +233,7 @@ export default {
         return {
             tab: "content",
 
-            // post_id: "19382",
-            post_id: "99808",
+            post_id: "19382",
             post: {},
             client: location.href.includes("origin") ? "origin" : "std",
             item1: null,

package/src/author/AuthorInfo.vue

@@ -159,10 +159,9 @@ export default {
 .c-author-info {
     .u-author {
         .flex(y);
-        gap:15px;
-        // .db;
-        .mb(10px);
+        gap:12px;
         .pr;
+        margin:5px 5px 10px 5px;
     }
     .u-avatar {
         // .fl;
@@ -215,7 +214,7 @@ export default {
     .u-bio {
         .fz(12px, 2);
         .break(3);
-        color: #888;
+        color: #9aa7b5;
         padding: 0 5px;
         white-space: pre-line;
     }

package/src/author/AuthorPosts.vue

@@ -96,7 +96,7 @@ export default {
         padding: 3px 2px 3px 5px;
         .nobreak;
         .fz(12px,2);
-        color: @color;
+        color: #42566d;
         // border-bottom: 1px solid transparent;
         &:hover {
             color: @v4primary;

package/src/author/AuthorRole.vue

@@ -0,0 +1,189 @@
+<template>
+    <div class="c-author-role" v-if="roles.length">
+        <div class="u-label">
+            <img svg-inline src="../../assets/img/author/star.svg" />
+            <span>{{ $jx3boxT("jx3boxUi.authorRole.title", "作者角色") }}</span>
+        </div>
+        <div class="u-roles">
+            <component
+                :is="item.url ? 'a' : 'span'"
+                class="u-role"
+                :href="item.url"
+                :target="item.url ? '_blank' : null"
+                :style="roleStyle(item)"
+                v-for="item in roles"
+                :key="item.key"
+            >
+                <img class="u-role-icon" v-if="item.icon" :src="item.icon" />
+                <span class="u-role-content">
+                    <span class="u-role-name">{{ item.name }}</span>
+                    <span class="u-role-server" v-if="item.server">@{{ item.server }}</span>
+                </span>
+            </component>
+        </div>
+    </div>
+</template>
+
+<script>
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+import { showSchoolIcon } from "@jx3box/jx3box-common/js/utils";
+import i18nMixin from "../../i18n/mixin";
+
+const { __Root, __cdn } = JX3BOX;
+
+export default {
+    name: "AuthorRole",
+    mixins: [i18nMixin],
+    props: {
+        data: {
+            type: Object,
+            default: function () {
+                return {};
+            },
+        },
+    },
+    computed: {
+        roles: function () {
+            const roles = this.normalizeRoles(this.data?.public_roles);
+            return roles.map(this.normalizeRole).filter((item) => item.name);
+        },
+    },
+    methods: {
+        normalizeRoles: function (roles) {
+            if (!roles) return [];
+            if (Array.isArray(roles)) return roles;
+            if (typeof roles === "string") {
+                try {
+                    const parsed = JSON.parse(roles);
+                    return Array.isArray(parsed) ? parsed : [parsed];
+                } catch (e) {
+                    return roles
+                        .split(/[,，]/)
+                        .map((item) => item.trim())
+                        .filter(Boolean);
+                }
+            }
+            return [roles];
+        },
+        normalizeRole: function (role, index) {
+            if (typeof role === "string") {
+                return {
+                    key: role + index,
+                    name: role,
+                };
+            }
+
+            const info = role?.role_info || role?.info || {};
+            const name =
+                role?.name ||
+                role?.title ||
+                role?.label ||
+                role?.role_name ||
+                role?.display_name ||
+                role?.remark ||
+                info?.name ||
+                info?.title ||
+                info?.label ||
+                info?.role_name ||
+                "";
+
+            return {
+                key: role?.id || role?.key || role?.val || name + index,
+                name,
+                server: role?.server || role?.role_server || role?.jx3_server || info?.server || info?.role_server || "",
+                desc: role?.desc || role?.description || role?.summary || info?.desc || info?.description || "",
+                url: this.normalizeLink(role?.url || role?.link || role?.href || info?.url || info?.link || ""),
+                icon: this.normalizeIcon(role, info),
+                color: role?.color || info?.color || "",
+                backgroundColor: role?.background_color || role?.bg_color || info?.background_color || info?.bg_color || "",
+                borderColor: role?.border_color || info?.border_color || "",
+            };
+        },
+        normalizeAsset: function (url) {
+            if (!url) return "";
+            url = String(url).trim();
+            if (/^(https?:)?\/\//.test(url)) return url;
+            return __cdn + url.replace(/^\/+/, "");
+        },
+        normalizeIcon: function (role, info) {
+            const mount = role?.mount || role?.school || role?.school_id || info?.mount || info?.school || info?.school_id || "";
+            if (mount) return showSchoolIcon(mount);
+
+            return this.normalizeAsset(role?.icon || role?.logo || role?.image || info?.icon || info?.logo || "");
+        },
+        normalizeLink: function (url) {
+            if (!url) return "";
+            url = String(url).trim();
+            if (/^(https?:)?\/\//.test(url)) return url;
+            return __Root + url.replace(/^\/+/, "");
+        },
+        roleStyle: function (role) {
+            return {
+                color: role.color || null,
+                backgroundColor: role.backgroundColor || null,
+                borderColor: role.borderColor || null,
+            };
+        },
+    },
+};
+</script>
+
+<style lang="less">
+/* src/author/AuthorRole.vue */
+.c-author-role {
+    .u-roles {
+        display: flex;
+        flex-direction: column;
+        gap: 7px;
+        margin-top: 2px;
+    }
+    .u-role {
+        .flex(y);
+        gap: 8px;
+        max-width: 100%;
+        min-height: 22px;
+        color: #56677a;
+        font-size: 13px;
+        line-height: 22px;
+        box-sizing: border-box;
+        text-decoration: none;
+    }
+    a.u-role {
+        &:hover {
+            .u-role-name {
+                color: @v4primary;
+            }
+            .u-role-server {
+                color: fade(@v4primary, 65%);
+            }
+        }
+    }
+    .u-role-icon {
+        .size(22px);
+        flex-shrink: 0;
+        object-fit: contain;
+    }
+    .u-role-content {
+        min-width: 0;
+        display: flex;
+        align-items: baseline;
+    }
+    .u-role-name {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        color: #42566d;
+        font-weight: 400;
+        font-size: 12px;
+        margin-right: 2px;
+    }
+    .u-role-server {
+        flex-shrink: 0;
+        // color: #9aa7b5;
+        color: @v4yellow;
+        font-size: 12px;
+        font-weight: 400;
+    }
+}
+</style>

package/src/author/AuthorRss.vue

@@ -132,25 +132,23 @@ export default {
 /* src/author/AuthorRss.vue */
 .c-author-rss.el-button {
     cursor: default;
+    transition: all 0.18s ease;
     &:hover,
     &.is-plain:hover,
     &.is-plain:focus {
         cursor: pointer;
-        background-color: @light-pink;
-        color: #fff;
-        border-color: darken(@light-pink, 2%);
+        background-color: rgba(255, 51, 153, 0.08);
+        color: @v4primary;
+        border-color: fade(@v4primary, 36%);
+        box-shadow: 0 6px 14px rgba(255, 51, 153, 0.1);
     }
     .u-icon {
-        .size(10px);
+        .size(11px);
         fill: currentColor;
         margin-right: 4px;
     }
 }
 
-.c-author-rss.el-button.is-subscribed {
-    color: #999;
-}
-
 @media screen and (max-width: @phone) {
     .el-message-box {
         max-width: 60%;

package/src/comment/CommentContent.vue

@@ -95,25 +95,24 @@
                 </time>
             </div>
             <div class="u-toolbar-right">
-                <el-button class="u-admin u-filter" v-if="canAddWhite" link size="small" @click="setWhiteComment(true)">
-                    <img
-                        class="u-icon-filter"
-                        src="../../assets/img/editor/view.svg"
-                        :alt="$jx3boxT('jx3boxUi.commentContent.show', '显示')"
-                    />
+                <el-button
+                    class="u-admin u-filter"
+                    v-if="canAddWhite"
+                    link
+                    icon="View"
+                    size="small"
+                    @click="setWhiteComment(true)"
+                >
                     {{ $jx3boxT("jx3boxUi.commentContent.show", "显示") }}</el-button
                 >
                 <el-button
                     class="u-admin u-filter"
                     v-if="canRemoveWhite"
                     link
+                    icon="Hide"
                     size="small"
                     @click="setWhiteComment(false)"
-                    ><img
-                        class="u-icon-filter"
-                        src="../../assets/img/comment/hide.svg"
-                        :alt="$jx3boxT('jx3boxUi.commentContent.hidden', '隐藏')"
-                    />{{ $jx3boxT("jx3boxUi.commentContent.hidden", "隐藏") }}</el-button
+                    >{{ $jx3boxT("jx3boxUi.commentContent.hidden", "隐藏") }}</el-button
                 >
             </div>
         </div>
@@ -450,10 +449,6 @@ export default {
             align-items: center;
             gap: 5px;
         }
-        .u-icon-filter {
-            width: 16px;
-            height: 16px;
-        }
     }
     .u-date {
         color: #c0c4cc;

package/src/comment/CommentWithReply.vue

@@ -73,20 +73,26 @@ import CommentContent from "./CommentContent.vue";
 import ReplyList from "./ReplyList.vue";
 import { POST, DELETE, GET } from "../../service/comment";
 import CommentAvatar from "../comment/Avatar.vue";
-import { getDecorationV2 } from "../../service/cms";
 import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
 import i18nMixin from "../../i18n/mixin";
 const { __cdn } = JX3BOX;
-const DECORATION_KEY = "decoration_comment_";
-const DECORATION_EMPTY_VALUE = "no";
 const DECORATION_POSITION_MAP = {
     lt: "left top",
+    mt: "center top",
     ct: "center top",
     rt: "right top",
+    lm: "left center",
     lc: "left center",
+    ml: "left center",
+    mm: "center center",
+    cm: "center center",
+    o: "center center",
     cc: "center center",
+    rm: "right center",
+    mr: "right center",
     rc: "right center",
     lb: "left bottom",
+    mb: "center bottom",
     cb: "center bottom",
     rb: "right bottom",
 };
@@ -117,6 +123,10 @@ export default {
             type: Boolean,
             default: false,
         },
+        skin: {
+            type: Object,
+            default: null,
+        },
     },
     components: {
         CommentContent,
@@ -133,8 +143,6 @@ export default {
                 pageTotal: 1,
                 total: 0,
             },
-            decoration: null,
-            decorationPosition: "",
         };
     },
     computed: {
@@ -142,10 +150,13 @@ export default {
             return this.item.userId;
         },
         decorationStyles() {
-            return this.decoration
+            const image = this.normalizeDecorationImage(this.skin?.image);
+            return image
                 ? {
-                      backgroundImage: `url(${this.decoration})`,
-                      backgroundPosition: this.decorationPosition,
+                      backgroundImage: `url(${image})`,
+                      backgroundPosition: this.resolveDecorationPosition(this.skin?.position),
+                      backgroundRepeat: "no-repeat",
+                      backgroundSize: "100% auto",
                       borderRadius: "8px",
                   }
                 : null;
@@ -153,17 +164,8 @@ export default {
     },
     created() {
         this.replyList = this.item.reply || [];
-        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 "";
@@ -177,45 +179,7 @@ export default {
             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.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) {
-                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);
-                }
-            }
-            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);
-            });
+            return DECORATION_POSITION_MAP[position] || "right top";
         },
         profileLink: function (uid) {
             return authorLink(uid);

package/src/single/Author.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="c-author">
+    <div class="c-author" :style="decorationStyles">
         <AuthorInfo :uid="uid" :anonymous="anonymous" @ready="installModules" />
         <template v-if="data">
             <div class="u-interact">
@@ -12,6 +12,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" />
             <!-- <AuthorTeams class="u-block u-teams" :uid="uid" /> -->
             <!-- <AuthorFans class="u-block u-fans" :uid="uid" /> -->
@@ -27,12 +28,33 @@ import AuthorInfo from "../author/AuthorInfo.vue";
 // import AuthorFollow from "../author/AuthorFollow.vue";
 // import AuthorGift from "../author/AuthorGift.vue";
 // import AuthorFans from "../author/AuthorFans.vue";
+import AuthorRole from "../author/AuthorRole.vue";
 import AuthorMedals from "../author/AuthorMedals.vue";
 // import AuthorTeams from "../author/AuthorTeams.vue";
 import AuthorPosts from "../author/AuthorPosts.vue";
 import AuthorRss from "../author/AuthorRss.vue";
+import { getUserSkin } from "../../service/cms";
 import i18nMixin from "../../i18n/mixin";
 const jx3box = require("@jx3box/jx3box-common/data/jx3box.json");
+const { __cdn } = jx3box;
+const SKIN_POSITION_MAP = {
+    lt: "left top",
+    ct: "center top",
+    mt: "center top",
+    rt: "right top",
+    lc: "left center",
+    ml: "left center",
+    cc: "center center",
+    cm: "center center",
+    mm: "center center",
+    o: "center center",
+    rc: "right center",
+    mr: "right center",
+    lb: "left bottom",
+    cb: "center bottom",
+    mb: "center bottom",
+    rb: "right bottom",
+};
 export default {
     name: "AuthorComp",
     mixins: [i18nMixin],
@@ -49,8 +71,30 @@ export default {
     data: function () {
         return {
             data: "",
+            sidebarSkin: "",
+            sidebarSkinPosition: "",
         };
     },
+    computed: {
+        decorationStyles() {
+            return this.sidebarSkin
+                ? {
+                      backgroundImage: `url(${this.sidebarSkin})`,
+                      backgroundPosition: this.sidebarSkinPosition,
+                  }
+                : null;
+        },
+    },
+    watch: {
+        uid() {
+            this.sidebarSkin = "";
+            this.sidebarSkinPosition = "";
+            this.loadSidebarSkin();
+        },
+    },
+    created() {
+        this.loadSidebarSkin();
+    },
     methods: {
         installModules: function (data) {
             if (this.anonymous == 1) {
@@ -61,12 +105,60 @@ export default {
         onMessage: function () {
             window.open("/dashboard/letter?receiver=" + this.uid, "_blank");
         },
+        resolveSkinDetail(record) {
+            if (!record) {
+                return null;
+            }
+
+            const skins = Array.isArray(record.skins) ? record.skins : [];
+            return skins.find((item) => item && item.subtype === "pc_sidebar" && item.image) || null;
+        },
+        normalizeSkinImage(image) {
+            if (!image) {
+                return "";
+            }
+
+            const url = String(image).trim();
+            if (/^(https?:)?\/\//.test(url)) {
+                return url;
+            }
+
+            return __cdn + url.replace(/^\/+/, "");
+        },
+        resolveSkinPosition(position) {
+            return SKIN_POSITION_MAP[position] || position || "";
+        },
+        setSidebarSkin(record) {
+            const detail = this.resolveSkinDetail(record);
+            const image = this.normalizeSkinImage(detail?.image);
+            if (!image) {
+                return false;
+            }
+
+            this.sidebarSkin = image;
+            this.sidebarSkinPosition = this.resolveSkinPosition(detail.position);
+            return true;
+        },
+        loadSidebarSkin() {
+            if (!this.uid || this.anonymous == 1) {
+                return;
+            }
+
+            getUserSkin(this.uid).then((res) => {
+                const records = res.data.data || [];
+                const record = records.find((item) => this.resolveSkinDetail(item));
+                if (record && this.setSidebarSkin(record)) {
+                    return;
+                }
+            });
+        },
     },
     components: {
         AuthorInfo,
         // AuthorLink,
         // AuthorFollow,
         // AuthorGift,
+        AuthorRole,
         AuthorMedals,
         // AuthorTeams,
         AuthorPosts,

package/src/single/Comment.vue

@@ -45,6 +45,7 @@
                         :category="category"
                         :power="commentPower"
                         :support-video="supportVideo"
+                        :skin="commentSkins[item.userId]"
                         @deleteComment="deleteComment"
                         @setTopComment="setTopComment"
                         @setStarComment="setStarComment"
@@ -87,9 +88,11 @@ import { showAvatar, authorLink } from "@jx3box/jx3box-common/js/utils";
 import CommentInputForm from "../comment/CommentInputForm.vue";
 import CommentWithReply from "../comment/CommentWithReply.vue";
 import { GET, POST, DELETE, PUT, getOrderMode, setOrderMode } from "../../service/comment";
-import { getConfig } from "../../service/cms";
+import { getConfig, getUserSkinBatch } from "../../service/cms";
 import User from "@jx3box/jx3box-common/js/user";
 import i18nMixin from "../../i18n/mixin";
+const COMMENT_SKIN_TYPE = "comment";
+const COMMENT_SKIN_SUBTYPE = "pc_comment";
 export default {
     name: "CommentComp",
     mixins: [i18nMixin],
@@ -138,6 +141,7 @@ export default {
             orderByLikes: false,
             openWhiteList: false,
             loading: false,
+            commentSkins: {},
 
             showMask: false,
         };
@@ -239,6 +243,7 @@ export default {
                 .then((resp) => {
                     this.commentList = resp.data || [];
                     this.pager = resp.page;
+                    this.loadCommentSkins(this.commentList);
                 })
                 .catch(() => {})
                 .finally(() => {
@@ -281,6 +286,48 @@ export default {
         showAvatar: function (val) {
             return showAvatar(val, 144);
         },
+        collectCommentUserIds(list = []) {
+            return Array.from(
+                new Set(
+                    list
+                        .map((item) => Number(item?.userId || 0))
+                        .filter((uid) => Number.isInteger(uid) && uid > 0)
+                )
+            );
+        },
+        selectCommentSkin(records = []) {
+            const skins = records.flatMap((record) => (Array.isArray(record?.skins) ? record.skins : []));
+            return (
+                skins.find((item) => item?.theme === "all" && item?.image) ||
+                skins.find((item) => !item?.theme && item?.image) ||
+                skins.find((item) => item?.image) ||
+                null
+            );
+        },
+        loadCommentSkins(list = []) {
+            const userIds = this.collectCommentUserIds(list);
+            if (!userIds.length) {
+                this.commentSkins = {};
+                return;
+            }
+
+            getUserSkinBatch({
+                user_ids: userIds.join(","),
+                type: COMMENT_SKIN_TYPE,
+                subtype: COMMENT_SKIN_SUBTYPE,
+            })
+                .then((res) => {
+                    const data = res?.data?.data || {};
+                    this.commentSkins = userIds.reduce((acc, uid) => {
+                        const records = data[uid] || data[String(uid)] || [];
+                        acc[uid] = this.selectCommentSkin(records);
+                        return acc;
+                    }, {});
+                })
+                .catch(() => {
+                    this.commentSkins = {};
+                });
+        },
         reloadPower() {
             GET(`${this.baseAPI}/i-am-author`)
                 .then((power) => {

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

@@ -0,0 +1,34 @@
+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 author = fs.readFileSync(path.join(root, "src/single/Author.vue"), "utf8");
+const authorInfo = fs.readFileSync(path.join(root, "src/author/AuthorInfo.vue"), "utf8");
+const authorStyle = fs.readFileSync(path.join(root, "assets/css/single/author.less"), "utf8");
+
+function assert(condition, message) {
+    if (!condition) {
+        throw new Error(message);
+    }
+}
+
+assert(service.includes("/api/cms/user/skin"), "user skin service should request the active skin endpoint");
+
+assert(author.includes("getUserSkin"), "Author wrapper should request user skin data directly");
+
+assert(!authorInfo.includes("getUserSkin"), "AuthorInfo should not request user skin data");
+
+assert(author.includes('item.subtype === "pc_sidebar"'), "Author should consume the pc_sidebar skin part");
+
+assert(author.includes("record.skins"), "Author should resolve active skin resources from skins[]");
+
+assert(author.includes("backgroundPosition: this.sidebarSkinPosition"), "Author should apply skin position");
+
+assert(author.includes('rt: "right top"'), "Author should map rt to right top");
+
+assert(authorStyle.includes("background-repeat: no-repeat"), "Author skin background should not repeat");
+
+assert(authorStyle.includes("background-size: 100% auto"), "Author skin background should use full width and auto height");
+
+console.log("author pc sidebar skin checks passed");

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

@@ -3,9 +3,9 @@ const path = require("path");
 
 const root = path.resolve(__dirname, "..");
 const service = fs.readFileSync(path.join(root, "service/cms.js"), "utf8");
+const commentList = fs.readFileSync(path.join(root, "src/single/Comment.vue"), "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) {
@@ -15,11 +15,21 @@ function assert(condition, 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(service.includes("/api/cms/user/skin/batch"), "comment skin should support the batch user skin endpoint");
 
-assert(component.includes('subtype: "pc_comment"'), "comment decoration should request the pc_comment subtype");
+assert(commentList.includes("getUserSkinBatch"), "comment list should request user skins in batch");
 
-assert(component.includes("resolveDecorationDetail"), "comment decoration should resolve v2 decorations payload");
+assert(commentList.includes('type: COMMENT_SKIN_TYPE'), "comment skin request should include the comment type");
+
+assert(commentList.includes('subtype: COMMENT_SKIN_SUBTYPE'), "comment skin request should include the pc_comment subtype");
+
+assert(commentList.includes(":skin=\"commentSkins[item.userId]\""), "comment list should pass per-user skin to items");
+
+assert(!component.includes("getDecorationV2"), "comment item should not request the legacy decoration v2 endpoint");
+
+assert(component.includes("skin:"), "comment item should accept a skin prop");
+
+assert(!component.includes("resolveDecorationDetail"), "comment item should not resolve legacy v2 decorations payload");
 
 assert(component.includes("normalizeDecorationImage"), "comment decoration should normalize returned image URLs");
 
@@ -48,9 +58,4 @@ assert(
     "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");