深度优化 ui

app/me/page.tsx

@@ -1,9 +1,15 @@
+import { CopyButton } from "@/components/copy-button";
+import { buttonVariants } from "@/components/ui/button";
+import { SubmitButton } from "@/components/submit-button";
 import type { Metadata } from "next";
 import { redirect } from "next/navigation";
 
 import { formatLocalDateTime } from "@/lib/datetime";
 import { getRequestOrigin } from "@/lib/request-origin";
-import { buildSubscriptionUrl, describeRemainingTraffic } from "@/lib/subscription";
+import {
+  buildSubscriptionUrl,
+  describeRemainingTraffic,
+} from "@/lib/subscription";
 import { requireUserSession } from "@/lib/session";
 import { formatBytes, getUserById } from "@/lib/store";
 
@@ -66,22 +72,28 @@ export default async function MePage() {
           <article className="me-panel me-subscription-card">
             <div className="section-title section-title--top">
               <div>
-                <span className="feature-kicker">订阅</span>
                 <h2>订阅</h2>
               </div>
-              <span className="status-pill status-pill--ink">Clash / Mihomo</span>
+              <span className="status-pill status-pill--ink">
+                Clash / Mihomo
+              </span>
             </div>
             <div className="me-action-row">
               {clashImportUrl ? (
-                <a className="primary-button me-action-button" href={clashImportUrl}>
+                <a
+                  className={buttonVariants({ size: "sm" })}
+                  href={clashImportUrl}
+                >
                   一键导入
                 </a>
               ) : (
-                <span className="status-pill status-pill--off">订阅暂不可用</span>
+                <span className="status-pill status-pill--off">
+                  订阅暂不可用
+                </span>
               )}
               {subscriptionUrl ? (
                 <a
-                  className="ghost-button me-action-button"
+                  className={buttonVariants({ variant: "outline", size: "sm" })}
                   href={subscriptionUrl}
                   target="_blank"
                   rel="noreferrer"
@@ -92,7 +104,10 @@ export default async function MePage() {
             </div>
             <div className="me-link-card">
               <span className="feature-kicker">订阅链接</span>
-              <p className="mono break-all">{subscriptionUrl ?? "暂不可用"}</p>
+              <div className="copy-line">
+                <code>{subscriptionUrl ?? "暂不可用"}</code>
+                {subscriptionUrl && <CopyButton value={subscriptionUrl} />}
+              </div>
             </div>
           </article>
 
@@ -122,12 +137,9 @@ export default async function MePage() {
             </article>
 
             <article className="me-panel me-support-card">
-              <span className="feature-kicker">账户</span>
               <h2>账户</h2>
               <form action="/logout" method="post">
-                <button className="ghost-button me-action-button me-action-button--full" type="submit">
-                  退出登录
-                </button>
+                <SubmitButton variant="outline">退出登录</SubmitButton>
               </form>
             </article>
           </div>