移除不需要的
This commit is contained in:
parent
3225438c69
commit
d7892375ce
@ -1,10 +1,9 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/src/assets/images/logo.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>智慧湿地管理平台</title>
|
||||
<title>湿地管理平台</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
@ -1,9 +1,20 @@
|
||||
<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 { ElMessageBox } from 'element-plus';
|
||||
import { useUserStore } from '../stores/user';
|
||||
import { useSystemLogStore } from '../stores/systemLog';
|
||||
import { ElMessageBox } from "element-plus";
|
||||
import { useUserStore } from "../stores/user";
|
||||
import { useSystemLogStore } from "../stores/systemLog";
|
||||
import {
|
||||
HomeFilled,
|
||||
Monitor,
|
||||
@ -21,9 +32,8 @@ import {
|
||||
ChatLineRound,
|
||||
InfoFilled,
|
||||
Grid,
|
||||
ChatDotRound
|
||||
ChatDotRound,
|
||||
} from "@element-plus/icons-vue";
|
||||
import logo from '../assets/images/logo.png';
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
@ -53,47 +63,53 @@ const icons = shallowRef({
|
||||
ChatLineRound: markRaw(ChatLineRound),
|
||||
InfoFilled: markRaw(InfoFilled),
|
||||
Grid: markRaw(Grid),
|
||||
ChatDotRound: markRaw(ChatDotRound)
|
||||
ChatDotRound: markRaw(ChatDotRound),
|
||||
});
|
||||
|
||||
// 图标映射关系
|
||||
const iconMapping = {
|
||||
'dashboard': 'HomeFilled',
|
||||
'screen': 'Grid',
|
||||
'system': 'Setting',
|
||||
'monitor': 'DataAnalysis',
|
||||
'patrol': 'Location',
|
||||
'AIPatrol': 'VideoCamera',
|
||||
'report': 'Document',
|
||||
'activity': 'Collection',
|
||||
'course': 'DataLine',
|
||||
'feedback': 'ChatLineRound',
|
||||
'about': 'InfoFilled',
|
||||
'wechat': 'ChatDotRound'
|
||||
dashboard: "HomeFilled",
|
||||
screen: "Grid",
|
||||
system: "Setting",
|
||||
monitor: "DataAnalysis",
|
||||
patrol: "Location",
|
||||
AIPatrol: "VideoCamera",
|
||||
report: "Document",
|
||||
activity: "Collection",
|
||||
course: "DataLine",
|
||||
feedback: "ChatLineRound",
|
||||
about: "InfoFilled",
|
||||
wechat: "ChatDotRound",
|
||||
};
|
||||
|
||||
// 缓存路由菜单
|
||||
const menuRoutes = computed(() => {
|
||||
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 [];
|
||||
|
||||
return mainRoute.children?.filter(route => {
|
||||
return route.path !== 'dashboard' && route.meta && !route.meta.hideInMenu;
|
||||
}).map(route => ({
|
||||
...route,
|
||||
icon: icons.value[iconMapping[route.path.split('/')[0]] || 'Document'],
|
||||
children: route.children?.filter(child => !child.meta?.hideInMenu).map(child => ({
|
||||
...child,
|
||||
fullPath: `/${route.path}/${child.path}`
|
||||
}))
|
||||
})) || [];
|
||||
return (
|
||||
mainRoute.children
|
||||
?.filter((route) => {
|
||||
return route.path !== "dashboard" && route.meta && !route.meta.hideInMenu;
|
||||
})
|
||||
.map((route) => ({
|
||||
...route,
|
||||
icon: icons.value[iconMapping[route.path.split("/")[0]] || "Document"],
|
||||
children: route.children
|
||||
?.filter((child) => !child.meta?.hideInMenu)
|
||||
.map((child) => ({
|
||||
...child,
|
||||
fullPath: `/${route.path}/${child.path}`,
|
||||
})),
|
||||
})) || []
|
||||
);
|
||||
});
|
||||
|
||||
// 获取图标组件
|
||||
const getIcon = (routePath) => {
|
||||
const key = routePath.split('/')[0];
|
||||
return icons.value[iconMapping[key] || 'Document'];
|
||||
const key = routePath.split("/")[0];
|
||||
return icons.value[iconMapping[key] || "Document"];
|
||||
};
|
||||
|
||||
// 节流函数
|
||||
@ -125,34 +141,32 @@ const handleSelect = throttle(async (key) => {
|
||||
|
||||
// 处理退出登录
|
||||
const handleLogout = () => {
|
||||
ElMessageBox.confirm(
|
||||
'确认退出登录?',
|
||||
'提示',
|
||||
{
|
||||
confirmButtonText: '退出',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
).then(() => {
|
||||
systemLogStore.addLog({
|
||||
type: "用户操作",
|
||||
user: userStore.username || '',
|
||||
action: "退出系统",
|
||||
ip: "192.168.1.100",
|
||||
status: "成功",
|
||||
detail: "用户退出登录"
|
||||
});
|
||||
userStore.logout();
|
||||
router.push('/login');
|
||||
}).catch(() => {});
|
||||
ElMessageBox.confirm("确认退出登录?", "提示", {
|
||||
confirmButtonText: "退出",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
systemLogStore.addLog({
|
||||
type: "用户操作",
|
||||
user: userStore.username || "",
|
||||
action: "退出系统",
|
||||
ip: "192.168.1.100",
|
||||
status: "成功",
|
||||
detail: "用户退出登录",
|
||||
});
|
||||
userStore.logout();
|
||||
router.push("/login");
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
// 处理下拉菜单命令
|
||||
const handleCommand = (command) => {
|
||||
if (command === 'logout') {
|
||||
if (command === "logout") {
|
||||
handleLogout();
|
||||
} else if (command === 'profile') {
|
||||
router.push('/system/profile');
|
||||
} else if (command === "profile") {
|
||||
router.push("/system/profile");
|
||||
}
|
||||
};
|
||||
|
||||
@ -178,7 +192,7 @@ const monitorPerformance = () => {
|
||||
const cleanup = () => {
|
||||
// 清理定时器
|
||||
if (window._timers) {
|
||||
window._timers.forEach(timer => {
|
||||
window._timers.forEach((timer) => {
|
||||
clearTimeout(timer);
|
||||
clearInterval(timer);
|
||||
});
|
||||
@ -217,7 +231,7 @@ onMounted(() => {
|
||||
monitorPerformance();
|
||||
|
||||
// 监听路由变化以优化性能
|
||||
addEventListener(window, 'popstate', () => {
|
||||
addEventListener(window, "popstate", () => {
|
||||
componentLoadTime.value = Date.now();
|
||||
});
|
||||
});
|
||||
@ -240,14 +254,7 @@ onDeactivated(() => {
|
||||
<template>
|
||||
<div class="admin-layout">
|
||||
<el-container class="layout-container">
|
||||
<el-aside :width="isCollapse ? '64px' : '200px'">
|
||||
<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-aside :width="isCollapse ? '64px' : '200px'" class="aside-container">
|
||||
<el-menu
|
||||
:default-active="activeMenu"
|
||||
class="el-menu-vertical"
|
||||
@ -302,7 +309,7 @@ onDeactivated(() => {
|
||||
<div class="header-right">
|
||||
<el-dropdown @command="handleCommand">
|
||||
<span class="user-info">
|
||||
{{ userStore.username || '管理员' }}
|
||||
{{ userStore.username || "管理员" }}
|
||||
<el-icon><component :is="icons.User" /></el-icon>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
@ -333,77 +340,13 @@ onDeactivated(() => {
|
||||
}
|
||||
|
||||
.el-aside {
|
||||
background-color: v.$sidebar-bg;
|
||||
border-right: 1px solid v.$border-color;
|
||||
background-color: #fff;
|
||||
border-right: 1px solid #e6e6e6;
|
||||
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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
overflow: hidden;
|
||||
|
||||
.el-menu {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user