refactor(layout): 重构顶部导航栏组件结构

- 将配置模态框提取为独立组件 AppConfigModal
- 将移动端导航抽屉提取为独立组件 MobileNavDrawer
- 从 app-theme.ts 中添加选择器相关的主题颜色配置
- 在 Ant Design 主题中注册 Select 组件的样式变量
- 移除 app-top-nav.tsx 中的内联配置和导航代码
- 优化组件导入和状态管理逻辑

web/src/components/layout/app-config-modal.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import { App, Button, Form, Input, Modal, Segmented } from "antd";
+import { useState } from "react";
+
+import { ModelPicker } from "@/components/model-picker";
+import { fetchImageModels } from "@/services/api/image";
+import { useConfigStore, useEffectiveConfig, type AiConfig } from "@/stores/use-config-store";
+
+export function AppConfigModal() {
+  const { message } = App.useApp();
+  const [loadingModels, setLoadingModels] = useState(false);
+  const config = useConfigStore((state) => state.config);
+  const updateConfig = useConfigStore((state) => state.updateConfig);
+  const isConfigOpen = useConfigStore((state) => state.isConfigOpen);
+  const shouldPromptContinue = useConfigStore((state) => state.shouldPromptContinue);
+  const setConfigDialogOpen = useConfigStore((state) => state.setConfigDialogOpen);
+  const clearPromptContinue = useConfigStore((state) => state.clearPromptContinue);
+  const publicSettings = useConfigStore((state) => state.publicSettings);
+  const effectiveConfig = useEffectiveConfig();
+  const modelChannel = publicSettings?.modelChannel;
+  const allowCustomChannel = modelChannel?.allowCustomChannel === true;
+  const effectiveMode = allowCustomChannel ? config.channelMode : "remote";
+  const modelConfig = effectiveMode === "remote" ? effectiveConfig : config;
+
+  const finishConfig = () => {
+    setConfigDialogOpen(false);
+    if (effectiveMode === "local" && (!config.baseUrl.trim() || !config.apiKey.trim())) return;
+    if (!modelConfig.imageModel.trim() || !modelConfig.textModel.trim()) return;
+    if (!allowCustomChannel && config.channelMode !== "remote") updateConfig("channelMode", "remote");
+    message.success(shouldPromptContinue ? "配置已保存，请继续刚才的请求" : "配置已保存");
+    clearPromptContinue();
+  };
+
+  const refreshModels = async () => {
+    if (effectiveMode === "remote") return;
+    if (!config.baseUrl.trim() || !config.apiKey.trim()) {
+      message.error("请先填写 Base URL 和 API Key");
+      return;
+    }
+    setLoadingModels(true);
+    try {
+      const models = await fetchImageModels(config);
+      updateConfig("models", models);
+      if (models.length && !models.includes(config.imageModel)) updateConfig("imageModel", models[0]);
+      if (models.length && !models.includes(config.textModel)) updateConfig("textModel", models[0]);
+      message.success("模型列表已更新");
+    } catch (error) {
+      message.error(error instanceof Error ? error.message : "读取模型失败");
+    } finally {
+      setLoadingModels(false);
+    }
+  };
+
+  return (
+    <Modal
+      title={<div><div className="text-lg font-semibold">配置</div><div className="mt-1 text-xs font-normal text-stone-500">模型和密钥</div></div>}
+      open={isConfigOpen}
+      width={760}
+      centered
+      onCancel={() => setConfigDialogOpen(false)}
+      footer={<Button type="primary" onClick={finishConfig}>完成</Button>}
+    >
+      <div className="pt-1">
+        <Form layout="vertical" requiredMark={false}>
+          {allowCustomChannel ? (
+            <Form.Item label="渠道模式" className="mb-4">
+              <Segmented
+                block
+                size="middle"
+                value={effectiveMode}
+                onChange={(value) => updateConfig("channelMode", value as AiConfig["channelMode"])}
+                options={[{ label: "云端渠道", value: "remote" }, { label: "本地直连", value: "local" }]}
+              />
+            </Form.Item>
+          ) : null}
+          {effectiveMode === "local" ? (
+            <>
+              <div className="grid gap-4 md:grid-cols-2">
+                <Form.Item label="Base URL" className="mb-4">
+                  <Input value={config.baseUrl} onChange={(event) => updateConfig("baseUrl", event.target.value)} />
+                </Form.Item>
+                <Form.Item label="API Key" className="mb-4">
+                  <Input.Password value={config.apiKey} onChange={(event) => updateConfig("apiKey", event.target.value)} />
+                </Form.Item>
+              </div>
+              <div className="mb-4 flex items-center justify-between gap-3 rounded-lg border border-stone-200 px-3 py-2 dark:border-stone-800">
+                <div className="min-w-0">
+                  <div className="text-sm font-medium">模型列表</div>
+                  <div className="mt-1 text-xs text-stone-500">当前已保存 {config.models.length} 个模型</div>
+                </div>
+                <Button size="small" loading={loadingModels} onClick={() => void refreshModels()}>拉取模型列表</Button>
+              </div>
+            </>
+          ) : (
+            <div className="mb-4 rounded-lg border border-stone-200 p-3 text-sm text-stone-500 dark:border-stone-800">
+              <div className="font-medium text-stone-900 dark:text-stone-100">云端渠道</div>
+              <div className="mt-1">由系统后台渠道转发请求，当前可用 {modelChannel?.availableModels.length || 0} 个模型。</div>
+            </div>
+          )}
+          <div className="grid gap-4 md:grid-cols-2">
+            <Form.Item label="默认生图模型" className="mb-4">
+              <ModelPicker config={modelConfig} value={modelConfig.imageModel} onChange={(model) => updateConfig("imageModel", model)} fullWidth />
+            </Form.Item>
+            <Form.Item label="默认文本模型" className="mb-4">
+              <ModelPicker config={modelConfig} value={modelConfig.textModel} onChange={(model) => updateConfig("textModel", model)} fullWidth />
+            </Form.Item>
+          </div>
+          {effectiveMode === "local" ? (
+            <Form.Item label="系统提示词" className="mb-0">
+              <Input.TextArea rows={3} value={config.systemPrompt} placeholder="例如：你是一位擅长电影感写实摄影的视觉导演。" onChange={(event) => updateConfig("systemPrompt", event.target.value)} />
+            </Form.Item>
+          ) : null}
+        </Form>
+      </div>
+    </Modal>
+  );
+}

