feat: 多集群管理列表页增加手动刷新功能

2025-12-24 11:52:08 +08:00 · 2022-09-22 15:18:13 +08:00
parent 0d635ad419
commit 39015b5100
14 changed files with 243 additions and 223 deletions
--- a/km-console/packages/layout-clusters-fe/src/constants/common.ts
+++ b/km-console/packages/layout-clusters-fe/src/constants/common.ts
@@ -261,3 +261,6 @@ export const timeFormater = function formatDuring(mss: number) {
    .map((o: any) => `${o.v}${o.unit}`)
    .join();
 };
+
+// 列表页Header布局前缀
+export const tableHeaderPrefix = 'table-header-layout';
--- a/km-console/packages/layout-clusters-fe/src/index.less
+++ b/km-console/packages/layout-clusters-fe/src/index.less
@@ -280,3 +280,38 @@ li {
    line-height: 20px;
  }
 }
+
+
+// Table Header 布局样式
+.table-header-layout {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 12px;
+  &-left,
+  &-right {
+    display: flex;
+    align-items: center;
+  }
+  &-left  {
+    &-refresh{
+      font-size: 20px;
+      color: #74788d;
+      cursor: pointer;
+    }
+  }
+  
+  &-right{
+    &>*{
+      margin-left: 8px;
+    }
+    
+    .search-input {
+      width: 248px;
+    }
+  } 
+
+  &-divider{
+    height: 20px;
+    top: 0
+  }
+}
--- a/km-console/packages/layout-clusters-fe/src/pages/BrokerControllerChangeLog/index.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/BrokerControllerChangeLog/index.tsx
@@ -1,12 +1,13 @@
 import React, { useState, useEffect } from 'react';
 import { useParams, useHistory, useLocation } from 'react-router-dom';
-import { ProTable, Utils, AppContainer } from 'knowdesign';
+import { ProTable, Utils, AppContainer, SearchInput, IconFont } from 'knowdesign';
 import API from '../../api';
 import { getControllerChangeLogListColumns, defaultPagination } from './config';
 import BrokerDetail from '../BrokerDetail';
 import BrokerHealthCheck from '@src/components/CardBar/BrokerHealthCheck';
 import DBreadcrumb from 'knowdesign/es/extend/d-breadcrumb';
 import './index.less';
