Update HelloWorld.vue

优化页面动画效果；
存在左侧工具栏提示信息不见了

Author: allennaur

src/components/HelloWorld.vue

@@ -2,6 +2,7 @@
   <div class="visionos-container">
     <!-- 左侧工具栏 -->
     <div class="sidebar">
+      <div class="active-bg-indicator" :style="activeIndicatorStyle"></div>
       <div class="menu-button" 
            v-for="(menu, index) in menus" 
            :key="index" 
@@ -10,60 +11,63 @@
         <div class="menu-icon">
           <i :class="menu.icon"></i>
         </div>
-        <div class="tooltip">{{ menu.label }}</div>
+        <span class="tooltip">{{ menu.label }}</span>
       </div>
     </div>
 
     <!-- 主体内容区域 -->
     <div class="content">
-      <!-- 主页内容 -->
-      <div v-if="activeMenu === 'home'" class="content-wrapper">
-        <div class="home-page">
-          <h1>欢迎使用 Coder Tools Platform</h1>
-          <p class="subtitle">专为开发者打造的高效工具集</p>
-          
-          <div class="cards-container">
-            <div class="tool-card" v-for="(menu, index) in menus.filter(m => m.id !== 'home')" :key="index" @click="switchMenu(menu.id)">
-              <div class="card-icon">
-                <i :class="menu.icon"></i>
-              </div>
-              <div class="card-content">
-                <h3>{{ menu.label }}</h3>
-                <p>{{ menu.description }}</p>
+      <!-- 使用Vue的过渡组件包装内容 -->
+      <transition name="fade-transform" mode="out-in">
+        <!-- 主页内容 -->
+        <div v-if="activeMenu === 'home'" class="content-wrapper" key="home">
+          <div class="home-page">
+            <h1>欢迎使用 Coder Tools Platform</h1>
+            <p class="subtitle">专为开发者打造的高效工具集</p>
+            
+            <div class="cards-container">
+              <div class="tool-card" v-for="(menu, index) in menus.filter(m => m.id !== 'home')" :key="index" @click="switchMenu(menu.id)">
+                <div class="card-icon">
+                  <i :class="menu.icon"></i>
+                </div>
+                <div class="card-content">
+                  <h3>{{ menu.label }}</h3>
+                  <p>{{ menu.description }}</p>
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-      
-      <!-- JSON工具内容 -->
-      <div v-else-if="activeMenu === 'json'" class="content-wrapper">
-        <div class="feature-page json-feature-page">
-          <div class="feature-header">
-            <h2>JSON 工具</h2>
-            <p>JSON格式化、验证、压缩和转换工具</p>
+        
+        <!-- JSON工具内容 -->
+        <div v-else-if="activeMenu === 'json'" class="content-wrapper" key="json">
+          <div class="feature-page json-feature-page">
+            <div class="feature-header">
+              <h2>JSON 工具</h2>
+              <p>JSON格式化、验证、压缩和转换工具</p>
+            </div>
+            <JsonTool />
           </div>
-          <JsonTool />
         </div>
-      </div>
-      
-      <!-- 时间戳工具内容 -->
-      <div v-else-if="activeMenu === 'timestamp'" class="content-wrapper">
-        <div class="feature-page">
-          <h2>时间戳转换工具</h2>
-          <p>在不同时间格式之间快速转换</p>
-          <!-- 时间戳工具具体实现 -->
+        
+        <!-- 时间戳工具内容 -->
+        <div v-else-if="activeMenu === 'timestamp'" class="content-wrapper" key="timestamp">
+          <div class="feature-page">
+            <h2>时间戳转换工具</h2>
+            <p>在不同时间格式之间快速转换</p>
+            <!-- 时间戳工具具体实现 -->
+          </div>
         </div>
-      </div>
-      
-      <!-- Java工具内容 -->
-      <div v-else-if="activeMenu === 'java'" class="content-wrapper">
-        <div class="feature-page">
-          <h2>Java 工具</h2>
-          <p>Java相关的开发辅助工具</p>
-          <!-- Java工具具体实现 -->
+        
+        <!-- Java工具内容 -->
+        <div v-else-if="activeMenu === 'java'" class="content-wrapper" key="java">
+          <div class="feature-page">
+            <h2>Java 工具</h2>
+            <p>Java相关的开发辅助工具</p>
+            <!-- Java工具具体实现 -->
+          </div>
         </div>
-      </div>
+      </transition>
     </div>
   </div>
 </template>
