@jx3box/jx3box-ui 2.0.5 → 2.0.6

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,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

@@ -25,10 +25,13 @@
 - PostHeader 创作信息
 - Creators 联合创作
 - Collection 小册
-- Article 文章内容
 - Thx 交互组件
 - SimpleThx 交互组件简化版（仅PVP栏目使用，需要手动引入）
 - Comment 评论
+- RightAffix 固钉
+- PostGuide 快速跳转至上下篇
+- PostVersion 修改历史
+- PostCollection 关联小册
 
 ### 筛选模块 list
 
@@ -43,21 +46,5 @@
 - versionBy 版本筛选
 - zlpBy 资料片筛选
 
-### 个人模块 author
-
-一般用于文章详情的左侧边栏，个人主页等
-
--   Avatar 头像
--   AuthorFans 粉丝榜
--   AuthorFollow 关注用户（区分rss，此处用户更新不会收到消息）
--   AuthorGift 打赏用户
--   AuthorHonor 用户称号
--   AuthorInfo 用户基础信息
--   AuthorLink 用户绑定平台账号（微博，github，直播间）
--   AuthorMedals 用户勋章
--   AuthorPosts 用户作品
--   AuthorRss 订阅用户
--   AuthorTeams 所在团队
--   UserPop 搜索用户弹窗
-
-
+### 其他
+- 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/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;
     }

package/assets/css/single/thx.less

@@ -1,14 +1,14 @@
 .w-thx {
     /* assets/css/single/thx.less */
-    .w-like2,
-    .w-fav2,
-    .w-boxcoin-user,
-    .w-share2,
-    .w-rss,
-    .w-boxcoin-admin {
-        /* assets/css/single/thx.less */
-        .mr(20px);
-    }
+    // .w-like2,
+    // .w-fav2,
+    // .w-boxcoin-user,
+    // .w-share2,
+    // .w-rss,
+    // .w-boxcoin-admin {
+    //     /* assets/css/single/thx.less */
+    //     .mr(20px);
+    // }
     .x;
 
     .u-record-icon {
@@ -26,6 +26,7 @@
     .flex;
     align-items: center;
     justify-content: center;
+    gap: 20px
 }
 .w-thx-copyright {
     /* assets/css/single/thx.less */
@@ -67,7 +68,7 @@
 
     .el-dialog__body {
         /* assets/css/single/thx.less */
-        padding: 10px 20px;
+        //padding: 10px 20px;
 
         .fz(14px,2);
 
@@ -148,6 +149,9 @@
 }
 
 .w-boxcoin-records-list {
+
+    --el-color-primary: @primary;
+
     /* assets/css/single/thx.less */
     max-width: 960px;
     border: 1px solid #eee;
@@ -172,6 +176,10 @@
         }
         display: flex;
         white-space: nowrap;
+
+        a {
+            color: var(--el-color-primary);
+        }
     }
     .u-meta {
         /* assets/css/single/thx.less */
@@ -183,10 +191,12 @@
         .w(40px);
         .db;
         padding-right: 10px;
+        .flex;
+        align-items: center;
+        justify-content: center;
         svg {
             /* assets/css/single/thx.less */
             .size(24px);
-            .mt(4px);
             .db;
             .auto(x);
         }
@@ -196,12 +206,19 @@
         /* assets/css/single/thx.less */
         .w(120px);
         .nobreak;
+        .flex;
+        align-items: center;
         &:hover {
             /* assets/css/single/thx.less */
             text-decoration: underline;
         }
         .mr(20px);
     }
+    .u-default {
+        &:hover{
+            text-decoration: none;
+        }
+    }
     .u-user-avatar {
         /* assets/css/single/thx.less */
         .y;
@@ -229,6 +246,7 @@
         /* assets/css/single/thx.less */
         .nobreak;
         .w(280px);
+        color:@color;
     }
     .u-time {
         /* assets/css/single/thx.less */
@@ -253,6 +271,11 @@
         margin-left: 5px;
         color: #09f;
     }
+
+}
+.w-boxcoin-records-pages {
+    justify-content: center;
+    padding-top: 2px;
 }
 
 @media screen and (max-width: @phone) {