diff --git a/frontend/src/views/Role/Role.vue b/frontend/src/views/Role/Role.vue
index 8534327b336a5deb71e08abdfeb71809286442a6..abddd54bea31bae78594be8c486a1d3a83fe5325 100644
--- a/frontend/src/views/Role/Role.vue
+++ b/frontend/src/views/Role/Role.vue
@@ -124,6 +124,7 @@ function onDeleteRole(role: any) {
         role: role.role
     }).then((resp: any) => {
         if (resp.code === RespCodeOK) {
+            ElMessage.success("删除角色成功:" + resp.msg)
             updateRoles()
         } else {
             ElMessage.error("failed to delete role:" + resp.msg)
diff --git a/frontend/src/views/Role/components/AddRole.vue b/frontend/src/views/Role/components/AddRole.vue
index f73582941b3470292fb0ed65c335d98e19a8f976..efd1da3c815c823a901f560805be00c4e66d06c5 100644
--- a/frontend/src/views/Role/components/AddRole.vue
+++ b/frontend/src/views/Role/components/AddRole.vue
@@ -2,7 +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"></el-input>
+                <el-input class="ipInput" type="text" v-model="form.rolename" autocomplete="off"></el-input>
             </el-form-item>
             <el-form-item label="描述:" prop="description">
                 <el-input class="ipInput" controls-position="right" v-model="form.description"
@@ -11,13 +11,17 @@
         </el-form>
 
         <div class="footer">
-            <el-button type="primary">确 定</el-button>
+            <el-button type="primary" @click="onAddRole">确 定</el-button>
         </div>
     </div>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
+import { ElMessage } from 'element-plus';
+
+import { RespCodeOK } from "@/request/request";
+import { addRole } from "@/request/role";
 
 const rules = {
     rolename: [
@@ -35,6 +39,31 @@ const form = ref({
     description: ""
 })
 
+function onAddRole() {
+    let params = {
+        role: form.value.rolename,
+        description: form.value.description
+    }
+    formRef.value.validate((valid: Boolean) => {
+        if (valid) {
+            addRole(params)
+                .then((resp: any) => {
+                    if (resp.code === RespCodeOK) {
+                        // TODO: update role list
+                        ElMessage.success(resp.msg);
+                    } else {
+                        ElMessage.error(resp.msg);
+                    }
+                })
+                .catch((err: any) => {
+                    ElMessage.error("添加失败,请检查输入内容", err.msg);
+                });
+        } else {
+            ElMessage.error("请检查输入内容");
+        }
+    });
+}
+
 </script>
 
 <style lang="scss" scoped>