Forráskód Böngészése

feat: 左侧导航支持多语言切换

vera_min 2 hónapja
szülő
commit
3feaf07e24
2 módosított fájl, 41 hozzáadás és 39 törlés
  1. 14 19
      src/layout/navMenu/subItem.vue
  2. 27 20
      src/layout/navMenu/vertical.vue

+ 14 - 19
src/layout/navMenu/subItem.vue

@@ -1,9 +1,17 @@
+<!--
+ * @Author: vera_min vera_min@163.com
+ * @Date: 2025-08-02 12:21:54
+ * @LastEditors: vera_min vera_min@163.com
+ * @LastEditTime: 2025-08-05 11:17:25
+ * @FilePath: /sagoo-admin-ui/src/layout/navMenu/subItem.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
 <template>
-	<div :class="{ newStyle }" v-for="val in chils" :key="val.path">
+	<template v-for="val in chils">
 		<el-sub-menu :index="val.path" :key="val.path" v-if="val.children && val.children.length > 0">
 			<template #title>
 				<SvgIcon :name="val.meta?.icon" />
-				<span>{{ val.meta?.title.indexOf('.') > 0 ? $t(val.meta?.title) : val.meta?.title }}</span>
+				<span>{{ val.name.startsWith('message.') > 0 ? $t(val.name) : $t(val.meta?.title) }}</span>
 			</template>
 			<sub-item :chil="val.children" />
 		</el-sub-menu>
@@ -11,17 +19,17 @@
 			<el-menu-item :index="val.path" :key="val.path">
 				<template v-if="!val.meta?.isLink || (val.meta?.isLink && val.meta.isIframe)">
 					<SvgIcon :name="val.meta?.icon" />
-					<span>{{ val.meta?.title.indexOf('.') > 0 ? $t(val.meta?.title) : val.meta?.title }}</span>
+					<span>{{ val.name.startsWith('message.') > 0 ? $t(val.name) : $t(val.meta?.title) }}</span>
 				</template>
 				<template v-else>
-					<a :href="val.meta?.linkUrl" @click.stop target="_blank" rel="opener" class="w100">
+					<a :href="val.meta?.linkUrl" target="_blank" rel="opener" class="w100">
 						<SvgIcon :name="val.meta?.icon" />
-						{{ val.meta?.title.indexOf('.') > 0 ? $t(val.meta?.title) : val.meta?.title }}
+						{{ val.name.startsWith('message.') > 0 ? $t(val.name) : $t(val.meta?.title) }}
 					</a>
 				</template>
 			</el-menu-item>
 		</template>
-	</div>
+	</template>
 </template>
 
 <script lang="ts">
@@ -33,10 +41,6 @@ export default defineComponent({
 			type: Array,
 			default: () => [],
 		},
-		newStyle: {
-			type: Boolean,
-			default: false,
-		},
 	},
 	setup(props) {
 		// 获取父级菜单数据
@@ -49,12 +53,3 @@ export default defineComponent({
 	},
 });
 </script>
-<style scoped lang="scss">
-.newStyle .el-menu-item {
-	&.is-active {
-		background: var(--next-menu-level2-bg) !important;
-		font-weight: 500;
-		border-right: 2px solid #2D6CE8;
-	}
-}
-</style>

+ 27 - 20
src/layout/navMenu/vertical.vue

@@ -1,23 +1,38 @@
+<!--
+ * @Author: vera_min vera_min@163.com
+ * @Date: 2025-08-02 12:21:54
+ * @LastEditors: vera_min vera_min@163.com
+ * @LastEditTime: 2025-08-05 11:15:25
+ * @FilePath: /sagoo-admin-ui/src/layout/navMenu/vertical.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
 <template>
 	<el-menu router :default-active="defaultActive" background-color="transparent" :collapse="isCollapse" :unique-opened="getThemeConfig.isUniqueOpened" :collapse-transition="false">
 		<template v-for="val in menuLists">
 			<el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
 				<template #title>
 					<SvgIcon :name="val.meta?.icon" />
-					<span>{{ val.meta?.title.indexOf('.') > 0 ? $t(val.meta?.title) : val.meta?.title }}</span>
+					<span>{{ val.name.startsWith('message.') > 0 ? $t(val.name) : $t(val.meta?.title) }}</span>
 				</template>
-				<SubItem newStyle :chil="val.children" />
+				<SubItem :chil="val.children" />
 			</el-sub-menu>
 			<template v-else>
-				<el-menu-item :index="val.path" :key="val.path">
-					<SvgIcon :name="val.meta?.icon" />
-					<template #title v-if="!val.meta?.isLink || (val.meta?.isLink && val.meta.isIframe)">
-						<span>{{ val.meta?.title.indexOf('.') > 0 ? $t(val.meta?.title) : val.meta?.title }}</span>
-					</template>
-					<template #title v-else>
-						<a :href="val.meta?.isLink" target="_blank" rel="opener" class="w100">{{ val.meta?.title.indexOf('.')>0?$t(val.meta?.title):val.meta?.title }}</a>
-					</template>
-				</el-menu-item>
+				<template v-if="!val.meta?.isLink || (val.meta?.isLink && val.meta.isIframe)">
+					<el-menu-item :index="val.path" :key="val.path">
+						<SvgIcon :name="val.meta?.icon" />
+						<template #title>
+							<span>{{ val.name.startsWith('message.') > 0 ? $t(val.name) : $t(val.meta?.title) }}</span>
+						</template>
+					</el-menu-item>
+				</template>
+				<template v-else>
+					<el-menu-item :key="val.path">
+						<SvgIcon :name="val.meta?.icon" />
+						<template #title>
+							<a :href="val.meta?.linkUrl" target="_blank" rel="opener" class="w100">{{ val.meta?.name.startsWith('message.') > 0 ? $t(val.meta?.name) : $t(val.meta?.title) }}</a>
+						</template>
+					</el-menu-item>
+				</template>
 			</template>
 		</template>
 	</el-menu>
@@ -47,6 +62,7 @@ export default defineComponent({
 		});
 		// 获取父级菜单数据
 		const menuLists = computed(() => {
+			console.log(props.menuList)
 			return <any>props.menuList;
 		});
 		// 获取布局配置信息
@@ -89,12 +105,3 @@ export default defineComponent({
 	},
 });
 </script>
-<style scoped lang="scss">
-.el-menu-item {
-	&.is-active {
-		background: var(--next-menu-level2-bg) !important;
-		font-weight: 500;
-		border-right: 2px solid #2D6CE8;
-	}
-}
-</style>