Refactor frontend routing and component structure for improved navigation
- Update CLAUDE.md to reflect changes in the navigation model, emphasizing the use of App Router routes for sidebar sections. - Refactor layout.tsx to wrap children in AppShell, enhancing the overall layout structure. - Replace AppShell usage in page.tsx with HomePage component for better separation of concerns. - Introduce new pages for assistants, components, dashboard, history, profile, and test, each rendering their respective components. - Revise Sidebar component to utilize Next.js Link for navigation and improve active state handling based on the current pathname. - Update AssistantPage to support routing-driven modes (list, choose, edit) and streamline form handling for assistant creation and editing.
This commit is contained in:
Xin Wang
@@ -1,11 +1,12 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import {
|
||||
Bot,
|
||||
Boxes,
|
||||
Brain,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Clock3,
|
||||
Database,
|
||||
Wrench,
|
||||
@@ -13,55 +14,38 @@ import {
|
||||
PlayCircle,
|
||||
Video,
|
||||
} from "lucide-react";
|
||||
import type { NavKey } from "./AppShell";
|
||||
|
||||
type SidebarProps = {
|
||||
active: NavKey;
|
||||
collapsed: boolean;
|
||||
onNavigate: (key: NavKey) => void;
|
||||
onToggle: () => void;
|
||||
};
|
||||
|
||||
const mainItems: Array<{
|
||||
key: NavKey;
|
||||
type NavItem = {
|
||||
href: string;
|
||||
label: string;
|
||||
icon: React.ComponentType<{ size?: number; className?: string }>;
|
||||
}> = [
|
||||
{ key: "home", label: "首页", icon: Home },
|
||||
{ key: "test", label: "测试助手", icon: PlayCircle },
|
||||
};
|
||||
|
||||
const componentSubItems: NavItem[] = [
|
||||
{ href: "/components/models", label: "模型资源", icon: Brain },
|
||||
{ href: "/components/knowledge", label: "知识库", icon: Database },
|
||||
{ href: "/components/tools", label: "工具资源", icon: Wrench },
|
||||
];
|
||||
|
||||
const componentSubItems: Array<{
|
||||
key: NavKey;
|
||||
label: string;
|
||||
icon: React.ComponentType<{ size?: number; className?: string }>;
|
||||
}> = [
|
||||
{ key: "components-models", label: "模型资源", icon: Brain },
|
||||
{ key: "components-knowledge", label: "知识库", icon: Database },
|
||||
{ key: "components-tools", label: "工具资源", icon: Wrench },
|
||||
const monitorSubItems: NavItem[] = [
|
||||
{ href: "/history", label: "历史记录", icon: Clock3 },
|
||||
{ href: "/dashboard", label: "数据看板", icon: Database },
|
||||
];
|
||||
|
||||
const monitorSubItems: Array<{
|
||||
key: NavKey;
|
||||
label: string;
|
||||
icon: React.ComponentType<{ size?: number; className?: string }>;
|
||||
}> = [
|
||||
{ key: "history", label: "历史记录", icon: Clock3 },
|
||||
{ key: "dashboard", label: "数据看板", icon: Database },
|
||||
];
|
||||
export function Sidebar({ collapsed, onToggle }: SidebarProps) {
|
||||
const pathname = usePathname();
|
||||
|
||||
export function Sidebar({
|
||||
active,
|
||||
collapsed,
|
||||
onNavigate,
|
||||
onToggle,
|
||||
}: SidebarProps) {
|
||||
const assistantActive = active === "assistants";
|
||||
// 精确匹配或前缀匹配(带 / 边界),让 /assistants/xxx 也高亮"创建助手"
|
||||
const isActive = (href: string) =>
|
||||
pathname === href || pathname.startsWith(`${href}/`);
|
||||
|
||||
const componentActive =
|
||||
active === "components-models" || active === "components-knowledge" || active === "components-tools";
|
||||
|
||||
const monitorActive = monitorSubItems.some((item) => item.key === active);
|
||||
const componentActive = componentSubItems.some((item) => isActive(item.href));
|
||||
const monitorActive = monitorSubItems.some((item) => isActive(item.href));
|
||||
|
||||
return (
|
||||
<aside
|
||||
@@ -97,19 +81,19 @@ export function Sidebar({
|
||||
<nav className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden px-3 py-5 pr-2 [scrollbar-width:thin] [scrollbar-color:var(--hairline-strong)_transparent]">
|
||||
<div className="space-y-1">
|
||||
<NavButton
|
||||
active={active === "home"}
|
||||
active={pathname === "/"}
|
||||
collapsed={collapsed}
|
||||
icon={Home}
|
||||
label="首页"
|
||||
onClick={() => onNavigate("home")}
|
||||
href="/"
|
||||
/>
|
||||
<div className="pt-2">
|
||||
<NavButton
|
||||
active={assistantActive}
|
||||
active={isActive("/assistants")}
|
||||
collapsed={collapsed}
|
||||
icon={Bot}
|
||||
label="创建助手"
|
||||
onClick={() => onNavigate("assistants")}
|
||||
href="/assistants"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -142,12 +126,12 @@ export function Sidebar({
|
||||
>
|
||||
{componentSubItems.map((item) => (
|
||||
<NavButton
|
||||
key={item.key}
|
||||
active={active === item.key}
|
||||
key={item.href}
|
||||
active={isActive(item.href)}
|
||||
collapsed={collapsed}
|
||||
icon={item.icon}
|
||||
label={item.label}
|
||||
onClick={() => onNavigate(item.key)}
|
||||
href={item.href}
|
||||
small
|
||||
/>
|
||||
))}
|
||||
@@ -184,28 +168,25 @@ export function Sidebar({
|
||||
>
|
||||
{monitorSubItems.map((item) => (
|
||||
<NavButton
|
||||
key={item.key}
|
||||
active={active === item.key}
|
||||
key={item.href}
|
||||
active={isActive(item.href)}
|
||||
collapsed={collapsed}
|
||||
icon={item.icon}
|
||||
label={item.label}
|
||||
onClick={() => onNavigate(item.key)}
|
||||
href={item.href}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-2">
|
||||
{mainItems.slice(1).map((item) => (
|
||||
<NavButton
|
||||
key={item.key}
|
||||
active={active === item.key}
|
||||
collapsed={collapsed}
|
||||
icon={item.icon}
|
||||
label={item.label}
|
||||
onClick={() => onNavigate(item.key)}
|
||||
/>
|
||||
))}
|
||||
<NavButton
|
||||
active={isActive("/test")}
|
||||
collapsed={collapsed}
|
||||
icon={PlayCircle}
|
||||
label="测试助手"
|
||||
href="/test"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -213,12 +194,12 @@ export function Sidebar({
|
||||
|
||||
<div className="shrink-0 space-y-2 border-t border-sidebar-border bg-sidebar p-3 shadow-[0_-12px_24px_rgba(0,0,0,0.12)]">
|
||||
{/* 个人中心 */}
|
||||
<button
|
||||
onClick={() => onNavigate("profile")}
|
||||
<Link
|
||||
href="/profile"
|
||||
title={collapsed ? "个人中心 · 管理员" : undefined}
|
||||
className={[
|
||||
"group relative flex w-full items-center overflow-hidden rounded-2xl border py-2 text-left transition-[background-color,color,border-color,box-shadow,transform] duration-200 active:scale-[0.98]",
|
||||
active === "profile"
|
||||
isActive("/profile")
|
||||
? "border-sidebar-border bg-sidebar-accent text-sidebar-accent-foreground shadow-sm"
|
||||
: "border-transparent text-muted-foreground hover:border-sidebar-border hover:bg-sidebar-accent/60 hover:text-foreground hover:shadow-sm",
|
||||
collapsed ? "justify-center gap-0 px-0" : "gap-3 px-2.5",
|
||||
@@ -251,7 +232,7 @@ export function Sidebar({
|
||||
管理员
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</Link>
|
||||
|
||||
{/* 收起 / 展开侧栏 */}
|
||||
<button
|
||||
@@ -288,19 +269,19 @@ function NavButton({
|
||||
collapsed,
|
||||
icon: Icon,
|
||||
label,
|
||||
onClick,
|
||||
href,
|
||||
small = false,
|
||||
}: {
|
||||
active: boolean;
|
||||
collapsed: boolean;
|
||||
icon: React.ComponentType<{ size?: number; className?: string }>;
|
||||
label: string;
|
||||
onClick: () => void;
|
||||
href: string;
|
||||
small?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
<Link
|
||||
href={href}
|
||||
title={collapsed ? label : undefined}
|
||||
className={[
|
||||
"group mt-1 flex w-full items-center overflow-hidden rounded-full text-sm transition-[background-color,color,transform] duration-200 active:scale-[0.98]",
|
||||
@@ -323,6 +304,6 @@ function NavButton({
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
</button>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user