From 7ef6a7d11f65e434b04e7697db4a707f6b1402e7 Mon Sep 17 00:00:00 2001
From: CJACK <tetr20071102@gmail.com>
Date: Mon, 13 Apr 2026 02:27:12 +0800
Subject: [PATCH] feat: update to v3.4.0 and redesign model selection UI with a
 dropdown and descriptive panel

---
 VERSION                                       |  2 +-
 .../features/apiTester/ApiTesterContainer.jsx |  2 +-
 webui/src/features/apiTester/ConfigPanel.jsx  | 88 ++++++++++---------
 webui/src/locales/en.json                     |  1 +
 webui/src/locales/zh.json                     |  1 +
 5 files changed, 50 insertions(+), 44 deletions(-)

diff --git a/VERSION b/VERSION
index 0fa4ae4..fbcbf73 100644
--- a/VERSION
+++ b/VERSION
@@ -1 +1 @@
-3.3.0
\ No newline at end of file
+3.4.0
\ No newline at end of file
diff --git a/webui/src/features/apiTester/ApiTesterContainer.jsx b/webui/src/features/apiTester/ApiTesterContainer.jsx
index b5e4be8..fe80753 100644
--- a/webui/src/features/apiTester/ApiTesterContainer.jsx
+++ b/webui/src/features/apiTester/ApiTesterContainer.jsx
@@ -82,7 +82,7 @@ export default function ApiTesterContainer({ config, onMessage, authFetch }) {
     })
 
     return (
-        <div className={clsx('flex flex-col lg:grid lg:grid-cols-12 gap-6 h-[calc(100vh-140px)]')}>
+        <div className={clsx('flex flex-col lg:grid lg:grid-cols-12 gap-6 h-[calc(100vh-140px)] min-h-0')}>
             <ConfigPanel
                 t={t}
                 configExpanded={configExpanded}
diff --git a/webui/src/features/apiTester/ConfigPanel.jsx b/webui/src/features/apiTester/ConfigPanel.jsx
index 62bf38a..ddf9848 100644
--- a/webui/src/features/apiTester/ConfigPanel.jsx
+++ b/webui/src/features/apiTester/ConfigPanel.jsx
@@ -38,13 +38,15 @@ export default function ConfigPanel({
         ToggleLeft,
         ToggleRight,
     }
+    const selectedModel = models.find(m => m.id === model) || models[0]
+    const SelectedModelIcon = selectedModel ? (iconMap[selectedModel.icon] || MessageSquare) : MessageSquare
 
     return (
         <div className={clsx(
-            "lg:col-span-3 flex flex-col transition-all duration-300 ease-in-out z-20",
+            "lg:col-span-3 flex flex-col transition-all duration-300 ease-in-out z-20 min-h-0",
             configExpanded ? "h-auto" : "h-14 lg:h-full"
         )}>
-            <div className="bg-card border border-border rounded-xl flex flex-col h-full shadow-sm">
+            <div className="bg-card border border-border rounded-xl flex flex-col h-full shadow-sm min-h-0 overflow-hidden">
                 <button
                     onClick={() => setConfigExpanded(!configExpanded)}
                     className="lg:hidden flex items-center justify-between p-4 w-full bg-muted/20 hover:bg-muted/30 transition-colors"
@@ -61,49 +63,51 @@ export default function ConfigPanel({
                 </button>
 
                 <div className={clsx(
-                    "p-4 space-y-6 overflow-y-auto custom-scrollbar flex-1",
-                    !configExpanded && "hidden lg:block"
+                    "p-4 flex flex-col gap-5",
+                    !configExpanded && "hidden lg:flex"
                 )}>
-                    <div className="space-y-3">
+                    <div className="space-y-2 shrink-0">
                         <label className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider ml-0.5">{t('apiTester.modelLabel')}</label>
-                        <div className="grid grid-cols-1 gap-2">
-                            {models.map(m => {
-                                const Icon = iconMap[m.icon] || MessageSquare
-                                return (
-                                    <button
-                                        key={m.id}
-                                        onClick={() => setModel(m.id)}
-                                        className={clsx(
-                                            "group relative flex items-start gap-3 p-3 rounded-lg border text-left transition-all duration-200",
-                                            model === m.id
-                                                ? "bg-secondary border-primary/50 shadow-sm"
-                                                : "bg-transparent border-transparent hover:bg-muted"
-                                        )}
-                                    >
-                                        <div className={clsx(
-                                            "p-1.5 rounded-md shrink-0 transition-colors",
-                                            model === m.id ? m.color : "text-muted-foreground group-hover:text-foreground"
-                                        )}>
-                                            <Icon className="w-4 h-4" />
-                                        </div>
-                                        <div className="min-w-0 flex-1">
-                                            <div className={clsx("font-medium text-sm", model === m.id ? "text-foreground" : "text-foreground/80") }>
-                                                {m.name}
-                                            </div>
-                                            <div className="text-[11px] text-muted-foreground mt-0.5">{m.desc}</div>
-                                        </div>
-                                        {model === m.id && (
-                                            <div className={clsx("absolute top-3 right-3", m.color)}>
-                                                <div className="w-1.5 h-1.5 rounded-full bg-current" />
-                                            </div>
-                                        )}
-                                    </button>
-                                )
-                            })}
+                        <div className="relative">
+                            <select
+                                className="w-full h-11 pl-3 pr-9 bg-secondary border border-border rounded-lg text-sm appearance-none focus:outline-none focus:ring-1 focus:ring-ring focus:border-ring transition-all cursor-pointer hover:bg-muted/70 text-foreground"
+                                value={model}
+                                onChange={e => setModel(e.target.value)}
+                            >
+                                {models.map(m => (
+                                    <option key={m.id} value={m.id} className="bg-popover text-popover-foreground">
+                                        {m.name}
+                                    </option>
+                                ))}
+                            </select>
+                            <ChevronDown className="absolute right-2.5 top-3.5 w-4 h-4 text-muted-foreground pointer-events-none" />
                         </div>
+                        {selectedModel && (
+                            <div className="mt-3 rounded-lg border border-border bg-muted/20 p-3">
+                                <div className="flex items-start gap-3">
+                                    <div className={clsx(
+                                        "p-2 rounded-md shrink-0 border border-border bg-background/80",
+                                        selectedModel.color
+                                    )}>
+                                        <SelectedModelIcon className="w-4 h-4" />
+                                    </div>
+                                    <div className="min-w-0 flex-1">
+                                        <div className="font-medium text-sm text-foreground truncate">
+                                            {selectedModel.name}
+                                        </div>
+                                        <div className="text-[11px] text-muted-foreground mt-1 leading-relaxed">
+                                            {selectedModel.desc}
+                                        </div>
+                                    </div>
+                                </div>
+                                <p className="text-[11px] text-muted-foreground/70 mt-2">
+                                    {t('apiTester.modelPickerHint')}
+                                </p>
+                            </div>
+                        )}
                     </div>
 
-                    <div className="space-y-2">
+                    <div className="space-y-2 shrink-0">
                         <label className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider ml-0.5">{t('apiTester.streamMode')}</label>
                         <button
                             onClick={() => setStreamingMode(!streamingMode)}
@@ -124,7 +128,7 @@ export default function ConfigPanel({
                         </button>
                     </div>
 
-                    <div className="space-y-2">
+                    <div className="space-y-2 shrink-0">
                         <label className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider ml-0.5">{t('apiTester.accountSelector')}</label>
                         <div className="relative">
                             <select
@@ -147,7 +151,7 @@ export default function ConfigPanel({
                         </div>
                     </div>
 
-                    <div className="space-y-2">
+                    <div className="space-y-2 shrink-0">
                         <label className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider ml-0.5">{t('apiTester.apiKeyOptional')}</label>
                         <input
                             type="text"
diff --git a/webui/src/locales/en.json b/webui/src/locales/en.json
index 0aadcc6..0b305b3 100644
--- a/webui/src/locales/en.json
+++ b/webui/src/locales/en.json
@@ -215,6 +215,7 @@
         "testSuccess": "{account}: Token refresh successful ({time}ms)",
         "config": "Configuration",
         "modelLabel": "Model",
+        "modelPickerHint": "Use the dropdown to pick a model. The list scrolls automatically.",
         "streamMode": "Streaming",
         "accountSelector": "Account",
         "autoRandom": "🤖 Auto / Random",
diff --git a/webui/src/locales/zh.json b/webui/src/locales/zh.json
index 594edf4..d78b528 100644
--- a/webui/src/locales/zh.json
+++ b/webui/src/locales/zh.json
@@ -215,6 +215,7 @@
         "testSuccess": "{account}: Token 刷新成功 ({time}ms)",
         "config": "配置",
         "modelLabel": "模型",
+        "modelPickerHint": "使用下拉列表选择模型，长列表会自动滚动。",
         "streamMode": "流式模式",
         "accountSelector": "选择账号",
         "autoRandom": "🤖 自动 / 随机",