diff --git a/Pinnacle/src/main/java/com/cfive/pinnacle/controller/GroupController.java b/Pinnacle/src/main/java/com/cfive/pinnacle/controller/GroupController.java
index 3a096d8..48cf758 100644
--- a/Pinnacle/src/main/java/com/cfive/pinnacle/controller/GroupController.java
+++ b/Pinnacle/src/main/java/com/cfive/pinnacle/controller/GroupController.java
@@ -1,7 +1,15 @@
 package com.cfive.pinnacle.controller;
 
-import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.RestController;
+import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
+import com.cfive.pinnacle.entity.Group;
+import com.cfive.pinnacle.entity.common.ResponseCode;
+import com.cfive.pinnacle.entity.common.ResponseResult;
+import com.cfive.pinnacle.service.IGroupService;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.util.StringUtils;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.List;
 
 /**
  * <p>
@@ -14,5 +22,51 @@ import org.springframework.web.bind.annotation.RestController;
 @RestController
 @RequestMapping("/group")
 public class GroupController {
+    private IGroupService groupService;
 
+    @Autowired
+    public void setGroupService(IGroupService groupService) {
+        this.groupService = groupService;
+    }
+
+    @GetMapping
+    public ResponseResult getAllGroup() {
+        List<Group> groups = groupService.getAllGroup();
+        return ResponseResult.build(ResponseCode.DATABASE_SELECT_OK, "success", groups);
+    }
+
+    @PostMapping
+    public ResponseResult addGroup(@RequestBody Group group) {
+        if (!StringUtils.hasText(group.getName())) {
+            return ResponseResult.build(ResponseCode.DATABASE_SAVE_ERROR, "Name cannot be empty", null);
+        }
+        if (groupService.addGroup(group)) {
+            return ResponseResult.build(ResponseCode.DATABASE_SAVE_OK, "success", null);
+        } else {
+            return ResponseResult.build(ResponseCode.DATABASE_SAVE_ERROR, "error", null);
+        }
+    }
+
+    @DeleteMapping("/{id}")
+    public ResponseResult deleteGroup(@PathVariable Long id) {
+        LambdaQueryWrapper<Group> wrapper = new LambdaQueryWrapper<>();
+        wrapper.eq(Group::getId, id);
+        if (groupService.remove(wrapper)) {
+            return ResponseResult.build(ResponseCode.DATABASE_DELETE_OK, "success", null);
+        } else {
+            return ResponseResult.build(ResponseCode.DATABASE_DELETE_ERROR, "error", null);
+        }
+    }
+
+    @PutMapping
+    public ResponseResult modifyGroup(@RequestBody Group group) {
+        if (!StringUtils.hasText(group.getName())) {
+            return ResponseResult.build(ResponseCode.DATABASE_UPDATE_ERROR, "Name cannot be empty", null);
+        }
+        if (groupService.modifyGroup(group)) {
+            return ResponseResult.build(ResponseCode.DATABASE_UPDATE_OK, "success", null);
+        } else {
+            return ResponseResult.build(ResponseCode.DATABASE_UPDATE_ERROR, "error", null);
+        }
+    }
 }
diff --git a/Pinnacle/src/main/java/com/cfive/pinnacle/entity/Group.java b/Pinnacle/src/main/java/com/cfive/pinnacle/entity/Group.java
index 1c64298..2b4ada3 100644
--- a/Pinnacle/src/main/java/com/cfive/pinnacle/entity/Group.java
+++ b/Pinnacle/src/main/java/com/cfive/pinnacle/entity/Group.java
@@ -8,6 +8,7 @@ import com.baomidou.mybatisplus.annotation.Version;
 
 import java.io.Serial;
 import java.io.Serializable;
+import java.util.List;
 
 import com.fasterxml.jackson.databind.annotation.JsonSerialize;
 import com.fasterxml.jackson.databind.ser.std.ToStringSerializer;
@@ -47,4 +48,7 @@ public class Group implements Serializable {
     @TableField("version")
     @Version
     private Integer version;
+
+    @TableField(exist = false)
+    private List<Role> roles;
 }
diff --git a/Pinnacle/src/main/java/com/cfive/pinnacle/mapper/GroupMapper.java b/Pinnacle/src/main/java/com/cfive/pinnacle/mapper/GroupMapper.java
index 0811e1c..938594c 100644
--- a/Pinnacle/src/main/java/com/cfive/pinnacle/mapper/GroupMapper.java
+++ b/Pinnacle/src/main/java/com/cfive/pinnacle/mapper/GroupMapper.java
@@ -3,6 +3,9 @@ package com.cfive.pinnacle.mapper;
 import com.cfive.pinnacle.entity.Group;
 import com.baomidou.mybatisplus.core.mapper.BaseMapper;
 import org.apache.ibatis.annotations.Mapper;
+import org.apache.ibatis.annotations.Param;
+
+import java.util.List;
 
 /**
  * <p>
@@ -14,5 +17,7 @@ import org.apache.ibatis.annotations.Mapper;
  */
 @Mapper
 public interface GroupMapper extends BaseMapper<Group> {
+    List<Group> getAll();
 
+    Group getOneById(@Param("id") long id);
 }
