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,71 +82,64 @@ 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>
 
-        <div className="flex flex-col gap-4">
-          {RULE_LEVELS.map((lv) => (
-            <section key={lv}>
-              <h2 className="mb-2 font-serif text-sm text-ink">
-                {RULE_LEVEL_LABELS[lv]}
-                <span className="ml-2 text-xs text-ink-soft">
-                  {groups[lv].length}
-                </span>
-              </h2>
-              {groups[lv].length === 0 ? (
-                <EmptyState
-                  icon={Plus}
-                  title="暂无规则"
-                  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) => (
-                    <li
-                      key={rule.id}
-                      className={cardClass(
-                        "flex items-start justify-between gap-3 p-3 text-sm text-ink",
-                      )}
-                    >
-                      <span className="min-w-0 flex-1 break-words">
-                        {rule.content}
-                      </span>
-                      <Button
-                        variant="danger"
-                        size="sm"
-                        disabled={busy}
-                        onClick={() => void remove(project.id, rule.id)}
-                        aria-label="删除规则"
-                        className="shrink-0"
+        {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 flex items-center gap-2 font-serif text-sm text-ink">
+                  {RULE_LEVEL_LABELS[lv]}
+                  <Badge variant="neutral">{groups[lv].length}</Badge>
+                </h2>
+                {groups[lv].length === 0 ? (
+                  <p className="px-1 text-xs text-ink-soft">
+                    暂无{RULE_LEVEL_LABELS[lv]}规则
+                  </p>
+                ) : (
+                  <ul className="flex flex-col gap-2">
+                    {groups[lv].map((rule) => (
+                      <li
+                        key={rule.id}
+                        className={cardClass(
+                          "flex items-start justify-between gap-3 p-3 text-sm text-ink",
+                        )}
                       >
-                        <Trash2 className="h-3 w-3" aria-hidden="true" />
-                        删除
-                      </Button>
-                    </li>
-                  ))}
-                </ul>
-              )}
-            </section>
-          ))}
-        </div>
+                        <span className="min-w-0 flex-1 break-words">
+                          {rule.content}
+                        </span>
+                        <Button
+                          variant="danger"
+                          size="sm"
+                          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>
+                    ))}
+                  </ul>
+                )}
+              </section>
+            ))}
+          </div>
+        )}
       </div>
     </AppShell>
   );