From e8d3249e04cdca35a7c9c8acba5c390ffe7fc90e Mon Sep 17 00:00:00 2001
From: Baobhan Sith <80159437+Heavrnl@users.noreply.github.com>
Date: Thu, 17 Apr 2025 23:03:08 +0800
Subject: [PATCH] update

---
 .../frontend/src/components/FileManager.vue   | 154 +++++++++++++++---
 .../src/components/TerminalTabBar.vue         | 123 --------------
 .../components/WorkspaceConnectionList.vue    |   1 +
 3 files changed, 129 insertions(+), 149 deletions(-)

diff --git a/packages/frontend/src/components/FileManager.vue b/packages/frontend/src/components/FileManager.vue
index b1a7b38..7d9dd17 100644
--- a/packages/frontend/src/components/FileManager.vue
+++ b/packages/frontend/src/components/FileManager.vue
@@ -707,18 +707,18 @@ const cancelPathEdit = () => {
             @keyup.esc="cancelPathEdit"
           />
           <!-- 恢复使用 props.sftpManager.isLoading 和 props.wsDeps.isConnected.value -->
-          <button @click.stop="loadDirectory(currentPath)" :disabled="isLoading || !props.wsDeps.isConnected.value || isEditingPath" :title="t('fileManager.actions.refresh')">🔄</button>
+          <button @click.stop="loadDirectory(currentPath)" :disabled="isLoading || !props.wsDeps.isConnected.value || isEditingPath" :title="t('fileManager.actions.refresh')"><i class="fas fa-sync-alt"></i></button>
           <!-- 恢复使用 props.sftpManager.isLoading 和 props.wsDeps.isConnected.value -->
-          <button @click.stop="handleItemClick($event, { filename: '..', longname: '..', attrs: { isDirectory: true, isFile: false, isSymbolicLink: false, size: 0, uid: 0, gid: 0, mode: 0, atime: 0, mtime: 0 } })" :disabled="isLoading || !props.wsDeps.isConnected.value || currentPath === '/' || isEditingPath" :title="t('fileManager.actions.parentDirectory')">⬆️</button>
+          <button @click.stop="handleItemClick($event, { filename: '..', longname: '..', attrs: { isDirectory: true, isFile: false, isSymbolicLink: false, size: 0, uid: 0, gid: 0, mode: 0, atime: 0, mtime: 0 } })" :disabled="isLoading || !props.wsDeps.isConnected.value || currentPath === '/' || isEditingPath" :title="t('fileManager.actions.parentDirectory')"><i class="fas fa-arrow-up"></i></button>
         </div>
         <div class="actions-bar">
              <input type="file" ref="fileInputRef" @change="handleFileSelected" multiple style="display: none;" />
              <!-- 恢复使用 props.sftpManager.isLoading 和 props.wsDeps.isConnected.value -->
-             <button @click="triggerFileUpload" :disabled="isLoading || !props.wsDeps.isConnected.value" :title="t('fileManager.actions.uploadFile')">📤 {{ t('fileManager.actions.upload') }}</button>
+             <button @click="triggerFileUpload" :disabled="isLoading || !props.wsDeps.isConnected.value" :title="t('fileManager.actions.uploadFile')"><i class="fas fa-upload"></i> {{ t('fileManager.actions.upload') }}</button>
              <!-- 恢复使用 props.sftpManager.isLoading 和 props.wsDeps.isConnected.value -->
-              <button @click="handleNewFolderContextMenuClick" :disabled="isLoading || !props.wsDeps.isConnected.value" :title="t('fileManager.actions.newFolder')">➕ {{ t('fileManager.actions.newFolder') }}</button>
+              <button @click="handleNewFolderContextMenuClick" :disabled="isLoading || !props.wsDeps.isConnected.value" :title="t('fileManager.actions.newFolder')"><i class="fas fa-folder-plus"></i> {{ t('fileManager.actions.newFolder') }}</button>
               <!-- 恢复使用 props.sftpManager.isLoading 和 props.wsDeps.isConnected.value -->
-              <button @click="handleNewFileContextMenuClick" :disabled="isLoading || !props.wsDeps.isConnected.value" :title="t('fileManager.actions.newFile')">📄 {{ t('fileManager.actions.newFile') }}</button>
+              <button @click="handleNewFileContextMenuClick" :disabled="isLoading || !props.wsDeps.isConnected.value" :title="t('fileManager.actions.newFile')"><i class="far fa-file-alt"></i> {{ t('fileManager.actions.newFile') }}</button>
          </div>
      </div>
 
@@ -781,7 +781,7 @@ const cancelPathEdit = () => {
                 class="clickable"
                 @click="handleItemClick($event, { filename: '..', longname: '..', attrs: { isDirectory: true, isFile: false, isSymbolicLink: false, size: 0, uid: 0, gid: 0, mode: 0, atime: 0, mtime: 0 } })"
                 @contextmenu.prevent.stop="showContextMenu($event, { filename: '..', longname: '..', attrs: { isDirectory: true, isFile: false, isSymbolicLink: false, size: 0, uid: 0, gid: 0, mode: 0, atime: 0, mtime: 0 } })" >
-              <td>📁</td>
+              <td><i class="fas fa-level-up-alt file-icon"></i></td>
               <td>..</td>
               <td></td><td></td><td></td>
             </tr>
@@ -790,7 +790,9 @@ const cancelPathEdit = () => {
                 @click="handleItemClick($event, item)"
                 :class="{ clickable: item.attrs.isDirectory || item.attrs.isFile, selected: selectedItems.has(item.filename) }"
                 @contextmenu.prevent.stop="showContextMenu($event, item)">
-              <td>{{ item.attrs.isDirectory ? '📁' : (item.attrs.isSymbolicLink ? '🔗' : '📄') }}</td>
+              <td>
+                <i :class="['file-icon', item.attrs.isDirectory ? 'fas fa-folder' : (item.attrs.isSymbolicLink ? 'fas fa-link' : 'far fa-file')]"></i>
+              </td>
               <td>{{ item.filename }}</td>
               <td>{{ item.attrs.isFile ? formatSize(item.attrs.size) : '' }}</td>
               <td>{{ formatMode(item.attrs.mode) }}</td>
@@ -844,40 +846,132 @@ const cancelPathEdit = () => {
 </template>
 
 <style scoped>
-/* Styles remain the same, but add .selected style */
+/* Enhanced Styles */
 .file-manager { height: 100%; display: flex; flex-direction: column; font-family: var(--font-family-sans-serif); font-size: 0.9rem; overflow: hidden; background-color: var(--app-bg-color); color: var(--text-color); }
-.toolbar { display: flex; justify-content: space-between; align-items: center; padding: var(--base-margin); background-color: var(--header-bg-color); border-bottom: 1px solid var(--border-color); flex-wrap: wrap; }
-.path-bar { white-space: nowrap; overflow-x: auto; flex-grow: 1; margin-right: var(--base-padding); padding: 0.2rem 0.4rem; border-radius: 3px; } /* Remove cursor:text and hover */
+
+/* Toolbar美化 */
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: calc(var(--base-padding, 1rem) * 0.5) var(--base-padding, 1rem); /* 调整内边距 */
+  background-color: var(--header-bg-color);
+  border-bottom: 1px solid var(--border-color);
+  flex-wrap: wrap; /* 允许换行 */
+  gap: var(--base-margin, 0.5rem); /* 添加元素间距 */
+}
+
+/* Path Bar美化 */
+.path-bar {
+  display: flex; /* 使用flex布局 */
+  align-items: center; /* 垂直居中 */
+  background-color: var(--app-bg-color); /* 使用主背景色 */
+  border: 1px solid var(--border-color); /* 添加边框 */
+  border-radius: 4px; /* 圆角 */
+  padding: 0.2rem 0.4rem; /* 内边距 */
+  flex-grow: 1; /* 占据可用空间 */
+  overflow: hidden; /* 防止内部溢出 */
+  min-width: 200px; /* 最小宽度 */
+}
+.path-bar span { /* 路径文本容器 */
+    white-space: nowrap;
+    overflow-x: auto; /* 允许路径横向滚动 */
+    padding-right: 0.5rem; /* 给滚动条留空间 */
+    color: var(--text-color-secondary); /* 次要文本颜色 */
+}
 .path-bar strong.editable-path {
-    font-weight: normal;
-    background-color: var(--header-bg-color); /* Use header bg */
-    filter: brightness(0.95); /* Slightly darken */
+    font-weight: 500; /* 稍加粗 */
+    color: var(--link-color); /* 使用链接颜色 */
     padding: 0.1rem 0.4rem;
     border-radius: 3px;
     margin-left: 0.3rem;
-    cursor: text; /* Add cursor only to the clickable part */
+    cursor: text;
+    transition: background-color 0.2s ease;
 }
 .path-bar strong.editable-path:hover {
-    background-color: var(--header-bg-color); /* Use header bg */
-    filter: brightness(0.9); /* Darker hover */
+    background-color: rgba(0, 0, 0, 0.05); /* 悬停背景 */
+}
+.path-bar strong.editable-path.disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
 }
 .path-input {
     font-family: inherit;
     font-size: inherit;
-    border: 1px solid var(--border-color); /* Use theme variable */
-    background-color: var(--app-bg-color); /* Use theme variable */
-    color: var(--text-color); /* Use theme variable */
+    border: none; /* 移除边框，依赖外部容器 */
+    background-color: transparent; /* 透明背景 */
+    color: var(--text-color);
     padding: 0.1rem 0.4rem;
-    border-radius: 3px;
-    width: calc(100% - 70px); /* Adjust width based on button sizes */
-    box-sizing: border-box;
+    flex-grow: 1; /* 占据空间 */
+    outline: none; /* 移除默认outline */
+    min-width: 100px; /* 最小宽度 */
+}
+/* 路径栏按钮美化 */
+.path-bar button {
+    margin-left: 0.4rem; /* 调整按钮间距 */
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 1.1em;
+    padding: 0.2rem 0.4rem; /* 调整内边距 */
+    vertical-align: middle;
+    color: var(--text-color-secondary); /* 次要颜色 */
+    border-radius: 3px;
+    transition: background-color 0.2s ease, color 0.2s ease;
+}
+.path-bar button:hover:not(:disabled) {
+    background-color: rgba(0, 0, 0, 0.08); /* 悬停背景 */
+    color: var(--text-color); /* 悬停时主颜色 */
 }
-.path-bar button { margin-left: 0.5rem; background: none; border: none; cursor: pointer; font-size: 1.1em; padding: 0.1rem 0.3rem; vertical-align: middle; }
 .path-bar button:disabled { opacity: 0.5; cursor: not-allowed; }
-.actions-bar button { padding: 0.3rem 0.6rem; cursor: pointer; margin-left: 0.5rem; }
+
+/* Actions Bar美化 */
+.actions-bar {
+    display: flex;
+    align-items: center;
+    gap: var(--base-margin, 0.5rem); /* 按钮间距 */
+    flex-shrink: 0; /* 防止被压缩 */
+}
+.actions-bar button {
+    padding: 0.4rem 0.8rem; /* 调整按钮内边距 */
+    cursor: pointer;
+    border: 1px solid var(--border-color); /* 添加边框 */
+    border-radius: 4px;
+    background-color: var(--app-bg-color); /* 按钮背景 */
+    color: var(--text-color); /* 按钮文字颜色 */
+    font-size: 0.9em;
+    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+    display: flex; /* 用于图标和文字对齐 */
+    align-items: center;
+    gap: 0.3rem; /* 图标和文字间距 */
+}
+.actions-bar button:hover:not(:disabled) {
+    background-color: var(--header-bg-color); /* 悬停背景 */
+    border-color: var(--button-bg-color); /* 悬停时边框变色 */
+    color: var(--button-bg-color); /* 悬停时文字变色 */
+}
 .actions-bar button:disabled { opacity: 0.5; cursor: not-allowed; }
-.upload-popup { position: fixed; bottom: var(--base-padding); right: var(--base-padding); background-color: var(--app-bg-color); border: 1px solid var(--border-color); border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); padding: 0.8rem; max-width: 300px; max-height: 200px; overflow-y: auto; z-index: 1001; color: var(--text-color); } /* Use theme variables */
-.upload-popup h4 { margin: 0 0 var(--base-margin) 0; font-size: 0.9em; border-bottom: 1px solid var(--border-color); padding-bottom: 0.3rem; } /* Use theme variables */
+/* 明确设置图标颜色 */
+.actions-bar button i {
+    font-size: 1em;
+    color: var(--button-bg-color); /* 默认状态图标颜色改为按钮背景色 */
+    transition: color 0.2s ease;
+}
+.actions-bar button:hover:not(:disabled) i {
+    /* 悬停时可以保持按钮背景色，或者根据需要调整 */
+    color: var(--button-hover-bg-color, var(--button-bg-color)); /* 悬停时使用按钮悬停色 */
+}
+.path-bar button i {
+    color: var(--button-bg-color); /* 默认状态图标颜色改为按钮背景色 */
+    transition: color 0.2s ease;
+}
+.path-bar button:hover:not(:disabled) i {
+    color: var(--button-hover-bg-color, var(--button-bg-color)); /* 悬停时使用按钮悬停色 */
+}
+
+
+.upload-popup { position: fixed; bottom: var(--base-padding); right: var(--base-padding); background-color: var(--app-bg-color); border: 1px solid var(--border-color); border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); padding: 0.8rem; max-width: 300px; max-height: 200px; overflow-y: auto; z-index: 1001; color: var(--text-color); }
+.upload-popup h4 { margin: 0 0 var(--base-margin) 0; font-size: 0.9em; border-bottom: 1px solid var(--border-color); padding-bottom: 0.3rem; }
 .upload-popup ul { list-style: none; padding: 0; margin: 0; }
 .upload-popup li { margin-bottom: var(--base-margin); font-size: 0.85em; display: flex; align-items: center; flex-wrap: wrap; } /* Use theme variable */
 .upload-popup progress { margin: 0 0.5rem; width: 80px; height: 0.8em; }
