Revise design and UI components for AI video admin interface

Updated DESIGN.md to reflect a new editorial design approach with a navy palette and refined typography. Enhanced global styles in globals.css, including new color tokens and layout adjustments. Refactored components in AppShell, Sidebar, and Topbar for improved consistency and theming. Introduced a ThemeToggle component for user theme preferences and updated various pages to utilize new styles and components, ensuring a cohesive user experience across the application.

src/components/pages/AssistantPage.tsx

@@ -66,28 +66,31 @@ export function AssistantPage() {
 
   return (
     <div className="mx-auto flex w-full max-w-[1180px] flex-col gap-6">
-      <div className="flex items-start justify-between">
+      <div className="flex items-start justify-between gap-6">
         <div>
-          <div className="flex items-center gap-3">
-            <span className="h-3 w-3 rounded-full bg-blue-400 shadow-[0_0_0_4px_rgba(46,161,255,.16),0_0_14px_rgba(46,161,255,.35)]" />
-            <h1 className="text-3xl font-bold">创建助手 · 提示词模式</h1>
-          </div>
-          <p className="mt-2 text-sm text-[#5d6880]">
+          <div className="caption-label text-muted-soft">提示词模式</div>
+          <h1 className="font-display display-lg mt-3 text-ink">
+            创建助手
+          </h1>
+          <p className="mt-3 text-[15px] text-muted-foreground">
             通过提示词、模型、语音和知识库快速创建 AI 视频助手
           </p>
         </div>
 
-        <div className="flex gap-3">
-          <Button variant="outline" className="gap-2 border-[#1b2233] bg-[#0f1521] text-[#9aa6bd] hover:bg-[#1b2233] hover:text-[#e9eef7]">
+        <div className="flex shrink-0 gap-3">
+          <Button
+            variant="outline"
+            size="lg"
+            className="gap-2 border-hairline-strong text-foreground hover:bg-surface-strong"
+          >
             <Save size={16} />
             保存草稿
           </Button>
-          <Button className="gap-2">
+          <Button size="lg" className="gap-2">
             <Rocket size={16} />
             创建助手
           </Button>
         </div>
-   
       </div>
 
       <div className="space-y-5">
@@ -192,16 +195,16 @@ function SectionCard({
   children: React.ReactNode;
 }) {
   return (
-    <Card className="border-[#1b2233] bg-[#0f1521] text-[#e9eef7]">
+    <Card className="rounded-2xl border-hairline bg-card text-card-foreground shadow-sm">
       <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">
+          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-surface-strong text-foreground">
             {icon}
           </div>
 
           <div>
-            <CardTitle className="text-base">{title}</CardTitle>
-            <CardDescription className="mt-1 text-[#5d6880]">
+            <CardTitle className="text-base font-medium">{title}</CardTitle>
+            <CardDescription className="mt-1 text-muted-foreground">
               {description}
             </CardDescription>
           </div>
@@ -226,12 +229,12 @@ function TextField({
 }) {
   return (
     <label className="block">
-      <div className="mb-2 text-sm font-medium text-[#9aa6bd]">{label}</div>
+      <div className="mb-2 text-sm font-medium text-foreground">{label}</div>
       <Input
         value={value}
         placeholder={placeholder}
         onChange={(event) => onChange(event.target.value)}
-        className="border-[#1b2233] bg-[#0d121d] text-white placeholder:text-[#5d6880]"
+        className="border-hairline-strong bg-background text-foreground placeholder:text-muted-soft"
       />
     </label>
   );
@@ -252,13 +255,13 @@ function TextAreaField({
 }) {
   return (
     <label className="block">
-      <div className="mb-2 text-sm font-medium text-[#9aa6bd]">{label}</div>
+      <div className="mb-2 text-sm font-medium text-foreground">{label}</div>
       <Textarea
         value={value}
         placeholder={placeholder}
         onChange={(event) => onChange(event.target.value)}
         rows={rows}
-        className="resize-none border-[#1b2233] bg-[#0d121d] text-white placeholder:text-[#5d6880]"
+        className="resize-none border-hairline-strong bg-background text-foreground placeholder:text-muted-soft"
       />
     </label>
   );
@@ -277,20 +280,16 @@ function SelectField({
 }) {
   return (
     <div className="block">
-      <div className="mb-2 text-sm font-medium text-[#9aa6bd]">{label}</div>
+      <div className="mb-2 text-sm font-medium text-foreground">{label}</div>
 
       <Select value={value} onValueChange={onChange}>
-        <SelectTrigger className="w-full border-[#1b2233] bg-[#0d121d] text-white">
+        <SelectTrigger className="w-full border-hairline-strong bg-background text-foreground">
           <SelectValue placeholder={`请选择${label}`} />
         </SelectTrigger>
 
-        <SelectContent className="border-[#1b2233] bg-[#0f1521] text-white">
+        <SelectContent className="border-hairline bg-popover text-popover-foreground">
           {options.map((item) => (
-            <SelectItem
-              key={item}
-              value={item}
-              className="focus:bg-blue-500/15 focus:text-blue-300"
-            >
+            <SelectItem key={item} value={item}>
               {item}
             </SelectItem>
           ))}
@@ -312,10 +311,10 @@ function ToggleRow({
   onChange: (checked: boolean) => void;
 }) {
   return (
-    <div className="flex items-center justify-between rounded-xl border border-[#1b2233] bg-[#0d121d] p-4">
+    <div className="flex items-center justify-between rounded-xl border border-hairline bg-canvas-soft p-4">
       <div>
-        <div className="font-semibold">{title}</div>
-        <div className="mt-1 text-sm text-[#5d6880]">{description}</div>
+        <div className="font-medium text-foreground">{title}</div>
+        <div className="mt-1 text-sm text-muted-foreground">{description}</div>
       </div>
       <Switch checked={checked} onCheckedChange={onChange} />
     </div>