fix: 菜单栏 文字提示相关优化

delete: 公用LangSelect
fix: 菜单栏 多语言 更新
fix: 登录后静态路由跳转失效

src/components/LangSelect/index.vue

@@ -1,49 +0,0 @@
-<template>
-	<el-dropdown class="lang-select" trigger="click" @command="handleSetLanguage">
-		<div class="lang-select__icon">
-			<LeIcon :icon-class="`le-lang_${language}`" />
-		</div>
-		<template #dropdown>
-			<el-dropdown-menu>
-				<el-dropdown-item v-for="item in languageList" :key="item.value" :command="item.value" :disabled="language === item.value">
-					{{ item.label }}
-				</el-dropdown-item>
-			</el-dropdown-menu>
-		</template>
-	</el-dropdown>
-</template>
-
-<script setup lang="ts">
-import { computed, onMounted } from 'vue'
-import useStore from '@/store'
-import { useI18n } from 'vue-i18n'
-import { ElMessage } from 'element-plus'
-const { app } = useStore()
-const language = computed(() => app.language)
-// import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults'
-const languageList = [
-	{ label: '简体中文', value: 'zh-cn' },
-	{ label: 'English', value: 'en' }
-]
-const { locale } = useI18n()
-
-function handleSetLanguage(lang: string) {
-	locale.value = lang
-	app.setLanguage(lang)
-	if (lang == 'en') {
-		ElMessage.success('Switch Language Successful!')
-	} else {
-		ElMessage.success('切换语言成功！')
-	}
-}
-onMounted(() => {
-	locale.value = language.value
-	app.setLanguage(language.value)
-})
-</script>
-
-<style lang="scss" scoped>
-.lang-select__icon {
-	line-height: 50px;
-}
-</style>

src/components/Screenfull/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<el-tooltip placement="top" :content="$t(isFullscreen ? 'le.exitFullscreen' : 'le.fullscreen')">
-		<div class="right-menu-item le-hover-effect--bg">
-			<LeIcon :icon-class="isFullscreen ? 'le-suoxiao1' : 'le-fangda1'" @click="toggle" />
+		<div class="menu--screen menu-item le-hover-effect--bg" @click="toggle">
+			<LeIcon :icon-class="isFullscreen ? 'le-suoxiao1' : 'le-fangda1'" />
 		</div>
 	</el-tooltip>
 </template>

src/components/SizeSelect/index.vue

@@ -1,12 +1,12 @@
 <template>
-	<el-dropdown class="size-select" trigger="click" @command="handleSetSize">
-		<div class="size-select__icon">
+	<el-dropdown class="menu--size-select-wrap" trigger="hover" @command="handleSetSize">
+		<div class="menu--size-select menu-item le-hover-effect--bg">
 			<LeIcon class-name="size-icon" icon-class="le-text-size" />
 		</div>
 		<template #dropdown>
 			<el-dropdown-menu>
 				<el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="(size || 'default') == item.value" :command="item.value">
-					{{ item.label }}
+					{{ t(item.label) }}
 				</el-dropdown-item>
 			</el-dropdown-menu>
 		</template>
@@ -16,6 +16,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { ElMessage } from 'element-plus'
+import { useI18n } from 'vue-i18n'
 
 import useStore from '@/store'
 
@@ -23,11 +24,24 @@ const { app } = useStore()
 const size = computed(() => app.size)
 
 const sizeOptions = ref([
-	{ label: '默认', value: 'default' },
-	{ label: '大型', value: 'large' },
-	{ label: '小型', value: 'small' }
+	{ label: 'default', value: 'default' },
+	{ label: 'large', value: 'large' },
+	{ label: 'small', value: 'small' }
 ])
