style: 重做整体视觉系统（编辑设计 × 建筑精度）

- Fraunces 衬线 display + DM Sans body + JetBrains Mono 数字标签
- 暖米白主题（#f7f4ee）+ 蓝色强调色（#2563eb）
- 引入 lucide-react 图标库替代 emoji
- Sidebar 加入编号索引、Logo、用户区域、杂志风分组标题
- 产品列表页加入大号 display 标题、搜索、卡片悬浮动画
- 产品详情页面包屑、tab 编号、需求表格重做
- 状态徽章改为色点 + 文字，"已拒绝"用红色避免与"评审中"冲突
- 全局加入 grain 噪点纹理、入场交错动画

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/web/components/product/RequirementForm.tsx

@@ -21,54 +21,69 @@ export function RequirementForm({ initialData, onSubmit, onCancel }: Props) {
   };
 
   return (
-    <form onSubmit={handleSubmit} className="space-y-4">
+    <form onSubmit={handleSubmit} className="space-y-5">
       <div>
-        <label className="block text-sm font-medium text-gray-700">
-          需求标题 <span className="text-red-500">*</span>
+        <label className="font-mono text-[10px] uppercase tracking-[0.2em] text-[var(--ink-muted)]">
+          需求标题
         </label>
         <input
           type="text"
           value={title}
           onChange={(e) => setTitle(e.target.value)}
-          className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
-          placeholder="输入需求标题"
+          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"
         />
       </div>
       <div>
-        <label className="block text-sm font-medium text-gray-700">描述</label>
+        <label className="font-mono text-[10px] uppercase tracking-[0.2em] text-[var(--ink-muted)]">
+          描述
+        </label>
         <textarea
           value={description}
           onChange={(e) => setDescription(e.target.value)}
           rows={4}
-          className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
-          placeholder="输入需求描述"
+          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"
         />
       </div>
       <div>
-        <label className="block text-sm font-medium text-gray-700">优先级</label>
-        <select
-          value={priority}
-          onChange={(e) => setPriority(Number(e.target.value))}
-          className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
-        >
-          {Object.entries(PRIORITY_LABEL).map(([value, label]) => (
-            <option key={value} value={value}>{label}</option>
-          ))}
-        </select>
+        <label className="font-mono text-[10px] uppercase tracking-[0.2em] text-[var(--ink-muted)]">
+          优先级
+        </label>
+        <div className="mt-2 flex gap-1.5">
+          {Object.entries(PRIORITY_LABEL).map(([value, label]) => {
+            const v = Number(value);
+            const active = priority === v;
+            return (
+              <button
+                key={value}
+                type="button"
+                onClick={() => setPriority(v)}
+                className={`rounded-full px-3 py-1.5 text-[12px] transition-all ${
+                  active
+                    ? 'bg-[var(--ink)] text-[var(--bg)]'
+                    : 'border border-[var(--line)] text-[var(--ink-soft)] hover:border-[var(--ink)] hover:text-[var(--ink)]'
+                }`}
+              >
+                {label}
+              </button>
+            );
+          })}
+        </div>
       </div>
-      <div className="flex justify-end gap-3">
+      <div className="flex justify-end gap-2 pt-2">
         <button
           type="button"
           onClick={onCancel}
-          className="rounded-md border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
+          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-blue-600 px-4 py-2 text-sm text-white hover:bg-blue-700"
+          className="rounded-md bg-[var(--ink)] px-5 py-2 text-[13px] font-medium text-[var(--bg)] transition-colors hover:bg-[var(--accent)]"
         >
-          {initialData ? '保存' : '创建'}
+          {initialData ? '保存修改' : '创建需求'}
         </button>
       </div>
     </form>