From 7820026ee963844ed30532e0e8957d91f582773f Mon Sep 17 00:00:00 2001
From: duanyongcheng <1171998654@qq.com>
Date: Wed, 14 Jan 2026 10:10:45 +0800
Subject: [PATCH] =?UTF-8?q?refactor(ui):=20=E4=BC=98=E5=8C=96=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E5=BC=B9=E7=AA=97=E5=B8=83=E5=B1=80=E4=B8=8E=E6=9A=97?=
 =?UTF-8?q?=E8=89=B2=E6=A8=A1=E5=BC=8F=E6=A0=B7=E5=BC=8F=20Optimize=20conf?=
 =?UTF-8?q?ig=20dialog=20layout=20and=20dark=20mode=20styles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

改进高级配置弹窗的布局结构，使内容区域支持独立滚动
Improve layout of advanced config dialog to support independent content scrolling
恢复 Escape 键关闭弹窗的功能以提升交互体验
Restore Escape key functionality for closing dialogs to improve UX
优化配置卡片边框并为提示信息添加暗色模式适配
Optimize card borders and add dark mode support for tip messages
---
 src/components/ToolAdvancedConfigDialog.tsx     |  7 +++----
 src/components/ToolConfigManager.tsx            | 17 +++++++----------
 .../config-managers/ClaudeConfigManager.tsx     |  4 ++--
 .../config-managers/CodexConfigManager.tsx      |  2 +-
 .../config-managers/GeminiConfigManager.tsx     |  2 +-
 src/components/tool-config/Fields.tsx           |  6 +++---
 6 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/src/components/ToolAdvancedConfigDialog.tsx b/src/components/ToolAdvancedConfigDialog.tsx
