xto-fronted 0.4.7 → 0.4.9

package/src/components/Layout/TopMenu.vue

@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useMenuStore } from '@/stores/menu'
+import { useAppStore } from '@/stores/app'
+import { Menu, MenuItem, SubMenu } from '@xto/navigation'
+import { Icon } from '@xto/base'
+
+const route = useRoute()
+const router = useRouter()
+const menuStore = useMenuStore()
+const appStore = useAppStore()
+
+const activeMenu = computed(() => route.path)
+
+// 菜单主题相关
+const menuBgColor = computed(() => appStore.isDark ? '#1d1e1f' : '#fff')
+const menuTextColor = computed(() => appStore.isDark ? '#cfd3dc' : '#303133')
+const menuActiveTextColor = computed(() => '#409eff')
+
+// 菜单选择
+const handleMenuSelect = (index: string) => {
+  if (index && index !== route.path) {
+    router.push(index)
+  }
+}
+
+// 已知的图标名称列表
+const knownIcons = new Set([
+  'arrow-up', 'arrow-down', 'arrow-left', 'arrow-right',
+  'caret-down', 'caret-right', 'plus', 'minus', 'close', 'check',
+  'edit', 'delete', 'copy', 'download', 'upload', 'refresh', 'search',
+  'filter', 'more', 'setting', 'share', 'loading', 'info', 'success',
+  'warning', 'error', 'question', 'user', 'user-add', 'user-group',
+  'logout', 'login', 'file', 'folder', 'folder-open', 'document',
+  'image', 'video', 'music', 'camera', 'mail', 'phone', 'chat',
+  'bell', 'message', 'eye', 'eye-off', 'calendar', 'clock', 'history',
+  'timer', 'location', 'map', 'globe', 'star', 'heart', 'thumb-up',
+  'link', 'external-link', 'lock', 'unlock', 'key', 'home', 'menu',
+  'menu-fold', 'menu-unfold', 'sidebar-fold', 'sidebar-expand',
+  'sidebar-left', 'dashboard', 'chart', 'chart-pie', 'chart-line',
+  'report', 'analytics', 'system', 'permission', 'role', 'user-manage',
+  'log', 'notification', 'app', 'list', 'grid', 'fullscreen',
+  'fullscreen-exit', 'zoom-in', 'zoom-out', 'print', 'bookmark',
+  'tag', 'code', 'terminal', 'database', 'server', 'cloud', 'gift',
+  'moon', 'sun', 'theme', 'skin'
+])
+
+// 获取菜单图标名称
+const getMenuIcon = (icon?: string): string => {
+  if (!icon || icon === '') return ''
+
+  if (icon.startsWith('tineco-icon-')) {
+    const iconName = icon.replace('tineco-icon-', '')
+    const tinecoIconMap: Record<string, string> = {
+      home: 'home',
+      dashboard: 'dashboard',
+      system: 'system',
+      user: 'user',
+      role: 'role',
+      menu: 'list',
+      setting: 'setting',
+      file: 'file',
+      folder: 'folder',
+      chart: 'chart',
+      report: 'report',
+      analytics: 'analytics'
+    }
+    return tinecoIconMap[iconName] || iconName
+  }
+
+  const iconMap: Record<string, string> = {
+    dashboard: 'dashboard',
+    system: 'system',
+    user: 'user',
+    role: 'role',
+    menu: 'list',
+    setting: 'setting',
+    home: 'home',
+    chart: 'chart',
+    report: 'report',
+    analytics: 'analytics',
+    permission: 'permission',
+    log: 'log',
+    notification: 'notification',
+    app: 'app',
+    list: 'list',
+    grid: 'grid'
+  }
+
+  return iconMap[icon] || icon
+}
+
+const getFirstChar = (name?: string): string => {
+  if (!name) return ''
+  return name.charAt(0)
+}
+
+const iconExists = (iconName: string): boolean => {
+  return knownIcons.has(iconName)
+}
+</script>
+
+<template>
+  <div class="top-menu">
+    <Menu
+      :default-active="activeMenu"
+      mode="horizontal"
+      :background-color="menuBgColor"
+      :text-color="menuTextColor"
+      :active-text-color="menuActiveTextColor"
+      class="top-menu__menu"
+      @select="handleMenuSelect"
+    >
+      <template v-for="menu in menuStore.menuList" :key="menu.menuUrl">
+        <!-- 有子菜单 -->
+        <SubMenu v-if="menu.children && menu.children.length > 0" :index="menu.menuUrl">
+          <template #title>
+            <span class="top-menu__menu-icon">
+              <Icon v-if="iconExists(getMenuIcon(menu.icon))" :name="getMenuIcon(menu.icon)" :size="16" />
+              <span v-else class="top-menu__menu-char">{{ getFirstChar(menu.menuName) }}</span>
+            </span>
+            <span>{{ menu.menuName }}</span>
+          </template>
+          <MenuItem
+            v-for="child in menu.children"
+            :key="child.menuUrl"
+            :index="child.menuUrl"
+          >
+            <span class="top-menu__menu-icon">
+              <Icon v-if="iconExists(getMenuIcon(child.icon))" :name="getMenuIcon(child.icon)" :size="16" />
+              <span v-else class="top-menu__menu-char">{{ getFirstChar(child.menuName) }}</span>
+            </span>
+            <span>{{ child.menuName }}</span>
+          </MenuItem>
+        </SubMenu>
+        <!-- 无子菜单 -->
+        <MenuItem v-else :index="menu.menuUrl">
+          <span class="top-menu__menu-icon">
+            <Icon v-if="iconExists(getMenuIcon(menu.icon))" :name="getMenuIcon(menu.icon)" :size="16" />
+            <span v-else class="top-menu__menu-char">{{ getFirstChar(menu.menuName) }}</span>
+          </span>
+          <span>{{ menu.menuName }}</span>
+        </MenuItem>
+      </template>
+    </Menu>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.top-menu {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+
+  &__menu {
+    flex: 1;
+    border-bottom: none;
+    height: 100%;
+  }
+
+  &__menu-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    margin-right: 8px;
+  }
+
+  &__menu-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;
+  }
+}
+</style>

