@jx3box/jx3box-ui 2.0.3 → 2.0.5

package/.storybook/main.js

@@ -0,0 +1,208 @@
+const path = require('path');
+
+const lessResourcePatterns = [
+    path.resolve(__dirname, '../node_modules/@jx3box/jx3box-common/css/var.less'),
+    path.resolve(__dirname, '../node_modules/@jx3box/jx3box-common/css/mixin.less'),
+    path.resolve(__dirname, '../assets/css/var.less'),
+    path.resolve(__dirname, '../assets/css/mixin.less'),
+    path.resolve(__dirname, '../node_modules/csslab/base.less'),
+];
+
+function walkRules(rules, visitor) {
+    if (!Array.isArray(rules)) return;
+    rules.forEach((rule) => {
+        visitor(rule);
+        if (Array.isArray(rule.oneOf)) walkRules(rule.oneOf, visitor);
+        if (Array.isArray(rule.rules)) walkRules(rule.rules, visitor);
+    });
+}
+
+function ensureVueSvgInlineLoader(config) {
+    walkRules(config.module?.rules, (rule) => {
+        if (!Array.isArray(rule.use)) return;
+
+        const hasVueLoader = rule.use.some((use) => {
+            const loader = typeof use === 'string' ? use : use?.loader;
+            return loader && loader.includes('vue-loader');
+        });
+
+        if (!hasVueLoader) return;
+
+        const hasSvgInlineLoader = rule.use.some((use) => {
+            const loader = typeof use === 'string' ? use : use?.loader;
+            return loader && loader.includes('vue-svg-inline-loader');
+        });
+
+        if (!hasSvgInlineLoader) {
+            rule.use.push({
+                loader: require.resolve('vue-svg-inline-loader'),
+            });
+        }
+    });
+}
+
+function ensureLessGlobalResources(config) {
+    walkRules(config.module?.rules, (rule) => {
+        if (!Array.isArray(rule.use)) return;
+
+        for (let i = 0; i < rule.use.length; i += 1) {
+            const currentUse = rule.use[i];
+            const loader = typeof currentUse === 'string' ? currentUse : currentUse?.loader;
+
+            if (!loader || !loader.includes('less-loader')) continue;
+
+            const hasStyleResource = rule.use.some((use) => {
+                const useLoader = typeof use === 'string' ? use : use?.loader;
+                return useLoader && useLoader.includes('style-resources-loader');
+            });
+
+            if (!hasStyleResource) {
+                rule.use.splice(i + 1, 0, {
+                    loader: require.resolve('style-resources-loader'),
+                    options: {
+                        patterns: lessResourcePatterns,
+                    },
+                });
+            }
+
+            break;
+        }
+    });
+}
+
+function removeVueDocgenLoader(config) {
+    walkRules(config.module?.rules, (rule) => {
+        const directLoader = typeof rule.loader === 'string' ? rule.loader : '';
+        if (directLoader.includes('vue-docgen-loader')) {
+            rule.__remove = true;
+            return;
+        }
+
+        if (!Array.isArray(rule.use)) return;
+        rule.use = rule.use.filter((use) => {
+            const loader = typeof use === 'string' ? use : use?.loader;
+            return !(loader && loader.includes('vue-docgen-loader'));
+        });
+    });
+
+    if (Array.isArray(config.module?.rules)) {
+        config.module.rules = config.module.rules.filter((rule) => !rule.__remove);
+    }
+}
+
+function ensureStyleRules(config) {
+    const rules = config.module?.rules || [];
+    const hasLessRule = rules.some((rule) => String(rule.test).includes('less'));
+    const hasScssRule = rules.some((rule) => String(rule.test).includes('scss'));
+    const hasCssRule = rules.some((rule) => String(rule.test).includes('\\.css$'));
+
+    if (hasCssRule) {
+        walkRules(rules, (rule) => {
+            if (!String(rule.test).includes('\\.css$') || !Array.isArray(rule.use)) return;
+            const hasPostcss = rule.use.some((use) => {
+                const loader = typeof use === 'string' ? use : use?.loader;
+                return loader && loader.includes('postcss-loader');
+            });
+            if (!hasPostcss) {
+                rule.use.push({
+                    loader: require.resolve('postcss-loader'),
+                    options: {
+                        postcssOptions: {
+                            config: path.resolve(__dirname, '../postcss.config.js'),
+                        },
+                    },
+                });
+            }
+        });
+    }
+
+    if (!hasLessRule) {
+        rules.push({
+            test: /\.less$/i,
+            use: [
+                require.resolve('style-loader'),
+                {
+                    loader: require.resolve('css-loader'),
+                    options: { importLoaders: 1 },
+                },
+                {
+                    loader: require.resolve('postcss-loader'),
+                    options: {
+                        postcssOptions: {
+                            config: path.resolve(__dirname, '../postcss.config.js'),
+                        },
+                    },
+                },
+                {
+                    loader: require.resolve('less-loader'),
+                    options: {
+                        lessOptions: {
+                            javascriptEnabled: true,
+                        },
+                    },
+                },
+                {
+                    loader: require.resolve('style-resources-loader'),
+                    options: {
+                        patterns: lessResourcePatterns,
+                    },
+                },
+            ],
+        });
+    }
+
+    if (!hasScssRule) {
+        rules.push({
+            test: /\.s[ac]ss$/i,
+            use: [
+                require.resolve('style-loader'),
+                require.resolve('css-loader'),
+                {
+                    loader: require.resolve('postcss-loader'),
+                    options: {
+                        postcssOptions: {
+                            config: path.resolve(__dirname, '../postcss.config.js'),
+                        },
+                    },
+                },
+                require.resolve('sass-loader'),
+            ],
+        });
+    }
+
+    config.module.rules = rules;
+}
+
+/** @type { import('@storybook/vue3-webpack5').StorybookConfig } */
+module.exports = {
+    stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+    addons: [
+        {
+            name: '@storybook/addon-essentials',
+            options: {
+                docs: false,
+            },
+        },
+        '@storybook/addon-interactions',
+    ],
+    framework: {
+        name: '@storybook/vue3-webpack5',
+        options: {
+            docgen: false,
+        },
+    },
+    webpackFinal: async (config) => {
+        config.resolve = config.resolve || {};
+        config.resolve.alias = {
+            ...(config.resolve.alias || {}),
+            '@': path.resolve(__dirname, '../src'),
+        };
+
+        removeVueDocgenLoader(config);
+        ensureStyleRules(config);
+        ensureVueSvgInlineLoader(config);
+        ensureLessGlobalResources(config);
+
+        return config;
+    },
+};

