From b1dc3cffa636a562f9cbf9bf818fff0c98bd4552 Mon Sep 17 00:00:00 2001 From: dadao Date: Wed, 28 Oct 2026 13:20:18 +0800 Subject: [PATCH] =?UTF-8?q?feat(web):=20=E5=B7=A5=E5=8D=95=E9=A1=B5?= =?UTF-8?q?=E4=B8=8E=E5=8D=87=E7=BA=A7=E9=9D=A2=E6=9D=BF=EF=BC=8C=E4=BF=AE?= =?UTF-8?q?=E6=8E=89=E8=A7=86=E5=9B=BE=E7=AB=9E=E6=80=81=E4=B8=8E=E6=A0=87?= =?UTF-8?q?=E7=AD=BE=E7=BC=BA=E5=A4=B1=E5=AF=BC=E8=87=B4=E7=9A=84=E5=B4=A9?= =?UTF-8?q?=E6=BA=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增 /w/:wsId/tickets：派给我的 / 我发起的、状态过滤、列表内联快操作 - 详情抽屉按角色显示受理/开工/提交/验收/驳回/改派/取消；任务态底部可升级成工单 - 导航抽成 WorkspaceNav，带未读角标（30 秒对齐，操作后立刻刷新） - 修竞态：切视图/切 tab 连发请求时，慢的回包会把新结果盖掉（reqId 序号丢弃过期响应） - 登录支持 ?next= 站内回跳，邀请链接不再'登录完掉回首页' - e2e/tickets.mjs：双人双上下文的完整闭环，8 项断言全绿 --- web/e2e/smoke.mjs | 3 +- web/e2e/tickets.mjs | 196 +++++++++++++++++++++++++++ web/src/App.tsx | 2 + web/src/components/TaskDetail.tsx | 193 ++++++++++++++++++++++++-- web/src/components/WorkspaceNav.tsx | 79 +++++++++++ web/src/lib/parse.ts | 21 ++- web/src/lib/types.ts | 39 +++++- web/src/pages/Board.tsx | 14 +- web/src/pages/Login.tsx | 16 ++- web/src/pages/Tasks.tsx | 31 ++--- web/src/pages/Tickets.tsx | 201 ++++++++++++++++++++++++++++ 11 files changed, 750 insertions(+), 45 deletions(-) create mode 100644 web/e2e/tickets.mjs create mode 100644 web/src/components/WorkspaceNav.tsx create mode 100644 web/src/pages/Tickets.tsx diff --git a/web/e2e/smoke.mjs b/web/e2e/smoke.mjs index 5591541..75e9993 100644 --- a/web/e2e/smoke.mjs +++ b/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：初稿已出，等评审"); diff --git a/web/e2e/tickets.mjs b/web/e2e/tickets.mjs new file mode 100644 index 0000000..7aa185b --- /dev/null +++ b/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); +} diff --git a/web/src/App.tsx b/web/src/App.tsx index bbcf645..3521977 100644 --- a/web/src/App.tsx +++ b/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() { } /> } /> } /> + } /> } /> } /> } /> diff --git a/web/src/components/TaskDetail.tsx b/web/src/components/TaskDetail.tsx index a269905..2bf83d1 100644 --- a/web/src/components/TaskDetail.tsx +++ b/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(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([]); const [draft, setDraft] = useState(""); const [error, setError] = useState(null); + const [notice, setNotice] = useState(null); const [busy, setBusy] = useState(false); + const [role, setRole] = useState("member"); + const [members, setMembers] = useState([]); + 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>(`/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( - values: Record, - label: string, - ): Promise { + async function patch(values: Record, label: string): Promise { 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 = {}) { + if (!item) return; + setBusy(true); + setError(null); + try { + const updated = await api.post( + `${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(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 ( +
+ {buttons + .filter((b) => b.show && !(verifyOnly && (b.key === "approve" || b.key === "reject"))) + .map((b) => ( + + ))} +
+ ); + } + return (
-
- - 列表 - - - 成员 - -
+ {selectedItems.length > 0 && ( diff --git a/web/src/pages/Login.tsx b/web/src/pages/Login.tsx index 9fa6162..b692f66 100644 --- a/web/src/pages/Login.tsx +++ b/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(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 { diff --git a/web/src/pages/Tasks.tsx b/web/src/pages/Tasks.tsx index e98d1f6..5d5e9ca 100644 --- a/web/src/pages/Tasks.tsx +++ b/web/src/pages/Tasks.tsx @@ -1,7 +1,8 @@ -import { useCallback, useEffect, useMemo, useState } from "react"; -import { Link, useParams } from "react-router-dom"; +import { useCallback, useEffect, useMemo, 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 { 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 = { +const STATUS_STYLE: Record = { 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([]); const [cursor, setCursor] = useState(null); @@ -42,26 +43,32 @@ export function TasksPage() { const [error, setError] = useState(null); const [openId, setOpenId] = useState(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>(`/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() { j/k 选择 · Enter 完成 · e 编辑 · Esc 关闭

-
- - 看板 - - - 成员 - - - 切换工作区 - -
+
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); + }} + /> + )} + + ); +}