diff --git a/apps/web/components/rules/RulesPage.tsx b/apps/web/components/rules/RulesPage.tsx index 41ae654..4ab60d5 100644 --- a/apps/web/components/rules/RulesPage.tsx +++ b/apps/web/components/rules/RulesPage.tsx @@ -4,6 +4,7 @@ import { Plus, Trash2 } from "lucide-react"; import { useMemo, useState } from "react"; import { AppShell } from "@/components/AppShell"; +import { Badge } from "@/components/ui/Badge"; import { Button } from "@/components/ui/Button"; import { EmptyState } from "@/components/ui/EmptyState"; import { Field } from "@/components/ui/Field"; @@ -27,7 +28,7 @@ interface RulesPageProps { // 规则页(UX §7):四级规则列表 + 新增(乐观 + 回滚)。 export function RulesPage({ project, initialRules }: RulesPageProps) { - const { items, busy, add, remove } = useRules(initialRules); + const { items, adding, deletingId, add, remove } = useRules(initialRules); const [level, setLevel] = useState("project"); const [content, setContent] = useState(""); const groups = useMemo(() => groupByLevel(items), [items]); @@ -81,71 +82,64 @@ export function RulesPage({ project, initialRules }: RulesPageProps) { -
- {RULE_LEVELS.map((lv) => ( -
-

- {RULE_LEVEL_LABELS[lv]} - - {groups[lv].length} - -

- {groups[lv].length === 0 ? ( - setLevel(lv)} - variant="secondary" - size="sm" - > -
- ))} -
+ + {rule.content} + + + + ))} + + )} + + ))} + + )} ); diff --git a/apps/web/lib/rules/useRules.test.ts b/apps/web/lib/rules/useRules.test.ts index 1328032..5de518d 100644 --- a/apps/web/lib/rules/useRules.test.ts +++ b/apps/web/lib/rules/useRules.test.ts @@ -23,10 +23,11 @@ describe("useRules", () => { }); afterEach(() => vi.clearAllMocks()); - it("初始 items = 传入值,busy=false", () => { + it("初始 items = 传入值,adding=false、deletingId=null", () => { const { result } = renderHook(() => useRules(seed)); expect(result.current.items).toEqual(seed); - expect(result.current.busy).toBe(false); + expect(result.current.adding).toBe(false); + expect(result.current.deletingId).toBeNull(); }); it("add 空白正文:弹错、不请求、返回 false", async () => { @@ -52,7 +53,7 @@ describe("useRules", () => { expect(ok).toBe(true); expect(result.current.items).toEqual([...seed, authoritative]); - expect(result.current.busy).toBe(false); + expect(result.current.adding).toBe(false); expect(toast).toHaveBeenCalledWith("已新增规则", "success"); }); @@ -80,6 +81,48 @@ describe("useRules", () => { expect(toast).toHaveBeenCalledWith("已删除规则", "success"); }); + it("add 进行中:adding=true 而 deletingId 仍为 null(互不冻结)", async () => { + let resolvePost: (v: { data: RuleView; error: null }) => void = () => {}; + post.mockReturnValue( + new Promise((res) => { + resolvePost = res; + }), + ); + const { result } = renderHook(() => useRules(seed)); + let done: Promise = Promise.resolve(false); + act(() => { + done = result.current.add("p1", "global", "新规则"); + }); + expect(result.current.adding).toBe(true); + expect(result.current.deletingId).toBeNull(); + await act(async () => { + resolvePost({ data: { id: "r1", level: "global", content: "新规则" }, error: null }); + await done; + }); + expect(result.current.adding).toBe(false); + }); + + it("remove 进行中:deletingId=目标 id 而 adding 仍为 false(只冻结该行)", async () => { + let resolveDel: (v: { error: null }) => void = () => {}; + del.mockReturnValue( + new Promise((res) => { + resolveDel = res; + }), + ); + const { result } = renderHook(() => useRules(seed)); + let done: Promise = Promise.resolve(false); + act(() => { + done = result.current.remove("p1", "r0"); + }); + expect(result.current.deletingId).toBe("r0"); + expect(result.current.adding).toBe(false); + await act(async () => { + resolveDel({ error: null }); + await done; + }); + expect(result.current.deletingId).toBeNull(); + }); + it("remove 后端 error:回滚、弹错、返回 false", async () => { del.mockResolvedValue({ error: { detail: "boom" } }); const { result } = renderHook(() => useRules(seed)); diff --git a/apps/web/lib/rules/useRules.ts b/apps/web/lib/rules/useRules.ts index 1c29b0c..5b5fd66 100644 --- a/apps/web/lib/rules/useRules.ts +++ b/apps/web/lib/rules/useRules.ts @@ -9,7 +9,10 @@ import { buildRuleCreateRequest, hasUsableContent, type RuleLevel } from "./rule export interface UseRules { items: RuleView[]; - busy: boolean; + // 正在新增(仅冻结新增表单,不影响删除)。 + adding: boolean; + // 正在删除的那一条 id(仅冻结该行删除按钮,整页其余照常可操作)。 + deletingId: string | null; // 新增一条规则(乐观追加 + 失败回滚 + Toast)。 add: ( projectId: string, @@ -21,9 +24,11 @@ export interface UseRules { } // 规则页(UX §7):列出 + 新增规则。乐观追加,失败回滚(仿 useForeshadow)。 +// add 与 remove 用各自独立的进行中标志,避免删一条就冻结整页。 export function useRules(initial: RuleView[]): UseRules { const [items, setItems] = useState(initial); - const [busy, setBusy] = useState(false); + const [adding, setAdding] = useState(false); + const [deletingId, setDeletingId] = useState(null); const toast = useToast(); const add = useCallback( @@ -40,7 +45,7 @@ export function useRules(initial: RuleView[]): UseRules { content: content.trim(), }; setItems((prev) => [...prev, optimistic]); - setBusy(true); + setAdding(true); try { const { data, error } = await api.POST( "/projects/{project_id}/rules", @@ -59,7 +64,7 @@ export function useRules(initial: RuleView[]): UseRules { toast("已新增规则", "success"); return true; } finally { - setBusy(false); + setAdding(false); } }, [items, toast], @@ -69,7 +74,7 @@ export function useRules(initial: RuleView[]): UseRules { async (projectId, ruleId) => { const snapshot = items; setItems((prev) => prev.filter((r) => r.id !== ruleId)); - setBusy(true); + setDeletingId(ruleId); try { const { error } = await api.DELETE( "/projects/{project_id}/rules/{rule_id}", @@ -83,11 +88,11 @@ export function useRules(initial: RuleView[]): UseRules { toast("已删除规则", "success"); return true; } finally { - setBusy(false); + setDeletingId(null); } }, [items, toast], ); - return { items, busy, add, remove }; + return { items, adding, deletingId, add, remove }; }