xto-fronted 0.1.1 → 0.1.3

package/src/composables/useApp.ts

@@ -0,0 +1,170 @@
+/**
+ * 应用核心 Hook
+ * 封装登录、退出、初始化等核心逻辑
+ */
+
+import { computed, ref } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { Message } from '@xto/feedback'
+import { useAuthStore } from '@/stores/auth'
+import { useUserStore } from '@/stores/user'
+import { useMenuStore } from '@/stores/menu'
+import { login as loginApi, logout as logoutApi } from '@/api/auth'
+import { getCurrentUser } from '@/api/user'
+import { getUserMenu } from '@/api/menu'
+import type { UserInfo, RemoteMenuItem, LoginResult } from '@/types/api'
+
+export function useApp() {
+  const router = useRouter()
+  const route = useRoute()
+  const authStore = useAuthStore()
+  const userStore = useUserStore()
+  const menuStore = useMenuStore()
+
+  const loading = ref(false)
+
+  // ========== 计算属性 ==========
+
+  // 是否已登录
+  const isLoggedIn = computed(() => authStore.isLoggedIn)
+
+  // 用户信息
+  const userInfo = computed(() => userStore.userInfo)
+
+  // 用户名
+  const userName = computed(() => userStore.userName || '')
+
+  // 菜单列表
+  const menuList = computed(() => menuStore.menuList)
+
+  // 首页路径
+  const indexPath = computed(() => menuStore.index)
+
+  // ========== 登录 ==========
+
+  const login = async (uid: string, password: string) => {
+    loading.value = true
+    try {
+      // 1. 清除旧状态
+      clearAllState()
+
+      // 2. 调用登录接口
+      const res = await loginApi({ uid, password })
+      const loginData = res.data as LoginResult
+
+      // 3. 保存登录信息
+      authStore.login(loginData as unknown as Record<string, unknown>)
+
+      // 4. 加载用户信息
+      await loadUserInfo()
+
+      // 5. 加载菜单
+      await loadMenu()
+
+      // 6. 处理跳转
+      const redirectUrl = route.query['redirectUrl'] as string
+      if (redirectUrl) {
+        const url = decodeURIComponent(redirectUrl)
+        if (url.startsWith('http')) {
+          // 外网地址，带上 code 跳转
+          const code = loginData.code
+          location.href = url.includes('?') ? `${url}&code=${code}` : `${url}?code=${code}`
+        } else {
+          await router.replace(url)
+        }
+      } else {
+        await router.replace(indexPath.value || '/')
+      }
+
+      Message.success('登录成功')
+      return { success: true, data: loginData }
+    } catch (error: any) {
+      Message.error(error?.message || '登录失败')
+      return { success: false, error }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // ========== 退出登录 ==========
+
+  const logout = async (showMessage = true) => {
+    try {
+      await logoutApi()
+    } catch (error) {
+      console.error('退出登录接口失败', error)
+    } finally {
+      clearAllState()
+      router.push('/login')
+      if (showMessage) {
+        Message.success('退出登录成功')
+      }
+    }
+  }
+
+  // ========== 加载用户信息 ==========
+
+  const loadUserInfo = async () => {
+    const res = await getCurrentUser()
+    userStore.setUserInfo(res.data as UserInfo)
+    return res.data
+  }
+
+  // ========== 加载菜单 ==========
+
+  const loadMenu = async () => {
+    const res = await getUserMenu()
+    menuStore.setMenuFromRemote(res.data as RemoteMenuItem[])
+    return menuStore.menuList
+  }
+
+  // ========== 初始化应用（路由守卫中使用） ==========
+
+  const initApp = async () => {
+    if (!authStore.isLoggedIn) {
+      return false
+    }
+
+    try {
+      // 如果有 token 但没有用户信息，则加载
+      if (!userStore.userInfo) {
+        await loadUserInfo()
+      }
+      // 如果没有菜单，则加载
+      if (!menuStore.hasMenu) {
+        await loadMenu()
+      }
+      return true
+    } catch (error) {
+      console.error('初始化应用失败', error)
+      clearAllState()
+      return false
+    }
+  }
+
+  // ========== 清除所有状态 ==========
+
+  const clearAllState = () => {
+    authStore.logout()
+    userStore.clearUserInfo()
+    menuStore.clearMenu()
+  }
+
+  return {
+    // 状态
+    loading,
+    isLoggedIn,
+    userInfo,
+    userName,
+    menuList,
+    indexPath,
+
+    // 方法
+    login,
+    logout,
+    loadUserInfo,
+    loadMenu,
+    initApp,
+    clearAllState
+  }
+}

package/src/composables/useAuth.ts

@@ -1,45 +1,70 @@
-/**
- * 权限组合函数
- */
-
-import { computed } from 'vue'
-import { useUserStore } from '@/stores/user'
-
-export function useAuth() {
-  const userStore = useUserStore()
-
-  // 检查权限
-  const hasPermission = (permission: string | string[]): boolean => {
-    const permissions = userStore.permissions
-    if (permissions.includes('*')) return true
-
-    if (Array.isArray(permission)) {
-      return permission.some(p => permissions.includes(p))
-    }
-    return permissions.includes(permission)
-  }
-
-  // 检查角色
-  const hasRole = (role: string | string[]): boolean => {
-    const roles = userStore.roles
-    if (roles.includes('admin')) return true
-
-    if (Array.isArray(role)) {
-      return role.some(r => roles.includes(r))
-    }
-    return roles.includes(role)
-  }
-
-  // 是否是管理员
-  const isAdmin = computed(() => userStore.roles.includes('admin'))
-
-  // 是否已登录
-  const isLoggedIn = computed(() => userStore.isLoggedIn)
-
-  return {
-    hasPermission,
-    hasRole,
-    isAdmin,
-    isLoggedIn
-  }
+/**
+ * 权限 Hook
+ * 封装权限检查、按钮权限等逻辑
+ */
+
+import { computed } from 'vue'
+import { useMenuStore } from '@/stores/menu'
+import { useAuthStore } from '@/stores/auth'
+import { useUserStore } from '@/stores/user'
+
+export function useAuth() {
+  const menuStore = useMenuStore()
+  const authStore = useAuthStore()
+  const userStore = useUserStore()
+
+  // 是否已登录
+  const isLoggedIn = computed(() => authStore.isLoggedIn)
+
+  // 用户名
+  const userName = computed(() => userStore.userName)
+
+  // 用户信息
+  const userInfo = computed(() => userStore.userInfo)
+
+  // ========== 检查按钮权限 ==========
+
+  const hasPermission = (permission: string | string[]): boolean => {
+    const currentPath = window.location.pathname
+    const btnList = menuStore.menuBtnListMap[currentPath] || []
+    const btnCodes = btnList.map(item => item.code)
+
+    if (Array.isArray(permission)) {
+      return permission.some(p => btnCodes.includes(p))
+    }
+    return btnCodes.includes(permission)
+  }
+
+  // ========== 检查是否有任一权限 ==========
+
+  const hasAnyPermission = (permissions: string[]): boolean => {
+    return permissions.some(p => hasPermission(p))
+  }
+
+  // ========== 检查是否有全部权限 ==========
+
+  const hasAllPermissions = (permissions: string[]): boolean => {
+    return permissions.every(p => hasPermission(p))
+  }
+
+  // ========== 获取当前页面按钮权限列表 ==========
+
+  const getCurrentPagePermissions = (): string[] => {
+    const currentPath = window.location.pathname
+    const btnList = menuStore.menuBtnListMap[currentPath] || []
+    return btnList.map(item => item.code)
+  }
+
+  return {
+    // 状态
+    isLoggedIn,
+    userName,
+    userInfo,
+
+    // 方法
+    hasPermission,
+    hasAnyPermission,
+    hasAllPermissions,
+    getCurrentPagePermissions
+  }
 }

package/src/composables/useMenu.ts

@@ -0,0 +1,141 @@
+/**
+ * 菜单 Hook
+ * 封装菜单渲染、搜索、图标映射等逻辑
+ */
+
+import { ref, computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useMenuStore } from '@/stores/menu'
+import { useAppStore } from '@/stores/app'
+import type { MenuItem } from '@/types/api'
+
+// 默认图标映射
+const defaultIconMap: Record<string, string> = {
+  home: '🏠',
+  dashboard: '📊',
+  system: '⚙️',
+  user: '👤',
+  role: '👥',
+  menu: '📋',
+  setting: '🔧'
+}
+
+export function useMenu(iconMap?: Record<string, string>) {
+  const route = useRoute()
+  const router = useRouter()
+  const menuStore = useMenuStore()
+  const appStore = useAppStore()
+
+  // 合并图标映射
+  const mergedIconMap = { ...defaultIconMap, ...iconMap }
+
+  // 搜索关键词
+  const searchKeyword = ref('')
+
+  // 当前激活菜单
+  const activeMenu = computed(() => route.path)
+
+  // 侧边栏是否折叠
+  const isCollapsed = computed(() => appStore.isCollapsed)
+
+  // 菜单列表
+  const menuList = computed(() => menuStore.menuList)
+
+  // 是否有菜单
+  const hasMenu = computed(() => menuStore.hasMenu)
+
+  // ========== 扁平化菜单（用于搜索） ==========
+
+  const flattenMenus = (
+    menus: MenuItem[],
+    parentTitle = ''
+  ): (MenuItem & { parentTitle: string })[] => {
+    const result: (MenuItem & { 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(menuList.value)
+    return flatMenus.filter(menu =>
+      menu.title.toLowerCase().includes(searchKeyword.value.toLowerCase())
+    )
+  })
+
+  // ========== 过滤后的菜单列表 ==========
+
+  const filteredMenuList = computed(() => {
+    if (!searchKeyword.value.trim()) return menuList.value
+
+    return menuList.value.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 MenuItem[]
+  })
+
+  // ========== 获取菜单图标 ==========
+
+  const getMenuIcon = (icon?: string): string => {
+    return mergedIconMap[icon || ''] || '📄'
+  }
+
+  // ========== 菜单选择 ==========
+
+  const handleMenuSelect = (index: string) => {
+    if (index && index !== route.path) {
+      router.push(index)
+      searchKeyword.value = ''
+    }
+  }
+
+  // ========== 搜索结果点击 ==========
+
+  const handleSearchItemClick = (path: string) => {
+    router.push(path)
+    searchKeyword.value = ''
+  }
+
+  // ========== 清除搜索 ==========
+
+  const clearSearch = () => {
+    searchKeyword.value = ''
+  }
+
+  return {
+    // 状态
+    searchKeyword,
+    activeMenu,
+    isCollapsed,
+    menuList,
+    hasMenu,
+    searchResults,
+    filteredMenuList,
+
+    // 方法
+    flattenMenus,
+    getMenuIcon,
+    handleMenuSelect,
+    handleSearchItemClick,
+    clearSearch
+  }
+}

package/src/config/index.ts

@@ -0,0 +1,19 @@
+/**
+ * 应用配置
+ */
+
+export interface AppConfig {
+  webTitle: string
+  baseUrl: string
+  appId: string
+  clientId: string
+}
+
+const config: AppConfig = {
+  webTitle: import.meta.env.VITE_APP_NAME || 'analysis-web',
+  baseUrl: 'https://cloud-api-test.tineco.com',
+  appId: import.meta.env.VITE_APP_ID || 'DBU-CONTENT-ANALYSIS',
+  clientId: import.meta.env.VITE_APP_CLIENT_ID || 'Tineco'
+}
+
+export default config

package/src/directives/permission.ts

@@ -1,38 +1,41 @@
-/**
- * 权限指令
- * v-permission="['user:edit']" 或 v-permission="'user:edit'"
- */
-
-import type { Directive, DirectiveBinding } from 'vue'
-import { useUserStore } from '@/stores/user'
-
-const permission: Directive = {
-  mounted(el: HTMLElement, binding: DirectiveBinding<string | string[]>) {
-    const userStore = useUserStore()
-    const { value } = binding
-
-    if (!value) return
-
-    const permissions = userStore.permissions
-
-    // 判断是否有权限
-    let hasPermission = false
-    if (Array.isArray(value)) {
-      hasPermission = value.some(p => permissions.includes(p) || permissions.includes('*'))
-    } else {
-      hasPermission = permissions.includes(value) || permissions.includes('*')
-    }
-
-    // 没有权限则移除元素
-    if (!hasPermission) {
-      el.parentNode?.removeChild(el)
-    }
-  }
-}
-
-export default permission
-
-// 注册指令
-export function setupPermissionDirective(app: any) {
-  app.directive('permission', permission)
+/**
+ * 权限指令
+ * v-permission="['user:edit']" 或 v-permission="'user:edit'"
+ */
+
+import type { Directive, DirectiveBinding } from 'vue'
+import { useMenuStore } from '@/stores/menu'
+
+const permission: Directive = {
+  mounted(el: HTMLElement, binding: DirectiveBinding<string | string[]>) {
+    const menuStore = useMenuStore()
+    const { value } = binding
+
+    if (!value) return
+
+    // 获取当前页面的按钮权限
+    const currentPath = window.location.pathname
+    const btnList = menuStore.menuBtnListMap[currentPath] || []
+    const btnCodes = btnList.map(item => item.code)
+
+    // 判断是否有权限
+    let hasPermission = false
+    if (Array.isArray(value)) {
+      hasPermission = value.some(p => btnCodes.includes(p))
+    } else {
+      hasPermission = btnCodes.includes(value)
+    }
+
+    // 没有权限则移除元素
+    if (!hasPermission) {
+      el.parentNode?.removeChild(el)
+    }
+  }
+}
+
+export default permission
+
+// 注册指令
+export function setupPermissionDirective(app: any) {
+  app.directive('permission', permission)
 }

package/src/index.ts

@@ -6,9 +6,11 @@ export { default as Tabs } from './components/Layout/Tabs.vue'
 export { default as Footer } from './components/Layout/Footer.vue'
 
 // 组合式函数
-export * from './composables/useAuth'
-export * from './composables/useForm'
-export * from './composables/useTable'
+export { useApp } from './composables/useApp'
+export { useAuth } from './composables/useAuth'
+export { useMenu } from './composables/useMenu'
+export { useForm } from './composables/useForm'
+export { useTable } from './composables/useTable'
 
 // 工具函数
 export * from './utils/auth'
@@ -29,9 +31,12 @@ export * from './router/dynamicRoutes'
 
 // API
 export * from './api/auth'
-export * from './api/system'
+export * from './api/menu'
 export * from './api/user'
 
+// 配置
+export { default as appConfig } from './config'
+
 // 枚举
 export * from './enums'