前端开发指南

状态：Current

最后核对：2026-05-13

技术栈

• Next.js App Router。
• Tailwind CSS。
• src/components/ui 下的 shadcn/ui 源组件。
• lucide-react 图标。
• src/i18n 本地 JSON。
• src/lib/api.ts API helper。

优先使用现有组件和 helper。

布局规则

• Dashboard 页面使用现有 sidebar/header shell。
• 优先使用紧凑运维布局，避免营销式大块内容。
• 避免 card 套 card。
• dialog 需要可访问标题。
• 使用 text-muted-foreground、bg-card、border-border 等语义 token。

表格规则

• 状态列使用单个 size-2 圆点，不在普通状态单元格里重复状态文本。
• 表格名称列不要用 font-medium。
• 普通元数据不要滥用 Badge。
• 表格里不要使用 text-[10px] 或 text-[11px]。
• row action 使用 icon button，并提供 aria-label。

表单与 i18n

• label 简洁稳定。
• 使用现有 Input、Select、Switch、Tabs、Dialog、Button。
• 新增用户可见字符串时，同步更新 en.json、zh-CN.json。
• mutating action 需要 success/error toast。

评审清单

• 表格遵守状态、名称、Badge、字号和 endpoint 规则。
• icon-only button 有可访问名称。
• 新字符串已本地化。
• 写操作有反馈。