diff --git a/data/magic-api/api/后台/安全/登录.ms b/data/magic-api/api/后台/安全/登录.ms
index 7b777fe..2fcacb2 100644
--- a/data/magic-api/api/后台/安全/登录.ms
+++ b/data/magic-api/api/后台/安全/登录.ms
@@ -5,7 +5,7 @@
   "groupId" : "1952f25c81084e24b55b11385767dc38",
   "name" : "登录",
   "createTime" : null,
-  "updateTime" : 1642321889536,
+  "updateTime" : 1642773955109,
   "lock" : "0",
   "method" : "POST",
   "path" : "/login",
diff --git a/data/magic-api/api/后台/用户管理/根据用户id获取角色列表.ms b/data/magic-api/api/后台/用户管理/根据用户id获取角色列表.ms
index a57d2a8..2d99d2e 100644
--- a/data/magic-api/api/后台/用户管理/根据用户id获取角色列表.ms
+++ b/data/magic-api/api/后台/用户管理/根据用户id获取角色列表.ms
@@ -5,7 +5,7 @@
   "groupId" : "4f0230049d7e4f39b1e0897cc0f46f9a",
   "name" : "根据用户id获取角色列表",
   "createTime" : null,
-  "updateTime" : 1634730972184,
+  "updateTime" : 1642773983120,
   "lock" : "0",
   "method" : "GET",
   "path" : "/roles",
@@ -23,10 +23,10 @@
     "children" : null
   } ],
   "option" : "[]",
-  "requestBody" : "",
+  "requestBody" : "{\n\n}",
   "headers" : [ ],
   "paths" : [ ],
