diff --git a/package-lock.json b/package-lock.json index 9368e15..de2f483 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 9d4415f..67c9328 100644 --- a/package.json +++ b/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", diff --git a/src/app/page.tsx b/src/app/page.tsx index 3f36f7c..0024601 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,65 +1,5 @@ -import Image from "next/image"; +import { AppShell } from "@/components/layout/AppShell"; export default function Home() { - return ( -
-
- Next.js logo -
-

- To get started, edit the page.tsx file. -

-

- Looking for a starting point or more instructions? Head over to{" "} - - Templates - {" "} - or the{" "} - - Learning - {" "} - center. -

-
-
- - Vercel logomark - Deploy Now - - - Documentation - -
-
-
- ); -} + return ; +} \ No newline at end of file diff --git a/src/components/layout/AppShell.tsx b/src/components/layout/AppShell.tsx new file mode 100644 index 0000000..ccdf7b8 --- /dev/null +++ b/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("home"); + const [collapsed, setCollapsed] = useState(false); + + return ( +
+ setCollapsed((v) => !v)} + /> + +
+ + +
+ {active === "home" && } + {active === "assistants" && } + {active === "components" && } + {active === "history" && } + {active === "test" && } + {active === "workflow" && } + {active === "profile" && } +
+
+
+ ); +} \ No newline at end of file diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx new file mode 100644 index 0000000..e7d2d68 --- /dev/null +++ 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 ( + + ); +} \ No newline at end of file diff --git a/src/components/layout/Topbar.tsx b/src/components/layout/Topbar.tsx new file mode 100644 index 0000000..0967b13 --- /dev/null +++ b/src/components/layout/Topbar.tsx @@ -0,0 +1,33 @@ +import { Bell, HelpCircle, Search } from "lucide-react"; + +export function Topbar() { + return ( +
+
+ + 搜索助手、组件、会话记录... +
+ +
+ + + + +
+
+ A +
+
+
管理员
+
admin
+
+
+
+
+ ); +} \ No newline at end of file diff --git a/src/components/pages/AssistantPage.tsx b/src/components/pages/AssistantPage.tsx new file mode 100644 index 0000000..ab09ff8 --- /dev/null +++ b/src/components/pages/AssistantPage.tsx @@ -0,0 +1,3 @@ +export function AssistantPage() { + return
小助手管理
; + } \ No newline at end of file diff --git a/src/components/pages/ComponentsPage.tsx b/src/components/pages/ComponentsPage.tsx new file mode 100644 index 0000000..fc417b8 --- /dev/null +++ b/src/components/pages/ComponentsPage.tsx @@ -0,0 +1,3 @@ +export function ComponentsPage() { + return
组件库
; + } \ No newline at end of file diff --git a/src/components/pages/HistoryPage.tsx b/src/components/pages/HistoryPage.tsx new file mode 100644 index 0000000..dd65cf6 --- /dev/null +++ b/src/components/pages/HistoryPage.tsx @@ -0,0 +1,3 @@ +export function HistoryPage() { + return
历史记录
; + } \ No newline at end of file diff --git a/src/components/pages/HomePage.tsx b/src/components/pages/HomePage.tsx new file mode 100644 index 0000000..667598c --- /dev/null +++ b/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
控制台
; +} \ No newline at end of file diff --git a/src/components/pages/ProfilePage.tsx b/src/components/pages/ProfilePage.tsx new file mode 100644 index 0000000..0c6fef3 --- /dev/null +++ b/src/components/pages/ProfilePage.tsx @@ -0,0 +1,3 @@ +export function ProfilePage() { + return
个人中心
; + } \ No newline at end of file diff --git a/src/components/pages/TestPage.tsx b/src/components/pages/TestPage.tsx new file mode 100644 index 0000000..b134a93 --- /dev/null +++ b/src/components/pages/TestPage.tsx @@ -0,0 +1,3 @@ +export function TestPage() { + return
测试助手
; + } \ No newline at end of file diff --git a/src/components/pages/WorkflowPage.tsx b/src/components/pages/WorkflowPage.tsx new file mode 100644 index 0000000..9ce14dd --- /dev/null +++ b/src/components/pages/WorkflowPage.tsx @@ -0,0 +1,3 @@ +export function WorkflowPage() { + return
工作流
; + } \ No newline at end of file diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/data/mock.ts b/src/data/mock.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/lib/utils.ts b/src/lib/utils.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/types/index.ts b/src/types/index.ts new file mode 100644 index 0000000..e69de29