diff --git a/Pinnacle/src/main/java/com/cfive/pinnacle/service/IGroupService.java b/Pinnacle/src/main/java/com/cfive/pinnacle/service/IGroupService.java
index 93f7e01..f4e47e3 100644
--- a/Pinnacle/src/main/java/com/cfive/pinnacle/service/IGroupService.java
+++ b/Pinnacle/src/main/java/com/cfive/pinnacle/service/IGroupService.java
@@ -3,6 +3,8 @@ package com.cfive.pinnacle.service;
 import com.cfive.pinnacle.entity.Group;
 import com.baomidou.mybatisplus.extension.service.IService;
 
+import java.util.List;
+
 /**
  * <p>
  * 用户组 服务类
@@ -12,5 +14,11 @@ import com.baomidou.mybatisplus.extension.service.IService;
  * @since 2023-04-30
  */
 public interface IGroupService extends IService<Group> {
+    List<Group> getAllGroup();
 
+    Group getGroup(Long id);
+
+    boolean addGroup(Group group);
+
+    boolean modifyGroup(Group group);
 }
diff --git a/Pinnacle/src/main/java/com/cfive/pinnacle/service/impl/GroupServiceImpl.java b/Pinnacle/src/main/java/com/cfive/pinnacle/service/impl/GroupServiceImpl.java
index 75a3cb5..7d16fdb 100644
--- a/Pinnacle/src/main/java/com/cfive/pinnacle/service/impl/GroupServiceImpl.java
+++ b/Pinnacle/src/main/java/com/cfive/pinnacle/service/impl/GroupServiceImpl.java
@@ -1,11 +1,18 @@
 package com.cfive.pinnacle.service.impl;
 
+import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
 import com.cfive.pinnacle.entity.Group;
+import com.cfive.pinnacle.entity.RoleGroup;
 import com.cfive.pinnacle.mapper.GroupMapper;
+import com.cfive.pinnacle.mapper.RoleGroupMapper;
 import com.cfive.pinnacle.service.IGroupService;
 import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
+import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
 
