modified theme , add animation

OwOxxx · Jan 8, 2024 · a218781 · a218781
1 parent 70a36ce
commit a218781
Show file tree

Hide file tree

Showing 26 changed files with 368 additions and 244 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
diff --git a/ms-web/src/config/index.ts 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
@@ -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
diff --git 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
@@ -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
@@ -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,14 +111,61 @@ 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>
 	</el-drawer>
 </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
@@ -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
@@ -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
@@ -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;
 	}
-}
+}