feat: improve app ui and project metadata

apps/web/components/style/StyleUpload.tsx

@@ -4,6 +4,10 @@ import { useCallback, useState, type ChangeEvent } from "react";
 
 import { hasUsableSamples, type StyleLearnMode } from "@/lib/style/style";
 import { useToast } from "@/components/Toast";
+import { Button } from "@/components/ui/Button";
+import { Field } from "@/components/ui/Field";
+import { StatusNote } from "@/components/ui/StatusNote";
+import { TextArea } from "@/components/ui/TextArea";
 
 interface StyleUploadProps {
   busy: boolean;
@@ -61,21 +65,15 @@ export function StyleUpload({
 
   return (
     <div className="space-y-3">
-      <div>
-        <label
-          htmlFor="style-samples"
-          className="mb-1 block text-sm font-semibold text-ink"
-        >
-          样本正文（空行分段；可粘贴多段）
-        </label>
-        <textarea
+      <Field label="样本正文（空行分段；可粘贴多段）" htmlFor="style-samples">
+        <TextArea
           id="style-samples"
           value={text}
           onChange={(e) => setText(e.target.value)}
           placeholder="粘贴你想学习文风的章节正文…"
-          className="min-h-[30vh] w-full resize-y rounded border border-line bg-panel p-3 font-serif text-[15px] leading-[1.9] text-ink focus:border-cinnabar focus:outline-none"
+          className="min-h-[30vh] bg-panel font-serif text-[15px] leading-[1.9]"
         />
-      </div>
+      </Field>
 
       <div className="flex items-center gap-3">
         <label className="cursor-pointer rounded border border-line px-3 py-1.5 text-sm text-ink hover:border-cinnabar hover:text-cinnabar">
@@ -88,22 +86,17 @@ export function StyleUpload({
             className="sr-only"
           />
         </label>
-        <button
-          type="button"
-          onClick={submit}
-          disabled={busy}
-          className="rounded bg-cinnabar px-4 py-1.5 text-sm text-panel hover:opacity-90 disabled:opacity-50"
-        >
+        <Button type="button" onClick={submit} disabled={busy} variant="primary">
           {hasFingerprint ? "重新学习文风" : "学习文风"}
-        </button>
+        </Button>
       </div>
 
       {pollStatus === "polling" ? (
-        <p className="text-xs text-info" aria-live="polite">
+        <StatusNote variant="info" aria-live="polite">
           提取文风指纹中…（{progress}%）
-        </p>
+        </StatusNote>
       ) : pollStatus === "error" ? (
-        <p className="text-xs text-conflict">学文风失败，请稍后重试。</p>
+        <StatusNote variant="danger">学文风失败，请稍后重试。</StatusNote>
       ) : null}
     </div>
   );