+import java.util.HashSet;
+import java.util.List;
+
 /**
  * <p>
  * 用户组 服务实现类
@@ -16,5 +23,73 @@ import org.springframework.stereotype.Service;
  */
 @Service
 public class GroupServiceImpl extends ServiceImpl<GroupMapper, Group> implements IGroupService {
+    private GroupMapper groupMapper;
+    private RoleGroupMapper roleGroupMapper;
 
+    @Autowired
+    public void setGroupMapper(GroupMapper groupMapper) {
+        this.groupMapper = groupMapper;
+    }
+
+    @Autowired
+    public void setRoleGroupMapper(RoleGroupMapper roleGroupMapper) {
+        this.roleGroupMapper = roleGroupMapper;
+    }
+
+    @Override
+    public List<Group> getAllGroup() {
+        return groupMapper.getAll();
+    }
+
+    @Override
+    public Group getGroup(Long id) {
+        return groupMapper.getOneById(id);
+    }
+
+    @Override
+    public boolean addGroup(Group group) {
+        if (groupMapper.insert(group) == 1) {
+            group.getRoles().forEach(role -> {
+                RoleGroup roleGroup = new RoleGroup();
+                roleGroup.setGroupId(group.getId());
+                roleGroup.setRoleId(role.getId());
+                if (roleGroupMapper.insert(roleGroup) != 1) {
+                    throw new RuntimeException("Add role_group failure");
+                }
+            });
+            return true;
+        } else {
+            throw new RuntimeException("Add group failure");
+        }
+    }
+
+    @Override
+    public boolean modifyGroup(Group group) {
+        groupMapper.updateById(group);
+        Group originalGroup = getGroup(group.getId());
+        HashSet<Long> newRoleIds = new HashSet<>();
+        group.getRoles().forEach(role -> newRoleIds.add(role.getId()));
+        HashSet<Long> addRoleIds = new HashSet<>(newRoleIds);
+        if (originalGroup != null) {
+            HashSet<Long> originalRoleIds = new HashSet<>();
+            originalGroup.getRoles().forEach(role -> originalRoleIds.add(role.getId()));
+            HashSet<Long> deleteRoleIds = new HashSet<>(originalRoleIds);
+            deleteRoleIds.removeAll(newRoleIds);
+            addRoleIds.removeAll(originalRoleIds);
+            deleteRoleIds.forEach(deleteRoleId -> {
+                LambdaQueryWrapper<RoleGroup> wrapper = new LambdaQueryWrapper<>();
+                wrapper.eq(RoleGroup::getGroupId, group.getId())
+                        .eq(RoleGroup::getRoleId, deleteRoleId);
+                roleGroupMapper.delete(wrapper);
+            });
+        }
+        addRoleIds.forEach(addRoleId -> {
+            RoleGroup roleGroup = new RoleGroup();
+            roleGroup.setGroupId(group.getId());
+            roleGroup.setRoleId(addRoleId);
+            roleGroupMapper.insert(roleGroup);
+        });
+
+        return true;
+    }
 }
diff --git a/Pinnacle/src/main/resources/mapper/GroupMapper.xml b/Pinnacle/src/main/resources/mapper/GroupMapper.xml
index d199bf2..de297e8 100644
--- a/Pinnacle/src/main/resources/mapper/GroupMapper.xml
+++ b/Pinnacle/src/main/resources/mapper/GroupMapper.xml
@@ -2,4 +2,51 @@
 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 <mapper namespace="com.cfive.pinnacle.mapper.GroupMapper">
 
+    <select id="getAll" resultMap="groupMap">
+        select t_group.id      as group_id,
+               t_group.name    as group_name,
+               t_group.deleted as group_deleted,
+               t_group.version as group_version,
+               tr.id           as role_id,
+               tr.name         as role_name,
+               tr.deleted      as role_deleted,
+               tr.version      as role_version
+        from t_group
+                 left join t_role_group trg on t_group.id = trg.group_id
+                 left join t_role tr on tr.id = trg.role_id
+        where t_group.deleted = 0
+          and (tr.deleted = 0 or tr.deleted is null)
+          and (trg.deleted = 0 or trg.deleted is null)
+    </select>
+
+    <select id="getOneById" resultMap="groupMap">
+        select t_group.id      as group_id,
+               t_group.name    as group_name,
+               t_group.deleted as group_deleted,
+               t_group.version as group_version,
+               tr.id           as role_id,
+               tr.name         as role_name,
+               tr.deleted      as role_deleted,
+               tr.version      as role_version
+        from t_group
+                 left join t_role_group trg on t_group.id = trg.group_id
+                 left join t_role tr on tr.id = trg.role_id
+        where t_group.deleted = 0
+          and (tr.deleted = 0 or tr.deleted is null)
+          and (trg.deleted = 0 or trg.deleted is null)
+          and t_group.id = #{id}
+    </select>
+
+    <resultMap id="groupMap" type="group">
+        <id property="id" column="group_id"/>
+        <result property="name" column="group_name"/>
+        <result property="deleted" column="group_deleted"/>
+        <result property="version" column="group_version"/>
+        <collection property="roles" ofType="role">
+            <id property="id" column="role_id"/>
+            <result property="name" column="role_name"/>
+            <result property="deleted" column="role_deleted"/>
+            <result property="version" column="role_version"/>
+        </collection>
+    </resultMap>
 </mapper>
diff --git a/Pinnacle/src/main/resources/mapper/RoleMapper.xml b/Pinnacle/src/main/resources/mapper/RoleMapper.xml
index fd967c7..b1545b4 100644
--- a/Pinnacle/src/main/resources/mapper/RoleMapper.xml
+++ b/Pinnacle/src/main/resources/mapper/RoleMapper.xml
@@ -3,32 +3,33 @@
 <mapper namespace="com.cfive.pinnacle.mapper.RoleMapper">
 
     <select id="getAll" resultMap="roleMap">
