@jx3box/jx3box-editor 3.2.5 → 3.2.7

package/stories/components/Author.stories.js

@@ -0,0 +1,36 @@
+import Author from "../../src/components/Author.vue";
+import { previewStory } from "../../src/storybook/storybook.helpers";
+
+export default {
+    title: "Components/Author",
+    component: Author,
+    tags: ["autodocs"],
+    args: {
+        uid: 10086,
+    },
+    argTypes: {
+        uid: {
+            description: "作者 UID。",
+            control: "text",
+            table: { type: { summary: "String | Number" }, category: "required" },
+        },
+    },
+    parameters: {
+        layout: "padded",
+        docs: {
+            description: {
+                component: "作者信息卡片。组件会在侦听 `uid` 后请求远程作者数据，因此在 Storybook 中主要用于查看 props 文档。",
+            },
+        },
+    },
+};
+
+export const Overview = previewStory(Author, {
+    title: "作者卡片预览",
+    description: "这里直接使用项目 demo 中出现过的作者 UID：`8`。如果接口可用，就能看到完整作者卡片，而不是只有 props 表。",
+    code: `<Author :uid="8" />`,
+    style: "min-width: 420px; display: flex; justify-content: flex-start;",
+});
+Overview.args = {
+    uid: 8,
+};

package/stories/components/Avatar.stories.js

@@ -0,0 +1,55 @@
+import Avatar from "../../src/components/Avatar.vue";
+import { componentStory } from "../../src/storybook/storybook.helpers";
+
+export default {
+    title: "Components/Avatar",
+    component: Avatar,
+    tags: ["autodocs"],
+    args: {
+        uid: 10086,
+        url: "https://cdn.jx3box.com/image/avatar/1024.jpg",
+        frame: "",
+        size: "s",
+    },
+    argTypes: {
+        uid: {
+            description: "用户 UID。",
+            control: "text",
+            table: { type: { summary: "String | Number" }, category: "required" },
+        },
+        url: {
+            description: "头像地址，为空时走默认头像逻辑。",
+            control: "text",
+            table: { type: { summary: "String" }, defaultValue: { summary: "''" } },
+        },
+        frame: {
+            description: "头像框标识。",
+            control: "text",
+            table: { type: { summary: "String" }, defaultValue: { summary: "''" } },
+        },
+        size: {
+            description: "头像尺寸，可传内置尺寸名或数值。",
+            control: "text",
+            table: { type: { summary: "String | Number" }, defaultValue: { summary: "'s'" } },
+        },
+    },
+    parameters: {
+        layout: "padded",
+        docs: {
+            description: {
+                component: "展示用户头像与可选头像框。适合直接查看 `uid`、`url`、`frame`、`size` 的传值方式。",
+            },
+        },
+    },
+};
+
+export const Default = componentStory(Avatar, {
+    style: "padding: 24px; background: #f8fafc; display: inline-flex; border-radius: 12px;",
+});
+
+export const Large = componentStory(Avatar, {
+    style: "padding: 24px; background: #f8fafc; display: inline-flex; border-radius: 12px;",
+});
+Large.args = {
+    size: 136,
+};

package/stories/components/Combo.stories.js

@@ -0,0 +1,37 @@
+import Combo from "../../src/components/Combo.vue";
+import { previewStory } from "../../src/storybook/storybook.helpers";
+
+export default {
+    title: "Components/Combo",
+    component: Combo,
+    tags: ["autodocs"],
+    args: {
+        modelValue: false,
+        subtype: "通用",
+        query: "",
+        client: "std",
+        strict: false,
+    },
+    argTypes: {
+        modelValue: { description: "控制连招面板的显隐。", control: "boolean", table: { type: { summary: "Boolean" }, defaultValue: { summary: "false" } } },
+        subtype: { description: "心法或分类。", control: "text", table: { type: { summary: "String" }, defaultValue: { summary: "'通用'" } } },
+        query: { description: "默认搜索关键字。", control: "text", table: { type: { summary: "String" }, defaultValue: { summary: "''" } } },
+        client: { description: "客户端类型。", control: "text", table: { type: { summary: "String" }, defaultValue: { summary: "'std'" } } },
+        strict: { description: "是否开启精确搜索。", control: "boolean", table: { type: { summary: "Boolean" }, defaultValue: { summary: "false" } } },
+    },
+    parameters: {
+        layout: "padded",
+        docs: {
+            description: {
+                component: "技能连招编辑组件。依赖技能数据接口、右键菜单和拖拽交互，适合先通过 Storybook 查看 props 定义。",
+            },
+        },
+    },
+};
+
+export const Overview = previewStory(Combo, {
+    title: "连招编辑区域预览",
+    description: "这里直接渲染组件主体。虽然完整交互依赖远程技能数据，但至少可以看到 tabs、已选区域和整体布局，不再只是说明文字。",
+    code: `<Combo :modelValue="false" subtype="通用" client="std" />`,
+    style: "min-width: 1180px;",
+});

