fix: 灰色模式 横屏滚动修复 &初始化 主题修复

package.json

@@ -29,6 +29,7 @@
     "@element-plus/icons-vue": "^2.1.0",
     "@vueuse/core": "^10.1.2",
     "axios": "^1.4.0",
+    "colord": "^2.9.3",
     "dayjs": "^1.11.7",
     "echarts": "^5.4.2",
     "element-plus": "^2.3.4",
@@ -47,7 +48,7 @@
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
-		"@types/js-md5": "^0.7.0",
+    "@types/js-md5": "^0.7.0",
     "@types/nprogress": "^0.2.0",
     "@types/path-browserify": "^1.0.0",
     "@types/vue-ls": "^3.2.3",

src/components/RightPanel/index.vue

@@ -77,18 +77,20 @@ onBeforeUnmount(() => {
 })
 </script>
 
-<style>
+<style lang="scss">
 .showRightPanel {
 	overflow: hidden;
 	position: relative;
-	width: calc(100% - 15px);
+	//width: calc(100% - 15px);
 }
 </style>
 
 <style lang="scss" scoped>
 .rightPanel {
+	width: 100%;
 	max-width: 280px;
-	position: absolute;
+	height: 100vh;
+	position: fixed;
 	top: 0;
 	right: 0;
 	z-index: 99;
@@ -104,7 +106,6 @@ onBeforeUnmount(() => {
 		display: none;
 		height: 100%;
 	}
-
 	&-background {
 		position: fixed;
 		top: 0;
@@ -118,18 +119,17 @@ onBeforeUnmount(() => {
 .show {
 	transition: all 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
 
-	.rightPanel-background {
-		z-index: 88;
-		opacity: 0.5;
-		width: 100%;
-		height: 100%;
-	}
-
 	.rightPanel {
 		transform: translate(0);
 		&-items {
 			display: block;
 		}
+		&-background {
+			z-index: 88;
+			opacity: 0.5;
+			width: 100%;
+			height: 100%;
+		}
 	}
 }
 

src/hooks/useTheme.ts

@@ -13,7 +13,7 @@ import { footerTheme } from '@/styles/theme/footer'
  * */
 export const useTheme = () => {
 	const { setting } = useStore()
-	const { themeColor, layout, isDark, asideInverted, headerInverted, footerInverted /*isGrey, isWeak, */ } = storeToRefs(setting)
+	const { themeColor, layout, isDark, isGrey, isWeak, asideInverted, headerInverted, footerInverted } = storeToRefs(setting)
 
 	// 切换暗黑主题 ==> 同时修改主题颜色、侧边栏、头部颜色
 	const switchDark = () => {
@@ -103,8 +103,8 @@ export const useTheme = () => {
 	// init theme
 	const initTheme = () => {
 		switchDark()
-		// if (isGrey.value) changeGreyOrWeak('grey', true)
-		// if (isWeak.value) changeGreyOrWeak('weak', true)
+		if (isGrey.value) changeGreyOrWeak('grey', true)
+		if (isWeak.value) changeGreyOrWeak('weak', true)
 	}
 
 	return {

src/store/modules/permission.ts

@@ -119,8 +119,10 @@ const usePermissionStore = defineStore({
 		queryMenuList(roles: string[]) {
 			return getMenuList().then((data: any) => {
 				console.error(data, 'menuList')
-				const menuList = filterAsyncRoutes(data!.menu.filter((v: any) => /\/.*/.test(v.path)), roles)
-				console.warn(menuList, data, 'xxxxxxxxxxx')
+				const menuList = filterAsyncRoutes(
+					data!.menu.filter((v: any) => /\/.*/.test(v.path)),
+					roles
+				)
 				this.setRoutes(menuList)
 				return menuList
 			})

src/styles/project_normal.scss

@@ -1,6 +1,7 @@
 body {
 	font-family: $le-family;
 	font-size: 14px;
+	overflow-x: hidden;
 }
 // 页面公用样式 flex column 外壳
 .flex-column-page-wrap {