@jx3box/jx3box-ui 2.0.5 → 2.0.7

package/src/stories/components/StoryPropsTable.vue

@@ -0,0 +1,137 @@
+<template>
+    <section class="story-props-table">
+        <div class="story-props-table__header">
+            <div>
+                <div class="story-props-table__eyebrow">Props</div>
+                <h3 class="story-props-table__title">{{ title }}</h3>
+            </div>
+            <p v-if="description" class="story-props-table__desc">{{ description }}</p>
+        </div>
+
+        <div class="story-props-table__body">
+            <table>
+                <thead>
+                    <tr>
+                        <th>Prop</th>
+                        <th>类型</th>
+                        <th>默认值</th>
+                        <th>说明</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="item in items" :key="item.name">
+                        <td>
+                            <code>{{ item.name }}</code>
+                            <span v-if="item.required" class="story-props-table__required">必填</span>
+                        </td>
+                        <td>{{ item.type || '-' }}</td>
+                        <td><code>{{ item.default ?? '-' }}</code></td>
+                        <td>{{ item.description || '-' }}</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </section>
+</template>
+
+<script>
+export default {
+    name: "StoryPropsTable",
+    props: {
+        title: {
+            type: String,
+            default: "组件 Props",
+        },
+        description: {
+            type: String,
+            default: "",
+        },
+        items: {
+            type: Array,
+            default: function () {
+                return [];
+            },
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.story-props-table {
+    border-radius: 20px;
+    background: rgba(255, 255, 255, 0.92);
+    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
+    overflow: hidden;
+}
+
+.story-props-table__header {
+    display: flex;
+    justify-content: space-between;
+    gap: 20px;
+    padding: 24px 24px 18px;
+    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
+}
+
+.story-props-table__eyebrow {
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: #0ea5e9;
+}
+
+.story-props-table__title {
+    margin: 8px 0 0;
+    font-size: 22px;
+    color: #0f172a;
+}
+
+.story-props-table__desc {
+    max-width: 28rem;
+    margin: 0;
+    font-size: 14px;
+    line-height: 1.8;
+    color: #64748b;
+}
+
+.story-props-table__body {
+    overflow-x: auto;
+}
+
+.story-props-table table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.story-props-table th,
+.story-props-table td {
+    padding: 14px 16px;
+    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
+    text-align: left;
+    font-size: 13px;
+    line-height: 1.7;
+    color: #334155;
+    vertical-align: top;
+}
+
+.story-props-table th {
+    font-weight: 700;
+    color: #0f172a;
+    background: rgba(248, 250, 252, 0.9);
+}
+
+.story-props-table code {
+    padding: 2px 6px;
+    border-radius: 999px;
+    background: rgba(15, 23, 42, 0.06);
+    color: #0f172a;
+}
+
+.story-props-table__required {
+    display: inline-block;
+    margin-left: 8px;
+    font-size: 11px;
+    color: #b91c1c;
+    font-weight: 700;
+}
+</style>

package/src/stories/filters/FilterGallery.stories.js

@@ -0,0 +1,110 @@
+import clientBy from '../../filters/clientBy.vue';
+import StoryPropsTable from '../components/StoryPropsTable.vue';
+import markBy from '../../filters/markBy.vue';
+import menuBy from '../../filters/menuBy.vue';
+import orderBy from '../../filters/orderBy.vue';
+import tagBy from '../../filters/tagBy.vue';
+import topicBy from '../../filters/topicBy.vue';
+import versionBy from '../../filters/versionBy.vue';
+import zlpBy from '../../filters/zlpBy.vue';
+
+const meta = {
+    title: 'Filters/Index',
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+
+export default meta;
+
+export const Default = {
+    render: () => ({
+        components: {
+            clientBy,
+            StoryPropsTable,
+            markBy,
+            menuBy,
+            orderBy,
+            tagBy,
+            topicBy,
+            versionBy,
+            zlpBy,
+        },
+        data() {
+            return {
+                selectedTopic: '',
+                menuOptions: {
+                    pve: '副本',
+                    pvp: '竞技',
+                    tool: '工具',
+                },
+                tagOptions: {
+                    beginner: '入门',
+                    build: '配装',
+                    macro: '宏循环',
+                },
+                topics: ['版本速报', '配装思路', '副本机制'],
+                filterProps: [
+                    {
+                        title: 'clientBy / versionBy',
+                        description: '客户端与版本筛选类组件。',
+                        items: [
+                            { name: 'type / value', type: 'String', default: '""', description: '当前激活项。' },
+                            { name: 'clients', type: 'Object', default: 'null', description: 'clientBy 自定义客户端列表。' },
+                            { name: 'showWujie', type: 'Boolean', default: 'false', description: 'clientBy 是否展示无界。' },
+                        ],
+                    },
+                    {
+                        title: 'markBy / menuBy / orderBy / tagBy / zlpBy',
+                        description: '下拉或条件筛选组件。',
+                        items: [
+                            { name: 'data / marks', type: 'Object', default: '{}', description: '候选项映射。' },
+                            { name: 'placeholder', type: 'String', default: '""', description: '未选中时展示文案。' },
+                            { name: 'type', type: 'String', default: '组件内默认值', description: 'emit 时返回的筛选键。' },
+                            { name: 'client', type: 'String', default: '""', description: 'zlpBy 根据客户端决定资料片列表。' },
+                        ],
+                    },
+                    {
+                        title: 'topicBy',
+                        description: '主题选择组件，推荐配合 v-model 使用。',
+                        items: [
+                            { name: 'topics', type: 'Array', default: '[]', required: true, description: '主题列表。' },
+                            { name: 'modelValue', type: 'String', default: '""', description: '当前选中主题。' },
+                            { name: 'label', 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);">
+                    <div style="font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #0ea5e9;">list</div>
+                    <h2 style="margin: 10px 0 0; font-size: 28px; color: #0f172a;">筛选模块总览</h2>
+                    <p style="margin-top: 12px; color: #475569; line-height: 1.8;">README 中的筛选模块在这里统一展示，方便查看组件外观和交互手感。</p>
+                </section>
+
+                <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="display: flex; flex-wrap: wrap; gap: 16px; align-items: center;">
+                        <markBy />
+                        <menuBy :data="menuOptions" placeholder="栏目" />
+                        <orderBy />
+                        <tagBy :data="tagOptions" />
+                        <topicBy v-model="selectedTopic" :topics="topics" />
+                        <zlpBy client="std" />
+                        <versionBy />
+                        <clientBy :show-wujie="true" />
+                    </div>
+                </section>
+
+                <StoryPropsTable
+                    v-for="item in filterProps"
+                    :key="item.title"
+                    :title="item.title"
+                    :description="item.description"
+                    :items="item.items"
+                />
+            </div>
+        `,
+    }),
+};

package/src/stories/filters/clientBy.stories.js

@@ -0,0 +1,24 @@
+import clientBy from '../../filters/clientBy.vue';
+import StoryPropsTable from '../components/StoryPropsTable.vue';
+
+const meta = {
+    title: 'Filters/clientBy',
+    component: clientBy,
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+export const Default = {
+    render: () => ({
+        components: { clientBy, StoryPropsTable },
+        setup() {
+            return { propsInfo: [
+                { name: 'type', type: 'String', default: '""', description: '当前选中的客户端值。' },
+                { name: 'clients', type: 'Object', default: 'null', description: '自定义客户端映射。' },
+                { name: 'showWujie', 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);"><clientBy :show-wujie="true" /></section><StoryPropsTable title="clientBy" description="客户端筛选组件。" :items="propsInfo" /></div>`,
+    }),
+};

package/src/stories/filters/markBy.stories.js

@@ -0,0 +1,6 @@
+import markBy from '../../filters/markBy.vue';
+import StoryPropsTable from '../components/StoryPropsTable.vue';
+
+const meta = { title: 'Filters/markBy', component: markBy, parameters: { layout: 'fullscreen' } };
+export default meta;
+export const Default = { render: () => ({ components: { markBy, StoryPropsTable }, setup() { return { propsInfo: [ { name: 'placeholder', type: 'String', default: '""', description: '默认展示文案。' }, { name: 'type', type: 'String', default: '"mark"', description: 'emit 时返回的筛选键。' }, { name: 'marks', type: 'Object', default: 'default_marks', 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);"><markBy /></section><StoryPropsTable title="markBy" description="精选标记筛选组件。" :items="propsInfo" /></div>` }) };

package/src/stories/filters/menuBy.stories.js

@@ -0,0 +1,6 @@
+import menuBy from '../../filters/menuBy.vue';
+import StoryPropsTable from '../components/StoryPropsTable.vue';
+
+const meta = { title: 'Filters/menuBy', component: menuBy, parameters: { layout: 'fullscreen' } };
+export default meta;
+export const Default = { render: () => ({ components: { menuBy, StoryPropsTable }, data() { return { dataMap: { pve: '副本', pvp: '竞技', tool: '工具' }, propsInfo: [ { name: 'data', type: 'Object', default: '{}', required: true, description: '候选项映射。' }, { name: 'type', type: 'String', default: '"menu"', description: 'emit 类型。' }, { name: 'placeholder', 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);"><menuBy :data="dataMap" placeholder="栏目" /></section><StoryPropsTable title="menuBy" description="通用下拉筛选组件。" :items="propsInfo" /></div>` }) };

package/src/stories/filters/orderBy.stories.js

@@ -0,0 +1,6 @@
+import orderBy from '../../filters/orderBy.vue';
+import StoryPropsTable from '../components/StoryPropsTable.vue';
+
+const meta = { title: 'Filters/orderBy', component: orderBy, parameters: { layout: 'fullscreen' } };
+export default meta;
+export const Default = { render: () => ({ components: { orderBy, StoryPropsTable }, setup() { return { propsInfo: [] }; }, 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);"><orderBy /></section><StoryPropsTable title="orderBy" description="当前组件无 props，通过内部状态管理排序选项。" :items="propsInfo" /></div>` }) };

package/src/stories/filters/tagBy.stories.js

@@ -0,0 +1,6 @@
+import tagBy from '../../filters/tagBy.vue';
+import StoryPropsTable from '../components/StoryPropsTable.vue';
+
+const meta = { title: 'Filters/tagBy', component: tagBy, parameters: { layout: 'fullscreen' } };
+export default meta;
+export const Default = { render: () => ({ components: { tagBy, StoryPropsTable }, data() { return { dataMap: { beginner: '入门', build: '配装', macro: '宏循环' }, propsInfo: [ { name: 'data', type: 'Object', default: '{}', required: true, description: '标签映射。' }, { name: 'type', type: 'String', default: '"tag"', description: 'emit 类型。' } ] }; }, 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);"><tagBy :data="dataMap" /></section><StoryPropsTable title="tagBy" description="标签筛选组件。" :items="propsInfo" /></div>` }) };

package/src/stories/filters/topicBy.stories.js

@@ -0,0 +1,6 @@
+import TopicBy from '../../filters/topicBy.vue';
+import StoryPropsTable from '../components/StoryPropsTable.vue';
+
+const meta = { title: 'Filters/topicBy', component: TopicBy, parameters: { layout: 'fullscreen' } };
+export default meta;
+export const Default = { render: () => ({ components: { TopicBy, StoryPropsTable }, data() { return { selected: '', propsInfo: [ { name: 'topics', type: 'Array', default: '[]', required: true, description: '主题列表。' }, { name: 'modelValue', type: 'String', default: '""', description: '当前选中值。' }, { name: 'label', 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);"><TopicBy v-model="selected" :topics="['版本速报','配装思路','副本机制']" /></section><StoryPropsTable title="topicBy" description="主题筛选组件，推荐用 v-model。" :items="propsInfo" /></div>` }) };

package/src/stories/filters/versionBy.stories.js

@@ -0,0 +1,6 @@
+import versionBy from '../../filters/versionBy.vue';
+import StoryPropsTable from '../components/StoryPropsTable.vue';
+
+const meta = { title: 'Filters/versionBy', component: versionBy, parameters: { layout: 'fullscreen' } };
+export default meta;
+export const Default = { render: () => ({ components: { versionBy, StoryPropsTable }, setup() { return { propsInfo: [ { name: 'value', type: 'String | Number', 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);"><versionBy /></section><StoryPropsTable title="versionBy" description="双端/旗舰/无界筛选。" :items="propsInfo" /></div>` }) };

package/src/stories/filters/zlpBy.stories.js

@@ -0,0 +1,6 @@
+import zlpBy from '../../filters/zlpBy.vue';
+import StoryPropsTable from '../components/StoryPropsTable.vue';
+
+const meta = { title: 'Filters/zlpBy', component: zlpBy, parameters: { layout: 'fullscreen' } };
+export default meta;
+export const Default = { render: () => ({ components: { zlpBy, StoryPropsTable }, setup() { return { propsInfo: [ { name: 'client', 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);"><zlpBy client="std" /></section><StoryPropsTable title="zlpBy" description="资料片筛选组件。" :items="propsInfo" /></div>` }) };

package/src/stories/interact/QRcode.stories.js

@@ -0,0 +1,59 @@
+import QRcode from '../../interact/QRcode.vue';
+import StoryPropsTable from '../components/StoryPropsTable.vue';
+
+const meta = {
+    title: 'Interact/QRcode',
+    component: QRcode,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    argTypes: {
+        href: { control: 'text' },
+        v: { control: 'radio', options: ['cms', 'static'] },
+        s: { control: { type: 'number', min: 80, max: 240, step: 10 } },
+    },
+};
+
+export default meta;
+
+export const Default = {
+    args: {
+        href: 'https://www.jx3box.com',
+        v: 'cms',
+        s: 120,
+    },
+    render: (args) => ({
+        components: { QRcode, StoryPropsTable },
+        setup() {
+            return {
+                args,
+                propsInfo: [
+                    { name: 'href', type: 'String', default: 'location.href', description: '二维码指向地址。' },
+                    { name: 'v', type: 'String', default: '"cms"', description: '展示模式，支持弹出态和静态态。' },
+                    { name: 's', type: 'Number', default: '100', description: '二维码尺寸。' },
+                ],
+            };
+        },
+        template: `
+            <div style="display:grid;gap:24px;padding:32px;background:linear-gradient(180deg,#f8fafc 0%,#eef2f7 100%);min-height:100vh;">
+                <section style="display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px;border-radius:20px;background:rgba(255,255,255,0.92);box-shadow:0 24px 60px rgba(15,23,42,0.08);">
+                    <div>
+                        <h2 style="margin:0;font-size:28px;color:#0f172a;">QRcode</h2>
+                        <p style="margin:12px 0 0;color:#475569;line-height:1.8;">用于文章和百科详情页中的扫码访问入口。</p>
+                    </div>
+                    <QRcode v-bind="args" />
+                </section>
+                <StoryPropsTable title="QRcode" description="二维码组件参数说明。" :items="propsInfo" />
+            </div>
+        `,
+    }),
+};
+
+export const StaticCard = {
+    args: {
+        href: 'https://www.jx3box.com/wiki/achievement/1001',
+        v: 'static',
+        s: 140,
+    },
+    render: Default.render,
+};

package/src/stories/layout/BaseShell.stories.js

@@ -0,0 +1,38 @@
+const meta = {
+    title: 'Layout/BaseShell',
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+
+export default meta;
+
+export const Default = {
+    render: () => ({
+        template: `
+            <section style="display: grid; gap: 20px;">
+                <div style="border-radius: 18px; background: rgba(255,255,255,0.92); box-shadow: 0 24px 60px rgba(15,23,42,0.08); padding: 32px; min-height: 300px;">
+                    <div style="font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #0ea5e9;">README / 全局模块</div>
+                    <h1 style="margin: 12px 0 0; font-size: 36px; line-height: 1.15; font-weight: 700; color: #0f172a;">Storybook 基座</h1>
+                    <p style="margin-top: 16px; max-width: 44rem; color: #334155; line-height: 1.9;">
+                        这个 story 复刻了 src/App.vue 的基础结构，包含公共头、面包屑、主内容区、左右侧栏和公共底。后续全局模块或内容组件都可以直接通过 parameters.shell 挂到对应区域里预览。
+                    </p>
+                </div>
+                <div style="display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));">
+                    <div style="border-radius: 16px; background: rgba(255,255,255,0.88); padding: 20px;">
+                        <div style="font-weight: 700; color: #0f172a;">Header + Breadcrumb</div>
+                        <p style="margin-top: 8px; color: #475569; line-height: 1.7;">模拟全局导航和频道入口。</p>
+                    </div>
+                    <div style="border-radius: 16px; background: rgba(255,255,255,0.88); padding: 20px;">
+                        <div style="font-weight: 700; color: #0f172a;">Main + Sidebars</div>
+                        <p style="margin-top: 8px; color: #475569; line-height: 1.7;">模拟详情页和筛选页的主要布局骨架。</p>
+                    </div>
+                    <div style="border-radius: 16px; background: rgba(255,255,255,0.88); padding: 20px;">
+                        <div style="font-weight: 700; color: #0f172a;">Footer</div>
+                        <p style="margin-top: 8px; color: #475569; line-height: 1.7;">保留全局落点，方便观察页面收尾效果。</p>
+                    </div>
+                </div>
+            </section>
+        `,
+    }),
+};

package/src/stories/layout/Breadcrumb.stories.js

@@ -0,0 +1,40 @@
+import Breadcrumb from '../../Breadcrumb.vue';
+
+const meta = {
+    title: 'Layout/Breadcrumb',
+    component: Breadcrumb,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    argTypes: {
+        publishEnable: { control: 'boolean' },
+        feedbackEnable: { control: 'boolean' },
+        adminEnable: { control: 'boolean' },
+        crumbEnable: { control: 'boolean' },
+        withoutLeft: { control: 'boolean' },
+    },
+};
+
+export default meta;
+
+export const Default = {
+    args: {
+        name: '频道名称',
+        slug: 'story',
+        root: '/story',
+        publishEnable: true,
+        feedbackEnable: true,
+        adminEnable: false,
+        crumbEnable: false,
+        withoutLeft: false,
+    },
+    render: (args) => ({
+        components: { Breadcrumb },
+        setup() {
+            return { args };
+        },
+        template: `
+            <Breadcrumb v-bind="args" />
+        `,
+    }),
+};

package/src/stories/layout/CommonFooter.stories.js

@@ -14,7 +14,7 @@ export const Default = {
     render: () => ({
         components: { CommonFooter },
         template: `
-            <div style="min-height: 100vh; display: flex; align-items: flex-end; background: #111827;">
+            <div style="min-height: 100vh; display: flex; align-items: flex-end;">
                 <CommonFooter style="width: 100%;" />
             </div>
         `,

package/src/stories/layout/CommonHeader.stories.js

@@ -23,7 +23,7 @@ export const Default = {
             return { args };
         },
         template: `
-            <div style="min-height: 200vh; background: linear-gradient(180deg, #0b1220 0%, #1f2937 100%);">
+            <div style="min-height: 100vh;">
                 <CommonHeader v-bind="args" />
                 <div style="height: 1600px;"></div>
             </div>

package/src/stories/layout/LeftSideToggle.stories.js

@@ -0,0 +1,78 @@
+import LeftSideToggle from '../../LeftSideToggle.vue';
+import StoryPropsTable from '../components/StoryPropsTable.vue';
+import Bus from '../../../utils/bus';
+
+const meta = {
+    title: 'Layout/LeftSideToggle',
+    component: LeftSideToggle,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    argTypes: {
+        mobileOnly: { control: 'boolean' },
+    },
+};
+
+export default meta;
+
+export const Default = {
+    args: {
+        mobileOnly: false,
+    },
+    render: (args) => ({
+        components: { LeftSideToggle, StoryPropsTable },
+        setup() {
+            return { args };
+        },
+        data() {
+            return {
+                leftOpen: true,
+                propsInfo: [
+                    { name: 'mobileOnly', type: 'Boolean', default: 'false', description: '是否只在移动端显示折叠按钮。' },
+                ],
+            };
+        },
+        mounted() {
+            this.__storyToggleHandler = (status) => {
+                this.leftOpen = status;
+            };
+            Bus.on('toggleLeftSide', this.__storyToggleHandler);
+            Bus.emit('toggleLeftSide', true);
+        },
+        beforeUnmount() {
+            if (this.__storyToggleHandler) {
+                Bus.off('toggleLeftSide', this.__storyToggleHandler);
+                this.__storyToggleHandler = null;
+            }
+        },
+        methods: {
+            reopen() {
+                Bus.emit('toggleLeftSide', 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);">
+                    <div style="display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;">
+                        <div>
+                            <div style="font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#0ea5e9;">layout</div>
+                            <h2 style="margin:10px 0 0;font-size:28px;color:#0f172a;">LeftSideToggle</h2>
+                            <p style="margin-top:12px;color:#475569;line-height:1.8;">点击图标会通过事件总线切换左栏开关，适合与 LeftSidebar、Main 配合使用。</p>
+                        </div>
+                        <div style="display:flex;align-items:center;gap:16px;">
+                            <div style="padding:8px 14px;border-radius:999px;background:#e2e8f0;color:#0f172a;font-weight:700;">
+                                当前状态：{{ leftOpen ? '展开' : '收起' }}
+                            </div>
+                            <button type="button" class="el-button el-button--primary is-plain" @click="reopen">重置为展开</button>
+                        </div>
+                    </div>
+                    <div style="margin-top:24px;display:flex;align-items:center;gap:16px;padding:20px;border-radius:16px;background:linear-gradient(135deg,#f8fafc 0%,#e0f2fe 100%);">
+                        <LeftSideToggle v-bind="args" />
+                        <div style="color:#334155;line-height:1.7;">左栏折叠按钮预览区域</div>
+                    </div>
+                </section>
+                <StoryPropsTable title="LeftSideToggle" description="左侧边栏开关按钮，通过事件总线广播状态。" :items="propsInfo" />
+            </div>
+        `,
+    }),
+};

package/src/stories/layout/LeftSidebar.stories.js

@@ -0,0 +1,40 @@
+import LeftSidebar from '../../LeftSidebar.vue';
+
+const meta = {
+    title: 'Layout/LeftSidebar',
+    component: LeftSidebar,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    argTypes: {
+        open: { control: 'boolean' },
+        withoutBread: { control: 'boolean' },
+        uid: { control: 'number' },
+    },
+};
+
+export default meta;
+
+export const Default = {
+    args: {
+        open: true,
+        withoutBread: false,
+        uid: null,
+    },
+    render: (args) => ({
+        components: { LeftSidebar },
+        setup() {
+            return { args };
+        },
+        template: `
+            <LeftSidebar v-bind="args">
+                <div style="border-radius: 18px; background: rgba(255,255,255,0.88); padding: 20px; box-shadow: 0 24px 60px rgba(15,23,42,0.08);">
+                    <div style="font-weight: 700; color: #0f172a;">LeftSidebar</div>
+                    <p style="margin-top: 8px; color: #475569; line-height: 1.7;">
+                        左栏通常用于承载作者、分类导航、作品集或筛选补充信息。
+                    </p>
+                </div>
+            </LeftSidebar>
+        `,
+    }),
+};

package/src/stories/layout/Main.stories.js

@@ -0,0 +1,41 @@
+import Main from '../../Main.vue';
+
+const meta = {
+    title: 'Layout/Main',
+    component: Main,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    argTypes: {
+        withoutLeft: { control: 'boolean' },
+        withoutRight: { control: 'boolean' },
+        withoutBread: { control: 'boolean' },
+    },
+};
+
+export default meta;
+
+export const Default = {
+    args: {
+        withoutLeft: false,
+        withoutRight: false,
+        withoutBread: false,
+    },
+    render: (args) => ({
+        components: { Main },
+        setup() {
+            return { args };
+        },
+        template: `
+            <Main v-bind="args">
+                <div style="border-radius: 18px; background: rgba(255,255,255,0.92); box-shadow: 0 24px 60px rgba(15,23,42,0.08); padding: 32px; min-height: 360px;">
+                    <div style="font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #0ea5e9;">Main</div>
+                    <h2 style="margin: 12px 0 0; font-size: 32px; line-height: 1.2; font-weight: 700; color: #0f172a;">主内容布局容器</h2>
+                    <p style="margin-top: 16px; max-width: 42rem; color: #334155; line-height: 1.9;">
+                        这里模拟单页正文区域，你可以把详情组件、筛选模块或任何内容组件直接挂进来查看与左右栏组合后的效果。
+                    </p>
+                </div>
+            </Main>
+        `,
+    }),
+};