package/.storybook/preview.js

@@ -0,0 +1,84 @@
+import { setup } from '@storybook/vue3';
+import ElementPlus from 'element-plus';
+import zhCn from 'element-plus/es/locale/lang/zh-cn';
+import * as ElementPlusIconsVue from '@element-plus/icons-vue';
+import axios from 'axios';
+
+import { Jx3boxUiI18n } from '../i18n';
+import navData from '../assets/data/nav.json';
+import boxData from '../assets/data/box.json';
+
+import '@jx3box/jx3box-common/css/normalize.css';
+import '@jx3box/jx3box-common/css/font.css';
+import 'element-plus/dist/index.css';
+import '@jx3box/jx3box-common/css/tailwind.css';
+
+let axiosPatched = false;
+
+function patchAxiosForStorybook() {
+    if (axiosPatched) return;
+
+    const originalGet = axios.get.bind(axios);
+    axios.get = (url, ...args) => {
+        if (typeof url === 'string' && url.includes('/config/global.json')) {
+            return Promise.resolve({
+                data: {
+                    token_version: 'storybook',
+                },
+            });
+        }
+        return originalGet(url, ...args);
+    };
+
+    axiosPatched = true;
+}
+
+function bootstrapRuntimeData() {
+    try {
+        sessionStorage.setItem('nav', JSON.stringify(navData));
+        sessionStorage.setItem('box', JSON.stringify(boxData));
+    } catch (e) {
+        // ignore session storage failures in restricted contexts
+    }
+
+    try {
+        localStorage.removeItem('token');
+        localStorage.removeItem('uid');
+        localStorage.removeItem('group');
+        localStorage.removeItem('created_at');
+        localStorage.removeItem('name');
+        localStorage.removeItem('status');
+        localStorage.removeItem('avatar');
+    } catch (e) {
+        // ignore local storage failures in restricted contexts
+    }
+}
+
+setup((app) => {
+    app.use(Jx3boxUiI18n, { locale: 'zh-CN' });
+    app.use(ElementPlus, { locale: zhCn });
+
+    for (const [name, component] of Object.entries(ElementPlusIconsVue)) {
+        app.component(name, component);
+    }
+});
+
+patchAxiosForStorybook();
+
+export const decorators = [
+    (story) => {
+        bootstrapRuntimeData();
+        return story();
+    },
+];
+
+export const parameters = {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+        matchers: {
+            color: /(background|color)$/i,
+            date: /Date$/i,
+        },
+    },
+    layout: 'fullscreen',
+};

