From 191962b8543f3d9711771b952d021c5b1220cc77 Mon Sep 17 00:00:00 2001
From: yinjianm <admin@mxmicah.com>
Date: Wed, 25 Mar 2026 05:10:01 +0800
Subject: [PATCH] feat(frontend): redesign connections and workspace ui

refresh the connections view into a control center card layout
with summary stats, bulk actions, and faster access to test and
connect filtered SSH entries

polish workspace chrome with glass panel containers and update
the terminal tab bar styling and scrolling behavior

fix the top nav underline so it only tracks active nav links and
stays aligned after window resizing
---
 .helloagents/CHANGELOG.md                     |   1 +
 packages/frontend/src/App.vue                 |  13 +-
 .../src/components/TerminalTabBar.vue         |  46 +-
 .../frontend/src/views/ConnectionsView.vue    | 904 ++++++++++--------
 packages/frontend/src/views/WorkspaceView.vue | 121 ++-
 5 files changed, 617 insertions(+), 468 deletions(-)

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