Merge pull request #611 from GraceWalk/dev

修复前端bug和体验问题

km-console/package-lock.json

@@ -5100,9 +5100,9 @@
       }
     },
     "is-callable": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmmirror.com/is-callable/-/is-callable-1.2.5.tgz",
-      "integrity": "sha512-ZIWRujF6MvYGkEuHMYtFRkL2wAtFw89EHfKlXrkPkjQZZRWeh9L1q3SV13NIfHnqxugjLvAOkEHx9mb1zcMnEw==",
+      "version": "1.2.6",
+      "resolved": "https://registry.npmmirror.com/is-callable/-/is-callable-1.2.6.tgz",
+      "integrity": "sha512-krO72EO2NptOGAX2KYyqbP9vYMlNAXdB53rq6f8LXY6RY7JdSR/3BD6wLUlPHSAesmY9vstNrjvqGaCiRK/91Q==",
       "dev": true
     },
     "is-ci": {

km-console/packages/config-manager-fe/config/d1-webpack.base.js

@@ -1,205 +0,0 @@
-/* eslint-disable */
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const ProgressBarPlugin = require('progress-bar-webpack-plugin');
-const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
-const StatsPlugin = require('stats-webpack-plugin');
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-const TerserJSPlugin = require('terser-webpack-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-const HappyPack = require('happypack');
-const os = require('os');
-const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
-const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
-const theme = require('./theme');
-var cwd = process.cwd();
-
-const path = require('path');
-const isProd = process.env.NODE_ENV === 'production';
-const babelOptions = {
-  cacheDirectory: true,
-  babelrc: false,
-  presets: [require.resolve('@babel/preset-env'), require.resolve('@babel/preset-typescript'), require.resolve('@babel/preset-react')],
-  plugins: [
-    [require.resolve('@babel/plugin-proposal-decorators'), { legacy: true }],
-    [require.resolve('@babel/plugin-proposal-class-properties'), { loose: true }],
-    [require.resolve('@babel/plugin-proposal-private-methods'), { loose: true }],
-    require.resolve('@babel/plugin-proposal-export-default-from'),
-    require.resolve('@babel/plugin-proposal-export-namespace-from'),
-    require.resolve('@babel/plugin-proposal-object-rest-spread'),
-    require.resolve('@babel/plugin-transform-runtime'),
-    require.resolve('@babel/plugin-proposal-optional-chaining'), //
-    require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'), // 解决 ?? 无法转义问题
-    require.resolve('@babel/plugin-proposal-numeric-separator'), // 转义 1_000_000
-    !isProd && require.resolve('react-refresh/babel'),
-  ]
-    .filter(Boolean)
-    .concat([
-      [
-        'babel-plugin-import',
-        {
-          libraryName: 'antd',
-          style: true,
-        },
-      ],
-      '@babel/plugin-transform-object-assign',
-    ]),
-};
-module.exports = () => {
-  const manifestName = `manifest.json`;
-  const cssFileName = isProd ? '[name]-[chunkhash].css' : '[name].css';
-
-  const plugins = [
-    new ProgressBarPlugin(),
-    new CaseSensitivePathsPlugin(),
-    new MiniCssExtractPlugin({
-      filename: cssFileName,
-    }),
-    new StatsPlugin(manifestName, {
-      chunkModules: false,
-      source: true,
-      chunks: false,
-      modules: false,
-      assets: true,
-      children: false,
-      exclude: [/node_modules/],
-    }),
-    new HappyPack({
-      id: 'babel',
-      loaders: [
-        'cache-loader',
-        {
-          loader: 'babel-loader',
-          options: babelOptions,
-        },
-      ],
-      threadPool: happyThreadPool,
-    }),
-    !isProd &&
-      new ReactRefreshWebpackPlugin({
-        overlay: false,
-      }),
-    // new BundleAnalyzerPlugin({
-    //   analyzerPort: 8889
-    // }),
-  ].filter(Boolean);
-  if (isProd) {
-    plugins.push(new CleanWebpackPlugin());
-  }
-  return {
-    externals: isProd
-      ? [
-          /^react$/,
-          /^react\/lib.*/,
-          /^react-dom$/,
-          /.*react-dom.*/,
-          /^single-spa$/,
-          /^single-spa-react$/,
-          /^moment$/,
-          /^antd$/,
-          /^lodash$/,
-          /^react-router$/,
-          /^react-router-dom$/,
-        ]
-      : [],
-    resolve: {
-      symlinks: false,
-      extensions: ['.web.jsx', '.web.js', '.ts', '.tsx', '.js', '.jsx', '.json'],
-      alias: {
-        // '@pkgs': path.resolve(cwd, 'src/packages'),
-        '@pkgs': path.resolve(cwd, './node_modules/@didi/d1-packages'),
-        '@cpts': path.resolve(cwd, 'src/components'),
-        '@interface': path.resolve(cwd, 'src/interface'),
-        '@apis': path.resolve(cwd, 'src/api'),
-        react: path.resolve('./node_modules/react'),
-        actions: path.resolve(cwd, 'src/actions'),
-        lib: path.resolve(cwd, 'src/lib'),
-        constants: path.resolve(cwd, 'src/constants'),
-        components: path.resolve(cwd, 'src/components'),
-        container: path.resolve(cwd, 'src/container'),
-        api: path.resolve(cwd, 'src/api'),
-        assets: path.resolve(cwd, 'src/assets'),
-        mobxStore: path.resolve(cwd, 'src/mobxStore'),
-      },
-    },
-    plugins,
-    module: {
-      rules: [
-        {
-          parser: { system: false },
-        },
-        {
-          test: /\.(js|jsx|ts|tsx)$/,
-          exclude: /node_modules\/(?!react-intl|@didi\/dcloud-design)/,
-          use: [
-            {
-              loader: 'happypack/loader?id=babel',
-            },
-          ],
-        },
-        {
-          test: /\.(png|svg|jpeg|jpg|gif|ttf|woff|woff2|eot|pdf)$/,
-          use: [
-            {
-              loader: 'file-loader',
-              options: {
-                name: '[name].[ext]',
-                outputPath: './assets/image/',
-                esModule: false,
-              },
-            },
-          ],
-        },
-        {
-          test: /\.(css|less)$/,
-          use: [
-            {
-              loader: MiniCssExtractPlugin.loader,
-            },
-            'css-loader',
-            {
-              loader: 'less-loader',
-              options: {
-                javascriptEnabled: true,
-                modifyVars: theme,
-              },
-            },
-          ],
-        },
-      ],
-    },
-    optimization: Object.assign(
-      {
-        splitChunks: {
-          cacheGroups: {
-            vendor: {
-              test: /[\\/]node_modules[\\/]/,
-              chunks: 'all',
-              name: 'vendor',
-              priority: 10,
-              enforce: true,
-              minChunks: 1,
-              maxSize: 3500000,
-            },
-          },
-        },
-      },
-      isProd
-        ? {
-            minimizer: [
-              new TerserJSPlugin({
-                cache: true,
-                sourceMap: true,
-              }),
-              new OptimizeCSSAssetsPlugin({}),
-            ],
-          }
-        : {}
-    ),
-    devtool: isProd ? 'cheap-module-source-map' : 'source-map',
-    node: {
-      fs: 'empty',
-      net: 'empty',
-      tls: 'empty',
-    },
-  };
-};

km-console/packages/config-manager-fe/config/webpack.common.js

@@ -0,0 +1,132 @@
+const path = require('path');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
+const StatsPlugin = require('stats-webpack-plugin');
+const HappyPack = require('happypack');
+const os = require('os');
+const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
+const theme = require('./theme');
+const pkgJson = require('../package');
+
+const devMode = process.env.NODE_ENV === 'development';
+const babelOptions = {
+  cacheDirectory: true,
+  babelrc: false,
+  presets: [require.resolve('@babel/preset-env'), require.resolve('@babel/preset-typescript'), require.resolve('@babel/preset-react')],
+  plugins: [
+    [require.resolve('@babel/plugin-proposal-decorators'), { legacy: true }],
+    [require.resolve('@babel/plugin-proposal-class-properties'), { loose: true }],
+    [require.resolve('@babel/plugin-proposal-private-methods'), { loose: true }],
+    [require.resolve('@babel/plugin-proposal-private-property-in-object'), { loose: true }],
+    require.resolve('@babel/plugin-proposal-export-default-from'),
+    require.resolve('@babel/plugin-proposal-export-namespace-from'),
+    require.resolve('@babel/plugin-proposal-object-rest-spread'),
+    require.resolve('@babel/plugin-transform-runtime'),
+    require.resolve('@babel/plugin-proposal-optional-chaining'), //
+    require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'), // 解决 ?? 无法转义问题
+    require.resolve('@babel/plugin-proposal-numeric-separator'), // 转义 1_000_000
+    devMode && require.resolve('react-refresh/babel'),
+  ].filter(Boolean),
+};
+
+module.exports = {
+  entry: {
+    [pkgJson.ident]: ['./src/index.tsx'],
+  },
+  resolve: {
+    symlinks: false,
+    extensions: ['.web.jsx', '.web.js', '.ts', '.tsx', '.js', '.jsx', '.json'],
+    alias: {
+      '@src': path.resolve(process.cwd(), 'src'),
+    },
+  },
+  plugins: [
+    new ProgressBarPlugin(),
+    new CaseSensitivePathsPlugin(),
+    new StatsPlugin('manifest.json', {
+      chunkModules: false,
+      source: true,
+      chunks: false,
+      modules: false,
+      assets: true,
+      children: false,
+      exclude: [/node_modules/],
+    }),
+    new HappyPack({
+      id: 'babel',
+      loaders: [
+        'cache-loader',
+        {
+          loader: 'babel-loader',
+          options: babelOptions,
+        },
+      ],
+      threadPool: happyThreadPool,
+    }),
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
+        RUN_ENV: JSON.stringify(process.env.RUN_ENV),
+      },
+    }),
+    new HtmlWebpackPlugin({
+      meta: {
+        manifest: 'manifest.json',
+      },
+      template: './src/index.html',
+      inject: 'body',
+    }),
+  ].filter(Boolean),
+  module: {
+    rules: [
+      {
+        parser: { system: false },
+      },
+      {
+        test: /\.(js|jsx|ts|tsx)$/,
+        exclude: /node_modules\/(?!react-intl|@didi\/dcloud-design)/,
+        use: [
+          {
+            loader: 'happypack/loader?id=babel',
+          },
+        ],
+      },
+      {
+        test: /\.(png|svg|jpeg|jpg|gif|ttf|woff|woff2|eot|pdf)$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: '[name].[ext]',
+              outputPath: './assets/image/',
+              esModule: false,
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(css|less)$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          {
+            loader: 'less-loader',
+            options: {
+              javascriptEnabled: true,
+              modifyVars: theme,
+            },
+          },
+        ],
+      },
+    ],
+  },
+  node: {
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty',
+  },
+  stats: 'errors-warnings',
+};

km-console/packages/config-manager-fe/config/webpack.dev.js

@@ -0,0 +1,35 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+const pkgJson = require('../package');
+
+module.exports = {
+  mode: 'development',
+  plugins: [
+    new MiniCssExtractPlugin(),
+    new ReactRefreshWebpackPlugin({
+      overlay: false,
+    }),
+  ],
+  devServer: {
+    host: '127.0.0.1',
+    port: pkgJson.port,
+    hot: true,
+    open: false,
+    publicPath: `http://localhost:${pkgJson.port}/${pkgJson.ident}/`,
+    inline: true,
+    disableHostCheck: true,
+    historyApiFallback: true,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+    },
+  },
+  output: {
+    path: '/',
+    publicPath: `http://localhost:${pkgJson.port}/${pkgJson.ident}/`,
+    library: pkgJson.ident,
+    libraryTarget: 'amd',
+    filename: '[name].js',
+    chunkFilename: '[name].js',
+  },
+  devtool: 'cheap-module-eval-source-map',
+};

km-console/packages/config-manager-fe/config/webpack.prod.js

@@ -0,0 +1,59 @@
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const TerserJSPlugin = require('terser-webpack-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const pkgJson = require('../package');
+
+module.exports = {
+  mode: 'production',
+  externals: [
+    /^react$/,
+    /^react\/lib.*/,
+    /^react-dom$/,
+    /.*react-dom.*/,
+    /^single-spa$/,
+    /^single-spa-react$/,
+    /^moment$/,
+    /^lodash$/,
+    /^react-router$/,
+    /^react-router-dom$/,
+  ],
+  plugins: [
+    new CleanWebpackPlugin(),
+    new MiniCssExtractPlugin({
+      filename: '[name]-[chunkhash].css',
+    }),
+  ],
+  output: {
+    path: path.resolve(process.cwd(), `../../../km-rest/src/main/resources/templates/${pkgJson.ident}`),
+    publicPath: `${process.env.PUBLIC_PATH}/${pkgJson.ident}/`,
+    library: pkgJson.ident,
+    libraryTarget: 'amd',
+    filename: '[name]-[chunkhash].js',
+    chunkFilename: '[name]-[chunkhash].js',
+  },
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        vendor: {
+          test: /[\\/]node_modules[\\/]/,
+          chunks: 'all',
+          name: 'vendor',
+          priority: 10,
+          enforce: true,
+          minChunks: 1,
+          maxSize: 3500000,
+        },
+      },
+    },
+    minimizer: [
+      new TerserJSPlugin({
+        cache: true,
+        sourceMap: true,
+      }),
+      new OptimizeCSSAssetsPlugin({}),
+    ],
+  },
+  devtool: 'none',
+};

km-console/packages/config-manager-fe/package-lock.json

@@ -1344,6 +1344,16 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
+    "@knowdesign/icons": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/@knowdesign/icons/-/icons-1.0.0.tgz",
+      "integrity": "sha512-7c+h2TSbh2ihTkXIivuO+DddNC5wG7hVv9SS4ccmkvTKls2ZTLitPu+U0wpufDxPhkPMaKEQfsECsVJ+7jLMiw==",
+      "requires": {
+        "@ant-design/colors": "^6.0.0",
+        "@ant-design/icons": "^4.7.0",
+        "react": "16.12.0"
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmmirror.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -6815,9 +6825,9 @@
       "dev": true
     },
     "is-callable": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmmirror.com/is-callable/-/is-callable-1.2.5.tgz",
