@baishuyun/ai-design 1.0.2 → 1.0.4

package/src/stories/FieldValueInput.stories.tsx

@@ -0,0 +1,442 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import type { FieldType, IField, IFieldValueService } from '@baishuyun/types';
+
+import { FieldValueInput } from '../components/agent-helper/field-value-input';
+
+// ── Mock Service ────────────────────────────────────────────────────
+
+const mockService: IFieldValueService = {
+  searchUsers: async (keyword) => {
+    await new Promise((r) => setTimeout(r, 500));
+    const users = [
+      { id: 'user1', name: '张三', avatar: '' },
+      { id: 'user2', name: '李四', avatar: '' },
+      { id: 'user3', name: '王五', avatar: '' },
+    ];
+    return keyword
+      ? users.filter((u) => u.name.includes(keyword))
+      : users;
+  },
+  searchDepts: async (keyword) => {
+    await new Promise((r) => setTimeout(r, 500));
+    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));
+    return keyword ? [{ id: 'g1', name: `组-${keyword}` }] : [{ id: 'g1', name: '管理组' }, { id: 'g2', name: '普通组' }];
+  },
+  searchDeptGroups: async (keyword) => {
+    await new Promise((r) => setTimeout(r, 300));
+    return keyword ? [{ id: 'dg1', name: `部门组-${keyword}` }] : [{ id: 'dg1', name: '研发中心' }];
+  },
+  uploadFile: async (_file) => {
+    await new Promise((r) => setTimeout(r, 800));
+    return { url: 'https://example.com/file.png', name: _file.name };
+  },
+  fetchLinkData: async () => {
+    await new Promise((r) => setTimeout(r, 500));
+    return [
+      { label: '选项A', value: 'a' },
+      { label: '选项B', value: 'b' },
+      { label: '选项C', value: 'c' },
+    ];
+  },
+  searchAddress: async (keyword) => {
+    await new Promise((r) => setTimeout(r, 300));
+    const addresses = [
+      { province: '浙江省', city: '杭州市', district: '西湖区' },
+      { 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, 400));
+    const values = [
+      { label: '苹果', value: 'apple' },
+      { label: '香蕉', value: 'banana' },
+      { label: '橙子', value: 'orange' },
+      { label: '葡萄', value: 'grape' },
+      { label: '西瓜', value: 'watermelon' },
+      { label: '草莓', value: 'strawberry' },
+    ];
+    return keyword
+      ? values.filter((v) => v.label.includes(keyword))
+      : values;
+  },
+};
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
+  <div className="w-[360px] p-[16px]">{children}</div>
+);
+
+// ── Field factory ───────────────────────────────────────────────────
+
+function makeField(
+  type: FieldType,
+  overrides?: Partial<IField>,
+): IField {
+  return {
+    label: '示例字段',
+    widget: {
+      type: type as never,
+      widgetName: 'example_field',
+      value: '',
+      items: [
+        { label: '选项一', value: '1' },
+        { label: '选项二', value: '2' },
+        { label: '选项三', value: '3' },
+      ],
+      ...overrides?.widget,
+    },
+    ...overrides,
+  } as IField;
+}
+
+// ── Meta ────────────────────────────────────────────────────────────
+
+const meta: Meta<typeof FieldValueInput> = {
+  title: 'Agent Helper/FieldValueInput',
+  component: FieldValueInput,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  decorators: [(Story) => <Wrapper><Story /></Wrapper>],
+};
+
+export default meta;
+type Story = StoryObj<typeof FieldValueInput>;
+
+// ── Basic Inputs ────────────────────────────────────────────────────
+
+export const Text: Story = {
+  args: {
+    field: makeField('text', { label: '名称' }),
+  },
+};
+
+export const TextRequired: Story = {
+  args: {
+    field: makeField('text', { label: '名称', widget: { type: 'text', widgetName: 'name', value: '', allowBlank: false } }),
+  },
+};
+
+export const TextWithDescription: Story = {
+  args: {
+    field: makeField('text', { label: '名称', description: '请输入您的姓名' }),
+  },
+};
+
+export const TextDisabled: Story = {
+  args: {
+    field: makeField('text', { label: '名称' }),
+    value: '不可编辑的文本',
+    disabled: true,
+  },
+};
+
+export const NumberInput: Story = {
+  args: {
+    field: makeField('number', { label: '数量' }),
+  },
+};
+
+export const NumberWithValue: Story = {
+  args: {
+    field: makeField('number', { label: '数量' }),
+    value: 42,
+  },
+};
+
+export const Textarea: Story = {
+  args: {
+    field: makeField('textarea', { label: '备注' }),
+  },
+};
+
+export const Password: Story = {
+  args: {
+    field: makeField('password', { label: '密码' }),
+  },
+};
+
+// ── Selection Inputs ────────────────────────────────────────────────
+
+export const Combo: Story = {
+  args: {
+    field: makeField('combo', { label: '下拉选择' }),
+  },
+};
+
+export const LinkData: Story = {
+  args: {
+    field: makeField('linkdata', { label: '联动数据' }),
+    service: mockService,
+  },
+};
+
+export const CheckboxGroup: Story = {
+  args: {
+    field: makeField('checkboxgroup', { label: '多选框组' }),
+  },
+};
+
+export const Combocheck: Story = {
+  args: {
+    field: makeField('combocheck', { label: '下拉多选' }),
+  },
+};
+
+export const RadioGroup: Story = {
+  args: {
+    field: makeField('radiogroup', { label: '单选组' }),
+  },
+};
+
+export const DateTime: Story = {
+  args: {
+    field: makeField('datetime', { label: '日期时间' }),
+  },
+};
+
+// ── Async Pickers ───────────────────────────────────────────────────
+
+export const UserPicker: Story = {
+  args: {
+    field: makeField('user', { label: '负责人' }),
+    service: mockService,
+  },
+};
+
+export const DeptPicker: Story = {
+  args: {
+    field: makeField('dept', { label: '所属部门' }),
+    service: mockService,
+  },
+};
+
+export const UserGroupPicker: Story = {
+  args: {
+    field: makeField('usergroup', { label: '用户组' }),
+    service: mockService,
+  },
+};
+
+export const DeptGroupPicker: Story = {
+  args: {
+    field: makeField('deptgroup', { label: '部门组' }),
+    service: mockService,
+  },
+};
+
+// ── File & Media ────────────────────────────────────────────────────
+
+export const Upload: Story = {
+  args: {
+    field: makeField('upload', { label: '附件' }),
+    service: mockService,
+  },
+};
+
+export const Image: Story = {
+  args: {
+    field: makeField('image', { label: '图片' }),
+    service: mockService,
+  },
+};
+
+// ── Address & Location (cascading province/city/district) ────────────
+
+export const Address: Story = {
+  args: {
+    field: makeField('address', { label: '地址' }),
+  },
+};
+
+export const AddressWithValue: Story = {
+  args: {
+    field: makeField('address', { label: '地址' }),
+    value: { province: '浙江省', city: '杭州市', district: '西湖区' },
+  },
+};
+
+export const Location_: Story = {
+  args: {
+    field: makeField('location', { label: '位置' }),
+  },
+};
+
+export const LocationWithValue: Story = {
+  args: {
+    field: makeField('location', { label: '位置' }),
+    value: { province: '北京市', city: '北京市', district: '朝阳区' },
+  },
+};
+
+// ── Display ─────────────────────────────────────────────────────────
+
+export const Separator: Story = {
+  args: {
+    field: makeField('separator', { label: '分割线标题' }),
+  },
+};
+
+export const SerialNumber: Story = {
+  args: {
+    field: makeField('sn', { label: '流水号' }),
+  },
+};
+
+export const Button: Story = {
+  args: {
+    field: makeField('button', { label: '提交' }),
+  },
+};
+
+export const Subform: Story = {
+  args: {
+    field: makeField('subform', { label: '子表单' }),
+  },
+};
+
+// ── Operator-aware: Range Inputs ─────────────────────────────────────
+
+export const RangeNumber: Story = {
+  args: {
+    field: makeField('number', { label: '金额' }),
+    operator: 'range',
+    value: { min: 10, max: 100 },
+  },
+};
+
+export const RangeDateTime: Story = {
+  args: {
+    field: makeField('datetime', { label: '日期范围' }),
+    operator: 'range',
+    value: { min: '2025-01-01T00:00', max: '2025-12-31T23:59' },
+  },
+};
+
+// ── Operator-aware: Text Multi-select ────────────────────────────────
+
+export const TextMultiSelectIn: Story = {
+  args: {
+    field: makeField('text', { label: '水果选择' }),
+    operator: 'in',
+    service: mockService,
+    value: ['apple', 'banana'],
+  },
+};
+
+export const TextMultiSelectNin: Story = {
+  args: {
+    field: makeField('text', { label: '排除项' }),
+    operator: 'nin',
+    service: mockService,
+    value: ['grape'],
+  },
+};
+
+export const SnMultiSelectIn: Story = {
+  args: {
+    field: makeField('sn', { label: '流水号选择' }),
+    operator: 'in',
+    service: mockService,
+  },
+};
+
+// ── Operator-aware: Async Picker Multi-select ─────────────────────────
+
+export const UserPickerMultiple: Story = {
+  args: {
+    field: makeField('user', { label: '负责人(多选)' }),
+    operator: 'in',
+    service: mockService,
+    value: ['user1', 'user2'],
+  },
+};
+
+export const DeptPickerMultiple: Story = {
+  args: {
+    field: makeField('dept', { label: '所属部门(多选)' }),
+    operator: 'nin',
+    service: mockService,
+    value: ['dept1'],
+  },
+};
+
+export const UserGroupPickerMultiple: Story = {
+  args: {
+    field: makeField('usergroup', { label: '用户组(多选)' }),
+    operator: 'all',
+    service: mockService,
+  },
+};
+
+export const DeptGroupPickerMultiple: Story = {
+  args: {
+    field: makeField('deptgroup', { label: '部门组(多选)' }),
+    operator: 'in',
+    service: mockService,
+  },
+};
+
+// ── Operator-aware: Text single value (no operator → default TextInput) ──
+
+export const TextWithOperatorEq: Story = {
+  args: {
+    field: makeField('text', { label: '关键字' }),
+    operator: 'contains',
+    value: '搜索关键词',
+  },
+};
+
+export const NumberWithOperatorGt: Story = {
+  args: {
+    field: makeField('number', { label: '年龄' }),
+    operator: 'gt',
+    value: 18,
+  },
+};
+
+export const DateTimeWithOperatorEq: Story = {
+  args: {
+    field: makeField('datetime', { label: '开始日期' }),
+    operator: 'gte',
+    value: '2025-01-01T00:00',
+  },
+};
+
+// ── Controlled ──────────────────────────────────────────────────────
+
+export const Controlled: Story = {
+  args: {
+    field: makeField('text', { label: '受控字段' }),
+    value: '受控值',
+  },
+  render: (args) => {
+    const [value, setValue] = useState('受控值');
+    return (
+      <div className="flex flex-col gap-4">
+        <FieldValueInput {...args} value={value} onChange={(v) => setValue(String(v ?? ''))} />
+        <p className="text-[12px] text-[#666]">当前值: {value || '(空)'}</p>
+      </div>
+    );
+  },
+};