package/stories/components/Letter.stories.js

@@ -0,0 +1,30 @@
+import Letter from "../../src/components/Letter.vue";
+import { componentStory } from "../../src/storybook/storybook.helpers";
+
+export default {
+    title: "Components/Letter",
+    component: Letter,
+    tags: ["autodocs"],
+    args: {
+        data: {
+            slug: "demo",
+            remark: "示例信纸标题",
+            style: ".letter--demo{padding:24px;border:1px solid #d4b483;border-radius:12px;background:linear-gradient(180deg,#fff9ef,#fff3dc)}.letter-title--demo{font-size:20px;font-weight:700;color:#7c4a03}",
+        },
+    },
+    argTypes: {
+        data: { description: "信纸数据对象，需要至少包含 `slug`、`remark`、`style`。", control: "object", table: { type: { summary: "Object" }, defaultValue: { summary: "undefined" } } },
+    },
+    parameters: {
+        layout: "padded",
+        docs: {
+            description: {
+                component: "信纸渲染组件。使用时必须传入完整的 `data` 对象，否则组件会在立即执行的 watcher 中报错。",
+            },
+        },
+    },
+};
+
+export const Default = componentStory(Letter, {
+    style: "min-width: 360px; background: #faf7f2; padding: 24px; border-radius: 12px;",
+});

package/stories/components/PostAuthor.stories.js

@@ -0,0 +1,32 @@
+import PostAuthor from "../../src/components/PostAuthor.vue";
+import { previewStory } from "../../src/storybook/storybook.helpers";
+
+export default {
+    title: "Components/PostAuthor",
+    component: PostAuthor,
+    tags: ["autodocs"],
+    args: {
+        id: 1,
+    },
+    argTypes: {
+        id: { description: "作者或内容关联 ID。", control: "text", table: { type: { summary: "String | Number" }, defaultValue: { summary: "''" } } },
+    },
+    parameters: {
+        layout: "padded",
+        docs: {
+            description: {
+                component: "帖子作者信息组件。侦听 `id` 后会请求情绪或作者详情接口，当前 Storybook 主要展示 props。",
+            },
+        },
+    },
+};
+
+export const Overview = previewStory(PostAuthor, {
+    title: "帖子作者信息预览",
+    description: "该组件依赖远程接口。这里给出一个最小可运行示例，便于直接观察渲染结构。",
+    code: `<PostAuthor :id="3102" />`,
+    style: "min-width: 420px; display: flex; justify-content: flex-start;",
+});
+Overview.args = {
+    id: 3102,
+};

package/stories/components/QRcode.stories.js

@@ -0,0 +1,37 @@
+import QRcode from "../../src/components/QRcode.vue";
+import { componentStory } from "../../src/storybook/storybook.helpers";
+
+export default {
+    title: "Components/QRcode",
+    component: QRcode,
+    tags: ["autodocs"],
+    args: {
+        href: "https://editor.jx3box.com",
+        s: 120,
+        v: "static",
+    },
+    argTypes: {
+        href: { description: "二维码目标地址；为空时使用当前页面地址。", control: "text", table: { type: { summary: "String" }, defaultValue: { summary: "''" } } },
+        s: { description: "二维码尺寸。", control: "text", table: { type: { summary: "String | Number" }, defaultValue: { summary: "100" } } },
+        v: { description: "展示模式，可选 `cms` 或 `static`。", control: "text", table: { type: { summary: "String" }, defaultValue: { summary: "'cms'" } } },
+    },
+    parameters: {
+        layout: "padded",
+        docs: {
+            description: {
+                component: "二维码组件，可用于 CMS 悬浮入口或静态展示模式。",
+            },
+        },
+    },
+};
+
+export const Static = componentStory(QRcode, {
+    style: "padding: 24px; background: #f8fafc; border-radius: 12px;",
+});
+
+export const CmsTrigger = componentStory(QRcode, {
+    style: "padding: 24px; background: #f8fafc; border-radius: 12px;",
+});
+CmsTrigger.args = {
+    v: "cms",
+};

