@baishuyun/ai-design 2.0.37 → 2.1.0-alpha.0

package/src/stories/PrimaryEntryBtn.stories.tsx

@@ -1,74 +1,74 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-// import { Header } from "./Header";
-import { PrimaryEntryBtn } from '../components/primary-entry-btn';
-import { ColorfulEditIcon } from '../components/bs-icons';
-
-const meta = {
-  title: 'Example/Button/PrimaryEntryBtn',
-  component: PrimaryEntryBtn,
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-  parameters: {
-    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
-  },
-  args: {},
-  argTypes: {
-    entryVariant: {
-      control: 'select',
-      options: ['default', 'ghost', 'selected'],
-    },
-  },
-} satisfies Meta<typeof PrimaryEntryBtn>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Base: Story = {
-  args: {
-    children: 'AI表单搭建',
-  },
-};
-
-export const Minimal: Story = {
-  args: {
-    minimal: true,
-  },
-};
-
-export const Ghost: Story = {
-  args: {
-    children: 'AI填写',
-    entryVariant: 'ghost',
-  },
-};
-
-export const Selected: Story = {
-  args: {
-    children: 'AI填写',
-    entryVariant: 'selected',
-  },
-};
-
-export const CustomIcon: Story = {
-  args: {
-    children: '自定义图标',
-    icon: <ColorfulEditIcon />,
-    entryVariant: 'ghost',
-  },
-};
-
-export const GhostMinimal: Story = {
-  args: {
-    minimal: true,
-    entryVariant: 'ghost',
-  },
-};
-
-export const SelectedMinimal: Story = {
-  args: {
-    minimal: true,
-    entryVariant: 'selected',
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+// import { Header } from "./Header";
+import { PrimaryEntryBtn } from '../components/primary-entry-btn';
+import { ColorfulEditIcon } from '../components/bs-icons';
+
+const meta = {
+  title: 'Example/Button/PrimaryEntryBtn',
+  component: PrimaryEntryBtn,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  args: {},
+  argTypes: {
+    entryVariant: {
+      control: 'select',
+      options: ['default', 'ghost', 'selected'],
+    },
+  },
+} satisfies Meta<typeof PrimaryEntryBtn>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Base: Story = {
+  args: {
+    children: 'AI表单搭建',
+  },
+};
+
+export const Minimal: Story = {
+  args: {
+    minimal: true,
+  },
+};
+
+export const Ghost: Story = {
+  args: {
+    children: 'AI填写',
+    entryVariant: 'ghost',
+  },
+};
+
+export const Selected: Story = {
+  args: {
+    children: 'AI填写',
+    entryVariant: 'selected',
+  },
+};
+
+export const CustomIcon: Story = {
+  args: {
+    children: '自定义图标',
+    icon: <ColorfulEditIcon />,
+    entryVariant: 'ghost',
+  },
+};
+
+export const GhostMinimal: Story = {
+  args: {
+    minimal: true,
+    entryVariant: 'ghost',
+  },
+};
+
+export const SelectedMinimal: Story = {
+  args: {
+    minimal: true,
+    entryVariant: 'selected',
+  },
+};

package/src/stories/PromptInput.stories.tsx

@@ -1,228 +1,228 @@
-import { useState, useCallback } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { PromptInput } from '../components/agent-helper/prompt-input';
-import type { PromptInputProps } from '../components/agent-helper/prompt-input';
-import type { IField } from '@baishuyun/types';
-
-// ── Mock Data ─────────────────────────────────────────────────────
-
-const mockFields: IField[] = [
-  { label: '单行文本', widget: { type: 'text', widgetName: 'text_field', value: '' } },
-  { label: '多行文本', widget: { type: 'textarea', widgetName: 'textarea_field', value: '' } },
-  { label: '数字', widget: { type: 'number', widgetName: 'number_field', value: 0 } },
-  { label: '日期时间', widget: { type: 'datetime', widgetName: 'datetime_field', value: '' } },
-  { label: '附件上传', widget: { type: 'upload', widgetName: 'upload_field', value: '' } },
-  { label: '图片上传', widget: { type: 'image', widgetName: 'image_field', value: '' } },
-  { label: '单选框', widget: { type: 'radio', widgetName: 'radio_field', value: '' } },
-  { label: '下拉框', widget: { type: 'combo', widgetName: 'combo_field', value: '' } },
-  { label: '成员选择', widget: { type: 'user', widgetName: 'user_field', value: '' } },
-  { label: '部门选择', widget: { type: 'dept', widgetName: 'dept_field', value: '' } },
-  {
-    label: '子表单',
-    widget: {
-      type: 'subform',
-      widgetName: 'subform1',
-      value: '',
-      items: [
-        { label: '子字段一', value: 'sub1', widget: { type: 'text', widgetName: 'sub_text', value: '' } },
-        { label: '子字段二', value: 'sub2', widget: { type: 'number', widgetName: 'sub_num', value: 0 } },
-      ],
-    },
-  },
-  { label: '签名', widget: { type: 'signature', widgetName: 'sig_field', value: '' } },
-  { label: '流水号', widget: { type: 'sn', widgetName: 'sn_field', value: '' } },
-  { label: '公式', widget: { type: 'formula', widgetName: 'formula_field', value: '' } },
-];
-
-const mockFieldsWithSubForms: IField[] = [
-  { label: '单行文本', widget: { type: 'text', widgetName: 'text1', value: '' } },
-  {
-    label: '定位',
-    widget: {
-      type: 'location',
-      widgetName: 'location_field',
-      value: '',
-      items: [
-        { label: '地址', value: 'addr', widget: { type: 'address', widgetName: 'addr_field', value: '' } },
-        { label: '经度', value: 'lng', widget: { type: 'text', widgetName: 'lng_field', value: '' } },
-        { label: '纬度', value: 'lat', widget: { type: 'text', widgetName: 'lat_field', value: '' } },
-      ],
-    },
-  },
-  {
-    label: '子表单',
-    widget: {
-      type: 'subform',
-      widgetName: 'subform1',
-      value: '',
-      items: [
-        { label: '子字段一', value: 'sub1', widget: { type: 'text', widgetName: 'sub_text', value: '' } },
-        { label: '子字段二', value: 'sub2', widget: { type: 'number', widgetName: 'sub_num', value: 0 } },
-      ],
-    },
-  },
-];
-
-// ── Meta ──────────────────────────────────────────────────────────
-
-const meta: Meta<typeof PromptInput> = {
-  title: 'Agent Helper/PromptInput',
-  component: PromptInput,
-  tags: ['autodocs'],
-  parameters: { layout: 'centered' },
-  args: {
-    fields: mockFields,
-    placeholder: '示例：放配置时候的提示词内容进行引导说明',
-  },
-  decorators: [
-    (Story) => (
-      <div style={{ width: 600, padding: 20 }}>
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ── Stories ───────────────────────────────────────────────────────
-
-export const Default: Story = {};
-
-export const WithDefaultValue: Story = {
-  args: {
-    defaultValue: '请根据以下信息生成报告：',
-  },
-};
-
-export const WithFieldTags: Story = {
-  args: {
-    defaultValue: 'AI内容翻译 ${text_field} 还有 ${textarea_field} ${number_field} 这几个字段信息',
-  },
-};
-
-export const Empty: Story = {
-  args: {
-    fields: [],
-  },
-};
-
-export const CustomPlaceholder: Story = {
-  args: {
-    placeholder: '请输入提示词模板...',
-  },
-};
-
-export const WithSubForms: Story = {
-  args: {
-    fields: mockFieldsWithSubForms,
-  },
-};
-
-// ── Interactive Story ─────────────────────────────────────────────
-
-export const Interactive: Story = {
-  args: {
-    fields: mockFields,
-  },
-  render: (args: PromptInputProps) => {
-    const [template, setTemplate] = useState('');
-
-    const handleChange = useCallback((tpl: string) => {
-      setTemplate(tpl);
-    }, []);
-
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-        <PromptInput {...args} onChange={handleChange} />
-
-        <div>
-          <div style={{ fontSize: 12, color: '#999', marginBottom: 4 }}>onChange 实时输出：</div>
-          <pre
-            style={{
-              padding: 12,
-              background: '#F5F5F5',
-              borderRadius: 4,
-              fontSize: 13,
-              lineHeight: 1.5,
-              whiteSpace: 'pre-wrap',
-              wordBreak: 'break-all',
-              margin: 0,
-              minHeight: 40,
-            }}
-          >
-            {template || '(空)'}
-          </pre>
-        </div>
-      </div>
-    );
-  },
-};
-
-// ── Controlled Story ──────────────────────────────────────────────
-
-export const Controlled: Story = {
-  args: {
-    fields: mockFields,
-  },
-  render: (args: PromptInputProps) => {
-    const [value, setValue] = useState('');
-
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-        <PromptInput {...args} value={value} onChange={setValue} />
-
-        <div style={{ display: 'flex', gap: 8 }}>
-          <button
-            type="button"
-            onClick={() => setValue('预设模板：请填写 ${text_field} 字段')}
-            style={{
-              padding: '6px 12px',
-              fontSize: 14,
-              border: '1px solid #E0E0E0',
-              borderRadius: 4,
-              background: '#fff',
-              cursor: 'pointer',
-            }}
-          >
-            设置预设模板
-          </button>
-          <button
-            type="button"
-            onClick={() => setValue('')}
-            style={{
-              padding: '6px 12px',
-              fontSize: 14,
-              border: '1px solid #E0E0E0',
-              borderRadius: 4,
-              background: '#fff',
-              cursor: 'pointer',
-            }}
-          >
-            清空
-          </button>
-        </div>
-
-        <div>
-          <div style={{ fontSize: 12, color: '#999', marginBottom: 4 }}>受控 value（onChange 输出）：</div>
-          <pre
-            style={{
-              padding: 12,
-              background: '#F5F5F5',
-              borderRadius: 4,
-              fontSize: 13,
-              lineHeight: 1.5,
-              whiteSpace: 'pre-wrap',
-              wordBreak: 'break-all',
-              margin: 0,
-              minHeight: 40,
-            }}
-          >
-            {value || '(空)'}
-          </pre>
-        </div>
-      </div>
-    );
-  },
-};
+import { useState, useCallback } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { PromptInput } from '../components/agent-helper/prompt-input';
+import type { PromptInputProps } from '../components/agent-helper/prompt-input';
+import type { IField } from '@baishuyun/types';
+
+// ── Mock Data ─────────────────────────────────────────────────────
+
+const mockFields: IField[] = [
+  { label: '单行文本', widget: { type: 'text', widgetName: 'text_field', value: '' } },
+  { label: '多行文本', widget: { type: 'textarea', widgetName: 'textarea_field', value: '' } },
+  { label: '数字', widget: { type: 'number', widgetName: 'number_field', value: 0 } },
+  { label: '日期时间', widget: { type: 'datetime', widgetName: 'datetime_field', value: '' } },
+  { label: '附件上传', widget: { type: 'upload', widgetName: 'upload_field', value: '' } },
+  { label: '图片上传', widget: { type: 'image', widgetName: 'image_field', value: '' } },
+  { label: '单选框', widget: { type: 'radio', widgetName: 'radio_field', value: '' } },
+  { label: '下拉框', widget: { type: 'combo', widgetName: 'combo_field', value: '' } },
+  { label: '成员选择', widget: { type: 'user', widgetName: 'user_field', value: '' } },
+  { label: '部门选择', widget: { type: 'dept', widgetName: 'dept_field', value: '' } },
+  {
+    label: '子表单',
+    widget: {
+      type: 'subform',
+      widgetName: 'subform1',
+      value: '',
+      items: [
+        { label: '子字段一', value: 'sub1', widget: { type: 'text', widgetName: 'sub_text', value: '' } },
+        { label: '子字段二', value: 'sub2', widget: { type: 'number', widgetName: 'sub_num', value: 0 } },
+      ],
+    },
+  },
+  { label: '签名', widget: { type: 'signature', widgetName: 'sig_field', value: '' } },
+  { label: '流水号', widget: { type: 'sn', widgetName: 'sn_field', value: '' } },
+  { label: '公式', widget: { type: 'formula', widgetName: 'formula_field', value: '' } },
+];
+
+const mockFieldsWithSubForms: IField[] = [
+  { label: '单行文本', widget: { type: 'text', widgetName: 'text1', value: '' } },
+  {
+    label: '定位',
+    widget: {
+      type: 'location',
+      widgetName: 'location_field',
+      value: '',
+      items: [
+        { label: '地址', value: 'addr', widget: { type: 'address', widgetName: 'addr_field', value: '' } },
+        { label: '经度', value: 'lng', widget: { type: 'text', widgetName: 'lng_field', value: '' } },
+        { label: '纬度', value: 'lat', widget: { type: 'text', widgetName: 'lat_field', value: '' } },
+      ],
+    },
+  },
+  {
+    label: '子表单',
+    widget: {
+      type: 'subform',
+      widgetName: 'subform1',
+      value: '',
+      items: [
+        { label: '子字段一', value: 'sub1', widget: { type: 'text', widgetName: 'sub_text', value: '' } },
+        { label: '子字段二', value: 'sub2', widget: { type: 'number', widgetName: 'sub_num', value: 0 } },
+      ],
+    },
+  },
+];
+
+// ── Meta ──────────────────────────────────────────────────────────
+
+const meta: Meta<typeof PromptInput> = {
+  title: 'Agent Helper/PromptInput',
+  component: PromptInput,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  args: {
+    fields: mockFields,
+    placeholder: '示例：放配置时候的提示词内容进行引导说明',
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 600, padding: 20 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ── Stories ───────────────────────────────────────────────────────
+
+export const Default: Story = {};
+
+export const WithDefaultValue: Story = {
+  args: {
+    defaultValue: '请根据以下信息生成报告：',
+  },
+};
+
+export const WithFieldTags: Story = {
+  args: {
+    defaultValue: 'AI内容翻译 ${text_field} 还有 ${textarea_field} ${number_field} 这几个字段信息',
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    fields: [],
+  },
+};
+
+export const CustomPlaceholder: Story = {
+  args: {
+    placeholder: '请输入提示词模板...',
+  },
+};
+
+export const WithSubForms: Story = {
+  args: {
+    fields: mockFieldsWithSubForms,
+  },
+};
+
+// ── Interactive Story ─────────────────────────────────────────────
+
+export const Interactive: Story = {
+  args: {
+    fields: mockFields,
+  },
+  render: (args: PromptInputProps) => {
+    const [template, setTemplate] = useState('');
+
+    const handleChange = useCallback((tpl: string) => {
+      setTemplate(tpl);
+    }, []);
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <PromptInput {...args} onChange={handleChange} />
+
+        <div>
+          <div style={{ fontSize: 12, color: '#999', marginBottom: 4 }}>onChange 实时输出：</div>
+          <pre
+            style={{
+              padding: 12,
+              background: '#F5F5F5',
+              borderRadius: 4,
+              fontSize: 13,
+              lineHeight: 1.5,
+              whiteSpace: 'pre-wrap',
+              wordBreak: 'break-all',
+              margin: 0,
+              minHeight: 40,
+            }}
+          >
+            {template || '(空)'}
+          </pre>
+        </div>
+      </div>
+    );
+  },
+};
+
+// ── Controlled Story ──────────────────────────────────────────────
+
+export const Controlled: Story = {
+  args: {
+    fields: mockFields,
+  },
+  render: (args: PromptInputProps) => {
+    const [value, setValue] = useState('');
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <PromptInput {...args} value={value} onChange={setValue} />
+
+        <div style={{ display: 'flex', gap: 8 }}>
+          <button
+            type="button"
+            onClick={() => setValue('预设模板：请填写 ${text_field} 字段')}
+            style={{
+              padding: '6px 12px',
+              fontSize: 14,
+              border: '1px solid #E0E0E0',
+              borderRadius: 4,
+              background: '#fff',
+              cursor: 'pointer',
+            }}
+          >
+            设置预设模板
+          </button>
+          <button
+            type="button"
+            onClick={() => setValue('')}
+            style={{
+              padding: '6px 12px',
+              fontSize: 14,
+              border: '1px solid #E0E0E0',
+              borderRadius: 4,
+              background: '#fff',
+              cursor: 'pointer',
+            }}
+          >
+            清空
+          </button>
+        </div>
+
+        <div>
+          <div style={{ fontSize: 12, color: '#999', marginBottom: 4 }}>受控 value（onChange 输出）：</div>
+          <pre
+            style={{
+              padding: 12,
+              background: '#F5F5F5',
+              borderRadius: 4,
+              fontSize: 13,
+              lineHeight: 1.5,
+              whiteSpace: 'pre-wrap',
+              wordBreak: 'break-all',
+              margin: 0,
+              minHeight: 40,
+            }}
+          >
+            {value || '(空)'}
+          </pre>
+        </div>
+      </div>
+    );
+  },
+};