i18n: 用户与租户新增多语言配置

src/views/system/user/index.vue

@@ -65,35 +65,35 @@ const {
     },
     {
       key: 'userName',
-      title: '用户名称',
+      title: $t('page.system.user.userName'),
       align: 'center',
       minWidth: 120,
       ellipsis: true
     },
     {
       key: 'nickName',
-      title: '用户昵称',
+      title: $t('page.system.user.nickName'),
       align: 'center',
       minWidth: 120,
       ellipsis: true
     },
     {
       key: 'deptName',
-      title: '部门',
+      title: $t('page.system.user.deptName'),
       align: 'center',
       minWidth: 120,
       ellipsis: true
     },
     {
       key: 'phonenumber',
-      title: '手机号码',
+      title: $t('page.system.user.phonenumber'),
       align: 'center',
       minWidth: 120,
       ellipsis: true
     },
     {
       key: 'status',
-      title: '状态',
+      title: $t('page.system.user.status'),
       align: 'center',
       minWidth: 80,
       render(row) {
@@ -109,7 +109,7 @@ const {
     },
     {
       key: 'createTime',
-      title: '创建时间',
+      title: $t('page.system.user.createTime'),
       align: 'center',
       minWidth: 120
     },
@@ -234,18 +234,18 @@ async function handleStatusChange(
   callback(!error);
 
   if (!error) {
-    window.$message?.success('状态修改成功');
+    window.$message?.success($t('page.system.user.statusChangeSuccess'));
     getData();
   }
 }
 
 function handleExport() {
-  download('/system/user/export', searchParams, `用户列表_${new Date().getTime()}.xlsx`);
+  download('/system/user/export', searchParams, `${$t('page.system.user.title')}_${new Date().getTime()}.xlsx`);
 }
 </script>
 
 <template>
-  <TableSiderLayout sider-title="部门列表">
+  <TableSiderLayout :sider-title="$t('page.system.dept.title')">
     <template #header-extra>
       <NButton size="small" text class="h-18px" @click.stop="() => handleResetTreeData()">
         <template #icon>
@@ -270,7 +270,7 @@ function handleExport() {
           @update:selected-keys="handleClickTree"
         >
           <template #empty>
-            <NEmpty description="暂无部门信息" class="h-full min-h-200px justify-center" />
+            <NEmpty :description="$t('page.system.dept.empty')" class="h-full min-h-200px justify-center" />
           </template>
         </NTree>
       </NSpin>
@@ -278,7 +278,7 @@ function handleExport() {
     <div class="h-full flex-col-stretch gap-12px overflow-hidden lt-sm:overflow-auto">
       <UserSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
       <TableRowCheckAlert v-model:checked-row-keys="checkedRowKeys" />
-      <NCard title="用户列表" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
+      <NCard :title="$t('page.system.user.title')" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
         <template #header-extra>
           <TableHeaderOperation
             v-model:columns="columnChecks"
@@ -297,7 +297,7 @@ function handleExport() {
                 <template #icon>
                   <icon-material-symbols:upload-rounded class="text-icon" />
                 </template>
-                导入
+                {{ $t('common.import') }}
               </NButton>
             </template>
           </TableHeaderOperation>

src/views/system/user/modules/user-import-modal.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-// import { fetchUserResetPwd } from '@/service/api/system';
 import { ref, watch } from 'vue';
 import type { UploadFileInfo } from 'naive-ui';
 import { getToken } from '@/store/modules/auth/shared';
 import { useDownload } from '@/hooks/business/download';
 import { getServiceBaseURL } from '@/utils/service';
 import type FileUpload from '@/components/custom/file-upload.vue';
+import { $t } from '@/locales';
 
 defineOptions({
   name: 'UserImportModal'
@@ -66,7 +66,7 @@ function handleFinish(options: { file: UploadFileInfo; event?: ProgressEvent })
   const responseText = event?.target?.responseText;
   const response = JSON.parse(responseText);
   message.value = response.msg;
-  window.$message?.success('导入成功');
+  window.$message?.success($t('common.importSuccess'));
   success.value = true;
   return file;
 }
@@ -77,12 +77,16 @@ function handleError(options: { file: UploadFileInfo; event?: ProgressEvent }) {
   const responseText = event?.target?.responseText;
   const msg = JSON.parse(responseText).msg;
   message.value = msg;
-  window.$message?.error(msg || '导入失败');
+  window.$message?.error(msg || $t('common.importFail'));
   success.value = false;
 }
 
 function handleDownloadTemplate() {
-  download('/system/user/importTemplate', {}, `user_template_${new Date().getTime()}.xlsx`);
+  download(
+    '/system/user/importTemplate',
+    {},
+    `${$t('page.system.user.title')}_${$t('common.importTemplate')}_${new Date().getTime()}.xlsx`
+  );
 }
 
 watch(visible, () => {
@@ -97,7 +101,7 @@ watch(visible, () => {
 <template>
   <NModal
     v-model:show="visible"
-    title="导入用户"
+    :title="$t('common.import')"
     preset="card"
     :bordered="false"
     display-directive="show"
@@ -125,26 +129,26 @@ watch(visible, () => {
         <div class="mb-12px flex-center">
           <SvgIcon icon="material-symbols:unarchive-outline" class="text-58px color-#d8d8db dark:color-#a1a1a2" />
         </div>
-        <NText class="text-16px">点击或者拖动文件到该区域来上传</NText>
+        <NText class="text-16px">{{ $t('common.importTip') }}</NText>
         <NP depth="3" class="mt-8px text-center">
-          请上传大小不超过
+          {{ $t('common.importSize') }}
           <b class="text-red-500">50MB</b>
-          ，且格式为
+          {{ $t('common.importFormat') }}
           <b class="text-red-500">xls/xlsx</b>
-          的文件
+          {{ $t('common.importEnd') }}
         </NP>
       </NUploadDragger>
     </NUpload>
     <div class="flex-center">
-      <NCheckbox v-model="data.updateSupport">是否更新已经存在的用户数据</NCheckbox>
+      <NCheckbox v-model="data.updateSupport">{{ $t('common.updateExisting') }}</NCheckbox>
     </div>
-    <NAlert v-if="message" title="导入结果" :type="success ? 'success' : 'error'" :bordered="false">
+    <NAlert v-if="message" :title="$t('common.importResult')" :type="success ? 'success' : 'error'" :bordered="false">
       {{ message }}
     </NAlert>
     <template #footer>
       <NSpace justify="end" :size="16">
-        <NButton @click="handleDownloadTemplate">下载模板</NButton>
-        <NButton type="primary" @click="handleSubmit">导入用户</NButton>
+        <NButton @click="handleDownloadTemplate">{{ $t('common.downloadTemplate') }}</NButton>
+        <NButton type="primary" @click="handleSubmit">{{ $t('common.import') }}</NButton>
       </NSpace>
     </template>
   </NModal>

src/views/system/user/modules/user-operate-drawer.vue

@@ -39,8 +39,8 @@ const { createRequiredRule, patternRules } = useFormRules();
 
 const title = computed(() => {
   const titles: Record<NaiveUI.TableOperateType, string> = {
-    add: '新增用户信息',
-    edit: '编辑用户信息'
+    add: $t('page.system.user.addUser'),
+    edit: $t('page.system.user.editUser')
   };
   return titles[props.operateType];
 });
@@ -68,11 +68,11 @@ function createDefaultModel(): Model {
 type RuleKey = Extract<keyof Model, 'userName' | 'nickName' | 'password' | 'status' | 'phonenumber'>;
 
 const rules: Record<RuleKey, App.Global.FormRule[]> = {
-  userName: [createRequiredRule('用户名称不能为空')],
-  nickName: [createRequiredRule('用户昵称不能为空')],
+  userName: [createRequiredRule($t('page.system.user.form.userName.required'))],
+  nickName: [createRequiredRule($t('page.system.user.form.nickName.required'))],
   password: [{ ...patternRules.pwd, required: props.operateType === 'add' }],
   phonenumber: [patternRules.phone],
-  status: [createRequiredRule('帐号状态不能为空')]
+  status: [createRequiredRule($t('page.system.user.form.status.required'))]
 };
 
 async function getUserInfo() {
@@ -160,10 +160,10 @@ watch(visible, () => {
     <NDrawerContent :title="title" :native-scrollbar="false" closable>
       <NSpin :show="loading">
         <NForm ref="formRef" :model="model" :rules="rules">
-          <NFormItem label="用户昵称" path="nickName">
-            <NInput v-model:value="model.nickName" placeholder="请输入用户昵称" />
+          <NFormItem :label="$t('page.system.user.nickName')" path="nickName">
+            <NInput v-model:value="model.nickName" :placeholder="$t('page.system.user.form.nickName.required')" />
           </NFormItem>
-          <NFormItem label="归属部门" path="deptId">
+          <NFormItem :label="$t('page.system.user.deptName')" path="deptId">
             <NTreeSelect
               v-model:value="model.deptId"
               :loading="deptLoading"
@@ -172,40 +172,44 @@ watch(visible, () => {
               label-field="label"
               key-field="id"
               :default-expanded-keys="deptData?.length ? [deptData[0].id] : []"
-              placeholder="请选择归属部门"
+              :placeholder="$t('page.system.user.form.deptId.required')"
             />
           </NFormItem>
-          <NFormItem label="手机号码" path="phonenumber">
-            <NInput v-model:value="model.phonenumber" placeholder="请输入手机号码" />
+          <NFormItem :label="$t('page.system.user.phonenumber')" path="phonenumber">
+            <NInput v-model:value="model.phonenumber" :placeholder="$t('page.system.user.form.phonenumber.required')" />
           </NFormItem>
-          <NFormItem label="邮箱" path="email">
-            <NInput v-model:value="model.email" placeholder="请输入邮箱" />
+          <NFormItem :label="$t('page.system.user.email')" path="email">
+            <NInput v-model:value="model.email" :placeholder="$t('page.system.user.form.email.required')" />
           </NFormItem>
-          <NFormItem v-if="operateType === 'add'" label="用户名称" path="userName">
-            <NInput v-model:value="model.userName" placeholder="请输入用户名称" />
+          <NFormItem v-if="operateType === 'add'" :label="$t('page.system.user.userName')" path="userName">
+            <NInput v-model:value="model.userName" :placeholder="$t('page.system.user.form.userName.required')" />
           </NFormItem>
-          <NFormItem label="用户密码" path="password">
+          <NFormItem :label="$t('page.system.user.password')" path="password">
             <NInput
               v-model:value="model.password"
               type="password"
               show-password-on="click"
-              placeholder="请输入用户密码"
+              :placeholder="$t('page.system.user.form.password.required')"
             />
           </NFormItem>
-          <NFormItem label="用户性别" path="sex">
-            <DictRadio v-model:value="model.sex" dict-code="sys_user_sex" placeholder="请选择用户性别" />
+          <NFormItem :label="$t('page.system.user.sex')" path="sex">
+            <DictRadio
+              v-model:value="model.sex"
+              dict-code="sys_user_sex"
+              :placeholder="$t('page.system.user.form.sex.required')"
+            />
           </NFormItem>
-          <NFormItem label="岗位" path="postIds">
+          <NFormItem :label="$t('page.system.user.postIds')" path="postIds">
             <PostSelect v-model:value="model.postIds" :dept-id="model.deptId" multiple clearable />
           </NFormItem>
-          <NFormItem label="角色" path="roleIds">
+          <NFormItem :label="$t('page.system.user.roleIds')" path="roleIds">
             <RoleSelect v-model:value="model.roleIds" multiple clearable />
           </NFormItem>
-          <NFormItem label="状态" path="status">
+          <NFormItem :label="$t('page.system.user.status')" path="status">
             <DictRadio v-model:value="model.status" dict-code="sys_normal_disable" />
           </NFormItem>
-          <NFormItem label="备注" path="remark">
-            <NInput v-model:value="model.remark" placeholder="请输入备注" />
+          <NFormItem :label="$t('page.system.user.remark')" path="remark">
+            <NInput v-model:value="model.remark" :placeholder="$t('page.system.user.form.remark.required')" />
           </NFormItem>
         </NForm>
       </NSpin>

src/views/system/user/modules/user-search.vue

@@ -42,24 +42,37 @@ async function search() {
       <NCollapseItem :title="$t('common.search')" name="user-search">
         <NForm ref="formRef" :model="model" label-placement="left" :label-width="80">
           <NGrid responsive="screen" item-responsive>
-            <NFormItemGi span="24 s:12 m:6" label="用户名称" path="userName" class="pr-24px">
-              <NInput v-model:value="model.userName" placeholder="请输入用户名称" />
+            <NFormItemGi span="24 s:12 m:6" :label="$t('page.system.user.userName')" path="userName" class="pr-24px">
+              <NInput v-model:value="model.userName" :placeholder="$t('page.system.user.form.userName.required')" />
             </NFormItemGi>
-            <NFormItemGi span="24 s:12 m:6" label="用户昵称" path="nickName" class="pr-24px">
-              <NInput v-model:value="model.nickName" placeholder="请输入用户昵称" />
+            <NFormItemGi span="24 s:12 m:6" :label="$t('page.system.user.nickName')" path="nickName" class="pr-24px">
+              <NInput v-model:value="model.nickName" :placeholder="$t('page.system.user.form.nickName.required')" />
             </NFormItemGi>
-            <NFormItemGi span="24 s:12 m:6" label="手机号码" path="phonenumber" class="pr-24px">
-              <NInput v-model:value="model.phonenumber" placeholder="请输入手机号码" />
+            <NFormItemGi
+              span="24 s:12 m:6"
+              :label="$t('page.system.user.phonenumber')"
+              path="phonenumber"
+              class="pr-24px"
+            >
+              <NInput
+                v-model:value="model.phonenumber"
+                :placeholder="$t('page.system.user.form.phonenumber.required')"
+              />
             </NFormItemGi>
-            <NFormItemGi span="24 s:12 m:6" label="帐号状态" path="status" class="pr-24px">
+            <NFormItemGi span="24 s:12 m:6" :label="$t('page.system.user.status')" path="status" class="pr-24px">
               <DictSelect
                 v-model:value="model.status"
-                placeholder="请选择帐号状态"
+                :placeholder="$t('page.system.user.form.status.required')"
                 dict-code="sys_normal_disable"
                 clearable
               />
             </NFormItemGi>
-            <NFormItemGi span="24 s:12 m:12" label="创建时间" path="createTime" class="pr-24px">
+            <NFormItemGi
+              span="24 s:12 m:12"
+              :label="$t('page.system.user.createTime')"
+              path="createTime"
+              class="pr-24px"
+            >
               <NDatePicker
                 v-model:formatted-value="dateRangeCreateTime"
                 type="datetimerange"