feat(web): 工单页与升级面板，修掉视图竞态与标签缺失导致的崩溃

- 新增 /w/:wsId/tickets：派给我的 / 我发起的、状态过滤、列表内联快操作
- 详情抽屉按角色显示受理/开工/提交/验收/驳回/改派/取消；任务态底部可升级成工单
- 导航抽成 WorkspaceNav，带未读角标（30 秒对齐，操作后立刻刷新）
- 修竞态：切视图/切 tab 连发请求时，慢的回包会把新结果盖掉（reqId 序号丢弃过期响应）
- 登录支持 ?next= 站内回跳，邀请链接不再'登录完掉回首页'
- e2e/tickets.mjs：双人双上下文的完整闭环，8 项断言全绿

web/e2e/smoke.mjs

@@ -76,7 +76,8 @@ try {
   await page.getByRole("button", { name: "写周报初稿" }).click();
   const drawer = page.locator("aside");
   await drawer.waitFor();
-  await drawer.locator("select").selectOption("2");
+  // 抽屉里现在有两个 select（优先级 + 升级工单选人），取第一个才是优先级
+  await drawer.locator("select").first().selectOption("2");
   await page.waitForTimeout(500);
   const commentBox = drawer.getByPlaceholder("补充一句进展…");
   await commentBox.fill("E2E：初稿已出，等评审");

web/e2e/tickets.mjs

@@ -0,0 +1,196 @@
+/**
+ * M2 工单闭环的真浏览器用例（两个用户，两个浏览器上下文）。
+ *
+ *   A 建任务 → 升级成工单指给 B → B 接收/开始/提交验收 → A 通过验收 → 原任务回流到待办
+ *
+ * 跑之前先起后端(8100)与前端(5180)：
+ *   node e2e/tickets.mjs
+ */
+import { existsSync, mkdirSync } from "node:fs";
+import { chromium } from "playwright-core";
+
+const APP = process.env.APP_URL ?? "http://127.0.0.1:5180";
+const CHROME =
+  process.env.CHROME_PATH ??
+  `${process.env.LOCALAPPDATA}\\ms-playwright\\chromium-1223\\chrome-win64\\chrome.exe`;
+const SHOT_DIR = new URL("./artifacts/", import.meta.url).pathname.replace(/^\//, "");
+
+if (!existsSync(CHROME)) {
+  console.error(`找不到 Chromium：${CHROME}\n用 CHROME_PATH 指定可执行文件`);
+  process.exit(2);
+}
+mkdirSync(SHOT_DIR, { recursive: true });
+
+let step = 0;
+function pass(message) {
+  console.log(`  ✓ ${++step}. ${message}`);
+}
+function fail(message) {
+  console.error(`  ✗ ${message}`);
+  process.exit(1);
+}
+
+const consoleErrors = [];
+function watch(page, tag) {
+  page.on("console", (msg) => {
+    if (msg.type() === "error") consoleErrors.push(`[${tag}] ${msg.text()}`);
+  });
+  page.on("pageerror", (err) => consoleErrors.push(`[${tag}] ${String(err)}`));
+  page.on("response", (res) => {
+    if (res.status() >= 400) consoleErrors.push(`[${tag}] HTTP ${res.status()} ${res.url()}`);
+  });
+  page.setDefaultTimeout(15_000);
+}
+
+async function fillLogin(page, phone) {
+  await page.locator("#phone").fill(phone);
+  await page.getByRole("button", { name: "获取验证码" }).click();
+  const text = await page.locator("text=开发环境验证码").first().innerText();
+  const code = text.match(/(\d{6})/)?.[1];
+  if (!code) fail(`没读到开发验证码：${text}`);
+  await page.locator("#code").fill(code);
+  await page.getByRole("main").getByRole("button", { name: "登录", exact: true }).click();
+  await page.waitForURL((url) => !url.pathname.startsWith("/login"));
+}
+
+async function login(page, phone) {
+  await page.goto(`${APP}/login`, { waitUntil: "domcontentloaded" });
+  await fillLogin(page, phone);
+  await page.waitForURL(`${APP}/`);
+}
+
+const browser = await chromium.launch({ executablePath: CHROME, headless: true });
+const ctxA = await browser.newContext({ viewport: { width: 1280, height: 900 } });
+const ctxB = await browser.newContext({ viewport: { width: 1280, height: 900 } });
+const pageA = await ctxA.newPage();
+const pageB = await ctxB.newPage();
+watch(pageA, "A");
+watch(pageB, "B");
+
+if (process.env.DEBUG_NET) {
+  for (const [tag, pg] of [["A", pageA], ["B", pageB]]) {
+    pg.on("response", async (res) => {
+      if (!res.url().includes("/api/v1/workspaces/")) return;
+      const text = await res.text().catch(() => "");
+      console.log(`  [net ${tag}] ${res.status()} ${res.url().replace(APP, "")} ${text.slice(0, 180)}`);
+    });
+  }
+}
+
+const stamp = String(Date.now()).slice(-8);
+const phoneA = `137${stamp}`;
+const phoneB = `136${stamp}`;
+
+try {
+  // 1. A 登录并建工作区
+  await login(pageA, phoneA);
+  await pageA.getByPlaceholder("例如：达道科技 / 我的事项").fill("E2E 工单组");
+  await pageA.getByRole("button", { name: "创建" }).click();
+  await pageA.waitForURL(/\/w\/[0-9a-f-]{36}$/);
+  const wsId = pageA.url().match(/\/w\/([0-9a-f-]{36})$/)[1];
+  await pageA.getByRole("heading", { name: "任务" }).waitFor();
+  pass("A 登录并建工作区");
+
+  // 2. A 建一条会卡住的任务（先切到「全部」，因为「今天」只按到期时间算）
+  const composer = pageA.getByPlaceholder(/加一件要做的事/);
+  await composer.fill("开通测试账号权限");
+  await composer.press("Enter");
+  await pageA.getByRole("button", { name: "全部", exact: true }).click();
+  await pageA.locator("div.card > div").filter({ hasText: "开通测试账号权限" }).first().waitFor();
+  pass("A 新建任务「开通测试账号权限」");
+
+  // 3. A 生成邀请码，B 落地加入
+  await pageA.getByRole("link", { name: "成员" }).click();
+  await pageA.getByRole("button", { name: "邀请成员" }).click();
+  const inviteText = await pageA.locator("p.break-all").first().innerText();
+  if (!inviteText.includes("/join/")) fail(`没拿到邀请链接：${inviteText}`);
+  await pageB.goto(inviteText.trim(), { waitUntil: "domcontentloaded" });
+  // 未登录会被送到 /login?next=/join/...，登录后要回到邀请页而不是工作区首页
+  await pageB.waitForURL(/\/login\?next=/);
+  await fillLogin(pageB, phoneB);
+  await pageB.waitForURL(new RegExp(`/w/${wsId}`));
+  await pageB.getByRole("heading", { name: "任务" }).waitFor();
+  pass("B 从邀请链接登录后自动加入工作区");
+
+  // 4. A 把任务升级成工单，指给 B
+  await pageA.goto(`${APP}/w/${wsId}`, { waitUntil: "domcontentloaded" });
+  await pageA.getByRole("button", { name: "全部", exact: true }).click();
+  await pageA.getByRole("button", { name: "开通测试账号权限" }).click();
+  const drawerA = pageA.locator("aside");
+  await drawerA.waitFor();
+  const memberPicker = drawerA.locator("select").nth(1);
+  await memberPicker.selectOption({ index: 1 });
+  await drawerA.getByRole("button", { name: "升级成工单" }).click();
+  await drawerA.locator("text=已把工单交给").first().waitFor();
+  await pageA.screenshot({ path: `${SHOT_DIR}/promote.png` });
+  await drawerA.getByRole("button", { name: "关闭", exact: true }).click();
+  const blockedRow = await pageA
+    .locator("div.card > div")
+    .filter({ hasText: "开通测试账号权限" })
+    .first()
+    .innerText();
+  if (!blockedRow.includes("被阻塞")) fail(`升级后任务没变成被阻塞：${blockedRow}`);
+  pass("任务升级成工单后自身进入「被阻塞」");
+
+  // 5. B 在工单页接收 → 开始 → 提交验收
+  await pageB.goto(`${APP}/w/${wsId}/tickets`, { waitUntil: "domcontentloaded" });
+  await pageB.getByRole("heading", { name: "工单" }).waitFor();
+  const ticketCard = pageB.locator("li.card").filter({ hasText: "开通测试账号权限" }).first();
+  await ticketCard.waitFor();
+  await ticketCard.getByRole("button", { name: "接收", exact: true }).click();
+  await ticketCard.getByRole("button", { name: "开始", exact: true }).waitFor();
+  await ticketCard.getByRole("button", { name: "开始", exact: true }).click();
+  await ticketCard.getByRole("button", { name: "详情", exact: true }).click();
+  const drawerB = pageB.locator("aside");
+  await drawerB.waitFor();
+  await drawerB.getByPlaceholder("给对方的说明（提交或验收时一并发过去）").fill("已经开了只读账号");
+  await drawerB.getByRole("button", { name: "提交验收" }).click();
+  await drawerB.locator("text=待验收").first().waitFor();
+  await pageB.screenshot({ path: `${SHOT_DIR}/ticket-submitted.png` });
+  pass("B 接收、开始办理并提交验收");
+
+  // 6. A 在「我发起的」里验收通过
+  await pageA.goto(`${APP}/w/${wsId}/tickets`, { waitUntil: "domcontentloaded" });
+  await pageA.getByRole("button", { name: "我发起的", exact: true }).click();
+  const mineCard = pageA.locator("li.card").filter({ hasText: "开通测试账号权限" }).first();
+  await mineCard.waitFor();
+  await mineCard.getByRole("button", { name: "详情", exact: true }).click();
+  const drawerVerify = pageA.locator("aside");
+  await drawerVerify.waitFor();
+  await drawerVerify.getByPlaceholder("给对方的说明（提交或验收时一并发过去）").fill("确认可用");
+  await drawerVerify.getByRole("button", { name: "通过验收" }).click();
+  await drawerVerify.locator("text=已完成").first().waitFor();
+  pass("A 验收通过，工单完成");
+  await pageA.screenshot({ path: `${SHOT_DIR}/ticket-verified.png` });
+
+  // 7. 闭环回流：原任务回到待办
+  await pageA.getByRole("button", { name: "关闭", exact: true }).click();
+  await pageA.goto(`${APP}/w/${wsId}`, { waitUntil: "domcontentloaded" });
+  const activeView = pageA.getByRole("button", { name: "进行中" });
+  await activeView.click();
+  const reflowed = await pageA
+    .locator("div.card > div")
+    .filter({ hasText: "开通测试账号权限" })
+    .first()
+    .innerText();
+  if (!reflowed.includes("待办")) fail(`工单完成后原任务没回流到待办：${reflowed}`);
+  pass("工单验收通过后，原任务自动回流到「待办」");
+
+  if (consoleErrors.length > 0) {
+    fail(`浏览器控制台有报错：\n${consoleErrors.join("\n")}`);
+  }
+  pass("两个上下文控制台均无报错");
+
+  console.log(`\n全部通过，截图在 ${SHOT_DIR}`);
+  await browser.close();
+} catch (err) {
+  await pageA.screenshot({ path: `${SHOT_DIR}/tickets-failure.png` }).catch(() => {});
+  const drawerText = await pageA.locator("aside").innerText().catch(() => "");
+  if (drawerText) console.error(`\n[抽屉内容]\n${drawerText}`);
+  if (consoleErrors.length > 0) console.error(`\n[控制台]\n${consoleErrors.join("\n")}`);
+  const bodyText = await pageA.locator("body").innerText().catch(() => "");
+  console.error(`\n[页面文本]\n${bodyText.slice(0, 600)}`);
+  console.error(`\n失败：${err?.message ?? err}`);
+  await browser.close();
+  process.exit(1);
+}

web/src/App.tsx

@@ -7,6 +7,7 @@ import { HomePage } from "./pages/Home";
 import { WorkspacePage } from "./pages/Workspace";
 import { TasksPage } from "./pages/Tasks";
 import { BoardPage } from "./pages/Board";
+import { TicketsPage } from "./pages/Tickets";
 import { JoinPage } from "./pages/Join";
 
 interface AuthState {
@@ -84,6 +85,7 @@ export function App() {
         <Route path="/" element={<HomePage />} />
         <Route path="/w/:wsId" element={<TasksPage />} />
         <Route path="/w/:wsId/board" element={<BoardPage />} />
+        <Route path="/w/:wsId/tickets" element={<TicketsPage />} />
         <Route path="/w/:wsId/members" element={<WorkspacePage />} />
         <Route path="/join/:wsId/:code" element={<JoinPage />} />
         <Route path="*" element={<Navigate to="/" replace />} />

web/src/components/TaskDetail.tsx

@@ -1,7 +1,8 @@
 import { useCallback, useEffect, useState } from "react";
+import { useAuth } from "../App";
 import { ApiError, api } from "../lib/client";
 import { PRIORITY_LABEL, STATUS_LABEL } from "../lib/parse";
-import type { Activity, Item, ItemDetail } from "../lib/types";
+import type { Activity, Item, ItemDetail, Member, Page, Role, TicketInfo } from "../lib/types";
 
 interface Comment {
   id: string;
@@ -10,12 +11,16 @@ interface Comment {
   created_at: string;
 }
 
+type TicketAction = "accept" | "start" | "submit" | "cancel" | "reassign" | "verify";
+
 interface Props {
   wsId: string;
   itemId: string;
   onClose: () => void;
   onChanged: (item: Item) => void;
   onDeleted: (id: string) => void;
+  /** 工单状态变化后通知父级刷新角标 */
+  onTicketChanged?: () => void;
 }
 
 function toLocalInput(iso: string | null): string {
@@ -25,7 +30,15 @@ function toLocalInput(iso: string | null): string {
   return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
 }
 
-export function TaskDetail({ wsId, itemId, onClose, onChanged, onDeleted }: Props) {
+export function TaskDetail({
+  wsId,
+  itemId,
+  onClose,
+  onChanged,
+  onDeleted,
+  onTicketChanged,
+}: Props) {
+  const { user } = useAuth();
   const [item, setItem] = useState<ItemDetail | null>(null);
   const [title, setTitle] = useState("");
   const [body, setBody] = useState("");
@@ -34,9 +47,16 @@ export function TaskDetail({ wsId, itemId, onClose, onChanged, onDeleted }: Prop
   const [comments, setComments] = useState<Comment[]>([]);
   const [draft, setDraft] = useState("");
   const [error, setError] = useState<string | null>(null);
+  const [notice, setNotice] = useState<string | null>(null);
   const [busy, setBusy] = useState(false);
 
+  const [role, setRole] = useState<Role>("member");
+  const [members, setMembers] = useState<Member[]>([]);
+  const [promoteTo, setPromoteTo] = useState("");
+  const [note, setNote] = useState("");
+
   const base = `/workspaces/${wsId}/items/${itemId}`;
+  const isAdmin = role === "owner" || role === "admin";
 
   const hydrate = useCallback((next: ItemDetail) => {
     setItem(next);
@@ -54,6 +74,13 @@ export function TaskDetail({ wsId, itemId, onClose, onChanged, onDeleted }: Prop
         if (alive) hydrate(detail);
         const page = await api.get<{ items: Comment[] }>(`${base}/comments`);
         if (alive) setComments(page.items);
+        const ws = await api.get<{ role: Role }>(`/workspaces/${wsId}`);
+        if (alive) setRole(ws.role);
+        const roster = await api.get<Page<Member>>(`/workspaces/${wsId}/members`);
+        if (alive) {
+          setMembers(roster.items);
+          setPromoteTo(roster.items.find((m) => m.user_id !== user?.id)?.user_id ?? "");
+        }
       } catch (err) {
         if (alive) setError(err instanceof ApiError ? err.message : "加载失败");
       }
@@ -61,12 +88,9 @@ export function TaskDetail({ wsId, itemId, onClose, onChanged, onDeleted }: Prop
     return () => {
       alive = false;
     };
-  }, [base, hydrate]);
+  }, [base, hydrate, wsId, user?.id]);
 
-  async function patch(
+  async function patch(values: Record<string, unknown>, label: string): Promise<boolean> {
-    values: Record<string, unknown>,
-    label: string,
-  ): Promise<boolean> {
     if (!item) return false;
     setBusy(true);
     setError(null);
@@ -154,6 +178,98 @@ export function TaskDetail({ wsId, itemId, onClose, onChanged, onDeleted }: Prop
     }
   }
 
+  /** 任务 -> 工单。成功后原任务变「被阻塞」，这条抽屉继续显示任务本身。 */
+  async function promote() {
+    if (!item || !promoteTo) return;
+    setBusy(true);
+    setError(null);
+    try {
+      const result = await api.post<{ task: Item; ticket: Item }>(`${base}/promote`, {
+        assignee_id: promoteTo,
+        version: item.version,
+      });
+      onChanged(result.task);
+      hydrate({ ...(item as ItemDetail), ...result.task, activities: item.activities });
+      void refreshActivities(result.task);
+      const who = members.find((m) => m.user_id === promoteTo)?.nickname ?? "同事";
+      setNotice(`已把工单交给 ${who}，这条任务现在处于「被阻塞」；对方验收通过后会自动回来。`);
+      onTicketChanged?.();
+    } catch (err) {
+      setError(err instanceof ApiError ? err.message : "升级失败");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function ticketAction(action: TicketAction, extra: Record<string, unknown> = {}) {
+    if (!item) return;
+    setBusy(true);
+    setError(null);
+    try {
+      const updated = await api.post<Item & { ticket: TicketInfo }>(
+        `${base}/ticket/${action}`,
+        { note, version: item.version, ...extra },
+      );
+      onChanged(updated);
+      hydrate({ ...(item as ItemDetail), ...updated, activities: item.activities });
+      void refreshActivities(updated);
+      setNote("");
+      onTicketChanged?.();
+    } catch (err) {
+      if (err instanceof ApiError && err.code === 4009) {
+        setError("这条工单刚被改过，已刷新为最新内容");
+        hydrate(await api.get<ItemDetail>(base));
+      } else {
+        setError(err instanceof ApiError ? err.message : "操作失败");
+      }
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  const ticket = item?.kind === "ticket" ? item.ticket : undefined;
+  const isAssignee = !!ticket && !!user && ticket.assignee_id === user.id;
+  const isRequester = !!ticket && !!user && ticket.requester_id === user.id;
+
+  function actionButtons(t: TicketInfo) {
+    const buttons: { key: TicketAction | "approve" | "reject"; label: string; show: boolean }[] = [
+      { key: "accept", label: "接收", show: t && isAssignee && item?.status === "open" },
+      { key: "start", label: "开始办理", show: isAssignee && item?.status === "accepted" },
+      { key: "submit", label: "提交验收", show: isAssignee && item?.status === "in_progress" },
+      { key: "approve", label: "通过验收", show: isRequester || isAdmin },
+      { key: "reject", label: "驳回", show: isRequester || isAdmin },
+      {
+        key: "cancel",
+        label: "取消工单",
+        show:
+          (isRequester || isAssignee || isAdmin) &&
+          ["open", "accepted", "in_progress", "pending_verify"].includes(item?.status ?? ""),
+      },
+    ];
+    const verifyOnly = item?.status !== "pending_verify";
+
+    return (
+      <div className="flex flex-wrap gap-2">
+        {buttons
+          .filter((b) => b.show && !(verifyOnly && (b.key === "approve" || b.key === "reject")))
+          .map((b) => (
+            <button
+              key={b.key}
+              className={b.key === "cancel" || b.key === "reject" ? "btn-ghost" : "btn-primary"}
+              disabled={busy}
+              onClick={() => {
+                if (b.key === "approve") void ticketAction("verify", { approve: true });
+                else if (b.key === "reject") void ticketAction("verify", { approve: false });
+                else void ticketAction(b.key);
+              }}
+            >
+              {b.label}
+            </button>
+          ))}
+      </div>
+    );
+  }
+
   return (
     <div className="fixed inset-0 z-20 flex justify-end bg-ink-900/20" onClick={onClose}>
       <aside
@@ -166,6 +282,7 @@ export function TaskDetail({ wsId, itemId, onClose, onChanged, onDeleted }: Prop
           <>
             <div className="mb-4 flex items-center justify-between text-xs text-ink-500">
               <span>
+                {item.kind === "ticket" ? "工单 · " : ""}
                 {STATUS_LABEL[item.status]} · 版本 {item.version}
               </span>
               <div className="flex gap-2">
@@ -178,6 +295,33 @@ export function TaskDetail({ wsId, itemId, onClose, onChanged, onDeleted }: Prop
               </div>
             </div>
 
+            {ticket && (
+              <div className="mb-4 rounded-lg border border-ink-100 bg-ink-50 p-3 text-xs text-ink-700">
+                <div className="flex flex-wrap gap-x-4 gap-y-1">
+                  <span>
+                    需求人：{members.find((m) => m.user_id === ticket.requester_id)?.nickname ?? "—"}
+                  </span>
+                  <span>
+                    办理人：{members.find((m) => m.user_id === ticket.assignee_id)?.nickname ?? "—"}
+                  </span>
+                  {ticket.reject_count > 0 && <span>退回 {ticket.reject_count} 次</span>}
+                  {ticket.parent_item_id && <span>由任务升级而来</span>}
+                </div>
+                {ticket.resolution_md && (
+                  <p className="mt-2 whitespace-pre-wrap text-ink-900">验收结论：{ticket.resolution_md}</p>
+                )}
+                <div className="mt-3 space-y-2">
+                  <input
+                    className="input"
+                    placeholder="给对方的说明（提交或验收时一并发过去）"
+                    value={note}
+                    onChange={(e) => setNote(e.target.value)}
+                  />
+                  {actionButtons(ticket)}
+                </div>
+              </div>
+            )}
+
             <input
               className="input text-base font-medium"
               value={title}
@@ -236,8 +380,38 @@ export function TaskDetail({ wsId, itemId, onClose, onChanged, onDeleted }: Prop
               />
             </label>
 
+            {item.kind === "task" && !["done", "canceled"].includes(item.status) && (
+              <div className="mt-4 rounded-lg border border-ink-100 p-3">
+                <p className="text-sm font-medium">这件事卡在别人手里？升级成工单</p>
+                <p className="mt-1 text-xs text-ink-500">
+                  升级后这条任务会变成「被阻塞」，工单办好并验收通过后自动回到待办，不用你自己盯。
+                </p>
+                <div className="mt-2 flex gap-2">
+                  <select
+                    className="input flex-1"
+                    value={promoteTo}
+                    onChange={(e) => setPromoteTo(e.target.value)}
+                  >
+                    <option value="">选择找谁办…</option>
+                    {members
+                      .filter((m) => m.status === "active")
+                      .map((m) => (
+                        <option key={m.user_id} value={m.user_id}>
+                          {m.nickname}
+                          {m.role === "guest" ? "（访客）" : ""}
+                        </option>
+                      ))}
+                  </select>
+                  <button className="btn-primary" disabled={busy || !promoteTo} onClick={() => void promote()}>
+                    升级成工单
+                  </button>
+                </div>
+              </div>
+            )}
+
+            {notice && <p className="mt-3 text-sm text-emerald-700">{notice}</p>}
             {error && <p className="mt-3 text-sm text-red-600">{error}</p>}
-            {busy && <p className="mt-3 text-xs text-ink-500">保存中…</p>}
+            {busy && <p className="mt-3 text-xs text-ink-500">处理中…</p>}
 
             <h3 className="mt-6 text-sm font-medium">评论（{comments.length}）</h3>
             <ul className="mt-2 space-y-2">
@@ -273,6 +447,9 @@ export function TaskDetail({ wsId, itemId, onClose, onChanged, onDeleted }: Prop
                   {a.action === "status_changed" && a.payload
                     ? ` ${String(a.payload.from ?? "")} → ${String(a.payload.to ?? "")}`
                     : ""}
+                  {a.action === "ticket_submit" && a.payload?.note
+                    ? ` · ${String(a.payload.note)}`
+                    : ""}
                 </li>
               ))}
             </ul>

web/src/components/WorkspaceNav.tsx

@@ -0,0 +1,79 @@
+import { useEffect, useState } from "react";
+import { Link, useLocation } from "react-router-dom";
+import { api } from "../lib/client";
+
+const TABS = [
+  { path: "", label: "任务" },
+  { path: "/board", label: "看板" },
+  { path: "/tickets", label: "工单" },
+  { path: "/members", label: "成员" },
+];
+
+/**
+ * 工作区内的导航条。
+ *
+ * 未读数为什么放在这里：用户在哪个页面都可能被指派工单，
+ * 角标必须跟着走，所以让它自己拉一次、再每 30 秒对齐一次。
+ * `refreshKey` 用来在"刚处理完一条工单"后立刻刷新角标。
+ */
+export function WorkspaceNav({
+  wsId,
+  refreshKey = 0,
+}: {
+  wsId: string;
+  refreshKey?: number;
+}) {
+  const { pathname } = useLocation();
+  const [unread, setUnread] = useState(0);
+  const base = `/w/${wsId}`;
+
+  useEffect(() => {
+    let alive = true;
+    const load = () => {
+      api
+        .get<{ unread: number }>(`/workspaces/${wsId}/notifications/unread-count`)
+        .then((r) => {
+          if (alive) setUnread(r.unread);
+        })
+        .catch(() => {
+          /* 角标失败不打扰用户 */
+        });
+    };
+    void load();
+    const timer = window.setInterval(load, 30_000);
+    return () => {
+      alive = false;
+      window.clearInterval(timer);
+    };
+  }, [wsId, refreshKey]);
+
+  return (
+    <nav className="flex items-center gap-4 text-sm">
+      {TABS.map((tab) => {
+        const active =
+          tab.path === "" ? pathname === base : pathname.startsWith(base + tab.path);
+        return (
+          <Link
+            key={tab.label}
+            to={base + tab.path}
+            className={
+              active
+                ? "font-medium text-ink-900"
+                : "text-ink-500 transition hover:text-ink-900"
+            }
+          >
+            {tab.label}
+            {tab.path === "/tickets" && unread > 0 && (
+              <span className="ml-1 rounded-full bg-accent-500 px-1.5 text-[10px] leading-4 text-white">
+                {unread > 99 ? "99+" : unread}
+              </span>
+            )}
+          </Link>
+        );
+      })}
+      <Link to="/" className="text-ink-500 transition hover:text-ink-900">
+        切换
+      </Link>
+    </nav>
+  );
+}

web/src/lib/parse.ts

@@ -1,4 +1,4 @@
-import type { ItemStatus } from "./types";
+import type { ItemStatus, TaskStatus } from "./types";
 
 const PRIORITY_ALIASES: Record<string, number> = {
   "!0": 0,
@@ -53,17 +53,26 @@ export const ROLE_LABEL: Record<string, string> = {
   guest: "访客",
 };
 
-export const STATUS_LABEL: Record<ItemStatus, string> = {
+export const STATUS_LABEL: Record<string, string> = {
+  // 任务
   inbox: "收件箱",
   todo: "待办",
   doing: "进行中",
   done: "已完成",
   blocked: "被阻塞",
   canceled: "已取消",
+  // 工单（与任务的 done/canceled 共用）
+  open: "待接收",
+  accepted: "待办理",
+  in_progress: "办理中",
+  pending_verify: "待验收",
 };
 
-/** 状态机前端影子：只用来置灰拖拽目标，服务端仍会再校验一次。 */
+/**
-export const ALLOWED: Record<ItemStatus, ItemStatus[]> = {
+ * 任务状态机的前端影子：只用来置灰拖拽目标，服务端仍会再校验一次。
+ * 工单的状态机在服务端（动作驱动），前端不做影子，直接看按钮。
+ */
+export const ALLOWED: Record<string, TaskStatus[]> = {
   inbox: ["todo", "canceled"],
   todo: ["inbox", "doing", "done", "canceled"],
   doing: ["todo", "done", "blocked", "canceled"],
@@ -72,8 +81,8 @@ export const ALLOWED: Record<ItemStatus, ItemStatus[]> = {
   canceled: ["todo"],
 };
 
-export function canTransition(from: ItemStatus, to: ItemStatus): boolean {
+export function canTransition(from: string, to: string): boolean {
-  return from === to || (ALLOWED[from] ?? []).includes(to);
+  return from === to || (ALLOWED[from] ?? []).includes(to as TaskStatus);
 }
 
 export const PRIORITY_LABEL: Record<number, string> = {

web/src/lib/types.ts

@@ -39,7 +39,16 @@ export interface Invitation {
   expires_at: string;
 }
 
-export type ItemStatus = "inbox" | "todo" | "doing" | "done" | "blocked" | "canceled";
+export type TaskStatus = "inbox" | "todo" | "doing" | "done" | "blocked" | "canceled";
+export type TicketStatus =
+  | "open"
+  | "accepted"
+  | "in_progress"
+  | "pending_verify"
+  | "done"
+  | "canceled";
+
+export type ItemStatus = TaskStatus | TicketStatus;
 
 export interface Tag {
   id: string;
@@ -74,4 +83,32 @@ export interface Activity {
 
 export interface ItemDetail extends Item {
   activities: Activity[];
+  ticket?: TicketInfo;
+}
+
+export interface TicketInfo {
+  requester_id: string;
+  assignee_id: string;
+  parent_item_id: string | null;
+  accepted_at: string | null;
+  submitted_at: string | null;
+  verified_at: string | null;
+  verified_by: string | null;
+  reject_count: number;
+  resolution_md: string;
+}
+
+export interface Ticket extends Item {
+  ticket: TicketInfo;
+}
+
+export interface Notification {
+  id: string;
+  kind: string;
+  item_id: string | null;
+  item_title: string | null;
+  title: string;
+  body: string;
+  read_at: string | null;
+  created_at: string;
 }

web/src/pages/Board.tsx

@@ -1,7 +1,8 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { Link, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import { Layout } from "../components/Layout";
 import { TaskDetail } from "../components/TaskDetail";
+import { WorkspaceNav } from "../components/WorkspaceNav";
 import { ApiError, api } from "../lib/client";
 import { PRIORITY_LABEL, STATUS_LABEL, canTransition } from "../lib/parse";
 import type { Item, ItemStatus } from "../lib/types";
@@ -24,7 +25,7 @@ interface BatchResult {
 }
 
 export function BoardPage() {
-  const { wsId } = useParams<{ wsId: string }>();
+  const { wsId = "" } = useParams<{ wsId: string }>();
   const [columns, setColumns] = useState<Record<string, Item[]>>({});
   const [selected, setSelected] = useState<Set<string>>(new Set());
   const [dragId, setDragId] = useState<string | null>(null);
@@ -143,14 +144,7 @@ export function BoardPage() {
             拖卡片改状态；勾选后可以批量移动。状态机不允许的组合会直接拒绝并说明原因。
           </p>
         </div>
-        <div className="flex items-center gap-3 text-sm">
+        <WorkspaceNav wsId={wsId} />
-          <Link to={`/w/${wsId}`} className="text-ink-500 hover:text-ink-900">
-            列表
-          </Link>
-          <Link to={`/w/${wsId}/members`} className="text-ink-500 hover:text-ink-900">
-            成员
-          </Link>
-        </div>
       </div>
 
       {selectedItems.length > 0 && (

web/src/pages/Login.tsx

@@ -1,13 +1,25 @@
 import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import { useAuth } from "../App";
 import { Layout } from "../components/Layout";
 import { ApiError, api, session, type Tokens } from "../lib/client";
 import type { User } from "../lib/types";
 
+/**
+ * 登录后回哪儿：`?next=` 给邀请链接用。
+ * 只接受站内路径（以单个 `/` 开头），避免被拼成 `//evil.com` 的外跳。
+ */
+function safeNext(raw: string | null): string | null {
+  if (!raw) return null;
+  if (!raw.startsWith("/") || raw.startsWith("//")) return null;
+  return raw;
+}
+
 export function LoginPage() {
   const { reload } = useAuth();
   const navigate = useNavigate();
+  const [params] = useSearchParams();
+  const next = safeNext(params.get("next"));
   const [phone, setPhone] = useState("");
   const [code, setCode] = useState("");
   const [devCode, setDevCode] = useState<string | null>(null);
@@ -45,7 +57,7 @@ export function LoginPage() {
       const data = await api.post<{ user: User; tokens: Tokens }>("/auth/login", { phone, code });
       session.save(data.tokens);
       await reload();
-      navigate("/", { replace: true });
+      navigate(next ?? "/", { replace: true });
     } catch (err) {
       setError(err instanceof ApiError ? err.message : "登录失败");
     } finally {

web/src/pages/Tasks.tsx

@@ -1,7 +1,8 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Link, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import { Layout } from "../components/Layout";
 import { TaskDetail } from "../components/TaskDetail";
+import { WorkspaceNav } from "../components/WorkspaceNav";
 import { ApiError, api } from "../lib/client";
 import { PRIORITY_LABEL, STATUS_LABEL, parseQuickAdd } from "../lib/parse";
 import type { Item, ItemStatus, Page } from "../lib/types";
@@ -14,10 +15,10 @@ const VIEWS: { key: string; label: string; hint: string; createAs: ItemStatus }[
   { key: "all", label: "全部", hint: "含已取消", createAs: "todo" },
 ];
 
-const STATUS_STYLE: Record<ItemStatus, string> = {
+const STATUS_STYLE: Record<string, string> = {
   inbox: "bg-ink-100 text-ink-700",
   todo: "bg-ink-100 text-ink-700",
-  doing: "bg-accent/15 text-accent",
+  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",
@@ -31,7 +32,7 @@ function dueLabel(iso: string | null): { text: string; overdue: boolean } | null
 }
 
 export function TasksPage() {
-  const { wsId } = useParams<{ wsId: string }>();
+  const { wsId = "" } = useParams<{ wsId: string }>();
   const [view, setView] = useState("today");
   const [items, setItems] = useState<Item[]>([]);
   const [cursor, setCursor] = useState<string | null>(null);
@@ -42,26 +43,32 @@ export function TasksPage() {
   const [error, setError] = useState<string | null>(null);
   const [openId, setOpenId] = useState<string | null>(null);
   const [activeIdx, setActiveIdx] = useState(0);
+  const reqId = useRef(0);
 
   const current = VIEWS.find((v) => v.key === view);
 
   const load = useCallback(
     async (nextCursor?: string | null) => {
       if (!wsId) return;
+      // 换视图/改搜索词会连发多个请求，慢的那个后到会把新结果覆盖掉。
+      // 每次请求记一个号，回来时不是最新号就整包丢弃。
+      const mine = ++reqId.current;
       setLoading(true);
       try {
         const params = new URLSearchParams({ view, limit: "30" });
         if (query.trim()) params.set("q", query.trim());
         if (nextCursor) params.set("cursor", nextCursor);
         const page = await api.get<Page<Item>>(`/workspaces/${wsId}/items?${params}`);
+        if (mine !== reqId.current) return;
         setItems((prev) => (nextCursor ? [...prev, ...page.items] : page.items));
         setCursor(page.next_cursor);
         setHasMore(page.has_more);
         setError(null);
       } catch (err) {
+        if (mine !== reqId.current) return;
         setError(err instanceof ApiError ? err.message : "加载失败");
       } finally {
-        setLoading(false);
+        if (mine === reqId.current) setLoading(false);
       }
     },
     [wsId, view, query],
@@ -147,17 +154,7 @@ export function TasksPage() {
             <span className="ml-2">j/k 选择 · Enter 完成 · e 编辑 · Esc 关闭</span>
           </p>
         </div>
-        <div className="flex items-center gap-3 text-sm">
+        <WorkspaceNav wsId={wsId} />
-          <Link to={`/w/${wsId}/board`} className="text-ink-500 hover:text-ink-900">
-            看板
-          </Link>
-          <Link to={`/w/${wsId}/members`} className="text-ink-500 hover:text-ink-900">
-            成员
-          </Link>
-          <Link to="/" className="text-ink-500 hover:text-ink-900">
-            切换工作区
-          </Link>
-        </div>
       </div>
 
       <div className="mb-4 flex flex-wrap items-center gap-2">

web/src/pages/Tickets.tsx

@@ -0,0 +1,201 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useParams } from "react-router-dom";
+import { Layout } from "../components/Layout";
+import { TaskDetail } from "../components/TaskDetail";
+import { WorkspaceNav } from "../components/WorkspaceNav";
+import { ApiError, api } from "../lib/client";
+import { STATUS_LABEL } from "../lib/parse";
+import type { Item, Ticket } from "../lib/types";
+
+const ROLES = [
+  { key: "assigned", label: "派给我的" },
+  { key: "requested", label: "我发起的" },
+  { key: "all", label: "全部" },
+] as const;
+
+const STATUS_FILTERS = [
+  { key: "", label: "全部状态" },
+  { key: "open", label: "待接收" },
+  { key: "accepted", label: "待办理" },
+  { key: "in_progress", label: "办理中" },
+  { key: "pending_verify", label: "待验收" },
+  { key: "done", label: "已完成" },
+] as const;
+
+export function TicketsPage() {
+  const { wsId = "" } = useParams();
+  const [role, setRole] = useState<(typeof ROLES)[number]["key"]>("assigned");
+  const [status, setStatus] = useState<string>("");
+  const [tickets, setTickets] = useState<Ticket[]>([]);
+  const [cursor, setCursor] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [openId, setOpenId] = useState<string | null>(null);
+  const [badge, setBadge] = useState(0);
+  const reqId = useRef(0);
+
+  const load = useCallback(
+    async (nextCursor: string | null) => {
+      // 切 tab / 切状态会连发请求，慢的回来会盖掉新结果，用序号丢弃过期响应
+      const mine = ++reqId.current;
+      setLoading(true);
+      setError(null);
+      try {
+        const qs = new URLSearchParams({ role });
+        if (status) qs.set("status", status);
+        if (nextCursor) qs.set("cursor", nextCursor);
+        const page = await api.get<{ tickets: Ticket[]; next_cursor: string | null; has_more: boolean }>(
+          `/workspaces/${wsId}/tickets?${qs.toString()}`,
+        );
+        if (mine !== reqId.current) return;
+        setTickets((prev) => (nextCursor ? [...prev, ...page.tickets] : page.tickets));
+        setCursor(page.has_more ? page.next_cursor : null);
+      } catch (err) {
+        if (mine !== reqId.current) return;
+        setError(err instanceof ApiError ? err.message : "工单加载失败");
+      } finally {
+        if (mine === reqId.current) setLoading(false);
+      }
+    },
+    [wsId, role, status],
+  );
+
+  useEffect(() => {
+    void load(null);
+  }, [load]);
+
+  async function quickAction(ticket: Ticket, action: string, body: Record<string, unknown> = {}) {
+    try {
+      await api.post(`/workspaces/${wsId}/items/${ticket.id}/ticket/${action}`, {
+        version: ticket.version,
+        ...body,
+      });
+      setBadge((n) => n + 1);
+      void load(null);
+    } catch (err) {
+      if (err instanceof ApiError && err.code === 4009) {
+        setError("这条刚被别人改过，已为你刷新列表");
+        void load(null);
+        return;
+      }
+      setError(err instanceof ApiError ? err.message : "操作失败");
+    }
+  }
+
+  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">
+            待接 → 办理中 → 待验收 → 完成；验收通过后，当初卡住的那条任务会自动回到待办
+          </p>
+        </div>
+        <WorkspaceNav wsId={wsId} refreshKey={badge} />
+      </div>
+
+      <div className="mb-3 flex flex-wrap items-center gap-2">
+        {ROLES.map((r) => (
+          <button
+            key={r.key}
+            onClick={() => setRole(r.key)}
+            className={`rounded-full px-3 py-1 text-sm transition ${
+              role === r.key
+                ? "bg-ink-900 text-white"
+                : "bg-ink-100 text-ink-700 hover:bg-ink-100/70"
+            }`}
+          >
+            {r.label}
+          </button>
+        ))}
+        <select
+          className="input ml-auto w-36"
+          value={status}
+          onChange={(e) => setStatus(e.target.value)}
+        >
+          {STATUS_FILTERS.map((s) => (
+            <option key={s.key} value={s.key}>
+              {s.label}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {error && <p className="mb-3 rounded-lg bg-red-50 p-2 text-sm text-red-700">{error}</p>}
+
+      {tickets.length === 0 && !loading && (
+        <div className="card text-center text-sm text-ink-500">
+          这里还空着。任务卡在别人手里时，在任务详情里点「升级成工单」就会出现在这儿。
+        </div>
+      )}
+
+      <ul className="space-y-2">
+        {tickets.map((t) => (
+          <li key={t.id} className="card">
+            <div className="flex items-start justify-between gap-3">
+              <button className="min-w-0 flex-1 text-left" onClick={() => setOpenId(t.id)}>
+                <p className="truncate text-sm font-medium">{t.title}</p>
+                <p className="mt-1 text-xs text-ink-500">
+                  {STATUS_LABEL[t.status]} · 更新 {new Date(t.updated_at).toLocaleString("zh-CN")}
+                  {t.ticket.reject_count > 0 ? ` · 退回 ${t.ticket.reject_count} 次` : ""}
+                  {t.due_at
+                    ? ` · 截止 ${new Date(t.due_at).toLocaleDateString("zh-CN")}`
+                    : ""}
+                </p>
+              </button>
+              <div className="flex shrink-0 gap-2 text-xs">
+                {t.status === "open" && (
+                  <button className="btn-primary px-2 py-1" onClick={() => void quickAction(t, "accept")}>
+                    接收
+                  </button>
+                )}
+                {t.status === "accepted" && (
+                  <button className="btn-primary px-2 py-1" onClick={() => void quickAction(t, "start")}>
+                    开始
+                  </button>
+                )}
+                {t.status === "pending_verify" && (
+                  <button className="btn-primary px-2 py-1" onClick={() => void quickAction(t, "verify", { approve: true })}>
+                    通过
+                  </button>
+                )}
+                <button className="btn-ghost px-2 py-1" onClick={() => setOpenId(t.id)}>
+                  详情
+                </button>
+              </div>
+            </div>
+          </li>
+        ))}
+      </ul>
+
+      {cursor && (
+        <div className="mt-4 text-center">
+          <button className="btn-ghost" disabled={loading} onClick={() => void load(cursor)}>
+            {loading ? "加载中…" : "加载更多"}
+          </button>
+        </div>
+      )}
+
+      {openId && (
+        <TaskDetail
+          wsId={wsId}
+          itemId={openId}
+          onClose={() => setOpenId(null)}
+          onChanged={(updated: Item) =>
+            setTickets((prev) =>
+              prev.map((t) => (t.id === updated.id ? { ...t, ...updated } : t)),
+            )
+          }
+          onDeleted={(id) => {
+            setTickets((prev) => prev.filter((t) => t.id !== id));
+            setOpenId(null);
+          }}
+          onTicketChanged={() => {
+            setBadge((n) => n + 1);
+            void load(null);
+          }}
+        />
+      )}
+    </Layout>
+  );
+}