fix: add collapse control to external image api settings

app/(admin)/settings/_lib/local-ai-sections.ts

@@ -17,6 +17,7 @@ export const DEFAULT_LOCAL_AI_EXPANDED_SECTIONS: Record<string, boolean> = {
   "angle-edit": false,
   "layer-split": false,
   "third-party-sqlserver": false,
+  "external-image-api": true,
   "realtime-canvas": false,
   "canvas-image-task-queue": false,
   "batch-process": false,

app/(admin)/settings/admin-settings-client.tsx

@@ -17435,9 +17435,10 @@ export function AdminSettingsClient() {
             title="外部开放能力"
           />
 
-          <div id="local-ai-section-external-image-api">
+          <ExternalImageApiSettingsCard
-            <ExternalImageApiSettingsCard />
+            expanded={isLocalAiSectionExpanded("external-image-api")}
-          </div>
+            onToggle={() => toggleLocalAiSection("external-image-api")}
+          />
 
           <LocalAiImagePipelineSections
             angleEditConfig={angleEditConfig}

components/admin/external-image-api-settings-card.tsx

@@ -4,6 +4,10 @@ import { useEffect, useMemo, useState } from "react";
 import useSWR from "swr";
 import { toast } from "sonner";
 import { KeyRound, Plus, Save, Trash2 } from "lucide-react";
+import {
+  LocalAiSectionShell,
+  LocalAiSectionSummary,
+} from "@/app/(admin)/settings/_components/local-ai-section-shell";
 import { formatBeijingTime } from "@/lib/utils";
 import {
   defaultExternalImageApiConfig,
@@ -13,13 +17,6 @@ import {
   type ExternalImageApiConfig,
 } from "@/lib/external-image-api/config";
 import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
@@ -65,7 +62,15 @@ function buildKeyDraft() {
   };
 }
 
-export function ExternalImageApiSettingsCard() {
+export function ExternalImageApiSettingsCard({
+  expanded,
+  onToggle,
+  sectionId = "local-ai-section-external-image-api",
+}: {
+  expanded: boolean;
+  onToggle: () => void;
+  sectionId?: string;
+}) {
   const { data: configData, mutate: mutateConfig } = useSWR<{
     setting?: { value?: unknown };
   }>(`/api/admin/settings?key=${EXTERNAL_IMAGE_API_CONFIG_KEY}`, fetcher);
@@ -136,29 +141,49 @@ export function ExternalImageApiSettingsCard() {
   };
 
   return (
-    <Card>
+    <LocalAiSectionShell
-      <CardHeader className="space-y-2">
+      description={
-        <div className="flex items-center gap-3">
+        <>
-          <div className="rounded-full bg-primary/10 p-2 text-primary">
+          对外开放当前系统里已启用的生图模型。第三方先调
-            <KeyRound className="h-5 w-5" />
+          <code className="mx-1 rounded bg-muted px-1 py-0.5 text-[11px]">
-          </div>
+            /api/external/image/models
-          <div>
+          </code>
-            <CardTitle className="text-xl">第三方生图 API</CardTitle>
+          获取模型名称，再调用
-            <CardDescription>
+          <code className="mx-1 rounded bg-muted px-1 py-0.5 text-[11px]">
-              对外开放当前系统里已启用的生图模型。第三方先调
+            /api/external/image/generate
-              <code className="mx-1 rounded bg-muted px-1 py-0.5 text-[11px]">
+          </code>
-                /api/external/image/models
+          生图。结果会继续走我们的储存桶并落到数据库。
-              </code>
+        </>
-              获取模型名称，再调用
+      }
-              <code className="mx-1 rounded bg-muted px-1 py-0.5 text-[11px]">
+      expanded={expanded}
-                /api/external/image/generate
+      id={sectionId}
-              </code>
+      onToggle={onToggle}
-              生图。结果会继续走我们的储存桶并落到数据库。
+      summary={
-            </CardDescription>
+        <LocalAiSectionSummary
-          </div>
+          items={[
-        </div>
+            {
-      </CardHeader>
+              label: config.enabled ? "开放接口已启用" : "开放接口已关闭",
-      <CardContent className="space-y-6">
+              tone: config.enabled ? "enabled" : "disabled",
+            },
+            {
+              label: `已配置 ${config.apiKeys.length} 个 Key`,
+              tone: config.apiKeys.length > 0 ? "enabled" : "warning",
+            },
+            {
+              label: `启用中 ${enabledKeyCount} 个`,
+              tone: enabledKeyCount > 0 ? "enabled" : "neutral",
+            },
+          ]}
+        />
+      }
+      title={
+        <span className="flex items-center gap-2">
+          <KeyRound className="h-5 w-5" />
+          第三方生图 API
+        </span>
+      }
+    >
+      <div className="space-y-6">
         <div className="grid gap-4 lg:grid-cols-[1.2fr_1fr]">
           <div className="space-y-4 rounded-xl border p-4">
             <div className="flex items-center justify-between rounded-lg border p-3">
@@ -452,7 +477,7 @@ export function ExternalImageApiSettingsCard() {
             )}
           </div>
         </div>
-      </CardContent>
+      </div>
-    </Card>
+    </LocalAiSectionShell>
   );
 }