@jx3box/jx3box-ui 2.0.4 → 2.0.6

package/src/stories/single/CmsSingleStoryStage.vue

@@ -0,0 +1,118 @@
+<template>
+    <div class="story-cmssingle-stage">
+        <section class="story-cmssingle-stage__panel">
+            <div class="story-cmssingle-stage__preview">
+                <CmsSingle :post="mockPost" :stat="mockStat" :show-thx="false" />
+            </div>
+        </section>
+        <section class="story-cmssingle-stage__props">
+            <StoryPropsTable title="CmsSingle" description="单页详情整合容器。" :items="propsInfo" />
+        </section>
+    </div>
+</template>
+
+<script>
+import CmsSingle from "../../single/CmsSingle.vue";
+import StoryPropsTable from "../components/StoryPropsTable.vue";
+import { mockPost, mockStat } from "../mockData";
+
+export default {
+    name: "CmsSingleStoryStage",
+    components: {
+        CmsSingle,
+        StoryPropsTable,
+    },
+    data: function () {
+        return {
+            mockPost,
+            mockStat,
+            propsInfo: [
+                { name: "post", type: "Object", default: "{}", required: true, description: "完整文章数据对象。" },
+                { name: "stat", type: "Object", default: "{}", description: "统计信息对象。" },
+                { name: "showThx", type: "Boolean", default: "true", description: "是否展示打赏互动区。" },
+            ],
+        };
+    },
+};
+</script>
+
+<style lang="less">
+.story-cmssingle-stage {
+    display: grid;
+    gap: 24px;
+    justify-items: center;
+    padding: 12px 0 0;
+}
+
+.story-cmssingle-stage__panel,
+.story-cmssingle-stage__props {
+    width: min(100%, 1120px);
+}
+
+.story-cmssingle-stage__preview,
+.story-cmssingle-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-cmssingle-stage__preview {
+    padding: 24px 32px 32px;
+}
+
+.story-cmssingle-stage__preview .m-single-box {
+    max-width: 100%;
+}
+
+.story-cmssingle-stage__preview .m-single-info svg,
+.story-cmssingle-stage__preview .m-single-info img,
+.story-cmssingle-stage__preview .w-creators img,
+.story-cmssingle-stage__preview .w-collection svg,
+.story-cmssingle-stage__preview .w-thx-panel svg,
+.story-cmssingle-stage__preview .w-thx-panel img,
+.story-cmssingle-stage__preview .w-boxcoin-records svg,
+.story-cmssingle-stage__preview .w-boxcoin-records img,
+.story-cmssingle-stage__preview .m-comment-box svg,
+.story-cmssingle-stage__preview .m-comment-box img {
+    max-width: none;
+}
+
+.story-cmssingle-stage__preview .m-single-info .u-author svg,
+.story-cmssingle-stage__preview .m-single-info .u-icon-podate svg,
+.story-cmssingle-stage__preview .m-single-info .u-icon-modate svg {
+    width: 16px;
+    height: 16px;
+}
+
+.story-cmssingle-stage__preview .w-creators .u-avatar,
+.story-cmssingle-stage__preview .w-boxcoin-records .u-user-avatar,
+.story-cmssingle-stage__preview .m-comment-box .u-avatar img {
+    width: 48px;
+    height: 48px;
+    object-fit: cover;
+}
+
+.story-cmssingle-stage__preview .w-collection .el-icon,
+.story-cmssingle-stage__preview .w-thx-panel .u-icon,
+.story-cmssingle-stage__preview .w-thx-panel .el-icon,
+.story-cmssingle-stage__preview .w-boxcoin-records .el-icon,
+.story-cmssingle-stage__preview .m-comment-box .el-icon {
+    width: 16px;
+    height: 16px;
+    font-size: 16px;
+}
+
+.story-cmssingle-stage__preview .w-thx-panel .u-icon {
+    width: 26px;
+    height: 26px;
+}
+
+.story-cmssingle-stage__props {
+    display: flex;
+    justify-content: center;
+}
+
+.story-cmssingle-stage__props .story-props-table {
+    width: min(100%, 820px);
+}
+</style>

package/src/stories/single/Collection.stories.js

