🎨 style(connection-modal): 优化新建连接弹窗尺寸与分类栏视觉一致性

- 统一调整弹窗 step1/step2 尺寸参数,改善布局观感
- 增加 step1 内容区最小高度,减少拥挤感
- 分类栏分割线改为主题感知颜色,消除深色模式下突兀白线
This commit is contained in:
Syngnat
2026-02-28 15:36:26 +08:00
parent 4c322db9d0
commit 4a96cb93d2

View File

@@ -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}