package/README.md

@@ -5,10 +5,49 @@
 
 ## 模块
 
+### 全局
+- CommonHeader 公共头
+- Breadcrumb 面包屑
+- Main 默认内容框架（非必须）
+- LeftSidebar 左侧边栏（非必须）
+- LeftSideToggle 左侧边栏触发器（非必须，可独立使用）
+- RightSidebar 右侧边栏（非必须）
+- CommonFooter 公共底
+- SuspendCommon 移动侧浮窗底（此组件需要手动引入）
+
+### 内容单页 single
+
+主要是用于详情页的展示内容
+
+- CmsSingle 单页框架
+- Author 侧边栏作者信息整合
+- PostDirectory 目录
+- PostHeader 创作信息
+- Creators 联合创作
+- Collection 小册
+- Article 文章内容
+- Thx 交互组件
+- SimpleThx 交互组件简化版（仅PVP栏目使用，需要手动引入）
+- Comment 评论
+
+### 筛选模块 list
+
+主要用于各栏目的列表筛选
+
+- clientBy 客户端筛选
+- markBy 标记筛选
+- menuBy 通用筛选
+- orderBy 排序筛选
+- tagBy 标签筛选
+- topicBy 主题筛选
+- versionBy 版本筛选
+- zlpBy 资料片筛选
+
 ### 个人模块 author
 
-一般用于文章详情的左侧边栏
+一般用于文章详情的左侧边栏，个人主页等
 
+-   Avatar 头像
 -   AuthorFans 粉丝榜
 -   AuthorFollow 关注用户（区分rss，此处用户更新不会收到消息）
 -   AuthorGift 打赏用户
@@ -19,34 +58,6 @@
 -   AuthorPosts 用户作品
 -   AuthorRss 订阅用户
 -   AuthorTeams 所在团队
--   Avatar 头像
 -   UserPop 搜索用户弹窗
--   
-
-### 管理员模块 bread
 
-一般用于文章详情的右上角管理按钮
 
-- AdminDrop 管理模块触发器
-- Admin 文章管理模块（管理员）
-- AdminDirectMessage 管理员私信
-- Crumb 栏目动态
-- DesignTask 设计任务
-
-
-### 评论模块 comment
-
-文章评论模块，用途包括反馈中心，文章详情评论
-
-### 筛选模块 filters
-
-主要用于各栏目的列表筛选
-
-- clientBy 客户端筛选
-- markBy 标记筛选
-- menuBy 通用筛选
-- orderBy 排序筛选
-- tagBy 
-- topicBy 主题筛选
-- versionBy 版本筛选
-- zlpBy 资料片筛选

package/i18n/messages/en-US.js

