@jx3box/jx3box-editor 3.2.5 → 3.2.7

package/src/components/Author.vue

@@ -1,13 +1,13 @@
 <template>
     <!-- @圈人pop：作者卡片 -->
     <div class="w-author" v-loading="loading">
-        <div class="w-author-wrapper el-popover" v-if="data" :style="{ backgroundImage: `url(${bg})` }">
+        <div class="w-author-wrapper el-popover" :class="{ 'is-no-atcard': !bg }" v-if="data" :style="authorCardStyle">
             <div class="u-author">
                 <Avatar
                     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,61 @@
                     </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 } 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";
+const ATCARD_CACHE_KEY = "skin_atcard_pc_authorcard_v2_";
+const ATCARD_SUBTYPE = "pc_authorcard";
 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 +123,17 @@ export default {
             type: [String, Number],
             required: true,
         },
+        visible: {
+            type: Boolean,
+            default: true,
+        },
     },
     data: () => ({
         data: null,
         medals: [],
-        teams: [],
         loading: false,
         bg: "",
+        bgPosition: "right top",
         honor: "",
         honorStyle: {},
     }),
@@ -123,6 +159,18 @@ 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,
+                  }
+                : {};
+        },
     },
     watch: {
         uid: {
@@ -130,20 +178,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;
             });
         },
@@ -157,36 +213,98 @@ 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.bg = "";
+            this.bgPosition = "right top";
+
+            const cached = this.getAtcardCache(uid);
+            if (cached) {
+                this.setAtcardBackground(cached === "no" ? null : cached);
                 return;
             }
-            //已有缓存，读取解析
-            if (decoration_atcard) {
-                this.setDecoration(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.bg = "";
+                        return;
+                    }
+                    let payload = {
+                        image,
+                        position: this.resolveAtcardPosition(skin?.position),
+                    };
+                    this.setAtcardCache(uid, payload);
+                    this.setAtcardBackground(payload);
+                })
+                .catch(() => {
+                    if (this.uid === uid) {
+                        this.bg = "";
+                    }
+                });
+        },
+        setAtcardBackground(val) {
+            if (typeof val === "string") {
+                this.bg = val || "";
+                this.bgPosition = "right top";
                 return;
             }
-            getDecoration({ using: 1, user_id: this.uid, type: "atcard" }).then((data) => {
-                let res = data.data.data;
-                if (res.length == 0) {
-                    //空 则为无主题，不再加载接口，界面设No
-                    sessionStorage.setItem(ATCARD_KEY + this.uid, "no");
-                    this.bg = "";
-                    return;
-                }
-                sessionStorage.setItem(ATCARD_KEY + this.uid, res[0].val);
-                this.setDecoration(res[0].val);
-            });
+            this.bg = val?.image || "";
+            this.bgPosition = val?.position || "right top";
+        },
+        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
+            );
+        },
+        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";
         },
