@jx3box/jx3box-ui 2.0.4 → 2.0.6

package/src/stories/layout/SuspendCommonStage.vue

@@ -0,0 +1,143 @@
+<template>
+    <div class="suspend-stage">
+        <div class="suspend-stage__device">
+            <div class="suspend-stage__screen">
+                <div class="suspend-stage__status"></div>
+                <div class="suspend-stage__hero">
+                    <div class="suspend-stage__eyebrow">Mobile Preview</div>
+                    <h2 class="suspend-stage__title">SuspendCommon</h2>
+                    <p class="suspend-stage__text">这里模拟移动端内容页底部场景，便于观察底部浮窗的真实布局效果。</p>
+                </div>
+                <div class="suspend-stage__card">
+                    <div class="suspend-stage__card-title">当前页面</div>
+                    <div class="suspend-stage__card-text">轻剑驭风版本攻略示例，向下滚动后底部浮窗依然固定显示。</div>
+                </div>
+                <slot></slot>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "SuspendCommonStage",
+    mounted() {
+        document.body.classList.add("storybook-suspend-stage");
+    },
+    beforeUnmount() {
+        document.body.classList.remove("storybook-suspend-stage");
+    },
+};
+</script>
+
+<style lang="less">
+.suspend-stage {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 32px 16px;
+    background:
+        radial-gradient(circle at top, rgba(250, 204, 21, 0.16), transparent 28rem),
+        linear-gradient(180deg, #e9eef5 0%, #d8e0ea 100%);
+}
+
+.suspend-stage__device {
+    position: relative;
+    width: 390px;
+    height: 844px;
+    border-radius: 36px;
+    padding: 10px;
+    background: #0f172a;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.3);
+}
+
+.suspend-stage__screen {
+    position: relative;
+    height: 100%;
+    overflow: hidden;
+    border-radius: 28px;
+    background:
+        linear-gradient(180deg, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0) 18rem),
+        linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
+}
+
+.suspend-stage__status {
+    width: 140px;
+    height: 28px;
+    margin: 10px auto 0;
+    border-radius: 999px;
+    background: rgba(15, 23, 42, 0.92);
+}
+
+.suspend-stage__hero {
+    padding: 28px 24px 18px;
+}
+
+.suspend-stage__eyebrow {
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: #b45309;
+}
+
+.suspend-stage__title {
+    margin: 10px 0 0;
+    font-size: 32px;
+    line-height: 1.15;
+    font-weight: 700;
+    color: #0f172a;
+}
+
+.suspend-stage__text {
+    margin-top: 12px;
+    font-size: 14px;
+    line-height: 1.8;
+    color: #475569;
+}
+
+.suspend-stage__card {
+    margin: 0 24px;
+    padding: 18px;
+    border-radius: 24px;
+    background: rgba(255, 255, 255, 0.82);
+    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
+}
+
+.suspend-stage__card-title {
+    font-size: 15px;
+    font-weight: 700;
+    color: #0f172a;
+}
+
+.suspend-stage__card-text {
+    margin-top: 8px;
+    font-size: 13px;
+    line-height: 1.7;
+    color: #64748b;
+}
+
+.suspend-stage .p-suspend {
+    left: 50%;
+    width: 390px;
+    transform: translateX(-50%);
+    border-radius: 28px 28px 0 0;
+}
+
+body.storybook-suspend-stage {
+    overflow: hidden;
+}
+
+body.storybook-suspend-stage .p-drawer-suspend {
+    background: rgba(15, 23, 42, 0.32);
+}
+
+body.storybook-suspend-stage .p-drawer-suspend .u-drawer {
+    left: 50%;
+    right: auto;
+    width: 390px !important;
+    transform: translateX(-50%);
+    border-radius: 28px 28px 0 0;
+}
+</style>

package/src/stories/mockData.js