-        select t_role.id as role_id,
-               t_role.name as role_name,
+        select t_role.id      as role_id,
+               t_role.name    as role_name,
                t_role.deleted as role_deleted,
                t_role.version as role_version,
-               tm.id as menu_id,
-               tm.name as menu_name,
-               tm.url as menu_url,
-               tm.power_id as menu_power_id,
-               tm.parent_id as menu_parent_id,
-               te.id as element_id,
-               te.name as element_name,
-               te.power_id as element_power_id,
-               te.menu_id as element_menu_id,
-               t.id as operation_id,
-               t.name as operation_name,
-               t.code as operation_code,
-               t.power_id as operation_power_id,
-               t.element_id as operation_element_id,
-               t.parent_id as operation_parent_id
+               tm.id          as menu_id,
+               tm.name        as menu_name,
+               tm.url         as menu_url,
+               tm.power_id    as menu_power_id,
+               tm.parent_id   as menu_parent_id,
+               te.id          as element_id,
+               te.name        as element_name,
+               te.power_id    as element_power_id,
+               te.menu_id     as element_menu_id,
+               t.id           as operation_id,
+               t.name         as operation_name,
+               t.code         as operation_code,
+               t.power_id     as operation_power_id,
+               t.element_id   as operation_element_id,
+               t.parent_id    as operation_parent_id
         from t_role
                  left join t_power_role tpr on t_role.id = tpr.role_id
                  left join t_power tp on tp.id = tpr.power_id
                  left join t_menu tm on tp.id = tm.power_id
                  left join t_element te on tp.id = te.power_id
                  left join t_operation t on tp.id = t.power_id
-        where t_role.deleted = 0 and (tpr.deleted = 0 or tpr.deleted is null);
+        where t_role.deleted = 0
+          and (tpr.deleted = 0 or tpr.deleted is null);
     </select>
     <select id="getOneById" resultMap="roleMap">
         select t_role.id      as role_id,
@@ -57,7 +58,7 @@
                  left join t_element te on tp.id = te.power_id
                  left join t_operation t on tp.id = t.power_id
         where t_role.deleted = 0
-          and tpr.deleted = 0
+          and (tpr.deleted = 0 or tpr.deleted is null)
           and t_role.id = #{id};
     </select>
 
diff --git a/sql/Insert.sql b/sql/Insert.sql
index 218baa6..4ebc8e2 100644
--- a/sql/Insert.sql
+++ b/sql/Insert.sql
@@ -95,6 +95,8 @@ VALUES (1656219345971326978, 1, 1655784840189972481),
        (1656219345971326985, 8, 1655785102375940098),
        (1656219345971326986, 9, 1655785102375940098);
 
+SET FOREIGN_KEY_CHECKS = 1;
+
 select * from t_role
 left join t_power_role tpr on t_role.id = tpr.role_id
 left join t_power tp on tp.id = tpr.power_id
@@ -102,4 +104,6 @@ left join t_menu tm on tp.id = tm.power_id
 left join t_element te on tp.id = te.power_id
 left join t_operation t on tp.id = t.power_id;
 
