fix: download log failed

chore: update resource locales

.env

@@ -1,2 +1,4 @@
 PORT=9000
 UMI_DEV_SERVER_COMPRESS=none
+DID_YOU_KNOW=none
+

.eslintignore

@@ -0,0 +1 @@
+src/components/icon-font/iconfont/iconfont.js

.eslintrc.js

@@ -3,7 +3,13 @@ module.exports = {
   rules: {
     'react/no-unstable-nested-components': 1,
     'no-unused-vars': 'off',
+    'no-undef': 'error',
     '@typescript-eslint/no-unused-vars': 'off',
     '@typescript-eslint/class-name-casing': 'off'
-  }
+  },
+  globals: {
+    Global: 'readonly',
+    React: 'readonly'
+  },
+  ignorePatterns: ['public/static/']
 };

.github/workflows/ci.yml

@@ -4,11 +4,13 @@ on:
   push:
     branches:
       - 'main'
+      - 'v*-dev'
     tags:
       - '*.*.*'
   pull_request:
     branches:
       - 'main'
+      - 'v*-dev'
 
 env:
   NODE_VERSION: '21'
@@ -72,11 +74,6 @@ jobs:
     if: github.event_name == 'push'
     timeout-minutes: 30
     runs-on: ubuntu-22.04
-    strategy:
-      matrix:
-        version: ['latest', '${{ github.ref_name  }}']
-        exclude:
-          - version: 'main'
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -92,10 +89,23 @@ jobs:
             ${{ github.workspace }}/node_modules
       - name: Build
         run: scripts/build