@@ -55,6 +55,7 @@ export default {
         panel: {
             manageCenter: "Admin",
         },
+        all: "All",
     },
     footer: {
         slogan1: "All-in-one tools & resources for JX3.",

package/i18n/messages/vi.js

@@ -55,6 +55,7 @@ export default {
         panel: {
             manageCenter: "Quản trị",
         },
+        all: "Tất cả",
     },
     footer: {
         slogan1: "Tổng hợp công cụ & tài nguyên JX3.",

package/i18n/messages/zh-CN.js

@@ -55,6 +55,7 @@ export default {
         panel: {
             manageCenter: "管理中心",
         },
+        all: "全部",
     },
     footer: {
         slogan1: "一站式剑三工具与资源聚合站。",

package/i18n/messages/zh-TW.js

@@ -55,6 +55,7 @@ export default {
         panel: {
             manageCenter: "管理中心",
         },
+        all: "全部",
     },
     footer: {
         slogan1: "一站式劍三工具與資源聚合站。",

package/package.json

@@ -1,12 +1,14 @@
 {
     "name": "@jx3box/jx3box-ui",
-    "version": "2.0.3",
+    "version": "2.0.5",
     "description": "JX3BOX Vue3 UI",
     "main": "index.js",
     "scripts": {
         "dev": "vue-cli-service serve --mode development",
         "serve": "vue-cli-service serve --mode production",
         "debug": "vue-cli-service serve --mode debug",
+        "storybook": "storybook dev -p 6006",
+        "build-storybook": "storybook build",
         "build": "npm run build:prod",
         "build:dev": "cross-env NODE_OPTIONS=--max-old-space-size=4096 vue-cli-service build --mode development",
         "build:prod": "cross-env NODE_OPTIONS=--max-old-space-size=4096 vue-cli-service build --mode production",
@@ -31,7 +33,7 @@
     },
     "dependencies": {
         "@element-plus/icons-vue": "^2.3.2",
-        "@jx3box/jx3box-common": "^9.1.0",
+        "@jx3box/jx3box-common": "^9.1.1",
         "@jx3box/jx3box-data": "^3.9.2",
         "@jx3box/jx3box-emotion": "^1.3.0",
         "@jx3box/jx3box-macro": "^1.0.3",
@@ -60,6 +62,10 @@
     "devDependencies": {
         "@babel/core": "^7.12.16",
         "@babel/eslint-parser": "^7.28.6",
+        "@storybook/addon-essentials": "^8.6.18",
+        "@storybook/addon-interactions": "^8.6.18",
+        "@storybook/test": "^8.6.18",
+        "@storybook/vue3-webpack5": "^8.6.18",
         "@tailwindcss/postcss": "^4.2.1",
         "@vue/cli-plugin-babel": "~5.0.0",
         "@vue/cli-plugin-eslint": "~5.0.0",
@@ -77,6 +83,7 @@
         "prettier": "2.7.1",
         "sass": "^1.97.3",
         "sass-loader": "^16.0.7",
+        "storybook": "^8.6.18",
         "style-resources-loader": "^1.5.0",
         "tailwindcss": "^4.2.1",
         "vue-svg-inline-loader": "^2.1.3"

package/src/App.vue

@@ -78,7 +78,7 @@
 </template>
 
 <script>
-import singlebox from "./single/cms-single.vue";
+import singlebox from "./single/CmsSingle.vue";
 import UploadAlum from "./editor/UploadAlum.vue";
 import Author from "./single/Author.vue";
 import SimpleThxVue from "./single/SimpleThx.vue";

package/src/CommonFooter.vue

@@ -3,10 +3,10 @@
         <div class="mx-auto w-full" style="max-width: 92rem">
             <div class="grid grid-cols-1 gap-10 pb-10 lg:grid-cols-12 lg:gap-8">
                 <section class="lg:col-span-3">
-                    <div class="flex items-center space-x-3">
+                    <a class="flex items-center space-x-3 cursor-pointer" href="/">
                         <img class="u-logo h-9 w-9" svg-inline src="../assets/img/common/logo.svg" alt="JX3BOX" />
                         <span class="text-2xl font-bold tracking-tight text-white">JX3BOX</span>
-                    </div>
+                    </a>
                     <p class="mt-5 text-sm leading-7 text-gray-400" style="max-width: 20rem">
                         {{ $jx3boxT("jx3boxUi.footer.slogan1", "一站式剑三工具与资源聚合站。") }}<br />
                         {{ $jx3boxT("jx3boxUi.footer.slogan2", "江湖路远，幸甚有你。") }}

package/src/comment/CommentContent.vue

@@ -213,27 +213,27 @@ export default {
             default: "",
         },
         hasReply: {
-            type: Boolean,
+            type: [Boolean, Number],
             default: false,
         },
         canDelete: {
-            type: Boolean,
+            type: [Boolean, Number],
             default: false,
         },
         canSetTop: {
-            type: Boolean,
+            type: [Boolean, Number],
             default: false,
         },
         canCancelTop: {
-            type: Boolean,
+            type: [Boolean, Number],
             default: false,
         },
         canHide: {
-            type: Boolean,
+            type: [Boolean, Number],
             default: false,
         },
         isLike: {
-            type: Boolean,
+            type: [Boolean, Number],
             default: false,
         },
         likes: {
@@ -241,11 +241,11 @@ export default {
             default: 0,
         },
         canSetStar: {
-            type: Boolean,
+            type: [Boolean, Number],
             default: false,
         },
         canCancelStar: {
-            type: Boolean,
+            type: [Boolean, Number],
             default: false,
         },
         attachments: {
@@ -257,11 +257,11 @@ export default {
             default: 0,
         },
         canAddWhite: {
-            type: Boolean,
+            type: [Boolean, Number],
             default: false,
         },
         canRemoveWhite: {
-            type: Boolean,
+            type: [Boolean, Number],
             default: false,
         },
     },

package/src/footer/resource.vue

@@ -17,9 +17,35 @@
                     <template #reference>
                         <a
                             class="flex h-12 items-center rounded-xl border border-gray-700 bg-gray-800 px-4 text-xs text-gray-300 transition hover:border-blue-500 hover:bg-gray-700"
-                            :href="item.href || 'javascript:;'"
+                            :href="item.href || '#'"
                             :target="item.href ? '_blank' : null"
                             :rel="item.href ? 'noopener noreferrer' : null"
+                            @click="handleLinkClick($event, item)"
+                        >
+                            <span class="mr-2.5 flex h-4 w-4 items-center justify-center">
+                                <img class="h-4 w-4" :src="item.icon" :alt="getDownloadName(item)" />
+                            </span>
+                            <span>{{ getDownloadName(item) }}</span>
+                        </a>
+                    </template>
+                </el-popover>
+                <el-popover
+                    v-else-if="item.placeholder"
+                    trigger="hover"
+                    placement="top"
+                    :show-after="150"
+                    popper-class="c-footer--v4__popover"
+                >
+                    <div class="p-3 text-center text-xs font-semibold">
+                        {{ item.placeholder }}
+                    </div>
+                    <template #reference>
+                        <a
+                            class="flex h-12 items-center rounded-xl border border-gray-700 bg-gray-800 px-4 text-xs text-gray-300 transition hover:border-blue-500 hover:bg-gray-700"
+                            :href="item.href || '#'"
+                            :target="item.href ? '_blank' : null"
+                            :rel="item.href ? 'noopener noreferrer' : null"
+                            @click="handleLinkClick($event, item)"
                         >
                             <span class="mr-2.5 flex h-4 w-4 items-center justify-center">
                                 <img class="h-4 w-4" :src="item.icon" :alt="getDownloadName(item)" />
@@ -31,9 +57,10 @@
                 <a
                     v-else
                     class="flex h-12 items-center rounded-xl border border-gray-700 bg-gray-800 px-4 text-xs text-gray-300 transition hover:border-blue-500 hover:bg-gray-700"
-                    :href="item.href || 'javascript:;'"
+                    :href="item.href || '#'"
                     :target="item.href ? '_blank' : null"
                     :rel="item.href ? 'noopener noreferrer' : null"
+                    @click="handleLinkClick($event, item)"
                 >
                     <span class="mr-2.5 flex h-4 w-4 items-center justify-center">
                         <img class="h-4 w-4" :src="item.icon" :alt="getDownloadName(item)" />
@@ -62,7 +89,7 @@
                         :alt="$jx3boxT('jx3boxUi.footer.qqBot', 'QQ机器人')"
                     />
                 </div>
-                <div>
+                <div @click="copyText('3889010020')" class="cursor-pointer">
                     <p class="font-bold uppercase tracking-wider text-gray-500" style="font-size: 10px">
                         {{ $jx3boxT("jx3boxUi.footer.qqBotService", "QQ 机器人服务") }}
                     </p>
@@ -82,6 +109,7 @@
 </template>
 
 <script>
+import { copyText } from "../../utils";
 import i18nMixin from "../../i18n/mixin";
 export default {
     name: "FooterResource",
@@ -97,6 +125,7 @@ export default {
                     href: "",
                     icon: require("../../assets/img/common/ios.svg"),
                     // qrcode: require("../../assets/img/common/ios.jpg"),
+                    placeholder: "即将上线",
                 },
                 {
                     key: "android",
@@ -104,6 +133,7 @@ export default {
                     href: "",
                     icon: require("../../assets/img/common/android.svg"),
                     // qrcode: require("../../assets/img/common/android.jpg"),
+                    placeholder: "即将上线",
                 },
                 {
                     key: "harmonyNext",
@@ -111,6 +141,7 @@ export default {
                     href: "",
                     icon: require("../../assets/img/common/harmony.svg"),
                     // qrcode: require("../../assets/img/common/harmony.jpg"),
+                    placeholder: "即将上线",
                 },
                 {
                     key: "miniProgram",
@@ -127,6 +158,7 @@ export default {
     computed: {},
     watch: {},
     methods: {
+        copyText,
         getDownloadName(item) {
             if (item?.key) {
                 const k = item.key === "harmonyNext" ? "harmonyNext" : item.key;
@@ -139,6 +171,9 @@ export default {
             if (item?.labelKey) return this.$jx3boxT(`jx3boxUi.footer.${item.labelKey}`, item.label || item.labelKey);
             return item?.label || "";
         },
+        handleLinkClick(e, item) {
+            if (!item?.href) e.preventDefault();
+        },
     },
     created: function () {},
     mounted: function () {},

package/src/header/alternate.vue

@@ -42,7 +42,7 @@
 </template>
 
 <script>
-import Bus from "./bus";
+import Bus from "../../utils/bus";
 import { showAvatar } from "@jx3box/jx3box-common/js/utils";
 import dayjs from "dayjs";
 import User from "@jx3box/jx3box-common/js/user";
@@ -75,7 +75,7 @@ export default {
         },
     },
     mounted() {
-        Bus.$on("showAlternate", () => {
+        Bus.on("showAlternate", () => {
             this.visible = true;
         });
         this.init();

package/src/header/box.vue

@@ -30,7 +30,7 @@
 <script>
 import search from "./search.vue";
 import _ from "lodash";
-import Bus from "./bus";
+import Bus from "../../utils/bus";
 import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
 import i18nMixin from "../../i18n/mixin";
 import box from "../../assets/data/box.json";
@@ -76,7 +76,7 @@ export default {
     },
     methods: {
         closeBox: function () {
-            Bus.$emit("toggleBox", false);
+            Bus.emit("toggleBox", false);
         },
         matchedClient: function (client) {
             return client == "all" ? true : client == this.client;
@@ -126,7 +126,7 @@ export default {
         this.loadMenu();
     },
     mounted: function () {
-        Bus.$on("toggleBox", (status) => {
+        Bus.on("toggleBox", (status) => {
             if (status == undefined) {
                 this.status = !this.status;
             } else {
@@ -134,7 +134,7 @@ export default {
             }
         });
         document.addEventListener("click", function () {
-            Bus.$emit("toggleBox", false);
+            Bus.emit("toggleBox", false);
         });
     },
     components: {

package/src/header/box2.vue

@@ -41,6 +41,14 @@
                                 <span class="u-txt">{{ item.abbr }}</span>
                             </a>
                         </li>
+                        <li v-if="allMatched && filteredList.length > 0">
+                            <a class="u-item" href="/app">
+                                <div class="u-icon-wrap">
+                                    <img class="u-pic" svg-inline :src="allicon" />
+                                </div>
+                                <span class="u-txt">{{ $jx3boxT("jx3boxUi.header.all", "全部") }}</span>
+                            </a>
+                        </li>
                     </ul>
                     <div v-if="searchQuery && !homeMatched && filteredList.length === 0" class="u-empty">
                         未找到匹配应用
@@ -52,13 +60,15 @@
 </template>
 
 <script>
-import Bus from "./bus";
+import Bus from "../../utils/bus";
 import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
 import i18nMixin from "../../i18n/mixin";
 import box from "../../assets/data/box.json";
 import { getMenu } from "../../service/header.js";
+import axios from "axios";
+import { flatten } from "lodash";
 
-const { __imgPath, __cdn } = JX3BOX;
+const { __cdn, __imgPath } = JX3BOX;
 
 export default {
     name: "Box2",
@@ -67,17 +77,32 @@ export default {
         return {
             status: false,
             searchQuery: "",
-            data: box,
+            data: [],
             client: location.href.includes("origin") ? "origin" : "std",
         };
     },
     computed: {
         homeicon: function () {
-            return __imgPath + "image/box/home.svg";
+            return this.getBoxIcon("home.svg");
+        },
+        allicon: function () {
+            return this.getBoxIcon("more.svg");
         },
         list: function () {
             return this.data.filter((item) => {
-                return item.status && (item.client == this.client || item.client == "all");
+                const currentClient = String(this.client || "").toLowerCase();
+                const rawClient = item.client;
+                const clients = !rawClient
+                    ? []
+                    : Array.isArray(rawClient)
+                    ? rawClient.map((c) => String(c || "").toLowerCase())
+                    : String(rawClient || "")
+                          .split(",")
+                          .map((c) => String(c || "").trim().toLowerCase())
+                          .filter(Boolean);
+                const matchedClient =
+                    !clients.length || clients.includes("all") || clients.includes(currentClient);
+                return matchedClient;
             });
         },
         filteredList: function () {
@@ -95,7 +120,12 @@ export default {
         homeMatched: function () {
             const query = (this.searchQuery || "").toLowerCase().trim();
             if (!query) return true;
-            return "首页".includes(query);
+            return this.$jx3boxT("jx3boxUi.header.home", "首页").includes(query);
+        },
+        allMatched: function () {
+            const query = (this.searchQuery || "").toLowerCase().trim();
+            if (!query) return true;
+            return this.$jx3boxT("jx3boxUi.header.all", "全部").includes(query);
         },
     },
     methods: {
@@ -135,18 +165,26 @@ export default {
         },
         loadMenu() {
             try {
-                const _box = JSON.parse(sessionStorage.getItem("box"));
-                if (_box) {
-                    this.data = _box;
+                const data = JSON.parse(sessionStorage.getItem("box"));
+                if (data) {
+                    this.data = data;
                 } else {
-                    getMenu("box").then((res) => {
-                        this.data = res.data?.data?.val;
+                    axios.get(__imgPath + "logo/app.json").then((res) => {
+                        const _data = flatten(Object.values(res.data || {}));
+                        this.data = _data.map((item) => ({
+                            img: item.key + ".svg",
+                            uuid: item.key,
+                            abbr: item.label,
+                            href: item.link,
+                            client: item.client || ["std", "origin"],
+                        }));
+
+                        if (!this.data.length) this.data = box;
                         sessionStorage.setItem("box", JSON.stringify(this.data));
                     });
                 }
             } catch (e) {
                 this.data = box;
-                console.log("loadBox2 error", e);
             }
         },
         onEsc(e) {
@@ -166,12 +204,12 @@ export default {
                 this.status = !!status;
             }
         };
-        Bus.$on("toggleBox", this.__toggleHandler);
+        Bus.on("toggleBox", this.__toggleHandler);
         window.addEventListener("keydown", this.onEsc);
     },
     beforeUnmount() {
         if (this.__toggleHandler) {
-            Bus.$off("toggleBox", this.__toggleHandler);
+            Bus.off("toggleBox", this.__toggleHandler);
             this.__toggleHandler = null;
         }
         window.removeEventListener("keydown", this.onEsc);

package/src/header/lang.vue

@@ -1,7 +1,6 @@
 <template>
     <div class="c-header-panel c-lang-switcher" id="c-header-lang-switcher">
         <span class="u-translator" href="/dashboard/boxcoin">
-            <!-- <langIcon class="u-icon" /> -->
             <img
                 class="u-icon"
                 svg-inline
@@ -86,7 +85,7 @@ export default {
             if (!normalized) return;
 
             const ok = setJx3boxUiLocale(normalized);
-            if (!ok) location.reload();
+            if (ok) location.reload();
         },
     },
 };

package/src/header/logo.vue

@@ -14,7 +14,7 @@
 <script>
 // import { useLayoutStore } from "@/store/layout";
 import i18nMixin from "../../i18n/mixin";
-import Bus from "./bus";
+import Bus from "../../utils/bus";
 
 export default {
     name: "c-header-logo",
@@ -34,7 +34,7 @@ export default {
         // 盒子
         toggleBox: function (e) {
             e.stopPropagation();
-            Bus.$emit("toggleBox");
+            Bus.emit("toggleBox");
         },
     },
     mounted: function () {},

package/src/header/userInfo.vue

@@ -86,7 +86,7 @@
 
                     <div class="u-other">
                         <a href="/dashboard/role" class="u-item"
-                            ><el-icon><Sunny /></el-icon>{{ $jx3boxT("jx3boxUi.header.roleManage", "角色管理") }}
+                            ><el-icon><User /></el-icon>{{ $jx3boxT("jx3boxUi.header.roleManage", "角色管理") }}
                         </a>
                         <a href="/dashboard/fav" class="u-item"
                             ><el-icon><Star /></el-icon>{{ $jx3boxT("jx3boxUi.header.favorites", "收藏订阅") }}
@@ -95,7 +95,7 @@
                             ><el-icon><Memo /></el-icon>{{ $jx3boxT("jx3boxUi.header.orderCenter", "订单中心") }}
                         </a>
                         <a href="/dashboard/config" class="u-item"
-                            ><el-icon><Box /></el-icon>{{ $jx3boxT("jx3boxUi.header.dashboard", "个人中心") }}
+                            ><el-icon><Help /></el-icon>{{ $jx3boxT("jx3boxUi.header.dashboard", "个人中心") }}
                         </a>
                         <hr />
                         <a href="/dashboard/profile" class="u-item"
@@ -125,7 +125,7 @@ import { showDate } from "@jx3box/jx3box-common/js/moment";
 import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
 import { copyText } from "./utils";
 import { getMenu } from "../../service/header";
-import Bus from "./bus";
+import Bus from "../../utils/bus";
 import alternate from "./alternate.vue";
 import i18nMixin from "../../i18n/mixin";
 
@@ -272,7 +272,7 @@ export default {
             }
         },
         changeAlternate: function () {
-            Bus.$emit("showAlternate");
+            Bus.emit("showAlternate");
         },
     },
 };

package/src/stories/layout/CommonFooter.stories.js

@@ -0,0 +1,22 @@
+import CommonFooter from '../../CommonFooter.vue';
+
+const meta = {
+    title: 'Layout/CommonFooter',
+    component: CommonFooter,
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+
+export default meta;
+
+export const Default = {
+    render: () => ({
+        components: { CommonFooter },
+        template: `
+            <div style="min-height: 100vh; display: flex; align-items: flex-end; background: #111827;">
+                <CommonFooter style="width: 100%;" />
+            </div>
+        `,
+    }),
+};

package/src/stories/layout/CommonHeader.stories.js

@@ -0,0 +1,39 @@
+import CommonHeader from '../../CommonHeader.vue';
+
+const meta = {
+    title: 'Layout/CommonHeader',
+    component: CommonHeader,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    argTypes: {
+        overlayEnable: { control: 'boolean' },
+    },
+};
+
+export default meta;
+
+export const Default = {
+    args: {
+        overlayEnable: false,
+    },
+    render: (args) => ({
+        components: { CommonHeader },
+        setup() {
+            return { args };
+        },
+        template: `
+            <div style="min-height: 200vh; background: linear-gradient(180deg, #0b1220 0%, #1f2937 100%);">
+                <CommonHeader v-bind="args" />
+                <div style="height: 1600px;"></div>
+            </div>
+        `,
+    }),
+};
+
+export const Overlay = {
+    args: {
+        overlayEnable: true,
+    },
+    render: Default.render,
+};

package/src/header/bus.js

@@ -1,9 +0,0 @@
-import mitt from "mitt";
-
-const emitter = mitt();
-
-export default {
-    $on: emitter.on,
-    $off: emitter.off,
-    $emit: emitter.emit,
-};