@jx3box/jx3box-ui 2.0.4 → 2.0.6

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,93 @@
+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 { install } from '../index';
+import { Jx3boxUiI18n } from '../i18n';
+import navData from '../assets/data/nav.json';
+import boxData from '../assets/data/box.json';
+import { resolveAdapter, resolveStorybookMock } from './storybookMocks';
+
+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 originalCreate = axios.create.bind(axios);
+    const originalGet = axios.get.bind(axios);
+
+    const withMockAdapter = (instance) => {
+        const defaultAdapter = resolveAdapter(axios, instance.defaults.adapter);
+        instance.defaults.adapter = async (config) => {
+            const mocked = resolveStorybookMock(config);
+            if (mocked) return mocked;
+            if (defaultAdapter) return defaultAdapter(config);
+            throw new Error(`Unmocked request in Storybook: ${config?.url || ''}`);
+        };
+        return instance;
+    };
+
+    axios.create = (...args) => withMockAdapter(originalCreate(...args));
+    axios.get = (url, ...args) => {
+        const config = { method: 'get', url, ...(args[0] || {}) };
+        const mocked = resolveStorybookMock(config);
+        if (mocked) {
+            return Promise.resolve(mocked);
+        }
+        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 });
+    install(app);
+
+    for (const [name, component] of Object.entries(ElementPlusIconsVue)) {
+        app.component(name, component);
+    }
+});
+
+patchAxiosForStorybook();
+bootstrapRuntimeData();
+
+export const parameters = {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+        matchers: {
+            color: /(background|color)$/i,
+            date: /Date$/i,
+        },
+    },
+    layout: 'fullscreen',
+};

package/.storybook/storybookMocks.js