@@ -948,6 +1042,14 @@ td:first-child {
   padding-left: 1rem; /* More padding for icon */
   padding-right: 0.5rem;
 }
+td:first-child .file-icon { /* 文件类型图标颜色 */
+    color: var(--button-bg-color); /* 默认使用按钮背景色 */
+    transition: color 0.15s ease; /* 添加过渡 */
+}
+tbody tr.selected td:first-child .file-icon { /* 选中行图标颜色 */
+    color: var(--button-text-color); /* 选中时使用按钮文字颜色 */
+}
+
 tbody tr {
     transition: background-color 0.15s ease; /* Smooth hover transition */
 }
diff --git a/packages/frontend/src/components/TerminalTabBar.vue b/packages/frontend/src/components/TerminalTabBar.vue
index b9e18f2..58b5887 100644
--- a/packages/frontend/src/components/TerminalTabBar.vue
+++ b/packages/frontend/src/components/TerminalTabBar.vue
@@ -48,7 +48,6 @@ const closeSession = (event: MouseEvent, sessionId: string) => {
 // --- 本地状态 ---
 const sessionStore = useSessionStore(); // Session store 保持不变
 const showConnectionListPopup = ref(false); // 连接列表弹出状态
-const showLayoutMenu = ref(false); // 新增：布局菜单弹出状态
 
 const togglePopup = () => {
   showConnectionListPopup.value = !showConnectionListPopup.value;
@@ -69,42 +68,12 @@ const handleRequestAddFromPopup = () => {
   emit('request-add-connection-from-popup'); // 向上发出事件
 };
 
-// --- 新增：布局菜单处理 ---
-const toggleLayoutMenu = () => {
-  console.log('Toggling layout menu visibility. Current state:', showLayoutMenu.value); // 添加日志
-  showLayoutMenu.value = !showLayoutMenu.value;
-  console.log('New state:', showLayoutMenu.value); // 添加日志
-};
-
 // 新增：处理打开布局配置器的事件
 const openLayoutConfigurator = () => {
   console.log('[TabBar] Emitting open-layout-configurator event');
   emit('open-layout-configurator'); // 发出事件
 };
 
-// --- 旧的布局菜单相关代码 (暂时保留，但功能已失效) ---
-// 定义面板名称到显示文本的映射 (保留用于旧菜单显示)
-const paneLabels: Record<PaneName, string> = {
-  connections: t('layout.pane.connections'),
-  terminal: t('layout.pane.terminal'),
-  commandBar: t('layout.pane.commandBar'),
-  fileManager: t('layout.pane.fileManager'),
-  editor: t('layout.pane.editor'),
-  statusMonitor: t('layout.pane.statusMonitor'),
-  commandHistory: t('layout.pane.commandHistory', '命令历史'),
-  quickCommands: t('layout.pane.quickCommands', '快捷指令'),
-};
-
-// 获取所有理论上的面板名称 (用于旧菜单显示)
-const allPanesForMenu = computed(() => layoutStore.allPossiblePanes); // 使用新的 allPossiblePanes
-
-// 处理旧菜单项点击 (功能已失效，仅打印日志)
-const handleTogglePane = (paneName: PaneName) => {
-  console.warn(`[TabBar] 旧的 handleTogglePane 被调用，但 togglePaneVisibility 已移除。面板: ${paneName}`);
-  // layoutStore.togglePaneVisibility(paneName); // 此方法已不存在
-  // showLayoutMenu.value = false;
-};
-
 </script>
 
 <template>
@@ -137,23 +106,6 @@ const handleTogglePane = (paneName: PaneName) => {
       <button class="layout-config-button" @click="openLayoutConfigurator" title="配置工作区布局">
         <i class="fas fa-th-large"></i> <!-- 网格布局图标 -->
       </button>
-      <!-- 保留旧的布局菜单按钮 -->
-      <div class="layout-menu-container">
-        <button class="layout-menu-button" @click="toggleLayoutMenu" title="切换面板可见性 (旧)">
-          <i class="fas fa-bars"></i> <!-- 汉堡菜单图标 -->
-        </button>
-        <!-- 旧布局菜单下拉列表 (显示所有面板，但勾选状态和点击功能失效) -->
-          <div v-if="showLayoutMenu" class="layout-menu-dropdown">
-            <ul>
-              <!-- 使用 allPanesForMenu 迭代 -->
-              <li v-for="pane in allPanesForMenu" :key="pane" @click="handleTogglePane(pane)">
-                <!-- 移除基于 paneVisibility 的勾选 -->
-                <span class="checkmark"></span> <!-- 占位符保持对齐 -->
-                {{ paneLabels[pane] || pane }}
-              </li>
-            </ul>
-          </div>
-        </div>
       </div>
     <!-- 连接列表弹出窗口 (保持不变) -->
     <div v-if="showConnectionListPopup" class="connection-list-popup" @click.self="togglePopup">
@@ -410,79 +362,4 @@ const handleTogglePane = (paneName: PaneName) => {
   background-color: var(--app-bg-color); /* 确保列表背景 */
 }
 
-/* 调整：旧布局菜单容器样式 */
-.layout-menu-container {
-  position: relative; /* 用于定位下拉菜单 */
-  display: flex; /* 确保按钮垂直居中 */
-  align-items: center;
-  height: 100%;
-  /* margin-left: auto; */ /* 移除：由父容器 .action-buttons-container 控制 */
-  border-left: 1px solid var(--border-color, #bdbdbd); /* 使用变量 */
-  flex-shrink: 0; /* 保持：防止被压缩 */
-}
-
-/* 调整：旧布局菜单按钮样式 */
-.layout-menu-button {
-  background: none;
-  border: none;
-  /* border-left: 1px solid var(--border-color, #bdbdbd); */ /* 移除按钮左侧分隔线 */
-  padding: 0 0.8rem;
-  cursor: pointer;
-  font-size: 1.1em;
-  color: var(--text-color-secondary, #616161); /* 使用变量 */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  flex-shrink: 0;
-}
-.layout-menu-button:hover {
-  background-color: var(--header-bg-color, #d0d0d0); /* 使用变量 */
-}
-.layout-menu-button i {
-  line-height: 1;
-}
-
-.layout-menu-dropdown {
-  position: absolute; /* 恢复绝对定位 */
-  top: 100%; /* 定位在按钮下方 */
-  right: 0; /* 对齐到右侧 */
-  background-color: var(--app-bg-color, white); /* 使用变量 */
-  /* min-height: 20px; */ /* 移除临时调试最小高度 */
-  border: 1px solid var(--border-color, #ccc); /* 使用变量 */
-  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
-  z-index: 9999; /* 保持高 z-index */
-  min-width: 150px; /* 最小宽度 */
-  padding: 5px 0;
-  border-radius: 4px;
-}
-
-.layout-menu-dropdown ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.layout-menu-dropdown li {
-  padding: 8px 15px;
-  cursor: pointer;
-  white-space: nowrap;
-  display: flex;
-  align-items: center;
-  color: var(--text-color); /* 使用变量 */
-}
-
-.layout-menu-dropdown li:hover {
-  background-color: var(--header-bg-color, #f0f0f0); /* 使用变量 */
-}
-
-.layout-menu-dropdown .checkmark {
-  display: inline-block;
-  width: 20px; /* 固定宽度以便对齐 */
-  text-align: center;
-  margin-right: 5px;
-  font-weight: bold;
-  color: #28a745; /* 勾选标记颜色 */
-}
-
 </style>
diff --git a/packages/frontend/src/components/WorkspaceConnectionList.vue b/packages/frontend/src/components/WorkspaceConnectionList.vue
index 72b9f31..22ed029 100644
--- a/packages/frontend/src/components/WorkspaceConnectionList.vue
+++ b/packages/frontend/src/components/WorkspaceConnectionList.vue
@@ -282,6 +282,7 @@ const handleOpenInNewTab = (connectionId: number) => {
 }
 
 .search-input {
+  min-width: 8px;
   flex-grow: 1;
   padding: 0.4rem 0.6rem;
   border: 1px solid var(--border-color); /* Use theme variable */