Add admin dashboard shell with sidebar navigation and page scaffolds.

Replace the default Next.js landing page with a client-side AppShell layout, placeholder pages for each admin section, and UI utility dependencies.

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

package-lock.json

@@ -8,9 +8,12 @@
       "name": "ai-video-admin-frontend",
       "version": "0.1.0",
       "dependencies": {
+        "clsx": "^2.1.1",
+        "lucide-react": "^1.17.0",
         "next": "16.2.7",
         "react": "19.2.4",
-        "react-dom": "19.2.4"
+        "react-dom": "19.2.4",
+        "tailwind-merge": "^3.6.0"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
@@ -2771,6 +2774,15 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -5032,6 +5044,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.17.0.tgz",
+      "integrity": "sha512-9FA9evdox/JQL5PT57fdA1x/yg8T7knJ98+zjTL3UfKza6pflQUUh3XtaQIHKvnsJw1lmsEyHVlt5jchYxOQ5w==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -6242,6 +6263,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.6.0.tgz",
+      "integrity": "sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.0.tgz",

package.json

@@ -9,9 +9,12 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.17.0",
     "next": "16.2.7",
     "react": "19.2.4",
-    "react-dom": "19.2.4"
+    "react-dom": "19.2.4",
+    "tailwind-merge": "^3.6.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",

src/app/page.tsx

@@ -1,65 +1,5 @@
-import Image from "next/image";
+import { AppShell } from "@/components/layout/AppShell";
 
 export default function Home() {
-  return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
-    </div>
-  );
-}
+  return <AppShell />;
+}

src/components/layout/AppShell.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { useState } from "react";
+import { Sidebar } from "./Sidebar";
+import { Topbar } from "./Topbar";
+
+import { HomePage } from "@/components/pages/HomePage";
+import { AssistantPage } from "@/components/pages/AssistantPage";
+import { ComponentsPage } from "@/components/pages/ComponentsPage";
+import { HistoryPage } from "@/components/pages/HistoryPage";
+import { TestPage } from "@/components/pages/TestPage";
+import { WorkflowPage } from "@/components/pages/WorkflowPage";
+import { ProfilePage } from "@/components/pages/ProfilePage";
+
+export type NavKey =
+  | "home"
+  | "assistants"
+  | "components"
+  | "history"
+  | "test"
+  | "workflow"
+  | "profile";
+
+export function AppShell() {
+  const [active, setActive] = useState<NavKey>("home");
+  const [collapsed, setCollapsed] = useState(false);
+
+  return (
+    <div className="flex h-screen overflow-hidden bg-[#080b13] text-[#e9eef7]">
+      <Sidebar
+        active={active}
+        collapsed={collapsed}
+        onNavigate={setActive}
+        onToggle={() => setCollapsed((v) => !v)}
+      />
+
+      <main className="flex min-w-0 flex-1 flex-col overflow-hidden">
+        <Topbar />
+
+        <div className="flex-1 overflow-y-auto px-8 py-7">
+          {active === "home" && <HomePage />}
+          {active === "assistants" && <AssistantPage />}
+          {active === "components" && <ComponentsPage />}
+          {active === "history" && <HistoryPage />}
+          {active === "test" && <TestPage />}
+          {active === "workflow" && <WorkflowPage />}
+          {active === "profile" && <ProfilePage />}
+        </div>
+      </main>
+    </div>
+  );
+}