+      - name: Determine Version
+        id: version
+        run: |
+          if [[ "${GITHUB_REF}" == "refs/heads/main" ]]; then
+            echo "version=latest" >> $GITHUB_OUTPUT
+          elif [[ "${GITHUB_REF}" == refs/tags/* ]]; then
+            echo "version=${GITHUB_REF#refs/tags/}" >> $GITHUB_OUTPUT
+          elif [[ "${GITHUB_REF}" == refs/heads/v*-dev ]]; then
+            echo "version=${GITHUB_REF#refs/heads/}" >> $GITHUB_OUTPUT
+          else
+            echo "Not a publish target"
+            exit 1
+          fi
       - name: Package
         run: scripts/package
         env:
-          VERSION: '${{ matrix.version }}'
+          VERSION: '${{ steps.version.outputs.version }}'
       - name: Release
         uses: TencentCloud/cos-action@b0aa648235fb35a1bdd6a77f529eb0ac4c2f1c25
         with:
@@ -103,7 +113,7 @@ jobs:
           secret_key: ${{ secrets.CI_TECENTCOS_SECRET_KEY }}
           cos_bucket: ${{ secrets.COS_BUCKET }}
           cos_region: ${{ secrets.COS_REGION }}
-          local_path: dist/${{ matrix.version }}.tar.gz
-          remote_path: releases/${{ matrix.version }}.tar.gz
+          local_path: dist/${{ steps.version.outputs.version }}.tar.gz
+          remote_path: releases/${{ steps.version.outputs.version }}.tar.gz
           accelerate: true
           clean: false

.gitignore

@@ -12,3 +12,4 @@
 /.mfsu
 .swc
 .DS_Store
+.idea

.husky/pre-commit

@@ -1 +1,4 @@
-npx --no-install lint-staged --quiet
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+ npx lint-staged

.lintstagedrc

@@ -1,11 +1,6 @@
 {
-  "*.{md,json}": [
-    "prettier --cache --write"
-  ],
-  "*.{js,jsx}": [
-    "max lint --fix --eslint-only",
-    "prettier --cache --write"
-  ],
+  "*.{md,json}": ["prettier --cache --write"],
+  "*.{js,jsx}": ["max lint --fix --eslint-only", "prettier --cache --write"],
   "*.{css,less}": [
     "max lint --fix --stylelint-only",
     "prettier --cache --write"
@@ -13,5 +8,6 @@
   "*.ts?(x)": [
     "max lint --fix --eslint-only",
     "prettier --cache --parser=typescript --write"
-  ]
+  ],
+  "src/locales/**/*.ts": ["npx tsx src/locales/check.ts"]
 }

.prettierignore

@@ -1,3 +1,9 @@
 node_modules
 .umi
 .umi-production
+public/static/*.js
+public/static/*.css
+src/components/icon-font/iconfont/iconfont.js
+src/components/icon-font/iconfont/*.css
+
+

.stylelintrc.js

@@ -2,5 +2,6 @@ module.exports = {
   extends: require.resolve('@umijs/max/stylelint'),
   rules: {
     'selector-class-pattern': null
-  }
+  },
+  ignoreFiles: ['public/static/*.css']
 };

LICENSE

@@ -0,0 +1,190 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1.  Definitions.
+
+    "License" shall mean the terms and conditions for use, reproduction,
+    and distribution as defined by Sections 1 through 9 of this document.
+
+    "Licensor" shall mean the copyright owner or entity authorized by
+    the copyright owner that is granting the License.
+
+    "Legal Entity" shall mean the union of the acting entity and all
+    other entities that control, are controlled by, or are under common
+    control with that entity. For the purposes of this definition,
+    "control" means (i) the power, direct or indirect, to cause the
+    direction or management of such entity, whether by contract or
+    otherwise, or (ii) ownership of fifty percent (50%) or more of the
+    outstanding shares, or (iii) beneficial ownership of such entity.
+
+    "You" (or "Your") shall mean an individual or Legal Entity
+    exercising permissions granted by this License.
+
+    "Source" form shall mean the preferred form for making modifications,
+    including but not limited to software source code, documentation
+    source, and configuration files.
+
+    "Object" form shall mean any form resulting from mechanical
+    transformation or translation of a Source form, including but
+    not limited to compiled object code, generated documentation,
+    and conversions to other media types.
+
+    "Work" shall mean the work of authorship, whether in Source or
+    Object form, made available under the License, as indicated by a
+    copyright notice that is included in or attached to the work
+    (an example is provided in the Appendix below).
+
+    "Derivative Works" shall mean any work, whether in Source or Object
+    form, that is based on (or derived from) the Work and for which the
+    editorial revisions, annotations, elaborations, or other modifications
+    represent, as a whole, an original work of authorship. For the purposes
+    of this License, Derivative Works shall not include works that remain
+    separable from, or merely link (or bind by name) to the interfaces of,
+    the Work and Derivative Works thereof.
+
+    "Contribution" shall mean any work of authorship, including
+    the original version of the Work and any modifications or additions
+    to that Work or Derivative Works thereof, that is intentionally
+    submitted to Licensor for inclusion in the Work by the copyright owner
+    or by an individual or Legal Entity authorized to submit on behalf of
+    the copyright owner. For the purposes of this definition, "submitted"
+    means any form of electronic, verbal, or written communication sent
+    to the Licensor or its representatives, including but not limited to
+    communication on electronic mailing lists, source code control systems,
+    and issue tracking systems that are managed by, or on behalf of, the
+    Licensor for the purpose of discussing and improving the Work, but
+    excluding communication that is conspicuously marked or otherwise
+    designated in writing by the copyright owner as "Not a Contribution."
+
+    "Contributor" shall mean Licensor and any individual or Legal Entity
+    on behalf of whom a Contribution has been received by Licensor and
+    subsequently incorporated within the Work.
+
+2.  Grant of Copyright License. Subject to the terms and conditions of
+    this License, each Contributor hereby grants to You a perpetual,
+    worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+    copyright license to reproduce, prepare Derivative Works of,
+    publicly display, publicly perform, sublicense, and distribute the
+    Work and such Derivative Works in Source or Object form.
+
+3.  Grant of Patent License. Subject to the terms and conditions of
+    this License, each Contributor hereby grants to You a perpetual,
+    worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+    (except as stated in this section) patent license to make, have made,
+    use, offer to sell, sell, import, and otherwise transfer the Work,
+    where such license applies only to those patent claims licensable
+    by such Contributor that are necessarily infringed by their
+    Contribution(s) alone or by combination of their Contribution(s)
+    with the Work to which such Contribution(s) was submitted. If You
+    institute patent litigation against any entity (including a
+    cross-claim or counterclaim in a lawsuit) alleging that the Work
+    or a Contribution incorporated within the Work constitutes direct
+    or contributory patent infringement, then any patent licenses
+    granted to You under this License for that Work shall terminate
+    as of the date such litigation is filed.
+
+4.  Redistribution. You may reproduce and distribute copies of the
+    Work or Derivative Works thereof in any medium, with or without
+    modifications, and in Source or Object form, provided that You
+    meet the following conditions:
+
+    (a) You must give any other recipients of the Work or
+    Derivative Works a copy of this License; and
+
+    (b) You must cause any modified files to carry prominent notices
+    stating that You changed the files; and
+
+    (c) You must retain, in the Source form of any Derivative Works
+    that You distribute, all copyright, patent, trademark, and
+    attribution notices from the Source form of the Work,
+    excluding those notices that do not pertain to any part of
+    the Derivative Works; and
+
+    (d) If the Work includes a "NOTICE" text file as part of its
+    distribution, then any Derivative Works that You distribute must
+    include a readable copy of the attribution notices contained
+    within such NOTICE file, excluding those notices that do not
+    pertain to any part of the Derivative Works, in at least one
+    of the following places: within a NOTICE text file distributed
+    as part of the Derivative Works; within the Source form or
+    documentation, if provided along with the Derivative Works; or,
+    within a display generated by the Derivative Works, if and
+    wherever such third-party notices normally appear. The contents
+    of the NOTICE file are for informational purposes only and
+    do not modify the License. You may add Your own attribution
+    notices within Derivative Works that You distribute, alongside
+    or as an addendum to the NOTICE text from the Work, provided
+    that such additional attribution notices cannot be construed
+    as modifying the License.
+
+    You may add Your own copyright statement to Your modifications and
+    may provide additional or different license terms and conditions
+    for use, reproduction, or distribution of Your modifications, or
+    for any such Derivative Works as a whole, provided Your use,
+    reproduction, and distribution of the Work otherwise complies with
+    the conditions stated in this License.
+
+5.  Submission of Contributions. Unless You explicitly state otherwise,
+    any Contribution intentionally submitted for inclusion in the Work
+    by You to the Licensor shall be under the terms and conditions of
+    this License, without any additional terms or conditions.
+    Notwithstanding the above, nothing herein shall supersede or modify
+    the terms of any separate license agreement you may have executed
+    with Licensor regarding such Contributions.
+
+6.  Trademarks. This License does not grant permission to use the trade
+    names, trademarks, service marks, or product names of the Licensor,
+    except as required for reasonable and customary use in describing the
+    origin of the Work and reproducing the content of the NOTICE file.
+
+7.  Disclaimer of Warranty. Unless required by applicable law or
+    agreed to in writing, Licensor provides the Work (and each
+    Contributor provides its Contributions) on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+    implied, including, without limitation, any warranties or conditions
+    of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+    PARTICULAR PURPOSE. You are solely responsible for determining the
+    appropriateness of using or redistributing the Work and assume any
+    risks associated with Your exercise of permissions under this License.
+
+8.  Limitation of Liability. In no event and under no legal theory,
+    whether in tort (including negligence), contract, or otherwise,
+    unless required by applicable law (such as deliberate and grossly
+    negligent acts) or agreed to in writing, shall any Contributor be
+    liable to You for damages, including any direct, indirect, special,
+    incidental, or consequential damages of any character arising as a
+    result of this License or out of the use or inability to use the
+    Work (including but not limited to damages for loss of goodwill,
+    work stoppage, computer failure or malfunction, or any and all
+    other commercial damages or losses), even if such Contributor
+    has been advised of the possibility of such damages.
+
+9.  Accepting Warranty or Additional Liability. While redistributing
+    the Work or Derivative Works thereof, You may choose to offer,
+    and charge a fee for, acceptance of support, warranty, indemnity,
+    or other liability obligations and/or rights consistent with this
+    License. However, in accepting such obligations, You may act only
+    on Your own behalf and on Your sole responsibility, not on behalf
+    of any other Contributor, and only if You agree to indemnify,
+    defend, and hold each Contributor harmless for any liability
+    incurred by, or claims asserted against, such Contributor by reason
+    of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS
+
+Copyright (c) 2024 The GPUStack authors
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

README.md

@@ -1,3 +1,7 @@
+# GPUStack UI
+
+UI for [GPUStack](https://github.com/gpustack/gpustack).
+
 ## Installation
 
 1. [Nodejs](https://nodejs.org/en) 16.0+(with NPM)
@@ -40,3 +44,12 @@ npm run dev
 ```
 npm run build
 ```
+
+## Bugs & Issues
+
+- Please submit [bugs and issues](https://github.com/gpustack/gpustack/issues) with a label `ui`
+
+## Links
+
+- Official website: https://gpustack.ai/
+- Documents: https://docs.gpustack.ai/latest/overview/

config/config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from '@umijs/max';
+import keepAlive from './keep-alive';
 import proxy from './proxy';
 import routes from './routes';
-import theme from './theme';
 import { getBranchInfo } from './utils';
 const CompressionWebpackPlugin = require('compression-webpack-plugin');
 
@@ -14,11 +14,23 @@ const isProduction = env === 'production';
 const t = Date.now();
 export default defineConfig({
   proxy: {
-    ...proxy('http://192.168.50.166:8080')
+    ...proxy(process.env.PROXY_HOST)
   },
   history: {
     type: 'hash'
   },
+  analyze: {
+    analyzerMode: 'server',
+    analyzerPort: 8888,
+    openAnalyzer: true,
+    generateStatsFile: false,
+    statsFilename: 'stats.json',
+    logLevel: 'info',
+    defaultSizes: 'parsed' // stat  // gzip
+  },
+  mfsu: {
+    exclude: ['lodash', 'ml-pca']
+  },
   base: process.env.npm_config_base || '/',
   ...(isProduction
     ? {
@@ -65,17 +77,14 @@ export default defineConfig({
   presets: ['umi-presets-pro'],
   clickToComponent: {},
   antd: {
-    style: 'less',
-    configProvider: {
-      componentSize: 'large',
-      theme
-    }
+    style: 'less'
   },
   hash: true,
   access: {},
   model: {},
   initialState: {},
   request: {},
+  keepalive: keepAlive,
   locale: {
     antd: true,
     baseNavigator: true,

config/keep-alive.ts

@@ -0,0 +1,6 @@
+export const keepAliveRoutes = {
+  text2images: '/playground/text-to-image',
+  speech: '/playground/speech'
+};
+
+export default [keepAliveRoutes.text2images, keepAliveRoutes.speech];

config/proxy.ts

@@ -1,4 +1,12 @@
-const proxyTableList = ['cli', 'v1', 'auth', 'v1-openai', 'version'];
+const proxyTableList = [
+  'cli',
+  'v1',
+  'auth',
+  'v1-openai',
+  'version',
+  'proxy',
+  'update'
+];
 
 // @ts-ingore
 export default function createProxyTable(target?: string) {
@@ -10,6 +18,7 @@ export default function createProxyTable(target?: string) {
         changeOrigin: true,
         secure: false,
         ws: true,
+        log: 'debug',
         pathRewrite: (pth: string) => pth.replace(`/^/${api}`, `/${api}`),
         headers: {
           origin: newTarget,

config/routes.ts

@@ -1,58 +1,183 @@
+import { keepAliveRoutes } from './keep-alive';
+
 export default [
   {
     name: 'dashboard',
     path: '/dashboard',
     key: 'dashboard',
-    icon: 'AppstoreOutlined',
+    icon: 'icon-dashboard',
+    selectedIcon: 'icon-dashboard-filled',
+    defaultIcon: 'icon-dashboard',
     access: 'canSeeAdmin',
-    component: './dashboard'
+    component: './dashboard',
+    routes: []
   },
   {
     name: 'playground',
-    title: 'Playground',
+    icon: 'icon-experiment',
+    selectedIcon: 'icon-experiment-filled',
+    defaultIcon: 'icon-experiment',
     path: '/playground',
     key: 'playground',
-    icon: 'Comment',
-    component: './playground'
+    routes: [
+      {
+        path: '/playground',
+        redirect: '/playground/chat'
+      },
+      {
+        name: 'chat',
+        title: 'Chat',
+        path: '/playground/chat',
+        key: 'chat',
+        icon: 'icon-chat',
+        selectedIcon: 'icon-chat-filled',
+        defaultIcon: 'icon-chat',
+        component: './playground/index'
+      },
+      {
+        name: 'embedding',
+        title: 'embedding',
+        path: '/playground/embedding',
+        key: 'embedding',
+        icon: 'icon-embedding',
+        selectedIcon: 'icon-embedding-filled',
+        defaultIcon: 'icon-embedding',
+        component: './playground/embedding'
+      },
+      {
+        name: 'rerank',
+        title: 'Rerank',
+        path: '/playground/rerank',
+        key: 'rerank',
+        icon: 'icon-reranker',
+        selectedIcon: 'icon-reranker-filled',
+        defaultIcon: 'icon-reranker',
+        component: './playground/rerank'
+      },
+      {
+        name: 'text2images',
+        title: 'Text2Images',
+        path: keepAliveRoutes.text2images,
+        key: 'text2images',
+        icon: 'icon-image1',
+        selectedIcon: 'icon-image-filled',
+        defaultIcon: 'icon-image1',
+        component: './playground/images'
+      },
+      {
+        name: 'speech',
+        title: 'Speech',
+        path: keepAliveRoutes.speech,
+        key: 'speech',
+        icon: 'icon-audio1',
+        selectedIcon: 'icon-audio-filled',
+        defaultIcon: 'icon-audio1',
+        component: './playground/speech'
+      }
+    ]
   },
   {
     name: 'models',
     path: '/models',
     key: 'models',
-    icon: 'Block',
     access: 'canSeeAdmin',
-    component: './llmodels'
+    routes: [
+      {
+        path: '/models',
+        redirect: '/models/deployments'
+      },
+      {
+        name: 'modelCatalog',
+        path: '/models/catalog',
+        key: 'modelsCatalog',
+        icon: 'icon-layers',
+        selectedIcon: 'icon-layers-filled',
+        defaultIcon: 'icon-layers',
+        access: 'canSeeAdmin',
+        component: './llmodels/catalog'
+      },
+      {
+        name: 'deployment',
+        path: '/models/deployments',
+        key: 'modelDeployments',
+        icon: 'icon-model',
+        selectedIcon: 'icon-model-filled',
+        defaultIcon: 'icon-model',
+        access: 'canSeeAdmin',
+        component: './llmodels/index'
+      }
+    ]
   },
   {
     name: 'resources',
     path: '/resources',
     key: 'resources',
-    icon: 'CloudServer',
     access: 'canSeeAdmin',
-    component: './resources'
+    routes: [
+      {
+        path: '/resources',
+        redirect: '/resources/workers'
+      },
+      {
+        name: 'workers',
+        path: '/resources/workers',
+        key: 'workers',
+        icon: 'icon-resources',
+        selectedIcon: 'icon-resources-filled',
+        defaultIcon: 'icon-resources',
+        component: './resources/components/workers'
+      },
+      {
+        name: 'gpus',
+        path: '/resources/gpus',
+        key: 'gpus',
+        icon: 'icon-gpu1',
+        selectedIcon: 'icon-gpu-filled',
+        defaultIcon: 'icon-gpu1',
+        component: './resources/components/gpus'
+      },
+      {
+        name: 'modelfiles',
+        path: '/resources/modelfiles',
+        key: 'modelfiles',
+        icon: 'icon-files',
+        selectedIcon: 'icon-files-filled',
+        defaultIcon: 'icon-files',
+        component: './resources/components/model-files'
+      }
+    ]
+  },
+  {
+    name: 'accessControl',
+    path: '/access-control',
+    key: 'accessControl',
+    access: 'canSeeAdmin',
+    routes: [
+      {
+        path: '/access-control',
+        redirect: '/access-control/users'
+      },
+      {
+        name: 'users',
+        path: '/access-control/users',
+        key: 'users',
+        icon: 'icon-users',
+        selectedIcon: 'icon-users-filled',
+        defaultIcon: 'icon-users',
+        component: './users'
+      }
+    ]
   },
-  // {
-  //   name: 'usage',
-  //   path: '/usage',
-  //   key: 'usage',
-  //   icon: 'BarChartOutlined',
-  //   component: './usage'
-  // },
   {
     name: 'apikeys',
     path: '/api-keys',
     key: 'apikeys',
-    icon: 'LockOutlined',
+    hideInMenu: true,
+    selectedIcon: 'icon-key-filled',
+    icon: 'icon-key',
+    defaultIcon: 'icon-key',
     component: './api-keys'
   },
-  {
-    name: 'users',
-    path: '/users',
-    key: 'users',
-    icon: 'Team',
-    access: 'canSeeAdmin',
-    component: './users'
-  },
   {
     name: 'profile',
     path: '/profile',
@@ -73,7 +198,7 @@ export default [
     name: '404',
     path: '*',
     key: '404',
-    layout: false,
+    hideInMenu: true,
     component: './404'
   }
 ];

config/theme.ts

@@ -1,49 +0,0 @@
-export default {
-  'root-entry-name': 'variable',
-  cssVar: true,
-  hashed: false,
-  components: {
-    Input: {
-      inputFontSize: 12
-    },
-    Table: {
-      cellFontSize: 12,
-      rowSelectedHoverBg: 'rgba(230, 230, 230, 0.88)',
-      rowSelectedBg: 'rgb(244, 245, 244)'
-    },
-    Menu: {
-      iconSize: 16,
-      iconMarginInlineEnd: 12,
-      itemHeight: 44,
-      itemColor: 'rgba(0,0,0,1)',
-      itemHoverBg: 'rgba(0,0,0,0.04)',
-      itemActiveBg: 'rgba(0,0,0,0.04)'
-    },
-    Progress: {
-      lineBorderRadius: 4
-    },
-    Select: {
-      itemSelectedBg: 'rgba(0,0,0,0.06)'
-    },
-    Message: {
-      contentPadding: '12px 16px'
-    },
-    Slider: {
-      handleSize: 8,
-      handleSizeHover: 8,
-      trackBg: 'rgba(0,0,0,0.15)',
-      handleColor: 'rgba(0,0,0,0.2)',
-      trackHoverBg: 'rgba(0,0,0,0.25)',
-      handleActiveColor: 'rgba(0,0,0,0.3)',
-      dotActiveBorderColor: 'rgba(0,0,0,0.25)',
-      handleActiveOutlineColor: 'rgba(0,0,0,0.25)',
-      dotBorderColor: 'rgba(0,0,0,0.25)'
-    }
-  },
-  token: {
-    colorPrimary: '#007BFF',
-    borderRadius: 8,
-    fontSize: 12,
-    motion: true
-  }
-};

overrides.less

@@ -1 +1,28 @@
 // only for third party libraries styles
+
+.simplebar-scrollbar.simplebar-visible::before {
+  opacity: 1;
+}
+
+.simplebar-scrollbar::before {
+  background: var(--scrollbar-handle-bg);
+  width: var(--scrollbar-size);
+}
+
+.simplebar-scrollbar.simplebar-visible.simplebar-hover {
+  &::before {
+    background: var(--scrollbar-handle-hover-bg);
+  }
+}
+
+.simplebar-scrollbar.scrollbar-handle-light {
+  &::before {
+    background-color: var(--scrollbar-handle-light-bg);
+  }
+}
+
+.simplebar-scrollbar.simplebar-visible.simplebar-hover.scrollbar-handle-light {
+  &::before {
+    background: var(--scrollbar-handle-light-bg);
+  }
+}

package.json

@@ -1,55 +1,87 @@
 {
   "private": true,
-  "author": "jialin <jialinkuang@126.com>",
+  "author": "jialin",
   "scripts": {
     "build": "max build",
+    "check:locales": "npx tsx ./src/locales/check.ts",
     "dev": "max dev",
     "format": "prettier --cache --write .",
     "postinstall": "max setup",
     "prepare": "husky",
+    "preview": "max preview",
     "setup": "max setup",
     "start": "npm run dev"
   },
+  "resolutions": {
+    "immer": "^9.0.6"
+  },
   "dependencies": {
-    "@ant-design/icons": "^5.3.7",
-    "@ant-design/pro-components": "^2.7.1",
+    "@ant-design/icons": "^5.5.1",
+    "@ant-design/pro-components": "^2.7.19",
+    "@braintree/sanitize-url": "^7.1.1",
     "@huggingface/gguf": "^0.1.7",
     "@huggingface/hub": "^0.15.1",
     "@huggingface/tasks": "^0.11.6",
     "@monaco-editor/react": "^4.6.0",
+    "@orcid/bibtex-parse-js": "^0.0.25",
     "@react-hook/resize-observer": "^2.0.2",
     "@types/lodash": "^4.17.4",
     "@umijs/max": "^4.2.11",
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/xterm": "^5.5.0",
+    "ahooks": "^3.8.5",
     "ansi-to-html": "^0.7.2",
-    "antd": "^5.18.3",
+    "antd": "^5.21.6",
     "antd-style": "^3.6.2",
-    "axios": "^1.7.2",
+    "axios": "^1.8.2",
     "classnames": "^2.5.1",
     "clipboard": "^2.0.11",
     "crypto-js": "^4.2.0",
     "dayjs": "^1.11.11",
+    "dompurify": "^3.2.6",
+    "driver.js": "^1.3.1",
     "echarts": "^5.5.1",
+    "epubjs": "^0.3.93",
+    "file-saver": "^2.0.5",
     "has-ansi": "^5.0.1",
     "highlight.js": "^11.10.0",
     "jotai": "^2.8.4",
+    "jszip": "^3.10.1",
+    "katex": "^0.16.21",
+    "lamejs": "github:zhuker/lamejs",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
+    "mammoth": "^1.8.0",
     "marked": "^14.1.0",
+    "ml-dataset-iris": "^1.2.1",
+    "ml-pca": "^4.1.1",
     "numeral": "^2.0.6",
+    "overlayscrollbars": "^2.10.0",
+    "overlayscrollbars-react": "^0.5.6",
+    "pdfjs-dist": "^4.7.76",
     "query-string": "^9.0.0",
+    "rc-resize-observer": "^1.4.0",
+    "rc-virtual-list": "^3.14.8",
+    "re-resizable": "^6.10.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hotkeys-hook": "^4.5.0",
+    "react-markdown": "^9.0.3",
+    "rehype-katex": "^7.0.1",
+    "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0",
     "simplebar-react": "^3.2.6",
-    "umi-presets-pro": "^2.0.3"
+    "styled-components": "^6.1.15",
+    "umi-presets-pro": "^2.0.3",
+    "wavesurfer.js": "^7.8.8",
+    "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz"
   },
   "devDependencies": {
     "@types/marked": "^6.0.0",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
     "@umijs/case-sensitive-paths-webpack-plugin": "^1.0.1",
+    "@umijs/plugins": "^4.4.11",
     "babel-plugin-named-asset-import": "^0.3.8",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
     "compression-webpack-plugin": "^11.1.0",
@@ -66,7 +98,15 @@
     "prettier-plugin-organize-imports": "^3.2.4",
     "prettier-plugin-packagejson": "^2.5.0",
     "prettier-plugin-two-style-order": "^1.0.1",
+    "tsx": "^4.19.3",
     "typescript": "^5.4.5",
-    "url-loader": "^4.1.1"
+    "url-loader": "^4.1.1",
+    "webpack-bundle-analyzer": "^4.10.2",
+    "worker-loader": "^3.0.8"
+  },
+  "pnpm": {
+    "overrides": {
+      "elliptic": "^6.6.1"
+    }
   }
 }

plugin.ts

@@ -4,11 +4,12 @@ export default (api: IApi) => {
   api.modifyHTML(($) => {
     const info = JSON.parse(process.env.VERSION || '{}');
     const env = process.env.NODE_ENV;
+
+    $('html').attr('data-env', env);
+
     $('html').attr(
       'data-version',
-      env === 'production'
-        ? info.version || info.commitId
-        : `dev-${info.commitId}`
+      env === 'production' ? info.version || info.commitId : `${info.commitId}`
     );
     if (env === 'production') {
       $('script[src^="/js/umi"]').first?.().remove?.();

src/app.tsx

@@ -1,14 +1,33 @@
-import { GPUStackVersionAtom } from '@/atoms/user';
+import { GPUStackVersionAtom, UpdateCheckAtom } from '@/atoms/user';
 import { setAtomStorage } from '@/atoms/utils';
 import { requestConfig } from '@/request-config';
 import {
   queryCurrentUserState,
-  queryVersionInfo
+  queryVersionInfo,
+  updateCheck
 } from '@/services/profile/apis';
+import { isOnline } from '@/utils';
+import {
+  IS_FIRST_LOGIN,
+  readState,
+  writeState
+} from '@/utils/localstore/index';
 import { RequestConfig, history } from '@umijs/max';
 
 const loginPath = '/login';
 
+// only for the first login and access from http://localhost
+
+const checkDefaultPage = async (userInfo: any) => {
+  const isFirstLogin = await readState(IS_FIRST_LOGIN);
+  if (isFirstLogin === null && isOnline()) {
+    writeState(IS_FIRST_LOGIN, true);
+    if (userInfo && userInfo?.is_admin) {
+      history.push('/models/deployments');
+    }
+  }
+};
+
 // runtime configuration
 export async function getInitialState(): Promise<{
   fetchUserInfo: () => Promise<Global.UserInfo>;
@@ -16,11 +35,27 @@ export async function getInitialState(): Promise<{
 }> {
   const { location } = history;
 
+  const getUpdateCheck = async () => {
+    try {
+      const data = await updateCheck();
+
+      setAtomStorage(UpdateCheckAtom, {
+        ...data
+      });
+      return data;
+    } catch (error) {
+      console.error('updateCheck error', error);
+    }
+  };
+
   const fetchUserInfo = async (): Promise<Global.UserInfo> => {
     try {
       const data = await queryCurrentUserState({
         skipErrorHandler: true
       });
+      if (data.is_admin) {
+        getUpdateCheck();
+      }
       return data;
     } catch (error) {
       history.push(loginPath);
@@ -31,7 +66,11 @@ export async function getInitialState(): Promise<{
   const getAppVersionInfo = async () => {
     try {
       const data = await queryVersionInfo();
-      setAtomStorage(GPUStackVersionAtom, data);
+      const isProduction = data.version?.indexOf('0.0.0') === -1;
+      setAtomStorage(GPUStackVersionAtom, {
+        ...data,
+        isProduction
+      });
     } catch (error) {
       console.error('queryVersionInfo error', error);
     }
@@ -41,7 +80,7 @@ export async function getInitialState(): Promise<{
 
   if (![loginPath].includes(location.pathname)) {
     const userInfo = await fetchUserInfo();
-
+    checkDefaultPage(userInfo);
     return {
       fetchUserInfo,
       currentUser: userInfo

src/assets/styles/common.less

@@ -6,6 +6,10 @@
   margin-bottom: 8px;
 }
 
+.m-b-6 {
+  margin-bottom: 6px;
+}
+
 .m-b-5 {
   margin-bottom: 5px;
 }
@@ -38,6 +42,22 @@
   margin-left: 20px;
 }
 
+.m-l-40 {
+  margin-left: 40px;
+}
+
+.m-t-16 {
+  margin-top: 16px;
+}
+
+.m-t-10 {
+  margin-top: 10px;
+}
+
+.m-0 {
+  margin: 0;
+}
+
 .m-r-10 {
   margin-right: 10px;
 }
@@ -66,9 +86,18 @@
   padding-left: 6px;
 }
 
+.p-l-8 {
+  padding-left: 8px;
+}
+
+.m-t-6 {
+  margin-top: 6px;
+}
+
 .flex {
   display: flex;
 }
+
 // space-between
 .flex-between {
   display: flex;
@@ -79,12 +108,27 @@
   display: flex;
   justify-content: center;
 }
+
+.justify-start {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.justify-end {
+  display: flex;
+  justify-content: flex-end;
+}
+
 // align-items: center
 .flex-center {
   display: flex;
   align-items: center;
 }
 
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
 .flex-gap-2 {
   display: flex;
   gap: 2px;
@@ -98,6 +142,11 @@
   opacity: 0.8;
 }
 
+.flex-end {
+  display: flex;
+  justify-content: flex-end;
+}
+
 .flex-column {
   display: flex;
   flex-direction: column;
@@ -115,14 +164,34 @@
   gap: 8px;
 }
 
+.gap-20 {
+  gap: 20px;
+}
+
+.gap-6 {
+  gap: 6px;
+}
+
+.line-24 {
+  line-height: 24px;
+}
+
 .relative {
   position: relative;
 }
 
+.font-size-0 {
+  font-size: 0;
+}
+
 .font-size-12 {
   font-size: var(--font-size-base);
 }
 
+.font-size-13 {
+  font-size: 13px;
+}
+
 .font-size-14 {
   font-size: var(--font-size-middle);
 }
@@ -131,6 +200,34 @@
   font-size: var(--font-size-large);
 }
 
+.font-size-20 {
+  font-size: 20px;
+}
+
+.font-size-18 {
+  font-size: 18px;
+}
+
+.font-size-24 {
+  font-size: 24px;
+}
+
+.font-size-32 {
+  font-size: 32px;
+}
+
+.m-b-0 {
+  margin-bottom: 0;
+}
+
+.m-b-16 {
+  margin-bottom: 16px;
+}
+
+.m-r-16 {
+  margin-right: 16px;
+}
+
 .font-400 {
   font-weight: var(--font-weight-normal);
 }
@@ -139,6 +236,10 @@
   font-weight: var(--font-weight-medium);
 }
 
+.font-500 {
+  font-weight: var(--font-weight-500);
+}
+
 .font-700 {
   font-weight: var(--font-weight-bold);
 }
@@ -150,3 +251,71 @@
 .text-tertiary {
   color: var(--ant-color-text-tertiary);
 }
+
+.tips-desc-list {
+  list-style-type: decimal;
+  padding-left: 16px;
+}
+
+.gap-16 {
+  gap: 16px;
+}
+
+.color-white-tertiary {
+  color: var(--color-white-tertiary);
+}
+
+.color-white-quaternary {
+  color: var(--color-white-quaternary);
+}
+
+.color-white-light-1 {
+  color: var(--color-white-light-1);
+}
+
+.color-white-light-2 {
+  color: var(--color-white-light-2);
+}
+
+.color-white-light-3 {
+  color: var(--color-white-light-3);
+}
+
+.color-white-light-4 {
+  color: var(--color-white-light-4);
+}
+
+textarea {
+  padding-inline: 6px 0;
+  padding-block: 0;
+  background-color: transparent;
+}
+
+textarea::-webkit-scrollbar {
+  width: var(--scrollbar-size);
+}
+
+textarea::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+textarea::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  border-radius: 6px;
+}
+
+textarea:hover {
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--color-scrollbar-thumb);
+    border-radius: 6px;
+  }
+}
+
+.bold-text {
+  color: var(--ant-color-text);
+  font-weight: var(--font-weight-medium);
+}
+
+.ant-result-extra {
+  color: var(--ant-color-text-secondary);
+}

src/assets/styles/driver.less

@@ -0,0 +1,9 @@
+.driver-popover {
+  color: var(--ant-color-text);
+
+  .driver-popover-title {
+    font-size: 16px;
+    font-weight: var(--font-weight-bold);
+    color: var(--ant-color-text);
+  }
+}

src/assets/styles/menu.less

@@ -1,10 +1,6 @@
 .ant-pro-layout {
   .ant-pro-sider {
-    // &.ant-layout-sider {
-    //   background: var(--color-white-1);
-    // }
     .ant-layout-sider-children {
-      background-color: var(--color-fill-1);
       border-inline: none;
       border-radius: 0;
       // padding-inline: 16px;

src/atoms/models.ts

@@ -0,0 +1,18 @@
+import { atom, getDefaultStore } from 'jotai';
+
+// models expand keys: create, update , delete,
+export const modelsExpandKeysAtom = atom<string[]>([]);
+
+export const requestIdAtom = atom<number>(0);
+
+export const setRquestId = () => {
+  const store = getDefaultStore();
+  const id = Date.now();
+  store.set(requestIdAtom, id);
+  return id;
+};
+
+export const getRequestId = () => {
+  const store = getDefaultStore();
+  return store.get(requestIdAtom);
+};

src/atoms/route-cache.ts

@@ -0,0 +1,17 @@
+import { atom, getDefaultStore } from 'jotai';
+
+export const routeCacheAtom = atom<any>(new Map());
+
+export const setRouteCache = (key: string, value: any) => {
+  const store = getDefaultStore();
+  const cache = store.get(routeCacheAtom);
+  cache.set(key, value);
+  store.set(routeCacheAtom, cache);
+};
+
+export const deleteRouteCache = (key: string) => {
+  const store = getDefaultStore();
+  const cache = store.get(routeCacheAtom);
+  cache.delete(key);
+  store.set(routeCacheAtom, cache);
+};

src/atoms/settings.ts

@@ -0,0 +1,55 @@
+import { colorPrimary } from '@/config/theme';
+import { atom } from 'jotai';
+import { atomWithStorage } from 'jotai/utils';
+
+type UserSettings = {
+  theme: 'light' | 'realDark';
+  mode: 'light' | 'realDark' | 'auto';
+  colorPrimary: string;
+  isDarkTheme: boolean;
+  collapsed: boolean;
+};
+
+const defaultSettings: UserSettings = {
+  theme: 'light',
+  mode: 'auto',
+  isDarkTheme: false,
+  colorPrimary: colorPrimary,
+  collapsed: false
+};
+
+export const getStorageUserSettings = () => {
+  if (typeof window === 'undefined') return defaultSettings;
+  try {
+    const savedSettings = JSON.parse(
+      localStorage.getItem('userSettings') || '{}'
+    );
+    return {
+      ...defaultSettings,
+      ...savedSettings
+    };
+  } catch {
+    return defaultSettings;
+  }
+};
+
+export const userSettingsAtom = atomWithStorage<UserSettings>(
+  'userSettings',
+  defaultSettings
+);
+
+export const userSettingsHelperAtom = atom(
+  (get) => get(userSettingsAtom),
+  (get, set, update: Partial<UserSettings>) => {
+    const prev = get(userSettingsAtom);
+    const newSettings = {
+      ...prev,
+      ...(update || {})
+    };
+    set(userSettingsAtom, {
+      ...newSettings,
+      colorPrimary: newSettings.colorPrimary || colorPrimary,
+      isDarkTheme: newSettings.theme === 'realDark'
+    });
+  }
+);

src/atoms/tab-active.ts

@@ -0,0 +1,20 @@
+import { getDefaultStore } from 'jotai';
+import { atomWithStorage } from 'jotai/utils';
+
+export const tabActiveAtom = atomWithStorage<Map<string, any>>(
+  'tabActiveStatus',
+  new Map()
+);
+
+export const setActiveStatus = (key: string, value: any) => {
+  const store = getDefaultStore();
+  const cache = store.get(tabActiveAtom);
+  cache.set(key, value);
+  store.set(tabActiveAtom, cache);
+};
+
+export const getActiveStatus = (key: string) => {
+  const store = getDefaultStore();
+  const cache = store.get(tabActiveAtom);
+  return cache.get(key);
+};

src/atoms/user.ts

@@ -6,9 +6,17 @@ export const userAtom = atomWithStorage<any>('userInfo', null);
 export const GPUStackVersionAtom = atom<{
   version: string;
   git_commit: string;
+  isProduction: boolean;
 }>({
   version: '',
-  git_commit: ''
+  git_commit: '',
+  isProduction: false
+});
+
+export const UpdateCheckAtom = atom<{
+  latest_version: string;
+}>({
+  latest_version: ''
 });
 
 export const initialPasswordAtom = atomWithStorage<string>(

src/atoms/watch-request.ts

@@ -0,0 +1,45 @@
+interface WatchRequest {
+  id: number;
+  token: any;
+  cancel: () => void;
+}
+
+declare global {
+  interface Window {
+    __GPUSTACK_WATCH_REQUEST_CLEAR__: {
+      watchIDValue: number;
+      requestList: WatchRequest[];
+    };
+  }
+}
+
+window.__GPUSTACK_WATCH_REQUEST_CLEAR__ = {
+  watchIDValue: 0,
+  requestList: []
+};
+
+export const updateWatchIDValue = () => {
+  window.__GPUSTACK_WATCH_REQUEST_CLEAR__.watchIDValue =
+    window.__GPUSTACK_WATCH_REQUEST_CLEAR__.watchIDValue + 1;
+  return window.__GPUSTACK_WATCH_REQUEST_CLEAR__.watchIDValue;
+};
+
+export const updateWatchRequest = (watchToken: WatchRequest) => {
+  window.__GPUSTACK_WATCH_REQUEST_CLEAR__.requestList.push(watchToken);
+};
+
+export const cancelWatchRequest = (n: number) => {
+  // cancel the before n requests
+  const requestList = window.__GPUSTACK_WATCH_REQUEST_CLEAR__.requestList;
+
+  for (let i = 0; i < n; i++) {
+    requestList[i]?.cancel?.();
+  }
+  window.__GPUSTACK_WATCH_REQUEST_CLEAR__.requestList = requestList.slice(n);
+};
+
+export const clearWatchRequestId = (id: number) => {
+  const requestList = window.__GPUSTACK_WATCH_REQUEST_CLEAR__.requestList;
+  const newRequestList = requestList.filter((item) => item.id !== id);
+  window.__GPUSTACK_WATCH_REQUEST_CLEAR__.requestList = newRequestList;
+};

src/components/alert-info/block.less

@@ -0,0 +1,72 @@
+.alert-info-block {
+  padding-block: 6px;
+  padding-inline: 10px 16px;
+  position: relative;
+  padding-left: 32px;
+  text-align: left;
+  border-radius: var(--border-radius-base);
+  margin: 0;
+  border: 1px solid transparent;
+
+  .ant-typography {
+    margin-bottom: 0;
+  }
+
+  &.danger {
+    border-color: var(--ant-color-error-border);
+    background-color: var(--ant-color-error-bg);
+  }
+
+  &.warning {
+    border-color: var(--ant-color-warning-border);
+    background-color: var(--ant-color-warning-bg);
+  }
+
+  &.transition {
+    color: var(--ant-geekblue-7);
+    background: var(--ant-geekblue-1);
+    border-color: var(--ant-geekblue-3);
+  }
+
+  &.success {
+    border: 1px solid var(--ant-color-success);
+    color: var(--ant-color-success);
+    background: var(--ant-color-success-bg);
+
+    .content.success {
+      font-weight: var(--font-weight-normal);
+    }
+  }
+
+  .title {
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: flex;
+    height: 32px;
+    padding: 5px 10px;
+    border-radius: var(--border-radius-base) var(--border-radius-base) 0 0;
+
+    .info-icon {
+      &.danger {
+        color: var(--ant-color-error);
+      }
+
+      &.warning {
+        color: var(--ant-color-warning);
+      }
+
+      &.transition {
+        color: var(--ant-geekblue-7);
+      }
+
+      &.success {
+        color: var(--ant-color-success);
+      }
+    }
+
+    .text {
+      font-weight: var(--font-weight-bold);
+    }
+  }
+}

src/components/alert-info/block.tsx

@@ -0,0 +1,92 @@
+import { WarningFilled } from '@ant-design/icons';
+import { Typography } from 'antd';
+import classNames from 'classnames';
+import React from 'react';
+import styled from 'styled-components';
+import OverlayScroller, { OverlayScrollerOptions } from '../overlay-scroller';
+import './block.less';
+interface AlertInfoProps {
+  type: Global.MessageType;
+  message: React.ReactNode;
+  rows?: number;
+  icon?: React.ReactNode;
+  ellipsis?: boolean;
+  style?: React.CSSProperties;
+  contentStyle?: React.CSSProperties;
+  title?: React.ReactNode;
+  maxHeight?: number;
+  overlayScrollerProps?: OverlayScrollerOptions;
+}
+
+const TitleWrapper = styled.div`
+  font-weight: 700;
+  color: var(--ant-color-text);
+`;
+
+const ContentWrapper = styled.div<{ $hasTitle: boolean }>`
+  word-break: break-word;
+  color: ${(props) =>
+    props.$hasTitle
+      ? 'var(--ant-color-text-secondary)'
+      : 'var(--ant-color-text)'};
+  font-weight: var(--font-weight-500);
+  white-space: pre-line;
+`;
+
+const AlertInfo: React.FC<AlertInfoProps> = (props) => {
+  const {
+    message,
+    type,
+    rows = 1,
+    ellipsis,
+    style,
+    title,
+    contentStyle,
+    icon,
+    maxHeight = 86,
+    overlayScrollerProps = {}
+  } = props;
+
+  return (
+    <>
+      {message ? (
+        <div
+          className={classNames('alert-info-block', type)}
+          style={{ ...style }}
+        >
+          <Typography.Paragraph
+            ellipsis={
+              ellipsis ?? {
+                rows: rows,
+                tooltip: message
+              }
+            }
+          >
+            <div className={classNames('title', type)}>
+              <span className={classNames('info-icon', type)}>
+                {icon ?? <WarningFilled />}
+              </span>
+            </div>
+            {title && (
+              <TitleWrapper className="title-text">{title}</TitleWrapper>
+            )}
+            <OverlayScroller
+              maxHeight={maxHeight}
+              style={{ ...contentStyle }}
+              {...overlayScrollerProps}
+            >
+              <ContentWrapper
+                $hasTitle={!!title}
+                className={classNames('content', type)}
+              >
+                {message}
+              </ContentWrapper>
+            </OverlayScroller>
+          </Typography.Paragraph>
+        </div>
+      ) : null}
+    </>
+  );
+};
+
+export default React.memo(AlertInfo);

src/components/alert-info/index.tsx

@@ -0,0 +1,47 @@
+import { WarningOutlined } from '@ant-design/icons';
+import { Typography } from 'antd';
+import React from 'react';
+
+interface AlertInfoProps {
+  type: 'danger' | 'warning';
+  message: string;
+  rows?: number;
+  icon?: React.ReactNode;
+  ellipsis?: boolean;
+  style?: React.CSSProperties;
+}
+
+const AlertInfo: React.FC<AlertInfoProps> = (props) => {
+  const { message, type, rows = 1, ellipsis, style } = props;
+
+  return (
+    <>
+      {message ? (
+        <Typography.Paragraph
+          type={type}
+          ellipsis={
+            ellipsis !== undefined
+              ? ellipsis
+              : {
+                  rows: rows,
+                  tooltip: message
+                }
+          }
+          style={{
+            textAlign: 'center',
+            padding: '2px 5px',
+            borderRadius: 'var(--border-radius-base)',
+            margin: 0,
+            backgroundColor: 'var(--ant-color-error-bg)',
+            ...style
+          }}
+        >
+          <WarningOutlined className="m-r-8" />
+          {message}
+        </Typography.Paragraph>
+      ) : null}
+    </>
+  );
+};
+
+export default React.memo(AlertInfo);

src/components/audio-animation/index.less

@@ -0,0 +1,19 @@
+.canvas-wrap {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  width: 100%;
+
+  canvas {
+    display: block;
+    width: 100%;
+    image-rendering: crisp-edges;
+  }
+}
+
+.scroller-wrapper {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}

src/components/audio-animation/index.tsx

@@ -0,0 +1,192 @@
+import useResizeObserver from '@/components/logs-viewer/use-size';
+import React, { useEffect, useState } from 'react';
+import './index.less';
+
+interface AudioAnimationProps {
+  width: number;
+  height: number;
+  maxWidth?: number;
+  scaleFactor?: number;
+  maxBarCount?: number;
+  amplitude?: number;
+  fixedHeight?: boolean;
+  analyserData: {
+    data: Uint8Array;
+    analyser: any;
+  };
+}
+
+const AudioAnimation: React.FC<AudioAnimationProps> = (props) => {
+  const {
+    scaleFactor = 1.2,
+    maxBarCount = 128,
+    amplitude = 40,
+    maxWidth,
+    fixedHeight = true,
+    analyserData,
+    width: initialWidth,
+    height: initialHeight
+  } = props;
+  const canvasRef = React.useRef<HTMLCanvasElement>(null);
+  const animationId = React.useRef<number>(0);
+  const isScaled = React.useRef<boolean>(false);
+  const oscillationOffset = React.useRef(0);
+  const direction = React.useRef(1);
+  const scrollerRef = React.useRef<HTMLDivElement>(null);
+  const [width, setWidth] = useState(initialWidth);
+  const [height, setHeight] = useState(initialHeight);
+  const containerRef = React.useRef<any>(null);
+
+  const size = useResizeObserver(scrollerRef);
+
+  const calculateJitter = (
+    i: number,
+    timestamp: number,
+    baseHeight: number,
+    minJitter: number,
+    jitterAmplitude: number
+  ) => {
+    //
+    const jitterFactor = Math.sin(timestamp / 200 + i) * 0.5 + 0.5;
+    const jitter =
+      minJitter +
+      jitterFactor * (jitterAmplitude - minJitter) * (baseHeight / maxBarCount);
+    return jitter;
+  };
+
+  const startAudioVisualization = () => {
+    if (!canvasRef.current || !analyserData.data?.length) return;
+
+    const canvas = canvasRef.current;
+    const canvasCtx = canvas.getContext('2d');
+    if (!canvasCtx) return;
+
+    const WIDTH = (canvas.width = width * 2);
+    const HEIGHT = (canvas.height = height * 2);
+
+    if (!isScaled.current) {
+      canvasCtx.scale(2, 2);
+      isScaled.current = true;
+    }
+
+    const barWidth = 4;
+    const barSpacing = 6;
+    const centerLine = Math.floor(HEIGHT / 2);
+
+    const jitterAmplitude = amplitude;
+    const minJitter = 10;
+
+    let lastFrameTime = 0;
+
+    const gradient = canvasCtx.createLinearGradient(0, 0, 0, HEIGHT);
+    gradient.addColorStop(0, '#007BFF');
+    gradient.addColorStop(1, '#0069DA');
+    canvasCtx.fillStyle = gradient;
+
+    const draw = (timestamp: number) => {
+      const elapsed = timestamp - lastFrameTime;
+      if (elapsed < 16) {
+        animationId.current = requestAnimationFrame(draw);
+        return;
+      }
+      lastFrameTime = timestamp;
+
+      analyserData.analyser?.current?.getByteFrequencyData(analyserData.data);
+      canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+
+      const barCount = Math.min(maxBarCount, analyserData.data.length);
+      const totalWidth = barCount * (barWidth + barSpacing) - barSpacing;
+      let x = WIDTH / 2 - totalWidth / 2 + oscillationOffset.current;
+
+      oscillationOffset.current += direction.current;
+      if (Math.abs(oscillationOffset.current) > 20) {
+        direction.current *= -1;
+      }
+
+      for (let i = 0; i < barCount; i++) {
+        const baseHeight = Math.floor(analyserData.data[i] / 2) * scaleFactor;
+
+        const jitter = calculateJitter(
+          i,
+          timestamp,
+          baseHeight,
+          minJitter,
+          jitterAmplitude
+        );
+        const barHeight = baseHeight + Math.round(jitter);
+
+        const topY = Math.round(centerLine - barHeight / 2);
+        const bottomY = Math.round(centerLine + barHeight / 2);
+
+        canvasCtx.beginPath();
+        canvasCtx.moveTo(x, bottomY);
+        canvasCtx.lineTo(x, topY + 2);
+        canvasCtx.arcTo(x + barWidth, topY + 2, x + barWidth, bottomY, 2);
+        canvasCtx.lineTo(x + barWidth, bottomY);
+        canvasCtx.closePath();
+        canvasCtx.fill();
+
+        x += barWidth + barSpacing;
+      }
+
+      animationId.current = requestAnimationFrame(draw);
+    };
+
+    draw(performance.now());
+  };
+
+  React.useEffect(() => {
+    if (size) {
+      if (maxWidth) {
+        setWidth(Math.min(size.width, maxWidth));
+      } else {
+        setWidth(size?.width || 0);
+      }
+      if (!fixedHeight) {
+        setHeight(size?.height || 0);
+      }
+    }
+  }, [size, maxWidth]);
+
+  useEffect(() => {
+    if (!canvasRef.current) return;
+    const clearCanvas = () => {
+      if (canvasRef.current) {
+        const ctx = canvasRef.current.getContext('2d');
+        if (ctx) ctx.clearRect(0, 0, width * 2, height * 2);
+      }
+    };
+
+    if (!analyserData.data?.length || !analyserData.analyser?.current) {
+      clearCanvas();
+      cancelAnimationFrame(animationId.current);
+      animationId.current = 0;
+      return;
+    }
+
+    startAudioVisualization();
+
+    return () => {
+      cancelAnimationFrame(animationId.current);
+      clearCanvas();
+    };
+  }, [analyserData, width, height]);
+
+  return (
+    <div
+      className="scroller-wrapper"
+      ref={scrollerRef}
+      style={{ width: '100%', height: '100%' }}
+    >
+      <div
+        ref={containerRef}
+        className="canvas-wrap"
+        style={{ width: '100%', height: '100%' }}
+      >
+        <canvas ref={canvasRef} style={{ display: 'block' }}></canvas>
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(AudioAnimation);

src/components/audio-player/audio-element.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const AudioWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+`;
+
+const AudioElement: React.FC<any> = (props) => {
+  return (
+    <div>
+      <AudioWrapper>
+        <audio {...props} controls></audio>
+      </AudioWrapper>
+    </div>
+  );
+};
+
+export default AudioElement;

src/components/audio-player/config/type.ts

@@ -0,0 +1,39 @@
+export type AudioEvent =
+  | 'play'
+  | 'playing'
+  | 'pause'
+  | 'timeupdate'
+  | 'ended'
+  | 'loadedmetadata'
+  | 'audioprocess'
+  | 'canplay'
+  | 'ended'
+  | 'loadeddata'
+  | 'seeked'
+  | 'seeking'
+  | 'volumechange';
+
+export interface AudioPlayerProps {
+  controls?: boolean;
+  autoplay?: boolean;
+  url: string;
+  speed?: number;
+  ref?: any;
+  height?: number;
+  width?: number;
+  duration?: number;
+  onPlay?: () => void;
+  onPlaying?: () => void;
+  onPause?: () => void;
+  onTimeUpdate?: () => void;
+  onEnded?: () => void;
+  onLoadedMetadata?: (duration: number) => void;
+  onAudioProcess?: (current: number) => void;
+  onCanPlay?: () => void;
+  onLoadedData?: () => void;
+  onSeeked?: () => void;
+  onSeeking?: () => void;
+  onVolumeChange?: () => void;
+  onReady?: (duration: number) => void;
+  onAnalyse?: (analyseData: any, frequencyBinCount: any) => void;
+}

src/components/audio-player/index.less

@@ -0,0 +1,104 @@
+.player-wrap {
+  width: 100%;
+  display: flex;
+  // background-color: var(--ant-color-fill-quaternary);
+  border-radius: 6px;
+
+  .player-ui {
+    padding: 8px 16px;
+    flex: 1;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  .controls {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .play-btn {
+    margin-inline: 30px;
+    height: 22px;
+    width: 22px;
+    overflow: hidden;
+
+    .ant-btn {
+      height: 22px;
+      width: 22px;
+    }
+  }
+
+  .backward,
+  .forward {
+    background: none !important;
+  }
+
+  .slider {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .slider-inner {
+      flex: 1;
+    }
+  }
+
+  .play-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex: 1;
+  }
+
+  .time {
+    width: 52px;
+    text-align: right;
+
+    &.current {
+      text-align: left;
+    }
+  }
+
+  .progress-bar {
+    margin-inline: 10px;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+
+    .slider {
+      width: 100%;
+    }
+
+    .file-name {
+      margin-bottom: 6px;
+      line-height: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      align-self: center;
+      justify-content: center;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+
+    .ant-slider-horizontal {
+      margin-block: 5px;
+    }
+  }
+
+  .speaker {
+    margin-left: 10px;
+    position: relative;
+
+    .volume-slider {
+      position: absolute;
+      bottom: 30px;
+    }
+  }
+}

src/components/audio-player/index.tsx

@@ -0,0 +1,311 @@
+import { formatTime } from '@/utils/index';
+import {
+  FastBackwardOutlined,
+  FastForwardOutlined,
+  PauseCircleFilled,
+  PlayCircleFilled
+} from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Button, Slider, Tooltip } from 'antd';
+import { round } from 'lodash';
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle
+} from 'react';
+import './index.less';
+
+interface AudioPlayerProps {
+  autoplay?: boolean;
+  url: string;
+  speed?: number;
+  ref?: any;
+  name: string;
+  height?: number;
+  width?: number;
+  duration?: number;
+  extra?: React.ReactNode;
+}
+
+const speedOptions = [
+  { label: '1x', value: 1 },
+  { label: '2x', value: 2 },
+  { label: '3x', value: 3 },
+  { label: '4x', value: 4 }
+];
+
+const speedConfig = {
+  min: 0.5,
+  max: 2,
+  step: 0.25
+};
+
+const AudioPlayer: React.FC<AudioPlayerProps> = forwardRef((props, ref) => {
+  const intl = useIntl();
+  const { autoplay = false, speed: defaultSpeed = 1, extra } = props;
+  const audioRef = React.useRef<HTMLAudioElement>(null);
+  const [audioState, setAudioState] = React.useState<{
+    currentTime: number;
+    duration: number;
+  }>({
+    currentTime: 0,
+    duration: 0
+  });
+  const [playOn, setPlayOn] = React.useState<boolean>(false);
+  const [speakerOn, setSpeakerOn] = React.useState<boolean>(false);
+  const [volume, setVolume] = React.useState<number>(1);
+  const [speed, setSpeed] = React.useState<number>(defaultSpeed);
+  const timer = React.useRef<any>(null);
+
+  useImperativeHandle(ref, () => ({
+    play: () => {
+      audioRef.current?.play();
+    },
+    pause: () => {
+      audioRef.current?.pause();
+    }
+  }));
+  const handleShowVolume = useCallback(() => {
+    setSpeakerOn(!speakerOn);
+  }, [speakerOn]);
+
+  const handleSeepdChange = useCallback((value: number | string) => {
+    setSpeed(value as number);
+    audioRef.current!.playbackRate = value as number;
+  }, []);
+
+  const handleAudioOnPlay = useCallback(() => {
+    console.log('audio play');
+    timer.current = setInterval(() => {
+      setAudioState((prestate) => {
+        return {
+          currentTime: Math.ceil(audioRef.current?.currentTime || 0),
+          duration:
+            prestate.duration || Math.ceil(audioRef.current?.duration || 0)
+        };
+      });
+
+      if (audioRef.current?.paused || audioRef.current?.ended) {
+        clearInterval(timer.current);
+        setPlayOn(false);
+        setAudioState((prestate: any) => {
+          return {
+            currentTime: audioRef.current?.ended ? 0 : prestate.currentTime,
+            duration: prestate.duration
+          };
+        });
+      }
+    }, 500);
+  }, []);
+
+  const handlePlay = useCallback(() => {
+    setPlayOn(!playOn);
+    if (playOn) {
+      audioRef.current?.pause();
+    } else {
+      audioRef.current?.play();
+    }
+  }, [playOn]);
+
+  const handleFormatVolume = (val?: number) => {
+    if (val === undefined) {
+      return `${round(volume * 100)}%`;
+    }
+    return `${round(val * 100)}%`;
+  };
+
+  const handleVolumeChange = useCallback((value: number) => {
+    audioRef.current!.volume = round(value, 2);
+    setVolume(round(value, 2));
+  }, []);
+
+  const initPlayerConfig = () => {
+    if (audioRef.current) {
+      audioRef.current!.volume = volume;
+      audioRef.current!.playbackRate = speed;
+    }
+  };
+
+  const handleLoadedMetadata = useCallback(
+    (data: any) => {
+      const duration = Math.ceil(audioRef.current?.duration || 0);
+      setAudioState({
+        currentTime: 0,
+        duration:
+          duration && duration !== Infinity ? duration : props.duration || 0
+      });
+      setPlayOn(autoplay);
+    },
+    [autoplay, props.duration]
+  );
+
+  const handleCurrentChange = useCallback((val: number) => {
+    audioRef.current!.currentTime = val;
+    setAudioState((prestate) => {
+      return {
+        currentTime: val,
+        duration: prestate.duration
+      };
+    });
+  }, []);
+
+  const handleReduceSpeed = () => {
+    setSpeed((pre) => {
+      if (pre - speedConfig.step < speedConfig.min) {
+        return speedConfig.min;
+      }
+      const next = pre - speedConfig.step;
+      audioRef.current!.playbackRate = next;
+      return next;
+    });
+  };
+
+  const handleAddSpeed = () => {
+    setSpeed((pre) => {
+      if (pre + speedConfig.step > speedConfig.max) {
+        return speedConfig.max;
+      }
+      const next = pre + speedConfig.step;
+      audioRef.current!.playbackRate = next;
+      return next;
+    });
+  };
+
+  const handleOnLoad = (e: any) => {
+    console.log('onload', e);
+  };
+
+  const onDownload = useCallback(() => {
+    const url = props.url || '';
+    const filename = props.name;
+
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+  }, [props.url, props.name]);
+
+  useEffect(() => {
+    if (audioRef.current) {
+      initPlayerConfig();
+    }
+  }, [audioRef.current]);
+
+  useEffect(() => {
+    return () => {
+      clearInterval(timer.current);
+    };
+  }, []);
+
+  return (
+    <div className="player-wrap" style={{ width: props.width || '100%' }}>
+      <div className="player-ui">
+        <div className="play-content">
+          <div className="progress-bar">
+            <span className="file-name">{props.name}</span>
+            <div className="slider">
+              {/* <span className="time current">
+                {' '}
+                {formatTime(audioState.currentTime)}
+              </span> */}
+              <div className="slider-inner">
+                <Slider
+                  tooltip={{ open: false }}
+                  min={0}
+                  step={1}
+                  styles={{
+                    rail: {
+                      // height: 6
+                    }
+                  }}
+                  max={audioState.duration}
+                  value={audioState.currentTime}
+                  onChange={handleCurrentChange}
+                />
+              </div>
+              {/* <span className="time">{formatTime(audioState.duration)}</span> */}
+            </div>
+            <div className="controls">
+              <div className="audio-control flex-center">
+                <span className="time current">
+                  {' '}
+                  {formatTime(audioState.currentTime)}
+                </span>
+                <Tooltip
+                  title={intl.formatMessage({
+                    id: 'playground.audio.button.slow'
+                  })}
+                >
+                  <Button
+                    type="text"
+                    size="small"
+                    className="backward"
+                    disabled={
+                      speed === speedConfig.min || speed < speedConfig.min
+                    }
+                    onClick={handleReduceSpeed}
+                  >
+                    <FastBackwardOutlined className="font-size-20" />
+                  </Button>
+                </Tooltip>
+                <span className="play-btn">
+                  <Button
+                    size="middle"
+                    type="text"
+                    onClick={handlePlay}
+                    disabled={!audioState?.duration}
+                    icon={
+                      !playOn ? (
+                        <PlayCircleFilled
+                          style={{ fontSize: '22px' }}
+                        ></PlayCircleFilled>
+                      ) : (
+                        <PauseCircleFilled
+                          style={{ fontSize: '22px' }}
+                        ></PauseCircleFilled>
+                      )
+                    }
+                  ></Button>
+                </span>
+                <Tooltip
+                  title={intl.formatMessage({
+                    id: 'playground.audio.button.fast'
+                  })}
+                >
+                  <Button
+                    type="text"
+                    size="small"
+                    className="forward"
+                    disabled={
+                      speed === speedConfig.max || speed > speedConfig.max
+                    }
+                    onClick={handleAddSpeed}
+                  >
+                    <FastForwardOutlined className="font-size-20" />
+                  </Button>
+                </Tooltip>
+                <span className="time">{formatTime(audioState.duration)}</span>
+              </div>
+              {extra}
+            </div>
+          </div>
+        </div>
+      </div>
+      <audio
+        crossOrigin="anonymous"
+        autoPlay={autoplay}
+        src={props.url}
+        ref={audioRef}
+        preload="metadata"
+        style={{ opacity: 0, position: 'absolute', left: '-9999px' }}
+        onPlay={handleAudioOnPlay}
+        onLoadedMetadata={handleLoadedMetadata}
+      ></audio>
+    </div>
+  );
+});
+
+export default React.memo(AudioPlayer);

