深度优化 ui

app/admin/subscriptions/page.tsx

@@ -1,5 +1,12 @@
+import { ActionForm } from "@/components/action-form";
+import { CopyButton } from "@/components/copy-button";
+import { Input } from "@/components/ui/input";
+import { SubmitButton } from "@/components/submit-button";
 import { getRequestOrigin } from "@/lib/request-origin";
-import { buildSubscriptionUrl, getDefaultClashTemplate } from "@/lib/subscription";
+import {
+  buildSubscriptionUrl,
+  getDefaultClashTemplate,
+} from "@/lib/subscription";
 import {
   getAdminMirrorUser,
   getSubscriptionSettings,
@@ -32,18 +39,12 @@ export default async function AdminSubscriptionsPage() {
           <span className="eyebrow">订阅</span>
           <h2>订阅与模板</h2>
           <div className="badge-row">
-            <span className="status-pill status-pill--ok">节点 {nodes.length}</span>
-            <span className="status-pill status-pill--ink">分组 {settings.proxyGroups.length}</span>
-          </div>
-        </div>
-        <div className="hero-aside">
-          <div className="stat-tile">
-            <span>可用节点</span>
-            <strong>{nodes.length}</strong>
-          </div>
-          <div className="stat-tile">
-            <span>默认主组</span>
-            <strong>{settings.profileName}</strong>
+            <span className="status-pill status-pill--ok">
+              节点 {nodes.length}
+            </span>
+            <span className="status-pill status-pill--ink">
+              分组 {settings.proxyGroups.length}
+            </span>
           </div>
         </div>
       </section>
@@ -54,9 +55,17 @@ export default async function AdminSubscriptionsPage() {
         </div>
         {adminUser?.subscription_token ? (
           <div className="instruction-block no-margin">
-            <p className="muted mono break-all">
-              {buildSubscriptionUrl(adminUser.subscription_token, origin)}
-            </p>
+            <div className="copy-line">
+              <code>
+                {buildSubscriptionUrl(adminUser.subscription_token, origin)}
+              </code>
+              <CopyButton
+                value={buildSubscriptionUrl(
+                  adminUser.subscription_token,
+                  origin,
+                )}
+              />
+            </div>
           </div>
         ) : (
           <p className="muted">管理员订阅链接暂不可用。</p>
@@ -81,21 +90,43 @@ export default async function AdminSubscriptionsPage() {
           />
 
           {settings.proxyGroups.map((group) => (
-            <ProxyGroupEditor key={group.id} group={group} nodes={proxyGroupNodes} />
+            <details key={group.id} className="group-disclosure">
+              <summary className="group-summary">
+                <strong>{group.name}</strong>
+                <span>{group.memberSlugs.length} 个节点 · 编辑分组</span>
+              </summary>
+              <ProxyGroupEditor group={group} nodes={proxyGroupNodes} />
+            </details>
           ))}
 
-          <ProxyGroupEditor key={`new-${settings.proxyGroups.length}`} nodes={proxyGroupNodes} />
+          <details
+            key={`new-${settings.proxyGroups.length}`}
+            className="group-disclosure"
+          >
+            <summary className="group-summary">
+              <strong>新建分组</strong>
+            </summary>
+            <ProxyGroupEditor nodes={proxyGroupNodes} />
+          </details>
         </div>
       </section>
 
-      <section className="panel-card">
-        <div className="section-title">
-          <h3>订阅模板</h3>
-        </div>
-        <form action={saveSubscriptionSettingsAction} className="stack-lg">
+      <details className="panel-card group-disclosure">
+        <summary className="group-summary">
+          <strong>订阅模板</strong>
+          <span>编辑 YAML 与默认组名</span>
+        </summary>
+        <ActionForm
+          action={saveSubscriptionSettingsAction}
+          className="stack-lg"
+        >
           <label className="field">
             <span>订阅文件名 / 默认主组名</span>
-            <input name="profile_name" defaultValue={settings.profileName} required />
+            <Input
+              name="profile_name"
+              defaultValue={settings.profileName}
+              required
+            />
           </label>
           <label className="field">
             <span>基础模板</span>
@@ -114,11 +145,9 @@ export default async function AdminSubscriptionsPage() {
               placeholder={`  - name: ChatGPT\n    type: select\n    proxies: ["US 01 - hy2", "JP 01 - hy2"]`}
             />
           </label>
-          <button className="primary-button" type="submit">
-            保存订阅模板
-          </button>
-        </form>
-      </section>
+          <SubmitButton variant="default">保存订阅模板</SubmitButton>
+        </ActionForm>
+      </details>
     </main>
   );
 }