package/stories/components/SkillMartial.stories.js

@@ -0,0 +1,31 @@
+import SkillMartial from "../../src/components/SkillMartial.vue";
+import { previewStory } from "../../src/storybook/storybook.helpers";
+
+export default {
+    title: "Components/SkillMartial",
+    component: SkillMartial,
+    tags: ["autodocs"],
+    args: {
+        subtype: "通用",
+        client: "std",
+    },
+    argTypes: {
+        subtype: { description: "心法或技能分类。", control: "text", table: { type: { summary: "String" }, defaultValue: { summary: "'通用'" } } },
+        client: { description: "客户端类型。", control: "text", table: { type: { summary: "String" }, defaultValue: { summary: "'std'" } } },
+    },
+    parameters: {
+        layout: "padded",
+        docs: {
+            description: {
+                component: "武学技能组件。挂载后会根据 `subtype` 和 `client` 拉取技能与天赋数据，适合先在 Storybook 中确认 props 调用方式。",
+            },
+        },
+    },
+};
+
+export const Overview = previewStory(SkillMartial, {
+    title: "门派武学预览",
+    description: "这里直接渲染默认的 `通用 + std` 模式。接口可用时会展示技能分组列表，能更直观看到组件的实际用途。",
+    code: `<SkillMartial subtype="通用" client="std" />`,
+    style: "min-width: 960px;",
+});

package/stories/exports/Article.stories.js

@@ -0,0 +1,48 @@
+import Article from "../../src/Article.vue";
+import { previewStory, useDemoText } from "../../src/storybook/storybook.helpers";
+
+export default {
+    title: "Exports/Article",
+    component: Article,
+    tags: ["autodocs"],
+    args: {
+        post_mode: "tinymce",
+        content: "<p>示例内容</p>",
+        cdnDomain: "https://cdn.jx3box.com",
+        linkWhitelist: [],
+        linkStrict: false,
+        iframeWhitelist: [],
+        directorybox: "",
+        pageable: true,
+    },
+    argTypes: {
+        post_mode: { description: "文章来源模式。", control: "text", table: { type: { summary: "String" }, defaultValue: { summary: "'tinymce'" } } },
+        content: { description: "待渲染的 HTML 内容。", control: "text", table: { type: { summary: "String" } } },
+        cdnDomain: { description: "相对资源地址拼接使用的 CDN 域名。", control: "text", table: { type: { summary: "String" }, defaultValue: { summary: "'https://cdn.jx3box.com'" } } },
+        linkWhitelist: { description: "链接白名单。", control: "object", table: { type: { summary: "Array" }, defaultValue: { summary: "[]" } } },
+        linkStrict: { description: "开启后不在白名单的链接将被禁用。", control: "boolean", table: { type: { summary: "Boolean" }, defaultValue: { summary: "false" } } },
+        iframeWhitelist: { description: "iframe 白名单。", control: "object", table: { type: { summary: "Array" }, defaultValue: { summary: "[]" } } },
+        directorybox: { description: "目录容器选择器。", control: "text", table: { type: { summary: "String" } } },
+        pageable: { description: "是否分页展示长文。", control: "boolean", table: { type: { summary: "Boolean" }, defaultValue: { summary: "true" } } },
+    },
+    parameters: {
+        layout: "padded",
+        docs: {
+            description: {
+                component: "富文本文章渲染组件。依赖较多运行时行为、目录处理和内嵌弹层组件，Storybook 主要用于查看 props。",
+            },
+        },
+    },
+};
+
+export const Overview = previewStory(Article, {
+    title: "富文本文章预览",
+    description: "这里直接加载项目现有的 `public/demo/article_basic.html` 作为示例内容。这样能看到分页后的文章排版、图片、表格和基础富文本效果。",
+    code: `<Article :content="html" post_mode="tinymce" :pageable="true" />`,
+    style: "min-width: 960px;",
+    setup() {
+        const { content } = useDemoText("/demo/article_basic.html", "<p>加载中...</p>");
+        return { html: content };
+    },
+    template: `<StoryComponent v-bind="args" :content="html" />`,
+});

package/stories/exports/BoxResource.stories.js