@@ -0,0 +1,34 @@
+import Collection from '../../single/Collection.vue';
+import StoryPropsTable from '../components/StoryPropsTable.vue';
+
+const meta = {
+    title: 'Single/Collection',
+    component: Collection,
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+
+export default meta;
+
+export const Default = {
+    render: () => ({
+        components: { Collection, StoryPropsTable },
+        setup() {
+            return {
+                propsInfo: [
+                    { name: 'id', type: 'Number | String', default: '0', required: true, description: '小册 ID。' },
+                    { name: 'defaultVisible', type: 'Boolean', default: 'false', description: '默认是否展开。' },
+                ],
+            };
+        },
+        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);">
+                    <Collection :id="1" :default-visible="true" />
+                </section>
+                <StoryPropsTable title="Collection" description="文章所属小册展示。" :items="propsInfo" />
+            </div>
+        `,
+    }),
+};

package/src/stories/single/Comment.stories.js

@@ -0,0 +1,36 @@
+import Comment from '../../single/Comment.vue';
+import StoryPropsTable from '../components/StoryPropsTable.vue';
+
+const meta = {
+    title: 'Single/Comment',
+    component: Comment,
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+
+export default meta;
+
+export const Default = {
+    render: () => ({
+        components: { Comment, StoryPropsTable },
+        setup() {
+            return {
+                propsInfo: [
+                    { name: 'id', type: 'Number | String', default: '0', required: true, description: '评论目标 ID。' },
+                    { name: 'category', type: 'String', default: '""', required: true, description: '评论分类，例如 post。' },
+                    { name: 'normal', type: 'Boolean', default: 'true', description: '普通评论模式。' },
+                    { name: 'order', type: 'String', default: '""', description: '初始排序模式。' },
+                ],
+            };
+        },
+        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);">
+                    <Comment category="post" :id="80449" />
+                </section>
+                <StoryPropsTable title="Comment" description="评论列表与输入组件。" :items="propsInfo" />
+            </div>
+        `,
+    }),
+};

package/src/stories/single/Creators.stories.js

@@ -0,0 +1,34 @@
+import Creators from '../../single/Creators.vue';
+import StoryPropsTable from '../components/StoryPropsTable.vue';
+
+const meta = {
+    title: 'Single/Creators',
+    component: Creators,
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+
+export default meta;
+
+export const Default = {
+    render: () => ({
+        components: { Creators, StoryPropsTable },
+        setup() {
+            return {
+                propsInfo: [
+                    { name: 'postId', type: 'Number | String', default: '0', required: true, description: '当前文章 ID。' },
+                    { name: 'postType', type: 'String', default: '""', required: true, description: '文章类型，用于生成编辑链接。' },
+                ],
+            };
+        },
+        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);">
+                    <Creators :post-id="80449" post-type="bbs" />
+                </section>
+                <StoryPropsTable title="Creators" description="联合创作者展示组件。" :items="propsInfo" />
+            </div>
+        `,
+    }),
+};

package/src/stories/single/PostCollection.stories.js

@@ -0,0 +1,34 @@
+import PostCollection from '../../single/PostCollection.vue';
+import StoryPropsTable from '../components/StoryPropsTable.vue';
+
+const meta = {
+    title: 'Single/PostCollection',
+    component: PostCollection,
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+
+export default meta;
+
+export const Default = {
+    render: () => ({
+        components: { PostCollection, StoryPropsTable },
+        setup() {
+            return {
+                propsInfo: [
+                    { name: 'id', type: 'Number | String', default: '0', description: '关联小册 ID，组件会自动请求列表。' },
+                    { name: 'store', type: 'Object', default: 'null', description: '可直接传入包含 posts 的对象，跳过请求。' },
+                ],
+            };
+        },
+        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);">
+                    <PostCollection :id="1" />
+                </section>
+                <StoryPropsTable title="PostCollection" description="文章关联内容列表，通常用于右侧辅助阅读区域。" :items="propsInfo" />
+            </div>
+        `,
+    }),
+};

package/src/stories/single/PostDirectory.stories.js

