xto-fronted 0.4.102 → 0.4.103

package/src/components/Layout/Sidebar.vue

@@ -1,230 +1,230 @@
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useMenuStore } from '@/stores/menu'
-import { useUserStore } from '@/stores/user'
-import { useAuthStore } from '@/stores/auth'
-import { useAppStore } from '@/stores/app'
-import { Menu } from '@xto/navigation'
-import { Button } from '@xto/base'
-import { local } from '@/utils/storage'
-import SidebarMenuItem from './SidebarMenuItem.vue'
-
-// Props
-const props = withDefaults(defineProps<{
-  menuList?: any[]
-  showLogo?: boolean
-  showUser?: boolean
-  logoSrc?: string
-}>(), {
-  menuList: () => [],
-  showLogo: true,
-  showUser: true,
-  logoSrc: '/vite.svg'
-})
-
-const route = useRoute()
-const router = useRouter()
-const menuStore = useMenuStore()
-const userStore = useUserStore()
-const authStore = useAuthStore()
-const appStore = useAppStore()
-
-// 使用传入的菜单列表，如果没有传入则使用 store 中的
-const displayMenuList = computed(() => props.menuList.length > 0 ? props.menuList : menuStore.menuList)
-
-const isCollapsed = computed(() => appStore.isCollapsed)
-const activeMenu = computed(() => route.path)
-
-// 获取菜单的唯一标识（优先使用 menuId，其次 menuCode，最后 menuUrl）
-const getMenuKey = (menu: any): string => {
-  return menu.menuId || menu.menuCode || menu.menuUrl || ''
-}
-
-// 菜单展开状态持久化（基于当前菜单列表的标识）
-const OPENED_MENUS_KEY = 'sidebar_opened_menus'
-const MENU_LIST_KEY = 'sidebar_menu_list_key'
-
-// 获取当前菜单列表的唯一标识
-const getCurrentMenuListKey = (): string => {
-  return displayMenuList.value.map(getMenuKey).join(',')
-}
-
-// 初始化展开状态：只有当菜单列表相同时才恢复之前的展开状态
-const savedMenuListKey = local.get<string>(MENU_LIST_KEY) || ''
-const currentKey = getCurrentMenuListKey()
-const initialOpenedMenus = savedMenuListKey === currentKey
-  ? (local.get<string[]>(OPENED_MENUS_KEY) || [])
-  : []
-const openedMenus = ref<string[]>(initialOpenedMenus)
-
-// 监听变化并持久化
-watch(openedMenus, (val) => {
-  local.set(OPENED_MENUS_KEY, val)
-  local.set(MENU_LIST_KEY, getCurrentMenuListKey())
-}, { deep: true })
-
-// 递归查找当前路由对应的父菜单路径（返回 menuId）
-const findMenuPath = (menus: any[], path: string, parentIds: string[] = []): string[] | null => {
-  for (const menu of menus) {
-    // 当前菜单匹配（使用 menuUrl 匹配路由）
-    if (menu.menuUrl && (path === menu.menuUrl || path.startsWith(menu.menuUrl + '/'))) {
-      return [...parentIds, getMenuKey(menu)]
-    }
-    // 递归查找子菜单
-    if (menu.children?.length) {
-      const result = findMenuPath(menu.children, path, [...parentIds, getMenuKey(menu)])
-      if (result) return result
-    }
-  }
-  return null
-}
-
-// 监听路由变化，确保当前路由的父菜单展开
-watch([() => route.path, displayMenuList], ([path, menus]) => {
-  if (menus.length > 0) {
-    const menuPath = findMenuPath(menus, path)
-    if (menuPath) {
-      // 获取需要展开的父菜单（不包括当前页面本身）
-      const parentsToOpen = menuPath.slice(0, -1)
-      // 合并已展开的菜单，确保父菜单保持展开状态
-      const newOpenedMenus = new Set([...openedMenus.value, ...parentsToOpen])
-      openedMenus.value = Array.from(newOpenedMenus)
-    }
-  }
-}, { immediate: true })
-
-// 监听菜单列表变化，清空展开状态（用于 mix 模式切换一级菜单时）
-watch(displayMenuList, (newList, oldList) => {
-  // 当菜单列表完全变化时（如 mix 模式切换一级菜单），清空展开状态
-  if (newList !== oldList) {
-    openedMenus.value = []
-    local.set(OPENED_MENUS_KEY, [])
-    local.set(MENU_LIST_KEY, getCurrentMenuListKey())
-  }
-}, { immediate: false })
-
-// 菜单主题相关
-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 handleLogout = () => {
-  authStore.logout()
-  userStore.clearUserInfo()
-  menuStore.clearMenu()
-  router.push('/login')
-}
-</script>
-
-<template>
-  <div class="sidebar" :class="{ 'sidebar--collapsed': isCollapsed }">
-    <!-- Logo -->
-    <div v-if="props.showLogo" class="sidebar__logo">
-      <img :src="props.logoSrc" alt="Logo" class="sidebar__logo-img" />
-      <span v-show="!isCollapsed" class="sidebar__logo-text">{{ appStore.appName }}</span>
-    </div>
-
-    <!-- 菜单 -->
-    <Menu
-      v-model="activeMenu"
-      v-model:openeds="openedMenus"
-      mode="vertical"
-      :collapse="isCollapsed"
-      :collapse-transition="false"
-      :background-color="menuBgColor"
-      :text-color="menuTextColor"
-      :active-text-color="menuActiveTextColor"
-      class="sidebar__menu"
-      @select="handleMenuSelect"
-    >
-      <template v-for="menu in displayMenuList" :key="getMenuKey(menu)">
-        <SidebarMenuItem :menu="menu" />
-      </template>
-    </Menu>
-
-    <!-- 用户信息 -->
-    <div v-if="props.showUser && !isCollapsed" class="sidebar__user">
-      <div class="sidebar__user-info">
-        <span class="sidebar__user-name">{{ userStore.userName }}</span>
-        <span class="sidebar__user-role">{{ userStore.departmentName }}</span>
-      </div>
-      <Button type="text" size="small" @click="handleLogout">退出</Button>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.sidebar {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  background-color: var(--bg-color);
-  border-right: 1px solid var(--color-border-lighter);
-
-  &--collapsed {
-    .sidebar__logo {
-      justify-content: center;
-      padding: 0;
-    }
-  }
-
-  &__logo {
-    height: 50px;
-    display: flex;
-    align-items: center;
-    padding: 0 20px;
-    gap: 10px;
-    border-bottom: 1px solid var(--color-border-lighter);
-  }
-
-  &__logo-img {
-    width: 32px;
-    height: 32px;
-  }
-
-  &__logo-text {
-    font-size: 16px;
-    font-weight: 600;
-    color: var(--color-primary);
-  }
-
-  &__menu {
-    flex: 1;
-    border-right: none;
-    overflow-y: auto;
-  }
-
-  &__user {
-    padding: 10px;
-    border-top: 1px solid var(--color-border-lighter);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  &__user-info {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-  }
-
-  &__user-name {
-    font-size: 14px;
-    font-weight: 500;
-  }
-
-  &__user-role {
-    font-size: 12px;
-    color: var(--color-text-secondary);
-  }
-}
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useMenuStore } from '@/stores/menu'
+import { useUserStore } from '@/stores/user'
+import { useAuthStore } from '@/stores/auth'
+import { useAppStore } from '@/stores/app'
+import { Menu } from '@xto/navigation'
+import { Button } from '@xto/base'
+import { local } from '@/utils/storage'
+import SidebarMenuItem from './SidebarMenuItem.vue'
+
+// Props
+const props = withDefaults(defineProps<{
+  menuList?: any[]
+  showLogo?: boolean
+  showUser?: boolean
+  logoSrc?: string
+}>(), {
+  menuList: () => [],
+  showLogo: true,
+  showUser: true,
+  logoSrc: '/vite.svg'
+})
+
+const route = useRoute()
+const router = useRouter()
+const menuStore = useMenuStore()
+const userStore = useUserStore()
+const authStore = useAuthStore()
+const appStore = useAppStore()
+
+// 使用传入的菜单列表，如果没有传入则使用 store 中的
+const displayMenuList = computed(() => props.menuList.length > 0 ? props.menuList : menuStore.menuList)
+
+const isCollapsed = computed(() => appStore.isCollapsed)
+const activeMenu = computed(() => route.path)
+
+// 获取菜单的唯一标识（优先使用 menuId，其次 menuCode，最后 menuUrl）
+const getMenuKey = (menu: any): string => {
+  return menu.menuId || menu.menuCode || menu.menuUrl || ''
+}
+
+// 菜单展开状态持久化（基于当前菜单列表的标识）
+const OPENED_MENUS_KEY = 'sidebar_opened_menus'
+const MENU_LIST_KEY = 'sidebar_menu_list_key'
+
+// 获取当前菜单列表的唯一标识
+const getCurrentMenuListKey = (): string => {
+  return displayMenuList.value.map(getMenuKey).join(',')
+}
+
+// 初始化展开状态：只有当菜单列表相同时才恢复之前的展开状态
+const savedMenuListKey = local.get<string>(MENU_LIST_KEY) || ''
+const currentKey = getCurrentMenuListKey()
+const initialOpenedMenus = savedMenuListKey === currentKey
+  ? (local.get<string[]>(OPENED_MENUS_KEY) || [])
+  : []
+const openedMenus = ref<string[]>(initialOpenedMenus)
+
+// 监听变化并持久化
+watch(openedMenus, (val) => {
+  local.set(OPENED_MENUS_KEY, val)
+  local.set(MENU_LIST_KEY, getCurrentMenuListKey())
+}, { deep: true })
+
+// 递归查找当前路由对应的父菜单路径（返回 menuId）
+const findMenuPath = (menus: any[], path: string, parentIds: string[] = []): string[] | null => {
+  for (const menu of menus) {
+    // 当前菜单匹配（使用 menuUrl 匹配路由）
+    if (menu.menuUrl && (path === menu.menuUrl || path.startsWith(menu.menuUrl + '/'))) {
+      return [...parentIds, getMenuKey(menu)]
+    }
+    // 递归查找子菜单
+    if (menu.children?.length) {
+      const result = findMenuPath(menu.children, path, [...parentIds, getMenuKey(menu)])
+      if (result) return result
+    }
+  }
+  return null
+}
+
+// 监听路由变化，确保当前路由的父菜单展开
+watch([() => route.path, displayMenuList], ([path, menus]) => {
+  if (menus.length > 0) {
+    const menuPath = findMenuPath(menus, path)
+    if (menuPath) {
+      // 获取需要展开的父菜单（不包括当前页面本身）
+      const parentsToOpen = menuPath.slice(0, -1)
+      // 合并已展开的菜单，确保父菜单保持展开状态
+      const newOpenedMenus = new Set([...openedMenus.value, ...parentsToOpen])
+      openedMenus.value = Array.from(newOpenedMenus)
+    }
+  }
+}, { immediate: true })
+
+// 监听菜单列表变化，清空展开状态（用于 mix 模式切换一级菜单时）
+watch(displayMenuList, (newList, oldList) => {
+  // 当菜单列表完全变化时（如 mix 模式切换一级菜单），清空展开状态
+  if (newList !== oldList) {
+    openedMenus.value = []
+    local.set(OPENED_MENUS_KEY, [])
+    local.set(MENU_LIST_KEY, getCurrentMenuListKey())
+  }
+}, { immediate: false })
+
+// 菜单主题相关
+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 handleLogout = () => {
+  authStore.logout()
+  userStore.clearUserInfo()
+  menuStore.clearMenu()
+  router.push(appStore.loginPath)
+}
+</script>
+
+<template>
+  <div class="sidebar" :class="{ 'sidebar--collapsed': isCollapsed }">
+    <!-- Logo -->
+    <div v-if="props.showLogo" class="sidebar__logo">
+      <img :src="props.logoSrc" alt="Logo" class="sidebar__logo-img" />
+      <span v-show="!isCollapsed" class="sidebar__logo-text">{{ appStore.appName }}</span>
+    </div>
+
+    <!-- 菜单 -->
+    <Menu
+      v-model="activeMenu"
+      v-model:openeds="openedMenus"
+      mode="vertical"
+      :collapse="isCollapsed"
+      :collapse-transition="false"
+      :background-color="menuBgColor"
+      :text-color="menuTextColor"
+      :active-text-color="menuActiveTextColor"
+      class="sidebar__menu"
+      @select="handleMenuSelect"
+    >
+      <template v-for="menu in displayMenuList" :key="getMenuKey(menu)">
+        <SidebarMenuItem :menu="menu" />
+      </template>
+    </Menu>
+
+    <!-- 用户信息 -->
+    <div v-if="props.showUser && !isCollapsed" class="sidebar__user">
+      <div class="sidebar__user-info">
+        <span class="sidebar__user-name">{{ userStore.userName }}</span>
+        <span class="sidebar__user-role">{{ userStore.departmentName }}</span>
+      </div>
+      <Button type="text" size="small" @click="handleLogout">退出</Button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.sidebar {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bg-color);
+  border-right: 1px solid var(--color-border-lighter);
+
+  &--collapsed {
+    .sidebar__logo {
+      justify-content: center;
+      padding: 0;
+    }
+  }
+
+  &__logo {
+    height: 50px;
+    display: flex;
+    align-items: center;
+    padding: 0 20px;
+    gap: 10px;
+    border-bottom: 1px solid var(--color-border-lighter);
+  }
+
+  &__logo-img {
+    width: 32px;
+    height: 32px;
+  }
+
+  &__logo-text {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--color-primary);
+  }
+
+  &__menu {
+    flex: 1;
+    border-right: none;
+    overflow-y: auto;
+  }
+
+  &__user {
+    padding: 10px;
+    border-top: 1px solid var(--color-border-lighter);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__user-info {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  &__user-name {
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  &__user-role {
+    font-size: 12px;
+    color: var(--color-text-secondary);
+  }
+}
 </style>