-SET FOREIGN_KEY_CHECKS = 1;
\ No newline at end of file
+select * from t_group
+left join t_role_group trg on t_group.id = trg.group_id
+left join t_role tr on tr.id = trg.role_id
\ No newline at end of file
diff --git a/ui/src/assets/css/common.css b/ui/src/assets/css/common.css
index 4e266c1..9d68ead 100644
--- a/ui/src/assets/css/common.css
+++ b/ui/src/assets/css/common.css
@@ -115,4 +115,8 @@ body {
 
 .el-popconfirm__action button:last-child {
     margin-left: 0;
-}
\ No newline at end of file
+}
+
+.el-table__cell .el-tag:not(:first-child) {
+    margin-left: 5px;
+}
diff --git a/ui/src/components/power/CommonTable.vue b/ui/src/components/power/CommonTable.vue
new file mode 100644
index 0000000..5f9ccfa
--- /dev/null
+++ b/ui/src/components/power/CommonTable.vue
@@ -0,0 +1,50 @@
+<template>
+    <el-table
+        :data="tableDate"
+        v-loading="tableLoading"
+        element-loading-text="Loading..."
+        style="margin-top: 10px"
+    >
+        <el-table-column type="selection" />
+        <el-table-column type="index" label="序号" />
+        <el-table-column prop="name" label="名称" />
+        <el-table-column prop="menus" :label="customColumnLabel">
+            <template #default="scope">
+                <el-tag
+                    v-if="!scope.row.customColumn || scope.row.customColumn.length === 0"
+                    type="info"
+                    >无</el-tag
+                >
+                <el-tag v-for="(column, index) in scope.row.customColumn" :key="index">{{
+                    column
+                }}</el-tag>
+            </template>
+        </el-table-column>
+        <el-table-column label="操作">
+            <template #default="scope">
+                <el-button size="small" @click="$emit('onEdit', scope.$index, scope.row)"
+                    >编辑
+                </el-button>
+                <el-button
+                    size="small"
+                    type="danger"
+                    @click="$emit('onDelete', scope.$index, scope.row)"
+                    >删除
+                </el-button>
+            </template>
+        </el-table-column>
+    </el-table>
+</template>
+
+<script>
+export default {
+    name: 'PowerTable',
+    props: {
+        tableDate: Array,
+        tableLoading: Boolean,
+        customColumnLabel: String
+    }
+}
+</script>
+
+<style scoped></style>
diff --git a/ui/src/pages/power/GroupManagement.vue b/ui/src/pages/power/GroupManagement.vue
new file mode 100644
index 0000000..ca43691
--- /dev/null
+++ b/ui/src/pages/power/GroupManagement.vue
@@ -0,0 +1,250 @@
+<template>
+    <el-button bg style="background-color: white" :loading="tableLoading" @click="loadGroupTable">
+        <template #icon>
+            <el-icon>
+                <icon-pinnacle-refresh />
+            </el-icon>
+        </template>
+    </el-button>
+    <el-button type="primary" @click="handleAddBtn">
+        <template #icon>
+            <el-icon>
+                <icon-pinnacle-plus />
+            </el-icon>
+        </template>
+        <template #default> 添加 </template>
+    </el-button>
+    <common-table
+        :table-date="groupTable"
+        :table-loading="tableLoading"
+        @onEdit="handleEdit"
+        @onDelete="handleDelete"
+        customColumnLabel="角色"
+    />
+    <el-dialog
+        :title="dialogTitle"
+        :close-on-click-modal="false"
+        draggable
+        v-model="dialogVisible"
+        @open="handleDialogOpen"
+    >
+        <template #default>
+            <el-form
+                label-width="100px"
+                v-loading="dialogLoading"
+                :rules="rules"
+                ref="formRef"
+                :model="groupForm"
+            >
+                <el-form-item label="用户组名称" prop="inputGroupName">
+                    <el-input autocomplete="off" v-model="groupForm.inputGroupName" />
+                </el-form-item>
+                <el-form-item label="用户组角色">
+                    <el-select v-model="groupForm.selectedRoles" multiple style="width: 100%">
+                        <el-option
+                            v-for="role in roles"
+                            :key="role.id"
+                            :label="role.name"
+                            :value="role.id"
+                        />
+                    </el-select>
+                </el-form-item>
+            </el-form>
+        </template>
+        <template #footer>
+            <el-button type="primary" @click="handleSubmit" :disabled="dialogLoading"
+                >提交</el-button
+            >
+            <el-button @click="handleCancel">取消</el-button>
+        </template>
+    </el-dialog>
+</template>
+
+<script lang="ts">
+import request from '@/services/index.js'
+import {
+    DATABASE_DELETE_OK,
+    DATABASE_SAVE_OK,
+    DATABASE_SELECT_OK,
+    DATABASE_UPDATE_OK
+} from '@/constants/Common.constants.js'
+import { ElMessage, ElMessageBox } from 'element-plus'
+
+export default {
+    name: 'GroupManagement',
+    data() {
+        return {
+            dialogVisible: false,
+            tableLoading: true,
+            dialogLoading: true,
+            groupTable: [],
+            roles: [],
+            groupForm: {
+                inputGroupName: '',
+                selectedRoles: []
+            },
+            isAddNew: true,
+            dialogTitle: '',
+            editGroupId: '',
+            rules: {
+                inputGroupName: [
+                    {
+                        required: true,
+                        message: '用户组名称为必填项'
+                    }
+                ]
+            }
+        }
+    },
+    methods: {
+        loadGroupTable() {
+            this.tableLoading = true
+            request.get('/group').then((res) => {
+                const response = res.data
+                if (response.code === DATABASE_SELECT_OK) {
+                    const groups = response.data
+                    for (const group of groups) {
+                        group.customColumn = []
+                        const roles = group.roles
+                        for (const role of roles) {
+                            group.customColumn.push(role.name)
+                        }
+                    }
+                    this.groupTable = groups
+                    this.tableLoading = false
+                } else {
+                    ElMessage.error({
+                        dangerouslyUseHTMLString: true,
+                        message: '<strong>查询出错</strong>: ' + response.msg
+                    })
+                }
+            })
+        },
+        handleAddBtn() {
+            this.isAddNew = true
+            this.dialogVisible = true
+        },
+        handleDialogOpen() {
+            this.getRoles()
+
+            if (this.isAddNew) {
+                this.groupForm.inputGroupName = ''
+                this.groupForm.selectedRoles = []
+                this.dialogTitle = '添加用户组'
+            } else {
+                this.dialogTitle = '编辑用户组'
+            }
+        },
+        getRoles() {
+            this.dialogLoading = true
+            request.get('/role').then((res) => {
+                const response = res.data
+                if (response.code === DATABASE_SELECT_OK) {
+                    this.roles = response.data
+                    this.dialogLoading = false
+                } else {
+                    ElMessage.error({
+                        dangerouslyUseHTMLString: true,
+                        message: '<strong>查询出错</strong>: ' + response.msg
+                    })
+                }
+            })
+        },
+        handleEdit(index, row) {
+            this.groupForm.inputGroupName = row.name
+            this.editGroupId = row.id
+            this.groupForm.selectedRoles = []
+            for (const role of row.roles) {
+                this.groupForm.selectedRoles.push(role.id)
+            }
+            this.isAddNew = false
+            this.dialogVisible = true
+        },
+        handleDelete(index, row) {
+            ElMessageBox.confirm('确定删除该用户组吗？', '删除').then(() => {
+                this.tableLoading = true
+                request.delete('/group/' + row.id).then((res) => {
+                    const response = res.data
+                    if (response.code === DATABASE_DELETE_OK) {
+                        ElMessage.success({
+                            dangerouslyUseHTMLString: true,
+                            message: '<strong>删除成功</strong>'
+                        })
+                        this.loadGroupTable()
+                    } else {
+                        ElMessage.error({
+                            dangerouslyUseHTMLString: true,
+                            message: '<strong>删除失败</strong>: ' + response.msg
+                        })
+                        this.tableLoading = false
+                    }
+                })
+            })
+        },
+        async handleSubmit() {
+            await this.$refs.formRef.validate((valid) => {
+                if (valid) {
+                    this.dialogLoading = true
+                    const groupObject = {
+                        id: '',
+                        name: this.groupForm.inputGroupName,
+                        roles: []
+                    }
+                    for (const roleId of this.groupForm.selectedRoles) {
+                        const role = {
+                            id: roleId
+                        }
+                        groupObject.roles.push(role)
+                    }
+                    if (this.isAddNew) {
+                        request.post('/group', groupObject).then((res) => {
+                            const response = res.data
+                            if (response.code === DATABASE_SAVE_OK) {
+                                ElMessage.success({
+                                    dangerouslyUseHTMLString: true,
+                                    message: '<strong>添加成功</strong>'
+                                })
+                                this.dialogVisible = false
+                                this.loadGroupTable()
+                            } else {
+                                ElMessage.error({
+                                    dangerouslyUseHTMLString: true,
+                                    message: '<strong>添加失败</strong>: ' + response.msg
+                                })
+                                this.dialogLoading = false
+                            }
+                        })
+                    } else {
+                        groupObject.id = this.editGroupId
+                        request.put('/group', groupObject).then((res) => {
+                            const response = res.data
+                            if (response.code === DATABASE_UPDATE_OK) {
+                                ElMessage.success({
+                                    dangerouslyUseHTMLString: true,
+                                    message: '<strong>修改成功</strong>'
+                                })
+                                this.dialogVisible = false
+                                this.loadGroupTable()
+                            } else {
+                                ElMessage.error({
+                                    dangerouslyUseHTMLString: true,
+                                    message: '<strong>修改失败</strong>: ' + response.msg
+                                })
+                                this.dialogLoading = false
+                            }
+                        })
+                    }
+                }
+            })
+        },
+        handleCancel() {
+            this.dialogVisible = false
+        }
+    },
+    mounted() {
+        this.loadGroupTable()
+    }
+}
+</script>
+
+<style scoped></style>
diff --git a/ui/src/pages/power/RoleManagement.vue b/ui/src/pages/power/RoleManagement.vue
index 8ef92e1..b833f2b 100644
--- a/ui/src/pages/power/RoleManagement.vue
+++ b/ui/src/pages/power/RoleManagement.vue
@@ -14,32 +14,13 @@
         </template>
         <template #default> 添加 </template>
     </el-button>
