feat(ui): [UI7-1] 构建通用原子UI组件与业务Hooks

client/src/components/common/StatusBadge.tsx

@@ -0,0 +1,41 @@
+// 状态气泡组件
+import { cn } from "../../lib/utils";
+
+const STATUS_MAP: Record<string, { label: string; className: string }> = {
+  draft: { label: "草稿", className: "badge-neutral bg-zinc-200/50" },
+  reviewing: { label: "审批中", className: "badge-warning" },
+  pending: { label: "处理中", className: "badge-warning" },
+  pending_ocr: { label: "识别中", className: "badge-warning" },
+  approved: { label: "已通过", className: "badge-success" },
+  completed: { label: "已完成", className: "badge-success" },
+  available: { label: "可用", className: "badge-success" },
+  active: { label: "生效中", className: "badge-success" },
+  paid: { label: "已支付", className: "badge-success" },
+  bound: { label: "已绑定", className: "badge-success" },
+  rejected: { label: "已驳回", className: "badge-error" },
+  ocr_failed: { label: "识别失败", className: "badge-error" },
+  cancelled: { label: "已取消", className: "badge-neutral" },
+  archived: { label: "已归档", className: "badge-neutral" },
+  skipped: { label: "已跳过", className: "badge-neutral" },
+  revoked: { label: "已撤销", className: "badge-neutral" },
+  expired: { label: "已过期", className: "badge-neutral" },
+  scheduled: { label: "已排期", className: "badge-primary" },
+};
+
+export function StatusBadge({
+  status,
+  label,
+  className,
+}: {
+  status: string;
+  label?: string;
+  className?: string;
+}) {
+  const config = STATUS_MAP[status] || { label: status, className: "badge-neutral" };
+
+  return (
+    <span className={cn(config.className, className)}>
+      {label ?? config.label}
+    </span>
+  );
+}