@jx3box/jx3box-ui 2.0.5 → 2.0.7

package/.storybook/preview.js

@@ -4,9 +4,11 @@ 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';
@@ -18,14 +20,26 @@ 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) => {
-        if (typeof url === 'string' && url.includes('/config/global.json')) {
-            return Promise.resolve({
-                data: {
-                    token_version: 'storybook',
-                },
-            });
+        const config = { method: 'get', url, ...(args[0] || {}) };
+        const mocked = resolveStorybookMock(config);
+        if (mocked) {
+            return Promise.resolve(mocked);
         }
         return originalGet(url, ...args);
     };
@@ -57,6 +71,7 @@ function bootstrapRuntimeData() {
 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);
@@ -64,13 +79,7 @@ setup((app) => {
 });
 
 patchAxiosForStorybook();
-
-export const decorators = [
-    (story) => {
-        bootstrapRuntimeData();
-        return story();
-    },
-];
+bootstrapRuntimeData();
 
 export const parameters = {
     actions: { argTypesRegex: '^on[A-Z].*' },

package/.storybook/storybookMocks.js

@@ -0,0 +1,214 @@
+import {
+    mockBoxcoinConfig,
+    mockBoxcoinRecords,
+    mockCommitHistories,
+    mockCollection,
+    mockCommentPage,
+    mockCommentPower,
+    mockCreators,
+    mockHonor,
+    mockWikiComments,
+    mockWikiRevisions,
+    mockWikiStat,
+    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\/summary-any\/.+\/stat$/)) {
+        return respond(config, { data: mockWikiStat, status: 200 });
+    }
+
+    if (method === 'get' && path === '/api/cms/wiki/comment') {
+        return respond(config, { data: mockWikiComments });
+    }
+
+    if (method === 'get' && path.match(/^\/api\/cms\/wiki\/post\/type\/.+\/source\/.+\/versions$/)) {
+        return respond(config, { data: mockWikiRevisions });
+    }
+
+    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', 'put', 'delete'].includes(method) && path.startsWith('/api/cms/wiki/comment')) {
+        return respond(config, { code: 0, data: {} });
+    }
+
+    if (method === 'put' && path.match(/^\/api\/cms\/manage\/wiki\/comment\/\d+\/(star|top)$/)) {
+        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

@@ -6,58 +6,54 @@
 ## 模块
 
 ### 全局
-- CommonHeader 公共头
-- Breadcrumb 面包屑
-- Main 默认内容框架（非必须）
-- LeftSidebar 左侧边栏（非必须）
-- LeftSideToggle 左侧边栏触发器（非必须，可独立使用）
-- RightSidebar 右侧边栏（非必须）
-- CommonFooter 公共底
-- SuspendCommon 移动侧浮窗底（此组件需要手动引入）
+
+-   CommonHeader 公共头
+-   Breadcrumb 面包屑
+-   Main 默认内容框架（非必须）
+-   LeftSidebar 左侧边栏（非必须）
+-   LeftSideToggle 左侧边栏触发器（非必须，可独立使用）
+-   RightSidebar 右侧边栏（非必须）
+-   CommonFooter 公共底
+-   SuspendCommon 移动侧浮窗底（此组件需要手动引入）
 
 ### 内容单页 single
 
 主要是用于详情页的展示内容
 
-- CmsSingle 单页框架
-- Author 侧边栏作者信息整合
-- PostDirectory 目录
-- PostHeader 创作信息
-- Creators 联合创作
-- Collection 小册
-- Article 文章内容
-- Thx 交互组件
-- SimpleThx 交互组件简化版（仅PVP栏目使用，需要手动引入）
-- Comment 评论
+-   CmsSingle 单页框架
+-   Author 侧边栏作者信息整合
+-   PostDirectory 目录
+-   PostHeader 创作信息
+-   Creators 联合创作
+-   Collection 小册
+-   Thx 交互组件
+-   SimpleThx 交互组件简化版（仅 PVP 栏目使用，需要手动引入）
+-   Comment 评论
+-   RightAffix 固钉
+-   PostGuide 快速跳转至上下篇
+-   PostVersion 修改历史
+-   PostCollection 关联小册
 
 ### 筛选模块 list
 
 主要用于各栏目的列表筛选
 
-- clientBy 客户端筛选
-- markBy 标记筛选
-- menuBy 通用筛选
-- orderBy 排序筛选
-- tagBy 标签筛选
-- topicBy 主题筛选
-- versionBy 版本筛选
-- zlpBy 资料片筛选
-
-### 个人模块 author
-
-一般用于文章详情的左侧边栏，个人主页等
-
--   Avatar 头像
--   AuthorFans 粉丝榜
--   AuthorFollow 关注用户（区分rss，此处用户更新不会收到消息）
--   AuthorGift 打赏用户
--   AuthorHonor 用户称号
--   AuthorInfo 用户基础信息
--   AuthorLink 用户绑定平台账号（微博，github，直播间）
--   AuthorMedals 用户勋章
--   AuthorPosts 用户作品
--   AuthorRss 订阅用户
--   AuthorTeams 所在团队
--   UserPop 搜索用户弹窗
+-   clientBy 客户端筛选
+-   markBy 标记筛选
+-   menuBy 通用筛选
+-   orderBy 排序筛选
+-   tagBy 标签筛选
+-   topicBy 主题筛选
+-   versionBy 版本筛选
+-   zlpBy 资料片筛选
+
+### 百科模块 wiki
 
+-   GamePrice 游戏价格组件
+-   WikiPanel 百科面板
+-   WikiComments 百科评论
+-   WikiRevisions 百科修订
 
+### 其他
+
+-   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 {

package/assets/css/common/left-sidebar.less

@@ -6,7 +6,7 @@
     .pf;
     .z(600);
     left: 0;
-    top: @header-height + @bread-height;
+    top: @header-height + @bread-height + 1px;
     bottom: 0;
     background-color: @bg-light;
     border-right: 1px solid #eee;

package/assets/css/interact/like2.less

@@ -12,8 +12,6 @@
         /* assets/css/interact/like2.less */
         color: #888;
         .ml(10px);
-        .pr;
-        top: 4px;
     }
 
     &.disabled {
@@ -21,4 +19,9 @@
         .tm(0.5);
         cursor: default;
     }
+
+    .w-like2__trigger {
+        .flex;
+        align-items: center;
+    }
 }

