diff --git a/src/view/role/modal/edit.vue b/src/view/role/modal/edit.vue
index 5e05f13..efe9838 100644
--- a/src/view/role/modal/edit.vue
+++ b/src/view/role/modal/edit.vue
@@ -8,32 +8,43 @@
     @cancel="cancel"
   >
     <a-form
-       ref="formRef"
+      ref="formRef"
       :model="formState"
       :rules="formRules"
-      :label-col="labelCol"
-      :wrapper-col="wrapperCol"
+      layout="vertical"
     >
-      <a-form-item ref="name" label="名称" name="name">
-        <a-input v-model:value="formState.name" />
-      </a-form-item>
-      <a-form-item ref="code" label="标识" name="code">
-        <a-input v-model:value="formState.code" />
-      </a-form-item>
-      <a-form-item ref="sort" label="排序" name="sort">
-        <a-input-number v-model:value="formState.sort" />
-      </a-form-item>
-      <a-form-item label="状态" name="enable">
-        <a-switch v-model:checked="formState.enable" />
-      </a-form-item>
-      <a-form-item label="备注" name="remark">
-        <a-textarea v-model:value="formState.remark" />
-      </a-form-item>
+      <a-row :gutter="[16, 0]">
+        <a-col :span="12">
+          <a-form-item ref="name" label="名称" name="name">
+            <a-input v-model:value="formState.name" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item ref="code" label="标识" name="code">
+            <a-input v-model:value="formState.code" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item ref="sort" label="排序" name="sort">
+            <a-input-number style="width: 100%" v-model:value="formState.sort" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="状态" name="enable">
+            <a-switch v-model:checked="formState.enable" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="24">
+          <a-form-item label="备注" name="remark">
+            <a-textarea v-model:value="formState.remark" />
+          </a-form-item>
+        </a-col>
+      </a-row>
     </a-form>
   </a-modal>
 </template>
 <script>