@@ -0,0 +1,275 @@
+export const mockPost = {
+    ID: 80449,
+    post_title: '轻剑驭风版本攻略示例',
+    post_type: 'bbs',
+    post_author: 8,
+    author_info: {
+        display_name: '薄嘴唇靓仔',
+    },
+    post_status: 'publish',
+    visible: 0,
+    original: 1,
+    client: 'std',
+    is_wujie: 1,
+    post_date: '2026-03-10T10:00:00+08:00',
+    post_modified: '2026-03-10T12:00:00+08:00',
+    post_collection: 1,
+    collection_collapse: true,
+    _check: true,
+    comment: 0,
+    anonymous: 0,
+    post_content: `
+        <h2>版本概览</h2>
+        <p>这是用于 Storybook 展示的示例内容，方便在组件协作时快速查看正文渲染、目录和互动区域。</p>
+        <h3>核心思路</h3>
+        <p>以稳定输出和阅读体验为主，保留标题、段落、列表和分隔块。</p>
+        <ul>
+            <li>技能循环以稳定为主</li>
+            <li>装备搭配偏泛用场景</li>
+            <li>正文支持目录生成与分页渲染</li>
+        </ul>
+        <h3>配装建议</h3>
+        <p>优先保证命中与会心，其次根据副本环境调整破防与加速。</p>
+    `,
+};
+
+export const mockStat = {
+    views: 24567,
+};
+
+export const mockCollection = {
+    title: '轻剑驭风小册',
+    posts: [
+        { id: 80449, type: 'bbs', title: '轻剑驭风版本攻略示例' },
+        { id: 80450, type: 'bbs', title: '配装与输出循环拆解' },
+        { id: 80451, type: 'custom', title: '团队实战思路补充', url: 'https://www.jx3box.com' },
+    ],
+};
+
+export const mockCreators = {
+    super_author: {
+        ID: 8,
+        display_name: '薄嘴唇靓仔',
+        user_avatar: 'https://cdn.jx3box.com/upload/avatar/2022/3/2/8_9860765.png',
+    },
+    other_authors: [
+        {
+            author_id: 17,
+            label: '校对',
+            status: 1,
+            post_author_info: {
+                ID: 17,
+                display_name: '藏剑校对君',
+                user_avatar: 'https://cdn.jx3box.com/upload/avatar/2022/3/2/8_9860765.png',
+            },
+        },
+        {
+            author_id: 26,
+            label: '补充说明',
+            status: 1,
+            post_author_info: {
+                ID: 26,
+                display_name: '副本小助手',
+                user_avatar: 'https://cdn.jx3box.com/upload/avatar/2022/3/2/8_9860765.png',
+            },
+        },
+    ],
+};
+
+export const mockUserInfo = {
+    id: 8,
+    ID: 8,
+    display_name: '薄嘴唇靓仔',
+    user_avatar: 'https://cdn.jx3box.com/upload/avatar/2022/3/2/8_9860765.png',
+    user_avatar_frame: 'gold',
+    user_bio: '擅长版本攻略与机制拆解，长期更新实战内容。',
+    experience: 16800,
+    is_pro: true,
+    is_pre: false,
+    sign: true,
+    user_nickname: '薄嘴唇靓仔',
+    weibo_name: 'jx3box-demo',
+    weibo_id: 'jx3box-demo',
+    github_name: 'JX3BOX',
+    tv_type: 'bilibili',
+    tv_id: '2066064028',
+};
+
+export const mockHonor = {
+    ranking: 1,
+    year: '2025',
+    val: 'storybook_honor',
+    honor_info: {
+        url: '/rank/1',
+        only: false,
+        prefix: '年度',
+        ranking: [[1, 10, '金榜']],
+        suffix: '作者',
+        color: '#ffffff',
+        img: 'default',
+        img_ext: 'png',
+    },
+};
+
+export const mockUserPosts = [
+    { ID: 80449, post_type: 'bbs', post_title: '轻剑驭风版本攻略示例' },
+    { ID: 80450, post_type: 'bbs', post_title: '配装与输出循环拆解' },
+    { ID: 80451, post_type: 'bbs', post_title: '副本环境适配建议' },
+];
+
+export const mockMedals = [
+    { id: 1, medal: 'storyboard-star', medal_desc: '年度创作者', medal_url: '/medal/1' },
+    { id: 2, medal: 'storyboard-ace', medal_desc: '高质量攻略作者', medal_url: '/medal/2' },
+];
+
+export const mockTeams = [
+    {
+        team_id: 1001,
+        team_name: '诗画印象',
+        team_server: '蝶恋花',
+        team_logo: 'https://cdn.jx3box.com/image/team/logo.png',
+    },
+];
+
+export const mockCommentPower = {
+    allow: true,
+    uid: 8,
+    is_author: 1,
+    is_editor: 1,
+    is_white: false,
+    article_open_white: 1,
+    can_del: true,
+};
+
+export const mockCommentPage = {
+    data: [
+        {
+            id: 9001,
+            userId: 8,
+            displayName: '薄嘴唇靓仔',
+            avatar: mockUserInfo.user_avatar,
+            user_avatar_frame: '',
+            commentDate: '2026-03-10 12:00',
+            content: '<p>这套 story 的目的是让组件在 Storybook 里有完整上下文，不再只看单个孤立节点。</p>',
+            attachments: '[]',
+            likes: 12,
+            is_likes: 0,
+            is_top: 1,
+            is_star: 1,
+            is_secret: 0,
+            is_white: 1,
+            reply: [
+                {
+                    id: 9101,
+                    userId: 17,
+                    displayName: '藏剑校对君',
+                    avatar: mockCreators.other_authors[0].post_author_info.user_avatar,
+                    user_avatar_frame: '',
+                    commentDate: '2026-03-10 12:10',
+                    content: '<p>目录、正文、评论和互动区已经能在同一个画面里联动查看了。</p>',
+                    attachments: '[]',
+                    likes: 3,
+                    is_likes: 0,
+                    is_top: 0,
+                    is_star: 0,
+                    is_secret: 0,
+                    is_white: 0,
+                },
+            ],
+        },
+    ],
+    page: {
+        index: 1,
+        pageSize: 10,
+        pageTotal: 1,
+        total: 1,
+    },
+};
+
+export const mockBoxcoinConfig = {
+    limit: {
+        admin_max: 1000,
+        admin_min: 10,
+        admin_points: [10, 50, 100, 500],
+        user_points: [10, 20, 50, 100],
+        total_limit: 10000,
+    },
+    asManagerBoxCoinRemain: 4800,
+    asManagerBoxCoinTotal: 10000,
+    asPostTypeBoxcoinHasUsedTotalAtCurrentYear: 1200,
+    asUserBoxCoinRemainAll: 300,
+    asUserBoxCoinRemainStd: 500,
+    asUserBoxCoinRemainOrigin: 120,
+};
+
+export const mockBoxcoinRecords = {
+    data: [
+        {
+            id: 1,
+            operate_user_id: 17,
+            user_id: 8,
+            count: 50,
+            ext_take_off_count: 0,
+            ext2_take_off_count: 0,
+            is_user_gift: 1,
+            remark: '感谢持续更新，内容很有帮助。',
+            created_at: '2026-03-10 12:20',
+            ext_operate_user_info: {
+                id: 17,
+                avatar: mockUserInfo.user_avatar,
+                display_name: '盒友甲',
+            },
+            ext_user_info: {
+                avatar: mockUserInfo.user_avatar,
+                display_name: mockUserInfo.display_name,
+            },
+        },
+    ],
+    page: {
+        total: 1,
+    },
+    fromManager: 0,
+    fromUser: 50,
+};
+
+export const mockSearchUser = {
+    ID: 8,
+    display_name: '薄嘴唇靓仔',
+    user_avatar: mockUserInfo.user_avatar,
+};
+
+export const mockCommitHistories = [
+    {
+        id: 301,
+        commit_hash: 'story-hash-003',
+        created_at: '2026-03-10 18:30',
+        content: `
+            <h2>版本概览</h2>
+            <p>第三版补充了实战环境下的起手建议，并优化了小药说明。</p>
+            <h3>核心思路</h3>
+            <p>优先确保循环稳定，再根据副本站位调整爆发时机。</p>
+        `,
+    },
+    {
+        id: 302,
+        commit_hash: 'story-hash-002',
+        created_at: '2026-03-09 21:10',
+        content: `
+            <h2>版本概览</h2>
+            <p>第二版补充了配装对比表，并调整了目录结构。</p>
+            <h3>核心思路</h3>
+            <p>兼顾命中与会心，在多数副本环境里更易复用。</p>
+        `,
+    },
+    {
+        id: 303,
+        commit_hash: 'story-hash-001',
+        created_at: '2026-03-08 15:00',
+        content: `
+            <h2>版本概览</h2>
+            <p>初版主要建立正文结构，包含配装建议与循环说明。</p>
+            <h3>核心思路</h3>
+            <p>先保证阅读完整度，再逐步补足细节。</p>
+        `,
+    },
+];

