From 4a96cb93d2ca001571500a2639603515fedf2581 Mon Sep 17 00:00:00 2001
From: Syngnat <yangguofeng919@gmail.com>
Date: Sat, 28 Feb 2026 15:36:26 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style(connection-modal):=20?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=96=B0=E5=BB=BA=E8=BF=9E=E6=8E=A5=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=E5=B0=BA=E5=AF=B8=E4=B8=8E=E5=88=86=E7=B1=BB=E6=A0=8F?=
 =?UTF-8?q?=E8=A7=86=E8=A7=89=E4=B8=80=E8=87=B4=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 统一调整弹窗 step1/step2 尺寸参数，改善布局观感
- 增加 step1 内容区最小高度，减少拥挤感
- 分类栏分割线改为主题感知颜色，消除深色模式下突兀白线
---
 frontend/src/components/ConnectionModal.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/ConnectionModal.tsx b/frontend/src/components/ConnectionModal.tsx
index a89d7f4..3f362a8 100644
--- a/frontend/src/components/ConnectionModal.tsx
+++ b/frontend/src/components/ConnectionModal.tsx
@@ -11,6 +11,11 @@ const { Text } = Typography;
 const MAX_URI_LENGTH = 4096;
 const MAX_URI_HOSTS = 32;
 const MAX_TIMEOUT_SECONDS = 3600;
+const STEP1_MODAL_WIDTH = 760;
+const STEP2_MODAL_WIDTH = 680;
+const STEP1_MODAL_MIN_BODY_HEIGHT = 460;
+const STEP1_SIDEBAR_DIVIDER_DARK = 'rgba(255, 255, 255, 0.16)';
+const STEP1_SIDEBAR_DIVIDER_LIGHT = 'rgba(0, 0, 0, 0.08)';
 
 const getDefaultPortByType = (type: string) => {
   switch (type) {
@@ -99,6 +104,8 @@ const ConnectionModal: React.FC<{
       return `rgba(${r}, ${g}, ${b}, ${Math.max(effectiveOpacity, 0.82)})`;
   };
 
+  const step1SidebarDividerColor = darkMode ? STEP1_SIDEBAR_DIVIDER_DARK : STEP1_SIDEBAR_DIVIDER_LIGHT;
+
   const tunnelSectionStyle: React.CSSProperties = {
       padding: '12px',
       background: getSectionBg('#2a2a2a'),
@@ -1206,7 +1213,7 @@ const ConnectionModal: React.FC<{
           )}
       <div style={{ display: 'flex', height: 360 }}>
           {/* 左侧分类导航 */}
-          <div style={{ width: 120, borderRight: '1px solid #f0f0f0', paddingRight: 8, flexShrink: 0 }}>
+          <div style={{ width: 120, borderRight: `1px solid ${step1SidebarDividerColor}`, paddingRight: 8, flexShrink: 0 }}>
               {dbTypeGroups.map((group, idx) => (
                   <div
                       key={group.label}
@@ -1781,7 +1788,7 @@ const ConnectionModal: React.FC<{
   };
 
   const modalBodyStyle = step === 1
-      ? { padding: '16px 24px', overflow: 'hidden' as const }
+      ? { padding: '16px 24px', overflow: 'hidden' as const, minHeight: STEP1_MODAL_MIN_BODY_HEIGHT }
       : {
           padding: '16px 24px',
           overflowY: 'auto' as const,
@@ -1797,7 +1804,7 @@ const ConnectionModal: React.FC<{
           footer={getFooter()}
           centered
           wrapClassName="connection-modal-wrap"
-          width={step === 1 ? 650 : 600}
+          width={step === 1 ? STEP1_MODAL_WIDTH : STEP2_MODAL_WIDTH}
           zIndex={10001}
           destroyOnHidden
           maskClosable={false}