@baishuyun/ai-design 1.0.2 → 1.0.4

package/src/stories/Form.stories.tsx

@@ -0,0 +1,302 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+
+import { Button } from '../components/ui/button';
+import { Input } from '../components/ui/input';
+import { Textarea } from '../components/ui/textarea';
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from '../components/ui/select';
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+} from '../components/ui/form';
+
+const formSchema = z.object({
+  name: z.string().min(1, '名称不能为空').max(50, '名称不能超过50个字符'),
+  appScope: z.string().min(1, '请选择应用范围'),
+  prompt: z.string().optional(),
+  outputConfig: z.string().min(1, '请选择输出配置'),
+});
+
+type FormValues = z.infer<typeof formSchema>;
+
+const meta = {
+  title: 'AI Office/Form',
+  component: Form,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  args: {},
+} satisfies Meta<typeof Form>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const DefaultForm = () => {
+  const form = useForm<FormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: '',
+      appScope: '',
+      prompt: '',
+      outputConfig: '',
+    },
+  });
+
+  const onSubmit = (values: FormValues) => {
+    alert(JSON.stringify(values, null, 2));
+  };
+
+  return (
+    <Form
+      formMethods={form}
+      onSubmit={form.handleSubmit(onSubmit)}
+      className="flex flex-col gap-[22px] w-[400px]"
+    >
+      <FormField
+        control={form.control}
+        name="name"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel required>名称</FormLabel>
+            <FormControl>
+              <Input placeholder="请输入名称" {...field} />
+            </FormControl>
+            <FormDescription>请输入表单名称</FormDescription>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+
+      <FormField
+        control={form.control}
+        name="appScope"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel required>应用范围</FormLabel>
+            <FormControl>
+              <Select
+                value={field.value}
+                onValueChange={field.onChange}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="请选择应用范围" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">全部应用</SelectItem>
+                  <SelectItem value="specific">指定应用</SelectItem>
+                </SelectContent>
+              </Select>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+
+      <FormField
+        control={form.control}
+        name="prompt"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>提示词配置</FormLabel>
+            <FormControl>
+              <Textarea placeholder="请输入提示词" {...field} />
+            </FormControl>
+            <FormDescription>配置 AI 提示词，用于生成表单字段</FormDescription>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+
+      <FormField
+        control={form.control}
+        name="outputConfig"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel required>输出配置</FormLabel>
+            <FormControl>
+              <Select
+                value={field.value}
+                onValueChange={field.onChange}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="请选择输出配置" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="json">JSON 格式</SelectItem>
+                  <SelectItem value="table">表格格式</SelectItem>
+                  <SelectItem value="text">文本格式</SelectItem>
+                </SelectContent>
+              </Select>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+
+      <Button type="submit">提交</Button>
+    </Form>
+  );
+};
+
+export const Default: Story = {
+  args: {} as any,
+  render: () => <DefaultForm />,
+};
+
+const ValidationForm = () => {
+  const form = useForm<FormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: '',
+      appScope: '',
+      prompt: '',
+      outputConfig: '',
+    },
+  });
+
+  const onSubmit = (values: FormValues) => {
+    alert(JSON.stringify(values, null, 2));
+  };
+
+  return (
+    <Form
+      formMethods={form}
+      onSubmit={form.handleSubmit(onSubmit)}
+      className="flex flex-col gap-[22px] w-[400px]"
+    >
+      <FormField
+        control={form.control}
+        name="name"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel required>名称</FormLabel>
+            <FormControl>
+              <Input placeholder="请输入名称" {...field} />
+            </FormControl>
+            <FormDescription>请输入表单名称</FormDescription>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+
+      <FormField
+        control={form.control}
+        name="appScope"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel required>应用范围</FormLabel>
+            <FormControl>
+              <Select
+                value={field.value}
+                onValueChange={field.onChange}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="请选择应用范围" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">全部应用</SelectItem>
+                  <SelectItem value="specific">指定应用</SelectItem>
+                </SelectContent>
+              </Select>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+
+      <FormField
+        control={form.control}
+        name="prompt"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>提示词配置</FormLabel>
+            <FormControl>
+              <Textarea placeholder="请输入提示词" {...field} />
+            </FormControl>
+            <FormDescription>配置 AI 提示词，用于生成表单字段</FormDescription>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+
+      <FormField
+        control={form.control}
+        name="outputConfig"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel required>输出配置</FormLabel>
+            <FormControl>
+              <Select
+                value={field.value}
+                onValueChange={field.onChange}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="请选择输出配置" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="json">JSON 格式</SelectItem>
+                  <SelectItem value="table">表格格式</SelectItem>
+                  <SelectItem value="text">文本格式</SelectItem>
+                </SelectContent>
+              </Select>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+
+      <Button type="submit">提交（查看验证错误）</Button>
+    </Form>
+  );
+};
+
+export const WithValidation: Story = {
+  args: {} as any,
+  render: () => <ValidationForm />,
+};
+
+export const FormSpacing: Story = {
+  args: {} as any,
+  render: () => (
+    <div className="flex flex-col gap-[22px] w-[400px]">
+      <div className="flex flex-col gap-[6px]">
+        <Label required>名称</Label>
+        <Input placeholder="请输入名称" />
+        <p className="text-[12px] text-[#999999]">请输入表单名称</p>
+      </div>
+      <div className="flex flex-col gap-[6px]">
+        <Label required>应用范围</Label>
+        <Input placeholder="请选择应用范围" />
+      </div>
+      <div className="flex flex-col gap-[6px]">
+        <Label>提示词配置</Label>
+        <Textarea placeholder="请输入提示词" />
+        <p className="text-[12px] text-[#999999]">配置 AI 提示词，用于生成表单字段</p>
+      </div>
+      <div className="flex flex-col gap-[6px]">
+        <Label required>输出配置</Label>
+        <Input placeholder="请选择输出配置" />
+      </div>
+    </div>
+  ),
+};
+
+// Helper component for Label
+const Label = ({ children, required }: { children: React.ReactNode; required?: boolean }) => (
+  <span className="text-[14px] font-bold text-[#030303]">
+    {required && <span className="text-[#ff5631]">*</span>}
+    {children}
+  </span>
+);

