feat(web): 工单页与升级面板，修掉视图竞态与标签缺失导致的崩溃
- 新增 /w/:wsId/tickets：派给我的 / 我发起的、状态过滤、列表内联快操作 - 详情抽屉按角色显示受理/开工/提交/验收/驳回/改派/取消；任务态底部可升级成工单 - 导航抽成 WorkspaceNav，带未读角标（30 秒对齐，操作后立刻刷新） - 修竞态：切视图/切 tab 连发请求时，慢的回包会把新结果盖掉（reqId 序号丢弃过期响应） - 登录支持 ?next= 站内回跳，邀请链接不再'登录完掉回首页' - e2e/tickets.mjs：双人双上下文的完整闭环，8 项断言全绿
This commit is contained in:
dadao
+4
-10
@@ -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">
|
||||
<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>
|
||||
<WorkspaceNav wsId={wsId} />
|
||||
</div>
|
||||
|
||||
{selectedItems.length > 0 && (
|
||||
|
||||
+14
-2
@@ -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 {
|
||||
|
||||
+14
-17
@@ -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<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">
|
||||
<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>
|
||||
<WorkspaceNav wsId={wsId} />
|
||||
</div>
|
||||
|
||||
<div className="mb-4 flex flex-wrap items-center gap-2">
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user