mitsuhaV/WetlandGuard-Admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化路由管理

Browse Source
This commit is contained in:
wzclm 2025-03-08 16:21:35 +08:00
parent d7dbc3f585
commit 7564b18863
2 changed files with 405 additions and 301 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

326
src/layout/AdminLayout.vue
View File

@ -1,13 +1,13 @@
<script setup>
import { ref, watch } from "vue";
import { ref, watch, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessageBox } from 'element-plus';
import { useUserStore } from '../stores/user';
import { useSystemLogStore } from '../stores/systemLog';
import { markRaw } from 'vue';
import {
Menu as IconMenu,
Location,
HomeFilled,
Monitor,
Setting,
User,
DataAnalysis,
@ -16,19 +16,25 @@ import {
Document,
DataLine,
Collection,
Histogram,
Location,
VideoCamera,
ChatLineRound,
InfoFilled,
Grid
} from "@element-plus/icons-vue";
const router = useRouter();
const route = useRoute();
const isCollapse = ref(false);
const activeMenu = ref(route.path); // 初始化为当前路由路径
const activeMenu = ref(route.path);
const userStore = useUserStore();
const systemLogStore = useSystemLogStore();
// 使用 markRaw 包装所有图标组件
const icons = {
IconMenu: markRaw(IconMenu),
Location: markRaw(Location),
HomeFilled: markRaw(HomeFilled),
Monitor: markRaw(Monitor),
Setting: markRaw(Setting),
User: markRaw(User),
DataAnalysis: markRaw(DataAnalysis),
@ -37,6 +43,63 @@ const icons = {
Document: markRaw(Document),
DataLine: markRaw(DataLine),
Collection: markRaw(Collection),
Histogram: markRaw(Histogram),
Location: markRaw(Location),
VideoCamera: markRaw(VideoCamera),
ChatLineRound: markRaw(ChatLineRound),
InfoFilled: markRaw(InfoFilled),
Grid: markRaw(Grid)
};
// 图标映射关系
const iconMapping = {
'dashboard': 'HomeFilled',
'screen': 'Grid',
'system': 'Setting',
'monitor': 'DataAnalysis',
'patrol': 'Location',
'AIPatrol': 'VideoCamera',
'report': 'Document',
'activity': 'Collection',
'course': 'DataLine',
'feedback': 'ChatLineRound',
'about': 'InfoFilled'
};
// 获取路由菜单
const menuRoutes = computed(() => {
const routes = router.options.routes;
// 找到主布局路由
const mainRoute = routes.find(route => route.path === '/' && route.children);
if (!mainRoute) return [];
// 获取所有子路由
const children = mainRoute.children || [];
// 过滤掉 dashboard，因为它是单独显示的
return children.filter(route => {
return route.path !== 'dashboard' && route.meta && !route.meta.hideInMenu;
});
});
// 获取子菜单
const getSubMenus = (path) => {
const routes = router.options.routes;
const mainRoute = routes.find(route => route.path === '/' && route.children);
if (!mainRoute) return [];
return mainRoute.children?.filter(route => {
return route.path.startsWith(path + '/') && route.meta && !route.meta.hideInMenu;
}).map(route => ({
...route,
title: route.meta.title
})) || [];
};
// 获取图标
const getIcon = (routePath) => {
const key = routePath.split('/')[0];
return icons[iconMapping[key] || 'Document'];
};
// 监听路由变化
@ -78,161 +141,106 @@ const handleLogout = () => {
// 取消退出
});
};
// 处理下拉菜单命令
const handleCommand = (command) => {
if (command === 'logout') {
handleLogout();
} else if (command === 'profile') {
// 处理个人信息
router.push('/system/profile');
}
};
</script>
<template>
<el-container class="layout-container">
<el-aside :width="isCollapse ? '64px' : '200px'">
<div class="logo-container">
<h1 v-if="!isCollapse" class="logo-title">智慧湿地</h1>
</div>
<el-menu
:collapse="isCollapse"
:default-active="activeMenu"
class="el-menu-vertical"
@select="handleSelect"
unique-opened
>
<el-menu-item index="/dashboard">
<el-icon><component :is="icons.DataBoard" /></el-icon>
<template #title>控制台</template>
</el-menu-item>
<el-menu-item index="/screen">
<el-icon><component :is="icons.DataLine" /></el-icon>
<template #title>数据大屏</template>
</el-menu-item>
<el-sub-menu index="system">
<template #title>
<el-icon><component :is="icons.Setting" /></el-icon>
<span>系统管理</span>
</template>
<el-menu-item index="/system/users">用户管理</el-menu-item>
<el-menu-item index="/system/roles">角色管理</el-menu-item>
<el-menu-item index="/system/permissions">权限管理</el-menu-item>
<el-menu-item index="/system/settings">系统设置</el-menu-item>
<el-menu-item index="/system/logs">系统日志</el-menu-item>
<el-menu-item index="/system/data">数据管理</el-menu-item>
<el-menu-item index="/system/carousel">轮播图管理</el-menu-item>
</el-sub-menu>
<el-sub-menu index="monitor">
<template #title>
<el-icon><component :is="icons.DataAnalysis" /></el-icon>
<span>监测管理</span>
</template>
<el-menu-item index="/monitor/species">物种监测</el-menu-item>
<el-menu-item index="/monitor/environment">环境监测</el-menu-item>
<el-menu-item index="/monitor/observations">观测管理</el-menu-item>
</el-sub-menu>
<el-sub-menu index="patrol">
<template #title>
<el-icon><component :is="icons.Location" /></el-icon>
<span>巡护管理</span>
</template>
<el-menu-item index="/patrol/plans">巡护计划</el-menu-item>
<el-menu-item index="/patrol/tasks">巡护任务</el-menu-item>
<el-menu-item index="/patrol/records">巡护记录</el-menu-item>
<el-menu-item index="/patrol/events">安防事件</el-menu-item>
</el-sub-menu>
<el-sub-menu index="AIPatrol">
<template #title>
<el-icon><component :is="icons.Location" /></el-icon>
<span>AI巡护</span>
</template>
<el-menu-item index="/AIPatrol/camera">摄像头管理</el-menu-item>
<el-menu-item index="/AIPatrol/sensor">传感器管理</el-menu-item>
<el-menu-item index="/AIPatrol/drone">无人机管理</el-menu-item>
</el-sub-menu>
<el-sub-menu index="report">
<template #title>
<el-icon><component :is="icons.Document" /></el-icon>
<span>报告管理</span>
</template>
<el-menu-item index="/report/daily">报告管理</el-menu-item>
<el-menu-item index="/report/reportTemplates">报告模板</el-menu-item>
<el-menu-item index="/report/analysis">分析报告</el-menu-item>
<el-menu-item index="/report/about">项目背景</el-menu-item>
</el-sub-menu>
<el-sub-menu index="activity">
<template #title>
<el-icon><component :is="icons.Collection" /></el-icon>
<span>活动管理</span>
</template>
<el-menu-item index="/activity/study">研学管理</el-menu-item>
<el-menu-item index="/activity/knowledge">知识库管理</el-menu-item>
</el-sub-menu>
<el-sub-menu index="course">
<template #title>
<el-icon><component :is="icons.DataLine" /></el-icon>
<span>课程管理</span>
</template>
<el-menu-item index="/course/index">课程管理</el-menu-item>
<el-menu-item index="/course/application">报名管理</el-menu-item>
</el-sub-menu>
<el-sub-menu index="feedback">
<template #title>
<el-icon><component :is="icons.DataLine" /></el-icon>
<span>用户反馈</span>
</template>
<el-menu-item index="/feedback/suggestions">意见反馈</el-menu-item>
<el-menu-item index="/feedback/satisfaction">满意度调查</el-menu-item>
</el-sub-menu>
<el-sub-menu index="projects">
<template #title>
<el-icon><component :is="icons.DataLine" /></el-icon>
<span>关于我们</span>
</template>
<el-menu-item index="/about/projects">项目简介</el-menu-item>
<el-menu-item index="/about/needToKnow">游园需知</el-menu-item>
</el-sub-menu>
</el-menu>
</el-aside>
<el-container>
<el-header>
<div class="header-left">
<el-button link @click="isCollapse = !isCollapse">
<el-icon><component :is="icons.IconMenu" /></el-icon>
</el-button>
<div class="admin-layout">
<el-container class="layout-container">
<el-aside :width="isCollapse ? '64px' : '200px'">
<div class="logo-container">
<h1 v-if="!isCollapse" class="logo-title">智慧湿地</h1>
</div>
<div class="header-right">
<el-dropdown>
<span class="user-info">
<el-icon><component :is="icons.User" /></el-icon>
管理员
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>个人信息</el-dropdown-item>
<el-dropdown-item>修改密码</el-dropdown-item>
<el-dropdown-item divided @click="handleLogout">退出登录</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</el-header>
<el-menu
:default-active="activeMenu"
class="el-menu-vertical"
:collapse="isCollapse"
@select="handleSelect"
router
unique-opened
>
<!-- 控制台 -->
<el-menu-item index="/dashboard">
<el-icon><component :is="icons.HomeFilled" /></el-icon>
<template #title>控制台</template>
</el-menu-item>
<el-main>
<RouterView />
</el-main>
<!-- 数据大屏 -->
<el-menu-item index="/screen">
<el-icon><component :is="icons.Grid" /></el-icon>
<template #title>数据大屏</template>
</el-menu-item>
<!-- 动态生成的菜单项 -->
<template v-for="route in menuRoutes" :key="route.path">
<el-sub-menu v-if="route.children && route.children.length > 0" :index="'/' + route.path">
<template #title>
<el-icon><component :is="getIcon(route.path)" /></el-icon>
<span>{{ route.meta.title }}</span>
</template>
<el-menu-item
v-for="child in route.children"
:key="child.path"
:index="'/' + route.path + '/' + child.path"
>
{{ child.meta.title }}
</el-menu-item>
</el-sub-menu>
<el-menu-item v-else :index="'/' + route.path">
<el-icon><component :is="getIcon(route.path)" /></el-icon>
<template #title>{{ route.meta.title }}</template>
</el-menu-item>
</template>
</el-menu>
</el-aside>
<el-container>
<el-header>
<div class="header-left">
<el-button link @click="isCollapse = !isCollapse">
<el-icon><component :is="icons.HomeFilled" /></el-icon>
</el-button>
</div>
<div class="header-right">
<el-dropdown @command="handleCommand">
<span class="user-info">
{{ userStore.username || '管理员' }}
<el-icon><component :is="icons.User" /></el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="profile">个人信息</el-dropdown-item>
<el-dropdown-item command="logout">退出登录</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</el-header>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</el-container>
</div>
</template>
<style lang="scss" scoped>
@use "../styles/variables" as v;
.layout-container {
.admin-layout {
height: 100vh;
.layout-container {
height: 100%;
}
}
.el-aside {
@ -247,14 +255,9 @@ const handleLogout = () => {
justify-content: center;
padding: 0 20px;
border-bottom: 1px solid v.$border-color;
background-color: v.$sidebar-bg;
overflow: hidden;
.logo-img {
width: 32px;
height: 32px;
margin-right: 12px;
}
.logo-title {
cursor: pointer;
margin: 0;
@ -268,6 +271,7 @@ const handleLogout = () => {
.el-menu {
border-right: none;
background-color: v.$sidebar-bg;
&.el-menu-vertical {
.el-menu-item,
@ -296,6 +300,7 @@ const handleLogout = () => {
align-items: center;
height: 60px;
padding: 0 20px;
border-bottom: 1px solid v.$border-color;
}
.header-left {
@ -313,11 +318,18 @@ const handleLogout = () => {
.user-info {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: v.$text-regular;
padding: 4px 8px;
border-radius: 4px;
transition: all 0.3s;
&:hover {
background-color: #f5f7fa;
}
.el-icon {
margin-right: 8px;
font-size: 16px;
}
}
@ -326,5 +338,7 @@ const handleLogout = () => {
.el-main {
background-color: v.$bg-color;
padding: 20px;
height: calc(100vh - 60px);
overflow-y: auto;
}
</style>

380
src/router/index.js
View File

@ -16,7 +16,8 @@ const router = createRouter({
{
path: '/login',
name: 'Login',
component: () => import('../views/login/index.vue')
component: () => import('../views/login/index.vue'),
meta: { title: '登录' }
},
{
path: '/screen',
@ -36,168 +37,257 @@ const router = createRouter({
{
path: 'dashboard',
name: 'Dashboard',
component: () => import('../views/dashboard/index.vue')
component: () => import('../views/dashboard/index.vue'),
meta: { title: '控制台', icon: 'HomeFilled' }
},
// 系统管理
{
path: 'system/users',
name: 'UserManagement',
component: () => import('../views/system/users/index.vue')
path: 'system',
name: 'System',
meta: { title: '系统管理', icon: 'Setting' },
redirect: '/system/users',
children: [
{
path: 'users',
name: 'UserManagement',
component: () => import('../views/system/users/index.vue'),
meta: { title: '用户管理' }
},
{
path: 'roles',
name: 'RoleManagement',
component: () => import('../views/system/roles/index.vue'),
meta: { title: '角色管理' }
},
{
path: 'permissions',
name: 'PermissionManagement',
component: () => import('../views/system/permissions/index.vue'),
meta: { title: '权限管理' }
},
{
path: 'settings',
name: 'SystemSettings',
component: () => import('../views/system/settings/index.vue'),
meta: { title: '系统设置' }
},
{
path: 'logs',
name: 'SystemLogs',
component: () => import('../views/system/logs/index.vue'),
meta: { title: '系统日志' }
},
{
path: 'data',
name: 'DataManagement',
component: () => import('@/views/system/data/index.vue'),
meta: { title: '数据管理' }
},
{
path: 'carousel',
name: 'SystemCarousel',
component: () => import('../views/system/carousel/index.vue'),
meta: { title: '轮播图管理' }
}
]
},
// 监测管理
{
path: 'system/roles',
name: 'RoleManagement',
component: () => import('../views/system/roles/index.vue')
path: 'monitor',
name: 'Monitor',
meta: { title: '监测管理', icon: 'DataAnalysis' },
redirect: '/monitor/species',
children: [
{
path: 'species',
name: 'SpeciesMonitor',
component: () => import('../views/monitor/species/index.vue'),
meta: { title: '物种监测' }
},
{
path: 'environment',
name: 'EnvironmentMonitor',
component: () => import('../views/monitor/environment/index.vue'),
meta: { title: '环境监测' }
},
{
path: 'observations',
name: 'ObservationsMonitor',
component: () => import('../views/monitor/observations/index.vue'),
meta: { title: '观测管理' }
}
]
},
// 巡护管理
{
path: 'system/permissions',
name: 'PermissionManagement',
component: () => import('../views/system/permissions/index.vue')
path: 'patrol',
name: 'Patrol',
meta: { title: '巡护管理', icon: 'Location' },
redirect: '/patrol/plans',
children: [
{
path: 'plans',
name: 'PatrolPlans',
component: () => import('../views/patrol/plans/index.vue'),
meta: { title: '巡护计划' }
},
{
path: 'tasks',
name: 'PatrolTasks',
component: () => import('../views/patrol/tasks/index.vue'),
meta: { title: '巡护任务' }
},
{
path: 'records',
name: 'PatrolRecords',
component: () => import('../views/patrol/records/index.vue'),
meta: { title: '巡护记录' }
},
{
path: 'events',
name: 'PatrolEvents',
component: () => import('../views/patrol/events/index.vue'),
meta: { title: '安防事件' }
}
]
},
// AI巡护
{
path: 'monitor/species',
name: 'SpeciesMonitor',
component: () => import('../views/monitor/species/index.vue')
path: 'AIPatrol',
name: 'AIPatrol',
meta: { title: 'AI巡护', icon: 'Monitor' },
redirect: '/AIPatrol/camera',
children: [
{
path: 'camera',
name: 'CameraManagement',
component: () => import('../views/AIPatrol/Camera/index.vue'),
meta: { title: '摄像头管理' }
},
{
path: 'sensor',
name: 'SensorManagement',
component: () => import('../views/AIPatrol/sensor/index.vue'),
meta: { title: '传感器管理' }
},
{
path: 'drone',
name: 'DroneManagement',
component: () => import('../views/AIPatrol/drone/index.vue'),
meta: { title: '无人机管理' }
}
]
},
// 报告管理
{
path: 'monitor/environment',
name: 'EnvironmentMonitor',
component: () => import('../views/monitor/environment/index.vue')
path: 'report',
name: 'Report',
meta: { title: '报告管理', icon: 'Document' },
redirect: '/report/daily',
children: [
{
path: 'daily',
name: 'DailyReports',
component: () => import('../views/report/daily/index.vue'),
meta: { title: '报告管理' }
},
{
path: 'reportTemplates',
name: 'ReportTemplates',
component: () => import('../views/report/reportTemplates/index.vue'),
meta: { title: '报告模板' }
},
{
path: 'analysis',
name: 'AnalysisReports',
component: () => import('../views/report/analysis/index.vue'),
meta: { title: '分析报告' }
}
]
},
// 活动管理
{
path: 'monitor/observations',
name: 'ObservationsMonitor',
component: () => import('../views/monitor/observations/index.vue')
path: 'activity',
name: 'Activity',
meta: { title: '活动管理', icon: 'Collection' },
redirect: '/activity/study',
children: [
{
path: 'study',
name: 'StudyManagement',
component: () => import('../views/activity/study/index.vue'),
meta: { title: '研学管理' }
},
{
path: 'knowledge',
name: 'KnowledgeManagement',
component: () => import('../views/activity/knowledge/index.vue'),
meta: { title: '知识库管理' }
}
]
},
// 课程管理
{
path: 'patrol/tasks',
name: 'PatrolTasks',
component: () => import('../views/patrol/tasks/index.vue')
path: 'course',
name: 'Course',
meta: { title: '课程管理', icon: 'DataLine' },
redirect: '/course/index',
children: [
{
path: 'index',
name: 'CourseManagement',
component: () => import('../views/course/index.vue'),
meta: { title: '课程管理' }
},
{
path: 'application',
name: 'CourseApplication',
component: () => import('../views/course/Application.vue'),
meta: { title: '报名管理' }
}
]
},
// 用户反馈
{
path: 'patrol/events',
name: 'PatrolEvents',
component: () => import('../views/patrol/events/index.vue')
path: 'feedback',
name: 'Feedback',
meta: { title: '用户反馈', icon: 'ChatLineRound' },
redirect: '/feedback/suggestions',
children: [
{
path: 'suggestions',
name: 'FeedbackSuggestions',
component: () => import('../views/feedback/suggestions/index.vue'),
meta: { title: '意见反馈' }
},
{
path: 'satisfaction',
name: 'FeedbackSatisfaction',
component: () => import('../views/feedback/satisfaction/index.vue'),
meta: { title: '满意度调查' }
}
]
},
// 关于我们
{
path: 'patrol/plans',
name: 'PatrolPlans',
component: () => import('../views/patrol/plans/index.vue')
},
{
path: 'patrol/records',
name: 'PatrolRecords',
component: () => import('../views/patrol/records/index.vue')
},
{
path: 'patrol/points',
name: 'PatrolPoints',
component: () => import('../views/patrol/points/index.vue'),
},
{
path: 'report/daily',
name: 'DailyReports',
component: () => import('../views/report/daily/index.vue')
},
{
path: 'report/reportTemplates',
name: 'ReportTemplates',
component: () => import('../views/report/reportTemplates/index.vue')
},
{
path: 'report/analysis',
name: 'AnalysisReports',
component: () => import('../views/report/analysis/index.vue')
},
{
path: 'report/about',
name: 'ProjectAbout',
component: () => import('../views/report/about/index.vue')
},
{
path: 'system/settings',
name: 'SystemSettings',
component: () => import('../views/system/settings/index.vue')
},
{
path: 'system/logs',
name: 'SystemLogs',
component: () => import('../views/system/logs/index.vue')
},
{
path: 'system/data',
name: 'DataManagement',
component: () => import('@/views/system/data/index.vue'),
meta: { title: '数据管理', icon: 'data' }
},
{
path: 'system/carousel',
name: 'SystemCarousel',
component: () => import('../views/system/carousel/index.vue'),
meta: { title: '轮播图管理', icon: 'picture' }
},
{
path: 'course/index',
name: 'CourseManagement',
component: () => import('../views/course/index.vue'),
meta: { title: '课程管理', icon: 'reading' }
},
{
path: 'course/application',
name: 'CourseApplication',
component: () => import('../views/course/Application.vue')
},
{
path: 'activity/study',
name: 'StudyManagement',
component: () => import('../views/activity/study/index.vue')
},
{
path: 'activity/knowledge',
name: 'KnowledgeManagement',
component: () => import('../views/activity/knowledge/index.vue')
},
{
path: 'AIPatrol/sensor',
name: 'SensorManagement',
component: () => import('../views/AIPatrol/sensor/index.vue')
},
{
path: 'AIPatrol/camera',
name: 'CameraManagement',
component: () => import('../views/AIPatrol/Camera/index.vue')
},
{
path: 'AIPatrol/drone',
name: 'DroneManagement',
component: () => import('../views/AIPatrol/drone/index.vue')
},
{
path: 'feedback/suggestions',
name: 'FeedbackSuggestions',
component: () => import('../views/feedback/suggestions/index.vue')
},
{
path: 'feedback/satisfaction',
name: 'FeedbackSatisfaction',
component: () => import('../views/feedback/satisfaction/index.vue')
},
{
path: 'data',
name: 'SystemData',
component: () => import('@/views/system/data/index.vue'),
meta: { title: '数据管理', icon: 'data' }
},
{
path: 'about/projects',
name: 'Projects',
component: () => import('@/views/about/projects/index.vue'),
meta: { title: '项目简介', icon: 'data' }
},
{
path: 'about/needToKnow',
name: 'NeedToKnow',
component: () => import('@/views/about/needToKnow/index.vue'),
meta: { title: '游园需知', icon: 'data' }
path: 'about',
name: 'About',
meta: { title: '关于我们', icon: 'InfoFilled' },
redirect: '/about/projects',
children: [
{
path: 'projects',
name: 'Projects',
component: () => import('@/views/about/projects/index.vue'),
meta: { title: '项目简介' }
},
{
path: 'needToKnow',
name: 'NeedToKnow',
component: () => import('@/views/about/needToKnow/index.vue'),
meta: { title: '游园需知' }
}
]
}
]
}