@jx3box/jx3box-editor 3.2.4 → 3.2.6

package/stories/exports/Skill.stories.js

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

package/stories/exports/Tinymce.stories.js

@@ -0,0 +1,46 @@
+import Tinymce from "../../src/Tinymce.vue";
+import { previewStory, useDemoText } from "../../src/storybook/storybook.helpers";
+
+export default {
+    title: "Exports/Tinymce",
+    component: Tinymce,
+    tags: ["autodocs"],
+    args: {
+        modelValue: "",
+        content: "",
+        height: 800,
+        attachmentEnable: true,
+        resourceEnable: true,
+        emotionEnable: true,
+        subtype: "通用",
+    },
+    argTypes: {
+        modelValue: { description: "Vue 3 `v-model` 绑定值。", control: "text", table: { type: { summary: "String" } } },
+        content: { description: "兼容旧用法的初始内容。", control: "text", table: { type: { summary: "String" }, defaultValue: { summary: "''" } } },
+        height: { description: "编辑器高度。", control: "number", table: { type: { summary: "Number" }, defaultValue: { summary: "800" } } },
+        attachmentEnable: { description: "是否启用附件上传。", control: "boolean", table: { type: { summary: "Boolean" }, defaultValue: { summary: "true" } } },
+        resourceEnable: { description: "是否启用资源插入。", control: "boolean", table: { type: { summary: "Boolean" }, defaultValue: { summary: "true" } } },
+        emotionEnable: { 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: "TinyMCE 富文本编辑器封装。依赖 TinyMCE 运行时、上传和资源插入环境。",
+            },
+        },
+    },
+};
+
+export const Overview = previewStory(Tinymce, {
+    title: "Tinymce 编辑器预览",
+    description: "这里加载 `public/demo/article_basic.html` 作为初始内容，直接展示富文本编辑器的默认工作形态。",
+    code: `<Tinymce v-model="html" :height="800" :attachmentEnable="true" :resourceEnable="true" />`,
+    style: "min-width: 1080px;",
+    setup() {
+        const { content } = useDemoText("/demo/article_basic.html", "<p>加载中...</p>");
+        return { html: content };
+    },
+    template: `<StoryComponent v-bind="args" v-model="html" />`,
+});

package/stories/exports/Upload.stories.js

@@ -0,0 +1,41 @@
+import Upload from "../../src/Upload.vue";
+import { previewStory } from "../../src/storybook/storybook.helpers";
+
+export default {
+    title: "Exports/Upload",
+    component: Upload,
+    tags: ["autodocs"],
+    args: {
+        text: "上传附件",
+        onlyImage: false,
+        desc: "",
+        accept: "",
+        enable: true,
+        max: 10,
+        sizeLimit: 30,
+    },
+    argTypes: {
+        text: { description: "上传按钮文案。", control: "text", table: { type: { summary: "String" } } },
+        onlyImage: { description: "是否只允许图片。", control: "boolean", table: { type: { summary: "Boolean" } } },
+        desc: { description: "上传说明文本。", control: "text", table: { type: { summary: "String" } } },
+        accept: { description: "原生文件选择 accept 配置。", control: "text", table: { type: { summary: "String" }, defaultValue: { summary: "DEFAULT_ACCEPT" } } },
+        enable: { description: "是否允许上传。", control: "boolean", table: { type: { summary: "Boolean" }, defaultValue: { summary: "true" } } },
+        max: { description: "一次最多允许上传的文件数。", control: "number", table: { type: { summary: "Number" }, defaultValue: { summary: "10" } } },
+        sizeLimit: { description: "单个文件大小限制，单位 MB。", control: "number", table: { type: { summary: "Number" }, defaultValue: { summary: "30" } } },
+    },
+    parameters: {
+        layout: "padded",
+        docs: {
+            description: {
+                component: "附件上传组件。支持限制上传格式、数量和单文件大小。",
+            },
+        },
+    },
+};
+
+export const Overview = previewStory(Upload, {
+    title: "Upload 交互外观预览",
+    description: "这里展示上传组件默认外观。实际上传仍依赖 CMS 接口，但在 Storybook 中已经可以清楚看到按钮、说明和调用入口。",
+    code: `<Upload text="上传附件" :max="10" :sizeLimit="30" />`,
+    style: "min-width: 720px;",
+});

package/stories/exports/UploadAlbum.stories.js

@@ -0,0 +1,31 @@
+import UploadAlbum from "../../src/UploadAlbum.vue";
+import { componentStory } from "../../src/storybook/storybook.helpers";
+
+export default {
+    title: "Exports/UploadAlbum",
+    component: UploadAlbum,
+    tags: ["autodocs"],
+    args: {
+        modelValue: undefined,
+        data: [
+            { id: "demo-1", name: "封面图", url: "https://picsum.photos/seed/jx3box-story-1/240/160" },
+            { id: "demo-2", name: "细节图", url: "https://picsum.photos/seed/jx3box-story-2/240/160" },
+        ],
+    },
+    argTypes: {
+        modelValue: { description: "受控图片列表，适合配合 `v-model` 使用。", control: "object", table: { type: { summary: "Array" }, defaultValue: { summary: "undefined" } } },
+        data: { description: "非受控模式下的初始图片列表。", control: "object", table: { type: { summary: "Array" }, defaultValue: { summary: "[]" } } },
+    },
+    parameters: {
+        layout: "padded",
+        docs: {
+            description: {
+                component: "相册上传组件。支持批量上传、拖拽排序和图片预览。传入已有图片列表时可直接展示。",
+            },
+        },
+    },
+};
+
+export const Default = componentStory(UploadAlbum, {
+    style: "min-width: 720px; background: #fff; padding: 24px; border-radius: 12px;",
+});