package/src/stories/FormActionTriggerSelect.stories.tsx

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

package/src/stories/FormDivider.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { FormDivider } from '../components/agent-helper/form-divider';
+
+const meta = {
+  title: 'Agent Helper/FormDivider',
+  component: FormDivider,
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+  args: {},
+} satisfies Meta<typeof FormDivider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: '表单动作触发配置',
+  },
+};
+
+export const WithoutText: Story = {
+  args: {},
+};
+
+export const CustomClassName: Story = {
+  args: {
+    children: '自定义样式',
+    className: 'py-[20px]',
+  },
+};

package/src/stories/FormSelect.stories.tsx

@@ -0,0 +1,127 @@
+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 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 && (
+          <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: '请选择表单',
+  },
+};

package/src/stories/IconCard.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { IconCard } from '../components/icon-card';
+import { MultilineTextIcon } from '..';
+
+const meta = {
+  title: 'AI Office/IconCard',
+  component: IconCard,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  args: {},
+} satisfies Meta<typeof IconCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    icon: <MultilineTextIcon />,
+    iconBgColor: 'rgba(77, 96, 159, 0.1)',
+    title: '表单字段触发',
+    description: '表单中数据发生变化时，触发自动化操作',
+    onClick: () => {},
+  },
+};
+
+export const Selected: Story = {
+  args: {
+    icon: <MultilineTextIcon />,
+    iconBgColor: 'rgba(77, 96, 159, 0.1)',
+    title: '表单字段触发',
+    description: '表单中数据发生变化时，触发自动化操作',
+    selected: true,
+    onClick: () => {},
+  },
+};

package/src/stories/Input.stories.tsx

@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Input } from '../components/ui/input';
+import { Label } from '../components/ui/label';
+
+const meta = {
+  title: 'AI Office/Input',
+  component: Input,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  args: {},
+} satisfies Meta<typeof Input>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    placeholder: '请输入内容',
+  },
+};
+
+export const WithValue: Story = {
+  args: {
+    defaultValue: '示例文本',
+  },
+};
+
+export const WithPlaceholder: Story = {
+  args: {
+    placeholder: '请输入名称',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    defaultValue: '不可编辑',
+    disabled: true,
+  },
+};
+
+export const Password: Story = {
+  args: {
+    type: 'password',
+    placeholder: '请输入密码',
+  },
+};
+
+export const Number: Story = {
+  args: {
+    type: 'number',
+    placeholder: '请输入数字',
+  },
+};
+
+export const File: Story = {
+  args: {
+    type: 'file',
+  },
+};
+
+export const WithLabel: Story = {
+  args: {
+    id: 'name-input',
+    placeholder: '请输入名称',
+  },
+  render: (args) => (
+    <div className="flex flex-col gap-[6px]">
+      <Label htmlFor={args.id}>名称</Label>
+      <Input {...args} />
+    </div>
+  ),
+};
+
+export const WithRequiredLabel: Story = {
+  args: {
+    id: 'name-required',
+    placeholder: '请输入名称',
+  },
+  render: (args) => (
+    <div className="flex flex-col gap-[6px]">
+      <Label htmlFor={args.id} required>
+        名称
+      </Label>
+      <Input {...args} />
+    </div>
+  ),
+};
+
+export const DisabledWithLabel: Story = {
+  args: {
+    id: 'name-disabled',
+    defaultValue: '不可编辑的值',
+    disabled: true,
+  },
+  render: (args) => (
+    <div className="flex flex-col gap-[6px]">
+      <Label htmlFor={args.id}>名称</Label>
+      <Input {...args} />
+    </div>
+  ),
+};