@jx3box/jx3box-editor 3.2.5 → 3.2.6

package/.storybook/main.js

@@ -0,0 +1,70 @@
+const path = require("path");
+
+const rootDir = path.resolve(__dirname, "..");
+const srcDir = path.resolve(rootDir, "src");
+const globalLess = path.resolve(srcDir, "assets/css/var.less");
+const csslabBaseLess = path.resolve(rootDir, "node_modules/csslab/base.less");
+const storybookVarsLess = path.resolve(srcDir, "storybook/storybook-vars.less");
+
+module.exports = {
+    framework: {
+        name: "@storybook/vue3-webpack5",
+        options: {},
+    },
+    stories: ["../stories/components/*.stories.js", "../stories/exports/*.stories.js"],
+    staticDirs: ["../public"],
+    addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions"],
+    docs: {
+        autodocs: "tag",
+    },
+    webpackFinal: async (config) => {
+        config.resolve = config.resolve || {};
+        config.resolve.alias = {
+            ...(config.resolve.alias || {}),
+            "@": srcDir,
+            "@src": srcDir,
+        };
+        config.resolve.extensions = Array.from(new Set([...(config.resolve.extensions || []), ".vue", ".js", ".json"]));
+
+        config.module.rules.push(
+            {
+                test: /\.svg$/i,
+                resourceQuery: /inline/,
+                use: [
+                    {
+                        loader: require.resolve("vue-svg-inline-loader"),
+                    },
+                ],
+            },
+            {
+                test: /\.less$/i,
+                use: [
+                    require.resolve("style-loader"),
+                    {
+                        loader: require.resolve("css-loader"),
+                        options: {
+                            importLoaders: 2,
+                        },
+                    },
+                    require.resolve("postcss-loader"),
+                    {
+                        loader: require.resolve("less-loader"),
+                        options: {
+                            lessOptions: {
+                                javascriptEnabled: true,
+                            },
+                        },
+                    },
+                    {
+                        loader: require.resolve("style-resources-loader"),
+                        options: {
+                            patterns: [csslabBaseLess, globalLess, storybookVarsLess],
+                        },
+                    },
+                ],
+            }
+        );
+
+        return config;
+    },
+};

package/.storybook/middleware.js

@@ -0,0 +1,73 @@
+const { createProxyMiddleware } = require("http-proxy-middleware");
+const JX3BOX = require("@jx3box/jx3box-common/data/jx3box.json");
+
+const CMS_PROXY_TARGET = (process.env.VUE_APP_CMS || JX3BOX.__cms || "https://cms.jx3box.com").replace(/\/$/, "");
+const { __cms, __node, __team, __next } = JX3BOX;
+
+module.exports = function storybookMiddleware(router) {
+    router.use(
+        "/api/cms",
+        createProxyMiddleware({
+            target: CMS_PROXY_TARGET,
+            changeOrigin: true,
+            secure: true,
+        })
+    );
+
+    router.use(
+        "/api/node",
+        createProxyMiddleware({
+            target: __node,
+            changeOrigin: true,
+            secure: true,
+        })
+    );
+
+    router.use(
+        "/__proxy/cms",
+        createProxyMiddleware({
+            target: __cms,
+            changeOrigin: true,
+            secure: true,
+            pathRewrite: {
+                "^/__proxy/cms": "",
+            },
+        })
+    );
+
+    router.use(
+        "/__proxy/node",
+        createProxyMiddleware({
+            target: __node,
+            changeOrigin: true,
+            secure: true,
+            pathRewrite: {
+                "^/__proxy/node": "",
+            },
+        })
+    );
+
+    router.use(
+        "/__proxy/team",
+        createProxyMiddleware({
+            target: __team,
+            changeOrigin: true,
+            secure: true,
+            pathRewrite: {
+                "^/__proxy/team": "",
+            },
+        })
+    );
+
+    router.use(
+        "/__proxy/next",
+        createProxyMiddleware({
+            target: __next,
+            changeOrigin: true,
+            secure: true,
+            pathRewrite: {
+                "^/__proxy/next": "",
+            },
+        })
+    );
+};

package/.storybook/preview.js

