diff --git a/frontend/src/views/Role/Role.vue b/frontend/src/views/Role/Role.vue
index a6dae06ac8f6f882fee1e5946b89e359b990381d..8534327b336a5deb71e08abdfeb71809286442a6 100644
--- a/frontend/src/views/Role/Role.vue
+++ b/frontend/src/views/Role/Role.vue
@@ -5,7 +5,7 @@
                 <el-button type="primary" @click="onAddRole">添加</el-button>
             </template>
             <template v-slot:content>
-                <el-table-column prop="ID" label="角色ID" sortable>
+                <el-table-column prop="id" label="角色ID" sortable>
                 </el-table-column>
                 <el-table-column prop="role" label="角色名">
                 </el-table-column>
@@ -15,17 +15,17 @@
                     <template #default="scope">
                         <el-button name="default_all" type="primary" size="small"
                             @click="showRoleDetail(scope.row)">查看</el-button>
-                        <el-button name="role_modify" type="primary" size="small"
+                        <el-button name="role_modify" type="primary" size="small" v-if="!(scope.row.role === 'admin')"
                             @click="onEditRoleDetail(scope.row)">变更</el-button>
                     </template>
                 </el-table-column>
                 <el-table-column label="操作" fixed="right">
                     <template #default="scope">
-                        <el-button :disabled="[1].includes(scope.row.id)" name="role_update" size="small" type="primary"
+                        <el-button :disabled="(scope.row.role === 'admin')" name="role_update" size="small" type="primary"
                             @click="onEditRoleInfo">编辑</el-button>
-                        <el-popconfirm title="确定删除此角色?">
+                        <el-popconfirm title="确定删除此角色?" @confirm="onDeleteRole(scope.row)">
                             <template #reference>
-                                <el-button :disabled="[1].includes(scope.row.id)" slot="reference" name="role_delete"
+                                <el-button :disabled="(scope.row.role === 'admin')" slot="reference" name="role_delete"
                                     type="danger" size="small">
                                     删除
                                 </el-button>
@@ -56,7 +56,7 @@ import RoleDetail from "./components/RoleDetail.vue";
 import AddRole from "./components/AddRole.vue";
 import UpdateRole from "./components/UpdateRole.vue";
 
-import { getRolesPaged } from "@/request/role";
+import { getRolesPaged, deleteRole } from "@/request/role";
 import { RespCodeOK } from "@/request/request";
 
 const roles = ref([])
@@ -65,6 +65,10 @@ const pageSize = ref(10)
 const total = ref(0)
 
 onMounted(() => {
+    updateRoles()
+})
+
+function updateRoles() {
     getRolesPaged({
         page: currentPage.value,
         size: pageSize.value,
@@ -80,7 +84,7 @@ onMounted(() => {
     }).catch((err: any) => {
         ElMessage.error("failed to get role info:" + err.msg)
     })
-})
+}
 
 const roleDetailTitle = ref("权限详情")
 const showDetail = ref(false)
@@ -114,6 +118,21 @@ function onAddRole() {
     operate.value = "AddRole"
 }
 
+function onDeleteRole(role: any) {
+    // TODO: use other params
+    deleteRole({
+        role: role.role
+    }).then((resp: any) => {
+        if (resp.code === RespCodeOK) {
+            updateRoles()
+        } else {
+            ElMessage.error("failed to delete role:" + resp.msg)
+        }
+    }).catch((err: any) => {
+        ElMessage.error("failed to delete role:" + err.msg)
+    })
+}
+
 </script>
 
 <style lang="scss" scoped>