feat: improve app ui and project metadata

apps/web/components/settings/KimiCodeOauth.tsx

@@ -1,5 +1,10 @@
 "use client";
 
+import { ExternalLink, Link2Off, PlugZap } from "lucide-react";
+
+import { Button } from "@/components/ui/Button";
+import { SectionHeader } from "@/components/ui/SectionHeader";
+import { StatusNote } from "@/components/ui/StatusNote";
 import { authOpenUrl, formatExpiresAt } from "@/lib/settings/kimiOauth";
 import { useKimiOauth } from "@/lib/settings/useKimiOauth";
 
@@ -19,17 +24,22 @@ export function KimiCodeOauth({
   const expiresLabel = formatExpiresAt(expiresAt);
 
   return (
-    <section className="mb-10">
-      <h2 className="mb-1 font-serif text-xl text-ink">Kimi Code（OAuth）</h2>
-      <p className="mb-3 text-sm text-ink-soft">
-        订阅 plan 经 OAuth 设备授权连接（无需 API Key）。连接后可在上方档位路由里选用
-        <span className="font-mono"> kimi-code · kimi-for-coding</span>。
-      </p>
+    <section>
+      <SectionHeader
+        title="Kimi Code（OAuth）"
+        description={
+          <>
+            订阅 plan 经 OAuth 设备授权连接（无需 API Key）。连接后可在上方档位路由里选用
+            <span className="font-mono"> kimi-code · kimi-for-coding</span>。
+          </>
+        }
+        className="mb-3"
+      />
 
       <div className="rounded border border-line bg-panel p-4">
         <div className="flex flex-wrap items-center gap-3">
           <span
-            className={`h-2 w-2 rounded-full ${
+            className={`h-2 w-2 rounded ${
               phase === "connected" ? "bg-pass" : "bg-line"
             }`}
             aria-hidden="true"
@@ -45,27 +55,29 @@ export function KimiCodeOauth({
 
           <div className="ml-auto flex gap-2">
             {phase === "connected" ? (
-              <button
-                type="button"
+              <Button
                 onClick={() => void oauth.disconnect()}
                 disabled={busy}
-                className="rounded border border-line px-3 py-1.5 text-sm text-ink disabled:opacity-40"
+                variant="secondary"
+                size="sm"
               >
+                <Link2Off className="h-4 w-4" aria-hidden="true" />
                 {busy ? "处理中…" : "断开"}
-              </button>
+              </Button>
             ) : (
-              <button
-                type="button"
+              <Button
                 onClick={() => void oauth.connect()}
                 disabled={busy}
-                className="rounded bg-cinnabar px-3 py-1.5 text-sm text-panel disabled:opacity-40"
+                variant="primary"
+                size="sm"
               >
+                <PlugZap className="h-4 w-4" aria-hidden="true" />
                 {busy
                   ? "等待授权…"
                   : phase === "error"
                     ? "重新连接 Kimi Code（OAuth）"
                     : "连接 Kimi Code（OAuth）"}
-              </button>
+              </Button>
             )}
           </div>
         </div>
@@ -77,10 +89,16 @@ export function KimiCodeOauth({
           />
         ) : null}
 
+        {phase !== "awaiting" ? (
+          <StatusNote className="mt-3" variant="info">
+            OAuth 连接只保存加密后的访问凭据；模型选择仍在“档位路由”里统一配置。
+          </StatusNote>
+        ) : null}
+
         {phase === "error" && error ? (
-          <p className="mt-3 text-sm text-conflict" role="alert">
+          <StatusNote className="mt-3" variant="danger" role="alert">
             {error}
-          </p>
+          </StatusNote>
         ) : null}
       </div>
     </section>
@@ -102,23 +120,22 @@ function DeviceInstructions({ userCode, openUrl }: DeviceInstructionsProps) {
 
   return (
     <div className="motion-safe:transition-opacity mt-4 rounded border border-dashed border-line bg-bg p-4">
-      <p className="mb-2 text-sm text-ink-soft">
-        请在浏览器中打开授权页，并确认页面显示的设备码与下方一致：
-      </p>
-      <output
-        aria-label="设备授权码"
-        tabIndex={0}
-        className="mb-3 block select-all rounded bg-panel px-4 py-3 text-center font-mono text-2xl tracking-[0.3em] text-ink"
-      >
-        {userCode}
-      </output>
-      <button
-        type="button"
-        onClick={openAuth}
-        className="rounded border border-cinnabar px-3 py-1.5 text-sm text-cinnabar"
-      >
-        在浏览器中打开授权页
-      </button>
+      <StatusNote className="mb-3" variant="info">
+        请在浏览器中打开授权页，并确认页面显示的设备码与下方一致。
+      </StatusNote>
+      <div className="grid gap-3 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center">
+        <output
+          aria-label="设备授权码"
+          tabIndex={0}
+          className="block select-all rounded bg-panel px-4 py-3 text-center font-mono text-2xl tracking-[0.3em] text-ink"
+        >
+          {userCode}
+        </output>
+        <Button onClick={openAuth} variant="outline" size="sm">
+          <ExternalLink className="h-4 w-4" aria-hidden="true" />
+          打开授权页
+        </Button>
+      </div>
       <p className="mt-2 text-xs text-ink-soft">
         授权完成后本页会自动检测连接状态（设备码过期后请重新连接）。
       </p>