-      "integrity": "sha512-ZIWRujF6MvYGkEuHMYtFRkL2wAtFw89EHfKlXrkPkjQZZRWeh9L1q3SV13NIfHnqxugjLvAOkEHx9mb1zcMnEw==",
+      "version": "1.2.6",
+      "resolved": "https://registry.npmmirror.com/is-callable/-/is-callable-1.2.6.tgz",
+      "integrity": "sha512-krO72EO2NptOGAX2KYyqbP9vYMlNAXdB53rq6f8LXY6RY7JdSR/3BD6wLUlPHSAesmY9vstNrjvqGaCiRK/91Q==",
       "dev": true
     },
     "is-color-stop": {

km-console/packages/config-manager-fe/package.json

@@ -21,9 +21,11 @@
     "build": "cross-env NODE_ENV=production webpack --max_old_space_size=8000"
   },
   "dependencies": {
+    "@knowdesign/icons": "^1.0.0",
     "babel-preset-react-app": "^10.0.0",
     "classnames": "^2.2.6",
     "dotenv": "^16.0.1",
+    "knowdesign": "1.3.7",
     "less": "^3.9.0",
     "lodash": "^4.17.11",
     "mobx": "4.15.7",
@@ -36,8 +38,7 @@
     "react-intl": "^3.2.1",
     "react-router-cache-route": "^1.11.1",
     "single-spa": "^5.8.0",
-    "single-spa-react": "^2.14.0",
-    "knowdesign": "1.3.7"
+    "single-spa-react": "^2.14.0"
   },
   "devDependencies": {
     "@ant-design/icons": "^4.6.2",

km-console/packages/config-manager-fe/src/components/TypicalListCard/index.less

@@ -22,6 +22,20 @@
       display: flex;
       justify-content: space-between;
       margin-bottom: 12px;
+      .left,
+      .right {
+        display: flex;
+        align-items: center;
+      }
+      .left .refresh-icon {
+        font-size: 20px;
+        color: #74788d;
+        cursor: pointer;
+      }
+      .right .search-input {
+        width: 248px;
+        margin-right: 8px;
+      }
     }
   }
 }

km-console/packages/config-manager-fe/src/constants/axiosConfig.ts

