feat: 菜单管理 处理 多语言显示名称

src/views/setting/menu/index.vue

@@ -22,7 +22,7 @@
 						<template #default="{ node, data }">
 							<span class="custom-tree-node el-tree-node__label">
 								<span class="label">
-									{{ node.label }}
+									{{ generateTitle(node.label) }}
 								</span>
 								<span class="do">
 									<el-icon @click.stop="add(node, data)"><Plus /></el-icon>
@@ -52,7 +52,7 @@ import resource from '@/api/system/resource'
 import { Plus, Refresh, Delete } from '@element-plus/icons-vue'
 import { onMounted, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-
+import { generateTitle } from '@/utils/i18n'
 const menuLoading = ref(false)
 const menuList = ref([])
 const menuFilterText = ref('')

src/views/setting/menu/save.vue

@@ -5,12 +5,25 @@
 		</el-col>
 		<template v-else>
 			<el-col :lg="12">
-				<h2>{{ form.title || '新增菜单' }}</h2>
-				<el-form ref="dialogForm" :model="form" :rules="rules" label-width="80px" label-position="left">
+				<h2>{{ i18n_formTitle || '新增菜单' }}</h2>
+				<el-form ref="dialogForm" :model="form" :rules="rules" label-width="80px" label-position="right">
 					<el-form-item label="上级菜单" prop="parentName">
 						<el-input v-model="form.parentName" disabled clearable placeholder="顶级菜单"></el-input>
 					</el-form-item>
-					<el-form-item label="显示名称" prop="title">
+					<el-form-item class="local_form-item_title" label="显示名称" prop="title">
+						<template #label>
+							<el-tooltip :content="`多语言显示：${i18n_formTitle}`" placement="right">
+								<template #content>
+									<div>
+										多语言显示：{{ i18n_formTitle }}<br />
+										若需要配置多语言：配置 route.['{{ form.title }}']
+									</div>
+								</template>
+								<span class="flex flex-align-pack-center">
+									显示名称<Warning style="width: 16px; margin-left: 4px; color: var(--el-color-danger)" />
+								</span>
+							</el-tooltip>
+						</template>
 						<el-input v-model="form.title" clearable placeholder="菜单显示名字"></el-input>
 					</el-form-item>
 					<el-form-item label="类型" prop="type">
@@ -97,11 +110,12 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import resource from '@/api/system/resource'
 import IconPicker from '@/components/IconPicker/index.vue'
 import ScFormTable from '@/components/ScFormTable'
 import { ElMessage } from 'element-plus'
+import { generateTitle } from '@/utils/i18n'
 const dialogForm = ref()
 const form = ref({
 	id: '',
@@ -119,7 +133,9 @@ const form = ref({
 	sort: 0,
 	apiList: []
 })
-
+const i18n_formTitle = computed(() => {
+	return generateTitle(form.value.title)
+})
 const predefineColors = ref(['#ff4500', '#ff8c00', '#ffd700', '#67C23A', '#00ced1', '#409EFF', '#c71585'])
 const rules = {
 	title: [{ required: true, message: '请输入显示名称', trigger: 'blur' }],
@@ -199,4 +215,10 @@ h2 {
 	clear: both;
 	width: 100%;
 }
+:deep(.local_form-item_title) {
+	.el-form-item__label {
+		margin-left: -20px;
+		width: 100px !important;
+	}
+}
 </style>