You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@tubemq.apache.org by yu...@apache.org on 2021/02/11 09:26:18 UTC

[incubator-tubemq] branch master updated: [TUBEMQ-560] Remove unprepared modules (#426)

This is an automated email from the ASF dual-hosted git repository.

yuanbo pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-tubemq.git


The following commit(s) were added to refs/heads/master by this push:
     new 430be05  [TUBEMQ-560] Remove unprepared modules (#426)
430be05 is described below

commit 430be05f2c1ec0406e12e9cfde338f5b1b50c610
Author: gosonzhang <46...@qq.com>
AuthorDate: Thu Feb 11 17:26:11 2021 +0800

    [TUBEMQ-560] Remove unprepared modules (#426)
    
    Co-authored-by: gosonzhang <go...@tencent.com>
---
 pom.xml                                            |   2 -
 tubemq-web/.env                                    |   2 -
 tubemq-web/.eslintignore                           |   5 -
 tubemq-web/.eslintrc                               |  28 --
 tubemq-web/.gitignore                              |  26 --
 tubemq-web/.prettierrc                             |   4 -
 tubemq-web/.stylelintrc                            |   3 -
 tubemq-web/README.md                               |  33 --
 tubemq-web/config-overrides.js                     |  52 ---
 tubemq-web/mock/_constant.js                       |   3 -
 tubemq-web/mock/app.js                             |   6 -
 tubemq-web/package.json                            | 110 -----
 tubemq-web/public/favicon.ico                      | Bin 1226 -> 0 bytes
 tubemq-web/public/index.html                       |  43 --
 tubemq-web/public/logo192.png                      | Bin 33077 -> 0 bytes
 tubemq-web/public/logo512.png                      | Bin 9664 -> 0 bytes
 tubemq-web/public/manifest.json                    |  24 -
 tubemq-web/public/robots.txt                       |   3 -
 tubemq-web/src/components/Breadcrumb/index.less    |   8 -
 tubemq-web/src/components/Breadcrumb/index.tsx     |  47 --
 tubemq-web/src/components/Layout/index.less        |  31 --
 tubemq-web/src/components/Layout/index.tsx         |  76 ---
 tubemq-web/src/components/Modalx/index.less        |  17 -
 tubemq-web/src/components/Modalx/index.tsx         |  49 --
 tubemq-web/src/components/Tablex/index.less        |  16 -
 tubemq-web/src/components/Tablex/index.tsx         | 114 -----
 .../src/components/Tablex/tableFilterHelper.ts     |  32 --
 tubemq-web/src/components/TitleWrap/index.less     |  11 -
 tubemq-web/src/components/TitleWrap/index.tsx      |  22 -
 tubemq-web/src/components/index.tsx                |   3 -
 tubemq-web/src/configs/index.ts                    |   3 -
 tubemq-web/src/configs/menus/index.tsx             |  50 --
 tubemq-web/src/constants/broker.ts                 |  22 -
 tubemq-web/src/constants/person.ts                 |   4 -
 tubemq-web/src/constants/topic.ts                  |  10 -
 tubemq-web/src/context/globalContext.ts            |  12 -
 tubemq-web/src/defaultSettings.js                  |   6 -
 tubemq-web/src/hooks/index.ts                      |  52 ---
 tubemq-web/src/index.tsx                           |  11 -
 tubemq-web/src/pages/Broker/commonModal.tsx        | 274 -----------
 tubemq-web/src/pages/Broker/detail.tsx             | 378 ---------------
 tubemq-web/src/pages/Broker/index.less             |   9 -
 tubemq-web/src/pages/Broker/index.tsx              | 280 -----------
 tubemq-web/src/pages/Broker/query.tsx              | 128 ------
 tubemq-web/src/pages/Cluster/index.less            |   0
 tubemq-web/src/pages/Cluster/index.tsx             | 143 ------
 tubemq-web/src/pages/Issue/consumeGroupDetail.tsx  |  95 ----
 tubemq-web/src/pages/Issue/index.less              |   0
 tubemq-web/src/pages/Issue/index.tsx               |  98 ----
 tubemq-web/src/pages/NotFound/index.tsx            |   5 -
 tubemq-web/src/pages/Topic/commonModal.tsx         | 349 --------------
 tubemq-web/src/pages/Topic/detail.tsx              | 510 ---------------------
 tubemq-web/src/pages/Topic/index.less              |   9 -
 tubemq-web/src/pages/Topic/index.tsx               | 279 -----------
 tubemq-web/src/pages/Topic/query.tsx               | 180 --------
 tubemq-web/src/react-app-env.d.ts                  |   1 -
 tubemq-web/src/router.tsx                          |  55 ---
 tubemq-web/src/routes/index.tsx                    |  37 --
 tubemq-web/src/serviceWorker.ts                    | 146 ------
 tubemq-web/src/setupProxy.js                       |  12 -
 tubemq-web/src/store/global.ts                     |  30 --
 tubemq-web/src/typings/index.ts                    |   1 -
 tubemq-web/src/typings/router.ts                   |  14 -
 tubemq-web/src/utils/index.ts                      |  45 --
 tubemq-web/tsconfig.json                           |  33 --
 tubemq-web/tsconfig.paths.json                     |   8 -
 66 files changed, 4059 deletions(-)

diff --git a/pom.xml b/pom.xml
index 0e6a5ce..3ca5c29 100644
--- a/pom.xml
+++ b/pom.xml
@@ -69,7 +69,6 @@
         <module>tubemq-server</module>
         <module>tubemq-example</module>
         <module>tubemq-connectors</module>
-        <module>tubemq-docker</module>
     </modules>
 
     <properties>
@@ -264,7 +263,6 @@
                         <exclude>resources/assets/lib/**</exclude>
                         <exclude>resources/assets/public/**</exclude>
                         <exclude>DISCLAIMER</exclude>
-                        <exclude>tubemq-web/**</exclude>
                         <!-- copy or modify files from other projects -->
                         <exclude>**/tubemq-client-twins/tubemq-client-cpp/src/any.h</exclude>
                         <exclude>**/tubemq-client-twins/tubemq-client-cpp/src/buffer.h</exclude>
diff --git a/tubemq-web/.env b/tubemq-web/.env
deleted file mode 100644
index 936a9dc..0000000
--- a/tubemq-web/.env
+++ /dev/null
@@ -1,2 +0,0 @@
-PORT=3000
-SKIP_PREFLIGHT_CHECK=true
diff --git a/tubemq-web/.eslintignore b/tubemq-web/.eslintignore
deleted file mode 100644
index 6bba8e4..0000000
--- a/tubemq-web/.eslintignore
+++ /dev/null
@@ -1,5 +0,0 @@
-node_modules/**
-dist/**
-public/**
-src/serviceWorker.ts
-mock
diff --git a/tubemq-web/.eslintrc b/tubemq-web/.eslintrc
deleted file mode 100644
index 472dd8d..0000000
--- a/tubemq-web/.eslintrc
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "extends": [
-    "plugin:@typescript-eslint/recommended",
-    "react-app",
-    "plugin:prettier/recommended"
-  ],
-  "plugins": ["@typescript-eslint", "react", "prettier"],
-  "env": {
-    "browser": true,
-    "node": true,
-    "mocha": true
-  },
-  "globals": {
-    "Babel": true,
-    "React": true
-  },
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  },
-  "rules": {
-    "@typescript-eslint/no-explicit-any": 0,
-    "@typescript-eslint/explicit-function-return-type": 0,
-    "jsx-a11y/anchor-is-valid": 0,
-    "react-hooks/exhaustive-deps": 0
-  }
-}
diff --git a/tubemq-web/.gitignore b/tubemq-web/.gitignore
deleted file mode 100644
index 448f7e5..0000000
--- a/tubemq-web/.gitignore
+++ /dev/null
@@ -1,26 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-package-lock.json
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-yarn.lock
-.history
diff --git a/tubemq-web/.prettierrc b/tubemq-web/.prettierrc
deleted file mode 100644
index c1a6f66..0000000
--- a/tubemq-web/.prettierrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "singleQuote": true,
-  "trailingComma": "es5"
-}
diff --git a/tubemq-web/.stylelintrc b/tubemq-web/.stylelintrc
deleted file mode 100644
index 2e8ff58..0000000
--- a/tubemq-web/.stylelintrc
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": ["stylelint-config-standard", "stylelint-config-prettier"]
-}
diff --git a/tubemq-web/README.md b/tubemq-web/README.md
deleted file mode 100644
index d96c9e5..0000000
--- a/tubemq-web/README.md
+++ /dev/null
@@ -1,33 +0,0 @@
-# web
-This project was bootstrapped with [React Seed](https://github.com/reactseed/reactseed).
-
-## Available Scripts
-Inside the newly created project, you can run some built-in commands:
-
-### `npm start` or `yarn start`
-
-Runs the app in development mode. 
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-The page will reload if you make edits.
-You will also see any lint errors in the console.
-
-### `npm test` or `yarn test`
-
-Launches the test runner in the interactive watch mode.
-See the section about [running tests](https://create-react-app.dev/docs/running-tests/) for more information.
-
-### `npm run build` or `yarn build`
-
-Builds the app for production to the build folder.
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.
-Your app is ready to be deployed!
-
-See the section about [deployment](https://create-react-app.dev/docs/deployment/) for more information.
-
-### `npm run analyze` or `yarn analyze`
-
-Analyzes JavaScript bundles using the source maps.
-> You need to run `npm run build` or `yarn build` before analysis.
diff --git a/tubemq-web/config-overrides.js b/tubemq-web/config-overrides.js
deleted file mode 100644
index bb8515b..0000000
--- a/tubemq-web/config-overrides.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const path = require('path');
-const webpack = require('webpack');
-const devServer = require('@reactseed/devserver');
-const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin');
-const {
-  override,
-  addWebpackAlias,
-  addLessLoader,
-  overrideDevServer,
-  addWebpackPlugin,
-  fixBabelImports,
-  addBabelPlugin,
-} = require('customize-cra');
-const nodeModulesPath = path.resolve(__dirname, 'node_modules');
-const nodeModules = pkg => path.resolve(nodeModulesPath, pkg);
-
-module.exports = {
-  webpack: override(
-    addBabelPlugin('react-hot-loader/babel'),
-    addLessLoader({
-      javascriptEnabled: true,
-    }),
-    addWebpackAlias({
-      '@': path.resolve(__dirname, 'src'),
-    }),
-    fixBabelImports('antd', {
-      libraryDirectory: 'lib',
-      style: 'css',
-    }),
-    addWebpackPlugin(
-      new AntdDayjsWebpackPlugin(),
-      new webpack.HotModuleReplacementPlugin()
-    ),
-    config => {
-      if (config.mode === 'development') {
-        config.resolve.alias['react-dom'] = path.resolve(
-          __dirname,
-          'node_modules/@hot-loader/react-dom'
-        );
-        config.entry.unshift(nodeModules('react-hot-loader/patch'));
-      }
-      return config;
-    }
-  ),
-  devServer: overrideDevServer(devServer, config => {
-    config.inline = true;
-    // eslint-disable-next-line no-undef
-    Atomics.wait(new Int32Array(new SharedArrayBuffer(4)), 0, 0, 10000);
-    return config;
-  }),
-};
diff --git a/tubemq-web/mock/_constant.js b/tubemq-web/mock/_constant.js
deleted file mode 100644
index 286afb4..0000000
--- a/tubemq-web/mock/_constant.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
-  apiPrefix: '/api',
-};
diff --git a/tubemq-web/mock/app.js b/tubemq-web/mock/app.js
deleted file mode 100644
index 6a109a8..0000000
--- a/tubemq-web/mock/app.js
+++ /dev/null
@@ -1,6 +0,0 @@
-const { apiPrefix } = require('./_constant');
-const packageJSON = require('../package.json');
-
-module.exports = {
-  [`GET ${apiPrefix}/app`]: packageJSON,
-};
diff --git a/tubemq-web/package.json b/tubemq-web/package.json
deleted file mode 100644
index 19ecc93..0000000
--- a/tubemq-web/package.json
+++ /dev/null
@@ -1,110 +0,0 @@
-{
-  "name": "web",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@ant-design/icons": "^4.2.1",
-    "@ant-design/pro-layout": "^5.0.12",
-    "@reactseed/use-redux": "^0.0.3",
-    "@reactseed/use-request": "^0.0.2",
-    "@types/lodash": "^4.14.155",
-    "@umijs/use-request": "^1.4.3",
-    "antd": "^4.2.2",
-    "immer": "^6.0.9",
-    "lodash": "^4.17.15",
-    "react": "16.13.0",
-    "react-dom": "16.13.0",
-    "react-redux": "^7.2.0",
-    "react-router-dom": "^5.2.0",
-    "redux": "^4.0.5"
-  },
-  "scripts": {
-    "analyze": "source-map-explorer 'build/static/js/*.js'",
-    "start": "EXTEND_ESLINT=true react-app-rewired start",
-    "build": "react-app-rewired build",
-    "test": "react-app-rewired test",
-    "commit": "git cz",
-    "prettier": "prettier --write 'src/**/*.{ts,tsx}'",
-    "eslint": "eslint --fix --no-error-on-unmatched-pattern 'src/**/*.{ts,tsx}'",
-    "stylelint": "stylelint 'src/**/*.less' --syntax less --allow-empty-input"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "lint-staged": {
-    "*.{ts,tsx}": [
-      "npm run eslint",
-      "npm run prettier"
-    ],
-    "*.{less}": [
-      "npm run stylelint"
-    ]
-  },
-  "pre-commit": "lint-staged",
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged",
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS --verbose --no-verify"
-    }
-  },
-  "commitlint": {
-    "extends": [
-      "@commitlint/config-conventional"
-    ]
-  },
-  "config": {
-    "commitizen": {
-      "path": "./node_modules/cz-conventional-changelog"
-    }
-  },
-  "devDependencies": {
-    "@commitlint/cli": "^8.3.5",
-    "@commitlint/config-conventional": "^8.3.4",
-    "@hot-loader/react-dom": "=16.13.0",
-    "@reactseed/devserver": "^0.0.2",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
-    "@types/jest": "^25.2.1",
-    "@types/node": "^13.13.5",
-    "@types/react": "^16.9.35",
-    "@types/react-dom": "^16.9.8",
-    "@types/react-redux": "^7.1.9",
-    "@types/react-router-dom": "^5.1.5",
-    "antd-dayjs-webpack-plugin": "^1.0.0",
-    "babel-plugin-import": "^1.13.0",
-    "customize-cra": "^0.9.1",
-    "cz-conventional-changelog": "^3.2.0",
-    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.10.0",
-    "eslint-config-react-app": "^5.2.0",
-    "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-react": "^7.19.0",
-    "eslint-plugin-react-hooks": "^4.0.2",
-    "http-proxy-middleware": "^1.0.1",
-    "husky": "^4.2.5",
-    "less": "^3.11.1",
-    "less-loader": "^5.0.0",
-    "lint-staged": "^10.2.2",
-    "prettier": "^1.19.1",
-    "react-app-rewire-hot-loader": "^2.0.1",
-    "react-app-rewired": "^2.1.5",
-    "react-hot-loader": "^4.12.21",
-    "react-scripts": "3.4.0",
-    "source-map-explorer": "^2.3.1",
-    "stylelint": "^13.3.3",
-    "stylelint-config-prettier": "^8.0.1",
-    "stylelint-config-standard": "^20.0.0",
-    "typescript": "~3.8.3",
-    "use-immer": "^0.4.0"
-  }
-}
diff --git a/tubemq-web/public/favicon.ico b/tubemq-web/public/favicon.ico
deleted file mode 100644
index 094e7d6..0000000
Binary files a/tubemq-web/public/favicon.ico and /dev/null differ
diff --git a/tubemq-web/public/index.html b/tubemq-web/public/index.html
deleted file mode 100644
index b833b69..0000000
--- a/tubemq-web/public/index.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>web</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>
diff --git a/tubemq-web/public/logo192.png b/tubemq-web/public/logo192.png
deleted file mode 100644
index 904a235..0000000
Binary files a/tubemq-web/public/logo192.png and /dev/null differ
diff --git a/tubemq-web/public/logo512.png b/tubemq-web/public/logo512.png
deleted file mode 100644
index a4e47a6..0000000
Binary files a/tubemq-web/public/logo512.png and /dev/null differ
diff --git a/tubemq-web/public/manifest.json b/tubemq-web/public/manifest.json
deleted file mode 100644
index 4e45728..0000000
--- a/tubemq-web/public/manifest.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-  "short_name": "web",
-  "name": "web",
-  "icons": [{
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}
diff --git a/tubemq-web/public/robots.txt b/tubemq-web/public/robots.txt
deleted file mode 100644
index e9e57dc..0000000
--- a/tubemq-web/public/robots.txt
+++ /dev/null
@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:
diff --git a/tubemq-web/src/components/Breadcrumb/index.less b/tubemq-web/src/components/Breadcrumb/index.less
deleted file mode 100644
index f02c2b7..0000000
--- a/tubemq-web/src/components/Breadcrumb/index.less
+++ /dev/null
@@ -1,8 +0,0 @@
-.breadcrumb-wrapper {
-  background: #fff;
-  padding: 10px 20px;
-}
-
-.ant-pro-basicLayout-content {
-  margin: 1px 0 0 0;
-}
\ No newline at end of file
diff --git a/tubemq-web/src/components/Breadcrumb/index.tsx b/tubemq-web/src/components/Breadcrumb/index.tsx
deleted file mode 100644
index c4113bf..0000000
--- a/tubemq-web/src/components/Breadcrumb/index.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import { MenuDataItem } from '@ant-design/pro-layout';
-import { Link } from 'react-router-dom';
-import { useLocation } from '@/hooks';
-import './index.less';
-import { Breadcrumb } from 'antd';
-
-export interface BreadcrumbProps {
-  breadcrumbMap?: Map<string, import('@umijs/route-utils').MenuDataItem>;
-  appendParams?: string;
-}
-
-const BasicLayout: React.FC<BreadcrumbProps> = props => {
-  const location = useLocation();
-  const { breadcrumbMap, appendParams } = props;
-
-  const pathSnippets = location.pathname.split('/').filter(i => i);
-  const breadcrumbItems = pathSnippets.map((_, index) => {
-    const breadcrumbNameMap = {} as any;
-    breadcrumbMap &&
-      breadcrumbMap.forEach((t: MenuDataItem) => {
-        breadcrumbNameMap[t.key as string] = t.name;
-      });
-    const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
-    if (appendParams && index === pathSnippets.length - 1) {
-      return (
-        <Breadcrumb.Item key={url}>
-          <Link to={url}>{appendParams}</Link>
-        </Breadcrumb.Item>
-      );
-    }
-
-    return (
-      <Breadcrumb.Item key={url}>
-        <Link to={url}>{breadcrumbNameMap[url]}</Link>
-      </Breadcrumb.Item>
-    );
-  });
-
-  return (
-    <>
-      <Breadcrumb className="breadcrumb-wrapper">{breadcrumbItems}</Breadcrumb>
-    </>
-  );
-};
-
-export default BasicLayout;
diff --git a/tubemq-web/src/components/Layout/index.less b/tubemq-web/src/components/Layout/index.less
deleted file mode 100644
index 6e0ed86..0000000
--- a/tubemq-web/src/components/Layout/index.less
+++ /dev/null
@@ -1,31 +0,0 @@
-#root {
-  height: 100%;
-}
-
-.header-wrapper {
-  width: 400px;
-}
-
-.header-span {
-  float: left;
-}
-
-// global css
-.main-container {
-  background: #fff;
-  padding: 10px 20px 20px 20px;
-}
-
-.search-wrapper {
-  margin-bottom: 20px;
-}
-
-.options-wrapper {
-  a {
-    margin-right: 8px;
-  }
-}
-
-.ant-layout-sider-collapsed .ant-pro-sider-menu-logo {
-  margin-left: -15px;
-}
\ No newline at end of file
diff --git a/tubemq-web/src/components/Layout/index.tsx b/tubemq-web/src/components/Layout/index.tsx
deleted file mode 100644
index a4a4ddd..0000000
--- a/tubemq-web/src/components/Layout/index.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import React, { useState, useEffect, useMemo, useContext } from 'react';
-import ProBasicLayout, {
-  SettingDrawer,
-  getMenuData,
-  MenuDataItem,
-  SettingDrawerProps,
-} from '@ant-design/pro-layout';
-import { Link } from 'react-router-dom';
-import { useLocation } from '@/hooks';
-import { isDevelopEnv } from '@/utils';
-import initSetting from '@/defaultSettings';
-import { menus } from '@/configs';
-import './index.less';
-import GlobalContext from '@/context/globalContext';
-
-const BasicLayout: React.FC = props => {
-  const { cluster, setBreadMap } = useContext(GlobalContext);
-  const location = useLocation();
-  const [settings, setSetting] = useState<SettingDrawerProps['settings']>(
-    initSetting as SettingDrawerProps['settings']
-  );
-  const [openKeys, setOpenKeys] = useState<string[]>([]);
-  const [selectedKeys, setSelectedKeys] = useState<string[]>(['/']);
-  const isDev = isDevelopEnv();
-  const { pathname } = location;
-  const { breadcrumbMap, menuData } = useMemo(() => getMenuData(menus), []);
-  // set breadmap 4 children page 2 use
-  setBreadMap && setBreadMap(breadcrumbMap);
-  useEffect(() => {
-    const select = breadcrumbMap.get(pathname);
-    if (select) {
-      setOpenKeys((select as MenuDataItem)['pro_layout_parentKeys']);
-      setSelectedKeys([(select as MenuDataItem)['key'] as string]);
-    }
-  }, [breadcrumbMap, pathname]);
-
-  return (
-    <>
-      <ProBasicLayout
-        title="TubeMQ"
-        logo="/logo192.png"
-        menuDataRender={() => menuData}
-        menuItemRender={(menuItemProps, defaultDom) => {
-          if (menuItemProps.isUrl || !menuItemProps.path) {
-            return defaultDom;
-          }
-          return <Link to={menuItemProps.path}>{defaultDom}</Link>;
-        }}
-        headerRender={(menuItemProps, defaultDom) => (
-          <div className="header-wrapper">
-            <span className="header-span">{defaultDom}</span>
-            <span>{cluster}</span>
-          </div>
-        )}
-        menuProps={{
-          selectedKeys,
-          openKeys,
-          onOpenChange: setOpenKeys,
-        }}
-        {...settings}
-      >
-        {props.children}
-      </ProBasicLayout>
-
-      {isDev && (
-        <SettingDrawer
-          getContainer={() => document.getElementById('root')}
-          settings={settings}
-          onSettingChange={setSetting}
-        />
-      )}
-    </>
-  );
-};
-
-export default BasicLayout;
diff --git a/tubemq-web/src/components/Modalx/index.less b/tubemq-web/src/components/Modalx/index.less
deleted file mode 100644
index 6b03518..0000000
--- a/tubemq-web/src/components/Modalx/index.less
+++ /dev/null
@@ -1,17 +0,0 @@
-.psw-set {
-  border-top: 1px solid #ccc;
-  padding-top: 20px;
-
-  .pws-label {
-    float: left;
-    line-height: 32px;
-  }
-
-  .psw-input {
-    width: 300px;
-  }
-}
-
-.enhance {
-  color: red;
-}
\ No newline at end of file
diff --git a/tubemq-web/src/components/Modalx/index.tsx b/tubemq-web/src/components/Modalx/index.tsx
deleted file mode 100644
index 6d42e82..0000000
--- a/tubemq-web/src/components/Modalx/index.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * TABLE COMPONENT WITH SEARCH
- */
-import { Modal, Input } from 'antd';
-import * as React from 'react';
-import { ModalProps } from 'antd/lib/modal';
-import { ReactElement } from 'react';
-import './index.less';
-
-const { useState } = React;
-
-export interface OKProps {
-  e: React.MouseEvent<HTMLElement>;
-  psw: string;
-  params?: any;
-}
-
-type ComProps = {
-  context?: number;
-  children?: ReactElement;
-  onOk?: (p: OKProps) => {};
-  params?: any;
-};
-
-const Comp = (props: ComProps & Omit<ModalProps, 'onOk'>) => {
-  const { params } = props;
-  const [psw, setPsw] = useState('');
-  const onOk = (e: React.MouseEvent<HTMLElement>) => {
-    props.onOk && props.onOk({ e, psw, params });
-  };
-
-  return (
-    <>
-      <Modal {...props} className="textWrap" width="60%" onOk={onOk}>
-        {props.children}
-        <div className="psw-set">
-          <label className="pws-label">机器授权:</label>
-          <Input
-            className="psw-input"
-            placeholder="请输入机器授权字段,验证操作权限"
-            onChange={e => setPsw(e.target.value)}
-          />
-        </div>
-      </Modal>
-    </>
-  );
-};
-
-export default Comp;
diff --git a/tubemq-web/src/components/Tablex/index.less b/tubemq-web/src/components/Tablex/index.less
deleted file mode 100644
index f49a245..0000000
--- a/tubemq-web/src/components/Tablex/index.less
+++ /dev/null
@@ -1,16 +0,0 @@
-.textWrap {
-  white-space: pre-line;
-  word-break: break-word;
-}
-.pb10{
-  padding-bottom: 10px;
-}
-.pd10{
-  padding: 10px;
-}
-.mt10{
-  margin-top: 10px;
-}
-.mb10{
-  margin-bottom: 10px;
-}
diff --git a/tubemq-web/src/components/Tablex/index.tsx b/tubemq-web/src/components/Tablex/index.tsx
deleted file mode 100644
index ec41277..0000000
--- a/tubemq-web/src/components/Tablex/index.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-/**
- * TABLE COMPONENT WITH SEARCH
- */
-import { Table, Input, Row, Button, Col, Tooltip } from 'antd';
-import * as React from 'react';
-import { TableProps } from 'antd/lib/table';
-import { CaretDownFilled, CaretUpFilled } from '@ant-design/icons';
-import { isEmptyParam } from '@/utils';
-import { useEffect } from 'react';
-import './index.less';
-
-const { useState } = React;
-
-const { Search } = Input;
-
-interface ComProps extends TableProps<any> {
-  filterFnX?: (value: any) => void;
-  columns?: any;
-  dataSourceX?: any;
-  searchPlaceholder?: string;
-  defaultSearchKey?: string;
-  isTruePagination?: boolean;
-  showSearch?: boolean;
-  searchWidth?: number;
-  searchStyle?: any;
-}
-
-const Comp = (props: ComProps) => {
-  const {
-    columns,
-    filterFnX,
-    searchPlaceholder,
-    expandable,
-    defaultSearchKey,
-    isTruePagination,
-    showSearch = true,
-    searchWidth = 8,
-    searchStyle = {},
-  } = props;
-  const [filterKey, setFilterKey] = useState(defaultSearchKey);
-  // 自动增加排序
-  if (columns) {
-    columns.forEach((t: any) => {
-      t.sorter = (a: any, b: any) =>
-        a[(t as any).dataIndex] - b[(t as any).dataIndex] >= 0 ? 1 : -1;
-    });
-  }
-  if (expandable && !expandable.expandIcon) {
-    expandable.expandIcon = ({ expanded, onExpand, record }) =>
-      expanded ? (
-        <CaretUpFilled onClick={e => onExpand(record, e)} />
-      ) : (
-        <CaretDownFilled onClick={e => onExpand(record, e)} />
-      );
-  }
-  const opts = { ...props };
-  const dataSource =
-    (!filterKey && isEmptyParam(opts.dataSourceX)) || isTruePagination
-      ? opts.dataSource
-      : opts.dataSourceX;
-  // 如有默认,先处理一次
-  useEffect(() => {
-    if (defaultSearchKey === undefined) return;
-
-    setFilterKey(defaultSearchKey || '');
-    filterFnX && filterFnX(defaultSearchKey || '');
-  }, [defaultSearchKey, filterFnX]);
-  // 分页如果只有一页,自动隐藏
-  opts.pagination = Object.assign(
-    {
-      hideOnSinglePage: true,
-    },
-    {
-      ...opts.pagination,
-    }
-  );
-
-  const onChange = (e: any) => {
-    if (!isTruePagination) {
-      filterFnX && filterFnX(e.target.value);
-    }
-
-    setFilterKey(e.target.value);
-  };
-
-  return (
-    <>
-      {showSearch && filterFnX && (
-        <Row gutter={20} className="mb10" style={{ position: 'relative' }}>
-          <Col span={searchWidth} style={{ padding: 0, ...searchStyle }}>
-            <Tooltip title={filterKey}>
-              <Search
-                value={filterKey}
-                onChange={onChange}
-                onSearch={v => filterFnX(v)}
-                allowClear
-                placeholder={searchPlaceholder || '字符串大小写敏感'}
-                enterButton={
-                  <Button type="primary" onClick={filterFnX}>
-                    搜索
-                  </Button>
-                }
-              />
-            </Tooltip>
-          </Col>
-        </Row>
-      )}
-
-      <Table {...opts} dataSource={dataSource} className="textWrap" />
-    </>
-  );
-};
-
-export default Comp;
diff --git a/tubemq-web/src/components/Tablex/tableFilterHelper.ts b/tubemq-web/src/components/Tablex/tableFilterHelper.ts
deleted file mode 100644
index 0032e8f..0000000
--- a/tubemq-web/src/components/Tablex/tableFilterHelper.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-interface TableFilterHelperProp {
-  key: string;
-  targetArray: Array<any>;
-  srcArray: Array<any>;
-  filterList: Array<any>;
-  updateFunction?: (p: Array<any>) => void;
-}
-const tableFilterHelper = (p: TableFilterHelperProp): any[] => {
-  const { key, srcArray = [], filterList, updateFunction } = p;
-  const res: any[] = [];
-
-  if (key) {
-    srcArray.forEach(it => {
-      const tar = filterList.map(t => {
-        return it[t];
-      });
-      let isFilterRight = false;
-      tar.forEach(t => {
-        if ((t + '').indexOf(key) > -1) isFilterRight = true;
-      });
-      if (isFilterRight) {
-        res.push(it);
-      }
-    });
-  }
-
-  if (updateFunction) updateFunction(res);
-
-  return res;
-};
-
-export default tableFilterHelper;
diff --git a/tubemq-web/src/components/TitleWrap/index.less b/tubemq-web/src/components/TitleWrap/index.less
deleted file mode 100644
index b64cf1b..0000000
--- a/tubemq-web/src/components/TitleWrap/index.less
+++ /dev/null
@@ -1,11 +0,0 @@
-.title-wrap-title {
-  font-size: 16px;
-  font-weight: bold;
-  margin-top: 15px;
-  margin-bottom: 15px;
-  position: relative;
-}
-
-.split-border {
-  border-top: 1px solid #eee;
-}
diff --git a/tubemq-web/src/components/TitleWrap/index.tsx b/tubemq-web/src/components/TitleWrap/index.tsx
deleted file mode 100644
index 47624f4..0000000
--- a/tubemq-web/src/components/TitleWrap/index.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react';
-import './index.less';
-
-interface ComProps {
-  title: any;
-  children?: any;
-  wrapperStyle?: any;
-  hasSplit?: boolean;
-}
-
-const Comp = (props: ComProps) => {
-  const { hasSplit = true } = props;
-
-  return (
-    <div style={props.wrapperStyle} className={hasSplit ? 'split-border' : ''}>
-      <div className="title-wrap-title">{props.title}</div>
-      {props.children}
-    </div>
-  );
-};
-
-export default Comp;
diff --git a/tubemq-web/src/components/index.tsx b/tubemq-web/src/components/index.tsx
deleted file mode 100644
index d7314f6..0000000
--- a/tubemq-web/src/components/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import Layout from './Layout';
-
-export { Layout };
diff --git a/tubemq-web/src/configs/index.ts b/tubemq-web/src/configs/index.ts
deleted file mode 100644
index 1cb36a6..0000000
--- a/tubemq-web/src/configs/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import menus from './menus';
-
-export { menus };
diff --git a/tubemq-web/src/configs/menus/index.tsx b/tubemq-web/src/configs/menus/index.tsx
deleted file mode 100644
index e689571..0000000
--- a/tubemq-web/src/configs/menus/index.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react';
-import { Route } from '@/typings/router';
-import {
-  NodeExpandOutlined,
-  ClusterOutlined,
-  SettingOutlined,
-} from '@ant-design/icons';
-/*
- * Note:
- * Menu items with children need to set a key starting with "/"
- * @see https://github.com/umijs/route-utils/blob/master/src/transformRoute/transformRoute.ts#L219
- */
-
-const menus: Route[] = [
-  {
-    path: '/issue',
-    name: '分发查询',
-    icon: <NodeExpandOutlined />,
-    hideChildrenInMenu: true,
-    children: [
-      {
-        path: '/:id',
-        name: '消费组详情',
-      },
-    ],
-  },
-  {
-    name: '配置管理',
-    key: '/other',
-    icon: <SettingOutlined />,
-    path: '/other',
-    children: [
-      {
-        path: '/broker',
-        name: 'Broker列表',
-      },
-      {
-        path: '/topic',
-        name: 'topic列表',
-      },
-    ],
-  },
-  {
-    path: '/cluster',
-    name: '集群管理',
-    icon: <ClusterOutlined />,
-  },
-];
-
-export default menus;
diff --git a/tubemq-web/src/constants/broker.ts b/tubemq-web/src/constants/broker.ts
deleted file mode 100644
index bc6ac45..0000000
--- a/tubemq-web/src/constants/broker.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-export const BROKER_INFO_ZH_MAP = {
-  acceptPublish: '可发布',
-  acceptSubscribe: '可订阅',
-  brokerId: 'BrokerId',
-  brokerIp: 'BrokerIP',
-  brokerPort: 'BrokerPort',
-  brokerTLSPort: 'TLS端口',
-  brokerVersion: '版本',
-  enableTLS: '启用TLS',
-  isAutoForbidden: '自动屏蔽',
-  isBrokerOnline: 'broker注册',
-  isConfChanged: '配置变更',
-  isConfLoaded: '变更加载',
-  isRepAbnormal: '上报异常',
-  manageStatus: '管理状态',
-  runStatus: '运行状态',
-  subStatus: '运行子状态',
-  'runInfo.acceptPublish': 'broker可发布状态',
-  'runInfo.acceptSubscribe': 'broker可订阅状态',
-  'runInfo.numPartitions': 'broker分区数',
-  'runInfo.brokerManageStatus': 'broker运行状态',
-};
diff --git a/tubemq-web/src/constants/person.ts b/tubemq-web/src/constants/person.ts
deleted file mode 100644
index eadf34f..0000000
--- a/tubemq-web/src/constants/person.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export const PERSON_INFO_ZH_MAP = {
-  createDate: '创建时间',
-  createUser: '创建人',
-};
diff --git a/tubemq-web/src/constants/topic.ts b/tubemq-web/src/constants/topic.ts
deleted file mode 100644
index d4c8abf..0000000
--- a/tubemq-web/src/constants/topic.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export const TOPIC_INFO_ZH_MAP = {
-  topicName: 'TopicName',
-  infoCount: '配置Broker数',
-  totalCfgNumPart: '配置分区数',
-  totalRunNumPartCount: '运行分区数',
-  isSrvAcceptPublish: '可发布',
-  isSrvAcceptSubscribe: '可订阅',
-  enableAuthControl: '权限受控',
-  groupCount: '授权消费组',
-};
diff --git a/tubemq-web/src/context/globalContext.ts b/tubemq-web/src/context/globalContext.ts
deleted file mode 100644
index 0540e02..0000000
--- a/tubemq-web/src/context/globalContext.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// global context
-import React from 'react';
-import { BreadcrumbProps } from '@/components/Breadcrumb';
-export interface GlobalContextProps {
-  cluster?: string;
-  setCluster?: Function;
-  breadMap?: BreadcrumbProps['breadcrumbMap'];
-  setBreadMap?: Function;
-  userInfo?: any;
-}
-
-export default React.createContext<GlobalContextProps>({});
diff --git a/tubemq-web/src/defaultSettings.js b/tubemq-web/src/defaultSettings.js
deleted file mode 100644
index 684a9a3..0000000
--- a/tubemq-web/src/defaultSettings.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export default {
-  layout: 'sidemenu',
-  contentWidth: 'Fluid',
-  navTheme: 'dark',
-  primaryColor: '#1890ff',
-};
diff --git a/tubemq-web/src/hooks/index.ts b/tubemq-web/src/hooks/index.ts
deleted file mode 100644
index 8340c9e..0000000
--- a/tubemq-web/src/hooks/index.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { useHistory, useLocation } from 'react-router-dom';
-import useRequest, { axios } from '@reactseed/use-request';
-import useRedux from '@reactseed/use-redux';
-import { message } from 'antd';
-
-interface DataProps {
-  data: any;
-  errorCode: number;
-  errMsg: number;
-  result: boolean;
-}
-// handler for old type interface
-axios.interceptors.request.use(
-  config => {
-    const urlArr = (config.url as any).split('/');
-    config.url = '/webapi.htm';
-    config.params = config.params || {};
-    config.params['type'] = urlArr[2];
-    config.params['method'] = urlArr[3];
-
-    return config;
-  },
-  function(error) {
-    return Promise.reject(error);
-  }
-);
-
-axios.interceptors.response.use(
-  ({ data }) => {
-    if (data.errCode !== 0) {
-      message.error(data.errMsg);
-      return Promise.reject(data);
-    }
-
-    // admin_query_master_group_info interface design no good need handle
-    if (
-      Object.keys(data).includes('groupName') &&
-      Object.keys(data).includes('groupStatus')
-    ) {
-      data.data = {
-        data: data.data,
-        groupName: data.groupName,
-        groupStatus: data.groupStatus,
-      };
-    }
-    return data || [];
-  },
-  function(error) {
-    return Promise.reject(error);
-  }
-);
-export { useHistory, useLocation, useRequest, useRedux };
diff --git a/tubemq-web/src/index.tsx b/tubemq-web/src/index.tsx
deleted file mode 100644
index 416097f..0000000
--- a/tubemq-web/src/index.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from '@/router';
-import * as serviceWorker from './serviceWorker';
-
-ReactDOM.render(<App />, document.getElementById('root'));
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
diff --git a/tubemq-web/src/pages/Broker/commonModal.tsx b/tubemq-web/src/pages/Broker/commonModal.tsx
deleted file mode 100644
index 8dc8654..0000000
--- a/tubemq-web/src/pages/Broker/commonModal.tsx
+++ /dev/null
@@ -1,274 +0,0 @@
-import { boolean2Chinese } from '@/utils';
-import Table from '@/components/Tablex';
-import { Col, Form, Input, Row } from 'antd';
-import Modal, { OKProps } from '@/components/Modalx';
-import React from 'react';
-import Query from '@/pages/Broker/query';
-import { FormProps } from 'antd/lib/form';
-
-export const OPTIONS = [
-  {
-    value: 'online',
-    name: '上线',
-  },
-  {
-    value: 'offline',
-    name: '下线',
-  },
-  {
-    value: 'reload',
-    name: '重载',
-  },
-  {
-    value: 'delete',
-    name: '删除',
-  },
-];
-export const OPTIONS_VALUES = OPTIONS.map(t => t.value);
-
-// interface
-export declare type BrokerData = any[];
-export interface BrokerResultData {
-  acceptPublish: string;
-  acceptSubscribe: string;
-  brokerId: number;
-  brokerIp: string;
-  brokerPort: number;
-  brokerTLSPort: number;
-  brokerVersion: string;
-  enableTLS: boolean;
-  isAutoForbidden: boolean;
-  isBrokerOnline: string;
-  isConfChanged: string;
-  isConfLoaded: string;
-  isRepAbnormal: boolean;
-  manageStatus: string;
-  runStatus: string;
-  subStatus: string;
-  [key: string]: any;
-}
-export interface BrokerModalProps {
-  type: string;
-  title: string;
-  updateFunction: (draft: any) => any;
-  params?: any;
-}
-// exports broker modal
-// render funcs
-const renderBrokerOptions = (modalParams: any, dataSource: any[]) => {
-  const columns = [
-    {
-      title: 'Broker',
-      render: (t: string, r: BrokerResultData) => {
-        return `${r.brokerId}#${r.brokerIp}:${r.brokerPort}`;
-      },
-    },
-    {
-      title: 'BrokerIP',
-      dataIndex: 'brokerIp',
-    },
-    {
-      title: '管理状态',
-      dataIndex: 'manageStatus',
-    },
-    {
-      title: '运行状态',
-      dataIndex: 'runStatus',
-    },
-    {
-      title: '运行子状态',
-      dataIndex: 'subStatus',
-    },
-    {
-      title: '可发布',
-      render: (t: string) => boolean2Chinese(t),
-    },
-    {
-      title: '可订阅',
-      render: (t: string) => boolean2Chinese(t),
-    },
-  ];
-  return <Table columns={columns} dataSource={dataSource} rowKey="brokerId" />;
-};
-const renderNewBroker = (form: any) => {
-  const brokerFormArr = [
-    {
-      name: 'brokerId',
-      defaultValue: '0',
-    },
-    {
-      name: 'numPartitions',
-      defaultValue: '3',
-    },
-    {
-      name: 'brokerIp',
-      defaultValue: '',
-    },
-    {
-      name: 'brokerPort',
-      defaultValue: '8123',
-    },
-    {
-      name: 'deleteWhen',
-      defaultValue: '0 0 6,18 * * ?',
-    },
-    {
-      name: 'deletePolicy',
-      defaultValue: 'delete,168h',
-    },
-    {
-      name: 'unflushThreshold',
-      defaultValue: '1000',
-    },
-    {
-      name: 'unflushInterval',
-      defaultValue: '10000',
-    },
-    {
-      name: 'acceptPublish',
-      defaultValue: 'true',
-    },
-    {
-      name: 'acceptSubscribe',
-      defaultValue: 'true',
-    },
-  ];
-
-  return (
-    <Form form={form}>
-      <Row gutter={24}>
-        {brokerFormArr.map((t, index) => (
-          <Col span={12} key={'brokerFormArr' + index}>
-            <Form.Item
-              labelCol={{ span: 12 }}
-              label={t.name}
-              name={t.name}
-              initialValue={t.defaultValue}
-            >
-              <Input />
-            </Form.Item>
-          </Col>
-        ))}
-      </Row>
-    </Form>
-  );
-};
-const renderEditBroker = (modalParams: any, form: FormProps['form']) => {
-  const { params: p } = modalParams;
-  const pickArr = [
-    'numPartitions',
-    'unflushThreshold',
-    'unflushInterval',
-    'deleteWhen',
-    'deletePolicy',
-    'acceptPublish',
-    'acceptSubscribe',
-  ];
-  const brokerFormArr: Array<{
-    name: string;
-    defaultValue: string;
-  }> = [];
-  pickArr.forEach(t => {
-    brokerFormArr.push({
-      name: t,
-      defaultValue: p[t],
-    });
-  });
-
-  return (
-    <Form form={form}>
-      <Row gutter={24}>
-        {brokerFormArr.map((t, index) => (
-          <Col span={12} key={'brokerFormArr' + index}>
-            <Form.Item
-              labelCol={{ span: 12 }}
-              label={t.name}
-              name={t.name}
-              initialValue={t.defaultValue}
-            >
-              <Input />
-            </Form.Item>
-          </Col>
-        ))}
-      </Row>
-    </Form>
-  );
-};
-const renderBrokerStateChange = (modalParams: any) => {
-  const { params } = modalParams;
-
-  return (
-    <div>
-      请确认<span className="enhance">{params.option}</span> ID:{' '}
-      <span className="enhance">{params.id}</span> 的 Broker?
-    </div>
-  );
-};
-export const onOpenModal = (p: BrokerModalProps) => {
-  const { type, title, updateFunction, params } = p;
-  if (typeof params === 'function') {
-    p.params = params();
-  }
-  updateFunction((m: any) => {
-    m.type = type;
-    m.params = params;
-    Object.assign(m, {
-      params,
-      visible: type,
-      title,
-      onOk: (p: OKProps) => {
-        updateFunction((m: any) => {
-          if (type === 'newBroker' || type === 'editBroker') {
-            p.params = f && f.getFieldsValue();
-          }
-          m.okParams = p;
-          m.isOk = Date.now();
-        });
-      },
-      onCancel: () => {
-        updateFunction((m: any) => {
-          m.visible = false;
-          m.isOk = null;
-        });
-      },
-    });
-  });
-};
-
-interface ComProps {
-  modalParams: any;
-  data: any[];
-}
-let f: FormProps['form'];
-const Comp = (props: ComProps) => {
-  const { modalParams, data } = props;
-  const [form] = Form.useForm();
-  f = form;
-
-  return (
-    <Modal {...modalParams}>
-      <div>
-        {modalParams.type &&
-          OPTIONS_VALUES.includes(modalParams.type) &&
-          renderBrokerOptions(
-            modalParams,
-            data.filter((t: BrokerResultData) =>
-              modalParams.params.includes(t.brokerId)
-            )
-          )}
-        {modalParams.type === 'newBroker' && renderNewBroker(form)}
-        {modalParams.type === 'editBroker' &&
-          renderEditBroker(modalParams, form)}
-        {modalParams.type === 'brokerStateChange' &&
-          renderBrokerStateChange(modalParams)}
-      </div>
-      <Query
-        fire={modalParams.isOk}
-        params={modalParams.okParams}
-        type={modalParams.query || modalParams.type}
-      />
-    </Modal>
-  );
-};
-
-export default Comp;
diff --git a/tubemq-web/src/pages/Broker/detail.tsx b/tubemq-web/src/pages/Broker/detail.tsx
deleted file mode 100644
index 28a7d06..0000000
--- a/tubemq-web/src/pages/Broker/detail.tsx
+++ /dev/null
@@ -1,378 +0,0 @@
-import React, { ReactNode, useContext, useState } from 'react';
-import GlobalContext from '@/context/globalContext';
-import Breadcrumb from '@/components/Breadcrumb';
-import Table from '@/components/Tablex';
-import TitleWrap from '@/components/TitleWrap';
-import { Form, Button, Spin, Col, Row, Switch, Tabs } from 'antd';
-import { useImmer } from 'use-immer';
-import './index.less';
-import { useRequest } from '@/hooks';
-import { useParams } from 'react-router-dom';
-import { boolean2Chinese, transParamsWithConstantsMap } from '@/utils';
-import { BROKER_INFO_ZH_MAP } from '@/constants/broker';
-import tableFilterHelper from '@/components/Tablex/tableFilterHelper';
-import CommonModal, { OPTIONS, onOpenModal, BrokerData } from './commonModal';
-
-declare type BrokerQueryData = {
-  withDetail: boolean;
-  brokerId: string;
-};
-
-declare type TopicQueryData = {
-  withTopic: boolean;
-  brokerId: string;
-};
-
-const { TabPane } = Tabs;
-
-const Detail: React.FC = () => {
-  const { id } = useParams();
-  const { breadMap } = useContext(GlobalContext);
-  const [form] = Form.useForm();
-  const [modalParams, updateModelParams] = useImmer<any>({});
-  const [acceptPublish, setAcceptPublish] = useState<any>(false);
-  const [acceptSubscribe, setAcceptSubscribe] = useState<any>(false);
-  const [filterData, updateFilterData] = useImmer<any>({});
-  const queryBrokerConf = useRequest<any>(
-    (
-      data: BrokerQueryData = {
-        withDetail: true,
-        brokerId: id,
-      }
-    ) => ({
-      url: '/api/op_query/admin_query_broker_run_status',
-      data: {
-        ...data,
-      },
-    }),
-    {
-      onSuccess: data => {
-        setAcceptPublish(data[0]['acceptPublish'] === 'true');
-        setAcceptSubscribe(data[0]['acceptSubscribe'] === 'true');
-      },
-    }
-  );
-  const queryTopicInfo = useRequest<any>(
-    (
-      data: TopicQueryData = {
-        withTopic: true,
-        brokerId: id,
-      }
-    ) => ({
-      url: '/api/op_query/admin_query_broker_configure',
-      data: {
-        ...data,
-      },
-    })
-  );
-
-  // render
-  const renderConf = () => {
-    const columns = [
-      {
-        title: '类别',
-        dataIndex: `type`,
-      },
-      {
-        title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'acceptPublish'),
-        dataIndex: 'acceptPublish',
-        render: (t: string) => boolean2Chinese(t),
-      },
-      {
-        title: transParamsWithConstantsMap(
-          BROKER_INFO_ZH_MAP,
-          'acceptSubscribe'
-        ),
-        dataIndex: 'acceptSubscribe',
-        render: (t: string) => boolean2Chinese(t),
-      },
-      {
-        title: transParamsWithConstantsMap(
-          BROKER_INFO_ZH_MAP,
-          'unflushThreshold'
-        ),
-        dataIndex: 'unflushThreshold',
-      },
-      {
-        title: transParamsWithConstantsMap(
-          BROKER_INFO_ZH_MAP,
-          'unflushInterval'
-        ),
-        dataIndex: 'unflushInterval',
-      },
-      {
-        title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'deleteWhen'),
-        dataIndex: 'deleteWhen',
-      },
-      {
-        title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'deletePolicy'),
-        dataIndex: 'deletePolicy',
-      },
-      {
-        title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'numPartitions'),
-        dataIndex: 'numPartitions',
-      },
-      {
-        title: '操作',
-        render: (t: string, r: BrokerData) => {
-          return <a onClick={() => onEditConf(r)}>编辑</a>;
-        },
-      },
-    ];
-    const { data } = queryBrokerConf;
-    if (!data || !data[0]) return null;
-    const { BrokerSyncStatusInfo } = data[0];
-    const dataSource = [];
-    dataSource.push({
-      type: '缺省配置',
-      ...BrokerSyncStatusInfo.curBrokerDefaultConfInfo,
-    });
-    dataSource.push({
-      type: '最近上报',
-      ...BrokerSyncStatusInfo.reportedBrokerDefaultConfInfo,
-    });
-    dataSource.push({
-      type: '最近下发',
-      ...BrokerSyncStatusInfo.lastPushBrokerDefaultConfInfo,
-    });
-
-    return <Table columns={columns} dataSource={dataSource} rowKey="type" />;
-  };
-  const renderTopics = (type: string): ReactNode => {
-    const columns = [
-      {
-        title: 'topicName',
-        dataIndex: `topicName`,
-      },
-      {
-        title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'numPartitions'),
-        dataIndex: 'numPartitions',
-      },
-      {
-        title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'acceptPublish'),
-        dataIndex: 'acceptPublish',
-        render: (t: string) => boolean2Chinese(t),
-      },
-      {
-        title: transParamsWithConstantsMap(
-          BROKER_INFO_ZH_MAP,
-          'acceptSubscribe'
-        ),
-        dataIndex: 'acceptSubscribe',
-        render: (t: string) => boolean2Chinese(t),
-      },
-      {
-        title: transParamsWithConstantsMap(
-          BROKER_INFO_ZH_MAP,
-          'unflushThreshold'
-        ),
-        dataIndex: 'unflushThreshold',
-      },
-      {
-        title: transParamsWithConstantsMap(
-          BROKER_INFO_ZH_MAP,
-          'unflushInterval'
-        ),
-        dataIndex: 'unflushInterval',
-      },
-      {
-        title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'deleteWhen'),
-        dataIndex: 'deleteWhen',
-      },
-      {
-        title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'deletePolicy'),
-        dataIndex: 'deletePolicy',
-      },
-    ];
-    const { data } = queryBrokerConf;
-    if (!data || !data[0]) return null;
-    const { BrokerSyncStatusInfo } = data[0];
-    let dataSource: any[] = [];
-    if (type === 'cur') {
-      dataSource = BrokerSyncStatusInfo.curBrokerTopicSetConfInfo;
-    } else if (type === 'lastPush') {
-      dataSource = BrokerSyncStatusInfo.lastPushBrokerTopicSetConfInfo;
-    } else if (type === 'lastReported') {
-      dataSource = BrokerSyncStatusInfo.reportedBrokerTopicSetConfInfo;
-    }
-
-    return (
-      <Table
-        columns={columns}
-        dataSource={dataSource}
-        rowKey={r => type + r.topicName}
-        dataSourceX={filterData.list}
-        searchPlaceholder="请输入TopicName搜索"
-        searchStyle={{
-          position: 'absolute',
-          top: '-55px',
-          right: '10px',
-          zIndex: 1,
-        }}
-        filterFnX={value =>
-          tableFilterHelper({
-            key: value,
-            srcArray: dataSource,
-            targetArray: filterData.list,
-            updateFunction: res =>
-              updateFilterData(filterData => {
-                filterData.list = res;
-              }),
-            filterList: ['topicName'],
-          })
-        }
-      />
-    );
-  };
-
-  // event
-  // acceptPublish && acceptSubscribe event
-  const onSwitchChange = (e: boolean, type: string) => {
-    let option = '';
-    if (type === 'acceptPublish') {
-      option = e ? '发布' : '禁止可发布';
-    } else if (type === 'acceptSubscribe') {
-      option = e ? '订阅' : '禁止可订阅';
-    }
-
-    onOpenModal({
-      type: 'brokerStateChange',
-      title: `请确认操作`,
-      updateFunction: updateModelParams,
-      params: {
-        option,
-        id: queryBrokerConf.data[0].brokerId,
-        callback: () => {
-          if (type === 'acceptPublish') {
-            setAcceptPublish(e);
-          } else if (type === 'acceptSubscribe') {
-            setAcceptSubscribe(e);
-          }
-        },
-      },
-    });
-  };
-
-  const onOptions = (type: string) => {
-    onOpenModal({
-      type,
-      title: `确认进行【${OPTIONS.find(t => t.value === type)?.name}】操作?`,
-      updateFunction: updateModelParams,
-      params: [queryBrokerConf.data[0].brokerId],
-    });
-  };
-
-  // new broker
-  const onEditConf = (r: BrokerData) => {
-    onOpenModal({
-      type: 'editBroker',
-      title: '编辑Broker',
-      updateFunction: updateModelParams,
-      params: r,
-    });
-  };
-
-  return (
-    <Spin spinning={queryBrokerConf.loading && queryTopicInfo.loading}>
-      <Breadcrumb
-        breadcrumbMap={breadMap}
-        appendParams={`Broker(${id})详情`}
-      />
-      <div className="main-container">
-        <TitleWrap title="运行状态" wrapperStyle={{ position: 'relative' }}>
-          <div className="broker-detail-options-wrapper">
-            <Switch
-              className="mr10"
-              checked={acceptPublish}
-              checkedChildren="订阅"
-              unCheckedChildren="订阅"
-              onChange={e => onSwitchChange(e, 'acceptPublish')}
-            />
-            <Switch
-              className="mr10"
-              checked={acceptSubscribe}
-              checkedChildren="发布"
-              unCheckedChildren="发布"
-              onChange={e => onSwitchChange(e, 'acceptSubscribe')}
-            />
-            <Button
-              className="mr10"
-              type="primary"
-              size="small"
-              onClick={() => onOptions('online')}
-            >
-              上线
-            </Button>
-            <Button
-              className="mr10"
-              type="primary"
-              size="small"
-              onClick={() => onOptions('offline')}
-            >
-              下线
-            </Button>
-            <Button
-              className="mr10"
-              type="primary"
-              size="small"
-              onClick={() => onOptions('reload')}
-            >
-              重载
-            </Button>
-          </div>
-          <Form form={form}>
-            <Row gutter={24}>
-              {queryBrokerConf.data &&
-                Object.keys(queryBrokerConf.data[0]).map(
-                  (t: string, index: number) => {
-                    const label = transParamsWithConstantsMap(
-                      BROKER_INFO_ZH_MAP,
-                      t
-                    );
-                    const ignoreList = [
-                      'acceptPublish',
-                      'brokerVersion',
-                      'acceptSubscribe',
-                    ];
-                    if (
-                      queryBrokerConf.data[0][t] instanceof Object ||
-                      !label ||
-                      ignoreList.includes(t)
-                    )
-                      return null;
-                    return (
-                      <Col span={12} key={'queryBrokerConf' + index}>
-                        <Form.Item labelCol={{ span: 12 }} label={label}>
-                          {queryBrokerConf.data[0][t] + ''}
-                        </Form.Item>
-                      </Col>
-                    );
-                  }
-                )}
-            </Row>
-          </Form>
-        </TitleWrap>
-        <TitleWrap title="缺省配置">{renderConf()}</TitleWrap>
-        <TitleWrap title="Topic集合配置">
-          <Tabs>
-            <TabPane tab="当前配置" key="cur">
-              {renderTopics('cur')}
-            </TabPane>
-            <TabPane tab="最后下发" key="lastPush">
-              {renderTopics('lastPush')}
-            </TabPane>
-            <TabPane tab="最后上报" key="lastReported">
-              {renderTopics('lastReported')}
-            </TabPane>
-          </Tabs>
-        </TitleWrap>
-      </div>
-      <CommonModal
-        modalParams={modalParams}
-        data={[queryBrokerConf.data && queryBrokerConf.data[0]]}
-      />
-    </Spin>
-  );
-};
-
-export default Detail;
diff --git a/tubemq-web/src/pages/Broker/index.less b/tubemq-web/src/pages/Broker/index.less
deleted file mode 100644
index c95e98d..0000000
--- a/tubemq-web/src/pages/Broker/index.less
+++ /dev/null
@@ -1,9 +0,0 @@
-.broker-detail-options-wrapper {
-  position: absolute;
-  top: 15px;
-  right: 0;
-
-  .mr10 {
-    margin-right: 10px;
-  }
-}
\ No newline at end of file
diff --git a/tubemq-web/src/pages/Broker/index.tsx b/tubemq-web/src/pages/Broker/index.tsx
deleted file mode 100644
index 7cc91dc..0000000
--- a/tubemq-web/src/pages/Broker/index.tsx
+++ /dev/null
@@ -1,280 +0,0 @@
-import React, { useContext, useState } from 'react';
-import GlobalContext from '@/context/globalContext';
-import Breadcrumb from '@/components/Breadcrumb';
-import Table from '@/components/Tablex';
-import { Form, Select, Button, Spin, Switch, message } from 'antd';
-import { useImmer } from 'use-immer';
-import { useRequest } from '@/hooks';
-import tableFilterHelper from '@/components/Tablex/tableFilterHelper';
-import { boolean2Chinese, transParamsWithConstantsMap } from '@/utils';
-import { BROKER_INFO_ZH_MAP } from '@/constants/broker';
-import './index.less';
-import { Link } from 'react-router-dom';
-import CommonModal, {
-  OPTIONS,
-  onOpenModal,
-  BrokerResultData,
-  BrokerData,
-} from './commonModal';
-
-const { Option } = Select;
-const Broker: React.FC = () => {
-  // column config
-  const columns = [
-    {
-      title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'brokerId'),
-      dataIndex: 'brokerId',
-      fixed: 'left',
-      render: (t: Array<any>) => <Link to={'/broker/' + t}>{t}</Link>,
-    },
-    {
-      title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'brokerIp'),
-      dataIndex: 'brokerIp',
-    },
-    {
-      title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'brokerPort'),
-      dataIndex: 'brokerPort',
-    },
-    {
-      title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'manageStatus'),
-      dataIndex: 'manageStatus',
-    },
-    {
-      title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'runStatus'),
-      dataIndex: 'runStatus',
-    },
-    {
-      title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'subStatus'),
-      dataIndex: 'subStatus',
-    },
-    {
-      title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'acceptPublish'),
-      dataIndex: 'acceptPublish',
-      render: (t: string, r: BrokerResultData) => {
-        return (
-          <Switch
-            checked={t === 'true'}
-            onChange={e => onSwitchChange(e, r, 'acceptPublish')}
-          />
-        );
-      },
-    },
-    {
-      title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'acceptSubscribe'),
-      dataIndex: 'acceptSubscribe',
-      render: (t: string, r: BrokerResultData) => {
-        return (
-          <Switch
-            checked={t === 'true'}
-            onChange={e => onSwitchChange(e, r, 'acceptSubscribe')}
-          />
-        );
-      },
-    },
-    {
-      title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'isConfChanged'),
-      dataIndex: 'isConfChanged',
-      render: (t: string) => boolean2Chinese(t),
-    },
-    {
-      title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'isConfLoaded'),
-      dataIndex: 'isConfLoaded',
-      render: (t: string) => boolean2Chinese(t),
-    },
-    {
-      title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'isBrokerOnline'),
-      dataIndex: 'isBrokerOnline',
-      render: (t: string) => boolean2Chinese(t),
-    },
-    {
-      title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'acceptPublish'),
-      dataIndex: 'isBrokerOnline',
-      render: (t: string) => boolean2Chinese(t),
-    },
-    {
-      title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'brokerTLSPort'),
-      dataIndex: 'brokerTLSPort',
-      render: (t: string) => boolean2Chinese(t),
-    },
-    {
-      title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'enableTLS'),
-      dataIndex: 'enableTLS',
-      render: (t: boolean) => boolean2Chinese(t),
-    },
-    {
-      title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'isRepAbnormal'),
-      dataIndex: 'isRepAbnormal',
-      render: (t: boolean) => boolean2Chinese(t),
-    },
-    {
-      title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'isAutoForbidden'),
-      dataIndex: 'isAutoForbidden',
-      render: (t: boolean) => boolean2Chinese(t),
-    },
-    {
-      title: '操作',
-      dataIndex: 'brokerIp',
-      fixed: 'right',
-      width: 180,
-      render: (t: string, r: any) => {
-        return (
-          <span className="options-wrapper">
-            {OPTIONS.map(t => (
-              <a key={t.value} onClick={() => onOptionsChange(t.value, r)}>
-                {t.name}
-              </a>
-            ))}
-          </span>
-        );
-      },
-    },
-  ];
-  const { breadMap } = useContext(GlobalContext);
-  const [modalParams, updateModelParams] = useImmer<any>({});
-  const [filterData, updateFilterData] = useImmer<any>({});
-  const [selectBroker, setSelectBroker] = useState<any>([]);
-  const [brokerList, updateBrokerList] = useImmer<BrokerData>([]);
-  const [form] = Form.useForm();
-  // init query
-  const { data, loading, run } = useRequest<any, BrokerData>(
-    (data: BrokerResultData) => ({
-      url: '/api/op_query/admin_query_broker_run_status',
-      data: data,
-    }),
-    {
-      onSuccess: data => {
-        updateBrokerList(d => {
-          Object.assign(d, data);
-        });
-      },
-    }
-  );
-
-  // table event
-  // acceptSubscribe && acceptPublish options
-  const onSwitchChange = (e: boolean, r: BrokerResultData, type: string) => {
-    let option = '';
-    if (type === 'acceptPublish') {
-      option = e ? '发布' : '禁止可发布';
-    } else if (type === 'acceptSubscribe') {
-      option = e ? '订阅' : '禁止可订阅';
-    }
-
-    onOpenModal({
-      type: 'brokerStateChange',
-      title: `请确认操作`,
-      updateFunction: updateModelParams,
-      params: {
-        option,
-        id: r.brokerId,
-        type,
-        callback: () => {
-          const index = data.findIndex(
-            (t: BrokerResultData) => t.brokerId === r.brokerId
-          );
-          updateBrokerList(d => {
-            d[index][type] = e + '';
-          });
-        },
-      },
-    });
-  };
-  // new broker
-  const onNewBroker = () => {
-    onOpenModal({
-      type: 'newBroker',
-      title: '新建Broker',
-      updateFunction: updateModelParams,
-    });
-  };
-  // online, offline, etc.
-  const onOptionsChange = (type: string, r?: BrokerResultData) => {
-    if (!r && !selectBroker.length) {
-      form.resetFields();
-      return message.error('批量操作至少选择一列!');
-    }
-
-    onOpenModal({
-      type,
-      title: `确认进行【${OPTIONS.find(t => t.value === type)?.name}】操作?`,
-      updateFunction: updateModelParams,
-      params: r ? [r.brokerId] : selectBroker,
-    });
-  };
-  // table select
-  const onBrokerTableSelectChange = (p: any[]) => {
-    setSelectBroker(p);
-  };
-
-  return (
-    <Spin spinning={loading}>
-      <Breadcrumb breadcrumbMap={breadMap} />
-      <div className="main-container">
-        <div
-          className="search-wrapper"
-          style={{ float: 'right', marginRight: '-16px' }}
-        >
-          <Form form={form} layout={'inline'}>
-            <Form.Item label="批量操作" name="optionType">
-              <Select
-                style={{ width: 120 }}
-                onChange={(v: string) => onOptionsChange(v)}
-                placeholder="请选择操作"
-              >
-                {OPTIONS.map(t => (
-                  <Option value={t.value} key={t.value}>
-                    {t.name}
-                  </Option>
-                ))}
-              </Select>
-            </Form.Item>
-            <Form.Item>
-              <Button
-                type="primary"
-                onClick={() => onNewBroker()}
-                style={{ margin: '0 10px 0 10px' }}
-              >
-                新增
-              </Button>
-              <Button type="primary" onClick={() => run()}>
-                刷新
-              </Button>
-            </Form.Item>
-          </Form>
-        </div>
-        <Table
-          rowSelection={{ onChange: onBrokerTableSelectChange }}
-          columns={columns}
-          dataSource={brokerList}
-          rowKey="brokerId"
-          searchPlaceholder="请输入关键字搜索"
-          searchWidth={12}
-          dataSourceX={filterData.list}
-          scroll={{ x: 2500 }}
-          filterFnX={value =>
-            tableFilterHelper({
-              key: value,
-              srcArray: data,
-              targetArray: filterData.list,
-              updateFunction: res =>
-                updateFilterData(filterData => {
-                  filterData.list = res;
-                }),
-              filterList: [
-                'brokerId',
-                'brokerIp',
-                'brokerPort',
-                'runStatus',
-                'subStatus',
-                'manageStatus',
-              ],
-            })
-          }
-        />
-      </div>
-      <CommonModal modalParams={modalParams} data={data} />
-    </Spin>
-  );
-};
-
-export default Broker;
diff --git a/tubemq-web/src/pages/Broker/query.tsx b/tubemq-web/src/pages/Broker/query.tsx
deleted file mode 100644
index 9e89789..0000000
--- a/tubemq-web/src/pages/Broker/query.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import * as React from 'react';
-import './index.less';
-import { OKProps } from '@/components/Modalx';
-import { useRequest } from '@/hooks';
-import { useContext, useEffect } from 'react';
-import GlobalContext from '@/context/globalContext';
-
-interface ComProps {
-  fire: string;
-  params: any;
-  type: string;
-}
-
-const Comp = (props: ComProps) => {
-  const { fire } = props;
-  const { userInfo } = useContext(GlobalContext);
-  // eslint-disable-next-line
-  useEffect(() => {
-    const { params, type } = props;
-    dispatchAction(type, params);
-  }, [fire, props]);
-
-  const dispatchAction = (type: string, p: OKProps) => {
-    if (!fire) return null;
-    let promise;
-    switch (type) {
-      case 'newBroker':
-        promise = newBroker(p);
-        break;
-      case 'editBroker':
-        promise = editBroker(p);
-        break;
-      case 'brokerStateChange':
-        promise = brokerAcceptPublish(type, p);
-        break;
-      case 'online':
-      case 'offline':
-      case 'reload':
-      case 'delete':
-        promise = brokerOptions(type, p);
-        break;
-    }
-
-    promise &&
-      promise.then(t => {
-        const { callback } = p.params;
-        if (t.statusCode !== 0 && callback) callback(t);
-      });
-  };
-
-  const newBrokerQuery = useRequest<any, any>(
-    data => ({ url: '/api/op_modify/admin_add_broker_configure', ...data }),
-    { manual: true }
-  );
-  const newBroker = (p: OKProps) => {
-    const { params } = p;
-    return newBrokerQuery.run({
-      data: {
-        ...params,
-        confModAuthToken: p.psw,
-        createUser: userInfo.userName,
-      },
-    });
-  };
-
-  const updateBrokerQuery = useRequest<any, any>(
-    data => ({ url: '/api/op_modify/admin_update_broker_configure', ...data }),
-    { manual: true }
-  );
-  const editBroker = (p: OKProps) => {
-    const { params } = p;
-    return updateBrokerQuery.run({
-      data: {
-        ...params,
-        confModAuthToken: p.psw,
-        createUser: userInfo.userName,
-      },
-    });
-  };
-
-  const brokerOptionsQuery = useRequest<any, any>(
-    (url, data) => ({ url, ...data }),
-    { manual: true }
-  );
-  const brokerOptions = (type: string, p: OKProps) => {
-    const { params } = p;
-    return brokerOptionsQuery.run(
-      `/api/op_modify/admin_${type}_broker_configure`,
-      {
-        data: {
-          brokerId: params ? params?.join(',') : params?.selectBroker.join(','),
-          confModAuthToken: p.psw,
-          createUser: userInfo.userName,
-        },
-      }
-    );
-  };
-
-  const brokerAcceptPublishQuery = useRequest<any, any>(
-    (url, data) => ({ url, ...data }),
-    { manual: true }
-  );
-  const brokerAcceptPublish = (type: string, p: OKProps) => {
-    const { params } = p;
-    const data: any = {
-      brokerId: params.id,
-      confModAuthToken: p.psw,
-      createUser: userInfo.userName,
-    };
-    if (params.type === 'acceptPublish') {
-      data.isAcceptPublish = params.option;
-    }
-    if (params.type === 'acceptSubscribe') {
-      data.isAcceptSubscribe = params.option;
-    }
-
-    return brokerAcceptPublishQuery.run(
-      `/api/op_modify/admin_set_broker_read_or_write`,
-      {
-        data,
-      }
-    );
-  };
-
-  return <></>;
-};
-
-export default Comp;
diff --git a/tubemq-web/src/pages/Cluster/index.less b/tubemq-web/src/pages/Cluster/index.less
deleted file mode 100644
index e69de29..0000000
diff --git a/tubemq-web/src/pages/Cluster/index.tsx b/tubemq-web/src/pages/Cluster/index.tsx
deleted file mode 100644
index 6b82403..0000000
--- a/tubemq-web/src/pages/Cluster/index.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-import React, { useContext } from 'react';
-import GlobalContext from '@/context/globalContext';
-import Breadcrumb from '@/components/Breadcrumb';
-import Table from '@/components/Tablex';
-import { Spin } from 'antd';
-import './index.less';
-import { useRequest } from '@/hooks';
-import Modal, { OKProps } from '@/components/Modalx';
-import { useImmer } from 'use-immer';
-
-interface ClusterResultData {
-  groupName: string;
-  groupStatus: string;
-  hostName: string;
-  index: number;
-  port: string;
-  nodeStatus: string;
-  length: number;
-}
-
-const queryClusterList = (data: ClusterResultData) => ({
-  url: '/api/op_query/admin_query_master_group_info',
-  data: data,
-});
-
-const Cluster: React.FC = () => {
-  const { breadMap } = useContext(GlobalContext);
-  const [modalParams, updateModelParams] = useImmer<any>({
-    title: '请确认操作',
-  });
-  const { data, loading } = useRequest<any, any>(queryClusterList, {
-    formatResult: d => {
-      return {
-        list: d.data.map((t: any) => ({
-          groupName: d.groupName,
-          groupStatus: d.groupStatus,
-          hostName: t.hostName,
-          index: t.index,
-          port: t.port,
-          nodeStatus: t.statusInfo.nodeStatus,
-          length: d.data.length,
-        })),
-      };
-    },
-  });
-  const columns = [
-    {
-      title: '集群名',
-      dataIndex: 'groupName',
-      render: (t: string, r: ClusterResultData, index: number) => {
-        return {
-          children: t,
-          props: {
-            rowSpan: index === 0 ? r.length : 0,
-          },
-        };
-      },
-    },
-    {
-      title: '集群状态',
-      dataIndex: 'groupStatus',
-      render: (t: string, r: ClusterResultData, index: number) => {
-        return {
-          children: t,
-          props: {
-            rowSpan: index === 0 ? r.length : 0,
-          },
-        };
-      },
-    },
-    {
-      title: '节点名',
-      render: (t: string, r: ClusterResultData) => {
-        return `${r.groupName}-${r.hostName}`;
-      },
-    },
-    {
-      title: 'IP地址',
-      render: (t: string, r: ClusterResultData) => {
-        return `${r.hostName}-${r.port}`;
-      },
-    },
-    {
-      title: '节点名',
-      dataIndex: 'nodeStatus',
-    },
-    {
-      title: '操作',
-      render: (t: string, r: ClusterResultData, index: number) => {
-        return {
-          children: (
-            <span className="options-wrapper">
-              <a onClick={() => onSwitchCluster(t, r)}>切换</a>
-            </span>
-          ),
-          props: {
-            rowSpan: index === 0 ? r.length : 0,
-          },
-        };
-      },
-    },
-  ];
-
-  const switchClusterQuery = useRequest<any, any>(
-    (data?: ClusterResultData) => ({
-      url: '/api/op_modify/admin_transfer_current_master',
-      data,
-    }),
-    { manual: true }
-  );
-  const onSwitchCluster = (t: string, r: ClusterResultData) => {
-    updateModelParams(d => {
-      d = Object.assign(d, {
-        visible: true,
-        onOk: (p: OKProps) => {
-          switchClusterQuery.run({
-            confModAuthToken: p.psw,
-          });
-        },
-        onCancel: () => {
-          updateModelParams((m: any) => {
-            m.visible = false;
-          });
-        },
-      });
-    });
-  };
-  return (
-    <Spin spinning={loading}>
-      <Breadcrumb breadcrumbMap={breadMap}></Breadcrumb>
-      <div className="main-container">
-        <Table columns={columns} dataSource={data?.list} rowKey="index"></Table>
-      </div>
-      <Modal {...modalParams}>
-        <div>
-          确认<span className="enhance">切换</span>集群?
-        </div>
-      </Modal>
-    </Spin>
-  );
-};
-
-export default Cluster;
diff --git a/tubemq-web/src/pages/Issue/consumeGroupDetail.tsx b/tubemq-web/src/pages/Issue/consumeGroupDetail.tsx
deleted file mode 100644
index 3c5090f..0000000
--- a/tubemq-web/src/pages/Issue/consumeGroupDetail.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import React, { useContext } from 'react';
-import GlobalContext from '@/context/globalContext';
-import Breadcrumb from '@/components/Breadcrumb';
-import Table from '@/components/Tablex';
-import tableFilterHelper from '@/components/Tablex/tableFilterHelper';
-import { Spin } from 'antd';
-import { useImmer } from 'use-immer';
-import './index.less';
-import { useRequest } from '@/hooks';
-import { useParams } from 'react-router-dom';
-
-declare type ConsumeGroupData = any[];
-interface ConsumeGroupQueryData {
-  consumeGroup: string;
-}
-
-// column config
-const columns = [
-  {
-    title: '消费者ID',
-    dataIndex: 'consumerId',
-  },
-  {
-    title: '消费Topic',
-    dataIndex: 'topicName',
-  },
-  {
-    title: 'broker地址',
-    dataIndex: 'brokerAddr',
-  },
-  {
-    title: '分区ID',
-    dataIndex: 'partId',
-  },
-];
-
-const queryUser = (data: ConsumeGroupQueryData) => ({
-  url: '/api/op_query/admin_query_consume_group_detail',
-  data: data,
-});
-
-const ConsumeGroupDetail: React.FC = () => {
-  const { id } = useParams();
-  const { breadMap } = useContext(GlobalContext);
-  const [filterData, updateFilterData] = useImmer<any>({});
-  const { data, loading } = useRequest<any, ConsumeGroupData>(
-    () =>
-      queryUser({
-        consumeGroup: id,
-      }),
-    {
-      formatResult: data => {
-        const d = data[0];
-        return {
-          list: d.parInfo.map((t: any) => ({
-            consumerId: d.consumerId,
-            ...t,
-          })),
-        };
-      },
-    }
-  );
-
-  return (
-    <Spin spinning={loading}>
-      <Breadcrumb
-        breadcrumbMap={breadMap}
-        appendParams={`消费组详情(${id})`}
-      ></Breadcrumb>
-      <div className="main-container">
-        <Table
-          columns={columns}
-          dataSource={data?.list}
-          rowKey="brokerAddr"
-          searchPlaceholder="请输入 broker地址/分区ID 搜索"
-          dataSourceX={filterData.list}
-          filterFnX={value =>
-            tableFilterHelper({
-              key: value,
-              srcArray: data?.list,
-              targetArray: filterData.list,
-              updateFunction: res =>
-                updateFilterData(filterData => {
-                  filterData.list = res;
-                }),
-              filterList: ['brokerAddr', 'partId'],
-            })
-          }
-        ></Table>
-      </div>
-    </Spin>
-  );
-};
-
-export default ConsumeGroupDetail;
diff --git a/tubemq-web/src/pages/Issue/index.less b/tubemq-web/src/pages/Issue/index.less
deleted file mode 100644
index e69de29..0000000
diff --git a/tubemq-web/src/pages/Issue/index.tsx b/tubemq-web/src/pages/Issue/index.tsx
deleted file mode 100644
index 54f5ad3..0000000
--- a/tubemq-web/src/pages/Issue/index.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import React, { useContext } from 'react';
-import GlobalContext from '@/context/globalContext';
-import Breadcrumb from '@/components/Breadcrumb';
-import Table from '@/components/Tablex';
-import { Form, Input, Button, Spin } from 'antd';
-import { useImmer } from 'use-immer';
-import './index.less';
-import { useRequest } from '@/hooks';
-import { Link } from 'react-router-dom';
-
-declare type IssueData = any[];
-interface IssueQueryData {
-  topicName?: string;
-  consumeGroup?: string;
-}
-
-// column config
-const columns = [
-  {
-    title: '消费组',
-    dataIndex: 'consumeGroup',
-    render: (t: Array<any>) => <Link to={'/issue/' + t}>{t}</Link>,
-  },
-  {
-    title: '消费Topic',
-    dataIndex: 'topicSet',
-    render: (t: Array<any>) => {
-      return t.join(',');
-    },
-  },
-  {
-    title: '消费分区',
-    dataIndex: 'consumerNum',
-  },
-];
-
-const queryIssueList = (data: IssueQueryData) => ({
-  url: '/api/op_query/admin_query_sub_info',
-  data: data,
-});
-
-const Issue: React.FC = () => {
-  const { breadMap } = useContext(GlobalContext);
-  const [form] = Form.useForm();
-  const [formValues, updateFormValues] = useImmer<any>({});
-  const { data, loading, run } = useRequest<any, IssueData>(queryIssueList, {});
-
-  const onValuesChange = (p: any) => {
-    updateFormValues(d => {
-      Object.assign(d, p);
-    });
-  };
-  const onSearch = () => {
-    run(formValues);
-  };
-
-  const onReset = () => {
-    form.resetFields();
-    run({});
-  };
-
-  return (
-    <Spin spinning={loading}>
-      <Breadcrumb breadcrumbMap={breadMap}></Breadcrumb>
-      <div className="main-container">
-        <div className="search-wrapper">
-          <Form form={form} layout={'inline'} onValuesChange={onValuesChange}>
-            <Form.Item label="Topic 名称" name="topicName">
-              <Input placeholder="" />
-            </Form.Item>
-            <Form.Item label="消费组" name="consumeGroup">
-              <Input placeholder="" />
-            </Form.Item>
-            <Form.Item>
-              <Button
-                type="primary"
-                onClick={onSearch}
-                style={{ margin: '0 20px' }}
-              >
-                查询
-              </Button>
-              <Button type="default" onClick={onReset}>
-                重置
-              </Button>
-            </Form.Item>
-          </Form>
-        </div>
-        <Table
-          columns={columns}
-          dataSource={data}
-          rowKey="consumeGroup"
-        ></Table>
-      </div>
-    </Spin>
-  );
-};
-
-export default Issue;
diff --git a/tubemq-web/src/pages/NotFound/index.tsx b/tubemq-web/src/pages/NotFound/index.tsx
deleted file mode 100644
index 8a0e971..0000000
--- a/tubemq-web/src/pages/NotFound/index.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import React from 'react';
-
-const NotFound: React.FC = () => <div>404</div>;
-
-export default NotFound;
diff --git a/tubemq-web/src/pages/Topic/commonModal.tsx b/tubemq-web/src/pages/Topic/commonModal.tsx
deleted file mode 100644
index 9d7783c..0000000
--- a/tubemq-web/src/pages/Topic/commonModal.tsx
+++ /dev/null
@@ -1,349 +0,0 @@
-import { boolean2Chinese } from '@/utils';
-import Table from '@/components/Tablex';
-import { Col, Form, Input, message, Row } from 'antd';
-import Modal, { OKProps } from '@/components/Modalx';
-import React from 'react';
-import Query from '@/pages/Topic/query';
-import { FormProps } from 'antd/lib/form';
-
-export const OPTIONS = [
-  {
-    value: 'delete',
-    name: '删除',
-  },
-];
-export const OPTIONS_VALUES = OPTIONS.map(t => t.value);
-
-// interface
-export declare type TopicData = any[];
-export interface TopicResultData {
-  topicName: string;
-  infoCount: string;
-  totalCfgNumPart: string;
-  totalRunNumPartCount: string;
-  isSrvAcceptPublish: string | number;
-  isSrvAcceptSubscribe: string | number;
-  enableAuthControl: string | number;
-  [key: string]: any;
-}
-export interface TopicModalProps {
-  type: string;
-  title?: string;
-  updateFunction: (draft: any) => any;
-  params?: any;
-}
-interface ComProps {
-  modalParams: any;
-  data: any[];
-}
-// exports broker modal
-// render funcs
-const renderTopicOptions = (modalParams: any, dataSource: any[]) => {
-  const columns = [
-    {
-      title: 'Topic',
-      render: (t: string, r: TopicResultData) => {
-        return `${r.brokerId}#${r.brokerIp}:${r.brokerPort}`;
-      },
-    },
-    {
-      title: 'TopicIP',
-      dataIndex: 'brokerIp',
-    },
-    {
-      title: '管理状态',
-      dataIndex: 'manageStatus',
-    },
-    {
-      title: '运行状态',
-      dataIndex: 'runStatus',
-    },
-    {
-      title: '运行子状态',
-      dataIndex: 'subStatus',
-    },
-    {
-      title: '可发布',
-      render: (t: string) => boolean2Chinese(t),
-    },
-    {
-      title: '可订阅',
-      render: (t: string) => boolean2Chinese(t),
-    },
-  ];
-  return <Table columns={columns} dataSource={dataSource} rowKey="brokerId" />;
-};
-const renderNewTopic = (form: any) => {
-  const brokerFormArr = [
-    {
-      name: 'topicName',
-      defaultValue: '',
-    },
-    {
-      name: 'numPartitions',
-      defaultValue: '3',
-    },
-    {
-      name: 'deleteWhen',
-      defaultValue: '0 0 6,18 * * ?',
-    },
-    {
-      name: 'deletePolicy',
-      defaultValue: 'delete,168h',
-    },
-    {
-      name: 'unflushThreshold',
-      defaultValue: '1000',
-    },
-    {
-      name: 'unflushInterval',
-      defaultValue: '10000',
-    },
-    {
-      name: 'acceptPublish',
-      defaultValue: 'true',
-    },
-    {
-      name: 'acceptSubscribe',
-      defaultValue: 'true',
-    },
-  ];
-
-  return (
-    <Form form={form}>
-      <Row gutter={24}>
-        {brokerFormArr.map((t, index) => (
-          <Col span={12} key={'brokerFormArr' + index}>
-            <Form.Item
-              labelCol={{ span: 12 }}
-              label={t.name}
-              name={t.name}
-              initialValue={t.defaultValue}
-            >
-              <Input />
-            </Form.Item>
-          </Col>
-        ))}
-      </Row>
-    </Form>
-  );
-};
-const renderChooseBroker = (modalParams: any) => {
-  const { params } = modalParams;
-  const columns = [
-    {
-      title: 'Broker',
-      render: (t: string, r: TopicResultData) => {
-        return `${r.brokerId}#${r.brokerIp}:${r.brokerPort}`;
-      },
-    },
-    {
-      title: '实例数',
-      dataIndex: ['runInfo', 'numTopicStores'],
-    },
-    {
-      title: '当前运行状态',
-      dataIndex: ['runInfo', 'brokerManageStatus'],
-    },
-    {
-      title: '可发布',
-      dataIndex: ['runInfo', 'acceptPublish'],
-      render: (t: string) => boolean2Chinese(t),
-    },
-    {
-      title: '可订阅',
-      dataIndex: ['runInfo', 'acceptSubscribe'],
-      render: (t: string) => boolean2Chinese(t),
-    },
-  ];
-  const onChangeSelect = (p: any) => {
-    selectBroker = p;
-  };
-  return (
-    <Table
-      rowSelection={{ onChange: onChangeSelect }}
-      columns={columns}
-      dataSource={params.data}
-      rowKey="brokerId"
-    />
-  );
-};
-const renderEditTopic = (modalParams: any, form: FormProps['form']) => {
-  const { params: p } = modalParams;
-  const pickArr = [
-    'topicName',
-    'numPartitions',
-    'unflushThreshold',
-    'unflushInterval',
-    'deleteWhen',
-    'deletePolicy',
-    'acceptPublish',
-    'acceptSubscribe',
-  ];
-  const brokerFormArr: Array<{
-    name: string;
-    defaultValue: string;
-  }> = [];
-  pickArr.forEach(t => {
-    brokerFormArr.push({
-      name: t,
-      defaultValue: p[t],
-    });
-  });
-
-  return (
-    <Form form={form}>
-      <Row gutter={24}>
-        {brokerFormArr.map((t, index) => (
-          <Col span={12} key={'brokerFormArr' + index}>
-            <Form.Item
-              labelCol={{ span: 12 }}
-              label={t.name}
-              name={t.name}
-              initialValue={t.defaultValue}
-            >
-              <Input />
-            </Form.Item>
-          </Col>
-        ))}
-      </Row>
-    </Form>
-  );
-};
-const renderTopicStateChange = (modalParams: any) => {
-  const { params } = modalParams;
-
-  return (
-    <div>
-      请确认<span className="enhance">{params.option}</span> 以下broker列表的
-      topic :<span className="enhance">({params.topicName})</span> 的 Topic?
-      {renderChooseBroker(modalParams)}
-    </div>
-  );
-};
-const renderDeleteTopic = (modalParams: any) => {
-  const { params } = modalParams;
-
-  return (
-    <div>
-      请确认<span className="enhance">删除</span> 以下broker列表的 topic :
-      <span className="enhance">({params.topicName})</span> 吗?
-      {renderChooseBroker(modalParams)}
-    </div>
-  );
-};
-const renderDeleteConsumeGroup = (modalParams: any) => {
-  const { params } = modalParams;
-
-  return (
-    <div>
-      确认<span className="enhance">删除</span> 以下 :
-      <span className="enhance">({params.groupName})</span> 吗?
-    </div>
-  );
-};
-const renderAuthorizeControlChange = (modalParams: any) => {
-  const { params } = modalParams;
-
-  return (
-    <div>
-      请确认
-      <span className="enhance">
-        {params.value ? '启动' : '关闭'}topic
-        <span className="enhance">({params.topicName})</span>的消费组授权控制
-      </span>
-      吗?
-    </div>
-  );
-};
-export const onOpenModal = (p: TopicModalProps) => {
-  const { type, title, updateFunction, params } = p;
-  updateFunction((m: any) => {
-    m.type = type;
-    m.params = params;
-    Object.assign(m, {
-      params,
-      visible: type,
-      title,
-      onOk: (p: OKProps) => {
-        updateFunction((m: any) => {
-          if (type === 'newTopic' || type === 'editTopic') {
-            p.params = Object.assign(f && f.getFieldsValue(), {
-              callback: p.params.callback,
-            });
-          }
-
-          if (
-            type === 'chooseBroker' ||
-            type === 'topicStateChange' ||
-            type === 'deleteTopic'
-          ) {
-            if (!selectBroker.length) {
-              message.error('至少选择一列!');
-              return;
-            }
-
-            // end
-            if (type === 'chooseBroker') {
-              m.query =
-                p.params.subType === 'edit'
-                  ? 'endEditChooseBroker'
-                  : 'endChooseBroker';
-            }
-            p.params = Object.assign({}, p.params, {
-              selectBroker,
-            });
-          }
-
-          m.okParams = p;
-          m.isOk = Date.now();
-        });
-      },
-      onCancel: () =>
-        updateFunction((m: any) => {
-          m.visible = false;
-          m.isOk = null;
-        }),
-    });
-  });
-};
-
-let selectBroker: any[] = [];
-let f: FormProps['form'];
-const Comp = (props: ComProps) => {
-  const { modalParams, data } = props;
-  const [form] = Form.useForm();
-  f = form;
-
-  return (
-    <Modal {...modalParams}>
-      <div>
-        {modalParams.type &&
-          OPTIONS_VALUES.includes(modalParams.type) &&
-          renderTopicOptions(
-            modalParams,
-            data.filter((t: TopicResultData) =>
-              modalParams.params.includes(t.brokerId)
-            )
-          )}
-        {modalParams.type === 'newTopic' && renderNewTopic(form)}
-        {modalParams.type === 'chooseBroker' && renderChooseBroker(modalParams)}
-        {modalParams.type === 'editTopic' && renderEditTopic(modalParams, form)}
-        {modalParams.type === 'topicStateChange' &&
-          renderTopicStateChange(modalParams)}
-        {modalParams.type === 'deleteTopic' && renderDeleteTopic(modalParams)}
-        {modalParams.type === 'deleteConsumeGroup' &&
-          renderDeleteConsumeGroup(modalParams)}
-        {modalParams.type === 'authorizeControl' &&
-          renderAuthorizeControlChange(modalParams)}
-      </div>
-      <Query
-        fire={modalParams.isOk}
-        params={modalParams.okParams}
-        type={modalParams.visible && (modalParams.query || modalParams.type)}
-      />
-    </Modal>
-  );
-};
-
-export default Comp;
diff --git a/tubemq-web/src/pages/Topic/detail.tsx b/tubemq-web/src/pages/Topic/detail.tsx
deleted file mode 100644
index 0c9965c..0000000
--- a/tubemq-web/src/pages/Topic/detail.tsx
+++ /dev/null
@@ -1,510 +0,0 @@
-import React, { ReactNode, useContext, useState } from 'react';
-import GlobalContext from '@/context/globalContext';
-import Breadcrumb from '@/components/Breadcrumb';
-import Table from '@/components/Tablex';
-import TitleWrap from '@/components/TitleWrap';
-import { Form, Button, Spin, Col, Row, Switch } from 'antd';
-import { useImmer } from 'use-immer';
-import './index.less';
-import { useRequest } from '@/hooks';
-import { useParams } from 'react-router-dom';
-import { boolean2Chinese, transParamsWithConstantsMap } from '@/utils';
-import tableFilterHelper from '@/components/Tablex/tableFilterHelper';
-import CommonModal, { onOpenModal, TopicResultData } from './commonModal';
-import BrokerModal, {
-  onOpenModal as onOpenBrokerModal,
-} from '@/pages/Broker/commonModal';
-import { BROKER_INFO_ZH_MAP } from '@/constants/broker';
-import { PERSON_INFO_ZH_MAP } from '@/constants/person';
-import { TOPIC_INFO_ZH_MAP } from '@/constants/topic';
-
-declare type TopicQueryData = {
-  topicName: string;
-};
-
-const Detail: React.FC = () => {
-  const { name } = useParams();
-  const { breadMap } = useContext(GlobalContext);
-  const [form] = Form.useForm();
-  const [modalParams, updateModelParams] = useImmer<any>({});
-  const [brokerModalParams, updateBrokerModalParams] = useImmer<any>({});
-  const [isSrvAcceptPublish, setIsSrvAcceptPublish] = useState<any>(false);
-  const [isSrvAcceptSubscribe, setIsSrvAcceptSubscribe] = useState<any>(false);
-  const [enableAuthControl, setEnableAuthControl] = useState<any>(false);
-  const [filterData, updateFilterData] = useImmer<any>({});
-  const queryTopicInfo = useRequest<any>(
-    (
-      data: TopicQueryData = {
-        topicName: name,
-      }
-    ) => ({
-      url: '/api/op_query/admin_query_topic_authorize_control',
-      data: {
-        ...data,
-      },
-    })
-  );
-  const queryTopicConf = useRequest<any>(
-    (
-      data: TopicQueryData = {
-        topicName: name,
-      }
-    ) => ({
-      url: '/api/op_query/admin_query_topic_info',
-      data: {
-        ...data,
-      },
-    }),
-    {
-      onSuccess: data => {
-        setIsSrvAcceptPublish(data[0]['isSrvAcceptPublish']);
-        setIsSrvAcceptSubscribe(data[0]['isSrvAcceptSubscribe']);
-        setEnableAuthControl(data[0]['authData']['enableAuthControl']);
-      },
-    }
-  );
-
-  // render
-  const searchStyle = {
-    position: 'absolute',
-    top: '-40px',
-    right: '10px',
-    zIndex: 1,
-    width: '300px',
-  };
-  const renderBrokerList = (): ReactNode => {
-    const columns = [
-      {
-        title: 'Broker',
-        render: (t: string, r: TopicResultData) => {
-          return `${r.brokerId}#${r.brokerIp}:${r.brokerPort}`;
-        },
-      },
-      {
-        title: transParamsWithConstantsMap(
-          BROKER_INFO_ZH_MAP,
-          'runInfo.acceptPublish'
-        ),
-        dataIndex: ['runInfo', 'acceptPublish'],
-        render: (t: string) => boolean2Chinese(t),
-      },
-      {
-        title: transParamsWithConstantsMap(
-          BROKER_INFO_ZH_MAP,
-          'runInfo.acceptSubscribe'
-        ),
-        dataIndex: ['runInfo', 'acceptSubscribe'],
-        render: (t: string) => boolean2Chinese(t),
-      },
-      {
-        title: transParamsWithConstantsMap(
-          BROKER_INFO_ZH_MAP,
-          'runInfo.numPartitions'
-        ),
-        dataIndex: ['runInfo', 'numPartitions'],
-      },
-      {
-        title: transParamsWithConstantsMap(
-          BROKER_INFO_ZH_MAP,
-          'runInfo.brokerManageStatus'
-        ),
-        dataIndex: ['runInfo', 'brokerManageStatus'],
-      },
-      {
-        title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'acceptPublish'),
-        dataIndex: 'acceptPublish',
-        render: (t: string) => boolean2Chinese(t),
-      },
-      {
-        title: transParamsWithConstantsMap(
-          BROKER_INFO_ZH_MAP,
-          'acceptSubscribe'
-        ),
-        dataIndex: 'acceptSubscribe',
-        render: (t: string) => boolean2Chinese(t),
-      },
-      {
-        title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'numPartitions'),
-        dataIndex: 'numPartitions',
-      },
-      {
-        title: transParamsWithConstantsMap(
-          BROKER_INFO_ZH_MAP,
-          'unflushThreshold'
-        ),
-        dataIndex: 'unflushThreshold',
-      },
-      {
-        title: transParamsWithConstantsMap(
-          BROKER_INFO_ZH_MAP,
-          'unflushInterval'
-        ),
-        dataIndex: 'unflushInterval',
-      },
-      {
-        title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'deleteWhen'),
-        dataIndex: 'deleteWhen',
-      },
-      {
-        title: transParamsWithConstantsMap(BROKER_INFO_ZH_MAP, 'deletePolicy'),
-        dataIndex: 'deletePolicy',
-      },
-      {
-        title: '操作',
-        render: (t: string, r: TopicResultData) => {
-          return (
-            <span>
-              <a onClick={() => onEdit(r)}>编辑</a>
-              <a onClick={() => onReload(r)}>重载</a>
-              <a onClick={() => onDeleteBroker(r)}>删除</a>
-            </span>
-          );
-        },
-      },
-    ];
-    const { data } = queryTopicConf;
-    if (!data || !data[0]) return null;
-    const { topicInfo } = data[0];
-
-    return (
-      <Table
-        columns={columns}
-        dataSource={topicInfo}
-        rowKey={r => `${r.brokerId}#${r.brokerIp}:${r.brokerPort}`}
-        dataSourceX={filterData.topicInfoList}
-        searchPlaceholder="请输入brokerId,Ip,Port搜索"
-        searchStyle={searchStyle}
-        filterFnX={value =>
-          tableFilterHelper({
-            key: value,
-            srcArray: topicInfo,
-            targetArray: filterData.topicInfoList,
-            updateFunction: res =>
-              updateFilterData(filterData => {
-                filterData.topicInfoList = res;
-              }),
-            filterList: ['brokerId', 'brokerIp', 'brokerPort'],
-          })
-        }
-      />
-    );
-  };
-  const renderConsumeGroupList = (): ReactNode => {
-    const columns = [
-      {
-        title: '消费组',
-        dataIndex: 'groupName',
-      },
-      {
-        title: transParamsWithConstantsMap(PERSON_INFO_ZH_MAP, 'createUser'),
-        dataIndex: 'createUser',
-      },
-      {
-        title: transParamsWithConstantsMap(PERSON_INFO_ZH_MAP, 'createDate'),
-        dataIndex: 'createDate',
-      },
-      {
-        title: '操作',
-        render: (t: string, r: TopicResultData) => {
-          return (
-            <span>
-              <a onClick={() => onDeleteConsumeGroup(r)}>删除</a>
-            </span>
-          );
-        },
-      },
-    ];
-    const { data } = queryTopicInfo;
-    if (!data || !data[0]) return null;
-    const { authConsumeGroup } = data[0];
-
-    return (
-      <Table
-        columns={columns}
-        dataSource={authConsumeGroup}
-        rowKey={r => `${r.brokerId}#${r.brokerIp}:${r.brokerPort}`}
-        dataSourceX={filterData.list}
-        searchPlaceholder="请输入消费组名称搜索"
-        searchStyle={searchStyle}
-        filterFnX={value =>
-          tableFilterHelper({
-            key: value,
-            srcArray: authConsumeGroup,
-            targetArray: filterData.list,
-            updateFunction: res =>
-              updateFilterData(filterData => {
-                filterData.list = res;
-              }),
-            filterList: ['groupName'],
-          })
-        }
-      />
-    );
-  };
-
-  // event
-  // isSrvAcceptPublish && isSrvAcceptSubscribe event
-  const queryBrokerListByTopicNameQuery = useRequest<any, any>(
-    data => ({ url: '/api/op_query/admin_query_topic_info', ...data }),
-    { manual: true }
-  );
-  const onSwitchChange = (e: boolean, type: string) => {
-    let option = '';
-    const topicName = queryTopicConf.data[0].topicInfo[0].topicName;
-    if (type === 'isSrvAcceptPublish') {
-      option = e ? '发布' : '禁止可发布';
-    } else if (type === 'isSrvAcceptSubscribe') {
-      option = e ? '订阅' : '禁止可订阅';
-    }
-
-    queryBrokerListByTopicNameQuery
-      .run({
-        data: {
-          topicName,
-          brokerId: '',
-        },
-      })
-      .then((d: TopicResultData) => {
-        onOpenModal({
-          type: 'topicStateChange',
-          title: `请确认操作`,
-          updateFunction: updateModelParams,
-          params: {
-            option,
-            value: e,
-            topicName,
-            data: d[0].topicInfo,
-            type,
-            callback: () => {
-              if (type === 'isSrvAcceptPublish') {
-                setIsSrvAcceptPublish(e);
-              } else if (type === 'isSrvAcceptSubscribe') {
-                setIsSrvAcceptSubscribe(e);
-              }
-            },
-          },
-        });
-      });
-  };
-  // author
-  const onAuthorizeControl = (e: boolean) => {
-    const option = e ? '发布' : '禁止可发布';
-    const topicName = queryTopicConf.data[0].topicInfo[0].topicName;
-    onOpenModal({
-      type: 'authorizeControl',
-      title: `请确认操作`,
-      updateFunction: updateModelParams,
-      params: {
-        option,
-        value: e,
-        topicName,
-        callback: () => {
-          setEnableAuthControl(e);
-        },
-      },
-    });
-  };
-  // edit topic
-  const onEdit = (r?: TopicResultData) => {
-    const p = r || queryTopicConf.data[0].topicInfo[0];
-    onOpenModal({
-      type: 'editTopic',
-      title: '编辑Topic',
-      updateFunction: updateModelParams,
-      params: {
-        ...p,
-        callback: (d: any) => {
-          onOpenModal({
-            type: 'chooseBroker',
-            title: '选择【修改】broker列表',
-            updateFunction: updateModelParams,
-            params: {
-              data: d,
-              subType: 'edit',
-              callback: () => {
-                onOpenModal({
-                  type: 'close',
-                  updateFunction: updateModelParams,
-                });
-              },
-            },
-          });
-        },
-      },
-    });
-  };
-  // reload topic
-  const queryBrokerInfo = useRequest<any, any>(
-    data => ({ url: '/api/op_query/admin_query_broker_run_status', ...data }),
-    { manual: true }
-  );
-  const onReload = (r: TopicResultData) => {
-    queryBrokerInfo
-      .run({
-        data: {
-          brokerId: r.brokerId,
-        },
-      })
-      .then(data => {
-        onOpenBrokerModal({
-          type: 'reload',
-          title: `确认进行【重载】操作?`,
-          updateFunction: updateBrokerModalParams,
-          params: [data[0].brokerId],
-        });
-      });
-  };
-  // on delete broker
-  const onDeleteBroker = (r: TopicResultData) => {
-    queryBrokerListByTopicNameQuery
-      .run({
-        data: {
-          topicName: r.topicName,
-          brokerId: r.brokerId,
-        },
-      })
-      .then((d: TopicResultData) => {
-        onOpenModal({
-          type: 'deleteTopic',
-          title: `请确认操作`,
-          updateFunction: updateModelParams,
-          params: {
-            topicName: r.topicName,
-            data: d[0].topicInfo,
-          },
-        });
-      });
-  };
-  const onDeleteConsumeGroup = (r: TopicResultData) => {
-    onOpenModal({
-      type: 'deleteConsumeGroup',
-      title: `请确认消费组`,
-      updateFunction: updateModelParams,
-      params: {
-        topicName: r.topicName,
-        groupName: r.groupName,
-      },
-    });
-  };
-
-  return (
-    <Spin spinning={queryTopicConf.loading && queryTopicInfo.loading}>
-      <Breadcrumb
-        breadcrumbMap={breadMap}
-        appendParams={`Topic(${name})详情`}
-      />
-      <div className="main-container">
-        <TitleWrap
-          title="基本信息"
-          wrapperStyle={{ position: 'relative' }}
-          hasSplit={false}
-        >
-          <div className="topic-detail-options-wrapper">
-            <Switch
-              className="mr10"
-              checked={isSrvAcceptPublish}
-              checkedChildren="订阅"
-              unCheckedChildren="订阅"
-              onChange={e => onSwitchChange(e, 'isSrvAcceptPublish')}
-            />
-            <Switch
-              className="mr10"
-              checked={isSrvAcceptSubscribe}
-              checkedChildren="发布"
-              unCheckedChildren="发布"
-              onChange={e => onSwitchChange(e, 'isSrvAcceptSubscribe')}
-            />
-            <Switch
-              className="mr10"
-              checked={enableAuthControl}
-              checkedChildren="权限可控"
-              unCheckedChildren="权限可控"
-              onChange={e => onAuthorizeControl(e)}
-            />
-          </div>
-          <Form form={form}>
-            <Row gutter={24}>
-              {queryTopicConf.data &&
-                Object.keys(queryTopicConf.data[0]).map(
-                  (t: string, index: number) => {
-                    const label = transParamsWithConstantsMap(
-                      TOPIC_INFO_ZH_MAP,
-                      t
-                    );
-                    const ignoreList = [
-                      'isSrvAcceptPublish',
-                      'isSrvAcceptSubscribe',
-                    ];
-                    if (
-                      queryTopicConf.data[0][t] instanceof Object ||
-                      !label ||
-                      ignoreList.includes(t)
-                    )
-                      return null;
-                    return (
-                      <Col span={12} key={'queryTopicConf' + index}>
-                        <Form.Item labelCol={{ span: 12 }} label={label}>
-                          {queryTopicConf.data[0][t] + ''}
-                        </Form.Item>
-                      </Col>
-                    );
-                  }
-                )}
-            </Row>
-          </Form>
-        </TitleWrap>
-        <TitleWrap title="缺省配置" wrapperStyle={{ position: 'relative' }}>
-          <div className="topic-detail-options-wrapper">
-            <Button
-              className="mr10"
-              type="primary"
-              size="small"
-              onClick={() => onEdit()}
-            >
-              编辑
-            </Button>
-          </div>
-          <Form form={form}>
-            <Row gutter={24}>
-              {[
-                'acceptPublish',
-                'acceptSubscribe',
-                'unflushThreshold',
-                'unflushInterval',
-                'deleteWhen',
-                'deletePolicy',
-                'numPartitions',
-              ].map((t: string, index: number) => {
-                if (
-                  !queryTopicConf.data ||
-                  !queryTopicConf.data[0].topicInfo[0]
-                )
-                  return null;
-                const value = queryTopicConf.data[0].topicInfo[0][t];
-                return (
-                  <Col span={12} key={'queryTopicConf' + index}>
-                    <Form.Item labelCol={{ span: 12 }} label={t}>
-                      {value + ''}
-                    </Form.Item>
-                  </Col>
-                );
-              })}
-            </Row>
-          </Form>
-        </TitleWrap>
-        <TitleWrap title="部署Broker列表">{renderBrokerList()}</TitleWrap>
-        <TitleWrap title="消费组列表">{renderConsumeGroupList()}</TitleWrap>
-      </div>
-      <CommonModal
-        modalParams={modalParams}
-        data={[queryTopicConf.data && queryTopicConf.data[0]]}
-      />
-      <BrokerModal
-        modalParams={brokerModalParams}
-        data={[queryBrokerInfo.data && queryBrokerInfo.data[0]]}
-      />
-    </Spin>
-  );
-};
-
-export default Detail;
diff --git a/tubemq-web/src/pages/Topic/index.less b/tubemq-web/src/pages/Topic/index.less
deleted file mode 100644
index 5efa767..0000000
--- a/tubemq-web/src/pages/Topic/index.less
+++ /dev/null
@@ -1,9 +0,0 @@
-.topic-detail-options-wrapper {
-  position: absolute;
-  top: 15px;
-  right: 0;
-
-  .mr10 {
-    margin-right: 10px;
-  }
-}
\ No newline at end of file
diff --git a/tubemq-web/src/pages/Topic/index.tsx b/tubemq-web/src/pages/Topic/index.tsx
deleted file mode 100644
index cd112f9..0000000
--- a/tubemq-web/src/pages/Topic/index.tsx
+++ /dev/null
@@ -1,279 +0,0 @@
-import React, { useContext } from 'react';
-import GlobalContext from '@/context/globalContext';
-import Breadcrumb from '@/components/Breadcrumb';
-import Table from '@/components/Tablex';
-import { Form, Button, Spin, Switch } from 'antd';
-import { useImmer } from 'use-immer';
-import { useRequest } from '@/hooks';
-import tableFilterHelper from '@/components/Tablex/tableFilterHelper';
-import { transParamsWithConstantsMap } from '@/utils';
-import { TOPIC_INFO_ZH_MAP } from '@/constants/topic';
-import './index.less';
-import { Link } from 'react-router-dom';
-import CommonModal, {
-  onOpenModal,
-  TopicResultData,
-  TopicData,
-} from './commonModal';
-
-const Topic: React.FC = () => {
-  // column config
-  const columns = [
-    {
-      title: transParamsWithConstantsMap(TOPIC_INFO_ZH_MAP, 'topicName'),
-      dataIndex: 'topicName',
-      render: (t: Array<any>) => <Link to={'/topic/' + t}>{t}</Link>,
-    },
-    {
-      title: transParamsWithConstantsMap(TOPIC_INFO_ZH_MAP, 'infoCount'),
-      dataIndex: 'infoCount',
-    },
-    {
-      title: transParamsWithConstantsMap(TOPIC_INFO_ZH_MAP, 'totalCfgNumPart'),
-      dataIndex: 'totalCfgNumPart',
-    },
-    {
-      title: transParamsWithConstantsMap(
-        TOPIC_INFO_ZH_MAP,
-        'totalRunNumPartCount'
-      ),
-      dataIndex: 'totalRunNumPartCount',
-    },
-    {
-      title: transParamsWithConstantsMap(
-        TOPIC_INFO_ZH_MAP,
-        'isSrvAcceptPublish'
-      ),
-      dataIndex: 'isSrvAcceptPublish',
-      render: (t: boolean, r: TopicResultData) => {
-        return (
-          <Switch
-            checked={t}
-            onChange={e => onSwitchChange(e, r, 'isSrvAcceptPublish')}
-          />
-        );
-      },
-    },
-    {
-      title: transParamsWithConstantsMap(
-        TOPIC_INFO_ZH_MAP,
-        'isSrvAcceptSubscribe'
-      ),
-      dataIndex: 'isSrvAcceptSubscribe',
-      render: (t: boolean, r: TopicResultData) => {
-        return (
-          <Switch
-            checked={t}
-            onChange={e => onSwitchChange(e, r, 'isSrvAcceptSubscribe')}
-          />
-        );
-      },
-    },
-    {
-      title: transParamsWithConstantsMap(
-        TOPIC_INFO_ZH_MAP,
-        'enableAuthControl'
-      ),
-      dataIndex: 'authData.enableAuthControl',
-      render: (t: boolean, r: TopicResultData) => {
-        return (
-          <Switch
-            checked={r.authData.enableAuthControl}
-            onChange={e => onAuthorizeControl(e, r)}
-          />
-        );
-      },
-    },
-    {
-      title: '操作',
-      dataIndex: 'topicIp',
-      render: (t: string, r: any) => {
-        return <a onClick={() => onDelete(r)}>删除</a>;
-      },
-    },
-  ];
-  const { breadMap } = useContext(GlobalContext);
-  const [modalParams, updateModelParams] = useImmer<any>({});
-  const [filterData, updateFilterData] = useImmer<any>({});
-  const [topicList, updateTopicList] = useImmer<TopicData>([]);
-  const [form] = Form.useForm();
-  // init query
-  const { data, loading, run } = useRequest<any, TopicData>(
-    (data: TopicResultData) => ({
-      url: '/api/op_query/admin_query_topic_info',
-      data: data,
-    }),
-    {
-      cacheKey: 'topicList',
-      onSuccess: data => {
-        updateTopicList(d => {
-          Object.assign(d, data);
-        });
-      },
-    }
-  );
-
-  // table event
-  // acceptSubscribe && acceptPublish options
-  const queryBrokerListByTopicNameQuery = useRequest<any, any>(
-    data => ({ url: '/api/op_query/admin_query_topic_info', ...data }),
-    { manual: true }
-  );
-  const onSwitchChange = (e: boolean, r: TopicResultData, type: string) => {
-    let option = '';
-    if (type === 'isSrvAcceptPublish') {
-      option = e ? '发布' : '禁止可发布';
-    } else if (type === 'isSrvAcceptSubscribe') {
-      option = e ? '订阅' : '禁止可订阅';
-    }
-
-    queryBrokerListByTopicNameQuery
-      .run({
-        data: {
-          topicName: r.topicName,
-          brokerId: '',
-        },
-      })
-      .then((d: TopicResultData) => {
-        onOpenModal({
-          type: 'topicStateChange',
-          title: `请确认操作`,
-          updateFunction: updateModelParams,
-          params: {
-            option,
-            value: e,
-            topicName: r.topicName,
-            data: d[0].topicInfo,
-            type,
-            callback: () => {
-              const index = data.findIndex(
-                (t: TopicResultData) => t.topicName === r.topicName
-              );
-              updateTopicList(d => {
-                d[index][type] = e + '';
-              });
-            },
-          },
-        });
-      });
-  };
-  // author
-  const onAuthorizeControl = (e: boolean, r: TopicResultData) => {
-    const option = e ? '发布' : '禁止可发布';
-    onOpenModal({
-      type: 'authorizeControl',
-      title: `请确认操作`,
-      updateFunction: updateModelParams,
-      params: {
-        option,
-        value: e,
-        topicName: r.topicName,
-        callback: () => {
-          const index = data.findIndex(
-            (t: TopicResultData) => t.topicName === r.topicName
-          );
-          updateTopicList(d => {
-            d[index]['authData']['enableAuthControl'] = e + '';
-          });
-        },
-      },
-    });
-  };
-  // new topic
-  const onNewTopic = () => {
-    onOpenModal({
-      type: 'newTopic',
-      title: '新建Topic',
-      updateFunction: updateModelParams,
-      params: {
-        callback: (d: any) => {
-          onOpenModal({
-            type: 'chooseBroker',
-            title: '选择【新增】broker列表',
-            updateFunction: updateModelParams,
-            params: {
-              data: d,
-              callback: () => {
-                onOpenModal({
-                  type: 'close',
-                  updateFunction: updateModelParams,
-                });
-              },
-            },
-          });
-        },
-      },
-    });
-  };
-  // delete
-  const onDelete = (r: TopicResultData) => {
-    queryBrokerListByTopicNameQuery
-      .run({
-        data: {
-          topicName: r.topicName,
-          brokerId: '',
-        },
-      })
-      .then((d: TopicResultData) => {
-        onOpenModal({
-          type: 'deleteTopic',
-          title: `请确认操作`,
-          updateFunction: updateModelParams,
-          params: {
-            topicName: r.topicName,
-            data: d[0].topicInfo,
-          },
-        });
-      });
-  };
-
-  return (
-    <Spin spinning={loading}>
-      <Breadcrumb breadcrumbMap={breadMap} />
-      <div className="main-container">
-        <div
-          className="search-wrapper"
-          style={{ float: 'right', marginRight: '-16px' }}
-        >
-          <Form form={form} layout={'inline'}>
-            <Form.Item>
-              <Button
-                type="primary"
-                onClick={() => onNewTopic()}
-                style={{ margin: '0 10px 0 10px' }}
-              >
-                新增
-              </Button>
-              <Button type="primary" onClick={() => run()}>
-                刷新
-              </Button>
-            </Form.Item>
-          </Form>
-        </div>
-        <Table
-          columns={columns}
-          dataSource={topicList}
-          rowKey="topicName"
-          searchPlaceholder="请输入topicName查询"
-          searchWidth={12}
-          dataSourceX={filterData.list}
-          filterFnX={value =>
-            tableFilterHelper({
-              key: value,
-              srcArray: data,
-              targetArray: filterData.list,
-              updateFunction: res =>
-                updateFilterData(filterData => {
-                  filterData.list = res;
-                }),
-              filterList: ['topicName'],
-            })
-          }
-        />
-      </div>
-      <CommonModal modalParams={modalParams} data={data} />
-    </Spin>
-  );
-};
-
-export default Topic;
diff --git a/tubemq-web/src/pages/Topic/query.tsx b/tubemq-web/src/pages/Topic/query.tsx
deleted file mode 100644
index bf17545..0000000
--- a/tubemq-web/src/pages/Topic/query.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-import * as React from 'react';
-import './index.less';
-import { OKProps } from '@/components/Modalx';
-import { useRequest } from '@/hooks';
-import { useContext, useEffect } from 'react';
-import GlobalContext from '@/context/globalContext';
-
-interface ComProps {
-  fire: string;
-  params: any;
-  type: string;
-}
-
-let newObjectTemp = '';
-let editObjectTemp = '';
-const Comp = (props: ComProps) => {
-  const { fire } = props;
-  const { userInfo } = useContext(GlobalContext);
-  // eslint-disable-next-line
-  useEffect(() => {
-    const { params, type } = props;
-    dispatchAction(type, params);
-  }, [fire]);
-
-  const dispatchAction = (type: string, p: OKProps) => {
-    if (!fire) return null;
-    let promise;
-    switch (type) {
-      case 'newTopic':
-        promise = newTopic(p);
-        break;
-      case 'endChooseBroker':
-        promise = endChooseBroker(p);
-        break;
-      case 'editTopic':
-        promise = editTopic(p);
-        break;
-      case 'endEditChooseBroker':
-        promise = endEditChooseBroker(p);
-        break;
-      case 'topicStateChange':
-        promise = topicStateChange(type, p);
-        break;
-      case 'authorizeControl':
-        promise = authorizeControl(type, p);
-        break;
-      case 'deleteTopic':
-        promise = deleteTopic(type, p);
-        break;
-      case 'deleteConsumeGroup':
-        promise = deleteConsumeGroup(type, p);
-        break;
-    }
-
-    promise &&
-      promise.then(t => {
-        const { callback } = p.params;
-        if (t.statusCode !== 0 && callback) callback(t);
-      });
-  };
-  const commonQuery = useRequest<any, any>((url, data) => ({ url, ...data }), {
-    manual: true,
-  });
-  const newTopicQuery = useRequest<any, any>(
-    data => ({
-      url: '/api/op_query/admin_query_broker_topic_config_info',
-      ...data,
-    }),
-    { manual: true }
-  );
-  const newTopic = (p: OKProps) => {
-    newObjectTemp = JSON.stringify(p.params);
-    return newTopicQuery.run({
-      data: {
-        topicName: '',
-        brokerId: '',
-      },
-    });
-  };
-
-  const endChooseBrokerQuery = useRequest<any, any>(
-    data => ({ url: '/api/op_modify/admin_add_new_topic_record', ...data }),
-    { manual: true }
-  );
-  const endChooseBroker = (p: OKProps) => {
-    const topicParams = JSON.parse(newObjectTemp);
-    const { params } = p;
-    return endChooseBrokerQuery.run({
-      data: {
-        borkerId: params.selectBroker.join(','),
-        confModAuthToken: p.psw,
-        ...topicParams,
-      },
-    });
-  };
-
-  const editTopic = (p: OKProps) => {
-    const { params } = p;
-    editObjectTemp = JSON.stringify(p.params);
-    return newTopicQuery.run({
-      data: {
-        topicName: params.topicName,
-        brokerId: '',
-      },
-    });
-  };
-  const endEditChooseBroker = (p: OKProps) => {
-    const topicParams = JSON.parse(editObjectTemp);
-    const { params } = p;
-    return commonQuery.run(`/api/op_modify/admin_modify_topic_info`, {
-      data: {
-        borkerId: params.selectBroker.join(','),
-        confModAuthToken: p.psw,
-        ...topicParams,
-      },
-    });
-  };
-
-  const deleteTopic = (type: string, p: OKProps) => {
-    const { params } = p;
-    return commonQuery.run(`/api/op_modify/admin_delete_topic_info`, {
-      data: {
-        brokerId: params.selectBroker.join(','),
-        confModAuthToken: p.psw,
-        modifyUser: userInfo.userName,
-        topicName: params.topicName,
-      },
-    });
-  };
-  const deleteConsumeGroup = (type: string, p: OKProps) => {
-    const { params } = p;
-    return commonQuery.run(
-      `/api/op_modify/admin_delete_allowed_consumer_group_info`,
-      {
-        data: {
-          groupName: params.groupName,
-          confModAuthToken: p.psw,
-          topicName: params.topicName,
-        },
-      }
-    );
-  };
-  const topicStateChange = (type: string, p: OKProps) => {
-    const { params } = p;
-    const data: any = {
-      brokerId: params.selectBroker.join([',']),
-      confModAuthToken: p.psw,
-      modifyUser: userInfo.userName,
-      topicName: params.topicName,
-    };
-    if (params.type === 'isSrvAcceptPublish') {
-      data.acceptPublish = params.value;
-    }
-    if (params.type === 'isSrvAcceptSubscribe') {
-      data.acceptSubscribe = params.value;
-    }
-
-    return commonQuery.run(`/api/op_modify/admin_modify_topic_info`, {
-      data,
-    });
-  };
-
-  const authorizeControl = (type: string, p: OKProps) => {
-    const { params } = p;
-    const data: any = {
-      confModAuthToken: p.psw,
-      topicName: params.topicName,
-      isEnable: params.value,
-      modifyUser: userInfo.userName,
-    };
-
-    return commonQuery.run(`/api/op_modify/admin_set_topic_authorize_control`, {
-      data,
-    });
-  };
-
-  return <></>;
-};
-
-export default Comp;
diff --git a/tubemq-web/src/react-app-env.d.ts b/tubemq-web/src/react-app-env.d.ts
deleted file mode 100644
index 6431bc5..0000000
--- a/tubemq-web/src/react-app-env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-/// <reference types="react-scripts" />
diff --git a/tubemq-web/src/router.tsx b/tubemq-web/src/router.tsx
deleted file mode 100644
index 46df97d..0000000
--- a/tubemq-web/src/router.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React, { Suspense, lazy, useState } from 'react';
-import {
-  BrowserRouter as Router,
-  Switch,
-  Route,
-  Redirect,
-} from 'react-router-dom';
-import { PageLoading } from '@ant-design/pro-layout';
-import { hot } from 'react-hot-loader/root';
-import { Layout } from '@/components';
-import routes from '@/routes';
-import GlobalContext from '@/context/globalContext';
-
-const App = () => {
-  const [cluster, setCluster] = useState();
-  const [breadMap, setBreadMap] = useState();
-  // eslint-disable-next-line
-  const [userInfo, setUserInfo] = useState({
-    userName: 'webapi',
-  });
-
-  return (
-    <GlobalContext.Provider
-      value={{ cluster, setCluster, breadMap, setBreadMap, userInfo }}
-    >
-      <Router>
-        <Layout>
-          <Suspense fallback={<PageLoading />}>
-            <Switch>
-              {routes.map((route, index: number) => (
-                <Route
-                  key={index}
-                  path={route.path}
-                  exact={route.exact}
-                  strict={route.strict}
-                  render={props => {
-                    const LazyComponent = lazy(route.component);
-                    return <LazyComponent {...props} />;
-                  }}
-                />
-              ))}
-            </Switch>
-            <Route
-              exact
-              path="/"
-              render={() => <Redirect to="/issue" push />}
-            />
-          </Suspense>
-        </Layout>
-      </Router>
-    </GlobalContext.Provider>
-  );
-};
-
-export default process.env.NODE_ENV === 'development' ? hot(App) : App;
diff --git a/tubemq-web/src/routes/index.tsx b/tubemq-web/src/routes/index.tsx
deleted file mode 100644
index ee36fa2..0000000
--- a/tubemq-web/src/routes/index.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { RouteProps } from '@/typings';
-
-const routes: RouteProps[] = [
-  {
-    path: '/issue/:id',
-    component: () => import('@/pages/Issue/consumeGroupDetail'),
-  },
-  {
-    path: '/issue',
-    component: () => import('@/pages/Issue'),
-  },
-  {
-    path: '/broker/:id',
-    component: () => import('@/pages/Broker/detail'),
-  },
-  {
-    path: '/broker',
-    component: () => import('@/pages/Broker'),
-  },
-  {
-    path: '/topic/:name',
-    component: () => import('@/pages/Topic/detail'),
-  },
-  {
-    path: '/topic',
-    component: () => import('@/pages/Topic'),
-  },
-  {
-    path: '/cluster',
-    component: () => import('@/pages/Cluster'),
-  },
-  {
-    component: () => import('@/pages/NotFound'),
-  },
-];
-
-export default routes;
diff --git a/tubemq-web/src/serviceWorker.ts b/tubemq-web/src/serviceWorker.ts
deleted file mode 100644
index 109ab0e..0000000
--- a/tubemq-web/src/serviceWorker.ts
+++ /dev/null
@@ -1,146 +0,0 @@
-// This optional code is used to register a service worker.
-// register() is not called by default.
-
-// This lets the app load faster on subsequent visits in production, and gives
-// it offline capabilities. However, it also means that developers (and users)
-// will only see deployed updates on subsequent visits to a page, after all the
-// existing tabs open on the page have been closed, since previously cached
-// resources are updated in the background.
-
-// To learn more about the benefits of this model and instructions on how to
-// opt-in, read https://bit.ly/CRA-PWA
-
-const isLocalhost = Boolean(
-  window.location.hostname === 'localhost' ||
-    // [::1] is the IPv6 localhost address.
-    window.location.hostname === '[::1]' ||
-    // 127.0.0.0/8 are considered localhost for IPv4.
-    window.location.hostname.match(
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-    )
-);
-
-type Config = {
-  onSuccess?: (registration: ServiceWorkerRegistration) => void;
-  onUpdate?: (registration: ServiceWorkerRegistration) => void;
-};
-
-export function register(config?: Config) {
-  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
-    // The URL constructor is available in all browsers that support SW.
-    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
-    if (publicUrl.origin !== window.location.origin) {
-      // Our service worker won't work if PUBLIC_URL is on a different origin
-      // from what our page is served on. This might happen if a CDN is used to
-      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
-      return;
-    }
-
-    window.addEventListener('load', () => {
-      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
-
-      if (isLocalhost) {
-        // This is running on localhost. Let's check if a service worker still exists or not.
-        checkValidServiceWorker(swUrl, config);
-
-        // Add some additional logging to localhost, pointing developers to the
-        // service worker/PWA documentation.
-        navigator.serviceWorker.ready.then(() => {
-          console.log(
-            'This web app is being served cache-first by a service ' +
-              'worker. To learn more, visit https://bit.ly/CRA-PWA'
-          );
-        });
-      } else {
-        // Is not localhost. Just register service worker
-        registerValidSW(swUrl, config);
-      }
-    });
-  }
-}
-
-function registerValidSW(swUrl: string, config?: Config) {
-  navigator.serviceWorker
-    .register(swUrl)
-    .then(registration => {
-      registration.onupdatefound = () => {
-        const installingWorker = registration.installing;
-        if (installingWorker == null) {
-          return;
-        }
-        installingWorker.onstatechange = () => {
-          if (installingWorker.state === 'installed') {
-            if (navigator.serviceWorker.controller) {
-              // At this point, the updated precached content has been fetched,
-              // but the previous service worker will still serve the older
-              // content until all client tabs are closed.
-              console.log(
-                'New content is available and will be used when all ' +
-                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
-              );
-
-              // Execute callback
-              if (config && config.onUpdate) {
-                config.onUpdate(registration);
-              }
-            } else {
-              // At this point, everything has been precached.
-              // It's the perfect time to display a
-              // "Content is cached for offline use." message.
-              console.log('Content is cached for offline use.');
-
-              // Execute callback
-              if (config && config.onSuccess) {
-                config.onSuccess(registration);
-              }
-            }
-          }
-        };
-      };
-    })
-    .catch(error => {
-      console.error('Error during service worker registration:', error);
-    });
-}
-
-function checkValidServiceWorker(swUrl: string, config?: Config) {
-  // Check if the service worker can be found. If it can't reload the page.
-  fetch(swUrl, {
-    headers: { 'Service-Worker': 'script' },
-  })
-    .then(response => {
-      // Ensure service worker exists, and that we really are getting a JS file.
-      const contentType = response.headers.get('content-type');
-      if (
-        response.status === 404 ||
-        (contentType != null && contentType.indexOf('javascript') === -1)
-      ) {
-        // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then(registration => {
-          registration.unregister().then(() => {
-            window.location.reload();
-          });
-        });
-      } else {
-        // Service worker found. Proceed as normal.
-        registerValidSW(swUrl, config);
-      }
-    })
-    .catch(() => {
-      console.log(
-        'No internet connection found. App is running in offline mode.'
-      );
-    });
-}
-
-export function unregister() {
-  if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.ready
-      .then(registration => {
-        registration.unregister();
-      })
-      .catch(error => {
-        console.error(error.message);
-      });
-  }
-}
diff --git a/tubemq-web/src/setupProxy.js b/tubemq-web/src/setupProxy.js
deleted file mode 100644
index 1340128..0000000
--- a/tubemq-web/src/setupProxy.js
+++ /dev/null
@@ -1,12 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const { createProxyMiddleware } = require('http-proxy-middleware');
-
-module.exports = function(app) {
-  app.use(
-    createProxyMiddleware('/webapi.htm', {
-      target: 'http://127.0.0.1:8080', // should set api address
-      changeOrigin: true,
-      ws: true,
-    })
-  );
-};
diff --git a/tubemq-web/src/store/global.ts b/tubemq-web/src/store/global.ts
deleted file mode 100644
index 18d8693..0000000
--- a/tubemq-web/src/store/global.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { createStore } from '@reactseed/use-redux';
-
-export interface TState {
-  name: string;
-  age: number;
-}
-
-export interface TMethod {
-  updateName: (name: string) => void;
-  becomeOlder: () => void;
-}
-
-const store = createStore(() => ({
-  age: 20,
-  name: 'reactseed',
-}));
-
-const methods = (state: TState): TMethod => {
-  const { age } = state;
-  return {
-    updateName: (name: string) => {
-      state.name = name;
-    },
-    becomeOlder: () => {
-      state.age = age + 1;
-    },
-  };
-};
-
-export { store, methods };
diff --git a/tubemq-web/src/typings/index.ts b/tubemq-web/src/typings/index.ts
deleted file mode 100644
index 164ab50..0000000
--- a/tubemq-web/src/typings/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './router';
diff --git a/tubemq-web/src/typings/router.ts b/tubemq-web/src/typings/router.ts
deleted file mode 100644
index 38e855d..0000000
--- a/tubemq-web/src/typings/router.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Route as LayoutRoute } from '@ant-design/pro-layout/lib/typings';
-import { RouteProps as ReactRouteProps } from 'react-router-dom';
-
-export interface Route extends LayoutRoute {
-  paths?: string[];
-}
-
-export type OmitRouteProps = Omit<ReactRouteProps, 'component'> & {
-  component: () => Promise<{ default: any }>;
-};
-
-export interface RouteProps extends OmitRouteProps {
-  component: () => Promise<{ default: any }>;
-}
diff --git a/tubemq-web/src/utils/index.ts b/tubemq-web/src/utils/index.ts
deleted file mode 100644
index e410d91..0000000
--- a/tubemq-web/src/utils/index.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { isObject, isEmpty } from 'lodash';
-
-export const isDevelopEnv = () => {
-  return process.env.NODE_ENV === 'development';
-};
-
-export const isEmptyParam = (value: any): boolean => {
-  if (Array.isArray(value)) {
-    // value为数组
-    return !value.length;
-  }
-  if (isObject(value)) {
-    // value为对象
-    return isEmpty(value);
-  }
-  if (typeof value === 'undefined') {
-    // value为undefinded
-    return true;
-  }
-  if (Number.isFinite(value)) {
-    // value为数值
-    return false;
-  }
-  // value为默认值
-  return !value;
-};
-
-export const boolean2Chinese = (value: boolean | string): string => {
-  let v: boolean;
-  if (value === 'false') {
-    v = false;
-  } else if (value === 'true') {
-    v = true;
-  } else {
-    v = value as boolean;
-  }
-  return !v ? '否' : '是';
-};
-
-export const transParamsWithConstantsMap = (
-  map: any,
-  paramsName: string
-): string => {
-  return map[paramsName] || paramsName;
-};
diff --git a/tubemq-web/tsconfig.json b/tubemq-web/tsconfig.json
deleted file mode 100644
index 0124036..0000000
--- a/tubemq-web/tsconfig.json
+++ /dev/null
@@ -1,33 +0,0 @@
-{
-  "extends": "./tsconfig.paths.json",
-  "compilerOptions": {
-    "typeRoots": [
-      "./typings"
-    ],
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react"
-  },
-  "exclude": [
-    "build",
-    "node_modules"
-  ],
-  "include": [
-    "src"
-  ]
-}
diff --git a/tubemq-web/tsconfig.paths.json b/tubemq-web/tsconfig.paths.json
deleted file mode 100644
index 5879100..0000000
--- a/tubemq-web/tsconfig.paths.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": "src",
-    "paths": {
-      "@/*": ["*"]
-    }
-  }
-}