@@ -47,8 +47,8 @@ serviceInstance.interceptors.response.use(
     return res;
   },
   (err: any) => {
-    const config = err.config;
-    if (!config || !config.retryTimes) return dealResponse(err, config.customNotification);
+    const config = err?.config;
+    if (!config || !config.retryTimes) return dealResponse(err);
     const { __retryCount = 0, retryDelay = 300, retryTimes } = config;
     config.__retryCount = __retryCount;
     if (__retryCount >= retryTimes) {

km-console/packages/config-manager-fe/src/pages/CommonConfig.tsx

@@ -1,6 +1,6 @@
 import React, { useLayoutEffect } from 'react';
 import { Utils, AppContainer } from 'knowdesign';
-import { goLogin } from 'constants/axiosConfig';
+import { goLogin } from '@src/constants/axiosConfig';
 
 // 权限对应表
 export enum ConfigPermissionMap {

km-console/packages/config-manager-fe/src/pages/ConfigManage/index.tsx

@@ -15,6 +15,7 @@ import {
   AppContainer,
   Utils,
 } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 import { PlusOutlined } from '@ant-design/icons';
 import moment from 'moment';
 // 引入代码编辑器
@@ -26,8 +27,8 @@ import 'codemirror/addon/selection/active-line';
 import 'codemirror/addon/edit/closebrackets';
 require('codemirror/mode/xml/xml');
 require('codemirror/mode/javascript/javascript');
-import api from 'api';
-import { defaultPagination } from 'constants/common';
+import api from '@src/api';
+import { defaultPagination } from '@src/constants/common';
 import TypicalListCard from '../../components/TypicalListCard';
 import { ConfigPermissionMap } from '../CommonConfig';
 import { ConfigOperate, ConfigProps } from './config';
@@ -384,7 +385,7 @@ export default () => {
   const onDelete = (record: ConfigProps) => {
     confirm({
       title: '确定删除配置吗?',
-      content: `配置⌈${record.valueName}⌋${record.status === 1 ? '为启用状态，无法删除' : ''}`,
+      content: `配置 [${record.valueName}] ${record.status === 1 ? '为启用状态，无法删除' : ''}`,
       centered: true,
       okText: '删除',
       okType: 'primary',
@@ -398,9 +399,11 @@ export default () => {
       },
       maskClosable: true,
       onOk() {
-        return request(api.editConfig, {
-          method: 'POST',
-          data: record.id,
+        return request(api.delConfig, {
+          method: 'DELETE',
+          params: {
+            id: record.id,
+          },
         }).then((_) => {
           message.success('删除成功');
           getConfigList();
@@ -431,22 +434,28 @@ export default () => {
       <TypicalListCard title="配置管理">
         <div className="config-manage-page">
           <div className="operate-bar">
-            <Form form={form} layout="inline" onFinish={() => getConfigList({ page: 1 })}>
-              <Form.Item name="valueGroup">
-                <Select style={{ width: 180 }} placeholder="请选择模块" options={configGroupList} />
-              </Form.Item>
-              <Form.Item name="valueName">
-                <Input style={{ width: 180 }} placeholder="请输入配置键" />
-              </Form.Item>
-              <Form.Item name="memo">
-                <Input style={{ width: 180 }} placeholder="请输入描述" />
-              </Form.Item>
-              <Form.Item>
-                <Button type="primary" ghost htmlType="submit">
-                  查询
-                </Button>
-              </Form.Item>
-            </Form>
+            <div className="left">
+              <div className="refresh-icon" onClick={() => getConfigList()}>
+                <IconFont className="icon" type="icon-shuaxin1" />
+              </div>
+              <Divider type="vertical" style={{ height: 20, top: 0 }} />
+              <Form form={form} layout="inline" onFinish={() => getConfigList({ page: 1 })}>
+                <Form.Item name="valueGroup">
+                  <Select style={{ width: 180 }} placeholder="请选择模块" options={configGroupList} />
+                </Form.Item>
+                <Form.Item name="valueName">
+                  <Input style={{ width: 180 }} placeholder="请输入配置键" />
+                </Form.Item>
+                <Form.Item name="memo">
+                  <Input style={{ width: 180 }} placeholder="请输入描述" />
+                </Form.Item>
+                <Form.Item>
+                  <Button type="primary" ghost htmlType="submit">
+                    查询
+                  </Button>
+                </Form.Item>
+              </Form>
+            </div>
             {global.hasPermission && global.hasPermission(ConfigPermissionMap.CONFIG_ADD) ? (
               <Button
                 type="primary"

km-console/packages/config-manager-fe/src/pages/OperationLog/index.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Form, Input, Select, ProTable, DatePicker, Utils, Tooltip } from 'knowdesign';
-import api from 'api';
-import { defaultPagination } from 'constants/common';
+import { Button, Form, Input, Select, ProTable, DatePicker, Utils, Tooltip, Divider } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
+import api from '@src/api';
+import { defaultPagination } from '@src/constants/common';
 import TypicalListCard from '../../components/TypicalListCard';
 import './index.less';
 import moment from 'moment';
@@ -119,25 +120,32 @@ export default () => {
     <>
       <TypicalListCard title="操作记录">
         <div className="operate-bar">
-          <Form form={form} layout="inline" onFinish={() => getData({ page: 1 })}>
-            <Form.Item name="targetType">
-              <Select placeholder="请选择模块" options={configGroupList} style={{ width: 160 }} />
-            </Form.Item>
-            <Form.Item name="target">
-              <Input placeholder="请输入操作对象" />
-            </Form.Item>
-            <Form.Item name="detail">
-              <Input placeholder="请输入操作内容" />
-            </Form.Item>
-            <Form.Item name="time">
-              <RangePicker showTime />
-            </Form.Item>
-            <Form.Item>
-              <Button type="primary" ghost htmlType="submit">
-                查询
-              </Button>
-            </Form.Item>
-          </Form>
+          <div className="left">
+            <div className="refresh-icon" onClick={() => getData()}>
+              <IconFont className="icon" type="icon-shuaxin1" />
+            </div>
+            <Divider type="vertical" style={{ height: 20, top: 0 }} />
+
+            <Form form={form} layout="inline" onFinish={() => getData({ page: 1 })}>
+              <Form.Item name="targetType">
+                <Select placeholder="请选择模块" options={configGroupList} style={{ width: 160 }} />
+              </Form.Item>
+              <Form.Item name="target">
+                <Input placeholder="请输入操作对象" />
+              </Form.Item>
+              <Form.Item name="detail">
+                <Input placeholder="请输入操作内容" />
+              </Form.Item>
+              <Form.Item name="time">
+                <RangePicker showTime />
+              </Form.Item>
+              <Form.Item>
+                <Button type="primary" ghost htmlType="submit">
+                  查询
+                </Button>
+              </Form.Item>
+            </Form>
+          </div>
         </div>
 
         <ProTable

km-console/packages/config-manager-fe/src/pages/UserManage/RoleTabContent.tsx

@@ -21,9 +21,9 @@ import {
 } from 'knowdesign';
 import moment from 'moment';
 import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
-import { defaultPagination } from 'constants/common';
+import { defaultPagination } from '@src/constants/common';
 import { RoleProps, PermissionNode, AssignUser, RoleOperate, FormItemPermission } from './config';
-import api from 'api';
+import api from '@src/api';
 import CheckboxGroupContainer from './CheckboxGroupContainer';
 import { ConfigPermissionMap } from '../CommonConfig';
 
@@ -611,38 +611,45 @@ export default (props: { curTabKey: string }): JSX.Element => {
 
   return (
     <>
-      <div className="operate-bar-right">
-        <Input
-          className="search-input"
-          suffix={
-            <IconFont
-              type="icon-fangdajing"
-              onClick={(_) => {
-                setSearchKeywords(searchKeywordsInput);
-              }}
-              style={{ fontSize: '16px' }}
-            />
-          }
-          placeholder="请输入角色名称"
-          value={searchKeywordsInput}
-          onPressEnter={(_) => {
-            setSearchKeywords(searchKeywordsInput);
-          }}
-          onChange={(e) => {
-            setSearchKeywordsInput(e.target.value);
-          }}
-        />
-        {global.hasPermission && global.hasPermission(ConfigPermissionMap.ROLE_ADD) ? (
-          <Button
-            type="primary"
-            icon={<PlusOutlined />}
-            onClick={() => detailRef.current.onOpen(true, RoleOperate.Add, getRoleList, undefined)}
-          >
-            新增角色
-          </Button>
-        ) : (
-          <></>
-        )}
+      <div className="operate-bar">
+        <div className="left">
+          <div className="refresh-icon" onClick={() => getRoleList()}>
+            <IconFont className="icon" type="icon-shuaxin1" />
+          </div>
+        </div>
+        <div className="right">
+          <Input
+            className="search-input"
+            suffix={
+              <IconFont
+                type="icon-fangdajing"
+                onClick={(_) => {
+                  setSearchKeywords(searchKeywordsInput);
+                }}
+                style={{ fontSize: '16px' }}
+              />
+            }
+            placeholder="请输入角色名称"
+            value={searchKeywordsInput}
+            onPressEnter={(_) => {
+              setSearchKeywords(searchKeywordsInput);
+            }}
+            onChange={(e) => {
+              setSearchKeywordsInput(e.target.value);
+            }}
+          />
+          {global.hasPermission && global.hasPermission(ConfigPermissionMap.ROLE_ADD) ? (
+            <Button
+              type="primary"
+              icon={<PlusOutlined />}
+              onClick={() => detailRef.current.onOpen(true, RoleOperate.Add, getRoleList, undefined)}
+            >
+              新增角色
+            </Button>
+          ) : (
+            <></>
+          )}
+        </div>
       </div>
 
       <ProTable

km-console/packages/config-manager-fe/src/pages/UserManage/UserTabContent.tsx

@@ -1,12 +1,13 @@
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { Form, ProTable, Select, Button, Input, Modal, message, Drawer, Space, Divider, AppContainer, Utils } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 import { PlusOutlined, QuestionCircleOutlined } from '@ant-design/icons';
 import moment from 'moment';
-import { defaultPagination } from 'constants/common';
+import { defaultPagination } from '@src/constants/common';
 import { UserProps, UserOperate } from './config';
 import CheckboxGroupContainer from './CheckboxGroupContainer';
 import TagsWithHide from '../../components/TagsWithHide/index';
-import api from 'api';
+import api from '@src/api';
 import { ConfigPermissionMap } from '../CommonConfig';
 
 const { confirm } = Modal;
@@ -341,22 +342,29 @@ export default (props: { curTabKey: string }) => {
   return (
     <>
       <div className="operate-bar">
-        <Form form={form} layout="inline" onFinish={() => getUserList({ page: 1 })}>
-          <Form.Item name="userName">
-            <Input placeholder="请输入用户账号" />
-          </Form.Item>
-          <Form.Item name="realName">
-            <Input placeholder="请输入用户实名" />
-          </Form.Item>
-          <Form.Item name="roleId">
-            <Select style={{ width: 190 }} placeholder="选择平台已创建的角色名" options={simpleRoleList} />
-          </Form.Item>
-          <Form.Item>
-            <Button type="primary" ghost htmlType="submit">
-              查询
-            </Button>
-          </Form.Item>
-        </Form>
+        <div className="left">
+          <div className="refresh-icon" onClick={() => getUserList()}>
+            <IconFont className="icon" type="icon-shuaxin1" />
+          </div>
+          <Divider type="vertical" style={{ height: 20, top: 0 }} />
+
+          <Form form={form} layout="inline" onFinish={() => getUserList({ page: 1 })}>
+            <Form.Item name="userName">
+              <Input placeholder="请输入用户账号" />
+            </Form.Item>
+            <Form.Item name="realName">
+              <Input placeholder="请输入用户实名" />
+            </Form.Item>
+            <Form.Item name="roleId">
+              <Select style={{ width: 190 }} placeholder="选择平台已创建的角色名" options={simpleRoleList} />
+            </Form.Item>
+            <Form.Item>
+              <Button type="primary" ghost htmlType="submit">
+                查询
+              </Button>
+            </Form.Item>
+          </Form>
+        </div>
         {global.hasPermission && global.hasPermission(ConfigPermissionMap.USER_ADD) ? (
           <Button
             type="primary"

km-console/packages/config-manager-fe/src/pages/UserManage/index.less

@@ -44,13 +44,3 @@
 .role-tab-assign-user .desc-row {
   margin-bottom: 24px;
 }
-
-.operate-bar-right {
-  display: flex;
-  justify-content: right;
-  margin-bottom: 12px;
-  .search-input {
-    width: 248px;
-    margin-right: 8px;
-  }
-}

km-console/packages/config-manager-fe/webpack.config.js

@@ -1,56 +1,9 @@
-/* eslint-disable */
 const path = require('path');
 require('dotenv').config({ path: path.resolve(process.cwd(), '../../.env') });
-const isProd = process.env.NODE_ENV === 'production';
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const webpack = require('webpack');
 const merge = require('webpack-merge');
-const pkgJson = require('./package');
-const getWebpackCommonConfig = require('./config/d1-webpack.base');
-const outPath = path.resolve(__dirname, `../../../km-rest/src/main/resources/templates/${pkgJson.ident}`);
-const jsFileName = isProd ? '[name]-[chunkhash].js' : '[name].js';
+const devMode = process.env.NODE_ENV === 'development';
+const commonConfig = require('./config/webpack.common');
+const devConfig = require('./config/webpack.dev');
+const prodConfig = require('./config/webpack.prod');
 
-module.exports = merge(getWebpackCommonConfig(), {
-  mode: isProd ? 'production' : 'development',
-  entry: {
-    [pkgJson.ident]: ['./src/index.tsx'],
-  },
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
-        RUN_ENV: JSON.stringify(process.env.RUN_ENV),
-      },
-    }),
-    new HtmlWebpackPlugin({
-      meta: {
-        manifest: 'manifest.json',
-      },
-      template: './src/index.html',
-      inject: 'body',
-    }),
-  ],
-  output: {
-    path: outPath,
-    publicPath: isProd ? `${process.env.PUBLIC_PATH}/${pkgJson.ident}/` : `http://localhost:${pkgJson.port}/${pkgJson.ident}/`,
-    library: pkgJson.ident,
-    libraryTarget: 'amd',
-    filename: jsFileName,
-    chunkFilename: jsFileName,
-  },
-  devtool: isProd ? 'none' : 'cheap-module-eval-source-map',
-  devServer: {
-    host: '127.0.0.1',
-    port: pkgJson.port,
-    hot: true,
-    open: false,
-    publicPath: `http://localhost:${pkgJson.port}/${pkgJson.ident}/`,
-    inline: true,
-    disableHostCheck: true,
-    historyApiFallback: true,
-    headers: {
-      'Access-Control-Allow-Origin': '*',
-    },
-    proxy: {},
-  },
-});
+module.exports = merge(commonConfig, devMode ? devConfig : prodConfig);

km-console/packages/layout-clusters-fe/config/d1-webpack.base.js

@@ -1,183 +0,0 @@
-/* eslint-disable */
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const ProgressBarPlugin = require('progress-bar-webpack-plugin');
-const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-const CoverHtmlWebpackPlugin = require('./CoverHtmlWebpackPlugin.js');
-var webpackConfigResolveAlias = require('./webpackConfigResolveAlias');
-const TerserJSPlugin = require('terser-webpack-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-const theme = require('./theme');
-const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
-
-const isProd = process.env.NODE_ENV === 'production';
-const babelOptions = {
-  cacheDirectory: true,
-  babelrc: false,
-  presets: [require.resolve('@babel/preset-env'), require.resolve('@babel/preset-typescript'), require.resolve('@babel/preset-react')],
-  plugins: [
-    [require.resolve('@babel/plugin-proposal-decorators'), { legacy: true }],
-    [require.resolve('@babel/plugin-proposal-class-properties'), { loose: true }],
-    [require.resolve('@babel/plugin-proposal-private-property-in-object'), { loose: true }],
-    [require.resolve('@babel/plugin-proposal-private-methods'), { loose: true }],
-    require.resolve('@babel/plugin-proposal-export-default-from'),
-    require.resolve('@babel/plugin-proposal-export-namespace-from'),
-    require.resolve('@babel/plugin-proposal-object-rest-spread'),
-    require.resolve('@babel/plugin-transform-runtime'),
-    !isProd && require.resolve('react-refresh/babel'),
-  ]
-    .filter(Boolean)
-    .concat([
-      [
-        'babel-plugin-import',
-        {
-          libraryName: 'antd',
-          style: true,
-        },
-      ],
-      '@babel/plugin-transform-object-assign',
-    ]),
-};
-
-module.exports = () => {
-  const cssFileName = isProd ? '[name]-[chunkhash].css' : '[name].css';
-  const plugins = [
-    new CoverHtmlWebpackPlugin(),
-    new ProgressBarPlugin(),
-    new CaseSensitivePathsPlugin(),
-    new MiniCssExtractPlugin({
-      filename: cssFileName,
-    }),
-    !isProd &&
-      new ReactRefreshWebpackPlugin({
-        overlay: false,
-      }),
-  ].filter(Boolean);
-  const resolve = {
-    symlinks: false,
-    extensions: ['.web.jsx', '.web.js', '.ts', '.tsx', '.js', '.jsx', '.json'],
-    alias: webpackConfigResolveAlias,
-  };
-
-  if (isProd) {
-    plugins.push(new CleanWebpackPlugin());
-  }
-
-  if (!isProd) {
-    resolve.mainFields = ['module', 'browser', 'main'];
-  }
-
-  return {
-    externals: isProd
-      ? [
-          /^react$/,
-          /^react\/lib.*/,
-          /^react-dom$/,
-          /.*react-dom.*/,
-          /^single-spa$/,
-          /^single-spa-react$/,
-          /^moment$/,
-          /^antd$/,
-          /^lodash$/,
-          /^echarts$/,
-          /^react-router$/,
-          /^react-router-dom$/,
-        ]
-      : [],
-    resolve,
-    plugins,
-    module: {
-      rules: [
-        {
-          parser: { system: false },
-        },
-        {
-          test: /\.(js|jsx)$/,
-          exclude: /node_modules/,
-          use: [
-            {
-              loader: 'babel-loader',
-              options: babelOptions,
-            },
-          ],
-        },
-        {
-          test: /\.(ts|tsx)$/,
-          use: [
-            {
-              loader: 'babel-loader',
-              options: babelOptions,
-            },
-            {
-              loader: 'ts-loader',
-              options: {
-                allowTsInNodeModules: true,
-              },
-            },
-          ],
-        },
-        {
-          test: /\.(png|svg|jpeg|jpg|gif|ttf|woff|woff2|eot|pdf|otf)$/,
-          use: [
-            {
-              loader: 'file-loader',
-              options: {
-                name: '[name].[ext]',
-                outputPath: './assets/image/',
-                esModule: false,
-              },
-            },
-          ],
-        },
-        {
-          test: /\.(css|less)$/,
-          use: [
-            {
-              loader: MiniCssExtractPlugin.loader,
-            },
-            'css-loader',
-            {
-              loader: 'less-loader',
-              options: {
-                javascriptEnabled: true,
-                modifyVars: theme,
-              },
-            },
-          ],
-        },
-      ],
-    },
-    optimization: Object.assign(
-      isProd
-        ? {
-            splitChunks: {
-              cacheGroups: {
-                vendor: {
-                  test: /[\\/]node_modules[\\/]/,
-                  chunks: 'all',
-                  name: 'vendor',
-                  priority: 10,
-                  enforce: true,
-                  minChunks: 1,
-                  maxSize: 3000000,
-                },
-              },
-            },
-            minimizer: [
-              new TerserJSPlugin({
-                cache: true,
-                sourceMap: true,
-              }),
-              new OptimizeCSSAssetsPlugin({}),
-            ],
-          }
-        : {}
-    ),
-    devtool: isProd ? 'cheap-module-source-map' : '',
-    node: {
-      fs: 'empty',
-      net: 'empty',
-      tls: 'empty',
-    },
-  };
-};

km-console/packages/layout-clusters-fe/config/webpack.common.js

@@ -0,0 +1,123 @@
+const path = require('path');
+const theme = require('./theme');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+const CoverHtmlWebpackPlugin = require('./CoverHtmlWebpackPlugin.js');
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
+
+const devMode = process.env.NODE_ENV === 'development';
+const babelOptions = {
+  cacheDirectory: true,
+  babelrc: false,
+  presets: [require.resolve('@babel/preset-env'), require.resolve('@babel/preset-typescript'), require.resolve('@babel/preset-react')],
+  plugins: [
+    [require.resolve('@babel/plugin-proposal-decorators'), { legacy: true }],
+    [require.resolve('@babel/plugin-proposal-class-properties'), { loose: true }],
+    [require.resolve('@babel/plugin-proposal-private-property-in-object'), { loose: true }],
+    [require.resolve('@babel/plugin-proposal-private-methods'), { loose: true }],
+    require.resolve('@babel/plugin-proposal-export-default-from'),
+    require.resolve('@babel/plugin-proposal-export-namespace-from'),
+    require.resolve('@babel/plugin-proposal-object-rest-spread'),
+    require.resolve('@babel/plugin-transform-runtime'),
+    devMode && require.resolve('react-refresh/babel'),
+    devMode && [
+      'babel-plugin-import',
+      {
+        libraryName: 'antd',
+        style: true,
+      },
+    ],
+  ].filter(Boolean),
+};
+
+module.exports = {
+  entry: {
+    layout: ['./src/index.tsx'],
+  },
+  resolve: {
+    symlinks: false,
+    extensions: ['.web.jsx', '.web.js', '.ts', '.tsx', '.js', '.jsx', '.json'],
+    alias: {
+      '@src': path.resolve('src'),
+    },
+  },
+  plugins: [
+    new CoverHtmlWebpackPlugin(),
+    new ProgressBarPlugin(),
+    new CaseSensitivePathsPlugin(),
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
+        RUN_ENV: JSON.stringify(process.env.RUN_ENV),
+        BUSINESS_VERSION: process.env.BUSINESS_VERSION === 'true',
+        PUBLIC_PATH: JSON.stringify(process.env.PUBLIC_PATH),
+      },
+    }),
+    new HtmlWebpackPlugin({
+      meta: {
+        manifest: 'manifest.json',
+      },
+      template: './src/index.html',
+      favicon: path.resolve('favicon.ico'),
+      inject: 'body',
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        parser: { system: false },
+      },
+      {
+        test: /\.(js|jsx|ts|tsx)$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: babelOptions,
+          },
+          {
+            loader: 'ts-loader',
+            options: {
+              allowTsInNodeModules: true,
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(png|svg|jpeg|jpg|gif|ttf|woff|woff2|eot|pdf|otf)$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: '[name].[ext]',
+              outputPath: './assets/image/',
+              esModule: false,
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(css|less)$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          {
+            loader: 'less-loader',
+            options: {
+              javascriptEnabled: true,
+              modifyVars: theme,
+            },
+          },
+        ],
+      },
+    ],
+  },
+  node: {
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty',
+  },
+  stats: 'errors-warnings',
+};

km-console/packages/layout-clusters-fe/config/webpack.dev.js

@@ -0,0 +1,45 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+
+module.exports = {
+  mode: 'development',
+  plugins: [
+    new MiniCssExtractPlugin(),
+    new ReactRefreshWebpackPlugin({
+      overlay: false,
+    }),
+  ],
+  output: {
+    path: '/',
+    publicPath: '/',
+    filename: '[name].js',
+    chunkFilename: '[name].js',
+    library: 'layout',
+    libraryTarget: 'amd',
+  },
+  devServer: {
+    host: 'localhost',
+    port: 8000,
+    hot: true,
+    open: true,
+    openPage: 'http://localhost:8000/',
+    inline: true,
+    historyApiFallback: true,
+    publicPath: `http://localhost:8000/`,
+    headers: {
+      'cache-control': 'no-cache',
+      pragma: 'no-cache',
+      'Access-Control-Allow-Origin': '*',
+    },
+    proxy: {
+      '/ks-km/api/v3': {
+        changeOrigin: true,
+        target: 'http://localhost:8080/',
+      },
+      '/logi-security/api/v1': {
+        changeOrigin: true,
+        target: 'http://localhost:8080/',
+      },
+    },
+  },
+};

km-console/packages/layout-clusters-fe/config/webpack.prod.js

@@ -0,0 +1,79 @@
+const path = require('path');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const CountPlugin = require('./CountComponentWebpackPlugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const TerserJSPlugin = require('terser-webpack-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+
+const outputPath = path.resolve(process.cwd(), `../../../km-rest/src/main/resources/templates/layout`);
+
+module.exports = {
+  mode: 'production',
+  plugins: [
+    new CleanWebpackPlugin(),
+    new CountPlugin({
+      pathname: 'knowdesign',
+      startCount: true,
+      isExportExcel: false,
+    }),
+    new MiniCssExtractPlugin({
+      filename: '[name]-[chunkhash].css',
+    }),
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(process.cwd(), 'static'),
+        to: path.resolve(outputPath, '../static'),
+      },
+      {
+        from: path.resolve(process.cwd(), 'favicon.ico'),
+        to: path.resolve(outputPath, '../favicon.ico'),
+      },
+    ]),
+  ],
+  externals: [
+    /^react$/,
+    /^react\/lib.*/,
+    /^react-dom$/,
+    /.*react-dom.*/,
+    /^single-spa$/,
+    /^single-spa-react$/,
+    /^moment$/,
+    /^antd$/,
+    /^lodash$/,
+    /^echarts$/,
+    /^react-router$/,
+    /^react-router-dom$/,
+  ],
+  output: {
+    path: outputPath,
+    publicPath: process.env.PUBLIC_PATH + '/layout/',
+    filename: '[name]-[chunkhash].js',
+    chunkFilename: '[name]-[chunkhash].js',
+    library: 'layout',
+    libraryTarget: 'amd',
+  },
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        vendor: {
+          test: /[\\/]node_modules[\\/]/,
+          chunks: 'all',
+          name: 'vendor',
+          priority: 10,
+          enforce: true,
+          minChunks: 1,
+          maxSize: 3000000,
+        },
+      },
+    },
+    minimizer: [
+      new TerserJSPlugin({
+        cache: true,
+        sourceMap: true,
+      }),
+      new OptimizeCSSAssetsPlugin({}),
+    ],
+  },
+  devtool: 'none',
+};

km-console/packages/layout-clusters-fe/config/webpackConfigResolveAlias.js

@@ -1,5 +0,0 @@
-var path = require('path');
-
-module.exports = {
-  react: path.resolve('./node_modules/react'),
-};

km-console/packages/layout-clusters-fe/package-lock.json

@@ -6024,6 +6024,12 @@
             }
           }
         },
+        "is-buffer": {
+          "version": "1.1.6",
+          "resolved": "https://registry.npmmirror.com/is-buffer/-/is-buffer-1.1.6.tgz",
+          "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
+          "dev": true
+        },
         "is-number": {
           "version": "3.0.0",
           "resolved": "https://registry.npmmirror.com/is-number/-/is-number-3.0.0.tgz",
@@ -6562,6 +6568,12 @@
         "kind-of": "^4.0.0"
       },
       "dependencies": {
+        "is-buffer": {
+          "version": "1.1.6",
+          "resolved": "https://registry.npmmirror.com/is-buffer/-/is-buffer-1.1.6.tgz",
+          "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
+          "dev": true
+        },
         "is-number": {
           "version": "3.0.0",
           "resolved": "https://registry.npmmirror.com/is-number/-/is-number-3.0.0.tgz",
@@ -6638,18 +6650,6 @@
       "resolved": "https://registry.npmmirror.com/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz",
       "integrity": "sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ=="
     },
-    "hastscript": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmmirror.com/hastscript/-/hastscript-6.0.0.tgz",
-      "integrity": "sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==",
-      "requires": {
-        "@types/hast": "^2.0.0",
-        "comma-separated-tokens": "^1.0.0",
-        "hast-util-parse-selector": "^2.0.0",
-        "property-information": "^5.0.0",
-        "space-separated-tokens": "^1.0.0"
-      }
-    },
     "he": {
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/he/-/he-1.2.0.tgz",
@@ -6666,11 +6666,6 @@
       "resolved": "https://registry.npmmirror.com/highlight-words-core/-/highlight-words-core-1.2.2.tgz",
       "integrity": "sha512-BXUKIkUuh6cmmxzi5OIbUJxrG8OAk2MqoL1DtO3Wo9D2faJg2ph5ntyuQeLqaHJmzER6H5tllCDA9ZnNe9BVGg=="
     },
-    "highlight.js": {
-      "version": "10.7.3",
-      "resolved": "https://registry.npmmirror.com/highlight.js/-/highlight.js-10.7.3.tgz",
-      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A=="
-    },
     "history": {
       "version": "4.10.1",
       "resolved": "https://registry.npmmirror.com/history/-/history-4.10.1.tgz",
@@ -6883,6 +6878,12 @@
             }
           }
         },
+        "is-buffer": {
+          "version": "1.1.6",
+          "resolved": "https://registry.npmmirror.com/is-buffer/-/is-buffer-1.1.6.tgz",
+          "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
+          "dev": true
+        },
         "is-number": {
           "version": "3.0.0",
           "resolved": "https://registry.npmmirror.com/is-number/-/is-number-3.0.0.tgz",
@@ -7224,28 +7225,6 @@
       "integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==",
       "dev": true
     },
-    "intl-format-cache": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmmirror.com/intl-format-cache/-/intl-format-cache-4.3.1.tgz",
-      "integrity": "sha512-OEUYNA7D06agqPOYhbTkl0T8HA3QKSuwWh1HiClEnpd9vw7N+3XsQt5iZ0GUEchp5CW1fQk/tary+NsbF3yQ1Q=="
-    },
-    "intl-messageformat": {
-      "version": "7.8.4",
-      "resolved": "https://registry.npmmirror.com/intl-messageformat/-/intl-messageformat-7.8.4.tgz",
-      "integrity": "sha512-yS0cLESCKCYjseCOGXuV4pxJm/buTfyCJ1nzQjryHmSehlptbZbn9fnlk1I9peLopZGGbjj46yHHiTAEZ1qOTA==",
-      "requires": {
-        "intl-format-cache": "^4.2.21",
-        "intl-messageformat-parser": "^3.6.4"
-      }
-    },
-    "intl-messageformat-parser": {
-      "version": "3.6.4",
-      "resolved": "https://registry.npmmirror.com/intl-messageformat-parser/-/intl-messageformat-parser-3.6.4.tgz",
-      "integrity": "sha512-RgPGwue0mJtoX2Ax8EmMzJzttxjnva7gx0Q7mKJ4oALrTZvtmCeAw5Msz2PcjW4dtCh/h7vN/8GJCxZO1uv+OA==",
-      "requires": {
-        "@formatjs/intl-unified-numberformat": "^3.2.0"
-      }
-    },
     "invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmmirror.com/invariant/-/invariant-2.2.4.tgz",
@@ -7287,6 +7266,12 @@
         "kind-of": "^3.0.2"
       },
       "dependencies": {
+        "is-buffer": {
+          "version": "1.1.6",
+          "resolved": "https://registry.npmmirror.com/is-buffer/-/is-buffer-1.1.6.tgz",
+          "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
+          "dev": true
+        },
         "kind-of": {
           "version": "3.2.2",
           "resolved": "https://registry.npmmirror.com/kind-of/-/kind-of-3.2.2.tgz",
@@ -7354,16 +7339,10 @@
         "has-tostringtag": "^1.0.0"
       }
     },
-    "is-buffer": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmmirror.com/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
-      "dev": true
-    },
     "is-callable": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmmirror.com/is-callable/-/is-callable-1.2.5.tgz",
-      "integrity": "sha512-ZIWRujF6MvYGkEuHMYtFRkL2wAtFw89EHfKlXrkPkjQZZRWeh9L1q3SV13NIfHnqxugjLvAOkEHx9mb1zcMnEw=="
+      "version": "1.2.6",
+      "resolved": "https://registry.npmmirror.com/is-callable/-/is-callable-1.2.6.tgz",
+      "integrity": "sha512-krO72EO2NptOGAX2KYyqbP9vYMlNAXdB53rq6f8LXY6RY7JdSR/3BD6wLUlPHSAesmY9vstNrjvqGaCiRK/91Q=="
     },
     "is-color-stop": {
       "version": "1.1.0",
@@ -7396,6 +7375,12 @@
         "kind-of": "^3.0.2"
       },
       "dependencies": {
+        "is-buffer": {
+          "version": "1.1.6",
+          "resolved": "https://registry.npmmirror.com/is-buffer/-/is-buffer-1.1.6.tgz",
+          "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
+          "dev": true
+        },
         "kind-of": {
           "version": "3.2.2",
           "resolved": "https://registry.npmmirror.com/kind-of/-/kind-of-3.2.2.tgz",
@@ -7531,12 +7516,6 @@
         "path-is-inside": "^1.0.2"
       }
     },
-    "is-plain-obj": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmmirror.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
-      "integrity": "sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==",
-      "dev": true
-    },
     "is-plain-object": {
       "version": "2.0.4",
       "resolved": "https://registry.npmmirror.com/is-plain-object/-/is-plain-object-2.0.4.tgz",
@@ -7790,11 +7769,9 @@
         "rc-dialog": "~8.6.0",
         "rc-drawer": "^4.4.3",
         "rc-dropdown": "~3.2.0",
-        "rc-field-form": "~1.21.0",
         "rc-image": "~5.2.5",
         "rc-input-number": "~7.3.6",
         "rc-mentions": "~1.6.1",
-        "rc-menu": "~9.0.12",
         "rc-motion": "^2.4.4",
         "rc-notification": "~4.5.7",
         "rc-pagination": "~3.1.9",
@@ -7806,11 +7783,9 @@
         "rc-slider": "~9.7.4",
         "rc-steps": "~4.1.0",
         "rc-switch": "~3.2.0",
-        "rc-table": "~7.19.0",
         "rc-tabs": "~11.10.0",
         "rc-textarea": "~0.3.0",
         "rc-tooltip": "~5.1.1",
-        "rc-tree": "~5.3.0",
         "rc-tree-select": "~4.8.0",
         "rc-trigger": "^5.2.10",
         "rc-upload": "~4.3.0",
@@ -7848,6 +7823,77 @@
         "scroll-into-view-if-needed": "^2.2.25"
       },
       "dependencies": {
+        "async-validator": {
+          "version": "4.2.5",
+          "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz",
+          "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
+        },
+        "intl-format-cache": {
+          "version": "2.2.9",
+          "resolved": "https://registry.npmmirror.com/intl-format-cache/-/intl-format-cache-2.2.9.tgz",
+          "integrity": "sha512-Zv/u8wRpekckv0cLkwpVdABYST4hZNTDaX7reFetrYTJwxExR2VyTqQm+l0WmL0Qo8Mjb9Tf33qnfj0T7pjxdQ=="
+        },
+        "intl-messageformat": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmmirror.com/intl-messageformat/-/intl-messageformat-2.2.0.tgz",
+          "integrity": "sha512-I+tSvHnXqJYjDfNmY95tpFMj30yoakC6OXAo+wu/wTMy6tA/4Fd4mvV7Uzs4cqK/Ap29sHhwjcY+78a8eifcXw==",
+          "requires": {
+            "intl-messageformat-parser": "1.4.0"
+          }
+        },
+        "intl-messageformat-parser": {
+          "version": "1.4.0",
+          "resolved": "https://registry.npmmirror.com/intl-messageformat-parser/-/intl-messageformat-parser-1.4.0.tgz",
+          "integrity": "sha512-/XkqFHKezO6UcF4Av2/Lzfrez18R0jyw7kRFhSeB/YRakdrgSc9QfFZUwNJI9swMwMoNPygK1ArC5wdFSjPw+A=="
+        },
+        "rc-field-form": {
+          "version": "1.27.1",
+          "resolved": "https://registry.npmmirror.com/rc-field-form/-/rc-field-form-1.27.1.tgz",
+          "integrity": "sha512-RShegnwFu6TH8tl2olCxn+B4Wyh5EiQH8c/7wucbkLNyue05YiH5gomUAg1vbZjp71yFKwegClctsEG5CNBWAA==",
+          "requires": {
+            "@babel/runtime": "^7.18.0",
+            "async-validator": "^4.1.0",
+            "rc-util": "^5.8.0"
+          }
+        },
+        "rc-menu": {
+          "version": "9.6.4",
+          "resolved": "https://registry.npmmirror.com/rc-menu/-/rc-menu-9.6.4.tgz",
+          "integrity": "sha512-6DiNAjxjVIPLZXHffXxxcyE15d4isRL7iQ1ru4MqYDH2Cqc5bW96wZOdMydFtGLyDdnmEQ9jVvdCE9yliGvzkw==",
+          "requires": {
+            "@babel/runtime": "^7.10.1",
+            "classnames": "2.x",
+            "rc-motion": "^2.4.3",
+            "rc-overflow": "^1.2.0",
+            "rc-trigger": "^5.1.2",
+            "rc-util": "^5.12.0",
+            "shallowequal": "^1.1.0"
+          }
+        },
+        "rc-table": {
+          "version": "7.25.3",
+          "resolved": "https://registry.npmmirror.com/rc-table/-/rc-table-7.25.3.tgz",
+          "integrity": "sha512-McsLJ2rg8EEpRBRYN4Pf9gT7ZNYnjvF9zrBpUBBbUX/fxk+eGi5ff1iPIhMyiHsH71/BmTUzX9nc9XqupD0nMg==",
+          "requires": {
+            "@babel/runtime": "^7.10.1",
+            "classnames": "^2.2.5",
+            "rc-resize-observer": "^1.1.0",
+            "rc-util": "^5.22.5",
+            "shallowequal": "^1.1.0"
+          }
+        },
+        "rc-tree": {
+          "version": "5.6.9",
+          "resolved": "https://registry.npmmirror.com/rc-tree/-/rc-tree-5.6.9.tgz",
+          "integrity": "sha512-si8aGuWQ2/sh2Ibk+WdUdDeAxoviT/+kDY+NLtJ+RhqfySqPFqWM5uHTwgFRrWUvKCqEeE/PjCYuuhHrK7Y7+A==",
+          "requires": {
+            "@babel/runtime": "^7.10.1",
+            "classnames": "2.x",
+            "rc-motion": "^2.0.1",
+            "rc-util": "^5.16.1",
+            "rc-virtual-list": "^3.4.8"
+          }
+        },
         "rc-util": {
           "version": "5.24.2",
           "resolved": "https://registry.npmmirror.com/rc-util/-/rc-util-5.24.2.tgz",
@@ -8287,6 +8333,13 @@
       "requires": {
         "fault": "^1.0.0",
         "highlight.js": "~10.7.0"
+      },
+      "dependencies": {
+        "highlight.js": {
+          "version": "10.7.3",
+          "resolved": "https://registry.npmmirror.com/highlight.js/-/highlight.js-10.7.3.tgz",
+          "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A=="
+        }
       }
     },
     "lru-cache": {
@@ -8799,6 +8852,12 @@
             "is-descriptor": "^0.1.0"
           }
         },
