✨ feat: 在应用菜单中添加工具提示功能

algerkong · algerkong · commit 5084da333f58 · 2025-05-15T21:16:48.000+08:00
diff --git a/src/renderer/layout/components/AppMenu.vue b/src/renderer/layout/components/AppMenu.vue
@@ -9,19 +9,16 @@
       </div>
       <div class="app-menu-list">
         <div v-for="(item, index) in menus" :key="item.path" class="app-menu-item">
-          <router-link class="app-menu-item-link" :to="item.path">
-            <i
-              class="iconfont app-menu-item-icon"
-              :style="iconStyle(index)"
-              :class="item.meta.icon"
-            ></i>
-            <span
-              v-if="isText"
-              class="app-menu-item-text ml-3"
-              :class="isChecked(index) ? 'text-green-500' : ''"
-              >{{ item.meta.title }}</span
-            >
-          </router-link>
+          <n-tooltip :delay="200" :disabled="isText" placement="bottom">
+            <template #trigger>
+              <router-link class="app-menu-item-link" :to="item.path">
+                <i class="iconfont app-menu-item-icon" :style="iconStyle(index)" :class="item.meta.icon"></i>
+                <span v-if="isText" class="app-menu-item-text ml-3" :class="isChecked(index) ? 'text-green-500' : ''">{{
+                  item.meta.title }}</span>
+              </router-link>
+            </template>
+            <div v-if="!isText">{{ item.meta.title }}</div>
+          </n-tooltip>
         </div>
       </div>
     </div>
@@ -83,6 +80,7 @@ const isText = ref(false);
 
 .app-menu-expanded {
   @apply w-[160px];
+
   .app-menu-item {
     @apply hover:bg-gray-100 dark:hover:bg-gray-800 rounded mr-4;
   }