@@ -82,6 +86,7 @@ export default {
   data() {
     return {
       activeMenu: 'home',
+      hoverMenu: null,
       menus: [
         {
           id: 'home',
@@ -110,9 +115,31 @@ export default {
       ]
     }
   },
+  computed: {
+    activeIndicatorStyle() {
+      const menuIndex = this.menus.findIndex(menu => menu.id === this.activeMenu);
+      if (menuIndex === -1) return {};
+      
+      // 计算当前选中按钮的位置 (每个按钮高度 + 间距)
+      const buttonHeight = 45; // 按钮高度
+      const gap = 15; // 按钮之间的间距
+      const offsetY = menuIndex * (buttonHeight + gap); // 不再加上顶部padding
+      
+      return {
+        transform: `translateY(${offsetY}px) translateX(-50%)`,
+        opacity: 1
+      };
+    }
+  },
   methods: {
     switchMenu(menuId) {
       this.activeMenu = menuId;
+    },
+    handleMouseEnter(menuId) {
+      this.hoverMenu = menuId;
+    },
+    handleMouseLeave() {
+      this.hoverMenu = null;
     }
   }
 }
@@ -150,6 +177,35 @@ export default {
   transition: all 0.3s ease;
   z-index: 100;
   border: 1px solid rgba(255, 255, 255, 0.7);
+  /* 确保容器大小完全由内容决定 */
+  height: auto;
+  min-height: fit-content;
+  max-height: 80vh; /* 限制最大高度为视窗高度的80% */
+  overflow-y: auto; /* 内容过多时显示滚动条 */
+  /* 隐藏滚动条但保持功能 */
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE/Edge */
+}
+
+/* 隐藏Webkit浏览器的滚动条 */
+.sidebar::-webkit-scrollbar {
+  display: none;
+}
+
+.active-bg-indicator {
+  position: absolute;
+  width: 45px;
+  height: 45px;
+  border-radius: 18px;
+  background: linear-gradient(135deg, rgba(255,76,197,0.9) 0%, rgba(151,47,246,0.9) 100%);
+  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
+  opacity: 0;
+  /* 修改定位方式，确保水平居中 */
+  left: 50%;
+  top: 15px; /* 顶部padding */
+  transform: translateX(-50%);
+  z-index: -1;
+  box-shadow: 0 4px 15px rgba(255,76,197,0.3);
 }
 
 .menu-button {
@@ -162,6 +218,7 @@ export default {
   border-radius: 18px;
   cursor: pointer;
   transition: all 0.2s ease;
+  z-index: 2;
 }
 
 .menu-button:hover {
@@ -170,9 +227,10 @@ export default {
 }
 
 .menu-button.active {
-  background: linear-gradient(135deg, rgba(255,76,197,0.9) 0%, rgba(151,47,246,0.9) 100%);
   color: white;
-  box-shadow: 0 4px 15px rgba(255,76,197,0.3);
+  background-color: transparent;
+  box-shadow: none;
+  transform: scale(1.08);
 }
 
 .menu-icon {
@@ -182,10 +240,11 @@ export default {
   justify-content: center;
 }
 
+/* 彻底重写工具提示样式 */
 .tooltip {
   position: absolute;
   left: 60px;
-  background: rgba(255, 255, 255, 0.9);
+  background: rgba(255, 255, 255, 0.95);
   padding: 5px 10px;
   border-radius: 10px;
   font-size: 12px;
@@ -194,14 +253,24 @@ export default {
   opacity: 0;
   visibility: hidden;
   transform: translateX(-10px);
-  transition: all 0.2s ease;
+  transition: all 0.3s ease;
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.7);
   font-weight: 500;
+  color: #333;
+  z-index: 1000;
+  pointer-events: none;
+  display: block; /* 确保元素显示为块级元素 */
 }
 
 .menu-button:hover .tooltip {
+  opacity: 1; 
+  visibility: visible;
+  transform: translateX(0);
+}
+
+.menu-button.active:hover .tooltip {
   opacity: 1;
   visibility: visible;
   transform: translateX(0);
@@ -215,6 +284,7 @@ export default {
   height: 100%;
   width: 100%;
   box-sizing: border-box;
+  position: relative;
 }
 
 .content-wrapper {
@@ -224,6 +294,11 @@ export default {
   box-sizing: border-box;
   display: flex;
   justify-content: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
 }
 
 /* 主页样式 */
@@ -281,17 +356,25 @@ export default {
   background: rgba(255, 255, 255, 0.9);
 }
 
+/* 优化卡片图标样式 */
 .card-icon {
   font-size: 24px;
-  width: 50px;
-  height: 50px;
+  width: 56px;
+  height: 56px; /* 增加高度，确保为正方形 */
+  min-width: 56px; /* 确保最小宽度 */
   display: flex;
   align-items: center;
   justify-content: center;
   margin-right: 15px;
-  border-radius: 15px;
+  border-radius: 18px; /* 增加圆角使其更加柔和 */
   background: rgba(0, 122, 255, 0.1);
   color: #007AFF;
+  transition: all 0.3s ease;
+}
+
+.tool-card:hover .card-icon {
+  background: rgba(0, 122, 255, 0.2); /* 悬停时背景色更深 */
+  transform: scale(1.05); /* 轻微放大效果 */
 }
 
 .card-content h3 {
@@ -360,4 +443,20 @@ export default {
   flex: 1;
   margin-top: 10px;
 }
+
+/* 添加页面过渡效果 */
+.fade-transform-enter-active,
+.fade-transform-leave-active {
+  transition: all 0.5s;
+}
+
+.fade-transform-enter-from {
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateY(-20px);
+}
 </style>