+        "is-buffer": {
+          "version": "1.1.6",
+          "resolved": "https://registry.npmmirror.com/is-buffer/-/is-buffer-1.1.6.tgz",
+          "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
+          "dev": true
+        },
         "kind-of": {
           "version": "3.2.2",
           "resolved": "https://registry.npmmirror.com/kind-of/-/kind-of-3.2.2.tgz",
@@ -9092,19 +9151,6 @@
         "safe-buffer": "^5.1.1"
       }
     },
-    "parse-entities": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmmirror.com/parse-entities/-/parse-entities-2.0.0.tgz",
-      "integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==",
-      "requires": {
-        "character-entities": "^1.0.0",
-        "character-entities-legacy": "^1.0.0",
-        "character-reference-invalid": "^1.0.0",
-        "is-alphanumerical": "^1.0.0",
-        "is-decimal": "^1.0.0",
-        "is-hexadecimal": "^1.0.0"
-      }
-    },
     "parse-json": {
       "version": "5.2.0",
       "resolved": "https://registry.npmmirror.com/parse-json/-/parse-json-5.2.0.tgz",
@@ -10243,33 +10289,6 @@
         "rc-editor-core": "~0.8.3"
       }
     },
-    "rc-field-form": {
-      "version": "1.21.2",
-      "resolved": "https://registry.npmmirror.com/rc-field-form/-/rc-field-form-1.21.2.tgz",
-      "integrity": "sha512-LR/bURt/Tf5g39mb0wtMtQuWn42d/7kEzpzlC5fNC7yaRVmLTtlPP4sBBlaViETM9uZQKLoaB0Pt9Mubhm9gow==",
-      "requires": {
-        "@babel/runtime": "^7.8.4",
-        "async-validator": "^4.0.2",
-        "rc-util": "^5.8.0"
-      },
-      "dependencies": {
-        "async-validator": {
-          "version": "4.2.5",
-          "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz",
-          "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
-        },
-        "rc-util": {
-          "version": "5.24.2",
-          "resolved": "https://registry.npmmirror.com/rc-util/-/rc-util-5.24.2.tgz",
-          "integrity": "sha512-MWd0ZEV7xSwN4HM9jz9BwpnMzwCPjYJ7K90lePsrdgAkrmm8U7b4BOTIsv/84BQsaF7N3ejNkcrZ3AfEwc9HXA==",
-          "requires": {
-            "@babel/runtime": "^7.18.3",
-            "react-is": "^16.12.0",
-            "shallowequal": "^1.1.0"
-          }
-        }
-      }
-    },
     "rc-form": {
       "version": "2.4.12",
       "resolved": "https://registry.npmmirror.com/rc-form/-/rc-form-2.4.12.tgz",
@@ -10370,32 +10389,6 @@
         }
       }
     },
-    "rc-menu": {
-      "version": "9.0.14",
-      "resolved": "https://registry.npmmirror.com/rc-menu/-/rc-menu-9.0.14.tgz",
-      "integrity": "sha512-CIox5mZeLDAi32SlHrV7UeSjv7tmJJhwRyxQtZCKt351w3q59XlL4WMFOmtT9gwIfP9h0XoxdBZUMe/xzkp78A==",
-      "requires": {
-        "@babel/runtime": "^7.10.1",
-        "classnames": "2.x",
-        "rc-motion": "^2.4.3",
-        "rc-overflow": "^1.2.0",
-        "rc-trigger": "^5.1.2",
-        "rc-util": "^5.12.0",
-        "shallowequal": "^1.1.0"
-      },
-      "dependencies": {
-        "rc-util": {
-          "version": "5.24.2",
-          "resolved": "https://registry.npmmirror.com/rc-util/-/rc-util-5.24.2.tgz",
-          "integrity": "sha512-MWd0ZEV7xSwN4HM9jz9BwpnMzwCPjYJ7K90lePsrdgAkrmm8U7b4BOTIsv/84BQsaF7N3ejNkcrZ3AfEwc9HXA==",
-          "requires": {
-            "@babel/runtime": "^7.18.3",
-            "react-is": "^16.12.0",
-            "shallowequal": "^1.1.0"
-          }
-        }
-      }
-    },
     "rc-motion": {
       "version": "2.6.2",
       "resolved": "https://registry.npmmirror.com/rc-motion/-/rc-motion-2.6.2.tgz",
@@ -10648,30 +10641,6 @@
         }
       }
     },
