xto-fronted 0.1.2 → 0.1.3

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/composables/useTable.ts

@@ -0,0 +1,97 @@
+/**
+ * 表格组合函数
+ */
+
+import { ref, reactive, computed } from 'vue'
+
+export interface TableOptions<T = any> {
+  fetchData: (params: any) => Promise<{ list: T[]; total: number }>
+  defaultPageSize?: number
+}
+
+export function useTable<T = any>(options: TableOptions<T>) {
+  const { fetchData, defaultPageSize = 10 } = options
+
+  const loading = ref(false)
+  const data = ref<T[]>([]) as any
+  const total = ref(0)
+  const currentPage = ref(1)
+  const pageSize = ref(defaultPageSize)
+
+  const searchParams = reactive<Record<string, any>>({})
+
+  // 获取数据
+  const getData = async () => {
+    loading.value = true
+    try {
+      const params = {
+        ...searchParams,
+        page: currentPage.value,
+        pageSize: pageSize.value
+      }
+      const result = await fetchData(params)
+      data.value = result.list
+      total.value = result.total
+    } catch (error) {
+      console.error(error)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // 搜索
+  const handleSearch = () => {
+    currentPage.value = 1
+    getData()
+  }
+
+  // 重置
+  const handleReset = () => {
+    Object.keys(searchParams).forEach(key => {
+      searchParams[key] = undefined
+    })
+    currentPage.value = 1
+    getData()
+  }
+
+  // 分页改变
+  const handlePageChange = (page: number) => {
+    currentPage.value = page
+    getData()
+  }
+
+  // 每页条数改变
+  const handleSizeChange = (size: number) => {
+    pageSize.value = size
+    currentPage.value = 1
+    getData()
+  }
+
+  // 刷新
+  const refresh = () => {
+    getData()
+  }
+
+  // 分页配置
+  const pagination = computed(() => ({
+    current: currentPage.value,
+    pageSize: pageSize.value,
+    total: total.value
+  }))
+
+  return {
+    loading,
+    data,
+    total,
+    currentPage,
+    pageSize,
+    searchParams,
+    pagination,
+    getData,
+    handleSearch,
+    handleReset,
+    handlePageChange,
+    handleSizeChange,
+    refresh
+  }
+}

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

@@ -0,0 +1,41 @@
+/**
+ * 权限指令
+ * 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/enums/index.ts

@@ -0,0 +1,63 @@
+/**
+ * 枚举常量
+ */
+
+// 状态
+export enum Status {
+  ENABLED = 1,
+  DISABLED = 0
+}
+
+// 性别
+export enum Gender {
+  UNKNOWN = 0,
+  MALE = 1,
+  FEMALE = 2
+}
+
+// 菜单类型
+export enum MenuType {
+  DIRECTORY = 0,
+  MENU = 1,
+  BUTTON = 2
+}
+
+// 状态文本映射
+export const StatusText: Record<Status, string> = {
+  [Status.ENABLED]: '启用',
+  [Status.DISABLED]: '禁用'
+}
+
+// 性别文本映射
+export const GenderText: Record<Gender, string> = {
+  [Gender.UNKNOWN]: '未知',
+  [Gender.MALE]: '男',
+  [Gender.FEMALE]: '女'
+}
+
+// 菜单类型文本映射
+export const MenuTypeText: Record<MenuType, string> = {
+  [MenuType.DIRECTORY]: '目录',
+  [MenuType.MENU]: '菜单',
+  [MenuType.BUTTON]: '按钮'
+}
+
+// 状态选项
+export const StatusOptions = [
+  { label: '启用', value: Status.ENABLED },
+  { label: '禁用', value: Status.DISABLED }
+]
+
+// 性别选项
+export const GenderOptions = [
+  { label: '未知', value: Gender.UNKNOWN },
+  { label: '男', value: Gender.MALE },
+  { label: '女', value: Gender.FEMALE }
+]
+
+// 菜单类型选项
+export const MenuTypeOptions = [
+  { label: '目录', value: MenuType.DIRECTORY },
+  { label: '菜单', value: MenuType.MENU },
+  { label: '按钮', value: MenuType.BUTTON }
+]

package/src/env.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+
+interface ImportMetaEnv {
+  readonly VITE_APP_TITLE: string
+  readonly VITE_API_BASE_URL: string
+  readonly VITE_USE_MOCK: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

package/src/index.ts

@@ -0,0 +1,44 @@
+// 组件
+export { default as Layout } from './components/Layout/index.vue'
+export { default as Header } from './components/Layout/Header.vue'
+export { default as Sidebar } from './components/Layout/Sidebar.vue'
+export { default as Tabs } from './components/Layout/Tabs.vue'
+export { default as Footer } from './components/Layout/Footer.vue'
+
+// 组合式函数
+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'
+export * from './utils/permission'
+export * from './utils/request'
+export * from './utils/storage'
+
+// Store
+export * from './stores/app'
+export * from './stores/auth'
+export * from './stores/menu'
+export * from './stores/user'
+
+// 路由
+export { default as router, resetRouter } from './router'
+export * from './router/staticRoutes'
+export * from './router/dynamicRoutes'
+
+// API
+export * from './api/auth'
+export * from './api/menu'
+export * from './api/user'
+
+// 配置
+export { default as appConfig } from './config'
+
+// 枚举
+export * from './enums'
+
+// 指令
+export { default as permissionDirective } from './directives/permission'

package/src/main.ts

@@ -0,0 +1,34 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+import router from './router'
+
+// 样式
+import '@/assets/styles/index.scss'
+
+// 组件库样式
+import '@xto/base/es/style.css'
+import '@xto/form/es/style.css'
+import '@xto/data/es/style.css'
+import '@xto/feedback/es/style.css'
+import '@xto/navigation/es/style.css'
+import '@xto/layout/es/style.css'
+import '@xto/business/es/style.css'
+
+// 全局注册内部组件（解决 resolveComponent 问题）
+import { Loading } from '@xto/base'
+import { TreeNode } from '@xto/data'
+
+const app = createApp(App)
+
+// 注册内部组件
+app.component('x-loading', Loading)
+app.component('TreeNode', TreeNode)
+
+// Pinia
+app.use(createPinia())
+
+// Router
+app.use(router)
+
+app.mount('#app')

package/src/router/dynamicRoutes.ts

@@ -0,0 +1,163 @@
+/**
+ * 动态路由模板
+ */
+
+import type { RouteRecordRaw } from 'vue-router'
+
+// 布局路由（包含默认子路由）
+export const layoutRoute: RouteRecordRaw = {
+  path: '/',
+  name: 'Layout',
+  component: () => import('@/components/Layout/index.vue'),
+  redirect: '/dashboard',
+  children: [
+    {
+      path: '/dashboard',
+      name: 'Dashboard',
+      component: () => import('@/views/dashboard/index.vue'),
+      meta: {
+        title: '仪表盘',
+        icon: 'dashboard',
+        keepAlive: true,
+        affix: true
+      }
+    },
+    {
+      path: '/system/user',
+      name: 'SystemUser',
+      component: () => import('@/views/system/user/index.vue'),
+      meta: {
+        title: '用户管理',
+        icon: 'user',
+        keepAlive: true
+      }
+    },
+    {
+      path: '/system/role',
+      name: 'SystemRole',
+      component: () => import('@/views/system/role/index.vue'),
+      meta: {
+        title: '角色管理',
+        icon: 'role',
+        keepAlive: true
+      }
+    },
+    {
+      path: '/system/menu',
+      name: 'SystemMenu',
+      component: () => import('@/views/system/menu/index.vue'),
+      meta: {
+        title: '菜单管理',
+        icon: 'menu',
+        keepAlive: true
+      }
+    }
+  ]
+}
+
+// 默认路由（用于开发，后续由后端返回）
+export const defaultDynamicRoutes: RouteRecordRaw[] = [
+  {
+    path: '/dashboard',
+    name: 'Dashboard',
+    component: () => import('@/views/dashboard/index.vue'),
+    meta: {
+      title: '仪表盘',
+      icon: 'dashboard',
+      keepAlive: true,
+      affix: true
+    }
+  },
+  {
+    path: '/system',
+    name: 'System',
+    redirect: '/system/user',
+    meta: {
+      title: '系统管理',
+      icon: 'setting'
+    },
+    children: [
+      {
+        path: 'user',
+        name: 'SystemUser',
+        component: () => import('@/views/system/user/index.vue'),
+        meta: {
+          title: '用户管理',
+          icon: 'user',
+          keepAlive: true
+        }
+      },
+      {
+        path: 'role',
+        name: 'SystemRole',
+        component: () => import('@/views/system/role/index.vue'),
+        meta: {
+          title: '角色管理',
+          icon: 'role',
+          keepAlive: true
+        }
+      },
+      {
+        path: 'menu',
+        name: 'SystemMenu',
+        component: () => import('@/views/system/menu/index.vue'),
+        meta: {
+          title: '菜单管理',
+          icon: 'menu',
+          keepAlive: true
+        }
+      }
+    ]
+  }
+]
+
+// Mock 菜单数据
+export const mockMenuData = [
+  {
+    id: 1,
+    name: 'Dashboard',
+    path: '/dashboard',
+    component: 'dashboard/index',
+    icon: 'dashboard',
+    title: '仪表盘',
+    keepAlive: true,
+    affix: true
+  },
+  {
+    id: 2,
+    name: 'System',
+    path: '/system',
+    redirect: '/system/user',
+    icon: 'setting',
+    title: '系统管理',
+    children: [
+      {
+        id: 21,
+        name: 'SystemUser',
+        path: '/system/user',
+        component: 'system/user/index',
+        icon: 'user',
+        title: '用户管理',
+        keepAlive: true
+      },
+      {
+        id: 22,
+        name: 'SystemRole',
+        path: '/system/role',
+        component: 'system/role/index',
+        icon: 'role',
+        title: '角色管理',
+        keepAlive: true
+      },
+      {
+        id: 23,
+        name: 'SystemMenu',
+        path: '/system/menu',
+        component: 'system/menu/index',
+        icon: 'menu',
+        title: '菜单管理',
+        keepAlive: true
+      }
+    ]
+  }
+]

package/src/router/index.ts

@@ -0,0 +1,71 @@
+/**
+ * 路由配置
+ */
+
+import { createRouter, createWebHistory } from 'vue-router'
+import { staticRoutes, errorRoute } from './staticRoutes'
+import { layoutRoute } from './dynamicRoutes'
+import { hasToken } from '@/utils/auth'
+import { useAppStore } from '@/stores/app'
+import { useApp } from '@/composables'
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [...staticRoutes, layoutRoute, errorRoute],
+  scrollBehavior: () => ({ left: 0, top: 0 })
+})
+
+// 白名单路由
+const whiteList = ['/login', '/404', '/403']
+
+// 路由守卫
+router.beforeEach(async (to, _from, next) => {
+  const appStore = useAppStore()
+
+  // 初始化主题
+  appStore.initTheme()
+
+  // 已登录
+  if (hasToken()) {
+    if (to.path === '/login') {
+      // 已登录，跳转到首页
+      next({ path: '/' })
+    } else {
+      // 初始化应用（加载用户信息和菜单）
+      const { initApp, isLoggedIn } = useApp()
+
+      if (!isLoggedIn.value) {
+        const success = await initApp()
+        if (!success) {
+          // 初始化失败，跳转登录页
+          next('/login')
+          return
+        }
+      }
+
+      // 添加缓存页面
+      if (to.name && to.meta.keepAlive) {
+        appStore.addCachedView(to.name as string)
+      }
+      next()
+    }
+  } else {
+    // 未登录
+    if (whiteList.includes(to.path)) {
+      next()
+    } else {
+      // 记录当前路径，登录后跳转
+      next({ path: '/login', query: { redirectUrl: encodeURIComponent(to.fullPath) } })
+    }
+  }
+})
+
+export function resetRouter() {
+  const newRouter = createRouter({
+    history: createWebHistory(),
+    routes: [...staticRoutes, layoutRoute, errorRoute]
+  })
+  ;(router as any).matcher = (newRouter as any).matcher
+}
+
+export default router