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

package/src/stories/BsConditionInput.stories.tsx

@@ -1,460 +1,460 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { useState, useCallback } from 'react';
-import { BsConditionInput } from '../components/agent-helper/condition-input';
-import { conditionStringify2bsCondition } from '@baishuyun/ai-feat-utils';
-import type { IField, IFieldValueService, ICondition } from '@baishuyun/types';
-
-const mockService: IFieldValueService = {
-  searchUsers: async (keyword) => {
-    await new Promise((r) => setTimeout(r, 300));
-    const users = [
-      { id: 'user1', name: '张三' },
-      { id: 'user2', name: '李四' },
-      { id: 'user3', name: '王五' },
-    ];
-    return keyword ? users.filter((u) => u.name.includes(keyword)) : users;
-  },
-  searchDepts: async (keyword) => {
-    await new Promise((r) => setTimeout(r, 300));
-    const depts = [
-      { id: 'dept1', name: '技术部' },
-      { id: 'dept2', name: '产品部' },
-      { id: 'dept3', name: '设计部' },
-    ];
-    return keyword ? depts.filter((d) => d.name.includes(keyword)) : depts;
-  },
-  searchUserGroups: async (keyword) => {
-    await new Promise((r) => setTimeout(r, 300));
-    const groups = [
-      { id: 'ug1', name: '管理组' },
-      { id: 'ug2', name: '普通组' },
-    ];
-    return keyword ? groups.filter((g) => g.name.includes(keyword)) : groups;
-  },
-  searchDeptGroups: async (keyword) => {
-    await new Promise((r) => setTimeout(r, 300));
-    const groups = [
-      { id: 'dg1', name: '研发中心' },
-      { id: 'dg2', name: '销售中心' },
-    ];
-    return keyword ? groups.filter((g) => g.name.includes(keyword)) : groups;
-  },
-  searchAddress: async (keyword) => {
-    await new Promise((r) => setTimeout(r, 300));
-    const addresses = [
-      { province: '浙江省', city: '杭州市', district: '西湖区' },
-      { province: '北京市', city: '北京市', district: '朝阳区' },
-    ];
-    return keyword
-      ? addresses.filter(
-          (a) =>
-            a.province.includes(keyword) ||
-            a.city.includes(keyword) ||
-            a.district.includes(keyword),
-        )
-      : addresses;
-  },
-  searchLocation: async (keyword) => {
-    await new Promise((r) => setTimeout(r, 300));
-    return [
-      {
-        province: '浙江省',
-        city: '杭州市',
-        district: '西湖区',
-        detail: '文三路 123 号',
-        lnglatXY: [120.15, 30.28] as [number, number],
-      },
-      {
-        province: '北京市',
-        city: '北京市',
-        district: '朝阳区',
-        detail: '望京 SOHO',
-        lnglatXY: [116.48, 39.99] as [number, number],
-      },
-    ].filter((l) => !keyword || l.detail.includes(keyword));
-  },
-  searchDistinctValues: async (_field, keyword) => {
-    await new Promise((r) => setTimeout(r, 300));
-    const values = [
-      { label: '苹果', value: 'apple' },
-      { label: '香蕉', value: 'banana' },
-      { label: '橙子', value: 'orange' },
-      { label: '葡萄', value: 'grape' },
-    ];
-    return keyword ? values.filter((v) => v.label.includes(keyword)) : values;
-  },
-};
-
-const mockFields: IField[] = [
-  {
-    label: '姓名',
-    description: '请输入姓名',
-    widget: { type: 'text', widgetName: 'text', value: '' },
-  },
-  {
-    label: '年龄',
-    description: '请输入年龄',
-    widget: { type: 'number', widgetName: 'number', value: '' },
-  },
-  {
-    label: '出生日期',
-    description: '请选择出生日期',
-    widget: { type: 'datetime', widgetName: 'datetime', value: '' },
-  },
-  {
-    label: '备注',
-    description: '请输入备注',
-    widget: { type: 'textarea', widgetName: 'textarea', value: '' },
-  },
-  {
-    label: '性别',
-    widget: {
-      type: 'radiogroup',
-      widgetName: 'radiogroup',
-      value: '',
-      items: [
-        { label: '男', value: 'male' },
-        { label: '女', value: 'female' },
-      ],
-    },
-  },
-  {
-    label: '所在城市',
-    widget: {
-      type: 'combo',
-      widgetName: 'combo',
-      value: '',
-      items: [
-        { label: '北京', value: 'beijing' },
-        { label: '上海', value: 'shanghai' },
-        { label: '广州', value: 'guangzhou' },
-      ],
-    },
-  },
-  {
-    label: '兴趣爱好',
-    widget: {
-      type: 'checkboxgroup',
-      widgetName: 'checkboxgroup',
-      value: [],
-      items: [
-        { label: '阅读', value: 'reading' },
-        { label: '运动', value: 'sports' },
-        { label: '音乐', value: 'music' },
-      ],
-    },
-  },
-  {
-    label: '附件上传',
-    widget: { type: 'upload', widgetName: 'upload', value: '' },
-  },
-  {
-    label: '负责人',
-    widget: { type: 'user', widgetName: 'user', value: '' },
-  },
-  {
-    label: '所属部门',
-    widget: { type: 'dept', widgetName: 'dept', value: '' },
-  },
-  {
-    label: '密码',
-    widget: { type: 'password', widgetName: 'password', value: '' },
-  },
-  {
-    label: '性别(单选)',
-    widget: {
-      type: 'radio',
-      widgetName: 'radio',
-      value: '',
-      items: [
-        { label: '男', value: 'male' },
-        { label: '女', value: 'female' },
-      ],
-    },
-  },
-  {
-    label: '下拉多选',
-    widget: {
-      type: 'combocheck',
-      widgetName: 'combocheck',
-      value: [],
-      items: [
-        { label: '选项A', value: 'a' },
-        { label: '选项B', value: 'b' },
-        { label: '选项C', value: 'c' },
-      ],
-    },
-  },
-  {
-    label: '地址',
-    widget: { type: 'address', widgetName: 'address', value: {} },
-  },
-  {
-    label: '位置',
-    widget: { type: 'location', widgetName: 'location', value: {} },
-  },
-  {
-    label: '流水号',
-    widget: { type: 'sn', widgetName: 'sn', value: '' },
-  },
-  {
-    label: '用户组',
-    widget: { type: 'usergroup', widgetName: 'usergroup', value: '' },
-  },
-  {
-    label: '部门组',
-    widget: { type: 'deptgroup', widgetName: 'deptgroup', value: '' },
-  },
-  {
-    label: '图片',
-    widget: { type: 'image', widgetName: 'image', value: '' },
-  },
-  {
-    label: '联动数据',
-    widget: { type: 'linkdata', widgetName: 'linkdata', value: '' },
-  },
-  {
-    label: '流程状态',
-    widget: { type: 'flowState', widgetName: 'flowState', value: '' },
-  },
-  {
-    label: '签名',
-    widget: { type: 'signature', widgetName: 'signature', value: '' },
-  },
-];
-
-function makeBSString(cond: ICondition): string {
-  return conditionStringify2bsCondition(cond);
-}
-
-const meta: Meta<typeof BsConditionInput> = {
-  title: 'Agent Helper/BsConditionInput',
-  component: BsConditionInput,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-  },
-  args: {
-    targetName: '流程结束 或 流程节点',
-    fields: mockFields,
-    disabled: false,
-  },
-  decorators: [
-    (Story) => (
-      <div style={{ width: '960px' }}>
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Empty: Story = {
-  args: {
-    targetName: '流程结束 或 流程节点',
-    fields: mockFields,
-  },
-};
-
-export const WithConditions: Story = {
-  args: {
-    targetName: '流程结束 或 流程节点',
-    fields: mockFields,
-    defaultValue: makeBSString({
-      targetName: '流程结束 或 流程节点',
-      quantifier: 'all',
-      items: [
-        {
-          id: 'item-1',
-          field: mockFields[0],
-          operator: 'contains',
-          value: '张三',
-        },
-        {
-          id: 'item-2',
-          field: mockFields[1],
-          operator: 'gte',
-          value: 18,
-        },
-      ],
-    }),
-  },
-};
-
-export const WithDeleteAll: Story = {
-  args: {
-    targetName: '流程结束 或 流程节点',
-    fields: mockFields,
-    defaultValue: makeBSString({
-      targetName: '流程结束 或 流程节点',
-      quantifier: 'any',
-      items: [
-        {
-          id: 'item-1',
-          field: mockFields[0],
-          operator: 'contains',
-          value: '张三',
-        },
-        {
-          id: 'item-2',
-          field: mockFields[1],
-          operator: 'gte',
-          value: 18,
-        },
-        {
-          id: 'item-3',
-          field: mockFields[5],
-          operator: 'in',
-          value: ['beijing', 'shanghai'],
-        },
-        {
-          id: 'item-4',
-          field: mockFields[2],
-          operator: 'range',
-          value: undefined,
-        },
-      ],
-    }),
-  },
-};
-
-export const Controlled: Story = {
-  render: () => {
-    const [bsString, setBsString] = useState<string>(
-      makeBSString({
-        targetName: '流程结束 或 流程节点',
-        quantifier: 'all',
-        items: [
-          {
-            id: 'item-1',
-            field: mockFields[0],
-            operator: 'contains',
-            value: '张三',
-          },
-          {
-            id: 'item-2',
-            field: mockFields[1],
-            operator: 'gte',
-            value: 18,
-          },
-        ],
-      }),
-    );
-
-    const handleChange = useCallback((newBS: string) => {
-      setBsString(newBS);
-    }, []);
-
-    return (
-      <div className="flex flex-col gap-[16px]">
-        <BsConditionInput
-          targetName="流程结束 或 流程节点"
-          fields={mockFields}
-          value={bsString}
-          onChange={handleChange}
-        />
-        <div className="text-[12px] text-[#666666] bg-[#F5F5F5] rounded-[4px] p-[8px] font-mono">
-          <pre>{bsString}</pre>
-        </div>
-      </div>
-    );
-  },
-};
-
-export const RangeOperators: Story = {
-  args: {
-    targetName: '流程结束',
-    fields: mockFields,
-    service: mockService,
-    defaultValue: makeBSString({
-      targetName: '流程结束',
-      quantifier: 'all',
-      items: [
-        {
-          id: 'range-1',
-          field: mockFields[1],
-          operator: 'range',
-          value: { min: 18, max: 60 },
-        },
-        {
-          id: 'range-2',
-          field: mockFields[2],
-          operator: 'range',
-          value: { min: '2020-01-01T00:00', max: '2025-12-31T23:59' },
-        },
-      ],
-    }),
-  },
-};
-
-export const MixedOperators: Story = {
-  args: {
-    targetName: '表单数据',
-    fields: mockFields,
-    service: mockService,
-    defaultValue: makeBSString({
-      targetName: '表单数据',
-      quantifier: 'all',
-      items: [
-        {
-          id: 'mixed-1',
-          field: mockFields[0],
-          operator: 'contains',
-          value: '张',
-        },
-        {
-          id: 'mixed-2',
-          field: mockFields[1],
-          operator: 'range',
-          value: { min: 0, max: 100 },
-        },
-        {
-          id: 'mixed-3',
-          field: mockFields[2],
-          operator: 'range',
-          value: { min: '2025-01-01T00:00', max: '2025-06-30T23:59' },
-        },
-        {
-          id: 'mixed-4',
-          field: mockFields[0],
-          operator: 'in',
-          value: ['orange', 'grape'],
-        },
-      ],
-    }),
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    targetName: '流程结束 或 流程节点',
-    fields: mockFields,
-    disabled: true,
-    defaultValue: makeBSString({
-      targetName: '流程结束 或 流程节点',
-      quantifier: 'all',
-      items: [
-        {
-          id: 'item-1',
-          field: mockFields[0],
-          operator: 'contains',
-          value: '张三',
-        },
-        {
-          id: 'item-2',
-          field: mockFields[1],
-          operator: 'gte',
-          value: 18,
-        },
-        {
-          id: 'item-3',
-          field: mockFields[5],
-          operator: 'in',
-          value: ['beijing', 'shanghai'],
-        },
-      ],
-    }),
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState, useCallback } from 'react';
+import { BsConditionInput } from '../components/agent-helper/condition-input';
+import { conditionStringify2bsCondition } from '@baishuyun/ai-feat-utils';
+import type { IField, IFieldValueService, ICondition } from '@baishuyun/types';
+
+const mockService: IFieldValueService = {
+  searchUsers: async (keyword) => {
+    await new Promise((r) => setTimeout(r, 300));
+    const users = [
+      { id: 'user1', name: '张三' },
+      { id: 'user2', name: '李四' },
+      { id: 'user3', name: '王五' },
+    ];
+    return keyword ? users.filter((u) => u.name.includes(keyword)) : users;
+  },
+  searchDepts: async (keyword) => {
+    await new Promise((r) => setTimeout(r, 300));
+    const depts = [
+      { id: 'dept1', name: '技术部' },
+      { id: 'dept2', name: '产品部' },
+      { id: 'dept3', name: '设计部' },
+    ];
+    return keyword ? depts.filter((d) => d.name.includes(keyword)) : depts;
+  },
+  searchUserGroups: async (keyword) => {
+    await new Promise((r) => setTimeout(r, 300));
+    const groups = [
+      { id: 'ug1', name: '管理组' },
+      { id: 'ug2', name: '普通组' },
+    ];
+    return keyword ? groups.filter((g) => g.name.includes(keyword)) : groups;
+  },
+  searchDeptGroups: async (keyword) => {
+    await new Promise((r) => setTimeout(r, 300));
+    const groups = [
+      { id: 'dg1', name: '研发中心' },
+      { id: 'dg2', name: '销售中心' },
+    ];
+    return keyword ? groups.filter((g) => g.name.includes(keyword)) : groups;
+  },
+  searchAddress: async (keyword) => {
+    await new Promise((r) => setTimeout(r, 300));
+    const addresses = [
+      { province: '浙江省', city: '杭州市', district: '西湖区' },
+      { province: '北京市', city: '北京市', district: '朝阳区' },
+    ];
+    return keyword
+      ? addresses.filter(
+          (a) =>
+            a.province.includes(keyword) ||
+            a.city.includes(keyword) ||
+            a.district.includes(keyword),
+        )
+      : addresses;
+  },
+  searchLocation: async (keyword) => {
+    await new Promise((r) => setTimeout(r, 300));
+    return [
+      {
+        province: '浙江省',
+        city: '杭州市',
+        district: '西湖区',
+        detail: '文三路 123 号',
+        lnglatXY: [120.15, 30.28] as [number, number],
+      },
+      {
+        province: '北京市',
+        city: '北京市',
+        district: '朝阳区',
+        detail: '望京 SOHO',
+        lnglatXY: [116.48, 39.99] as [number, number],
+      },
+    ].filter((l) => !keyword || l.detail.includes(keyword));
+  },
+  searchDistinctValues: async (_field, keyword) => {
+    await new Promise((r) => setTimeout(r, 300));
+    const values = [
+      { label: '苹果', value: 'apple' },
+      { label: '香蕉', value: 'banana' },
+      { label: '橙子', value: 'orange' },
+      { label: '葡萄', value: 'grape' },
+    ];
+    return keyword ? values.filter((v) => v.label.includes(keyword)) : values;
+  },
+};
+
+const mockFields: IField[] = [
+  {
+    label: '姓名',
+    description: '请输入姓名',
+    widget: { type: 'text', widgetName: 'text', value: '' },
+  },
+  {
+    label: '年龄',
+    description: '请输入年龄',
+    widget: { type: 'number', widgetName: 'number', value: '' },
+  },
+  {
+    label: '出生日期',
+    description: '请选择出生日期',
+    widget: { type: 'datetime', widgetName: 'datetime', value: '' },
+  },
+  {
+    label: '备注',
+    description: '请输入备注',
+    widget: { type: 'textarea', widgetName: 'textarea', value: '' },
+  },
+  {
+    label: '性别',
+    widget: {
+      type: 'radiogroup',
+      widgetName: 'radiogroup',
+      value: '',
+      items: [
+        { label: '男', value: 'male' },
+        { label: '女', value: 'female' },
+      ],
+    },
+  },
+  {
+    label: '所在城市',
+    widget: {
+      type: 'combo',
+      widgetName: 'combo',
+      value: '',
+      items: [
+        { label: '北京', value: 'beijing' },
+        { label: '上海', value: 'shanghai' },
+        { label: '广州', value: 'guangzhou' },
+      ],
+    },
+  },
+  {
+    label: '兴趣爱好',
+    widget: {
+      type: 'checkboxgroup',
+      widgetName: 'checkboxgroup',
+      value: [],
+      items: [
+        { label: '阅读', value: 'reading' },
+        { label: '运动', value: 'sports' },
+        { label: '音乐', value: 'music' },
+      ],
+    },
+  },
+  {
+    label: '附件上传',
+    widget: { type: 'upload', widgetName: 'upload', value: '' },
+  },
+  {
+    label: '负责人',
+    widget: { type: 'user', widgetName: 'user', value: '' },
+  },
+  {
+    label: '所属部门',
+    widget: { type: 'dept', widgetName: 'dept', value: '' },
+  },
+  {
+    label: '密码',
+    widget: { type: 'password', widgetName: 'password', value: '' },
+  },
+  {
+    label: '性别(单选)',
+    widget: {
+      type: 'radio',
+      widgetName: 'radio',
+      value: '',
+      items: [
+        { label: '男', value: 'male' },
+        { label: '女', value: 'female' },
+      ],
+    },
+  },
+  {
+    label: '下拉多选',
+    widget: {
+      type: 'combocheck',
+      widgetName: 'combocheck',
+      value: [],
+      items: [
+        { label: '选项A', value: 'a' },
+        { label: '选项B', value: 'b' },
+        { label: '选项C', value: 'c' },
+      ],
+    },
+  },
+  {
+    label: '地址',
+    widget: { type: 'address', widgetName: 'address', value: {} },
+  },
+  {
+    label: '位置',
+    widget: { type: 'location', widgetName: 'location', value: {} },
+  },
+  {
+    label: '流水号',
+    widget: { type: 'sn', widgetName: 'sn', value: '' },
+  },
+  {
+    label: '用户组',
+    widget: { type: 'usergroup', widgetName: 'usergroup', value: '' },
+  },
+  {
+    label: '部门组',
+    widget: { type: 'deptgroup', widgetName: 'deptgroup', value: '' },
+  },
+  {
+    label: '图片',
+    widget: { type: 'image', widgetName: 'image', value: '' },
+  },
+  {
+    label: '联动数据',
+    widget: { type: 'linkdata', widgetName: 'linkdata', value: '' },
+  },
+  {
+    label: '流程状态',
+    widget: { type: 'flowState', widgetName: 'flowState', value: '' },
+  },
+  {
+    label: '签名',
+    widget: { type: 'signature', widgetName: 'signature', value: '' },
+  },
+];
+
+function makeBSString(cond: ICondition): string {
+  return conditionStringify2bsCondition(cond);
+}
+
+const meta: Meta<typeof BsConditionInput> = {
+  title: 'Agent Helper/BsConditionInput',
+  component: BsConditionInput,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    targetName: '流程结束 或 流程节点',
+    fields: mockFields,
+    disabled: false,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '960px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Empty: Story = {
+  args: {
+    targetName: '流程结束 或 流程节点',
+    fields: mockFields,
+  },
+};
+
+export const WithConditions: Story = {
+  args: {
+    targetName: '流程结束 或 流程节点',
+    fields: mockFields,
+    defaultValue: makeBSString({
+      targetName: '流程结束 或 流程节点',
+      quantifier: 'all',
+      items: [
+        {
+          id: 'item-1',
+          field: mockFields[0],
+          operator: 'contains',
+          value: '张三',
+        },
+        {
+          id: 'item-2',
+          field: mockFields[1],
+          operator: 'gte',
+          value: 18,
+        },
+      ],
+    }),
+  },
+};
+
+export const WithDeleteAll: Story = {
+  args: {
+    targetName: '流程结束 或 流程节点',
+    fields: mockFields,
+    defaultValue: makeBSString({
+      targetName: '流程结束 或 流程节点',
+      quantifier: 'any',
+      items: [
+        {
+          id: 'item-1',
+          field: mockFields[0],
+          operator: 'contains',
+          value: '张三',
+        },
+        {
+          id: 'item-2',
+          field: mockFields[1],
+          operator: 'gte',
+          value: 18,
+        },
+        {
+          id: 'item-3',
+          field: mockFields[5],
+          operator: 'in',
+          value: ['beijing', 'shanghai'],
+        },
+        {
+          id: 'item-4',
+          field: mockFields[2],
+          operator: 'range',
+          value: undefined,
+        },
+      ],
+    }),
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [bsString, setBsString] = useState<string>(
+      makeBSString({
+        targetName: '流程结束 或 流程节点',
+        quantifier: 'all',
+        items: [
+          {
+            id: 'item-1',
+            field: mockFields[0],
+            operator: 'contains',
+            value: '张三',
+          },
+          {
+            id: 'item-2',
+            field: mockFields[1],
+            operator: 'gte',
+            value: 18,
+          },
+        ],
+      }),
+    );
+
+    const handleChange = useCallback((newBS: string) => {
+      setBsString(newBS);
+    }, []);
+
+    return (
+      <div className="flex flex-col gap-[16px]">
+        <BsConditionInput
+          targetName="流程结束 或 流程节点"
+          fields={mockFields}
+          value={bsString}
+          onChange={handleChange}
+        />
+        <div className="text-[12px] text-[#666666] bg-[#F5F5F5] rounded-[4px] p-[8px] font-mono">
+          <pre>{bsString}</pre>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const RangeOperators: Story = {
+  args: {
+    targetName: '流程结束',
+    fields: mockFields,
+    service: mockService,
+    defaultValue: makeBSString({
+      targetName: '流程结束',
+      quantifier: 'all',
+      items: [
+        {
+          id: 'range-1',
+          field: mockFields[1],
+          operator: 'range',
+          value: { min: 18, max: 60 },
+        },
+        {
+          id: 'range-2',
+          field: mockFields[2],
+          operator: 'range',
+          value: { min: '2020-01-01T00:00', max: '2025-12-31T23:59' },
+        },
+      ],
+    }),
+  },
+};
+
+export const MixedOperators: Story = {
+  args: {
+    targetName: '表单数据',
+    fields: mockFields,
+    service: mockService,
+    defaultValue: makeBSString({
+      targetName: '表单数据',
+      quantifier: 'all',
+      items: [
+        {
+          id: 'mixed-1',
+          field: mockFields[0],
+          operator: 'contains',
+          value: '张',
+        },
+        {
+          id: 'mixed-2',
+          field: mockFields[1],
+          operator: 'range',
+          value: { min: 0, max: 100 },
+        },
+        {
+          id: 'mixed-3',
+          field: mockFields[2],
+          operator: 'range',
+          value: { min: '2025-01-01T00:00', max: '2025-06-30T23:59' },
+        },
+        {
+          id: 'mixed-4',
+          field: mockFields[0],
+          operator: 'in',
+          value: ['orange', 'grape'],
+        },
+      ],
+    }),
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    targetName: '流程结束 或 流程节点',
+    fields: mockFields,
+    disabled: true,
+    defaultValue: makeBSString({
+      targetName: '流程结束 或 流程节点',
+      quantifier: 'all',
+      items: [
+        {
+          id: 'item-1',
+          field: mockFields[0],
+          operator: 'contains',
+          value: '张三',
+        },
+        {
+          id: 'item-2',
+          field: mockFields[1],
+          operator: 'gte',
+          value: 18,
+        },
+        {
+          id: 'item-3',
+          field: mockFields[5],
+          operator: 'in',
+          value: ['beijing', 'shanghai'],
+        },
+      ],
+    }),
+  },
+};