@@ -0,0 +1,90 @@
+import { setup } from "@storybook/vue3";
+import ElementPlus from "element-plus";
+import "element-plus/dist/index.css";
+import "@imengyu/vue3-context-menu/lib/vue3-context-menu.css";
+import "../src/assets/css/var.less";
+import "../src/assets/css/article.less";
+import "../src/assets/css/markdown.less";
+import "../src/assets/css/resource.less";
+import "../src/assets/css/upload.less";
+import "../src/assets/css/upload_album.less";
+import "../src/assets/css/tinymce.less";
+
+setup((app) => {
+    app.use(ElementPlus);
+});
+
+const ensureStorage = (key) => {
+    if (typeof window === "undefined" || window[key]) return;
+    const store = {};
+    window[key] = {
+        getItem(name) {
+            return Object.prototype.hasOwnProperty.call(store, name) ? store[name] : null;
+        },
+        setItem(name, value) {
+            store[name] = String(value);
+        },
+        removeItem(name) {
+            delete store[name];
+        },
+        clear() {
+            Object.keys(store).forEach((name) => delete store[name]);
+        },
+    };
+};
+
+ensureStorage("localStorage");
+ensureStorage("sessionStorage");
+
+if (typeof window !== "undefined") {
+    window.__JX3BOX_STORYBOOK__ = true;
+
+    const originFetch = window.fetch?.bind(window);
+    if (originFetch) {
+        window.fetch = (input, init) => {
+            const nextInput = rewriteProxyRequest(input);
+            return originFetch(nextInput, init);
+        };
+    }
+}
+
+export const parameters = {
+    controls: {
+        expanded: true,
+        sort: "requiredFirst",
+    },
+    actions: {
+        argTypesRegex: "^on[A-Z].*",
+    },
+    docs: {
+        toc: true,
+    },
+    layout: "centered",
+};
+
+function rewriteProxyRequest(input) {
+    if (typeof input === "string") {
+        return rewriteUrlString(input);
+    }
+
+    if (input instanceof Request) {
+        return new Request(rewriteUrlString(input.url), input);
+    }
+
+    return input;
+}
+
+function rewriteUrlString(url) {
+    if (!url) return url;
+
+    if (url.startsWith("/__proxy/") || url.startsWith("/api/")) {
+        return url;
+    }
+
+    if (url.startsWith("http://localhost:6006/__proxy/") || url.startsWith("http://127.0.0.1:6006/__proxy/")) {
+        const parsed = new URL(url);
+        return `${parsed.pathname}${parsed.search}${parsed.hash}`;
+    }
+
+    return url;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-editor",
-    "version": "3.2.5",
+    "version": "3.2.6",
     "description": "JX3BOX Article & Editor",
     "main": "index.js",
     "scripts": {
@@ -9,6 +9,8 @@
         "dev:tinymce": "serve -l 5120 ./tinymce",
         "serve": "npm run dev",
         "build": "npx lessc -x ./tinymce/skins/content/default/content.less ./tinymce/skins/content/default/content.min.css",
+        "storybook": "storybook dev -p 6006",
+        "build-storybook": "storybook build",
         "lint": "vue-cli-service lint",
         "update": "npm --registry https://registry.npmjs.org install @jx3box/jx3box-common@latest @jx3box/jx3box-data@latest @jx3box/jx3box-macro@latest @jx3box/jx3box-talent@latest @jx3box/jx3box-emotion@latest"
     },
@@ -47,6 +49,10 @@
     "devDependencies": {
         "@babel/core": "^7.12.16",
         "@babel/eslint-parser": "^7.12.16",
+        "@storybook/addon-essentials": "^8.6.14",
+        "@storybook/addon-interactions": "^8.6.14",
+        "@storybook/addon-links": "^8.6.14",
+        "@storybook/vue3-webpack5": "^8.6.14",
         "@tailwindcss/postcss": "^4.2.1",
         "@typescript-eslint/eslint-plugin": "^5.31.0",
         "@typescript-eslint/parser": "^5.31.0",
@@ -70,7 +76,9 @@
         "prettier": "2.7.1",
         "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",
         "tailwindcss": "^4.2.1",
         "typescript": "~4.5.5",

package/src/ArticleMarkdown.vue

@@ -173,7 +173,7 @@ export default {
 </script>
 
 <style lang="less">
-@import "./assets/css/article_markdown.less";
+@import "./assets/css/markdown/markdown-article.less";
 
 .v-note-img-wrapper {
     display: none;

package/src/assets/css/markdown/markdown-article.less

@@ -1,18 +1,18 @@
 // md文章样式
 
-@import "module/macro.less";
-@import "module/talent.less";
+@import "./macro.less";
+@import "./talent.less";
 
-@import "markdown/video.less";
-@import "markdown/macro.less";
-@import "markdown/talent.less";
+@import "./video.less";
+@import "./macro.less";
+@import "./talent.less";
 
-@import 'module/directory.less';
-@import 'module/icon.less';
-@import 'module/resource.less';
-@import 'module/jx3_element.less';
+@import '../module/directory.less';
+@import '../module/icon.less';
+@import '../module/resource.less';
+@import '../module/jx3_element.less';
 
-@import 'module/buff.less';
-@import 'module/skill.less';
-@import 'module/item.less';
-@import 'module/npc.less';
+@import '../module/buff.less';
+@import '../module/skill.less';
+@import '../module/item.less';
+@import '../module/npc.less';

package/src/assets/css/markdown/markdown-editor.less

@@ -62,16 +62,16 @@
     }
 }
 
-@import "markdown/video.less";
-@import "markdown/macro.less";
-@import "markdown/talent.less";
+@import "./video.less";
+@import "./macro.less";
+@import "./talent.less";
 
-@import 'module/directory.less';
-@import 'module/icon.less';
-@import 'module/resource.less';
-@import 'module/jx3_element.less';
+@import '../module/directory.less';
+@import '../module/icon.less';
+@import '../module/resource.less';
+@import '../module/jx3_element.less';
 
-@import 'module/buff.less';
-@import 'module/skill.less';
-@import 'module/item.less';
-@import 'module/npc.less';
+@import '../module/buff.less';
+@import '../module/skill.less';
+@import '../module/item.less';
+@import '../module/npc.less';

package/src/components/Author.vue

@@ -1,7 +1,7 @@
 <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"
@@ -71,11 +71,11 @@
 <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 { getDecoration, getDecorationJson, getDecorationV2 } 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_KEY = "decoration_atcard_v2";
 const DECORATION_JSON = "decoration_json";
 const DECORATION_KEY = "decoration_me";
 const HONOR_KEY = "honor_me";
@@ -123,6 +123,13 @@ export default {
         isSuperAuthor: function () {
             return !!this.data?.sign;
         },
+        authorCardStyle: function () {
+            return this.bg
+                ? {
+                      backgroundImage: `url(${this.bg})`,
+                  }
+                : {};
+        },
     },
     watch: {
         uid: {
@@ -170,23 +177,30 @@ export default {
             }
             //已有缓存，读取解析
             if (decoration_atcard) {
-                this.setDecoration(decoration_atcard);
+                this.setAtcardBackground(decoration_atcard);
                 return;
             }
-            getDecoration({ using: 1, user_id: this.uid, type: "atcard" }).then((data) => {
-                let res = data.data.data;
-                if (res.length == 0) {
+            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;
                 }
-                sessionStorage.setItem(ATCARD_KEY + this.uid, res[0].val);
-                this.setDecoration(res[0].val);
+                image = this.showDecorationImage(image);
+                sessionStorage.setItem(ATCARD_KEY + this.uid, image);
+                this.setAtcardBackground(image);
             });
         },
-        setDecoration(val) {
-            this.bg = this.showDecoration(val, "atcard");
+        setAtcardBackground(val) {
+            this.bg = val || "";
         },
         getHonor() {
             this.honor = "";
@@ -265,7 +279,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);
@@ -282,8 +296,10 @@ export default {
         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(/^\//, "");
         },
         authorLink,
     },
@@ -297,6 +313,10 @@ export default {
         background-repeat: no-repeat;
         background-position: top right;
         background-size: 100% auto;
+        &.is-no-atcard {
+            background-color: #f8fafc;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
+        }
         .u-author {
             padding: 5px 0 15px 5px;
         }

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,12 @@ function getDecoration(params) {
     });
 }
 
+function getDecorationV2(params) {
+    return $cms().get(`/api/cms/user/decoration/v2`, {
+        params,
+    });
+}
+
 function getDecorationJson() {
     let url = __cdn + "design/decoration/index.json";
     return axios.get(url);
@@ -39,4 +45,4 @@ function getLetterPaper(params) {
         params,
     });
 }
-export { uploadFile, loadAuthors, loadEmotions, getDecoration, getDecorationJson, getLetterPaper };
+export { uploadFile, loadAuthors, loadEmotions, getDecoration, getDecorationV2, 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 />");
+}

package/stories/components/Author.stories.js

@@ -0,0 +1,36 @@
+import Author from "../../src/components/Author.vue";
+import { previewStory } from "../../src/storybook/storybook.helpers";
+
+export default {
+    title: "Components/Author",
+    component: Author,
+    tags: ["autodocs"],
+    args: {
+        uid: 10086,
+    },
+    argTypes: {
+        uid: {
+            description: "作者 UID。",
+            control: "text",
+            table: { type: { summary: "String | Number" }, category: "required" },
+        },
+    },
+    parameters: {
+        layout: "padded",
+        docs: {
+            description: {
+                component: "作者信息卡片。组件会在侦听 `uid` 后请求远程作者数据，因此在 Storybook 中主要用于查看 props 文档。",
+            },
+        },
+    },
+};
+
+export const Overview = previewStory(Author, {
+    title: "作者卡片预览",
+    description: "这里直接使用项目 demo 中出现过的作者 UID：`8`。如果接口可用，就能看到完整作者卡片，而不是只有 props 表。",
+    code: `<Author :uid="8" />`,
+    style: "min-width: 420px; display: flex; justify-content: flex-start;",
+});
+Overview.args = {
+    uid: 8,
+};