xto-fronted 0.4.15 → 0.4.17

package/src/components/Layout/MixTopMenu.vue

@@ -1,253 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useMenuStore } from '@/stores/menu'
-import { useAppStore } from '@/stores/app'
-import { Icon } from '@xto/base'
-import type { MenuItem } from '@/types/api'
-
-const route = useRoute()
-const router = useRouter()
-const menuStore = useMenuStore()
-const appStore = useAppStore()
-
-// 当前选中的一级菜单路径
-const activeTopMenu = computed(() => appStore.activeTopMenuPath)
-
-// 一级菜单列表（只显示顶层菜单）
-const topMenuList = computed(() => menuStore.menuList)
-
-// 已知的图标名称列表
-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)
-}
-
-// 点击一级菜单
-const handleTopMenuClick = (menu: MenuItem) => {
-  appStore.setActiveTopMenuPath(menu.menuUrl)
-
-  // 如果一级菜单有直接跳转路径，则跳转
-  if (menu.menuUrl) {
-    // 如果有子菜单，跳转到第一个子菜单或默认子菜单
-    if (menu.children && menu.children.length > 0) {
-      // 找到默认子菜单或第一个子菜单
-      const defaultChild = menu.children.find(c => c.isDefault) || menu.children[0]
-      if (defaultChild && defaultChild.menuUrl !== route.path) {
-        router.push(defaultChild.menuUrl)
-      }
-    } else if (menu.menuUrl !== route.path) {
-      router.push(menu.menuUrl)
-    }
-  }
-}
-
-// 初始化：根据当前路由设置一级菜单选中状态
-onMounted(() => {
-  if (!appStore.activeTopMenuPath && topMenuList.value.length > 0) {
-    // 找到当前路由所属的一级菜单
-    for (const menu of topMenuList.value) {
-      if (menu.menuUrl === route.path) {
-        appStore.setActiveTopMenuPath(menu.menuUrl)
-        break
-      }
-      if (menu.children && menu.children.length > 0) {
-        const found = menu.children.some(child =>
-          child.menuUrl === route.path ||
-          (child.children && child.children.some(c => c.menuUrl === route.path))
-        )
-        if (found) {
-          appStore.setActiveTopMenuPath(menu.menuUrl)
-          break
-        }
-      }
-    }
-    // 如果没找到，默认选中第一个
-    if (!appStore.activeTopMenuPath) {
-      appStore.setActiveTopMenuPath(topMenuList.value[0].menuUrl)
-    }
-  }
-})
-</script>
-
-<template>
-  <div class="mix-top-menu">
-    <div class="mix-top-menu__logo">
-      <span class="mix-top-menu__logo-text">{{ appStore.appName }}</span>
-    </div>
-    <div class="mix-top-menu__items">
-      <div
-        v-for="menu in topMenuList"
-        :key="menu.menuUrl"
-        :class="['mix-top-menu__item', { 'is-active': activeTopMenu === menu.menuUrl }]"
-        @click="handleTopMenuClick(menu)"
-      >
-        <span class="mix-top-menu__item-icon">
-          <Icon v-if="iconExists(getMenuIcon(menu.icon))" :name="getMenuIcon(menu.icon)" :size="16" />
-          <span v-else class="mix-top-menu__item-char">{{ getFirstChar(menu.menuName) }}</span>
-        </span>
-        <span class="mix-top-menu__item-text">{{ menu.menuName }}</span>
-      </div>
-    </div>
-    <div class="mix-top-menu__actions">
-      <!-- 这里可以放一些操作按钮 -->
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.mix-top-menu {
-  width: 100%;
-  height: 50px;
-  display: flex;
-  align-items: center;
-  background-color: var(--bg-color);
-  border-bottom: 1px solid var(--color-border-lighter);
-  padding: 0 20px;
-
-  &__logo {
-    display: flex;
-    align-items: center;
-    padding-right: 20px;
-    border-right: 1px solid var(--color-border-lighter);
-    margin-right: 20px;
-  }
-
-  &__logo-text {
-    font-size: 16px;
-    font-weight: 600;
-    color: var(--color-primary);
-  }
-
-  &__items {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    gap: 4px;
-  }
-
-  &__item {
-    display: flex;
-    align-items: center;
-    padding: 8px 16px;
-    cursor: pointer;
-    border-radius: 4px;
-    transition: all 0.2s;
-
-    &:hover {
-      background-color: var(--color-fill);
-    }
-
-    &.is-active {
-      background-color: var(--color-primary-light-9);
-      color: var(--color-primary);
-    }
-  }
-
-  &__item-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    height: 16px;
-    margin-right: 8px;
-  }
-
-  &__item-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;
-  }
-
-  &__item-text {
-    font-size: 14px;
-    color: var(--color-text-regular);
-  }
-
-  &.is-active .mix-top-menu__item-text {
-    color: var(--color-primary);
-  }
-
-  &__actions {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-}
-</style>