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

package/src/stories/Form.stories.tsx

@@ -1,302 +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>
-);
+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>
+);