index 1407033..26bf5e1 100644
--- a/src/components/ToolAdvancedConfigDialog.tsx
+++ b/src/components/ToolAdvancedConfigDialog.tsx
@@ -29,17 +29,16 @@ export function ToolAdvancedConfigDialog({
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent
-        className="sm:max-w-[90vw] max-h-[90vh] overflow-y-auto"
+        className="sm:max-w-[90vw] max-h-[90vh] flex flex-col"
         onInteractOutside={(e) => e.preventDefault()}
-        onEscapeKeyDown={(e) => e.preventDefault()}
       >
-        <DialogHeader>
+        <DialogHeader className="flex-shrink-0">
           <DialogTitle className="flex items-center gap-2">
             <img src={logoMap[toolId]} alt={toolName} className="w-5 h-5" />
             <span>{toolName} 高级配置</span>
           </DialogTitle>
         </DialogHeader>
-        <div className="mt-4">
+        <div className="mt-4 flex-1 overflow-y-auto min-h-0">
           {toolId === 'claude-code' && <ClaudeConfigManager />}
           {toolId === 'codex' && <CodexConfigManager />}
           {toolId === 'gemini-cli' && <GeminiConfigManager />}
diff --git a/src/components/ToolConfigManager.tsx b/src/components/ToolConfigManager.tsx
index 788c99e..5852cb8 100644
--- a/src/components/ToolConfigManager.tsx
+++ b/src/components/ToolConfigManager.tsx
@@ -278,7 +278,7 @@ export function ToolConfigManager({
           const isCompound = isCompoundField(schema, currentValue);
 
           return (
-            <Card key={key} className="border border-slate-200/80">
+            <Card key={key} className="border">
               {isCompound ? (
                 <>
                   <CardHeader className="flex flex-row items-start justify-between space-y-0">
@@ -361,7 +361,7 @@ export function ToolConfigManager({
   };
 
   return (
-    <Card className="border border-slate-200/80 shadow-lg">
+    <Card className="border shadow-lg">
       <CardHeader className="space-y-4">
         <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
           <div>
@@ -391,7 +391,7 @@ export function ToolConfigManager({
             </Button>
           </div>
         </div>
-        <div className="rounded-md border border-amber-200 bg-amber-50 p-3 text-xs text-amber-900">
+        <div className="rounded-md border border-amber-200 bg-amber-50 p-3 text-xs text-amber-900 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-200">
           每个配置选项下方都会展示 JSON Schema 提供的描述信息，若显示「未提供描述」表示该子选项未在
           schema 中定义或为自定义子选项。
         </div>
@@ -495,15 +495,12 @@ export function ToolConfigManager({
           </DialogHeader>
           <div className="max-h-[420px] space-y-3 overflow-y-auto">
             {diffEntries.length === 0 && (
-              <div className="rounded-md border border-slate-200 p-4 text-sm text-muted-foreground">
+              <div className="rounded-md border p-4 text-sm text-muted-foreground">
                 没有检测到差异
               </div>
             )}
             {diffEntries.map((diff) => (
-              <div
-                key={diff.path + diff.type}
-                className="rounded-md border border-slate-200 bg-slate-50 p-3 text-xs"
-              >
+              <div key={diff.path + diff.type} className="rounded-md border bg-muted p-3 text-xs">
                 <div className="flex items-center justify-between font-semibold">
                   <span className="font-mono text-sm">{diff.path}</span>
                   <Badge variant={diff.type === 'changed' ? 'default' : 'secondary'}>
@@ -513,13 +510,13 @@ export function ToolConfigManager({
                 <div className="mt-2 grid gap-2 md:grid-cols-2">
                   <div>
                     <p className="text-[11px] text-muted-foreground">之前</p>
-                    <pre className="mt-1 overflow-x-auto rounded-md bg-white p-2">
+                    <pre className="mt-1 overflow-x-auto rounded-md bg-background p-2">
                       {formatJson(diff.before)}
                     </pre>
                   </div>
                   <div>
                     <p className="text-[11px] text-muted-foreground">之后</p>
-                    <pre className="mt-1 overflow-x-auto rounded-md bg-white p-2">
+                    <pre className="mt-1 overflow-x-auto rounded-md bg-background p-2">
                       {formatJson(diff.after)}
                     </pre>
                   </div>
diff --git a/src/components/config-managers/ClaudeConfigManager.tsx b/src/components/config-managers/ClaudeConfigManager.tsx
index ddba831..3cc2767 100644
--- a/src/components/config-managers/ClaudeConfigManager.tsx
+++ b/src/components/config-managers/ClaudeConfigManager.tsx
@@ -200,7 +200,7 @@ export function ClaudeConfigManager({ refreshSignal }: ClaudeConfigManagerProps)
         computeExternalDiffs={computeExtraDiffs}
       />
 
-      <Card className="border border-slate-200/80">
+      <Card className="border">
         <CardHeader>
           <CardTitle>附属配置：config.json</CardTitle>
           <CardDescription>可选文件，存在时将与 settings.json 一同保存。</CardDescription>
@@ -235,7 +235,7 @@ export function ClaudeConfigManager({ refreshSignal }: ClaudeConfigManagerProps)
             {extraEntries.map((entry, idx) => (
               <div
                 key={`${idx}-${entry.key}`}
-                className="flex flex-col gap-2 rounded-md border border-slate-200/80 p-3 md:flex-row md:items-center"
+                className="flex flex-col gap-2 rounded-md border p-3 md:flex-row md:items-center"
               >
                 <div className="flex flex-1 items-center gap-2">
                   <div className="w-40 min-w-[140px]">
diff --git a/src/components/config-managers/CodexConfigManager.tsx b/src/components/config-managers/CodexConfigManager.tsx
index 22460df..265df72 100644
--- a/src/components/config-managers/CodexConfigManager.tsx
+++ b/src/components/config-managers/CodexConfigManager.tsx
@@ -84,7 +84,7 @@ export function CodexConfigManager({ refreshSignal }: CodexConfigManagerProps) {
         computeExternalDiffs={computeAuthDiffs}
       />
 
-      <Card className="border border-slate-200/80">
+      <Card className="border">
         <CardHeader>
           <CardTitle>Codex API Key</CardTitle>
           <CardDescription>读取并编辑 auth.json，用于 Codex CLI 请求。</CardDescription>
diff --git a/src/components/config-managers/GeminiConfigManager.tsx b/src/components/config-managers/GeminiConfigManager.tsx
index 4333156..2c17a36 100644
--- a/src/components/config-managers/GeminiConfigManager.tsx
+++ b/src/components/config-managers/GeminiConfigManager.tsx
@@ -106,7 +106,7 @@ export function GeminiConfigManager({ refreshSignal }: GeminiConfigManagerProps)
         computeExternalDiffs={computeEnvDiffs}
       />
 
-      <Card className="border border-slate-200/80">
+      <Card className="border">
         <CardHeader>
           <CardTitle>Gemini .env</CardTitle>
           <CardDescription>读取并编辑 .env，管理 Base URL、API Key 与默认模型。</CardDescription>
diff --git a/src/components/tool-config/Fields.tsx b/src/components/tool-config/Fields.tsx
index 435937f..2fdef8b 100644
--- a/src/components/tool-config/Fields.tsx
+++ b/src/components/tool-config/Fields.tsx
@@ -465,7 +465,7 @@ function SortableArrayItem({
     <div
       ref={setNodeRef}
       style={style}
-      className={`flex items-center gap-3 rounded-md border border-slate-200 bg-white px-3 py-2 ${
+      className={`flex items-center gap-3 rounded-md border bg-card px-3 py-2 ${
         isDragging ? 'opacity-70' : ''
       }`}
     >
@@ -579,7 +579,7 @@ function ObjectField({
   return (
     <div className="space-y-3">
       <p className="text-xs text-muted-foreground">{description}</p>
-      <div className="space-y-4 rounded-md border border-slate-200/80 p-3">
+      <div className="space-y-4 rounded-md border p-3">
         {keys.length === 0 && (
           <div className="rounded border border-dashed p-3 text-center text-xs text-muted-foreground">
             尚未设置任何子选项
@@ -592,7 +592,7 @@ function ObjectField({
           const childIsCompound = isCompoundField(resolvedChildSchema, objectValue[key]);
 
           return (
-            <div key={key} className="space-y-2 rounded-md bg-white p-3">
+            <div key={key} className="space-y-2 rounded-md bg-card p-3">
               <div className="flex flex-col gap-3 md:flex-row md:items-center">
                 <div className="flex items-center gap-2 md:basis-1/2">
                   <span className="font-mono text-sm font-semibold">{key}</span>