From 9daed296c973afe92177c06d39a75f1fcae6b891 Mon Sep 17 00:00:00 2001
From: Baobhan Sith <80159437+Heavrnl@users.noreply.github.com>
Date: Wed, 23 Apr 2025 17:19:36 +0800
Subject: [PATCH] update

---
 .../src/components/AddConnectionForm.vue      | 603 ++++--------------
 .../components/WorkspaceConnectionList.vue    | 263 ++------
 2 files changed, 176 insertions(+), 690 deletions(-)

diff --git a/packages/frontend/src/components/AddConnectionForm.vue b/packages/frontend/src/components/AddConnectionForm.vue
index a12ec66..2d05967 100644
--- a/packages/frontend/src/components/AddConnectionForm.vue
+++ b/packages/frontend/src/components/AddConnectionForm.vue
@@ -287,474 +287,151 @@ const testButtonText = computed(() => {
 </script>
 
 <template>
-  <div class="add-connection-form-overlay">
-    <div class="add-connection-form">
-      <h3>{{ formTitle }}</h3> <!-- 使用计算属性 -->
-      <form @submit.prevent="handleSubmit">
-         <div class="form-sections"> <!-- Container for sections -->
+  <div class="fixed inset-0 bg-overlay flex justify-center items-center z-50 p-4"> <!-- Overlay -->
+    <div class="bg-background text-foreground p-6 rounded-lg shadow-xl border border-border w-full max-w-2xl max-h-[90vh] flex flex-col"> <!-- Form Panel -->
+      <h3 class="text-xl font-semibold text-center mb-6 flex-shrink-0">{{ formTitle }}</h3> <!-- Title -->
+      <form @submit.prevent="handleSubmit" class="flex-grow overflow-y-auto pr-2 space-y-6"> <!-- Form with scroll and spacing -->
 
-           <fieldset class="form-section">
-             <legend>{{ t('connections.form.sectionBasic', '基本信息') }}</legend>
-             <div class="form-group">
-               <label for="conn-name">{{ t('connections.form.name') }} ({{ t('connections.form.optional') }})</label>
-               <input type="text" id="conn-name" v-model="formData.name" />
-             </div>
-             <!-- Host and Port Row -->
-             <div class="form-row">
-               <div class="form-group form-group-host">
-                 <label for="conn-host">{{ t('connections.form.host') }}</label>
-                 <input type="text" id="conn-host" v-model="formData.host" required />
-               </div>
-               <div class="form-group form-group-port">
-                 <label for="conn-port">{{ t('connections.form.port') }}</label>
-                 <input type="number" id="conn-port" v-model.number="formData.port" required min="1" max="65535" />
-               </div>
-             </div>
-           </fieldset>
+        <!-- Basic Info Section -->
+        <div class="space-y-4 p-4 border border-border rounded-md bg-header/30">
+          <h4 class="text-base font-semibold mb-3 pb-2 border-b border-border/50">{{ t('connections.form.sectionBasic', '基本信息') }}</h4>
+          <div>
+            <label for="conn-name" class="block text-sm font-medium text-text-secondary mb-1">{{ t('connections.form.name') }} ({{ t('connections.form.optional') }})</label>
+            <input type="text" id="conn-name" v-model="formData.name"
+                   class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary" />
+          </div>
+          <!-- Host and Port Row -->
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div class="md:col-span-2">
+              <label for="conn-host" class="block text-sm font-medium text-text-secondary mb-1">{{ t('connections.form.host') }}</label>
+              <input type="text" id="conn-host" v-model="formData.host" required
+                     class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary" />
+            </div>
+            <div>
+              <label for="conn-port" class="block text-sm font-medium text-text-secondary mb-1">{{ t('connections.form.port') }}</label>
+              <input type="number" id="conn-port" v-model.number="formData.port" required min="1" max="65535"
+                     class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary" />
+            </div>
+          </div>
+        </div>
 
-           <fieldset class="form-section">
-              <legend>{{ t('connections.form.sectionAuth', '认证方式') }}</legend>
-              <!-- Username moved here -->
-              <div class="form-group">
-                <label for="conn-username">{{ t('connections.form.username') }}</label>
-                <input type="text" id="conn-username" v-model="formData.username" required />
-              </div>
-              <!-- Auth Method -->
-              <div class="form-group">
-                <label for="conn-auth-method">{{ t('connections.form.authMethod') }}</label>
-                <select id="conn-auth-method" v-model="formData.auth_method">
-                     <option value="password">{{ t('connections.form.authMethodPassword') }}</option>
-                     <option value="key">{{ t('connections.form.authMethodKey') }}</option>
-                   </select>
-                 </div>
-
-                 <div class="form-group" v-if="formData.auth_method === 'password'">
-                   <label for="conn-password">{{ t('connections.form.password') }}</label>
-                   <input type="password" id="conn-password" v-model="formData.password" :required="formData.auth_method === 'password' && !isEditMode" />
-                 </div>
-
-                 <div v-if="formData.auth_method === 'key'">
-                   <div class="form-group">
-                     <label for="conn-private-key">{{ t('connections.form.privateKey') }}</label>
-                     <textarea id="conn-private-key" v-model="formData.private_key" rows="4" :required="formData.auth_method === 'key' && !isEditMode"></textarea>
-                   </div>
-                   <div class="form-group">
-                     <label for="conn-passphrase">{{ t('connections.form.passphrase') }} ({{ t('connections.form.optional') }})</label>
-                     <input type="password" id="conn-passphrase" v-model="formData.passphrase" />
-                   </div>
-                   <div class="form-group" v-if="isEditMode && formData.auth_method === 'key'">
-                     <small>{{ t('connections.form.keyUpdateNote') }}</small>
-                   </div>
-                 </div>
-           </fieldset>
-
-           <fieldset class="form-section">
-             <legend>{{ t('connections.form.sectionAdvanced', '高级选项') }}</legend>
-              <div class="form-group">
-               <label for="conn-proxy">{{ t('connections.form.proxy') }} ({{ t('connections.form.optional') }})</label>
-               <select id="conn-proxy" v-model="formData.proxy_id">
-                 <option :value="null">{{ t('connections.form.noProxy') }}</option>
-                 <option v-for="proxy in proxies" :key="proxy.id" :value="proxy.id">
-                   {{ proxy.name }} ({{ proxy.type }} - {{ proxy.host }}:{{ proxy.port }})
-                 </option>
-               </select>
-               <div v-if="isProxyLoading" class="loading-small">{{ t('proxies.loading') }}</div>
-               <div v-if="proxyStoreError" class="error-small">{{ t('proxies.error', { error: proxyStoreError }) }}</div>
-             </div>
-
-             <div class="form-group">
-               <label>{{ t('connections.form.tags') }} ({{ t('connections.form.optional') }})</label>
-               <TagInput v-model="formData.tag_ids" />
-             </div>
-           </fieldset>
-
-           <!-- Error message remains outside sections -->
-           <div v-if="formError || storeError" class="error-message">
-             {{ formError || storeError }}
+        <!-- Authentication Section -->
+        <div class="space-y-4 p-4 border border-border rounded-md bg-header/30">
+           <h4 class="text-base font-semibold mb-3 pb-2 border-b border-border/50">{{ t('connections.form.sectionAuth', '认证方式') }}</h4>
+           <div>
+             <label for="conn-username" class="block text-sm font-medium text-text-secondary mb-1">{{ t('connections.form.username') }}</label>
+             <input type="text" id="conn-username" v-model="formData.username" required
+                    class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary" />
+           </div>
+           <div>
+             <label for="conn-auth-method" class="block text-sm font-medium text-text-secondary mb-1">{{ t('connections.form.authMethod') }}</label>
+             <select id="conn-auth-method" v-model="formData.auth_method"
+                     class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-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.75rem center; background-size: 16px 12px;">
+               <option value="password">{{ t('connections.form.authMethodPassword') }}</option>
+               <option value="key">{{ t('connections.form.authMethodKey') }}</option>
+             </select>
            </div>
 
-         </div> <!-- 结束 form-sections -->
+           <div v-if="formData.auth_method === 'password'">
+             <label for="conn-password" class="block text-sm font-medium text-text-secondary mb-1">{{ t('connections.form.password') }}</label>
+             <input type="password" id="conn-password" v-model="formData.password" :required="formData.auth_method === 'password' && !isEditMode" autocomplete="new-password"
+                    class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary" />
+           </div>
 
-         <div class="form-actions">
-            <div class="test-action-area"> <!-- New container for button, icon, and result -->
-                <div class="test-button-wrapper"> <!-- Container for button and icon -->
-                    <button type="button" @click="handleTestConnection" :disabled="isLoading || testStatus === 'testing'">
-                      {{ testButtonText }}
-                    </button>
-                    <span class="info-icon">?
-                      <span class="tooltip-text">{{ t('connections.test.latencyTooltip') }}</span>
-                    </span>
-                </div>
-                <!-- Test result moved below the button -->
-                <div class="test-status-wrapper">
-                    <div v-if="testStatus === 'testing'" class="test-status loading-small">
-                      {{ t('connections.test.testingInProgress', '测试中...') }}
-                    </div>
-                    <div v-else-if="testStatus === 'success'" class="test-status success" :style="{ color: latencyColor }">
-                      {{ testResult }}
-                    </div>
-                    <div v-else-if="testStatus === 'error'" class="test-status error">
-                      {{ t('connections.test.errorPrefix', '错误:') }} {{ testResult }}
-                    </div>
-                </div>
-            </div>
-            <div class="main-actions">
-                <button type="submit" :disabled="isLoading || testStatus === 'testing'">
-                  {{ submitButtonText }}
-                </button>
-                <button type="button" @click="emit('close')" :disabled="isLoading || testStatus === 'testing'">{{ t('connections.form.cancel') }}</button>
-            </div>
+           <div v-if="formData.auth_method === 'key'" class="space-y-4">
+             <div>
+               <label for="conn-private-key" class="block text-sm font-medium text-text-secondary mb-1">{{ t('connections.form.privateKey') }}</label>
+               <textarea id="conn-private-key" v-model="formData.private_key" rows="4" :required="formData.auth_method === 'key' && !isEditMode"
+                         class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary font-mono text-sm"></textarea>
+             </div>
+             <div>
+               <label for="conn-passphrase" class="block text-sm font-medium text-text-secondary mb-1">{{ t('connections.form.passphrase') }} ({{ t('connections.form.optional') }})</label>
+               <input type="password" id="conn-passphrase" v-model="formData.passphrase" autocomplete="new-password"
+                      class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary" />
+             </div>
+             <div v-if="isEditMode && formData.auth_method === 'key'">
+               <small class="block text-xs text-text-secondary">{{ t('connections.form.keyUpdateNote') }}</small>
+             </div>
+           </div>
+        </div>
+
+        <!-- Advanced Options Section -->
+        <div class="space-y-4 p-4 border border-border rounded-md bg-header/30">
+           <h4 class="text-base font-semibold mb-3 pb-2 border-b border-border/50">{{ t('connections.form.sectionAdvanced', '高级选项') }}</h4>
+           <div>
+             <label for="conn-proxy" class="block text-sm font-medium text-text-secondary mb-1">{{ t('connections.form.proxy') }} ({{ t('connections.form.optional') }})</label>
+             <select id="conn-proxy" v-model="formData.proxy_id"
+                     class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-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.75rem center; background-size: 16px 12px;">
+               <option :value="null">{{ t('connections.form.noProxy') }}</option>
+               <option v-for="proxy in proxies" :key="proxy.id" :value="proxy.id">
+                 {{ proxy.name }} ({{ proxy.type }} - {{ proxy.host }}:{{ proxy.port }})
+               </option>
+             </select>
+             <div v-if="isProxyLoading" class="mt-1 text-xs text-text-secondary">{{ t('proxies.loading') }}</div>
+             <div v-if="proxyStoreError" class="mt-1 text-xs text-error">{{ t('proxies.error', { error: proxyStoreError }) }}</div>
+           </div>
+
+           <div>
+             <label class="block text-sm font-medium text-text-secondary mb-1">{{ t('connections.form.tags') }} ({{ t('connections.form.optional') }})</label>
+             <TagInput v-model="formData.tag_ids" />
+           </div>
+        </div>
+
+        <!-- Error message -->
+        <div v-if="formError || storeError" class="text-error bg-error/10 border border-error/30 rounded-md p-3 text-sm text-center font-medium">
+          {{ formError || storeError }}
+        </div>
+
+      </form> <!-- End Form -->
+
+      <!-- Form Actions -->
+      <div class="flex justify-between items-center pt-5 mt-6 border-t border-border flex-shrink-0">
+         <div class="flex flex-col items-start gap-1"> <!-- Test Area -->
+             <div class="flex items-center gap-2"> <!-- Button and Icon -->
+                 <button type="button" @click="handleTestConnection" :disabled="isLoading || testStatus === 'testing'"
+                         class="px-3 py-1.5 border border-border rounded-md text-sm font-medium text-text-secondary bg-background hover:bg-border focus:outline-none focus:ring-1 focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center transition-colors duration-150">
+                     <svg v-if="testStatus === 'testing'" class="animate-spin -ml-0.5 mr-2 h-4 w-4 text-text-secondary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                       <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                       <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                     </svg>
+                     {{ testButtonText }}
+                 </button>
+                 <div class="relative group"> <!-- Tooltip Container -->
+                     <i class="fas fa-info-circle text-text-secondary cursor-help"></i>
+                     <span class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-max max-w-xs p-2 text-xs text-white bg-gray-800 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-10 whitespace-pre-wrap">
+                         {{ t('connections.test.latencyTooltip') }}
+                     </span>
+                 </div>
+             </div>
+             <!-- Test Result -->
+             <div class="min-h-[1.2em] pl-1 text-xs">
+                 <div v-if="testStatus === 'testing'" class="text-text-secondary animate-pulse">
+                   {{ t('connections.test.testingInProgress', '测试中...') }}
+                 </div>
+                 <div v-else-if="testStatus === 'success'" class="font-medium" :style="{ color: latencyColor }">
+                   {{ testResult }}
+                 </div>
+                 <div v-else-if="testStatus === 'error'" class="text-error font-medium">
+                   {{ t('connections.test.errorPrefix', '错误:') }} {{ testResult }}
+                 </div>
+             </div>
          </div>
-       </form>
-    </div>
-  </div>
+         <div class="flex space-x-3"> <!-- Main Actions -->
+             <button type="submit" @click="handleSubmit" :disabled="isLoading || testStatus === 'testing'"
+                     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 disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out">
+               {{ submitButtonText }}
+             </button>
+             <button type="button" @click="emit('close')" :disabled="isLoading || testStatus === 'testing'"
+                     class="px-4 py-2 bg-transparent text-text-secondary border border-border rounded-md shadow-sm hover:bg-border hover:text-foreground focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out">
+               {{ t('connections.form.cancel') }}
+             </button>
+         </div>
+      </div> <!-- End Form Actions -->
+
+    </div> <!-- End Form Panel -->
+  </div> <!-- End Overlay -->
 </template>
 
-<style scoped>
-.add-connection-form-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.6); /* 加深背景 */
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1000; /* Ensure it's on top */
-}
-
-.add-connection-form {
-  background-color: var(--app-bg-color, white);
-  color: var(--text-color, #333);
-  padding: calc(var(--base-padding, 1rem) * 2);
-  border-radius: 8px;
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25); /* 调整阴影 */
-  min-width: 320px; /* 减小最小宽度 */
-  max-width: 600px; /* 调回宽度 */
-  width: 90vw;
-  border: 1px solid var(--border-color, #ccc);
-  max-height: 90vh;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  padding: calc(var(--base-padding, 1rem) * 1.5); /* 减少整体内边距 */
-}
-
-h3 {
-  margin-top: 0;
-  margin-bottom: calc(var(--base-margin, 0.5rem) * 2); /* 进一步减少标题下边距 */
-  text-align: center;
-  color: var(--text-color, #333);
-  font-family: var(--font-family-sans-serif, sans-serif);
-  font-size: 1.3em; /* 减小标题字号 */
-  font-weight: 600;
-  flex-shrink: 0;
-  padding-bottom: calc(var(--base-padding, 1rem) * 0.3); /* 进一步减少标题和内容间距 */
-}
-
-/* 移除两列布局相关样式 (.two-columns, .form-column, .full-width-error) */
-
-/* 新增：表单分段样式 */
-.form-sections {
-  flex-grow: 1; /* 占据主要空间 */
-  overflow-y: auto; /* 使 sections 内部可滚动 */
-  padding: 5px; /* 增加一点内边距防止滚动条遮挡 */
-  margin: -5px; /* 抵消内边距 */
-}
-
-.form-section {
-  border: 1px solid var(--border-color, #ddd);
-  border-radius: 5px; /* 稍小圆角 */
-  padding: calc(var(--base-padding, 1rem) * 1); /* 进一步减少 fieldset 内边距 */
-  margin-bottom: calc(var(--base-margin, 0.5rem) * 1.5); /* 进一步减少 fieldset 间距 */
-}
-
-.form-section legend {
-  padding: 0 calc(var(--base-padding, 1rem) * 0.5); /* legend 左右内边距 */
-  font-weight: 600; /* 加粗 legend */
-  color: var(--text-color, #333);
-  font-size: 1.05em; /* 减小 legend 字号 */
-  margin-left: calc(var(--base-margin, 0.5rem) * 0.8); /* 减少 legend 左边距 */
-}
-
-/* 认证部分内部可以考虑两列，如果需要的话 */
-/* .auth-section-content { display: flex; gap: 1rem; } */
-/* .auth-section-content > * { flex: 1; } */
-
-
-/* Host/Port 行样式 */
-.form-row {
-  display: flex;
-  gap: calc(var(--base-padding, 1rem) * 1); /* Host 和 Port 之间的间距 */
-  align-items: flex-start; /* 顶部对齐 */
-}
-.form-row .form-group {
-  margin-bottom: 0; /* 移除行内元素的下边距，由行处理 */
-}
-.form-group-host {
-  flex: 3; /* Host 占据更多空间 */
-}
-.form-group-port {
-  flex: 1; /* Port 占据较少空间 */
-}
-
-
-.form-group {
-  margin-bottom: calc(var(--base-margin, 0.5rem) * 1.2); /* 进一步减少组间距 */
-}
-
-label {
-  display: block;
-  margin-bottom: calc(var(--base-margin, 0.5rem) * 0.8); /* 调整标签下边距 */
-  font-weight: 500;
-  font-size: 0.9em; /* 减小标签字号 */
-  color: var(--text-color-secondary, #666);
-  font-family: var(--font-family-sans-serif, sans-serif);
-  margin-bottom: calc(var(--base-margin, 0.5rem) * 0.5); /* 减少标签下边距 */
-}
-
-input[type="text"],
-input[type="number"],
-input[type="password"],
-select,
-textarea {
-  width: 100%;
-  padding: calc(var(--base-padding, 1rem) * 0.5); /* 减少输入框内边距 */
-  border: 1px solid var(--border-color, #ccc);
-  border-radius: 3px; /* 稍小圆角 */
-  box-sizing: border-box;
-  background-color: var(--app-bg-color, white);
-  color: var(--text-color, #333);
-  font-family: var(--font-family-sans-serif, sans-serif);
-  font-size: 1em; /* 确保字体大小 */
-  transition: border-color 0.2s ease, box-shadow 0.2s ease; /* 添加过渡效果 */
-}
-
-input[type="text"]:focus,
-input[type="number"]:focus,
-input[type="password"]:focus,
-select:focus,
-textarea:focus {
-  outline: none; /* 移除默认 outline */
-  border-color: var(--button-bg-color, #007bff); /* 聚焦时使用按钮背景色 (保持) */
-  box-shadow: 0 0 5px var(--button-bg-color, #007bff); /* 恢复光晕效果并使用主题色 */
-}
-
-textarea {
-    min-height: 50px; /* 进一步减小文本域最小高度 */
-    resize: vertical;
-}
-
-select {
-    appearance: none; /* 移除默认下拉箭头 (可能需要自定义箭头) */
-    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='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); /* 添加自定义箭头 */
-    background-repeat: no-repeat;
-    background-position: right calc(var(--base-padding, 1rem) * 0.6) center;
-    background-size: 16px 12px;
-    padding-right: calc(var(--base-padding, 1rem) * 2); /* 为箭头腾出空间 */
-}
-
-
- .loading-small, .info-small {
-    font-size: 0.85em; /* 调整字号 */
-    color: var(--text-color-secondary, #666);
-    margin-top: calc(var(--base-margin, 0.5rem) * 0.5); /* 调整上边距 */
-    font-family: var(--font-family-sans-serif, sans-serif);
-}
-.error-small {
-    font-size: 0.85em; /* 调整字号 */
-    color: red;
-    margin-top: calc(var(--base-margin, 0.5rem) * 0.5); /* 调整上边距 */
-    font-family: var(--font-family-sans-serif, sans-serif);
-}
-
-
-.error-message {
-  color: red;
-  margin-bottom: var(--base-margin, 0.5rem);
-  text-align: center;
-  font-family: var(--font-family-sans-serif, sans-serif);
-  font-weight: 500; /* 加粗错误信息 */
-  padding: calc(var(--base-padding, 1rem) * 0.5); /* 添加内边距 */
-  background-color: rgba(255, 0, 0, 0.05); /* 添加淡红色背景 */
-  border: 1px solid rgba(255, 0, 0, 0.2); /* 添加边框 */
-  border-radius: 4px;
-}
-
-.form-actions {
-  display: flex;
-  justify-content: space-between; /* 改为 space-between 对齐 */
-  align-items: center; /* 垂直居中对齐 */
-  margin-top: calc(var(--base-margin, 0.5rem) * 1.5); /* 减少顶部间距 */
-  padding-top: calc(var(--base-padding, 1rem) * 0.8); /* 减少按钮上方间距 */
-  border-top: 1px solid var(--border-color, #eee);
-  flex-shrink: 0; /* 防止按钮区域压缩 */
-  /* 确保按钮区域背景色，避免滚动内容透视 */
-  background-color: var(--app-bg-color, white);
-  padding-left: calc(var(--base-padding, 1rem) * 0.5);
-  padding-right: calc(var(--base-padding, 1rem) * 0.5);
-  padding-bottom: calc(var(--base-padding, 1rem) * 0.5);
-  margin-left: calc(var(--base-padding, 1rem) * -0.5); /* 抵消容器内边距 */
-  margin-right: calc(var(--base-padding, 1rem) * -0.5);
-}
-
-.main-actions button { /* 主操作按钮（保存/取消） */
-  margin-left: calc(var(--base-margin, 0.5rem) * 0.8); /* 保持按钮间距 */
-  padding: calc(var(--base-padding, 1rem) * 0.5) calc(var(--base-padding, 1rem) * 1.2);
-  cursor: pointer;
-  border-radius: 3px; /* 稍小圆角 */
-  font-family: var(--font-family-sans-serif, sans-serif);
-  font-weight: 500; /* 调整按钮字重 */
-  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease; /* 添加过渡 */
-}
-
-.form-actions button[type="submit"] {
-  background-color: var(--button-bg-color, #007bff);
-  color: var(--button-text-color, white);
-  border: 1px solid var(--button-bg-color, #007bff); /* 添加边框 */
-}
-.form-actions button[type="submit"]:hover:not(:disabled) {
-  background-color: var(--button-hover-bg-color, #0056b3);
-  border-color: var(--button-hover-bg-color, #0056b3); /* 同步边框色 */
-}
-
-.form-actions button[type="button"] {
-  background-color: transparent; /* 取消按钮透明背景 */
-  color: var(--text-color-secondary, #666); /* 使用次要文本颜色 */
-  border: 1px solid var(--border-color, #ccc); /* 添加边框 */
-}
-.form-actions button[type="button"]:hover:not(:disabled) {
-  background-color: var(--border-color, #eee); /* 悬停时淡灰色背景 */
-  border-color: var(--text-color-secondary, #bbb); /* 悬停时边框变深 */
-  color: var(--text-color, #333); /* 悬停时文本变深 */
-}
-
-
-.form-actions button:disabled {
-  opacity: 0.5; /* 调整禁用透明度 */
-  cursor: not-allowed;
-}
-
-/* 测试按钮、图标和结果的整体区域 */
-.test-action-area {
-    display: flex;
-    flex-direction: column; /* 让结果显示在按钮下方 */
-    align-items: flex-start; /* 左对齐 */
-    gap: calc(var(--base-padding, 1rem) * 0.3); /* 按钮行和结果行之间的间距 */
-}
-
-/* 包裹测试按钮和信息图标的容器 */
-.test-button-wrapper {
-    display: flex;
-    align-items: center;
-    gap: calc(var(--base-padding, 1rem) * 0.5); /* 按钮和图标之间的间距 */
-}
-
-/* 信息图标样式 & Tooltip Container */
-.info-icon {
-    position: relative; /* Needed for absolute positioning of the tooltip text */
-    cursor: help;
-    color: var(--text-color-secondary, #666);
-    font-size: 1.1em;
-    line-height: 1;
-    user-select: none;
-    display: inline-block; /* Ensure it takes space for positioning */
-}
-
-/* Tooltip Text Style */
-.tooltip-text {
-    visibility: hidden; /* Hide by default */
-    opacity: 0;
-    position: absolute;
-    bottom: 140%; /* Position above the icon */
-    left: 50%;
-    transform: translateX(-50%);
-    background-color: rgba(0, 0, 0, 0.85); /* Slightly darker background */
-    color: white;
-    padding: 8px 12px; /* Slightly more padding */
-    border-radius: 5px; /* Slightly larger radius */
-    font-size: 0.9em; /* Slightly larger font */
-    white-space: pre-wrap; /* Allow line breaks */
-    min-width: 180px; /* Adjust width as needed */
-    max-width: 320px;
-    text-align: left;
-    z-index: 10;
-    pointer-events: none; /* Prevent tooltip from blocking hover */
-    transition: opacity 0.25s ease, visibility 0.25s ease; /* Slightly longer transition */
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Add subtle shadow */
-}
-
-/* Tooltip Arrow */
-.tooltip-text::after {
-    content: '';
-    position: absolute;
-    top: 100%; /* Position arrow at the bottom of the tooltip */
-    left: 50%;
-    transform: translateX(-50%);
-    border-width: 6px; /* Slightly larger arrow */
-    border-style: solid;
-    border-color: rgba(0, 0, 0, 0.85) transparent transparent transparent;
-}
-
-
-/* Show tooltip on hover */
-.info-icon:hover .tooltip-text {
-    visibility: visible;
-    opacity: 1;
-}
-
-/* 测试按钮样式 (从之前的 .test-result-container button 移过来) */
-.test-button-wrapper button {
-  /* 测试按钮可以有自己的样式，或者继承 .form-actions button */
-  padding: calc(var(--base-padding, 1rem) * 0.5) calc(var(--base-padding, 1rem) * 1.2);
-  cursor: pointer;
-  border-radius: 3px;
-  font-family: var(--font-family-sans-serif, sans-serif);
-  font-weight: 500;
-  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
-  /* 可以给测试按钮一个不同的边框或背景色 */
-  background-color: transparent;
-  color: var(--text-color-secondary, #666);
-  border: 1px solid var(--border-color, #ccc);
-}
-.test-result-container button:hover:not(:disabled) {
-  background-color: var(--border-color, #eee);
-  border-color: var(--text-color-secondary, #bbb);
-  color: var(--text-color, #333);
-}
-.test-result-container button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* 包裹测试状态文本的容器 */
-.test-status-wrapper {
-    min-height: 1.2em; /* 预留空间，防止布局跳动 */
-    padding-left: 2px; /* 轻微缩进，与按钮对齐 */
-}
-
-.test-status {
-  font-size: 0.9em;
-  font-weight: 500;
-  font-family: var(--font-family-sans-serif, sans-serif);
-}
-
-.test-status.loading-small {
-  color: var(--text-color-secondary, #666);
-}
-
-.test-status.success {
-  /* 颜色由 latencyColor 计算属性动态设置 */
-}
-
-.test-status.error {
-  color: var(--color-danger, #dc3545); /* 红色 */
-}
-
-/* 主操作按钮容器 */
-.main-actions {
-    display: flex; /* 保持原有按钮布局 */
-}
-
-</style>
+<!-- Scoped styles removed, now using Tailwind utility classes -->
diff --git a/packages/frontend/src/components/WorkspaceConnectionList.vue b/packages/frontend/src/components/WorkspaceConnectionList.vue
index 2f9acda..93993f4 100644
--- a/packages/frontend/src/components/WorkspaceConnectionList.vue
+++ b/packages/frontend/src/components/WorkspaceConnectionList.vue
@@ -301,28 +301,28 @@ const scrollToHighlighted = async () => {
 </script>
 
 <template>
-  <div class="workspace-connection-list">
-    <div v-if="connectionsLoading || tagsLoading" class="loading">
+  <div class="h-full flex flex-col overflow-hidden bg-background text-sm text-foreground">
+    <div v-if="connectionsLoading || tagsLoading" class="p-4 text-center text-text-secondary">
       {{ t('common.loading') }}
     </div>
-    <div v-else-if="connectionsError || tagsError" class="error">
+    <div v-else-if="connectionsError || tagsError" class="p-4 text-center text-red-600">
       {{ connectionsError || tagsError }}
     </div>
 
     <!-- 搜索和添加栏 -->
-    <div class="search-add-bar">
+    <div class="flex p-2 border-b border-border bg-header">
       <input
         type="text"
         v-model="searchTerm"
         :placeholder="t('workspaceConnectionList.searchPlaceholder')"
         ref="searchInputRef"
-        class="search-input"
+        class="flex-grow px-3 py-1.5 border border-border rounded-l-md text-sm outline-none bg-background text-foreground focus:border-primary focus:ring-2 focus:ring-primary focus:ring-opacity-50 transition-colors duration-150"
         data-focus-id="connectionListSearch"
         @keydown="handleKeyDown"
         @blur="handleBlur"
       />
       <button
-        class="add-button"
+        class="px-3 py-1.5 border border-border border-l-0 bg-background cursor-pointer rounded-r-md text-text-secondary hover:bg-border hover:text-foreground transition-colors duration-150"
         @click="handleMenuAction('add')"
         :title="t('connections.addConnection')"
       >
@@ -331,262 +331,71 @@ const scrollToHighlighted = async () => {
     </div>
 
     <!-- 连接列表区域 -->
-    <div class="connection-list-area" ref="listAreaRef">
-      <div v-if="connectionsLoading || tagsLoading" class="loading">
+    <div class="flex-grow overflow-y-auto" ref="listAreaRef">
+      <div v-if="connectionsLoading || tagsLoading" class="p-4 text-center text-text-secondary">
         {{ t('common.loading') }}
       </div>
-      <div v-else-if="connectionsError || tagsError" class="error">
+      <div v-else-if="connectionsError || tagsError" class="p-4 text-center text-red-600">
         {{ connectionsError || tagsError }}
       </div>
-      <div v-else-if="filteredAndGroupedConnections.length === 0 && connections.length > 0" class="no-results">
+      <div v-else-if="filteredAndGroupedConnections.length === 0 && connections.length > 0" class="p-4 text-center text-text-secondary">
          {{ t('workspaceConnectionList.noResults') }} "{{ searchTerm }}"
       </div>
-      <div v-else-if="connections.length === 0" class="no-connections">
+      <div v-else-if="connections.length === 0" class="p-4 text-center text-text-secondary">
          {{ t('connections.noConnections') }}
       </div>
       <div v-else>
-        <!-- 修正: 循环 filteredAndGroupedConnections -->
-        <div v-for="groupData in filteredAndGroupedConnections" :key="groupData.groupName" class="connection-group">
-          <div class="group-header" @click="toggleGroup(groupData.groupName)">
-            <i :class="['fas', expandedGroups[groupData.groupName] ? 'fa-chevron-down' : 'fa-chevron-right']"></i>
+        <!-- 循环分组 -->
+        <div v-for="groupData in filteredAndGroupedConnections" :key="groupData.groupName" class="mb-0 last:mb-0">
+          <div class="group px-3 py-2 font-semibold cursor-pointer bg-header border-t border-b border-border flex items-center text-foreground hover:bg-border transition-colors duration-150" @click="toggleGroup(groupData.groupName)">
+            <i :class="['fas', expandedGroups[groupData.groupName] ? 'fa-chevron-down' : 'fa-chevron-right', 'mr-2 w-4 text-center text-text-secondary group-hover:text-foreground transition-transform duration-200 ease-in-out']"></i>
             <span>{{ groupData.groupName }}</span>
           </div>
-          <!-- 修正: 使用 groupData.groupName 和 groupData.connections -->
-          <ul v-show="expandedGroups[groupData.groupName]" class="connection-items">
+          <!-- 连接项列表 -->
+          <ul v-show="expandedGroups[groupData.groupName]" class="list-none p-0 m-0">
             <li
               v-for="conn in groupData.connections"
               :key="conn.id"
-              class="connection-item"
-              :class="{ 'highlighted': conn.id === highlightedConnectionId }"
+              class="group py-2 pr-4 pl-6 cursor-pointer flex items-center border-b border-border whitespace-nowrap overflow-hidden text-ellipsis text-foreground hover:bg-header/50 transition-colors duration-150"
+              :class="{ 'bg-primary/10 text-primary': conn.id === highlightedConnectionId }"
               :data-conn-id="conn.id"
               @click.left="handleConnect(conn.id)"
               @contextmenu.prevent="showContextMenu($event, conn)"
             >
-              <i class="fas fa-server connection-icon"></i>
-              <span class="connection-name" :title="conn.name || conn.host">
+              <i class="fas fa-server mr-2.5 w-4 text-center text-text-secondary group-hover:text-foreground" :class="{ 'text-primary': conn.id === highlightedConnectionId }"></i>
+              <span class="overflow-hidden text-ellipsis whitespace-nowrap flex-grow" :title="conn.name || conn.host">
                 {{ conn.name || conn.host }}
               </span>
             </li>
           </ul>
         </div>
-        <!-- 移除重复的 ul 块 -->
       </div>
     </div>
 
     <!-- 右键菜单 -->
     <div
       v-if="contextMenuVisible"
-      class="context-menu"
+      class="fixed bg-background border border-border shadow-lg rounded-md py-1 z-50 min-w-[160px]"
       :style="{ top: `${contextMenuPosition.y}px`, left: `${contextMenuPosition.x}px` }"
       @click.stop
     >
       <!-- 防止点击菜单内部关闭菜单 -->
-      <ul>
-        <li @click="handleMenuAction('add')"><i class="fas fa-plus"></i> {{ t('connections.addConnection') }}</li>
-        <li v-if="contextTargetConnection" @click="handleMenuAction('edit')"><i class="fas fa-edit"></i> {{ t('connections.actions.edit') }}</li>
-        <li v-if="contextTargetConnection" @click="handleMenuAction('delete')"><i class="fas fa-trash-alt"></i> {{ t('connections.actions.delete') }}</li>
+      <ul class="list-none p-0 m-0">
+        <li class="group px-4 py-1.5 cursor-pointer flex items-center text-foreground hover:bg-header text-sm transition-colors duration-150" @click="handleMenuAction('add')">
+            <i class="fas fa-plus mr-3 w-4 text-center text-text-secondary group-hover:text-foreground"></i>
+            <span>{{ t('connections.addConnection') }}</span>
+        </li>
+        <li v-if="contextTargetConnection" class="group px-4 py-1.5 cursor-pointer flex items-center text-foreground hover:bg-header text-sm transition-colors duration-150" @click="handleMenuAction('edit')">
+            <i class="fas fa-edit mr-3 w-4 text-center text-text-secondary group-hover:text-foreground"></i>
+            <span>{{ t('connections.actions.edit') }}</span>
+        </li>
+        <li v-if="contextTargetConnection" class="group px-4 py-1.5 cursor-pointer flex items-center text-red-600 hover:bg-red-500/10 text-sm transition-colors duration-150" @click="handleMenuAction('delete')">
+            <i class="fas fa-trash-alt mr-3 w-4 text-center text-red-500 group-hover:text-red-600"></i>
+            <span>{{ t('connections.actions.delete') }}</span>
+        </li>
       </ul>
     </div>
   </div>
 </template>
 
-<style scoped>
-.workspace-connection-list {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden; /* 防止内部滚动条影响布局 */
-  background-color: var(--app-bg-color); /* Use theme variable */
-  font-size: 0.9em;
-}
-
-.search-add-bar {
-  display: flex;
-  padding: var(--base-margin); /* Use theme variable */
-  border-bottom: 1px solid var(--border-color); /* Use theme variable */
-  background-color: var(--header-bg-color); /* Use theme variable */
-}
-
-.search-input {
-  min-width: 8px;
-  flex-grow: 1;
-  padding: 0.4rem 0.6rem;
-  border: 1px solid var(--border-color); /* Use theme variable */
-  border-radius: 4px 0 0 4px; /* 左侧圆角 */
-  font-size: 0.9em;
-  outline: none;
-  background-color: var(--app-bg-color); /* Use theme variable */
-  color: var(--text-color); /* Use theme variable */
-}
-.search-input:focus {
-  border-color: var(--button-bg-color); /* Use theme variable */
-  box-shadow: 0 0 5px var(--button-bg-color, #007bff); /* Use theme variable for glow */
-}
-
-.add-button {
-  padding: 0.4rem 0.8rem;
-  border: 1px solid var(--border-color); /* Use theme variable */
-  border-left: none; /* 移除左边框，与输入框合并 */
-  background-color: var(--app-bg-color); /* Use theme variable */
-  cursor: pointer;
-  border-radius: 0 4px 4px 0; /* 右侧圆角 */
-  color: var(--text-color); /* Use theme variable */
-}
-.add-button:hover {
-  background-color: var(--header-bg-color); /* Use theme variable */
-}
-.add-button i {
-  font-size: 1em; /* 图标大小 */
-}
-
-.connection-list-area {
-  flex-grow: 1; /* 占据剩余空间 */
-  overflow-y: auto; /* 列表内容滚动 */
-}
-
-
-.loading, .error, .no-connections, .no-results {
-  padding: var(--base-padding); /* Use theme variable */
-  text-align: center;
-  color: var(--text-color-secondary); /* Use theme variable */
-}
-.error {
-    color: #dc3545;
-}
-.no-connections button {
-    margin-top: 0.5rem;
-    padding: 0.3rem 0.6rem;
-}
-
-.add-connection-button {
-    display: block;
-    width: calc(100% - 2 * var(--base-margin)); /* Use theme variable */
-    margin: var(--base-margin); /* Use theme variable */
-    padding: var(--base-margin); /* Use theme variable */
-    text-align: left;
-    background-color: var(--header-bg-color); /* Use theme variable */
-    border: 1px solid var(--border-color); /* Use theme variable */
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 0.9em;
-    color: var(--text-color); /* Use theme variable */
-}
-.add-connection-button:hover {
-    background-color: var(--header-bg-color); /* Use theme variable (or darker variant) */
-    filter: brightness(0.95); /* Example: slightly darken */
-}
-.add-connection-button i {
-    margin-right: 0.5rem;
-}
-
-
-.connection-group {
-  margin-bottom: 0.5rem;
-}
-
-.group-header {
-  padding: 0.4rem 0.8rem;
-  font-weight: bold;
-  cursor: pointer;
-  background-color: var(--header-bg-color); /* Use theme variable */
-  border-top: 1px solid var(--border-color); /* Use theme variable */
-  border-bottom: 1px solid var(--border-color); /* Use theme variable */
-  display: flex;
-  align-items: center;
-  color: var(--text-color); /* Use theme variable */
-}
-.group-header:hover {
-    background-color: var(--header-bg-color); /* Use theme variable */
-    filter: brightness(0.95); /* Example: slightly darken on hover */
-}
-
-.group-header i {
-  margin-right: 0.5rem;
-  width: 1em; /* Ensure icon takes space */
-  text-align: center;
-  transition: transform 0.2s ease-in-out;
-}
-
-
-
-.connection-items {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.connection-item {
-  padding: 0.5rem 1rem 0.5rem 1.5rem; /* Indent items */
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid var(--border-color); /* Use theme variable */
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: var(--text-color); /* Use theme variable */
-}
-
-.connection-item:hover {
-  background-color: var(--header-bg-color); /* Use theme variable */
-}
-
-/* 新增高亮样式 */
-.connection-item.highlighted {
-  background-color: var(--button-hover-bg-color); /* Use theme variable */
-  color: var(--button-text-color); /* Use theme variable */
-}
-.connection-item.highlighted .connection-icon {
-    color: var(--button-text-color); /* Use theme variable */
-}
-
-
-.connection-icon {
-  margin-right: 0.6rem;
-  color: var(--text-color-secondary); /* Use theme variable */
-  width: 1em;
-  text-align: center;
-}
-
-.connection-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex-grow: 1;
-}
-
-/* Context Menu Styles */
-.context-menu {
-  position: fixed;
-  background-color: var(--app-bg-color); /* Use theme variable */
-  border: 1px solid var(--border-color); /* Use theme variable */
-  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15); /* Keep shadow or define variable */
-  border-radius: 4px;
-  padding: var(--base-margin) 0; /* Use theme variable */
-  z-index: 1001; /* Above the list */
-  min-width: 150px;
-}
-
-.context-menu ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.context-menu li {
-  padding: 0.5rem 1rem;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  color: var(--text-color); /* Use theme variable */
-}
-.context-menu li:hover {
-  background-color: var(--header-bg-color); /* Use theme variable */
-}
-.context-menu li i {
-    margin-right: 0.75rem;
-    width: 1em;
-    text-align: center;
-    color: var(--text-color); /* Use theme variable */
-}
-</style>
+<!-- Scoped styles removed, now using Tailwind utility classes -->