src/components/audio-player/raw-audio-player.tsx

@@ -0,0 +1,165 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import { AudioPlayerProps } from './config/type';
+
+const RawAudioPlayer: React.FC<AudioPlayerProps> = forwardRef((props, ref) => {
+  const { autoplay = false } = props;
+  const audioRef = React.useRef<HTMLAudioElement>(null);
+
+  // =================== audio context ======================
+  const audioContext = useRef<any>(null);
+  const analyser = useRef<any>(null);
+  const dataArray = useRef<any>(null);
+  // ========================================================
+
+  const initAudioContext = useCallback(() => {
+    audioContext.current = new (window.AudioContext ||
+      window.webkitAudioContext)();
+
+    analyser.current = audioContext.current.createAnalyser();
+    analyser.current.fftSize = 512;
+    dataArray.current = new Uint8Array(analyser.current.frequencyBinCount);
+  }, []);
+
+  const generateVisualData = useCallback(() => {
+    const source = audioContext.current.createMediaElementSource(
+      audioRef.current
+    );
+    source.connect(analyser.current);
+    analyser.current.connect(audioContext.current.destination);
+  }, []);
+
+  const initEnvents = () => {
+    if (!audioRef.current) {
+      return;
+    }
+
+    audioRef.current.addEventListener('complete', () => {});
+
+    audioRef.current.addEventListener('play', () => {
+      props.onAnalyse?.(dataArray.current, analyser);
+      props.onPlay?.();
+    });
+
+    audioRef.current.addEventListener('pause', () => {
+      props.onAnalyse?.(dataArray.current, analyser);
+      props.onPause?.();
+    });
+
+    audioRef.current.addEventListener('timeupdate', () => {
+      props.onTimeUpdate?.();
+    });
+
+    audioRef.current.addEventListener('ended', () => {
+      props.onEnded?.();
+    });
+    // add all other events
+
+    audioRef.current.addEventListener('canplay', () => {
+      props.onCanPlay?.();
+    });
+
+    audioRef.current.addEventListener('loadeddata', () => {
+      initEnvents();
+      if (!audioContext.current) {
+        initAudioContext();
+        generateVisualData();
+      }
+      props.onLoadedData?.();
+    });
+
+    audioRef.current.addEventListener('seeked', () => {
+      props.onSeeked?.();
+    });
+
+    audioRef.current.addEventListener('seeking', () => {
+      props.onSeeking?.();
+    });
+
+    audioRef.current.addEventListener('volumechange', () => {
+      props.onVolumeChange?.();
+    });
+
+    audioRef.current.addEventListener('audioprocess', () => {
+      const current = audioRef.current?.currentTime || 0;
+      props.onAudioProcess?.(current);
+    });
+
+    audioRef.current.addEventListener('playing', () => {
+      props.onPlaying?.();
+    });
+
+    audioRef.current.addEventListener('loadedmetadata', () => {
+      const duration = audioRef.current?.duration || 0;
+      props.onLoadedMetadata?.(duration);
+      props.onReady?.(duration);
+    });
+
+    audioRef.current.addEventListener('ended', () => {
+      props.onEnded?.();
+    });
+
+    audioRef.current.addEventListener('loadeddata', () => {
+      props.onLoadedData?.();
+    });
+  };
+
+  useImperativeHandle(ref, () => ({
+    play: () => {
+      audioRef.current?.play();
+    },
+    pause: () => {
+      audioRef.current?.pause();
+    }
+  }));
+
+  useEffect(() => {
+    if (audioRef.current) {
+      console.log('audioRef.current', audioRef.current, props.url);
+      initEnvents();
+    }
+    return () => {
+      if (audioContext.current) {
+        audioContext.current.close();
+      }
+      // remove all events
+
+      audioRef.current?.removeEventListener('play', () => {});
+      audioRef.current?.removeEventListener('pause', () => {});
+      audioRef.current?.removeEventListener('timeupdate', () => {});
+      audioRef.current?.removeEventListener('ended', () => {});
+      audioRef.current?.removeEventListener('canplay', () => {});
+      audioRef.current?.removeEventListener('loadeddata', () => {});
+      audioRef.current?.removeEventListener('seeked', () => {});
+      audioRef.current?.removeEventListener('seeking', () => {});
+      audioRef.current?.removeEventListener('volumechange', () => {});
+      audioRef.current?.removeEventListener('audioprocess', () => {});
+      audioRef.current?.removeEventListener('playing', () => {});
+      audioRef.current?.removeEventListener('loadedmetadata', () => {});
+      audioRef.current?.removeEventListener('ended', () => {});
+      audioRef.current?.removeEventListener('loadeddata', () => {});
+    };
+  }, [audioRef.current]);
+
+  return (
+    <audio
+      controls
+      autoPlay={autoplay}
+      src={props.url}
+      ref={audioRef}
+      style={{
+        position: 'absolute',
+        left: '-9999px',
+        opacity: 0
+      }}
+      preload="metadata"
+    ></audio>
+  );
+});
+
+export default RawAudioPlayer;

src/components/audio-player/simple-audio.tsx