+import { tableHeaderPrefix } from '@src/constants/common';

 const { request } = Utils;
 const ControllerChangeLogList: React.FC = (props: any) => {
@@ -89,26 +90,35 @@ const ControllerChangeLogList: React.FC = (props: any) => {
        <BrokerHealthCheck />
      </div>
      <div className="clustom-table-content">
+        <div className={tableHeaderPrefix}>
+          <div className={`${tableHeaderPrefix}-left`}>
+            <div
+              className={`${tableHeaderPrefix}-left-refresh`}
+              onClick={() => genData({ pageNo: pagination.current, pageSize: pagination.pageSize })}
+            >
+              <IconFont className={`${tableHeaderPrefix}-left-refresh-icon`} type="icon-shuaxin1" />
+            </div>
+          </div>
+          <div className={`${tableHeaderPrefix}-right`}>
+            <SearchInput
+              onSearch={setSearchKeywords}
+              attrs={{
+                placeholder: '请输入Broker Host',
+                style: { width: '248px', borderRiadus: '8px' },
+                maxLength: 128,
+              }}
+            />
+          </div>
+        </div>
        <ProTable
          showQueryForm={false}
          tableProps={{
-            showHeader: true,
+            showHeader: false,
            rowKey: 'path',
            loading: loading,
            columns: getControllerChangeLogListColumns(),
            dataSource: data,
            paginationProps: { ...pagination },
-            tableHeaderSearchInput: {
-              // 搜索配置
-              submit: getSearchKeywords,
-              searchInputType: 'search',
-              searchAttr: {
-                placeholder: '请输入Broker Host',
-                style: {
-                  width: '248px',
-                },
-              },
-            },
            attrs: {
              onChange: onTableChange,
              bordered: false,
--- a/km-console/packages/layout-clusters-fe/src/pages/BrokerList/index.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/BrokerList/index.tsx
@@ -1,9 +1,9 @@
 import React, { useState, useEffect, memo } from 'react';
 import { useParams, useHistory, useLocation } from 'react-router-dom';
-import { ProTable, Drawer, Utils, AppContainer } from 'knowdesign';
+import { ProTable, Drawer, Utils, AppContainer, SearchInput, IconFont } from 'knowdesign';
 import API from '../../api';
 import { getBrokerListColumns, defaultPagination } from './config';
-import { dealTableRequestParams } from '../../constants/common';
+import { tableHeaderPrefix } from '@src/constants/common';
 import BrokerDetail from '../BrokerDetail';
 import CardBar from '@src/components/CardBar';
 import BrokerHealthCheck from '@src/components/CardBar/BrokerHealthCheck';
@@ -33,7 +33,6 @@ const BrokerList: React.FC = (props: any) => {
    if (urlParams?.clusterId === undefined) return;
    // filters = filters || filteredInfo;
    setLoading(true);
-    // const params = dealTableRequestParams({ searchKeywords, pageNo, pageSize });
    const params = {
      searchKeywords: searchKeywords.slice(0, 128),
      pageNo,
@@ -99,29 +98,36 @@ const BrokerList: React.FC = (props: any) => {
        <BrokerHealthCheck />
      </div>
      <div className="clustom-table-content">
+        <div className={tableHeaderPrefix}>
+          <div className={`${tableHeaderPrefix}-left`}>
+            <div
+              className={`${tableHeaderPrefix}-left-refresh`}
+              onClick={() => genData({ pageNo: pagination.current, pageSize: pagination.pageSize })}
+            >
+              <IconFont className={`${tableHeaderPrefix}-left-refresh-icon`} type="icon-shuaxin1" />
+            </div>
+          </div>
+          <div className={`${tableHeaderPrefix}-right`}>
+            <SearchInput
+              onSearch={setSearchKeywords}
+              attrs={{
+                placeholder: '请输入Broker Host',
+                style: { width: '248px', borderRiadus: '8px' },
+                maxLength: 128,
+              }}
+            />
+          </div>
+        </div>
        <ProTable
          key="brokerTable"
          showQueryForm={false}
          tableProps={{
-            showHeader: true,
+            showHeader: false,
            rowKey: 'broker_list',
            loading: loading,
            columns: getBrokerListColumns(),
            dataSource: data,
            paginationProps: { ...pagination },
-            tableHeaderSearchInput: {
-              // 搜索配置
-              submit: getSearchKeywords,
-              searchInputType: 'search',
-              searchAttr: {
-                placeholder: '请输入Broker Host',
-                maxLength: 128,
-                style: {
-                  width: '248px',
-                  borderRiadus: '8px',
-                },
-              },
-            },
            attrs: {
              onChange: onTableChange,
              scroll: { x: 'max-content', y: 'calc(100vh - 400px)' },
--- a/km-console/packages/layout-clusters-fe/src/pages/Consumers/index.less
+++ b/km-console/packages/layout-clusters-fe/src/pages/Consumers/index.less
@@ -1,12 +1,8 @@
 .operating-state {
-  .operation-bar {
-    .left {
-      .dcloud-form-item {
-        margin-bottom: 0;
-      }
-      .dcloud-form-item:first-of-type {
-        margin-right: 12px;
-      }
+  .consumers-search{
+    display: contents;
+    .search-input-short{
+      margin-right: 8px;
    }
  }
  .pro-table-wrap {
--- a/km-console/packages/layout-clusters-fe/src/pages/Consumers/index.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/Consumers/index.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/display-name */
 import React, { useState, useEffect } from 'react';
-import { AppContainer, Form, Input, ProTable, Select, Utils } from 'knowdesign';
+import { AppContainer, Divider, Form, IconFont, Input, ProTable, Select, Utils } from 'knowdesign';
 import './index.less';
 import Api from '@src/api/index';
 import { getOperatingStateListParams } from './interface';
@@ -8,7 +8,7 @@ import { useParams } from 'react-router-dom';
 import ConsumerGroupDetail from './ConsumerGroupDetail';
 import ConsumerGroupHealthCheck from '@src/components/CardBar/ConsumerGroupHealthCheck';
 import DBreadcrumb from 'knowdesign/es/extend/d-breadcrumb';
-import { hashDataParse } from '@src/constants/common';
+import { hashDataParse, tableHeaderPrefix } from '@src/constants/common';

 const { Option } = Select;

@@ -181,17 +181,13 @@ const AutoPage = (props: any) => {
      <div className={`operating-state ${scene !== 'topicDetail' && 'clustom-table-content'}`}>
        {/* <CardBar cardColumns={data}></CardBar> */}
        {scene !== 'topicDetail' && (
-          <div className="operation-bar">
-            <div className="left">
-              {/* <Radio.Group
-                options={showModes}
-                optionType="button"
-                onChange={(e) => {
-                  setShowMode(e.target.value);
-                }}
-                value={showMode}
-              /> */}
-              <Form.Item label="">
+          <div className={tableHeaderPrefix}>
+            <div className={`${tableHeaderPrefix}-left`}>
+              <div className={`${tableHeaderPrefix}-left-refresh`} onClick={() => searchFn()}>
+                <IconFont className={`${tableHeaderPrefix}-left-refresh-icon`} type="icon-shuaxin1" />
+              </div>
+              <Divider type="vertical" className={`${tableHeaderPrefix}-divider`} />
+              <div className="consumers-search">
                <Input
                  className="search-input-short"
                  placeholder="请输入Consumer Group"
@@ -201,8 +197,6 @@ const AutoPage = (props: any) => {
                  }}
                  onPressEnter={searchFn}
                />
-              </Form.Item>
-              <Form.Item label="">
                <Input
                  className="search-input-short"
                  placeholder="请输入Topic name"
@@ -212,12 +206,12 @@ const AutoPage = (props: any) => {
                  }}
                  onPressEnter={searchFn}
                />
-              </Form.Item>
+              </div>
              {/* <Button type="primary" className="add-btn" onClick={searchFn}>
                查询
              </Button> */}
            </div>
-            <div className="right"></div>
+            {/* <div className="right"></div> */}
          </div>
        )}
        {/* <Table columns={columns} dataSource={consumerGroupList} scroll={{  x: 1500 }} />
--- a/km-console/packages/layout-clusters-fe/src/pages/Jobs/index.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/Jobs/index.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, memo } from 'react';
 import { useParams, useHistory, useLocation } from 'react-router-dom';
-import { ProTable, Drawer, Utils, AppContainer, Form, Select, Input, Button, message, Modal } from 'knowdesign';
+import { ProTable, Drawer, Utils, AppContainer, Form, Select, Input, Button, message, Modal, IconFont, Divider } from 'knowdesign';
 import API from '../../api';
 import { getJobsListColumns, defaultPagination, runningStatus, jobType } from './config';
 import JobsCheck from '@src/components/CardBar/JobsCheck';
@@ -10,6 +10,7 @@ import './index.less';
 import ReplicaChange from '@src/components/TopicJob/ReplicaChange';
 import ReplicaMove from '@src/components/TopicJob/ReplicaMove';
 import BalanceDrawer from '../LoadRebalance/BalanceDrawer';
+import { tableHeaderPrefix } from '@src/constants/common';
 const { request } = Utils;

 const JobsList: React.FC = (props: any) => {
@@ -171,35 +172,44 @@ const JobsList: React.FC = (props: any) => {
      </div>
      {/* <Form form={form} layout="inline" onFinish={onFinish}> */}
      <div className="clustom-table-content">
-        <div style={{ display: 'flex', alignItems: 'center', marginBottom: '12px' }}>
-          <Form form={form} layout="inline" onFinish={onFinish}>
-            <Form.Item name="type">
-              <Select options={jobType} style={{ width: '190px' }} className={'detail-table-select'} placeholder="选择任务类型" />
-            </Form.Item>
-            <Form.Item name="jobTarget">
-              <Input allowClear style={{ width: '190px' }} placeholder="请输入执行任务对象" />
-            </Form.Item>
-            <Form.Item name="status">
-              <Select
-                mode="multiple"
-                maxTagCount={'responsive'}
-                options={runningStatus}
-                style={{ width: '190px' }}
-                className={'detail-table-select'}
-                placeholder="选择运行状态"
-                showArrow
-                allowClear
-              />
-            </Form.Item>
-          </Form>
-          <div>
-            <Form style={{ justifyContent: 'flex-end' }} form={form} layout="inline" onFinish={onFinish}>
-              <Form.Item style={{ marginRight: 0 }}>
-                <Button type="primary" ghost htmlType="submit">
-                  查询
-                </Button>
+        <div className={tableHeaderPrefix}>
+          <div className={`${tableHeaderPrefix}-left`}>
+            <div
+              className={`${tableHeaderPrefix}-left-refresh`}
+              onClick={() => genData({ pageNo: pagination.current, pageSize: pagination.pageSize })}
+            >
+              <IconFont className={`${tableHeaderPrefix}-left-refresh-icon`} type="icon-shuaxin1" />
+            </div>
+            <Divider type="vertical" className={`${tableHeaderPrefix}-divider`} />
+            <Form form={form} layout="inline" onFinish={onFinish}>
+              <Form.Item name="type">
+                <Select options={jobType} style={{ width: '190px' }} className={'detail-table-select'} placeholder="选择任务类型" />
+              </Form.Item>
+              <Form.Item name="jobTarget">
+                <Input allowClear style={{ width: '190px' }} placeholder="请输入执行任务对象" />
+              </Form.Item>
+              <Form.Item name="status">
+                <Select
+                  mode="multiple"
+                  maxTagCount={'responsive'}
+                  options={runningStatus}
+                  style={{ width: '190px' }}
+                  className={'detail-table-select'}
+                  placeholder="选择运行状态"
+                  showArrow
+                  allowClear
+                />
              </Form.Item>
            </Form>
+            <div>
+              <Form style={{ justifyContent: 'flex-end' }} form={form} layout="inline" onFinish={onFinish}>
+                <Form.Item style={{ marginRight: 0 }}>
+                  <Button type="primary" ghost htmlType="submit">
+                    查询
+                  </Button>
+                </Form.Item>
+              </Form>
+            </div>
          </div>
        </div>
        {/* </Form> */}
--- a/km-console/packages/layout-clusters-fe/src/pages/LoadRebalance/index.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/LoadRebalance/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Select, Form, Utils, AppContainer, Input, Button, ProTable, Badge, Tag, SearchInput } from 'knowdesign';
+import { Select, Form, Utils, AppContainer, Input, Button, ProTable, Badge, Tag, SearchInput, IconFont, Divider } from 'knowdesign';
 import BalanceDrawer from './BalanceDrawer';
 import HistoryDrawer from './HistoryDrawer';
 import DBreadcrumb from 'knowdesign/es/extend/d-breadcrumb';
@@ -9,6 +9,7 @@ import './index.less';
 import LoadRebalanceCardBar from '@src/components/CardBar/LoadRebalanceCardBar';
 import { BalanceFilter } from './BalanceFilter';
 import { ClustersPermissionMap } from '../CommonConfig';
+import { tableHeaderPrefix } from '@src/constants/common';

 const Balance_Status_OPTIONS = [
  {
@@ -339,7 +340,17 @@ const LoadBalance: React.FC = (props: any) => {
      </div>
      <div className="load-rebalance-container">
        <div className="balance-main clustom-table-content">
-          <div className="header-con">
+          <div className={tableHeaderPrefix}>
+            <div className={`${tableHeaderPrefix}-left`}>
+              <div
+                className={`${tableHeaderPrefix}-left-refresh`}
+                onClick={() => getList({ searchKeywords: searchValue, stateParam: balanceList })}
+              >
+                <IconFont className={`${tableHeaderPrefix}-left-refresh-icon`} type="icon-shuaxin1" />
+              </div>
+              <Divider type="vertical" className={`${tableHeaderPrefix}-divider`} />
+              <BalanceFilter title="负载均衡列表筛选" data={[]} getNorms={getNorms} filterList={filterList} />
+            </div>
            {/* <Form form={form} layout="inline" onFinish={resetList}>
              <Form.Item name="status">
                <Select className="grid-select" placeholder="请选择状态" style={{ width: '180px' }} options={Balance_Status_OPTIONS} />
@@ -354,8 +365,7 @@ const LoadBalance: React.FC = (props: any) => {
                </Button>
              </Form.Item>
            </Form> */}
-            <BalanceFilter title="负载均衡列表筛选" data={[]} getNorms={getNorms} filterList={filterList} />
-            <div className="float-r">
+            <div className={`${tableHeaderPrefix}-right`}>
              <SearchInput
                onSearch={hostSearch}
                attrs={{
--- a/km-console/packages/layout-clusters-fe/src/pages/SecurityACLs/index.less
+++ b/km-console/packages/layout-clusters-fe/src/pages/SecurityACLs/index.less
@@ -10,11 +10,6 @@
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.01), 0 3px 6px 3px rgba(0, 0, 0, 0.01), 0 2px 6px 0 rgba(0, 0, 0, 0.03);
    // border-radius: 12px;
  }
-  .operate-bar {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 12px;
-  }
 }

 .acls-edit-drawer {
--- a/km-console/packages/layout-clusters-fe/src/pages/SecurityACLs/index.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/SecurityACLs/index.tsx
@@ -1,7 +1,8 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Button, Form, Input, Select, Modal, message, ProTable, AppContainer, DKSBreadcrumb, Utils } from 'knowdesign';
+import { Button, Form, Input, Select, Modal, message, ProTable, AppContainer, DKSBreadcrumb, Utils, IconFont, Divider } from 'knowdesign';
 import ACLsCardBar from '@src/components/CardBar/ACLsCardBar';
 import api from '@src/api';
+import { tableHeaderPrefix } from '@src/constants/common';
 import { useParams } from 'react-router-dom';
 import AddACLDrawer, {
  ACL_OPERATION,
@@ -205,37 +206,45 @@ const SecurityACLs = (): JSX.Element => {
        <ACLsCardBar />
      </div>
      <div className="security-acls-page-list clustom-table-content">
-        <div className="operate-bar">
-          <Form form={form} layout="inline" onFinish={() => getACLs({ page: 1 })}>
-            <Form.Item name="kafkaUser">
-              <Input placeholder="请输入 Principal" />
-            </Form.Item>
-            <Form.Item name="resourceType">
-              <Select
-                placeholder="选择 ResourceType"
-                options={Object.keys(RESOURCE_TO_OPERATIONS_MAP).map((key) => ({ label: key, value: key }))}
-                mode="multiple"
-                maxTagCount="responsive"
-                allowClear
-                style={{ width: 200 }}
-              />
-            </Form.Item>
-            <Form.Item name="resourceName">
-              <Input placeholder="请输入 Resource" />
-            </Form.Item>
-            <Form.Item>
-              <Button type="primary" ghost htmlType="submit">
-                查询
-              </Button>
-            </Form.Item>
-          </Form>
-          <Button
-            type="primary"
-            // icon={<PlusOutlined />}
-            onClick={() => editDrawerRef.current.onOpen(true, getACLs)}
-          >
-            新增ACL
-          </Button>
+        <div className={tableHeaderPrefix}>
+          <div className={`${tableHeaderPrefix}-left`}>
+            <div className={`${tableHeaderPrefix}-left-refresh`} onClick={() => getACLs()}>
+              <IconFont className={`${tableHeaderPrefix}-left-refresh-icon`} type="icon-shuaxin1" />
+            </div>
+            <Divider type="vertical" className={`${tableHeaderPrefix}-divider`} />
+            <Form form={form} layout="inline" onFinish={() => getACLs({ page: 1 })}>
+              <Form.Item name="kafkaUser">
+                <Input placeholder="请输入 Principal" />
+              </Form.Item>
+              <Form.Item name="resourceType">
+                <Select
+                  placeholder="选择 ResourceType"
+                  options={Object.keys(RESOURCE_TO_OPERATIONS_MAP).map((key) => ({ label: key, value: key }))}
+                  mode="multiple"
+                  maxTagCount="responsive"
+                  allowClear
+                  style={{ width: 200 }}
+                />
+              </Form.Item>
+              <Form.Item name="resourceName">
+                <Input placeholder="请输入 Resource" />
+              </Form.Item>
+              <Form.Item>
+                <Button type="primary" ghost htmlType="submit">
+                  查询
+                </Button>
+              </Form.Item>
+            </Form>
+          </div>
+          <div className={`${tableHeaderPrefix}-right`}>
+            <Button
+              type="primary"
+              // icon={<PlusOutlined />}
+              onClick={() => editDrawerRef.current.onOpen(true, getACLs)}
+            >
+              新增ACL
+            </Button>
+          </div>
        </div>
        <ProTable
          tableProps={{
--- a/km-console/packages/layout-clusters-fe/src/pages/SecurityUsers/index.less
+++ b/km-console/packages/layout-clusters-fe/src/pages/SecurityUsers/index.less
@@ -8,15 +8,6 @@
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.01), 0 3px 6px 3px rgba(0, 0, 0, 0.01), 0 2px 6px 0 rgba(0, 0, 0, 0.03);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
-    .operate-bar {
-      display: flex;
-      justify-content: right;
-      margin-bottom: 12px;
-      .search-input {
-        width: 248px;
-        margin-right: 8px;
-      }
-    }
  }
 }

--- a/km-console/packages/layout-clusters-fe/src/pages/SecurityUsers/index.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/SecurityUsers/index.tsx
@@ -22,6 +22,7 @@ import './index.less';
 import api from '@src/api';
 import { useParams } from 'react-router-dom';
 import { regKafkaPassword } from '@src/constants/reg';
+import { tableHeaderPrefix } from '@src/constants/common';

 export const randomString = (len = 32, chars = 'abcdefghijklmnopqrstuvwxyz1234567890'): string => {
  const maxPos = chars.length;
@@ -426,34 +427,41 @@ const SecurityUsers = (): JSX.Element => {
        ]}
      />
      <div className="security-users-page-list">
-        <div className="operate-bar">
-          <Input
-            className="search-input"
-            suffix={
-              <IconFont
-                type="icon-fangdajing"
-                onClick={(_) => {
-                  setSearchKeywords(searchKeywordsInput);
-                }}
-                style={{ fontSize: '16px' }}
-              />
-            }
-            placeholder="请输入 Kafka User"
-            value={searchKeywordsInput}
-            onPressEnter={(_) => {
-              setSearchKeywords(searchKeywordsInput);
-            }}
-            onChange={(e) => {
-              setSearchKeywordsInput(e.target.value);
-            }}
-          />
-          <Button
-            type="primary"
-            // icon={<PlusOutlined />}
-            onClick={() => editDrawerRef.current.onOpen(true, UsersOperate.Add, getKafkaUserList)}
-          >
-            新增KafkaUser
-          </Button>
+        <div className={tableHeaderPrefix}>
+          <div className={`${tableHeaderPrefix}-left`}>
+            <div className={`${tableHeaderPrefix}-left-refresh`} onClick={() => getKafkaUserList()}>
+              <IconFont className={`${tableHeaderPrefix}-left-refresh-icon`} type="icon-shuaxin1" />
+            </div>
+          </div>
+          <div className={`${tableHeaderPrefix}-right`}>
+            <Input
+              className="search-input"
+              suffix={
+                <IconFont
+                  type="icon-fangdajing"
+                  onClick={(_) => {
+                    setSearchKeywords(searchKeywordsInput);
+                  }}
+                  style={{ fontSize: '16px' }}
+                />
+              }
+              placeholder="请输入 Kafka User"
+              value={searchKeywordsInput}
+              onPressEnter={(_) => {
+                setSearchKeywords(searchKeywordsInput);
+              }}
+              onChange={(e) => {
+                setSearchKeywordsInput(e.target.value);
+              }}
+            />
+            <Button
+              type="primary"
+              // icon={<PlusOutlined />}
+              onClick={() => editDrawerRef.current.onOpen(true, UsersOperate.Add, getKafkaUserList)}
+            >
+              新增KafkaUser
+            </Button>
+          </div>
        </div>

        <ProTable
--- a/km-console/packages/layout-clusters-fe/src/pages/TopicList/index.less
+++ b/km-console/packages/layout-clusters-fe/src/pages/TopicList/index.less
@@ -1,48 +1,9 @@
-.operation-bar {
-  // height: 60px;
+.internal-switch {
  display: flex;
-  justify-content: space-between;
  align-items: center;
-  margin-bottom: 10px;
-  .left {
-    display: flex;
-    align-items: center;
-    .divider {
-      margin-left: 8px;
-      margin-right: 8px;
-      width: 1px;
-      height: 20px;
-      background-color: #ced4da;
-    }
-    .internal-switch {
-      display: flex;
-      align-items: center;
-      > span {
-        margin-left: 4px;
-        color: #74788d;
-      }
-    }
-  }
-  .right {
-    display: flex;
-    align-items: center;
-    .dcloud-form-item {
-      margin-bottom: 0;
-    }
-    .search-input {
-      width: 248px;
-      margin-right: 8px;
-    }
-    .search-input-short {
-      width: 120px;
-      margin-right: 8px;
-    }
-    .batch-btn {
-      margin-right: 8px;
-    }
-    .add-btn {
-      width: 117px;
-    }
+  > span {
+    margin-left: 4px;
+    color: #74788d;
  }
 }
 .operation-list {
--- a/km-console/packages/layout-clusters-fe/src/pages/TopicList/index.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/TopicList/index.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/display-name */
 import React, { useState, useEffect } from 'react';
 import { useHistory, useParams } from 'react-router-dom';
-import { AppContainer, IconFont, Input, ProTable, Select, Switch, Tooltip, Utils, Dropdown, Menu, Button } from 'knowdesign';
+import { AppContainer, IconFont, Input, ProTable, Select, Switch, Tooltip, Utils, Dropdown, Menu, Button, Divider } from 'knowdesign';
 import Create from './Create';
 import './index.less';
 import Api from '@src/api/index';
@@ -16,6 +16,7 @@ import SmallChart from '@src/components/SmallChart';
 import ReplicaMove from '@src/components/TopicJob/ReplicaMove';
 import { formatAssignSize } from '../Jobs/config';
 import { DownOutlined } from '@ant-design/icons';
+import { tableHeaderPrefix } from '@src/constants/common';

 const { Option } = Select;

@@ -66,6 +67,7 @@ const AutoPage = (props: any) => {
    //   params.sortField = sortObj.sortField;
    //   params.sortType = sortObj.sortType || 'desc';
    // }
+    setTopicListLoading(true);
    Utils.post(Api.getTopicsList(Number(routeParams.clusterId)), params)
      .then((data: any) => {
        setTopicListLoading(false);
@@ -79,7 +81,6 @@ const AutoPage = (props: any) => {
      });
  };
  useEffect(() => {
-    setTopicListLoading(true);
    getTopicsList();
  }, [sortObj, showInternalTopics, searchKeywords, pageIndex, pageSize]);

@@ -285,26 +286,17 @@ const AutoPage = (props: any) => {
        <TopicHealthCheck></TopicHealthCheck>
      </div>
      <div className="clustom-table-content">
-        <div className="operation-bar">
-          <div className="left">
+        <div className={`${tableHeaderPrefix}`}>
+          <div className={`${tableHeaderPrefix}-left`}>
            {/* 批量扩缩副本 */}
            <ReplicaChange drawerVisible={changeVisible} jobId={''} topics={selectedRowKeys} onClose={onclose}></ReplicaChange>
            {/* 批量迁移 */}
            <ReplicaMove drawerVisible={moveVisible} jobId={''} topics={selectedRowKeys} onClose={onclose}></ReplicaMove>
-            {/* <Select style={{ width: 140 }} placeholder="批量操作" value={selectValue} disabled={selectedRowKeys.length <= 0}>
-              <Option value="expandAndReduce">
-                <div onClick={() => setChangeVisible(true)}>批量扩缩副本</div>
-              </Option>
-              <Option value="transfer">
-                <div onClick={() => setMoveVisible(true)}>批量迁移</div>
-              </Option>
-            </Select> */}
-            {/* <Dropdown overlay={menu} disabled={selectedRowKeys.length <= 0} trigger={['click']}>
-              <Button icon={<DownOutlined />} type="primary" ghost disabled={selectedRowKeys.length <= 0}>
-                批量操作
-              </Button>
-            </Dropdown> */}
-            {/* <div className="divider"></div> */}
+
+            <div className={`${tableHeaderPrefix}-left-refresh`} onClick={() => getTopicsList()}>
+              <IconFont className={`${tableHeaderPrefix}-left-refresh-icon`} type="icon-shuaxin1" />
+            </div>
+            <Divider type="vertical" className={`${tableHeaderPrefix}-divider`} />
            <div className="internal-switch">
              <Switch
                size="small"
@@ -316,7 +308,7 @@ const AutoPage = (props: any) => {
              <span>展示系统Topic</span>
            </div>
          </div>
-          <div className="right">
+          <div className={`${tableHeaderPrefix}-right`}>
            <Input
              className="search-input"
              suffix={