初始化项目版本

.agents/skills/shadcn-ui/examples/form-pattern.tsx

@@ -0,0 +1,177 @@
+// Example: Form Pattern with shadcn/ui components
+// Demonstrates: Form building, validation, and composition
+
+"use client"
+
+import { Button } from "@/components/ui/button"
+import {
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select"
+import { Textarea } from "@/components/ui/textarea"
+import { toast } from "@/components/ui/use-toast"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import * as z from "zod"
+
+// Define form schema with zod
+const formSchema = z.object({
+  username: z.string().min(2, {
+    message: "Username must be at least 2 characters.",
+  }),
+  email: z.string().email({
+    message: "Please enter a valid email address.",
+  }),
+  role: z.enum(["admin", "user", "viewer"], {
+    required_error: "Please select a role.",
+  }),
+  bio: z.string().max(160, {
+    message: "Bio must not be longer than 160 characters.",
+  }).optional(),
+})
+
+type FormValues = z.infer<typeof formSchema>
+
+export function UserProfileForm() {
+  // Initialize form with react-hook-form and zod validation
+  const form = useForm<FormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      username: "",
+      email: "",
+      bio: "",
+    },
+  })
+
+  // Handle form submission
+  function onSubmit(values: FormValues) {
+    // In a real app, send to API
+    console.log(values)
+    
+    toast({
+      title: "Profile updated",
+      description: "Your profile has been successfully updated.",
+    })
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <FormField
+          control={form.control}
+          name="username"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Username</FormLabel>
+              <FormControl>
+                <Input placeholder="johndoe" {...field} />
+              </FormControl>
+              <FormDescription>
+                This is your public display name.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email</FormLabel>
+              <FormControl>
+                <Input type="email" placeholder="john@example.com" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="role"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Role</FormLabel>
+              <Select onValueChange={field.onChange} defaultValue={field.value}>
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select a role" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  <SelectItem value="admin">Admin</SelectItem>
+                  <SelectItem value="user">User</SelectItem>
+                  <SelectItem value="viewer">Viewer</SelectItem>
+                </SelectContent>
+              </Select>
+              <FormDescription>
+                Your role determines your access level.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="bio"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Bio</FormLabel>
+              <FormControl>
+                <Textarea
+                  placeholder="Tell us about yourself"
+                  className="resize-none"
+                  {...field}
+                />
+              </FormControl>
+              <FormDescription>
+                Optional. Maximum 160 characters.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <Button type="submit">Update profile</Button>
+      </form>
+    </Form>
+  )
+}
+
+/**
+ * Key Patterns Demonstrated:
+ * 
+ * 1. Form Composition: Using shadcn/ui's Form components with react-hook-form
+ * 2. Validation: Zod schema for type-safe validation
+ * 3. Error Handling: Automatic error messages via FormMessage
+ * 4. Accessibility: All fields properly labeled with descriptions
+ * 5. Type Safety: TypeScript types inferred from Zod schema
+ * 
+ * Required Dependencies:
+ * - react-hook-form
+ * - @hookform/resolvers
+ * - zod
+ * 
+ * Installation:
+ * npx shadcn@latest add form
+ * npx shadcn@latest add input
+ * npx shadcn@latest add select
+ * npx shadcn@latest add textarea
+ * npx shadcn@latest add button
+ */