diff --git a/frontend/src/views/Role/Role.vue b/frontend/src/views/Role/Role.vue
index 6783daa98a2b6289082a5cc63ee9f6610c000cf5..92c80cb8d2aac019bfa040f4607b17220e9577b8 100644
--- a/frontend/src/views/Role/Role.vue
+++ b/frontend/src/views/Role/Role.vue
@@ -16,13 +16,13 @@
                         <el-button name="default_all" type="primary" size="small"
                             @click="showRoleDetail(scope.row)">查看</el-button>
                         <el-button name="role_modify" type="primary" size="small" v-if="!(scope.row.role === 'admin')"
-                            @click="onEditRoleDetail(scope.row)">变更</el-button>
+                            @click="onEditRolePermission(scope.row)">变更</el-button>
                     </template>
                 </el-table-column>
                 <el-table-column label="操作" fixed="right">
                     <template #default="scope">
                         <el-button :disabled="(scope.row.role === 'admin')" name="role_update" size="small" type="primary"
-                            @click="onEditRoleInfo">编辑</el-button>
+                            @click="onEditRoleInfo(scope.row)">编辑</el-button>
                         <el-popconfirm title="确定删除此角色?" @confirm="onDeleteRole(scope.row)">
                             <template #reference>
                                 <el-button :disabled="(scope.row.role === 'admin')" slot="reference" name="role_delete"
@@ -37,12 +37,12 @@
         </PGTable>
 
         <el-dialog :title="roleOperateTitle" v-model="showRoleOperate">
-            <UpdateRole v-if="operate === 'UpdateRole'" />
+            <UpdateRole v-if="operate === 'UpdateRole'" :role="editedRole" />
             <AddRole v-if="operate === 'AddRole'" @rolesUpdated="updateRoles" @close="showRoleOperate = false"/>
         </el-dialog>
 
-        <el-drawer :title="roleDetailTitle" v-model="showDetail" direction="rtl">
-            <RoleDetail :showEdit="showDetailEdit" :role="editedRole" />
+        <el-drawer :title="roleDetailTitle" v-model="showPermission" direction="rtl">
+            <RoleDetail :showEdit="showPermissionEdit" :role="editedRole" />
         </el-drawer>
     </div>
 </template>
@@ -87,26 +87,29 @@ function updateRoles() {
 }
 
 const roleDetailTitle = ref("权限详情")
-const showDetail = ref(false)
-const showDetailEdit = ref(false)
+const showPermission = ref(false)
+const showPermissionEdit = ref(false)
 
 function showRoleDetail(role: any) {
-    showDetailEdit.value = false
-    showDetail.value = true
+    roleDetailTitle.value = "权限详情"
+    showPermissionEdit.value = false
+    showPermission.value = true
 }
 
-const editedRole = ref("")
-function onEditRoleDetail(role: any) {
-    editedRole.value = role.role
-    showDetailEdit.value = true
-    showDetail.value = true
+const editedRole = ref({})
+function onEditRolePermission(role: any) {
+    editedRole.value = role
+    roleDetailTitle.value = "编辑权限"
+    showPermissionEdit.value = true
+    showPermission.value = true
 }
 
 const roleOperateTitle = ref("编辑角色")
 const showRoleOperate = ref(false)
 const operate = ref("")
 
-function onEditRoleInfo() {
+function onEditRoleInfo(role:any) {
+    editedRole.value = role
     roleOperateTitle.value = "编辑角色"
     showRoleOperate.value = true
     operate.value = "UpdateRole"
diff --git a/frontend/src/views/Role/components/RoleDetail.vue b/frontend/src/views/Role/components/RoleDetail.vue
index d7083c164b7d986e0dab3ee699ebf1086588ce80..a15e617f7c065b0d2e534b8cf25c608883dcf176 100644
--- a/frontend/src/views/Role/components/RoleDetail.vue
+++ b/frontend/src/views/Role/components/RoleDetail.vue
@@ -24,8 +24,8 @@ const treeRef = ref()
 
 const props = defineProps({
     role: {
-        type: String,
-        default: "",
+        type: Object,
+        default: {},
     },
     showEdit: {
         type: Boolean,
@@ -53,14 +53,14 @@ function onChangePermission() {
     });
 
     changeRolePermission({
-        role: props.role,
+        role: props.role.role,
         buttonId: buttons,
         menus: menus,
     }).then((resp: any) => {
         if (resp.code === RespCodeOK) {
             // TODO:
 
-            ElMessage.success("change role permission success", resp.msg)
+            ElMessage.success("change role permission success:"+ resp.msg)
         } else {
             ElMessage.error("failed to change role permission:" + resp.msg)
         }
diff --git a/frontend/src/views/Role/components/UpdateRole.vue b/frontend/src/views/Role/components/UpdateRole.vue
index 6907bf227038ef8f7cb9a3f7b59e1cf1f016b510..56f40fc70e547d912af87c353a61d3cc4f5a3f73 100644
--- a/frontend/src/views/Role/components/UpdateRole.vue
+++ b/frontend/src/views/Role/components/UpdateRole.vue
@@ -2,8 +2,7 @@
     <div>
         <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
             <el-form-item label="角色名:" prop="rolename">
-                <el-input class="ipInput" type="text" size="medium" v-model="form.rolename" autocomplete="off"
-                    :disabled="true"></el-input>
+                <p> {{ role.role }}</p>
             </el-form-item>
             <el-form-item label="描述:" prop="description">
                 <el-input class="ipInput" controls-position="right" v-model="form.description"
@@ -11,31 +10,68 @@
             </el-form-item>
         </el-form>
 
-        <div class="dialog-footer">
-            <el-button type="primary">确 定</el-button>
+        <div class="footer">
+            <el-button type="primary" @click="onUpdateRole">确 定</el-button>
         </div>
     </div>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
+import { ElMessage } from 'element-plus';
+
+import { RespCodeOK } from "@/request/request";
+import { updateRole } from "@/request/role";
 
 const rules = {
-    rolename: [
+    description: [
         {
             required: true,
-            message: "请输入角色名",
+            message: "请输入角色描述",
             trigger: "blur"
         }
     ]
 }
 
+const props = defineProps({
+    role: {
+        type: Object,
+        default: {}
+    }
+})
+
 const formRef = ref()
 const form = ref({
-    rolename: "",
     description: ""
 })
 
+function onUpdateRole() {
+    let params = {
+        role: props.role.role,
+        description: form.value.description
+    }
+    formRef.value.validate((valid: boolean) => {
+        if (valid) {
+            updateRole(params).then((resp: any) => {
+                console.log(resp)
+                if (resp.code === RespCodeOK) {
+                    ElMessage.success("success to update role info:"+ resp.msg);
+                } else {
+                    ElMessage.error("failed to update role info:"+ resp.msg);
+                }
+            }).catch((err: any) => {
+                ElMessage.error("添加失败,请检查输入内容:"+ err.msg);
+            });
+        } else {
+            ElMessage.error("请检查输入内容");
+        }
+    });
+}
+
 </script>
 
-<style lang="scss" scoped></style>
\ No newline at end of file
+<style lang="scss" scoped>
+.footer {
+    text-align: right;
+}
+</style>
\ No newline at end of file