package/src/components/Layout/index.vue

@@ -1,21 +1,48 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useAppStore } from '@/stores/app'
+import { useMenuStore } from '@/stores/menu'
 import Sidebar from './Sidebar.vue'
 import Header from './Header.vue'
+import TopMenu from './TopMenu.vue'
 
 const appStore = useAppStore()
+const menuStore = useMenuStore()
 
 const sidebarWidth = computed(() =>
   appStore.isCollapsed ? '64px' : '210px'
 )
+
+// 布局模式
+const layoutMode = computed(() => appStore.layout)
+
+// 是否显示左侧菜单
+const showSidebar = computed(() => layoutMode.value === 'sidebar' || layoutMode.value === 'mix')
+
+// 是否显示顶部菜单
+const showTopMenu = computed(() => layoutMode.value === 'top')
+
+// 混合模式下只显示当前顶部菜单的子菜单
+const mixSubMenus = computed(() => {
+  if (layoutMode.value !== 'mix') return menuStore.menuList
+  // 混合模式需要根据顶部选中的菜单显示子菜单
+  // 这里暂时返回全部菜单，后续可根据实际需求调整
+  return menuStore.menuList
+})
 </script>
 
 <template>
-  <div class="layout">
-    <aside class="layout__aside" :style="{ width: sidebarWidth }">
-      <Sidebar />
+  <div class="layout" :class="`layout--${layoutMode}`">
+    <!-- 左侧菜单布局 -->
+    <aside v-if="showSidebar" class="layout__aside" :style="{ width: sidebarWidth }">
+      <Sidebar :menu-list="layoutMode === 'mix' ? mixSubMenus : menuStore.menuList" />
     </aside>
+
+    <!-- 顶部菜单布局 -->
+    <div v-if="showTopMenu" class="layout__top-menu">
+      <TopMenu />
+    </div>
+
     <div class="layout__main">
       <header class="layout__header">
         <Header />
