xto-fronted 0.3.5 → 0.3.7

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;

package/src/index.ts

@@ -33,6 +33,7 @@ export { default as router, resetRouter } from './router'
 export * from './router/staticRoutes'
 export * from './router/dynamicRoutes'
 export { createLayoutRoute, createRouter } from './router/layoutRoute'
+export { setupRouterGuards } from './router/guards'
 
 // API
 export * from './api/auth'

package/src/router/guards.ts

@@ -0,0 +1,133 @@
+/**
+ * 路由守卫设置
+ */
+
+import type { Router } from 'vue-router'
+import { getToken } from '@/utils/auth'
+import { useUserStore } from '@/stores/user'
+import { useMenuStore } from '@/stores/menu'
+import { useAppStore } from '@/stores/app'
+import { getUserInfo } from '@/api/auth'
+import { getMenuTree } from '@/api/system'
+
+// 白名单路由
+const defaultWhiteList = ['/login', '/404', '/403']
+
+interface RouterGuardOptions {
+  // 白名单路由
+  whiteList?: string[]
+  // 登录页路径
+  loginPath?: string
+  // 首页路径
+  homePath?: string
+  // 获取用户信息的回调（可选，默认调用 API）
+  fetchUserInfo?: () => Promise<any>
+  // 获取菜单的回调（可选，默认调用 API）
+  fetchMenu?: () => Promise<any>
+  // 登录成功后的回调
+  onLoginSuccess?: () => void
+}
+
+/**
+ * 设置路由守卫
+ * @param router 路由实例
+ * @param options 配置选项
+ */
+export function setupRouterGuards(router: Router, options: RouterGuardOptions = {}) {
+  const whiteList = options.whiteList || defaultWhiteList
+  const loginPath = options.loginPath || '/login'
+  const homePath = options.homePath || '/'
+
+  router.beforeEach(async (to, _from, next) => {
+    // 启动进度条（可选）
+    // NProgress.start()
+
+    const appStore = useAppStore()
+    const userStore = useUserStore()
+    const menuStore = useMenuStore()
+
+    // 初始化主题
+    appStore.initTheme()
+
+    // 检查是否有 token
+    const token = getToken()
+
+    if (token) {
+      // 已登录
+      if (to.path === loginPath) {
+        // 已登录访问登录页，跳转到首页
+        next({ path: homePath })
+        // NProgress.done()
+      } else {
+        // 检查是否已获取用户信息
+        if (userStore.isLoggedIn) {
+          // 已有用户信息，直接放行
+          // 添加缓存页面
+          if (to.name && to.meta.keepAlive) {
+            appStore.addCachedView(to.name as string)
+          }
+          next()
+        } else {
+          // 尝试获取用户信息
+          try {
+            // 获取用户信息
+            if (options.fetchUserInfo) {
+              const userInfo = await options.fetchUserInfo()
+              userStore.setUserInfo(userInfo)
+            } else {
+              const userInfo = await getUserInfo()
+              userStore.setUserInfo(userInfo)
+            }
+
+            // 获取菜单
+            if (options.fetchMenu) {
+              const menuList = await options.fetchMenu()
+              menuStore.setMenuList(menuList)
+            } else {
+              const menuList = await getMenuTree()
+              menuStore.setMenuList(menuList)
+            }
+
+            // 登录成功回调
+            if (options.onLoginSuccess) {
+              options.onLoginSuccess()
+            }
+
+            // 添加缓存页面
+            if (to.name && to.meta.keepAlive) {
+              appStore.addCachedView(to.name as string)
+            }
+
+            // 重新导航到目标路由，确保动态路由已添加
+            next({ ...to, replace: true })
+          } catch (error) {
+            // 获取用户信息失败，清除 token 并跳转到登录页
+            console.error('获取用户信息失败:', error)
+            userStore.clearUserInfo()
+            menuStore.clearMenu()
+            // 清除 token
+            localStorage.removeItem('token')
+            localStorage.removeItem('refreshToken')
+            next({ path: loginPath, query: { redirect: to.fullPath } })
+            // NProgress.done()
+          }
+        }
+      }
+    } else {
+      // 未登录
+      if (whiteList.includes(to.path)) {
+        // 在白名单中，直接放行
+        next()
+      } else {
+        // 不在白名单中，跳转到登录页
+        next({ path: loginPath, query: { redirect: to.fullPath } })
+        // NProgress.done()
+      }
+    }
+  })
+
+  router.afterEach(() => {
+    // 结束进度条
+    // NProgress.done()
+  })
+}