Blizzard
72bd43965f
把"手搓内联 class + Unicode 字符图标"换成统一组件与真实图标，为后续工业化打底。 - 依赖：装 lucide-react（描线图标，按需 tree-shake） - 令牌：tailwind.config 加语义色 brand/accent/success/warn/danger + 圆角档位； 强调色字面量(violet/cyan/emerald…)收敛到令牌，便于整体换肤 - primitives（src/ui，零重依赖自建）：Button/Input/Textarea/Select/Field/Card/Panel/ Badge/Dot/Tabs/Skeleton/EmptyState/Dialog/Toast(+useToast)/cn，桶文件统一引入 - 迁移：TopBar/LeftNav/BottomDrawer + Home/Report/Runs/Kb/Placeholder/ExecTrace/ MemoryPanel/StudioView 全部换 primitives + lucide 图标；导航/能力卡/按钮告别 ▤◆▣▦ 等 Unicode 字符；错误改用全局 Toast；空状态用 EmptyState - App 包 ToastProvider 验证：tsc + vite build 通过；浏览器(Preview)走查工作台/报告页——真实图标、统一卡片/ 按钮/输入；跑报告端到端正常（执行轨迹 lucide 状态图标点亮、章节耗时/字数/检索片段、 完成弹 Toast + 下载 Word）。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
72 lines
2.7 KiB
TypeScript
72 lines
2.7 KiB
TypeScript
import {
|
|
LayoutDashboard,
|
|
Workflow,
|
|
Database,
|
|
FileText,
|
|
Activity,
|
|
Bookmark,
|
|
Boxes,
|
|
Settings,
|
|
type LucideIcon,
|
|
} from "lucide-react";
|
|
import { cn } from "../ui";
|
|
|
|
export type ViewKey = "home" | "studio" | "kb" | "report" | "runs" | "memory" | "market" | "admin";
|
|
|
|
interface Item {
|
|
key: ViewKey;
|
|
label: string;
|
|
icon: LucideIcon;
|
|
group?: string;
|
|
ready?: boolean;
|
|
}
|
|
|
|
const ITEMS: Item[] = [
|
|
{ key: "home", label: "工作台", icon: LayoutDashboard, ready: true },
|
|
{ key: "studio", label: "编排", icon: Workflow, group: "BUILD", ready: true },
|
|
{ key: "kb", label: "知识库", icon: Database, group: "BUILD", ready: true },
|
|
{ key: "report", label: "报告", icon: FileText, group: "BUILD", ready: true },
|
|
{ key: "runs", label: "运行", icon: Activity, group: "RUN", ready: true },
|
|
{ key: "memory", label: "记忆", icon: Bookmark, group: "MANAGE", ready: true },
|
|
{ key: "market", label: "市场", icon: Boxes, group: "MANAGE" },
|
|
{ key: "admin", label: "管理", icon: Settings, group: "MANAGE" },
|
|
];
|
|
|
|
// 左导航：深色，激活态紫色高亮 + 左侧光条，描线图标。
|
|
export function LeftNav({ active, onSelect }: { active: ViewKey; onSelect: (v: ViewKey) => void }) {
|
|
let lastGroup: string | undefined;
|
|
return (
|
|
<nav className="flex w-[68px] shrink-0 flex-col gap-0.5 border-r border-line bg-ink-900 py-2">
|
|
{ITEMS.map((it) => {
|
|
const header = it.group && it.group !== lastGroup ? it.group : null;
|
|
lastGroup = it.group ?? lastGroup;
|
|
const isActive = active === it.key;
|
|
const Icon = it.icon;
|
|
return (
|
|
<div key={it.key}>
|
|
{header && <div className="mt-3 px-2 text-[9px] font-semibold tracking-widest text-slate-600">{header}</div>}
|
|
<button
|
|
onClick={() => onSelect(it.key)}
|
|
className={cn(
|
|
"relative flex w-full flex-col items-center gap-1 py-2.5 text-[11px] transition",
|
|
isActive ? "text-brand-400" : "text-slate-500 hover:bg-ink-800 hover:text-slate-300",
|
|
)}
|
|
title={it.ready === false ? `${it.label}（规划中）` : it.label}
|
|
>
|
|
{isActive && (
|
|
<span className="absolute left-0 top-1/2 h-6 w-0.5 -translate-y-1/2 rounded-r bg-gradient-to-b from-brand-400 to-accent-400" />
|
|
)}
|
|
<Icon
|
|
className={cn("h-[18px] w-[18px]", isActive && "drop-shadow-[0_0_6px_rgba(139,92,246,0.6)]")}
|
|
strokeWidth={isActive ? 2.2 : 1.8}
|
|
/>
|
|
{it.label}
|
|
{it.ready === false && <span className="text-[8px] text-slate-600">规划</span>}
|
|
</button>
|
|
</div>
|
|
);
|
|
})}
|
|
</nav>
|
|
);
|
|
}
|