@@ -0,0 +1,191 @@
+import {
+    mockBoxcoinConfig,
+    mockBoxcoinRecords,
+    mockCommitHistories,
+    mockCollection,
+    mockCommentPage,
+    mockCommentPower,
+    mockCreators,
+    mockHonor,
+    mockMedals,
+    mockSearchUser,
+    mockTeams,
+    mockUserInfo,
+    mockUserPosts,
+} from '../src/stories/mockData';
+
+function resolveAdapter(axiosModule, adapter) {
+    if (!adapter) return null;
+    if (typeof adapter === 'function') return adapter;
+    if (typeof axiosModule?.getAdapter === 'function') {
+        return axiosModule.getAdapter(adapter);
+    }
+    return null;
+}
+
+function normalizePath(config) {
+    const rawUrl = config?.url || '';
+    const baseURL = config?.baseURL || '';
+    const base = baseURL
+        ? new URL(baseURL, 'https://storybook.local').toString()
+        : 'https://storybook.local';
+    const url = rawUrl.startsWith('http') ? new URL(rawUrl) : new URL(rawUrl || '/', base);
+    return url.pathname.replace(/^\/__proxy\/[^/]+/, '');
+}
+
+function respond(config, data, status = 200) {
+    return {
+        data,
+        status,
+        statusText: 'OK',
+        headers: {},
+        config,
+        request: {},
+    };
+}
+
+function mockCmsConfig(key) {
+    if (key === 'boxcoin') return { val: 1 };
+    if (key === 'admin_boxcoin_visible') return { val: 1 };
+    if (key === 'level_has_gift_permission') return { val: 0 };
+    if (key === 'comment_strict') return { val: 0 };
+    return { val: '' };
+}
+
+export function resolveStorybookMock(config) {
+    const method = String(config?.method || 'get').toLowerCase();
+    const path = normalizePath(config);
+    const params = config?.params || {};
+
+    if (path.includes('/config/global.json')) {
+        return respond(config, { token_version: 'storybook' });
+    }
+
+    if (method === 'get' && path === '/api/cms/config') {
+        return respond(config, { data: mockCmsConfig(params.key) });
+    }
+
+    if (method === 'get' && path.match(/^\/api\/cms\/post\/\d+\/authors$/)) {
+        return respond(config, { data: mockCreators });
+    }
+
+    if (method === 'get' && path.match(/^\/api\/cms\/post\/collection\/\d+$/)) {
+        return respond(config, { data: mockCollection });
+    }
+
+    if (method === 'get' && path.match(/^\/api\/cms\/user\/\d+\/info$/)) {
+        return respond(config, { data: mockUserInfo });
+    }
+
+    if (method === 'get' && path.match(/^\/api\/cms\/user\/honor\/\d+\/using$/)) {
+        return respond(config, { data: mockHonor });
+    }
+
+    if (method === 'get' && path === '/api/cms/user/search') {
+        return respond(config, { data: mockSearchUser });
+    }
+
+    if (method === 'get' && path.match(/^\/api\/cms\/posts\/user\/\d+\/latest$/)) {
+        return respond(config, { data: { list: mockUserPosts } });
+    }
+
+    if (method === 'get' && path === '/api/cms/user/decoration') {
+        return respond(config, { data: [] });
+    }
+
+    if (method === 'get' && path === '/api/cms/account/permission/i') {
+        return respond(config, { data: { permission: [{ action: 'manage_boxcoin_bbs' }] } });
+    }
+
+    if (method === 'get' && path.match(/^\/api\/next2\/user\/\d+\/medals$/)) {
+        return respond(config, { data: mockMedals });
+    }
+
+    if (method === 'get' && path === '/api/team/relation/public') {
+        return respond(config, { data: mockTeams });
+    }
+
+    if (method === 'get' && path.match(/^\/api\/next2\/rss\/overview\/author\/\d+$/)) {
+        return respond(config, { data: { total: 128, subscribed: false } });
+    }
+
+    if (method === 'get' && path.match(/^\/api\/inspire\/article\/.+\/boxcoin\/limit$/)) {
+        return respond(config, { data: mockBoxcoinConfig });
+    }
+
+    if (method === 'get' && path.match(/^\/api\/inspire\/article\/.+\/history$/)) {
+        return respond(config, { data: mockBoxcoinRecords });
+    }
+
+    if (method === 'get' && path.match(/^\/api\/next2\/comment\/.+\/i-am-author$/)) {
+        return respond(config, mockCommentPower);
+    }
+
+    if (method === 'get' && path.match(/^\/api\/next2\/comment\/.+\/comment\/page\/\d+$/)) {
+        return respond(config, mockCommentPage);
+    }
+
+    if (method === 'get' && path.match(/^\/api\/next2\/comment\/.+\/comment\/\d+\/reply\/page\/\d+$/)) {
+        return respond(config, mockCommentPage);
+    }
+
+    if (method === 'get' && path.match(/^\/api\/next2\/userdata\/commit-history\/content-meta\/\d+\/commit\/history$/)) {
+        return respond(config, {
+            data: {
+                list: mockCommitHistories.map(({ content, ...item }) => item),
+                page: {
+                    total: mockCommitHistories.length,
+                },
+            },
+        });
+    }
+
+    if (method === 'get' && path.match(/^\/api\/next2\/userdata\/commit-history\/content-meta\/\d+\/commit\/by-hash\/.+$/)) {
+        const hash = path.split('/').pop();
+        const matched = mockCommitHistories.find((item) => item.commit_hash === hash) || mockCommitHistories[0];
+        return respond(config, {
+            data: {
+                content: matched?.content || '',
+            },
+        });
+    }
+
+    if (['post', 'put', 'delete'].includes(method) && path.startsWith('/api/next2/comment/')) {
+        return respond(config, { code: 0, data: {} });
+    }
+
+    if (['post', 'delete'].includes(method) && path.startsWith('/api/next2/rss/')) {
+        return respond(config, { code: 0, data: { subscribed: method === 'post' } });
+    }
+
+    if (['post', 'delete', 'get'].includes(method) && path.startsWith('/api/article/favorites/')) {
+        return respond(config, { code: 0, data: { id: 1, totalFavorites: 12 } });
+    }
+
+    if (method === 'get' && path === '/api/vip/i') {
+        return respond(config, {
+            data: {
+                was_vip: 0,
+                expire_date: '1970-02-02T16:00:00.000Z',
+                total_day: 0,
+                was_pro: 0,
+                pro_expire_date: '1970-02-02T16:00:00.000Z',
+                pro_total_day: 0,
+                rename_card_count: 0,
+                had_renamed: 0,
+                namespace_card_count: 0,
+                box_coin: 300,
+                points: 16800,
+                experience: 16800,
+            },
+        });
+    }
+
+    if (method === 'post' && path === '/api/next2/userdata/watch-later/item') {
+        return respond(config, { code: 0, data: {} });
+    }
+
+    return null;
+}
+
+export { resolveAdapter };

package/README.md

@@ -5,40 +5,35 @@
 
 ## 模块
 
-### 个人模块 author
+### 全局
+- CommonHeader 公共头
+- Breadcrumb 面包屑
+- Main 默认内容框架（非必须）
+- LeftSidebar 左侧边栏（非必须）
+- LeftSideToggle 左侧边栏触发器（非必须，可独立使用）
+- RightSidebar 右侧边栏（非必须）
+- CommonFooter 公共底
+- SuspendCommon 移动侧浮窗底（此组件需要手动引入）
+
+### 内容单页 single
 
-一般用于文章详情的左侧边栏
-
--   AuthorFans 粉丝榜
--   AuthorFollow 关注用户（区分rss，此处用户更新不会收到消息）
--   AuthorGift 打赏用户
--   AuthorHonor 用户称号
--   AuthorInfo 用户基础信息
--   AuthorLink 用户绑定平台账号（微博，github，直播间）
--   AuthorMedals 用户勋章
--   AuthorPosts 用户作品
--   AuthorRss 订阅用户
--   AuthorTeams 所在团队
--   Avatar 头像
--   UserPop 搜索用户弹窗
--   
-
-### 管理员模块 bread
-
-一般用于文章详情的右上角管理按钮
-
-- AdminDrop 管理模块触发器
-- Admin 文章管理模块（管理员）
-- AdminDirectMessage 管理员私信
-- Crumb 栏目动态
-- DesignTask 设计任务
-
-
-### 评论模块 comment
+主要是用于详情页的展示内容
 
