feat: improve app ui and project metadata

apps/web/components/rules/RulesPage.tsx

@@ -1,8 +1,15 @@
 "use client";
 
+import { Plus, Trash2 } from "lucide-react";
 import { useMemo, useState } from "react";
 
 import { AppShell } from "@/components/AppShell";
+import { Button } from "@/components/ui/Button";
+import { EmptyState } from "@/components/ui/EmptyState";
+import { Field } from "@/components/ui/Field";
+import { PageHeader } from "@/components/ui/PageHeader";
+import { Select } from "@/components/ui/Select";
+import { TextArea } from "@/components/ui/TextArea";
 import type { ProjectResponse, RuleView } from "@/lib/api/types";
 import {
   RULE_LEVELS,
@@ -38,41 +45,48 @@ export function RulesPage({ project, initialRules }: RulesPageProps) {
       activeNav="rules"
     >
       <div className="mx-auto flex max-w-3xl flex-col gap-6 p-6">
+        <PageHeader
+          title="规则"
+          description="维护本作、题材、世界观和章节级硬约束，写作与审稿会共同引用这些规则。"
+        />
         <form
           onSubmit={onSubmit}
           className="rounded border border-line bg-panel p-4"
         >
-          <h1 className="mb-3 font-serif text-lg text-ink">新增规则</h1>
+          <h2 className="mb-3 font-serif text-lg text-ink">新增规则</h2>
           <div className="mb-3 flex items-end gap-3">
-            <label className="text-sm text-ink-soft">
-              级别
-              <select
+            <Field label="级别" htmlFor="rule-level">
+              <Select
+                id="rule-level"
                 value={level}
                 onChange={(e) => setLevel(e.target.value as RuleLevel)}
-                className="mt-1 block rounded border border-line bg-bg px-2 py-1.5 text-sm text-ink"
               >
                 {RULE_LEVELS.map((lv) => (
                   <option key={lv} value={lv}>
                     {RULE_LEVEL_LABELS[lv]}
                   </option>
                 ))}
-              </select>
-            </label>
+              </Select>
+            </Field>
           </div>
-          <textarea
-            value={content}
-            onChange={(e) => setContent(e.target.value)}
-            placeholder="如：本作禁用现代科技词汇；称呼一律用「道友」"
-            rows={3}
-            className="w-full resize-y rounded border border-line bg-bg px-3 py-2 text-sm text-ink"
-          />
-          <button
+          <Field label="规则内容" htmlFor="rule-content">
+            <TextArea
+              id="rule-content"
+              value={content}
+              onChange={(e) => setContent(e.target.value)}
+              placeholder="如：本作禁用现代科技词汇；称呼一律用「道友」"
+              rows={3}
+            />
+          </Field>
+          <Button
             type="submit"
             disabled={busy || content.trim().length === 0}
-            className="mt-3 rounded bg-cinnabar px-4 py-2 text-sm text-white disabled:opacity-50"
+            className="mt-3"
+            variant="primary"
           >
+            <Plus className="h-4 w-4" aria-hidden="true" />
             {busy ? "保存中…" : "新增规则"}
-          </button>
+          </Button>
         </form>
 
         <div className="flex flex-col gap-4">
@@ -85,7 +99,22 @@ export function RulesPage({ project, initialRules }: RulesPageProps) {
                 </span>
               </h2>
               {groups[lv].length === 0 ? (
-                <p className="text-xs text-ink-soft">（暂无）</p>
+                <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) => (
@@ -101,8 +130,9 @@ export function RulesPage({ project, initialRules }: RulesPageProps) {
                         disabled={busy}
                         onClick={() => void remove(project.id, rule.id)}
                         aria-label="删除规则"
-                        className="shrink-0 text-xs text-ink-soft hover:text-cinnabar disabled:opacity-50"
+                        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"
                       >
+                        <Trash2 className="h-3 w-3" aria-hidden="true" />
                         删除
                       </button>
                     </li>