多语言优化

This commit is contained in:
2026-03-19 15:40:06 +08:00
parent db0e420a8f
commit 333e85f7d9
45 changed files with 864 additions and 276 deletions

View File

@@ -1,17 +1,17 @@
<template>
<el-dialog
v-model="visible"
:title="dialogType === 'add' ? '新增菜单' : '编辑菜单'"
:title="dialogType === 'add' ? $t('page.form.titleAdd') : $t('page.form.titleEdit')"
width="820px"
align-center
:close-on-click-modal="false"
@close="handleClose"
>
<el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
<el-form-item label="菜单类型" prop="type">
<el-form-item :label="$t('page.form.labelMenuType')" prop="type">
<sa-radio v-model="formData.type" type="button" dict="menu_type"></sa-radio>
</el-form-item>
<el-form-item label="上级菜单" prop="parent_id">
<el-form-item :label="$t('page.form.labelParentMenu')" prop="parent_id">
<el-tree-select
v-model="formData.parent_id"
:data="optionData.treeData"
@@ -22,63 +22,63 @@
</el-form-item>
<el-row>
<el-col :span="12">
<el-form-item label="菜单名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入菜单名称" />
<el-form-item :label="$t('page.form.labelMenuName')" prop="name">
<el-input v-model="formData.name" :placeholder="$t('page.form.labelMenuName')" />
</el-form-item>
</el-col>
<el-col :span="12" v-if="formData.type < 3">
<el-form-item prop="path">
<template #label>
<sa-label
label="路由地址"
tooltip="一级菜单:以 / 开头的绝对路径(如 /dashboard 二级及以下:相对路径(如 console、user"
:label="$t('page.form.labelRoutePath')"
:tooltip="$t('page.form.labelRoutePathTip')"
/>
</template>
<el-input v-model="formData.path" placeholder="如:/dashboard 或 console" />
<el-input v-model="formData.path" :placeholder="$t('page.form.placeholderRoutePath')" />
</el-form-item>
</el-col>
<el-col :span="12" v-if="formData.type != 3">
<el-form-item label="组件名称" prop="code">
<el-input v-model="formData.code" placeholder="如: User" />
<el-form-item :label="$t('page.form.labelComponentName')" prop="code">
<el-input v-model="formData.code" :placeholder="$t('page.form.placeholderComponentName')" />
</el-form-item>
</el-col>
<el-col :span="12" v-if="formData.type === 2">
<el-form-item prop="component">
<template #label>
<sa-label label="组件路径" tooltip="填写组件路径views目录下 目录菜单:留空" />
<sa-label :label="$t('page.form.labelComponentPath')" :tooltip="$t('page.form.labelComponentPathTip')" />
</template>
<el-autocomplete
class="w-full"
v-model="formData.component"
:fetch-suggestions="querySearch"
clearable
placeholder="如:/system/user 或留空"
:placeholder="$t('page.form.placeholderComponentPath')"
/>
</el-form-item>
</el-col>
<el-col :span="12" v-if="formData.type != 3">
<el-form-item label="菜单图标" prop="icon">
<el-form-item :label="$t('page.form.labelMenuIcon')" prop="icon">
<sa-icon-picker v-model="formData.icon" />
</el-form-item>
</el-col>
<el-col :span="12" v-if="formData.type === 3">
<el-form-item label="权限标识" prop="slug">
<el-input v-model="formData.slug" placeholder="请输入权限标识" />
<el-form-item :label="$t('page.form.labelPermSlug')" prop="slug">
<el-input v-model="formData.slug" :placeholder="$t('page.form.placeholderPermSlug')" />
</el-form-item>
</el-col>
<el-col :span="24" v-if="formData.type === 4">
<el-form-item label="外链地址" prop="link_url">
<el-input v-model="formData.link_url" placeholder="https://saithink.top" />
<el-form-item :label="$t('page.form.labelLinkUrl')" prop="link_url">
<el-input v-model="formData.link_url" :placeholder="$t('page.form.placeholderLinkUrl')" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="sort">
<template #label>
<sa-label label="排序" tooltip="数字越大越靠前" />
<sa-label :label="$t('page.form.labelSort')" :tooltip="$t('page.form.labelSortTip')" />
</template>
<el-input-number
v-model="formData.sort"
placeholder="请输入排序"
:placeholder="$t('page.form.placeholderSort')"
controls-position="right"
/>
</el-form-item>
@@ -86,7 +86,7 @@
<el-col :span="12">
<el-form-item prop="status">
<template #label>
<sa-label label="状态" tooltip="禁用后,该菜单项将不可用" />
<sa-label :label="$t('page.form.labelStatus')" :tooltip="$t('page.form.labelStatusTip')" />
</template>
<sa-radio v-model="formData.status" dict="data_status" />
</el-form-item>
@@ -94,7 +94,7 @@
<el-col :span="12">
<el-form-item prop="is_iframe">
<template #label>
<sa-label label="是否内嵌" tooltip="外链模式下有效" />
<sa-label :label="$t('page.form.labelIsIframe')" :tooltip="$t('page.form.labelIsIframeTip')" />
</template>
<sa-switch v-model="formData.is_iframe" dict="yes_or_no" :showText="false" />
</el-form-item>
@@ -102,7 +102,7 @@
<el-col :span="12">
<el-form-item prop="is_keep_alive">
<template #label>
<sa-label label="是否缓存" tooltip="切换tabs不刷新" />
<sa-label :label="$t('page.form.labelIsKeepAlive')" :tooltip="$t('page.form.labelIsKeepAliveTip')" />
</template>
<sa-switch v-model="formData.is_keep_alive" dict="yes_or_no" :showText="false" />
</el-form-item>
@@ -110,7 +110,7 @@
<el-col :span="12">
<el-form-item prop="is_hidden">
<template #label>
<sa-label label="是否隐藏" tooltip="不在菜单栏显示,但是可以通过路由访问" />
<sa-label :label="$t('page.form.labelIsHidden')" :tooltip="$t('page.form.labelIsHiddenTip')" />
</template>
<sa-switch v-model="formData.is_hidden" dict="yes_or_no" :showText="false" />
</el-form-item>
@@ -118,7 +118,7 @@
<el-col :span="12">
<el-form-item prop="is_fixed_tab">
<template #label>
<sa-label label="是否固定" tooltip="固定在tabs导航栏" />
<sa-label :label="$t('page.form.labelIsFixedTab')" :tooltip="$t('page.form.labelIsFixedTabTip')" />
</template>
<sa-switch v-model="formData.is_fixed_tab" dict="yes_or_no" :showText="false" />
</el-form-item>
@@ -126,7 +126,7 @@
<el-col :span="12">
<el-form-item prop="is_full_page">
<template #label>
<sa-label label="是否全屏" tooltip="不继承左侧菜单和顶部导航栏" />
<sa-label :label="$t('page.form.labelIsFullPage')" :tooltip="$t('page.form.labelIsFullPageTip')" />
</template>
<sa-switch v-model="formData.is_full_page" dict="yes_or_no" :showText="false" />
</el-form-item>
@@ -134,8 +134,8 @@
</el-row>
</el-form>
<template #footer>
<el-button @click="handleClose">取消</el-button>
<el-button type="primary" @click="handleSubmit">提交</el-button>
<el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
<el-button type="primary" @click="handleSubmit">{{ $t('table.form.submit') }}</el-button>
</template>
</el-dialog>
</template>
@@ -144,6 +144,7 @@
import api from '@/api/system/menu'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { useI18n } from 'vue-i18n'
interface Props {
modelValue: boolean
@@ -163,6 +164,7 @@
})
const emit = defineEmits<Emits>()
const { t } = useI18n()
const formRef = ref<FormInstance>()
const optionData = reactive({
@@ -197,14 +199,14 @@
/**
* 表单验证规则
*/
const rules = reactive<FormRules>({
parent_id: [{ required: true, message: '请选择上级菜单', trigger: 'change' }],
name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
path: [{ required: true, message: '请输入路由地址', trigger: 'blur' }],
code: [{ required: true, message: '请输入组件名称', trigger: 'blur' }],
slug: [{ required: true, message: '请输入权限标识', trigger: 'blur' }],
link_url: [{ required: true, message: '请输入外链地址', trigger: 'blur' }]
})
const rules = computed<FormRules>(() => ({
parent_id: [{ required: true, message: t('page.form.ruleParentMenuRequired'), trigger: 'change' }],
name: [{ required: true, message: t('page.form.ruleMenuNameRequired'), trigger: 'blur' }],
path: [{ required: true, message: t('page.form.ruleRoutePathRequired'), trigger: 'blur' }],
code: [{ required: true, message: t('page.form.ruleComponentNameRequired'), trigger: 'blur' }],
slug: [{ required: true, message: t('page.form.rulePermSlugRequired'), trigger: 'blur' }],
link_url: [{ required: true, message: t('page.form.ruleLinkUrlRequired'), trigger: 'blur' }]
}))
/**
* 初始数据
@@ -302,10 +304,10 @@
await formRef.value.validate()
if (props.dialogType === 'add') {
await api.save(formData)
ElMessage.success('新增成功')
ElMessage.success(t('page.form.addSuccess'))
} else {
await api.update(formData)
ElMessage.success('修改成功')
ElMessage.success(t('page.form.editSuccess'))
}
emit('success')
handleClose()