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/layout/Sidebar.tsx

@@ -55,27 +55,33 @@ export function Sidebar({
   return (
     <aside
       className={[
-        "flex shrink-0 flex-col border-r border-[#161d2c] bg-[#0a0e17] transition-all",
+        "flex shrink-0 flex-col border-r border-sidebar-border bg-sidebar transition-all",
         collapsed ? "w-[76px]" : "w-[252px]",
       ].join(" ")}
     >
-      <div className="flex h-[81px] items-center gap-3 border-b border-[#161d2c] px-5">
-        <div className="relative flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-gradient-to-br from-cyan-400 to-blue-500 text-white shadow-lg shadow-cyan-500/30">
-          <Video size={22} />
-          <div className="absolute inset-0 rounded-2xl ring-1 ring-inset ring-white/20" />
+      <div className="flex h-[81px] items-center gap-3 border-b border-sidebar-border px-5">
+        <div
+          className="relative flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl text-on-primary shadow-sm"
+          style={{
+            backgroundColor: "var(--primary)",
+            backgroundImage:
+              "radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--gradient-sky) 70%, transparent), transparent 60%), radial-gradient(circle at 80% 90%, color-mix(in srgb, var(--gradient-lavender) 65%, transparent), transparent 55%)",
+          }}
+        >
+          <Video size={22} style={{ color: "var(--primary-foreground)" }} />
         </div>
 
         {!collapsed && (
           <div>
-            <div className="bg-gradient-to-r from-cyan-300 to-blue-400 bg-clip-text text-sm font-bold text-transparent">
+            <div className="font-display text-base text-foreground">
               AI 视频助手
             </div>
-            <div className="text-xs text-[#5d6880]">管理台</div>
+            <div className="caption-label text-muted-soft">管理台</div>
           </div>
         )}
       </div>
 
-      <nav className="flex-1 space-y-2 px-3 py-4">
+      <nav className="flex-1 space-y-1 px-3 py-5">
         <NavButton
           active={active === "home"}
           collapsed={collapsed}
@@ -84,55 +90,51 @@ export function Sidebar({
           onClick={() => onNavigate("home")}
         />
 
-        <div>
+        <div className="pt-2">
           <div
             className={[
-              "flex h-11 w-full items-center gap-3 rounded-xl px-3 text-sm",
-              assistantActive
-                ? "bg-blue-500/10 text-blue-300"
-                : "text-[#9aa6bd]",
+              "flex h-11 w-full items-center gap-3 rounded-full px-3 text-sm",
+              assistantActive ? "text-foreground" : "text-muted-foreground",
               collapsed ? "justify-center" : "",
             ].join(" ")}
           >
             <Bot size={18} />
-            {!collapsed && <span>创建助手</span>}
+            {!collapsed && <span className="font-medium">创建助手</span>}
           </div>
 
-          <div
-            className={[
-              "mt-1 space-y-1",
-              collapsed ? "pl-0" : "pl-6",
-            ].join(" ")}
-          >
+          <div className={["mt-1 space-y-1", collapsed ? "pl-0" : "pl-5"].join(" ")}>
             {assistantSubItems.map((item) => (
-              <SubNavButton
+              <NavButton
                 key={item.key}
                 active={active === item.key}
                 collapsed={collapsed}
                 icon={item.icon}
                 label={item.label}
                 onClick={() => onNavigate(item.key)}
+                small
               />
             ))}
           </div>
         </div>
 
-        {mainItems.slice(1).map((item) => (
-          <NavButton
-            key={item.key}
-            active={active === item.key}
-            collapsed={collapsed}
-            icon={item.icon}
-            label={item.label}
-            onClick={() => onNavigate(item.key)}
-          />
-        ))}
+        <div className="pt-2">
+          {mainItems.slice(1).map((item) => (
+            <NavButton
+              key={item.key}
+              active={active === item.key}
+              collapsed={collapsed}
+              icon={item.icon}
+              label={item.label}
+              onClick={() => onNavigate(item.key)}
+            />
+          ))}
+        </div>
       </nav>
 
-      <div className="border-t border-[#161d2c] p-3">
+      <div className="border-t border-sidebar-border p-3">
         <button
           onClick={onToggle}
-          className="flex h-10 w-full items-center justify-center rounded-xl border border-[#1b2233] bg-[#0f1521] text-[#9aa6bd] hover:text-white"
+          className="flex h-10 w-full items-center justify-center rounded-full border border-hairline-strong text-muted-foreground transition-colors hover:bg-surface-strong hover:text-foreground"
         >
           <ChevronLeft
             size={18}
@@ -150,58 +152,30 @@ function NavButton({
   icon: Icon,
   label,
   onClick,
+  small = false,
 }: {
   active: boolean;
   collapsed: boolean;
   icon: React.ComponentType<{ size?: number }>;
   label: string;
   onClick: () => void;
+  small?: boolean;
 }) {
   return (
     <button
       onClick={onClick}
       title={collapsed ? label : undefined}
       className={[
-        "flex h-11 w-full items-center gap-3 rounded-xl px-3 text-sm transition",
+        "mt-1 flex w-full items-center gap-3 rounded-full px-3 text-sm transition-colors",
+        small ? "h-10" : "h-11",
         active
-          ? "bg-blue-500/15 text-blue-400"
-          : "text-[#9aa6bd] hover:bg-white/5 hover:text-white",
+          ? "bg-sidebar-accent text-sidebar-accent-foreground font-medium"
+          : "text-muted-foreground hover:bg-sidebar-accent/60 hover:text-foreground",
         collapsed ? "justify-center" : "",
       ].join(" ")}
     >
-      <Icon size={18} />
+      <Icon size={small ? 16 : 18} />
       {!collapsed && <span>{label}</span>}
     </button>
   );
 }
-
-function SubNavButton({
-  active,
-  collapsed,
-  icon: Icon,
-  label,
-  onClick,
-}: {
-  active: boolean;
-  collapsed: boolean;
-  icon: React.ComponentType<{ size?: number }>;
-  label: string;
-  onClick: () => void;
-}) {
-  return (
-    <button
-      onClick={onClick}
-      title={collapsed ? label : undefined}
-      className={[
-        "flex h-10 w-full items-center gap-3 rounded-xl px-3 text-sm transition",
-        active
-          ? "bg-blue-500/15 text-blue-400"
-          : "text-[#7f8aa3] hover:bg-white/5 hover:text-white",
-        collapsed ? "justify-center" : "",
-      ].join(" ")}
-    >
-      <Icon size={16} />
-      {!collapsed && <span>{label}</span>}
-    </button>
-  );
-}