fix(web): 规则删除按操作隔离 busy(deletingId/adding) + 全空规则页折叠为单一引导

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<boolean> = 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<boolean> = 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));

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<RuleView[]>(initial);
-  const [busy, setBusy] = useState(false);
+  const [adding, setAdding] = useState(false);
+  const [deletingId, setDeletingId] = useState<string | null>(null);
   const toast = useToast();
 
   const add = useCallback<UseRules["add"]>(
@@ -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 };
 }