-
+const { t } = useI18n({
+	messages: {
+		en: {
+			default: 'Default',
+			large: 'Large',
+			small: 'Small'
+		},
+		'zh-cn': {
+			default: '默认',
+			large: '大型',
+			small: '小型'
+		}
+	}
+})
 function handleSetSize(size: string) {
 	app.setSize(size) // todo 改成setting
 	ElMessage.success('切换布局大小成功')
@@ -35,7 +49,7 @@ function handleSetSize(size: string) {
 </script>
 
 <style lang="scss" scoped>
-.size-select__icon {
-	line-height: 50px;
+.menu--size-select-wrap {
+	height: 100%;
 }
 </style>

src/lang/lance-element/en.ts

@@ -22,6 +22,7 @@ export default {
 		refresh: 'Refresh',
 		fullscreen: 'Full Screen',
 		exitFullscreen: 'Exit Full Screen',
+		menuSearch: 'Search Menu',
 		copy: 'Copy',
 		column: 'Column',
 		// 筛选相关
@@ -102,6 +103,7 @@ export default {
 			validateAlreadyExists: '{name} already exists'
 		},
 		message: {
+			txt: 'Message',
 			addSuccess: 'Add Success',
 			editSuccess: 'Edit Success',
 			CopiedSuccessfully: 'Copied successfully!',

src/lang/lance-element/zh-cn.ts

@@ -22,6 +22,7 @@ export default {
 		refresh: '刷新',
 		fullscreen: '全屏',
 		exitFullscreen: '退出全屏',
+		menuSearch: '搜索菜单',
 		copy: '复制',
 		column: '视图',
 		// 筛选相关
@@ -101,6 +102,7 @@ export default {
 			validateAlreadyExists: '{name}已存在'
 		},
 		message: {
+			txt: '消息',
 			addSuccess: '添加成功',
 			editSuccess: '编辑成功',
 			CopiedSuccessfully: '复制成功!',

src/layout/components/Header/ToolBarRight.vue

@@ -1,30 +1,23 @@
 <template>
 	<div class="tool-bar-right">
 		<div class="header-icon">
-			<ScreenFull />
-			<el-tooltip content="布局大小" effect="dark" placement="bottom">
-				<SizeSelect class="right-menu-item le-hover-effect--bg" />
-			</el-tooltip>
-			<Language class="right-menu-item le-hover-effect--bg" />
 			<SearchMenu />
-			<!--			<ThemeSetting id="themeSetting" />-->
-			<Message class="right-menu-item le-hover-effect--bg" />
+			<ScreenFull />
+			<SizeSelect />
+			<Language />
+			<Message />
 		</div>
 		<Avatar />
 	</div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
 import Language from './components/Language.vue'
 import ScreenFull from '@/components/Screenfull/index.vue'
 import SizeSelect from '@/components/SizeSelect/index.vue'
 import SearchMenu from './components/SearchMenu.vue'
 import Message from './components/Message.vue'
-// import Fullscreen from './components/Fullscreen.vue'
 import Avatar from './components/Avatar.vue'
-
-// const username = computed(() => userStore.userInfo.name)
 </script>
 
 <style lang="scss">
@@ -39,7 +32,7 @@ import Avatar from './components/Avatar.vue'
 		align-items: center;
 		justify-content: center;
 	}
-	.right-menu-item {
+	.menu-item {
 		display: flex;
 		align-items: center;
 		padding: 0 8px;

src/layout/components/Header/components/Avatar.vue

@@ -1,5 +1,5 @@
 <template>
-	<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click" size="default">
+	<el-dropdown class="avatar-container menu-item le-hover-effect--bg" trigger="click" size="default">
 		<div class="avatar-wrapper">
 			<span class="nickname">{{ userInfo.username || '' }}</span>
 			<el-avatar v-if="userInfo.avatar" :size="30" :src="userInfo.avatar" class="user-avatar" />

src/layout/components/Header/components/Language.vue

@@ -1,6 +1,6 @@
 <template>
-	<el-dropdown class="lang-select" trigger="click" @command="handleSetLanguage">
-		<div class="lang-select__icon">
+	<el-dropdown class="menu--lang-select-wrap" trigger="hover" @command="handleSetLanguage">
+		<div class="menu--lang-select menu-item le-hover-effect--bg">
 			<LeIcon :icon-class="`le-lang_${language}`" />
 		</div>
 		<template #dropdown>
@@ -43,7 +43,7 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-/*.lang-select__icon {
-	line-height: 50px;
-}*/
-</style>
+.menu--lang-select-wrap {
+	height: 100%;
+}
+</style>

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

@@ -1,18 +1,22 @@
 <template>
 	<el-popover placement="bottom" :width="310" trigger="click">
 		<template #reference>
-			<div class="right-menu-item le-hover-effect--bg">
-				<el-badge class="item" :value="total">
-					<i class="le-iconfont le-notice"></i>
-				</el-badge>
+			<div class="menu--message-trigger">
+				<el-tooltip :content="$t('le.message.txt')" effect="dark" placement="bottom">
+					<div class="menu--message menu-item le-hover-effect--bg">
+						<el-badge :value="total">
+							<i class="le-iconfont le-notice"></i>
+						</el-badge>
+					</div>
+				</el-tooltip>
 			</div>
 		</template>
-		<el-tabs v-model="activeTab">
+		<el-tabs class="message-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" @click="jumpMessageDetail(item.id)">
+						<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">
@@ -22,7 +26,6 @@
 								<span class="message-txt">{{ item.content }}</span>
 							</div>
 						</div>
-						<div class="message-fix-item" @click="jumpMessageInfo">查看更多</div>
 					</div>
 				</template>
 				<template v-else>
@@ -36,7 +39,6 @@
 <script setup lang="ts">
 import { ref, reactive } from 'vue'
 import { getMessage } from '@/api/system/message'
-import router from '@/router'
 // noticeList  通知     messageList   消息     todoList   待办
 const tabsConfig = reactive({
 	noticeList: {
@@ -51,7 +53,7 @@ const tabsConfig = reactive({
 	},
 	todoList: {
 		name: 'todoList',
-		label: '待办',
+		label: '代办',
 		list: []
 	}
 })
@@ -70,14 +72,6 @@ getMessage().then(res => {
 	})
 	total.value = _total
 })
-
-const jumpMessageInfo = () => {
-	router.push('/message/list')
-}
-
-const jumpMessageDetail = (id: any) => {
-	router.push('/message/list?id=' + id)
-}
 </script>
 
 <style scoped lang="scss">
@@ -91,7 +85,6 @@ const jumpMessageDetail = (id: any) => {
 		align-items: center;
 		padding: 8px 0;
 		border-bottom: 1px solid var(--el-border-color-light);
-		cursor: pointer;
 		&:last-child {
 			border: none;
 		}
@@ -120,13 +113,8 @@ const jumpMessageDetail = (id: any) => {
 			}
 		}
 	}
-	.message-fix-item {
-		// flex 居中
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		height: 40px;
-		cursor: pointer;
-	}
+}
+.menu--message-trigger {
+	height: 100%;
 }
 </style>

src/layout/components/Header/components/SearchMenu.vue

@@ -1,9 +1,19 @@
 <template>
-	<div class="search-menu-wrap">
-		<div class="right-menu-item le-hover-effect--bg" @click="handleOpen">
-			<LeIcon icon-class="le-search" />
-		</div>
-		<el-dialog v-model="isShowSearch" destroy-on-close :modal="false" :show-close="false" fullscreen @click="closeSearch">
+	<div class="menu--search-wrap">
+		<el-tooltip :content="$t('le.menuSearch')" effect="dark" placement="bottom">
+			<div class="menu--search menu-item le-hover-effect--bg" @click="handleOpen">
+				<LeIcon icon-class="le-search" />
+			</div>
+		</el-tooltip>
+		<el-dialog
+			v-model="isShowSearch"
+			class="le-search-menu-dialog"
+			destroy-on-close
+			:modal="false"
+			:show-close="false"
+			fullscreen
+			@click="closeSearch"
+		>
 			<el-autocomplete
 				ref="menuInputRef"
 				v-model="searchMenu"
@@ -17,8 +27,8 @@
 					<LeIcon icon-class="le-search" />
 				</template>
 				<template #default="{ item }">
-					<PickerIcon v-if="item.meta?.icon" :icon-class="item.meta.icon" />
-					<span> {{ item.meta.local_title }} </span>
+					<PickerIcon v-if="item.meta?.icon" class="icon" :icon-class="item.meta.icon" />
+					<span class="title"> {{ item.meta.local_title }} </span>
 				</template>
 			</el-autocomplete>
 		</el-dialog>
@@ -85,34 +95,36 @@ const handleClickMenu = (menuItem: AppRouteRecordRaw | Record<string, any>) => {
 }
 </script>
 <style scoped lang="scss">
-.search-menu-wrap {
+.menu--search-wrap {
 	height: 100%;
 }
-:deep(.el-dialog) {
-	background-color: rgb(0 0 0 / 50%);
-	border-radius: 0 !important;
-	box-shadow: unset !important;
-	.el-dialog__header {
-		border-bottom: none !important;
-	}
-}
-:deep(.el-autocomplete) {
-	position: absolute;
-	top: 100px;
-	left: 50%;
-	width: 550px;
-	transform: translateX(-50%);
-	.el-input__wrapper {
-		background-color: var(--el-bg-color);
+:deep {
+	.el-dialog {
+		background-color: rgb(0 0 0 / 50%);
+		border-radius: 0 !important;
+		box-shadow: unset !important;
+		.el-dialog__header {
+			border-bottom: none !important;
+		}
+		.el-autocomplete {
+			position: absolute;
+			top: 100px;
+			left: 50%;
+			width: 550px;
+			transform: translateX(-50%);
+			.el-input__wrapper {
+				background-color: var(--el-bg-color);
+			}
+		}
 	}
 }
 .el-autocomplete__popper {
-	.el-icon {
+	.icon {
 		position: relative;
 		top: 2px;
 		font-size: 16px;
 	}
-	span {
+	.title {
 		margin: 0 0 0 10px;
 		font-size: 14px;
 	}

src/layout/components/Navbar.vue

@@ -1,177 +0,0 @@
-<template>
-	<div class="navbar">
-		<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
-
-		<breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
-
-		<div class="right-menu">
-			<template v-if="device !== 'mobile'">
-				<!--        <search id="header-search" class="right-menu-item" />
-                <error-log class="errLog-container right-menu-item hover-effect" />-->
-				<Screenfull id="screenfull" class="right-menu-item hover-effect" />
-				<template v-if="true">
-					<el-tooltip content="布局大小" effect="dark" placement="bottom">
-						<SizeSelect id="size-select" class="right-menu-item hover-effect" />
-					</el-tooltip>
-					<LangSelect class="right-menu-item hover-effect" />
-				</template>
-			</template>
-
-			<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click" size="default">
-				<div class="avatar-wrapper">
-					<span class="userName">{{ userInfo.username || '' }}</span>
-					<!--					<el-avatar :size="30" class="user-avatar">{{ userInfo.userNameF }}</el-avatar>-->
-					<el-avatar v-if="userInfo.avatar" :size="30" :src="userInfo.avatar" class="user-avatar" />
-					<ArrowDown style="width: 0.6em; height: 0.6em; margin-left: 5px; font-size: 24px" />
-				</div>
-
-				<template #dropdown>
-					<el-dropdown-menu>
-						<el-dropdown-item @click="goCenter">{{ $t('route.profile') }}</el-dropdown-item>
-						<el-dropdown-item @click="logout">
-							{{ $t('navbar.logout') }}
-						</el-dropdown-item>
-					</el-dropdown-menu>
-				</template>
-			</el-dropdown>
-		</div>
-	</div>
-</template>
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { ElMessageBox } from 'element-plus'
-
-import useStore from '@/store'
-// import { ls } from '@/utils'
-
-// 组件依赖
-import Breadcrumb from '@/components/Breadcrumb/index.vue'
-import Hamburger from '@/components/Hamburger/index.vue'
-import Screenfull from '@/components/Screenfull/index.vue'
-import SizeSelect from '@/components/SizeSelect/index.vue'
-import LangSelect from '@/components/LangSelect/index.vue'
-
-// 图标依赖
-import { ArrowDown } from '@element-plus/icons-vue'
-
-const { app, user } = useStore()
-
-const route = useRoute()
-const router = useRouter()
-
-const sidebar = computed(() => app.sidebar)
-const device = computed(() => app.device)
-const userInfo = computed(() => {
-	// const _info: Recordable = user.userInfo || {}
-	// return { ..._info, userNameF: _info.userName?.substring(0, 1) }
-	const _info: Recordable = user.cur_userInfo || {}
-	return { ..._info, userNameF: _info.userName?.substring(0, 1) }
-})
-
-function toggleSideBar() {
-	app.toggleSidebar()
-}
-
-function goCenter() {
-	router.push(`/profile`)
-}
-
-function logout() {
-	ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
-		confirmButtonText: '确定',
-		cancelButtonText: '取消',
-		type: 'warning'
-	}).then(() => {
-		user.logout().then(() => {
-			router.push(`/login?redirect=${route.fullPath}`)
-		})
-	})
-}
-</script>
-
-<style lang="scss" scoped>
-ul {
-	list-style: none;
-	margin: 0;
-	padding: 0;
-}
-.navbar {
-	height: 50px;
-	display: flex;
-	align-items: center;
-	overflow: hidden;
-	position: relative;
-	background: #fff;
-	box-shadow: 0 1px 2px #00152914;
-
-	.hamburger-container {
-		line-height: 46px;
-		height: 100%;
-		float: left;
-		cursor: pointer;
-		transition: background 0.3s;
-		-webkit-tap-highlight-color: transparent;
-
-		&:hover {
-			background: rgba(0, 0, 0, 0.025);
-		}
-	}
-
-	.breadcrumb-container {
-		flex: 1;
-	}
-
-	.right-menu {
-		flex: 1 1 0;
-		display: flex;
-		align-items: center;
-		justify-content: flex-end;
-		height: 100%;
-		line-height: 50px;
-
-		&:focus {
-			outline: none;
-		}
-
-		.right-menu-item {
-			padding: 0 8px;
-			height: 100%;
-			font-size: 18px;
-			color: #5a5e66;
-
-			&.hover-effect {
-				cursor: pointer;
-				transition: background 0.3s;
-
-				&:hover {
-					background: rgba(0, 0, 0, 0.025);
-				}
-			}
-		}
-
-		.avatar-container {
-			.avatar-wrapper {
-				display: flex;
-				align-items: center;
-				white-space: nowrap;
-				.userName {
-					font-size: 14px;
-				}
-				.user-avatar {
-					cursor: pointer;
-					width: 26px;
-					height: 26px;
-					border-radius: 50%;
-					margin-left: 8px;
-				}
-
-				.el-icon-caret-bottom {
-					cursor: pointer;
-					font-size: 12px;
-				}
-			}
-		}
-	}
-}
-</style>

src/store/modules/permission.ts

@@ -113,9 +113,9 @@ const usePermissionStore = defineStore({
 		setRoutes(menuList: AppRouteRecordRaw[]) {
 			// 授权后的菜单列表
 			this.menuList = menuList
-			this.routes = constantRoutes.concat(
+			this.routes = menuList /*constantRoutes.concat(
 				menuList,
-				noFoundRouters /*, {
+				noFoundRouters /!*, {
 				// 管理员管理
 				path: '/adminManage1',
 				name: 'adminManage1',
@@ -126,8 +126,8 @@ const usePermissionStore = defineStore({
 				// if (component) {
 				// 	tmp.component = component
 				meta: { title: 'demo_adminManage' }
-			}*/
-			)
+			}*!/
+			)*/
 		},
 		queryMenuList(roles: string[]) {
 			return getMenuList().then((data: any) => {

src/views/login/index.vue

@@ -52,7 +52,7 @@
 import { reactive, ref, toRefs, watch, nextTick } from 'vue'
 
 // 组件依赖
-import LangSelect from '@/components/LangSelect/index.vue'
+import LangSelect from '@/layout/components/Header/components/Language.vue'
 
 // 状态管理依赖
 import useStore from '@/store'
@@ -143,8 +143,9 @@ $cursor: #fff;
 			position: absolute;
 			top: 3px;
 			font-size: 18px;
-			right: 0px;
+			right: 0;
 			cursor: pointer;
+			height: unset;
 		}
 	}