-    "rc-table": {
-      "version": "7.19.2",
-      "resolved": "https://registry.npmmirror.com/rc-table/-/rc-table-7.19.2.tgz",
-      "integrity": "sha512-NdpnoM50MK02H5/hGOsObfxCvGFUG5cHB9turE5BKJ81T5Ycbq193w5tLhnpILXe//Oanzr47MdMxkUnVGP+qg==",
-      "requires": {
-        "@babel/runtime": "^7.10.1",
-        "classnames": "^2.2.5",
-        "rc-resize-observer": "^1.0.0",
-        "rc-util": "^5.14.0",
-        "shallowequal": "^1.1.0"
-      },
-      "dependencies": {
-        "rc-util": {
-          "version": "5.24.2",
-          "resolved": "https://registry.npmmirror.com/rc-util/-/rc-util-5.24.2.tgz",
-          "integrity": "sha512-MWd0ZEV7xSwN4HM9jz9BwpnMzwCPjYJ7K90lePsrdgAkrmm8U7b4BOTIsv/84BQsaF7N3ejNkcrZ3AfEwc9HXA==",
-          "requires": {
-            "@babel/runtime": "^7.18.3",
-            "react-is": "^16.12.0",
-            "shallowequal": "^1.1.0"
-          }
-        }
-      }
-    },
     "rc-tabs": {
       "version": "11.10.8",
       "resolved": "https://registry.npmmirror.com/rc-tabs/-/rc-tabs-11.10.8.tgz",
@@ -10744,30 +10713,6 @@
         "rc-trigger": "^5.0.0"
       }
     },
-    "rc-tree": {
-      "version": "5.3.8",
-      "resolved": "https://registry.npmmirror.com/rc-tree/-/rc-tree-5.3.8.tgz",
-      "integrity": "sha512-YuobEryPymqPmHFUOvsoOrYdm24psaj0CrGEUuDUQUeG/nNcTGw6FA2YmF4NsEaNBvNSJUSzwfZnFHrKa/xv0A==",
-      "requires": {
-        "@babel/runtime": "^7.10.1",
-        "classnames": "2.x",
-        "rc-motion": "^2.0.1",
-        "rc-util": "^5.16.1",
-        "rc-virtual-list": "^3.4.1"
-      },
-      "dependencies": {
-        "rc-util": {
-          "version": "5.24.2",
-          "resolved": "https://registry.npmmirror.com/rc-util/-/rc-util-5.24.2.tgz",
-          "integrity": "sha512-MWd0ZEV7xSwN4HM9jz9BwpnMzwCPjYJ7K90lePsrdgAkrmm8U7b4BOTIsv/84BQsaF7N3ejNkcrZ3AfEwc9HXA==",
-          "requires": {
-            "@babel/runtime": "^7.18.3",
-            "react-is": "^16.12.0",
-            "shallowequal": "^1.1.0"
-          }
-        }
-      }
-    },
     "rc-tree-select": {
       "version": "4.8.0",
       "resolved": "https://registry.npmmirror.com/rc-tree-select/-/rc-tree-select-4.8.0.tgz",
@@ -10780,6 +10725,18 @@
         "rc-util": "^5.7.0"
       },
       "dependencies": {
+        "rc-tree": {
+          "version": "5.3.8",
+          "resolved": "https://registry.npmmirror.com/rc-tree/-/rc-tree-5.3.8.tgz",
+          "integrity": "sha512-YuobEryPymqPmHFUOvsoOrYdm24psaj0CrGEUuDUQUeG/nNcTGw6FA2YmF4NsEaNBvNSJUSzwfZnFHrKa/xv0A==",
+          "requires": {
+            "@babel/runtime": "^7.10.1",
+            "classnames": "2.x",
+            "rc-motion": "^2.0.1",
+            "rc-util": "^5.16.1",
+            "rc-virtual-list": "^3.4.1"
+          }
+        },
         "rc-util": {
           "version": "5.24.2",
           "resolved": "https://registry.npmmirror.com/rc-util/-/rc-util-5.24.2.tgz",
@@ -11122,6 +11079,30 @@
         "intl-messageformat": "^7.8.4",
         "intl-messageformat-parser": "^3.6.4",
         "shallow-equal": "^1.2.1"
+      },
+      "dependencies": {
+        "intl-format-cache": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmmirror.com/intl-format-cache/-/intl-format-cache-4.3.1.tgz",
+          "integrity": "sha512-OEUYNA7D06agqPOYhbTkl0T8HA3QKSuwWh1HiClEnpd9vw7N+3XsQt5iZ0GUEchp5CW1fQk/tary+NsbF3yQ1Q=="
+        },
+        "intl-messageformat": {
+          "version": "7.8.4",
+          "resolved": "https://registry.npmmirror.com/intl-messageformat/-/intl-messageformat-7.8.4.tgz",
+          "integrity": "sha512-yS0cLESCKCYjseCOGXuV4pxJm/buTfyCJ1nzQjryHmSehlptbZbn9fnlk1I9peLopZGGbjj46yHHiTAEZ1qOTA==",
+          "requires": {
+            "intl-format-cache": "^4.2.21",
+            "intl-messageformat-parser": "^3.6.4"
+          }
+        },
+        "intl-messageformat-parser": {
+          "version": "3.6.4",
+          "resolved": "https://registry.npmmirror.com/intl-messageformat-parser/-/intl-messageformat-parser-3.6.4.tgz",
+          "integrity": "sha512-RgPGwue0mJtoX2Ax8EmMzJzttxjnva7gx0Q7mKJ4oALrTZvtmCeAw5Msz2PcjW4dtCh/h7vN/8GJCxZO1uv+OA==",
+          "requires": {
+            "@formatjs/intl-unified-numberformat": "^3.2.0"
+          }
+        }
       }
     },
     "react-is": {
@@ -11282,6 +11263,13 @@
         "lowlight": "^1.14.0",
         "prismjs": "^1.21.0",
         "refractor": "^3.0.0"
+      },
+      "dependencies": {
+        "highlight.js": {
+          "version": "10.7.3",
+          "resolved": "https://registry.npmmirror.com/highlight.js/-/highlight.js-10.7.3.tgz",
+          "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A=="
+        }
       }
     },
     "react-test-renderer": {
@@ -11449,6 +11437,31 @@
         "prismjs": "~1.27.0"
       },
       "dependencies": {
+        "hastscript": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmmirror.com/hastscript/-/hastscript-6.0.0.tgz",
+          "integrity": "sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==",
+          "requires": {
+            "@types/hast": "^2.0.0",
+            "comma-separated-tokens": "^1.0.0",
+            "hast-util-parse-selector": "^2.0.0",
+            "property-information": "^5.0.0",
+            "space-separated-tokens": "^1.0.0"
+          }
+        },
+        "parse-entities": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmmirror.com/parse-entities/-/parse-entities-2.0.0.tgz",
+          "integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==",
+          "requires": {
+            "character-entities": "^1.0.0",
+            "character-entities-legacy": "^1.0.0",
+            "character-reference-invalid": "^1.0.0",
+            "is-alphanumerical": "^1.0.0",
+            "is-decimal": "^1.0.0",
+            "is-hexadecimal": "^1.0.0"
+          }
+        },
         "prismjs": {
           "version": "1.27.0",
           "resolved": "https://registry.npmmirror.com/prismjs/-/prismjs-1.27.0.tgz",
@@ -12286,6 +12299,12 @@
         "kind-of": "^3.2.0"
       },
       "dependencies": {
+        "is-buffer": {
+          "version": "1.1.6",
+          "resolved": "https://registry.npmmirror.com/is-buffer/-/is-buffer-1.1.6.tgz",
+          "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
+          "dev": true
+        },
         "kind-of": {
           "version": "3.2.2",
           "resolved": "https://registry.npmmirror.com/kind-of/-/kind-of-3.2.2.tgz",
@@ -12347,6 +12366,14 @@
       "dev": true,
       "requires": {
         "is-plain-obj": "^1.0.0"
+      },
+      "dependencies": {
+        "is-plain-obj": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmmirror.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
+          "integrity": "sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==",
+          "dev": true
+        }
       }
     },
     "source-list-map": {
@@ -13049,6 +13076,12 @@
         "kind-of": "^3.0.2"
       },
       "dependencies": {
+        "is-buffer": {
+          "version": "1.1.6",
+          "resolved": "https://registry.npmmirror.com/is-buffer/-/is-buffer-1.1.6.tgz",
+          "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
+          "dev": true
+        },
         "kind-of": {
           "version": "3.2.2",
           "resolved": "https://registry.npmmirror.com/kind-of/-/kind-of-3.2.2.tgz",
@@ -13502,12 +13535,6 @@
       "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
       "dev": true
     },
-    "uuid": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmmirror.com/uuid/-/uuid-3.4.0.tgz",
-      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
-      "dev": true
-    },
     "v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmmirror.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
@@ -13718,6 +13745,13 @@
             "binary-extensions": "^1.0.0"
           }
         },
+        "is-buffer": {
+          "version": "1.1.6",
+          "resolved": "https://registry.npmmirror.com/is-buffer/-/is-buffer-1.1.6.tgz",
+          "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
+          "dev": true,
+          "optional": true
+        },
         "is-number": {
           "version": "3.0.0",
           "resolved": "https://registry.npmmirror.com/is-number/-/is-number-3.0.0.tgz",
@@ -13895,6 +13929,12 @@
             }
           }
         },
+        "is-buffer": {
+          "version": "1.1.6",
+          "resolved": "https://registry.npmmirror.com/is-buffer/-/is-buffer-1.1.6.tgz",
+          "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
+          "dev": true
+        },
         "is-number": {
           "version": "3.0.0",
           "resolved": "https://registry.npmmirror.com/is-number/-/is-number-3.0.0.tgz",
@@ -14338,6 +14378,12 @@
             "binary-extensions": "^1.0.0"
           }
         },
+        "is-buffer": {
+          "version": "1.1.6",
+          "resolved": "https://registry.npmmirror.com/is-buffer/-/is-buffer-1.1.6.tgz",
+          "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
+          "dev": true
+        },
         "is-number": {
           "version": "3.0.0",
           "resolved": "https://registry.npmmirror.com/is-number/-/is-number-3.0.0.tgz",
@@ -14439,6 +14485,14 @@
       "requires": {
         "ansi-colors": "^3.0.0",
         "uuid": "^3.3.2"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmmirror.com/uuid/-/uuid-3.4.0.tgz",
+          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+          "dev": true
+        }
       }
     },
     "webpack-merge": {

km-console/packages/layout-clusters-fe/package.json

@@ -49,6 +49,7 @@
     "crypto-js": "^4.1.1",
     "dotenv": "^16.0.1",
     "html-webpack-plugin": "^4.0.0",
+    "knowdesign": "^1.3.7",
     "lodash": "^4.17.21",
     "moment": "^2.24.0",
     "react": "16.12.0",
@@ -59,9 +60,8 @@
     "react-joyride": "^2.5.0",
     "single-spa": "5.9.3",
     "single-spa-react": "2.14.0",
-    "webpack-bundle-analyzer": "^4.5.0",
-    "knowdesign": "1.3.7",
-    "tree-changes": "0.9.1"
+    "tree-changes": "0.9.1",
+    "webpack-bundle-analyzer": "^4.5.0"
   },
   "devDependencies": {
     "@babel/core": "^7.5.5",

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';

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
+  }
+}

km-console/packages/layout-clusters-fe/src/locales/zh.tsx