-  "responseBody" : "{\n    \"code\": 402,\n    \"message\": \"凭证已过期\",\n    \"data\": null,\n    \"timestamp\": 1634729977953,\n    \"executeTime\": null\n}",
+  "responseBody" : "{\n    \"code\": 200,\n    \"message\": \"success\",\n    \"data\": [],\n    \"timestamp\": 1642773977670,\n    \"executeTime\": 2\n}",
   "description" : null,
   "requestBodyDefinition" : null,
   "responseBodyDefinition" : {
@@ -42,7 +42,7 @@
     "expression" : "",
     "children" : [ {
       "name" : "code",
-      "value" : "402",
+      "value" : "200",
       "description" : "",
       "required" : false,
       "dataType" : "Integer",
@@ -54,7 +54,7 @@
       "children" : [ ]
     }, {
       "name" : "message",
-      "value" : "凭证已过期",
+      "value" : "success",
       "description" : "",
       "required" : false,
       "dataType" : "String",
@@ -66,10 +66,10 @@
       "children" : [ ]
     }, {
       "name" : "data",
-      "value" : "null",
+      "value" : "",
       "description" : "",
       "required" : false,
-      "dataType" : "Object",
+      "dataType" : "Array",
       "type" : null,
       "defaultValue" : null,
       "validateType" : "",
@@ -78,7 +78,7 @@
       "children" : [ ]
     }, {
       "name" : "timestamp",
-      "value" : "1634729977953",
+      "value" : "1642773977670",
       "description" : "",
       "required" : false,
       "dataType" : "Long",
@@ -90,7 +90,7 @@
       "children" : [ ]
     }, {
       "name" : "executeTime",
-      "value" : "null",
+      "value" : "2",
       "description" : "",
       "required" : false,
       "dataType" : "Object",
diff --git a/magic-boot-ui/src/views/system/user/user-form.vue b/magic-boot-ui/src/views/system/user/user-form.vue
index baba9d9..73d467e 100644
--- a/magic-boot-ui/src/views/system/user/user-form.vue
+++ b/magic-boot-ui/src/views/system/user/user-form.vue
@@ -1,39 +1,46 @@
-<style>
-.el-input-number .el-input__inner{
-  text-align: left;
-}
-</style>
-
 <template>
-  <el-form ref="dataForm" :inline="true" :rules="rules" :model="temp" label-position="right" label-width="120px">
-    <el-form-item label="登录名称" prop="username">
-      <el-input v-model="temp.username" />
-    </el-form-item>
-    <el-form-item label="姓名/昵称" prop="name">
-      <el-input v-model="temp.name" />
-    </el-form-item>
-    <el-form-item label="密码" prop="password">
-      <el-input v-model="temp.password" type="password" />
-    </el-form-item>
-    <el-form-item label="手机号" prop="phone">
-      <el-input v-model="temp.phone" />
-    </el-form-item>
-    <el-form-item label="组织机构" prop="officeId">
-      <treeselect v-model="temp.officeId" :options="officeTree" :show-count="true" placeholder="请选择组织机构" />
-    </el-form-item>
-    <el-form-item label="禁止登录" prop="isLogin">
-      <template>
-        <el-switch
-          v-model="temp.isLogin"
-          :active-value="1"
-          :inactive-value="0"
-        />
-      </template>
-    </el-form-item>
-    <el-form-item label="选择角色">
-      <el-checkbox-group v-model="selectRoles" size="small">
-        <el-checkbox v-for="role in roles" :key="role.id" :label="role.id">{{ role.name }}</el-checkbox>
-      </el-checkbox-group>
+  <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="80px">
+    <el-row :gutter="24">
+      <el-col :span="12">
+        <el-form-item label="登录名称" prop="username">
+          <el-input v-model="temp.username" autocomplete="new-password" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="姓名/昵称" prop="name">
+          <el-input v-model="temp.name" autocomplete="new-password" />
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row :gutter="24">
+      <el-col :span="12">
+        <el-form-item label="密码" prop="password">
+          <el-input v-model="temp.password" type="password" autocomplete="new-password" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="手机号" prop="phone">
+          <el-input v-model="temp.phone" />
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row :gutter="24">
+      <el-col :span="12">
+        <el-form-item label="组织机构" prop="officeId">
+          <treeselect v-model="temp.officeId" :options="officeTree" :show-count="true" placeholder="请选择组织机构" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="选择角色" prop="roles">
+          <pd-select v-model="temp.roles" url="role/list?size=999999" labelField="name" valueField="id" :el="{ multiple: true }" />
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-form-item label="登录状态" prop="isLogin">
+      <el-radio-group v-model="temp.isLogin" size="small">
+        <el-radio-button label="0">有效</el-radio-button>
+        <el-radio-button label="1">锁定</el-radio-button>
+      </el-radio-group>
     </el-form-item>
   </el-form>
 </template>
@@ -54,10 +61,10 @@ export default {
   data() {
     return {
       rules: {
-        username: [{ required: true, message: '请输入登录名称', trigger: 'change' }]
+        username: [{ required: true, message: '请输入登录名称', trigger: 'change' }],
+        roles: [{ required: true, message: '请选择角色', trigger: 'change' }],
+        officeId: [{ required: true, message: '请选择组织机构', trigger: 'change' }]
       },
-      roles: [],
-      selectRoles: [],
       temp: this.getTemp(),
       officeTree: []
     }
@@ -67,10 +74,6 @@ export default {
       this.officeTree = res.data.list
       this.$treeTable.deleteEmptyChildren(this.officeTree)
     })
-    this.$get('role/list?size=999999').then(response => {
-      const { data } = response
-      this.roles = data.list
-    })
   },
   methods: {
     getTemp() {
@@ -81,7 +84,7 @@ export default {
         password: '',
         phone: '',
         isLogin: 0,
-        roles: [],
+        roles: '',
         officeId: null
       }
     },
@@ -94,7 +97,6 @@ export default {
     save() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
-          this.temp.roles = this.selectRoles.join(',')
           this.$request({
             url: 'user/save',
             method: 'post',
@@ -120,7 +122,7 @@ export default {
       }
       this.$get('user/roles', { userId: this.temp.id }).then((response) => {
         const { data } = response
-        this.selectRoles = data
+        this.temp.roles = data.join(',')
       })
     }
   }
diff --git a/magic-boot-ui/src/views/system/user/user-list.vue b/magic-boot-ui/src/views/system/user/user-list.vue
index b531207..0db7aa9 100644
--- a/magic-boot-ui/src/views/system/user/user-list.vue
+++ b/magic-boot-ui/src/views/system/user/user-list.vue
@@ -1,6 +1,7 @@
 <style scoped>
 .left{
-  width: 20%;
+  width: calc(20% - 20px);
+  margin-right: 20px;
   float: left;
 }
 .right{