xto-fronted 0.4.55 → 0.4.56

package/src/components/Layout/TopMenu.vue

@@ -18,6 +18,28 @@ const authStore = useAuthStore()
 
 const activeMenu = computed(() => route.path)
 
+// 扁平化菜单用于搜索
+const flattenMenus = (menus: any[], parentTitle = ''): any[] => {
+  const result: any[] = []
+  menus.forEach(menu => {
+    if (menu.children && menu.children.length > 0) {
+      result.push(...flattenMenus(menu.children, menu.menuName))
+    } else {
+      result.push({ ...menu, parentTitle, title: menu.menuName, path: menu.menuUrl })
+    }
+  })
+  return result
+}
+
+// 搜索结果
+const searchResults = computed(() => {
+  if (!searchKeyword.value.trim()) return []
+  const flatMenus = flattenMenus(menuStore.menuList)
+  return flatMenus.filter(menu =>
+    menu.title.toLowerCase().includes(searchKeyword.value.toLowerCase())
+  )
+})
+
 // 菜单主题相关
 const menuBgColor = computed(() => appStore.isDark ? '#1d1e1f' : '#fff')
 const menuTextColor = computed(() => appStore.isDark ? '#cfd3dc' : '#303133')
@@ -29,6 +51,9 @@ const dropdownRef = ref<HTMLElement | null>(null)
 const isFullscreen = ref(false)
 const drawerVisible = ref(false)
 const greyMode = ref(false)
+const searchVisible = ref(false)
+const searchKeyword = ref('')
+const searchRef = ref<HTMLElement | null>(null)
 
 // 菜单选择
 const handleMenuSelect = (index: string) => {
@@ -142,6 +167,18 @@ const closeDropdowns = () => {
   dropdownVisible.value = false
 }
 
+// 隐藏搜索
+const hideSearch = () => {
+  searchVisible.value = false
+  searchKeyword.value = ''
+}
+
+// 搜索结果点击
+const handleSearchItemClick = (path: string) => {
+  router.push(path)
+  hideSearch()
+}
+
 // 打开设置抽屉
 const openSettingsDrawer = () => {
   drawerVisible.value = true
@@ -228,17 +265,30 @@ const handleClickOutside = (event: MouseEvent) => {
   if (dropdownRef.value && !dropdownRef.value.contains(event.target as Node)) {
     closeDropdowns()
   }
+  if (searchRef.value && !searchRef.value.contains(event.target as Node)) {
+    hideSearch()
+  }
+}
+
+// 键盘快捷键
+const handleKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Escape') {
+    hideSearch()
+    closeDropdowns()
+  }
 }
 
 onMounted(() => {
   document.addEventListener('click', handleClickOutside)
   document.addEventListener('fullscreenchange', handleFullscreenChange)
+  document.addEventListener('keydown', handleKeydown)
   greyMode.value = document.documentElement.classList.contains('grey-mode')
 })
 
 onUnmounted(() => {
   document.removeEventListener('click', handleClickOutside)
   document.removeEventListener('fullscreenchange', handleFullscreenChange)
+  document.removeEventListener('keydown', handleKeydown)
 })
 </script>
 
@@ -301,6 +351,41 @@ onUnmounted(() => {
 
     <!-- 右侧操作区域 -->
     <div class="top-menu__actions">
+      <!-- 搜索输入框 -->
+      <div class="top-menu__search" ref="searchRef">
+        <Icon name="search" :size="14" class="top-menu__search-icon" />
+        <input
+          v-model="searchKeyword"
+          type="text"
+          class="top-menu__search-input"
+          placeholder="搜索菜单..."
+          @focus="searchVisible = true"
+        />
+        <!-- 搜索结果下拉 -->
+        <Transition name="search-dropdown">
+          <div v-if="searchVisible && (searchResults.length > 0 || searchKeyword)" class="top-menu__search-dropdown">
+            <div v-if="searchResults.length > 0" class="top-menu__search-results">
+              <div
+                v-for="item in searchResults"
+                :key="item.path"
+                class="top-menu__search-item"
+                @click="handleSearchItemClick(item.path)"
+              >
+                <span v-if="item.title !== '首页'" class="top-menu__search-icon-item">
+                  <Icon v-if="iconExists(getMenuIcon(item.icon))" :name="getMenuIcon(item.icon)" :size="16" />
+                  <span v-else class="top-menu__search-char">{{ getFirstChar(item.title) }}</span>
+                </span>
+                <span class="top-menu__search-item-title">{{ item.title }}</span>
+                <span v-if="item.parentTitle" class="top-menu__search-item-parent">{{ item.parentTitle }}</span>
+              </div>
+            </div>
+            <div v-else class="top-menu__search-empty">
+              未找到匹配的菜单
+            </div>
+          </div>
+        </Transition>
+      </div>
+
       <!-- 全屏切换 -->
       <div class="top-menu__action" @click="toggleFullscreen" :title="isFullscreen ? '退出全屏' : '全屏'">
         <Icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" :size="16" />
@@ -571,6 +656,107 @@ onUnmounted(() => {
     gap: 8px;
   }
 
+  &__search {
+    position: relative;
+    display: flex;
+    align-items: center;
+    background-color: var(--color-fill-light);
+    border-radius: var(--border-radius-base);
+    padding: 0 12px;
+    height: 32px;
+    width: 200px;
+
+    &-icon {
+      color: var(--color-text-secondary);
+    }
+
+    &-input {
+      flex: 1;
+      height: 100%;
+      font-size: 14px;
+      color: var(--color-text-primary);
+      background: transparent;
+      border: none;
+      outline: none;
+      padding-left: 8px;
+
+      &::placeholder {
+        color: var(--color-text-placeholder);
+      }
+    }
+
+    &-dropdown {
+      position: absolute;
+      top: calc(100% + 4px);
+      left: 0;
+      right: 0;
+      min-width: 200px;
+      max-height: 300px;
+      overflow-y: auto;
+      background-color: var(--bg-color);
+      border-radius: var(--border-radius-base);
+      box-shadow: var(--box-shadow);
+      z-index: 100;
+    }
+
+    &-results {
+      padding: 8px 0;
+    }
+
+    &-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      cursor: pointer;
+      transition: background-color 0.2s;
+
+      &:hover {
+        background-color: var(--color-fill);
+      }
+
+      &-title {
+        font-size: 14px;
+        color: var(--color-text-primary);
+      }
+
+      &-parent {
+        font-size: 12px;
+        color: var(--color-text-secondary);
+        margin-left: auto;
+      }
+    }
+
+    &-icon-item {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 16px;
+      height: 16px;
+      flex-shrink: 0;
+    }
+
+    &-char {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 16px;
+      height: 16px;
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--color-primary);
+      background-color: var(--color-primary-light-8);
+      border-radius: 4px;
+    }
+
+    &-empty {
+      padding: 16px 12px;
+      text-align: center;
+      color: var(--color-text-secondary);
+      font-size: 14px;
+    }
+  }
+
   &__action {
     width: 32px;
     height: 32px;
@@ -945,4 +1131,16 @@ onUnmounted(() => {
   opacity: 0;
   transform: translateY(-10px);
 }
+
+// 搜索下拉动画
+.search-dropdown-enter-active,
+.search-dropdown-leave-active {
+  transition: all 0.2s ease;
+}
+
+.search-dropdown-enter-from,
+.search-dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
 </style>