diff --git a/src/main/java/com/xuxd/kafka/console/beans/dto/SysRoleDTO.java b/src/main/java/com/xuxd/kafka/console/beans/dto/SysRoleDTO.java
index 9ee1fc6..f07b384 100644
--- a/src/main/java/com/xuxd/kafka/console/beans/dto/SysRoleDTO.java
+++ b/src/main/java/com/xuxd/kafka/console/beans/dto/SysRoleDTO.java
@@ -10,6 +10,8 @@ import lombok.Data;
 @Data
 public class SysRoleDTO {
 
+    private Long id;
+
     private String roleName;
 
     private String description;
@@ -18,6 +20,7 @@ public class SysRoleDTO {
 
     public SysRoleDO toDO() {
         SysRoleDO roleDO = new SysRoleDO();
+        roleDO.setId(this.id);
         roleDO.setRoleName(this.roleName);
         roleDO.setDescription(this.description);
         roleDO.setPermissionIds(this.permissionIds);
diff --git a/src/main/java/com/xuxd/kafka/console/beans/dto/SysUserDTO.java b/src/main/java/com/xuxd/kafka/console/beans/dto/SysUserDTO.java
index 2c8be8e..79beb7c 100644
--- a/src/main/java/com/xuxd/kafka/console/beans/dto/SysUserDTO.java
+++ b/src/main/java/com/xuxd/kafka/console/beans/dto/SysUserDTO.java
@@ -10,6 +10,8 @@ import lombok.Data;
 @Data
 public class SysUserDTO {
 
+    private Long id;
+
     private String username;
 
     private String password;
@@ -20,6 +22,7 @@ public class SysUserDTO {
 
     public SysUserDO toDO() {
         SysUserDO userDO = new SysUserDO();
+        userDO.setId(this.id);
         userDO.setUsername(this.username);
         userDO.setPassword(this.password);
         userDO.setSalt(this.salt);
diff --git a/src/main/java/com/xuxd/kafka/console/beans/vo/SysPermissionVO.java b/src/main/java/com/xuxd/kafka/console/beans/vo/SysPermissionVO.java
index 1c7eb92..5655b2e 100644
--- a/src/main/java/com/xuxd/kafka/console/beans/vo/SysPermissionVO.java
+++ b/src/main/java/com/xuxd/kafka/console/beans/vo/SysPermissionVO.java
@@ -12,6 +12,8 @@ import java.util.List;
 @Data
 public class SysPermissionVO {
 
+    private Long id;
+
     private String name;
 
     /**
@@ -35,6 +37,7 @@ public class SysPermissionVO {
         permissionVO.setName(permissionDO.getName());
         permissionVO.setParentId(permissionDO.getParentId());
         permissionVO.setKey(permissionDO.getId());
+        permissionVO.setId(permissionDO.getId());
         return permissionVO;
     }
 }
diff --git a/src/main/java/com/xuxd/kafka/console/beans/vo/SysRoleVO.java b/src/main/java/com/xuxd/kafka/console/beans/vo/SysRoleVO.java
index 3bcc0a7..a56a4de 100644
--- a/src/main/java/com/xuxd/kafka/console/beans/vo/SysRoleVO.java
+++ b/src/main/java/com/xuxd/kafka/console/beans/vo/SysRoleVO.java
@@ -2,6 +2,11 @@ package com.xuxd.kafka.console.beans.vo;
 
 import com.xuxd.kafka.console.beans.dos.SysRoleDO;
 import lombok.Data;
+import org.apache.commons.lang3.StringUtils;
+
+import java.util.Arrays;
+import java.util.List;
+import java.util.stream.Collectors;
 
 /**
  * @author: xuxd
@@ -10,17 +15,24 @@ import lombok.Data;
 @Data
 public class SysRoleVO {
 
+    private Long id;
+
     private String roleName;
 
     private String description;
 
-    private String permissionIds;
+    private List<Long> permissionIds;
 
     public static SysRoleVO from(SysRoleDO roleDO) {
         SysRoleVO roleVO = new SysRoleVO();
+        roleVO.setId(roleDO.getId());
         roleVO.setRoleName(roleDO.getRoleName());
         roleVO.setDescription(roleDO.getDescription());
-        roleVO.setPermissionIds(roleDO.getPermissionIds());
+        if (StringUtils.isNotEmpty(roleDO.getPermissionIds())) {
+            List<Long> list = Arrays.stream(roleDO.getPermissionIds().split(",")).
+                    filter(StringUtils::isNotEmpty).map(e -> Long.valueOf(e.trim())).collect(Collectors.toList());
+            roleVO.setPermissionIds(list);
+        }
         return roleVO;
     }
 }
diff --git a/src/main/java/com/xuxd/kafka/console/controller/UserManageController.java b/src/main/java/com/xuxd/kafka/console/controller/UserManageController.java
index c7e6424..83e683d 100644
--- a/src/main/java/com/xuxd/kafka/console/controller/UserManageController.java
+++ b/src/main/java/com/xuxd/kafka/console/controller/UserManageController.java
@@ -39,6 +39,12 @@ public class UserManageController {
         return userManageService.addPermission(permissionDTO);
     }
 
+    @ControllerLog("更新角色")
+    @PutMapping("/role")
+    public Object updateRole(@RequestBody SysRoleDTO roleDTO) {
+        return userManageService.updateRole(roleDTO);
+    }
+
     @GetMapping("/role")
     public Object selectRole() {
         return userManageService.selectRole();
diff --git a/src/main/java/com/xuxd/kafka/console/service/UserManageService.java b/src/main/java/com/xuxd/kafka/console/service/UserManageService.java
index 1ae4a8b..36b0c13 100644
--- a/src/main/java/com/xuxd/kafka/console/service/UserManageService.java
+++ b/src/main/java/com/xuxd/kafka/console/service/UserManageService.java
@@ -25,4 +25,8 @@ public interface UserManageService {
     ResponseData selectRole();
 
     ResponseData selectPermission();
+
+    ResponseData updateUser(SysUserDTO userDTO);
+
+    ResponseData updateRole(SysRoleDTO roleDTO);
 }
diff --git a/src/main/java/com/xuxd/kafka/console/service/impl/UserManageServiceImpl.java b/src/main/java/com/xuxd/kafka/console/service/impl/UserManageServiceImpl.java
index 29615ba..1ffbba0 100644
--- a/src/main/java/com/xuxd/kafka/console/service/impl/UserManageServiceImpl.java
+++ b/src/main/java/com/xuxd/kafka/console/service/impl/UserManageServiceImpl.java
@@ -120,4 +120,16 @@ public class UserManageServiceImpl implements UserManageService {
         }
         return ResponseData.create().data(vos).success();
     }
+
+    @Override
+    public ResponseData updateUser(SysUserDTO userDTO) {
+        userMapper.updateById(userDTO.toDO());
+        return ResponseData.create().success();
+    }
+
+    @Override
+    public ResponseData updateRole(SysRoleDTO roleDTO) {
+        roleMapper.updateById(roleDTO.toDO());
+        return ResponseData.create().success();
+    }
 }
diff --git a/ui/src/views/user/Role.vue b/ui/src/views/user/Role.vue
index f9267c9..37a86d6 100644
--- a/ui/src/views/user/Role.vue
+++ b/ui/src/views/user/Role.vue
@@ -66,7 +66,45 @@
                   />
                 </a-form-item>
 
-                <a-form-item label="拥有权限"> </a-form-item>
+                <a-form-item label="权限配置">
+                  <div
+                    v-for="(menuPermission, index) in selectedPermissions"
+                    :key="index"
+                  >
+                    <a-row>
+                      <a-col :span="18" :style="{ fontWeight: 'bold' }"
+                        >{{ menuPermission.name }}
+                      </a-col>
+                      <a-col :span="6" :style="{ textAlign: 'right' }">
+                        <!--                        <a-checkbox :checked="menuPermission.checked">-->
+                        <!--                          可见</a-checkbox-->
+                        <!--                        >-->
+                        <a-switch v-model="menuPermission.checked" />
+                      </a-col>
+                    </a-row>
+                    <a-divider type="horizontal" :style="{ margin: '0px' }" />
+                    <a-row
+                      :gutter="16"
+                      v-for="(
+                        checkboxPermission, index2
+                      ) in menuPermission.children"
+                      :key="index2"
+                    >
+                      <a-col :xl="3" :lg="24">
+                        {{ checkboxPermission.name }}：
+                      </a-col>
+                      <a-col :xl="18" :lg="24">
+                        <a-checkbox-group
+                          :options="checkboxPermission.children"
+                          v-model="checkboxPermission.selected"
+                        />
+                      </a-col>
+                      <a-col :span="3" :style="{ textAlign: 'right' }">
+                        <a-checkbox> 全选</a-checkbox>
+                      </a-col>
+                    </a-row>
+                  </div>
+                </a-form-item>
                 <a-form-item>
                   <a-button type="primary" :loading="loading">保存</a-button>
                 </a-form-item>
@@ -101,7 +139,55 @@ export default {
   methods: {
     selected(role) {
       this.selectedRole = Object.assign({}, role);
-      
+      const idSet = this.selectedRole.permissionIds
+        ? new Set(this.selectedRole.permissionIds)
+        : new Set();
+      this.selectedPermissions = [];
+      let recursive = function (e, res) {
+        if (e.children) {
+          const children = e.children;
+          children.forEach((c) => {
+            const child = Object.assign({}, c);
+            child.name = e.name + "-" + c.name;
+            child.label = child.name;
+            child.value = child.id;
+            res.push(child);
+            if (child.children) {
+              recursive(child, res);
+            }
+            delete child.children;
+          });
+        }
+      };
+      // 1 级都是菜单，其它的都分到2级按钮
+      this.permissions.forEach((e) => {
+        const menu = Object.assign({}, e);
+        if (menu.children) {
+          const arr = [];
+          menu.children.forEach((c) => {
+            // 菜单下的按扭，按扭下面还有按扭的话，都合并
+            const btn = Object.assign({}, c);
+            arr.push(btn);
+            if (btn.children) {
+              const self = Object.assign({}, btn);
+              self.name = btn.name;
+              self.label = btn.name;
+              self.value = btn.id;
+              delete self.children;
+              const btnArr = [self];
+              recursive(btn, btnArr);
+              btn.children = btnArr;
+              const selected = btn.children
+                .map((bc) => bc.id)
+                .filter((id) => idSet.has(id));
+              btn.selected = selected || [];
+            }
+          });
+          menu.children = arr;
+          menu.checked = idSet.has(menu.id);
+        }
+        this.selectedPermissions.push(menu);
+      });
     },
     getRoles() {
       this.loading = true;