feat(web): 重做设计系统与全部页面，前端观感对齐当下审美

用户反馈"UI 太丑、太简陋"。不是换配色，而是先立 token 再让页面去用：

- tailwind.config.js：纸白 paper / 墨绿 primary / 陶土橙 clay + 语义色
  sage/wheat/rust/sky，字号阶、圆角阶、投影、动效
- index.css：卡片、按钮五种变体、输入、pill/chip、导航、骨架屏
- 新增 icons.tsx（线性图标集）与 ui.tsx（Button/Sheet/Toast/空态/骨架/PageHeader）
- 新增 AppShell 取代 Layout + WorkspaceNav：桌面侧栏 + 移动顶部横条，工单未读角标
- 六个页面全部重写：登录、首页、任务、看板、工单、知识、成员、邀请落地
- 详情抽屉改用 Sheet，工单态补齐需求人/办理人/退回次数/动作按钮

e2e 因 DOM 升级同步调整（抽屉按 role=dialog 定位、下拉改用 aria-label），
三套用例（7 + 8 + 7 项）全部重跑通过；tsc 0 错，构建 45 modules / gzip 76.70 kB。

web/tailwind.config.js

@@ -4,21 +4,115 @@ export default {
   theme: {
     extend: {
       colors: {
-        // 达道：主色偏墨青，克制，不做"任务工具"常见的荧光蓝
+        // 底色：暖白纸面，不用纯白，避免刺眼、也让卡片有层次
+        paper: {
+          50: "#FCFCFA",
+          100: "#F7F7F3",
+          200: "#F0F0EA",
+          300: "#E6E6DE",
+        },
+        // 分隔线与描边
+        line: {
+          100: "#ECECE6",
+          200: "#E1E1D9",
+          300: "#D2D2C8",
+        },
+        // 文字与中性
         ink: {
-          50: "#f5f7f8",
-          100: "#e6eaed",
-          500: "#3f5a68",
-          700: "#243c48",
-          900: "#101b21",
+          50: "#F6F8F7",
+          100: "#E9EDEB",
+          200: "#D7DDDA",
+          300: "#BAC3C0",
+          400: "#96A19D",
+          500: "#6D7874",
+          600: "#4E5956",
+          700: "#39443F",
+          800: "#252E2A",
+          900: "#161C1A",
         },
-        accent: {
-          500: "#c2703d",
-          600: "#a35a2c",
+        // 主色：墨松绿，克制、有"工作台"气质，避开任务工具常见的荧光蓝
+        primary: {
+          50: "#EFF5F3",
+          100: "#DBE9E4",
+          200: "#B7D2C9",
+          300: "#8CB6A9",
+          400: "#619688",
+          500: "#41796A",
+          600: "#2F6054",
+          700: "#264E44",
+          800: "#1E3E36",
+          900: "#172F29",
         },
+        // 强调色：陶土橙，只用在"需要人注意"的地方
+        clay: {
+          50: "#FBF2EB",
+          100: "#F5DFCE",
+          200: "#EBC1A2",
+          300: "#DFA176",
+          400: "#D08454",
+          500: "#C2703D",
+          600: "#A65B2F",
+          700: "#854926",
+          800: "#65381E",
+          900: "#472716",
+        },
+        sage: { 500: "#2F7D5E", 50: "#EAF4EF" },
+        wheat: { 500: "#A97C25", 50: "#F8F1E2" },
+        rust: { 500: "#B04A32", 50: "#FAEDE9" },
+        sky: { 500: "#3E6F91", 50: "#EBF2F7" },
       },
       fontFamily: {
-        sans: ["Inter", "PingFang SC", "Microsoft YaHei", "system-ui", "sans-serif"],
+        sans: [
+          "Inter",
+          "-apple-system",
+          "PingFang SC",
+          "HarmonyOS Sans SC",
+          "Microsoft YaHei",
+          "system-ui",
+          "sans-serif",
+        ],
+        display: ["Inter", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "sans-serif"],
+        mono: ["JetBrains Mono", "SFMono-Regular", "Consolas", "monospace"],
+      },
+      fontSize: {
+        "2xs": ["11px", { lineHeight: "16px", letterSpacing: "0.02em" }],
+        xs: ["12px", { lineHeight: "18px" }],
+        sm: ["13px", { lineHeight: "20px" }],
+        base: ["14px", { lineHeight: "22px" }],
+        lg: ["16px", { lineHeight: "24px" }],
+        xl: ["18px", { lineHeight: "26px", letterSpacing: "-0.01em" }],
+        "2xl": ["22px", { lineHeight: "30px", letterSpacing: "-0.02em" }],
+        "3xl": ["28px", { lineHeight: "36px", letterSpacing: "-0.02em" }],
+        "4xl": ["36px", { lineHeight: "42px", letterSpacing: "-0.03em" }],
+      },
+      borderRadius: {
+        md: "8px",
+        lg: "10px",
+        xl: "14px",
+        "2xl": "18px",
+        "3xl": "24px",
+      },
+      boxShadow: {
+        card: "0 1px 2px rgba(22,28,26,0.04), 0 8px 24px -16px rgba(22,28,26,0.35)",
+        pop: "0 2px 6px rgba(22,28,26,0.06), 0 20px 48px -24px rgba(22,28,26,0.35)",
+        inset: "inset 0 1px 0 rgba(255,255,255,0.6)",
+      },
+      keyframes: {
+        "fade-in": { from: { opacity: "0" }, to: { opacity: "1" } },
+        "slide-up": {
+          from: { opacity: "0", transform: "translateY(6px)" },
+          to: { opacity: "1", transform: "translateY(0)" },
+        },
+        "slide-in-right": {
+          from: { opacity: "0", transform: "translateX(24px)" },
+          to: { opacity: "1", transform: "translateX(0)" },
+        },
+        shimmer: { "100%": { transform: "translateX(100%)" } },
+      },
+      animation: {
+        "fade-in": "fade-in .18s ease-out both",
+        "slide-up": "slide-up .22s cubic-bezier(.2,.7,.3,1) both",
+        "slide-in-right": "slide-in-right .24s cubic-bezier(.2,.7,.3,1) both",
       },
     },
   },