web/src/components/layout/app-top-nav.tsx

@@ -2,79 +2,32 @@
 
 import { Menu, Settings2 } from "lucide-react";
 import Link from "next/link";
-import { App, Button, Drawer, Form, Input, Modal, Segmented } from "antd";
 import { usePathname } from "next/navigation";
 
-import { ModelPicker } from "@/components/model-picker";
 import { AnimatedThemeToggler } from "@/components/ui/animated-theme-toggler";
 import { navigationTools, type NavigationToolSlug } from "@/constant/navigation-tools";
+import { AppConfigModal } from "@/components/layout/app-config-modal";
 import { GitHubLink } from "@/components/layout/github-link";
+import { MobileNavDrawer } from "@/components/layout/mobile-nav-drawer";
 import { UserStatusActions } from "@/components/layout/user-status-actions";
 import { VersionReleaseModal } from "@/components/layout/version-release-modal";
-import { useConfigStore, useEffectiveConfig, type AiConfig } from "@/stores/use-config-store";
-import { fetchImageModels } from "@/services/api/image";
+import { useConfigStore } from "@/stores/use-config-store";
 import { useThemeStore } from "@/stores/use-theme-store";
 import { useUserStore } from "@/stores/use-user-store";
 import { cn } from "@/lib/utils";
 import { useState } from "react";
 
 export function AppTopNav() {
-  const { message } = App.useApp();
   const pathname = usePathname();
-  const [loadingModels, setLoadingModels] = useState(false);
   const [mobileNavOpen, setMobileNavOpen] = useState(false);
-  const config = useConfigStore((state) => state.config);
-  const updateConfig = useConfigStore((state) => state.updateConfig);
-  const isConfigOpen = useConfigStore((state) => state.isConfigOpen);
-  const shouldPromptContinue = useConfigStore((state) => state.shouldPromptContinue);
   const openConfigDialog = useConfigStore((state) => state.openConfigDialog);
-  const setConfigDialogOpen = useConfigStore((state) => state.setConfigDialogOpen);
-  const clearPromptContinue = useConfigStore((state) => state.clearPromptContinue);
   const theme = useThemeStore((state) => state.theme);
   const setTheme = useThemeStore((state) => state.setTheme);
   const user = useUserStore((state) => state.user);
   const isReady = useUserStore((state) => state.isReady);
-  const publicSettings = useConfigStore((state) => state.publicSettings);
-  const effectiveConfig = useEffectiveConfig();
   const hideHeader = /^\/canvas\/[^/]+/.test(pathname);
   const slug = pathname.split("/").filter(Boolean)[0];
   const activeToolSlug = navigationTools.some((tool) => tool.slug === slug) ? (slug as NavigationToolSlug) : undefined;
-  const modelChannel = publicSettings?.modelChannel;
-  const allowCustomChannel = modelChannel?.allowCustomChannel === true;
-  const effectiveMode = allowCustomChannel ? config.channelMode : "remote";
-  const modelConfig = effectiveMode === "remote" ? effectiveConfig : config;
-
-  const finishConfig = () => {
-    setConfigDialogOpen(false);
-    if (effectiveMode === "local" && (!config.baseUrl.trim() || !config.apiKey.trim())) return;
-    if (!modelConfig.imageModel.trim() || !modelConfig.textModel.trim()) return;
-    if (!allowCustomChannel && config.channelMode !== "remote") updateConfig("channelMode", "remote");
-    if (shouldPromptContinue) {
-      message.success("配置已保存，请继续刚才的请求");
-    } else {
-      message.success("配置已保存");
-    }
-    clearPromptContinue();
-  };
-  const refreshModels = async () => {
-    if (effectiveMode === "remote") return;
-    if (!config.baseUrl.trim() || !config.apiKey.trim()) {
-      message.error("请先填写 Base URL 和 API Key");
-      return;
-    }
-    setLoadingModels(true);
-    try {
-      const models = await fetchImageModels(config);
-      updateConfig("models", models);
-      if (models.length && !models.includes(config.imageModel)) updateConfig("imageModel", models[0]);
-      if (models.length && !models.includes(config.textModel)) updateConfig("textModel", models[0]);
-      message.success("模型列表已更新");
-    } catch (error) {
-      message.error(error instanceof Error ? error.message : "读取模型失败");
-    } finally {
-      setLoadingModels(false);
-    }
-  };
 
   return (
     <>
@@ -162,98 +115,8 @@ export function AppTopNav() {
         </header>
       ) : null}
 
-      <Drawer
-        title="导航"
-        placement="left"
-        size={280}
-        open={mobileNavOpen}
-        onClose={() => setMobileNavOpen(false)}
-        className="md:hidden"
-      >
-        <div className="space-y-1">
-          {navigationTools.map((tool) => {
-            const Icon = tool.icon;
-            const active = tool.slug === activeToolSlug;
-            return (
-              <Link
-                key={tool.slug}
-                href={`/${tool.slug}`}
-                onClick={() => setMobileNavOpen(false)}
-                className={cn(
-                  "flex items-center gap-3 rounded-lg px-3 py-3 text-base transition",
-                  active
-                    ? "bg-stone-100 font-medium text-stone-950 dark:bg-stone-800 dark:text-stone-100"
-                    : "text-stone-600 hover:bg-stone-100 hover:text-stone-950 dark:text-stone-300 dark:hover:bg-stone-800 dark:hover:text-stone-100",
-                )}
-              >
-                <Icon className="size-5" />
-                <span>{tool.label}</span>
-              </Link>
-            );
-          })}
-        </div>
-      </Drawer>
-
-      <Modal
-        title={<div><div className="text-lg font-semibold">配置</div><div className="mt-1 text-xs font-normal text-stone-500">模型和密钥</div></div>}
-        open={isConfigOpen}
-        width={760}
-        centered
-        onCancel={() => setConfigDialogOpen(false)}
-        footer={<Button type="primary" size="large" onClick={finishConfig}>完成</Button>}
-      >
-        <div className="pt-1">
-          <Form layout="vertical" requiredMark={false} size="large">
-            {allowCustomChannel ? (
-              <Form.Item label="渠道模式" className="mb-4">
-                <Segmented
-                  block
-                  value={effectiveMode}
-                  onChange={(value) => updateConfig("channelMode", value as AiConfig["channelMode"])}
-                  options={[{ label: "云端渠道", value: "remote" }, { label: "本地直连", value: "local" }]}
-                />
-              </Form.Item>
-            ) : null}
-            {effectiveMode === "local" ? (
-              <>
-                <div className="grid gap-4 md:grid-cols-2">
-                  <Form.Item label="Base URL" className="mb-4">
-                    <Input value={config.baseUrl} onChange={(event) => updateConfig("baseUrl", event.target.value)} />
-                  </Form.Item>
-                  <Form.Item label="API Key" className="mb-4">
-                    <Input.Password value={config.apiKey} onChange={(event) => updateConfig("apiKey", event.target.value)} />
-                  </Form.Item>
-                </div>
-                <div className="mb-4 flex items-center justify-between gap-3 rounded-lg border border-stone-200 px-3 py-2 dark:border-stone-800">
-                  <div className="min-w-0">
-                    <div className="text-sm font-medium">模型列表</div>
-                    <div className="mt-1 text-xs text-stone-500">当前已保存 {config.models.length} 个模型</div>
-                  </div>
-                  <Button loading={loadingModels} onClick={() => void refreshModels()}>拉取模型列表</Button>
-                </div>
-              </>
-            ) : (
-              <div className="mb-4 rounded-lg border border-stone-200 p-3 text-sm text-stone-500 dark:border-stone-800">
-                <div className="font-medium text-stone-900 dark:text-stone-100">云端渠道</div>
-                <div className="mt-1">由系统后台渠道转发请求，当前可用 {modelChannel?.availableModels.length || 0} 个模型。</div>
-              </div>
-            )}
-            <div className="grid gap-4 md:grid-cols-2">
-              <Form.Item label="默认生图模型" className="mb-4">
-                <ModelPicker config={modelConfig} value={modelConfig.imageModel} onChange={(model) => updateConfig("imageModel", model)} fullWidth />
-              </Form.Item>
-              <Form.Item label="默认文本模型" className="mb-4">
-                <ModelPicker config={modelConfig} value={modelConfig.textModel} onChange={(model) => updateConfig("textModel", model)} fullWidth />
-              </Form.Item>
-            </div>
-            {effectiveMode === "local" ? (
-              <Form.Item label="系统提示词" className="mb-0">
-                <Input.TextArea rows={3} value={config.systemPrompt} placeholder="例如：你是一位擅长电影感写实摄影的视觉导演。" onChange={(event) => updateConfig("systemPrompt", event.target.value)} />
-              </Form.Item>
-            ) : null}
-          </Form>
-        </div>
-      </Modal>
+      <MobileNavDrawer open={mobileNavOpen} activeToolSlug={activeToolSlug} onClose={() => setMobileNavOpen(false)} />
+      <AppConfigModal />
 
     </>
   );

