多语言优化

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()

View File

@@ -1,37 +1,37 @@
<template>
<el-dialog
v-model="visible"
:title="dialogType === 'add' ? '新增岗位' : '编辑岗位'"
:title="dialogType === 'add' ? $t('page.form.titleAdd') : $t('page.form.titleEdit')"
width="600px"
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="name">
<el-input v-model="formData.name" placeholder="请输入岗位名称" />
<el-form-item :label="$t('page.form.labelName')" prop="name">
<el-input v-model="formData.name" :placeholder="$t('page.form.placeholderName')" />
</el-form-item>
<el-form-item label="岗位编码" prop="code">
<el-input v-model="formData.code" placeholder="请输入岗位编码" />
<el-form-item :label="$t('page.form.labelCode')" prop="code">
<el-input v-model="formData.code" :placeholder="$t('page.form.placeholderCode')" />
</el-form-item>
<el-form-item label="描述" prop="remark">
<el-form-item :label="$t('page.form.labelRemark')" prop="remark">
<el-input
v-model="formData.remark"
type="textarea"
:rows="3"
placeholder="请输入岗位描述"
:placeholder="$t('page.form.placeholderRemark')"
/>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number v-model="formData.sort" placeholder="请输入排序" />
<el-form-item :label="$t('page.form.labelSort')" prop="sort">
<el-input-number v-model="formData.sort" :placeholder="$t('page.form.placeholderSort')" />
</el-form-item>
<el-form-item label="启用" prop="status">
<el-form-item :label="$t('page.form.labelStatus')" prop="status">
<sa-radio v-model="formData.status" dict="data_status" />
</el-form-item>
</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>
@@ -40,6 +40,7 @@
import api from '@/api/system/post'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { useI18n } from 'vue-i18n'
interface Props {
modelValue: boolean
@@ -59,6 +60,7 @@
})
const emit = defineEmits<Emits>()
const { t } = useI18n()
const formRef = ref<FormInstance>()
@@ -73,10 +75,10 @@
/**
* 表单验证规则
*/
const rules = reactive<FormRules>({
name: [{ required: true, message: '请输入岗位名称', trigger: 'blur' }],
code: [{ required: true, message: '请输入岗位编码', trigger: 'blur' }]
})
const rules = computed<FormRules>(() => ({
name: [{ required: true, message: t('page.form.ruleNameRequired'), trigger: 'blur' }],
code: [{ required: true, message: t('page.form.ruleCodeRequired'), trigger: 'blur' }]
}))
/**
* 初始数据
@@ -150,10 +152,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()

View File

@@ -1,42 +1,40 @@
<template>
<el-dialog
v-model="visible"
:title="dialogType === 'add' ? '新增角色' : '编辑角色'"
:title="dialogType === 'add' ? $t('page.form.titleAdd') : $t('page.form.titleEdit')"
width="600px"
align-center
@close="handleClose"
>
<el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
<el-form-item label="角色名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入角色名称" />
<el-form-item :label="$t('page.form.labelName')" prop="name">
<el-input v-model="formData.name" :placeholder="$t('page.form.placeholderName')" />
</el-form-item>
<el-form-item label="角色标识" prop="code">
<el-input v-model="formData.code" placeholder="请输入角色编码" />
<el-form-item :label="$t('page.form.labelCode')" prop="code">
<el-input v-model="formData.code" :placeholder="$t('page.form.placeholderCode')" />
</el-form-item>
<el-form-item label="角色级别" prop="level">
<el-input-number v-model="formData.level" placeholder="角色级别" :max="99" :min="1" />
<el-form-item :label="$t('page.form.labelLevel')" prop="level">
<el-input-number v-model="formData.level" :placeholder="$t('page.form.labelLevel')" :max="99" :min="1" />
</el-form-item>
<div class="text-xs text-gray-400 pl-32 pb-4"
>控制角色的权限层级, 不能操作职级高于自己的角色</div
>
<el-form-item label="描述" prop="remark">
<div class="text-xs text-gray-400 pl-32 pb-4">{{ $t('page.form.levelTip') }}</div>
<el-form-item :label="$t('page.form.labelRemark')" prop="remark">
<el-input
v-model="formData.remark"
type="textarea"
:rows="3"
placeholder="请输入角色描述"
:placeholder="$t('page.form.placeholderRemark')"
/>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number v-model="formData.sort" placeholder="请输入排序" />
<el-form-item :label="$t('page.form.labelSort')" prop="sort">
<el-input-number v-model="formData.sort" :placeholder="$t('page.form.placeholderSort')" />
</el-form-item>
<el-form-item label="启用" prop="status">
<el-form-item :label="$t('page.form.labelStatus')" prop="status">
<sa-radio v-model="formData.status" dict="data_status" />
</el-form-item>
</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>
@@ -45,6 +43,7 @@
import api from '@/api/system/role'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { useI18n } from 'vue-i18n'
interface Props {
modelValue: boolean
@@ -64,6 +63,7 @@
})
const emit = defineEmits<Emits>()
const { t } = useI18n()
const formRef = ref<FormInstance>()
@@ -78,11 +78,11 @@
/**
* 表单验证规则
*/
const rules = reactive<FormRules>({
name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }],
level: [{ required: true, message: '请输入角色级别', trigger: 'blur' }]
})
const rules = computed<FormRules>(() => ({
name: [{ required: true, message: t('page.form.ruleNameRequired'), trigger: 'blur' }],
code: [{ required: true, message: t('page.form.ruleCodeRequired'), trigger: 'blur' }],
level: [{ required: true, message: t('page.form.ruleLevelRequired'), trigger: 'blur' }]
}))
/**
* 初始数据
@@ -157,10 +157,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()

View File

@@ -1,36 +1,36 @@
<template>
<el-dialog
v-model="visible"
:title="dialogType === 'add' ? '新增用户' : '编辑用户'"
:title="dialogType === 'add' ? $t('page.form.titleAdd') : $t('page.form.titleEdit')"
width="800px"
align-center
:close-on-click-modal="false"
@close="handleClose"
>
<el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="头像" prop="avatar">
<el-form-item :label="$t('page.form.labelAvatar')" prop="avatar">
<sa-image-picker v-model="formData.avatar" round />
</el-form-item>
<el-row>
<el-col :span="12">
<el-form-item label="用户名" prop="username">
<el-form-item :label="$t('page.form.labelUsername')" prop="username">
<el-input v-model="formData.username" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="真实姓名" prop="realname">
<el-form-item :label="$t('page.form.labelRealname')" prop="realname">
<el-input v-model="formData.realname" />
</el-form-item>
</el-col>
</el-row>
<el-row v-if="dialogType === 'add'">
<el-col :span="12">
<el-form-item label="密码" prop="password">
<el-form-item :label="$t('page.form.labelPassword')" prop="password">
<el-input type="password" v-model="formData.password" show-password />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="确认密码" prop="password_confirm">
<el-form-item :label="$t('page.form.labelPasswordConfirm')" prop="password_confirm">
<el-input type="password" v-model="formData.password_confirm" show-password />
</el-form-item>
</el-col>
@@ -38,20 +38,20 @@
<el-row>
<el-col :span="12">
<el-form-item label="邮箱" prop="email">
<el-input v-model="formData.email" placeholder="请输入邮箱" />
<el-form-item :label="$t('page.form.labelEmail')" prop="email">
<el-input v-model="formData.email" :placeholder="$t('page.form.placeholderEmail')" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="手机号" prop="phone">
<el-input v-model="formData.phone" placeholder="请输入手机号" />
<el-form-item :label="$t('page.form.labelPhone')" prop="phone">
<el-input v-model="formData.phone" :placeholder="$t('page.form.placeholderPhone')" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="部门" prop="dept_id">
<el-form-item :label="$t('page.form.labelDept')" prop="dept_id">
<el-tree-select
v-model="formData.dept_id"
:data="optionData.deptData"
@@ -62,7 +62,7 @@
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="角色" prop="role_ids">
<el-form-item :label="$t('page.form.labelRole')" prop="role_ids">
<el-select v-model="formData.role_ids" multiple clearable>
<el-option
v-for="role in optionData.roleList"
@@ -77,7 +77,7 @@
<el-row>
<el-col :span="12">
<el-form-item label="岗位" prop="post_ids">
<el-form-item :label="$t('page.form.labelPost')" prop="post_ids">
<el-select v-model="formData.post_ids" multiple clearable>
<el-option
v-for="post in optionData.postList"
@@ -89,14 +89,14 @@
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="性别" prop="gender">
<el-form-item :label="$t('page.form.labelGender')" prop="gender">
<sa-radio v-model="formData.gender" dict="gender" valueType="string" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="状态" prop="status">
<el-form-item :label="$t('page.form.labelStatus')" prop="status">
<sa-radio v-model="formData.status" dict="data_status" />
</el-form-item>
</el-col>
@@ -104,12 +104,12 @@
<el-row>
<el-col :span="24">
<el-form-item label="备注" prop="remark">
<el-form-item :label="$t('page.form.labelRemark')" prop="remark">
<el-input
v-model="formData.remark"
type="textarea"
:rows="3"
placeholder="请输入备注"
:placeholder="$t('page.form.placeholderRemark')"
/>
</el-form-item>
</el-col>
@@ -117,8 +117,8 @@
</el-form>
<template #footer>
<div class="dialog-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>
</div>
</template>
</el-dialog>
@@ -130,6 +130,8 @@
import deptApi from '@/api/system/dept'
import roleApi from '@/api/system/role'
import postApi from '@/api/system/post'
import { ElMessage } from 'element-plus'
import { useI18n } from 'vue-i18n'
interface Props {
modelValue: boolean
@@ -149,6 +151,7 @@
})
const emit = defineEmits<Emits>()
const { t } = useI18n()
const formRef = ref<FormInstance>()
const optionData = reactive({
@@ -167,30 +170,30 @@
const validatePasswordConfirm = (rule: any, value: any, callback: any) => {
if (value !== formData.password) {
callback(new Error('两次输入的密码不一致'))
callback(new Error(t('page.form.rulePasswordNotMatch')))
} else {
callback()
}
}
// 表单验证规则
const rules: FormRules = {
const rules = computed<FormRules>(() => ({
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
{ required: true, message: t('page.form.ruleUsernameRequired'), trigger: 'blur' },
{ min: 2, max: 20, message: t('page.form.ruleUsernameLength'), trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
{ required: true, message: t('page.form.rulePasswordRequired'), trigger: 'blur' },
{ min: 6, max: 20, message: t('page.form.rulePasswordLength'), trigger: 'blur' }
],
password_confirm: [
{ required: true, message: '请输入确认密码', trigger: 'blur' },
{ min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
{ required: true, message: t('page.form.rulePasswordConfirmRequired'), trigger: 'blur' },
{ min: 6, max: 20, message: t('page.form.rulePasswordLength'), trigger: 'blur' },
{ validator: validatePasswordConfirm, trigger: 'blur' }
],
dept_id: [{ required: true, message: '请选择部门', trigger: 'change' }],
role_ids: [{ required: true, message: '请选择角色', trigger: 'blur' }]
}
dept_id: [{ required: true, message: t('page.form.ruleDeptRequired'), trigger: 'change' }],
role_ids: [{ required: true, message: t('page.form.ruleRoleRequired'), trigger: 'blur' }]
}))
// 初始表单数据
const initialFormData = {
@@ -287,10 +290,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()