@jx3box/jx3box-editor 3.2.6 → 3.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-editor",
-    "version": "3.2.6",
+    "version": "3.2.8",
     "description": "JX3BOX Article & Editor",
     "main": "index.js",
     "scripts": {
@@ -74,9 +74,9 @@
         "postcss": "^8.5.6",
         "postcss-safe-parser": "^7.0.1",
         "prettier": "2.7.1",
+        "qrcode.vue": "^3.6.0",
         "sass": "^1.97.3",
         "sass-loader": "^16.0.7",
-        "qrcode.vue": "^3.6.0",
         "serve": "^14.2.0",
         "storybook": "^8.6.14",
         "style-resources-loader": "^1.5.0",

package/src/Article.vue

@@ -47,7 +47,12 @@
                 v-show="jx3_element.type == 'skill'"
             />
             <jx3-npc :client="npc.client" :id="npc.id" v-show="jx3_element.type === 'npc'" />
-            <jx3-author :uid="author.id" v-show="jx3_element.type === 'author'" />
+            <jx3-author
+                :key="author.id"
+                :uid="author.id"
+                :visible="jx3_element.type === 'author' && jx3_element.style.display !== 'none'"
+                v-show="jx3_element.type === 'author'"
+            />
             <jx3-emotion-author :id="emotion.id" v-show="jx3_element.type === 'emotion'" />
         </div>
     </div>

package/src/components/Author.vue

@@ -7,7 +7,7 @@
                     class="u-avatar"
                     :uid="uid"
                     :url="data.user_avatar"
-                    :size="68"
+                    :size="60"
                     :frame="data.user_avatar_frame"
                 />
                 <div class="u-info">
@@ -58,29 +58,63 @@
                     </div>
                 </div>
             </div>
-            <div class="u-teams" v-if="teams && teams.length">
-                <a class="u-team" v-for="(item, i) in teams" :key="i" :href="teamLink(item.team_id)" target="_blank">
-                    <img class="u-team-logo" :src="showTeamLogo(item.team_logo)" />
-                    <span class="u-team-name">{{ item.team_name }}@{{ item.team_server }}</span>
-                </a>
+            <div class="u-author-role" v-if="authorRoles.length">
+                <div class="u-author-role-label"></div>
+                <div class="u-author-roles">
+                    <component
+                        :is="item.url ? 'a' : 'span'"
+                        class="u-author-role-item"
+                        :href="item.url"
+                        :target="item.url ? '_blank' : null"
+                        :style="roleStyle(item)"
+                        v-for="item in authorRoles"
+                        :key="item.key"
+                    >
+                        <img class="u-author-role-icon" v-if="item.icon" :src="item.icon" />
+                        <span class="u-author-role-content">
+                            <span class="u-author-role-name">{{ item.name }}</span>
+                            <span class="u-author-role-server" v-if="item.server">@{{ item.server }}</span>
+                        </span>
+                    </component>
+                </div>
             </div>
         </div>
     </div>
 </template>
 
 <script>
-import { authorLink, getLink, getMedalLink, getThumbnail } from "@jx3box/jx3box-common/js/utils";
-import { getUserInfo, getUserMedals, getUserPublicTeams } from "../service/author.js";
-import { getDecoration, getDecorationJson, getDecorationV2 } from "../service/cms.js";
+import { authorLink, getMedalLink, showSchoolIcon } from "@jx3box/jx3box-common/js/utils";
+import { getUserInfo, getUserMedals } from "../service/author.js";
+import { getDecoration, getDecorationJson, getUserSkin } from "../service/cms.js";
 import User from "@jx3box/jx3box-common/js/user";
 import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
 import Avatar from "./Avatar.vue";
-const ATCARD_KEY = "decoration_atcard_v2";
+const ATCARD_CACHE_KEY = "skin_atcard_pc_authorcard_v2_";
+const ATCARD_SUBTYPE = "pc_authorcard";
+const DEFAULT_ATCARD_IMAGE = "https://cdn.jx3box.com/design/skin/default/pc_authorcard.png";
+const DEFAULT_ATCARD_POSITION = "right top";
 const DECORATION_JSON = "decoration_json";
 const DECORATION_KEY = "decoration_me";
 const HONOR_KEY = "honor_me";
+const POSITION_MAP = {
+    lt: "left top",
+    mt: "center top",
+    ct: "center top",
+    rt: "right top",
+    lm: "left center",
+    ml: "left center",
+    mm: "center center",
+    cm: "center center",
+    o: "center center",
+    rm: "right center",
+    mr: "right center",
+    lb: "left bottom",
+    mb: "center bottom",
+    cb: "center bottom",
+    rb: "right bottom",
+};
 
-const { __server, __imgPath, __userLevelColor, __cdn, __userLevel } = JX3BOX;
+const { __server, __imgPath, __userLevelColor, __cdn, __Root, __userLevel } = JX3BOX;
 export default {
     name: "Author",
     components: {
@@ -91,13 +125,17 @@ export default {
             type: [String, Number],
             required: true,
         },
+        visible: {
+            type: Boolean,
+            default: true,
+        },
     },
     data: () => ({
         data: null,
         medals: [],
-        teams: [],
         loading: false,
-        bg: "",
+        bg: DEFAULT_ATCARD_IMAGE,
+        bgPosition: DEFAULT_ATCARD_POSITION,
         honor: "",
         honorStyle: {},
     }),
@@ -123,10 +161,15 @@ export default {
         isSuperAuthor: function () {
             return !!this.data?.sign;
         },
+        authorRoles: function () {
+            const roles = this.normalizeRoles(this.data?.public_roles);
+            return roles.map(this.normalizeRole).filter((item) => item.name);
+        },
         authorCardStyle: function () {
             return this.bg
                 ? {
                       backgroundImage: `url(${this.bg})`,
+                      backgroundPosition: this.bgPosition,
                   }
                 : {};
         },
@@ -137,20 +180,28 @@ export default {
             handler(val) {
                 if (val) {
                     this.loadData();
-                    this.getAtcard();
+                    if (this.visible) {
+                        this.getAtcard();
+                    }
                     // this.getHonor();
                 }
             },
         },
+        visible: {
+            handler(val) {
+                if (val && this.uid) {
+                    this.getAtcard();
+                }
+            },
+        },
     },
     methods: {
         loadData: function () {
-            const promises = [getUserInfo(this.uid), getUserMedals(this.uid), getUserPublicTeams(this.uid)];
+            const promises = [getUserInfo(this.uid), getUserMedals(this.uid)];
             this.loading = true;
             Promise.all(promises).then((res) => {
                 this.data = res[0];
                 this.medals = res[1];
-                this.teams = res[2];
                 this.loading = false;
             });
         },
@@ -164,43 +215,102 @@ export default {
                 this.medals = data;
             });
         },
-        loadTeams: function () {
-            return getUserPublicTeams(this.uid).then((data) => {
-                this.teams = data && data.slice(0, 5);
-            });
-        },
         getAtcard() {
-            let decoration_atcard = sessionStorage.getItem(ATCARD_KEY + this.uid);
-            if (decoration_atcard == "no") {
-                this.bg = "";
+            const uid = this.uid;
+            this.setAtcardBackground();
+
+            const cached = this.getAtcardCache(uid);
+            if (cached) {
+                this.setAtcardBackground(cached === "no" ? null : cached);
                 return;
             }
-            //已有缓存，读取解析
-            if (decoration_atcard) {
-                this.setAtcardBackground(decoration_atcard);
+
+            getUserSkin({
+                user_id: uid,
+                type: "atcard",
+            })
+                .then((data) => {
+                    if (this.uid !== uid) return;
+
+                    let rows = data?.data?.data || [];
+                    let skin = this.selectAtcardSkin(this.flattenUserSkins(rows));
+                    let image = this.showDecorationImage(skin?.image);
+                    if (!image) {
+                        this.setAtcardCache(uid, "no");
+                        this.setAtcardBackground();
+                        return;
+                    }
+                    let payload = {
+                        image,
+                        position: this.resolveAtcardPosition(skin?.position),
+                    };
+                    this.setAtcardCache(uid, payload);
+                    this.setAtcardBackground(payload);
+                })
+                .catch(() => {
+                    if (this.uid === uid) {
+                        this.setAtcardBackground();
+                    }
+                });
+        },
+        setAtcardBackground(val = null) {
+            if (!val) {
+                this.bg = DEFAULT_ATCARD_IMAGE;
+                this.bgPosition = DEFAULT_ATCARD_POSITION;
                 return;
             }
-            getDecorationV2({
-                using: 1,
-                user_id: this.uid,
-                type: "atcard",
-                subtype: "pc_atcard",
-            }).then((data) => {
-                let res = data?.data?.data || [];
-                let image = res[0]?.decorations?.[0]?.image;
-                if (!image) {
-                    //空 则为无主题，不再加载接口，界面设No
-                    sessionStorage.setItem(ATCARD_KEY + this.uid, "no");
-                    this.bg = "";
-                    return;
-                }
-                image = this.showDecorationImage(image);
-                sessionStorage.setItem(ATCARD_KEY + this.uid, image);
-                this.setAtcardBackground(image);
-            });
+            if (typeof val === "string") {
+                this.bg = val || "";
+                this.bgPosition = DEFAULT_ATCARD_POSITION;
+                return;
+            }
+            this.bg = val?.image || DEFAULT_ATCARD_IMAGE;
+            this.bgPosition = val?.position || DEFAULT_ATCARD_POSITION;
+        },
+        getAtcardCache(uid) {
+            let cached = sessionStorage.getItem(ATCARD_CACHE_KEY + uid);
+            if (!cached) return null;
+            if (cached === "no") return cached;
+            try {
+                return JSON.parse(cached);
+            } catch (e) {
+                sessionStorage.removeItem(ATCARD_CACHE_KEY + uid);
+                return null;
+            }
+        },
+        setAtcardCache(uid, val) {
+            if (!uid) return;
+            sessionStorage.setItem(ATCARD_CACHE_KEY + uid, val === "no" ? "no" : JSON.stringify(val));
+        },
+        flattenUserSkins(rows = []) {
+            return rows.reduce((list, row) => {
+                let skins = Array.isArray(row?.skins) ? row.skins : [];
+                return list.concat(skins);
+            }, []);
+        },
+        selectAtcardSkin(list = []) {
+            let skins = list.filter((item) => item?.subtype === ATCARD_SUBTYPE && item?.image);
+            let theme = this.getCurrentTheme();
+            return (
+                skins.find((item) => item?.theme === "all") ||
+                skins.find((item) => item?.theme === theme) ||
+                skins.find((item) => !item?.theme) ||
+                null
+            );
         },
-        setAtcardBackground(val) {
-            this.bg = val || "";
+        getCurrentTheme() {
+            let theme =
+                document.documentElement.getAttribute("data-theme") ||
+                document.body?.getAttribute("data-theme") ||
+                localStorage.getItem("__theme") ||
+                "light";
+            return String(theme || "light").toLowerCase() === "dark" ? "dark" : "light";
+        },
+        resolveAtcardPosition(position) {
+            let key = String(position || "rt")
+                .trim()
+                .toLowerCase();
+            return POSITION_MAP[key] || POSITION_MAP.rt;
         },
         getHonor() {
             this.honor = "";
@@ -287,12 +397,6 @@ export default {
         showMedalDesc: function (item) {
             return item.medal_desc || medal_map[item.medal];
         },
-        teamLink: function (team_id) {
-            return getLink("org", team_id);
-        },
-        showTeamLogo: function (val) {
-            return getThumbnail(val, 96);
-        },
         showLevelColor: function (level) {
             return __userLevelColor[level];
         },
@@ -301,6 +405,80 @@ export default {
             if (/^(https?:)?\/\//.test(val) || /^(data|blob):/.test(val)) return val;
             return __cdn.replace(/\/$/, "") + "/" + val.replace(/^\//, "");
         },
+        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 || "",
+                url: this.normalizeLink(role?.url || role?.link || role?.href || info?.url || info?.link || ""),
+                icon: this.normalizeRoleIcon(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 || "",
+            };
+        },
+        normalizeRoleAsset: function (url) {
+            if (!url) return "";
+            url = String(url).trim();
+            if (/^(https?:)?\/\//.test(url)) return url;
+            return __cdn + url.replace(/^\/+/, "");
+        },
+        normalizeRoleIcon: 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.normalizeRoleAsset(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,
+            };
+        },
         authorLink,
     },
 };
@@ -310,19 +488,31 @@ export default {
 @import "../assets/css/module/author.less";
 .w-author {
     .w-author-wrapper {
+        width: 300px;
+        min-width: 300px;
+        max-width: 300px;
+        padding: 12px;
+        border: 1px solid rgba(132, 146, 166, 0.28);
+        border-radius: 8px;
+        background-color: #fff;
         background-repeat: no-repeat;
         background-position: top right;
         background-size: 100% auto;
+        box-shadow: 0 14px 34px rgba(31, 41, 55, 0.16), 0 2px 8px rgba(31, 41, 55, 0.08);
         &.is-no-atcard {
-            background-color: #f8fafc;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
+            border-color: rgba(124, 134, 156, 0.34);
+            background: linear-gradient(180deg, #ffffff 0%, #f3f6fb 100%);
         }
         .u-author {
-            padding: 5px 0 15px 5px;
+            padding: 4px 10px 12px 5px;
         }
         .u-avatar {
             .fl;
-            .mr(15px);
+            .mr(12px);
+            .size(60px);
+        }
+        .u-info {
+            height: 60px;
         }
         img {
             border: none;
@@ -340,7 +530,7 @@ export default {
         .u-displayname {
             .fz(15px);
             .nobreak;
-            max-width: 200px;
+            max-width: 190px;
             color: @color;
             .bold;
         }
@@ -356,5 +546,61 @@ export default {
         .mb(15px);
         .r(2px);
     }
+    .u-author-role {
+        .mt(8px);
+    }
+    .u-author-role-label {
+        margin: 0 0 8px 0;
+        height: 1px;
+        background-color: rgba(154, 167, 181, 0.28);
+    }
+    .u-author-roles {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+    }
+    .u-author-role-item {
+        .flex(y);
+        gap: 7px;
+        max-width: 100%;
+        min-height: 21px;
+        color: #56677a;
+        font-size: 12px;
+        line-height: 21px;
+        box-sizing: border-box;
+        text-decoration: none;
+
+        &:hover {
+            .u-author-role-server {
+                color: #fba524;
+            }
+        }
+    }
+    .u-author-role-icon {
+        .size(20px);
+        flex-shrink: 0;
+        object-fit: contain;
+    }
+    .u-author-role-content {
+        min-width: 0;
+        display: flex;
+        align-items: baseline;
+    }
+    .u-author-role-name {
+        min-width: 0;
+        margin-right: 2px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        color: #42566d;
+        font-size: 12px;
+        font-weight: 400;
+    }
+    .u-author-role-server {
+        flex-shrink: 0;
+        color: #fba524;
+        font-size: 12px;
+        font-weight: 400;
+    }
 }
 </style>

package/src/service/cms.js

@@ -34,6 +34,12 @@ function getDecorationV2(params) {
     });
 }
 
+function getUserSkin(params) {
+    return $cms().get(`/api/cms/user/skin`, {
+        params,
+    });
+}
+
 function getDecorationJson() {
     let url = __cdn + "design/decoration/index.json";
     return axios.get(url);
@@ -45,4 +51,4 @@ function getLetterPaper(params) {
         params,
     });
 }
-export { uploadFile, loadAuthors, loadEmotions, getDecoration, getDecorationV2, getDecorationJson, getLetterPaper };
+export { uploadFile, loadAuthors, loadEmotions, getDecoration, getDecorationV2, getUserSkin, getDecorationJson, getLetterPaper };