@jx3box/jx3box-ui 2.0.4 → 2.0.6

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

@@ -0,0 +1,39 @@
+import CommonHeader from '../../CommonHeader.vue';
+
+const meta = {
+    title: 'Layout/CommonHeader',
+    component: CommonHeader,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    argTypes: {
+        overlayEnable: { control: 'boolean' },
+    },
+};
+
+export default meta;
+
+export const Default = {
+    args: {
+        overlayEnable: false,
+    },
+    render: (args) => ({
+        components: { CommonHeader },
+        setup() {
+            return { args };
+        },
+        template: `
+            <div style="min-height: 100vh;">
+                <CommonHeader v-bind="args" />
+                <div style="height: 1600px;"></div>
+            </div>
+        `,
+    }),
+};
+
+export const Overlay = {
+    args: {
+        overlayEnable: true,
+    },
+    render: Default.render,
+};

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>
+        `,
+    }),
+};

package/src/stories/layout/RightSidebar.stories.js

@@ -0,0 +1,36 @@
+import RightSidebar from '../../RightSidebar.vue';
+
+const meta = {
+    title: 'Layout/RightSidebar',
+    component: RightSidebar,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    argTypes: {
+        showToggle: { control: 'boolean' },
+    },
+};
+
+export default meta;
+
+export const Default = {
+    args: {
+        showToggle: true,
+    },
+    render: (args) => ({
+        components: { RightSidebar },
+        setup() {
+            return { args };
+        },
+        template: `
+            <RightSidebar 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;">RightSidebar</div>
+                    <p style="margin-top: 8px; color: #475569; line-height: 1.7;">
+                        右栏一般承载目录、推荐内容、主题信息或辅助说明模块。
+                    </p>
+                </div>
+            </RightSidebar>
+        `,
+    }),
+};

package/src/stories/layout/StorybookShell.vue

@@ -0,0 +1,271 @@
+<template>
+    <div class="sb-shell">
+        <div class="sb-shell-page" :class="{ 'has-suspend': showSuspend }">
+            <template v-if="placement === 'header'">
+                <slot></slot>
+            </template>
+            <CommonHeader v-else-if="showHeader" v-bind="resolvedHeaderProps"></CommonHeader>
+
+            <template v-if="placement === 'breadcrumb'">
+                <slot></slot>
+            </template>
+            <Breadcrumb v-else-if="showBreadcrumb" v-bind="resolvedBreadcrumbProps">
+                <template #logo>
+                    <img svg-inline src="../../../assets/img/editor/jx3.svg" />
+                </template>
+                <template #op-prepend>
+                    <slot v-if="placement === 'leftToggle'"></slot>
+                    <LeftSideToggle v-else-if="showLeftToggle" :mobileOnly="true" />
+                </template>
+            </Breadcrumb>
+
+            <LeftSidebar v-if="showLeftSidebar" v-bind="resolvedLeftSidebarProps">
+                <slot v-if="placement === 'left'"></slot>
+                <div v-else class="sb-shell-card">
+                    <div class="sb-shell-card__title">LeftSidebar</div>
+                    <div class="sb-shell-card__desc">这里用于承载作者信息、导航或栏目侧边内容。</div>
+                </div>
+            </LeftSidebar>
+
+            <Main v-if="showMain" v-bind="resolvedMainProps">
+                <div class="sb-shell-main">
+                    <slot v-if="placement === 'main'"></slot>
+                    <div v-else class="sb-shell-article">
+                        <div class="sb-shell-article__eyebrow">Storybook Base</div>
+                        <h2 class="sb-shell-article__title">全局模块基座</h2>
+                        <p class="sb-shell-article__text">
+                            这个区域模拟 `App.vue` 中的主内容区，后续内容型组件可以默认挂在这里预览。
+                        </p>
+                    </div>
+                </div>
+
+                <RightSidebar v-if="showRightSidebar" v-bind="resolvedRightSidebarProps">
+                    <slot v-if="placement === 'right' && $slots.right" name="right"></slot>
+                    <slot v-else-if="placement === 'right'"></slot>
+                    <div v-else class="sb-shell-card">
+                        <div class="sb-shell-card__title">RightSidebar</div>
+                        <div class="sb-shell-card__desc">这里用于目录、推荐信息或详情页补充模块。</div>
+                    </div>
+                </RightSidebar>
+            </Main>
+
+            <div v-if="showSuspend && placement === 'suspend'">
+                <slot></slot>
+            </div>
+
+            <template v-if="placement === 'footer'">
+                <slot></slot>
+            </template>
+            <CommonFooter v-else-if="showFooter"></CommonFooter>
+        </div>
+    </div>
+</template>
+
+<script>
+import CommonHeader from "../../CommonHeader.vue";
+import Breadcrumb from "../../Breadcrumb.vue";
+import Main from "../../Main.vue";
+import LeftSidebar from "../../LeftSidebar.vue";
+import LeftSideToggle from "../../LeftSideToggle.vue";
+import RightSidebar from "../../RightSidebar.vue";
+import CommonFooter from "../../CommonFooter.vue";
+
+export default {
+    name: "StorybookShell",
+    components: {
+        CommonHeader,
+        Breadcrumb,
+        Main,
+        LeftSidebar,
+        LeftSideToggle,
+        RightSidebar,
+        CommonFooter,
+    },
+    props: {
+        placement: {
+            type: String,
+            default: "main",
+        },
+        showHeader: {
+            type: Boolean,
+            default: true,
+        },
+        showBreadcrumb: {
+            type: Boolean,
+            default: true,
+        },
+        showMain: {
+            type: Boolean,
+            default: true,
+        },
+        showLeftSidebar: {
+            type: Boolean,
+            default: true,
+        },
+        showLeftToggle: {
+            type: Boolean,
+            default: true,
+        },
+        showRightSidebar: {
+            type: Boolean,
+            default: true,
+        },
+        showFooter: {
+            type: Boolean,
+            default: true,
+        },
+        showSuspend: {
+            type: Boolean,
+            default: false,
+        },
+        headerProps: {
+            type: Object,
+            default: function () {
+                return {};
+            },
+        },
+        breadcrumbProps: {
+            type: Object,
+            default: function () {
+                return {};
+            },
+        },
+        mainProps: {
+            type: Object,
+            default: function () {
+                return {};
+            },
+        },
+        leftSidebarProps: {
+            type: Object,
+            default: function () {
+                return {};
+            },
+        },
+        rightSidebarProps: {
+            type: Object,
+            default: function () {
+                return {};
+            },
+        },
+    },
+    computed: {
+        resolvedHeaderProps: function () {
+            return {
+                overlayEnable: false,
+                ...this.headerProps,
+            };
+        },
+        resolvedBreadcrumbProps: function () {
+            return {
+                name: "频道名称",
+                slug: "story",
+                root: "/story",
+                publishEnable: true,
+                feedbackEnable: true,
+                adminEnable: false,
+                crumbEnable: false,
+                withoutLeft: !this.showLeftSidebar,
+                ...this.breadcrumbProps,
+            };
+        },
+        resolvedMainProps: function () {
+            return {
+                withoutLeft: !this.showLeftSidebar,
+                withoutRight: !this.showRightSidebar,
+                ...this.mainProps,
+            };
+        },
+        resolvedLeftSidebarProps: function () {
+            return {
+                open: true,
+                ...this.leftSidebarProps,
+            };
+        },
+        resolvedRightSidebarProps: function () {
+            return {
+                showToggle: true,
+                ...this.rightSidebarProps,
+            };
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.sb-shell {
+    min-height: 100vh;
+    background:
+        radial-gradient(circle at top right, rgba(0, 157, 255, 0.1), transparent 24rem),
+        linear-gradient(180deg, #f5f7fb 0%, #eef2f7 100%);
+}
+
+.sb-shell-page {
+    min-height: 100vh;
+    padding-top: 60px;
+}
+
+.sb-shell-page.has-suspend {
+    padding-bottom: 96px;
+}
+
+.sb-shell-main {
+    padding: 24px;
+}
+
+.sb-shell-card,
+.sb-shell-article {
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    border-radius: 18px;
+    background: rgba(255, 255, 255, 0.92);
+    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
+}
+
+.sb-shell-card {
+    padding: 20px;
+    margin-bottom: 16px;
+}
+
+.sb-shell-card__title {
+    font-size: 15px;
+    font-weight: 700;
+    color: #0f172a;
+}
+
+.sb-shell-card__desc {
+    margin-top: 8px;
+    line-height: 1.7;
+    color: #475569;
+    font-size: 13px;
+}
+
+.sb-shell-article {
+    min-height: 360px;
+    padding: 32px;
+}
+
+.sb-shell-article__eyebrow {
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: #0ea5e9;
+}
+
+.sb-shell-article__title {
+    margin: 12px 0 0;
+    font-size: 32px;
+    line-height: 1.2;
+    font-weight: 700;
+    color: #0f172a;
+}
+
+.sb-shell-article__text {
+    max-width: 42rem;
+    margin-top: 16px;
+    font-size: 15px;
+    line-height: 1.9;
+    color: #334155;
+}
+
+</style>

package/src/stories/layout/SuspendCommon.stories.js

@@ -0,0 +1,67 @@
+import SuspendCommon from '../../SuspendCommon.vue';
+import SuspendCommonStage from './SuspendCommonStage.vue';
+
+const meta = {
+    title: 'Layout/SuspendCommon',
+    component: SuspendCommon,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    argTypes: {
+        btnOptions: { control: 'object' },
+        drawerOptions: { control: 'object' },
+        fixPageOptions: { control: 'object' },
+    },
+};
+
+export default meta;
+
+export const Default = {
+    args: {
+        btnOptions: {
+            showHome: true,
+            showIcon: false,
+            showPin: false,
+            showMore: true,
+        },
+        drawerOptions: {
+            author: {
+                name: '作者名字',
+                avatar: 'https://cdn.jx3box.com/upload/avatar/2022/3/2/8_9860765.png',
+                author_id: 8,
+            },
+            subscribeType: '',
+            postType: '',
+            id: '',
+            title: 'Storybook 悬浮窗',
+            hideType: ['collect', 'rss', 'laterOn', 'report'],
+        },
+        fixPageOptions: {
+            key: 'storybook-fixed',
+            title: 'Storybook 悬浮窗',
+            url: 'https://storybook.local/suspend',
+        },
+    },
+    render: (args) => ({
+        components: { SuspendCommon, SuspendCommonStage },
+        setup() {
+            return { args };
+        },
+        methods: {
+            handleSearch(keyword) {
+                console.log('storybook suspend search', keyword);
+            },
+        },
+        template: `
+            <SuspendCommonStage>
+                <SuspendCommon v-bind="args" @search="handleSearch">
+                    <div style="display: flex; gap: 12px; align-items: center;">
+                        <span style="font-weight: 700;">切换</span>
+                        <span>收藏</span>
+                        <span>分享</span>
+                    </div>
+                </SuspendCommon>
+            </SuspendCommonStage>
+        `,
+    }),
+};