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/src/pages/Tasks.tsx

@@ -1,8 +1,17 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useParams } from "react-router-dom";
-import { Layout } from "../components/Layout";
+import { AppShell } from "../components/AppShell";
 import { TaskDetail } from "../components/TaskDetail";
-import { WorkspaceNav } from "../components/WorkspaceNav";
+import { Check, Inbox, Plus, Search } from "../components/icons";
+import {
+  Button,
+  EmptyState,
+  InlineAlert,
+  PageHeader,
+  PriorityDot,
+  SkeletonRows,
+  StatusPill,
+} from "../components/ui";
 import { ApiError, api } from "../lib/client";
 import { PRIORITY_LABEL, STATUS_LABEL, parseQuickAdd } from "../lib/parse";
 import type { Item, ItemStatus, Page } from "../lib/types";
@@ -15,15 +24,6 @@ const VIEWS: { key: string; label: string; hint: string; createAs: ItemStatus }[
   { key: "all", label: "全部", hint: "含已取消", createAs: "todo" },
 ];
 
-const STATUS_STYLE: Record<string, string> = {
-  inbox: "bg-ink-100 text-ink-700",
-  todo: "bg-ink-100 text-ink-700",
-  doing: "bg-accent-500/15 text-accent-600",
-  done: "bg-emerald-100 text-emerald-700",
-  blocked: "bg-amber-100 text-amber-700",
-  canceled: "bg-ink-100 text-ink-500 line-through",
-};
-
 function dueLabel(iso: string | null): { text: string; overdue: boolean } | null {
   if (!iso) return null;
   const due = new Date(iso);
@@ -83,7 +83,8 @@ export function TasksPage() {
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
       const target = e.target as HTMLElement;
-      const typing = ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName) || target.isContentEditable;
+      const typing =
+        ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName) || target.isContentEditable;
       if (e.key === "Escape") {
         setOpenId(null);
         (target as HTMLInputElement).blur?.();
@@ -144,43 +145,52 @@ export function TasksPage() {
   }
 
   return (
-    <Layout>
-      <div className="mb-5 flex flex-wrap items-center justify-between gap-3">
-        <div>
-          <h1 className="text-lg font-semibold">任务</h1>
-          <p className="mt-0.5 text-xs text-ink-500">
-            {current?.hint}
-            <span className="ml-2 text-ink-100">|</span>
-            <span className="ml-2">j/k 选择 · Enter 完成 · e 编辑 · Esc 关闭</span>
-          </p>
-        </div>
-        <WorkspaceNav wsId={wsId} />
+    <AppShell wsId={wsId} active="tasks">
+      <PageHeader
+        title="任务"
+        desc={current?.hint}
+        eyebrow={<>按 j / k 移动，Enter 完成，e 打开详情</>}
+        actions={
+          <div className="relative">
+            <span className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-ink-400">
+              <Search size={14} />
+            </span>
+            <input
+              className="input h-9 w-56 pl-8 text-sm"
+              placeholder="搜索标题或正文…"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+            />
+          </div>
+        }
+      />
+
+      <div className="mb-4 flex flex-wrap items-center gap-1.5">
+        {VIEWS.map((v) => {
+          const active = view === v.key;
+          return (
+            <button
+              key={v.key}
+              onClick={() => setView(v.key)}
+              className={`rounded-lg px-2.5 py-1.5 text-sm font-medium transition-colors ${
+                active
+                  ? "bg-white text-ink-900 shadow-sm ring-1 ring-line-200"
+                  : "text-ink-500 hover:bg-white/60 hover:text-ink-800"
+              }`}
+            >
+              {v.label}
+            </button>
+          );
+        })}
       </div>
 
-      <div className="mb-4 flex flex-wrap items-center gap-2">
-        {VIEWS.map((v) => (
-          <button
-            key={v.key}
-            onClick={() => setView(v.key)}
-            className={`rounded-full px-3 py-1 text-sm transition ${
-              view === v.key ? "bg-ink-900 text-white" : "bg-ink-100 text-ink-700 hover:bg-ink-100/70"
-            }`}
-          >
-            {v.label}
-          </button>
-        ))}
-        <input
-          className="input ml-auto w-48"
-          placeholder="搜索标题或正文…"
-          value={query}
-          onChange={(e) => setQuery(e.target.value)}
-        />
-      </div>
-
-      <div className="card mb-4">
-        <div className="flex gap-2">
+      <div className="card mb-4 overflow-hidden">
+        <div className="flex items-center gap-2 px-3 py-2.5">
+          <span className="grid h-7 w-7 shrink-0 place-items-center rounded-full border border-dashed border-line-300 text-ink-400">
+            <Plus size={14} />
+          </span>
           <input
-            className="input flex-1"
+            className="input-flush flex-1"
             placeholder="加一件要做的事，回车创建。支持 #标签 !高"
             value={draft}
             onChange={(e) => setDraft(e.target.value)}
@@ -188,103 +198,135 @@ export function TasksPage() {
               if (e.key === "Enter") void addTask();
             }}
           />
-          <button className="btn-primary" disabled={!draft.trim()} onClick={() => void addTask()}>
+          <Button variant="primary" size="sm" disabled={!draft.trim()} onClick={() => void addTask()}>
             添加
-          </button>
+          </Button>
         </div>
       </div>
 
-      {error && <p className="mb-3 text-sm text-red-600">{error}</p>}
+      {error && (
+        <div className="mb-4">
+          <InlineAlert>{error}</InlineAlert>
+        </div>
+      )}
 
-      <div className="card divide-y divide-ink-100 p-0">
-        {items.length === 0 && !loading && (
-          <p className="p-6 text-center text-sm text-ink-500">
-            {view === "today" ? "今天没有到期的事，挺好。" : "这里还空着。"}
-          </p>
-        )}
+      <div className="card overflow-hidden p-0">
+        {loading && items.length === 0 ? (
+          <SkeletonRows rows={5} />
+        ) : items.length === 0 ? (
+          <EmptyState
+            icon={<Inbox size={18} />}
+            title={view === "today" ? "今天没有到期的事，挺好" : "这里还空着"}
+            hint={
+              view === "today"
+                ? "想提前安排？切到「进行中」，或直接在上面加一件。"
+                : "在上面输入一件要做的事，回车就进列表。"
+            }
+          />
+        ) : (
+          items.map((item, index) => {
+            const due = dueLabel(item.due_at);
+            const done = item.status === "done";
+            // 收件箱里的东西还没"收下"，不给完成勾选框——先归类，再完成。
+            const canComplete = item.status !== "inbox" && item.status !== "canceled";
+            return (
+              <div
+                key={item.id}
+                className={`group flex items-start gap-3 border-b border-line-100 px-4 py-3 transition-colors last:border-0 ${
+                  index === activeIdx ? "bg-primary-50/45" : "hover:bg-paper-50"
+                }`}
+                onMouseEnter={() => setActiveIdx(index)}
+              >
+                {canComplete ? (
+                  <button
+                    onClick={() => void changeStatus(item, done ? "todo" : "done")}
+                    aria-label={done ? "标记未完成" : "标记完成"}
+                    className={`mt-0.5 grid h-[18px] w-[18px] shrink-0 place-items-center rounded-full border transition ${
+                      done
+                        ? "border-sage-500 bg-sage-500 text-white"
+                        : "border-line-300 text-transparent hover:border-primary-500 hover:text-primary-500"
+                    }`}
+                  >
+                    <Check size={11} strokeWidth={2.4} />
+                  </button>
+                ) : (
+                  <span
+                    className="mt-0.5 h-[18px] w-[18px] shrink-0 rounded-full border border-dashed border-line-300"
+                    aria-hidden
+                  />
+                )}
 
-        {items.map((item, index) => {
-          const due = dueLabel(item.due_at);
-          const done = item.status === "done";
-          // 收件箱里的东西还没"收下"，不给完成勾选框——先归类，再完成。
-          const canComplete = item.status !== "inbox" && item.status !== "canceled";
-          return (
-            <div
-              key={item.id}
-              className={`flex items-start gap-3 px-4 py-3 ${
-                index === activeIdx ? "bg-ink-50/70" : ""
-              }`}
-              onMouseEnter={() => setActiveIdx(index)}
-            >
-              {canComplete ? (
-                <input
-                  type="checkbox"
-                  className="mt-1 h-4 w-4 accent-ink-900"
-                  checked={done}
-                  onChange={() => void changeStatus(item, done ? "todo" : "done")}
-                  aria-label={done ? "标记未完成" : "标记完成"}
-                />
-              ) : (
-                <span className="mt-1 h-4 w-4 rounded border border-ink-100" aria-hidden />
-              )}
-              <div className="min-w-0 flex-1">
-                <button
-                  className={`block w-full text-left text-sm ${done ? "text-ink-500 line-through" : ""}`}
-                  onClick={() => setOpenId(item.id)}
-                >
-                  {item.title}
-                </button>
-                <div className="mt-1 flex flex-wrap items-center gap-2 text-xs">
-                  <span className={`rounded px-1.5 py-0.5 ${STATUS_STYLE[item.status]}`}>
-                    {STATUS_LABEL[item.status]}
-                  </span>
-                  {item.priority > 0 && (
-                    <span className="text-ink-500">优先级 {PRIORITY_LABEL[item.priority]}</span>
+                <div className="min-w-0 flex-1">
+                  <button
+                    className={`block w-full truncate text-left text-sm transition-colors ${
+                      done ? "text-ink-400 line-through" : "text-ink-900 hover:text-primary-700"
+                    }`}
+                    onClick={() => setOpenId(item.id)}
+                  >
+                    {item.title}
+                  </button>
+                  <div className="mt-1.5 flex flex-wrap items-center gap-1.5 text-2xs">
+                    <StatusPill status={item.status} label={STATUS_LABEL[item.status]} />
+                    {item.priority > 0 && (
+                      <span className="chip">
+                        <PriorityDot level={item.priority} />
+                        优先级 {PRIORITY_LABEL[item.priority]}
+                      </span>
+                    )}
+                    {due && (
+                      <span
+                        className={`inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 ${
+                          due.overdue && !done
+                            ? "bg-rust-50 font-medium text-rust-500"
+                            : "text-ink-400"
+                        }`}
+                      >
+                        截止 {due.text}
+                        {due.overdue && !done ? "（逾期）" : ""}
+                      </span>
+                    )}
+                    {item.tags.map((tag) => (
+                      <span key={tag.id} className="chip text-ink-500">
+                        #{tag.name}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+
+                <div className="flex shrink-0 gap-1 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100">
+                  {item.status === "inbox" && (
+                    <Button variant="ghost" size="sm" onClick={() => void changeStatus(item, "todo")}>
+                      收下
+                    </Button>
                   )}
-                  {due && (
-                    <span className={due.overdue && !done ? "text-red-600" : "text-ink-500"}>
-                      截止 {due.text}
-                      {due.overdue && !done ? "（逾期）" : ""}
-                    </span>
+                  {(item.status === "todo" || item.status === "blocked") && (
+                    <Button variant="ghost" size="sm" onClick={() => void changeStatus(item, "doing")}>
+                      开工
+                    </Button>
+                  )}
+                  {item.status === "doing" && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => void changeStatus(item, "blocked")}
+                    >
+                      阻塞
+                    </Button>
                   )}
-                  {item.tags.map((tag) => (
-                    <span key={tag.id} className="rounded bg-ink-50 px-1.5 py-0.5 text-ink-700">
-                      #{tag.name}
-                    </span>
-                  ))}
                 </div>
               </div>
-
-              <div className="flex shrink-0 gap-1">
-                {item.status === "inbox" && (
-                  <button className="btn-ghost px-2 py-1 text-xs" onClick={() => void changeStatus(item, "todo")}>
-                    收下
-                  </button>
-                )}
-                {(item.status === "todo" || item.status === "blocked") && (
-                  <button className="btn-ghost px-2 py-1 text-xs" onClick={() => void changeStatus(item, "doing")}>
-                    开工
-                  </button>
-                )}
-                {item.status === "doing" && (
-                  <button className="btn-ghost px-2 py-1 text-xs" onClick={() => void changeStatus(item, "blocked")}>
-                    阻塞
-                  </button>
-                )}
-              </div>
-            </div>
-          );
-        })}
+            );
+          })
+        )}
       </div>
 
       {hasMore && (
         <div className="mt-4 text-center">
-          <button className="btn-ghost" disabled={loading} onClick={() => void load(cursor)}>
+          <Button variant="ghost" disabled={loading} onClick={() => void load(cursor)}>
             {loading ? "加载中…" : "加载更多"}
-          </button>
+          </Button>
         </div>
       )}
-      {loading && items.length === 0 && <p className="mt-4 text-center text-sm text-ink-500">加载中…</p>}
 
       {openId && wsId && (
         <TaskDetail
@@ -297,6 +339,6 @@ export function TasksPage() {
           onDeleted={(id) => setItems((prev) => prev.filter((it) => it.id !== id))}
         />
       )}
-    </Layout>
+    </AppShell>
   );
 }