Add launch configuration and enhance UI components in Sidebar, Topbar, and HomePage

.claude/launch.json

@@ -0,0 +1,12 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "ai-video-admin",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run", "dev"],
+      "port": 3000,
+      "autoPort": false
+    }
+  ]
+}

src/components/layout/Sidebar.tsx

@@ -60,13 +60,16 @@ export function Sidebar({
       ].join(" ")}
     >
       <div className="flex h-[81px] items-center gap-3 border-b border-[#161d2c] px-5">
-        <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-cyan-400 text-[#04121a]">
-          <Video size={24} />
+        <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>
 
         {!collapsed && (
           <div>
-            <div className="text-sm font-bold">AI 视频助手</div>
+            <div className="bg-gradient-to-r from-cyan-300 to-blue-400 bg-clip-text text-sm font-bold text-transparent">
+              AI 视频助手
+            </div>
             <div className="text-xs text-[#5d6880]">管理台</div>
           </div>
         )}

src/components/layout/Topbar.tsx

@@ -1,28 +1,51 @@
-import { Bell, HelpCircle } from "lucide-react";
+import { Bell, HelpCircle, ChevronDown } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 export function Topbar() {
   return (
     <header className="flex h-[81px] shrink-0 items-center justify-end border-b border-[#161d2c] bg-[#080b13] px-8">
-      <div className="flex items-center gap-3">
-        <button className="flex h-10 items-center gap-2 rounded-xl border border-[#1b2233] bg-[#0f1521] px-4 text-sm text-[#9aa6bd]">
-          <HelpCircle size={16} />
-          帮助
-        </button>
+      <TooltipProvider>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="lg"
+            className="rounded-xl border-[#1b2233] bg-[#0f1521] text-[#9aa6bd] hover:bg-[#151e30] hover:text-white hover:border-[#2a3550] transition-colors"
+          >
+            <HelpCircle />
+            帮助
+          </Button>
 
-        <button className="flex h-10 w-10 items-center justify-center rounded-xl border border-[#1b2233] bg-[#0f1521] text-[#9aa6bd]">
-          <Bell size={16} />
-        </button>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="outline"
+                size="icon-lg"
+                className="rounded-xl border-[#1b2233] bg-[#0f1521] text-[#9aa6bd] hover:bg-[#151e30] hover:text-white hover:border-[#2a3550] transition-colors"
+              >
+                <Bell />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">通知</TooltipContent>
+          </Tooltip>
 
-        <div className="flex items-center gap-3 rounded-xl border border-[#1b2233] bg-[#0f1521] px-3 py-2">
-          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-500 text-sm font-bold">
-            A
-          </div>
-          <div className="hidden text-sm md:block">
-            <div className="font-semibold">管理员</div>
-            <div className="text-xs text-[#5d6880]">admin</div>
-          </div>
+          <button className="flex items-center gap-2.5 rounded-xl border border-[#1b2233] bg-[#0f1521] px-3 py-2 transition-colors hover:bg-[#151e30] hover:border-[#2a3550]">
+            <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-br from-cyan-400 to-blue-500 text-sm font-bold text-white shadow-lg shadow-cyan-500/25">
+              A
+            </div>
+            <div className="hidden text-sm md:block text-left">
+              <div className="font-semibold text-[#e9eef7]">管理员</div>
+              <div className="text-xs text-[#5d6880]">admin</div>
+            </div>
+            <ChevronDown size={14} className="hidden md:block text-[#5d6880]" />
+          </button>
         </div>
-      </div>
+      </TooltipProvider>
     </header>
   );
 }

src/components/pages/HomePage.tsx

@@ -1,4 +1,4 @@
-import { Boxes, Plus, Sparkles, Video } from "lucide-react";
+import { Boxes, Plus, Video } from "lucide-react";
 import type { NavKey } from "@/components/layout/AppShell";
 import { Button } from "@/components/ui/button";
 
@@ -6,27 +6,21 @@ type HomePageProps = {
   onNavigate: (key: NavKey) => void;
 };
 
-const stats = [
-  { label: "助手总数", value: "12", sub: "8 个运行中" },
-  { label: "今日会话", value: "2,846", sub: "较昨日 +18%" },
-  { label: "平均响应", value: "428ms", sub: "稳定" },
-  { label: "解决率", value: "86.4%", sub: "较上周 +3.2%" },
-];
-
 export function HomePage({ onNavigate }: HomePageProps) {
   return (
     <div className="mx-auto flex w-full max-w-[1180px] flex-col gap-6 pt-[4vh]">
-      <section className="rounded-[28px] border border-[#1b2233] bg-[radial-gradient(circle_at_top_left,rgba(46,161,255,.18),transparent_32%),#0d121d] p-8">
+      <section className="relative overflow-hidden rounded-3xl border border-[#1b2233] bg-[radial-gradient(circle_at_top_left,rgba(46,161,255,.18),transparent_36%),#0d121d] p-8">
         <div className="mb-8 flex items-center gap-4">
-          <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-cyan-400 text-[#04121a]">
+          <div className="relative flex h-14 w-14 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={28} />
+            <div className="absolute inset-0 rounded-2xl ring-1 ring-inset ring-white/20" />
           </div>
 
           <div>
             <div className="text-sm font-semibold text-blue-400">
               AI 视频助手 · 管理台
             </div>
-            <h1 className="mt-2 text-4xl font-bold tracking-tight">
+            <h1 className="mt-2 text-4xl font-bold tracking-tight text-[#e9eef7]">
               你好，开始管理你的智能视频助手
             </h1>
           </div>
@@ -37,14 +31,19 @@ export function HomePage({ onNavigate }: HomePageProps) {
         </p>
 
         <div className="mt-8 flex gap-3">
-          <Button className="gap-2" onClick={() => onNavigate("assistant-prompt")}>
+          <Button
+            size="lg"
+            className="rounded-xl gap-2"
+            onClick={() => onNavigate("assistant-prompt")}
+          >
             <Plus size={17} />
             创建助手
           </Button>
 
           <Button
             variant="outline"
-            className="gap-2 border-[#1b2233] bg-[#0f1521] text-[#9aa6bd] hover:bg-[#1b2233] hover:text-[#e9eef7]"
+            size="lg"
+            className="rounded-xl gap-2 border-[#1b2233] bg-[#0f1521] text-[#9aa6bd] hover:bg-[#151e30] hover:text-[#e9eef7] hover:border-[#2a3550]"
             onClick={() => onNavigate("components")}
           >
             <Boxes size={17} />
@@ -52,24 +51,6 @@ export function HomePage({ onNavigate }: HomePageProps) {
           </Button>
         </div>
       </section>
-
-      <section className="grid grid-cols-4 gap-4">
-        {stats.map((item) => (
-          <div
-            key={item.label}
-            className="rounded-2xl border border-[#1b2233] bg-[#0f1521] p-5"
-          >
-            <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-blue-500/10 text-blue-400">
-              <Sparkles size={18} />
-            </div>
-
-            <div className="text-sm text-[#5d6880]">{item.label}</div>
-            <div className="mt-2 text-2xl font-bold">{item.value}</div>
-            <div className="mt-1 text-xs text-[#5d6880]">{item.sub}</div>
-          </div>
-        ))}
-      </section>
-
     </div>
   );
-}
+}