Build out home dashboard and simplify topbar layout.

Add hero section with stats and quick actions on the home page, remove the unused topbar search bar, and rename the assistants nav item.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/components/layout/Sidebar.tsx

@@ -19,7 +19,7 @@ const navItems: Array<{
   icon: React.ComponentType<{ size?: number }>;
 }> = [
   { key: "home", label: "控制台", icon: Home },
-  { key: "assistants", label: "小助手管理", icon: Bot },
+  { key: "assistants", label: "创建助手", icon: Bot },
   { key: "components", label: "组件库", icon: Boxes },
   { key: "history", label: "历史记录", icon: Clock3 },
   { key: "test", label: "测试助手", icon: PlayCircle },

src/components/layout/Topbar.tsx

@@ -1,13 +1,8 @@
-import { Bell, HelpCircle, Search } from "lucide-react";
+import { Bell, HelpCircle } from "lucide-react";
 
 export function Topbar() {
   return (
-    <header className="flex h-[81px] shrink-0 items-center justify-between border-b border-[#161d2c] bg-[#080b13] px-8">
-      <div className="flex h-10 w-[360px] items-center gap-3 rounded-xl border border-[#1b2233] bg-[#0f1521] px-4 text-sm text-[#5d6880]">
-        <Search size={16} />
-        <span>搜索助手、组件、会话记录...</span>
-      </div>
-
+    <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} />

src/components/pages/ComponentsPage.tsx

@@ -1,3 +1,3 @@
 export function ComponentsPage() {
-    return <div className="text-3xl font-bold">组件库</div>;
-  }
+  return <div className="text-3xl font-bold">组件库</div>;
+}

src/components/pages/HomePage.tsx

@@ -1,9 +1,76 @@
+import { Boxes, Plus, Sparkles, Video } from "lucide-react";
 import type { NavKey } from "@/components/layout/AppShell";
 
 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="text-3xl font-bold">控制台</div>;
+  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">
+        <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]">
+            <Video size={28} />
+          </div>
+
+          <div>
+            <div className="text-sm font-semibold text-blue-400">
+              AI 视频助手 · 管理台
+            </div>
+            <h1 className="mt-2 text-4xl font-bold tracking-tight">
+              你好，开始管理你的智能视频助手
+            </h1>
+          </div>
+        </div>
+
+        <p className="max-w-2xl text-[15px] leading-7 text-[#9aa6bd]">
+          在这里创建、配置、测试并发布 AI 视频助手，统一管理模型、语音识别、声音资源、知识库与工具插件。
+        </p>
+
+        <div className="mt-8 flex gap-3">
+          <button
+            onClick={() => onNavigate("assistants")}
+            className="flex h-11 items-center gap-2 rounded-xl bg-blue-500 px-5 text-sm font-semibold text-white shadow-[0_8px_24px_rgba(29,123,255,.35)]"
+          >
+            <Plus size={17} />
+            创建助手
+          </button>
+
+          <button
+            onClick={() => onNavigate("components")}
+            className="flex h-11 items-center gap-2 rounded-xl border border-[#1b2233] bg-[#0f1521] px-5 text-sm font-semibold text-[#9aa6bd]"
+          >
+            <Boxes size={17} />
+            配置组件
+          </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>
+  );
 }