--在线用户,角色管理国际化

src/i18n/locales/en-US.ts

@@ -12,6 +12,7 @@ export default {
     msgSuccess: 'Success {msg}',
     errorFields: 'Please fill in the required information in {num} correctly!',
     tablePaginationTotal: 'A total of {total} items',
+    zebra:'Tabular zebra pattern',
     ok: 'Ok',
     cancel: 'Cancel',
     close: 'Close',
@@ -538,7 +539,7 @@ export default {
         delSure:'Confirm deletion of data item with user ID {userId}?',
         export:'Export',
         import:'Import',
-        exportSure:'Are you sure to export the xlsx table file based on search criteria??',
+        exportSure:'Are you sure to export the xlsx table file based on search criteria?',
         phone:'Phone Number',
         createTime:'Creation time',
         userTop:'User profile',
@@ -550,7 +551,20 @@ export default {
         loginPwd:'Login password',
         updateSure:'Do you want to update existing data',
         downloadObj:'Download Tpl',
-    }
+      },
+      role:{
+      allScopeOptions:'All data permissions',
+      byMyselfScopeOptions:'Custom data permissions',
+      onlyClassScopeOptions:'Data permissions of this department',
+      classAllScopeOptions:'Data permissions for this department and the following',
+      myselfScopeOptions:'Only personal data permissions',
+      roleId:'Role number',
+      roleName:'Role Name',
+      roleKey:'Role key',
+      roleSort:'Role order',
+      roleStatus:'Role status',
+      createTime:'Creation time',
+      }
   },
   },
 };

src/i18n/locales/zh-CN.ts

@@ -12,6 +12,7 @@ export default {
     msgSuccess: '{msg}成功 ',
     errorFields: '请正确填写 {num} 处必填信息！',
     tablePaginationTotal: '总共 {total} 条',
+    zebraL:'表格斑马纹',
     ok: '确定',
     cancel: '取消',
     close: '关闭',
@@ -515,7 +516,7 @@ export default {
       }
     },
     system:{
-      user:  {
+      user:{
         userInfo:'用户信息',
         userNum: '用户编号',
         account: '登录账号',
@@ -550,7 +551,39 @@ export default {
         loginPwd:'登入密码',
         updateSure:'是否更新已经存在的数据',
         downloadObj:'下载模板',
-          },
+      },
+      role:{
+        allScopeOptions:'全部数据权限',
+        byMyselfScopeOptions:'自定数据权限',
+        onlyClassScopeOptions:'本部门数据权限',
+        classAllScopeOptions:'本部门及以下数据权限',
+        myselfScopeOptions:'仅本人数据权限',
+        roleId:'角色编号',
+        roleName:'角色名称',
+        roleKey:'角色键值',
+        roleSort:'角色顺序',
+        roleStatus:'角色状态',
+        createTime:'创建时间',
+        trueValue:'请正确输入{msg}',
+        roleInfo:'角色信息',
+        distribute:'分配数据权限',
+        open:'启用',
+        close:'停用',
+        statusSure:'确定要 {text} {roleName} 角色吗?',
+        statusFailed:'${roleName} {text}失败',
+        delSure:'确认删除角色编号为 【{roleId}】 的数据项?',
+        distributeUser:'分配用户',
+        roleMark:'角色说明',
+        menu:'菜单权限',
+        roleKeyTip:"权限标识示例:dba 控制器中使用权限标识，如： @PreAuthorize({ hasRoles: ['dba'] })",
+        openSwitch:'展开/折叠',
+        selAllSwitch:'全选/全不选',
+        relationSwitch:'父子联动',
+        normal:'正常',
+        stop:'暂停',
+        preScope:'权限范围',
+        dataPer:'数据权限',
+      }
   },
   },
 };

src/views/monitor/online/index.vue

