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

package/src/stories/FormSelect.stories.tsx

@@ -1,222 +1,222 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { FormSelect } from '../components/agent-helper/form-select';
-import type { FormSelectItem, FormSelectChangeResult } from '../components/agent-helper/form-select';
-
-const mockFormItems: FormSelectItem[] = [
-  { id: 'form1', name: '采购订单表', icon: 51, type: 'form' },
-  { id: 'form2', name: '客户信息表', icon: 52, type: 'form' },
-  { id: 'group1', name: '客户资料', icon: 25, itemType: 'group' },
-  { id: 'form3', name: '客户信息表', icon: 53, type: 'form', parent: 'group1' },
-  { id: 'form4', name: '供应商管理表', icon: 55, type: 'form', parent: 'group1' },
-  { id: 'group2', name: '客户资料分组一', icon: 25, itemType: 'group', parent: 'group1' },
-  { id: 'form5', name: '客户表单', icon: 56, type: 'form', parent: 'group2' },
-  { id: 'form6', name: '客户信息', icon: 57, type: 'form', parent: 'group2' },
-  { id: 'group3', name: '客户资料分组二', icon: 25, itemType: 'group', parent: 'group1' },
-  { id: 'form7', name: '客户表单A', icon: 58, type: 'form', parent: 'group3' },
-  { id: 'form8', name: '客户表单B', icon: 59, type: 'form', parent: 'group3' },
-  { id: 'form9', name: '销售报表', icon: 60, type: 'report' },
-];
-
-const manyFormItems: FormSelectItem[] = Array.from({ length: 30 }, (_, i) => ({
-  id: `form_${i}`,
-  name: `测试表单 ${i + 1}`,
-  icon: 25 + (i % 36),
-  type: 'form',
-}));
-
-const meta: Meta<typeof FormSelect> = {
-  title: 'Agent Helper/FormSelect',
-  component: FormSelect,
-  parameters: { layout: 'centered' },
-  args: {
-    items: mockFormItems,
-    placeholder: '请选择表单',
-  },
-  decorators: [
-    (Story) => (
-      <div style={{ padding: 60, minHeight: 400, minWidth: 240 }}>
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    items: mockFormItems,
-    placeholder: '请选择表单',
-  },
-};
-
-export const WithSelection: Story = {
-  args: {
-    items: mockFormItems,
-    defaultValue: 'form4',
-    placeholder: '请选择表单',
-  },
-};
-
-export const AllowEmpty: Story = {
-  args: {
-    items: mockFormItems,
-    allowEmpty: true,
-  },
-};
-
-export const AllowEmptyCustomLabel: Story = {
-  args: {
-    items: mockFormItems,
-    allowEmpty: true,
-    emptyLabel: '不限',
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    items: mockFormItems,
-    defaultValue: 'form1',
-    placeholder: '请选择表单',
-    disabled: true,
-  },
-};
-
-export const ManyItems: Story = {
-  args: {
-    items: manyFormItems,
-    placeholder: '请选择表单',
-  },
-};
-
-export const Empty: Story = {
-  args: {
-    items: [],
-    placeholder: '暂无可用表单',
-  },
-};
-
-export const OnlyForms: Story = {
-  args: {
-    items: mockFormItems.filter((i) => i.itemType !== 'group'),
-    placeholder: '请选择表单',
-  },
-};
-
-export const Interactive: Story = {
-  render: (args) => {
-    const [selected, setSelected] = useState<FormSelectChangeResult | null>(null);
-
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-        <FormSelect {...args} onChange={setSelected} />
-        {selected?.form && (
-          <div
-            style={{
-              padding: 12,
-              background: '#F5F7FA',
-              borderRadius: 8,
-              fontSize: 14,
-            }}
-          >
-            <div>
-              <strong>选中表单:</strong> {selected.form.name}
-            </div>
-            <div>
-              <strong>表单ID:</strong> {selected.form.id}
-            </div>
-            <div>
-              <strong>表单类型:</strong> {selected.form.type}
-            </div>
-          </div>
-        )}
-      </div>
-    );
-  },
-  args: {
-    items: mockFormItems,
-    placeholder: '请选择表单',
-  },
-};
-
-export const Multiple: Story = {
-  args: {
-    items: mockFormItems,
-    multiple: true,
-    placeholder: '请选择表单（可多选）',
-  },
-};
-
-export const MultipleWithSelection: Story = {
-  args: {
-    items: mockFormItems,
-    multiple: true,
-    defaultValue: ['form3', 'form4', 'form7'],
-    placeholder: '请选择表单（可多选）',
-  },
-};
-
-export const MultipleWithOverflow: Story = {
-  args: {
-    items: manyFormItems,
-    multiple: true,
-    defaultValue: ['form_0', 'form_1', 'form_2', 'form_3', 'form_4', 'form_5'],
-    maxVisibleChips: 2,
-    placeholder: '请选择表单（可多选）',
-  },
-};
-
-export const MultipleDisabled: Story = {
-  args: {
-    items: mockFormItems,
-    multiple: true,
-    defaultValue: ['form1', 'form4'],
-    disabled: true,
-    placeholder: '请选择表单（可多选）',
-  },
-};
-
-export const MultipleInteractive: Story = {
-  render: (args) => {
-    const [value, setValue] = useState<string[]>(['form1']);
-    const [selected, setSelected] = useState<FormSelectChangeResult | null>(null);
-
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-        <FormSelect
-          {...args}
-          multiple
-          value={value}
-          onChange={(result) => {
-            setSelected(result);
-            setValue(result.forms?.map((f) => f.id) ?? []);
-          }}
-        />
-        <div
-          style={{
-            padding: 12,
-            background: '#F5F7FA',
-            borderRadius: 8,
-            fontSize: 14,
-          }}
-        >
-          <div>
-            <strong>已选数量:</strong> {selected?.forms?.length ?? 1}
-          </div>
-          <div>
-            <strong>已选表单:</strong>{' '}
-            {(selected?.forms ?? [])
-              .map((f) => `${f.name}(${f.id})`)
-              .join('、') || 'form1'}
-          </div>
-        </div>
-      </div>
-    );
-  },
-  args: {
-    items: mockFormItems,
-    placeholder: '请选择表单（可多选）',
-  },
-};
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { FormSelect } from '../components/agent-helper/form-select';
+import type { FormSelectItem, FormSelectChangeResult } from '../components/agent-helper/form-select';
+
+const mockFormItems: FormSelectItem[] = [
+  { id: 'form1', name: '采购订单表', icon: 51, type: 'form' },
+  { id: 'form2', name: '客户信息表', icon: 52, type: 'form' },
+  { id: 'group1', name: '客户资料', icon: 25, itemType: 'group' },
+  { id: 'form3', name: '客户信息表', icon: 53, type: 'form', parent: 'group1' },
+  { id: 'form4', name: '供应商管理表', icon: 55, type: 'form', parent: 'group1' },
+  { id: 'group2', name: '客户资料分组一', icon: 25, itemType: 'group', parent: 'group1' },
+  { id: 'form5', name: '客户表单', icon: 56, type: 'form', parent: 'group2' },
+  { id: 'form6', name: '客户信息', icon: 57, type: 'form', parent: 'group2' },
+  { id: 'group3', name: '客户资料分组二', icon: 25, itemType: 'group', parent: 'group1' },
+  { id: 'form7', name: '客户表单A', icon: 58, type: 'form', parent: 'group3' },
+  { id: 'form8', name: '客户表单B', icon: 59, type: 'form', parent: 'group3' },
+  { id: 'form9', name: '销售报表', icon: 60, type: 'report' },
+];
+
+const manyFormItems: FormSelectItem[] = Array.from({ length: 30 }, (_, i) => ({
+  id: `form_${i}`,
+  name: `测试表单 ${i + 1}`,
+  icon: 25 + (i % 36),
+  type: 'form',
+}));
+
+const meta: Meta<typeof FormSelect> = {
+  title: 'Agent Helper/FormSelect',
+  component: FormSelect,
+  parameters: { layout: 'centered' },
+  args: {
+    items: mockFormItems,
+    placeholder: '请选择表单',
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ padding: 60, minHeight: 400, minWidth: 240 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    items: mockFormItems,
+    placeholder: '请选择表单',
+  },
+};
+
+export const WithSelection: Story = {
+  args: {
+    items: mockFormItems,
+    defaultValue: 'form4',
+    placeholder: '请选择表单',
+  },
+};
+
+export const AllowEmpty: Story = {
+  args: {
+    items: mockFormItems,
+    allowEmpty: true,
+  },
+};
+
+export const AllowEmptyCustomLabel: Story = {
+  args: {
+    items: mockFormItems,
+    allowEmpty: true,
+    emptyLabel: '不限',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    items: mockFormItems,
+    defaultValue: 'form1',
+    placeholder: '请选择表单',
+    disabled: true,
+  },
+};
+
+export const ManyItems: Story = {
+  args: {
+    items: manyFormItems,
+    placeholder: '请选择表单',
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    items: [],
+    placeholder: '暂无可用表单',
+  },
+};
+
+export const OnlyForms: Story = {
+  args: {
+    items: mockFormItems.filter((i) => i.itemType !== 'group'),
+    placeholder: '请选择表单',
+  },
+};
+
+export const Interactive: Story = {
+  render: (args) => {
+    const [selected, setSelected] = useState<FormSelectChangeResult | null>(null);
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+        <FormSelect {...args} onChange={setSelected} />
+        {selected?.form && (
+          <div
+            style={{
+              padding: 12,
+              background: '#F5F7FA',
+              borderRadius: 8,
+              fontSize: 14,
+            }}
+          >
+            <div>
+              <strong>选中表单:</strong> {selected.form.name}
+            </div>
+            <div>
+              <strong>表单ID:</strong> {selected.form.id}
+            </div>
+            <div>
+              <strong>表单类型:</strong> {selected.form.type}
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  },
+  args: {
+    items: mockFormItems,
+    placeholder: '请选择表单',
+  },
+};
+
+export const Multiple: Story = {
+  args: {
+    items: mockFormItems,
+    multiple: true,
+    placeholder: '请选择表单（可多选）',
+  },
+};
+
+export const MultipleWithSelection: Story = {
+  args: {
+    items: mockFormItems,
+    multiple: true,
+    defaultValue: ['form3', 'form4', 'form7'],
+    placeholder: '请选择表单（可多选）',
+  },
+};
+
+export const MultipleWithOverflow: Story = {
+  args: {
+    items: manyFormItems,
+    multiple: true,
+    defaultValue: ['form_0', 'form_1', 'form_2', 'form_3', 'form_4', 'form_5'],
+    maxVisibleChips: 2,
+    placeholder: '请选择表单（可多选）',
+  },
+};
+
+export const MultipleDisabled: Story = {
+  args: {
+    items: mockFormItems,
+    multiple: true,
+    defaultValue: ['form1', 'form4'],
+    disabled: true,
+    placeholder: '请选择表单（可多选）',
+  },
+};
+
+export const MultipleInteractive: Story = {
+  render: (args) => {
+    const [value, setValue] = useState<string[]>(['form1']);
+    const [selected, setSelected] = useState<FormSelectChangeResult | null>(null);
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+        <FormSelect
+          {...args}
+          multiple
+          value={value}
+          onChange={(result) => {
+            setSelected(result);
+            setValue(result.forms?.map((f) => f.id) ?? []);
+          }}
+        />
+        <div
+          style={{
+            padding: 12,
+            background: '#F5F7FA',
+            borderRadius: 8,
+            fontSize: 14,
+          }}
+        >
+          <div>
+            <strong>已选数量:</strong> {selected?.forms?.length ?? 1}
+          </div>
+          <div>
+            <strong>已选表单:</strong>{' '}
+            {(selected?.forms ?? [])
+              .map((f) => `${f.name}(${f.id})`)
+              .join('、') || 'form1'}
+          </div>
+        </div>
+      </div>
+    );
+  },
+  args: {
+    items: mockFormItems,
+    placeholder: '请选择表单（可多选）',
+  },
+};

package/src/stories/FormulaTag.stories.tsx

@@ -1,68 +1,68 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { FormulaTag } from '../components/formula-tag';
-import { type FormulaOp, FORMULA_OP_LABEL } from '@baishuyun/types';
-
-const meta = {
-  title: 'Example/Chat/FormulaTag',
-  component: FormulaTag,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    type: {
-      control: 'select',
-      options: Object.keys(FORMULA_OP_LABEL) as FormulaOp[],
-      description: '统计方式',
-    },
-  },
-  args: {
-    type: 'sum',
-  },
-} satisfies Meta<typeof FormulaTag>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-/** 求和 – #3767F1 */
-export const Sum: Story = {
-  args: { type: 'sum' },
-};
-
-/** 最大值 – #F06648 */
-export const Max: Story = {
-  args: { type: 'max' },
-};
-
-/** 最小值 – #4ACC8C */
-export const Min: Story = {
-  args: { type: 'min' },
-};
-
-/** 平均 – #4AC0EC */
-export const Average: Story = {
-  args: { type: 'average' },
-};
-
-/** 计数 – #9362CE */
-export const Count: Story = {
-  args: { type: 'count' },
-};
-
-/** 去重计数 – #F168B6 */
-export const CountDistinct: Story = {
-  args: { type: 'countDistinct' },
-};
-
-/** 所有统计方式一览 */
-export const AllTypes: Story = {
-  render: () => (
-    <div className="flex flex-wrap items-center gap-2">
-      {(Object.keys(FORMULA_OP_LABEL) as FormulaOp[]).map((op) => (
-        <FormulaTag key={op} type={op} />
-      ))}
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { FormulaTag } from '../components/formula-tag';
+import { type FormulaOp, FORMULA_OP_LABEL } from '@baishuyun/types';
+
+const meta = {
+  title: 'Example/Chat/FormulaTag',
+  component: FormulaTag,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    type: {
+      control: 'select',
+      options: Object.keys(FORMULA_OP_LABEL) as FormulaOp[],
+      description: '统计方式',
+    },
+  },
+  args: {
+    type: 'sum',
+  },
+} satisfies Meta<typeof FormulaTag>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** 求和 – #3767F1 */
+export const Sum: Story = {
+  args: { type: 'sum' },
+};
+
+/** 最大值 – #F06648 */
+export const Max: Story = {
+  args: { type: 'max' },
+};
+
+/** 最小值 – #4ACC8C */
+export const Min: Story = {
+  args: { type: 'min' },
+};
+
+/** 平均 – #4AC0EC */
+export const Average: Story = {
+  args: { type: 'average' },
+};
+
+/** 计数 – #9362CE */
+export const Count: Story = {
+  args: { type: 'count' },
+};
+
+/** 去重计数 – #F168B6 */
+export const CountDistinct: Story = {
+  args: { type: 'countDistinct' },
+};
+
+/** 所有统计方式一览 */
+export const AllTypes: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-2">
+      {(Object.keys(FORMULA_OP_LABEL) as FormulaOp[]).map((op) => (
+        <FormulaTag key={op} type={op} />
+      ))}
+    </div>
+  ),
+};

package/src/stories/GenerateAnimation.stories.ts

@@ -1,20 +1,20 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { GenerateAnimation } from "../components/generate-animation";
-
-const meta = {
-  title: "Example/Animation/GenerateAnimation",
-  component: GenerateAnimation,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-  },
-  args: {},
-} satisfies Meta<typeof GenerateAnimation>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {},
-};
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { GenerateAnimation } from "../components/generate-animation";
+
+const meta = {
+  title: "Example/Animation/GenerateAnimation",
+  component: GenerateAnimation,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  args: {},
+} satisfies Meta<typeof GenerateAnimation>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};