e0120c470c
- 调色板：zinc 中性色 + 冷静蓝色（#3b82f6）+ 卡片阴影 token - Sidebar：紧凑 60 宽度，加入顶部搜索框，分组导航，圆角 8px - 卡片：rounded-2xl + shadow-sm/md，留白节奏统一 - 表格：圆角卡片包裹，灰色表头小写大写字母 tracking - 表单：h-9 输入框，圆角 8px，focus ring 用半透明蓝 - 按钮分级：实心蓝（主操作）/ 边框白底（次操作）/ 暗黑实心（对比强调） - 状态徽章：ring-1 inset 内边框，色板更柔和 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
92 lines
3.6 KiB
TypeScript
92 lines
3.6 KiB
TypeScript
'use client';
|
|
|
|
import { usePathname, useRouter } from 'next/navigation';
|
|
import { Inbox, Package, FolderKanban, Tag, Users, LayoutGrid, Search } from 'lucide-react';
|
|
|
|
const NAV_GROUPS = [
|
|
{
|
|
label: '工作区',
|
|
items: [
|
|
{ label: '与我相关', path: '/workspace', icon: Inbox },
|
|
{ label: '产品', path: '/products', icon: Package },
|
|
{ label: '项目', path: '/projects', icon: FolderKanban },
|
|
{ label: '版本', path: '/versions', icon: Tag },
|
|
],
|
|
},
|
|
{
|
|
label: '管理',
|
|
items: [
|
|
{ label: '成员', path: '/admin/members', icon: Users },
|
|
],
|
|
},
|
|
];
|
|
|
|
export function Sidebar() {
|
|
const pathname = usePathname();
|
|
const router = useRouter();
|
|
|
|
const isActive = (path: string) =>
|
|
pathname === path || (path !== '/' && pathname.startsWith(path));
|
|
|
|
return (
|
|
<aside className="flex h-screen w-60 flex-col border-r border-[var(--line)] bg-[var(--bg-card)]">
|
|
<div className="flex h-14 items-center gap-2 px-4">
|
|
<div className="flex h-7 w-7 items-center justify-center rounded-lg bg-[var(--accent)]">
|
|
<LayoutGrid className="h-4 w-4 text-white" strokeWidth={2.25} />
|
|
</div>
|
|
<span className="text-[14px] font-semibold tracking-tight text-[var(--ink)]">FTB</span>
|
|
</div>
|
|
|
|
<div className="px-3 pb-2">
|
|
<div className="relative">
|
|
<Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-[var(--ink-muted)]" strokeWidth={2} />
|
|
<input
|
|
placeholder="搜索"
|
|
className="h-8 w-full rounded-lg border border-[var(--line)] bg-[var(--bg-subtle)] pl-8 pr-2 text-[12.5px] text-[var(--ink)] placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:bg-[var(--bg-card)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-ring)]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<nav className="flex-1 px-2 pt-2">
|
|
{NAV_GROUPS.map((group) => (
|
|
<div key={group.label} className="mb-4">
|
|
<p className="mb-1 px-2 text-[11px] font-medium text-[var(--ink-muted)]">
|
|
{group.label}
|
|
</p>
|
|
{group.items.map((item) => {
|
|
const Icon = item.icon;
|
|
const active = isActive(item.path);
|
|
return (
|
|
<button
|
|
key={item.path}
|
|
onClick={() => router.push(item.path)}
|
|
className={`flex w-full items-center gap-2.5 rounded-lg px-2 py-1.5 text-left text-[13px] transition-colors ${
|
|
active
|
|
? 'bg-[var(--accent-soft)] font-medium text-[var(--accent-hover)]'
|
|
: 'text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)] hover:text-[var(--ink)]'
|
|
}`}
|
|
>
|
|
<Icon className="h-4 w-4 shrink-0" strokeWidth={1.75} />
|
|
<span className="truncate">{item.label}</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="border-t border-[var(--line)] p-2">
|
|
<button className="flex w-full items-center gap-2.5 rounded-lg px-2 py-1.5 text-left transition-colors hover:bg-[var(--bg-subtle)]">
|
|
<div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-[var(--accent)] text-[11px] font-semibold text-white">
|
|
A
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="truncate text-[13px] font-medium text-[var(--ink)]">Admin</p>
|
|
<p className="truncate text-[11px] text-[var(--ink-muted)]">管理员</p>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|