From a2187812970446b4773a3d96c69412f43b99da82 Mon Sep 17 00:00:00 2001
From: ZhouYi <zhouyirabbit@gmail.com>
Date: Mon, 8 Jan 2024 14:24:17 +0800
Subject: [PATCH] modified theme , add animation

---
 ms-web/components.d.ts                        |   4 +
 ms-web/index.html                             |   3 +
 ms-web/mock/router/index.js                   |   4 +-
 ms-web/package.json                           |   3 +
 ms-web/src/config/appconfig.js                |  73 ---------
 ms-web/src/config/index.ts                    |   1 +
 ms-web/src/config/map-sdk.ts                  |  10 ++
 ms-web/src/icons/tick.svg                     |   1 +
 ms-web/src/layouts/Layout.vue                 |   2 -
 ms-web/src/layouts/MainView.vue               |  35 +----
 ms-web/src/layouts/setting/SystemSet.vue      |  80 +++++++++-
 ms-web/src/main.ts                            |   1 +
 ms-web/src/store/modules/setting.ts           |   1 +
 ms-web/src/styles/common.scss                 |  29 +---
 ms-web/src/styles/global.scss                 |  28 ++++
 ms-web/src/styles/index.ts                    |   2 +
 ms-web/src/styles/transition.scss             |  82 ++++++++++
 ms-web/src/typings/package.d.ts               |   2 +
 ms-web/src/utils/gloComponents.ts             |   2 -
 ms-web/src/views/Console.vue                  |  13 --
 ms-web/src/views/HelloWorld.vue               |   0
 ms-web/src/views/SystemManage.vue             |  13 --
 ms-web/src/views/UserManage.vue               |  13 --
 .../exception/components/ExceptionStatus.vue  | 143 +++++++++---------
 ms-web/src/views/map/baidu-map.vue            |  34 +++++
 ms-web/src/views/map/gaode-map.vue            |  33 ++++
 26 files changed, 368 insertions(+), 244 deletions(-)
 delete mode 100644 ms-web/src/config/appconfig.js
 create mode 100644 ms-web/src/config/index.ts
 create mode 100644 ms-web/src/config/map-sdk.ts
 create mode 100644 ms-web/src/icons/tick.svg
 create mode 100644 ms-web/src/styles/global.scss
 create mode 100644 ms-web/src/styles/transition.scss
 create mode 100644 ms-web/src/typings/package.d.ts
 delete mode 100644 ms-web/src/views/Console.vue
 delete mode 100644 ms-web/src/views/HelloWorld.vue
 delete mode 100644 ms-web/src/views/SystemManage.vue
 delete mode 100644 ms-web/src/views/UserManage.vue
 create mode 100644 ms-web/src/views/map/baidu-map.vue
 create mode 100644 ms-web/src/views/map/gaode-map.vue

