update

package.json

@@ -32,6 +32,7 @@
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.4",
     "@types/qrcode": "^1.5.5",
     "@types/speakeasy": "^2.0.10",
     "qrcode": "^1.5.4",

packages/frontend/package.json

@@ -25,8 +25,12 @@
     "xterm-addon-web-links": "^0.9.0"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.4",
     "@types/splitpanes": "^2.2.6",
     "@vitejs/plugin-vue": "^4.2.0",
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^4.1.4",
     "typescript": "^5.0.0",
     "vite": "^4.4.0",
     "vue-tsc": "^1.8.0"

packages/frontend/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+    autoprefixer: {},
+  },
+}

packages/frontend/src/components/CommandInputBar.vue

@@ -116,14 +116,21 @@ const focusSearchInput = (): boolean => {
 defineExpose({ focusCommandInput, focusSearchInput });
 
 // --- Register/Unregister Focus Actions ---
+let unregisterCommandInputFocus: (() => void) | null = null;
+let unregisterTerminalSearchFocus: (() => void) | null = null;
+
 onMounted(() => {
-  focusSwitcherStore.registerFocusAction('commandInput', focusCommandInput);
-  focusSwitcherStore.registerFocusAction('terminalSearch', focusSearchInput);
+  unregisterCommandInputFocus = focusSwitcherStore.registerFocusAction('commandInput', focusCommandInput);
+  unregisterTerminalSearchFocus = focusSwitcherStore.registerFocusAction('terminalSearch', focusSearchInput);
 });
 
 onBeforeUnmount(() => {
-  focusSwitcherStore.unregisterFocusAction('commandInput');
-  focusSwitcherStore.unregisterFocusAction('terminalSearch');
+  if (unregisterCommandInputFocus) {
+    unregisterCommandInputFocus();
+  }
+  if (unregisterTerminalSearchFocus) {
+    unregisterTerminalSearchFocus();
+  }
 });
 </script>
 

packages/frontend/src/style.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 /* 全局样式和 CSS 变量定义 */
 :root {
   /* 基础颜色 */
@@ -21,6 +25,8 @@
   --split-line-hover-color: var(--border-color); /* 分割线悬停颜色 */
   --input-focus-border-color: var(--link-active-color); /* 输入框聚焦边框颜色 */
   --input-focus-glow: var(--link-active-color); /* 输入框聚焦光晕值 */
+  --ssh-tab-active: none；/* ssh标签激活状态颜色 */
+  --ssh-tab-background: none；/* ssh标签背景颜色 */
 
   /* 字体 */
   --font-family-sans-serif: sans-serif; /* 默认字体 */

packages/frontend/src/views/CommandHistoryView.vue

@@ -66,6 +66,7 @@ const hoveredItemId = ref<number | null>(null);
 const selectedIndex = ref<number>(-1); // -1 表示没有选中
 const historyListRef = ref<HTMLUListElement | null>(null); // Ref for the history list UL
 const searchInputRef = ref<HTMLInputElement | null>(null); // +++ Ref for the search input +++
+let unregisterFocus: (() => void) | null = null; // +++ 保存注销函数 +++
 
 // --- 从 Store 获取状态和 Getter ---
 const searchTerm = computed(() => commandHistoryStore.searchTerm);
@@ -89,10 +90,14 @@ onMounted(() => {
 
 // +++ 注册/注销自定义聚焦动作 +++
 onMounted(() => {
-  focusSwitcherStore.registerFocusAction('commandHistorySearch', focusSearchInput);
+  // +++ 保存返回的注销函数 +++
+  unregisterFocus = focusSwitcherStore.registerFocusAction('commandHistorySearch', focusSearchInput);
 });
 onBeforeUnmount(() => {
-  focusSwitcherStore.unregisterFocusAction('commandHistorySearch');
+  // +++ 调用保存的注销函数 +++
+  if (unregisterFocus) {
+    unregisterFocus();
+  }
 });
 
 // --- 事件处理 ---

packages/frontend/src/views/QuickCommandsView.vue

@@ -82,6 +82,7 @@ const commandToEdit = ref<QuickCommandFE | null>(null);
 const selectedIndex = ref<number>(-1); // -1 表示没有选中
 const commandListRef = ref<HTMLUListElement | null>(null); // Ref for the command list UL
 const searchInputRef = ref<HTMLInputElement | null>(null); // +++ Ref for the search input +++
+let unregisterFocus: (() => void) | null = null; // +++ 保存注销函数 +++
 
 // --- 从 Store 获取状态和 Getter ---
 const searchTerm = computed(() => quickCommandsStore.searchTerm);
@@ -101,10 +102,14 @@ onMounted(() => {
 
 // +++ 注册/注销自定义聚焦动作 +++
 onMounted(() => {
-  focusSwitcherStore.registerFocusAction('quickCommandsSearch', focusSearchInput);
+  // +++ 保存返回的注销函数 +++
+  unregisterFocus = focusSwitcherStore.registerFocusAction('quickCommandsSearch', focusSearchInput);
 });
 onBeforeUnmount(() => {
-  focusSwitcherStore.unregisterFocusAction('quickCommandsSearch');
+  // +++ 调用保存的注销函数 +++
+  if (unregisterFocus) {
+    unregisterFocus();
+  }
 });
 
 // --- 事件处理 ---

packages/frontend/tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./index.html",
+    "./src/**/*.{vue,js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}