@@ -0,0 +1,31 @@
+import BoxResource from "../../src/BoxResource.vue";
+import { previewStory } from "../../src/storybook/storybook.helpers";
+
+export default {
+    title: "Exports/BoxResource",
+    component: BoxResource,
+    tags: ["autodocs"],
+    args: {
+        enable: true,
+        subtype: "通用",
+    },
+    argTypes: {
+        enable: { description: "是否允许打开资源面板。", control: "boolean", table: { type: { summary: "Boolean" }, defaultValue: { summary: "true" } } },
+        subtype: { description: "心法分类，会影响连招等子资源。", control: "text", table: { type: { summary: "String" }, defaultValue: { summary: "'通用'" } } },
+    },
+    parameters: {
+        layout: "padded",
+        docs: {
+            description: {
+                component: "JX3BOX 资源插入组件。挂载后会组合作者、情绪、信纸、连招等多类资源数据。",
+            },
+        },
+    },
+};
+
+export const Overview = previewStory(BoxResource, {
+    title: "魔盒资源入口预览",
+    description: "这个预览直接展示魔盒资源按钮。点击后会进入作者、连招、趣图、信纸等资源的真实弹窗流程。",
+    code: `<BoxResource :enable="true" subtype="通用" @insert="handleInsert" />`,
+    style: "min-width: 360px; display: flex; justify-content: flex-start; align-items: center;",
+});

package/stories/exports/Buff.stories.js

@@ -0,0 +1,38 @@
+import Buff from "../../src/Buff.vue";
+import { previewStory } from "../../src/storybook/storybook.helpers";
+
+export default {
+    title: "Exports/Buff",
+    component: Buff,
+    tags: ["autodocs"],
+    args: {
+        client: "std",
+        id: "",
+        level: "",
+    },
+    argTypes: {
+        client: { description: "客户端类型。", control: "text", table: { type: { summary: "String" }, defaultValue: { summary: "'std'" } } },
+        id: { description: "Buff ID。", control: "text", table: { type: { summary: "String | Number" }, defaultValue: { summary: "''" } } },
+        level: { description: "Buff 等级。", control: "text", table: { type: { summary: "String | Number" }, defaultValue: { summary: "''" } } },
+    },
+    parameters: {
+        layout: "padded",
+        docs: {
+            description: {
+                component: "Buff 信息展示组件。根据 `client`、`id`、`level` 拉取对应 Buff 数据。",
+            },
+        },
+    },
+};
+
+export const Overview = previewStory(Buff, {
+    title: "Buff 信息预览",
+    description: "这里直接使用项目 demo 中出现过的 Buff 参数：`id=122`、`level=1`。如果接口可用，就能直接看到实际 Buff 卡片。",
+    code: `<Buff client="std" :id="122" :level="1" />`,
+    style: "min-width: 420px; display: flex; justify-content: flex-start;",
+});
+Overview.args = {
+    client: "std",
+    id: 122,
+    level: 1,
+};

package/stories/exports/GameText.stories.js

@@ -0,0 +1,38 @@
+import GameText from "../../src/GameText.vue";
+import { componentStory } from "../../src/storybook/storybook.helpers";
+
+export default {
+    title: "Exports/GameText",
+    component: GameText,
+    tags: ["autodocs"],
+    args: {
+        text: "普通文本示例",
+        ignoreColor: false,
+        client: "std",
+    },
+    argTypes: {
+        text: { description: "游戏内 Text 标签文本或普通文本。", control: "text", table: { type: { summary: "String" }, defaultValue: { summary: "''" } } },
+        ignoreColor: { description: "是否忽略游戏文本中的颜色信息。", control: "boolean", table: { type: { summary: "Boolean" }, defaultValue: { summary: "false" } } },
+        client: { description: "客户端类型。", control: "text", table: { type: { summary: "String" }, defaultValue: { summary: "'std'" } } },
+    },
+    parameters: {
+        layout: "padded",
+        docs: {
+            description: {
+                component: "用于渲染游戏内 Text 标签文本。普通文本场景可直接在 Storybook 中查看效果。",
+            },
+        },
+    },
+};
+
+export const PlainText = componentStory(GameText, {
+    style: "padding: 24px; min-width: 320px; background: #fff; border-radius: 12px;",
+});
+
+export const IgnoreColor = componentStory(GameText, {
+    style: "padding: 24px; min-width: 320px; background: #fff; border-radius: 12px;",
+});
+IgnoreColor.args = {
+    text: "支持关闭颜色渲染的文本示例",
+    ignoreColor: true,
+};

package/stories/exports/Item.stories.js

