diff --git a/ui/src/views/acl/Acl.vue b/ui/src/views/acl/Acl.vue
index bb6fe4f..190d410 100644
--- a/ui/src/views/acl/Acl.vue
+++ b/ui/src/views/acl/Acl.vue
@@ -66,8 +66,14 @@
             href="javascript:;"
             class="operation-btn"
             @click="onAddProducerAuth(record)"
-            >授予生产权限</a
-          >
+            >授予生产权限
+            <AddProducerAuth
+              :visible="openAddProducerAuthDialog"
+              :record="selectRow"
+              @addProducerAuthDialog="closeAddProducerAuthDialog"
+            ></AddProducerAuth>
+          </a>
+
           <a href="javascript:;" class="operation-btn">收回生产权限</a>
           <a href="javascript:;" class="operation-btn">授予消费权限</a>
           <a href="javascript:;" class="operation-btn">收回消费权限</a>
@@ -107,10 +113,11 @@ import request from "@/utils/request";
 import notification from "ant-design-vue/es/notification";
 import UpdateUser from "@/views/acl/UpdateUser";
 import { KafkaAclApi } from "@/utils/api";
+import AddProducerAuth from "@/views/acl/AddProducerAuth";
 
 export default {
   name: "Acl",
-  components: { UpdateUser },
+  components: { UpdateUser, AddProducerAuth },
   data() {
     return {
       queryParam: {},
@@ -118,9 +125,11 @@ export default {
       columns,
       innerColumns,
       innerData,
+      selectRow: {},
       form: this.$form.createForm(this, { name: "advanced_search" }),
       showUpdateUser: false,
       deleteUserConfirm: false,
+      openAddProducerAuthDialog: false,
     };
   },
   methods: {
@@ -171,14 +180,19 @@ export default {
       });
     },
     onAddProducerAuth(row) {
+      this.openAddProducerAuthDialog = true;
       const rowData = {};
       Object.assign(rowData, row);
+      this.selectRow = rowData;
       console.log("onAddProducerAuth user:", rowData);
     },
     cancel(e) {
       console.log(e);
       this.$message.error("Click on No");
     },
+    closeAddProducerAuthDialog() {
+      this.openAddProducerAuthDialog = false;
+    },
   },
   created() {
     getAclList(this.data, this.queryParam);
diff --git a/ui/src/views/acl/AddProducerAuth.vue b/ui/src/views/acl/AddProducerAuth.vue
new file mode 100644
index 0000000..8eab0f3
--- /dev/null
+++ b/ui/src/views/acl/AddProducerAuth.vue
@@ -0,0 +1,83 @@
+<template>
+  <a-modal
+    title="授予生产权限"
+    :visible="show"
+    :confirm-loading="confirmLoading"
+    :width="800"
+    @ok="handleOk"
+    @cancel="handleCancel"
+    okText="提交"
+    cancelText="取消"
+    :mask="false"
+  >
+    <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
+      <a-form-item label="用户名">
+        <a-input
+          v-decorator="['username', { initialValue: record.username }]"
+          disabled="disabled"
+        />
+      </a-form-item>
+      <a-form-item label="topic">
+        <a-input
+          v-decorator="[
+            'topic',
+            { rules: [{ required: true, message: '请输入topic!' }] },
+          ]"
+        />
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<script>
+export default {
+  name: "AddProducerAuth",
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    record: {
+      default: {},
+    },
+  },
+  data() {
+    return {
+      formLayout: "horizontal",
+      form: this.$form.createForm(this, { name: "AddProducerAuthForm" }),
+      confirmLoading: false,
+      show: this.visible,
+    };
+  },
+  watch: {
+    visible(v) {
+      this.show = v;
+    },
+  },
+  methods: {
+    handleSubmit(e) {
+      e.preventDefault();
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          console.log("Received values of form: ", values);
+        }
+      });
+    },
+    handleSelectChange(value) {
+      console.log(value);
+      this.form.setFieldsValue({
+        note: `Hi, ${value === "male" ? "man" : "lady"}!`,
+      });
+    },
+    handleOk() {
+      console.log(this.record);
+      this.$emit("addProducerAuthDialog", {});
+    },
+    handleCancel() {
+      this.$emit("addProducerAuthDialog", {});
+    },
+  },
+};
+</script>
+
+<style scoped></style>
diff --git a/ui/src/views/acl/UpdateUser.vue b/ui/src/views/acl/UpdateUser.vue
index b9c6cb5..1ab141c 100644
--- a/ui/src/views/acl/UpdateUser.vue
+++ b/ui/src/views/acl/UpdateUser.vue
@@ -47,6 +47,8 @@
 <script>
 import request from "@/utils/request";
 import notification from "ant-design-vue/es/notification";
+import { KafkaAclApi } from "@/utils/api";
+
 export default {
   name: "UpdateUser",
   props: {
@@ -64,7 +66,6 @@ export default {
       ModalText: "Content of the modal",
       confirmLoading: false,
       show: this.visible,
-      userForm: {},
     };
   },
   watch: {
@@ -79,12 +80,13 @@ export default {
         if (err) {
           return;
         }
+        this.confirmLoading = true;
         request({
-          url: api.addKafkaUser.url,
-          method: api.addKafkaUser.method,
+          url: KafkaAclApi.addKafkaUser.url,
+          method: KafkaAclApi.addKafkaUser.method,
           data: { username: values.username, password: values.password },
         }).then((res) => {
-          console.log(res);
+          this.confirmLoading = false;
           if (res.code == 0) {
             notification.success({
               message: res.msg,
@@ -104,13 +106,6 @@ export default {
     },
   },
 };
-
-const api = {
-  addKafkaUser: {
-    url: "/user",
-    method: "post",
-  },
-};
 </script>
 
 <style scoped>