Add shadcn/ui components and refactor assistant form to use them.

Set up the design system with Radix-based primitives, theme tokens, and replace custom form controls on the assistant page with shared UI components.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/components/pages/AssistantPage.tsx

@@ -12,6 +12,11 @@ import {
   Volume2,
 } from "lucide-react";
 
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Switch } from "@/components/ui/switch";
+
 type AssistantForm = {
   name: string;
   scene: string;
@@ -62,16 +67,16 @@ export function AssistantPage() {
         </div>
 
         <div className="flex gap-3">
-          <button className="flex h-10 items-center gap-2 rounded-xl border border-[#1b2233] bg-[#0f1521] px-4 text-sm font-semibold text-[#9aa6bd] hover:text-white">
+          <Button variant="outline" className="gap-2">
             <Save size={16} />
             保存草稿
-          </button>
-
-          <button className="flex h-10 items-center gap-2 rounded-xl bg-blue-500 px-4 text-sm font-semibold text-white shadow-[0_8px_24px_rgba(29,123,255,.35)]">
+          </Button>
+          <Button className="gap-2">
             <Rocket size={16} />
             创建助手
-          </button>
+          </Button>
         </div>
+   
       </div>
 
       <div className="grid grid-cols-[1fr_360px] gap-5">
@@ -219,11 +224,11 @@ function TextField({
   return (
     <label className="block">
       <div className="mb-2 text-sm font-medium text-[#9aa6bd]">{label}</div>
-      <input
+      <Input
         value={value}
         placeholder={placeholder}
         onChange={(event) => onChange(event.target.value)}
-        className="h-11 w-full rounded-xl border border-[#1b2233] bg-[#0d121d] px-4 text-sm text-white outline-none transition placeholder:text-[#5d6880] focus:border-blue-500"
+        className="border-[#1b2233] bg-[#0d121d] text-white placeholder:text-[#5d6880]"
       />
     </label>
   );
@@ -243,12 +248,12 @@ function TextAreaField({
   return (
     <label className="block">
       <div className="mb-2 text-sm font-medium text-[#9aa6bd]">{label}</div>
-      <textarea
+      <Textarea
         value={value}
         placeholder={placeholder}
         onChange={(event) => onChange(event.target.value)}
         rows={4}
-        className="w-full resize-none rounded-xl border border-[#1b2233] bg-[#0d121d] px-4 py-3 text-sm leading-6 text-white outline-none transition placeholder:text-[#5d6880] focus:border-blue-500"
+        className="resize-none border-[#1b2233] bg-[#0d121d] text-white placeholder:text-[#5d6880]"
       />
     </label>
   );
@@ -300,21 +305,7 @@ function ToggleRow({
         <div className="font-semibold">{title}</div>
         <div className="mt-1 text-sm text-[#5d6880]">{description}</div>
       </div>
-
-      <button
-        onClick={() => onChange(!checked)}
-        className={[
-          "relative h-7 w-12 rounded-full transition",
-          checked ? "bg-blue-500" : "bg-[#273249]",
-        ].join(" ")}
-      >
-        <span
-          className={[
-            "absolute top-1 h-5 w-5 rounded-full bg-white transition",
-            checked ? "left-6" : "left-1",
-          ].join(" ")}
-        />
-      </button>
+      <Switch checked={checked} onCheckedChange={onChange} />
     </div>
   );
 }