initial commit

2026-01-16 22:04:48 +08:00
parent 28cc3ec005
commit c5244e2b75
95 changed files with 27633 additions and 0 deletions
@@ -0,0 +1,206 @@
+<template>
+    <el-menu :default-active="state.activeMenu" @select="onSelect">
+        <el-menu-item @click="handleClick('/')" v-blur index="index">
+            <Icon v-if="props.showIcon" name="fa fa-home" color="var(--el-text-color-primary)" />
+            <template #title>{{ t('主页') }}</template>
+        </el-menu-item>
+
+        <!-- 动态菜单 -->
+        <MenuSub :menus="systemStore.site.head_nav" :show-icon="showIcon" />
+    </el-menu>
+</template>
+
+<script setup lang="ts">
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
+import type { Menus } from '~/stores/interface'
+import MenuSub from './menu-sub.vue'
+
+const route = useRoute()
+const systemStore = useSystemStore()
+
+interface Props {
+    showIcon?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    showIcon: false,
+})
+
+const state = reactive({
+    activeMenu: '',
+    switchingLanguage: false,
+})
+
+/**
+ * 设置激活菜单
+ */
+const setActiveMenu = (route: RouteLocationNormalizedLoaded) => {
+    if (route.path == '/') return (state.activeMenu = 'index')
+
+    const menuId = findMenus(route)
+    if (menuId) {
+        state.activeMenu = 'column-' + menuId
+    } else if (route.path.startsWith('/user')) {
+        state.activeMenu = 'user'
+    }
+}
+
+/**
+ * 菜单被点击时额外对无需激活的菜单处理（外链、暗黑模式开关、语言切换等）
+ * 检查菜单是否需要激活，如果否，还原 state.activeMenu
+ */
+const onSelect = (index: string) => {
+    if (noNeedActive(systemStore.site.head_nav, index)) {
+        const oldActiveMenu = state.activeMenu
+        state.activeMenu = ''
+        nextTick(() => {
+            state.activeMenu = oldActiveMenu
+        })
+    }
+}
+
+/**
+ * 检查一个菜单是否需要激活态
+ * @param menus
+ * @param index
+ */
+const noNeedActive = (menus: Menus[], index: string) => {
+    if (index.indexOf('language-switch') === 0 || index == 'theme-switch') {
+        return true
+    }
+    return isExternalLink(menus, index)
+}
+
+/**
+ * 检查一个菜单是否是外站链接，如果是，不要激活
+ * @param menus
+ * @param index
+ */
+const isExternalLink = (menus: Menus[], index: string): boolean => {
+    // 修复：添加空值检查
+    if (!menus || !Array.isArray(menus)) {
+        return false
+    }
+    
+    for (const key in menus) {
+        // 修复：检查 menus[key] 是否存在
+        if (!menus[key]) continue
+        
+        const columnIndex = `column-${menus[key].id}`
+        if (columnIndex == index) {
+            return menus[key].meta?.menu_type == 'link'
+        }
+        // 修复：添加 children 存在性检查
+        if (menus[key].children && Array.isArray(menus[key].children) && menus[key].children.length) {
+            const result = isExternalLink(menus[key].children, index)
+            if (result) return true
+        }
+    }
+    return false
+}
+
+/**
+ * 递归的搜索菜单 Index
+ */
+const searchMenuIndex = (menus: Menus[], route: RouteLocationNormalizedLoaded): number | false => {
+    // 修复：添加空值检查
+    if (!menus || !Array.isArray(menus)) {
+        return false
+    }
+    
+    let find: boolean | number = false
+    for (const key in menus) {
+        // 修复：检查 menus[key] 是否存在
+        if (!menus[key]) continue
+        
+        if (menus[key].id && menus[key].path == route.fullPath) {
+            return menus[key].id
+        }
+        if (menus[key].children && Array.isArray(menus[key].children) && menus[key].children.length) {
+            find = searchMenuIndex(menus[key].children, route)
+            if (find !== false) return find
+        }
+    }
+    return find
+}
+
+const handleClick = (path: string) => {
+    navigateTo(path)
+}
+
+/**
+ * 从动态菜单中-搜索一个菜单
+ */
+const findMenus = (route: RouteLocationNormalizedLoaded) => {
+    // 修复：添加空值检查
+    if (!systemStore.site.head_nav || !Array.isArray(systemStore.site.head_nav)) {
+        return false
+    }
+    
+    const headNavIndex = searchMenuIndex(systemStore.site.head_nav, route)
+    if (headNavIndex !== false) return headNavIndex
+}
+
+setActiveMenu(route)
+watch(
+    () => route.fullPath,
+    () => {
+        setActiveMenu(route)
+    }
+)
+
+
+</script>
+
+<style scoped lang="scss">
+.header-user-box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    .header-user-avatar {
+        width: 16px;
+        height: 16px;
+        margin-right: 4px;
+        border-radius: 50%;
+    }
+    .icon-header-user-avatar {
+        margin-left: 4px;
+        margin-right: 6px;
+    }
+}
+.el-sub-menu .icon,
+.el-menu-item .icon {
+    vertical-align: middle;
+    margin-right: 2px;
+    width: 24px;
+    text-align: center;
+    flex-shrink: 0;
+}
+.is-active > .icon {
+    color: var(--el-menu-active-color) !important;
+}
+.el-menu {
+    border-bottom: none;
+    border-right: none;
+    .theme-switch.is-active,
+    .language-switch.is-active {
+        border-bottom: none;
+        :deep(.el-sub-menu__title) {
+            border-bottom: none;
+        }
+    }
+}
+.theme-switch {
+    --el-menu-hover-bg-color: none;
+    padding-right: 0;
+}
+.vertical-theme-switch {
+    .theme-toggle-content {
+        padding: 0;
+    }
+}
+.theme-toggle-content {
+    padding-right: 0;
+}
+</style>