@@ -33,6 +60,29 @@ const sidebarWidth = computed(() =>
   width: 100%;
   height: 100%;
 
+  // 左侧菜单模式
+  &--sidebar {
+    flex-direction: row;
+  }
+
+  // 顶部菜单模式
+  &--top {
+    flex-direction: column;
+
+    .layout__aside {
+      display: none;
+    }
+
+    .layout__main {
+      flex: 1;
+    }
+  }
+
+  // 混合菜单模式
+  &--mix {
+    flex-direction: row;
+  }
+
   &__aside {
     transition: width 0.3s;
     overflow: hidden;
@@ -40,6 +90,13 @@ const sidebarWidth = computed(() =>
     height: 100%;
   }
 
+  &__top-menu {
+    width: 100%;
+    height: 50px;
+    background-color: var(--bg-color);
+    border-bottom: 1px solid var(--color-border-lighter);
+  }
+
   &__main {
     flex: 1;
     display: flex;

package/src/composables/useApp.ts

@@ -1,62 +1,62 @@
-/**
- * 应用组合函数
- * 提供应用级别的状态和方法
- */
-
-import { computed } from 'vue'
-import { useAppStore } from '@/stores/app'
-import { useUserStore } from '@/stores/user'
-import { useAuthStore } from '@/stores/auth'
-
-/**
- * 应用级别组合函数
- * @returns 应用状态和方法
- */
-export function useApp() {
-  const appStore = useAppStore()
-  const userStore = useUserStore()
-  const authStore = useAuthStore()
-
-  // 用户名
-  const userName = computed(() => userStore.userName || '')
-
-  // 用户信息
-  const userInfo = computed(() => userStore.userInfo)
-
-  // 应用名称
-  const appName = computed(() => appStore.appName)
-
-  // 是否已登录
-  const isLoggedIn = computed(() => authStore.isLoggedIn)
-
-  // 主题相关
-  const isDark = computed(() => appStore.isDark)
-  const theme = computed(() => appStore.theme)
-
-  // 布局相关
-  const isCollapsed = computed(() => appStore.isCollapsed)
-  const layout = computed(() => appStore.layout)
-
-  // 切换主题
-  const toggleTheme = () => {
-    appStore.toggleTheme()
-  }
-
-  // 切换菜单折叠
-  const toggleCollapse = () => {
-    appStore.toggleCollapse()
-  }
-
-  return {
-    userName,
-    userInfo,
-    appName,
-    isLoggedIn,
-    isDark,
-    theme,
-    isCollapsed,
-    layout,
-    toggleTheme,
-    toggleCollapse
-  }
+/**
+ * 应用组合函数
+ * 提供应用级别的状态和方法
+ */
+
+import { computed } from 'vue'
+import { useAppStore } from '@/stores/app'
+import { useUserStore } from '@/stores/user'
+import { useAuthStore } from '@/stores/auth'
+
+/**
+ * 应用级别组合函数
+ * @returns 应用状态和方法
+ */
+export function useApp() {
+  const appStore = useAppStore()
+  const userStore = useUserStore()
+  const authStore = useAuthStore()
+
+  // 用户名
+  const userName = computed(() => userStore.userName || '')
+
+  // 用户信息
+  const userInfo = computed(() => userStore.userInfo)
+
+  // 应用名称
+  const appName = computed(() => appStore.appName)
+
+  // 是否已登录
+  const isLoggedIn = computed(() => authStore.isLoggedIn)
+
+  // 主题相关
+  const isDark = computed(() => appStore.isDark)
+  const theme = computed(() => appStore.theme)
+
+  // 布局相关
+  const isCollapsed = computed(() => appStore.isCollapsed)
+  const layout = computed(() => appStore.layout)
+
+  // 切换主题
+  const toggleTheme = () => {
+    appStore.toggleTheme()
+  }
+
+  // 切换菜单折叠
+  const toggleCollapse = () => {
+    appStore.toggleCollapse()
+  }
+
+  return {
+    userName,
+    userInfo,
+    appName,
+    isLoggedIn,
+    isDark,
+    theme,
+    isCollapsed,
+    layout,
+    toggleTheme,
+    toggleCollapse
+  }
 }

package/src/composables/useAuth.ts

@@ -1,17 +1,17 @@
-/**
- * 权限组合函数
- */
-
-import { computed } from 'vue'
-import { useUserStore } from '@/stores/user'
-
-export function useAuth() {
-  const userStore = useUserStore()
-
-  // 是否已登录
-  const isLoggedIn = computed(() => userStore.isLoggedIn)
-
-  return {
-    isLoggedIn
-  }
+/**
+ * 权限组合函数
+ */
+
+import { computed } from 'vue'
+import { useUserStore } from '@/stores/user'
+
+export function useAuth() {
+  const userStore = useUserStore()
+
+  // 是否已登录
+  const isLoggedIn = computed(() => userStore.isLoggedIn)
+
+  return {
+    isLoggedIn
+  }
 }

package/src/directives/permission.ts

@@ -1,28 +1,28 @@
-/**
- * 权限指令
- * v-permission="['user:edit']" 或 v-permission="'user:edit'"
- * 注意：tineco-ui 不支持 permissions 字段，此指令暂时只检查登录状态
- */
-
-import type { Directive, DirectiveBinding } from 'vue'
-import { useUserStore } from '@/stores/user'
-
-const permission: Directive = {
-  mounted(el: HTMLElement, _binding: DirectiveBinding<string | string[]>) {
-    const userStore = useUserStore()
-
-    // 如果没有登录，移除元素
-    if (!userStore.isLoggedIn) {
-      el.parentNode?.removeChild(el)
-    }
-
-    // 注意：tineco-ui 不支持 permissions 字段，此指令暂时不做权限判断
-  }
-}
-
-export default permission
-
-// 注册指令
-export function setupPermissionDirective(app: any) {
-  app.directive('permission', permission)
+/**
+ * 权限指令
+ * v-permission="['user:edit']" 或 v-permission="'user:edit'"
+ * 注意：tineco-ui 不支持 permissions 字段，此指令暂时只检查登录状态
+ */
+
+import type { Directive, DirectiveBinding } from 'vue'
+import { useUserStore } from '@/stores/user'
+
+const permission: Directive = {
+  mounted(el: HTMLElement, _binding: DirectiveBinding<string | string[]>) {
+    const userStore = useUserStore()
+
+    // 如果没有登录，移除元素
+    if (!userStore.isLoggedIn) {
+      el.parentNode?.removeChild(el)
+    }
+
+    // 注意：tineco-ui 不支持 permissions 字段，此指令暂时不做权限判断
+  }
+}
+
+export default permission
+
+// 注册指令
+export function setupPermissionDirective(app: any) {
+  app.directive('permission', permission)
 }

package/src/env.d.ts

@@ -1,19 +1,19 @@
-/// <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
-  readonly VITE_APP_ID: string
-  readonly VITE_APP_CLIENT_ID: string
-}
-
-interface ImportMeta {
-  readonly env: ImportMetaEnv
+/// <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
+  readonly VITE_APP_ID: string
+  readonly VITE_APP_CLIENT_ID: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
 }

package/src/index.ts

@@ -1,48 +1,48 @@
-// 组件
-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 { default as Login } from './views/login/index.vue'
-export { default as NotFound } from './views/error/404.vue'
-export { default as Forbidden } from './views/error/403.vue'
-
-// 组合式函数
-export * from './composables/useApp'
-export * from './composables/useAuth'
-export * from './composables/useForm'
-export * from './composables/useTable'
-
-// 工具函数
-export * from './utils/auth'
-export * from './utils/permission'
-export * from './utils/request'
-export * from './utils/storage'
-export * from './utils/config'
-
-// 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'
-export { createLayoutRoute, createRouter } from './router/layoutRoute'
-export { setupRouterGuards } from './router/guards'
-
-// API
-export * from './api/auth'
-export * from './api/system'
-export * from './api/user'
-
-// 枚举
-export * from './enums'
-
-// 指令
+// 组件
+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 { default as Login } from './views/login/index.vue'
+export { default as NotFound } from './views/error/404.vue'
+export { default as Forbidden } from './views/error/403.vue'
+
+// 组合式函数
+export * from './composables/useApp'
+export * from './composables/useAuth'
+export * from './composables/useForm'
+export * from './composables/useTable'
+
+// 工具函数
+export * from './utils/auth'
+export * from './utils/permission'
+export * from './utils/request'
+export * from './utils/storage'
+export * from './utils/config'
+
+// 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'
+export { createLayoutRoute, createRouter } from './router/layoutRoute'
+export { setupRouterGuards } from './router/guards'
+
+// API
+export * from './api/auth'
+export * from './api/system'
+export * from './api/user'
+
+// 枚举
+export * from './enums'
+
+// 指令
 export { default as permissionDirective } from './directives/permission'