-    <el-table
-        :data="roleTable"
-        v-loading="tableLoading"
-        element-loading-text="Loading..."
-        style="margin-top: 10px"
-    >
-        <el-table-column type="selection" />
-        <el-table-column type="index" label="序号" />
-        <el-table-column prop="name" label="名称" />
-        <el-table-column prop="menus" label="权限">
-            <template #default="scope">
-                <el-tag v-if="scope.row.powers.length === 0" type="info">无</el-tag>
-                <el-tag v-for="(power, index) in scope.row.powers" :key="index">{{ power }}</el-tag>
-            </template>
-        </el-table-column>
-        <el-table-column label="操作">
-            <template #default="scope">
-                <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
-                    >编辑
-                </el-button>
-                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)"
-                    >删除
-                </el-button>
-            </template>
-        </el-table-column>
-    </el-table>
+    <common-table
+        :table-date="roleTable"
+        :table-loading="tableLoading"
+        @onEdit="handleEdit"
+        @onDelete="handleDelete"
+        customColumnLabel="权限"
+    />
     <el-dialog
         :title="dialogTitle"
         :close-on-click-modal="false"
@@ -67,7 +48,8 @@
                         :render-after-expand="false"
                         :default-checked-keys="defaultSelectedPower"
                         @check-change="handleSelectedPowerChange"
