From 7b20b6a2d8ab7a85cc582229955c9963897fdd33 Mon Sep 17 00:00:00 2001
From: Xin Wang <your-email@example.com>
Date: Fri, 5 Jun 2026 12:53:07 +0800
Subject: [PATCH] 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                    |  6 +--
 src/components/pages/AssistantPage.tsx | 75 +++++++++++++++++---------
 2 files changed, 53 insertions(+), 28 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index c56032b..bfd4bcb 100644
--- a/src/app/globals.css
+++ b/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);
diff --git a/src/components/pages/AssistantPage.tsx b/src/components/pages/AssistantPage.tsx
index 255b8cf..357cbfc 100644
--- a/src/components/pages/AssistantPage.tsx
+++ b/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>
   );
 }