style: 切换为现代 SaaS Dashboard 风格（Linear/Vercel/Notion 风）

- 调色板：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>

apps/web/components/product/RequirementForm.tsx

@@ -21,36 +21,27 @@ export function RequirementForm({ initialData, onSubmit, onCancel }: Props) {
   };
 
   return (
-    <form onSubmit={handleSubmit} className="space-y-5">
-      <div>
-        <label className="font-mono text-[10px] uppercase tracking-[0.2em] text-[var(--ink-muted)]">
-          需求标题
-        </label>
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <Field label="标题" required>
         <input
           type="text"
           value={title}
           onChange={(e) => setTitle(e.target.value)}
           placeholder="一句话描述需求"
-          className="mt-2 block w-full border-0 border-b border-[var(--line)] bg-transparent pb-2 font-display text-xl text-[var(--ink)] placeholder:font-display placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:outline-none"
+          className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[13px] text-[var(--ink)] placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-ring)]"
         />
-      </div>
-      <div>
-        <label className="font-mono text-[10px] uppercase tracking-[0.2em] text-[var(--ink-muted)]">
-          描述
-        </label>
+      </Field>
+      <Field label="描述">
         <textarea
           value={description}
           onChange={(e) => setDescription(e.target.value)}
           rows={4}
           placeholder="详细说明需求背景、目标、验收标准"
-          className="mt-2 block w-full resize-none border-0 border-b border-[var(--line)] bg-transparent pb-2 text-[14px] leading-relaxed text-[var(--ink-soft)] placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:outline-none"
+          className="w-full resize-none rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 py-2 text-[13px] leading-relaxed text-[var(--ink)] placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-ring)]"
         />
-      </div>
-      <div>
-        <label className="font-mono text-[10px] uppercase tracking-[0.2em] text-[var(--ink-muted)]">
-          优先级
-        </label>
-        <div className="mt-2 flex gap-1.5">
+      </Field>
+      <Field label="优先级">
+        <div className="flex gap-1">
           {Object.entries(PRIORITY_LABEL).map(([value, label]) => {
             const v = Number(value);
             const active = priority === v;
@@ -59,10 +50,10 @@ export function RequirementForm({ initialData, onSubmit, onCancel }: Props) {
                 key={value}
                 type="button"
                 onClick={() => setPriority(v)}
-                className={`rounded-full px-3 py-1.5 text-[12px] transition-all ${
+                className={`h-7 rounded-md px-2.5 text-[12.5px] transition-colors ${
                   active
-                    ? 'bg-[var(--ink)] text-[var(--bg)]'
-                    : 'border border-[var(--line)] text-[var(--ink-soft)] hover:border-[var(--ink)] hover:text-[var(--ink)]'
+                    ? 'bg-[var(--ink)] text-white'
+                    : 'border border-[var(--line)] bg-[var(--bg-card)] text-[var(--ink-soft)] hover:border-[var(--ink-muted)] hover:text-[var(--ink)]'
                 }`}
               >
                 {label}
@@ -70,22 +61,40 @@ export function RequirementForm({ initialData, onSubmit, onCancel }: Props) {
             );
           })}
         </div>
-      </div>
-      <div className="flex justify-end gap-2 pt-2">
-        <button
-          type="button"
-          onClick={onCancel}
-          className="rounded-md px-4 py-2 text-[13px] text-[var(--ink-soft)] hover:bg-[var(--line-soft)]"
-        >
-          取消
-        </button>
-        <button
-          type="submit"
-          className="rounded-md bg-[var(--ink)] px-5 py-2 text-[13px] font-medium text-[var(--bg)] transition-colors hover:bg-[var(--accent)]"
-        >
-          {initialData ? '保存修改' : '创建需求'}
-        </button>
-      </div>
+      </Field>
+      <FormActions onCancel={onCancel} submitLabel={initialData ? '保存' : '创建'} />
     </form>
   );
 }
+
+function Field({ label, required, children }: { label: string; required?: boolean; children: React.ReactNode }) {
+  return (
+    <div>
+      <label className="mb-1.5 block text-[12px] font-medium text-[var(--ink-soft)]">
+        {label}
+        {required && <span className="ml-0.5 text-red-500">*</span>}
+      </label>
+      {children}
+    </div>
+  );
+}
+
+function FormActions({ onCancel, submitLabel }: { onCancel: () => void; submitLabel: string }) {
+  return (
+    <div className="flex justify-end gap-2 pt-2">
+      <button
+        type="button"
+        onClick={onCancel}
+        className="h-8 rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[13px] text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)] hover:text-[var(--ink)]"
+      >
+        取消
+      </button>
+      <button
+        type="submit"
+        className="h-8 rounded-lg bg-[var(--accent)] px-4 text-[13px] font-medium text-white shadow-[var(--shadow-sm)] hover:bg-[var(--accent-hover)]"
+      >
+        {submitLabel}
+      </button>
+    </div>
+  );
+}