@@ -0,0 +1,406 @@
+import { formatTime } from '@/utils/index';
+import { DeleteOutlined, DownloadOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Button, Dropdown, Slider, type MenuProps } from 'antd';
+import { createStyles } from 'antd-style';
+import { round } from 'lodash';
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo
+} from 'react';
+import styled from 'styled-components';
+import AutoTooltip from '../auto-tooltip';
+import IconFont from '../icon-font';
+
+type ActionItem = 'download' | 'delete' | 'speed';
+
+interface AudioPlayerProps {
+  autoplay?: boolean;
+  url: string;
+  speed?: number;
+  ref?: any;
+  name: string;
+  height?: number;
+  width?: number;
+  duration?: number;
+  actions?: ActionItem[];
+  onDelete?: () => void;
+}
+
+const SliderWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  .ant-slider {
+    flex: 1;
+  }
+  .time {
+    color: var(--ant-color-text-tertiary);
+  }
+`;
+
+const useStyles = createStyles(({ css, token }) => {
+  // @ts-ignore
+  const isDarkMode = token.darkMode as boolean;
+  return {
+    wrapper: css`
+      position: relative;
+      min-width: 360px;
+      height: 54px;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      padding: 8px 10px;
+      background-color: ${isDarkMode
+        ? 'var(--ant-color-fill-secondary)'
+        : '#F1F3F4'};
+      border-radius: 28px;
+      .inner {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        flex: 1;
+        gap: 8px;
+        .slider {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          flex: 1;
+          .ant-slider {
+            margin: 0;
+          }
+          &:hover {
+            .ant-slider-handle {
+              opacity: 1;
+              transition: opacity 0.3s ease-in-out;
+            }
+          }
+          &:focus-within {
+            .ant-slider-handle {
+              opacity: 1;
+            }
+          }
+        }
+
+        .ant-slider-handle {
+          opacity: 0;
+          &::before {
+            background-color: var(--ant-color-bg-spotlight);
+            border-radius: 50%;
+          }
+          &::after {
+            display: none;
+          }
+        }
+      }
+    `
+  };
+});
+
+const sliderStyles = {
+  rail: {
+    borderRadius: '4px',
+    backgroundColor: 'var(--ant-color-fill-secondary)'
+  },
+  track: {
+    borderRadius: '4px',
+    backgroundColor: 'var(--ant-color-bg-spotlight)'
+  }
+};
+
+const speedOptions = [
+  { label: '1x', value: 1 },
+  { label: '2x', value: 2 },
+  { label: '3x', value: 3 },
+  { label: '4x', value: 4 }
+];
+
+const speedConfig = {
+  min: 0.5,
+  max: 2,
+  step: 0.25
+};
+
+const AudioPlayer: React.FC<AudioPlayerProps> = forwardRef((props, ref) => {
+  const intl = useIntl();
+  const { styles } = useStyles();
+  const {
+    autoplay = false,
+    speed: defaultSpeed = 1,
+    actions = ['delete'],
+    name,
+    onDelete
+  } = props;
+  const audioRef = React.useRef<HTMLAudioElement>(null);
+  const [audioState, setAudioState] = React.useState<{
+    currentTime: number;
+    duration: number;
+  }>({
+    currentTime: 0,
+    duration: 0
+  });
+  console.log('audioState', name);
+  const [playOn, setPlayOn] = React.useState<boolean>(false);
+  const [speakerOn, setSpeakerOn] = React.useState<boolean>(false);
+  const [volume, setVolume] = React.useState<number>(1);
+  const [speed, setSpeed] = React.useState<number>(defaultSpeed);
+  const timer = React.useRef<any>(null);
+
+  useImperativeHandle(ref, () => ({
+    play: () => {
+      audioRef.current?.play();
+    },
+    pause: () => {
+      audioRef.current?.pause();
+    }
+  }));
+  const handleShowVolume = useCallback(() => {
+    setSpeakerOn(!speakerOn);
+  }, [speakerOn]);
+
+  const handleSeepdChange = useCallback((value: number | string) => {
+    setSpeed(value as number);
+    audioRef.current!.playbackRate = value as number;
+  }, []);
+
+  const handleAudioOnPlay = useCallback(() => {
+    timer.current = setInterval(() => {
+      setAudioState((prestate) => {
+        return {
+          currentTime: Math.ceil(audioRef.current?.currentTime || 0),
+          duration:
+            prestate.duration || Math.ceil(audioRef.current?.duration || 0)
+        };
+      });
+
+      if (audioRef.current?.paused || audioRef.current?.ended) {
+        clearInterval(timer.current);
+        setPlayOn(false);
+        setAudioState((prestate: any) => {
+          return {
+            currentTime: audioRef.current?.ended ? 0 : prestate.currentTime,
+            duration: prestate.duration
+          };
+        });
+      }
+    }, 500);
+  }, []);
+
+  const handlePlay = useCallback(() => {
+    setPlayOn(!playOn);
+    if (playOn) {
+      audioRef.current?.pause();
+    } else {
+      audioRef.current?.play();
+    }
+  }, [playOn]);
+
+  const handleFormatVolume = (val?: number) => {
+    if (val === undefined) {
+      return `${round(volume * 100)}%`;
+    }
+    return `${round(val * 100)}%`;
+  };
+
+  const handleVolumeChange = useCallback((value: number) => {
+    audioRef.current!.volume = round(value, 2);
+    setVolume(round(value, 2));
+  }, []);
+
+  const initPlayerConfig = () => {
+    if (audioRef.current) {
+      audioRef.current!.volume = volume;
+      audioRef.current!.playbackRate = speed;
+    }
+  };
+
+  const handleLoadedMetadata = useCallback(
+    (data: any) => {
+      const duration = Math.ceil(audioRef.current?.duration || 0);
+      setAudioState({
+        currentTime: 0,
+        duration:
+          duration && duration !== Infinity ? duration : props.duration || 0
+      });
+      setPlayOn(autoplay);
+    },
+    [autoplay, props.duration]
+  );
+
+  const handleCurrentChange = useCallback((val: number) => {
+    audioRef.current!.currentTime = val;
+    setAudioState((prestate) => {
+      return {
+        currentTime: val,
+        duration: prestate.duration
+      };
+    });
+  }, []);
+
+  const handleReduceSpeed = () => {
+    setSpeed((pre) => {
+      if (pre - speedConfig.step < speedConfig.min) {
+        return speedConfig.min;
+      }
+      const next = pre - speedConfig.step;
+      audioRef.current!.playbackRate = next;
+      return next;
+    });
+  };
+
+  const handleAddSpeed = () => {
+    setSpeed((pre) => {
+      if (pre + speedConfig.step > speedConfig.max) {
+        return speedConfig.max;
+      }
+      const next = pre + speedConfig.step;
+      audioRef.current!.playbackRate = next;
+      return next;
+    });
+  };
+
+  const handleOnLoad = (e: any) => {
+    console.log('onload', e);
+  };
+
+  const onDownload = useCallback(() => {
+    const url = props.url || '';
+    const filename = props.name;
+
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename || 'audio.mp3'; // Default filename
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+  }, [props.url, props.name]);
+
+  const items: MenuProps['items'] = useMemo(() => {
+    return [
+      {
+        key: 'download',
+        label: intl.formatMessage({ id: 'common.button.download' }),
+        icon: <DownloadOutlined />,
+        onClick: onDownload
+      },
+      {
+        key: 'speed',
+        label: intl.formatMessage({ id: 'playground.params.speed' }),
+        icon: <IconFont type="icon-play-speed"></IconFont>,
+        children: speedOptions.map((item) => ({
+          key: item.value,
+          label: item.label,
+          onClick: () => handleSeepdChange(item.value)
+        }))
+      },
+      {
+        key: 'delete',
+        label: intl.formatMessage({ id: 'common.button.delete' }),
+        icon: <DeleteOutlined />,
+        danger: true,
+        onClick: () => {
+          if (audioRef.current) {
+            audioRef.current.pause();
+            audioRef.current.src = '';
+            audioRef.current.load();
+          }
+          setAudioState({ currentTime: 0, duration: 0 });
+          setPlayOn(false);
+          onDelete?.();
+        }
+      }
+    ].filter((item) => actions.includes(item.key as ActionItem));
+  }, [actions, intl, onDownload, onDelete, handleSeepdChange]);
+
+  useEffect(() => {
+    if (audioRef.current) {
+      initPlayerConfig();
+    }
+  }, [audioRef.current]);
+
+  useEffect(() => {
+    return () => {
+      clearInterval(timer.current);
+    };
+  }, []);
+
+  return (
+    <div
+      className={styles.wrapper}
+      style={{
+        width: props.width || '100%',
+        height: props.height || '60px',
+        position: 'relative'
+      }}
+    >
+      <div className="inner">
+        <Button
+          size="middle"
+          type="text"
+          onClick={handlePlay}
+          shape="circle"
+          disabled={!audioState?.duration}
+          icon={
+            !playOn ? (
+              <IconFont
+                type="icon-playcircle-fill"
+                style={{ fontSize: '24px' }}
+              ></IconFont>
+            ) : (
+              <IconFont
+                type="icon-stopcircle-fill"
+                style={{ fontSize: '24px' }}
+              ></IconFont>
+            )
+          }
+        ></Button>
+
+        <div className="slider">
+          <div className="flex-center flex-between file-name">
+            <AutoTooltip ghost maxWidth={200}>
+              <span>{name}</span>
+            </AutoTooltip>
+          </div>
+          <SliderWrapper>
+            <span className="time">{formatTime(audioState.currentTime)}</span>
+            <Slider
+              tooltip={{ open: false }}
+              min={0}
+              step={1}
+              styles={sliderStyles}
+              max={audioState.duration}
+              value={audioState.currentTime}
+              onChange={handleCurrentChange}
+            />
+          </SliderWrapper>
+        </div>
+        <Dropdown menu={{ items }} trigger={['click']}>
+          <Button
+            icon={<IconFont type="icon-more"></IconFont>}
+            type="text"
+            size="middle"
+            shape="circle"
+          ></Button>
+        </Dropdown>
+      </div>
+      <audio
+        crossOrigin="anonymous"
+        autoPlay={autoplay}
+        src={props.url}
+        ref={audioRef}
+        preload="metadata"
+        style={{ opacity: 0, position: 'absolute', left: '-9999px' }}
+        onPlay={handleAudioOnPlay}
+        onLoadedMetadata={handleLoadedMetadata}
+      ></audio>
+    </div>
+  );
+});
+
+export default React.memo(AudioPlayer);

src/components/auto-image/index.less

@@ -0,0 +1,21 @@
+.toolbar-wrapper {
+  padding: 0 24px;
+  color: rgba(255, 255, 255, 65%);
+  font-size: 16px;
+  background-color: rgba(0, 0, 0, 10%);
+  border-radius: 100px;
+}
+
+.toolbar-wrapper .anticon {
+  padding: 12px;
+  cursor: pointer;
+}
+
+.toolbar-wrapper .anticon[disabled] {
+  cursor: not-allowed;
+  opacity: 0.3;
+}
+
+.toolbar-wrapper .anticon:hover {
+  opacity: 0.3;
+}

src/components/auto-image/index.tsx

@@ -0,0 +1,130 @@
+import fallbackImg from '@/assets/images/img_fallback.png';
+import {
+  DownloadOutlined,
+  EyeOutlined,
+  RotateLeftOutlined,
+  RotateRightOutlined,
+  SwapOutlined,
+  UndoOutlined,
+  ZoomInOutlined,
+  ZoomOutOutlined
+} from '@ant-design/icons';
+import { Image as AntImage, ImageProps, Space } from 'antd';
+import { round } from 'lodash';
+import React, { useCallback, useEffect, useState } from 'react';
+import './index.less';
+
+const AutoImage: React.FC<
+  ImageProps & {
+    height: number | string;
+    width?: number | string;
+    autoSize?: boolean;
+    preview?: boolean;
+    onLoad?: () => void;
+  }
+> = (props) => {
+  const { height = 100, width: w, autoSize, preview = true, ...rest } = props;
+  const [width, setWidth] = useState(w || 0);
+  const [isError, setIsError] = useState(false);
+
+  const getImgRatio = useCallback((url: string): Promise<{ ratio: number }> => {
+    return new Promise((resolve) => {
+      const img = new Image();
+      img.onload = () => {
+        resolve({ ratio: round(img.width / img.height, 2) });
+      };
+      img.onerror = () => {
+        resolve({ ratio: 1 });
+      };
+      img.src = url;
+    });
+  }, []);
+
+  const handleOnLoad = useCallback(async () => {
+    if (autoSize) {
+      return;
+    }
+    const { ratio } = await getImgRatio(props.src || '');
+
+    if (typeof height === 'number') {
+      setWidth(height * ratio);
+    } else {
+      throw new Error('Height must be a number');
+    }
+  }, [getImgRatio, height, props.src]);
+
+  const onDownload = useCallback(() => {
+    const url = props.src || '';
+    const filename = Date.now() + '';
+
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+  }, [props.src]);
+
+  const handleImgLoad = useCallback(() => {
+    props.onLoad?.();
+    setIsError(false);
+  }, [props.onLoad]);
+
+  const handleOnError = useCallback(() => {
+    setIsError(true);
+  }, []);
+
+  useEffect(() => {
+    handleOnLoad();
+  }, [handleOnLoad]);
+
+  useEffect(() => {
+    setWidth(w || 0);
+  }, [w]);
+
+  return (
+    <AntImage
+      {...rest}
+      height={isError ? 'auto' : height}
+      width={isError ? '100%' : width}
+      onError={handleOnError}
+      onLoad={handleImgLoad}
+      fallback={fallbackImg}
+      crossOrigin="anonymous"
+      preview={
+        preview &&
+        !isError && {
+          mask: <EyeOutlined />,
+          toolbarRender: (
+            _,
+            {
+              transform: { scale },
+              actions: {
+                onFlipY,
+                onFlipX,
+                onRotateLeft,
+                onRotateRight,
+                onZoomOut,
+                onZoomIn,
+                onReset
+              }
+            }
+          ) => (
+            <Space size={12} className="toolbar-wrapper">
+              <DownloadOutlined onClick={onDownload} />
+              <SwapOutlined rotate={90} onClick={onFlipY} />
+              <SwapOutlined onClick={onFlipX} />
+              <RotateLeftOutlined onClick={onRotateLeft} />
+              <RotateRightOutlined onClick={onRotateRight} />
+              <ZoomOutOutlined disabled={scale === 1} onClick={onZoomOut} />
+              <ZoomInOutlined disabled={scale === 50} onClick={onZoomIn} />
+              <UndoOutlined onClick={onReset} />
+            </Space>
+          )
+        }
+      }
+    />
+  );
+};
+
+export default React.memo(AutoImage);

src/components/auto-image/progress-line.less

@@ -0,0 +1,44 @@
+.img-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.img-wrapper .auto-image {
+  display: block;
+}
+
+.img-wrapper .progress-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.progress-square {
+  width: 100%;
+  height: 100%;
+  transform: rotate(0deg);
+}
+
+.progress-square-bg {
+  fill: none;
+}
+
+.progress-square-fg {
+  fill: none;
+  stroke-linecap: square;
+  stroke-dasharray: 400;
+  stroke-dashoffset: 400;
+  transition: stroke-dashoffset 0.3s ease;
+}
+
+.progress-text {
+  position: absolute;
+  color: black;
+  font-size: 20px;
+  font-weight: bold;
+}

src/components/auto-image/single-image.less

@@ -0,0 +1,144 @@
+.thumb-img {
+  position: relative;
+  display: flex;
+  max-width: 100%;
+  max-height: 100%;
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--border-radius-base);
+  overflow: hidden;
+
+  .label {
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    height: 20px;
+    line-height: 20px;
+    border-radius: 12px;
+    padding: 0 8px;
+    background-color: var(--ant-geekblue-1);
+    z-index: 10;
+    transform: scale(0.9);
+  }
+
+  .progress-wrapper {
+    position: absolute;
+    bottom: 20px;
+    left: 20px;
+    right: 20px;
+  }
+
+  .small-progress-wrap {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(0, 0, 0, 30%);
+
+    .ant-progress-text {
+      color: var(--color-white-secondary);
+    }
+  }
+
+  .img {
+    display: flex;
+    width: auto;
+    height: auto;
+    max-width: 100%;
+    max-height: 100%;
+    overflow: hidden;
+    border-radius: var(--border-radius-base);
+    cursor: pointer;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .del {
+    position: absolute;
+    top: -4px;
+    right: -2px;
+    font-size: var(--font-size-middle);
+    cursor: pointer;
+    background-color: var(--color-white-1);
+    display: none;
+    border-radius: 50%;
+    height: 16px;
+    width: 16px;
+    overflow: hidden;
+    pointer-events: all;
+  }
+
+  &:hover {
+    .ant-image .ant-image-mask {
+      opacity: 1;
+      transition: opacity var(--ant-motion-duration-slow);
+    }
+
+    .del {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}
+
+.single-image {
+  // height: 100%;
+  width: inherit;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  border-radius: var(--border-radius-base);
+
+  &.loading {
+    width: 100%;
+    height: 100%;
+  }
+
+  &.auto-bg-color {
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      filter: blur(100px);
+      backdrop-filter: blur(100px);
+      z-index: 5;
+    }
+
+    .thumb-img {
+      position: relative;
+      z-index: 10;
+      border-radius: 0;
+
+      .img {
+        border-radius: 0;
+      }
+    }
+
+    .ant-image {
+      border-radius: 0;
+    }
+
+    .mask {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      bottom: 0;
+      right: 0;
+      z-index: 1;
+    }
+  }
+}

src/components/auto-image/single-image.tsx

@@ -0,0 +1,199 @@
+import { CloseCircleOutlined } from '@ant-design/icons';
+import { Progress, ProgressProps } from 'antd';
+import classNames from 'classnames';
+import { round } from 'lodash';
+import ResizeObserver from 'rc-resize-observer';
+import React, { useCallback } from 'react';
+import AutoImage from './index';
+import './single-image.less';
+interface SingleImageProps {
+  loading?: boolean;
+  width?: number;
+  height?: number;
+  progress?: number;
+  maxHeight?: number;
+  maxWidth?: number;
+  dataUrl: string;
+  label?: React.ReactNode;
+  uid: number;
+  preview?: boolean;
+  autoSize?: boolean;
+  onDelete: (uid: number) => void;
+  onClick?: (item: any) => void;
+  autoBgColor?: boolean;
+  editable?: boolean;
+  style?: React.CSSProperties;
+  loadingSize?: ProgressProps['size'];
+  progressType?: 'line' | 'circle' | 'dashboard';
+  progressColor?: string;
+  progressWidth?: number;
+}
+
+const SingleImage: React.FC<SingleImageProps> = (props) => {
+  const {
+    editable,
+    onDelete: handleOnDelete,
+    onClick,
+    autoSize,
+    uid,
+    loading,
+    width,
+    height,
+    progress,
+    maxHeight,
+    maxWidth,
+    dataUrl = '',
+    label,
+    style,
+    autoBgColor,
+    preview = true,
+    loadingSize = 'default'
+  } = props;
+
+  const imgWrapper = React.useRef<HTMLSpanElement>(null);
+  const [imgSize, setImgSize] = React.useState({
+    width: width,
+    height: height
+  });
+
+  const thumImgWrapStyle = React.useMemo(() => {
+    return loading ? { width: '100%', height: '100%' } : {};
+  }, [loading, imgSize]);
+
+  const handleOnClick = useCallback(() => {
+    onClick?.(props);
+  }, [onClick, props]);
+
+  const handleResize = useCallback(
+    (size: { width: number; height: number }) => {
+      if (!autoSize || !size.width || !size.height) return;
+
+      const { width: containerWidth, height: containerHeight } = size;
+      const { width: originalWidth, height: originalHeight } = props;
+
+      if (!originalWidth || !originalHeight) return;
+
+      const widthRatio = containerWidth / originalWidth;
+      const heightRatio = containerHeight / originalHeight;
+
+      const scale = Math.min(widthRatio, heightRatio, 1);
+
+      const newWidth = originalWidth * scale;
+      const newHeight = originalHeight * scale;
+
+      if (newWidth === imgSize.width && newHeight === imgSize.height) {
+        return;
+      }
+      setImgSize({
+        width: newWidth,
+        height: newHeight
+      });
+    },
+    [autoSize, props.width, props.height]
+  );
+
+  const handleOnLoad = React.useCallback(async () => {}, []);
+
+  return (
+    <ResizeObserver onResize={handleResize}>
+      <div
+        style={{ ...style }}
+        key={uid}
+        className={classNames('single-image', {
+          'auto-bg-color': autoBgColor,
+          'auto-size': autoSize,
+          loading: loading
+        })}
+      >
+        {autoBgColor && (
+          <div
+            className="mask"
+            style={{
+              background: `url(${dataUrl}) center center / cover no-repeat`
+            }}
+          ></div>
+        )}
+        <span
+          className="thumb-img"
+          style={{ ...thumImgWrapStyle }}
+          ref={imgWrapper}
+        >
+          <>
+            {label && <div className="label">{label}</div>}
+            {loading ? (
+              <span
+                className="progress-wrap"
+                style={{
+                  width: '100%',
+                  height: '100%',
+                  display: 'flex',
+                  border: '1px solid var(--ant-color-split)',
+                  borderRadius: 'var(--border-radius-base)',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  padding: '10px',
+                  overflow: 'hidden'
+                }}
+              >
+                <Progress
+                  percent={round(progress, 0)}
+                  type="dashboard"
+                  size={loadingSize}
+                  steps={{ count: 50, gap: 2 }}
+                  format={() => (
+                    <span className="font-size-20">{round(progress, 0)}%</span>
+                  )}
+                  trailColor="var(--ant-color-fill-secondary)"
+                />
+              </span>
+            ) : (
+              <span
+                onClick={handleOnClick}
+                className="img"
+                style={{
+                  maxHeight: `min(${maxHeight}, 100%)`,
+                  maxWidth: `min(${maxWidth}, 100%)`
+                }}
+              >
+                <AutoImage
+                  style={{ objectFit: 'cover' }}
+                  preview={preview}
+                  autoSize={autoSize}
+                  src={dataUrl}
+                  width={imgSize.width || '100%'}
+                  height={imgSize.height || 100}
+                  onLoad={handleOnLoad}
+                />
+                {progress && progress < 100 && (
+                  <span className="small-progress-wrap">
+                    <Progress
+                      percent={round(progress, 0)}
+                      type="dashboard"
+                      size="small"
+                      steps={{ count: 25, gap: 3 }}
+                      format={() => (
+                        <span className="font-size-12">
+                          {round(progress, 0)}%
+                        </span>
+                      )}
+                      strokeColor="var(--color-white-secondary)"
+                      trailColor="var(--ant-color-fill-secondary)"
+                    />
+                  </span>
+                )}
+              </span>
+            )}
+          </>
+
+          {editable && (
+            <span className="del" onClick={() => handleOnDelete(uid)}>
+              <CloseCircleOutlined />
+            </span>
+          )}
+        </span>
+      </div>
+    </ResizeObserver>
+  );
+};
+
+export default SingleImage;

src/components/auto-tooltip/index.tsx

@@ -1,5 +1,6 @@
-import { Tag, Tooltip } from 'antd';
-import debounce from 'lodash/debounce';
+import { CloseOutlined } from '@ant-design/icons';
+import { Tag, Tooltip, type TagProps } from 'antd';
+import { throttle } from 'lodash';
 import React, {
   useCallback,
   useEffect,
@@ -7,46 +8,83 @@ import React, {
   useRef,
   useState
 } from 'react';
+import styled from 'styled-components';
+import { TooltipOverlayScroller } from '../overlay-scroller';
 
-interface AutoTooltipProps extends React.ComponentProps<typeof Tag> {
+// type TagProps = React.ComponentProps<typeof Tag>;
+
+interface AutoTooltipProps extends Omit<TagProps, 'title'> {
   children: React.ReactNode;
   maxWidth?: number | string;
+  minWidth?: number | string;
   color?: string;
   style?: React.CSSProperties;
   ghost?: boolean;
+  title?: React.ReactNode;
   showTitle?: boolean;
+  closable?: boolean;
+  radius?: number | string;
+  filled?: boolean;
+  tooltipProps?: React.ComponentProps<typeof Tooltip>;
 }
 
+const StyledTag = styled(Tag)`
+  &.tag-filled {
+    border: none;
+    background-color: var(--ant-color-fill-secondary);
+  }
+`;
+
 const AutoTooltip: React.FC<AutoTooltipProps> = ({
   children,
   maxWidth = '100%',
+  minWidth,
   ghost = false,
+  title,
   showTitle = false,
+  tooltipProps,
+  radius = 12,
+  filled = false,
   ...tagProps
 }) => {
   const contentRef = useRef<HTMLDivElement>(null);
   const [isOverflowing, setIsOverflowing] = useState(false);
+  const resizeObserver = useRef<ResizeObserver | null>(null);
 
   const checkOverflow = useCallback(() => {
     if (contentRef.current) {
       const { scrollWidth, clientWidth } = contentRef.current;
       setIsOverflowing(scrollWidth > clientWidth);
     }
-  }, []);
-
-  const debouncedCheckOverflow = useMemo(
-    () => debounce(checkOverflow, 200),
-    [checkOverflow]
-  );
+  }, [contentRef.current]);
 
   useEffect(() => {
+    const element = contentRef.current;
+    if (!element) return;
+    resizeObserver.current?.disconnect();
+    resizeObserver.current = new ResizeObserver(() => {
+      checkOverflow();
+    });
+
+    resizeObserver.current?.observe(element);
+
+    // Initial check
     checkOverflow();
+
+    return () => {
+      resizeObserver.current?.disconnect();
+      resizeObserver.current = null;
+    };
+  }, [checkOverflow]);
+
+  useEffect(() => {
+    const debouncedCheckOverflow = throttle(checkOverflow, 200);
     window.addEventListener('resize', debouncedCheckOverflow);
     return () => {
       window.removeEventListener('resize', debouncedCheckOverflow);
       debouncedCheckOverflow.cancel();
     };
-  }, [checkOverflow, debouncedCheckOverflow]);
+  }, [checkOverflow]);
 
   useEffect(() => {
     checkOverflow();
@@ -55,6 +93,7 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
   const tagStyle = useMemo(
     () => ({
       maxWidth,
+      minWidth,
       overflow: 'hidden',
       textOverflow: 'ellipsis',
       whiteSpace: 'nowrap' as const,
@@ -64,17 +103,46 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
   );
 
   return (
-    <Tooltip title={isOverflowing || showTitle ? children : ''}>
+    <TooltipOverlayScroller
+      toolTipProps={{
+        ...tooltipProps,
+        destroyTooltipOnHide: false
+      }}
+      title={isOverflowing || showTitle ? title || children : false}
+    >
       {ghost ? (
-        <div ref={contentRef} style={tagStyle}>
+        <div ref={contentRef} style={tagStyle} data-overflow={isOverflowing}>
           {children}
         </div>
       ) : (
-        <Tag {...tagProps} ref={contentRef} style={tagStyle}>
+        <StyledTag
+          {...tagProps}
+          className={`${tagProps.className || ''} ${filled ? 'tag-filled' : ''}`}
+          ref={contentRef}
+          style={{
+            ...tagStyle,
+            paddingInline: tagProps.closable ? '8px 22px' : 8,
+            borderRadius: radius
+          }}
+          closeIcon={
+            tagProps.closable ? (
+              <CloseOutlined
+                style={{
+                  position: 'absolute',
+                  right: 8,
+                  top: '50%',
+                  transform: 'translateY(-50%)'
+                }}
+              />
+            ) : (
+              false
+            )
+          }
+        >
           {children}
-        </Tag>
+        </StyledTag>
       )}
-    </Tooltip>
+    </TooltipOverlayScroller>
   );
 };
 

src/components/auto-tooltip/title-tip.tsx

@@ -0,0 +1,28 @@
+import { OverlayScroller } from '@/components/overlay-scroller';
+import React from 'react';
+
+interface TitleTipProps {
+  isOverflowing: boolean;
+  showTitle: boolean;
+  title: React.ReactNode;
+  children: React.ReactNode;
+}
+
+const TitleTip: React.FC<TitleTipProps> = (props) => {
+  const { isOverflowing, showTitle, title, children } = props;
+
+  return (
+    <OverlayScroller maxHeight={200}>
+      <div
+        style={{
+          width: 'fit-content',
+          maxWidth: 'var(--width-tooltip-max)'
+        }}
+      >
+        {isOverflowing || showTitle ? title || children : ''}
+      </div>
+    </OverlayScroller>
+  );
+};
+
+export default React.memo(TitleTip);

src/components/bibtex-viewer/index.tsx

@@ -0,0 +1,47 @@
+import bibtexParse from '@orcid/bibtex-parse-js';
+import { Typography } from 'antd';
+import React from 'react';
+
+/*
+  @inproceedings{Lysenko:2010:GMC:1839778.1839781,\
+  author = {Lysenko, Mikola and Nelaturi, Saigopal and Shapiro, Vadim},\
+  title = {Group morphology with convolution algebras},\
+  booktitle = {Proceedings of the 14th ACM Symposium on Solid and Physical Modeling},\
+  series = {SPM '10},\
+  year = {2010},\
+  isbn = {978-1-60558-984-8},\
+  location = {Haifa, Israel},\
+  pages = {11--22},\
+  numpages = {12},\
+  url = {http://doi.acm.org/10.1145/1839778.1839781},\
+  doi = {10.1145/1839778.1839781},\
+  acmid = {1839781},\
+  publisher = {ACM},\
+  address = {New York, NY, USA},\
+ }
+*/
+
+const BibTeXViewer: React.FC<{ data: string }> = ({ data }) => {
+  if (!data) {
+    return null;
+  }
+  const dataList = bibtexParse.toJSON(data);
+  return (
+    <ol>
+      {dataList.map((item: any, index: number) => (
+        <li key={index} style={{ lineHeight: 2 }}>
+          <Typography.Link href={item.entryTags?.url} target="_blank">
+            {item.entryTags?.title}.{' '}
+          </Typography.Link>
+          <Typography.Text>{item.entryTags?.author}. </Typography.Text>
+          <Typography.Text>[{item.entryTags?.year}] </Typography.Text>
+          {item.entryTags?.journal && (
+            <Typography.Text>.({item.entryTags?.journal})</Typography.Text>
+          )}
+        </li>
+      ))}
+    </ol>
+  );
+};
+
+export default BibTeXViewer;

src/components/buttons/more.tsx

@@ -0,0 +1,46 @@
+import { DoubleRightOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Button } from 'antd';
+import React from 'react';
+import styled from 'styled-components';
+
+interface MoreButtonProps {
+  show: boolean;
+  loadMore: () => void;
+  loading?: boolean;
+}
+
+const MoreWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-block: 16px;
+  opacity: 1;
+  transition: opacity 0.3s;
+  &.loading {
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
+  }
+`;
+
+const MoreButton: React.FC<MoreButtonProps> = (props) => {
+  const { show, loading, loadMore } = props;
+  const intl = useIntl();
+  return (
+    <>
+      {show ? (
+        <MoreWrapper className={loading ? 'loading' : ''}>
+          <Button
+            onClick={loadMore}
+            size="middle"
+            type="text"
+            icon={<DoubleRightOutlined rotate={90} />}
+          >
+            {intl.formatMessage({ id: 'common.button.more' })}
+          </Button>
+        </MoreWrapper>
+      ) : null}
+    </>
+  );
+};
+
+export default MoreButton;

src/components/card-wrapper/index.less

@@ -3,5 +3,5 @@
   background-color: var(--color-white-1);
   box-shadow: none;
   padding: 10px;
-  border: 1px solid var(--color-border-1);
+  border: 1px solid var(--ant-color-border);
 }

src/components/card-wrapper/simple-card.tsx

@@ -0,0 +1,109 @@
+import { createStyles } from 'antd-style';
+import React from 'react';
+import styled from 'styled-components';
+
+const SimpleCardItemWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  gap: 16px;
+`;
+
+const useStyles = createStyles(({ css, token }) => ({
+  wrapper: css`
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    background: ${token.colorBgContainer};
+    border-radius: ${token.borderRadius}px;
+    padding: ${token.padding}px;
+    justify-content: center;
+    align-items: center;
+    gap: ${token.padding}px;
+    &.bordered {
+      border: 1px solid ${token.colorBorder};
+    }
+    .title {
+      font-size: ${token.fontSize}px;
+      font-weight: var(--font-weight-medium);
+    }
+    .content {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: ${token.fontSize}px;
+      color: ${token.colorTextSecondary};
+      gap: 8px;
+      .icon {
+        display: inline-block;
+        width: 10px;
+        height: 10px;
+        gap: 10px;
+        &.roundRect {
+          border-radius: 2px;
+        }
+        &.circle {
+          border-radius: 50%;
+        }
+      }
+    }
+  `
+}));
+export const SimpleCardItem: React.FC<{
+  title?: string;
+  content?: React.ReactNode;
+  style?: React.CSSProperties;
+  bordered?: boolean;
+  color?: string;
+  iconType?: string;
+}> = (props) => {
+  const { styles, cx } = useStyles();
+
+  const { title, content, style, bordered, iconType, color } = props;
+
+  return (
+    <div className={cx({ bordered: bordered }, styles.wrapper)} style={style}>
+      <div className="title">{title}</div>
+      <div className="content">
+        <span
+          className={cx([iconType], 'icon')}
+          style={{
+            backgroundColor: color || 'transparent'
+          }}
+        ></span>
+        <span>{content}</span>
+      </div>
+    </div>
+  );
+};
+
+export const SimpleCard: React.FC<{
+  dataList: {
+    label: string;
+    value: React.ReactNode;
+    color: string;
+    iconType: string;
+  }[];
+  height?: string | number;
+  bordered?: boolean;
+}> = (props) => {
+  const { dataList, bordered } = props;
+
+  return (
+    <SimpleCardItemWrapper style={{ height: props.height || '100%' }}>
+      {dataList.map((item, index) => (
+        <SimpleCardItem
+          key={index}
+          title={item.label}
+          content={item.value}
+          bordered={bordered}
+          color={item.color}
+          iconType={item.iconType}
+        ></SimpleCardItem>
+      ))}
+    </SimpleCardItemWrapper>
+  );
+};

src/components/check-buttons/index.tsx

@@ -0,0 +1,43 @@
+import { Button } from 'antd';
+import React from 'react';
+
+interface CheckButtonsProps {
+  options: Global.BaseOption<string | number>[];
+  onChange: (value: string | number) => void;
+  cancelable?: boolean;
+  size?: 'small' | 'middle' | 'large';
+  type?: 'text' | 'primary' | 'default' | 'dashed' | 'link' | undefined;
+}
+
+const CheckButtons: React.FC<CheckButtonsProps> = (props) => {
+  const [type, setType] = React.useState(props.type || 'text');
+  const [active, setActive] = React.useState<string | number | null>(null);
+  const handleChange = (value: string | number) => {
+    props.onChange(value);
+    if (props.cancelable && active === value) {
+      setActive(null);
+    } else {
+      setActive(value);
+    }
+  };
+  return (
+    <div className="flex-center gap-6">
+      {props.options?.map?.((option, index) => {
+        return (
+          <Button
+            size={props.size}
+            key={option.value}
+            onClick={() => handleChange(option.value)}
+            variant="filled"
+            color={active === option.value ? 'default' : undefined}
+            type={type}
+          >
+            {option.label}
+          </Button>
+        );
+      })}
+    </div>
+  );
+};
+
+export default React.memo(CheckButtons);

src/components/copy-button/index.tsx

@@ -2,25 +2,41 @@ import { CheckCircleFilled, CopyOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Tooltip, message } from 'antd';
 import ClipboardJS from 'clipboard';
-import { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 
 type CopyButtonProps = {
+  children?: React.ReactNode;
   text: string;
   disabled?: boolean;
   fontSize?: string;
   type?: 'text' | 'primary' | 'dashed' | 'link' | 'default';
   size?: 'small' | 'middle' | 'large';
   shape?: 'circle' | 'round' | 'default';
+  tips?: string;
+  placement?:
+    | 'top'
+    | 'left'
+    | 'right'
+    | 'bottom'
+    | 'topLeft'
+    | 'topRight'
+    | 'bottomLeft'
+    | 'bottomRight';
+  btnStyle?: React.CSSProperties;
   style?: React.CSSProperties;
 };
 
 const CopyButton: React.FC<CopyButtonProps> = ({
+  children,
+  tips,
   text,
   disabled,
   type = 'text',
-  shape = 'circle',
+  shape = 'default',
   fontSize = '14px',
   style,
+  btnStyle,
+  placement,
   size = 'middle'
 }) => {
   const intl = useIntl();
@@ -47,6 +63,13 @@ const CopyButton: React.FC<CopyButtonProps> = ({
     }
   };
 
+  const tipTitle = useMemo(() => {
+    if (copied) {
+      return intl.formatMessage({ id: 'common.button.copied' });
+    }
+    return tips ?? intl.formatMessage({ id: 'common.button.copy' });
+  }, [copied, intl, tips]);
+
   useEffect(() => {
     initClipboard();
     return () => {
@@ -55,7 +78,7 @@ const CopyButton: React.FC<CopyButtonProps> = ({
   }, [buttonRef]);
 
   return (
-    <Tooltip title={intl.formatMessage({ id: 'common.button.copy' })}>
+    <Tooltip title={tipTitle} placement={placement}>
       <Button
         className="copy-button"
         ref={buttonRef}
@@ -64,6 +87,7 @@ const CopyButton: React.FC<CopyButtonProps> = ({
         size={size}
         disabled={!!disabled}
         data-clipboard-text={text}
+        style={{ ...btnStyle }}
         icon={
           copied ? (
             <CheckCircleFilled
@@ -73,7 +97,9 @@ const CopyButton: React.FC<CopyButtonProps> = ({
             <CopyOutlined style={{ fontSize: fontSize, ...style }} />
           )
         }
-      ></Button>
+      >
+        {children}
+      </Button>
     </Tooltip>
   );
 };

src/components/dark-mask/index.tsx

@@ -0,0 +1,85 @@
+import { getStorageUserSettings } from '@/atoms/settings';
+import { useEffect, useRef, useState } from 'react';
+import styled, { keyframes } from 'styled-components';
+
+const duration = 1;
+
+const fadeOut = keyframes`
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(1.05);
+  }
+`;
+
+const Mask = styled.div<{ isHiding: boolean }>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(59, 59, 59, 1);
+  z-index: 9999;
+  animation: ${({ isHiding }) => (isHiding ? fadeOut : 'none')} ${duration}s
+    ease forwards;
+`;
+
+const DarkModeMask = () => {
+  const { theme: savedTheme } = getStorageUserSettings();
+  const [visible, setVisible] = useState(savedTheme === 'realDark');
+  const [isHiding, setIsHiding] = useState(false);
+  const maskRef = useRef<HTMLDivElement>(null);
+  const timerRef = useRef<any>(null);
+
+  const initTheme = () => {
+    const html = document.querySelector('html');
+    if (html) {
+      html.setAttribute('data-theme', savedTheme);
+    }
+  };
+
+  initTheme();
+
+  useEffect(() => {
+    if (savedTheme === 'realDark') {
+      setVisible(true);
+      requestAnimationFrame(() => {
+        setIsHiding(true);
+      });
+    } else {
+      setIsHiding(true);
+    }
+  }, [savedTheme]);
+
+  useEffect(() => {
+    const el = maskRef.current;
+    if (!el) return;
+
+    const handleAnimationEnd = () => {
+      clearTimeout(timerRef.current);
+      setVisible(false);
+    };
+
+    el.addEventListener('animationend', handleAnimationEnd);
+
+    if (isHiding) {
+      timerRef.current = setTimeout(
+        () => {
+          setVisible(false);
+        },
+        duration * 1000 + 100
+      );
+    }
+    return () => el.removeEventListener('animationend', handleAnimationEnd);
+  }, [visible]);
+
+  return visible ? <Mask ref={maskRef} isHiding={isHiding}></Mask> : null;
+};
+
+export default DarkModeMask;

src/components/delete-modal/index.less

@@ -1,22 +0,0 @@
-:local(.delete-modal-content) {
-  display: flex;
-  font-size: var(--font-size-middle);
-
-  :global {
-    .anticon {
-      font-size: 20px;
-      margin-right: 10px;
-      color: var(--ant-color-warning);
-    }
-
-    .title {
-      display: flex;
-      align-items: center;
-    }
-  }
-}
-
-:local(.content) {
-  padding-top: 15px;
-  padding-left: 30px;
-}

src/components/delete-modal/index.tsx

@@ -1,43 +1,135 @@
+import useBodyScroll from '@/hooks/use-body-scroll';
 import { ExclamationCircleFilled } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, Modal, Space, message, type ModalFuncProps } from 'antd';