package/src/stories/other/UserPop.stories.js

@@ -0,0 +1,51 @@
+import UserPop from '../../author/UserPop.vue';
+import StoryPropsTable from '../components/StoryPropsTable.vue';
+
+const meta = {
+    title: 'Other/UserPop',
+    component: UserPop,
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+
+export default meta;
+
+export const Default = {
+    render: () => ({
+        components: { UserPop, StoryPropsTable },
+        data() {
+            return {
+                visible: false,
+                propsInfo: [
+                    { name: 'title', type: 'String', default: '""', description: '弹窗标题。' },
+                    { name: 'show', type: 'Boolean', default: 'false', description: '外部控制弹窗开关。' },
+                ],
+            };
+        },
+        methods: {
+            switchUserPop(val) {
+                this.visible = val;
+            },
+            openDialog() {
+                this.visible = false;
+                this.$nextTick(() => {
+                    this.visible = true;
+                });
+            },
+        },
+        template: `
+            <div style="display: grid; gap: 24px;">
+                <section style="border-radius: 20px; background: rgba(255,255,255,0.92); padding: 24px; box-shadow: 0 24px 60px rgba(15,23,42,0.08);">
+                    <h2 style="margin: 0; font-size: 28px; color: #0f172a;">UserPop</h2>
+                    <p style="margin-top: 12px; color: #475569; line-height: 1.8;">用于搜索并确认用户的弹窗组件。</p>
+                    <el-button type="primary" @click="openDialog">重新打开弹窗</el-button>
+                </section>
+                <StoryPropsTable title="UserPop" description="搜索用户弹窗的入参说明。" :items="propsInfo" />
+                <UserPop title="选择用户" :show="visible" @switchUserPop="switchUserPop">
+                    可以输入 UID 或昵称进行搜索。
+                </UserPop>
+            </div>
+        `,
+    }),
+};

package/src/stories/single/Author.stories.js

@@ -0,0 +1,19 @@
+import SingleAuthor from '../../single/Author.vue';
+import AuthorStoryStage from './AuthorStoryStage.vue';
+
+const meta = {
+    title: 'Single/Author',
+    component: SingleAuthor,
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+
+export default meta;
+
+export const Default = {
+    render: () => ({
+        components: { AuthorStoryStage },
+        template: `<AuthorStoryStage />`,
+    }),
+};

package/src/stories/single/AuthorStoryStage.vue

@@ -0,0 +1,103 @@
+<template>
+    <div class="story-author-stage">
+        <section class="story-author-stage__panel">
+            <div class="story-author-stage__preview">
+                <SingleAuthor :uid="8" />
+            </div>
+        </section>
+        <section class="story-author-stage__props">
+            <StoryPropsTable title="Author" description="详情页作者侧边栏整合组件。" :items="propsInfo" />
+        </section>
+    </div>
+</template>
+
+<script>
+import SingleAuthor from "../../single/Author.vue";
+import StoryPropsTable from "../components/StoryPropsTable.vue";
+
+export default {
+    name: "AuthorStoryStage",
+    components: {
+        SingleAuthor,
+        StoryPropsTable,
+    },
+    data: function () {
+        return {
+            propsInfo: [
+                { name: "uid", type: "Number | String", default: "0", required: true, description: "作者 UID。" },
+                { name: "anonymous", type: "Number | String", default: "0", description: "匿名模式下不展示完整信息。" },
+            ],
+        };
+    },
+};
+</script>
+
+<style lang="less">
+.story-author-stage {
+    display: grid;
+    gap: 24px;
+    justify-items: center;
+    padding: 12px 0 0;
+}
+
+.story-author-stage__panel,
+.story-author-stage__props {
+    width: min(100%, 960px);
+}
+
+.story-author-stage__preview,
+.story-author-stage__props .story-props-table {
+    border-radius: 20px;
+    background: rgba(255, 255, 255, 0.92);
+    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
+}
+
+.story-author-stage__preview {
+    padding: 32px;
+}
+
+.story-author-stage__preview .c-author {
+    max-width: 320px;
+    margin: 0 auto;
+}
+
+.story-author-stage__preview .u-label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.story-author-stage__preview .u-label img,
+.story-author-stage__preview .u-label svg {
+    width: 16px;
+    height: 16px;
+    flex: 0 0 16px;
+}
+
+.story-author-stage__preview .u-superauthor img {
+    width: 16px;
+    height: 16px;
+}
+
+.story-author-stage__preview .u-medal-img {
+    width: 20px;
+    height: 20px;
+}
+
+.story-author-stage__preview .u-more img,
+.story-author-stage__preview .u-more svg,
+.story-author-stage__preview .u-icon {
+    width: 12px;
+    height: 12px;
+    flex: 0 0 12px;
+}
+
+.story-author-stage__props {
+    display: flex;
+    justify-content: center;
+}
+
+.story-author-stage__props .story-props-table {
+    width: min(100%, 760px);
+}
+</style>

package/src/stories/single/CmsSingle.stories.js

@@ -0,0 +1,19 @@
+import CmsSingle from '../../single/CmsSingle.vue';
+import CmsSingleStoryStage from './CmsSingleStoryStage.vue';
+
+const meta = {
+    title: 'Single/CmsSingle',
+    component: CmsSingle,
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+
+export default meta;
+
+export const Default = {
+    render: () => ({
+        components: { CmsSingleStoryStage },
+        template: `<CmsSingleStoryStage />`,
+    }),
+};