From d6282cb902e1f2c5fddefd6fd888c6222633bb6a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AE=B8=E6=99=93=E4=B8=9C?= <763795151@qq.com>
Date: Sun, 28 Aug 2022 22:48:21 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=A4=E8=AF=81=E6=8E=88=E6=9D=83=E5=88=86?=
 =?UTF-8?q?=E7=A6=BB=E9=A1=B5=E9=9D=A2=E6=9C=AA=E5=BC=80=E5=90=AFACL?=
 =?UTF-8?q?=E6=97=B6=EF=BC=8C=E6=98=BE=E7=A4=BA=E6=95=88=E6=9E=9C.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                      |  4 ++--
 ui/src/views/acl/Acl.vue       | 13 +------------
 ui/src/views/acl/AclList.vue   | 13 +++++++++----
 ui/src/views/acl/SaslScram.vue |  8 ++++++++
 4 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/README.md b/README.md
index 9f01aed..35c5f61 100644
--- a/README.md
+++ b/README.md
@@ -89,9 +89,9 @@ sh bin/shutdown.sh
 ## 联系方式
 + 微信群
 
-[//]: # (<img src="./document/contact/weixin_contact.jpg" width="40%"/>)
+<img src="./document/contact/weixin_contact.jpg" width="40%"/>
 
-<img src="https://github.com/xxd763795151/kafka-console-ui/blob/main/document/contact/weixin_contact.jpg" width="40%"/>
+[//]: # (<img src="https://github.com/xxd763795151/kafka-console-ui/blob/main/document/contact/weixin_contact.jpg" width="40%"/>)
 
 + 若联系方式失效, 请联系加一下微信, 说明意图
     - xxd763795151
diff --git a/ui/src/views/acl/Acl.vue b/ui/src/views/acl/Acl.vue
index ded2688..02cd1ce 100644
--- a/ui/src/views/acl/Acl.vue
+++ b/ui/src/views/acl/Acl.vue
@@ -5,12 +5,7 @@
         <acl-list></acl-list>
       </a-tab-pane>
       <a-tab-pane key="2" tab="SaslScram用户管理">
-        <div v-show="enableSasl">
-          <sasl-scram></sasl-scram>
-        </div>
-        <div v-show="!enableSasl">
-          <h2>未启用SASL SCRAM认证，不支持该认证的用户管理操作</h2>
-        </div>
+        <sasl-scram></sasl-scram>
       </a-tab-pane>
     </a-tabs>
   </div>
@@ -19,7 +14,6 @@
 <script>
 import AclList from "@/views/acl/AclList";
 import SaslScram from "@/views/acl/SaslScram";
-import { mapState } from "vuex";
 
 export default {
   name: "Acl",
@@ -27,10 +21,5 @@ export default {
     AclList,
     SaslScram,
   },
-  computed: {
-    ...mapState({
-      enableSasl: (state) => state.clusterInfo.enableSasl,
-    }),
-  },
 };
 </script>
diff --git a/ui/src/views/acl/AclList.vue b/ui/src/views/acl/AclList.vue
index b3365f8..c94c614 100644
--- a/ui/src/views/acl/AclList.vue
+++ b/ui/src/views/acl/AclList.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="acl">
     <a-spin :spinning="loading">
-      <div v-show="!hint" class="acl">
+      <div class="acl">
         <div id="components-form-acl-advanced-search">
           <a-form
             class="ant-advanced-search-form"
@@ -50,6 +50,9 @@
           <a-button type="primary" @click="onAddPrincipalAuth"
             >新增主体权限</a-button
           >
+          <span v-show="hint != ''" class="hint"
+            >broker未启用权限管理，所以不支持授权相关操作[{{ hint }}]</span
+          >
         </div>
         <a-table :columns="columns" :data-source="data" bordered>
           <div slot="username" slot-scope="username">
@@ -136,9 +139,6 @@
           @closeAddPrincipalAuthDialog="closeAddPrincipalAuthDialog"
         ></AddPrincipalAuth>
       </div>
-      <div v-show="hint">
-        <h2>{{ hint }}</h2>
-      </div>
     </a-spin>
   </div>
 </template>
@@ -441,4 +441,9 @@ const columns = [
 .operation-btn {
   margin-right: 3%;
 }
+
+.hint {
+  margin-left: 1%;
+  color: red;
+}
 </style>
diff --git a/ui/src/views/acl/SaslScram.vue b/ui/src/views/acl/SaslScram.vue
index 4caa72e..af65c73 100644
--- a/ui/src/views/acl/SaslScram.vue
+++ b/ui/src/views/acl/SaslScram.vue
@@ -28,6 +28,9 @@
       </div>
       <div class="operation-row-button">
         <a-button type="primary" @click="updateUser">新增/更新用户</a-button>
+        <span class="hint" v-show="!enableSasl"
+          >未启用SASL SCRAM认证，不支持相关操作</span
+        >
         <UpdateUser
           :visible="showUpdateUser"
           @updateUserDialogData="closeUpdateUserDialog"
@@ -400,4 +403,9 @@ const columns = [
 .operation-btn {
   margin-right: 3%;
 }
+
+.hint {
+  margin-left: 1%;
+  color: red;
+}
 </style>