Merge remote-tracking branch 'origin/master'

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/api/system/message.ts

@@ -0,0 +1,12 @@
+import request from '@/utils/request'
+
+/**
+ * 获取路由列表
+ */
+export function getMessage() {
+	return request({
+		url: '/sys/message/inform',
+		method: 'get'
+		// extraConfig: { showFullscreenLoading: true }
+	})
+}

src/components/RightPanel/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<div ref="rightPanel" :class="{ show }" class="rightPanel-container">
+	<div ref="rightPanel" :class="{ show }" class="rightPanel-wrap">
 		<div class="rightPanel-background" />
 		<div class="rightPanel">
 			<div class="handle-button" :style="{ top: buttonTop + 'px', 'background-color': themeColor }" @click="show = !show">
@@ -77,25 +77,15 @@ 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-background {
-	position: fixed;
-	top: 0;
-	left: 0;
-	opacity: 0;
-	transition: opacity 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
-	background: rgba(0, 0, 0, 0.2);
-	z-index: -1;
-}
-
 .rightPanel {
 	width: 100%;
 	max-width: 280px;
@@ -103,29 +93,43 @@ onBeforeUnmount(() => {
 	position: fixed;
 	top: 0;
 	right: 0;
-	box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.05);
+	z-index: 99;
+	//box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.05);
 	//transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
 	transform: translate(100%);
-	//background: #fff;
 	//background-color: var(--el-drawer-bg-color);
 	background-color: var(--el-bg-color);
 	//box-shadow: var(--el-box-shadow-dark);
+	box-shadow: var(--el-box-shadow-lighter);
 	transition: all var(--el-transition-duration);
-	z-index: 99;
+	&-items {
+		display: none;
+		height: 100%;
+	}
+	&-background {
+		position: fixed;
+		top: 0;
+		left: 0;
+		opacity: 0;
+		transition: opacity 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
+		background: var(--el-fill-color-darker);
+		z-index: -1;
+	}
 }
-
 .show {
 	transition: all 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
 
-	.rightPanel-background {
-		z-index: 88;
-		opacity: 1;
-		width: 100%;
-		height: 100%;
-	}
-
 	.rightPanel {
 		transform: translate(0);
+		&-items {
+			display: block;
+		}
+		&-background {
+			z-index: 88;
+			opacity: 0.5;
+			width: 100%;
+			height: 100%;
+		}
 	}
 }
 
@@ -147,8 +151,6 @@ onBeforeUnmount(() => {
 	line-height: 32px;
 
 	.icon {
-		//font-size: 24px;
-		//line-height: 32px;
 		width: 18px;
 		height: 18px;
 	}

src/hooks/interface/index.ts

@@ -1,31 +1,3 @@
-/*export namespace Table {
-	export interface Pageable {
-		pageNum: number
-		pageSize: number
-		total: number
-	}
-	export interface StateProps {
-		tableData: any[]
-		pageable: Pageable
-		searchParam: {
-			[key: string]: any
-		}
-		searchInitParam: {
-			[key: string]: any
-		}
-		totalParam: {
-			[key: string]: any
-		}
-		icon?: {
-			[key: string]: any
-		}
-	}
-}
-
-export namespace HandleData {
-	export type MessageType = '' | 'success' | 'warning' | 'info' | 'error'
-}*/
-
 export namespace Theme {
 	export type ThemeType = 'light' | 'inverted' | 'dark'
 	export type GreyOrWeakType = 'grey' | 'weak'

src/hooks/useTheme.ts

@@ -2,7 +2,6 @@ import { storeToRefs } from 'pinia'
 import { Theme } from './interface'
 // import { ElMessage } from 'element-plus'
 import useStore from '@/store'
-// import { useStore } from '@/stores/modules/global'
 import { getLightColor, getDarkColor } from '@/utils/color'
 import { menuTheme } from '@/styles/theme/menu'
 import { asideTheme } from '@/styles/theme/aside'
@@ -14,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 = () => {
@@ -37,7 +36,6 @@ export const useTheme = () => {
 			const primaryColor = isDark.value ? `${getDarkColor(val, i / 10)}` : `${getLightColor(val, i / 10)}`
 			document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, primaryColor)
 		}
-		// globalStore.setGlobalState('primary', val)
 		setting.changeSetting('themeColor', val)
 	}
 
@@ -50,9 +48,8 @@ export const useTheme = () => {
 			weak: 'filter: invert(80%)'
 		}
 		body.setAttribute('style', styles[type])
-		const propName = type === 'grey' ? 'isWeak' : 'isGrey'
-		setting.changeSetting(propName, false)
-		// globalStore.setGlobalState(propName, false)
+		// 关闭另一个模式
+		setting.changeSetting(type === 'grey' ? 'isWeak' : 'isGrey', false)
 	}
 
 	// 设置菜单样式
@@ -106,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/layout/LayoutLeftMix/index.scss

@@ -11,7 +11,7 @@
 		background-color: var(--el-menu-bg-color);
 		//border-right: 1px solid var(--el-aside-border-color);
 		box-shadow: 1px 0 2px var(--el-aside-border-color);
-		z-index: $header_index + 2;
+		z-index: $header_index + 3;
 		.logo {
 			display: flex;
 			align-items: center;
@@ -90,7 +90,7 @@
 		overflow: hidden;
 		background-color: var(--el-menu-bg-color);
 		//border-right: 1px solid var(--el-aside-border-color);
-		z-index: $header_index + 1;
+		z-index: $header_index + 2;
 		box-shadow: 1px 0 2px var(--el-aside-border-color);
 		//box-shadow: 2px 0 8px #1d23290d;
 		//box-shadow: 1px 0 4px -1px var(--el-aside-border-color);

src/layout/LayoutTopMix/index.scss

@@ -14,7 +14,7 @@
 		//border-bottom: 1px solid var(--el-header-border-color);
 		//box-shadow: 0 2px 8px var(--el-header-border-color);
 		box-shadow: 0 1px 4px -1px var(--el-header-border-color);
-		z-index: $header_index;
+		z-index: $header_index + 1;
     .header-lf {
       display: flex;
       align-items: center;
@@ -55,7 +55,7 @@
       width: auto;
       background-color: var(--el-menu-bg-color);
 			//border-right: 1px solid var(--el-aside-border-color);
-			z-index: $header_index - 1;
+			z-index: $header_index;
 			//box-shadow: 2px 0 8px #1d23290d;
 			//box-shadow: 2px 0 8px var(--el-aside-border-color);
 			box-shadow: 1px 0 2px var(--el-aside-border-color);

src/layout/components/AppMain.vue

@@ -35,7 +35,7 @@ const pageAnimateMode = computed(() => setting.animate ? setting.animateMode : u
 	height: 100%;
 	width: 100%;
 	position: relative;
-	z-index: 0;
+	//z-index: 0; // 不能有
 	overflow: hidden;
 }
 

src/layout/components/Header/ToolBarRight.vue

@@ -1,16 +1,16 @@
 <template>
 	<div class="tool-bar-right">
 		<div class="header-icon">
-			<!--			<AssemblySize id="assemblySize" />-->
-			<Screenfull id="screenfull" />
+			<!--			<AssemblySize />-->
+			<Screenfull />
 			<el-tooltip content="布局大小" effect="dark" placement="bottom">
-				<SizeSelect id="size-select" class="right-menu-item le-hover-effect--bg" />
+				<SizeSelect class="right-menu-item le-hover-effect--bg" />
 			</el-tooltip>
-			<Language id="language" class="right-menu-item le-hover-effect--bg" />
+			<Language class="right-menu-item le-hover-effect--bg" />
 			<!--      todo...搜索 -->
 			<!--			<SearchMenu id="searchMenu" />-->
 			<!--			<ThemeSetting id="themeSetting" />-->
-			<!--			<Message id="message" />-->
+			<Message class="right-menu-item le-hover-effect--bg" />
 			<!--			<Fullscreen id="fullscreen" />-->
 		</div>
 		<Avatar />
@@ -25,7 +25,7 @@ import Screenfull from '@/components/Screenfull/index.vue'
 import SizeSelect from '@/components/SizeSelect/index.vue'
 // import SearchMenu from './components/SearchMenu.vue'
 // import ThemeSetting from './components/ThemeSetting.vue'
-// import Message from './components/Message.vue'
+import Message from './components/Message.vue'
 // import Fullscreen from './components/Fullscreen.vue'
 import Avatar from './components/Avatar.vue'
 

src/layout/components/Header/components/Message.vue

@@ -0,0 +1,113 @@
+<template>
+	<div class="message">
+		<el-popover placement="bottom" :width="310" trigger="click">
+			<template #reference>
+				<el-badge class="item" :value="total">
+					<i class="le-iconfont le-notice"></i>
+				</el-badge>
+			</template>
+			<el-tabs v-model="activeTab">
+				<el-tab-pane v-for="v of tabsConfig" :key="v.name" :name="v.name">
+					<template #label> {{ v.label }}({{ v.list.length }}) </template>
+					<template v-if="v.list.length">
+						<div class="message-list">
+							<div v-for="item of v.list" :key="item.id" class="message-item">
+								<!--<img src="" alt="" class="message-icon" />-->
+								<div class="message-content">
+									<div class="message-title">
+										<span class="txt text-overflow_ellipsis" :title="item.title">{{ item.title }}</span>
+										<span class="message-date">{{ item.createTime }}</span>
+									</div>
+									<span class="message-txt">{{ item.content }}</span>
+								</div>
+							</div>
+						</div>
+					</template>
+					<template v-else>
+						<LeNoData />
+					</template>
+				</el-tab-pane>
+			</el-tabs>
+		</el-popover>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { getMessage } from '@/api/system/message'
+// noticeList  通知     messageList   消息     todoList   待办
+const tabsConfig = reactive({
+	noticeList: {
+		name: 'noticeList',
+		label: '通知',
+		list: []
+	},
+	messageList: {
+		name: 'messageList',
+		label: '消息',
+		list: []
+	},
+	todoList: {
+		name: 'todoList',
+		label: '代办',
+		list: []
+	}
+})
+const activeTab = ref('noticeList')
+const total = ref(0)
+getMessage().then(res => {
+	console.error(res, 'res///')
+	let _total = 0
+	Object.keys(tabsConfig).map(key => {
+		if (res[key]) {
+			tabsConfig[key].list = res[key]
+			_total += res[key].length
+		} else {
+			res[key].list = []
+		}
+	})
+	total.value = _total
+})
+</script>
+
+<style scoped lang="scss">
+.message-list {
+	display: flex;
+	flex-direction: column;
+	max-height: 390px;
+	overflow-y: auto;
+	.message-item {
+		display: flex;
+		align-items: center;
+		padding: 8px 0;
+		border-bottom: 1px solid var(--el-border-color-light);
+		&:last-child {
+			border: none;
+		}
+		.message-content {
+			display: flex;
+			flex-direction: column;
+			width: 100%;
+			.message-title {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				margin-bottom: 5px;
+				font-weight: 600;
+				color: var(--el-text-color-primary);
+			}
+			.message-date {
+				font-size: 12px;
+				color: var(--el-text-color-secondary);
+				margin-left: 10px;
+				font-weight: 400;
+				flex-shrink: 0;
+			}
+			.message-txt {
+				//margin-bottom: 5px;
+				color: var(--el-text-color-regular);
+			}
+		}
+	}
+}
+</style>

src/layout/components/Settings/index.vue

@@ -1,125 +1,136 @@
 <template>
 	<div class="drawer-container">
 		<h3 class="drawer-title">主题配置</h3>
-		<el-divider class="local-divider">
-			<el-icon><Operation /></el-icon>主题模式
-		</el-divider>
-		<div class="drawer-item">
-			<span>主题颜色</span>
-			<theme-picker @change="themeChange" />
-		</div>
-		<div class="drawer-item" @click.stop="">
-			<span>暗黑主题</span>
-			<el-switch v-model="isDark" inline-prompt class="drawer-switch" active-icon="Sunny" inactive-icon="Moon" @change="switchDark" />
-		</div>
-		<div class="drawer-item">
-			<span>侧边栏深色</span>
-			<el-switch v-model="asideInverted" class="drawer-switch" @change="setAsideTheme" />
-		</div>
-		<div class="drawer-item">
-			<span>头部深色</span>
-			<el-switch v-model="headerInverted" class="drawer-switch" @change="setHeaderTheme" />
-		</div>
-		<div v-show="footer" class="drawer-item">
-			<span>底部深色</span>
-			<el-switch v-model="footerInverted" class="drawer-switch" @change="setFooterTheme" />
-		</div>
+		<el-scrollbar class="drawer-content">
+			<el-divider class="local-divider">
+				<el-icon><Operation /></el-icon>主题模式
+			</el-divider>
+			<div class="drawer-item">
+				<span>主题颜色</span>
+				<theme-picker @change="themeChange" />
+			</div>
+			<div class="drawer-item" @click.stop="">
+				<span>暗黑主题</span>
+				<el-switch v-model="isDark" inline-prompt active-icon="Sunny" inactive-icon="Moon" @change="switchDark" />
+			</div>
+			<div class="drawer-item" @click.stop="">
+				<span>灰色模式</span>
+				<el-switch v-model="isGrey" inline-prompt @change="changeGreyOrWeak('grey', $event)" />
+			</div>
+			<div class="drawer-item" @click.stop="">
+				<span>色弱模式</span>
+				<el-switch v-model="isWeak" inline-prompt @change="changeGreyOrWeak('weak', $event)" />
+			</div>
+			<div class="drawer-item">
+				<span>侧边栏深色</span>
+				<el-switch v-model="asideInverted" @change="setAsideTheme" />
+			</div>
+			<div class="drawer-item">
+				<span>头部深色</span>
+				<el-switch v-model="headerInverted" @change="setHeaderTheme" />
+			</div>
+			<div v-show="footer" class="drawer-item">
+				<span>底部深色</span>
+				<el-switch v-model="footerInverted" @change="setFooterTheme" />
+			</div>
 
-		<el-divider class="local-divider">
-			<el-icon><Menu /></el-icon>布局模式
-		</el-divider>
-		<div class="layout-box">
-			<el-tooltip effect="dark" content="左侧菜单模式" placement="top" :show-after="200">
-				<div :class="['layout-item layout-left', { 'is-active': layout == 'left' }]" @click="setLayout('left')">
-					<div class="layout-light"></div>
-					<div class="layout-container">
-						<div class="layout-dark"></div>
-						<div class="layout-content"></div>
+			<el-divider class="local-divider">
+				<el-icon><Menu /></el-icon>布局模式
+			</el-divider>
+			<div class="layout-box">
+				<el-tooltip effect="dark" content="左侧菜单模式" placement="top" :show-after="200">
+					<div :class="['layout-item layout-left', { 'is-active': layout == 'left' }]" @click="setLayout('left')">
+						<div class="layout-light"></div>
+						<div class="layout-container">
+							<div class="layout-dark"></div>
+							<div class="layout-content"></div>
+						</div>
+						<el-icon v-if="layout == 'left'">
+							<CircleCheckFilled />
+						</el-icon>
 					</div>
-					<el-icon v-if="layout == 'left'">
-						<CircleCheckFilled />
-					</el-icon>
-				</div>
-			</el-tooltip>
-			<el-tooltip effect="dark" content="左侧菜单混合模式" placement="top" :show-after="200">
-				<div :class="['layout-item layout-leftMix', { 'is-active': layout == 'leftMix' }]" @click="setLayout('leftMix')">
-					<div class="layout-light"></div>
-					<div class="layout-light light-2"></div>
-					<div class="layout-container">
+				</el-tooltip>
+				<el-tooltip effect="dark" content="左侧菜单混合模式" placement="top" :show-after="200">
+					<div :class="['layout-item layout-leftMix', { 'is-active': layout == 'leftMix' }]" @click="setLayout('leftMix')">
+						<div class="layout-light"></div>
+						<div class="layout-light light-2"></div>
+						<div class="layout-container">
+							<div class="layout-dark"></div>
+							<div class="layout-content"></div>
+						</div>
+						<el-icon v-if="layout == 'leftMix'">
+							<CircleCheckFilled />
+						</el-icon>
+					</div>
+				</el-tooltip>
+				<el-tooltip effect="dark" content="顶部菜单模式" placement="top" :show-after="200">
+					<div :class="['layout-item layout-top', { 'is-active': layout == 'top' }]" @click="setLayout('top')">
 						<div class="layout-dark"></div>
 						<div class="layout-content"></div>
+						<el-icon v-if="layout == 'top'">
+							<CircleCheckFilled />
+						</el-icon>
 					</div>
-					<el-icon v-if="layout == 'leftMix'">
-						<CircleCheckFilled />
-					</el-icon>
-				</div>
-			</el-tooltip>
-			<el-tooltip effect="dark" content="顶部菜单模式" placement="top" :show-after="200">
-				<div :class="['layout-item layout-top', { 'is-active': layout == 'top' }]" @click="setLayout('top')">
-					<div class="layout-dark"></div>
-					<div class="layout-content"></div>
-					<el-icon v-if="layout == 'top'">
-						<CircleCheckFilled />
-					</el-icon>
-				</div>
-			</el-tooltip>
-			<el-tooltip effect="dark" content="顶部菜单混合模式" placement="top" :show-after="200">
-				<div :class="['layout-item layout-topMix', { 'is-active': layout == 'topMix' }]" @click="setLayout('topMix')">
-					<div class="layout-dark"></div>
-					<div class="layout-container">
-						<div class="layout-light"></div>
-						<div class="layout-content"></div>
+				</el-tooltip>
+				<el-tooltip effect="dark" content="顶部菜单混合模式" placement="top" :show-after="200">
+					<div :class="['layout-item layout-topMix', { 'is-active': layout == 'topMix' }]" @click="setLayout('topMix')">
+						<div class="layout-dark"></div>
+						<div class="layout-container">
+							<div class="layout-light"></div>
+							<div class="layout-content"></div>
+						</div>
+						<el-icon v-if="layout == 'topMix'">
+							<CircleCheckFilled />
+						</el-icon>
 					</div>
-					<el-icon v-if="layout == 'topMix'">
-						<CircleCheckFilled />
-					</el-icon>
-				</div>
-			</el-tooltip>
-		</div>
+				</el-tooltip>
+			</div>
 
-		<el-divider class="local-divider">
-			<el-icon><Operation /></el-icon>界面功能
-		</el-divider>
-		<div class="drawer-item">
-			<span>显示底部</span>
-			<el-switch v-model="footer" class="drawer-switch" />
-		</div>
-		<div class="drawer-item">
-			<span>面包屑</span>
-			<el-switch v-model="breadcrumb" class="drawer-switch" />
-		</div>
-		<div v-show="breadcrumb" class="drawer-item">
-			<span>面包屑图标</span>
-			<el-switch v-model="breadcrumbIcon" class="drawer-switch" />
-		</div>
+			<el-divider class="local-divider">
+				<el-icon><Operation /></el-icon>界面功能
+			</el-divider>
+			<div class="drawer-item">
+				<span>显示底部</span>
+				<el-switch v-model="footer" />
+			</div>
+			<div class="drawer-item">
+				<span>面包屑</span>
+				<el-switch v-model="breadcrumb" />
+			</div>
+			<div v-show="breadcrumb" class="drawer-item">
+				<span>面包屑图标</span>
+				<el-switch v-model="breadcrumbIcon" />
+			</div>
 
-		<div class="drawer-item">
-			<span>多页签</span>
-			<el-switch v-model="tagsView" class="drawer-switch" />
-		</div>
+			<div class="drawer-item">
+				<span>多页签</span>
+				<el-switch v-model="tagsView" />
+			</div>
 
-		<div class="drawer-item">
-			<span>页面切换动画</span>
-			<el-switch v-model="animate" class="drawer-switch" />
-		</div>
+			<div class="drawer-item">
+				<span>页面切换动画</span>
+				<el-switch v-model="animate" />
+			</div>
+
+			<div class="drawer-item">
+				<span>页面切换动画类型</span>
+				<el-select v-model="animateMode" style="width: 100px;">
+					<el-option v-for="v of animateList" :key="v.value" :value="v.value" :label="v.label" />
+				</el-select>
+			</div>
+		</el-scrollbar>
 
-		<div class="drawer-item">
-			<span>页面切换动画类型</span>
-			<el-select v-model="animateMode" style="width: 100px;" class="drawer-switch">
-				<el-option v-for="v of animateList" :key="v.value" :value="v.value" :label="v.label" />
-			</el-select>
-		</div>
 
 		<!--
 				<div class="drawer-item">
 					<span>固定 Header</span>
-					<el-switch v-model="fixedHeader" class="drawer-switch" />
+					<el-switch v-model="fixedHeader" />
 				</div>
 		-->
 
 		<!--		<div class="drawer-item">
 					<span>侧边栏 Logo</span>
-					<el-switch v-model="sidebarLogo" class="drawer-switch" />
+					<el-switch v-model="sidebarLogo" />
 				</div>-->
 	</div>
 </template>
@@ -135,7 +146,7 @@ import { useTheme } from '@/hooks/useTheme'
 import useStore from '@/store'
 
 const { setting } = useStore()
-const { switchDark, setAsideTheme, setHeaderTheme, setFooterTheme } = useTheme()
+const { switchDark, changeGreyOrWeak, setAsideTheme, setHeaderTheme, setFooterTheme } = useTheme()
 // const isDark = useDark()
 // const toggleDark = () => useToggle(isDark)
 
@@ -172,6 +183,8 @@ const animateList = [
 ]
 const {
 	isDark,
+	isGrey,
+	isWeak,
 	layout,
 	asideInverted,
 	headerInverted,
@@ -219,26 +232,34 @@ const setLayout = (val: LayoutType) => {
 </script>
 
 <style lang="scss" scoped>
+$header_height: 55px;
 .drawer-container {
 	position: relative;
-	padding: 0 24px 16px 24px;
-	//padding-top: 0;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	//padding: 0 24px 16px 24px;
+	padding-bottom: 10px;
 	font-size: 14px;
 	line-height: 1.5;
 	word-wrap: break-word;
 
 	.drawer-title {
 		padding: 16px 24px;
-		margin: 0 -24px;
-		height: 55px;
-		//margin-bottom: 12px;
-		//color: rgba(0, 0, 0, 0.85);
+		//margin: 0 -24px;
+		//padding: 16px 0;
+		height: $header_height;
 		font-size: 16px;
-		//line-height: 22px;
 		border-bottom: 1px solid var(--el-border-color-lighter);
 	}
 
+	/*.drawer-content {
+		height: calc(100% - $header_height);
+	}*/
+
 	.local-divider {
+		margin: 24px;
+		width: auto;
 		.el-icon {
 			position: relative;
 			top: 2px;
@@ -247,25 +268,12 @@ const setLayout = (val: LayoutType) => {
 	}
 
 	.drawer-item {
-		//color: rgba(0, 0, 0, 0.65);
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
 		color: var(--el-text-color-primary);
 		font-size: 14px;
-		padding: 6px 0;
-	}
-
-	.drawer-switch {
-		//float: right;
-	}
-
-	.job-link {
-		display: block;
-		position: absolute;
-		width: 100%;
-		left: 0;
-		bottom: 0;
+		padding: 4px 24px;
 	}
 
 	.layout-box {
@@ -273,7 +281,8 @@ const setLayout = (val: LayoutType) => {
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: space-between;
-		padding: 12px 6px 0;
+		//padding: 12px 6px 0;
+		padding: 4px 24px;
 		.layout-item {
 			position: relative;
 			box-sizing: border-box;
@@ -315,7 +324,7 @@ const setLayout = (val: LayoutType) => {
 		.layout-left {
 			display: flex;
 			justify-content: space-between;
-			margin-bottom: 20px;
+			margin-bottom: 12px;
 			.layout-light {
 				width: 20%;
 			}
@@ -332,23 +341,27 @@ const setLayout = (val: LayoutType) => {
 				}
 			}
 		}
-		.layout-topMix {
+		.layout-leftMix {
 			display: flex;
-			flex-direction: column;
 			justify-content: space-between;
-			margin-bottom: 20px;
-			.layout-dark {
-				height: 22%;
+			margin-bottom: 12px;
+			.layout-light {
+				width: 14%;
+				&.light-2 {
+					width: 17%;
+				}
 			}
 			.layout-container {
 				display: flex;
+				flex-direction: column;
 				justify-content: space-between;
-				height: 70%;
-				.layout-light {
-					width: 20%;
+				width: 55%;
+				.layout-dark {
+					height: 20%;
 				}
 				.layout-content {
-					width: 70%;
+					height: 67%;
+					width: 100%;
 				}
 			}
 		}
@@ -356,7 +369,7 @@ const setLayout = (val: LayoutType) => {
 			display: flex;
 			flex-direction: column;
 			justify-content: space-between;
-			margin-bottom: 15px;
+			//margin-bottom: 12px;
 			.layout-dark {
 				height: 20%;
 			}
@@ -364,27 +377,23 @@ const setLayout = (val: LayoutType) => {
 				height: 67%;
 			}
 		}
-		.layout-leftMix {
+		.layout-topMix {
 			display: flex;
+			flex-direction: column;
 			justify-content: space-between;
-			margin-bottom: 15px;
-			.layout-light {
-				width: 14%;
-				&.light-2 {
-					width: 17%;
-				}
+			//margin-bottom: 12px;
+			.layout-dark {
+				height: 22%;
 			}
 			.layout-container {
 				display: flex;
-				flex-direction: column;
 				justify-content: space-between;
-				width: 55%;
-				.layout-dark {
-					height: 20%;
+				height: 70%;
+				.layout-light {
+					width: 20%;
 				}
 				.layout-content {
-					height: 67%;
-					width: 100%;
+					width: 70%;
 				}
 			}
 		}

src/settings.ts

@@ -7,6 +7,10 @@ const defaultSettingState: SettingState = {
 	themeColor: '#409eff',
 	// 暗黑主题
 	isDark: false,
+	// 灰色模式
+	isGrey: false,
+	// 色弱模式
+	isWeak: false,
 	// 侧边栏深色
 	asideInverted: false,
 	// 头部深色

src/store/interface/index.ts

@@ -3,61 +3,3 @@ export type LayoutType = 'left' | 'leftMix' | 'topMix' | 'top'
 export type AssemblySizeType = 'large' | 'default' | 'small'
 
 export type LanguageType = 'zh' | 'en' | null
-
-/* GlobalState */
-/*
-export interface GlobalState {
-	layout: LayoutType
-	assemblySize: AssemblySizeType
-	language: LanguageType
-	maximize: boolean
-	primary: string
-	isDark: boolean
-	isGrey: boolean
-	isWeak: boolean
-	asideInverted: boolean
-	headerInverted: boolean
-	isCollapse: boolean
-	accordion: boolean
-	breadcrumb: boolean
-	breadcrumbIcon: boolean
-	tabs: boolean
-	tabsIcon: boolean
-	footer: boolean
-}
-
-/!* UserState *!/
-export interface UserState {
-	token: string
-	userInfo: { name: string }
-}
-
-/!* tabsMenuProps *!/
-export interface TabsMenuProps {
-	icon: string
-	title: string
-	path: string
-	name: string
-	close: boolean
-	isKeepAlive: boolean
-}
-
-/!* TabsState *!/
-export interface TabsState {
-	tabsMenuList: TabsMenuProps[]
-}
-
-/!* AuthState *!/
-export interface AuthState {
-	routeName: string
-	authButtonList: {
-		[key: string]: string[]
-	}
-	authMenuList: Menu.MenuOptions[]
-}
-
-/!* KeepAliveState *!/
-export interface KeepAliveState {
-	keepAliveName: string[]
-}
-*/

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/index.scss

@@ -12,6 +12,10 @@
 @import './lance-element-vue.scss';
 // 加入布局样式
 @import "./flex.scss";
+html {
+	height: 100%;
+	box-sizing: border-box;
+}
 body {
 	margin: 0;
 	padding: 0;
@@ -27,11 +31,6 @@ body {
 	font-weight: 700;
 }*/
 
-html {
-	height: 100%;
-	box-sizing: border-box;
-}
-
 #app {
 	height: 100%;
 }

src/styles/lance-element/draggableNest.scss

@@ -22,7 +22,8 @@
 		transition: .18s ease;
 	}
 	.chosen {
-		box-shadow: 1px 1px 5px 2px rgba(0,0,0,.15);
+		//box-shadow: 1px 1px 5px 2px rgba(0,0,0,.15);
+		box-shadow: inset 0 0 6px -2px rgba(0, 0, 0, 0.15);
 	}
 	flex: 1;
 	width: 100%;
@@ -45,7 +46,7 @@
 			width: 100%;
 			// 不能拖动 不能删除
 			&.disabled {
-				color: rgba(0, 0, 0, 0.25);
+				color: var(--el-text-color-disabled);
 				cursor: not-allowed;
 				&.ghost {
 					background: unset;

src/styles/lance-element/table.scss

@@ -98,7 +98,8 @@
 		width: 100%;
 		height: 100%;
 		max-width: 100%;
-		background-color: #fff !important;
+		//background-color: #fff !important;
+		background-color: var(--el-fill-color-extra-light) !important;
 		z-index: 2000;
 	}
 	.slot_title-wrap {

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 {

src/types/store.d.ts

@@ -38,6 +38,10 @@ export interface SettingState {
 	themeColor: string
 	// 暗黑主题
 	isDark: boolean
+	// 灰色模式
+	isGrey: boolean
+	// 色弱模式
+	isWeak: boolean
 	// 侧边栏深色
 	asideInverted: boolean
 	// 头部深色

src/views/flow/group/components/listGroup.vue

@@ -208,7 +208,7 @@ defineExpose({
 				align-items: center;
 				color: rgba(3, 3, 3, 1);
 				&.disabled {
-					color: rgba(0, 0, 0, 0.25);
+					color: var(--el-text-color-disabled);
 				}
 				.edit_line {
 					display: inline-block;

src/views/flow/group/components/sortGroup.vue

@@ -117,11 +117,11 @@ defineExpose({
 		background-color: rgba(244, 245, 246, 0.5);
 		&_title {
 			position: relative;
-			font-family: PingFangSC-Medium;
+			//font-family: PingFangSC-Medium;
 			display: flex;
 			align-items: center;
 			&.disabled {
-				color: rgba(0, 0, 0, 0.25);
+				color: var(--el-text-color-disabled);
 			}
 		}
 		&_nameOperate {