package/src/stories/FlowNodeActionTriggerSelect.stories.tsx

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+
+import { FlowNodeActionTriggerSelect } from '../components/agent-helper/flow-node-action-trigger-select';
+import type { FlowNodeActionType } from '@baishuyun/types';
+
+const meta = {
+  title: 'Agent Helper/FlowNodeActionTriggerSelect',
+  component: FlowNodeActionTriggerSelect,
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+  args: {},
+} satisfies Meta<typeof FlowNodeActionTriggerSelect>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithSelection: Story = {
+  args: {
+    value: 'flow_end',
+  },
+};
+
+const InteractiveComponent = () => {
+  const [value, setValue] = useState<FlowNodeActionType | undefined>();
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <FlowNodeActionTriggerSelect
+        value={value}
+        onChange={(v) => setValue(v as FlowNodeActionType)}
+      />
+      {value && (
+        <p style={{ fontSize: 14, color: '#666' }}>
+          当前选中: {value}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export const Interactive: Story = {
+  args: {} as any,
+  render: () => <InteractiveComponent />,
+};
+
+export const MultiSelect: Story = {
+  args: {
+    multiple: true,
+    value: ['flow_end', 'flow_node'],
+  },
+};
+
+const MultiSelectInteractiveComponent = () => {
+  const [value, setValue] = useState<FlowNodeActionType[]>([]);
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <FlowNodeActionTriggerSelect
+        multiple
+        value={value}
+        onChange={(v) => setValue(v as FlowNodeActionType[])}
+      />
+      {value.length > 0 && (
+        <p style={{ fontSize: 14, color: '#666' }}>
+          当前选中: {value.join(', ')}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export const MultiSelectInteractive: Story = {
+  args: {} as any,
+  render: () => <MultiSelectInteractiveComponent />,
+};