Update global styles and refactor AssistantPage to use new UI components.

Changed primary color variables in globals.css for improved theming. Refactored AssistantPage to incorporate Select and Card components, enhancing the UI structure and consistency. Updated button styles for better visual integration.

src/app/globals.css

@@ -55,7 +55,7 @@
   --card-foreground: oklch(0.145 0 0);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
+  --primary: oklch(0.55 0.22 255);
   --primary-foreground: oklch(0.985 0 0);
   --secondary: oklch(0.97 0 0);
   --secondary-foreground: oklch(0.205 0 0);
@@ -90,8 +90,8 @@
   --card-foreground: oklch(0.985 0 0);
   --popover: oklch(0.205 0 0);
   --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
+  --primary: oklch(0.6 0.22 255);
+  --primary-foreground: oklch(0.985 0 0);
   --secondary: oklch(0.269 0 0);
   --secondary-foreground: oklch(0.985 0 0);
   --muted: oklch(0.269 0 0);

src/components/pages/AssistantPage.tsx

@@ -16,6 +16,20 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Switch } from "@/components/ui/switch";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 
 type AssistantForm = {
   name: string;
@@ -67,7 +81,7 @@ export function AssistantPage() {
         </div>
 
         <div className="flex gap-3">
-          <Button variant="outline" className="gap-2">
+          <Button variant="outline" className="gap-2 border-[#1b2233] bg-[#0f1521] text-[#9aa6bd] hover:bg-[#1b2233] hover:text-[#e9eef7]">
             <Save size={16} />
             保存草稿
           </Button>
@@ -193,20 +207,24 @@ function SectionCard({
   children: React.ReactNode;
 }) {
   return (
-    <section className="rounded-2xl border border-[#1b2233] bg-[#0f1521] p-6">
-      <div className="mb-5 flex items-start gap-3">
-        <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-500/10 text-blue-400">
-          {icon}
-        </div>
+    <Card className="border-[#1b2233] bg-[#0f1521] text-[#e9eef7]">
+      <CardHeader>
+        <div className="flex items-start gap-3">
+          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-500/10 text-blue-400">
+            {icon}
+          </div>
 
-        <div>
-          <h2 className="font-bold">{title}</h2>
-          <p className="mt-1 text-sm text-[#5d6880]">{description}</p>
+          <div>
+            <CardTitle className="text-base">{title}</CardTitle>
+            <CardDescription className="mt-1 text-[#5d6880]">
+              {description}
+            </CardDescription>
+          </div>
         </div>
-      </div>
+      </CardHeader>
 
-      <div className="space-y-4">{children}</div>
-    </section>
+      <CardContent className="space-y-4">{children}</CardContent>
+    </Card>
   );
 }
 
@@ -271,20 +289,27 @@ function SelectField({
   onChange: (value: string) => void;
 }) {
   return (
-    <label className="block">
+    <div className="block">
       <div className="mb-2 text-sm font-medium text-[#9aa6bd]">{label}</div>
-      <select
-        value={value}
-        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 focus:border-blue-500"
-      >
-        {options.map((item) => (
-          <option key={item} value={item} className="bg-[#0d121d]">
-            {item}
-          </option>
-        ))}
-      </select>
-    </label>
+
+      <Select value={value} onValueChange={onChange}>
+        <SelectTrigger className="w-full border-[#1b2233] bg-[#0d121d] text-white">
+          <SelectValue placeholder={`请选择${label}`} />
+        </SelectTrigger>
+
+        <SelectContent className="border-[#1b2233] bg-[#0f1521] text-white">
+          {options.map((item) => (
+            <SelectItem
+              key={item}
+              value={item}
+              className="focus:bg-blue-500/15 focus:text-blue-300"
+            >
+              {item}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
   );
 }