@@ -0,0 +1,51 @@
+import Item from "../../src/Item.vue";
+import { previewStory } from "../../src/storybook/storybook.helpers";
+
+export default {
+    title: "Exports/Item",
+    component: Item,
+    tags: ["autodocs"],
+    args: {
+        item: undefined,
+        item_id: "",
+        client: "std",
+        jx3ClientType: 1,
+    },
+    argTypes: {
+        item: { description: "已完整准备好的物品数据对象。", control: "object", table: { type: { summary: "Object" } } },
+        item_id: { description: "物品 ID；传入后会触发数据请求。", control: "text", table: { type: { summary: "String" } } },
+        client: { description: "客户端类型。", control: "text", table: { type: { summary: "String" } } },
+        jx3ClientType: { description: "客户端数字类型，1 为重制，2 为缘起。", control: "number", table: { type: { summary: "Number" } } },
+    },
+    parameters: {
+        layout: "padded",
+        docs: {
+            description: {
+                component: "物品详情组件。可以直接传完整 `item` 对象，也可以通过 `item_id` 触发远程拉取。",
+            },
+        },
+    },
+};
+
+export const Overview = previewStory(Item, {
+    title: "物品详情预览",
+    description: "这里使用手工 mock 的 `item` 对象直接渲染详情组件，便于先看清布局和信息密度。实际业务里也可以改用 `item_id` 让组件自行拉取。",
+    code: `<Item :item="itemData" :jx3ClientType="1" />`,
+    style: "min-width: 520px; display: flex; justify-content: flex-start;",
+});
+Overview.args = {
+    item: {
+        Name: "示例道具",
+        IconID: 1024,
+        Quality: 4,
+        MaxDurability: 100,
+        Durable: 80,
+        Desc: "用于 Storybook 预览的示例道具描述。",
+        Level: 120,
+        Genre: 1,
+        DetailType: 1,
+        Source: "Storybook Mock",
+        GetType: "演示生成",
+    },
+    jx3ClientType: 1,
+};

package/stories/exports/ItemSimple.stories.js

@@ -0,0 +1,50 @@
+import ItemSimple from "../../src/ItemSimple.vue";
+import { componentStory } from "../../src/storybook/storybook.helpers";
+
+const demoItem = {
+    id: "10001",
+    Name: "示例道具",
+    Quality: 4,
+    IconID: 1024,
+};
+
+export default {
+    title: "Exports/ItemSimple",
+    component: ItemSimple,
+    tags: ["autodocs"],
+    args: {
+        item: demoItem,
+        onlyIcon: false,
+        iconSize: "48px",
+        withName: true,
+        jx3ClientType: 1,
+    },
+    argTypes: {
+        item: { description: "道具对象，至少建议包含 `id`、`Name`、`Quality`、`IconID`。", control: "object", table: { type: { summary: "Object" } } },
+        onlyIcon: { description: "是否仅显示图标。", control: "boolean", table: { type: { summary: "Boolean" } } },
+        iconSize: { description: "图标尺寸。", control: "text", table: { type: { summary: "String | Number" } } },
+        withName: { description: "是否显示名称。", control: "boolean", table: { type: { summary: "Boolean" } } },
+        jx3ClientType: { description: "客户端数字类型。", control: "number", table: { type: { summary: "Number" } } },
+    },
+    parameters: {
+        layout: "padded",
+        docs: {
+            description: {
+                component: "简化版道具展示组件。适合在列表和内联文本中快速展示道具图标与名称。",
+            },
+        },
+    },
+};
+
+export const Default = componentStory(ItemSimple, {
+    style: "padding: 24px; min-width: 240px; background: #0f172a; border-radius: 12px;",
+});
+
+export const IconOnly = componentStory(ItemSimple, {
+    style: "padding: 24px; min-width: 120px; background: #0f172a; border-radius: 12px;",
+});
+IconOnly.args = {
+    onlyIcon: true,
+    withName: false,
+    iconSize: "56px",
+};

package/stories/exports/Markdown.stories.js

