refactor(web): 采用 Button/Card 原语替换多处手搓样式

apps/web/components/rules/RulesPage.tsx

@@ -18,6 +18,7 @@ import {
   type RuleLevel,
 } from "@/lib/rules/rules";
 import { useRules } from "@/lib/rules/useRules";
+import { cardClass } from "@/lib/ui/variants";
 
 interface RulesPageProps {
   project: ProjectResponse;
@@ -120,21 +121,24 @@ export function RulesPage({ project, initialRules }: RulesPageProps) {
                   {groups[lv].map((rule) => (
                     <li
                       key={rule.id}
-                      className="flex items-start justify-between gap-3 rounded border border-line bg-panel px-3 py-2 text-sm text-ink"
+                      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
-                        type="button"
+                      <Button
+                        variant="danger"
+                        size="sm"
                         disabled={busy}
                         onClick={() => void remove(project.id, rule.id)}
                         aria-label="删除规则"
-                        className="inline-flex shrink-0 items-center gap-1 rounded border border-transparent px-2 py-1 text-xs text-ink-soft transition-colors hover:border-conflict/25 hover:bg-conflict/10 hover:text-conflict disabled:opacity-50"
+                        className="shrink-0"
                       >
                         <Trash2 className="h-3 w-3" aria-hidden="true" />
                         删除
-                      </button>
+                      </Button>
                     </li>
                   ))}
                 </ul>