src/components/layout/Sidebar.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import {
+  Bot,
+  Boxes,
+  ChevronLeft,
+  Clock3,
+  Home,
+  PlayCircle,
+  User,
+  Video,
+  Workflow,
+} from "lucide-react";
+import type { NavKey } from "./AppShell";
+
+const navItems: Array<{
+  key: NavKey;
+  label: string;
+  icon: React.ComponentType<{ size?: number }>;
+}> = [
+  { key: "home", label: "控制台", icon: Home },
+  { key: "assistants", label: "小助手管理", icon: Bot },
+  { key: "components", label: "组件库", icon: Boxes },
+  { key: "history", label: "历史记录", icon: Clock3 },
+  { key: "test", label: "测试助手", icon: PlayCircle },
+  { key: "workflow", label: "工作流", icon: Workflow },
+  { key: "profile", label: "个人中心", icon: User },
+];
+
+type SidebarProps = {
+  active: NavKey;
+  collapsed: boolean;
+  onNavigate: (key: NavKey) => void;
+  onToggle: () => void;
+};
+
+export function Sidebar({
+  active,
+  collapsed,
+  onNavigate,
+  onToggle,
+}: SidebarProps) {
+  return (
+    <aside
+      className={[
+        "flex shrink-0 flex-col border-r border-[#161d2c] bg-[#0a0e17] 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="flex h-11 w-11 items-center justify-center rounded-2xl bg-cyan-400 text-[#04121a]">
+          <Video size={24} />
+        </div>
+
+        {!collapsed && (
+          <div>
+            <div className="text-sm font-bold">AI 视频助手</div>
+            <div className="text-xs text-[#5d6880]">管理台</div>
+          </div>
+        )}
+      </div>
+
+      <nav className="flex-1 space-y-1 px-3 py-4">
+        {navItems.map((item) => {
+          const Icon = item.icon;
+          const isActive = active === item.key;
+
+          return (
+            <button
+              key={item.key}
+              onClick={() => onNavigate(item.key)}
+              className={[
+                "flex h-11 w-full items-center gap-3 rounded-xl px-3 text-sm transition",
+                isActive
+                  ? "bg-blue-500/15 text-blue-400"
+                  : "text-[#9aa6bd] hover:bg-white/5 hover:text-white",
+                collapsed ? "justify-center" : "",
+              ].join(" ")}
+            >
+              <Icon size={18} />
+              {!collapsed && <span>{item.label}</span>}
+            </button>
+          );
+        })}
+      </nav>
+
+      <div className="border-t border-[#161d2c] 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"
+        >
+          <ChevronLeft
+            size={18}
+            className={collapsed ? "rotate-180 transition" : "transition"}
+          />
+        </button>
+      </div>
+    </aside>
+  );
+}

src/components/layout/Topbar.tsx

@@ -0,0 +1,33 @@
+import { Bell, HelpCircle, Search } 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>
+
+      <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>
+
+        <button className="flex h-10 w-10 items-center justify-center rounded-xl border border-[#1b2233] bg-[#0f1521] text-[#9aa6bd]">
+          <Bell size={16} />
+        </button>
+
+        <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>
+        </div>
+      </div>
+    </header>
+  );
+}

src/components/pages/AssistantPage.tsx

@@ -0,0 +1,3 @@
+export function AssistantPage() {
+    return <div className="text-3xl font-bold">小助手管理</div>;
+  }

src/components/pages/ComponentsPage.tsx

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

src/components/pages/HistoryPage.tsx

@@ -0,0 +1,3 @@
+export function HistoryPage() {
+    return <div className="text-3xl font-bold">历史记录</div>;
+  }

src/components/pages/HomePage.tsx

@@ -0,0 +1,9 @@
+import type { NavKey } from "@/components/layout/AppShell";
+
+type HomePageProps = {
+  onNavigate: (key: NavKey) => void;
+};
+
+export function HomePage({ onNavigate }: HomePageProps) {
+  return <div className="text-3xl font-bold">控制台</div>;
+}

src/components/pages/ProfilePage.tsx

@@ -0,0 +1,3 @@
+export function ProfilePage() {
+    return <div className="text-3xl font-bold">个人中心</div>;
+  }

src/components/pages/TestPage.tsx

@@ -0,0 +1,3 @@
+export function TestPage() {
+    return <div className="text-3xl font-bold">测试助手</div>;
+  }

src/components/pages/WorkflowPage.tsx

@@ -0,0 +1,3 @@
+export function WorkflowPage() {
+    return <div className="text-3xl font-bold">工作流</div>;
+  }