-import { message } from '@hwork/ant-design-vue';
+import { message } from "@hwork/ant-design-vue";
 import { edit } from "@/api/module/role";
 import { defineComponent, reactive, ref, toRaw, watch } from "vue";
 export default defineComponent({
@@ -43,51 +54,46 @@ export default defineComponent({
     },
     record: {
       type: Object,
-    }
+    },
   },
   emit: ["close"],
   setup(props, context) {
-
     const formRef = ref();
-    
+
     const formState = reactive({});
 
     const formRules = {
-      name: [
-        { required: true, message: '请输入名称', trigger: 'blur'},
-      ],
-      code: [
-        { required: true, message: '请输入标识', trigger: 'blur'},
-      ]
+      name: [{ required: true, message: "请输入名称", trigger: "blur" }],
+      code: [{ required: true, message: "请输入标识", trigger: "blur" }],
     };
 
-    watch(props,(props)=>{
+    watch(props, (props) => {
       formState.id = props.record.id;
       formState.name = props.record.name;
       formState.code = props.record.code;
       formState.sort = props.record.sort;
       formState.enable = props.record.enable;
       formState.remark = props.record.remark;
-    })
+    });
 
     const submit = (e) => {
       formRef.value
         .validate()
         .then(() => {
-          edit(toRaw(formState)).then((response)=>{
-              if(response.success){
-                message.success({ content: '保存成功', duration: 1 }).then(()=>{
-                  cancel();
-                });
-              }else{
-                message.success({ content: '保存失败', duration: 1 }).then(()=>{
-                  cancel();
-                });
-              }
+          edit(toRaw(formState)).then((response) => {
+            if (response.success) {
+              message.success({ content: "保存成功", duration: 1 }).then(() => {
+                cancel();
+              });
+            } else {
+              message.success({ content: "保存失败", duration: 1 }).then(() => {
+                cancel();
+              });
+            }
           });
         })
-        .catch(error => {
-          console.log('error', error);
+        .catch((error) => {
+          console.log("error", error);
         });
     };
 
@@ -102,10 +108,10 @@ export default defineComponent({
       formRef,
       formState,
       formRules,
-      
+
       labelCol: { span: 6 },
       wrapperCol: { span: 18 },
     };
   },
 });
-</script>
\ No newline at end of file
+</script>
diff --git a/src/view/role/modal/give.vue b/src/view/role/modal/give.vue
index 10f8801..f937850 100644
--- a/src/view/role/modal/give.vue
+++ b/src/view/role/modal/give.vue
@@ -1,12 +1,5 @@
 <template>
-  <a-modal
-    :open="visible"
-    title="权限配置"
-    cancelText="取消"
-    okText="保存"
-    @ok="submit"
-    @cancel="cancel"
-  >
+  <a-drawer :open="visible" title="权限配置" style="padding: 0 8px">
     <a-tabs v-model:activeKey="state.active">
       <a-tab-pane key="1" tab="菜单权限">
         <a-tree
@@ -23,11 +16,13 @@
           <a-select-option value="ALL">全部</a-select-option>
           <a-select-option value="SELF">仅自己</a-select-option>
           <a-select-option value="DEPT">所在部门</a-select-option>
-          <a-select-option value="DEPT_CHILD">所在部门及下级部门</a-select-option>
+          <a-select-option value="DEPT_CHILD"
+            >所在部门及下级部门</a-select-option
+          >
           <a-select-option value="CUSTOM">自定义数据</a-select-option>
         </a-select>
-        <br/>
-        <br/>
+        <br />
+        <br />
         <a-tree
           checkable
           show-line="true"
@@ -38,7 +33,11 @@
         />
       </a-tab-pane>
     </a-tabs>
-  </a-modal>
+    <template #footer>
+      <a-button @click="cancel">取消</a-button>
+      <a-button type="primary" @click="submit">保存</a-button>
+    </template>
+  </a-drawer>
 </template>
 <script>
 import { message } from "@hwork/ant-design-vue";
@@ -58,7 +57,6 @@ export default defineComponent({
   },
   emit: ["close"],
   setup(props, context) {
-
     const scope = ref("ALL");
 
     const state = reactive({
@@ -66,8 +64,8 @@ export default defineComponent({
       powers: [],
       active: "1",
       showDept: false,
-      checkedPowerIds: {checked:[]},
-      checkedDeptIds: {checked:[]},
+      checkedPowerIds: { checked: [] },
+      checkedDeptIds: { checked: [] },
       powerReplaceFields: { key: "id" },
       deptReplaceFields: { key: "id", title: "name" },
     });
@@ -86,13 +84,13 @@ export default defineComponent({
 
     /// 监听数据
     watch(scope, (scope) => {
-      if(scope === "CUSTOM") {
+      if (scope === "CUSTOM") {
         state.showDept = true;
       } else {
         state.checkedDeptIds = [];
         state.showDept = false;
       }
-    })
+    });
 
     /// 监听数据
     watch(props, (props) => {
@@ -104,12 +102,12 @@ export default defineComponent({
         state.checkedPowerIds = powerIds;
       });
       let deptIds = [];
-      dept({ roleId: props.record.id}).then((response) => {
+      dept({ roleId: props.record.id }).then((response) => {
         response.data.forEach((element) => {
           deptIds.push(element.id);
-        })
+        });
         state.checkedDeptIds = deptIds;
-      })
+      });
       scope.value = props.record.scope;
     });
 
@@ -117,23 +115,26 @@ export default defineComponent({
     loadDept();
 
     const submit = (e) => {
-      give({ 
+      give({
         scope: scope.value,
         roleId: props.record.id,
-        powerIds: state.checkedPowerIds.checked?state.checkedPowerIds.checked:state.checkedPowerIds,
-        deptIds: state.checkedDeptIds.checked?state.checkedDeptIds.checked:state.checkedDeptIds }).then(
-        (response) => {
-          if (response.success) {
-            message.success({ content: "保存成功", duration: 1 }).then(() => {
-              cancel();
-            });
-          } else {
-            message.error({ content: "保存失败", duration: 1 }).then(() => {
-              cancel();
-            });
-          }
+        powerIds: state.checkedPowerIds.checked
+          ? state.checkedPowerIds.checked
+          : state.checkedPowerIds,
+        deptIds: state.checkedDeptIds.checked
+          ? state.checkedDeptIds.checked
+          : state.checkedDeptIds,
+      }).then((response) => {
+        if (response.success) {
+          message.success({ content: "保存成功", duration: 1 }).then(() => {
+            cancel();
+          });
+        } else {
+          message.error({ content: "保存失败", duration: 1 }).then(() => {
+            cancel();
+          });
         }
-      );
+      });
     };
 
     const cancel = (e) => {
@@ -145,8 +146,8 @@ export default defineComponent({
       state,
       submit,
       cancel,
-      SHOW_PARENT
+      SHOW_PARENT,
     };
   },
 });
-</script>
\ No newline at end of file
+</script>
diff --git a/src/view/role/modal/info.vue b/src/view/role/modal/info.vue
index d76680e..91e824b 100644
--- a/src/view/role/modal/info.vue
+++ b/src/view/role/modal/info.vue
@@ -8,27 +8,38 @@
     @cancel="cancel"
   >
     <a-form
-       ref="formRef"
+      ref="formRef"
       :model="formState"
       :rules="formRules"
-      :label-col="labelCol"
-      :wrapper-col="wrapperCol"
+      layout="vertical"
     >
-      <a-form-item ref="name" label="名称" name="name">
-        <a-input v-model:value="formState.name" />
-      </a-form-item>
-      <a-form-item ref="code" label="标识" name="code">
-        <a-input v-model:value="formState.code" />
-      </a-form-item>
-      <a-form-item ref="sort" label="排序" name="sort">
-        <a-input-number v-model:value="formState.sort" />
-      </a-form-item>
-      <a-form-item label="状态" name="enable">
-        <a-switch v-model:checked="formState.enable" />
-      </a-form-item>
-      <a-form-item label="备注" name="remark">
-        <a-textarea v-model:value="formState.remark" />
-      </a-form-item>
+      <a-row :gutter="[16, 0]">
+        <a-col :span="12">
+          <a-form-item ref="name" label="名称" name="name">
+            <a-input v-model:value="formState.name" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item ref="code" label="标识" name="code">
+            <a-input v-model:value="formState.code" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item ref="sort" label="排序" name="sort">
+            <a-input-number style="width: 100%" v-model:value="formState.sort" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="状态" name="enable">
+            <a-switch v-model:checked="formState.enable" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="24">
+          <a-form-item label="备注" name="remark">
+            <a-textarea v-model:value="formState.remark" />
+          </a-form-item>
+        </a-col>
+      </a-row>
     </a-form>
   </a-modal>
 </template>
@@ -41,25 +52,24 @@ export default defineComponent({
     },
     record: {
       type: Object,
-    }
+    },
   },
   emit: ["close"],
   setup(props, context) {
-
     const formRef = ref();
-    
+
     const formState = reactive({});
 
     const formRules = {};
 
-    watch(props,(props)=>{
+    watch(props, (props) => {
       formState.id = props.record.id;
       formState.name = props.record.name;
       formState.code = props.record.code;
       formState.sort = props.record.sort;
       formState.enable = props.record.enable;
       formState.remark = props.record.remark;
-    })
+    });
 
     const cancel = (e) => {
       formRef.value.resetFields();
@@ -77,10 +87,10 @@ export default defineComponent({
       formRef,
       formState,
       formRules,
-      
+
       labelCol: { span: 6 },
       wrapperCol: { span: 18 },
     };
   },
 });
-</script>
\ No newline at end of file
+</script>
diff --git a/src/view/role/modal/save.vue b/src/view/role/modal/save.vue
index 1cf79f0..e2aae16 100644
--- a/src/view/role/modal/save.vue
+++ b/src/view/role/modal/save.vue
@@ -8,32 +8,43 @@
     @cancel="cancel"
   >
     <a-form
-       ref="formRef"
+      ref="formRef"
       :model="formState"
       :rules="formRules"
-      :label-col="labelCol"
-      :wrapper-col="wrapperCol"
+      layout="vertical"
     >
-      <a-form-item ref="name" label="名称" name="name">
-        <a-input v-model:value="formState.name" />
-      </a-form-item>
-      <a-form-item ref="code" label="标识" name="code">
-        <a-input v-model:value="formState.code" />
-      </a-form-item>
-      <a-form-item ref="sort" label="排序" name="sort">
-        <a-input-number v-model:value="formState.sort" />
-      </a-form-item>
-      <a-form-item label="状态" name="enable">
-        <a-switch v-model:checked="formState.enable" />
-      </a-form-item>
-      <a-form-item label="备注" name="remark">
-        <a-textarea v-model:value="formState.remark" />
-      </a-form-item>
+      <a-row :gutter="[16, 0]">
+        <a-col :span="12">
+          <a-form-item ref="name" label="名称" name="name">
+            <a-input v-model:value="formState.name" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item ref="code" label="标识" name="code">
+            <a-input v-model:value="formState.code" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item ref="sort" label="排序" name="sort">
+            <a-input-number style="width: 100%" v-model:value="formState.sort" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="状态" name="enable">
+            <a-switch v-model:checked="formState.enable" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="24">
+          <a-form-item label="备注" name="remark">
+            <a-textarea v-model:value="formState.remark" />
+          </a-form-item>
+        </a-col>
+      </a-row>
     </a-form>
   </a-modal>
 </template>
 <script>
-import { message } from '@hwork/ant-design-vue';
+import { message } from "@hwork/ant-design-vue";
 import { save } from "@/api/module/role";
 import { defineComponent, reactive, ref, toRaw } from "vue";
 export default defineComponent({
@@ -44,41 +55,36 @@ export default defineComponent({
   },
   emit: ["close"],
   setup(props, context) {
-
     const formRef = ref();
-    
+
     const formState = reactive({
       sort: 0,
       enable: "true",
     });
 
     const formRules = {
-      name: [
-        { required: true, message: '请输入名称', trigger: 'blur'},
-      ],
-      code: [
-        { required: true, message: '请输入标识', trigger: 'blur'},
-      ]
+      name: [{ required: true, message: "请输入名称", trigger: "blur" }],
+      code: [{ required: true, message: "请输入标识", trigger: "blur" }],
     };
 
     const submit = (e) => {
       formRef.value
         .validate()
         .then(() => {
-          save(toRaw(formState)).then((response)=>{
-              if(response.success){
-                message.success({ content: '保存成功', duration: 1 }).then(()=>{
-                  cancel();
-                });
-              }else{
-                message.success({ content: '保存失败', duration: 1 }).then(()=>{
-                  cancel();
-                });
-              }
+          save(toRaw(formState)).then((response) => {
+            if (response.success) {
+              message.success({ content: "保存成功", duration: 1 }).then(() => {
+                cancel();
+              });
+            } else {
+              message.success({ content: "保存失败", duration: 1 }).then(() => {
+                cancel();
+              });
+            }
           });
         })
-        .catch(error => {
-          console.log('error', error);
+        .catch((error) => {
+          console.log("error", error);
         });
     };
 
@@ -93,10 +99,10 @@ export default defineComponent({
       formRef,
       formState,
       formRules,
-      
+
       labelCol: { span: 6 },
       wrapperCol: { span: 18 },
     };
   },
 });
-</script>
\ No newline at end of file
+</script>