diff --git a/.helloagents/CHANGELOG.md b/.helloagents/CHANGELOG.md
index 98a28f4..9dedf32 100644
--- a/.helloagents/CHANGELOG.md
+++ b/.helloagents/CHANGELOG.md
@@ -7,3 +7,4 @@
 - 2026-03-25：`/workspace` 默认布局改为“左侧 Workbench + 中央终端 + 右侧状态监控”，并在状态监控中新增开机累计上/下行流量展示。
 - 2026-03-25：继续微调 `/workspace` Workbench，新增默认“快捷指令”标签、调整三栏宽度到更接近 xterminal 参考图，并修复终端区域鼠标悬停时指针异常消失的问题。
 - 2026-03-25：前端主站视觉语言统一升级为 `Slate Control Center`，新增公共页面壳层与认证壳层，并重做 Dashboard、Settings、Login、Setup、Notifications、Proxies、Audit Logs、Workbench、StatusMonitor 的现代化 UI 表达。
+- 2026-03-25：收口前端控制中心细节，修复顶部 `app-nav` 激活下划线误命中品牌链接的问题，并将 `ConnectionsView` 重做为控制中心卡片列表，同时升级 `/workspace` 外层容器与 `TerminalTabBar` 的玻璃面板视觉。
diff --git a/packages/frontend/src/App.vue b/packages/frontend/src/App.vue
index 379a18c..280a31b 100644
--- a/packages/frontend/src/App.vue
+++ b/packages/frontend/src/App.vue
@@ -49,7 +49,7 @@ const altShortcutKey = ref<string | null>(null);
 const updateUnderline = async () => {
   await nextTick();
   if (navRef.value && underlineRef.value) {
-    const activeLink = navRef.value.querySelector('.router-link-exact-active') as HTMLElement;
+    const activeLink = navRef.value.querySelector('.app-nav__link.is-active, .app-nav__link.router-link-exact-active') as HTMLElement | null;
     if (activeLink) {
       underlineRef.value.style.left = `${activeLink.offsetLeft}px`;
       underlineRef.value.style.width = `${activeLink.offsetWidth}px`;
@@ -65,6 +65,7 @@ onMounted(() => {
 
   window.addEventListener('keydown', handleAltKeyDown);
   window.addEventListener('keyup', handleGlobalKeyUp);
+  window.addEventListener('resize', updateUnderline);
 
   window.addEventListener('beforeinstallprompt', () => {
     console.log('[App.vue] beforeinstallprompt event fired. Browser will handle install prompt.');
@@ -90,6 +91,7 @@ watch(
 onUnmounted(() => {
   window.removeEventListener('keydown', handleAltKeyDown);
   window.removeEventListener('keyup', handleGlobalKeyUp);
+  window.removeEventListener('resize', updateUnderline);
 });
 
 const isWorkspaceRoute = computed(() => route.path === '/workspace');
@@ -368,9 +370,18 @@ const handleGlobalKeyUp = async (event: KeyboardEvent) => {
   display: flex;
   align-items: center;
   gap: 0.35rem;
+  min-width: 0;
+  max-width: 100%;
   padding: 0.35rem;
   border-radius: 18px;
   background: rgba(241, 245, 251, 0.9);
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+}
+
+.app-nav::-webkit-scrollbar {
+  display: none;
 }
 
 .app-nav__link {
diff --git a/packages/frontend/src/components/TerminalTabBar.vue b/packages/frontend/src/components/TerminalTabBar.vue
index 457601b..dd476e4 100644
--- a/packages/frontend/src/components/TerminalTabBar.vue
+++ b/packages/frontend/src/components/TerminalTabBar.vue
@@ -63,6 +63,7 @@ const sessionStore = useSessionStore(); // Session store 保持不变
 const showConnectionListPopup = ref(false); // 连接列表弹出状态
 const draggableSessions = ref<SessionTabInfoWithStatus[]>([]); // + Local state for draggable
 const showTransferProgressModal = ref(false); // 控制传输进度模态框的显示状态
+const tabScrollerRef = ref<HTMLElement | null>(null);
 
 // + Watch prop changes to update local state
 watch(() => props.sessions, (newSessions) => {
@@ -393,7 +394,7 @@ const handleWheel: EventListener = (event: Event) => {
 
 // 在组件挂载时添加滚轮事件监听
 onMounted(() => {
-  const tabContainer = document.querySelector('.overflow-x-auto');
+  const tabContainer = tabScrollerRef.value;
   if (tabContainer) {
     tabContainer.addEventListener('wheel', handleWheel as EventListener, { passive: false });
   }
@@ -401,7 +402,7 @@ onMounted(() => {
 
 // 在组件卸载时移除滚轮事件监听
 onBeforeUnmount(() => {
-  const tabContainer = document.querySelector('.overflow-x-auto');
+  const tabContainer = tabScrollerRef.value;
   if (tabContainer) {
     tabContainer.removeEventListener('wheel', handleWheel as EventListener);
   }
@@ -411,11 +412,13 @@ onBeforeUnmount(() => {
 
 <template>
   <!-- +++ 使用 :class 绑定来条件化样式，包括高度 (修正 props 引用) +++ -->
-  <div :class="['flex bg-header border border-border overflow-hidden',
-               { 'rounded-t-md mx-2 mt-2': !props.isMobile }, // Desktop margins/rounding - Use props.isMobile
-               props.isMobile ? 'h-8' : 'h-10' // Mobile height h-8, Desktop h-10 - Use props.isMobile
-              ]">
-    <div class="flex items-center overflow-x-auto flex-shrink min-w-0 h-full"> <!-- Ensure inner div has h-full -->
+  <div
+    :class="[
+      'terminal-tab-shell flex overflow-hidden',
+      props.isMobile ? 'terminal-tab-shell--mobile h-10' : 'terminal-tab-shell--desktop h-12',
+    ]"
+  >
+    <div ref="tabScrollerRef" class="terminal-tab-shell__scroller flex items-center overflow-x-auto flex-shrink min-w-0 h-full">
       <draggable
         v-model="draggableSessions"
         item-key="sessionId"
@@ -518,3 +521,32 @@ onBeforeUnmount(() => {
     <TransferProgressModal v-model:visible="showTransferProgressModal" />
   </div>
 </template>
+
+<style scoped>
+.terminal-tab-shell {
+  position: relative;
+  align-items: stretch;
+  border: 1px solid rgba(103, 124, 155, 0.18);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(243, 247, 253, 0.74));
+  box-shadow: var(--shadow-card);
+  backdrop-filter: blur(18px);
+}
+
+.terminal-tab-shell--desktop {
+  margin: 1rem 1rem 0;
+  border-radius: 28px;
+}
+
+.terminal-tab-shell--mobile {
+  margin: 0.75rem 0.75rem 0;
+  border-radius: 22px;
+}
+
+.terminal-tab-shell__scroller {
+  scrollbar-width: none;
+}
+
+.terminal-tab-shell__scroller::-webkit-scrollbar {
+  display: none;
+}
+</style>
diff --git a/packages/frontend/src/views/ConnectionsView.vue b/packages/frontend/src/views/ConnectionsView.vue
index 119da4d..349d0ee 100644
--- a/packages/frontend/src/views/ConnectionsView.vue
+++ b/packages/frontend/src/views/ConnectionsView.vue
@@ -1,21 +1,19 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, watch, nextTick } from 'vue';
-import AddConnectionForm from '../components/AddConnectionForm.vue';
-import BatchEditConnectionForm from '../components/BatchEditConnectionForm.vue';
-import { useConnectionsStore } from '../stores/connections.store';
-import { useSessionStore } from '../stores/session.store';
-import { useTagsStore } from '../stores/tags.store';
-import type { TagInfo } from '../stores/tags.store';
-import type { SortField, SortOrder } from '../stores/settings.store';
+import { computed, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
-import type { ConnectionInfo } from '../stores/connections.store';
-import { useConfirmDialog } from '../composables/useConfirmDialog';
-import { useAlertDialog } from '../composables/useAlertDialog';
 import { storeToRefs } from 'pinia';
 import { formatDistanceToNow } from 'date-fns';
 import { zhCN, enUS, ja } from 'date-fns/locale';
 import type { Locale } from 'date-fns';
+import AddConnectionForm from '../components/AddConnectionForm.vue';
+import BatchEditConnectionForm from '../components/BatchEditConnectionForm.vue';
+import PageShell from '../components/PageShell.vue';
+import { useConnectionsStore, type ConnectionInfo } from '../stores/connections.store';
+import { useSessionStore } from '../stores/session.store';
+import { useTagsStore, type TagInfo } from '../stores/tags.store';
+import type { SortField, SortOrder } from '../stores/settings.store';
+import { useConfirmDialog } from '../composables/useConfirmDialog';
+import { useAlertDialog } from '../composables/useAlertDialog';
 
 const { t, locale } = useI18n();
 const { showConfirmDialog } = useConfirmDialog();
@@ -31,20 +29,20 @@ const LS_SORT_BY_KEY = 'connections_view_sort_by';
 const LS_SORT_ORDER_KEY = 'connections_view_sort_order';
 const LS_FILTER_TAG_KEY = 'connections_view_filter_tag';
 
-const localSortBy = ref<SortField>(localStorage.getItem(LS_SORT_BY_KEY) as SortField || 'last_connected_at');
-const localSortOrder = ref<SortOrder>(localStorage.getItem(LS_SORT_ORDER_KEY) as SortOrder || 'desc');
+const localSortBy = ref<SortField>((localStorage.getItem(LS_SORT_BY_KEY) as SortField) || 'last_connected_at');
+const localSortOrder = ref<SortOrder>((localStorage.getItem(LS_SORT_ORDER_KEY) as SortOrder) || 'desc');
 
 const getInitialSelectedTagId = (): number | null => {
   const storedValue = localStorage.getItem(LS_FILTER_TAG_KEY);
   return storedValue && storedValue !== 'null' ? parseInt(storedValue, 10) : null;
 };
+
 const selectedTagId = ref<number | null>(getInitialSelectedTagId());
 const searchQuery = ref('');
 
 const showAddEditConnectionForm = ref(false);
 const connectionToEdit = ref<ConnectionInfo | null>(null);
 
-// Batch Edit Mode
 const isBatchEditMode = ref(false);
 const selectedConnectionIdsForBatch = ref<Set<number>>(new Set());
 const showBatchEditForm = ref(false);
@@ -65,67 +63,138 @@ const filteredAndSortedConnections = computed(() => {
   const filterTagId = selectedTagId.value;
   const query = searchQuery.value.toLowerCase().trim();
 
-  let filteredByTag = filterTagId === null
-    ? [...connections.value]
-    : connections.value.filter(conn => conn.tag_ids?.includes(filterTagId));
+  const filteredByTag =
+    filterTagId === null
+      ? [...connections.value]
+      : connections.value.filter((conn) => conn.tag_ids?.includes(filterTagId));
 
-  let searchedConnections = filteredByTag;
-  if (query) {
-    searchedConnections = filteredByTag.filter(conn => {
-      const nameMatch = conn.name?.toLowerCase().includes(query);
-      const usernameMatch = conn.username?.toLowerCase().includes(query);
-      const hostMatch = conn.host?.toLowerCase().includes(query);
-      const portMatch = conn.port?.toString().includes(query);
-      const notesMatch = conn.notes?.toLowerCase().includes(query); // 添加对备注的搜索
-      return nameMatch || usernameMatch || hostMatch || portMatch || notesMatch;
-    });
-  }
+  const searchedConnections = query
+    ? filteredByTag.filter((conn) => {
+        const nameMatch = conn.name?.toLowerCase().includes(query);
+        const usernameMatch = conn.username?.toLowerCase().includes(query);
+        const hostMatch = conn.host?.toLowerCase().includes(query);
+        const portMatch = conn.port?.toString().includes(query);
+        const notesMatch = conn.notes?.toLowerCase().includes(query);
+        return nameMatch || usernameMatch || hostMatch || portMatch || notesMatch;
+      })
+    : filteredByTag;
 
   return searchedConnections.sort((a, b) => {
-    let valA: any;
-    let valB: any;
+    let valA: string | number;
+    let valB: string | number;
 
     switch (sortBy) {
       case 'name':
         valA = a.name || '';
         valB = b.name || '';
-        return valA.localeCompare(valB) * factor;
+        return String(valA).localeCompare(String(valB)) * factor;
       case 'type':
         valA = a.type || '';
         valB = b.type || '';
-        return valA.localeCompare(valB) * factor;
+        return String(valA).localeCompare(String(valB)) * factor;
       case 'created_at':
         valA = a.created_at ?? 0;
         valB = b.created_at ?? 0;
-        return (valA - valB) * factor;
+        return (Number(valA) - Number(valB)) * factor;
       case 'updated_at':
         valA = a.updated_at ?? 0;
         valB = b.updated_at ?? 0;
-        return (valA - valB) * factor;
+        return (Number(valA) - Number(valB)) * factor;
       case 'last_connected_at':
         valA = a.last_connected_at ?? (sortOrderVal === 'desc' ? -Infinity : Infinity);
         valB = b.last_connected_at ?? (sortOrderVal === 'desc' ? -Infinity : Infinity);
         if (valA === valB) return 0;
-        if (valA < valB) return -1 * factor;
-        return 1 * factor;
+        return Number(valA) < Number(valB) ? -1 * factor : 1 * factor;
       default:
         return 0;
     }
   });
 });
 
+const dateFnsLocales: Record<string, Locale> = {
+  'en-US': enUS,
+  'zh-CN': zhCN,
+  'ja-JP': ja,
+  en: enUS,
+  zh: zhCN,
+  ja,
+};
+
+const formatRelativeTime = (timestampInSeconds: number | null | undefined): string => {
+  if (!timestampInSeconds) return t('connections.status.never');
+
+  try {
+    const timestampInMs = timestampInSeconds * 1000;
+    if (Number.isNaN(timestampInMs)) {
+      return String(timestampInSeconds);
+    }
+
+    const date = new Date(timestampInMs);
+    const currentLocale = locale.value;
+    const langPart = currentLocale.split('-')[0];
+    const targetLocale = dateFnsLocales[currentLocale] || dateFnsLocales[langPart] || enUS;
+
+    return formatDistanceToNow(date, { addSuffix: true, locale: targetLocale });
+  } catch (error) {
+    console.error('格式化日期失败:', error);
+    return String(timestampInSeconds);
+  }
+};
+
+const getTagNames = (tagIds: number[] | undefined): string[] => {
+  if (!tagIds || tagIds.length === 0) {
+    return [];
+  }
+
+  const allTags = tags.value as TagInfo[];
+  return tagIds
+    .map((id) => allTags.find((tag) => tag.id === id)?.name)
+    .filter((name): name is string => Boolean(name));
+};
+
+const totalSshConnections = computed(() => connections.value.filter((conn) => conn.type === 'SSH').length);
+const totalTaggedConnections = computed(() => connections.value.filter((conn) => (conn.tag_ids?.length ?? 0) > 0).length);
+const filteredSshConnections = computed(() => filteredAndSortedConnections.value.filter((conn) => conn.type === 'SSH').length);
+const selectedConnectionsCount = computed(() => selectedConnectionIdsForBatch.value.size);
+
+const connectionStats = computed(() => [
+  {
+    label: t('dashboard.connectionList', '连接列表'),
+    value: connections.value.length,
+    meta: `${filteredAndSortedConnections.value.length} ${t('common.filter', '筛选结果')}`,
+  },
+  {
+    label: t('workspaceConnectionList.sshConnections', 'SSH 连接'),
+    value: totalSshConnections.value,
+    meta: `${filteredSshConnections.value} 当前筛选可批量测试`,
+  },
+  {
+    label: t('settings.workspace.showConnectionTagsTitle', '连接标签'),
+    value: tags.value.length,
+    meta: `${totalTaggedConnections.value} ${t('dashboard.filterTags.all', '已关联标签')}`,
+  },
+  {
+    label: t('connections.batchEdit.toggleLabel', '批量修改'),
+    value: selectedConnectionsCount.value,
+    meta: isBatchEditMode.value
+      ? '选择多个连接后可批量编辑或删除'
+      : t('workspace.workbench.quickCommands', '快捷管理入口'),
+  },
+]);
+
 onMounted(async () => {
   if (connections.value.length === 0) {
     try {
       await connectionsStore.fetchConnections();
     } catch (error) {
-      console.error("加载连接列表失败:", error);
+      console.error('加载连接列表失败:', error);
     }
   }
+
   try {
     await tagsStore.fetchTags();
   } catch (error) {
-    console.error("加载标签列表失败:", error);
+    console.error('加载标签列表失败:', error);
   }
 });
 
@@ -148,47 +217,9 @@ watch(localSortOrder, (newValue) => {
 });
 
 watch(selectedTagId, (newValue) => {
-  localStorage.setItem(LS_FILTER_TAG_KEY, newValue === null ? 'null' : String(newValue));
+  localStorage.setItem(LS_FILTER_TAG_KEY, newValue == null ? 'null' : String(newValue));
 });
 
-const dateFnsLocales: Record<string, Locale> = {
-  'en-US': enUS,
-  'zh-CN': zhCN,
-  'ja-JP': ja,
-  'en': enUS,
-  'zh': zhCN,
-  'ja': ja,
-};
-
-const formatRelativeTime = (timestampInSeconds: number | null | undefined): string => {
-  if (!timestampInSeconds) return t('connections.status.never');
-  try {
-    const timestampInMs = timestampInSeconds * 1000;
-    if (isNaN(timestampInMs)) {
-        console.warn(`[ConnectionsView] Invalid timestamp received: ${timestampInSeconds}`);
-        return String(timestampInSeconds);
-    }
-    const date = new Date(timestampInMs);
-    const currentI18nLocale = locale.value;
-    const langPart = currentI18nLocale.split('-')[0];
-    let targetDateFnsLocale = dateFnsLocales[currentI18nLocale] || dateFnsLocales[langPart] || enUS;
-    return formatDistanceToNow(date, { addSuffix: true, locale: targetDateFnsLocale });
-  } catch (e) {
-    console.error("格式化日期失败:", e);
-    return String(timestampInSeconds);
-  }
-};
-
-const getTagNames = (tagIds: number[] | undefined): string[] => {
-  if (!tagIds || tagIds.length === 0) {
-    return [];
-  }
-  const allTags = tags.value as TagInfo[];
-  return tagIds
-    .map(id => allTags.find(tag => tag.id === id)?.name)
-    .filter((name): name is string => !!name);
-};
-
 const openAddConnectionForm = () => {
   connectionToEdit.value = null;
   showAddEditConnectionForm.value = true;
@@ -210,16 +241,16 @@ const handleConnectionModified = async () => {
   await connectionsStore.fetchConnections();
 };
 
-// --- Batch Edit Functions ---
 const toggleBatchEditMode = () => {
   isBatchEditMode.value = !isBatchEditMode.value;
   if (!isBatchEditMode.value) {
-    selectedConnectionIdsForBatch.value.clear(); // Clear selection when exiting batch mode
+    selectedConnectionIdsForBatch.value.clear();
   }
 };
 
 const handleConnectionClick = (connId: number) => {
   if (!isBatchEditMode.value) return;
+
   if (selectedConnectionIdsForBatch.value.has(connId)) {
     selectedConnectionIdsForBatch.value.delete(connId);
   } else {
@@ -227,13 +258,11 @@ const handleConnectionClick = (connId: number) => {
   }
 };
 
-const isConnectionSelectedForBatch = (connId: number): boolean => {
-  return selectedConnectionIdsForBatch.value.has(connId);
-};
+const isConnectionSelectedForBatch = (connId: number): boolean => selectedConnectionIdsForBatch.value.has(connId);
 
 const selectAllConnections = () => {
   if (!isBatchEditMode.value) return;
-  filteredAndSortedConnections.value.forEach(conn => selectedConnectionIdsForBatch.value.add(conn.id));
+  filteredAndSortedConnections.value.forEach((conn) => selectedConnectionIdsForBatch.value.add(conn.id));
 };
 
 const deselectAllConnections = () => {
@@ -243,8 +272,8 @@ const deselectAllConnections = () => {
 
 const invertSelection = () => {
   if (!isBatchEditMode.value) return;
-  const allVisibleIds = new Set(filteredAndSortedConnections.value.map(conn => conn.id));
-  allVisibleIds.forEach(id => {
+  const allVisibleIds = new Set(filteredAndSortedConnections.value.map((conn) => conn.id));
+  allVisibleIds.forEach((id) => {
     if (selectedConnectionIdsForBatch.value.has(id)) {
       selectedConnectionIdsForBatch.value.delete(id);
     } else {
@@ -255,25 +284,26 @@ const invertSelection = () => {
 
 const openBatchEditModal = () => {
   if (selectedConnectionIdsForBatch.value.size === 0) {
-    // Optionally, show a notification from uiNotificationsStore using your project's method
-    showAlertDialog({ title: t('common.alert', '提示'), message: t('connections.batchEdit.noSelectionForEdit', '请至少选择一个连接进行编辑。') }); // Placeholder
+    showAlertDialog({
+      title: t('common.alert', '提示'),
+      message: t('connections.batchEdit.noSelectionForEdit', '请至少选择一个连接进行编辑。'),
+    });
     return;
   }
+
   showBatchEditForm.value = true;
 };
 
 const handleBatchEditSaved = async () => {
   showBatchEditForm.value = false;
   selectedConnectionIdsForBatch.value.clear();
-  // isBatchEditMode.value = false; // Optionally exit batch mode after saving
-  await connectionsStore.fetchConnections(); // Refresh the list
+  await connectionsStore.fetchConnections();
 };
 
 const handleBatchEditFormClose = () => {
   showBatchEditForm.value = false;
 };
 
-// --- 批量删除 ---
 const handleBatchDeleteConnections = async () => {
   if (selectedConnectionIdsForBatch.value.size === 0 || isDeletingSelectedConnections.value) {
     return;
@@ -282,47 +312,48 @@ const handleBatchDeleteConnections = async () => {
   const confirmMessage = t(
     'connections.batchEdit.confirmMessage',
     { count: selectedConnectionIdsForBatch.value.size },
-    `您确定要删除选中的 ${selectedConnectionIdsForBatch.value.size} 个连接吗？此操作无法撤销。`
+    `您确定要删除选中的 ${selectedConnectionIdsForBatch.value.size} 个连接吗？此操作无法撤销。`,
   );
 
+  const confirmed = await showConfirmDialog({ message: confirmMessage });
+  if (!confirmed) {
+    return;
+  }
 
-  const confirmed = await showConfirmDialog({
-    message: confirmMessage
-  });
-  if (confirmed) {
-    isDeletingSelectedConnections.value = true;
-    try {
-      const idsToDelete = Array.from(selectedConnectionIdsForBatch.value);
-      await connectionsStore.deleteBatchConnections(idsToDelete);
-
-
-      showAlertDialog({ title: t('common.success', '成功'), message: t('connections.batchEdit.successMessage', '选中的连接已成功删除。') });
-
-      selectedConnectionIdsForBatch.value.clear();
-
-      await connectionsStore.fetchConnections();
-    } catch (error: any) {
-      console.error("Batch delete connections error:", error);
-      showAlertDialog({ title: t('common.error'), message: t('connections.batchEdit.errorMessage', `批量删除连接失败: ${error.message || '未知错误'}`) });
-    } finally {
-      isDeletingSelectedConnections.value = false;
-    }
+  isDeletingSelectedConnections.value = true;
+  try {
+    const idsToDelete = Array.from(selectedConnectionIdsForBatch.value);
+    await connectionsStore.deleteBatchConnections(idsToDelete);
+    showAlertDialog({
+      title: t('common.success', '成功'),
+      message: t('connections.batchEdit.successMessage', '选中的连接已成功删除。'),
+    });
+    selectedConnectionIdsForBatch.value.clear();
+    await connectionsStore.fetchConnections();
+  } catch (error: any) {
+    console.error('Batch delete connections error:', error);
+    showAlertDialog({
+      title: t('common.error'),
+      message: t('connections.batchEdit.errorMessage', `批量删除连接失败: ${error.message || '未知错误'}`),
+    });
+  } finally {
+    isDeletingSelectedConnections.value = false;
   }
 };
 
-// --- Test Connection Logic ---
 interface ConnectionTestState {
   status: 'idle' | 'testing' | 'success' | 'error';
   resultText: string;
   latency?: number;
   latencyColor?: string;
 }
+
 const connectionTestStates = ref<Map<number, ConnectionTestState>>(new Map());
 const isTestingAll = ref(false);
+const isConnectingAll = ref(false);
 
 const getLatencyColorString = (latencyMs?: number): string => {
-  if (latencyMs === undefined) return 'inherit'; // Default or inherit
-  // These colors should ideally come from theme variables if available
+  if (latencyMs === undefined) return 'inherit';
   if (latencyMs < 100) return 'var(--color-success, #4CAF50)';
   if (latencyMs < 300) return 'var(--color-warning, #ff9800)';
   return 'var(--color-error, #F44336)';
@@ -337,36 +368,26 @@ const handleTestSingleConnection = async (conn: ConnectionInfo) => {
   });
 
   try {
-    // Pass only the ID to testConnection, as per store definition
     const result = await connectionsStore.testConnection(conn.id);
 
     if (result.success) {
       const latencyMs = result.latency;
-      let displayText = ''; // 初始化为空字符串，符合只显示延迟的要求
-      let determinedColor;
-
-      if (latencyMs !== undefined) {
-        displayText = `${latencyMs}ms`;
-        determinedColor = getLatencyColorString(latencyMs);
-      } else {
-        // 测试成功，但没有延迟信息。不显示文本。
-        // 颜色应为明确的成功颜色。
-        // getLatencyColorString(0) 会返回绿色，代表非常好的情况。
-        determinedColor = getLatencyColorString(0); // 或者直接使用 'var(--color-success, #4CAF50)'
-      }
+      const displayText = latencyMs !== undefined ? `${latencyMs}ms` : '';
+      const determinedColor = latencyMs !== undefined ? getLatencyColorString(latencyMs) : getLatencyColorString(0);
 
       connectionTestStates.value.set(conn.id, {
         status: 'success',
-        resultText: displayText, // 将显示 "XXms" 或者为空
+        resultText: displayText,
         latency: latencyMs,
         latencyColor: determinedColor,
       });
-    } else {
-      connectionTestStates.value.set(conn.id, {
-        status: 'error',
-        resultText: result.message || t('connections.test.unknownError', '未知错误'),
-      });
+      return;
     }
+
+    connectionTestStates.value.set(conn.id, {
+      status: 'error',
+      resultText: result.message || t('connections.test.unknownError', '未知错误'),
+    });
   } catch (error: any) {
     connectionTestStates.value.set(conn.id, {
       status: 'error',
@@ -377,44 +398,53 @@ const handleTestSingleConnection = async (conn: ConnectionInfo) => {
 
 const handleTestAllFilteredConnections = async () => {
   if (isTestingAll.value || isLoadingConnections.value) return;
-  // Ensure conn.id exists for map function and error handling
-  const sshConnectionsToTest = filteredAndSortedConnections.value.filter(c => c.type === 'SSH' && c.id != null);
+
+  const sshConnectionsToTest = filteredAndSortedConnections.value.filter((conn) => conn.type === 'SSH' && conn.id != null);
   if (sshConnectionsToTest.length === 0) {
-    // Optionally notify user that there are no SSH connections to test
-    // Consider using uiNotificationsStore from your project for a user-friendly message
     return;
   }
 
   isTestingAll.value = true;
-  const testPromises = sshConnectionsToTest.map(conn => {
-    // conn.id is guaranteed to exist here due to the filter above.
-    // We're calling handleTestSingleConnection for each.
-    // Individual errors within handleTestSingleConnection will update that specific connection's state.
-    // We also add a .catch here to handle any unexpected errors from handleTestSingleConnection itself
-    // or if conn.id was somehow null/undefined (though filtered out).
-    return handleTestSingleConnection(conn).catch(error => {
+  const testPromises = sshConnectionsToTest.map((conn) =>
+    handleTestSingleConnection(conn).catch((error) => {
       console.error(`Error testing connection ${conn.id}:`, error);
-      // Ensure state is updated for this specific connection to show an error
-      // The 'id' here is from the 'conn' object in the map function's scope.
-      connectionTestStates.value.set(conn.id!, { // Using non-null assertion as id is checked
+      connectionTestStates.value.set(conn.id!, {
         status: 'error',
-        resultText: t('connections.test.unknownErrorDuringBatch', '批量测试中发生错误'), // New i18n key
+        resultText: t('connections.test.unknownErrorDuringBatch', '批量测试中发生错误'),
       });
-    });
-  });
+    }),
+  );
 
   try {
     await Promise.all(testPromises);
   } catch (error) {
-    // This catch block handles errors if Promise.all itself fails,
-    // though individual promise rejections are handled above.
-    console.error("Error during batch testing of connections (Promise.all):", error);
-    // Optionally, set a general error state or notification for the entire batch operation if needed.
+    console.error('Error during batch testing of connections (Promise.all):', error);
   } finally {
     isTestingAll.value = false;
   }
 };
 
+const handleConnectAllFilteredConnections = async () => {
+  if (isConnectingAll.value || isLoadingConnections.value) return;
+
+  const sshConnectionsToConnect = filteredAndSortedConnections.value.filter((conn) => conn.type === 'SSH');
+  if (sshConnectionsToConnect.length === 0) {
+    console.warn(t('connections.messages.noSshConnectionsToConnectAll', '没有可连接的 SSH 筛选结果。'));
+    return;
+  }
+
+  isConnectingAll.value = true;
+  try {
+    for (const conn of sshConnectionsToConnect) {
+      connectTo(conn);
+    }
+  } catch (error) {
+    console.error('Error connecting to all filtered SSH connections:', error);
+  } finally {
+    isConnectingAll.value = false;
+  }
+};
+
 const getSingleTestButtonInfo = (connId: number | undefined, connType: string | undefined) => {
   const state = connId ? connectionTestStates.value.get(connId) : undefined;
 
@@ -424,311 +454,345 @@ const getSingleTestButtonInfo = (connId: number | undefined, connType: string |
       iconClass: 'fas fa-plug',
       disabled: true,
       loading: false,
-      title: t('connections.test.onlySshSupportedTest', '仅SSH连接支持测试。')
+      title: t('connections.test.onlySshSupportedTest', '仅SSH连接支持测试。'),
     };
   }
-  if (!connId) { // Should not happen if connType is SSH and we are in the list
-     return { textKey: 'connections.actions.test', iconClass: 'fas fa-plug', disabled: true, loading: false, title: '' };
+
+  if (!connId) {
+    return {
+      textKey: 'connections.actions.test',
+      iconClass: 'fas fa-plug',
+      disabled: true,
+      loading: false,
+      title: '',
+    };
   }
 
   if (state?.status === 'testing') {
-    return { textKey: 'connections.actions.testing', iconClass: 'fas fa-spinner fa-spin', disabled: true, loading: true, title: t('connections.actions.testing', '测试中') };
+    return {
+      textKey: 'connections.actions.testing',
+      iconClass: 'fas fa-spinner fa-spin',
+      disabled: true,
+      loading: true,
+      title: t('connections.actions.testing', '测试中'),
+    };
   }
-  if (state?.status === 'success' || state?.status === 'error') {
-    // 测试完成后，按钮恢复为初始“测试”状态
-    return { textKey: 'connections.actions.test', iconClass: 'fas fa-plug', disabled: false, loading: false, title: t('connections.actions.test', '测试') };
-  }
-  // 默认状态也是“测试”
-  return { textKey: 'connections.actions.test', iconClass: 'fas fa-plug', disabled: false, loading: false, title: t('connections.actions.test', '测试') };
+
+  return {
+    textKey: 'connections.actions.test',
+    iconClass: 'fas fa-plug',
+    disabled: false,
+    loading: false,
+    title: t('connections.actions.test', '测试'),
+  };
 };
 
 const getTruncatedNotes = (notes: string | null | undefined): string => {
-  if (!notes || notes.trim() === '') return ''; // 返回空字符串，如果没有备注
+  if (!notes || notes.trim() === '') return '';
   const maxLength = 100;
   if (notes.length <= maxLength) return notes;
-  return notes.substring(0, maxLength) + '...';
+  return `${notes.substring(0, maxLength)}...`;
 };
 
-
-
-// --- Connect All Filtered Connections ---
-const isConnectingAll = ref(false);
-
-const handleConnectAllFilteredConnections = async () => {
-  if (isConnectingAll.value || isLoadingConnections.value) return;
-
-  const sshConnectionsToConnect = filteredAndSortedConnections.value.filter(conn => conn.type === 'SSH');
-  if (sshConnectionsToConnect.length === 0) {
-    console.warn(t('connections.messages.noSshConnectionsToConnectAll', '没有可连接的 SSH 筛选结果。'));
-    // Optionally, use a UI notification if available in your project
-    // e.g., uiNotificationsStore.addNotification({ message: t('connections.messages.noSshConnectionsToConnectAll'), type: 'info' });
-    return;
-  }
-
-  isConnectingAll.value = true;
-  try {
-    for (const conn of sshConnectionsToConnect) {
-      connectTo(conn);
-      // Consider a small delay if you want to visually see connections initiating one by one,
-      // or if connectTo triggers operations that might benefit from not being fired too rapidly.
-      // await new Promise(resolve => setTimeout(resolve, 200)); // Example delay
-    }
-  } catch (error) {
-    console.error("Error connecting to all filtered SSH connections:", error);
-    // uiNotificationsStore.addNotification({ message: t('connections.errors.connectAllSshFailed', '连接全部 SSH 操作失败。'), type: 'error' });
-  } finally {
-    isConnectingAll.value = false;
-  }
+const getConnectionIconClass = (type: string | undefined) => {
+  if (type === 'VNC') return 'fas fa-plug';
+  if (type === 'RDP') return 'fas fa-desktop';
+  return 'fas fa-server';
 };
-
 </script>
 
 <template>
-  <div class="p-4 md:p-6 lg:p-8 bg-background text-foreground"> <!-- 最外层，负责背景和整体内边距 -->
-    <div class="max-w-screen-lg mx-auto"> <!-- 将 xl 修改为 lg -->
-      <h1 class="text-2xl font-semibold mb-6">{{ t('nav.connections', '连接管理') }}</h1>
+  <PageShell
+    :title="t('nav.connections', '连接管理')"
+    :subtitle="t('dashboard.controlCenterSubtitle', '用卡片控制面板统一管理连接、批量操作、连通性测试和快速接入。')"
+  >
+    <template #actions>
+      <el-button
+        plain
+        :disabled="isTestingAll || isLoadingConnections || filteredSshConnections === 0"
+        @click="handleTestAllFilteredConnections"
+      >
+        <i :class="['fas', isTestingAll ? 'fa-spinner fa-spin' : 'fa-stethoscope', 'mr-2']"></i>
+        {{ t('connections.actions.testAllFiltered', '测试全部筛选的SSH连接') }}
+      </el-button>
 
-      <div class="bg-card text-card-foreground shadow rounded-lg overflow-hidden border border-border min-h-[400px]"> <!-- 移除了 max-w-screen-2xl mx-auto -->
-        <div class="px-4 py-3 border-b border-border flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2">
-        <h2 class="text-lg font-medium flex-shrink-0">{{ t('dashboard.connectionList', '连接列表') }} ({{ filteredAndSortedConnections.length }})</h2>
-        <div class="w-full sm:w-auto flex flex-wrap sm:flex-nowrap items-stretch sm:items-center space-y-2 sm:space-y-0 sm:space-x-2">
-          <!-- Batch Edit Toggle -->
-          <div class="flex items-center mr-3">
-            <label for="batch-edit-toggle" class="mr-2 text-sm font-medium text-text-secondary">{{ t('connections.batchEdit.toggleLabel', '批量修改') }}</label>
-            <button
-              id="batch-edit-toggle"
-              @click="toggleBatchEditMode"
-              :class="[
-                'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary',
-                isBatchEditMode ? 'bg-primary' : 'bg-gray-300 dark:bg-gray-600'
-              ]"
-              role="switch"
-              :aria-checked="isBatchEditMode"
-            >
-              <span
-                aria-hidden="true"
-                :class="[
-                  'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
-                  isBatchEditMode ? 'translate-x-5' : 'translate-x-0'
-                ]"
-              ></span>
-            </button>
+      <el-button
+        plain
+        :disabled="isConnectingAll || isLoadingConnections || filteredSshConnections === 0"
+        @click="handleConnectAllFilteredConnections"
+      >
+        <i :class="['fas', isConnectingAll ? 'fa-spinner fa-spin' : 'fa-network-wired', 'mr-2']"></i>
+        {{ t('workspaceConnectionList.connectAllSshInGroupMenu', '连接全部') }}
+      </el-button>
+
+      <el-button type="primary" @click="openAddConnectionForm">
+        <i class="fas fa-plus mr-2"></i>
+        {{ t('connections.addConnection', '添加新连接') }}
+      </el-button>
+    </template>
+
+    <template #stats>
+      <div class="control-stat-grid">
+        <div v-for="stat in connectionStats" :key="stat.label" class="control-stat-card">
+          <span class="control-stat-card__label">{{ stat.label }}</span>
+          <span class="control-stat-card__value">{{ stat.value }}</span>
+          <span class="control-stat-card__meta">{{ stat.meta }}</span>
+        </div>
+      </div>
+    </template>
+
+    <el-card shadow="never" class="control-panel">
+      <template #header>
+        <div class="flex flex-col gap-4">
+          <div class="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
+            <div>
+              <div class="text-lg font-semibold text-foreground">
+                {{ t('dashboard.connectionList', '连接列表') }}
+              </div>
+              <div class="text-sm text-text-secondary">
+                {{ filteredAndSortedConnections.length }} / {{ connections.length }}
+                · {{ filteredSshConnections }} SSH
+              </div>
+            </div>
+
+            <div class="flex flex-wrap items-center gap-3">
+              <span class="text-sm font-medium text-text-secondary">
+                {{ t('connections.batchEdit.toggleLabel', '批量修改') }}
+              </span>
+              <el-switch :model-value="isBatchEditMode" @change="toggleBatchEditMode" />
+            </div>
           </div>
 
-          <input
-            type="text"
-            v-model="searchQuery"
-            :placeholder="t('dashboard.searchConnectionsPlaceholder', '搜索连接...')"
-            class="h-8 px-3 py-1 text-sm border border-border rounded bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary w-full sm:w-48"
-          />
-          <div class="flex items-center space-x-2">
-           <select
-              v-model="selectedTagId"
-              class="h-8 px-2 py-1 text-sm border border-border rounded bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary appearance-none bg-no-repeat bg-right pr-8"
-              style="background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 16 16\'%3e%3cpath fill=\'none\' stroke=\'%236c757d\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M2 5l6 6 6-6\'/%3e%3c/svg%3e'); background-position: right 0.5rem center; background-size: 16px 12px;"
-              aria-label="Filter connections by tag"
-              :disabled="isLoadingTags"
+          <div class="control-toolbar grid gap-3 p-3 xl:grid-cols-[minmax(240px,1.15fr)_180px_180px_auto]">
+            <el-input
+              v-model="searchQuery"
+              :placeholder="t('dashboard.searchConnectionsPlaceholder', '搜索连接...')"
+              clearable
             >
-              <option :value="null">{{ t('dashboard.filterTags.all', '所有标签') }}</option>
-              <option v-if="isLoadingTags" disabled>{{ t('common.loading') }}</option>
-              <option v-for="tag in (tags as TagInfo[])" :key="tag.id" :value="tag.id">
-                {{ tag.name }}
-              </option>
-            </select>
+              <template #prefix>
+                <i class="fas fa-search text-text-secondary"></i>
+              </template>
+            </el-input>
 
-           <select
-              v-model="localSortBy"
-              class="h-8 px-2 py-1 text-sm border border-border rounded bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary appearance-none bg-no-repeat bg-right pr-8"
-              style="background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 16 16\'%3e%3cpath fill=\'none\' stroke=\'%236c757d\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M2 5l6 6 6-6\'/%3e%3c/svg%3e'); background-position: right 0.5rem center; background-size: 16px 12px;"
-              aria-label="Sort connections by"
-            >
-              <option v-for="option in sortOptions" :key="option.value" :value="option.value">
-                {{ t(option.labelKey, option.value.replace('_', ' ')) }}
-              </option>
-            </select>
+            <el-select v-model="selectedTagId" clearable :disabled="isLoadingTags">
+              <el-option :label="t('dashboard.filterTags.all', '所有标签')" :value="null" />
+              <el-option
+                v-for="tag in (tags as TagInfo[])"
+                :key="tag.id"
+                :label="tag.name"
+                :value="tag.id"
+              />
+            </el-select>
 
-            <button
-              @click="toggleSortOrder"
-              class="h-8 px-1.5 py-1 border border-border rounded hover:bg-muted focus:outline-none focus:ring-1 focus:ring-primary flex items-center justify-center"
-              :aria-label="isAscending ? t('common.sortAscending') : t('common.sortDescending')"
-              :title="isAscending ? t('common.sortAscending') : t('common.sortDescending')"
-            >
-              <i :class="['fas', isAscending ? 'fa-arrow-up-a-z' : 'fa-arrow-down-z-a', 'w-4 h-4']"></i>
-            </button>
+            <el-select v-model="localSortBy">
+              <el-option
+                v-for="option in sortOptions"
+                :key="option.value"
+                :label="t(option.labelKey, option.value)"
+                :value="option.value"
+              />
+            </el-select>
+
+            <div class="flex items-center gap-3">
+              <el-button plain @click="toggleSortOrder">
+                <i :class="['fas', isAscending ? 'fa-arrow-up-a-z' : 'fa-arrow-down-z-a']"></i>
+              </el-button>
+
+              <el-tag effect="plain" round size="large">
+                {{ isBatchEditMode ? '批量模式' : t('common.filter', '筛选中') }}
+              </el-tag>
+            </div>
           </div>
-          <button @click="openAddConnectionForm" :title="t('connections.addConnection', 'Add Connection')" class="h-8 w-8 bg-button rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 ease-in-out flex items-center justify-center flex-shrink-0 ml-2 sm:ml-0">
-            <i class="fas fa-plus" style="color: white;"></i>
-          </button>
-          <!-- Test All Filtered Connections Button -->
-          <button
-            @click="handleTestAllFilteredConnections"
-            :disabled="isTestingAll || isLoadingConnections || !filteredAndSortedConnections.some(c => c.type === 'SSH')"
-            class="h-8 px-3 py-1.5 text-sm bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 ease-in-out flex items-center justify-center flex-shrink-0 ml-2 sm:ml-0"
-            :title="t('connections.actions.testAllFiltered', '测试全部筛选的SSH连接')"
+        </div>
+      </template>
+
+      <div
+        v-if="isBatchEditMode"
+        class="control-toolbar mb-4 flex flex-wrap items-center justify-between gap-3 p-3"
+      >
+        <div class="flex flex-wrap items-center gap-2">
+          <el-button plain @click="selectAllConnections">
+            {{ t('connections.batchEdit.selectAll', '全选') }}
+          </el-button>
+          <el-button plain @click="deselectAllConnections">
+            {{ t('connections.batchEdit.deselectAll', '取消全选') }}
+          </el-button>
+          <el-button plain @click="invertSelection">
+            {{ t('connections.batchEdit.invertSelection', '反选') }}
+          </el-button>
+        </div>
+
+        <div class="flex flex-wrap items-center gap-2">
+          <el-tag effect="dark" round size="large">
+            {{ selectedConnectionsCount }} {{ t('connections.batchEdit.editSelected', '已选中') }}
+          </el-tag>
+          <el-button type="primary" :disabled="selectedConnectionsCount === 0" @click="openBatchEditModal">
+            <i class="fas fa-pen-to-square mr-2"></i>
+            {{ t('connections.batchEdit.editSelected', '编辑选中') }}
+          </el-button>
+          <el-button
+            type="danger"
+            plain
+            :loading="isDeletingSelectedConnections"
+            :disabled="selectedConnectionsCount === 0 || isDeletingSelectedConnections"
+            @click="handleBatchDeleteConnections"
           >
-            <i v-if="isTestingAll" class="fas fa-spinner fa-spin mr-1 sm:mr-2" style="color: white;"></i>
-            <i v-else class="fas fa-check-double mr-1 sm:mr-2" style="color: white;"></i>
-            <span class="hidden sm:inline">{{ t('connections.actions.testAllFiltered') }}</span>
-          </button>
-          <!-- Connect All Filtered Connections Button -->
-          <button
-            @click="handleConnectAllFilteredConnections"
-            :disabled="isConnectingAll || isLoadingConnections || !filteredAndSortedConnections.some(c => c.type === 'SSH')"
-            class="h-8 px-3 py-1.5 text-sm bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 ease-in-out flex items-center justify-center flex-shrink-0 ml-2 sm:ml-0"
-          >
-            <i v-if="isConnectingAll" class="fas fa-spinner fa-spin mr-1 sm:mr-2" style="color: white;"></i>
-            <i v-else class="fas fa-network-wired mr-1 sm:mr-2" style="color: white;"></i>
-            <span class="hidden sm:inline">{{ t('workspaceConnectionList.connectAllSshInGroupMenu', '连接全部') }}</span>
-          </button>
+            <i class="fas fa-trash mr-2"></i>
+            {{ t('connections.batchEdit.deleteSelectedButton', '删除选中') }}
+          </el-button>
         </div>
       </div>
 
-      <!-- Batch Action Buttons -->
-      <div v-if="isBatchEditMode" class="px-4 py-2 border-b border-border bg-card flex flex-wrap items-center gap-2">
-        <button
-          @click="selectAllConnections"
-          class="px-3 py-1.5 text-sm bg-transparent text-text-secondary border border-border rounded-md shadow-sm hover:bg-border hover:text-foreground focus:outline-none transition duration-150 ease-in-out"
-        >
-          {{ t('connections.batchEdit.selectAll', '全选') }} ({{ selectedConnectionIdsForBatch.size }})
-        </button>
-        <button
-          @click="deselectAllConnections"
-          class="px-3 py-1.5 text-sm bg-transparent text-text-secondary border border-border rounded-md shadow-sm hover:bg-border hover:text-foreground focus:outline-none transition duration-150 ease-in-out"
-        >
-          {{ t('connections.batchEdit.deselectAll', '取消全选') }}
-        </button>
-        <button
-          @click="invertSelection"
-          class="px-3 py-1.5 text-sm bg-transparent text-text-secondary border border-border rounded-md shadow-sm hover:bg-border hover:text-foreground focus:outline-none transition duration-150 ease-in-out"
-        >
-          {{ t('connections.batchEdit.invertSelection', '反选') }}
-        </button>
-        <button
-          @click="openBatchEditModal"
-          :disabled="selectedConnectionIdsForBatch.size === 0"
-          class="px-4 py-1.5 text-sm bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 ease-in-out disabled:opacity-50 disabled:cursor-not-allowed"
-        >
-          <i class="fas fa-edit mr-1" style="color: white;"></i>
-          {{ t('connections.batchEdit.editSelected', '编辑选中') }}
-        </button>
-        <button
-          @click="handleBatchDeleteConnections"
-          :disabled="selectedConnectionIdsForBatch.size === 0 || isDeletingSelectedConnections"
-          class="px-4 py-1.5 text-sm bg-red-600 text-white rounded-md shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition duration-150 ease-in-out disabled:opacity-50 disabled:cursor-not-allowed flex items-center"
-          :title="t('connections.batchEdit.deleteSelectedTooltip', '删除选中的连接')"
-        >
-          <i v-if="isDeletingSelectedConnections" class="fas fa-spinner fa-spin mr-1.5" style="color: white;"></i>
-          <i v-else class="fas fa-trash-alt mr-1.5" style="color: white;"></i>
-          <span>{{ t('connections.batchEdit.deleteSelectedButton', '删除选中') }}</span>
-        </button>
+      <div v-if="isLoadingConnections && filteredAndSortedConnections.length === 0" class="control-empty">
+        <el-skeleton :rows="6" animated />
       </div>
 
-      <div class="p-4">
-        <div v-if="isLoadingConnections && filteredAndSortedConnections.length === 0" class="text-center text-text-secondary">{{ t('common.loading') }}</div>
-        <ul v-else-if="filteredAndSortedConnections.length > 0" class="space-y-3">
-          <li
-            v-for="conn in filteredAndSortedConnections"
-            :key="conn.id"
-            @click="handleConnectionClick(conn.id)"
-            :class="[
-              'flex items-center p-3 bg-header/50 border border-border/50 rounded transition duration-150 ease-in-out', // Changed: items-center, removed justify-between
-              { 'ring-2 ring-primary ring-offset-1 ring-offset-background': isBatchEditMode && isConnectionSelectedForBatch(conn.id) },
-              { 'cursor-pointer hover:bg-border/70': isBatchEditMode },
-              { 'hover:bg-border/30': !isBatchEditMode }
-            ]"
-          >
-            <div class="flex-1 min-w-0 mr-3"> <!-- Changed: flex-1 min-w-0 mr-3 -->
-              <span class="font-medium block truncate flex items-center" :title="conn.name || ''">
-                <i :class="['fas', conn.type === 'VNC' ? 'fa-plug' : (conn.type === 'RDP' ? 'fa-desktop' : 'fa-server'), 'mr-2 w-4 text-center text-text-secondary']"></i>
-                <span>{{ conn.name || conn.host || t('connections.unnamedFallback', '未命名连接') }}</span>
-              </span>
-              <span class="text-sm text-text-secondary block truncate" :title="`${conn.username}@${conn.host}:${conn.port}`">
-                {{ conn.username }}@{{ conn.host }}:{{ conn.port }}
-              </span>
-              <span class="text-xs text-text-alt block">
-                {{ t('dashboard.lastConnected', '上次连接:') }} {{ formatRelativeTime(conn.last_connected_at) }}
-              </span>
-              <!-- 备注信息移到这里 -->
-              <div v-if="conn.notes && conn.notes.trim() !== ''" class="text-xs text-text-secondary mt-1">
-                <span class="font-medium text-text-alt">{{ t('connections.form.notes', '备注:') }}</span>
-                <span class="break-words leading-snug ml-1" :title="conn.notes">
-                  {{ getTruncatedNotes(conn.notes) }}
-                </span>
+      <div v-else-if="filteredAndSortedConnections.length > 0" class="grid gap-4 2xl:grid-cols-2">
+        <article
+          v-for="conn in filteredAndSortedConnections"
+          :key="conn.id"
+          :class="[
+            'relative overflow-hidden rounded-[24px] border border-border/60 bg-white/78 p-5 shadow-[0_18px_36px_rgba(24,38,67,0.08)] transition duration-200',
+            isBatchEditMode ? 'cursor-pointer hover:border-primary/45 hover:bg-white/90' : 'hover:border-border-strong hover:bg-white/88',
+            isBatchEditMode && isConnectionSelectedForBatch(conn.id) ? 'ring-2 ring-primary ring-offset-2 ring-offset-[#ecf1f7]' : '',
+          ]"
+          @click="handleConnectionClick(conn.id)"
+        >
+          <div class="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-primary/80 via-sky-400/70 to-emerald-400/70"></div>
+
+          <div class="flex flex-col gap-4">
+            <div class="flex items-start justify-between gap-3">
+              <div class="min-w-0">
+                <div class="flex flex-wrap items-center gap-2">
+                  <span
+                    class="inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-primary-soft text-primary"
+                  >
+                    <i :class="[getConnectionIconClass(conn.type), 'text-base']"></i>
+                  </span>
+                  <div class="min-w-0">
+                    <div class="truncate text-base font-semibold text-foreground">
+                      {{ conn.name || conn.host || t('connections.unnamedFallback', '未命名连接') }}
+                    </div>
+                    <div class="text-sm text-text-secondary">
+                      {{ conn.username }}@{{ conn.host }}:{{ conn.port }}
+                    </div>
+                  </div>
+                </div>
               </div>
-              <div v-if="getTagNames(conn.tag_ids).length > 0" class="flex flex-wrap gap-1 mt-1.5">
-                <span
-                  v-for="tagName in getTagNames(conn.tag_ids)"
-                  :key="tagName"
-                  class="px-1.5 py-0.5 text-xs rounded bg-muted text-muted-foreground border border-border"
-                >
-                  {{ tagName }}
-                </span>
+
+              <div class="flex flex-wrap items-center justify-end gap-2">
+                <el-tag effect="plain" round>{{ conn.type }}</el-tag>
+                <el-tag v-if="isBatchEditMode && isConnectionSelectedForBatch(conn.id)" type="primary" round>
+                  {{ t('connections.batchEdit.editSelected', '已选中') }}
+                </el-tag>
               </div>
-              <!-- Test Result Display -->
+            </div>
+
+            <div class="grid gap-3 md:grid-cols-2">
+              <div class="rounded-2xl border border-border/50 bg-muted/45 px-4 py-3">
+                <div class="text-xs uppercase tracking-[0.12em] text-text-alt">
+                  {{ t('dashboard.lastConnected', '上次连接') }}
+                </div>
+                <div class="mt-2 text-sm font-medium text-foreground">
+                  {{ formatRelativeTime(conn.last_connected_at) }}
+                </div>
+              </div>
+
+              <div class="rounded-2xl border border-border/50 bg-muted/45 px-4 py-3">
+                <div class="text-xs uppercase tracking-[0.12em] text-text-alt">
+                  {{ t('connections.form.notes', '备注') }}
+                </div>
+                <div class="mt-2 text-sm text-text-secondary">
+                  {{ getTruncatedNotes(conn.notes) || t('common.none', '暂无备注') }}
+                </div>
+              </div>
+            </div>
+
+            <div v-if="getTagNames(conn.tag_ids).length > 0" class="flex flex-wrap gap-2">
+              <el-tag
+                v-for="tagName in getTagNames(conn.tag_ids)"
+                :key="tagName"
+                effect="plain"
+                round
+                size="small"
+              >
+                {{ tagName }}
+              </el-tag>
+            </div>
+
+            <div
+              v-if="conn.type === 'SSH' && connectionTestStates.get(conn.id) && connectionTestStates.get(conn.id)?.status !== 'idle'"
+              class="rounded-2xl border border-border/50 px-4 py-3"
+              :class="{
+                'bg-white/70 text-text-secondary': connectionTestStates.get(conn.id)?.status === 'testing',
+                'bg-emerald-50/90': connectionTestStates.get(conn.id)?.status === 'success',
+                'bg-rose-50/90 text-error': connectionTestStates.get(conn.id)?.status === 'error',
+              }"
+            >
               <div
-                v-if="conn.type === 'SSH' && connectionTestStates.get(conn.id) && connectionTestStates.get(conn.id)?.status !== 'idle'"
-                class="text-xs mt-1.5 pt-1 border-t border-border/30"
+                v-if="connectionTestStates.get(conn.id)?.status === 'testing'"
+                class="flex items-center text-sm"
               >
-                <div v-if="connectionTestStates.get(conn.id)?.status === 'testing'" class="text-text-secondary animate-pulse flex items-center">
-                  <i class="fas fa-spinner fa-spin mr-1.5 text-xs"></i>
-                  {{ t('connections.test.testingInProgress', '测试中...') }}
-                </div>
-                <div
-                  v-else-if="connectionTestStates.get(conn.id)?.status === 'success'"
-                  class="font-medium flex items-center"
-                  :style="{ color: connectionTestStates.get(conn.id)?.latencyColor || 'inherit' }"
-                >
-                  <i class="fas fa-check-circle mr-1.5 text-xs"></i>
-                  {{ connectionTestStates.get(conn.id)?.resultText }}
-                </div>
-                <div
-                  v-else-if="connectionTestStates.get(conn.id)?.status === 'error'"
-                  class="text-error font-medium flex items-center"
-                >
-                  <i class="fas fa-times-circle mr-1.5 text-xs"></i>
-                  {{ t('connections.test.errorPrefix', '错误:') }} {{ connectionTestStates.get(conn.id)?.resultText }}
-                </div>
+                <i class="fas fa-spinner fa-spin mr-2"></i>
+                {{ t('connections.test.testingInProgress', '测试中...') }}
+              </div>
+
+              <div
+                v-else-if="connectionTestStates.get(conn.id)?.status === 'success'"
+                class="flex items-center text-sm font-semibold"
+                :style="{ color: connectionTestStates.get(conn.id)?.latencyColor || 'inherit' }"
+              >
+                <i class="fas fa-circle-check mr-2"></i>
+                {{ connectionTestStates.get(conn.id)?.resultText || t('common.success', '成功') }}
+              </div>
+
+              <div v-else class="flex items-center text-sm font-semibold">
+                <i class="fas fa-circle-xmark mr-2"></i>
+                {{ t('connections.test.errorPrefix', '错误:') }} {{ connectionTestStates.get(conn.id)?.resultText }}
               </div>
             </div>
-            <!-- 中间备注区域已被移除 -->
-            <div class="flex items-center space-x-2 flex-shrink-0">
-              <!-- Test Single Connection Button -->
-              <button
+
+            <div class="flex flex-wrap items-center gap-2 pt-1">
+              <el-button
                 v-if="conn.type === 'SSH'"
-                @click.stop="handleTestSingleConnection(conn)"
+                plain
                 :disabled="isBatchEditMode || getSingleTestButtonInfo(conn.id, conn.type).disabled"
-                class="px-3 py-1.5 bg-transparent text-foreground border border-border rounded-md shadow-sm hover:bg-border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 ease-in-out text-sm font-medium h-9 flex items-center justify-center"
-                :class="{ 'opacity-50 cursor-not-allowed': isBatchEditMode || getSingleTestButtonInfo(conn.id, conn.type).disabled }"
-                :title="getSingleTestButtonInfo(conn.id, conn.type).title"
-              >
-                <i :class="[getSingleTestButtonInfo(conn.id, conn.type).iconClass, 'w-4 text-center', getSingleTestButtonInfo(conn.id, conn.type).textKey !== 'connections.actions.testing' ? 'mr-1' : '']"></i>
-                <span v-if="getSingleTestButtonInfo(conn.id, conn.type).textKey !== 'connections.actions.testing'">{{ t(getSingleTestButtonInfo(conn.id, conn.type).textKey) }}</span>
-              </button>
-              <button
-                @click.stop="openEditConnectionForm(conn)"
-                class="px-3 py-1.5 bg-transparent text-foreground border border-border rounded-md shadow-sm hover:bg-border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 ease-in-out text-sm font-medium h-9 flex items-center justify-center"
-                :disabled="isBatchEditMode"
-                :class="{ 'opacity-50 cursor-not-allowed': isBatchEditMode }"
-              >
-                <i class="fas fa-pencil-alt mr-1"></i>{{ t('connections.actions.edit') }}
-              </button>
-              <button
-                @click.stop="connectTo(conn)"
-                class="px-4 py-2 bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 ease-in-out text-sm font-medium h-9 flex items-center justify-center"
-                :disabled="isBatchEditMode"
-                :class="{ 'opacity-50 cursor-not-allowed': isBatchEditMode }"
+                @click.stop="handleTestSingleConnection(conn)"
               >
+                <i :class="[getSingleTestButtonInfo(conn.id, conn.type).iconClass, 'mr-2']"></i>
+                {{
+                  getSingleTestButtonInfo(conn.id, conn.type).textKey !== 'connections.actions.testing'
+                    ? t(getSingleTestButtonInfo(conn.id, conn.type).textKey)
+                    : t('connections.actions.testing', '测试中')
+                }}
+              </el-button>
+
+              <el-button plain :disabled="isBatchEditMode" @click.stop="openEditConnectionForm(conn)">
+                <i class="fas fa-pen mr-2"></i>
+                {{ t('connections.actions.edit') }}
+              </el-button>
+
+              <el-button type="primary" :disabled="isBatchEditMode" @click.stop="connectTo(conn)">
+                <i class="fas fa-terminal mr-2"></i>
                 {{ t('connections.actions.connect') }}
-              </button>
+              </el-button>
             </div>
-          </li>
-        </ul>
-        <div v-else-if="!isLoadingConnections && searchQuery && filteredAndSortedConnections.length === 0" class="text-center text-text-secondary">{{ t('dashboard.noConnectionsMatchSearch', '没有连接匹配搜索条件') }}</div>
-        <div v-else-if="!isLoadingConnections && selectedTagId !== null && filteredAndSortedConnections.length === 0" class="text-center text-text-secondary">{{ t('dashboard.noConnectionsWithTag', '该标签下没有连接记录') }}</div>
-        <div v-else class="text-center text-text-secondary">{{ t('dashboard.noConnections', '没有连接记录') }}</div>
-        </div>
+          </div>
+        </article>
       </div>
-    </div> <!-- 结束新增的包裹层 -->
+
+      <div v-else class="control-empty">
+        <el-empty
+          :description="
+            searchQuery
+              ? t('dashboard.noConnectionsMatchSearch', '没有连接匹配搜索条件')
+              : selectedTagId !== null
+                ? t('dashboard.noConnectionsWithTag', '该标签下没有连接记录')
+                : t('dashboard.noConnections', '没有连接记录')
+          "
+        />
+      </div>
+    </el-card>
 
     <AddConnectionForm
       v-if="showAddEditConnectionForm"
@@ -745,5 +809,5 @@ const handleConnectAllFilteredConnections = async () => {
       @update:visible="handleBatchEditFormClose"
       @saved="handleBatchEditSaved"
     />
-  </div>
+  </PageShell>
 </template>
diff --git a/packages/frontend/src/views/WorkspaceView.vue b/packages/frontend/src/views/WorkspaceView.vue
index 45add48..81ac8ff 100644
--- a/packages/frontend/src/views/WorkspaceView.vue
+++ b/packages/frontend/src/views/WorkspaceView.vue
@@ -824,14 +824,32 @@ const closeFileManagerModal = () => {
 
 <style scoped>
 .workspace-view {
+  position: relative;
   display: flex;
-  background-color: transparent;
   flex-direction: column;
+  gap: 0.85rem;
+  box-sizing: border-box;
+  padding: 0 1rem 1rem;
+  background-color: transparent;
   height: 100dvh; /* 使用动态视口高度 */
+  min-height: 0;
   overflow: hidden;
   transition: height 0.3s ease; /* 可选：添加过渡效果 */
 }
 
+.workspace-view::before {
+  content: '';
+  position: absolute;
+  inset: 0.9rem 1rem 1rem;
+  border-radius: 32px;
+  border: 1px solid rgba(103, 124, 155, 0.12);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(241, 246, 252, 0.18)),
+    radial-gradient(circle at top right, rgba(60, 105, 231, 0.1), transparent 28%);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
+  pointer-events: none;
+}
+
 /* 当 Header 可见时，调整高度 */
 .workspace-view.with-header {
   /* 假设 Header 高度为 55px (根据 App.vue CSS) */
@@ -839,14 +857,20 @@ const closeFileManagerModal = () => {
 }
 
 .main-content-area {
-    display: flex;
-    flex: 1;
-    overflow: hidden; /* Keep overflow hidden */
-    border: 1px solid var(--border-color, #ccc); /* Use variable for border */
-    border-top: none; /* Remove top border as it's handled by the tab bar */
-    border-radius: 0 0 5px 5px; /* Top-left, Top-right, Bottom-right, Bottom-left */
-    margin: var(--base-margin, 0.5rem); /* Add some margin around the content area */
-    margin-top: 0; /* Remove top margin if tab bar is directly above */
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  border: 1px solid rgba(103, 124, 155, 0.18);
+  border-radius: 30px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(242, 247, 253, 0.72)),
+    linear-gradient(135deg, rgba(60, 105, 231, 0.05), transparent);
+  box-shadow: var(--shadow-soft);
+  backdrop-filter: blur(22px);
+  padding: 0.85rem;
 }
 
 .layout-renderer-wrapper {
@@ -854,64 +878,81 @@ const closeFileManagerModal = () => {
   width: 100%;
   height: 100%;
   overflow: hidden;
+  border-radius: 24px;
+  background: rgba(255, 255, 255, 0.46);
 }
 
 /* 面板占位符样式 (用于加载或错误状态) */
 .pane-placeholder {
-    flex-grow: 1;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    color: var(--text-color-secondary); /* Use secondary text color variable */
-    background-color: var(--header-bg-color); /* Use header background for slight contrast */
-    font-size: 0.9em;
-    padding: var(--base-padding); /* Use base padding variable */
+  position: relative;
+  z-index: 1;
+  flex-grow: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  color: var(--text-color-secondary);
+  background: rgba(248, 251, 255, 0.72);
+  border: 1px dashed rgba(103, 124, 155, 0.28);
+  border-radius: 24px;
+  font-size: 0.92em;
+  padding: var(--base-padding);
 }
 
 
 /* --- Mobile Layout Styles --- */
 .workspace-view.is-mobile {
-  /* Ensure flex column layout */
-  display: flex; /* Uncommented */
-  flex-direction: column; /* Uncommented */
-  /* Height is already handled by .workspace-view and .with-header */
+  padding: 0 0 0.85rem;
 }
 
 .workspace-view.is-mobile .main-content-area {
-  /* Hide the desktop content area in mobile view */
   display: none;
 }
 
 .mobile-content-area {
-  display: flex; /* Use flex for the terminal container */
-  flex-direction: column; /* Stack elements vertically if needed */
-  flex-grow: 1; /* Allow this area to take up remaining space */
-  overflow: hidden; /* Prevent overflow */
-  position: relative; /* Needed for potential absolute positioning inside */
-  /* Remove desktop margins/borders */
-  margin: 0;
-  border: none;
-  border-radius: 0;
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  min-height: 0;
+  overflow: hidden;
+  margin: 0 0.75rem;
+  border: 1px solid rgba(103, 124, 155, 0.18);
+  border-radius: 26px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(242, 247, 253, 0.72));
+  box-shadow: var(--shadow-soft);
+  backdrop-filter: blur(22px);
+  padding: 0.75rem;
 }
 
 .mobile-terminal {
-  flex-grow: 1; /* Terminal takes all available space in mobile-content-area */
+  flex-grow: 1;
   width: 100%;
   overflow: hidden;
 }
 
 .mobile-command-bar {
-  flex-shrink: 0; /* Prevent command bar from shrinking */
-  /* Add specific styles if needed, e.g., border-top */
-  border-top: 1px solid var(--border-color, #ccc);
+  position: relative;
+  z-index: 1;
+  flex-shrink: 0;
+  margin: 0.75rem 0.75rem 0;
+  border: 1px solid rgba(103, 124, 155, 0.18);
+  border-radius: 22px;
+  background: rgba(255, 255, 255, 0.82);
+  box-shadow: var(--shadow-card);
+  overflow: hidden;
 }
 
 .mobile-virtual-keyboard {
-  flex-shrink: 0; /* 防止虚拟键盘缩小 */
-  width: 100%; /* 确保宽度为 100% */
-  box-sizing: border-box; /* 边框和内边距包含在宽度内 */
-  /* 可以添加更多样式，例如背景色、边框等 */
+  position: relative;
+  z-index: 1;
+  flex-shrink: 0;
+  width: calc(100% - 1.5rem);
+  margin: 0.75rem auto 0;
+  box-sizing: border-box;
+  border-radius: 24px;
+  overflow: hidden;
 }