feat: 优化部分样式，角色管理国际化完成

src/local/system.js

@@ -20,4 +20,10 @@ export default {
     'menu.menuUrlRequired': ['请输入Url', 'URL Is Required'],
     'menu.menuTypeNameZhRequired': ['请输入中文名称', '@:menu.chineseName Is Required'],
     'menu.menuTypeNameEnRequired': ['请输入英文名称', '@:menu.englishName Is Required'],
+    'role.roleName': ['角色名称', 'Role Name'],
+    'role.roleCode': ['角色编码', 'Role Code'],
+    'role.roleRemark': ['角色说明', 'Remark'],
+    'role.roleNameInput': ['请输入 @:role.roleName', 'Please Input @:role.roleName'],
+    'role.roleCodeInput': ['请输入 @:role.roleCode', 'Please Input @:role.roleCode'],
+    'role.menuPermissions': ['菜单权限', 'Menu Permissions'],
 };

src/pages/frame/components/header/LayoutTopHeader.vue

@@ -100,12 +100,8 @@ export default {
         }
     }
     .admin-header-wide {
-        padding-left: 24px;
-        &.head.fixed {
-            max-width: 1400px;
-            margin: auto;
-            padding-left: 0;
-        }
+        padding: 0 24px;
+
         &.side {
             padding-right: 12px;
         }

src/pages/frame/layouts/AdminLayout.vue

@@ -50,7 +50,7 @@ import LayoutTopHeader from '../components/header/LayoutTopHeader.vue';
 import Drawer from '@/components/tool/Drawer.vue';
 import SideMenu from '@/components/menu/SideMenu.vue';
 import Setting from '../components/setting/Setting.vue';
-import { mapState, mapMutations, mapGetters } from 'vuex';
+import { mapState, mapMutations } from 'vuex';
 import { convertListToTree, getUserInfo } from '@/utils';
 
 // const minHeight = window.innerHeight - 64 - 122

src/pages/system/role/RoleManagement.vue

@@ -3,9 +3,9 @@
         <template #drawer="drawer">
             <Form v-bind="drawer" />
         </template>
-        <a-table-column title="角色名称" data-index="roleName" />
-        <a-table-column title="角色编码" data-index="roleCode" />
-        <a-table-column title="角色说明" data-index="remark" />
+        <a-table-column :title="$t('role.roleName')" data-index="roleName" />
+        <a-table-column :title="$t('role.roleCode')" data-index="roleCode" />
+        <a-table-column :title="$t('role.roleRemark')" data-index="remark" />
     </Table>
 </template>
 

src/pages/system/role/form.vue

 <template>
-    <Wraper :hidden="hidden" :refresh="refresh" :onOk="sumit">
-        <a-form-model layout="vertical" :model="form" :rules="rules" ref="DrawerForm">
-            <a-form-model-item label="角色名称">
-                <a-input v-model="form.roleName" :disabled="isView" />
+    <Wraper :hidden="hidden" :refresh="refresh" :onOk="submit">
+        <a-form-model layout="vertical" :model="form" :rules="rules" ref="form">
+            <a-form-model-item :label="$t('role.roleName')" prop="roleName">
+                <a-input v-model="form.roleName" :placeholder="$t('input.placeholder')" />
             </a-form-model-item>
-            <a-form-model-item label="角色编码">
-                <a-input v-model="form.roleCode" :disabled="isView" />
+            <a-form-model-item :label="$t('role.roleCode')" prop="roleCode">
+                <a-input v-model="form.roleCode" :placeholder="$t('input.placeholder')" />
             </a-form-model-item>
-            <a-form-model-item label="角色说明" prop="remark">
-                <a-input v-model="form.remark" :disabled="isView" />
+            <a-form-model-item :label="$t('role.roleRemark')" prop="remark">
+                <a-input v-model="form.remark" :placeholder="$t('input.placeholder')" />
             </a-form-model-item>
 
-            <a-form-model-item label="菜单权限">
+            <a-form-model-item :label="$t('role.menuPermissions')">
                 <MenuTree
                     v-model="checkedKeys"
                     :defaultCheckedKeys="defaultCheckedKeys"
                     showMenu
                     ref="menuTree"
-                    :disabled="isView"
                 />
             </a-form-model-item>
         </a-form-model>
@@ -27,16 +26,18 @@
 <script>
 import MenuTree from '@/components/menu_tree/index.vue';
 import { addRoleApi, getRoleApi, updateRoleApi } from '@/api';
-import FormMixin from '@/components/FormMixin';
 import { WraperMixins } from '@/components/table';
 
 export default {
-    mixins: [FormMixin, WraperMixins],
+    mixins: [WraperMixins],
     components: { MenuTree },
     data() {
         return {
             form: {},
-            rules: {},
+            rules: {
+                roleName: [{ required: true, message: this.$t('role.roleNameInput') }],
+                roleCode: [{ required: true, message: this.$t('role.roleCodeInput') }],
+            },
             checkedKeys: [],
             defaultCheckedKeys: [],
         };
@@ -49,11 +50,12 @@ export default {
 
     mounted() {
         if (this.type) {
-            this.getData(this.row.rowId);
+            this.getData(this.row.roleId);
         }
     },
     methods: {
-        submit() {
+        async submit() {
+            await this.$refs.form.validate();
             const query = {
                 ...this.form,
                 authorityList: this.$refs['menuTree'].get().map((i) => ({