freedakgmail
33b4c734aa
后端: - 新增认证(auth)、任务(tasks)、映射(mappings)、对账(reconciliation)、异常(exceptions)、导出(exports) API - 新增核心模块: database, security, permissions, tenant, exceptions, error_handlers - 新增数据模型: user, company, reconciliation_task, field_mapping, uploaded_file 等 - 新增服务层: ai_recognizer, file_parser, file_storage, mapping, reconciliation 等 - 添加数据库迁移脚本 前端: - 新增登录页面和仪表盘页面 - 新增任务列表、任务详情、字段映射页面 - 新增异常处理页面和规则设置页面 - 新增 API 代理路由 /api/[...path] - 新增 UI 组件库 (button, card, dialog, input, table 等) - 新增 auth 组件 (ProtectedRoute, PermissionGate) - 新增 layout 组件 (Header, Sidebar) - 新增 mapping 组件 (FieldMappingTable, AISuggestionPanel) - 新增 API 客户端和 hooks (useAsync, useToast, usePermission 等) - 新增状态管理 (auth-store, company-store, ui-store) - 集成 Tailwind CSS 和 shadcn/ui 组件库 其他: - 添加 Alembic 数据库迁移配置 - 添加初始化示例数据脚本 - 更新项目文档
105 lines
3.0 KiB
TypeScript
105 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { motion } from "motion/react";
|
|
import {
|
|
LayoutDashboard,
|
|
FileText,
|
|
AlertTriangle,
|
|
Settings,
|
|
ChevronLeft,
|
|
ChevronRight
|
|
} from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import { useState } from "react";
|
|
|
|
const navItems = [
|
|
{
|
|
label: "工作台",
|
|
href: "/dashboard",
|
|
icon: LayoutDashboard
|
|
},
|
|
{
|
|
label: "对账任务",
|
|
href: "/tasks",
|
|
icon: FileText
|
|
},
|
|
{
|
|
label: "异常处理",
|
|
href: "/exceptions",
|
|
icon: AlertTriangle
|
|
},
|
|
{
|
|
label: "规则设置",
|
|
href: "/settings/rules",
|
|
icon: Settings
|
|
},
|
|
];
|
|
|
|
export function Sidebar() {
|
|
const pathname = usePathname();
|
|
const [collapsed, setCollapsed] = useState(false);
|
|
|
|
return (
|
|
<aside
|
|
className={cn(
|
|
"sticky top-14 h-[calc(100vh-3.5rem)] border-r border-border bg-background transition-all duration-300 flex flex-col",
|
|
collapsed ? "w-16" : "w-56"
|
|
)}
|
|
>
|
|
{/* Navigation */}
|
|
<nav className="flex-1 p-3 space-y-1">
|
|
{navItems.map((item) => {
|
|
const isActive = pathname === item.href || pathname.startsWith(item.href + "/");
|
|
const Icon = item.icon;
|
|
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={cn(
|
|
"flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all relative group",
|
|
isActive
|
|
? "bg-primary/10 text-primary"
|
|
: "text-muted-foreground hover:bg-muted hover:text-foreground",
|
|
collapsed && "justify-center px-0"
|
|
)}
|
|
>
|
|
{isActive && (
|
|
<motion.div
|
|
layoutId="activeNav"
|
|
className="absolute inset-0 bg-primary/10 rounded-lg -z-10"
|
|
transition={{ type: "spring", bounce: 0.2, duration: 0.4 }}
|
|
/>
|
|
)}
|
|
<Icon className={cn("w-5 h-5 shrink-0", isActive && "text-primary")} />
|
|
{!collapsed && (
|
|
<span className="text-body font-medium">{item.label}</span>
|
|
)}
|
|
|
|
{/* Tooltip for collapsed state */}
|
|
{collapsed && (
|
|
<div className="absolute left-full ml-2 px-2 py-1 bg-foreground text-background text-xs rounded opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50">
|
|
{item.label}
|
|
</div>
|
|
)}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
{/* Collapse toggle */}
|
|
<button
|
|
onClick={() => setCollapsed(!collapsed)}
|
|
className="flex items-center justify-center h-10 border-t border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
|
|
>
|
|
{collapsed ? (
|
|
<ChevronRight className="w-4 h-4" />
|
|
) : (
|
|
<ChevronLeft className="w-4 h-4" />
|
|
)}
|
|
</button>
|
|
</aside>
|
|
);
|
|
} |