diff --git a/web/src/pages/Tickets.tsx b/web/src/pages/Tickets.tsx
new file mode 100644
index 0000000..1c3d5a2
--- /dev/null
+++ b/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
("");
+ const [tickets, setTickets] = useState([]);
+ const [cursor, setCursor] = useState(null);
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
+ const [openId, setOpenId] = useState(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 = {}) {
+ 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 (
+
+
+
+
工单
+
+ 待接 → 办理中 → 待验收 → 完成；验收通过后，当初卡住的那条任务会自动回到待办
+
+
+
+
+ {ROLES.map((r) => (
+
+ ))}
+
+
+
+ {error && {error}
}
+
+ {tickets.length === 0 && !loading && (
+
+ 这里还空着。任务卡在别人手里时，在任务详情里点「升级成工单」就会出现在这儿。
+
+ )}
+
+
+ {tickets.map((t) => (
+ -
+
+
+
+ {t.status === "open" && (
+
+ )}
+ {t.status === "accepted" && (
+
+ )}
+ {t.status === "pending_verify" && (
+
+ )}
+
+
+
+ ))}
+
+
+ {cursor && (
+
+
+
+ )}
+
+ {openId && (
+ 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);
+ }}
+ />
+ )}
+
+ );
+}