diff --git a/ms-web/components.d.ts b/ms-web/components.d.ts
index 4c6ab4d..4505498 100644
--- a/ms-web/components.d.ts
+++ b/ms-web/components.d.ts
@@ -16,6 +16,8 @@ declare module 'vue' {
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCol: typeof import('element-plus/es')['ElCol']
+    ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
@@ -27,11 +29,13 @@ declare module 'vue' {
     ElInput: typeof import('element-plus/es')['ElInput']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElOption: typeof import('element-plus/es')['ElOption']
     ElProgress: typeof import('element-plus/es')['ElProgress']
     ElRadio: typeof import('element-plus/es')['ElRadio']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
diff --git a/ms-web/index.html b/ms-web/index.html
index d580870..5ea0048 100644
--- a/ms-web/index.html
+++ b/ms-web/index.html
@@ -4,6 +4,9 @@
 		<meta charset="UTF-8" />
 		<link rel="icon" href="/favicon.ico" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<script
+			type="text/javascript"
+			src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=Z83GdVKY62Tb30whnRRQnGGcCj3NnQbb"></script>
 		<title>%VITE_APP_NAME%</title>
 	</head>
 	<body>
diff --git a/ms-web/mock/router/index.js b/ms-web/mock/router/index.js
index b980081..aa0fbef 100644
--- a/ms-web/mock/router/index.js
+++ b/ms-web/mock/router/index.js
@@ -303,12 +303,12 @@ export const adminRoutes = [
     children: [
       {
         parentPath: '/map',
-        menuUrl: '/map/gaode',
+        menuUrl: '/map/gaode-map',
         menuName: '高德地图',
       },
       {
         parentPath: '/map',
-        menuUrl: '/map/baidu',
+        menuUrl: '/map/baidu-map',
         menuName: '百度地图',
       },
     ],
diff --git a/ms-web/package.json b/ms-web/package.json
index 2d8d914..e1a7506 100644
--- a/ms-web/package.json
+++ b/ms-web/package.json
@@ -9,8 +9,11 @@
 		"build": "vite build"
 	},
 	"dependencies": {
+		"@amap/amap-jsapi-loader": "^1.0.1",
+		"@amap/amap-jsapi-types": "^0.0.13",
 		"@element-plus/icons-vue": "^2.1.0",
 		"@vue/tsconfig": "^0.4.0",
+		"@vueuse/core": "^10.7.1",
 		"axios": "^1.5.0",
 		"echarts": "^5.4.3",
 		"element-plus": "^2.3.12",
diff --git a/ms-web/src/config/appconfig.js b/ms-web/src/config/appconfig.js
deleted file mode 100644
index f750ece..0000000
--- a/ms-web/src/config/appconfig.js
+++ /dev/null
@@ -1,73 +0,0 @@
-let test_menu = [
-	{
-		name: "首页",
-		path: "/home",
-		component: "Home",
-		localFilePath: "views/Home",
-		icon: "HomeFilled",
-		isSingle: true,
-		children: [
-			{
-				name: "控制台",
-				path: "console",
-				toPath: "/home/console",
-				component: "Console",
-				localFilePath: "views/Console",
-				icon: "Odometer",
-			},
-		],
-	},
-	{
-		name: "系统管理",
-		path: "/systemManage",
-		component: "SystemManage",
-		localFilePath: "views/SystemManage",
-		icon: "Setting",
-		children:[
-			{
-				name:"用户管理",
-				path:"userManage",
-				toPath:"/systemManage/userManage",
-				component:"UserManage",
-				localFilePath:"views/UserManage",
-				icon:"User",
-			},
-		]
-	},
-	{
-		name: "下一页",
-		path: "/test4",
-		component: "NextPage",
-		localFilePath: "views/NextPage",
-		icon: "Grid",
-		children: [
-			{
-				name: "测试4",
-				path: "test41",
-				component: "NextPage",
-				localFilePath: "views/NextPage",
-				icon: "Grid",
-			},
-			{
-				name: "测试5",
-				path: "test42",
-				component: "NextPage",
-				localFilePath: "views/NextPage",
-				icon: "Grid",
-				children: [
-					{
-						name: "测试6",
-						path: "test43",
-						component: "NextPage",
-						localFilePath: "views/NextPage",
-						icon: "Grid",
-					},
-				],
-			},
-		],
-	},
-]
-
-export default {
-	routes: test_menu,
-}
diff --git a/ms-web/src/config/index.ts b/ms-web/src/config/index.ts
new file mode 100644
index 0000000..b7230fb
--- /dev/null
+++ b/ms-web/src/config/index.ts
@@ -0,0 +1 @@
+export * from "./map-sdk"
diff --git a/ms-web/src/config/map-sdk.ts b/ms-web/src/config/map-sdk.ts
new file mode 100644
index 0000000..7475dce
--- /dev/null
+++ b/ms-web/src/config/map-sdk.ts
@@ -0,0 +1,10 @@
+/** 百度地图sdk地址 */
+export const BAIDU_MAP_SDK_URL = `https://api.map.baidu.com/api?v=1.0&type=webgl&ak=Z83GdVKY62Tb30whnRRQnGGcCj3NnQbb`
+
+/** 高德地图sdk地址 */
+export const AMAP_SDK_URL = "https://webapi.amap.com/maps?v=2.0&key=6aa0c6346fa679fe22baa6072268ea54"
+
+/** 腾讯地图sdk地址 */
+export const TENCENT_MAP_SDK_URL =
+	"https://map.qq.com/api/gljs?v=1.exp&key=A6DBZ-KXPLW-JKSRY-ONZF4-CPHY3-K6BL7"
+
diff --git a/ms-web/src/icons/tick.svg b/ms-web/src/icons/tick.svg
new file mode 100644
index 0000000..c583e0d
--- /dev/null
+++ b/ms-web/src/icons/tick.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1704417765169" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2460" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"><path d="M392.533333 806.4L85.333333 503.466667l59.733334-59.733334 247.466666 247.466667L866.133333 213.333333l59.733334 59.733334L392.533333 806.4z" fill="#444444" p-id="2461"></path></svg>
\ No newline at end of file
diff --git a/ms-web/src/layouts/Layout.vue b/ms-web/src/layouts/Layout.vue
index d62f58d..6c1c746 100644
--- a/ms-web/src/layouts/Layout.vue
+++ b/ms-web/src/layouts/Layout.vue
@@ -2,11 +2,9 @@
 import ClassicTheme from "@/layouts/themes/ClassicTheme.vue"
 import TopBLayout from "@/layouts/themes/TopBLayout.vue"
 import { useSettingStore } from "@/store"
-console.log("获取面包屑")
 import { useGetBreadcrumbList } from "@/utils/public/getData"
 const settingStore = useSettingStore()
 useGetBreadcrumbList()  // 监听路由获取面包屑
-console.log("获取面包屑")
 </script>
 
 <template>
diff --git a/ms-web/src/layouts/MainView.vue b/ms-web/src/layouts/MainView.vue
index f68b4ea..35f7ee1 100644
--- a/ms-web/src/layouts/MainView.vue
+++ b/ms-web/src/layouts/MainView.vue
@@ -1,6 +1,6 @@
 <template>
 	<router-view v-slot="{ Component, route }">
-		<Transition>
+		<Transition :name="settingStore.transitionAnimation">
 			<!-- <keep-alive :include="cachedRouteStore.getCachedRouteName"> -->
 			<component :is="Component" :key="route.fullPath" />
 			<!-- </keep-alive> -->
@@ -10,36 +10,17 @@
 
 <script lang="ts">
 import { defineComponent } from "vue"
+import { useSettingStore } from "@/store"
+
 export default defineComponent({
 	name: "MainView",
 	setup() {
-		return {}
+		const settingStore = useSettingStore()
+		return {
+			settingStore,
+		}
 	},
 })
 </script>
 
-<style lang="scss" scoped>
-.v-enter-active,
-.v-leave-active {
-	animation: bounce-in 0.5s;
-}
-
-.v-enter-from,
-.v-leave-to {
-	opacity: 0;
-}
-
-@keyframes bounce-in {
-	0% {
-		transform: scale(0);
-	}
-
-	50% {
-		transform: scale(0.5);
-	}
-
-	100% {
-		transform: scale(1);
-	}
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/ms-web/src/layouts/setting/SystemSet.vue b/ms-web/src/layouts/setting/SystemSet.vue
index 704b573..407aeaf 100644
--- a/ms-web/src/layouts/setting/SystemSet.vue
+++ b/ms-web/src/layouts/setting/SystemSet.vue
@@ -2,9 +2,38 @@
 import { ref, watchEffect, watch, computed } from "vue"
 import { useSettingStore } from "@/store"
 import themeColorConfig from "@/assets/themes/themeColor.json"
+import OtherColor from "@/assets/themes/color.json"
 
+const colorDialogV = ref(false)
+const activeTab = ref("红色系")
 const settingStore = useSettingStore()
 const themeColorList = themeColorConfig.themeColorList
+const animateModeList = [
+	{
+		value: "fade-slide",
+		label: "滑动",
+	},
+	{
+		value: "fade",
+		label: "消退",
+	},
+	{
+		value: "fade-bottom",
+		label: "底部消退",
+	},
+	{
+		value: "fade-scale",
+		label: "缩放消退",
+	},
+	{
+		value: "zoom-fade",
+		label: "渐变",
+	},
+	{
+		value: "zoom-out",
+		label: "闪现",
+	},
+]
 </script>
 
 <template>
@@ -72,7 +101,7 @@ const themeColorList = themeColorConfig.themeColorList
 					<el-divider content-position="center">系统主题</el-divider>
 				</el-col>
 				<el-col>
-					<ul class="grid grid-cols-8 gap-5">
+					<ul class="grid grid-cols-8 gap-5 justify-items-center">
 						<li
 							v-for="color in themeColorList"
 							:key="color"
@@ -82,6 +111,54 @@ const themeColorList = themeColorConfig.themeColorList
 							class="w-24 h-24 transition-all duration-300 ease-in-out"></li>
 					</ul>
 				</el-col>
+				<el-col>
+					<el-button plain class="w-full mt-10" @click="colorDialogV = true">更多颜色</el-button>
+					<el-dialog v-model="colorDialogV" title="中国传统颜色" class="!w-640 h-480">
+						<el-tabs v-model="activeTab" class="demo-tabs">
+							<el-tab-pane
+								:label="item.label"
+								:name="item.label"
+								v-for="item in OtherColor"
+								:key="item.label">
+								<ul class="grid grid-cols-8 gap-10 justify-items-center">
+									<li
+										v-for="it in item.data"
+										:key="it.color"
+										@click="settingStore.setThemeColorValue(it.color)">
+										<div
+											class="w-60 h-36 b-rd-5 relative"
+											:style="{ 'background-color': it.color }">
+											<SvgIcon
+												v-if="settingStore.themeColor === it.color"
+												:name="'tick'"
+												class="font-size-24 absolute top-50% left-50% translate-x--50% translate-y--50%"
+												:color="'#fff'" />
+										</div>
+										<p class="text-center">{{ it.label }}</p>
+									</li>
+								</ul>
+							</el-tab-pane>
+						</el-tabs>
+					</el-dialog>
+				</el-col>
+			</el-row>
+			<el-row justify="space-between" class="mt-10">
+				<el-col :span="10">
+					<span>主题颜色</span>
+				</el-col>
+				<el-col :span="10">
+					<el-select
+						v-model="settingStore.transitionAnimation"
+						class="m-2"
+						placeholder="Select"
+						size="small">
+						<el-option
+							v-for="item in animateModeList"
+							:key="item.value"
+							:label="item.label"
+							:value="item.value" />
+					</el-select>
+				</el-col>
 			</el-row>
 		</template>
 		<template #footer></template>
@@ -89,7 +166,6 @@ const themeColorList = themeColorConfig.themeColorList
 </template>
 
 <style lang="scss" scoped>
-
 :deep(.radio) {
 	display: flex;
 	flex-flow: column-reverse nowrap;
diff --git a/ms-web/src/main.ts b/ms-web/src/main.ts
index 4dba8fe..efbd063 100644
--- a/ms-web/src/main.ts
+++ b/ms-web/src/main.ts
@@ -2,6 +2,7 @@ import { createApp } from "vue"
 
 // uno.css
 import "virtual:uno.css"
+
 import "./styles"
 import App from "./App.vue"
 // 使用mock
diff --git a/ms-web/src/store/modules/setting.ts b/ms-web/src/store/modules/setting.ts
index 0fc60e2..50e2e85 100644
--- a/ms-web/src/store/modules/setting.ts
+++ b/ms-web/src/store/modules/setting.ts
@@ -9,6 +9,7 @@ export const useSettingStore = defineStore("setting", {
 		layoutTheme: "classic", // classic, topb
 		themeBg: "light", // dark, light
 		themeColor: "#1890ff", // 主题颜色
+		transitionAnimation: "zoom-out", // zoom-fade, zoom-out, slide-right, slide-up
 	}),
 	getters: {
 		getMenuActiveBg: state => {
diff --git a/ms-web/src/styles/common.scss b/ms-web/src/styles/common.scss
index bdf69cc..c4ba247 100644
--- a/ms-web/src/styles/common.scss
+++ b/ms-web/src/styles/common.scss
@@ -1,3 +1,5 @@
+
+
 * {
 	margin: 0;
 	padding: 0;
@@ -17,34 +19,9 @@ li {
 	list-style: none;
 }
 
-:root {
-  --el-color-primary: rgb(0, 0, 0);
-}
-
-
-[theme="dark"] {
-	background: #304156;
-	color: #fff;
-}
-
-[theme="light"] {
-	background: #fff;
-	color: #000;
-}
-
-[theme="dim"] {
-	background: #ec8282;
-	color: #000;
-}
-
-[theme="cafe"] {
-	background: #2b1e1e;
-	color: #000;
-}
-
 #nprogress {
 	.bar {
 		background-color: #48d8e3;
 		height: 3px;
 	}
-}
\ No newline at end of file
+}
diff --git a/ms-web/src/styles/global.scss b/ms-web/src/styles/global.scss
new file mode 100644
index 0000000..7faa3df
--- /dev/null
+++ b/ms-web/src/styles/global.scss
@@ -0,0 +1,28 @@
+@import "./common.scss";
+@import "./transition.scss";
+
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+	height: 100vh;
+}
+
+ul,
+li {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+#nprogress {
+	.bar {
+		background-color: #48d8e3;
+		height: 3px;
+	}
+}
diff --git a/ms-web/src/styles/index.ts b/ms-web/src/styles/index.ts
index 1a2f05a..1baa0b8 100644
--- a/ms-web/src/styles/index.ts
+++ b/ms-web/src/styles/index.ts
@@ -1 +1,3 @@
+import './global.scss'
+
 import 'virtual:svg-icons-register'
\ No newline at end of file
diff --git a/ms-web/src/styles/transition.scss b/ms-web/src/styles/transition.scss
new file mode 100644
index 0000000..1848b25
--- /dev/null
+++ b/ms-web/src/styles/transition.scss
@@ -0,0 +1,82 @@
+/* fade */
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 0.3s ease-in-out;
+}
+.fade-enter-from,
+.fade-leave-to {
+	opacity: 0;
+}
+
+/* fade-slide */
+.fade-slide-leave-active,
+.fade-slide-enter-active {
+	transition: all 0.3s;
+}
+.fade-slide-enter-from {
+	opacity: 0;
+	transform: translateX(-30px);
+}
+.fade-slide-leave-to {
+	opacity: 0;
+	transform: translateX(30px);
+}
+
+/* fade-bottom */
+.fade-bottom-enter-active,
+.fade-bottom-leave-active {
+	transition:
+		opacity 0.25s,
+		transform 0.3s;
+}
+.fade-bottom-enter-from {
+	opacity: 0;
+	transform: translateY(-10%);
+}
+.fade-bottom-leave-to {
+	opacity: 0;
+	transform: translateY(10%);
+}
+
+/* fade-scale */
+.fade-scale-leave-active,
+.fade-scale-enter-active {
+	transition: all 0.28s;
+}
+.fade-scale-enter-from {
+	opacity: 0;
+	transform: scale(1.2);
+}
+.fade-scale-leave-to {
+	opacity: 0;
+	transform: scale(0.8);
+}
+
+/* zoom-fade */
+.zoom-fade-enter-active,
+.zoom-fade-leave-active {
+	transition:
+		transform 0.2s,
+		opacity 0.3s ease-out;
+}
+.zoom-fade-enter-from {
+	opacity: 0;
+	transform: scale(0.92);
+}
+.zoom-fade-leave-to {
+	opacity: 0;
+	transform: scale(1.06);
+}
+
+/* zoom-out */
+.zoom-out-enter-active,
+.zoom-out-leave-active {
+	transition:
+		opacity 0.1s ease-in-out,
+		transform 0.15s ease-out;
+}
+.zoom-out-enter-from,
+.zoom-out-leave-to {
+	opacity: 0;
+	transform: scale(0);
+}
diff --git a/ms-web/src/typings/package.d.ts b/ms-web/src/typings/package.d.ts
new file mode 100644
index 0000000..72172d9
--- /dev/null
+++ b/ms-web/src/typings/package.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="@amap/amap-jsapi-types" />
+
diff --git a/ms-web/src/utils/gloComponents.ts b/ms-web/src/utils/gloComponents.ts
index 2adeea7..97f4964 100644
--- a/ms-web/src/utils/gloComponents.ts
+++ b/ms-web/src/utils/gloComponents.ts
@@ -1,7 +1,5 @@
 // 注册全局属性等
 import { App } from "vue"
-// 全局样式
-import "@/styles/common.scss"
 
 // 引入element-plus
 import ElementPlus from "element-plus"
diff --git a/ms-web/src/views/Console.vue b/ms-web/src/views/Console.vue
deleted file mode 100644
index 5faf99d..0000000
--- a/ms-web/src/views/Console.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<script lang="ts" setup>
-
-</script>
-
-<template>
-  <div class="home">
-    <h1>Home</h1>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-
-</style>
\ No newline at end of file
diff --git a/ms-web/src/views/HelloWorld.vue b/ms-web/src/views/HelloWorld.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/ms-web/src/views/SystemManage.vue b/ms-web/src/views/SystemManage.vue
deleted file mode 100644
index 1378f75..0000000
--- a/ms-web/src/views/SystemManage.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<script lang="ts" setup>
-
-</script>
-
-<template>
-  <div class="system-manage">
-    <h1>SystemManage</h1>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-
-</style>
\ No newline at end of file
diff --git a/ms-web/src/views/UserManage.vue b/ms-web/src/views/UserManage.vue
deleted file mode 100644
index 5f18814..0000000
--- a/ms-web/src/views/UserManage.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<script lang="ts" setup>
-
-</script>
-
-<template>
-  <div class="user-manage">
-    <h1>UserManage</h1>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-
-</style>
\ No newline at end of file
diff --git a/ms-web/src/views/exception/components/ExceptionStatus.vue b/ms-web/src/views/exception/components/ExceptionStatus.vue
index 3dc0a3e..2183059 100644
--- a/ms-web/src/views/exception/components/ExceptionStatus.vue
+++ b/ms-web/src/views/exception/components/ExceptionStatus.vue
@@ -1,78 +1,79 @@
 <template>
-  <div class="exception-container">
-    <div class="img-wrapper">
-      <img :src="statusImage" />
-    </div>
-    <div class="title">
-      <div>{{ statusTip }}</div>
-      <div class="margin-top-lg">
-        <n-button type="primary" size="small" @click="backHome"> 返回首页 </n-button>
-      </div>
-    </div>
-  </div>
+	<div class="exception-container">
+		<div class="img-wrapper">
+			<img :src="statusImage" />
+		</div>
+		<div class="title">
+			<div>{{ statusTip }}</div>
+			<div class="margin-top-lg">
+				<el-button type="primary" size="small" @click="backHome">返回首页</el-button>
+			</div>
+		</div>
+	</div>
 </template>
 
-<script>
-  import image_404 from '@/assets/img_404.png'
-  import image_403 from '@/assets/img_403.png'
-  import image_500 from '@/assets/img_500.png'
-  import { defineComponent } from 'vue'
-  export default defineComponent({
-    name: 'ExceptionStatus',
-    props: {
-      status: {
-        type: [Number, String],
-        default: '404',
-      },
-    },
-    data() {
-      return {
-        image404: image_404,
-        image403: image_403,
-        image500: image_500,
-      }
-    },
-    computed: {
-      statusImage() {
-        if (this.status.toString() === '404') {
-          return this.image404
-        } else if (this.status.toString() === '403') {
-          return this.image403
-        } else {
-          return this.image500
-        }
-      },
-      statusTip() {
-        if (this.status.toString() === '404') {
-          return '您访问的页面不存在'
-        } else if (this.status.toString() === '403') {
-          return '您没有权限访问该页面'
-        } else {
-          return '您访问的页面出错啦'
-        }
-      },
-    },
-    methods: {
-      backHome() {
-        this.$router.replace({ path: '/' })
-      },
-    },
-  })
+<script lang="ts">
+
+import image_404 from "@/assets/images/img_404.png"
+import image_403 from "@/assets/images/img_403.png"
+import image_500 from "@/assets/images/img_500.png"
+import { defineComponent } from "vue"
+export default defineComponent({
+	name: "ExceptionStatus",
+	props: {
+		status: {
+			type: [Number, String],
+			default: "404",
+		},
+	},
+	data() {
+		return {
+			image404: image_404,
+			image403: image_403,
+			image500: image_500,
+		}
+	},
+	computed: {
+		statusImage() {
+			if (this.status.toString() === "404") {
+				return this.image404
+			} else if (this.status.toString() === "403") {
+				return this.image403
+			} else {
+				return this.image500
+			}
+		},
+		statusTip() {
+			if (this.status.toString() === "404") {
+				return "您访问的页面不存在"
+			} else if (this.status.toString() === "403") {
+				return "您没有权限访问该页面"
+			} else {
+				return "您访问的页面出错啦"
+			}
+		},
+	},
+	methods: {
+		backHome() {
+			this.$router.replace({ path: "/" })
+		},
+	},
+})
 </script>
 
 <style lang="scss" scoped>
-  .exception-container {
-    text-align: center;
-    height: 100%;
-    .img-wrapper {
-      width: 80%;
-      margin: 0 auto;
-      & > img {
-        width: 100%;
-      }
-    }
-    .title {
-      margin-top: -50px;
-    }
-  }
+.exception-container {
+	text-align: center;
+	height: 100%;
+	.img-wrapper {
+		width: 80%;
+		margin: 0 auto;
+		& > img {
+			width: 100%;
+		}
+	}
+	.title {
+		margin-top: -50px;
+	}
+}
 </style>
diff --git a/ms-web/src/views/map/baidu-map.vue b/ms-web/src/views/map/baidu-map.vue
new file mode 100644
index 0000000..0a5b06f
--- /dev/null
+++ b/ms-web/src/views/map/baidu-map.vue
@@ -0,0 +1,34 @@
+<script setup>
+import { onMounted, ref } from "vue"
+
+const baiduRef = ref(null)
+
+async function initMap() {
+	const map = new BMapGL.Map(baiduRef.value) // 创建地图实例
+	const point = new BMapGL.Point(116.404, 39.915) // 创建点坐标
+	map.enableScrollWheelZoom(true) // 滚轮缩放
+	map.centerAndZoom(point, 15)
+	const navi3DCtrl = new BMapGL.NavigationControl3D() // 添加3D控件
+	map.addControl(navi3DCtrl)
+	const scaleCtrl = new BMapGL.ScaleControl() // 添加比例尺控件
+	map.addControl(scaleCtrl)
+	const zoomCtrl = new BMapGL.ZoomControl() // 添加缩放控件
+	map.addControl(zoomCtrl)
+}
+
+onMounted(() => {
+	initMap()
+})
+</script>
+
+<template>
+	<div id="container">
+		<div ref="baiduRef" id="baidu" class="w-full h-full"></div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+#container {
+	height: calc(100vh - $head-height - $tabHeight - 24px);
+}
+</style>
diff --git a/ms-web/src/views/map/gaode-map.vue b/ms-web/src/views/map/gaode-map.vue
new file mode 100644
index 0000000..8145a54
--- /dev/null
+++ b/ms-web/src/views/map/gaode-map.vue
@@ -0,0 +1,33 @@
+<template>
+	<div ref="domRef" class="w100% h800"></div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from "vue"
+import { useScriptTag } from "@vueuse/core"
+import { AMAP_SDK_URL } from "@/config"
+import "@amap/amap-jsapi-types";
+
+defineOptions({ name: "GaodeMap" })
+
+const { load } = useScriptTag(AMAP_SDK_URL)
+
+const domRef = ref<HTMLDivElement>()
+
+async function renderMap() {
+	await load(true)
+	if (!domRef.value) return
+	const map = new AMap.Map(domRef.value, {
+		zoom: 11,
+		center: [114.05834626586915, 22.546789983033168],
+		viewMode: "3D",
+	})
+	map.getCenter()
+}
+
+onMounted(() => {
+	renderMap()
+})
+</script>
+
+<style scoped></style>