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: oklch(0.6 0.22 255);
-  --primary-foreground: oklch(0.205 0 0);
+  --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">
+    <Card className="border-[#1b2233] bg-[#0f1521] text-[#e9eef7]">
-      <div className="mb-5 flex items-start gap-3">
+      <CardHeader>
-        <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-500/10 text-blue-400">
+        <div className="flex items-start gap-3">
-          {icon}
+          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-500/10 text-blue-400">
-        </div>
+            {icon}
+          </div>
 
-        <div>
+          <div>
-          <h2 className="font-bold">{title}</h2>
+            <CardTitle className="text-base">{title}</CardTitle>
-          <p className="mt-1 text-sm text-[#5d6880]">{description}</p>
+            <CardDescription className="mt-1 text-[#5d6880]">
+              {description}
+            </CardDescription>
+          </div>
         </div>
-      </div>
+      </CardHeader>
 
-      <div className="space-y-4">{children}</div>
+      <CardContent className="space-y-4">{children}</CardContent>
-    </section>
+    </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}
+      <Select value={value} onValueChange={onChange}>
-        onChange={(event) => onChange(event.target.value)}
+        <SelectTrigger className="w-full border-[#1b2233] bg-[#0d121d] text-white">
-        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"
+          <SelectValue placeholder={`请选择${label}`} />
-      >
+        </SelectTrigger>
-        {options.map((item) => (
+
-          <option key={item} value={item} className="bg-[#0d121d]">
+        <SelectContent className="border-[#1b2233] bg-[#0f1521] text-white">
-            {item}
+          {options.map((item) => (
-          </option>
+            <SelectItem
-        ))}
+              key={item}
-      </select>
+              value={item}
-    </label>
+              className="focus:bg-blue-500/15 focus:text-blue-300"
+            >
+              {item}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
   );
 }