feat: improve app ui and project metadata

apps/web/components/templates/TemplatesManager.tsx

@@ -3,6 +3,11 @@
 import { useCallback, useState } from "react";
 
 import { useToast } from "@/components/Toast";
+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 { TextInput } from "@/components/ui/TextInput";
 import { api } from "@/lib/api/client";
 import type { TemplateResponse } from "@/lib/api/types";
 import {
@@ -89,56 +94,49 @@ export function TemplatesManager({ initial }: TemplatesManagerProps) {
           void onCreate();
         }}
       >
-        <h2 className="font-serif text-lg text-ink">新建模板</h2>
-        <label className="block text-sm text-ink-soft">
-          标题 *
-          <input
+        <SectionHeader title="新建模板" />
+        <Field label="标题" required>
+          <TextInput
             type="text"
             value={draft.title}
             onChange={(e) => setField("title", e.target.value)}
-            className="mt-1 w-full rounded border border-line bg-bg px-3 py-2 text-sm text-ink"
             aria-label="标题"
           />
-        </label>
-        <label className="block text-sm text-ink-soft">
-          正文 *（一键填入生成器的 brief/原文）
-          <textarea
+        </Field>
+        <Field label="正文" required help="一键填入生成器的 brief/原文。">
+          <TextArea
             value={draft.body}
             onChange={(e) => setField("body", e.target.value)}
             rows={4}
-            className="mt-1 w-full resize-y rounded border border-line bg-bg px-3 py-2 text-sm text-ink"
             aria-label="正文"
           />
-        </label>
+        </Field>
         <div className="flex flex-wrap gap-4">
-          <label className="block text-sm text-ink-soft">
-            分类（可选）
-            <input
+          <Field label="分类（可选）" className="w-full sm:w-48">
+            <TextInput
               type="text"
               value={draft.category}
               onChange={(e) => setField("category", e.target.value)}
-              className="mt-1 w-48 rounded border border-line bg-bg px-3 py-2 text-sm text-ink"
               aria-label="分类"
             />
-          </label>
-          <label className="block text-sm text-ink-soft">
-            关联生成器 key（可选）
-            <input
+          </Field>
+          <Field label="关联生成器 key（可选）" className="w-full sm:w-48">
+            <TextInput
               type="text"
               value={draft.toolKey}
               onChange={(e) => setField("toolKey", e.target.value)}
-              className="mt-1 w-48 rounded border border-line bg-bg px-3 py-2 text-sm text-ink"
               aria-label="关联生成器 key"
             />
-          </label>
+          </Field>
         </div>
-        <button
+        <Button
           type="submit"
           disabled={creating || !isTemplateDraftValid(draft)}
-          className="self-start rounded bg-cinnabar px-4 py-2 text-sm text-white disabled:opacity-50"
+          variant="primary"
+          className="self-start"
         >
           {creating ? "新建中…" : "新建模板"}
-        </button>
+        </Button>
       </form>
 
       <section className="flex flex-col gap-3" aria-label="模板列表">
@@ -163,14 +161,16 @@ export function TemplatesManager({ initial }: TemplatesManagerProps) {
                     {t.body}
                   </p>
                 </div>
-                <button
+                <Button
                   type="button"
                   onClick={() => void onDelete(t.id)}
-                  className="shrink-0 rounded border border-line px-3 py-1 text-ink-soft hover:text-conflict"
+                  variant="danger"
+                  size="sm"
+                  className="shrink-0"
                   aria-label={`删除模板 ${t.title}`}
                 >
                   删除
-                </button>
+                </Button>
               </li>
             ))}
           </ul>