xto-fronted 0.4.6 → 0.4.8

package/src/components/Layout/index.vue

@@ -1,64 +1,444 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useAppStore } from '@/stores/app'
-import Sidebar from './Sidebar.vue'
-import Header from './Header.vue'
-
-const appStore = useAppStore()
-
-const sidebarWidth = computed(() =>
-  appStore.isCollapsed ? '64px' : '210px'
-)
-</script>
-
-<template>
-  <div class="layout">
-    <aside class="layout__aside" :style="{ width: sidebarWidth }">
-      <Sidebar />
-    </aside>
-    <div class="layout__main">
-      <header class="layout__header">
-        <Header />
-      </header>
-      <main class="layout__content">
-        <router-view />
-      </main>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.layout {
-  display: flex;
-  width: 100%;
-  height: 100%;
-
-  &__aside {
-    transition: width 0.3s;
-    overflow: hidden;
-    flex-shrink: 0;
-    height: 100%;
-  }
-
-  &__main {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    height: 100%;
-  }
-
-  &__header {
-    height: 50px;
-    background-color: var(--bg-color);
-    border-bottom: 1px solid var(--color-border-lighter);
-    flex-shrink: 0;
-  }
-
-  &__content {
-    flex: 1;
-    overflow: auto;
-    background-color: var(--bg-color-page);
-  }
-}
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useAppStore } from '@/stores/app'
+import { useMenuStore } from '@/stores/menu'
+import Sidebar from './Sidebar.vue'
+import Header from './Header.vue'
+import { Menu, MenuItem, SubMenu } from '@xto/navigation'
+import { Icon } from '@xto/base'
+
+const route = useRoute()
+const router = useRouter()
+const appStore = useAppStore()
+const menuStore = useMenuStore()
+
+// 菜单选择处理
+const handleMenuSelect = (index: string) => {
+  if (index && index !== route.path) {
+    router.push(index)
+  }
+}
+
+// 混合布局顶部菜单选择处理
+const handleTopMenuSelect = (index: string) => {
+  const selectedMenu = menuStore.menuList.find(menu => menu.menuCode === index)
+  if (selectedMenu) {
+    if (selectedMenu.children && selectedMenu.children.length > 0) {
+      const firstChild = selectedMenu.children[0]
+      if (firstChild.menuUrl && firstChild.menuUrl !== route.path) {
+        router.push(firstChild.menuUrl)
+      }
+    } else if (selectedMenu.menuUrl && selectedMenu.menuUrl !== route.path) {
+      router.push(selectedMenu.menuUrl)
+    }
+  }
+}
+
+const sidebarWidth = computed(() =>
+  appStore.isCollapsed ? '64px' : '210px'
+)
+
+const currentLayout = computed(() => appStore.layout)
+const currentPath = computed(() => route.path)
+
+// 获取一级菜单
+const topLevelMenus = computed(() => {
+  return menuStore.menuList.map(menu => ({
+    menuCode: menu.menuCode,
+    menuName: menu.menuName,
+    menuUrl: menu.menuUrl,
+    icon: menu.icon,
+    hasChildren: menu.children && menu.children.length > 0
+  }))
+})
+
+// 活动的顶部菜单
+const activeTopMenu = computed(() => {
+  for (const menu of menuStore.menuList) {
+    if (menu.menuUrl === currentPath.value) return menu.menuCode
+    if (menu.children) {
+      for (const child of menu.children) {
+        if (child.menuUrl === currentPath.value) return menu.menuCode
+      }
+    }
+  }
+  return topLevelMenus.value[0]?.menuCode || ''
+})
+
+// 混合布局子菜单
+const mixSubMenus = computed(() => {
+  if (currentLayout.value !== 'mix') return []
+  const selectedTopMenu = menuStore.menuList.find(
+    menu => menu.menuCode === activeTopMenu.value
+  )
+  return selectedTopMenu?.children || []
+})
+
+// 菜单主题
+const menuBgColor = computed(() => appStore.isDark ? '#1d1e1f' : '#fff')
+const menuTextColor = computed(() => appStore.isDark ? '#cfd3dc' : '#303133')
+const menuActiveTextColor = computed(() => '#409eff')
+
+// 图标列表
+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-')) {
+    return icon.replace('tineco-icon-', '')
+  }
+  return icon
+}
+
+const iconExists = (iconName: string): boolean => {
+  return knownIcons.has(iconName)
+}
+
+const getFirstChar = (name?: string): string => {
+  if (!name) return ''
+  return name.charAt(0)
+}
+</script>
+
+<template>
+  <!-- 左侧菜单布局 -->
+  <div v-if="currentLayout === 'sidebar'" class="layout layout--sidebar">
+    <aside class="layout__aside" :style="{ width: sidebarWidth }">
+      <Sidebar />
+    </aside>
+    <div class="layout__main">
+      <header class="layout__header">
+        <Header />
+      </header>
+      <main class="layout__content">
+        <router-view />
+      </main>
+    </div>
+  </div>
+
+  <!-- 顶部菜单布局 -->
+  <div v-else-if="currentLayout === 'top'" class="layout layout--top">
+    <header class="layout__header-top">
+      <div class="layout__logo">
+        <img src="/vite.svg" alt="Logo" class="layout__logo-img" />
+        <span class="layout__logo-text">{{ appStore.appName }}</span>
+      </div>
+      <Menu
+        mode="horizontal"
+        :default-active="activeTopMenu"
+        class="layout__top-menu"
+        background-color="transparent"
+        :text-color="menuTextColor"
+        :active-text-color="menuActiveTextColor"
+        @select="handleMenuSelect"
+      >
+        <template v-for="menu in topLevelMenus" :key="menu.menuUrl">
+          <SubMenu v-if="menu.hasChildren" :index="menu.menuCode">
+            <template #title>
+              <span class="layout__menu-icon">
+                <Icon v-if="iconExists(getMenuIcon(menu.icon))" :name="getMenuIcon(menu.icon)" :size="16" />
+                <span v-else class="layout__menu-char">{{ getFirstChar(menu.menuName) }}</span>
+              </span>
+              <span>{{ menu.menuName }}</span>
+            </template>
+            <MenuItem
+              v-for="child in menuStore.menuList.find(m => m.menuCode === menu.menuCode)?.children"
+              :key="child.menuUrl"
+              :index="child.menuUrl"
+            >
+              <span>{{ child.menuName }}</span>
+            </MenuItem>
+          </SubMenu>
+          <MenuItem v-else :index="menu.menuUrl">
+            <span class="layout__menu-icon">
+              <Icon v-if="iconExists(getMenuIcon(menu.icon))" :name="getMenuIcon(menu.icon)" :size="16" />
+              <span v-else class="layout__menu-char">{{ getFirstChar(menu.menuName) }}</span>
+            </span>
+            <span>{{ menu.menuName }}</span>
+          </MenuItem>
+        </template>
+      </Menu>
+      <div class="layout__header-right">
+        <Header />
+      </div>
+    </header>
+    <main class="layout__content-top">
+      <router-view />
+    </main>
+  </div>
+
+  <!-- 混合布局 -->
+  <div v-else-if="currentLayout === 'mix'" class="layout layout--mix">
+    <header class="layout__header-mix">
+      <div class="layout__logo">
+        <img src="/vite.svg" alt="Logo" class="layout__logo-img" />
+        <span class="layout__logo-text">{{ appStore.appName }}</span>
+      </div>
+      <Menu
+        mode="horizontal"
+        :default-active="activeTopMenu"
+        class="layout__top-menu"
+        background-color="transparent"
+        :text-color="menuTextColor"
+        :active-text-color="menuActiveTextColor"
+        @select="handleTopMenuSelect"
+      >
+        <MenuItem
+          v-for="menu in topLevelMenus"
+          :key="menu.menuCode"
+          :index="menu.menuCode"
+        >
+          <span class="layout__menu-icon">
+            <Icon v-if="iconExists(getMenuIcon(menu.icon))" :name="getMenuIcon(menu.icon)" :size="16" />
+            <span v-else class="layout__menu-char">{{ getFirstChar(menu.menuName) }}</span>
+          </span>
+          <span>{{ menu.menuName }}</span>
+        </MenuItem>
+      </Menu>
+      <div class="layout__header-right">
+        <Header />
+      </div>
+    </header>
+    <div class="layout__mix-body">
+      <aside v-if="mixSubMenus.length > 0" class="layout__mix-aside" :style="{ width: sidebarWidth }">
+        <div class="layout__mix-sidebar">
+          <Menu
+            mode="vertical"
+            :collapse="appStore.isCollapsed"
+            :collapse-transition="false"
+            :default-active="currentPath"
+            :background-color="menuBgColor"
+            :text-color="menuTextColor"
+            :active-text-color="menuActiveTextColor"
+            class="layout__mix-menu"
+            @select="handleMenuSelect"
+          >
+            <MenuItem
+              v-for="child in mixSubMenus"
+              :key="child.menuUrl"
+              :index="child.menuUrl"
+            >
+              <span class="layout__menu-icon">
+                <Icon v-if="iconExists(getMenuIcon(child.icon))" :name="getMenuIcon(child.icon)" :size="16" />
+                <span v-else class="layout__menu-char">{{ getFirstChar(child.menuName) }}</span>
+              </span>
+              <span>{{ child.menuName }}</span>
+            </MenuItem>
+          </Menu>
+        </div>
+      </aside>
+      <main class="layout__content-mix">
+        <router-view />
+      </main>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.layout {
+  display: flex;
+  width: 100%;
+  height: 100%;
+
+  // 左侧菜单布局
+  &--sidebar {
+    flex-direction: row;
+
+    .layout__aside {
+      transition: width 0.3s;
+      overflow: hidden;
+      flex-shrink: 0;
+      height: 100%;
+    }
+
+    .layout__main {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      height: 100%;
+    }
+
+    .layout__header {
+      height: 50px;
+      background-color: var(--bg-color);
+      border-bottom: 1px solid var(--color-border-lighter);
+      flex-shrink: 0;
+    }
+
+    .layout__content {
+      flex: 1;
+      overflow: auto;
+      background-color: var(--bg-color-page);
+    }
+  }
+
+  // 顶部菜单布局
+  &--top {
+    flex-direction: column;
+
+    .layout__header-top {
+      height: 60px;
+      display: flex;
+      align-items: center;
+      padding: 0 20px;
+      background-color: var(--bg-color);
+      border-bottom: 1px solid var(--color-border-lighter);
+      flex-shrink: 0;
+
+      .layout__logo {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        margin-right: 30px;
+      }
+
+      .layout__logo-img {
+        width: 32px;
+        height: 32px;
+      }
+
+      .layout__logo-text {
+        font-size: 16px;
+        font-weight: 600;
+        color: var(--color-primary);
+      }
+
+      .layout__top-menu {
+        flex: 1;
+        border-bottom: none;
+        background-color: transparent;
+      }
+
+      .layout__header-right {
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    .layout__content-top {
+      flex: 1;
+      overflow: auto;
+      background-color: var(--bg-color-page);
+    }
+  }
+
+  // 混合布局
+  &--mix {
+    flex-direction: column;
+
+    .layout__header-mix {
+      height: 60px;
+      display: flex;
+      align-items: center;
+      padding: 0 20px;
+      background-color: var(--bg-color);
+      border-bottom: 1px solid var(--color-border-lighter);
+      flex-shrink: 0;
+
+      .layout__logo {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        margin-right: 30px;
+      }
+
+      .layout__logo-img {
+        width: 32px;
+        height: 32px;
+      }
+
+      .layout__logo-text {
+        font-size: 16px;
+        font-weight: 600;
+        color: var(--color-primary);
+      }
+
+      .layout__top-menu {
+        flex: 1;
+        border-bottom: none;
+        background-color: transparent;
+      }
+
+      .layout__header-right {
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    .layout__mix-body {
+      flex: 1;
+      display: flex;
+      overflow: hidden;
+
+      .layout__mix-aside {
+        transition: width 0.3s;
+        overflow: hidden;
+        flex-shrink: 0;
+        background-color: var(--bg-color);
+        border-right: 1px solid var(--color-border-lighter);
+      }
+
+      .layout__mix-sidebar {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .layout__mix-menu {
+        flex: 1;
+        border-right: none;
+        overflow-y: auto;
+      }
+
+      .layout__content-mix {
+        flex: 1;
+        overflow: auto;
+        background-color: var(--bg-color-page);
+      }
+    }
+  }
+
+  // 公共样式
+  &__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/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
+  }
 }