+import {
+  Button,
+  Checkbox,
+  Modal,
+  Space,
+  message,
+  type ModalFuncProps
+} from 'antd';
+import { createStyles } from 'antd-style';
 import { forwardRef, useImperativeHandle, useState } from 'react';
-import Styles from './index.less';
+import styled from 'styled-components';
+
+const useStyles = createStyles(({ css }) => ({
+  'delete-modal-content': css`
+    display: flex;
+    font-size: var(--font-size-middle);
+    .anticon {
+      font-size: 20px;
+      margin-right: 10px;
+      color: var(--ant-color-warning);
+    }
+    .title {
+      display: flex;
+      align-items: center;
+      font-weight: var(--font-weight-500);
+    }
+  `,
+  content: css`
+    padding-top: 15px;
+    padding-left: 30px;
+    color: var(--ant-color-text-secondary);
+    white-space: pre-line;
+    word-break: break-all;
+    span {
+      color: var(--ant-color-text);
+      display: flex;
+      margin-top: 8px;
+    }
+  `
+}));
+
+const CheckboxWrapper = styled.div`
+  margin-top: 20px;
+  margin-left: 30px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  .check-text {
+    font-weight: 700;
+    color: var(--ant-color-warning);
+  }
+`;
+
+interface DataOptions {
+  content?: string;
+  selection?: boolean;
+  name?: string;
+  okText?: string;
+  cancelText?: string;
+  title?: string;
+  operation: string;
+  checkConfig?: {
+    checkText: string;
+    defautlChecked: boolean;
+  };
+}
+
+interface Configuration {
+  checked: boolean;
+}
 
 const DeleteModal = forwardRef((props, ref) => {
   const intl = useIntl();
+  const { styles } = useStyles();
+  const { saveScrollHeight, restoreScrollHeight } = useBodyScroll();
   const [visible, setVisible] = useState(false);
-  const [config, setConfig] = useState<
-    ModalFuncProps & { content: string; selection?: boolean; name?: string }
-  >({});
+  const [configuration, setConfiguration] = useState<Configuration>({
+    checked: false
+  });
+  const [config, setConfig] = useState<ModalFuncProps & DataOptions>({} as any);
 
-  useImperativeHandle(ref, () => ({
-    show: (
-      data: ModalFuncProps & {
-        content: string;
-        selection?: boolean;
-        name?: string;
-      }
-    ) => {
-      setConfig(data);
-      setVisible(true);
-    },
-    hide: () => {
-      setVisible(false);
-    }
-  }));
+  const show = (data: ModalFuncProps & DataOptions) => {
+    saveScrollHeight();
+    setConfig(data);
+    setConfiguration({
+      checked: data.checkConfig?.defautlChecked || false
+    });
+    setVisible(true);
+  };
+
+  const hide = () => {
+    setVisible(false);
+    restoreScrollHeight();
+  };
 
   const handleCancel = () => {
     setVisible(false);
     config.onCancel?.();
+    restoreScrollHeight();
   };
 
   const handleOk = async () => {
-    await config.onOk?.();
-    message.success(intl.formatMessage({ id: 'common.message.success' }));
-    setVisible(false);
+    try {
+      const res = await config.onOk?.();
+      const isArray = Array.isArray(res);
+      if (isArray) {
+        const allSuccess = res.every(
+          (item: any) => item?.status === 'fulfilled'
+        );
+        if (allSuccess) {
+          message.success(intl.formatMessage({ id: 'common.message.success' }));
+        }
+      } else {
+        message.success(intl.formatMessage({ id: 'common.message.success' }));
+      }
+    } catch (error) {
+      // Handle error if needed
+    } finally {
+      setVisible(false);
+      restoreScrollHeight();
+    }
   };
 
+  useImperativeHandle(ref, () => ({
+    show,
+    hide,
+    configuration
+  }));
+
   return (
     <Modal
       style={{
@@ -46,49 +138,73 @@ const DeleteModal = forwardRef((props, ref) => {
       open={visible}
       onOk={handleOk}
       onCancel={handleCancel}
-      destroyOnClose={true}
+      destroyOnClose={false}
       closeIcon={false}
       maskClosable={false}
       keyboard={false}
       width={460}
-      styles={{}}
+      styles={{
+        footer: {
+          marginTop: '20px'
+        }
+      }}
       footer={
         <Space size={20}>
           <Button onClick={handleCancel} size="middle">
-            {intl.formatMessage({ id: 'common.button.cancel' })}
+            {config.cancelText
+              ? intl.formatMessage({ id: config.cancelText })
+              : intl.formatMessage({ id: 'common.button.cancel' })}
           </Button>
           <Button type="primary" onClick={handleOk} size="middle">
-            {intl.formatMessage({ id: 'common.button.delete' })}
+            {config.okText
+              ? intl.formatMessage({ id: config.okText })
+              : intl.formatMessage({ id: 'common.button.delete' })}
           </Button>
         </Space>
       }
     >
-      <div className={Styles['delete-modal-content']}>
+      <div className={styles['delete-modal-content']}>
         <span className="title">
           <ExclamationCircleFilled />
           <span>
-            {intl.formatMessage({ id: 'common.title.delete.confirm' })}
+            {config.title
+              ? intl.formatMessage({ id: config.title })
+              : intl.formatMessage({ id: 'common.title.delete.confirm' })}
           </span>
         </span>
       </div>
       <div
-        className={Styles['content']}
+        className={styles['content']}
         dangerouslySetInnerHTML={{
-          __html:
-            config.content &&
-            intl.formatMessage(
-              {
-                id: config.selection
-                  ? 'common.delete.confirm'
-                  : 'common.delete.single.confirm'
-              },
-              {
-                type: intl.formatMessage({ id: config.content }),
-                name: config.name
-              }
-            )
+          __html: config.content
+            ? intl.formatMessage(
+                {
+                  id: config.operation || ''
+                },
+                {
+                  type: intl.formatMessage({ id: config.content }),
+                  name: config.name
+                }
+              )
+            : ''
         }}
       ></div>
+      {config.checkConfig && (
+        <CheckboxWrapper>
+          <Checkbox
+            checked={configuration.checked}
+            onChange={(e) =>
+              setConfiguration({
+                checked: e.target.checked
+              })
+            }
+          >
+            <span className="check-text">
+              {intl.formatMessage({ id: config.checkConfig?.checkText })}
+            </span>
+          </Checkbox>
+        </CheckboxWrapper>
+      )}
     </Modal>
   );
 });

src/components/drop-down-actions/index.tsx

@@ -1,34 +1,36 @@
-import * as icons from '@ant-design/icons';
-import { Button, Dropdown, Space } from 'antd';
-import type { MenuProps } from 'antd/es/menu';
-import react from 'react';
+import { useIntl } from '@umijs/max';
+import { Dropdown, DropDownProps } from 'antd';
+import _ from 'lodash';
+import React, { useMemo } from 'react';
 
-type DropdownProps = {
-  trigger?: Array<'click' | 'hover' | 'contextMenu'>;
-  items: MenuProps['items'];
-  onClick: (e: any) => void;
-};
-const renderIcon = (icon: string) => {
-  if (!icon) {
-    return null;
-  }
-  // @ts-ignore
-  const Icon = icons[icon] as React.FC;
-  return react.createElement(Icon);
-};
-const DropDownActions: React.FC<DropdownProps> = (props) => {
-  const { trigger, items, onClick } = props;
+const DropDownActions: React.FC<DropDownProps> = (props) => {
+  const {
+    menu,
+    trigger = ['hover'],
+    placement = 'bottomRight',
+    children,
+    ...rest
+  } = props;
+  const intl = useIntl();
+
+  const items = useMemo(() => {
+    return menu?.items?.map((item: any) => ({
+      ..._.omit(item, 'locale'),
+      label: item.locale ? intl.formatMessage({ id: item.label }) : item.label
+    }));
+  }, [menu?.items, intl]);
   return (
-    <Space>
-      <Dropdown menu={{ items, onClick }} trigger={trigger}>
-        <Button
-          onClick={(e) => e.preventDefault()}
-          style={{ fontSize: '14px' }}
-          type="text"
-          icon={renderIcon('MoreOutlined')}
-        ></Button>
-      </Dropdown>
-    </Space>
+    <Dropdown
+      menu={{
+        items: items,
+        onClick: menu?.onClick
+      }}
+      trigger={trigger}
+      placement={placement}
+      {...rest}
+    >
+      {children}
+    </Dropdown>
   );
 };
 

src/components/drop-down-buttons/index.less

@@ -0,0 +1,4 @@
+.dropdown-button.middle {
+  height: 28px;
+  width: 28px;
+}

src/components/drop-down-buttons/index.tsx

@@ -1,23 +1,39 @@
 import { MoreOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Dropdown, Tooltip, type MenuProps } from 'antd';
+import classNames from 'classnames';
 import _ from 'lodash';
-import { memo } from 'react';
+import React from 'react';
+import './index.less';
 
+type Trigger = 'click' | 'hover';
 interface DropdownButtonsProps {
   items: MenuProps['items'];
   size?: 'small' | 'middle' | 'large';
+  trigger?: Trigger[];
+  showText?: boolean;
+  disabled?: boolean;
+  variant?: 'filled' | 'outlined';
+  color?: string;
+  extra?: React.ReactNode;
   onSelect: (val: any, item?: any) => void;
 }
 
 const DropdownButtons: React.FC<DropdownButtonsProps> = ({
   items,
-  size = 'small',
+  size = 'middle',
+  trigger = ['hover'],
+  showText,
+  disabled,
+  variant,
+  color,
+  extra,
   onSelect
 }) => {
+  const headItem = _.head(items);
   const intl = useIntl();
+
   const handleMenuClick = (item: any) => {
-    console.log('menu click', item.key);
     const selectItem = _.find(items, { key: item.key });
     onSelect(item.key, selectItem);
   };
@@ -34,23 +50,26 @@ const DropdownButtons: React.FC<DropdownButtonsProps> = ({
   return (
     <>
       {items?.length === 1 ? (
-        <Tooltip title={intl.formatMessage({ id: _.head(items)?.label })}>
+        <Tooltip title={intl.formatMessage({ id: headItem?.label })}>
           <Button
-            {..._.head(items)}
-            icon={_.get(items, '0.icon')}
+            className={classNames('dropdown-button', size)}
+            icon={headItem?.icon}
             size={size}
-            {..._.get(items, '0.props')}
+            {...headItem?.props}
             onClick={handleButtonClick}
           ></Button>
         </Tooltip>
       ) : (
         <Dropdown.Button
+          disabled={disabled}
+          trigger={trigger}
+          type="primary"
           dropdownRender={(menus: any) => {
             return (
               <div
                 className="flex flex-column "
                 style={{
-                  backgroundColor: 'var(--color-white-1)',
+                  backgroundColor: 'var(--ant-color-bg-elevated)',
                   padding: 5,
                   alignItems: 'flex-start',
                   borderRadius: 'var(--border-radius-base)',
@@ -62,9 +81,10 @@ const DropdownButtons: React.FC<DropdownButtonsProps> = ({
                     <Button
                       {...item.props}
                       type="text"
-                      size="middle"
+                      size={size}
                       icon={item.icon}
                       key={item.key}
+                      disabled={item.disabled}
                       onClick={() => handleMenuClick(item)}
                       style={{ width: '100%', justifyContent: 'flex-start' }}
                     >
@@ -76,17 +96,47 @@ const DropdownButtons: React.FC<DropdownButtonsProps> = ({
             );
           }}
           buttonsRender={([leftButton, rightButton]) => [
-            <Tooltip
-              title={intl.formatMessage({ id: _.head(items)?.label })}
-              key="leftButton"
-            >
-              <Button
-                onClick={handleButtonClick}
-                size={size}
-                icon={_.head(items)?.icon}
-              ></Button>
-            </Tooltip>,
-            <Button icon={<MoreOutlined />} size={size} key="menu"></Button>
+            <>
+              {showText ? (
+                <Button
+                  {...headItem?.props}
+                  disabled={headItem?.disabled || disabled}
+                  className={classNames('dropdown-button', size)}
+                  onClick={handleButtonClick}
+                  size={size}
+                  icon={headItem?.icon}
+                  variant={variant}
+                  color={color}
+                >
+                  {intl.formatMessage({
+                    id: headItem?.label
+                  })}
+                  {extra}
+                </Button>
+              ) : (
+                <Tooltip
+                  title={intl.formatMessage({ id: headItem?.label })}
+                  key="leftButton"
+                >
+                  <Button
+                    {...headItem?.props}
+                    className={classNames('dropdown-button', size)}
+                    onClick={handleButtonClick}
+                    size={size}
+                    icon={headItem?.icon}
+                    disabled={headItem?.disabled}
+                  ></Button>
+                </Tooltip>
+              )}
+            </>,
+            <Button
+              icon={<MoreOutlined />}
+              size={size}
+              key="menu"
+              variant={variant}
+              color="default"
+              className={classNames('dropdown-button', size)}
+            ></Button>
           ]}
         ></Dropdown.Button>
       )}
@@ -94,4 +144,4 @@ const DropdownButtons: React.FC<DropdownButtonsProps> = ({
   );
 };
 
-export default memo(DropdownButtons);
+export default DropdownButtons;

src/components/echarts/bar-chart.tsx

@@ -1,16 +1,8 @@
 import Chart from '@/components/echarts/chart';
-import {
-  barItemConfig,
-  grid,
-  legend,
-  title as titleConfig,
-  tooltip,
-  xAxis,
-  yAxis
-} from '@/components/echarts/config';
+import useChartConfig from '@/components/echarts/config';
 import EmptyData from '@/components/empty-data';
 import _ from 'lodash';
-import { memo } from 'react';
+import React, { memo, useMemo } from 'react';
 import { ChartProps } from './types';
 
 const BarChart: React.FC<ChartProps> = (props) => {
@@ -23,39 +15,41 @@ const BarChart: React.FC<ChartProps> = (props) => {
     legendData,
     title
   } = props;
-
-  if (!seriesData.length) {
-    return <EmptyData height={height} title={title}></EmptyData>;
-  }
-
-  const options = {
-    title: {
-      text: ''
-    },
+  const {
+    barItemConfig,
     grid,
-    tooltip: {
-      ...tooltip
-      // axisPointer: {
-      //   type: 'shadow'
-      // }
-    },
-    xAxis: {
-      ...xAxis,
-      axisLabel: {
-        ...xAxis.axisLabel,
-        formatter: labelFormatter
-      },
-      data: []
-    },
-    yAxis,
-    legend: {
-      ...legend,
-      data: []
-    },
+    legend,
+    title: titleConfig,
+    tooltip,
+    xAxis,
+    yAxis
+  } = useChartConfig();
 
-    series: []
-  };
-  const setDataOptions = () => {
+  const dataOptions = useMemo((): any => {
+    const options = {
+      title: {
+        text: ''
+      },
+      grid,
+      tooltip: {
+        ...tooltip
+      },
+      xAxis: {
+        ...xAxis,
+        axisLabel: {
+          ...xAxis.axisLabel,
+          formatter: labelFormatter
+        },
+        data: []
+      },
+      yAxis,
+      legend: {
+        ...legend,
+        data: []
+      },
+
+      series: []
+    };
     const data = _.map(seriesData, (item: any) => {
       return {
         ...item,
@@ -82,16 +76,31 @@ const BarChart: React.FC<ChartProps> = (props) => {
       },
       series: data
     };
-  };
-
-  const dataOptions: any = setDataOptions();
+  }, [
+    seriesData,
+    xAxisData,
+    title,
+    labelFormatter,
+    tooltip,
+    grid,
+    xAxis,
+    yAxis,
+    legend,
+    barItemConfig
+  ]);
 
   return (
-    <Chart
-      height={height}
-      options={dataOptions}
-      width={width || '100%'}
-    ></Chart>
+    <>
+      {!seriesData.length ? (
+        <EmptyData height={height} title={title}></EmptyData>
+      ) : (
+        <Chart
+          height={height}
+          options={dataOptions}
+          width={width || '100%'}
+        ></Chart>
+      )}
+    </>
   );
 };
 

src/components/echarts/chart-tooltip.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const TooltipWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 11px;
+  background-color: rgba(255, 255, 255, 80%);
+  min-width: 100px;
+  max-width: 360px;
+
+  .tooltip-x-name {
+    font-size: var(--font-size-base);
+    color: var(--ant-color-text-tertiary);
+  }
+
+  .tooltip-item {
+    color: var(--ant-color-text-secondary);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .tooltip-item-title {
+      margin-right: 2px;
+    }
+
+    .tooltip-value {
+      margin-left: 10px;
+      color: var(--ant-color-text);
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+`;
+
+const ItemSymbol = styled.span<{ $color: string }>`
+  background-color: ${(props) => props.$color};
+  display: inline-block;
+  marginright: 5px;
+  borderradius: 8px;
+  width: 8px;
+  height: 8px;
+`;
+
+interface ChartTooltipProps {
+  params: any[];
+  callback?: (val: any) => any;
+}
+
+const ChartTooltip: React.FC<ChartTooltipProps> = (props) => {
+  const { params, callback } = props;
+  console.log('params====', params);
+  return (
+    <TooltipWrapper>
+      <span className="tooltip-x-name">{params[0]?.axisValue}</span>
+      <>
+        {params.map((item: any, index: number) => {
+          let value = callback?.(item.data.value) || item.data.value;
+
+          return (
+            <span className="tooltip-item" key={index}>
+              <span className="tooltip-item-name">
+                <ItemSymbol $color={item.color}></ItemSymbol>
+                <span className="tooltip-title">{item.seriesName}</span>:
+              </span>
+              <span className="tooltip-value">{value}</span>
+            </span>
+          );
+        })}
+      </>
+    </TooltipWrapper>
+  );
+};
+export default ChartTooltip;

src/components/echarts/chart.tsx

@@ -1,58 +1,148 @@
-import { throttle } from 'echarts/core';
-import { useCallback, useEffect, useRef } from 'react';
+import _, { throttle } from 'lodash';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
 import echarts, { ECOption } from '.';
 
 const Chart: React.FC<{
   options: ECOption;
   height: number | string;
   width: number | string;
-}> = ({ options, width, height }) => {
+  ref?: any;
+}> = forwardRef(({ options, width, height }, ref) => {
   const container = useRef<HTMLDivElement>(null);
   const chart = useRef<echarts.EChartsType>();
+  const resizeable = useRef(false);
+  const resizeObserver = useRef<ResizeObserver>();
+  const finished = useRef(false);
 
-  const init = useCallback(() => {
+  useImperativeHandle(ref, () => {
+    return {
+      chart: chart.current
+    };
+  });
+
+  const init = () => {
     if (container.current) {
       chart.current?.clear();
       chart.current = echarts.init(container.current);
     }
-  }, []);
+  };
 
-  const resize = useCallback(() => {
-    chart.current?.resize();
-  }, []);
-
-  const setOption = useCallback((options: ECOption) => {
+  const setOption = (options: ECOption) => {
+    console.log('setOption', options);
     chart.current?.clear();
     chart.current?.setOption(options, {
       notMerge: true,
       lazyUpdate: true
     });
+    if (Array.isArray(options.yAxis) && options.yAxis.length > 1) {
+      chart.current?.resize();
+    }
+  };
+
+  useEffect(() => {
+    const handleOnFinished = () => {
+      if (!chart.current || finished.current) return;
+
+      const currentChart = chart.current;
+      const optionsYAxis = currentChart.getOption()?.yAxis;
+
+      if (
+        !optionsYAxis ||
+        !Array.isArray(optionsYAxis) ||
+        optionsYAxis.length < 2
+      )
+        return;
+      // @ts-ignore
+      const model = currentChart.getModel();
+
+      const yAxisModels = [
+        model.getComponent('yAxis', 0),
+        model.getComponent('yAxis', 1)
+      ];
+
+      if (!yAxisModels[0] || !yAxisModels[1]) return;
+
+      const axes = yAxisModels.map((m) => m.axis);
+
+      const intervals = axes.map((axis) => axis.scale.getInterval());
+      const ticksList = axes.map((axis) => axis.scale.getTicks());
+      const counts = ticksList.map((t) => t.length);
+
+      const unifiedCount = Math.max(counts[0], counts[1]);
+
+      const newMax0 = intervals[0] * (unifiedCount - 1);
+      const newMax1 = intervals[1] * (unifiedCount - 1);
+
+      // if newMax0 equal to maxValue0, and newMax1 equal to maxValue1, do not update yAxis
+      if (counts[0] === counts[1]) return;
+
+      const yAxis: any[] = [{}, {}];
+
+      if (counts[0] < unifiedCount) {
+        yAxis[0].max = _.round(newMax0, 2);
+        yAxis[0].interval = intervals[0];
+        yAxis[0].splitNumber = unifiedCount;
+      }
+
+      if (counts[1] < unifiedCount) {
+        yAxis[1].max = _.round(newMax1, 2);
+        yAxis[1].interval = intervals[1];
+        yAxis[1].splitNumber = unifiedCount;
+      }
+      finished.current = true;
+
+      currentChart.setOption({
+        yAxis: yAxis
+      });
+    };
+
+    if (container.current) {
+      init();
+      chart.current?.on('finished', handleOnFinished);
+    }
+
+    return () => {
+      chart.current?.dispose();
+      chart.current?.off('finished', handleOnFinished);
+    };
   }, []);
 
   useEffect(() => {
-    init();
-    return () => {
-      chart.current?.dispose();
-    };
-  }, [init]);
-
-  useEffect(() => {
-    resize();
+    resizeable.current = false;
+    finished.current = false;
     setOption(options);
+    resizeable.current = true;
   }, [options]);
 
-  // resize on window resize
   useEffect(() => {
     const handleResize = throttle(() => {
-      resize();
+      if (resizeable.current) {
+        chart.current?.resize();
+      }
     }, 100);
-    window.addEventListener('resize', handleResize);
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, [resize]);
 
-  return <div ref={container} style={{ width: width, height }}></div>;
-};
+    if (container.current) {
+      resizeObserver.current = new ResizeObserver(handleResize);
+
+      resizeObserver.current.observe(container.current);
+    }
+    return () => {
+      if (container.current) {
+        resizeObserver.current?.unobserve(container.current);
+      }
+    };
+  }, []);
+
+  return (
+    <div className="chart-wrapper" style={{ width: width, height }}>
+      <div ref={container} style={{ width: width, height }}></div>
+    </div>
+  );
+});
 
 export default Chart;

src/components/echarts/config.ts

@@ -1,190 +1,235 @@
+import useUserSettings from '@/hooks/use-user-settings';
+import { formatLargeNumber } from '@/utils';
+import { theme } from 'antd';
 import { isFunction } from 'lodash';
-const chartColorMap = {
-  tickLineColor: 'rgba(217,217,217,0.5)',
-  axislabelColor: 'rgba(0, 0, 0, 0.4)'
-};
-
-export const tooltip = {
-  trigger: 'axis',
-  // axisPointer: {
-  //   type: 'shadow'
-  // }
-  formatter(params: any, callback?: (val: any) => any) {
-    let result = `<span class="tooltip-x-name">${params[0].axisValue}</span>`;
-    params.forEach((item: any) => {
-      let value = isFunction(callback)
-        ? callback?.(item.data.value)
-        : item.data.value;
-      result += `<span class="tooltip-item">
-     <span class="tooltip-item-name">
-       <span style="display:inline-block;margin-right:5px;border-radius:8px;width:8px;height:8px;background-color:${item.color};"></span>
-       <span class="tooltip-title">${item.seriesName}</span>:
-     </span>
-      <span class="tooltip-value">${value}</span>
-      </span>`;
-    });
-    return `<div class="tooltip-wrapper">${result}</div>`;
-  }
-};
+import { useMemo } from 'react';
 
 export const grid = {
   left: 0,
-  right: 20,
+  right: 0,
   bottom: 20,
   containLabel: true
 };
 
-export const legend = {
-  itemWidth: 8,
-  itemHeight: 8
-};
+export default function useChartConfig() {
+  const { userSettings, isDarkTheme } = useUserSettings();
+  const { useToken } = theme;
+  const { token } = useToken();
 
-export const xAxis = {
-  type: 'category',
-  axisTick: {
-    show: true,
-    lineStyle: {
-      color: chartColorMap.tickLineColor
-    }
-  },
-  axisLabel: {
-    color: chartColorMap.axislabelColor,
-    fontSize: 12
-  },
-  axisLine: {
-    show: false
-  }
-};
+  console.log('token:', token);
 
-export const yAxis = {
-  // max: 100,
-  // min: 0,
-  nameTextStyle: {
-    padding: [0, 0, 0, -20]
-  },
-  splitLine: {
-    show: true,
-    lineStyle: {
-      type: 'dashed'
-    }
-  },
-  axisLabel: {
-    color: chartColorMap.axislabelColor,
-    fontSize: 12
-  },
-  axisTick: {
-    show: false
-  },
-  type: 'value'
-};
+  const chartColorMap = useMemo(() => {
+    return {
+      titleColor: token.colorText,
+      splitLineColor: token.colorBorder,
+      tickLineColor: token.colorSplit,
+      axislabelColor: token.colorTextTertiary,
+      gaugeBgColor: token.colorFillSecondary,
+      gaugeSplitLineColor: isDarkTheme
+        ? 'rgba(255,255,255,.3)'
+        : 'rgba(255, 255, 255, 1)',
+      gaugeSplitLineColor2: isDarkTheme
+        ? 'rgba(255,255,255,.5)'
+        : 'rgba(255, 255, 255, 1)',
+      colorBgContainerHover: isDarkTheme ? '#424242' : '#fff'
+    };
+  }, [userSettings.theme, isDarkTheme]);
 
-export const title = {
-  show: true,
-  left: 'center',
-  textStyle: {
-    fontSize: 12,
-    color: '#000'
-  },
-  text: ''
-};
+  const tooltip = {
+    trigger: 'axis',
+    backgroundColor: chartColorMap.colorBgContainerHover,
+    borderColor: 'transparent',
+    formatter(params: any, callback?: (val: any) => any) {
+      let result = `<span class="tooltip-x-name">${params[0].axisValue}</span>`;
 
-export const barItemConfig = {
-  type: 'bar',
-  barMaxWidth: 20,
-  barMinWidth: 8,
-  // stack: 'total',
-  barGap: '30%',
-  barCategoryGap: '50%'
-};
+      params.forEach((item: any) => {
+        let value = isFunction(callback)
+          ? callback?.(item.data.value)
+          : item.data.value;
 
-export const lineItemConfig = {
-  type: 'line',
-  smooth: true,
-  showSymbol: false,
-  itemStyle: {},
-  lineStyle: {
-    width: 1.5,
-    opacity: 0.7
-  }
-};
+        const borderRadius = item.seriesType === 'bar' ? '2px' : '8px';
 
-export const gaugeItemConfig = {
-  type: 'gauge',
-  radius: '88%',
-  center: ['50%', '65%'],
-  startAngle: 190,
-  endAngle: -10,
-  min: 0,
-  max: 100,
-  splitNumber: 5,
-  progress: {
-    show: true,
-    roundCap: false,
-    width: 12
-  },
-  pointer: {
-    length: '80%',
-    width: 4,
-    itemStyle: {
-      color: 'auto'
+        result += `<span class="tooltip-item">
+          <span class="tooltip-item-name">
+            <span style="display:inline-block;margin-right:5px;border-radius:${borderRadius};width:8px;height:8px;background-color:${item.color};"></span>
+            <span class="tooltip-title">${item.seriesName}</span>:
+          </span>
+            <span class="tooltip-value">${value}</span>
+      </span>`;
+      });
+
+      return `<div class="tooltip-wrapper">${result}</div>`;
     }
-  },
-  axisLine: {
-    roundCap: false,
-    lineStyle: {
-      width: 12,
-      // color: [[1, 'rgba(221, 221, 221, 0.5)']],
-      color: [
-        [0.5, 'rgba(84, 204, 152, 80%)'],
-        [0.8, 'rgba(250, 173, 20, 80%)'],
-        [1, 'rgba(255, 77, 79, 80%)']
-      ]
+  };
+
+  const legend = {
+    itemWidth: 8,
+    itemHeight: 8,
+    textStyle: {
+      color: chartColorMap.axislabelColor
     }
-  },
-  axisTick: {
-    distance: -12,
-    length: 6,
-    splitNumber: 5,
-    lineStyle: {
-      width: 1.5,
-      color: 'rgba(255, 255, 255, 1)'
-    }
-  },
-  splitLine: {
-    distance: -12,
-    length: 12,
-    lineStyle: {
-      width: 1.5,
-      color: 'rgba(255, 255, 255, 1)'
-    }
-  },
-  axisLabel: {
-    distance: 14,
-    color: 'rgba(0, 0, 0, .5)',
-    fontSize: 12
-  },
-  detail: {
-    lineHeight: 40,
-    height: 40,
-    offsetCenter: [5, 30],
-    valueAnimation: false,
-    fontSize: 20,
-    color: 'rgba(0, 0, 0, 0.88)',
-    formatter(value: any) {
-      return '{value|' + value + '}{unit|%}';
+  };
+
+  const xAxis = {
+    type: 'category',
+    axisTick: {
+      show: true,
+      lineStyle: {
+        color: chartColorMap.tickLineColor
+      }
     },
-    rich: {
-      value: {
-        fontSize: 16,
-        fontWeight: '500',
-        color: 'rgba(0, 0, 0, 0.88)'
+    axisLabel: {
+      color: chartColorMap.axislabelColor,
+      fontSize: 12
+    },
+    axisLine: {
+      show: false
+    }
+  };
+
+  const yAxis = {
+    nameTextStyle: {
+      padding: [0, 0, 0, -20]
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        type: 'dashed',
+        color: chartColorMap.splitLineColor
+      }
+    },
+    axisLabel: {
+      color: chartColorMap.axislabelColor,
+      fontSize: 12,
+      formatter: formatLargeNumber
+    },
+    axisTick: {
+      show: false
+    },
+    type: 'value'
+  };
+
+  const title = {
+    show: true,
+    left: 'center',
+    textStyle: {
+      fontSize: 12,
+      color: chartColorMap.titleColor
+    },
+    text: ''
+  };
+
+  const barItemConfig = {
+    type: 'bar',
+    barMaxWidth: 20,
+    barMinWidth: 8,
+    // stack: 'total',
+    barGap: '30%',
+    barCategoryGap: '50%'
+  };
+
+  const lineItemConfig = {
+    type: 'line',
+    smooth: true,
+    showSymbol: false,
+    itemStyle: {},
+    lineStyle: {
+      width: 1.5,
+      opacity: 0.7
+    }
+  };
+
+  const gaugeItemConfig = {
+    type: 'gauge',
+    radius: '88%',
+    center: ['50%', '65%'],
+    startAngle: 190,
+    endAngle: -10,
+    min: 0,
+    max: 100,
+    splitNumber: 5,
+    progress: {
+      show: true,
+      roundCap: false,
+      width: 12
+    },
+    pointer: {
+      length: '80%',
+      width: 4,
+      itemStyle: {
+        color: 'auto'
+      }
+    },
+    axisLine: {
+      roundCap: false,
+      lineStyle: {
+        width: 12,
+        color: [
+          [0.5, 'rgba(84, 204, 152, 80%)'],
+          [0.8, 'rgba(250, 173, 20, 80%)'],
+          [1, 'rgba(255, 77, 79, 80%)']
+        ]
+      }
+    },
+    axisTick: {
+      distance: -11,
+      length: 6,
+      splitNumber: 5,
+      lineStyle: {
+        width: 1.5,
+        color: chartColorMap.gaugeSplitLineColor
+      }
+    },
+    splitLine: {
+      distance: -5,
+      length: 5,
+      lineStyle: {
+        width: 1.5,
+        color: chartColorMap.gaugeSplitLineColor2
+      }
+    },
+    axisLabel: {
+      distance: 14,
+      color: chartColorMap.axislabelColor,
+      fontSize: 12
+    },
+    detail: {
+      lineHeight: 40,
+      height: 40,
+      offsetCenter: [5, 30],
+      valueAnimation: false,
+      fontSize: 20,
+      color: chartColorMap.titleColor,
+      formatter(value: any) {
+        return '{value|' + value + '}{unit|%}';
       },
-      unit: {
-        fontSize: 14,
-        color: 'rgba(0, 0, 0, 0.88)',
-        fontWeight: '500',
-        padding: [0, 0, 0, 2]
+      rich: {
+        value: {
+          fontSize: 16,
+          fontWeight: '500',
+          color: chartColorMap.titleColor
+        },
+        unit: {
+          fontSize: 14,
+          color: chartColorMap.titleColor,
+          fontWeight: '500',
+          padding: [0, 0, 0, 2]
+        }
       }
     }
-  }
-};
+  };
+
+  return {
+    tooltip,
+    grid,
+    legend,
+    xAxis,
+    yAxis,
+    title,
+    chartColorMap,
+    barItemConfig,
+    lineItemConfig,
+    gaugeItemConfig,
+    isDark: isDarkTheme
+  };
+}

src/components/echarts/gauge.tsx

@@ -1,15 +1,17 @@
 import Chart from '@/components/echarts/chart';
-import {
-  gaugeItemConfig,
-  title as titleConfig
-} from '@/components/echarts/config';
+import useChartConfig from '@/components/echarts/config';
 import EmptyData from '@/components/empty-data';
-import { memo } from 'react';
+import React, { memo } from 'react';
 import { ChartProps } from './types';
 
 const GaugeChart: React.FC<Omit<ChartProps, 'seriesData' | 'xAxisData'>> = (
   props
 ) => {
+  const {
+    gaugeItemConfig,
+    title: titleConfig,
+    chartColorMap
+  } = useChartConfig();
   const { value, height, width, labelFormatter, title, color } = props;
   if (!value && value !== 0) {
     return <EmptyData height={height} title={title}></EmptyData>;
@@ -32,7 +34,7 @@ const GaugeChart: React.FC<Omit<ChartProps, 'seriesData' | 'xAxisData'>> = (
               ...gaugeItemConfig.axisLine.lineStyle,
               color: [
                 [value / 100, color],
-                [1, 'rgba(221, 221, 221, 0.5)']
+                [1, chartColorMap.gaugeBgColor]
               ]
             }
           },

src/components/echarts/h-bar.tsx

@@ -1,18 +1,11 @@
 import Chart from '@/components/echarts/chart';
-import {
-  grid,
-  legend,
-  title as titleConfig,
-  tooltip,
-  xAxis,
-  yAxis
-} from '@/components/echarts/config';
+import useChartConfig from '@/components/echarts/config';
 import EmptyData from '@/components/empty-data';
 import _ from 'lodash';
-import { memo } from 'react';
+import React, { memo, useMemo } from 'react';
 import { ChartProps } from './types';
 
-const BarChart: React.FC<ChartProps> = (props) => {
+const BarChart: React.FC<ChartProps & { maxItems?: number }> = (props) => {
   const {
     seriesData,
     xAxisData,
@@ -20,35 +13,57 @@ const BarChart: React.FC<ChartProps> = (props) => {
     width,
     labelFormatter,
     legendData,
+    maxItems,
     title
   } = props;
-  if (!seriesData.length) {
-    return <EmptyData height={height} title={title}></EmptyData>;
-  }
-
-  const options = {
-    title: titleConfig,
+  const {
     grid,
-    tooltip: {
-      ...tooltip
-    },
-    xAxis: {
-      ...xAxis,
-      axisLabel: {
-        ...xAxis.axisLabel,
-        formatter: labelFormatter
-      }
-    },
-    yAxis,
-    legend: {
-      ...legend,
-      data: []
-    },
+    legend,
+    title: titleConfig,
+    tooltip,
+    xAxis,
+    yAxis
+  } = useChartConfig();
 
-    series: []
-  };
+  const dataOptions = useMemo((): any => {
+    const options = {
+      title: {
+        ...titleConfig,
+        left: 'start'
+      },
+      grid: {
+        ...grid,
+        top: 0,
+        bottom: maxItems
+          ? `${(1 / maxItems) * (maxItems - xAxisData.length) * 100}%`
+          : 0
+      },
+      tooltip: {
+        ...tooltip
+      },
+      xAxis: {
+        ...xAxis,
+        axisLabel: {
+          ...xAxis.axisLabel,
+          formatter: labelFormatter
+        }
+      },
+      yAxis: {
+        ...yAxis,
+        axisLabel: {
+          ...yAxis.axisLabel,
+          overflow: 'truncate',
+          width: 75,
+          ellipsis: '...'
+        }
+      },
+      legend: {
+        ...legend,
+        data: []
+      },
 
-  const setDataOptions = () => {
+      series: []
+    };
     const data = _.map(seriesData, (item: any) => {
       return {
         ...item,
@@ -69,7 +84,6 @@ const BarChart: React.FC<ChartProps> = (props) => {
       animation: false,
       title: {
         ...options.title,
-        left: 'start',
         text: title
       },
       yAxis: {
@@ -103,16 +117,30 @@ const BarChart: React.FC<ChartProps> = (props) => {
       },
       series: data
     };
-  };
-
-  const dataOptions: any = setDataOptions();
+  }, [
+    seriesData,
+    xAxisData,
+    title,
+    labelFormatter,
+    tooltip,
+    grid,
+    xAxis,
+    yAxis,
+    legend
+  ]);
 
   return (
-    <Chart
-      height={height}
-      options={dataOptions}
-      width={width || '100%'}
-    ></Chart>
+    <>
+      {!seriesData.length ? (
+        <EmptyData height={height} title={title}></EmptyData>
+      ) : (
+        <Chart
+          height={height}
+          options={dataOptions}
+          width={width || '100%'}
+        ></Chart>
+      )}
+    </>
   );
 };
 

src/components/echarts/index.ts

@@ -1,25 +1,24 @@
 import type {
-  // 系列类型的定义后缀都为 SeriesOption
   BarSeriesOption,
   GaugeSeriesOption,
-  LineSeriesOption
+  LineSeriesOption,
+  ScatterSeriesOption
 } from 'echarts/charts';
-import { BarChart, GaugeChart, LineChart } from 'echarts/charts';
+import { BarChart, GaugeChart, LineChart, ScatterChart } from 'echarts/charts';
 import type {
   DatasetComponentOption,
   GridComponentOption,
-  // 组件类型的定义后缀都为 ComponentOption
   TitleComponentOption,
   TooltipComponentOption
 } from 'echarts/components';
 import {
-  // 数据集组件
+  DataZoomComponent,
   DatasetComponent,
   GridComponent,
   LegendComponent,
   TitleComponent,
   TooltipComponent,
-  // 内置数据转换器组件 (filter, sort)
+  // (filter, sort)
   TransformComponent
 } from 'echarts/components';
 import type { ComposeOption } from 'echarts/core';
@@ -27,7 +26,6 @@ import * as echarts from 'echarts/core';
 import { LabelLayout, UniversalTransition } from 'echarts/features';
 import { CanvasRenderer } from 'echarts/renderers';
 
-// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
 type ECOption = ComposeOption<
   | BarSeriesOption
   | LineSeriesOption
@@ -36,9 +34,10 @@ type ECOption = ComposeOption<
   | GridComponentOption
   | DatasetComponentOption
   | GaugeSeriesOption
+  | ScatterSeriesOption
 >;
 
-// 注册必须的组件
+// register components and charts
 echarts.use([
   LegendComponent,
   TitleComponent,
@@ -46,8 +45,10 @@ echarts.use([
   GridComponent,
   DatasetComponent,
   TransformComponent,
+  DataZoomComponent,
   BarChart,
   LineChart,
+  ScatterChart,
   GaugeChart,
   LabelLayout,
   UniversalTransition,

src/components/echarts/line-chart.tsx

@@ -1,16 +1,8 @@
 import Chart from '@/components/echarts/chart';
-import {
-  grid,
-  legend,
-  lineItemConfig,
-  title as titleConfig,
-  tooltip,
-  xAxis,
-  yAxis
-} from '@/components/echarts/config';
+import useChartConfig from '@/components/echarts/config';
 import EmptyData from '@/components/empty-data';
 import _ from 'lodash';
-import { memo } from 'react';
+import React, { memo, useMemo } from 'react';
 import { ChartProps } from './types';
 
 const LineChart: React.FC<ChartProps> = (props) => {
@@ -26,9 +18,25 @@ const LineChart: React.FC<ChartProps> = (props) => {
     smooth,
     title
   } = props;
-  if (!seriesData.length) {
-    return <EmptyData height={height} title={title}></EmptyData>;
-  }
+  const {
+    grid,
+    legend,
+    lineItemConfig,
+    title: titleConfig,
+    tooltip,
+    xAxis,
+    yAxis
+  } = useChartConfig();
+
+  const axisLabelFormatter = (value: string, index: number) => {
+    if (labelFormatter) {
+      return labelFormatter(value, index);
+    }
+    if (index === xAxisData.length - 1) {
+      return '';
+    }
+    return value;
+  };
 
   const options = {
     title: {
@@ -47,19 +55,24 @@ const LineChart: React.FC<ChartProps> = (props) => {
       ...xAxis,
       axisLabel: {
         ...xAxis.axisLabel,
-        formatter: labelFormatter
+        formatter: axisLabelFormatter
       }
     },
     yAxis,
     legend: {
       ...legend,
-      data: legendData
+      data: legendData.map((item: any) => {
+        return {
+          name: item,
+          icon: 'circle'
+        };
+      })
     },
 
     series: []
   };
 
-  const generateOptions = (): any => {
+  const dataOptions = useMemo((): any => {
     const data = _.map(seriesData, (item: any) => {
       return {
         ...item,
@@ -75,7 +88,7 @@ const LineChart: React.FC<ChartProps> = (props) => {
         }
       };
     });
-    const optionsConfig = {
+    return {
       ...options,
       animation: false,
       title: {
@@ -84,7 +97,11 @@ const LineChart: React.FC<ChartProps> = (props) => {
       },
       yAxis: {
         ...options.yAxis,
-        name: yAxisName
+        name: yAxisName,
+        nameTextStyle: {
+          fontSize: 12,
+          align: 'right'
+        }
       },
       xAxis: {
         ...options.xAxis,
@@ -92,15 +109,20 @@ const LineChart: React.FC<ChartProps> = (props) => {
       },
       series: data
     };
-    return optionsConfig;
-  };
-  const dataOptions = generateOptions();
+  }, [seriesData, xAxisData, yAxisName, title, smooth, legendData, options]);
+
   return (
-    <Chart
-      height={height}
-      options={dataOptions}
-      width={width || '100%'}
-    ></Chart>
+    <>
+      {!seriesData.length ? (
+        <EmptyData height={height} title={title}></EmptyData>
+      ) : (
+        <Chart
+          height={height}
+          options={dataOptions}
+          width={width || '100%'}
+        ></Chart>
+      )}
+    </>
   );
 };
 

src/components/echarts/mix-line-bar.tsx

@@ -0,0 +1,152 @@
+import Chart from '@/components/echarts/chart';
+import useChartConfig from '@/components/echarts/config';
+import EmptyData from '@/components/empty-data';
+import _ from 'lodash';
+import React, { useMemo } from 'react';
+import { ChartProps } from './types';
+
+const MixLineBarChart: React.FC<
+  ChartProps & {
+    chartData: {
+      line: any[];
+      bar: any[];
+    };
+  }
+> = (props) => {
+  const {
+    seriesData,
+    xAxisData,
+    yAxisName,
+    height,
+    width,
+    labelFormatter,
+    tooltipValueFormatter = null,
+    legendData = [],
+    smooth,
+    title,
+    chartData
+  } = props;
+  const {
+    grid,
+    legend,
+    lineItemConfig,
+    barItemConfig,
+    title: titleConfig,
+    tooltip,
+    xAxis,
+    yAxis
+  } = useChartConfig();
+
+  const { line: lineSeriesData, bar: barSeriesData } = chartData;
+
+  const options = {
+    title: {
+      text: ''
+    },
+    grid: {
+      ...grid,
+      right: 0,
+      top: 20,
+      bottom: 10
+    },
+    tooltip: {
+      ...tooltip,
+      formatter(params: any) {
+        return tooltipValueFormatter
+          ? tooltip.formatter(params, tooltipValueFormatter)
+          : tooltip.formatter(params);
+      }
+    },
+    xAxis: {
+      ...xAxis,
+      axisLabel: {
+        ...xAxis.axisLabel,
+        formatter: labelFormatter
+      }
+    },
+    yAxis,
+    legend: {
+      ...legend,
+      data: legendData,
+      itemGap: 20,
+      bottom: 5,
+      show: false
+    },
+
+    series: []
+  };
+
+  const dataOptions = useMemo((): any => {
+    const linedata = _.map(lineSeriesData, (item: any) => {
+      return {
+        ...item,
+        ...lineItemConfig,
+        smooth: smooth,
+        itemStyle: {
+          ...lineItemConfig.itemStyle,
+          color: item.color
+        },
+        yAxisIndex: 1,
+        lineStyle: {
+          ...lineItemConfig.lineStyle,
+          color: item.color
+        }
+      };
+    });
+
+    const barData = _.map(barSeriesData, (item: any) => {
+      return {
+        ...item,
+        ...barItemConfig,
+        stack: 'total',
+        yAxisIndex: 0,
+        itemStyle: {
+          ...item.itemStyle,
+          color: item.color
+        }
+      };
+    });
+
+    return {
+      ...options,
+      animation: false,
+      title: {
+        ...titleConfig,
+        text: title
+      },
+      yAxis: [
+        {
+          ...options.yAxis
+        },
+        {
+          ...options.yAxis,
+          nameTextStyle: {
+            fontSize: 12,
+            align: 'right'
+          }
+        }
+      ],
+      xAxis: {
+        ...options.xAxis,
+        data: xAxisData
+      },
+      series: [...barData, ...linedata]
+    };
+  }, [seriesData, xAxisData, yAxisName, title, smooth, legendData, options]);
+
+  return (
+    <>
+      {!lineSeriesData.length && !barSeriesData.length ? (
+        <EmptyData height={height} title={title}></EmptyData>
+      ) : (
+        <Chart
+          height={height}
+          options={dataOptions}
+          width={width || '100%'}
+        ></Chart>
+      )}
+    </>
+  );
+};
+
+export default MixLineBarChart;

src/components/echarts/scatter.tsx

@@ -0,0 +1,217 @@
+import Chart from '@/components/echarts/chart';
+import useChartConfig from '@/components/echarts/config';
+import EmptyData from '@/components/empty-data';
+import _ from 'lodash';
+import React, { memo, useCallback, useMemo, useRef } from 'react';
+import { ChartProps } from './types';
+
+const Scatter: React.FC<ChartProps> = (props) => {
+  const { grid, title: titleConfig, isDark, chartColorMap } = useChartConfig();
+  const { seriesData, xAxisData, height, width, showEmpty, title } = props;
+
+  const chart = useRef<any>(null);
+
+  const options = useMemo(() => {
+    const colorMap = isDark
+      ? {
+          split: chartColorMap.splitLineColor,
+          axis: chartColorMap.axislabelColor,
+          label: chartColorMap.axislabelColor
+        }
+      : {
+          split: '#F2F2F2',
+          axis: '#dcdcdc',
+          label: '#dcdcdc'
+        };
+
+    return {
+      animation: false,
+      grid: {
+        ...grid,
+        right: 10,
+        top: 10,
+        bottom: 2,
+        left: 2,
+        containLabel: true,
+        borderRadius: 4
+      },
+      xAxis: {
+        min: -1,
+        max: 1,
+        scale: false,
+        slient: true,
+        splitNumber: 15,
+        splitLine: {
+          lineStyle: {
+            color: colorMap.split
+          }
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: colorMap.axis
+          }
+        },
+        axisTick: {
+          show: false
+        },
+        axisLabel: {
+          show: true,
+          color: colorMap.label
+        },
+        boundaryGap: [0.05, 0.05]
+      },
+      yAxis: {
+        min: -1,
+        max: 1,
+        scale: false,
+        slient: true,
+        splitNumber: 10,
+        boundaryGap: [0.05, 0.05],
+        splitLine: {
+          lineStyle: {
+            color: colorMap.split
+          }
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: colorMap.axis
+          }
+        },
+        axisTick: {
+          show: false
+        },
+        axisLabel: {
+          show: true,
+          color: colorMap.label
+        }
+      },
+
+      symbol: 'roundRect',
+      label: {
+        show: true,
+        shadowColor: 'none',
+        textBorderColor: 'none',
+        formatter: (params: any) => {
+          return params.name;
+        }
+      },
+      series: []
+    };
+  }, [isDark]);
+
+  const findOverlappingPoints = useCallback(
+    (data: any[], currentPoint: any) => {
+      const overlappingPoints = [];
+      const symbolRadius = 16;
+
+      const [x1, y1] = chart.current.chart?.convertToPixel(
+        'grid',
+        currentPoint.value
+      );
+
+      const pixelPoints = data.map((point) => {
+        return {
+          ...point,
+          value: chart.current.chart?.convertToPixel('grid', point.value)
+        };
+      });
+
+      for (let j = 0; j < pixelPoints.length; j++) {
+        if (currentPoint.name === pixelPoints[j].name) {
+          overlappingPoints.push({ ...pixelPoints[j] });
+          continue;
+        }
+        const [x2, y2] = pixelPoints[j].value;
+
+        const distance = Math.sqrt(
+          Math.pow(_.round(x2 - x1, 2), 2) + Math.pow(_.round(y2 - y1, 2), 2)
+        );
+
+        if (distance <= symbolRadius) {
+          overlappingPoints.push({ ...pixelPoints[j] });
+        }
+      }
+
+      return overlappingPoints;
+    },
+    []
+  );
+
+  const renderNameInTooltip = useCallback((dataList: any[]) => {
+    if (!dataList.length || dataList.length < 2) {
+      return null;
+    }
+    const renderText = (item: any) => {
+      return `<span class="tooltip-item-name">
+               <span style="display:flex;justify-content:center;align-items: center;color:#fff;
+               margin-right:0;border-radius:4px;width:14px;
+               height:14px;background-color:${item?.itemStyle?.color};"
+               >${item.name}</span>
+             </span>`;
+    };
+    return renderText;
+  }, []);
+  const dataOptions = useMemo((): any => {
+    const seriseDataList = seriesData.map((item: any, index: number) => {
+      return {
+        ...item,
+        itemStyle: {
+          color: '#5470c6'
+        },
+        symbolSize: 16
+      };
+    });
+    return {
+      ...options,
+      tooltip: {
+        trigger: 'item',
+        borderWidth: 0,
+        backgroundColor: chartColorMap.colorBgContainerHover,
+        borderColor: 'transparent',
+        formatter(params: any, callback?: (val: any) => any) {
+          const dataList = findOverlappingPoints(seriseDataList, params.data);
+          let result = '';
+          const renderText: any = renderNameInTooltip(dataList);
+          dataList.forEach((item: any) => {
+            result += `
+            <span class="tooltip-item" style="justify-content: flex-start;">
+             ${renderText ? renderText(item) : ''}
+             <span class="tooltip-value">${item.text}</span>
+            </span>`;
+          });
+          return `<div class="tooltip-wrapper scatter">${result}</div>`;
+        }
+      },
+      title: {
+        ...titleConfig,
+        text: title
+      },
+      series: {
+        type: 'scatter',
+        labelLayout: {
+          hideOverlap: true
+        },
+        data: seriseDataList
+      }
+    };
+  }, [seriesData, xAxisData, title, options, findOverlappingPoints]);
+
+  return (
+    <>
+      {!seriesData.length && showEmpty ? (
+        <EmptyData height={height} title={title}></EmptyData>
+      ) : (
+        <Chart
+          ref={chart}
+          height={height}
+          options={dataOptions}
+          width={width || '100%'}
+        ></Chart>
+      )}
+    </>
+  );
+};
+
+export default memo(Scatter);

src/components/echarts/types.ts

@@ -1,9 +1,11 @@
+import type { LegendComponentOption } from 'echarts/components';
 export interface ChartProps {
   seriesData: any[];
+  showEmpty?: boolean;
   xAxisData: string[];
-  legendData?: string[];
-  labelFormatter?: (val?: any) => string;
-  tooltipValueFormatter?: (val?: any) => string;
+  legendData?: LegendComponentOption['data'];
+  labelFormatter?: (val?: any, index?: number) => string;
+  tooltipValueFormatter?: (val: any) => string;
   height: string | number;
   width?: string | number;
   title?: string;

src/components/editor-wrap/index.less

@@ -1,29 +1,21 @@
 .editor-wrap {
   border-radius: var(--border-radius-mini);
   overflow: hidden;
+  font-size: 0;
+
+  .code-pre {
+    margin-bottom: 0;
+  }
 
   .editor-header {
     display: flex;
-    padding: 6px 10px;
+    padding-block: 0;
+    padding-inline: 12px 10px;
     justify-content: space-between;
     align-items: center;
-    background-color: rgb(56, 56, 56);
-
-    .ant-select-selector {
-      background-color: rgba(255, 255, 255, 9%) !important;
-      color: rgba(255, 255, 255, 70%);
-
-      .ant-select-selection-item {
-        color: rgba(255, 255, 255, 70%);
-      }
-    }
-
-    .ant-select-arrow {
-      color: rgba(255, 255, 255, 70%);
-    }
+    background-color: var(--color-editor-header-bg);
   }
   //  set scrollbar style
-
   .scrollbar {
     .slider {
       border-radius: 6px;

src/components/editor-wrap/index.tsx

@@ -1,27 +1,40 @@
-import { Select } from 'antd';
 import React from 'react';
+import styled from 'styled-components';
 import CopyButton from '../copy-button';
+import SegmentLine from '../segment-line';
 import './index.less';
 
+const Wrapper = styled.div<{ $height: number }>`
+  height: ${(props) => props.$height}px;
+`;
+
 interface EditorwrapProps {
+  headerHeight?: number;
   header?: React.ReactNode;
   children: React.ReactNode;
   showHeader?: boolean;
   copyText: string;
   defaultValue?: string;
-  langOptions?: { label: string; value: string }[];
-  onChangeLang?: (value: string) => void;
+  langOptions?: Global.BaseOption<string | number>[];
+  styles?: {
+    wrapper?: React.CSSProperties;
+    header?: React.CSSProperties;
+    content?: React.CSSProperties;
+  };
+  onChangeLang?: (value: string | number) => void;
 }
 const EditorWrap: React.FC<EditorwrapProps> = ({
+  headerHeight = 40,
   header,
   children,
   copyText,
-  langOptions,
+  langOptions = [],
   onChangeLang,
   defaultValue,
+  styles = {},
   showHeader = true
 }) => {
-  const handleChangeLang = (value: string) => {
+  const handleChangeLang = (value: string | number) => {
     onChangeLang?.(value);
   };
   const renderHeader = () => {
@@ -30,15 +43,14 @@ const EditorWrap: React.FC<EditorwrapProps> = ({
     }
     if (showHeader) {
       return (
-        <div className="editor-header">
-          <Select
+        <Wrapper className="editor-header" $height={headerHeight}>
+          <SegmentLine
+            height={headerHeight}
             defaultValue={defaultValue}
-            style={{ width: 120 }}
-            size="middle"
-            variant="filled"
+            size="small"
             options={langOptions}
             onChange={handleChangeLang}
-          ></Select>
+          ></SegmentLine>
           <CopyButton
             text={copyText}
             size="small"
@@ -46,13 +58,13 @@ const EditorWrap: React.FC<EditorwrapProps> = ({
               color: 'rgba(255,255,255,.7)'
             }}
           />
-        </div>
+        </Wrapper>
       );
     }
     return null;
   };
   return (
-    <div className="editor-wrap">
+    <div className="editor-wrap" style={{ ...styles.wrapper }}>
       {renderHeader()}
       <div className="editor-content">{children}</div>
     </div>

src/components/editor/viewer.tsx

@@ -0,0 +1,89 @@
+import Editor from '@monaco-editor/react';
+import React, { useEffect, useRef, useState } from 'react';
+import EditorWrap from '../editor-wrap';
+
+interface ViewerProps {
+  lang: string;
+  defaultLang?: string;
+  langOptions?: Global.BaseOption<string>[];
+  config?: any;
+  value: string;
+  height?: string | number;
+  theme?: string;
+  showHeader?: boolean;
+}
+
+const ViewerEditor: React.FC<ViewerProps> = (props) => {
+  const editorRef = useRef<any>(null);
+  const {
+    lang,
+    value,
+    config,
+    langOptions,
+    defaultLang,
+    height = 380,
+    showHeader
+  } = props;
+  const [langType, setLangType] = useState(defaultLang);
+
+  const handleBeforeMount = (monaco: any) => {
+    monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
+      noSemanticValidation: false,
+      noSyntaxValidation: false,
+      diagnosticCodesToIgnore: [80001]
+    });
+  };
+
+  const handleEditorDidMount = (editor: any, monaco: any) => {
+    editorRef.current = editor;
+    console.log('loaded====', editor, monaco);
+  };
+
+  const handleOnChangeLang = (value: string) => {
+    setLangType(value);
+  };
+  const formatCode = () => {
+    if (editorRef.current) {
+      setTimeout(() => {
+        editorRef.current
+          ?.getAction?.('editor.action.formatDocument')
+          ?.run()
+          .then(() => {
+            console.log('format success');
+          });
+      }, 100);
+    }
+  };
+
+  useEffect(() => {
+    formatCode();
+    setTimeout(() => {
+      const lineCount = editorRef.current?.getModel().getLineCount(); // 获取总行数
+      editorRef.current?.revealLine(lineCount); // 滚动到最后一行
+    }, 100); // 可以调整延时，确保编辑器完全加载
+  }, [value]);
+
+  return (
+    <EditorWrap
+      copyText={value}
+      langOptions={langOptions}
+      defaultValue={lang}
+      showHeader={showHeader}
+      onChangeLang={handleOnChangeLang}
+    >
+      <Editor
+        height={height}
+        theme="vs-dark"
+        className="monaco-editor"
+        defaultLanguage={defaultLang}
+        language={langType}
+        value={value}
+        options={config}
+        beforeMount={handleBeforeMount}
+        onMount={handleEditorDidMount}
+      />
+    </EditorWrap>
+  );
+};
+
+export default React.memo(ViewerEditor);

src/components/footer/index.less

@@ -1,16 +0,0 @@
-// footer all styles
-.footer {
-  bottom: 0;
-  width: 100%;
-  background-color: transparent;
-  padding: 20px 0;
-  text-align: center;
-  font-size: var(--font-size-middle);
-  color: var(--color-text-2);
-
-  .footer-content-left-text {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-}

src/components/footer/index.tsx

@@ -3,30 +3,60 @@ import { getAtomStorage } from '@/atoms/utils';
 import VersionInfo, { modalConfig } from '@/components/version-info';
 import externalLinks from '@/constants/external-links';
 import { useIntl } from '@umijs/max';
-import { Button, Modal, Space } from 'antd';
-import './index.less';
+import { Button, Divider, Modal } from 'antd';
+import { createStyles } from 'antd-style';
+import styled from 'styled-components';
+
+const CompanyWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding-inline: 0 8px;
+`;
+
+const useStyles = createStyles(({ token, css }) => ({
+  footer: css`
+    bottom: 0;
+    width: 100%;
+    background-color: transparent;
+    padding: 20px 0;
+    text-align: center;
+    font-size: var(--font-size-middle);
+    color: ${token.colorTextTertiary};
+  `,
+  'footer-content-left-text': {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+}));
 
 const Footer: React.FC = () => {
   const intl = useIntl();
+  const [modal, contextHolder] = Modal.useModal();
+  const { styles } = useStyles();
 
   const showVersion = () => {
-    Modal.info({
+    modal.info({
       ...modalConfig,
+      width: 460,
       content: <VersionInfo intl={intl} />
     });
   };
 
   return (
-    <div className="footer">
-      <div className="footer-content">
-        <div className="footer-content-left">
-          <div className="footer-content-left-text">
-            <Space size={4}>
-              <span>&copy;</span>
-              <span> {new Date().getFullYear()}</span>
-              <span> {intl.formatMessage({ id: 'settings.company' })}</span>
-            </Space>
-            <Space size={8} style={{ marginLeft: 18 }}>
+    <>
+      {contextHolder}
+      <div className={styles.footer}>
+        <div className="footer-content">
+          <div className="footer-content-left">
+            <div className={styles['footer-content-left-text']}>
+              <CompanyWrapper>
+                <span>&copy;</span>
+                <span> {new Date().getFullYear()}</span>
+                <span> {intl.formatMessage({ id: 'settings.company' })}</span>
+              </CompanyWrapper>
+              <Divider type="vertical" />
               <Button
                 type="link"
                 size="small"
@@ -35,14 +65,15 @@ const Footer: React.FC = () => {
               >
                 {intl.formatMessage({ id: 'common.button.help' })}
               </Button>
+              <Divider type="vertical" />
               <Button type="link" size="small" onClick={showVersion}>
                 {getAtomStorage(GPUStackVersionAtom)?.version}
               </Button>
-            </Space>
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    </>
   );
 };
 

src/components/highlight-code/code-viewer-dark.tsx

@@ -4,17 +4,31 @@ import './styles/dark.less';
 
 interface CodeViewerProps {
   code: string;
+  copyValue?: string;
   lang: string;
   autodetect?: boolean;
   ignoreIllegals?: boolean;
   copyable?: boolean;
+  height?: string | number;
+  style?: React.CSSProperties;
 }
 const DarkViewer: React.FC<CodeViewerProps> = (props) => {
-  const { code, lang, autodetect, ignoreIllegals, copyable } = props || {};
+  const {
+    code,
+    copyValue,
+    lang,
+    autodetect,
+    ignoreIllegals,
+    copyable,
+    height = 'auto'
+  } = props || {};
 
   return (
     <CodeViewer
+      style={props.style}
+      height={height}
       code={code}
+      copyValue={copyValue}
       lang={lang}
       theme="dark"
       autodetect={autodetect}

src/components/highlight-code/code-viewer-light.tsx

@@ -4,17 +4,32 @@ import './styles/light.less';
 
 interface CodeViewerProps {
   code: string;
+  copyValue?: string;
   lang: string;
   autodetect?: boolean;
   ignoreIllegals?: boolean;
   copyable?: boolean;
+  height?: string | number;
+  style?: React.CSSProperties;
 }
 const LightViewer: React.FC<CodeViewerProps> = (props) => {
-  const { code, lang, autodetect, ignoreIllegals, copyable } = props || {};
+  const {
+    code,
+    copyValue,
+    lang,
+    autodetect,
+    ignoreIllegals,
+    copyable,
+    style,
+    height = 'auto'
+  } = props || {};
 
   return (
     <CodeViewer
+      style={style}
+      height={height}
       code={code}
+      copyValue={copyValue}
       lang={lang}
       theme="light"
       autodetect={autodetect}

src/components/highlight-code/code-viewer.tsx

@@ -1,24 +1,86 @@
 import classNames from 'classnames';
 import hljs from 'highlight.js';
 import { memo, useMemo } from 'react';
+import styled from 'styled-components';
 import CopyButton from '../copy-button';
 import { escapeHtml } from './utils';
 
 interface CodeViewerProps {
   code: string;
+  copyValue?: string;
   lang: string;
   autodetect?: boolean;
   ignoreIllegals?: boolean;
   copyable?: boolean;
+  height?: string | number;
   theme?: 'light' | 'dark';
+  style?: React.CSSProperties;
 }
+
+interface CodeHeaderProps {
+  copyValue: string;
+  copyable: boolean;
+  lang: string;
+  theme: 'light' | 'dark';
+}
+
+const CodeHeaderWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 32px;
+  padding: 0 12px;
+  font-size: 12px;
+  color: var(--ant-color-text-tertiary);
+  background-color: #fafafa;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  &.dark {
+    background-color: var(--color-editor-header-bg);
+    color: rgba(255, 255, 255, 0.65);
+  }
+`;
+
+const Wrapper = styled.div`
+  border-radius: var(--border-radius-mini);
+`;
+
+const CodeHeader: React.FC<CodeHeaderProps> = ({
+  copyValue,
+  lang,
+  theme,
+  copyable
+}) => {
+  if (!copyable) {
+    return null;
+  }
+  return (
+    <CodeHeaderWrapper
+      className={classNames({
+        dark: theme === 'dark',
+        light: theme === 'light'
+      })}
+    >
+      <span>{lang}</span>
+      <CopyButton
+        text={copyValue}
+        size="small"
+        style={{ color: '#abb2bf' }}
+      ></CopyButton>
+    </CodeHeaderWrapper>
+  );
+};
+
 const CodeViewer: React.FC<CodeViewerProps> = (props) => {
   const {
-    code,
+    code = '',
+    copyValue,
     lang,
     autodetect = true,
     ignoreIllegals = true,
-    copyable = true
+    copyable = true,
+    height = 'auto',
+    style
   } = props || {};
 
   const highlightedCode = useMemo(() => {
@@ -57,27 +119,39 @@ const CodeViewer: React.FC<CodeViewerProps> = (props) => {
   }, [code, lang, autodetect, ignoreIllegals]);
 
   return (
-    <pre
-      className={classNames('code-pre', {
-        dark: props.theme === 'dark',
-        light: props.theme === 'light',
-        copyable: copyable
-      })}
-    >
-      <code
-        className={highlightedCode.className}
-        dangerouslySetInnerHTML={{
-          __html: highlightedCode.value
+    <Wrapper>
+      <CodeHeader
+        copyValue={copyValue || code}
+        lang={lang}
+        copyable={copyable}
+        theme={props.theme || 'light'}
+      ></CodeHeader>
+      <pre
+        className={classNames(
+          'code-pre custome-scrollbar custom-scrollbar-horizontal ',
+          {
+            dark: props.theme === 'dark',
+            light: props.theme === 'light'
+          }
+        )}
+        style={{
+          marginBottom: 0,
+          height: height,
+          ...style
         }}
-      ></code>
-      {copyable && (
-        <CopyButton
-          text={code}
-          size="small"
-          style={{ color: '#abb2bf' }}
-        ></CopyButton>
-      )}
-    </pre>
+      >
+        <code
+          style={{ minHeight: height }}
+          className={classNames(highlightedCode.className, {
+            dark: props.theme === 'dark',
+            light: props.theme === 'light'
+          })}
+          dangerouslySetInnerHTML={{
+            __html: highlightedCode.value
+          }}
+        ></code>
+      </pre>
+    </Wrapper>
   );
 };
 

src/components/highlight-code/index.tsx

@@ -1,3 +1,5 @@
+import useUserSettings from '@/hooks/use-user-settings';
+import React from 'react';
 import CodeViewerDark from './code-viewer-dark';
 import CodeViewerLight from './code-viewer-light';
 import './styles/index.less';
@@ -7,18 +9,51 @@ const HighlightCode: React.FC<{
   lang?: string;
   copyable?: boolean;
   theme?: 'light' | 'dark';
+  fixedTheme?: 'light' | 'dark';
+  height?: string | number;
+  style?: React.CSSProperties;
+  copyValue?: string;
 }> = (props) => {
-  const { code, lang = 'bash', copyable = true, theme = 'dark' } = props;
+  const {
+    style,
+    code,
+    copyValue,
+    lang = 'bash',
+    copyable = true,
+    theme,
+    height = 'auto'
+  } = props;
+
+  const { userSettings } = useUserSettings();
+
+  const currentTheme = React.useMemo(() => {
+    const res = theme || userSettings.theme === 'realDark' ? 'dark' : 'light';
+    return res;
+  }, [theme, userSettings.theme]);
 
   return (
-    <div className="high-light-wrapper">
-      {theme === 'dark' ? (
-        <CodeViewerDark lang={lang} code={code} copyable={copyable} />
+    <div className="high-light-wrapper hj-wrapper">
+      {currentTheme === 'dark' ? (
+        <CodeViewerDark
+          lang={lang}
+          code={code}
+          copyValue={copyValue}
+          copyable={copyable}
+          height={height}
+          style={style}
+        />
       ) : (
-        <CodeViewerLight lang={lang} code={code} copyable={copyable} />
+        <CodeViewerLight
+          style={style}
+          lang={lang}
+          code={code}
+          copyValue={copyValue}
+          copyable={copyable}
+          height={height}
+        />
       )}
     </div>
   );
 };
 
-export default HighlightCode;
+export default React.memo(HighlightCode);

src/components/highlight-code/styles/dark.less

@@ -31,7 +31,7 @@ hue-6-2: #e6c07b
 .code-pre.dark {
   .hljs {
     color: #abb2bf;
-    background: #282c34;
+    background: var(--color-editor-dark);
   }
 
   .hljs-comment,

src/components/highlight-code/styles/index.less

@@ -1,5 +1,6 @@
 .high-light-wrapper {
   text-align: left;
+  font-size: var(--font-size-code);
 
   .hljs {
     font-weight: var(--font-weight-normal);
@@ -7,27 +8,46 @@
     padding-block: 1.2em;
 
     &::-webkit-scrollbar {
-      height: 8px;
+      height: var(--scrollbar-size);
     }
 
     &::-webkit-scrollbar-thumb {
-      background-color: rgba(211, 211, 220, 50%);
-      border-radius: 6px;
-
-      &:hover {
-        background-color: rgba(190, 190, 190, 100%);
-      }
+      background-color: transparent;
+      border-radius: 4px;
     }
 
     &::-webkit-scrollbar-track {
       background-color: transparent;
     }
+
+    &.light {
+      &:hover {
+        &::-webkit-scrollbar-thumb {
+          background-color: var(--color-scrollbar-thumb);
+          border-radius: 4px;
+        }
+      }
+    }
+
+    &.dark {
+      &:hover {
+        &::-webkit-scrollbar-thumb {
+          background-color: var(--scrollbar-handle-light-bg);
+          border-radius: 4px;
+        }
+      }
+    }
   }
 
   .code-pre {
     padding-inline: 12px 12px;
+    border-radius: 0 0 var(--border-radius-mini) var(--border-radius-mini);
     position: relative;
-    border-radius: var(--border-radius-mini);
+    white-space: pre-wrap;
+
+    code {
+      line-height: 1.5;
+    }
 
     &.copyable {
       padding-inline: 12px 32px;
@@ -40,11 +60,25 @@
     }
 
     &.dark {
-      background-color: #282c34;
+      background-color: var(--color-editor-dark);
+
+      &:hover {
+        &::-webkit-scrollbar-thumb {
+          background-color: var(--scrollbar-handle-light-bg);
+          border-radius: 4px;
+        }
+      }
     }
 
     &.light {
       background-color: rgb(250, 250, 250);
+
+      &:hover {
+        &::-webkit-scrollbar-thumb {
+          background-color: var(--color-scrollbar-thumb);
+          border-radius: 4px;
+        }
+      }
     }
   }
 }

src/components/highlight-code/styles/light.less

@@ -31,7 +31,7 @@ hue-6-2: #c18401
 .code-pre.light {
   .hljs {
     color: #383a42;
-    background: #fafafa;
+    background: var(--color-editor-light);
   }
 
   .hljs-comment,

src/components/icon-font/iconfont/iconfont.css

@@ -0,0 +1,547 @@
+@font-face {
+  font-family: iconfont; /* Project id 4613488 */
+  src: url('iconfont.woff2?t=1752112673765') format('woff2'),
+       url('iconfont.woff?t=1752112673765') format('woff'),
+       url('iconfont.ttf?t=1752112673765') format('truetype');
+}
+
+.iconfont {
+  font-family: iconfont !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-huggingface1::before {
+  content: "\e605";
+}
+
+.icon-modelscope_light::before {
+  content: "\e696";
+}
+
+.icon-catalog1::before {
+  content: "\e691";
+}
+
+.icon-chat-filled::before {
+  content: "\e692";
+}
+
+.icon-chat::before {
+  content: "\e693";
+}
+
+.icon-files-filled::before {
+  content: "\e694";
+}
+
+.icon-files::before {
+  content: "\e695";
+}
+
+.icon-models-filled::before {
+  content: "\e682";
+}
+
+.icon-image-filled::before {
+  content: "\e683";
+}
+
+.icon-audio1::before {
+  content: "\e684";
+}
+
+.icon-image1::before {
+  content: "\e685";
+}
+
+.icon-audio-filled::before {
+  content: "\e686";
+}
+
+.icon-reranker-filled::before {
+  content: "\e687";
+}
+
+.icon-embedding-filled::before {
+  content: "\e68a";
+}
+
+.icon-models::before {
+  content: "\e68b";
+}
+
+.icon-reranker::before {
+  content: "\e68c";
+}
+
+.icon-embedding::before {
+  content: "\e68d";
+}
+
+.icon-gpu-filled::before {
+  content: "\e68e";
+}
+
+.icon-catalog-filled::before {
+  content: "\e68f";
+}
+
+.icon-gpu1::before {
+  content: "\e690";
+}
+
+.icon-language::before {
+  content: "\e679";
+}
+
+.icon-help::before {
+  content: "\e67a";
+}
+
+.icon-key-filled::before {
+  content: "\e67b";
+}
+
+.icon-key::before {
+  content: "\e67d";
+}
+
+.icon-resources::before {
+  content: "\e67e";
+}
+
+.icon-users::before {
+  content: "\e67f";
+}
+
+.icon-resources-filled::before {
+  content: "\e680";
+}
+
+.icon-users-filled::before {
+  content: "\e681";
+}
+
+.icon-model::before {
+  content: "\e676";
+}
+
+.icon-model-filled::before {
+  content: "\e678";
+}
+
+.icon-layers-filled::before {
+  content: "\e671";
+}
+
+.icon-layers::before {
+  content: "\e673";
+}
+
+.icon-experiment::before {
+  content: "\e674";
+}
+
+.icon-experiment-filled::before {
+  content: "\e675";
+}
+
+.icon-dashboard::before {
+  content: "\e66d";
+}
+
+.icon-dashboard-filled::before {
+  content: "\e66e";
+}
+
+.icon-expand-left::before {
+  content: "\ea48";
+}
+
+.icon-expand-right::before {
+  content: "\ea49";
+}
+
+.icon-users-fill::before {
+  content: "\e677";
+}
+
+.icon-layers-fill::before {
+  content: "\e89d";
+}
+
+.icon-key-fill::before {
+  content: "\e80e";
+}
+
+.icon-server-fill::before {
+  content: "\e7a3";
+}
+
+.icon-model-fill::before {
+  content: "\e7b7";
+}
+
+.icon-left_panel_close::before {
+  content: "\e668";
+}
+
+.icon-left_panel_open::before {
+  content: "\e669";
+}
+
+.icon-playcircle-fill::before {
+  content: "\e665";
+}
+
+.icon-stopcircle-fill::before {
+  content: "\e666";
+}
+
+.icon-play-speed::before {
+  content: "\e856";
+}
+
+.icon-more::before {
+  content: "\e62e";
+}
+
+.icon-play::before {
+  content: "\e9f9";
+}
+
+.icon-pause::before {
+  content: "\e713";
+}
+
+.icon-dark_theme::before {
+  content: "\e646";
+}
+
+.icon-theme-auto-1::before {
+  content: "\e660";
+}
+
+.icon-theme-auto::before {
+  content: "\e663";
+}
+
+.icon-auto-theme-1::before {
+  content: "\e664";
+}
+
+.icon-auto-theme::before {
+  content: "\e662";
+}
+
+.icon-cols_3::before {
+  content: "\e65c";
+}
+
+.icon-cols_6::before {
+  content: "\e65d";
+}
+
+.icon-cols_2::before {
+  content: "\e65e";
+}
+
+.icon-cols_4::before {
+  content: "\e65f";
+}
+
+.icon-a-save1::before {
+  content: "\e65b";
+}
+
+.icon-uncollapse_all::before {
+  content: "\e657";
+}
+
+.icon-collapse::before {
+  content: "\e656";
+}
+
+.icon-rocket-launch::before {
+  content: "\e689";
+}
+
+.icon-user-filled::before {
+  content: "\e625";
+}
+
+.icon-assistant::before {
+  content: "\e62d";
+}
+
+.icon-assistant-filled::before {
+  content: "\e847";
+}
+
+.icon-save3::before {
+  content: "\e655";
+}
+
+.icon-fankuifaqs::before {
+  content: "\e7bf";
+}
+
+.icon-issues::before {
+  content: "\e816";
+}
+
+.icon-neicun::before {
+  content: "\e688";
+}
+
+.icon-collapse_all::before {
+  content: "\e66f";
+}
+
+.icon-down::before {
+  content: "\e654";
+}
+
+.icon-fenxiang::before {
+  content: "\e604";
+}
+
+.icon-mosaic-2::before {
+  content: "\e64f";
+}
+
+.icon-stars::before {
+  content: "\e8a8";
+}
+
+.icon-mosaic::before {
+  content: "\e636";
+}
+
+.icon-outline-play::before {
+  content: "\e653";
+}
+
+.icon-SelectionInverse::before {
+  content: "\eace";
+}
+
+.icon-justice1::before {
+  content: "\e652";
+}
+
+.icon-New_img::before {
+  content: "\e733";
+}
+
+.icon-new_release_outlined::before {
+  content: "\e66c";
+}
+
+.icon-new-releases::before {
+  content: "\e60f";
+}
+
+.icon-catalog::before {
+  content: "\e62b";
+}
+
+.icon-save2::before {
+  content: "\e635";
+}
+
+.icon-left-template::before {
+  content: "\e62a";
+}
+
+.icon-logs::before {
+  content: "\e6ec";
+}
+
+.icon-gpu::before {
+  content: "\e71e";
+}
+
+.icon-filled-gpu::before {
+  content: "\e6de";
+}
+
+.icon-outline-gpu::before {
+  content: "\e641";
+}
+
+.icon-ts-tubiao_webserver::before {
+  content: "\e716";
+}
+
+.icon-server::before {
+  content: "\e66a";
+}
+
+.icon-host::before {
+  content: "\e7c6";
+}
+
+.icon-playcircle::before {
+  content: "\e80f";
+}
+
+.icon-recreate::before {
+  content: "\e6a5";
+}
+
+.icon-save1::before {
+  content: "\e647";
+}
+
+.icon-save::before {
+  content: "\e67c";
+}
+
+.icon-upload_image::before {
+  content: "\e613";
+}
+
+.icon-sound-wave::before {
+  content: "\e619";
+}
+
+.icon-rank1::before {
+  content: "\e7cb";
+}
+
+.icon-cube::before {
+  content: "\e769";
+}
+
+.icon-speaker-slash::before {
+  content: "\ebb6";
+}
+
+.icon-random::before {
+  content: "\e603";
+}
+
+.icon-suijisenlin::before {
+  content: "\e60e";
+}
+
+.icon-stop2::before {
+  content: "\e8db";
+}
+
+.icon-stop::before {
+  content: "\e60b";
+}
+
+.icon-image::before {
+  content: "\e62c";
+}
+
+.icon-SpeakerSlash::before {
+  content: "\e661";
+}
+
+.icon-SpeakerHigh::before {
+  content: "\e670";
+}
+
+.icon-user_voice::before {
+  content: "\e667";
+}
+
+.icon-audio::before {
+  content: "\e985";
+}
+
+.icon-hard-disk::before {
+  content: "\eb1d";
+}
+
+.icon-new::before {
+  content: "\e612";
+}
+
+.icon-tu2::before {
+  content: "\e607";
+}
+
+.icon-robot::before {
+  content: "\e634";
+}
+
+.icon-robot1::before {
+  content: "\e602";
+}
+
+.icon-aizhineng::before {
+  content: "\e672";
+}
+
+.icon-copy::before {
+  content: "\e720";
+}
+
+.icon-AIzhineng::before {
+  content: "\e608";
+}
+
+.icon-clear::before {
+  content: "\e60a";
+}
+
+.icon-keyboard::before {
+  content: "\e61b";
+}
+
+.icon-networkerror::before {
+  content: "\e624";
+}
+
+.icon-external-link::before {
+  content: "\e66b";
+}
+
+.icon-huggingface::before {
+  content: "\e7d1";
+}
+
+.icon-ollama::before {
+  content: "\e601";
+}
+
+.icon-a-layout6-line::before {
+  content: "\e9ef";
+}
+
+.icon-a-Layout5::before {
+  content: "\e610";
+}
+
+.icon-English::before {
+  content: "\e8b3";
+}
+
+.icon-chinese::before {
+  content: "\e611";
+}
+
+.icon-yingguo::before {
+  content: "\e606";
+}
+
+.icon-code::before {
+  content: "\e84f";
+}
+
+.icon-stop1::before {
+  content: "\e783";
+}
+
+.icon-command::before {
+  content: "\e600";
+}
+

src/components/icon-font/iconfont/iconfont.json

@@ -0,0 +1,940 @@
+{
+  "id": "4613488",
+  "name": "gpustack",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "40865292",
+      "name": "huggingface",
+      "font_class": "huggingface1",
+      "unicode": "e605",
+      "unicode_decimal": 58885
+    },
+    {
+      "icon_id": "43616582",
+      "name": "modelscope_light",
+      "font_class": "modelscope_light",
+      "unicode": "e696",
+      "unicode_decimal": 59030
+    },
+    {
+      "icon_id": "44776845",
+      "name": "catalog",
+      "font_class": "catalog1",
+      "unicode": "e691",
+      "unicode_decimal": 59025
+    },
+    {
+      "icon_id": "44776848",
+      "name": "chat-filled",
+      "font_class": "chat-filled",
+      "unicode": "e692",
+      "unicode_decimal": 59026
+    },
+    {
+      "icon_id": "44776846",
+      "name": "chat",
+      "font_class": "chat",
+      "unicode": "e693",
+      "unicode_decimal": 59027
+    },
+    {
+      "icon_id": "44776841",
+      "name": "files-filled",
+      "font_class": "files-filled",
+      "unicode": "e694",
+      "unicode_decimal": 59028
+    },
+    {
+      "icon_id": "44776840",
+      "name": "files",
+      "font_class": "files",
+      "unicode": "e695",
+      "unicode_decimal": 59029
+    },
+    {
+      "icon_id": "44776851",
+      "name": "models-filled",
+      "font_class": "models-filled",
+      "unicode": "e682",
+      "unicode_decimal": 59010
+    },
+    {
+      "icon_id": "44776857",
+      "name": "image-filled",
+      "font_class": "image-filled",
+      "unicode": "e683",
+      "unicode_decimal": 59011
+    },
+    {
+      "icon_id": "44776856",
+      "name": "audio",
+      "font_class": "audio1",
+      "unicode": "e684",
+      "unicode_decimal": 59012
+    },
+    {
+      "icon_id": "44776855",
+      "name": "image",
+      "font_class": "image1",
+      "unicode": "e685",
+      "unicode_decimal": 59013
+    },
+    {
+      "icon_id": "44776850",
+      "name": "audio-filled",
+      "font_class": "audio-filled",
+      "unicode": "e686",
+      "unicode_decimal": 59014
+    },
+    {
+      "icon_id": "44776849",
+      "name": "reranker-filled",
+      "font_class": "reranker-filled",
+      "unicode": "e687",
+      "unicode_decimal": 59015
+    },
+    {
+      "icon_id": "44776852",
+      "name": "embedding-filled",
+      "font_class": "embedding-filled",
+      "unicode": "e68a",
+      "unicode_decimal": 59018
+    },
+    {
+      "icon_id": "44776853",
+      "name": "models",
+      "font_class": "models",
+      "unicode": "e68b",
+      "unicode_decimal": 59019
+    },
+    {
+      "icon_id": "44776844",
+      "name": "reranker",
+      "font_class": "reranker",
+      "unicode": "e68c",
+      "unicode_decimal": 59020
+    },
+    {
+      "icon_id": "44776854",
+      "name": "embedding",
+      "font_class": "embedding",
+      "unicode": "e68d",
+      "unicode_decimal": 59021
+    },
+    {
+      "icon_id": "44776843",
+      "name": "gpu-filled",
+      "font_class": "gpu-filled",
+      "unicode": "e68e",
+      "unicode_decimal": 59022
+    },
+    {
+      "icon_id": "44776847",
+      "name": "catalog-filled",
+      "font_class": "catalog-filled",
+      "unicode": "e68f",
+      "unicode_decimal": 59023
+    },
+    {
+      "icon_id": "44776842",
+      "name": "gpu",
+      "font_class": "gpu1",
+      "unicode": "e690",
+      "unicode_decimal": 59024
+    },
+    {
+      "icon_id": "44685190",
+      "name": "language",
+      "font_class": "language",
+      "unicode": "e679",
+      "unicode_decimal": 59001
+    },
+    {
+      "icon_id": "44685189",
+      "name": "help",
+      "font_class": "help",
+      "unicode": "e67a",
+      "unicode_decimal": 59002
+    },
+    {
+      "icon_id": "44684306",
+      "name": "key-filled",
+      "font_class": "key-filled",
+      "unicode": "e67b",
+      "unicode_decimal": 59003
+    },
+    {
+      "icon_id": "44684302",
+      "name": "key",
+      "font_class": "key",
+      "unicode": "e67d",
+      "unicode_decimal": 59005
+    },
+    {
+      "icon_id": "44684304",
+      "name": "resources",
+      "font_class": "resources",
+      "unicode": "e67e",
+      "unicode_decimal": 59006
+    },
+    {
+      "icon_id": "44684305",
+      "name": "users",
+      "font_class": "users",
+      "unicode": "e67f",
+      "unicode_decimal": 59007
+    },
+    {
+      "icon_id": "44684303",
+      "name": "resources-filled",
+      "font_class": "resources-filled",
+      "unicode": "e680",
+      "unicode_decimal": 59008
+    },
+    {
+      "icon_id": "44684301",
+      "name": "users-filled",
+      "font_class": "users-filled",
+      "unicode": "e681",
+      "unicode_decimal": 59009
+    },
+    {
+      "icon_id": "44684150",
+      "name": "model",
+      "font_class": "model",
+      "unicode": "e676",
+      "unicode_decimal": 58998
+    },
+    {
+      "icon_id": "44684149",
+      "name": "model-filled",
+      "font_class": "model-filled",
+      "unicode": "e678",
+      "unicode_decimal": 59000
+    },
+    {
+      "icon_id": "44684090",
+      "name": "layers-filled",
+      "font_class": "layers-filled",
+      "unicode": "e671",
+      "unicode_decimal": 58993
+    },
+    {
+      "icon_id": "44684091",
+      "name": "layers",
+      "font_class": "layers",
+      "unicode": "e673",
+      "unicode_decimal": 58995
+    },
+    {
+      "icon_id": "44684086",
+      "name": "experiment",
+      "font_class": "experiment",
+      "unicode": "e674",
+      "unicode_decimal": 58996
+    },
+    {
+      "icon_id": "44684085",
+      "name": "experiment",
+      "font_class": "experiment-filled",
+      "unicode": "e675",
+      "unicode_decimal": 58997
+    },
+    {
+      "icon_id": "44684021",
+      "name": "dashboard",
+      "font_class": "dashboard",
+      "unicode": "e66d",
+      "unicode_decimal": 58989
+    },
+    {
+      "icon_id": "44684020",
+      "name": "dashboard-filled",
+      "font_class": "dashboard-filled",
+      "unicode": "e66e",
+      "unicode_decimal": 58990
+    },
+    {
+      "icon_id": "40068272",
+      "name": "expand-left",
+      "font_class": "expand-left",
+      "unicode": "ea48",
+      "unicode_decimal": 59976
+    },
+    {
+      "icon_id": "40068278",
+      "name": "expand-right",
+      "font_class": "expand-right",
+      "unicode": "ea49",
+      "unicode_decimal": 59977
+    },
+    {
+      "icon_id": "1350497",
+      "name": "sq-users",
+      "font_class": "users-fill",
+      "unicode": "e677",
+      "unicode_decimal": 58999
+    },
+    {
+      "icon_id": "13691715",
+      "name": "layers",
+      "font_class": "layers-fill",
+      "unicode": "e89d",
+      "unicode_decimal": 59549
+    },
+    {
+      "icon_id": "14267903",
+      "name": "key-skeleton-alt",
+      "font_class": "key-fill",
+      "unicode": "e80e",
+      "unicode_decimal": 59406
+    },
+    {
+      "icon_id": "14341823",
+      "name": "cloud-server-solid",
+      "font_class": "server-fill",
+      "unicode": "e7a3",
+      "unicode_decimal": 59299
+    },
+    {
+      "icon_id": "40764011",
+      "name": "icon-model-selected",
+      "font_class": "model-fill",
+      "unicode": "e7b7",
+      "unicode_decimal": 59319
+    },
+    {
+      "icon_id": "44668359",
+      "name": "left_panel_close_36dp_1F1F1F_FILL0_wght400_GRAD0_o",
+      "font_class": "left_panel_close",
+      "unicode": "e668",
+      "unicode_decimal": 58984
+    },
+    {
+      "icon_id": "44668360",
+      "name": "left_panel_open_36dp_1F1F1F_FILL0_wght400_GRAD0_op",
+      "font_class": "left_panel_open",
+      "unicode": "e669",
+      "unicode_decimal": 58985
+    },
+    {
+      "icon_id": "44650419",
+      "name": "play circle-fill",
+      "font_class": "playcircle-fill",
+      "unicode": "e665",
+      "unicode_decimal": 58981
+    },
+    {
+      "icon_id": "44650418",
+      "name": "stop circle-fill",
+      "font_class": "stopcircle-fill",
+      "unicode": "e666",
+      "unicode_decimal": 58982
+    },
+    {
+      "icon_id": "8592899",
+      "name": "play-speed",
+      "font_class": "play-speed",
+      "unicode": "e856",
+      "unicode_decimal": 59478
+    },
+    {
+      "icon_id": "10941162",
+      "name": "more",
+      "font_class": "more",
+      "unicode": "e62e",
+      "unicode_decimal": 58926
+    },
+    {
+      "icon_id": "703373",
+      "name": "play",
+      "font_class": "play",
+      "unicode": "e9f9",
+      "unicode_decimal": 59897
+    },
+    {
+      "icon_id": "736882",
+      "name": "pause",
+      "font_class": "pause",
+      "unicode": "e713",
+      "unicode_decimal": 59155
+    },
+    {
+      "icon_id": "44028047",
+      "name": "dark_theme",
+      "font_class": "dark_theme",
+      "unicode": "e646",
+      "unicode_decimal": 58950
+    },
+    {
+      "icon_id": "44094552",
+      "name": "theme-auto-1",
+      "font_class": "theme-auto-1",
+      "unicode": "e660",
+      "unicode_decimal": 58976
+    },
+    {
+      "icon_id": "44094551",
+      "name": "theme-auto",
+      "font_class": "theme-auto",
+      "unicode": "e663",
+      "unicode_decimal": 58979
+    },
+    {
+      "icon_id": "44094550",
+      "name": "theme",
+      "font_class": "auto-theme-1",
+      "unicode": "e664",
+      "unicode_decimal": 58980
+    },
+    {
+      "icon_id": "44092227",
+      "name": "routine_36dp_1F1F1F_FILL0_wght400_GRAD0_opsz24",
+      "font_class": "auto-theme",
+      "unicode": "e662",
+      "unicode_decimal": 58978
+    },
+    {
+      "icon_id": "44086334",
+      "name": "cols_3",
+      "font_class": "cols_3",
+      "unicode": "e65c",
+      "unicode_decimal": 58972
+    },
+    {
+      "icon_id": "44086333",
+      "name": "cols_6",
+      "font_class": "cols_6",
+      "unicode": "e65d",
+      "unicode_decimal": 58973
+    },
+    {
+      "icon_id": "44086332",
+      "name": "cols_2",
+      "font_class": "cols_2",
+      "unicode": "e65e",
+      "unicode_decimal": 58974
+    },
+    {
+      "icon_id": "44086331",
+      "name": "cols_4",
+      "font_class": "cols_4",
+      "unicode": "e65f",
+      "unicode_decimal": 58975
+    },
+    {
+      "icon_id": "44065884",
+      "name": "save",
+      "font_class": "a-save1",
+      "unicode": "e65b",
+      "unicode_decimal": 58971
+    },
+    {
+      "icon_id": "43808249",
+      "name": "uncollapse_all",
+      "font_class": "uncollapse_all",
+      "unicode": "e657",
+      "unicode_decimal": 58967
+    },
+    {
+      "icon_id": "43807590",
+      "name": "collapse",
+      "font_class": "collapse",
+      "unicode": "e656",
+      "unicode_decimal": 58966
+    },
+    {
+      "icon_id": "22575690",
+      "name": "rocket-launch",
+      "font_class": "rocket-launch",
+      "unicode": "e689",
+      "unicode_decimal": 59017
+    },
+    {
+      "icon_id": "6050653",
+      "name": "user",
+      "font_class": "user-filled",
+      "unicode": "e625",
+      "unicode_decimal": 58917
+    },
+    {
+      "icon_id": "37486588",
+      "name": "assistant",
+      "font_class": "assistant",
+      "unicode": "e62d",
+      "unicode_decimal": 58925
+    },
+    {
+      "icon_id": "43220044",
+      "name": "AIAssistant",
+      "font_class": "assistant-filled",
+      "unicode": "e847",
+      "unicode_decimal": 59463
+    },
+    {
+      "icon_id": "43626126",
+      "name": "save",
+      "font_class": "save3",
+      "unicode": "e655",
+      "unicode_decimal": 58965
+    },
+    {
+      "icon_id": "20186129",
+      "name": "反馈faqs",
+      "font_class": "fankuifaqs",
+      "unicode": "e7bf",
+      "unicode_decimal": 59327
+    },
+    {
+      "icon_id": "42800361",
+      "name": "issues",
+      "font_class": "issues",
+      "unicode": "e816",
+      "unicode_decimal": 59414
+    },
+    {
+      "icon_id": "8211955",
+      "name": "ram",
+      "font_class": "neicun",
+      "unicode": "e688",
+      "unicode_decimal": 59016
+    },
+    {
+      "icon_id": "37125227",
+      "name": "collapse_all",
+      "font_class": "collapse_all",
+      "unicode": "e66f",
+      "unicode_decimal": 58991
+    },
+    {
+      "icon_id": "43363249",
+      "name": "down",
+      "font_class": "down",
+      "unicode": "e654",
+      "unicode_decimal": 58964
+    },
+    {
+      "icon_id": "159932",
+      "name": "search",
+      "font_class": "fenxiang",
+      "unicode": "e604",
+      "unicode_decimal": 58884
+    },
+    {
+      "icon_id": "40678285",
+      "name": "mosaic",
+      "font_class": "mosaic-2",
+      "unicode": "e64f",
+      "unicode_decimal": 58959
+    },
+    {
+      "icon_id": "22859935",
+      "name": "stars",
+      "font_class": "stars",
+      "unicode": "e8a8",
+      "unicode_decimal": 59560
+    },
+    {
+      "icon_id": "39566959",
+      "name": "mosaic",
+      "font_class": "mosaic",
+      "unicode": "e636",
+      "unicode_decimal": 58934
+    },
+    {
+      "icon_id": "43256197",
+      "name": "play circle",
+      "font_class": "outline-play",
+      "unicode": "e653",
+      "unicode_decimal": 58963
+    },
+    {
+      "icon_id": "27116743",
+      "name": "SelectionInverse",
+      "font_class": "SelectionInverse",
+      "unicode": "eace",
+      "unicode_decimal": 60110
+    },
+    {
+      "icon_id": "43035036",
+      "name": "justice",
+      "font_class": "justice1",
+      "unicode": "e652",
+      "unicode_decimal": 58962
+    },
+    {
+      "icon_id": "1740853",
+      "name": "New_img",
+      "font_class": "New_img",
+      "unicode": "e733",
+      "unicode_decimal": 59187
+    },
+    {
+      "icon_id": "9745732",
+      "name": "new_release_outlined",
+      "font_class": "new_release_outlined",
+      "unicode": "e66c",
+      "unicode_decimal": 58988
+    },
+    {
+      "icon_id": "40667024",
+      "name": "new-releases",
+      "font_class": "new-releases",
+      "unicode": "e60f",
+      "unicode_decimal": 58895
+    },
+    {
+      "icon_id": "41920256",
+      "name": "catalog",
+      "font_class": "catalog",
+      "unicode": "e62b",
+      "unicode_decimal": 58923
+    },
+    {
+      "icon_id": "13851416",
+      "name": "save",
+      "font_class": "save2",
+      "unicode": "e635",
+      "unicode_decimal": 58933
+    },
+    {
+      "icon_id": "3238366",
+      "name": "模板",
+      "font_class": "left-template",
+      "unicode": "e62a",
+      "unicode_decimal": 58922
+    },
+    {
+      "icon_id": "26746089",
+      "name": "logs",
+      "font_class": "logs",
+      "unicode": "e6ec",
+      "unicode_decimal": 59116
+    },
+    {
+      "icon_id": "1132892",
+      "name": "gpu",
+      "font_class": "gpu",
+      "unicode": "e71e",
+      "unicode_decimal": 59166
+    },
+    {
+      "icon_id": "38418656",
+      "name": "GPUxCPU",
+      "font_class": "filled-gpu",
+      "unicode": "e6de",
+      "unicode_decimal": 59102
+    },
+    {
+      "icon_id": "7556336",
+      "name": "gpu",
+      "font_class": "outline-gpu",
+      "unicode": "e641",
+      "unicode_decimal": 58945
+    },
+    {
+      "icon_id": "8040181",
+      "name": "webserver",
+      "font_class": "ts-tubiao_webserver",
+      "unicode": "e716",
+      "unicode_decimal": 59158
+    },
+    {
+      "icon_id": "6587064",
+      "name": "server",
+      "font_class": "server",
+      "unicode": "e66a",
+      "unicode_decimal": 58986
+    },
+    {
+      "icon_id": "40493325",
+      "name": "host",
+      "font_class": "host",
+      "unicode": "e7c6",
+      "unicode_decimal": 59334
+    },
+    {
+      "icon_id": "6151262",
+      "name": "play circle",
+      "font_class": "playcircle",
+      "unicode": "e80f",
+      "unicode_decimal": 59407
+    },
+    {
+      "icon_id": "25197526",
+      "name": "recreate",
+      "font_class": "recreate",
+      "unicode": "e6a5",
+      "unicode_decimal": 59045
+    },
+    {
+      "icon_id": "12689724",
+      "name": "save",
+      "font_class": "save1",
+      "unicode": "e647",
+      "unicode_decimal": 58951
+    },
+    {
+      "icon_id": "15838524",
+      "name": "save",
+      "font_class": "save",
+      "unicode": "e67c",
+      "unicode_decimal": 59004
+    },
+    {
+      "icon_id": "8782480",
+      "name": "upload_image",
+      "font_class": "upload_image",
+      "unicode": "e613",
+      "unicode_decimal": 58899
+    },
+    {
+      "icon_id": "14464883",
+      "name": "sound-wave",
+      "font_class": "sound-wave",
+      "unicode": "e619",
+      "unicode_decimal": 58905
+    },
+    {
+      "icon_id": "37200543",
+      "name": "rank",
+      "font_class": "rank1",
+      "unicode": "e7cb",
+      "unicode_decimal": 59339
+    },
+    {
+      "icon_id": "5127275",
+      "name": "cube",
+      "font_class": "cube",
+      "unicode": "e769",
+      "unicode_decimal": 59241
+    },
+    {
+      "icon_id": "28326047",
+      "name": "speaker-slash",
+      "font_class": "speaker-slash",
+      "unicode": "ebb6",
+      "unicode_decimal": 60342
+    },
+    {
+      "icon_id": "13059398",
+      "name": "随机",
+      "font_class": "random",
+      "unicode": "e603",
+      "unicode_decimal": 58883
+    },
+    {
+      "icon_id": "5978743",
+      "name": "random-forest",
+      "font_class": "suijisenlin",
+      "unicode": "e60e",
+      "unicode_decimal": 58894
+    },
+    {
+      "icon_id": "15617444",
+      "name": "stop",
+      "font_class": "stop2",
+      "unicode": "e8db",
+      "unicode_decimal": 59611
+    },
+    {
+      "icon_id": "8327181",
+      "name": "stop",
+      "font_class": "stop",
+      "unicode": "e60b",
+      "unicode_decimal": 58891
+    },
+    {
+      "icon_id": "714031",
+      "name": "image",
+      "font_class": "image",
+      "unicode": "e62c",
+      "unicode_decimal": 58924
+    },
+    {
+      "icon_id": "23563264",
+      "name": "SpeakerSlash",
+      "font_class": "SpeakerSlash",
+      "unicode": "e661",
+      "unicode_decimal": 58977
+    },
+    {
+      "icon_id": "23563318",
+      "name": "SpeakerHigh",
+      "font_class": "SpeakerHigh",
+      "unicode": "e670",
+      "unicode_decimal": 58992
+    },
+    {
+      "icon_id": "41955357",
+      "name": " user_voice",
+      "font_class": "user_voice",
+      "unicode": "e667",
+      "unicode_decimal": 58983
+    },
+    {
+      "icon_id": "29174196",
+      "name": "audio",
+      "font_class": "audio",
+      "unicode": "e985",
+      "unicode_decimal": 59781
+    },
+    {
+      "icon_id": "40073465",
+      "name": "hard-disk",
+      "font_class": "hard-disk",
+      "unicode": "eb1d",
+      "unicode_decimal": 60189
+    },
+    {
+      "icon_id": "12717507",
+      "name": "new",
+      "font_class": "new",
+      "unicode": "e612",
+      "unicode_decimal": 58898
+    },
+    {
+      "icon_id": "36135335",
+      "name": "mdp-template-modelscope",
+      "font_class": "tu2",
+      "unicode": "e607",
+      "unicode_decimal": 58887
+    },
+    {
+      "icon_id": "10710692",
+      "name": "robot",
+      "font_class": "robot",
+      "unicode": "e634",
+      "unicode_decimal": 58932
+    },
+    {
+      "icon_id": "12070718",
+      "name": "robot",
+      "font_class": "robot1",
+      "unicode": "e602",
+      "unicode_decimal": 58882
+    },
+    {
+      "icon_id": "10791813",
+      "name": "ai智能",
+      "font_class": "aizhineng",
+      "unicode": "e672",
+      "unicode_decimal": 58994
+    },
+    {
+      "icon_id": "19418384",
+      "name": "copy",
+      "font_class": "copy",
+      "unicode": "e720",
+      "unicode_decimal": 59168
+    },
+    {
+      "icon_id": "40757798",
+      "name": "AI智能",
+      "font_class": "AIzhineng",
+      "unicode": "e608",
+      "unicode_decimal": 58888
+    },
+    {
+      "icon_id": "36263088",
+      "name": "clear",
+      "font_class": "clear",
+      "unicode": "e60a",
+      "unicode_decimal": 58890
+    },
+    {
+      "icon_id": "5297059",
+      "name": "keyboard",
+      "font_class": "keyboard",
+      "unicode": "e61b",
+      "unicode_decimal": 58907
+    },
+    {
+      "icon_id": "11539157",
+      "name": "network error",
+      "font_class": "networkerror",
+      "unicode": "e624",
+      "unicode_decimal": 58916
+    },
+    {
+      "icon_id": "14465073",
+      "name": "external-link",
+      "font_class": "external-link",
+      "unicode": "e66b",
+      "unicode_decimal": 58987
+    },
+    {
+      "icon_id": "38465464",
+      "name": "huggingface",
+      "font_class": "huggingface",
+      "unicode": "e7d1",
+      "unicode_decimal": 59345
+    },
+    {
+      "icon_id": "40568411",
+      "name": "ollama",
+      "font_class": "ollama",
+      "unicode": "e601",
+      "unicode_decimal": 58881
+    },
+    {
+      "icon_id": "24341846",
+      "name": "layout 6-line",
+      "font_class": "a-layout6-line",
+      "unicode": "e9ef",
+      "unicode_decimal": 59887
+    },
+    {
+      "icon_id": "31345353",
+      "name": "a-Layout5",
+      "font_class": "a-Layout5",
+      "unicode": "e610",
+      "unicode_decimal": 58896
+    },
+    {
+      "icon_id": "10031665",
+      "name": "English",
+      "font_class": "English",
+      "unicode": "e8b3",
+      "unicode_decimal": 59571
+    },
+    {
+      "icon_id": "9134244",
+      "name": "chinese",
+      "font_class": "chinese",
+      "unicode": "e611",
+      "unicode_decimal": 58897
+    },
+    {
+      "icon_id": "12176725",
+      "name": "english",
+      "font_class": "yingguo",
+      "unicode": "e606",
+      "unicode_decimal": 58886
+    },
+    {
+      "icon_id": "34453176",
+      "name": "code",
+      "font_class": "code",
+      "unicode": "e84f",
+      "unicode_decimal": 59471
+    },
+    {
+      "icon_id": "12579515",
+      "name": "stop",
+      "font_class": "stop1",
+      "unicode": "e783",
+      "unicode_decimal": 59267
+    },
+    {
+      "icon_id": "1842082",
+      "name": "command",
+      "font_class": "command",
+      "unicode": "e600",
+      "unicode_decimal": 58880
+    }
+  ]
+}

src/components/icon-font/index.tsx

@@ -1,7 +1,8 @@
 import { createFromIconfontCN } from '@ant-design/icons';
+import './iconfont/iconfont.js';
 
 const IconFont = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/c/font_4613488_3n3aubqzylv.js'
+  scriptUrl: ''
 });
 
 export default IconFont;

src/components/image-editor/extract-image-colors.ts

@@ -0,0 +1,149 @@
+/**
+ * Creates a canvas element and its rendering context.
+ * @param {number} width - Canvas width.
+ * @param {number} height - Canvas height.
+ * @returns {{ canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D }} - The created canvas and context.
+ */
+function createCanvas(
+  width: number,
+  height: number
+): { canvas: HTMLCanvasElement; ctx: CanvasRenderingContext2D } {
+  const canvas = document.createElement('canvas');
+  canvas.width = width;
+  canvas.height = height;
+  return { canvas, ctx: canvas.getContext('2d')! };
+}
+
+/**
+ * Checks if a pixel is white.
+ * @param {Uint8ClampedArray} pixels - The image pixel data.
+ * @param {number} x - The pixel's X coordinate.
+ * @param {number} y - The pixel's Y coordinate.
+ * @param {number} width - The image width.
+ * @returns {boolean} - Whether the pixel is white.
+ */
+function isWhite(
+  pixels: Uint8ClampedArray,
+  x: number,
+  y: number,
+  width: number
+): boolean {
+  let index = (y * width + x) * 4;
+  return (
+    pixels[index] === 255 &&
+    pixels[index + 1] === 255 &&
+    pixels[index + 2] === 255
+  );
+}
+
+/**
+ * Performs a flood fill to find all connected white pixels.
+ * @param {Uint8ClampedArray} pixels - The image pixel data.
+ * @param {number} width - The image width.
+ * @param {number} height - The image height.
+ * @param {number} x - The starting X coordinate.
+ * @param {number} y - The starting Y coordinate.
+ * @param {boolean[][]} visited - A 2D array to track visited pixels.
+ * @param {Array<{ x: number, y: number }>} block - The list of coordinates forming a white block.
+ */
+function floodFill(
+  pixels: Uint8ClampedArray,
+  width: number,
+  height: number,
+  x: number,
+  y: number,
+  visited: boolean[][],
+  block: Array<{ x: number; y: number }>
+): void {
+  let stack: Array<[number, number]> = [[x, y]];
+  let directions: Array<[number, number]> = [
+    [1, 0],
+    [-1, 0],
+    [0, 1],
+    [0, -1], // 4-directional search (can be extended to 8-directional)
+    [1, 1],
+    [-1, -1],
+    [1, -1],
+    [-1, 1] // Diagonal directions
+  ];
+
+  while (stack.length) {
+    let [cx, cy] = stack.pop()!;
+    if (
+      cx < 0 ||
+      cy < 0 ||
+      cx >= width ||
+      cy >= height ||
+      visited[cy][cx] ||
+      !isWhite(pixels, cx, cy, width)
+    ) {
+      continue;
+    }
+
+    visited[cy][cx] = true;
+    block.push({ x: cx, y: cy });
+
+    directions.forEach(([dx, dy]) => stack.push([cx + dx, cy + dy]));
+  }
+}
+
+/**
+ * Extracts all white blocks from an image.
+ * @param {ImageData} imageData - The image pixel data.
+ * @returns {Array<Array<{ x: number, y: number }>>} - List of white blocks, each containing pixel coordinates.
+ */
+function getWhiteBlocks(
+  imageData: ImageData
+): Array<Array<{ x: number; y: number }>> {
+  const { data, width, height } = imageData;
+  let visited: boolean[][] = Array.from({ length: height }, () =>
+    new Array(width).fill(false)
+  );
+  let whiteBlocks: Array<Array<{ x: number; y: number }>> = [];
+
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      if (isWhite(data, x, y, width) && !visited[y][x]) {
+        let block: Array<{ x: number; y: number }> = [];
+        floodFill(data, width, height, x, y, visited, block);
+        whiteBlocks.push(block);
+      }
+    }
+  }
+  return whiteBlocks;
+}
+
+/**
+ * Loads an image from a file.
+ * @param {File} file - The image file.
+ * @returns {Promise<HTMLImageElement>} - The loaded image element.
+ */
+function loadImage(file: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.src = file;
+    img.onload = () => resolve(img);
+    img.onerror = () => reject(new Error('Image loading failed'));
+  });
+}
+
+/**
+ * Processes the image file and extracts white blocks.
+ * @param {File} file - The uploaded image file.
+ * @returns {Promise<Array<Array<{ x: number, y: number }>>>} - List of white blocks with pixel coordinates.
+ */
+async function processImage(
+  file: string
+): Promise<Array<Array<{ x: number; y: number }>>> {
+  const img = await loadImage(file);
+  const { canvas, ctx } = createCanvas(img.width, img.height);
+  ctx.drawImage(img, 0, 0);
+
+  const imageData = ctx.getImageData(0, 0, img.width, img.height);
+  const whiteBlocks = getWhiteBlocks(imageData);
+
+  URL.revokeObjectURL(img.src);
+  return whiteBlocks;
+}
+
+export { processImage };