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

This reverts commit 191962b8543f3d9711771b952d021c5b1220cc77.
---
 .helloagents/CHANGELOG.md                     |   1 -
 packages/frontend/src/App.vue                 |  13 +-
 .../src/components/TerminalTabBar.vue         |  46 +-
 .../frontend/src/views/ConnectionsView.vue    | 908 ++++++++----------
 packages/frontend/src/views/WorkspaceView.vue | 121 +--
 5 files changed, 470 insertions(+), 619 deletions(-)

diff --git a/.helloagents/CHANGELOG.md b/.helloagents/CHANGELOG.md
index 9dedf32..98a28f4 100644
--- a/.helloagents/CHANGELOG.md
+++ b/.helloagents/CHANGELOG.md
@@ -7,4 +7,3 @@
 - 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 280a31b..379a18c 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('.app-nav__link.is-active, .app-nav__link.router-link-exact-active') as HTMLElement | null;
+    const activeLink = navRef.value.querySelector('.router-link-exact-active') as HTMLElement;
     if (activeLink) {
       underlineRef.value.style.left = `${activeLink.offsetLeft}px`;
       underlineRef.value.style.width = `${activeLink.offsetWidth}px`;
@@ -65,7 +65,6 @@ 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.');
@@ -91,7 +90,6 @@ watch(
 onUnmounted(() => {
   window.removeEventListener('keydown', handleAltKeyDown);
   window.removeEventListener('keyup', handleGlobalKeyUp);
-  window.removeEventListener('resize', updateUnderline);
 });
 
 const isWorkspaceRoute = computed(() => route.path === '/workspace');
@@ -370,18 +368,9 @@ 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 dd476e4..457601b 100644
--- a/packages/frontend/src/components/TerminalTabBar.vue
+++ b/packages/frontend/src/components/TerminalTabBar.vue
@@ -63,7 +63,6 @@ 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) => {
@@ -394,7 +393,7 @@ const handleWheel: EventListener = (event: Event) => {
 
 // 在组件挂载时添加滚轮事件监听
 onMounted(() => {
-  const tabContainer = tabScrollerRef.value;
+  const tabContainer = document.querySelector('.overflow-x-auto');
   if (tabContainer) {
     tabContainer.addEventListener('wheel', handleWheel as EventListener, { passive: false });
   }
@@ -402,7 +401,7 @@ onMounted(() => {
 
 // 在组件卸载时移除滚轮事件监听
 onBeforeUnmount(() => {
-  const tabContainer = tabScrollerRef.value;
+  const tabContainer = document.querySelector('.overflow-x-auto');
   if (tabContainer) {
     tabContainer.removeEventListener('wheel', handleWheel as EventListener);
   }
@@ -412,13 +411,11 @@ onBeforeUnmount(() => {
 
 <template>
   <!-- +++ 使用 :class 绑定来条件化样式，包括高度 (修正 props 引用) +++ -->
-  <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">
+  <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 -->
       <draggable
         v-model="draggableSessions"
         item-key="sessionId"
@@ -521,32 +518,3 @@ 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 349d0ee..119da4d 100644
--- a/packages/frontend/src/views/ConnectionsView.vue
+++ b/packages/frontend/src/views/ConnectionsView.vue
@@ -1,19 +1,21 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue';
+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 { 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();
@@ -29,20 +31,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);
@@ -63,138 +65,67 @@ const filteredAndSortedConnections = computed(() => {
   const filterTagId = selectedTagId.value;
   const query = searchQuery.value.toLowerCase().trim();
 
-  const filteredByTag =
-    filterTagId === null
-      ? [...connections.value]
-      : connections.value.filter((conn) => conn.tag_ids?.includes(filterTagId));
+  let filteredByTag = filterTagId === null
+    ? [...connections.value]
+    : connections.value.filter(conn => conn.tag_ids?.includes(filterTagId));
 
-  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;
+  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;
+    });
+  }
 
   return searchedConnections.sort((a, b) => {
-    let valA: string | number;
-    let valB: string | number;
+    let valA: any;
+    let valB: any;
 
     switch (sortBy) {
       case 'name':
         valA = a.name || '';
         valB = b.name || '';
-        return String(valA).localeCompare(String(valB)) * factor;
+        return valA.localeCompare(valB) * factor;
       case 'type':
         valA = a.type || '';
         valB = b.type || '';
-        return String(valA).localeCompare(String(valB)) * factor;
+        return valA.localeCompare(valB) * factor;
       case 'created_at':
         valA = a.created_at ?? 0;
         valB = b.created_at ?? 0;
-        return (Number(valA) - Number(valB)) * factor;
+        return (valA - valB) * factor;
       case 'updated_at':
         valA = a.updated_at ?? 0;
         valB = b.updated_at ?? 0;
-        return (Number(valA) - Number(valB)) * factor;
+        return (valA - 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;
-        return Number(valA) < Number(valB) ? -1 * factor : 1 * factor;
+        if (valA < valB) return -1 * factor;
+        return 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);
   }
 });
 
@@ -217,9 +148,47 @@ 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;
@@ -241,16 +210,16 @@ const handleConnectionModified = async () => {
   await connectionsStore.fetchConnections();
 };
 
+// --- Batch Edit Functions ---
 const toggleBatchEditMode = () => {
   isBatchEditMode.value = !isBatchEditMode.value;
   if (!isBatchEditMode.value) {
-    selectedConnectionIdsForBatch.value.clear();
+    selectedConnectionIdsForBatch.value.clear(); // Clear selection when exiting batch mode
   }
 };
 
 const handleConnectionClick = (connId: number) => {
   if (!isBatchEditMode.value) return;
-
   if (selectedConnectionIdsForBatch.value.has(connId)) {
     selectedConnectionIdsForBatch.value.delete(connId);
   } else {
@@ -258,11 +227,13 @@ const handleConnectionClick = (connId: number) => {
   }
 };
 
-const isConnectionSelectedForBatch = (connId: number): boolean => selectedConnectionIdsForBatch.value.has(connId);
+const isConnectionSelectedForBatch = (connId: number): boolean => {
+  return 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 = () => {
@@ -272,8 +243,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 {
@@ -284,26 +255,25 @@ const invertSelection = () => {
 
 const openBatchEditModal = () => {
   if (selectedConnectionIdsForBatch.value.size === 0) {
-    showAlertDialog({
-      title: t('common.alert', '提示'),
-      message: t('connections.batchEdit.noSelectionForEdit', '请至少选择一个连接进行编辑。'),
-    });
+    // Optionally, show a notification from uiNotificationsStore using your project's method
+    showAlertDialog({ title: t('common.alert', '提示'), message: t('connections.batchEdit.noSelectionForEdit', '请至少选择一个连接进行编辑。') }); // Placeholder
     return;
   }
-
   showBatchEditForm.value = true;
 };
 
 const handleBatchEditSaved = async () => {
   showBatchEditForm.value = false;
   selectedConnectionIdsForBatch.value.clear();
-  await connectionsStore.fetchConnections();
+  // isBatchEditMode.value = false; // Optionally exit batch mode after saving
+  await connectionsStore.fetchConnections(); // Refresh the list
 };
 
 const handleBatchEditFormClose = () => {
   showBatchEditForm.value = false;
 };
 
+// --- 批量删除 ---
 const handleBatchDeleteConnections = async () => {
   if (selectedConnectionIdsForBatch.value.size === 0 || isDeletingSelectedConnections.value) {
     return;
@@ -312,48 +282,47 @@ 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;
-  }
 
-  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;
+  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;
+    }
   }
 };
 
+// --- 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';
+  if (latencyMs === undefined) return 'inherit'; // Default or inherit
+  // These colors should ideally come from theme variables if available
   if (latencyMs < 100) return 'var(--color-success, #4CAF50)';
   if (latencyMs < 300) return 'var(--color-warning, #ff9800)';
   return 'var(--color-error, #F44336)';
@@ -368,26 +337,36 @@ 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;
-      const displayText = latencyMs !== undefined ? `${latencyMs}ms` : '';
-      const determinedColor = latencyMs !== undefined ? getLatencyColorString(latencyMs) : getLatencyColorString(0);
+      let displayText = ''; // 初始化为空字符串，符合只显示延迟的要求
+      let determinedColor;
+
+      if (latencyMs !== undefined) {
+        displayText = `${latencyMs}ms`;
+        determinedColor = getLatencyColorString(latencyMs);
+      } else {
+        // 测试成功，但没有延迟信息。不显示文本。
+        // 颜色应为明确的成功颜色。
+        // getLatencyColorString(0) 会返回绿色，代表非常好的情况。
+        determinedColor = getLatencyColorString(0); // 或者直接使用 'var(--color-success, #4CAF50)'
+      }
 
       connectionTestStates.value.set(conn.id, {
         status: 'success',
-        resultText: displayText,
+        resultText: displayText, // 将显示 "XXms" 或者为空
         latency: latencyMs,
         latencyColor: determinedColor,
       });
-      return;
+    } else {
+      connectionTestStates.value.set(conn.id, {
+        status: 'error',
+        resultText: result.message || t('connections.test.unknownError', '未知错误'),
+      });
     }
-
-    connectionTestStates.value.set(conn.id, {
-      status: 'error',
-      resultText: result.message || t('connections.test.unknownError', '未知错误'),
-    });
   } catch (error: any) {
     connectionTestStates.value.set(conn.id, {
       status: 'error',
@@ -398,53 +377,44 @@ const handleTestSingleConnection = async (conn: ConnectionInfo) => {
 
 const handleTestAllFilteredConnections = async () => {
   if (isTestingAll.value || isLoadingConnections.value) return;
-
-  const sshConnectionsToTest = filteredAndSortedConnections.value.filter((conn) => conn.type === 'SSH' && conn.id != null);
+  // Ensure conn.id exists for map function and error handling
+  const sshConnectionsToTest = filteredAndSortedConnections.value.filter(c => c.type === 'SSH' && c.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) =>
-    handleTestSingleConnection(conn).catch((error) => {
+  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 => {
       console.error(`Error testing connection ${conn.id}:`, error);
-      connectionTestStates.value.set(conn.id!, {
+      // 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
         status: 'error',
-        resultText: t('connections.test.unknownErrorDuringBatch', '批量测试中发生错误'),
+        resultText: t('connections.test.unknownErrorDuringBatch', '批量测试中发生错误'), // New i18n key
       });
-    }),
-  );
+    });
+  });
 
   try {
     await Promise.all(testPromises);
   } catch (error) {
-    console.error('Error during batch testing of connections (Promise.all):', 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.
   } 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;
 
@@ -454,345 +424,311 @@ 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) {
-    return {
-      textKey: 'connections.actions.test',
-      iconClass: 'fas fa-plug',
-      disabled: true,
-      loading: false,
-      title: '',
-    };
+  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 (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', '测试中') };
   }
-
-  return {
-    textKey: 'connections.actions.test',
-    iconClass: 'fas fa-plug',
-    disabled: false,
-    loading: false,
-    title: t('connections.actions.test', '测试'),
-  };
+  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', '测试') };
 };
 
 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) + '...';
 };
 
-const getConnectionIconClass = (type: string | undefined) => {
-  if (type === 'VNC') return 'fas fa-plug';
-  if (type === 'RDP') return 'fas fa-desktop';
-  return 'fas fa-server';
+
+
+// --- 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;
+  }
 };
+
 </script>
 
 <template>
-  <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="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>
 
-      <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>
-
-          <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
+      <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"
             >
-              <template #prefix>
-                <i class="fas fa-search text-text-secondary"></i>
-              </template>
-            </el-input>
-
-            <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>
-
-            <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>
+              <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>
           </div>
-        </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>
+          <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"
+            >
+              <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>
 
-        <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"
+           <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>
+
+            <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>
+          </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连接')"
           >
-            <i class="fas fa-trash mr-2"></i>
-            {{ t('connections.batchEdit.deleteSelectedButton', '删除选中') }}
-          </el-button>
+            <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>
         </div>
       </div>
 
-      <div v-if="isLoadingConnections && filteredAndSortedConnections.length === 0" class="control-empty">
-        <el-skeleton :rows="6" animated />
-      </div>
-
-      <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)"
+      <!-- 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"
         >
-          <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>
+          {{ 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>
 
-          <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 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>
-
-              <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 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>
-            </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',
-              }"
-            >
+              <!-- Test Result Display -->
               <div
-                v-if="connectionTestStates.get(conn.id)?.status === 'testing'"
-                class="flex items-center text-sm"
+                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"
               >
-                <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 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>
               </div>
             </div>
-
-            <div class="flex flex-wrap items-center gap-2 pt-1">
-              <el-button
+            <!-- 中间备注区域已被移除 -->
+            <div class="flex items-center space-x-2 flex-shrink-0">
+              <!-- Test Single Connection Button -->
+              <button
                 v-if="conn.type === 'SSH'"
-                plain
-                :disabled="isBatchEditMode || getSingleTestButtonInfo(conn.id, conn.type).disabled"
                 @click.stop="handleTestSingleConnection(conn)"
+                :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 }"
               >
-                <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') }}
-              </el-button>
+              </button>
             </div>
-          </div>
-        </article>
+          </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>
-
-      <div v-else class="control-empty">
-        <el-empty
-          :description="
-            searchQuery
-              ? t('dashboard.noConnectionsMatchSearch', '没有连接匹配搜索条件')
-              : selectedTagId !== null
-                ? t('dashboard.noConnectionsWithTag', '该标签下没有连接记录')
-                : t('dashboard.noConnections', '没有连接记录')
-          "
-        />
-      </div>
-    </el-card>
+    </div> <!-- 结束新增的包裹层 -->
 
     <AddConnectionForm
       v-if="showAddEditConnectionForm"
@@ -809,5 +745,5 @@ const getConnectionIconClass = (type: string | undefined) => {
       @update:visible="handleBatchEditFormClose"
       @saved="handleBatchEditSaved"
     />
-  </PageShell>
+  </div>
 </template>
diff --git a/packages/frontend/src/views/WorkspaceView.vue b/packages/frontend/src/views/WorkspaceView.vue
index 81ac8ff..45add48 100644
--- a/packages/frontend/src/views/WorkspaceView.vue
+++ b/packages/frontend/src/views/WorkspaceView.vue
@@ -824,32 +824,14 @@ const closeFileManagerModal = () => {
 
 <style scoped>
 .workspace-view {
-  position: relative;
   display: flex;
-  flex-direction: column;
-  gap: 0.85rem;
-  box-sizing: border-box;
-  padding: 0 1rem 1rem;
   background-color: transparent;
+  flex-direction: column;
   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) */
@@ -857,20 +839,14 @@ const closeFileManagerModal = () => {
 }
 
 .main-content-area {
-  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;
+    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 */
 }
 
 .layout-renderer-wrapper {
@@ -878,81 +854,64 @@ const closeFileManagerModal = () => {
   width: 100%;
   height: 100%;
   overflow: hidden;
-  border-radius: 24px;
-  background: rgba(255, 255, 255, 0.46);
 }
 
 /* 面板占位符样式 (用于加载或错误状态) */
 .pane-placeholder {
-  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);
+    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 */
 }
 
 
 /* --- Mobile Layout Styles --- */
 .workspace-view.is-mobile {
-  padding: 0 0 0.85rem;
+  /* Ensure flex column layout */
+  display: flex; /* Uncommented */
+  flex-direction: column; /* Uncommented */
+  /* Height is already handled by .workspace-view and .with-header */
 }
 
 .workspace-view.is-mobile .main-content-area {
+  /* Hide the desktop content area in mobile view */
   display: none;
 }
 
 .mobile-content-area {
-  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;
+  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;
 }
 
 .mobile-terminal {
-  flex-grow: 1;
+  flex-grow: 1; /* Terminal takes all available space in mobile-content-area */
   width: 100%;
   overflow: hidden;
 }
 
 .mobile-command-bar {
-  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;
+  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);
 }
 
 .mobile-virtual-keyboard {
-  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;
+  flex-shrink: 0; /* 防止虚拟键盘缩小 */
+  width: 100%; /* 确保宽度为 100% */
+  box-sizing: border-box; /* 边框和内边距包含在宽度内 */
+  /* 可以添加更多样式，例如背景色、边框等 */
 }