feat: improve app ui and project metadata

apps/web/components/generation/WorldGenerator.tsx

@@ -1,7 +1,12 @@
 "use client";
 
 import { useCallback, useState } from "react";
+import { Sparkles } from "lucide-react";
 
+import { Button } from "@/components/ui/Button";
+import { Field } from "@/components/ui/Field";
+import { SectionHeader } from "@/components/ui/SectionHeader";
+import { TextArea } from "@/components/ui/TextArea";
 import { worldEntityRules } from "@/lib/generation/cards";
 import { useWorldGen } from "@/lib/generation/useWorldGen";
 
@@ -24,25 +29,23 @@ export function WorldGenerator({ projectId }: WorldGeneratorProps) {
   return (
     <section className="flex flex-col gap-4" aria-label="世界观设计器">
       <div className="rounded border border-line bg-panel p-4">
-        <h2 className="mb-3 font-serif text-base text-ink">世界观设计器</h2>
-        <label className="mb-3 block text-sm text-ink-soft">
-          设定方向
-          <textarea
+        <SectionHeader title="世界观设计器" className="mb-3" />
+        <Field label="设定方向" className="mb-3">
+          <TextArea
             value={brief}
             onChange={(e) => setBrief(e.target.value)}
             placeholder="如：东方修真世界，灵气复苏，宗门林立，强者寿元有限"
             rows={3}
-            className="mt-1 w-full resize-y rounded border border-line bg-bg px-3 py-2 text-sm text-ink"
           />
-        </label>
-        <button
-          type="button"
+        </Field>
+        <Button
           onClick={() => void onGenerate()}
           disabled={generating || brief.trim().length === 0}
-          className="rounded bg-cinnabar px-4 py-2 text-sm text-white disabled:opacity-50"
+          variant="primary"
         >
+          <Sparkles className="h-4 w-4" aria-hidden="true" />
           {generating ? "生成中…" : "生成世界观"}
-        </button>
+        </Button>
       </div>
 
       {gen.status === "done" && gen.entities.length > 0 ? (