@jx3box/jx3box-ui 2.0.5 → 2.0.7

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

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>