feat: 单位详情引入虚拟滚动处理大数据表格

config/config.js

@@ -78,16 +78,6 @@ export default defineConfig({
         camel2DashComponentName: false
       },
       '@icon-park/react'
-    ],
-    [
-      'import',
-      {
-        libraryName: '@arco-design/web-react',
-        libraryDirectory: 'es',
-        camel2DashComponentName: false,
-        style: true // 样式按需加载
-      },
-      '@arco-design/web-react'
     ]
   ],
   chainWebpack(config) {

package.json

@@ -52,7 +52,6 @@
     "@ant-design/pro-form": "1.42.1",
     "@ant-design/pro-layout": "6.19.3",
     "@ant-design/pro-table": "2.60.0",
-    "@arco-design/web-react": "2.26.2",
     "@icon-park/react": "^1.3.3",
     "@umijs/route-utils": "^1.0.33",
     "ahooks": "^2.10.0",
@@ -72,7 +71,8 @@
     "react-infinite-scroll-component": "^6.1.0",
     "react-markdown": "^7.1.0",
     "umi": "3.5.4",
-    "vditor": "^3.8.7"
+    "vditor": "^3.8.7",
+    "virtuallist-antd": "^0.7.2"
   },
   "devDependencies": {
     "@ant-design/pro-cli": "^1.0.18",

pnpm-lock.yaml

@@ -48,7 +48,6 @@ specifiers:
   eslint-plugin-jsx: ^0.1.0
   eslint-plugin-prettier: ^4.0.0
   eslint-plugin-typescript: ^0.14.0
-  eslint-plugin-zero-config: ^2.2.9
   express: ^4.17.1
   gh-pages: ^3.0.0
   lint-staged: ^10.0.0
@@ -68,6 +67,7 @@ specifiers:
   typescript: ^4.0.3
   umi: 3.5.4
   vditor: ^3.8.7
+  virtuallist-antd: ^0.7.2
   webpack: ^5.40.0
   windicss: 3.1.7
   windicss-webpack-plugin: 1.4.5
@@ -99,6 +99,7 @@ dependencies:
   react-markdown: registry.npmmirror.com/react-markdown/7.1.2_c39f7e1b843c19489d8bd8e68fdd3314
   umi: registry.npmmirror.com/umi/3.5.4
   vditor: registry.npmmirror.com/vditor/3.8.11
+  virtuallist-antd: registry.npmmirror.com/virtuallist-antd/0.7.2_antd@4.18.5+react@17.0.2
 
 devDependencies:
   '@ant-design/pro-cli': registry.npmmirror.com/@ant-design/pro-cli/1.0.28
@@ -134,7 +135,6 @@ devDependencies:
   eslint-plugin-jsx: registry.npmmirror.com/eslint-plugin-jsx/0.1.0
   eslint-plugin-prettier: registry.npmmirror.com/eslint-plugin-prettier/4.0.0_eslint@7.32.0+prettier@2.5.1
   eslint-plugin-typescript: registry.npmmirror.com/eslint-plugin-typescript/0.14.0
-  eslint-plugin-zero-config: registry.npmmirror.com/eslint-plugin-zero-config/2.2.9_eslint@7.32.0
   express: registry.npmmirror.com/express/4.17.3
   gh-pages: registry.npmmirror.com/gh-pages/3.2.3
   lint-staged: registry.npmmirror.com/lint-staged/10.5.4
@@ -9435,16 +9435,6 @@ packages:
       source-map: registry.npmmirror.com/source-map/0.6.1
     dev: false
 
-  registry.npmmirror.com/css-tree/2.1.0:
-    resolution: {integrity: sha512-PcysZRzToBbrpoUrZ9qfblRIRf8zbEAkU0AIpQFtgkFK0vSbzOmBCvdSAx2Zg7Xx5wiYJKUKk0NMP7kxevie/A==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/css-tree/-/css-tree-2.1.0.tgz}
-    name: css-tree
-    version: 2.1.0
-    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
-    dependencies:
-      mdn-data: registry.npmmirror.com/mdn-data/2.0.27
-      source-map-js: registry.npmmirror.com/source-map-js/1.0.2
-    dev: true
-
   registry.npmmirror.com/csscolorparser/1.0.3:
     resolution: {integrity: sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/csscolorparser/-/csscolorparser-1.0.3.tgz}
     name: csscolorparser
@@ -10546,41 +10536,6 @@ packages:
       eslint-rule-composer: registry.npmmirror.com/eslint-rule-composer/0.3.0
     dev: true
 
-  registry.npmmirror.com/eslint-plugin-decorator-position/2.2.29_eslint@7.32.0:
-    resolution: {integrity: sha512-M+IIi4aYbLuWoaJBHZV100blntgk+X/MDXK5xbFC6YYm1NHGNP0wTkLiYNQ62l8AixMp4rbLvg5nhJQqPiVgXQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/eslint-plugin-decorator-position/-/eslint-plugin-decorator-position-2.2.29.tgz}
-    id: registry.npmmirror.com/eslint-plugin-decorator-position/2.2.29
-    name: eslint-plugin-decorator-position
-    version: 2.2.29
-    engines: {node: '>=8.3'}
-    peerDependencies:
-      eslint: ^7.31.0
-    dependencies:
-      '@ember-data/rfc395-data': registry.npmmirror.com/@ember-data/rfc395-data/0.0.4
-      ember-rfc176-data: registry.npmmirror.com/ember-rfc176-data/0.3.17
-      eslint: registry.npmmirror.com/eslint/7.32.0
-      snake-case: registry.npmmirror.com/snake-case/3.0.4
-    dev: true
-
-  registry.npmmirror.com/eslint-plugin-ember/10.5.9_eslint@7.32.0:
-    resolution: {integrity: sha512-kJsdAaKNcfRvZBZ+YZ67pxxUgl+aPLFAnoFJNwTo+BsaptiOCsHUEc4xUKXiInH2BJOC6mg0FQcZKn1a6gwKrA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/eslint-plugin-ember/-/eslint-plugin-ember-10.5.9.tgz}
-    id: registry.npmmirror.com/eslint-plugin-ember/10.5.9
-    name: eslint-plugin-ember
-    version: 10.5.9
-    engines: {node: 10.* || 12.* || >= 14}
-    peerDependencies:
-      eslint: '>= 6'
-    dependencies:
-      '@ember-data/rfc395-data': registry.npmmirror.com/@ember-data/rfc395-data/0.0.4
-      css-tree: registry.npmmirror.com/css-tree/2.1.0
-      ember-rfc176-data: registry.npmmirror.com/ember-rfc176-data/0.3.17
-      eslint: registry.npmmirror.com/eslint/7.32.0
-      eslint-utils: registry.npmmirror.com/eslint-utils/3.0.0_eslint@7.32.0
-      estraverse: registry.npmmirror.com/estraverse/5.3.0
-      lodash.kebabcase: registry.npmmirror.com/lodash.kebabcase/4.1.1
-      requireindex: registry.npmmirror.com/requireindex/1.2.0
-      snake-case: registry.npmmirror.com/snake-case/3.0.4
-    dev: true
-
   registry.npmmirror.com/eslint-plugin-ember/7.11.0:
     resolution: {integrity: sha1-t3CwxooYu7pLZtMpIXUK8UOkq/k=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/eslint-plugin-ember/download/eslint-plugin-ember-7.11.0.tgz}
     name: eslint-plugin-ember
@@ -10656,16 +10611,6 @@ packages:
       vscode-json-languageservice: registry.npmmirror.com/vscode-json-languageservice/3.11.0
     dev: true
 
-  registry.npmmirror.com/eslint-plugin-json/3.1.0:
-    resolution: {integrity: sha512-MrlG2ynFEHe7wDGwbUuFPsaT2b1uhuEFhJ+W1f1u+1C2EkXmTYJp4B1aAdQQ8M+CC3t//N/oRKiIVw14L2HR1g==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/eslint-plugin-json/-/eslint-plugin-json-3.1.0.tgz}
-    name: eslint-plugin-json
-    version: 3.1.0
-    engines: {node: '>=12.0'}
-    dependencies:
-      lodash: registry.npmmirror.com/lodash/4.17.21
-      vscode-json-languageservice: registry.npmmirror.com/vscode-json-languageservice/4.2.0
-    dev: true
-
   registry.npmmirror.com/eslint-plugin-jsx/0.1.0:
     resolution: {integrity: sha512-278HIClJgb3Gp1b89wbva7AGS7cxQzBNgKFysy6aEB44Acso2M8ARdoaLUnN7VTWf0vnSvtwugCmc/B8MSzY5g==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/eslint-plugin-jsx/-/eslint-plugin-jsx-0.1.0.tgz}
     name: eslint-plugin-jsx
@@ -10694,24 +10639,6 @@ packages:
       semver: registry.npmmirror.com/semver/6.3.0
     dev: true
 
-  registry.npmmirror.com/eslint-plugin-node/11.1.0_eslint@7.32.0:
-    resolution: {integrity: sha512-oUwtPJ1W0SKD0Tr+wqu92c5xuCeQqB3hSCHasn/ZgjFdA9iDGNkNf2Zi9ztY7X+hNuMib23LNGRm6+uN+KLE3g==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/eslint-plugin-node/-/eslint-plugin-node-11.1.0.tgz}
-    id: registry.npmmirror.com/eslint-plugin-node/11.1.0
-    name: eslint-plugin-node
-    version: 11.1.0
-    engines: {node: '>=8.10.0'}
-    peerDependencies:
-      eslint: '>=5.16.0'
-    dependencies:
-      eslint: registry.npmmirror.com/eslint/7.32.0
-      eslint-plugin-es: registry.npmmirror.com/eslint-plugin-es/3.0.1_eslint@7.32.0
-      eslint-utils: registry.npmmirror.com/eslint-utils/2.1.0
-      ignore: registry.npmmirror.com/ignore/5.2.0
-      minimatch: registry.npmmirror.com/minimatch/3.1.2
-      resolve: registry.npmmirror.com/resolve/1.22.0
-      semver: registry.npmmirror.com/semver/6.3.0
-    dev: true
-
   registry.npmmirror.com/eslint-plugin-prettier/4.0.0_eslint@7.32.0+prettier@2.5.1:
     resolution: {integrity: sha512-98MqmCJ7vJodoQK359bqQWaxOE0CS8paAz/GgjaZLyex4TTk3g9HugoO89EqWCrFiOqn9EVvcoo7gZzONCWVwQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.0.0.tgz}
     id: registry.npmmirror.com/eslint-plugin-prettier/4.0.0
@@ -10743,19 +10670,6 @@ packages:
       eslint: registry.npmmirror.com/eslint/7.32.0
     dev: true
 
-  registry.npmmirror.com/eslint-plugin-qunit/6.2.0_eslint@7.32.0:
-    resolution: {integrity: sha512-KvPmkIC2MHpfRxs/r8WUeeGkG6y+3qwSi2AZIBtjcM/YG6Z3k0GxW5Hbu3l7X0TDhljVCeBb9Q5puUkHzl83Mw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/eslint-plugin-qunit/-/eslint-plugin-qunit-6.2.0.tgz}
-    id: registry.npmmirror.com/eslint-plugin-qunit/6.2.0
-    name: eslint-plugin-qunit
-    version: 6.2.0
-    engines: {node: 10.x || 12.x || >=14.0.0}
-    dependencies:
-      eslint-utils: registry.npmmirror.com/eslint-utils/3.0.0_eslint@7.32.0
-      requireindex: registry.npmmirror.com/requireindex/1.2.0
-    transitivePeerDependencies:
-      - eslint
-    dev: true
-
   registry.npmmirror.com/eslint-plugin-react-hooks/4.3.0_eslint@7.32.0:
     resolution: {integrity: sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.3.0.tgz}
     id: registry.npmmirror.com/eslint-plugin-react-hooks/4.3.0
@@ -10837,27 +10751,6 @@ packages:
       - supports-color
     dev: true
 
-  registry.npmmirror.com/eslint-plugin-zero-config/2.2.9_eslint@7.32.0:
-    resolution: {integrity: sha512-YT9mc1Hqc0ixpgXdx2/aDyE9LsY3ZZAybzLKIE3N+eEbq9FNL3SI8DBlxU70IYTEvcOKjrh/BNPUPR3ePXjNNg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/eslint-plugin-zero-config/-/eslint-plugin-zero-config-2.2.9.tgz}
-    id: registry.npmmirror.com/eslint-plugin-zero-config/2.2.9
-    name: eslint-plugin-zero-config
-    version: 2.2.9
-    engines: {node: '>=12.0.0'}
-    peerDependencies:
-      eslint: ^7.29.0
-    dependencies:
-      babel-eslint: registry.npmmirror.com/babel-eslint/10.1.0_eslint@7.32.0
-      eslint: registry.npmmirror.com/eslint/7.32.0
-      eslint-config-prettier: registry.npmmirror.com/eslint-config-prettier/8.4.0_eslint@7.32.0
-      eslint-plugin-decorator-position: registry.npmmirror.com/eslint-plugin-decorator-position/2.2.29_eslint@7.32.0
-      eslint-plugin-ember: registry.npmmirror.com/eslint-plugin-ember/10.5.9_eslint@7.32.0
-      eslint-plugin-json: registry.npmmirror.com/eslint-plugin-json/3.1.0
-      eslint-plugin-node: registry.npmmirror.com/eslint-plugin-node/11.1.0_eslint@7.32.0
-      eslint-plugin-qunit: registry.npmmirror.com/eslint-plugin-qunit/6.2.0_eslint@7.32.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   registry.npmmirror.com/eslint-rule-composer/0.3.0:
     resolution: {integrity: sha512-bt+Sh8CtDmn2OajxvNO+BX7Wn4CIWMpTRm3MaiKPCQcnnlm0CS2mhui6QaoeQugs+3Kj2ESKEEGJUdVafwhiCg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/eslint-rule-composer/-/eslint-rule-composer-0.3.0.tgz}
     name: eslint-rule-composer
@@ -14472,12 +14365,6 @@ packages:
     version: 4.0.6
     dev: false
 
-  registry.npmmirror.com/lodash.kebabcase/4.1.1:
-    resolution: {integrity: sha512-N8XRTIMMqqDgSy4VLKPnJ/+hpGZN+PHQiJnSenYqPaVV/NCqEogTnAdZLQiGKhxX+JCs8waWq2t1XHWKOmlY8g==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz}
-    name: lodash.kebabcase
-    version: 4.1.1
-    dev: true
-
   registry.npmmirror.com/lodash.merge/4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/lodash.merge/-/lodash.merge-4.6.2.tgz}
     name: lodash.merge
@@ -14854,12 +14741,6 @@ packages:
     version: 2.0.14
     dev: false
 
-  registry.npmmirror.com/mdn-data/2.0.27:
-    resolution: {integrity: sha512-kwqO0I0jtWr25KcfLm9pia8vLZ8qoAKhWZuZMbneJq3jjBD3gl5nZs8l8Tu3ZBlBAHVQtDur9rdDGyvtfVraHQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/mdn-data/-/mdn-data-2.0.27.tgz}
-    name: mdn-data
-    version: 2.0.27
-    dev: true
-
   registry.npmmirror.com/mdurl/1.0.1:
     resolution: {integrity: sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/mdurl/-/mdurl-1.0.1.tgz}
     name: mdurl
@@ -19097,13 +18978,6 @@ packages:
     engines: {node: '>=0.10.5'}
     dev: true
 
-  registry.npmmirror.com/requireindex/1.2.0:
-    resolution: {integrity: sha512-L9jEkOi3ASd9PYit2cwRfyppc9NoABujTP8/5gFcbERmo5jUoAKovIC3fsF17pkTnGsrByysqX+Kxd2OTNI1ww==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/requireindex/-/requireindex-1.2.0.tgz}
-    name: requireindex
-    version: 1.2.0
-    engines: {node: '>=0.10.5'}
-    dev: true
-
   registry.npmmirror.com/reserved-words/0.1.2:
     resolution: {integrity: sha512-0S5SrIUJ9LfpbVl4Yzij6VipUdafHrOTzvmfazSw/jeZrZtQK303OPZW+obtkaw7jQlTQppy0UvZWm9872PbRw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/reserved-words/-/reserved-words-0.1.2.tgz}
     name: reserved-words
@@ -22140,6 +22014,20 @@ packages:
       replace-ext: registry.npmmirror.com/replace-ext/1.0.1
     dev: true
 
+  registry.npmmirror.com/virtuallist-antd/0.7.2_antd@4.18.5+react@17.0.2:
+    resolution: {integrity: sha512-I/we6otHbIfVQ4MXB3Myv/n+ZZB1sTSJYDyozYBca0WjlYngyXDCF6/iuALJxRBvll0/HBmbZjN0ZyfDrVyGRQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/virtuallist-antd/-/virtuallist-antd-0.7.2.tgz}
+    id: registry.npmmirror.com/virtuallist-antd/0.7.2
+    name: virtuallist-antd
+    version: 0.7.2
+    engines: {node: '>=8', npm: '>=5'}
+    peerDependencies:
+      antd: ^4.1.0
+      react: ^16.8.0 || ^17.0.0
+    dependencies:
+      antd: registry.npmmirror.com/antd/4.18.5_react-dom@17.0.2+react@17.0.2
+      react: registry.npmmirror.com/react/17.0.2
+    dev: false
+
   registry.npmmirror.com/vm-browserify/1.1.2:
     resolution: {integrity: sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vm-browserify/-/vm-browserify-1.1.2.tgz}
     name: vm-browserify
@@ -22158,30 +22046,12 @@ packages:
       vscode-uri: registry.npmmirror.com/vscode-uri/2.1.2
     dev: true
 
-  registry.npmmirror.com/vscode-json-languageservice/4.2.0:
-    resolution: {integrity: sha512-XNawv0Vdy/sUK0S+hGf7cq/qsVAbIniGJr89TvZOqMCNJmpgKTy1e8PL1aWW0uy6BfWMG7vxa5lZb3ypuFtuGQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vscode-json-languageservice/-/vscode-json-languageservice-4.2.0.tgz}
-    name: vscode-json-languageservice
-    version: 4.2.0
-    dependencies:
-      jsonc-parser: registry.npmmirror.com/jsonc-parser/3.0.0
-      vscode-languageserver-textdocument: registry.npmmirror.com/vscode-languageserver-textdocument/1.0.4
-      vscode-languageserver-types: registry.npmmirror.com/vscode-languageserver-types/3.16.0
-      vscode-nls: registry.npmmirror.com/vscode-nls/5.0.0
-      vscode-uri: registry.npmmirror.com/vscode-uri/3.0.3
-    dev: true
-
   registry.npmmirror.com/vscode-languageserver-textdocument/1.0.4:
     resolution: {integrity: sha512-/xhqXP/2A2RSs+J8JNXpiiNVvvNM0oTosNVmQnunlKvq9o4mupHOBAnnzH0lwIPKazXKvAKsVp1kr+H/K4lgoQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.4.tgz}
     name: vscode-languageserver-textdocument
     version: 1.0.4
     dev: true
 
-  registry.npmmirror.com/vscode-languageserver-types/3.16.0:
-    resolution: {integrity: sha512-k8luDIWJWyenLc5ToFQQMaSrqCHiLwyKPHKPQZ5zz21vM+vIVUSvsRpcbiECH4WR88K2XZqc4ScRcZ7nk/jbeA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vscode-languageserver-types/-/vscode-languageserver-types-3.16.0.tgz}
-    name: vscode-languageserver-types
-    version: 3.16.0
-    dev: true
-
   registry.npmmirror.com/vscode-languageserver-types/3.16.0-next.2:
     resolution: {integrity: sha512-QjXB7CKIfFzKbiCJC4OWC8xUncLsxo19FzGVp/ADFvvi87PlmBSCAtZI5xwGjF5qE0xkLf0jjKUn3DzmpDP52Q==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vscode-languageserver-types/-/vscode-languageserver-types-3.16.0-next.2.tgz}
     name: vscode-languageserver-types
@@ -22200,12 +22070,6 @@ packages:
     version: 2.1.2
     dev: true
 
-  registry.npmmirror.com/vscode-uri/3.0.3:
-    resolution: {integrity: sha512-EcswR2S8bpR7fD0YPeS7r2xXExrScVMxg4MedACaWHEtx9ftCF/qHG1xGkolzTPcEmjTavCQgbVzHUIdTMzFGA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vscode-uri/-/vscode-uri-3.0.3.tgz}
-    name: vscode-uri
-    version: 3.0.3
-    dev: true
-
   registry.npmmirror.com/vt-pbf/3.1.3:
     resolution: {integrity: sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vt-pbf/-/vt-pbf-3.1.3.tgz}
     name: vt-pbf

src/pages/Customer/Company/components/CompanyDetail/SyncClient.jsx

@@ -1,11 +1,10 @@
 import consts from '@/consts'
 import { syncToClient } from '@/services/customer'
 import { Copy } from '@icon-park/react'
-import { Button, Checkbox, message, Modal } from 'antd'
-import { useState } from 'react'
+import { Button, Checkbox, message, Modal, Table } from 'antd'
+import { useState, useMemo } from 'react'
 import { useDispatch } from 'umi'
-import { Table } from '@arco-design/web-react'
-import '@arco-design/web-react/dist/css/arco.css'
+import { VList } from 'virtuallist-antd'
 import styles from './index.less'
 
 const SyncClient = ({ customer, client, actionPayload }) => {
@@ -83,6 +82,13 @@ const SyncClient = ({ customer, client, actionPayload }) => {
     }
   ]
 
+  const vList = useMemo(() => {
+    return VList({
+      height: 400,
+      vid: 'sync_client'
+    })
+  }, [])
+
   const { checkValues, visible, loading } = state
   return (
     <>
@@ -105,10 +111,7 @@ const SyncClient = ({ customer, client, actionPayload }) => {
         onOk={handleOnConfirm}
       >
         <div className="rounded-3 p-4 mb-2 pt-0">
-          <Checkbox.Group
-            defaultValue={checkValues}
-            onChange={e => setState({ ...state, checkValues: e })}
-          >
+          <Checkbox.Group defaultValue={checkValues} onChange={e => setState({ ...state, checkValues: e })}>
             <div className="flex flex-nowrap">
               <Checkbox value="district">
                 <div className="w-100px text-left">地区</div>
@@ -143,15 +146,14 @@ const SyncClient = ({ customer, client, actionPayload }) => {
         </div>
         <div className={styles.tableSyncClient}>
           <Table
-            virtualized
             rowKey="id"
-            scroll={{ y: 400 }}
-            border={false}
+            size="small"
             columns={columns}
-            data={client}
+            dataSource={client}
             pagination={false}
+            scroll={{ y: 400 }}
+            components={vList}
             rowSelection={{
-              pureKeys: true,
               onChange: selectedRowKeys => setState({ ...state, selectedKeys: selectedRowKeys })
             }}
           />

src/pages/Customer/Company/components/CompanyDetail/TabList.jsx

@@ -1,8 +1,5 @@
-/* eslint-disable no-dupe-keys */
-import React, { useRef, useState } from 'react'
-import { Tabs, message, Dropdown, Menu, Typography, Button } from 'antd'
-import { Table } from '@arco-design/web-react'
-import '@arco-design/web-react/dist/css/arco.css'
+import React, { useMemo, useRef, useState } from 'react'
+import { Tabs, message, Dropdown, Menu, Typography, Button, Table } from 'antd'
 import styles from './index.less'
 import { apiAddClient, apiAddCustomerService, updateClient } from '@/services/customer'
 import { formatValues } from '@/components/LazyCascader'
@@ -17,21 +14,13 @@ import { DownOutlined } from '@ant-design/icons'
 import { ProductLabel } from '@/pages/Product/Lock/LockStore/index'
 import { useModal } from '@/components/ModalStore'
 import { Plus } from '@icon-park/react'
-const { Text } = Typography
+import { VList } from 'virtuallist-antd'
 
-const CompanyTabList = ({
-  initData,
-  customerId,
-  client,
-  software,
-  customer,
-  business,
-  updatePayload
-}) => {
+const { Text } = Typography
+const CompanyTabList = ({ initData, customerId, client, software, customer, business, updatePayload }) => {
   const dispatch = useDispatch()
   const dispatchModal = useModal()
   const { TabPane } = Tabs
-  const tRef = useRef(null)
   const [state, setState] = useState({
     params: {},
     visible: false
@@ -73,36 +62,21 @@ const CompanyTabList = ({
       title: '优先级',
       dataIndex: 'priority',
       width: 80,
-      headerCellStyle: {
-        backgroundColor: '#fafafa'
-      },
       sorter: (a, b) => a.priority - b.priority,
+      onSorter: true,
       render: (text, record) => (
-        <Dropdown
-          overlay={priorityMenu(text, record.id)}
-          trigger="click"
-          className="hover:cursor-pointer"
-        >
+        <Dropdown overlay={priorityMenu(text, record.id)} trigger="click" className="hover:cursor-pointer">
           <span>
             {text} <DownOutlined />
           </span>
         </Dropdown>
       )
-      // filters: Array.from(
-      //   new Set(client.client?.map(item => item.priority)).map(item => ({
-      //     text: item,
-      //     value: item
-      //   }))
-      // )
     },
     {
       title: '所有部门',
       dataIndex: 'department',
       onFilter: true,
       width: 100,
-      headerCellStyle: {
-        backgroundColor: '#fafafa'
-      },
       filters: Array.from(
         new Set(client.client?.map(item => item.department)).map(item => ({
           text: item,
@@ -114,16 +88,9 @@ const CompanyTabList = ({
     {
       title: '姓名',
       dataIndex: 'clientName',
-      // width: 100,
-      headerCellStyle: {
-        backgroundColor: '#fafafa'
-      },
       render: (clientName, record) => (
         <div className="text-primary hover:text-[#967bbd] line-clamp-1">
-          <span
-            onClick={() => dispatchModal('D_CLIENT_DETAIL', { dataId: record.id })}
-            className="cursor-pointer "
-          >
+          <span onClick={() => dispatchModal('D_CLIENT_DETAIL', { dataId: record.id })} className="cursor-pointer ">
             {clientName}
           </span>
         </div>
@@ -133,29 +100,18 @@ const CompanyTabList = ({
       title: '昵称',
       dataIndex: 'niceName',
       width: 110,
-      headerCellStyle: {
-        backgroundColor: '#fafafa'
-      },
       ellipsis: true
     },
     {
       title: '手机',
       dataIndex: 'telephone',
       width: 110,
-      ellipsis: true,
-      headerCellStyle: {
-        backgroundColor: '#fafafa'
-      },
       ellipsis: true
     },
     {
       title: 'QQ',
       dataIndex: 'qq',
       width: 110,
-      ellipsis: true,
-      headerCellStyle: {
-        backgroundColor: '#fafafa'
-      },
       ellipsis: true
     }
   ]
@@ -167,10 +123,9 @@ const CompanyTabList = ({
       render: (clientName, record) => (
         <span
           onClick={() => dispatchModal('D_LOCK_DETAIL', { dataId: record.id })}
-          className={[
-            'cursor-pointer hover:text-hex-967bbd',
-            record.preserveStatus === 3 ? null : 'text-primary'
-          ].join(' ')}
+          className={['cursor-pointer hover:text-hex-967bbd', record.preserveStatus === 3 ? null : 'text-primary'].join(
+            ' '
+          )}
         >
           {record.preserveStatus === 3 ? (
             <Text delete type="secondary">
@@ -323,20 +278,36 @@ const CompanyTabList = ({
     }
     return code === consts.RET_CODE.SUCCESS
   }
+
+  const vList = useMemo(() => {
+    return VList({
+      height: clientHeight,
+      vid: 'client_list'
+    })
+  }, [])
   return (
     <div>
       <div className="pl-15px">
         <Tabs>
           <TabPane tab={<span>客户{renderBadge(client.total, true)}</span>} key="1">
-            <div className={['sheet-right-panel', styles.tableCont].join(' ')} ref={tRef}>
+            <div className={['sheet-right-panel', styles.tableCont].join(' ')}>
               <Table
+                rowKey="id"
+                size="small"
+                columns={columns}
+                dataSource={client.client}
+                pagination={false}
+                scroll={{ y: clientHeight }}
+                components={vList}
+              />
+              {/* <Table
                 virtualized
                 scroll={{ y: clientHeight }}
                 border={false}
                 columns={columns}
                 data={client.client}
                 pagination={false}
-              />
+              /> */}
             </div>
           </TabPane>
           <TabPane tab={<span>软件锁{renderBadge(software.total, true)}</span>} key="2">