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>
27 lines
904 B
TypeScript
27 lines
904 B
TypeScript
'use client';
|
|
|
|
import { RequirementStatus } from '@ftb/shared';
|
|
import { REQUIREMENT_STATUS_LABEL } from '@/lib/constants';
|
|
|
|
interface Props {
|
|
status: RequirementStatus;
|
|
}
|
|
|
|
const STATUS_STYLES: Record<RequirementStatus, string> = {
|
|
[RequirementStatus.DRAFT]: 'bg-zinc-100 text-zinc-700 ring-zinc-200',
|
|
[RequirementStatus.REVIEWING]: 'bg-blue-50 text-blue-700 ring-blue-200',
|
|
[RequirementStatus.APPROVED]: 'bg-emerald-50 text-emerald-700 ring-emerald-200',
|
|
[RequirementStatus.REJECTED]: 'bg-red-50 text-red-700 ring-red-200',
|
|
[RequirementStatus.DELIVERED]: 'bg-violet-50 text-violet-700 ring-violet-200',
|
|
};
|
|
|
|
export function RequirementStatusBadge({ status }: Props) {
|
|
return (
|
|
<span
|
|
className={`inline-flex items-center rounded-md px-1.5 py-0.5 text-[11px] font-medium ring-1 ring-inset ${STATUS_STYLES[status]}`}
|
|
>
|
|
{REQUIREMENT_STATUS_LABEL[status]}
|
|
</span>
|
|
);
|
|
}
|