@@ -21,7 +21,6 @@ export default {
 
   [`menu.${systemKey}.cluster`]: 'Cluster',
   [`menu.${systemKey}.cluster.overview`]: 'Overview',
-  [`menu.${systemKey}.cluster.balance`]: 'Load Rebalance',
 
   [`menu.${systemKey}.broker`]: 'Broker',
   [`menu.${systemKey}.broker.dashbord`]: 'Overview',
@@ -45,7 +44,7 @@ export default {
   [`menu.${systemKey}.consumer-group.group-list`]: 'GroupList',
 
   [`menu.${systemKey}.operation`]: 'Operation',
-  [`menu.${systemKey}.operation.balance`]: 'Load Rebalance',
+  [`menu.${systemKey}.operation.balance`]: 'Rebalance',
   [`menu.${systemKey}.operation.jobs`]: 'Job',
 
   [`menu.${systemKey}.acls`]: 'ACLs',

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,

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)' },

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 {
@@ -53,6 +49,10 @@
       align-items: center;
       .d-range-time-input {
         height: 27px !important;
+        padding: 0 11px;
+        input{
+          line-height: 100%;
+        }
       }
       .divider {
         width: 1px;

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

km-console/packages/layout-clusters-fe/src/pages/Jobs/RebalancePlan.tsx

@@ -13,8 +13,8 @@ interface PropsType {
 }
 
 const typeObj: any = {
-  1: '周期均衡',
-  2: '立即均衡',
+  1: '立即均衡',
+  2: '周期均衡',
 };
 
 const { request, post } = Utils;

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

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 = [
   {
@@ -330,7 +331,7 @@ const LoadBalance: React.FC = (props: any) => {
           breadcrumbs={[
             { label: '多集群管理', aHref: '/' },
             { label: global?.clusterInfo?.name, aHref: `/cluster/${global?.clusterInfo?.id}` },
-            { label: 'Load Rebalance', aHref: `` },
+            { label: 'Rebalance', aHref: `` },
           ]}
         />
       </div>
@@ -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={{

km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/AccessCluster.tsx

@@ -6,9 +6,8 @@ import { regClusterName, regUsername } from '@src/constants/reg';
 import { bootstrapServersErrCodes, jmxErrCodes, zkErrCodes } from './config';
 import CodeMirrorFormItem from '@src/components/CodeMirrorFormItem';
 
-const rows = 4;
-const lowKafkaVersion = '2.8.0';
-const clientPropertiesPlaceholder = `用于创建Kafka客户端进行信息获取的相关配置，
+const LOW_KAFKA_VERSION = '2.8.0';
+const CLIENT_PROPERTIES_PLACEHOLDER = `用于创建Kafka客户端进行信息获取的相关配置，
 例如开启SCRAM-SHA-256安全管控模式的集群需输入如下配置，
 未开启安全管控可不进行任何输入：
 {
@@ -26,37 +25,25 @@ const AccessClusters = (props: any): JSX.Element => {
   const intl = useIntl();
   const [form] = Form.useForm();
   const [loading, setLoading] = React.useState(false);
+  const [confirmLoading, setConfirmLoading] = React.useState(false);
   const [curClusterInfo, setCurClusterInfo] = React.useState<any>({});
-  const [security, setSecurity] = React.useState(curClusterInfo?.security || 'None');
   const [extra, setExtra] = React.useState({
     versionExtra: '',
     zooKeeperExtra: '',
     bootstrapExtra: '',
     jmxExtra: '',
   });
-  const [isLowVersion, setIsLowVersion] = React.useState<boolean>(false);
-  const [zookeeperErrorStatus, setZookeeperErrorStatus] = React.useState<boolean>(false);
 
   const lastFormItemValue = React.useRef({
-    bootstrap: curClusterInfo?.bootstrapServers || '',
+    bootstrapServers: curClusterInfo?.bootstrapServers || '',
     zookeeper: curClusterInfo?.zookeeper || '',
     clientProperties: curClusterInfo?.clientProperties || {},
   });
 
-  const onHandleValuesChange = (value: any, allValues: any) => {
-    Object.keys(value).forEach((key) => {
+  const onHandleValuesChange = (changedValue: string[]) => {
+    Object.keys(changedValue).forEach((key) => {
       switch (key) {
-        case 'security':
-          setSecurity(value.security);
-          break;
         case 'zookeeper':
-          setExtra({
-            ...extra,
-            zooKeeperExtra: '',
-            bootstrapExtra: '',
-            jmxExtra: '',
-          });
-          break;
         case 'bootstrapServers':
           setExtra({
             ...extra,
@@ -78,21 +65,19 @@ const AccessClusters = (props: any): JSX.Element => {
   const onCancel = () => {
     form.resetFields();
     setLoading(false);
-    setZookeeperErrorStatus(false);
-    setIsLowVersion(false);
-    setSecurity('None');
     setExtra({
       versionExtra: '',
       zooKeeperExtra: '',
       bootstrapExtra: '',
       jmxExtra: '',
     });
-    lastFormItemValue.current = { bootstrap: '', zookeeper: '', clientProperties: {} };
+    lastFormItemValue.current = { bootstrapServers: '', zookeeper: '', clientProperties: {} };
     props.setVisible && props.setVisible(false);
   };
 
   const onSubmit = () => {
     form.validateFields().then((res) => {
+      setConfirmLoading(true);
       let clientProperties = null;
       try {
         clientProperties = res.clientProperties && JSON.parse(res.clientProperties);
@@ -107,7 +92,7 @@ const AccessClusters = (props: any): JSX.Element => {
         jmxProperties: {
           jmxPort: res.jmxPort,
           maxConn: res.maxConn,
-          openSSL: res.security === 'Password',
+          openSSL: res.openSSL || false,
           token: res.token,
           username: res.username,
         },
@@ -115,7 +100,7 @@ const AccessClusters = (props: any): JSX.Element => {
         name: res.name,
         zookeeper: res.zookeeper || '',
       };
-      setLoading(true);
+
       if (!isNaN(curClusterInfo?.id)) {
         Utils.put(api.phyCluster, {
           ...params,
@@ -127,7 +112,7 @@ const AccessClusters = (props: any): JSX.Element => {
             onCancel();
           })
           .finally(() => {
-            setLoading(false);
+            setConfirmLoading(false);
           });
       } else {
         Utils.post(api.phyCluster, params)
@@ -137,7 +122,7 @@ const AccessClusters = (props: any): JSX.Element => {
             onCancel();
           })
           .finally(() => {
-            setLoading(false);
+            setConfirmLoading(false);
           });
       }
     });
@@ -154,125 +139,224 @@ const AccessClusters = (props: any): JSX.Element => {
     }
 
     setLoading(true);
-    setIsLowVersion(false);
-    setZookeeperErrorStatus(false);
 
     return Utils.post(api.kafkaValidator, {
       bootstrapServers: bootstrapServers || '',
       zookeeper: zookeeper || '',
       clientProperties,
     })
-      .then((res: any) => {
-        form.setFieldsValue({
-          jmxPort: res.jmxPort,
-        });
+      .then(
+        (res: {
+          errList: { code: number; message: string; data: any }[];
+          jmxPort: number | null;
+          kafkaVersion: string | null;
+          zookeeper: string | null;
+        }) => {
+          const changedValue: { jmxPort?: number; kafkaVersion?: string; zookeeper: string } = {
+            zookeeper: zookeeper || res.zookeeper,
+          };
+          if (res.kafkaVersion && props.kafkaVersion.includes(res.kafkaVersion)) {
+            changedValue.kafkaVersion = res.kafkaVersion;
+          }
+          if (res.jmxPort) {
+            changedValue.jmxPort = res.jmxPort;
+          }
+          form.setFieldsValue(changedValue);
 
-        if (props.kafkaVersion.indexOf(res.kafkaVersion) > -1) {
-          form.setFieldsValue({
-            kafkaVersion: res.kafkaVersion,
-          });
-        } else {
-          form.setFieldsValue({
-            kafkaVersion: undefined,
+          const extraMsg = {
+            ...extra,
+            // 重置默认信息为连接成功
+            bootstrapExtra: bootstrapServers ? '连接成功' : '',
+            zooKeeperExtra: zookeeper ? '连接成功' : '',
+          };
+
+          const errList = res.errList || [];
+          // 处理错误信息
+          errList.forEach((item: any) => {
+            const { code, message } = item;
+            let modifyKey: 'bootstrapExtra' | 'zooKeeperExtra' | 'jmxExtra' | undefined;
+            if (bootstrapServersErrCodes.includes(code)) {
+              modifyKey = 'bootstrapExtra';
+            } else if (zkErrCodes.includes(code)) {
+              modifyKey = 'zooKeeperExtra';
+            } else if (jmxErrCodes.includes(code)) {
+              modifyKey = 'jmxExtra';
+            }
+
+            if (modifyKey) {
+              extraMsg[modifyKey] = message;
+            }
           });
+
+          setExtra(extraMsg);
+          return res;
         }
-
-        form.setFieldsValue({
-          zookeeper: zookeeper || res.zookeeper,
-        });
-
-        const errList = res.errList || [];
-
-        const extraMsg = extra;
-
-        // 初始化信息为连接成功
-        extraMsg.bootstrapExtra = bootstrapServers ? '连接成功' : '';
-        extraMsg.zooKeeperExtra = zookeeper ? '连接成功' : '';
-
-        // 处理错误信息
-        errList.forEach((item: any) => {
-          const { code, message } = item;
-          let modifyKey: 'bootstrapExtra' | 'zooKeeperExtra' | 'jmxExtra' | undefined;
-          if (bootstrapServersErrCodes.includes(code)) {
-            modifyKey = 'bootstrapExtra';
-          } else if (zkErrCodes.includes(code)) {
-            modifyKey = 'zooKeeperExtra';
-          } else if (jmxErrCodes.includes(code)) {
-            modifyKey = 'jmxExtra';
-          }
-
-          if (modifyKey) {
-            extraMsg[modifyKey] = `连接失败。${message}`;
-          }
-        });
-
-        // 如果kafkaVersion小于最低版本则提示
-        const showLowVersion = !(
-          curClusterInfo?.zookeeper ||
-          !curClusterInfo?.kafkaVersion ||
-          curClusterInfo?.kafkaVersion >= lowKafkaVersion
-        );
-        setIsLowVersion(showLowVersion);
-        setExtra({
-          ...extraMsg,
-          versionExtra: showLowVersion ? intl.formatMessage({ id: 'access.cluster.low.version.tip' }) : '',
-        });
-        return res;
-      })
+      )
       .finally(() => {
         setLoading(false);
       });
   };
 
+  // 更新表单状态
   React.useEffect(() => {
-    const showLowVersion = !(curClusterInfo?.zookeeper || !curClusterInfo?.kafkaVersion || curClusterInfo?.kafkaVersion >= lowKafkaVersion);
     lastFormItemValue.current = {
-      bootstrap: curClusterInfo?.bootstrapServers || '',
+      bootstrapServers: curClusterInfo?.bootstrapServers || '',
       zookeeper: curClusterInfo?.zookeeper || '',
       clientProperties: curClusterInfo?.clientProperties || {},
     };
-    setIsLowVersion(showLowVersion);
-    setExtra({
-      ...extra,
-      versionExtra: showLowVersion ? intl.formatMessage({ id: 'access.cluster.low.version.tip' }) : '',
-    });
     form.setFieldsValue({ ...curClusterInfo });
+    if (curClusterInfo?.kafkaVersion) {
+      form.validateFields(['kafkaVersion']);
+    }
   }, [curClusterInfo]);
 
+  // 获取集群详情数据
   React.useEffect(() => {
     if (visible) {
       if (clusterInfo?.id) {
         setLoading(true);
+
+        const resolveJmxProperties = (obj: any) => {
+          const res = { ...obj };
+          try {
+            const originValue = obj?.jmxProperties;
+            if (originValue) {
+              const jmxProperties = JSON.parse(originValue);
+              typeof jmxProperties === 'object' && jmxProperties !== null && Object.assign(res, jmxProperties);
+            }
+          } catch (err) {
+            console.error('jmxProperties not JSON: ', err);
+          }
+          return res;
+        };
+
         Utils.request(api.getPhyClusterBasic(clusterInfo.id))
           .then((res: any) => {
-            let jmxProperties = null;
-            try {
-              jmxProperties = JSON.parse(res?.jmxProperties);
-            } catch (err) {
-              console.error(err);
-            }
-
-            // 转化值对应成表单值
-            if (jmxProperties?.openSSL) {
-              jmxProperties.security = 'Password';
-            }
-
-            if (jmxProperties) {
-              res = Object.assign({}, res || {}, jmxProperties);
-            }
-            setCurClusterInfo(res);
-            setLoading(false);
+            setCurClusterInfo(resolveJmxProperties(res));
           })
           .catch((err) => {
-            setCurClusterInfo(clusterInfo);
+            setCurClusterInfo(resolveJmxProperties(clusterInfo));
+          })
+          .finally(() => {
             setLoading(false);
           });
       } else {
-        setCurClusterInfo(clusterInfo);
+        setCurClusterInfo({});
       }
     }
   }, [visible, clusterInfo]);
 
+  const validators = {
+    name: async (_: any, value: string) => {
+      if (!value) {
+        return Promise.reject('集群名称不能为空');
+      }
+      if (value === curClusterInfo?.name) {
+        return Promise.resolve();
+      }
+      if (value?.length > 128) {
+        return Promise.reject('集群名称长度限制在1～128字符');
+      }
+      if (!new RegExp(regClusterName).test(value)) {
+        return Promise.reject('集群名称支持中英文、数字、特殊字符 ! " # $ % & \' ( ) * + , - . / : ; < = > ? @ [  ] ^ _ ` { | } ~');
+      }
+      return Utils.request(api.getClusterBasicExit(value))
+        .then((res: any) => {
+          const data = res || {};
+          return data?.exist ? Promise.reject('集群名称重复') : Promise.resolve();
+        })
+        .catch(() => Promise.reject('连接超时! 请重试或检查服务'));
+    },
+    bootstrapServers: async (_: any, value: string) => {
+      if (!value) {
+        return Promise.reject('Bootstrap Servers不能为空');
+      }
+      if (value.length > 2000) {
+        return Promise.reject('Bootstrap Servers长度限制在2000字符');
+      }
+      if (value && value !== lastFormItemValue.current.bootstrapServers) {
+        lastFormItemValue.current.bootstrapServers = value;
+        return connectTest().catch(() => (lastFormItemValue.current.bootstrapServers = ''));
+      }
+      return Promise.resolve('');
+    },
+    zookeeper: async (_: any, value: string) => {
+      if (!value) {
+        return Promise.resolve('');
+      }
+
+      if (value.length > 2000) {
+        return Promise.reject('Zookeeper长度限制在2000字符');
+      }
+
+      if (value && value !== lastFormItemValue.current.zookeeper) {
+        lastFormItemValue.current.zookeeper = value;
+        return connectTest().catch(() => (lastFormItemValue.current.zookeeper = ''));
+      }
+      return Promise.resolve('');
+    },
+    securityUserName: async (_: any, value: string) => {
+      if (!value) {
+        return Promise.reject('用户名不能为空');
+      }
+      if (!new RegExp(regUsername).test(value)) {
+        return Promise.reject('仅支持大小写、下划线、短划线（-）');
+      }
+      if (value.length > 128) {
+        return Promise.reject('用户名长度限制在1～128字符');
+      }
+      return Promise.resolve();
+    },
+    securityToken: async (_: any, value: string) => {
+      if (!value) {
+        return Promise.reject('密码不能为空');
+      }
+      if (!new RegExp(regUsername).test(value)) {
+        return Promise.reject('密码只能由大小写、下划线、短划线（-）组成');
+      }
+      if (value.length < 6 || value.length > 32) {
+        return Promise.reject('密码长度限制在6～32字符');
+      }
+      return Promise.resolve();
+    },
+    kafkaVersion: async (_: any, value: any) => {
+      if (!value) {
+        return Promise.reject('版本号不能为空');
+      }
+      // 检测版本号小于2.8.0，如果没有填zookeeper信息，才会提示
+      const zookeeper = form.getFieldValue('zookeeper');
+      let versionExtra = '';
+      if (value < LOW_KAFKA_VERSION && !zookeeper) {
+        versionExtra = intl.formatMessage({ id: 'access.cluster.low.version.tip' });
+      }
+      setExtra({
+        ...extra,
+        versionExtra,
+      });
+      return Promise.resolve();
+    },
+    clientProperties: async (_: any, value: string) => {
+      try {
+        if (value) {
+          JSON.parse(value);
+        }
+
+        return Promise.resolve();
+      } catch (e) {
+        return Promise.reject(new Error('输入内容必须为 JSON'));
+      }
+    },
+    description: async (_: any, value: string) => {
+      if (!value) {
+        return Promise.resolve('');
+      }
+      if (value && value.length > 200) {
+        return Promise.reject('集群描述长度限制在200字符');
+      }
+      return Promise.resolve();
+    },
+  };
+
   return (
     <>
       <Drawer
@@ -285,14 +369,14 @@ const AccessClusters = (props: any): JSX.Element => {
               <Button size="small" onClick={onCancel}>
                 取消
               </Button>
-              <Button size="small" type="primary" onClick={onSubmit}>
+              <Button size="small" type="primary" loading={confirmLoading} onClick={onSubmit}>
                 确定
               </Button>
               <Divider type="vertical" />
             </Space>
           </div>
         }
-        title={intl.formatMessage({ id: props.title || 'access.cluster' })}
+        title={intl.formatMessage({ id: props.title || clusterInfo?.id ? 'edit.cluster' : 'access.cluster' })}
         visible={props.visible}
         placement="right"
         width={480}
@@ -306,30 +390,7 @@ const AccessClusters = (props: any): JSX.Element => {
               rules={[
                 {
                   required: true,
-                  validator: async (rule: any, value: string) => {
-                    if (!value) {
-                      return Promise.reject('集群名称不能为空');
-                    }
-                    if (value === curClusterInfo?.name) {
-                      return Promise.resolve();
-                    }
-                    if (value?.length > 128) {
-                      return Promise.reject('集群名称长度限制在1～128字符');
-                    }
-                    if (!new RegExp(regClusterName).test(value)) {
-                      return Promise.reject(
-                        '集群名称支持中英文、数字、特殊字符 ! " # $ % & \' ( ) * + , - . / : ; < = > ? @ [  ] ^ _ ` { | } ~'
-                      );
-                    }
-                    return Utils.request(api.getClusterBasicExit(value)).then((res: any) => {
-                      const data = res || {};
-                      if (data?.exist) {
-                        return Promise.reject('集群名称重复');
-                      } else {
-                        return Promise.resolve();
-                      }
-                    });
-                  },
+                  validator: validators.name,
                 },
               ]}
             >
@@ -338,31 +399,12 @@ const AccessClusters = (props: any): JSX.Element => {
             <Form.Item
               name="bootstrapServers"
               label="Bootstrap Servers"
-              extra={<span className={extra.bootstrapExtra.includes('连接成功') ? 'error-extra-info' : ''}>{extra.bootstrapExtra}</span>}
+              extra={<span className={!extra.bootstrapExtra.includes('连接成功') ? 'error-extra-info' : ''}>{extra.bootstrapExtra}</span>}
               validateTrigger={'onBlur'}
               rules={[
                 {
                   required: true,
-                  validator: async (rule: any, value: string) => {
-                    if (!value) {
-                      return Promise.reject('Bootstrap Servers不能为空');
-                    }
-                    if (value.length > 2000) {
-                      return Promise.reject('Bootstrap Servers长度限制在2000字符');
-                    }
-                    if (value && value !== lastFormItemValue.current.bootstrap) {
-                      return connectTest()
-                        .then((res: any) => {
-                          lastFormItemValue.current.bootstrap = value;
-
-                          return Promise.resolve('');
-                        })
-                        .catch((err) => {
-                          return Promise.reject('连接失败');
-                        });
-                    }
-                    return Promise.resolve('');
-                  },
+                  validator: validators.bootstrapServers,
                 },
               ]}
             >
@@ -374,36 +416,11 @@ const AccessClusters = (props: any): JSX.Element => {
             <Form.Item
               name="zookeeper"
               label="Zookeeper"
-              extra={<span className={extra.zooKeeperExtra.includes('连接成功') ? 'error-extra-info' : ''}>{extra.zooKeeperExtra}</span>}
-              validateStatus={zookeeperErrorStatus ? 'error' : 'success'}
+              extra={<span className={!extra.zooKeeperExtra.includes('连接成功') ? 'error-extra-info' : ''}>{extra.zooKeeperExtra}</span>}
               validateTrigger={'onBlur'}
               rules={[
                 {
-                  required: false,
-                  validator: async (rule: any, value: string) => {
-                    if (!value) {
-                      setZookeeperErrorStatus(false);
-                      return Promise.resolve('');
-                    }
-
-                    if (value.length > 2000) {
-                      return Promise.reject('Zookeeper长度限制在2000字符');
-                    }
-
-                    if (value && value !== lastFormItemValue.current.zookeeper) {
-                      return connectTest()
-                        .then((res: any) => {
-                          lastFormItemValue.current.zookeeper = value;
-                          setZookeeperErrorStatus(false);
-                          return Promise.resolve('');
-                        })
-                        .catch((err) => {
-                          setZookeeperErrorStatus(true);
-                          return Promise.reject('连接失败');
-                        });
-                    }
-                    return Promise.resolve('');
-                  },
+                  validator: validators.zookeeper,
                 },
               ]}
             >
@@ -412,142 +429,65 @@ const AccessClusters = (props: any): JSX.Element => {
                 placeholder="请输入Zookeeper地址，例如：192.168.0.1:2181,192.168.0.2:2181,192.168.0.2:2181/ks-kafka"
               />
             </Form.Item>
-            <Form.Item
-              className="no-item-control"
-              name="Metrics"
-              label="Metrics"
-              rules={[
-                {
-                  required: false,
-                  message: '',
-                },
-              ]}
-            >
-              <></>
-            </Form.Item>
-            <Form.Item
-              name="jmxPort"
-              label="JMX Port"
-              className="inline-item adjust-height-style"
-              extra={extra.jmxExtra}
-              rules={[
-                {
-                  required: false,
-                  message: '',
-                },
-              ]}
-            >
-              <InputNumber style={{ width: 134 }} min={0} max={99999} />
-            </Form.Item>
-            <Form.Item
-              name="maxConn"
-              label="MaxConn"
-              className="inline-item adjust-height-style"
-              rules={[
-                {
-                  required: false,
-                  message: '',
-                },
-              ]}
-            >
-              <InputNumber style={{ width: 134 }} min={0} max={99999} />
-            </Form.Item>
-            <Form.Item
-              name="security"
-              label="Security"
-              className="inline-item adjust-height-style"
-              rules={[
-                {
-                  required: false,
-                  message: '',
-                },
-              ]}
-            >
-              <Radio.Group>
-                <Radio value="None">None</Radio>
-                <Radio value="Password">Password Authentication</Radio>
-              </Radio.Group>
-            </Form.Item>
-            {security === 'Password' ? (
-              <>
-                <Form.Item
-                  className="inline-item max-width-66"
-                  name="username"
-                  label="User Info"
-                  style={{ width: '58%' }}
-                  rules={[
-                    {
-                      required: security === 'Password' || curClusterInfo?.security === 'Password',
-                      validator: async (rule: any, value: string) => {
-                        if (!value) {
-                          return Promise.reject('用户名不能为空');
-                        }
-                        if (!new RegExp(regUsername).test(value)) {
-                          return Promise.reject('仅支持大小写、下划线、短划线（-）');
-                        }
-                        if (value.length > 128) {
-                          return Promise.reject('用户名长度限制在1～128字符');
-                        }
-                        return Promise.resolve();
-                      },
-                    },
-                  ]}
-                >
-                  <Input placeholder="请输入用户名" />
+            <Form.Item className="metrics-form-item" label="Metrics">
+              <div className="horizontal-form-container">
+                <div className="inline-items">
+                  <Form.Item name="jmxPort" label="JMX Port :" extra={extra.jmxExtra}>
+                    <InputNumber min={0} max={99999} style={{ width: 129 }} />
+                  </Form.Item>
+                  <Form.Item name="maxConn" label="Max Conn :">
+                    <InputNumber addonAfter="个" min={0} max={99999} style={{ width: 124 }} />
+                  </Form.Item>
+                </div>
+                <Form.Item name="openSSL" label="Security :">
+                  <Radio.Group>
+                    <Radio value={false}>None</Radio>
+                    <Radio value={true}>Password Authentication</Radio>
+                  </Radio.Group>
                 </Form.Item>
-                <Form.Item
-                  className="inline-item"
-                  name="token"
-                  label=""
-                  style={{ width: '38%', marginRight: 0 }}
-                  rules={[
-                    {
-                      required: security === 'Password' || curClusterInfo?.security === 'Password',
-                      validator: async (rule: any, value: string) => {
-                        if (!value) {
-                          return Promise.reject('密码不能为空');
-                        }
-                        if (!new RegExp(regUsername).test(value)) {
-                          return Promise.reject('密码只能由大小写、下划线、短划线（-）组成');
-                        }
-                        if (value.length < 6 || value.length > 32) {
-                          return Promise.reject('密码长度限制在6～32字符');
-                        }
-                        return Promise.resolve();
-                      },
-                    },
-                  ]}
-                >
-                  <Input placeholder="请输入密码" />
+                <Form.Item dependencies={['openSSL']} noStyle>
+                  {({ getFieldValue }) => {
+                    return getFieldValue('openSSL') ? (
+                      <div className="user-info-form-items">
+                        <Form.Item className="user-info-label" label="User Info :" required />
+                        <div className="inline-items">
+                          <Form.Item
+                            name="username"
+                            rules={[
+                              {
+                                validator: validators.securityUserName,
+                              },
+                            ]}
+                          >
+                            <Input placeholder="请输入用户名" />
+                          </Form.Item>
+                          <Form.Item
+                            className="token-form-item"
+                            name="token"
+                            rules={[
+                              {
+                                validator: validators.securityToken,
+                              },
+                            ]}
+                          >
+                            <Input placeholder="请输入密码" />
+                          </Form.Item>
+                        </div>
+                      </div>
+                    ) : null;
+                  }}
                 </Form.Item>
-              </>
-            ) : null}
+              </div>
+            </Form.Item>
             <Form.Item
               name="kafkaVersion"
               label="Version"
+              dependencies={['zookeeper']}
               extra={<span className="error-extra-info">{extra.versionExtra}</span>}
-              validateStatus={isLowVersion ? 'error' : 'success'}
               rules={[
                 {
                   required: true,
-                  validator: async (rule: any, value: any) => {
-                    if (!value) {
-                      setIsLowVersion(true);
-                      return Promise.reject('版本号不能为空');
-                    }
-                    // 检测版本号小于2.8.0，如果没有填zookeeper信息，才会提示
-                    const zookeeper = form.getFieldValue('zookeeper');
-                    if (value < lowKafkaVersion && !zookeeper) {
-                      setIsLowVersion(true);
-                      setExtra({
-                        ...extra,
-                        versionExtra: intl.formatMessage({ id: 'access.cluster.low.version.tip' }),
-                      });
-                      return Promise.resolve();
-                    }
-                    setIsLowVersion(false);
-                    return Promise.resolve();
-                  },
+                  validator: validators.kafkaVersion,
                 },
               ]}
             >
@@ -565,29 +505,15 @@ const AccessClusters = (props: any): JSX.Element => {
               label="集群配置"
               rules={[
                 {
-                  required: false,
-                  message: '请输入集群配置',
+                  validator: validators.clientProperties,
                 },
-                () => ({
-                  validator(_, value) {
-                    try {
-                      if (value) {
-                        JSON.parse(value);
-                      }
-
-                      return Promise.resolve();
-                    } catch (e) {
-                      return Promise.reject(new Error('输入内容必须为 JSON'));
-                    }
-                  },
-                }),
               ]}
             >
               <div>
                 <CodeMirrorFormItem
                   resize
                   defaultInput={form.getFieldValue('clientProperties')}
-                  placeholder={clientPropertiesPlaceholder}
+                  placeholder={CLIENT_PROPERTIES_PLACEHOLDER}
                   onBeforeChange={(clientProperties: string) => {
                     form.setFieldsValue({ clientProperties });
                     form.validateFields(['clientProperties']);
@@ -621,20 +547,11 @@ const AccessClusters = (props: any): JSX.Element => {
               label="集群描述"
               rules={[
                 {
-                  required: false,
-                  validator: async (rule: any, value: string) => {
-                    if (!value) {
-                      return Promise.resolve('');
-                    }
-                    if (value && value.length > 200) {
-                      return Promise.reject('集群描述长度限制在200字符');
-                    }
-                    return Promise.resolve();
-                  },
+                  validator: validators.description,
                 },
               ]}
             >
-              <Input.TextArea rows={rows} />
+              <Input.TextArea rows={4} />
             </Form.Item>
           </Form>
         </Spin>

km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/index.less

@@ -656,43 +656,37 @@
       color: @error-color;
     }
   }
-  .inline-item.dcloud-form-item {
-    display: -webkit-inline-box;
-    margin-right: 16px;
-
-    &.adjust-height-style {
-      .dcloud-form-item-label {
-        padding: 0;
-        label {
-          height: 36px;
-        }
-      }
-      .dcloud-form-item-control {
-        &-input {
-          height: 36px;
-        }
-      }
+  .horizontal-form-container {
+    padding-left: 16px;
+    .inline-items {
+      display: flex;
+      justify-content: space-between;
     }
-
-    &.max-width-66 {
-      .dcloud-form-item-control {
-        max-width: 66%;
-      }
-    }
-
-    .dcloud-form-item-label {
-      margin-right: 12px;
-
-      label {
+    .dcloud-form-item {
+      flex-direction: row;
+      align-items: center;
+      &-label {
+        padding: 0 12px 0 0;
+        font-size: 13px;
         font-family: @font-family;
+        color: #74788d;
       }
     }
-  }
-
-  .no-item-control {
-    margin-bottom: 8px !important;
-    .dcloud-form-item-control {
-      display: none;
+    .metrics-form-item {
+      margin-top: 8px;
+    }
+    .user-info-form-items {
+      display: flex;
+      align-items: flex-start;
+      .user-info-label {
+        padding-top: 4px;
+      }
+      .inline-items {
+        flex: 0 0 80%;
+        .token-form-item {
+          margin-left: 16px;
+        }
+      }
     }
   }
 }

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 {

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={{

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;
-      }
-    }
   }
 }
 

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

km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/DetailChart/index.less

@@ -1,53 +1,20 @@
-.cluster-container-border {
-  background: #ffffff;
+.cluster-detail-container-border {
+  background: #fff;
   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;
 }
 
 .cluster-detail-container {
-  width: 100%;
-
-  &-header {
-    display: flex;
-    align-items: center;
-    height: 36px;
-
-    .refresh-icon-box {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 22px;
-      height: 22px;
-      border-radius: 50%;
-      cursor: pointer;
-
-      .refresh-icon {
-        font-size: 14px;
-        color: #74788d;
-      }
-
-      &:hover {
-        background: #21252904;
-
-        .refresh-icon {
-          color: #495057;
-        }
-      }
-    }
-  }
-
   &-main {
     .header-chart-container {
-      width: 100%;
       height: 244px;
       margin-bottom: 12px;
-      .cluster-container-border();
+      .cluster-detail-container-border();
       .dcloud-spin.dcloud-spin-spinning {
         display: flex;
         justify-content: center;
         align-items: center;
-        width: 100%;
-        height: 244px;
+        height: 100%;
       }
     }
 
@@ -61,7 +28,7 @@
         flex: 1;
         height: 100%;
         overflow: hidden;
-        .cluster-container-border();
+        .cluster-detail-container-border();
         > div {
           width: 100%;
           height: 100%;
@@ -73,65 +40,64 @@
           justify-content: center;
           align-items: center;
         }
-
-        .chart-box {
-          position: relative;
-          width: 100%;
-          height: 244px;
-          background: #f8f9fa;
-          border-radius: 8px;
-
-          .expand-icon-box {
-            position: absolute;
-            z-index: 1000;
-            top: 14px;
-            right: 16px;
-            width: 24px;
-            height: 24px;
-            cursor: pointer;
-            font-size: 16px;
-            text-align: center;
-            border-radius: 50%;
-            transition: background-color 0.3s ease;
-
-            .expand-icon {
-              color: #adb5bc;
-              line-height: 24px;
-            }
-
-            &:hover {
-              background: rgba(33, 37, 41, 0.06);
-              .expand-icon {
-                color: #74788d;
-              }
-            }
-          }
-        }
       }
 
       .config-change-records-container {
         width: 240px;
         height: 100%;
         margin-left: 12px;
-        .cluster-container-border();
+        .cluster-detail-container-border();
       }
     }
   }
+}
 
-  .chart-box-title {
-    padding: 18px 0 0 20px;
-    font-family: @font-family-bold;
-    line-height: 16px;
-    .name {
-      font-size: 14px;
-      color: #212529;
+.cluster-detail-chart-box {
+  position: relative;
+  width: 100%;
+  height: 244px;
+  background: #f8f9fa;
+  border-radius: 8px;
+
+  .expand-icon-box {
+    position: absolute;
+    z-index: 1000;
+    top: 14px;
+    right: 16px;
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    font-size: 16px;
+    text-align: center;
+    border-radius: 50%;
+    transition: background-color 0.3s ease;
+
+    .expand-icon {
+      color: #adb5bc;
+      line-height: 24px;
     }
-    .unit {
-      font-size: 12px;
-      color: #495057;
-    }
-    > span {
-      cursor: pointer;
+
+    &:hover {
+      background: rgba(33, 37, 41, 0.06);
+      .expand-icon {
+        color: #74788d;
+      }
     }
   }
 }
+.cluster-detail-chart-box-title {
+  padding: 18px 0 0 20px;
+  font-family: @font-family-bold;
+  line-height: 16px;
+  .name {
+    font-size: 14px;
+    color: #212529;
+  }
+  .unit {
+    font-size: 12px;
+    color: #495057;
+  }
+  > span {
+    cursor: pointer;
+  }
+}

km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/DetailChart/index.tsx

@@ -15,6 +15,7 @@ import { getDataNumberUnit, getUnit } from '@src/constants/chartConfig';
 import SingleChartHeader, { KsHeaderOptions } from '@src/components/SingleChartHeader';
 import { MAX_TIME_RANGE_WITH_SMALL_POINT_INTERVAL } from '@src/constants/common';
 import RenderEmpty from '@src/components/RenderEmpty';
+import DragGroup from '@src/components/DragGroup';
 
 type ChartFilterOptions = Omit<KsHeaderOptions, 'gridNum'>;
 interface MetricInfo {
@@ -279,7 +280,7 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
   }, []);
 
   return (
-    <div className="cluster-detail-container">
+    <div className="chart-panel cluster-detail-container">
       <SingleChartHeader
         onChange={ksHeaderChange}
         hideNodeScope={true}
@@ -306,7 +307,7 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
           <Spin spinning={defaultChartLoading}>
             {messagesInMetricData.data && (
               <>
-                <div className="chart-box-title">
+                <div className="cluster-detail-chart-box-title">
                   <Tooltip
                     placement="topLeft"
                     title={() => {
@@ -354,14 +355,25 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
           <div className="multiple-chart-container">
             <div className={!metricDataList.length ? 'multiple-chart-container-loading' : ''}>
               <Spin spinning={chartLoading}>
-                <Row gutter={[16, 16]}>
-                  {metricDataList.length ? (
-                    metricDataList.map((data: any, i: number) => {
-                      const { metricName, metricUnit, metricLines } = data;
-                      return (
-                        <Col key={metricName} span={12}>
-                          <div className="chart-box">
-                            <div className="chart-box-title">
+                {metricDataList.length ? (
+                  <div className="no-group-con">
+                    <DragGroup
+                      sortableContainerProps={{
+                        onSortStart: () => 0,
+                        onSortEnd: () => 0,
+                        axis: 'xy',
+                        useDragHandle: false,
+                      }}
+                      gridProps={{
+                        span: 12,
+                        gutter: [16, 16],
+                      }}
+                    >
+                      {metricDataList.map((data: any, i: number) => {
+                        const { metricName, metricUnit, metricLines } = data;
+                        return (
+                          <div key={metricName} className="cluster-detail-chart-box">
+                            <div className="cluster-detail-chart-box-title">
                               <Tooltip
                                 placement="topLeft"
                                 title={() => {
@@ -379,15 +391,6 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
                                 </span>
                               </Tooltip>
                             </div>
-                            <div
-                              className="expand-icon-box"
-                              onClick={() => {
-                                setChartDetail(data);
-                                setShowChartDetailModal(true);
-                              }}
-                            >
-                              <IconFont type="icon-chuangkoufangda" className="expand-icon" />
-                            </div>
                             <SingleChart
                               chartKey={metricName}
                               showHeader={false}
@@ -405,15 +408,15 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
                               })}
                             />
                           </div>
-                        </Col>
-                      );
-                    })
-                  ) : chartLoading ? (
-                    <></>
-                  ) : (
-                    <RenderEmpty message="请先选择指标或刷新" />
-                  )}
-                </Row>
+                        );
+                      })}
+                    </DragGroup>
+                  </div>
+                ) : chartLoading ? (
+                  <></>
+                ) : (
+                  <RenderEmpty message="请先选择指标或刷新" />
+                )}
               </Spin>
             </div>
           </div>
@@ -421,35 +424,6 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
           <div className="config-change-records-container">{props.children}</div>
         </div>
       </div>
-
-      {/* 图表详情 */}
-      <Modal
-        width={1080}
-        visible={showChartDetailModal}
-        centered={true}
-        footer={null}
-        closable={false}
-        onCancel={() => setShowChartDetailModal(false)}
-      >
-        <div className="chart-detail-modal-container">
-          <div className="expand-icon-box" onClick={() => setShowChartDetailModal(false)}>
-            <IconFont type="icon-chuangkousuoxiao" className="expand-icon" />
-          </div>
-          {chartDetail && (
-            <SingleChart
-              chartTypeProp="line"
-              wrapStyle={{
-                width: 'auto',
-                height: 462,
-              }}
-              propChartData={chartDetail.metricLines}
-              {...getChartConfig({
-                metricName: `${chartDetail.metricName}{unit|（${chartDetail.metricUnit}）}`,
-              })}
-            />
-          )}
-        </div>
-      </Modal>
     </div>
   );
 };

km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/index.less

@@ -231,9 +231,10 @@
     }
 
     .chart-panel {
-      flex: 1;
+      flex: auto;
       margin-left: 12px;
       margin-right: 10px;
+      overflow: hidden;
     }
 
     .change-log-panel {

km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/index.tsx

@@ -21,11 +21,9 @@ const SingleClusterDetail = (): JSX.Element => {
         </div>
         <div className="cluster-detail">
           <LeftSider />
-          <div className="chart-panel">
-            <ChartPanel>
-              <ChangeLog />
-            </ChartPanel>
-          </div>
+          <ChartPanel>
+            <ChangeLog />
+          </ChartPanel>
         </div>
       </div>
     </>

km-console/packages/layout-clusters-fe/src/pages/TestingConsumer/config.tsx

@@ -268,6 +268,7 @@ export const getFormConfig = (topicMetaData: any, info = {} as any, partitionLis
       type: FormItemType.inputNumber,
       attrs: {
         min: 1,
+        max: 1000,
       },
       invisible: !info?.needMsgNum,
       rules: [

km-console/packages/layout-clusters-fe/src/pages/TestingProduce/config.tsx

@@ -152,6 +152,7 @@ export const getFormConfig = (params: any) => {
       rules: [{ required: true, message: '请输入' }],
       attrs: {
         min: 0,
+        max: 1000,
         style: { width: 232 },
       },
     },
@@ -391,7 +392,7 @@ export const getTableColumns = () => {
     {
       title: 'time',
       dataIndex: 'costTimeUnitMs',
-      width: 60,
+      width: 100,
     },
   ];
 };

km-console/packages/layout-clusters-fe/src/pages/TopicDetail/Messages.tsx

@@ -10,7 +10,7 @@ const defaultParams: any = {
   maxRecords: 100,
   pullTimeoutUnitMs: 5000,
   // filterPartitionId: 1,
-  filterOffsetReset: 0
+  filterOffsetReset: 0,
 };
 const defaultpaPagination = {
   current: 1,
@@ -32,8 +32,8 @@ const TopicMessages = (props: any) => {
 
   // 获取消息开始位置
   const offsetResetList = [
-    { 'label': 'latest', value: 0 },
-    { 'label': 'earliest', value: 1 }
+    { label: 'latest', value: 0 },
+    { label: 'earliest', value: 1 },
   ];
 
   // 默认排序
@@ -99,10 +99,10 @@ const TopicMessages = (props: any) => {
   const onTableChange = (pagination: any, filters: any, sorter: any, extra: any) => {
     setPagination(pagination);
     // 只有排序事件时，触发重新请求后端数据
-    if(extra.action === 'sort') {
+    if (extra.action === 'sort') {
       setSorter({
         sortField: sorter.field || '',
-        sortType: sorter.order ? sorter.order.substring(0, sorter.order.indexOf('end')) : ''
+        sortType: sorter.order ? sorter.order.substring(0, sorter.order.indexOf('end')) : '',
       });
     }
     // const asc = sorter?.order && sorter?.order === 'ascend' ? true : false;
@@ -137,11 +137,11 @@ const TopicMessages = (props: any) => {
           <Form form={form} layout="inline" onFinish={onFinish}>
             <Form.Item name="filterOffsetReset">
               <Select
-                  options={offsetResetList}
-                  size="small"
-                  style={{ width: '120px' }}
-                  className={'detail-table-select'}
-                  placeholder="请选择offset"
+                options={offsetResetList}
+                size="small"
+                style={{ width: '120px' }}
+                className={'detail-table-select'}
+                placeholder="请选择offset"
               />
             </Form.Item>
             <Form.Item name="filterPartitionId">
@@ -172,7 +172,14 @@ const TopicMessages = (props: any) => {
           style={{ margin: '12px 0 4px', padding: '7px 12px', background: '#FFF9E6' }}
           message={
             <div>
-              此处展示Topic最近的100条messages，若想获取其他messages，可前往<a onClick={jumpConsume}>Produce&Consume</a>进行操作
+              此处展示 Topic 最近的 100 条 messages。
+              {process.env.BUSINESS_VERSION ? (
+                <span>
+                  若想获取其他 messages，可前往 <a onClick={jumpConsume}>Produce&Consume</a> 进行操作
+                </span>
+              ) : (
+                ''
+              )}
             </div>
           }
           type="warning"
@@ -194,7 +201,7 @@ const TopicMessages = (props: any) => {
             bordered: false,
             onChange: onTableChange,
             scroll: { x: 'max-content' },
-            sortDirections: ['descend', 'ascend', 'default']
+            sortDirections: ['descend', 'ascend', 'default'],
           },
         }}
       />

km-console/packages/layout-clusters-fe/src/pages/TopicList/Create.tsx

@@ -218,10 +218,10 @@ export default (props: any) => {
           </Form.Item>
           <div className="create-topic-flex-layout">
             <Form.Item name="partitionNum" label="分区数" rules={[{ required: true, message: '请输入分区数' }]}>
-              <InputNumber min={1} style={{ width: '100%' }} />
+              <InputNumber min={1} style={{ width: '100%' }} addonAfter="个" />
             </Form.Item>
             <Form.Item name="replicaNum" label="副本数" rules={[{ required: true, message: '请输入副本数' }]}>
-              <InputNumber min={1} style={{ width: '100%' }} />
+              <InputNumber min={1} style={{ width: '100%' }} addonAfter="个" />
             </Form.Item>
           </div>
           <Form.Item className="data-save-time-label" name="dataSaveTime">

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 {

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={

km-console/packages/layout-clusters-fe/webpack.config.js

@@ -1,98 +1,9 @@
 const path = require('path');
 require('dotenv').config({ path: path.resolve(process.cwd(), '../../.env') });
-const webpack = require('webpack');
 const merge = require('webpack-merge');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const getWebpackCommonConfig = require('./config/d1-webpack.base');
-const CountPlugin = require('./config/CountComponentWebpackPlugin');
-const isProd = process.env.NODE_ENV === 'production';
-const jsFileName = isProd ? '[name]-[chunkhash].js' : '[name].js';
-const outPath = path.resolve(__dirname, `../../../km-rest/src/main/resources/templates/layout`);
-module.exports = merge(getWebpackCommonConfig(), {
-  mode: isProd ? 'production' : 'development',
-  entry: {
-    layout: ['./src/index.tsx'],
-  },
-  plugins: [
-    isProd
-      ? new CountPlugin({
-          pathname: 'knowdesign',
-          startCount: true,
-          isExportExcel: false,
-        })
-      : undefined,
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
-        RUN_ENV: JSON.stringify(process.env.RUN_ENV),
-        BUSINESS_VERSION: process.env.BUSINESS_VERSION === 'true',
-        PUBLIC_PATH: JSON.stringify(process.env.PUBLIC_PATH),
-      },
-    }),
-    new HtmlWebpackPlugin({
-      meta: {
-        manifest: 'manifest.json',
-      },
-      template: './src/index.html',
-      favicon: path.resolve('favicon.ico'),
-      inject: 'body',
-    }),
-    new CopyWebpackPlugin(
-      [
-        {
-          from: path.resolve(__dirname, 'static'),
-          to: path.resolve(outPath, '../static'),
-        },
-      ].concat(
-        isProd
-          ? [
-              {
-                from: path.resolve(__dirname, 'favicon.ico'),
-                to: path.resolve(outPath, '../favicon.ico'),
-              },
-            ]
-          : []
-      )
-    ),
-  ].filter((p) => p),
-  output: {
-    path: outPath,
-    publicPath: isProd ? process.env.PUBLIC_PATH + '/layout/' : '/',
-    filename: jsFileName,
-    chunkFilename: jsFileName,
-    library: 'layout',
-    libraryTarget: 'amd',
-  },
-  devServer: {
-    host: 'localhost',
-    port: 8000,
-    hot: true,
-    open: true,
-    openPage: 'http://localhost:8000/',
-    inline: true,
-    historyApiFallback: true,
-    publicPath: `http://localhost:8000/`,
-    headers: {
-      'cache-control': 'no-cache',
-      pragma: 'no-cache',
-      'Access-Control-Allow-Origin': '*',
-    },
-    proxy: {
-      '/ks-km/api/v3': {
-        changeOrigin: true,
-        target: 'http://localhost:8080/',
-      },
-      '/logi-security/api/v1': {
-        changeOrigin: true,
-        target: 'http://localhost:8080/',
-      },
-    },
-  },
+const devMode = process.env.NODE_ENV === 'development';
+const commonConfig = require('./config/webpack.common');
+const devConfig = require('./config/webpack.dev');
+const prodConfig = require('./config/webpack.prod');
 
-  resolve: {
-    alias: {
-      '@src': path.resolve(__dirname, 'src'),
-    },
-  },
-});
+module.exports = merge(commonConfig, devMode ? devConfig : prodConfig);