feat(版本详情): 完善任务流程与风险预警

apps/web/components/dev-task/CategoryChip.tsx

@@ -1,13 +1,25 @@
 'use client';
 
+import type { CSSProperties } from 'react';
 import type { TaskCategory } from '@/lib/task-category';
 
-export function CategoryChip({ category }: { category?: TaskCategory }) {
-  if (!category) return <span className="text-[11px] text-[var(--ink-muted)]">未分类</span>;
+export function CategoryChip({ category, widthEm }: { category?: TaskCategory; widthEm?: number }) {
+  const widthStyle: CSSProperties = widthEm ? { width: `${widthEm}em` } : {};
+  if (!category) {
+    return (
+      <span
+        className="inline-flex h-5 shrink-0 items-center justify-center whitespace-nowrap rounded px-1.5 text-[10px] font-medium text-[var(--ink-muted)]"
+        style={widthStyle}
+      >
+        未分类
+      </span>
+    );
+  }
   return (
     <span
-      className="inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium"
+      className="inline-flex h-5 shrink-0 items-center justify-center whitespace-nowrap rounded px-1.5 text-[10px] font-medium"
       style={{
+        ...widthStyle,
         backgroundColor: category.color ? `${category.color}15` : 'var(--bg-subtle)',
         color: category.color || 'var(--ink-soft)',
       }}