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

移除不需要的

Browse Source
This commit is contained in:
Xiaoyu 2025-03-12 13:51:11 +08:00
parent 3225438c69
commit d7892375ce
2 changed files with 78 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@ -1,10 +1,9 @@
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/src/assets/images/logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>智慧湿地管理平台</title> <title>湿地管理平台</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

189
src/layout/AdminLayout.vue
View File

@ -1,9 +1,20 @@
<script setup> <script setup>
import { ref, watch, computed, markRaw, shallowRef, defineComponent, onMounted, onBeforeUnmount, onActivated, onDeactivated } from "vue"; import {
ref,
watch,
computed,
markRaw,
shallowRef,
defineComponent,
onMounted,
onBeforeUnmount,
onActivated,
onDeactivated,
} from "vue";
import { useRouter, useRoute } from "vue-router"; import { useRouter, useRoute } from "vue-router";
import { ElMessageBox } from 'element-plus'; import { ElMessageBox } from "element-plus";
import { useUserStore } from '../stores/user'; import { useUserStore } from "../stores/user";
import { useSystemLogStore } from '../stores/systemLog'; import { useSystemLogStore } from "../stores/systemLog";
import { import {
HomeFilled, HomeFilled,
Monitor, Monitor,
@ -21,9 +32,8 @@ import {
ChatLineRound, ChatLineRound,
InfoFilled, InfoFilled,
Grid, Grid,
ChatDotRound ChatDotRound,
} from "@element-plus/icons-vue"; } from "@element-plus/icons-vue";
import logo from '../assets/images/logo.png';
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
@ -53,47 +63,53 @@ const icons = shallowRef({
ChatLineRound: markRaw(ChatLineRound), ChatLineRound: markRaw(ChatLineRound),
InfoFilled: markRaw(InfoFilled), InfoFilled: markRaw(InfoFilled),
Grid: markRaw(Grid), Grid: markRaw(Grid),
ChatDotRound: markRaw(ChatDotRound) ChatDotRound: markRaw(ChatDotRound),
}); });
// 图标映射关系 // 图标映射关系
const iconMapping = { const iconMapping = {
'dashboard': 'HomeFilled', dashboard: "HomeFilled",
'screen': 'Grid', screen: "Grid",
'system': 'Setting', system: "Setting",
'monitor': 'DataAnalysis', monitor: "DataAnalysis",
'patrol': 'Location', patrol: "Location",
'AIPatrol': 'VideoCamera', AIPatrol: "VideoCamera",
'report': 'Document', report: "Document",
'activity': 'Collection', activity: "Collection",
'course': 'DataLine', course: "DataLine",
'feedback': 'ChatLineRound', feedback: "ChatLineRound",
'about': 'InfoFilled', about: "InfoFilled",
'wechat': 'ChatDotRound' wechat: "ChatDotRound",
}; };
// 缓存路由菜单 // 缓存路由菜单
const menuRoutes = computed(() => { const menuRoutes = computed(() => {
const routes = router.options.routes; const routes = router.options.routes;
const mainRoute = routes.find(route => route.path === '/' && route.children); const mainRoute = routes.find((route) => route.path === "/" && route.children);
if (!mainRoute) return []; if (!mainRoute) return [];
return mainRoute.children?.filter(route => { return (
return route.path !== 'dashboard' && route.meta && !route.meta.hideInMenu; mainRoute.children
}).map(route => ({ ?.filter((route) => {
return route.path !== "dashboard" && route.meta && !route.meta.hideInMenu;
})
.map((route) => ({
...route, ...route,
icon: icons.value[iconMapping[route.path.split('/')[0]] || 'Document'], icon: icons.value[iconMapping[route.path.split("/")[0]] || "Document"],
children: route.children?.filter(child => !child.meta?.hideInMenu).map(child => ({ children: route.children
?.filter((child) => !child.meta?.hideInMenu)
.map((child) => ({
...child, ...child,
fullPath: `/${route.path}/${child.path}` fullPath: `/${route.path}/${child.path}`,
})) })),
})) || []; })) || []
);
}); });
// 获取图标组件 // 获取图标组件
const getIcon = (routePath) => { const getIcon = (routePath) => {
const key = routePath.split('/')[0]; const key = routePath.split("/")[0];
return icons.value[iconMapping[key] || 'Document']; return icons.value[iconMapping[key] || "Document"];
}; };
// 节流函数 // 节流函数
@ -125,34 +141,32 @@ const handleSelect = throttle(async (key) => {
// 处理退出登录 // 处理退出登录
const handleLogout = () => { const handleLogout = () => {
ElMessageBox.confirm( ElMessageBox.confirm("确认退出登录?", "提示", {
'确认退出登录?', confirmButtonText: "退出",
'提示', cancelButtonText: "取消",
{ type: "warning",
confirmButtonText: '退出', })
cancelButtonText: '取消', .then(() => {
type: 'warning',
}
).then(() => {
systemLogStore.addLog({ systemLogStore.addLog({
type: "用户操作", type: "用户操作",
user: userStore.username || '', user: userStore.username || "",
action: "退出系统", action: "退出系统",
ip: "192.168.1.100", ip: "192.168.1.100",
status: "成功", status: "成功",
detail: "用户退出登录" detail: "用户退出登录",
}); });
userStore.logout(); userStore.logout();
router.push('/login'); router.push("/login");
}).catch(() => {}); })
.catch(() => {});
}; };
// 处理下拉菜单命令 // 处理下拉菜单命令
const handleCommand = (command) => { const handleCommand = (command) => {
if (command === 'logout') { if (command === "logout") {
handleLogout(); handleLogout();
} else if (command === 'profile') { } else if (command === "profile") {
router.push('/system/profile'); router.push("/system/profile");
} }
}; };
@ -178,7 +192,7 @@ const monitorPerformance = () => {
const cleanup = () => { const cleanup = () => {
// 清理定时器 // 清理定时器
if (window._timers) { if (window._timers) {
window._timers.forEach(timer => { window._timers.forEach((timer) => {
clearTimeout(timer); clearTimeout(timer);
clearInterval(timer); clearInterval(timer);
}); });
@ -217,7 +231,7 @@ onMounted(() => {
monitorPerformance(); monitorPerformance();
// 监听路由变化以优化性能 // 监听路由变化以优化性能
addEventListener(window, 'popstate', () => { addEventListener(window, "popstate", () => {
componentLoadTime.value = Date.now(); componentLoadTime.value = Date.now();
}); });
}); });
@ -240,14 +254,7 @@ onDeactivated(() => {
<template> <template>
<div class="admin-layout"> <div class="admin-layout">
<el-container class="layout-container"> <el-container class="layout-container">
<el-aside :width="isCollapse ? '64px' : '200px'"> <el-aside :width="isCollapse ? '64px' : '200px'" class="aside-container">
<div class="logo-container">
<img :src="logo" class="logo-image" alt="logo">
<h1 v-if="!isCollapse" class="logo-title">
<span class="ai-text">AI</span>
<span class="platform-text">智慧平台</span>
</h1>
</div>
<el-menu <el-menu
:default-active="activeMenu" :default-active="activeMenu"
class="el-menu-vertical" class="el-menu-vertical"
@ -302,7 +309,7 @@ onDeactivated(() => {
<div class="header-right"> <div class="header-right">
<el-dropdown @command="handleCommand"> <el-dropdown @command="handleCommand">
<span class="user-info"> <span class="user-info">
{{ userStore.username || '管理员' }} {{ userStore.username || "管理员" }}
<el-icon><component :is="icons.User" /></el-icon> <el-icon><component :is="icons.User" /></el-icon>
</span> </span>
<template #dropdown> <template #dropdown>
@ -333,77 +340,13 @@ onDeactivated(() => {
} }
.el-aside { .el-aside {
background-color: v.$sidebar-bg; background-color: #fff;
border-right: 1px solid v.$border-color; border-right: 1px solid #e6e6e6;
transition: width 0.3s; transition: width 0.3s;
.logo-container {
height: 60px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 20px;
border-bottom: 1px solid v.$border-color;
background-color: v.$sidebar-bg;
overflow: hidden; overflow: hidden;
gap: 10px;
.logo-image {
width: 32px;
height: 32px;
object-fit: contain;
}
.logo-title {
cursor: pointer;
margin: 0;
font-size: 18px;
font-weight: 500;
white-space: nowrap;
display: flex;
align-items: center;
gap: 2px;
.ai-text {
color: #409EFF;
font-weight: 800;
font-style: italic;
text-shadow: 2px 2px 4px rgba(64, 158, 255, 0.2);
background: linear-gradient(120deg, #409EFF, #67C23A);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding: 0 2px;
letter-spacing: 0;
}
.platform-text {
color: v.$text-primary;
font-weight: 500;
letter-spacing: 2px;
}
}
}
.el-menu { .el-menu {
border-right: none; border-right: none;
background-color: v.$sidebar-bg;
&.el-menu-vertical {
.el-menu-item,
.el-sub-menu__title {
color: v.$text-regular;
&:hover {
color: v.$primary-color;
background-color: #ecf5ff;
}
&.is-active {
color: v.$primary-color;
background-color: #ecf5ff;
}
}
}
} }
} }