@baishuyun/ai-design 1.0.2 → 1.0.4

package/src/stories/ConditionInput.stories.tsx

@@ -0,0 +1,502 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState, useCallback } from 'react';
+import { ConditionInput } from '../components/agent-helper/condition-input';
+import type { IField, ICondition, IFieldValueService } 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: '' },
+  },
+];
+
+const meta: Meta<typeof ConditionInput> = {
+  title: 'Agent Helper/ConditionInput',
+  component: ConditionInput,
+  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: {
+      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: {
+      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 [condition, setCondition] = useState<ICondition>({
+      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((newCondition: ICondition) => {
+      setCondition(newCondition);
+    }, []);
+
+    return (
+      <div className="flex flex-col gap-[16px]">
+        <ConditionInput
+          targetName="流程结束 或 流程节点"
+          fields={mockFields}
+          value={condition}
+          onChange={handleChange}
+        />
+        <div className="text-[12px] text-[#666666] bg-[#F5F5F5] rounded-[4px] p-[8px] font-mono">
+          <pre>{JSON.stringify(condition, null, 2)}</pre>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const RangeOperators: Story = {
+  args: {
+    targetName: '流程结束',
+    fields: mockFields,
+    service: mockService,
+    defaultValue: {
+      targetName: '流程结束',
+      quantifier: 'all',
+      items: [
+        {
+          id: 'range-1',
+          field: mockFields[1], // number: 年龄
+          operator: 'range',
+          value: { min: 18, max: 60 },
+        },
+        {
+          id: 'range-2',
+          field: mockFields[2], // datetime: 出生日期
+          operator: 'range',
+          value: { min: '2020-01-01T00:00', max: '2025-12-31T23:59' },
+        },
+      ],
+    },
+  },
+};
+
+export const MultiSelectOperators: Story = {
+  args: {
+    targetName: '流程结束',
+    fields: mockFields,
+    service: mockService,
+    defaultValue: {
+      targetName: '流程结束',
+      quantifier: 'any',
+      items: [
+        {
+          id: 'ms-1',
+          field: mockFields[0], // text: 姓名 (in operator → TextMultiSelect)
+          operator: 'in',
+          value: ['apple', 'banana'],
+        },
+        {
+          id: 'ms-2',
+          field: mockFields[8], // user: 负责人 (in operator → AsyncPicker multiple)
+          operator: 'in',
+          value: ['user1', 'user2'],
+        },
+        {
+          id: 'ms-3',
+          field: mockFields[9], // dept: 所属部门 (nin operator → AsyncPicker multiple)
+          operator: 'nin',
+          value: ['dept1'],
+        },
+      ],
+    },
+  },
+};
+
+export const MixedOperators: Story = {
+  args: {
+    targetName: '表单数据',
+    fields: mockFields,
+    service: mockService,
+    defaultValue: {
+      targetName: '表单数据',
+      quantifier: 'all',
+      items: [
+        {
+          id: 'mixed-1',
+          field: mockFields[0], // text: contains
+          operator: 'contains',
+          value: '张',
+        },
+        {
+          id: 'mixed-2',
+          field: mockFields[1], // number: range → RangeNumberInput
+          operator: 'range',
+          value: { min: 0, max: 100 },
+        },
+        {
+          id: 'mixed-3',
+          field: mockFields[2], // datetime: range → RangeDateTimeInput
+          operator: 'range',
+          value: { min: '2025-01-01T00:00', max: '2025-06-30T23:59' },
+        },
+        {
+          id: 'mixed-4',
+          field: mockFields[0], // text: in → TextMultiSelect
+          operator: 'in',
+          value: ['orange', 'grape'],
+        },
+      ],
+    },
+  },
+};
+
+export const AllFieldTypes: Story = {
+  args: {
+    targetName: '表单',
+    fields: mockFields,
+    service: mockService,
+    defaultValue: {
+      targetName: '表单',
+      quantifier: 'all',
+      items: [
+        { id: 'f-text', field: mockFields[0], operator: 'contains', value: '张' },
+        { id: 'f-number', field: mockFields[1], operator: 'range', value: { min: 18, max: 65 } },
+        { id: 'f-datetime', field: mockFields[2], operator: 'range', value: { min: '2025-01-01T00:00', max: '2025-12-31T23:59' } },
+        { id: 'f-textarea', field: mockFields[3], operator: 'contains', value: '关键词' },
+        { id: 'f-radiogroup', field: mockFields[4], operator: 'eq', value: 'male' },
+        { id: 'f-combo', field: mockFields[5], operator: 'in', value: ['beijing', 'shanghai'] },
+        { id: 'f-checkboxgroup', field: mockFields[6], operator: 'all', value: ['reading', 'sports'] },
+        { id: 'f-upload', field: mockFields[7], operator: 'not_empty', value: undefined },
+        { id: 'f-user', field: mockFields[8], operator: 'in', value: ['user1', 'user2'] },
+        { id: 'f-dept', field: mockFields[9], operator: 'nin', value: ['dept3'] },
+        { id: 'f-password', field: mockFields[10], operator: 'eq', value: 'secret' },
+        { id: 'f-radio', field: mockFields[11], operator: 'neq', value: 'female' },
+        { id: 'f-combocheck', field: mockFields[12], operator: 'all', value: ['a', 'b'] },
+        { id: 'f-address', field: mockFields[13], operator: 'eq', value: { province: '浙江省', city: '杭州市', district: '西湖区' } },
+        { id: 'f-location', field: mockFields[14], operator: 'eq', value: { province: '北京市', city: '北京市', district: '朝阳区' } },
+        { id: 'f-sn', field: mockFields[15], operator: 'in', value: ['SN001', 'SN002'] },
+        { id: 'f-usergroup', field: mockFields[16], operator: 'in', value: ['ug1'] },
+        { id: 'f-deptgroup', field: mockFields[17], operator: 'all', value: ['dg1'] },
+        { id: 'f-image', field: mockFields[18], operator: 'not_empty', value: undefined },
+        { id: 'f-linkdata', field: mockFields[19], operator: 'eq', value: 'a' },
+        { id: 'f-flowstate', field: mockFields[20], operator: 'eq', value: 'active' },
+        { id: 'f-signature', field: mockFields[21], operator: 'empty', value: undefined },
+      ],
+    },
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    targetName: '流程结束 或 流程节点',
+    fields: mockFields,
+    disabled: true,
+    defaultValue: {
+      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'],
+        },
+      ],
+    },
+  },
+};

package/src/stories/ConditionItem.stories.tsx

@@ -0,0 +1,163 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState, useCallback } from 'react';
+import { ConditionItem } from '../components/agent-helper/condition-item';
+import type { IField, IConditionItem } from '@baishuyun/types';
+
+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: '' },
+  },
+];
+
+const meta: Meta<typeof ConditionItem> = {
+  title: 'Agent Helper/ConditionItem',
+  component: ConditionItem,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    fields: mockFields,
+    disabled: false,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '720px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    fields: mockFields,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    fields: mockFields,
+    disabled: true,
+  },
+};
+
+export const WithRemove: Story = {
+  args: {
+    fields: mockFields,
+    onRemoveClick: () => alert('删除'),
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [item, setItem] = useState<IConditionItem | undefined>();
+
+    const handleChange = useCallback((newItem: IConditionItem) => {
+      setItem(newItem);
+    }, []);
+
+    return (
+      <div className="flex flex-col gap-[16px]">
+        <ConditionItem
+          fields={mockFields}
+          value={item}
+          onChange={handleChange}
+        />
+        <div className="text-[12px] text-[#666666] bg-[#F5F5F5] rounded-[4px] p-[8px] font-mono">
+          {item ? (
+            <pre>{JSON.stringify(item, null, 2)}</pre>
+          ) : (
+            <span>未选择条件</span>
+          )}
+        </div>
+      </div>
+    );
+  },
+};
+
+export const WithInitialValue: Story = {
+  args: {
+    fields: mockFields,
+    defaultValue: {
+      id: 'demo-item-1',
+      field: mockFields[0],
+      operator: 'contains',
+      value: '张三',
+    },
+  },
+};
+
+export const FileFieldType: Story = {
+  args: {
+    fields: mockFields,
+    defaultValue: {
+      id: 'demo-file',
+      field: mockFields[7],
+      operator: 'not_empty',
+      value: undefined,
+    },
+  },
+};