From a804d71fae38e7e134544ea490f49244a4e5734e Mon Sep 17 00:00:00 2001
From: Xin Wang <wangx@XindeMac-mini-2.local>
Date: Fri, 5 Jun 2026 09:52:08 +0800
Subject: [PATCH] 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       |  2 +-
 src/components/layout/Topbar.tsx        |  9 +---
 src/components/pages/ComponentsPage.tsx |  4 +-
 src/components/pages/HomePage.tsx       | 69 ++++++++++++++++++++++++-
 4 files changed, 73 insertions(+), 11 deletions(-)

diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index e7d2d68..14412d6 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/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 },
diff --git a/src/components/layout/Topbar.tsx b/src/components/layout/Topbar.tsx
index 0967b13..2fb03b7 100644
--- a/src/components/layout/Topbar.tsx
+++ b/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} />
diff --git a/src/components/pages/ComponentsPage.tsx b/src/components/pages/ComponentsPage.tsx
index fc417b8..5ad8c31 100644
--- a/src/components/pages/ComponentsPage.tsx
+++ b/src/components/pages/ComponentsPage.tsx
@@ -1,3 +1,3 @@
 export function ComponentsPage() {
-    return <div className="text-3xl font-bold">组件库</div>;
-  }
\ No newline at end of file
+  return <div className="text-3xl font-bold">组件库</div>;
+}
\ No newline at end of file
diff --git a/src/components/pages/HomePage.tsx b/src/components/pages/HomePage.tsx
index 667598c..75cd3b3 100644
--- a/src/components/pages/HomePage.tsx
+++ b/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>
+  );
 }
\ No newline at end of file