xto-fronted 0.4.90 → 0.4.91

package/src/components/Layout/Sidebar.vue

@@ -1,199 +1,199 @@
-<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
-}>(), {
-  menuList: () => [],
-  showLogo: true,
-  showUser: true
-})
-
-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)
-
-// 菜单展开状态持久化
-const OPENED_MENUS_KEY = 'sidebar_opened_menus'
-const openedMenus = ref<string[]>(local.get<string[]>(OPENED_MENUS_KEY) || [])
-
-// 监听变化并持久化
-watch(openedMenus, (val) => {
-  local.set(OPENED_MENUS_KEY, val)
-}, { deep: true })
-
-// 递归查找当前路由对应的父菜单路径
-const findMenuPath = (menus: any[], path: string, parentUrls: string[] = []): string[] | null => {
-  for (const menu of menus) {
-    // 当前菜单匹配
-    if (path === menu.menuUrl || path.startsWith(menu.menuUrl + '/')) {
-      return [...parentUrls, menu.menuUrl]
-    }
-    // 递归查找子菜单
-    if (menu.children?.length) {
-      const result = findMenuPath(menu.children, path, [...parentUrls, menu.menuUrl])
-      if (result) return result
-    }
-  }
-  return null
-}
-
-// 监听路由变化，只展开当前路由相关的父菜单
-watch([() => route.path, displayMenuList], ([path, menus]) => {
-  if (menus.length > 0) {
-    const menuPath = findMenuPath(menus, path)
-    if (menuPath) {
-      // 只保留路径上的父菜单（不包括当前页面本身）
-      openedMenus.value = menuPath.slice(0, -1)
-    } else {
-      // 如果找不到匹配的菜单，关闭所有
-      openedMenus.value = []
-    }
-  }
-}, { immediate: true })
-
-// 菜单主题相关
-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="/vite.svg" 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="menu.menuUrl">
-        <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
+}>(), {
+  menuList: () => [],
+  showLogo: true,
+  showUser: true
+})
+
+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)
+
+// 菜单展开状态持久化
+const OPENED_MENUS_KEY = 'sidebar_opened_menus'
+const openedMenus = ref<string[]>(local.get<string[]>(OPENED_MENUS_KEY) || [])
+
+// 监听变化并持久化
+watch(openedMenus, (val) => {
+  local.set(OPENED_MENUS_KEY, val)
+}, { deep: true })
+
+// 递归查找当前路由对应的父菜单路径
+const findMenuPath = (menus: any[], path: string, parentUrls: string[] = []): string[] | null => {
+  for (const menu of menus) {
+    // 当前菜单匹配
+    if (path === menu.menuUrl || path.startsWith(menu.menuUrl + '/')) {
+      return [...parentUrls, menu.menuUrl]
+    }
+    // 递归查找子菜单
+    if (menu.children?.length) {
+      const result = findMenuPath(menu.children, path, [...parentUrls, menu.menuUrl])
+      if (result) return result
+    }
+  }
+  return null
+}
+
+// 监听路由变化，只展开当前路由相关的父菜单
+watch([() => route.path, displayMenuList], ([path, menus]) => {
+  if (menus.length > 0) {
+    const menuPath = findMenuPath(menus, path)
+    if (menuPath) {
+      // 只保留路径上的父菜单（不包括当前页面本身）
+      openedMenus.value = menuPath.slice(0, -1)
+    } else {
+      // 如果找不到匹配的菜单，关闭所有
+      openedMenus.value = []
+    }
+  }
+}, { immediate: true })
+
+// 菜单主题相关
+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="/vite.svg" 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="menu.menuUrl">
+        <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>