认证授权分离页面未开启ACL时，显示效果.

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

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>
       </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>

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>

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>