@@ -0,0 +1,46 @@
+import Markdown from "../../src/Markdown.vue";
+import { previewStory, useDemoText } from "../../src/storybook/storybook.helpers";
+
+export default {
+    title: "Exports/Markdown",
+    component: Markdown,
+    tags: ["autodocs"],
+    args: {
+        modelValue: "",
+        content: "",
+        editable: true,
+        attachmentEnable: true,
+        resourceEnable: true,
+        placeholder: "支持 Markdown，支持 Ctrl+V 粘贴图片上传",
+        height: 720,
+    },
+    argTypes: {
+        modelValue: { description: "Vue 3 `v-model` 绑定值。", control: "text", table: { type: { summary: "String" } } },
+        content: { description: "兼容旧用法的初始内容。", control: "text", table: { type: { summary: "String" }, defaultValue: { summary: "''" } } },
+        editable: { description: "是否可编辑。", control: "boolean", table: { type: { summary: "Boolean" }, defaultValue: { summary: "true" } } },
+        attachmentEnable: { description: "是否启用附件上传。", control: "boolean", table: { type: { summary: "Boolean" }, defaultValue: { summary: "true" } } },
+        resourceEnable: { description: "是否启用资源插入。", control: "boolean", table: { type: { summary: "Boolean" }, defaultValue: { summary: "true" } } },
+        placeholder: { description: "编辑器占位文本。", control: "text", table: { type: { summary: "String" }, defaultValue: { summary: "'支持 Markdown，支持 Ctrl+V 粘贴图片上传'" } } },
+        height: { description: "编辑器高度。", control: "text", table: { type: { summary: "String | Number" }, defaultValue: { summary: "720" } } },
+    },
+    parameters: {
+        layout: "padded",
+        docs: {
+            description: {
+                component: "Markdown 编辑器组件。依赖 Vditor、上传接口和浏览器编辑环境，当前 Storybook 主要用于 props 文档。",
+            },
+        },
+    },
+};
+
+export const Overview = previewStory(Markdown, {
+    title: "Markdown 编辑器预览",
+    description: "使用项目调试页同一份 Markdown 示例内容，直接展示编辑器加载后的样子。",
+    code: `<Markdown v-model="content" :editable="true" :height="720" />`,
+    style: "min-width: 1080px;",
+    setup() {
+        const { content } = useDemoText("/demo/article_markdown.html", "# 加载中");
+        return { content };
+    },
+    template: `<StoryComponent v-bind="args" v-model="content" />`,
+});

package/stories/exports/Npc.stories.js

@@ -0,0 +1,35 @@
+import Npc from "../../src/Npc.vue";
+import { previewStory } from "../../src/storybook/storybook.helpers";
+
+export default {
+    title: "Exports/Npc",
+    component: Npc,
+    tags: ["autodocs"],
+    args: {
+        client: "std",
+        id: "",
+    },
+    argTypes: {
+        client: { description: "客户端类型。", control: "text", table: { type: { summary: "String" }, defaultValue: { summary: "'std'" } } },
+        id: { description: "NPC ID。", control: "text", table: { type: { summary: "String | Number" }, defaultValue: { summary: "''" } } },
+    },
+    parameters: {
+        layout: "padded",
+        docs: {
+            description: {
+                component: "NPC 信息展示组件。根据 `client` 与 `id` 查询 NPC 数据。",
+            },
+        },
+    },
+};
+
+export const Overview = previewStory(Npc, {
+    title: "NPC 信息预览",
+    description: "这里使用项目 demo 中出现的 NPC 参数：`id=69700`。接口可用时可以直接看到实际 NPC 信息卡片。",
+    code: `<Npc client="std" :id="69700" />`,
+    style: "min-width: 420px; display: flex; justify-content: flex-start;",
+});
+Overview.args = {
+    client: "std",
+    id: 69700,
+};

package/stories/exports/Resource.stories.js

@@ -0,0 +1,29 @@
+import Resource from "../../src/Resource.vue";
+import { previewStory } from "../../src/storybook/storybook.helpers";
+
+export default {
+    title: "Exports/Resource",
+    component: Resource,
+    tags: ["autodocs"],
+    args: {
+        enable: true,
+    },
+    argTypes: {
+        enable: { description: "是否允许点击打开资源面板。", control: "boolean", table: { type: { summary: "Boolean" }, defaultValue: { summary: "true" } } },
+    },
+    parameters: {
+        layout: "padded",
+        docs: {
+            description: {
+                component: "剑三数据库资源选择组件。主要通过弹窗检索并插入 Buff、Skill、Item、NPC 等资源。",
+            },
+        },
+    },
+};
+
+export const Overview = previewStory(Resource, {
+    title: "剑三资源入口预览",
+    description: "这个预览先展示触发按钮本身。点击后会进入真实的资源弹窗逻辑，适合确认组件在页面中的入口外观和基础交互。",
+    code: `<Resource :enable="true" @insert="handleInsert" />`,
+    style: "min-width: 360px; display: flex; justify-content: flex-start; align-items: center;",
+});