@@ -0,0 +1,31 @@
+import PostDirectory from '../../single/PostDirectory.vue';
+import StoryPropsTable from '../components/StoryPropsTable.vue';
+
+const meta = {
+    title: 'Single/PostDirectory',
+    component: PostDirectory,
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+
+export default meta;
+
+export const Default = {
+    render: () => ({
+        components: { PostDirectory, StoryPropsTable },
+        template: `
+            <div style="display:grid;gap:24px;">
+                <section style="border-radius:20px;background:rgba(255,255,255,0.92);padding:20px;box-shadow:0 24px 60px rgba(15,23,42,0.08);">
+                    <PostDirectory />
+                    <div class="c-article-directory" style="margin-top:12px;">
+                        <h2>版本概览</h2>
+                        <h3 class="lv2">核心思路</h3>
+                        <h3 class="lv2">配装建议</h3>
+                    </div>
+                </section>
+                <StoryPropsTable title="PostDirectory" description="当前组件本身无 props，主要配合正文目录渲染结果使用。" :items="[]" />
+            </div>
+        `,
+    }),
+};

package/src/stories/single/PostGuide.stories.js

@@ -0,0 +1,47 @@
+import PostGuide from '../../single/PostGuide.vue';
+import StoryPropsTable from '../components/StoryPropsTable.vue';
+
+const mockGuidePost = {
+    prev_post: {
+        ID: 80440,
+        post_type: 'bbs',
+        post_title: '上一期：配装思路回顾',
+    },
+    next_post: {
+        ID: 80460,
+        post_type: 'bbs',
+        post_title: '下一期：实战循环拆解',
+    },
+};
+
+const meta = {
+    title: 'Single/PostGuide',
+    component: PostGuide,
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+
+export default meta;
+
+export const Default = {
+    render: () => ({
+        components: { PostGuide, StoryPropsTable },
+        setup() {
+            return {
+                mockGuidePost,
+                propsInfo: [
+                    { name: 'post', type: 'Object', default: '{}', description: '包含 prev_post / next_post 的文章导航数据。' },
+                ],
+            };
+        },
+        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);">
+                    <PostGuide :post="mockGuidePost" />
+                </section>
+                <StoryPropsTable title="PostGuide" description="文章底部上一篇 / 下一篇导航。" :items="propsInfo" />
+            </div>
+        `,
+    }),
+};

package/src/stories/single/PostHeader.stories.js

@@ -0,0 +1,39 @@
+import PostHeader from '../../single/PostHeader.vue';
+import StoryPropsTable from '../components/StoryPropsTable.vue';
+import { mockPost, mockStat } from '../mockData';
+
+const meta = {
+    title: 'Single/PostHeader',
+    component: PostHeader,
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+
+export default meta;
+
+export const Default = {
+    render: () => ({
+        components: { PostHeader, StoryPropsTable },
+        setup() {
+            return {
+                mockPost,
+                mockStat,
+                propsInfo: [
+                    { name: 'post', type: 'Object', default: '{}', required: true, description: '文章标题、作者、客户端、时间等来源。' },
+                    { name: 'stat', type: 'Object', default: '{}', description: '统计信息，常用为 views。' },
+                    { name: 'titleExtra', type: 'String', default: '""', description: '是否展示额外标签区域。' },
+                    { name: 'anonymous', type: 'Boolean', default: 'false', description: '匿名展示作者。' },
+                ],
+            };
+        },
+        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);">
+                    <PostHeader :post="mockPost" :stat="mockStat" title-extra="1" />
+                </section>
+                <StoryPropsTable title="PostHeader" description="单页顶部信息栏。" :items="propsInfo" />
+            </div>
+        `,
+    }),
+};

package/src/stories/single/PostVersion.stories.js

@@ -0,0 +1,41 @@
+import PostVersion from '../../single/PostVersion.vue';
+import StoryPropsTable from '../components/StoryPropsTable.vue';
+import { mockPost } from '../mockData';
+
+const meta = {
+    title: 'Single/PostVersion',
+    component: PostVersion,
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+
+export default meta;
+
+export const Default = {
+    render: () => ({
+        components: { PostVersion, StoryPropsTable },
+        setup() {
+            return {
+                storyPost: {
+                    ...mockPost,
+                    link_content_meta_id: 501,
+                },
+                propsInfo: [
+                    { name: 'post', type: 'Object', default: '{}', required: true, description: '包含标题、正文和 `link_content_meta_id` 的文章对象。' },
+                ],
+            };
+        },
+        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);">
+                    <div style="margin-bottom:16px;color:#475569;line-height:1.8;">
+                        该 story 已接入 mock 历史版本数据。点击“对比”可直接打开版本差异弹窗。
+                    </div>
+                    <PostVersion :post="storyPost" />
+                </section>
+                <StoryPropsTable title="PostVersion" description="文章历史版本列表与对比弹窗。" :items="propsInfo" />
+            </div>
+        `,
+    }),
+};

package/src/stories/single/RightAffix.stories.js

@@ -0,0 +1,84 @@
+import { onMounted, onBeforeUnmount, ref } from 'vue';
+import RightAffix from '../../single/RightAffix.vue';
+import StoryPropsTable from '../components/StoryPropsTable.vue';
+import Bus from '../../../utils/bus';
+
+const meta = {
+    title: 'Single/RightAffix',
+    component: RightAffix,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    argTypes: {
+        postId: { control: 'number' },
+        postType: { control: 'text' },
+        postTitle: { control: 'text' },
+        showComment: { control: 'boolean' },
+    },
+};
+
+export default meta;
+
+export const Default = {
+    args: {
+        postId: 80449,
+        postType: 'bbs',
+        postTitle: '轻剑驭风版本攻略示例',
+        showComment: true,
+    },
+    render: (args) => ({
+        components: { RightAffix, StoryPropsTable },
+        setup() {
+            const commentCount = ref(0);
+
+            const onToComment = () => {
+                commentCount.value += 1;
+            };
+
+            const openAffix = () => Bus.emit('toggleRightSide', true);
+            const closeAffix = () => Bus.emit('toggleRightSide', false);
+
+            onMounted(() => {
+                // 触发一次滚动事件，方便在 Storybook 中更容易观察“回到顶部”按钮
+                window.scrollTo({ top: 1200 });
+                window.dispatchEvent(new Event('scroll'));
+            });
+
+            onBeforeUnmount(() => {
+                window.scrollTo({ top: 0 });
+            });
+
+            return {
+                args,
+                commentCount,
+                onToComment,
+                openAffix,
+                closeAffix,
+                propsInfo: [
+                    { name: 'postId', type: 'String | Number', default: '""', description: '当前文章 ID，用于收藏查询。' },
+                    { name: 'postType', type: 'String', default: '""', description: '文章类型，例如 bbs / pvx。' },
+                    { name: 'postTitle', type: 'String', default: '""', description: '文章标题，用于收藏请求。' },
+                    { name: 'showComment', type: 'Boolean | Number', default: 'false', description: '是否展示评论入口按钮。' },
+                ],
+            };
+        },
+        template: `
+            <div style="display:grid;gap:24px;">
+                <section style="position:relative;min-height:180vh;border-radius:20px;background:linear-gradient(180deg,#f8fafc 0%,#eef2ff 100%);padding:24px;box-shadow:0 24px 60px rgba(15,23,42,0.08);">
+                    <div style="max-width:760px;color:#334155;line-height:1.8;">
+                        <h3 style="margin:0 0 12px;font-size:22px;color:#0f172a;">RightAffix 交互舞台</h3>
+                        <p style="margin:0 0 10px;">该组件固定在右侧，包含收藏、评论入口和回到顶部。你可以通过下方按钮模拟右栏展开/收起。</p>
+                        <p style="margin:0;">评论按钮点击次数：<strong>{{ commentCount }}</strong></p>
+                        <div style="display:flex;gap:12px;margin-top:16px;">
+                            <button type="button" class="el-button el-button--primary el-button--small" @click="openAffix">展开</button>
+                            <button type="button" class="el-button el-button--small is-plain" @click="closeAffix">收起</button>
+                        </div>
+                    </div>
+
+                    <RightAffix v-bind="args" @toComment="onToComment" />
+                </section>
+                <StoryPropsTable title="RightAffix" description="单页右侧悬浮交互区，依赖收藏组件与滚动状态。" :items="propsInfo" />
+            </div>
+        `,
+    }),
+};

package/src/stories/single/SimpleThx.stories.js

@@ -0,0 +1,39 @@
+import SimpleThx from '../../single/SimpleThx.vue';
+import StoryPropsTable from '../components/StoryPropsTable.vue';
+
+const meta = {
+    title: 'Single/SimpleThx',
+    component: SimpleThx,
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+
+export default meta;
+
+export const Default = {
+    render: () => ({
+        components: { SimpleThx, StoryPropsTable },
+        setup() {
+            return {
+                presetConfig: { admin_max: 1000, admin_min: 10, admin_points: [10, 50, 100], admin_left: 4800, admin_total: 10000, user_points: [10, 20, 50], user_left: 820, boxcoin_enable: 1 },
+                propsInfo: [
+                    { name: 'postId', type: 'Number | String', default: '0', required: true, description: '文章 ID。' },
+                    { name: 'postType', type: 'String', default: '""', required: true, description: '文章类型。' },
+                    { name: 'postTitle', type: 'String', default: '""', description: '文章标题。' },
+                    { name: 'userId', type: 'Number | String', default: '0', description: '作者 UID。' },
+                    { name: 'adminBoxcoinEnable / userBoxcoinEnable', type: 'Boolean', default: 'false', description: '控制打赏区显示。' },
+                    { name: 'presetConfig', type: 'Object', default: '{}', description: 'Storybook 下可直接注入打赏配置，避免空态。' },
+                ],
+            };
+        },
+        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);">
+                    <SimpleThx post-type="bbs" post-title="轻剑驭风版本攻略示例" :post-id="80449" :user-id="8" :admin-boxcoin-enable="true" :user-boxcoin-enable="true" :allow-gift="true" :preset-config="presetConfig" />
+                </section>
+                <StoryPropsTable title="SimpleThx" description="简化互动条组件。" :items="propsInfo" />
+            </div>
+        `,
+    }),
+};