-                /></el-form-item>
+                    />
+                </el-form-item>
             </el-form>
         </template>
         <template #footer>
@@ -129,7 +111,7 @@ export default {
                 if (response.code === DATABASE_SELECT_OK) {
                     const roles = response.data
                     for (const role of roles) {
-                        role.powers = []
+                        role.customColumn = []
                         const menus = role.menus
                         const elements = role.elements
                         const operations = role.operations
@@ -151,7 +133,9 @@ export default {
                             _.forEach(element.operations, (value) => {
                                 operas.push(value.name)
                             })
-                            role.powers.push(`${menu.name}/${element.name}/${_.join(operas, ';')}`)
+                            role.customColumn.push(
+                                `${menu.name}/${element.name}/${_.join(operas, ';')}`
+                            )
                         }
                     }
                     this.roleTable = roles
@@ -264,9 +248,9 @@ export default {
                 if (valid) {
                     this.dialogLoading = true
                     const roleObject = {
+                        id: '',
                         name: this.roleForm.inputRoleName,
-                        powers: [],
-                        id: ''
+                        powers: []
                     }
                     for (const powerId of this.roleForm.selectedPower) {
                         const power = {
diff --git a/ui/src/router/index.ts b/ui/src/router/index.ts
index 441e874..b7ce8f4 100644
--- a/ui/src/router/index.ts
+++ b/ui/src/router/index.ts
@@ -186,13 +186,24 @@ const router = createRouter({
                     children: [
                         {
                             path: 'role',
-                            name: 'systemRole',
+                            name: 'roleManagement',
                             component: async () => await import('@/pages/power/RoleManagement.vue'),
                             meta: {
                                 title: '角色管理',
                                 requiresScrollbar: false,
                                 requiresPadding: true
                             }
+                        },
+                        {
+                            path: 'group',
+                            name: 'groupManagement',
+                            component: async () =>
+                                await import('@/pages/power/GroupManagement.vue'),
+                            meta: {
+                                title: '用户组管理',
+                                requiresScrollbar: false,
+                                requiresPadding: true
+                            }
                         }
                     ],
                     meta: {