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>
2026-06-05 07:42:45 +08:00
parent 135955fa75
commit bcb6adcba4
17 changed files with 251 additions and 65 deletions
--- a/src/components/layout/Sidebar.tsx
+++ b/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>
+  );
+}