web/src/components/layout/mobile-nav-drawer.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { Drawer } from "antd";
+import Link from "next/link";
+
+import { navigationTools, type NavigationToolSlug } from "@/constant/navigation-tools";
+import { cn } from "@/lib/utils";
+
+type MobileNavDrawerProps = {
+  open: boolean;
+  activeToolSlug?: NavigationToolSlug;
+  onClose: () => void;
+};
+
+export function MobileNavDrawer({ open, activeToolSlug, onClose }: MobileNavDrawerProps) {
+  return (
+    <Drawer title="导航" placement="left" size={280} open={open} onClose={onClose} className="md:hidden">
+      <div className="space-y-1">
+        {navigationTools.map((tool) => {
+          const Icon = tool.icon;
+          const active = tool.slug === activeToolSlug;
+          return (
+            <Link
+              key={tool.slug}
+              href={`/${tool.slug}`}
+              onClick={onClose}
+              className={cn(
+                "flex items-center gap-3 rounded-lg px-3 py-3 text-base transition",
+                active
+                  ? "bg-stone-100 font-medium text-stone-950 dark:bg-stone-800 dark:text-stone-100"
+                  : "text-stone-600 hover:bg-stone-100 hover:text-stone-950 dark:text-stone-300 dark:hover:bg-stone-800 dark:hover:text-stone-100",
+              )}
+            >
+              <Icon className="size-5" />
+              <span>{tool.label}</span>
+            </Link>
+          );
+        })}
+      </div>
+    </Drawer>
+  );
+}

web/src/lib/app-theme.ts

@@ -9,6 +9,9 @@ const neutral = {
     primaryText: "#ffffff",
     menuBg: "#f5f5f5",
     menuText: "#171717",
+    selectActiveBg: "#f5f5f5",
+    selectSelectedBg: "#f0f0f0",
+    selectText: "#171717",
   },
   dark: {
     primary: "#fafafa",
@@ -16,6 +19,9 @@ const neutral = {
     primaryText: "#171717",
     menuBg: "#262626",
     menuText: "#fafafa",
+    selectActiveBg: "#262626",
+    selectSelectedBg: "#333333",
+    selectText: "#fafafa",
   },
 };
 
@@ -54,6 +60,11 @@ export function getAntThemeConfig(dark: boolean): ThemeConfig {
         darkItemSelectedBg: neutral.dark.menuBg,
         darkItemSelectedColor: neutral.dark.menuText,
       },
+      Select: {
+        optionActiveBg: color.selectActiveBg,
+        optionSelectedBg: color.selectSelectedBg,
+        optionSelectedColor: color.selectText,
+      },
     },
   };
 }