package/assets/css/interact/qrcode.less

@@ -0,0 +1,69 @@
+.w-qrcode {
+    display: inline-flex;
+    align-items: center;
+    .pr;
+    z-index: 200;
+    width: fit-content;
+    white-space: nowrap;
+    .u-icon {
+        .mr(5px);
+        .size(14px);
+        .y(-2px);
+        fill: @color;
+    }
+    .u-text {
+        .fz(13px);
+        user-select: none;
+    }
+    .pointer;
+    transition: 0.1s ease-in-out;
+    &:hover {
+        color: @pink;
+        .u-icon {
+            fill: @pink;
+        }
+    }
+
+    .u-pic {
+        .size(100px);
+        .mb(5px);
+    }
+}
+.u-qrcode-popup {
+    position: fixed;
+    transform: translateX(-50%);
+    padding: 10px;
+    border: 1px solid #e8e8e8;
+    z-index: 9999;
+    background: #fff;
+    border-radius: 3px;
+    font-size: 12px;
+    text-align: center;
+    color: #888;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+}
+@media screen and (max-width: @phone) {
+    .w-qrcode {
+        .none;
+    }
+}
+.w-qrcode-static {
+    .u-qrcode {
+        .ps;
+    }
+    .u-icon {
+        .mr(5px);
+        .size(14px);
+        .y(-2px);
+        fill: @color;
+    }
+    .u-pic {
+        background-color: #fff;
+        padding: 7px 7px 7px 8px;
+    }
+    .u-txt {
+        padding: 0 5px;
+        .db;
+        .fz(12px,2);
+    }
+}

package/assets/css/single/author.less

@@ -15,13 +15,13 @@
         i,
         svg {
             /* assets/css/single/author.less */
-            .size(16px);
+            .size(18px);
             .mr(5px);
         }
         span {
             /* assets/css/single/author.less */
             .fz(12px);
-            .bold;
+            font-weight: 500;
         }
         // border-bottom: 1px solid @border;
     }
@@ -85,6 +85,11 @@
         .mt(5px);
         display: flex;
         align-items: center;
+        gap:8px;
+
+        .el-button{
+            margin:0;
+        }
     }
     .u-links {
         /* assets/css/single/author.less */
@@ -92,16 +97,16 @@
     }
     .u-block {
         /* assets/css/single/author.less */
-        .mt(20px);
+        .mt(22px);
     }
 
-    .u-btn {
-        /* assets/css/single/author.less */
-        &:hover {
-            /* assets/css/single/author.less */
-            color: @primary;
-        }
-    }
+    // .u-btn {
+    //     /* assets/css/single/author.less */
+    //     &:hover {
+    //         /* assets/css/single/author.less */
+    //         color: @primary;
+    //     }
+    // }
 }
 
 .c-sidebar-left .c-author {

package/assets/css/single/cms-single.less

@@ -11,6 +11,7 @@
 @media screen and (max-width: @phone) {
     /* assets/css/single/cms-single.less */
     .m-single-box {
+        --el-color-primary: @primary;
         /* assets/css/single/cms-single.less */
         padding: 0 15px;
     }