@@ -165,14 +165,16 @@ function fnGetList() {
 function fnForceLogout(row: Record<string, string>) {
   Modal.confirm({
     title: t('common.tipTitle'),
-    content: t('views.monitor.online.getOutSure',{userName:row.userName}),
+    content: t('views.monitor.online.getOutSure', { userName: row.userName }),
     onOk() {
       const hide = message.loading(t('common.loading'), 0);
       forceLogout(row.tokenId)
         .then(res => {
           if (res.code === RESULT_CODE_SUCCESS) {
             message.success({
-              content: t('common.msgSuccess', { msg: t('views.monitor.online.getOut')  }),
+              content: t('common.msgSuccess', {
+                msg: t('views.monitor.online.getOut'),
+              }),
               duration: 3,
             });
           } else {
@@ -206,34 +208,36 @@ onMounted(() => {
       <a-form :model="queryParams" name="queryParams" layout="horizontal">
         <a-row :gutter="16">
           <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item label="登录账号" name="userName">
+            <a-form-item
+              :label="t('views.monitor.online.account')"
+              name="userName"
+            >
               <a-input
                 v-model:value="queryParams.userName"
                 allow-clear
                 :maxlength="30"
-                placeholder="请输入登录账号"
               ></a-input>
             </a-form-item>
           </a-col>
           <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item label="登录主机" name="ipaddr">
+            <a-form-item :label="t('views.monitor.online.host')" name="ipaddr">
               <a-input
                 v-model:value="queryParams.ipaddr"
                 allow-clear
                 :maxlength="128"
-                placeholder="请输入登录主机"
+              >
-              ></a-input> </a-form-item
+              </a-input> </a-form-item
           ></a-col>
           <a-col :lg="12" :md="24" :xs="24">
             <a-form-item>
               <a-space :size="8">
                 <a-button type="primary" @click.prevent="fnGetList">
                   <template #icon><SearchOutlined /></template>
-                  搜索
+                  {{ t('common.search') }}
                 </a-button>
                 <a-button type="default" @click.prevent="fnQueryReset">
                   <template #icon><ClearOutlined /></template>
-                  重置
+                  {{ t('common.reset') }}
                 </a-button>
               </a-space>
             </a-form-item>
@@ -247,31 +251,31 @@ onMounted(() => {
       <template #extra>
         <a-space :size="8" align="center">
           <a-tooltip>
-            <template #title>搜索栏</template>
+            <template #title>{{ t('common.searchBarText') }}</template>
             <a-switch
               v-model:checked="tableState.seached"
-              checked-children="显"
+              :checked-children="t('common.switch.show')"
-              un-checked-children="隐"
+              :un-checked-children="t('common.switch.hide')"
               size="small"
             />
           </a-tooltip>
           <a-tooltip>
-            <template #title>表格斑马纹</template>
+            <template #title>{{ t('common.zebra') }}</template>
             <a-switch
               v-model:checked="tableState.striped"
-              checked-children="开"
+              :checked-children="t('common.switch.show')"
-              un-checked-children="关"
+              :un-checked-children="t('common.switch.hide')"
               size="small"
             />
           </a-tooltip>
           <a-tooltip>
-            <template #title>刷新</template>
+            <template #title>{{ t('common.reloadText') }}</template>
             <a-button type="text" @click.prevent="fnGetList">
               <template #icon><ReloadOutlined /></template>
             </a-button>
           </a-tooltip>
           <a-tooltip placement="topRight">
-            <template #title>密度</template>
+            <template #title>{{ t('common.sizeText') }}</template>
             <a-dropdown placement="bottomRight" trigger="click">
               <a-button type="text">
                 <template #icon><ColumnHeightOutlined /></template>
@@ -281,9 +285,15 @@ onMounted(() => {
                   :selected-keys="[tableState.size as string]"
                   @click="fnTableSize"
                 >
-                  <a-menu-item key="default">默认</a-menu-item>
+                  <a-menu-item key="default"
-                  <a-menu-item key="middle">中等</a-menu-item>
+                    >{{ t('common.size.default') }}
-                  <a-menu-item key="small">紧凑</a-menu-item>
+                  </a-menu-item>
+                  <a-menu-item key="middle"
+                    >{{ t('common.size.middle') }}
+                  </a-menu-item>
+                  <a-menu-item key="small"
+                    >{{ t('common.size.small') }}
+                  </a-menu-item>
                 </a-menu>
               </template>
             </a-dropdown>

src/views/system/role/index.vue

@@ -108,33 +108,33 @@ let tableState: TabeStateType = reactive({
 /**表格字段列 */
 let tableColumns: ColumnsType = [
   {
-    title: '角色编号',
+    title: t('views.system.role.roleId'),
     dataIndex: 'roleId',
     align: 'center',
   },
   {
-    title: '角色名称',
+    title: t('views.system.role.roleName'),
     dataIndex: 'roleName',
     align: 'center',
   },
   {
-    title: '角色键值',
+    title: t('views.system.role.roleKey'),
     dataIndex: 'roleKey',
     align: 'center',
   },
   {
-    title: '角色顺序',
+    title: t('views.system.role.roleSort'),
     dataIndex: 'roleSort',
     align: 'center',
   },
   {
-    title: '角色状态',
+    title: t('views.system.role.roleStatus'),
     dataIndex: 'status',
     key: 'status',
     align: 'center',
   },
   {
-    title: '创建时间',
+    title: t('views.system.role.createTime'),
     dataIndex: 'createTime',
     align: 'center',
     customRender(opt) {
@@ -143,7 +143,7 @@ let tableColumns: ColumnsType = [
     },
   },
   {
-    title: '操作',
+    title: t('common.operate'),
     key: 'roleId',
     align: 'center',
   },
@@ -167,7 +167,7 @@ let tablePagination = reactive({
   showSizeChanger: true,
   /**数据总数 */
   total: 0,
-  showTotal: (total: number) => `总共 ${total} 条`,
+  showTotal: (total: number) => t('common.tablePaginationTotal', { total }),
   onChange: (page: number, pageSize: number) => {
     tablePagination.current = page;
     tablePagination.pageSize = pageSize;
@@ -194,11 +194,11 @@ function fnTableSelectedRowKeys(keys: (string | number)[]) {
 
 /**数据范围选项 */
 const dataScopeOptions = ref<{ value: string; label: string }[]>([
-  { value: '1', label: '全部数据权限' },
+  { value: '1', label: t('views.system.role.allScopeOptions') },
-  { value: '2', label: '自定数据权限' },
+  { value: '2', label: t('views.system.role.byMyselfScopeOptions') },
-  { value: '3', label: '本部门数据权限' },
+  { value: '3', label: t('views.system.role.onlyClassScopeOptions') },
-  { value: '4', label: '本部门及以下数据权限' },
+  { value: '4', label: t('views.system.role.classAllScopeOptions') },
-  { value: '5', label: '仅本人数据权限' },
+  { value: '5', label: t('views.system.role.myselfScopeOptions') },
 ]);
 
 type TreeDataType = {
@@ -282,10 +282,24 @@ const modalStateFrom = Form.useForm(
   modalState.from,
   reactive({
     roleName: [
-      { required: true, min: 1, max: 30, message: '请正确输入角色名称' },
+      {
+        required: true,
+        min: 1,
+        max: 30,
+        message: t('views.system.role.trueValue', {
+          msg: t('views.system.role.roleName'),
+        }),
+      },
     ],
     roleKey: [
-      { required: true, min: 1, max: 50, message: '请正确输入角色键值' },
+      {
+        required: true,
+        min: 1,
+        max: 50,
+        message: t('views.system.role.trueValue', {
+          msg: t('views.system.role.roleKey'),
+        }),
+      },
     ],
   })
 );
@@ -296,7 +310,7 @@ const modalStateFrom = Form.useForm(
  */
 function fnModalVisibleByVive(roleId: string | number) {
   if (!roleId) {
-    message.error(`角色记录存在错误`, 2);
+    message.error(t('common.getInfoFail'), 2);
     return;
   }
   if (modalState.confirmLoading) return;
@@ -317,10 +331,10 @@ function fnModalVisibleByVive(roleId: string | number) {
         modalState.menuTree.checkedKeys = checkedKeys;
         modalState.from.menuIds = checkedKeys;
       }
-      modalState.title = '角色信息';
+      modalState.title = t('views.system.role.roleInfo');
       modalState.visibleByView = true;
     } else {
-      message.error(`获取角色信息失败`, 2);
+      message.error(t('common.getInfoFail'), 2);
     }
   });
 }
@@ -334,7 +348,7 @@ function fnModalVisibleByEdit(roleId?: string | number) {
     modalStateFrom.resetFields();
     if (menuTree.treeData.length > 0) {
       modalState.menuTree.treeData = menuTree.treeData;
-      modalState.title = '添加角色信息';
+      modalState.title = t('common.addText') + t('views.system.role.roleInfo');
       modalState.visibleByEdit = true;
     } else {
       if (modalState.confirmLoading) return;
@@ -349,7 +363,8 @@ function fnModalVisibleByEdit(roleId?: string | number) {
           menuTree.expandedKeys = parseTreeNodeKeys(res.data, 'id');
           menuTree.treeData = res.data;
           modalState.menuTree.treeData = res.data;
-          modalState.title = '添加角色信息';
+          modalState.title =
+            t('common.addText') + t('views.system.role.roleInfo');
           modalState.visibleByEdit = true;
         }
       });
@@ -373,10 +388,11 @@ function fnModalVisibleByEdit(roleId?: string | number) {
           modalState.menuTree.checkedKeys = checkedKeys;
           modalState.from.menuIds = checkedKeys;
         }
-        modalState.title = '修改角色信息';
+        modalState.title =
+          t('common.editText') + t('views.system.role.roleInfo');
         modalState.visibleByEdit = true;
       } else {
-        message.error(`获取角色信息失败`, 2);
+        message.error(t('common.getInfoFail'), 2);
       }
     });
   }
@@ -399,7 +415,7 @@ function fnModalOk() {
         .then(res => {
           if (res.code === RESULT_CODE_SUCCESS) {
             message.success({
-              content: `${modalState.title}成功`,
+              content: t('common.msgSuccess', { msg: modalState.title }),
               key,
               duration: 2,
             });
@@ -419,7 +435,7 @@ function fnModalOk() {
         });
     })
     .catch(e => {
-      message.error(`请正确填写 ${e.errorFields.length} 处必填信息！`, 2);
+      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
     });
 }
 
@@ -510,7 +526,7 @@ function fnModalOkDataScope() {
     .then(res => {
       if (res.code === RESULT_CODE_SUCCESS) {
         message.success({
-          content: `${modalState.title}成功`,
+          content: t('common.msgSuccess', { msg: modalState.title }),
           duration: 2,
         });
         modalState.visibleByDataScope = false;
@@ -534,7 +550,7 @@ function fnModalOkDataScope() {
  */
 function fnRecordDataScope(roleId: string | number) {
   if (!roleId) {
-    message.error(`角色记录存在错误`, 2);
+    message.error(t('common.getInfoFail'), 2);
     return;
   }
   if (modalState.confirmLoading) return;
@@ -554,10 +570,10 @@ function fnRecordDataScope(roleId: string | number) {
           modalState.deptTree.checkedKeys = checkedKeys;
           modalState.from.deptIds = checkedKeys;
         }
-        modalState.title = '分配数据权限';
+        modalState.title = t('views.system.role.distribute');
         modalState.visibleByDataScope = true;
       } else {
-        message.error(`获取角色信息失败`, 2);
+        message.error(t('common.getInfoFail'), 2);
       }
     })
     .finally(() => {
@@ -584,22 +600,31 @@ function fnRecordAuthUser(row: Record<string, string>) {
  * @param row 角色记录对象
  */
 function fnRecordStatus(row: Record<string, string>) {
-  const text = row.status === '1' ? '启用' : '停用';
+  const text =
+    row.status === '1'
+      ? t('views.system.role.open')
+      : t('views.system.role.close');
   Modal.confirm({
     title: t('common.tipTitle'),
-    content: `确定要${text} ${row.roleName} 角色吗?`,
+    content: t('views.system.role.statusSure', {
+      text: text,
+      roleName: row.roleName,
+    }),
     onOk() {
       const hide = message.loading(t('common.loading'), 0);
       changeRoleStatus(row.roleId, row.status).then(res => {
         hide();
         if (res.code === RESULT_CODE_SUCCESS) {
           message.success({
-            content: `${row.roleName} ${text}成功`,
+            content: `${row.roleName} ${text} ${t('common.msgSuccess')}`,
             duration: 2,
           });
         } else {
           message.error({
-            content: `${row.roleName} ${text}失败`,
+            content: t('views.system.role.statusSure', {
+              text: text,
+              roleName: row.roleName,
+            }),
             duration: 2,
           });
         }
@@ -622,14 +647,14 @@ function fnRecordDelete(roleId: string = '0') {
   }
   Modal.confirm({
     title: t('common.tipTitle'),
-    content: `确认删除角色编号为 【${roleId}】 的数据项?`,
+    content: t('views.system.role.delSure', { roleId: roleId }),
     onOk() {
       const key = 'delRole';
       message.loading({ content: t('common.loading'), key });
       delRole(roleId).then(res => {
         if (res.code === RESULT_CODE_SUCCESS) {
           message.success({
-            content: `删除成功`,
+            content: t('common.msgSuccess', { msg: t('common.deleteText ') }),
             key,
             duration: 2,
           });
@@ -650,14 +675,16 @@ function fnRecordDelete(roleId: string = '0') {
 function fnExportList() {
   Modal.confirm({
     title: t('common.tipTitle'),
-    content: `确认根据搜索条件导出xlsx表格文件吗?`,
+    content: t('views.system.user.exportSure'),
     onOk() {
       const key = 'exportRole';
       message.loading({ content: t('common.loading'), key });
       exportRole(toRaw(queryParams)).then(res => {
         if (res.code === RESULT_CODE_SUCCESS) {
           message.success({
-            content: `已完成导出`,
+            content: t('common.msgSuccess', {
+              msg: t('views.system.user.export'),
+            }),
             key,
             duration: 2,
           });
@@ -678,7 +705,7 @@ function fnExportList() {
 function fnGetList(pageNum?: number) {
   if (tableState.loading) return;
   tableState.loading = true;
-  if(pageNum){
+  if (pageNum) {
     queryParams.pageNum = pageNum;
   }
   if (!queryRangePicker.value) {
@@ -722,42 +749,47 @@ onMounted(() => {
       <a-form :model="queryParams" name="queryParams" layout="horizontal">
         <a-row :gutter="16">
           <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item label="角色名称" name="roleName">
+            <a-form-item
+              :label="t('views.system.role.roleName')"
+              name="roleName"
+            >
               <a-input
                 v-model:value="queryParams.roleName"
                 allow-clear
-                placeholder="请输入角色名称"
               ></a-input>
             </a-form-item>
           </a-col>
           <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item label="角色键值" name="roleKey">
+            <a-form-item :label="t('views.system.role.roleKey')" name="roleKey">
               <a-input
                 v-model:value="queryParams.roleKey"
                 allow-clear
-                placeholder="请输入角色键值"
               ></a-input>
             </a-form-item>
           </a-col>
           <a-col :lg="4" :md="12" :xs="24">
-            <a-form-item label="角色状态" name="status">
+            <a-form-item
+              :label="t('views.system.role.roleStatus')"
+              name="status"
+            >
               <a-select
                 v-model:value="queryParams.status"
                 allow-clear
-                placeholder="请选择"
                 :options="dict.sysNormalDisable"
               >
               </a-select>
             </a-form-item>
           </a-col>
           <a-col :lg="8" :md="12" :xs="24">
-            <a-form-item label="创建时间" name="queryRangePicker">
+            <a-form-item
+              :label="t('views.system.role.createTime')"
+              name="queryRangePicker"
+            >
               <a-range-picker
                 v-model:value="queryRangePicker"
                 allow-clear
                 bordered
                 value-format="YYYY-MM-DD"
-                :placeholder="['创建开始', '创建结束']"
                 style="width: 100%"
               ></a-range-picker>
             </a-form-item>
@@ -767,11 +799,11 @@ onMounted(() => {
               <a-space :size="8">
                 <a-button type="primary" @click.prevent="fnGetList(1)">
                   <template #icon><SearchOutlined /></template>
-                  搜索
+                  {{ t('common.search') }}
                 </a-button>
                 <a-button type="default" @click.prevent="fnQueryReset">
                   <template #icon><ClearOutlined /></template>
-                  重置
+                  {{ t('common.reset') }}
                 </a-button>
               </a-space>
             </a-form-item>
@@ -790,7 +822,7 @@ onMounted(() => {
             v-perms:has="['system:role:add']"
           >
             <template #icon><PlusOutlined /></template>
-            新建
+            {{ t('common.addText') }}
           </a-button>
           <a-button
             type="default"
@@ -800,7 +832,7 @@ onMounted(() => {
             v-perms:has="['system:role:remove']"
           >
             <template #icon><DeleteOutlined /></template>
-            删除
+            {{ t('common.deleteText') }}
           </a-button>
           <a-button
             type="dashed"
@@ -808,7 +840,7 @@ onMounted(() => {
             v-perms:has="['system:role:export']"
           >
             <template #icon><ExportOutlined /></template>
-            导出
+            {{ t('common.export') }}
           </a-button>
         </a-space>
       </template>
@@ -817,31 +849,31 @@ onMounted(() => {
       <template #extra>
         <a-space :size="8" align="center">
           <a-tooltip>
-            <template #title>搜索栏</template>
+            <template #title>{{ t('common.searchBarText') }}</template>
             <a-switch
               v-model:checked="tableState.seached"
-              checked-children="显"
+              :checked-children="t('common.switch.show')"
-              un-checked-children="隐"
+              :un-checked-children="t('common.switch.hide')"
               size="small"
             />
           </a-tooltip>
           <a-tooltip>
-            <template #title>表格斑马纹</template>
+            <template #title>{{ t('common.zebra') }}</template>
             <a-switch
               v-model:checked="tableState.striped"
-              checked-children="开"
+              :checked-children="t('common.switch.show')"
-              un-checked-children="关"
+              :un-checked-children="t('common.switch.hide')"
               size="small"
             />
           </a-tooltip>
           <a-tooltip>
-            <template #title>刷新</template>
+            <template #title>{{ t('common.reloadText') }}</template>
             <a-button type="text" @click.prevent="fnGetList()">
               <template #icon><ReloadOutlined /></template>
             </a-button>
           </a-tooltip>
           <a-tooltip placement="topRight">
-            <template #title>密度</template>
+            <template #title>{{ t('common.sizeText') }}</template>
             <a-dropdown placement="bottomRight" trigger="click">
               <a-button type="text">
                 <template #icon><ColumnHeightOutlined /></template>
@@ -851,9 +883,15 @@ onMounted(() => {
                   :selected-keys="[tableState.size as string]"
                   @click="fnTableSize"
                 >
-                  <a-menu-item key="default">默认</a-menu-item>
+                  <a-menu-item key="default"
-                  <a-menu-item key="middle">中等</a-menu-item>
+                    >{{ t('common.size.default') }}
-                  <a-menu-item key="small">紧凑</a-menu-item>
+                  </a-menu-item>
+                  <a-menu-item key="middle"
+                    >{{ t('common.size.middle') }}
+                  </a-menu-item>
+                  <a-menu-item key="small"
+                    >{{ t('common.size.small') }}
+                  </a-menu-item>
                 </a-menu>
               </template>
             </a-dropdown>
@@ -886,9 +924,9 @@ onMounted(() => {
               "
               v-model:checked="record.status"
               checked-value="1"
-              checked-children="正常"
+              :checked-children="t('views.system.role.normal')"
               un-checked-value="0"
-              un-checked-children="暂停"
+              :un-checked-children="t('views.system.role.stop')"
               size="small"
               @change="fnRecordStatus(record)"
             />
@@ -901,7 +939,7 @@ onMounted(() => {
           <template v-if="column.key === 'roleId'">
             <a-space :size="8" align="center">
               <a-tooltip>
-                <template #title>查看详情</template>
+                <template #title>{{ t('common.viewText') }}</template>
                 <a-button
                   type="link"
                   @click.prevent="fnModalVisibleByVive(record.roleId)"
@@ -911,7 +949,7 @@ onMounted(() => {
                 </a-button>
               </a-tooltip>
               <a-tooltip v-if="record.roleId !== '1'">
-                <template #title>编辑</template>
+                <template #title>{{ t('common.editText') }}</template>
                 <a-button
                   type="link"
                   @click.prevent="fnModalVisibleByEdit(record.roleId)"
@@ -921,7 +959,7 @@ onMounted(() => {
                 </a-button>
               </a-tooltip>
               <a-tooltip v-if="record.roleId !== '1'">
-                <template #title>删除</template>
+                <template #title>{{ t('common.deleteText') }}</template>
                 <a-button
                   type="link"
                   @click.prevent="fnRecordDelete(record.roleId)"
@@ -931,7 +969,9 @@ onMounted(() => {
                 </a-button>
               </a-tooltip>
               <a-tooltip v-if="record.roleId !== '1'">
-                <template #title>分配数据权限</template>
+                <template #title>{{
+                  t('views.system.role.distribute')
+                }}</template>
                 <a-button
                   type="link"
                   @click.prevent="fnRecordDataScope(record.roleId)"
@@ -941,7 +981,9 @@ onMounted(() => {
                 </a-button>
               </a-tooltip>
               <a-tooltip v-if="record.roleId !== '1'">
-                <template #title>分配用户</template>
+                <template #title>{{
+                  t('views.system.role.distributeUser')
+                }}</template>
                 <a-button
                   type="link"
                   @click.prevent="fnRecordAuthUser(record)"
@@ -966,12 +1008,15 @@ onMounted(() => {
       <a-form layout="horizontal">
         <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="角色编号" name="roleId">
+            <a-form-item :label="t('views.system.role.roleId')" name="roleId">
               {{ modalState.from.roleId }}
             </a-form-item>
           </a-col>
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="创建时间" name="createTime">
+            <a-form-item
+              :label="t('views.system.role.roleId')"
+              name="createTime"
+            >
               <span v-if="+modalState.from.createTime > 0">
                 {{ parseDateToStr(+modalState.from.createTime) }}
               </span>
@@ -980,12 +1025,15 @@ onMounted(() => {
         </a-row>
         <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="角色顺序" name="roleSort">
+            <a-form-item :label="t('views.system.role.roleId')" name="roleSort">
               {{ modalState.from.roleSort }}
             </a-form-item>
           </a-col>
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="角色状态" name="status">
+            <a-form-item
+              :label="t('views.system.role.roleStatus')"
+              name="status"
+            >
               <DictTag
                 :options="dict.sysNormalDisable"
                 :value="modalState.from.status"
@@ -995,21 +1043,27 @@ onMounted(() => {
         </a-row>
         <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="角色名称" name="roleName">
+            <a-form-item
+              :label="t('views.system.role.roleName')"
+              name="roleName"
+            >
               {{ modalState.from.roleName }}
             </a-form-item>
           </a-col>
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="角色键值" name="roleKey">
+            <a-form-item :label="t('views.system.role.roleKey')" name="roleKey">
               {{ modalState.from.roleKey }}
             </a-form-item>
           </a-col>
         </a-row>
-        <a-form-item label="角色说明" name="remark">
+        <a-form-item :label="t('views.system.role.roleMark')" name="remark">
           {{ modalState.from.remark }}
         </a-form-item>
 
-        <a-form-item label="菜单权限" name="menuCheckStrictly">
+        <a-form-item
+          :label="t('views.system.role.menu')"
+          name="menuCheckStrictly"
+        >
           <a-tree
             disabled
             checkable
@@ -1026,7 +1080,9 @@ onMounted(() => {
         </a-form-item>
       </a-form>
       <template #footer>
-        <a-button key="cancel" @click="fnModalCancel">关闭</a-button>
+        <a-button key="cancel" @click="fnModalCancel">{{
+          t('common.cancel')
+        }}</a-button>
       </template>
     </a-modal>
 
@@ -1045,23 +1101,24 @@ onMounted(() => {
         <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
-              label="角色名称"
+              :label="t('views.system.role.roleName')"
               name="roleName"
               v-bind="modalStateFrom.validateInfos.roleName"
             >
               <a-input
                 v-model:value="modalState.from.roleName"
                 allow-clear
-                placeholder="请输入角色名称"
               ></a-input>
             </a-form-item>
           </a-col>
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="角色状态" name="status">
+            <a-form-item
+              :label="t('views.system.role.roleStatus')"
+              name="status"
+            >
               <a-select
                 v-model:value="modalState.from.status"
                 default-value="0"
-                placeholder="角色状态"
                 :options="dict.sysNormalDisable"
               >
               </a-select>
@@ -1072,22 +1129,16 @@ onMounted(() => {
         <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
-              label="角色键值"
+              :label="t('views.system.role.roleKey')"
               name="roleKey"
               v-bind="modalStateFrom.validateInfos.roleKey"
             >
-              <a-input
+              <a-input v-model:value="modalState.from.roleKey" allow-clear>
-                v-model:value="modalState.from.roleKey"
-                allow-clear
-                placeholder="请输入角色键值"
-              >
                 <template #prefix>
                   <a-tooltip placement="topLeft">
                     <template #title>
                       <div>
-                        权限标识示例：dba <br />
+                        {{ t('views.system.role.roleKeyTip') }}
-                        控制器中使用权限标识，如： <br />
-                        @PreAuthorize({ hasRoles: ['dba'] })
                       </div>
                     </template>
                     <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
@@ -1097,50 +1148,54 @@ onMounted(() => {
             </a-form-item>
           </a-col>
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="角色顺序" name="roleSort">
+            <a-form-item
+              :label="t('views.system.role.roleSort')"
+              name="roleSort"
+            >
               <a-input-number
                 v-model:value="modalState.from.roleSort"
                 :min="0"
                 :max="65535"
                 :step="1"
-                placeholder="排序值"
               ></a-input-number>
             </a-form-item>
           </a-col>
         </a-row>
 
-        <a-form-item label="角色说明" name="remark">
+        <a-form-item :label="t('views.system.role.roleMark')" name="remark">
           <a-textarea
             v-model:value="modalState.from.remark"
             :auto-size="{ minRows: 4, maxRows: 6 }"
             :maxlength="450"
             :show-count="true"
-            placeholder="请输入角色说明"
           />
         </a-form-item>
 
-        <a-form-item label="菜单权限" name="menuCheckStrictly">
+        <a-form-item
+          :label="t('views.system.role.menu')"
+          name="menuCheckStrictly"
+        >
           <a-space :size="12" align="center">
             <a-checkbox
               id="menu_1"
               :checked="modalState.menuTree.expandedKeys.length > 0"
               @change="(e:any) => fnModalExpandedKeys(e.target.checked, 'menu')"
             >
-              展开/折叠
+              {{ t('views.system.role.openSwitch') }}
             </a-checkbox>
             <a-checkbox
               id="menu_2"
               :checked="modalState.from.menuIds.length > 0"
               @change="(e:any) => fnModalCheckedKeys(e.target.checked, 'menu')"
             >
-              全选/全不选
+              {{ t('views.system.role.selAllSwitch') }}
             </a-checkbox>
             <a-checkbox
               id="menu_3"
               :checked="modalState.from.menuCheckStrictly === '1'"
               @change="(e:any) => fnModalCheckStrictly(e.target.checked, 'menu')"
             >
-              父子联动
+              {{ t('views.system.role.relationSwitch') }}
             </a-checkbox>
           </a-space>
           <a-tree
@@ -1176,12 +1231,12 @@ onMounted(() => {
       <a-form name="modalStateFromByDataScope" layout="horizontal">
         <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="角色编号" name="roleId">
+            <a-form-item :label="t('views.system.role.roleId')" name="roleId">
               {{ modalState.from.roleId }}
             </a-form-item>
           </a-col>
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="创建时间" name="createTime">
+            <a-form-item :label="t('views.system.role.createTime')" name="createTime">
               <span v-if="+modalState.from.createTime > 0">
                 {{ parseDateToStr(+modalState.from.createTime) }}
               </span>
@@ -1190,12 +1245,12 @@ onMounted(() => {
         </a-row>
         <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="角色顺序" name="roleSort">
+            <a-form-item  :label="t('views.system.role.roleSort')" name="roleSort">
               {{ modalState.from.roleSort }}
             </a-form-item>
           </a-col>
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="角色状态" name="status">
+            <a-form-item  :label="t('views.system.role.roleStatus')" name="status">
               <DictTag
                 :options="dict.sysNormalDisable"
                 :value="modalState.from.status"
@@ -1205,31 +1260,30 @@ onMounted(() => {
         </a-row>
         <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="角色名称" name="roleName">
+            <a-form-item  :label="t('views.system.role.roleName')" name="roleName">
               {{ modalState.from.roleName }}
             </a-form-item>
           </a-col>
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="角色键值" name="roleKey">
+            <a-form-item  :label="t('views.system.role.roleKey')" name="roleKey">
               {{ modalState.from.roleKey }}
             </a-form-item>
           </a-col>
         </a-row>
-        <a-form-item label="角色说明" name="remark">
+        <a-form-item  :label="t('views.system.role.roleMark')" name="remark">
           {{ modalState.from.remark }}
         </a-form-item>
 
-        <a-form-item label="权限范围" name="dataScope">
+        <a-form-item :label="t('views.system.role.preScope')" name="dataScope">
           <a-select
             v-model:value="modalState.from.dataScope"
             default-value="5"
-            placeholder="权限范围"
             :options="dataScopeOptions"
           >
           </a-select>
         </a-form-item>
         <a-form-item
-          label="数据权限"
+          :label="t('views.system.role.dataPer')"
           name="deptCheckStrictly"
           v-show="modalState.from.dataScope === '2'"
         >
@@ -1239,21 +1293,21 @@ onMounted(() => {
               :checked="modalState.deptTree.expandedKeys.length > 0"
               @change="(e:any) => fnModalExpandedKeys(e.target.checked, 'dept')"
             >
-              展开/折叠
+              {{t('views.system.role.openSwitch')}}
             </a-checkbox>
             <a-checkbox
               id="dept_2"
               :checked="modalState.from.deptIds.length > 0"
               @change="(e:any) => fnModalCheckedKeys(e.target.checked, 'dept')"
             >
-              全选/全不选
+            {{t('views.system.role.selAllSwitch')}}
             </a-checkbox>
             <a-checkbox
               id="dept_1"
               :checked="modalState.from.deptCheckStrictly === '1'"
               @change="(e:any) => fnModalCheckStrictly(e.target.checked, 'dept')"
             >
-              父子联动
+            {{t('views.system.role.relationSwitch')}}
             </a-checkbox>
           </a-space>
           <a-tree