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

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<RuleLevel>("project");
   const [content, setContent] = useState("");
   const groups = useMemo(() => groupByLevel(items), [items]);
@@ -81,41 +82,33 @@ export function RulesPage({ project, initialRules }: RulesPageProps) {
           </Field>
           <Button
             type="submit"
-            disabled={busy || content.trim().length === 0}
+            disabled={adding || content.trim().length === 0}
             className="mt-3"
             variant="primary"
           >
             <Plus className="h-4 w-4" aria-hidden="true" />
-            {busy ? "保存中…" : "新增规则"}
+            {adding ? "保存中…" : "新增规则"}
           </Button>
         </form>
 
+        {items.length === 0 ? (
+          <EmptyState
+            icon={Plus}
+            title="还没有任何规则"
+            description="从上方表单添加第一条，写作与审稿都会共同引用这些规则。"
+          />
+        ) : (
           <div className="flex flex-col gap-4">
             {RULE_LEVELS.map((lv) => (
               <section key={lv}>
-              <h2 className="mb-2 font-serif text-sm text-ink">
+                <h2 className="mb-2 flex items-center gap-2 font-serif text-sm text-ink">
                   {RULE_LEVEL_LABELS[lv]}
-                <span className="ml-2 text-xs text-ink-soft">
+                  <Badge variant="neutral">{groups[lv].length}</Badge>
-                  {groups[lv].length}
-                </span>
                 </h2>
                 {groups[lv].length === 0 ? (
-                <EmptyState
+                  <p className="px-1 text-xs text-ink-soft">
-                  icon={Plus}
+                    暂无{RULE_LEVEL_LABELS[lv]}规则
-                  title="暂无规则"
+                  </p>
-                  description={`还没有${RULE_LEVEL_LABELS[lv]}规则。`}
-                  action={
-                    <Button
-                      onClick={() => setLevel(lv)}
-                      variant="secondary"
-                      size="sm"
-                    >
-                      <Plus className="h-4 w-4" aria-hidden="true" />
-                      添加{RULE_LEVEL_LABELS[lv]}规则
-                    </Button>
-                  }
-                  className="px-4 py-6"
-                />
                 ) : (
                   <ul className="flex flex-col gap-2">
                     {groups[lv].map((rule) => (
@@ -131,13 +124,13 @@ export function RulesPage({ project, initialRules }: RulesPageProps) {
                         <Button
                           variant="danger"
                           size="sm"
-                        disabled={busy}
+                          disabled={deletingId === rule.id}
                           onClick={() => void remove(project.id, rule.id)}
                           aria-label="删除规则"
                           className="shrink-0"
                         >
                           <Trash2 className="h-3 w-3" aria-hidden="true" />
-                        删除
+                          {deletingId === rule.id ? "删除中…" : "删除"}
                         </Button>
                       </li>
                     ))}
@@ -146,6 +139,7 @@ export function RulesPage({ project, initialRules }: RulesPageProps) {
               </section>
             ))}
           </div>
+        )}
       </div>
     </AppShell>
   );

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 };
 }