xto-fronted 0.3.5 → 0.3.6

package/src/components/Layout/Sidebar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useMenuStore } from '@/stores/menu'
 import { useUserStore } from '@/stores/user'
@@ -7,9 +7,7 @@ import { useAuthStore } from '@/stores/auth'
 import { useAppStore } from '@/stores/app'
 import { Menu, MenuItem, SubMenu } from '@xto/navigation'
 import { Button } from '@xto/base'
-import { Input } from '@xto/form'
 import { Icon } from '@xto/base'
-import type { MenuItem as MenuItemType } from '@/types/api'
 
 const route = useRoute()
 const router = useRouter()
@@ -18,7 +16,6 @@ const userStore = useUserStore()
 const authStore = useAuthStore()
 const appStore = useAppStore()
 
-const searchKeyword = ref('')
 const isCollapsed = computed(() => appStore.isCollapsed)
 const activeMenu = computed(() => route.path)
 
@@ -27,63 +24,13 @@ const menuBgColor = computed(() => appStore.isDark ? '#1d1e1f' : '#fff')
 const menuTextColor = computed(() => appStore.isDark ? '#cfd3dc' : '#303133')
 const menuActiveTextColor = computed(() => '#409eff')
 
-// 扁平化菜单用于搜索
-const flattenMenus = (menus: MenuItemType[], parentTitle = ''): (MenuItemType & { parentTitle: string })[] => {
-  const result: (MenuItemType & { parentTitle: string })[] = []
-  menus.forEach(menu => {
-    if (menu.children && menu.children.length > 0) {
-      result.push(...flattenMenus(menu.children, menu.title))
-    } else {
-      result.push({ ...menu, parentTitle })
-    }
-  })
-  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 filteredMenuList = computed(() => {
-  if (!searchKeyword.value.trim()) return menuStore.menuList
-
-  return menuStore.menuList.map(menu => {
-    if (menu.children && menu.children.length > 0) {
-      const filteredChildren = menu.children.filter(child =>
-        child.title.toLowerCase().includes(searchKeyword.value.toLowerCase())
-      )
-      if (filteredChildren.length > 0) {
-        return { ...menu, children: filteredChildren }
-      }
-      return null
-    }
-    if (menu.title.toLowerCase().includes(searchKeyword.value.toLowerCase())) {
-      return menu
-    }
-    return null
-  }).filter(Boolean) as MenuItemType[]
-})
-
 // 菜单选择
 const handleMenuSelect = (index: string) => {
   if (index && index !== route.path) {
     router.push(index)
-    searchKeyword.value = ''
   }
 }
 
-// 搜索结果点击
-const handleSearchItemClick = (path: string) => {
-  router.push(path)
-  searchKeyword.value = ''
-}
-
 // 退出登录
 const handleLogout = () => {
   authStore.logout()
@@ -114,31 +61,6 @@ const getMenuIcon = (icon?: string): string => {
       <span v-show="!isCollapsed" class="sidebar__logo-text">{{ appStore.appName }}</span>
     </div>
 
-    <!-- 搜索框 -->
-    <div v-if="!isCollapsed" class="sidebar__search">
-      <Input
-        v-model="searchKeyword"
-        placeholder="搜索菜单..."
-        size="small"
-        clearable
-      />
-      <!-- 搜索结果 -->
-      <div v-if="searchResults.length > 0" class="sidebar__search-results">
-        <div
-          v-for="item in searchResults"
-          :key="item.path"
-          class="sidebar__search-item"
-          @click="handleSearchItemClick(item.path)"
-        >
-          <Icon :name="getMenuIcon(item.icon)" :size="16" />
-          <div class="sidebar__search-item-info">
-            <span class="sidebar__search-item-title">{{ item.title }}</span>
-            <span v-if="item.parentTitle" class="sidebar__search-item-parent">{{ item.parentTitle }}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-
     <!-- 菜单 -->
     <Menu
       :default-active="activeMenu"
@@ -151,7 +73,7 @@ const getMenuIcon = (icon?: string): string => {
       class="sidebar__menu"
       @select="handleMenuSelect"
     >
-      <template v-for="menu in filteredMenuList" :key="menu.path">
+      <template v-for="menu in menuStore.menuList" :key="menu.path">
         <!-- 有子菜单 -->
         <SubMenu v-if="menu.children && menu.children.length > 0" :index="menu.path">
           <template #title>
@@ -221,55 +143,6 @@ const getMenuIcon = (icon?: string): string => {
     color: var(--color-primary);
   }
 
-  &__search {
-    padding: 10px;
-    border-bottom: 1px solid var(--color-border-lighter);
-    position: relative;
-  }
-
-  &__search-results {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    right: 0;
-    background-color: var(--bg-color);
-    border: 1px solid var(--color-border-lighter);
-    border-radius: var(--border-radius-base);
-    box-shadow: var(--box-shadow);
-    max-height: 300px;
-    overflow-y: auto;
-    z-index: 100;
-  }
-
-  &__search-item {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 10px 12px;
-    cursor: pointer;
-    transition: background-color 0.2s;
-
-    &:hover {
-      background-color: var(--color-fill);
-    }
-
-    &-info {
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-    }
-
-    &-title {
-      font-size: 14px;
-      color: var(--color-text-primary);
-    }
-
-    &-parent {
-      font-size: 12px;
-      color: var(--color-text-secondary);
-    }
-  }
-
   &__menu {
     flex: 1;
     border-right: none;