-        setDecoration(val) {
-            this.bg = this.showDecoration(val, "atcard");
+        resolveAtcardPosition(position) {
+            let key = String(position || "rt")
+                .trim()
+                .toLowerCase();
+            return POSITION_MAP[key] || POSITION_MAP.rt;
         },
         getHonor() {
             this.honor = "";
@@ -265,7 +383,7 @@ export default {
         },
 
         showMedalIcon: function (val) {
-            return __cdn + "/design/medals/user/" + val + ".gif";
+            return __cdn + "/design/medals/user/" + val + ".webp";
         },
         medalLink: function ({ rank_id, medal_type = "rank" }) {
             return getMedalLink(rank_id, medal_type);
@@ -273,17 +391,87 @@ 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];
         },
-        showDecoration: function (val, type) {
-            return __cdn + `design/decoration/images/${val}/${type}.png`;
+        showDecorationImage: function (val) {
+            if (!val) return "";
+            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,
     },
@@ -294,15 +482,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 {
+            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;
@@ -320,7 +524,7 @@ export default {
         .u-displayname {
             .fz(15px);
             .nobreak;
-            max-width: 200px;
+            max-width: 190px;
             color: @color;
             .bold;
         }
@@ -336,5 +540,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/components/QRcode.vue

@@ -11,7 +11,7 @@
         <div class="u-qrcode">
             <qrcode-vue class="u-pic" :value="value" :size="size" level="H"></qrcode-vue>
             <span class="u-txt"
-                ><img class="u-icon" svg-inline src="./assets/img/other/qr-code.svg" />扫一扫手机访问</span
+                ><img class="u-icon" svg-inline src="../assets/img/other/qr-code.svg" />扫一扫手机访问</span
             >
         </div>
     </div>

package/src/service/cms.js

@@ -28,6 +28,18 @@ function getDecoration(params) {
     });
 }
 
+function getDecorationV2(params) {
+    return $cms().get(`/api/cms/user/decoration/v2`, {
+        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);
@@ -39,4 +51,4 @@ function getLetterPaper(params) {
         params,
     });
 }
-export { uploadFile, loadAuthors, loadEmotions, getDecoration, getDecorationJson, getLetterPaper };
+export { uploadFile, loadAuthors, loadEmotions, getDecoration, getDecorationV2, getUserSkin, getDecorationJson, getLetterPaper };

package/src/storybook/storybook-vars.less

@@ -0,0 +1 @@
+@bg-black: #111827;

package/src/storybook/storybook.helpers.js

@@ -0,0 +1,154 @@
+import { onMounted, ref } from "vue";
+
+export function createMeta({ title, component, args = {}, argTypes = {}, docs = "", parameters = {} }) {
+    return {
+        title,
+        component,
+        tags: ["autodocs"],
+        args,
+        argTypes: buildArgTypes(argTypes),
+        parameters: {
+            layout: "padded",
+            docs: {
+                description: {
+                    component: docs,
+                },
+            },
+            ...parameters,
+        },
+    };
+}
+
+export function componentStory(component, options = {}) {
+    const { template, style = "", components = {}, setup } = options;
+
+    return {
+        render: (args) => ({
+            components: {
+                StoryComponent: component,
+                ...components,
+            },
+            setup() {
+                return {
+                    args,
+                    ...(typeof setup === "function" ? setup(args) : {}),
+                };
+            },
+            template:
+                template ||
+                `<div style="${style}"><StoryComponent v-bind="args" /></div>`,
+        }),
+    };
+}
+
+export function previewStory(component, options = {}) {
+    const { title = "效果预览", description = "", code = "", style = "", template, components = {}, setup } = options;
+
+    return {
+        render: (args) => ({
+            components: {
+                StoryComponent: component,
+                ...components,
+            },
+            setup() {
+                return {
+                    args,
+                    previewTitle: title,
+                    previewDescription: description,
+                    previewCode: code,
+                    ...(typeof setup === "function" ? setup(args) : {}),
+                };
+            },
+            template: `
+                <div style="display:grid;gap:16px;min-width:320px;">
+                    <div style="padding:16px 18px;border:1px solid #e5e7eb;border-radius:12px;background:#fff;">
+                        <div style="font-size:16px;font-weight:600;color:#111827;">{{ previewTitle }}</div>
+                        <div v-if="previewDescription" style="margin-top:8px;color:#4b5563;line-height:1.7;white-space:pre-line;">{{ previewDescription }}</div>
+                        <pre v-if="previewCode" style="margin:12px 0 0;padding:12px;border-radius:10px;background:#0f172a;color:#e2e8f0;font-size:12px;line-height:1.6;overflow:auto;white-space:pre-wrap;word-break:break-word;">{{ previewCode }}</pre>
+                    </div>
+                    <div style="padding:20px;border:1px solid #e5e7eb;border-radius:12px;background:#fff;${style}">
+                        ${template || `<StoryComponent v-bind="args" />`}
+                    </div>
+                </div>
+            `,
+        }),
+    };
+}
+
+export function docsOnlyStory(message) {
+    return {
+        render: () => ({
+            template: `<div style="max-width:720px;padding:16px 18px;border:1px solid #e5e7eb;border-radius:12px;background:#fff;color:#374151;line-height:1.7;">${escapeHtml(
+                message
+            )}</div>`,
+        }),
+    };
+}
+
+export function useDemoText(url, fallback = "") {
+    const content = ref(fallback);
+    const loaded = ref(false);
+
+    onMounted(async () => {
+        try {
+            const response = await fetch(url);
+            if (response.ok) {
+                content.value = await response.text();
+            }
+        } catch (error) {
+            console.warn(`[storybook] failed to load demo content: ${url}`, error);
+        } finally {
+            loaded.value = true;
+        }
+    });
+
+    return {
+        content,
+        loaded,
+    };
+}
+
+function buildArgTypes(argTypes) {
+    return Object.fromEntries(
+        Object.entries(argTypes).map(([name, config]) => {
+            const table = {};
+
+            if (config.type) {
+                table.type = { summary: config.type };
+            }
+
+            if (config.defaultValue !== undefined) {
+                table.defaultValue = { summary: config.defaultValue };
+            }
+
+            if (config.required) {
+                table.category = "required";
+            }
+
+            return [
+                name,
+                {
+                    description: config.description,
+                    control: config.control === false ? false : config.control || inferControl(config.type),
+                    options: config.options,
+                    table,
+                },
+            ];
+        })
+    );
+}
+
+function inferControl(type = "") {
+    if (type.includes("Boolean")) return "boolean";
+    if (type.includes("Number")) return "number";
+    if (type.includes("Array") || type.includes("Object")) return "object";
+    return "text";
+}
+
+function escapeHtml(value) {
+    return String(value)
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/\n/g, "<br />");
+}