🐛 fix(connection): 修复连接颜色重启丢失并同步标签页展示

- 恢复连接清洗流程中的图标类型与颜色字段
- 标签页增加连接色标识，便于区分多连接会话
- 抽取连接视觉解析并补充回归测试
Refs #334

frontend/src/components/Sidebar.tsx

@@ -48,6 +48,7 @@ import { buildRpcConnectionConfig } from '../utils/connectionRpcConfig';
 import { noAutoCapInputProps } from '../utils/inputAutoCap';
 import { normalizeSidebarViewName, resolveSidebarRuntimeDatabase } from '../utils/sidebarMetadata';
 import { resolveConnectionHostTokens } from '../utils/tabDisplay';
+import { resolveConnectionAccentColor, resolveConnectionIconType } from '../utils/connectionVisual';
 import { buildJVMTabTitle } from '../utils/jvmRuntimePresentation';
 import { buildJVMDiagnosticActionDescriptor, buildJVMMonitoringActionDescriptors } from '../utils/jvmSidebarActions';
 import { buildTableSelectQuery } from '../utils/objectQueryTemplates';
@@ -358,10 +359,12 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
 
       const buildConnectionNode = (conn: SavedConnection): TreeNode => {
         const existing = prevMap.get(conn.id);
+        const iconType = resolveConnectionIconType(conn);
+        const iconColor = resolveConnectionAccentColor(conn);
         return {
           title: conn.name,
           key: conn.id,
-          icon: getDbIcon(conn.iconType || conn.config.type, conn.iconColor, 22),
+          icon: getDbIcon(iconType, iconColor, 22),
           type: 'connection',
           dataRef: conn,
           isLeaf: false,

frontend/src/components/TabManager.tsx

@@ -23,24 +23,33 @@ import JVMDiagnosticConsole from './JVMDiagnosticConsole';
 import JVMMonitoringDashboard from './JVMMonitoringDashboard';
 import type { TabData } from '../types';
 import { buildTabDisplayTitle } from '../utils/tabDisplay';
+import { resolveConnectionAccentColor } from '../utils/connectionVisual';
 
 type SortableTabLabelProps = {
   displayTitle: string;
   menuItems: MenuProps['items'];
+  accentColor?: string;
 };
 
 const SortableTabLabel: React.FC<SortableTabLabelProps> = ({
   displayTitle,
   menuItems,
+  accentColor,
 }) => {
+  const labelStyle = accentColor
+    ? ({ '--connection-accent': accentColor } as React.CSSProperties)
+    : undefined;
+
   return (
     <Dropdown menu={{ items: menuItems }} trigger={['contextMenu']}>
       <span
-        className="tab-dnd-label"
+        className={`tab-dnd-label${accentColor ? ' has-connection-accent' : ''}`}
         onContextMenu={(e) => e.preventDefault()}
         title={displayTitle}
+        style={labelStyle}
       >
-        {displayTitle}
+        {accentColor ? <span className="tab-connection-accent" aria-hidden="true" /> : null}
+        <span className="tab-title-text">{displayTitle}</span>
       </span>
     </Dropdown>
   );
@@ -188,6 +197,7 @@ const TabManager: React.FC = () => {
   const items = useMemo(() => tabs.map((tab, index) => {
     const connection = connections.find((conn) => conn.id === tab.connectionId);
     const displayTitle = buildTabDisplayTitle(tab, connection);
+    const accentColor = connection ? resolveConnectionAccentColor(connection) : undefined;
     const tabIsActive = tab.id === activeTabId;
     let content;
     if (tab.type === 'query') {
@@ -253,6 +263,7 @@ const TabManager: React.FC = () => {
         <SortableTabLabel
           displayTitle={displayTitle}
           menuItems={menuItems}
+          accentColor={accentColor}
         />
       ),
       key: tab.id,
@@ -317,8 +328,26 @@ const TabManager: React.FC = () => {
               -webkit-user-select: none;
               display: inline-flex;
               align-items: center;
+              gap: 7px;
               max-width: 100%;
             }
+            .main-tabs .tab-dnd-label.has-connection-accent {
+              position: relative;
+            }
+            .main-tabs .tab-connection-accent {
+              width: 9px;
+              height: 9px;
+              border-radius: 999px;
+              background: var(--connection-accent);
+              box-shadow: 0 0 0 2px color-mix(in srgb, var(--connection-accent) 22%, transparent);
+              flex: 0 0 auto;
+            }
+            .main-tabs .tab-title-text {
+              min-width: 0;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
             .main-tabs .tab-dnd-node.is-dragging,
             .main-tabs .tab-dnd-node.is-dragging .tab-dnd-label {
               cursor: grabbing !important;