-文章评论模块，用途包括反馈中心，文章详情评论
+- CmsSingle 单页框架
+- Author 侧边栏作者信息整合
+- PostDirectory 目录
+- PostHeader 创作信息
+- Creators 联合创作
+- Collection 小册
+- Thx 交互组件
+- SimpleThx 交互组件简化版（仅PVP栏目使用，需要手动引入）
+- Comment 评论
+- RightAffix 固钉
+- PostGuide 快速跳转至上下篇
+- PostVersion 修改历史
+- PostCollection 关联小册
 
-### 筛选模块 filters
+### 筛选模块 list
 
 主要用于各栏目的列表筛选
 
@@ -46,58 +41,10 @@
 - markBy 标记筛选
 - menuBy 通用筛选
 - orderBy 排序筛选
-- tagBy 
+- tagBy 标签筛选
 - topicBy 主题筛选
 - versionBy 版本筛选
 - zlpBy 资料片筛选
 
-
-### 顶部模块
-
-主要是header的模块
-
-- alternate 马甲切换
-- asset 用户资产
-- box 魔盒矩阵（移动端）
-- box2 魔盒矩阵（PC）
-- client 客户端切换
-- lang 语言切换
-- logo
-- manage 后台管理入口
-- message 消息中心入口
-- nav 导航栏
-- publish 创作中心入口
-- search 搜索框
-- shop 商城入口
-- user 用户头像+信息pop
-- 会员中心入口
-
-### 交互模块
-
-主要是文章详情中用于用户交互的组件，包含打赏，分享，收藏等等
-
-- BoxcoinAdmin 管理员品鉴
-- BoxcoinRecords 品鉴+打赏记录
-- BoxcoinUser 用户打赏
-- Contributors 多人合作文章中打赏目标选择
-- Fav 收藏
-- Like 点赞
-- Rss 订阅
-- Share 分享
-- WatchLater 稍后再看
-
-
-### 单页
-
-主要是用于详情页的展示内容
-
-- Author 侧边栏作者信息
-- CmsSingle 单页框架
-- Collection 小册
-- Comment 评论
-- Creators 联合创作
-- PostDirectory 目录
-- PostHeader 创作信息
-- PostTopic 右侧边栏头条
-- SimpleThx 简单交互组件集合
-- Thx 交互组件
+### 其他
+- UserPop 搜索用户弹窗

package/assets/css/bread/admin.less

@@ -43,6 +43,10 @@
         /* assets/css/bread/admin.less */
         margin-left: 10px;;
     }
+    .m-status-op {
+        .flex;
+        align-items: center;
+    }
 }
 
 .c-admin-highlight-checkbox {
@@ -64,7 +68,7 @@
     /* assets/css/bread/admin.less */
     .u-banner {
         /* assets/css/bread/admin.less */
-        .mt(5px);
+        .mt(10px);
     }
     .u-btn {
         /* assets/css/bread/admin.less */
@@ -82,6 +86,20 @@
         box-sizing: border-box;
     }
     overflow: hidden;
+
+    background-color: #fbfdff;
+    border: 1px dashed #c0ccda;
+    border-radius: 6px;
+    box-sizing: border-box;
+    width: 148px;
+    height: 148px;
+    line-height: 146px;
+    vertical-align: top;
+
+    &:hover {
+        /* assets/css/bread/admin.less */
+        border-color: #409eff;
+    }
 }
 
 .c-admin-info {
@@ -116,7 +134,7 @@
     }
     .el-select {
         /* assets/css/bread/admin.less */
-        .el-input__wrapper {
+        .el-select__wrapper {
             /* assets/css/bread/admin.less */
             border-top-left-radius: 0;
             border-bottom-left-radius: 0;

package/assets/css/bread/breadcrumb.less

@@ -41,11 +41,11 @@
         /* assets/css/bread/breadcrumb.less */
         .u-title {
             /* assets/css/bread/breadcrumb.less */
-            color: @darkblue;
+            color: var(--el-color-primary);
         }
         .u-channel-logo svg {
             /* assets/css/bread/breadcrumb.less */
-            fill: @darkblue;
+            fill: var(--el-color-primary);
         }
     }
 
@@ -122,6 +122,9 @@
         /* assets/css/bread/breadcrumb.less */
         .pa;
         .rt(10px);
+        .flex(y);gap:10px;
+
+        .el-button{margin:0 !important;}
     }
 }
 .c-breadcrumb.isOverlay {

package/assets/css/comment/quick-reply.less

@@ -4,8 +4,8 @@
         /* assets/css/comment/quick-reply.less */
         cursor: pointer;
         position: relative;
-        top: 8px;
         margin-left: 10px;
+        color:#555;
     }
 }
 .c-jx3box-reply-pop {