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

---
 packages/frontend/src/App.vue   | 130 +++++---------------------------
 packages/frontend/src/style.css |  31 ++++++++
 2 files changed, 51 insertions(+), 110 deletions(-)

diff --git a/packages/frontend/src/App.vue b/packages/frontend/src/App.vue
index ff1be25..8e3438c 100644
--- a/packages/frontend/src/App.vue
+++ b/packages/frontend/src/App.vue
@@ -242,36 +242,30 @@ const isElementVisibleAndFocusable = (element: HTMLElement): boolean => {
 </script>
 
 <template>
-    <div class="bg-gray-100 flex items-center justify-center min-h-screen">
-    <div class="bg-white rounded-lg shadow-lg p-8 max-w-sm w-full">
-      <h2 class="text-2xl font-bold mb-4 text-gray-800">欢迎使用 Tailwind CSS (Vite + Vue)</h2>
-      <p class="text-gray-600 mb-6">这是一个使用 Tailwind CSS 构建的简单卡片示例。</p>
-      <div class="flex justify-end">
-        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
-          了解更多
-        </button>
-      </div>
-    </div>
-  </div>
+  
   <div id="app-container">
     <!-- *** 修改 v-if 条件以使用 isHeaderVisible *** -->
-    <header v-if="!isWorkspaceRoute || isHeaderVisible">
-      <nav ref="navRef">
-        <div class="nav-left"> <!-- Group left-aligned links -->
+    <!-- Header with Tailwind classes using theme variables -->
+    <header v-if="!isWorkspaceRoute || isHeaderVisible" class="sticky top-0 z-10 flex items-center h-14 px-6 bg-header border-b border-default shadow-sm">
+      <!-- Nav with Tailwind classes -->
+      <nav ref="navRef" class="flex items-center justify-between w-full relative"> <!-- Added relative positioning for underline -->
+        <!-- Left navigation links with Tailwind classes using theme variables -->
+        <div class="flex items-center space-x-1">
             <!-- <RouterLink to="/">{{ t('nav.dashboard') }}</RouterLink> --> <!-- 隐藏仪表盘链接 -->
-            <RouterLink to="/workspace">{{ t('nav.terminal') }}</RouterLink>
-            <RouterLink to="/proxies">{{ t('nav.proxies') }}</RouterLink>
-            <RouterLink to="/notifications">{{ t('nav.notifications') }}</RouterLink>
-            <RouterLink to="/audit-logs">{{ t('nav.auditLogs') }}</RouterLink>
-            <RouterLink to="/settings">{{ t('nav.settings') }}</RouterLink>
+            <RouterLink to="/workspace" class="px-3 py-2 rounded-md text-sm font-medium text-secondary hover:text-link-hover hover:bg-link-active-bg transition duration-150 ease-in-out whitespace-nowrap" active-class="text-link-active bg-link-active-bg">{{ t('nav.terminal') }}</RouterLink>
+            <RouterLink to="/proxies" class="px-3 py-2 rounded-md text-sm font-medium text-secondary hover:text-link-hover hover:bg-link-active-bg transition duration-150 ease-in-out whitespace-nowrap" active-class="text-link-active bg-link-active-bg">{{ t('nav.proxies') }}</RouterLink>
+            <RouterLink to="/notifications" class="px-3 py-2 rounded-md text-sm font-medium text-secondary hover:text-link-hover hover:bg-link-active-bg transition duration-150 ease-in-out whitespace-nowrap" active-class="text-link-active bg-link-active-bg">{{ t('nav.notifications') }}</RouterLink>
+            <RouterLink to="/audit-logs" class="px-3 py-2 rounded-md text-sm font-medium text-secondary hover:text-link-hover hover:bg-link-active-bg transition duration-150 ease-in-out whitespace-nowrap" active-class="text-link-active bg-link-active-bg">{{ t('nav.auditLogs') }}</RouterLink>
+            <RouterLink to="/settings" class="px-3 py-2 rounded-md text-sm font-medium text-secondary hover:text-link-hover hover:bg-link-active-bg transition duration-150 ease-in-out whitespace-nowrap" active-class="text-link-active bg-link-active-bg">{{ t('nav.settings') }}</RouterLink>
         </div>
-        <div class="nav-right"> <!-- Group right-aligned links -->
-            <a href="#" @click.prevent="openStyleCustomizer" :title="t('nav.customizeStyle')">🎨</a>
-            <RouterLink v-if="!isAuthenticated" to="/login">{{ t('nav.login') }}</RouterLink>
-            <a href="#" v-if="isAuthenticated" @click.prevent="handleLogout">{{ t('nav.logout') }}</a>
+        <!-- Right navigation links with Tailwind classes using theme variables -->
+        <div class="flex items-center space-x-1">
+            <a href="#" @click.prevent="openStyleCustomizer" :title="t('nav.customizeStyle')" class="px-2 py-2 rounded-md text-lg text-icon hover:text-icon-hover hover:bg-link-active-bg transition duration-150 ease-in-out">🎨</a>
+            <RouterLink v-if="!isAuthenticated" to="/login" class="px-3 py-2 rounded-md text-sm font-medium text-secondary hover:text-link-hover hover:bg-link-active-bg transition duration-150 ease-in-out whitespace-nowrap">{{ t('nav.login') }}</RouterLink>
+            <a href="#" v-if="isAuthenticated" @click.prevent="handleLogout" class="px-3 py-2 rounded-md text-sm font-medium text-secondary hover:text-link-hover hover:bg-link-active-bg transition duration-150 ease-in-out whitespace-nowrap">{{ t('nav.logout') }}</a>
         </div>
-        <!-- Sliding underline element -->
-        <div ref="underlineRef" class="nav-underline"></div>
+        <!-- Sliding underline element with Tailwind classes using theme variables (JS still controls positioning) -->
+        <div ref="underlineRef" class="absolute bottom-0 h-0.5 bg-link-active rounded transition-all duration-300 ease-in-out pointer-events-none opacity-0"></div> <!-- Added opacity-0 -->
       </nav>
     </header>
 
@@ -307,91 +301,7 @@ const isElementVisibleAndFocusable = (element: HTMLElement): boolean => {
   /* background-color: var(--app-bg-color); */ /* 移除容器背景色，让 body 背景透出来 */
 }
 
-header {
-  background-color: var(--header-bg-color); /* 使用头部背景色变量 */
-  padding: 0 calc(var(--base-padding) * 1.5); /* Adjust padding: 0 top/bottom, more left/right */
-  border-bottom: 1px solid var(--border-color); /* 使用边框颜色变量 */
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Enhanced shadow for more depth */
-  height: 55px; /* Slightly taller header */
-  display: flex; /* Use flexbox for alignment */
-  align-items: center; /* Center items vertically */
-  position: sticky; /* Make header sticky */
-  top: 0;
-  z-index: 10; /* Ensure header stays on top */
-}
-
-nav {
-  display: flex;
-  align-items: center; /* Align nav items vertically */
-  width: 100%; /* Make nav take full width */
-  justify-content: space-between; /* Space out left and right groups */
-}
-
-.nav-left, .nav-right {
-    display: flex;
-    align-items: center;
-    gap: calc(var(--base-margin) / 3); /* Add small gap between items */
-}
-
-nav a {
-  text-decoration: none;
-  color: var(--text-color-secondary); /* Use secondary text color for inactive links */
-  padding: 0.6rem 0.9rem; /* Adjust padding */
-  border-radius: 6px; /* Slightly more rounded */
-  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; /* Smooth transition */
-  font-size: 0.9rem;
-  line-height: 1;
-  white-space: nowrap;
-  position: relative; /* For potential pseudo-elements */
-  border: 1px solid transparent; /* Add transparent border for layout consistency */
-}
-
-nav a:hover {
-  color: var(--link-hover-color); /* Use specific hover color */
-  background-color: rgba(128, 128, 128, 0.1); /* Subtle grey background on hover */
-}
-
-nav a.router-link-exact-active {
-  font-weight: 500; /* Medium weight */
-  color: var(--link-active-color); /* Use active link color */
-  background-color: transparent; /* Remove background for active link */
-  /* The underline is now handled by a separate element */
-}
-
-/* Style for the sliding underline */
-.nav-underline {
-  position: absolute;
-  bottom: 0px; /* Position at the very bottom of the nav */
-  height: 2px; /* Thickness of the indicator */
-  background-color: var(--link-active-color); /* Color of the indicator */
-  border-radius: 1px;
-  transition: left 0.3s ease-in-out, width 0.3s ease-in-out; /* Smooth transition for sliding */
-  opacity: 0; /* Initially hidden */
-  pointer-events: none; /* Prevent interaction */
-}
-
-
-/* Style the theme icon link */
-nav a[title*="t('nav.customizeStyle')"] {
-    padding: 0.5rem 0.7rem; /* Adjust padding for icon */
-    font-size: 1.1rem; /* Make icon slightly larger */
-    color: var(--text-color-secondary); /* Match other inactive links */
-}
-nav a[title*="t('nav.customizeStyle')"]:hover {
-    color: var(--link-hover-color);
-    background-color: rgba(128, 128, 128, 0.1);
-}
-
-/* Style logout/login link */
-.nav-right a {
-    /* Specific styles if needed, e.g., slightly different color */
-    color: var(--text-color-secondary);
-}
-.nav-right a:hover {
-    color: var(--link-hover-color);
-    background-color: rgba(128, 128, 128, 0.1);
-}
-
+/* Removed header, nav, nav-left, nav-right, nav a, nav a:hover, nav a.router-link-exact-active, .nav-underline, and specific icon/login/logout link styles as they are now handled by Tailwind classes */
 
 main {
   flex-grow: 1;
diff --git a/packages/frontend/src/style.css b/packages/frontend/src/style.css
index ead79fc..89f6143 100644
--- a/packages/frontend/src/style.css
+++ b/packages/frontend/src/style.css
@@ -1,4 +1,34 @@
 @import "tailwindcss";
+
+/* Tailwind Theme Variables Mapping */
+@theme inline {
+  /* Base Colors */
+  --color-app: var(--app-bg-color);
+  --color-text-default: var(--text-color);
+  --color-text-secondary: var(--text-color-secondary);
+  --color-border-default: var(--border-color);
+  --color-link: var(--link-color);
+  --color-link-hover: var(--link-hover-color);
+  --color-link-active: var(--link-active-color); /* Also used as primary/theme color */
+  --color-primary: var(--link-active-color); /* Map primary to active link color */
+  --color-link-active-bg: var(--link-active-bg-color); /* Map active link background */
+
+  /* Component Colors */
+  --color-header: var(--header-bg-color);
+  --color-footer: var(--footer-bg-color);
+  --color-button: var(--button-bg-color);
+  --color-button-text: var(--button-text-color);
+  --color-button-hover: var(--button-hover-bg-color);
+  --color-icon: var(--icon-color);
+  --color-icon-hover: var(--icon-hover-color);
+  --color-split-line: var(--split-line-color);
+  --color-split-line-hover: var(--split-line-hover-color);
+  --color-input-focus-border: var(--input-focus-border-color);
+  /* --color-input-focus-glow: var(--input-focus-glow); /* Glow might need direct var() use in shadow utilities */
+  --color-ssh-tab-active: var(--ssh-tab-active);
+  --color-ssh-tab-background: var(--ssh-tab-background);
+}
+
 /* 全局样式和 CSS 变量定义 */
 :root {
   /* 基础颜色 */
@@ -9,6 +39,7 @@
   --link-color: #333;            /* 链接颜色 */
   --link-hover-color: #0056b3;   /* 链接悬停颜色 */
   --link-active-color: #007bff;   /* 激活链接/主题色 */
+  --link-active-bg-color: #e0e0ff; /* 激活链接背景色 (类似 indigo-50) */
 
   /* 组件颜色 */
   --header-bg-color: #f0f0f0;     /* 头部背景色 */