fix: did not cache workers and clusters in model files

Remove obsolet bracket in python-example-code

.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,2 @@
-npx --no-install lint-staged --quiet
+
+ 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

@@ -44,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,9 +1,9 @@
 import { defineConfig } from '@umijs/max';
+import keepAlive from './keep-alive';
+import { compressionPluginConfig, monacoPluginConfig } from './plugins';
 import proxy from './proxy';
 import routes from './routes';
-import theme from './theme';
 import { getBranchInfo } from './utils';
-const CompressionWebpackPlugin = require('compression-webpack-plugin');
 
 const versionInfo = getBranchInfo();
 process.env.VERSION = JSON.stringify(versionInfo);
@@ -14,11 +14,23 @@ const isProduction = env === 'production';
 const t = Date.now();
 export default defineConfig({
   proxy: {
-    ...proxy()
+    ...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', 'monaco-editor']
+  },
   base: process.env.npm_config_base || '/',
   ...(isProduction
     ? {
@@ -44,38 +56,32 @@ export default defineConfig({
           config.output
             .filename(`js/[name].${t}.js`)
             .chunkFilename(`js/[name].${t}.chunk.js`);
-          config
-            .plugin('compression-webpack-plugin')
-            .use(CompressionWebpackPlugin, [
-              {
-                filename: '[path][base].gz',
-                algorithm: 'gzip',
-                test: /\.(js|css|html|svg)$/,
-                threshold: 10240,
-                minRatio: 0.8
-              }
-            ]);
+          compressionPluginConfig(config);
+          monacoPluginConfig(config);
         }
       }
-    : {}),
-
+    : {
+        chainWebpack(config) {
+          monacoPluginConfig(config);
+        }
+      }),
   favicons: ['/static/favicon.png'],
   jsMinifier: 'terser',
   cssMinifier: 'cssnano',
   presets: ['umi-presets-pro'],
   clickToComponent: {},
   antd: {
-    style: 'less',
-    configProvider: {
-      componentSize: 'large',
-      theme
-    }
+    style: 'less'
   },
   hash: true,
   access: {},
   model: {},
   initialState: {},
   request: {},
+  routePrefetch: {
+    defaultPrefetch: 'intent'
+  },
+  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/plugins.ts

@@ -0,0 +1,36 @@
+import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';
+const CompressionWebpackPlugin = require('compression-webpack-plugin');
+
+export function monacoPluginConfig(config: any) {
+  return config
+    .plugin('monaco-editor-webpack-plugin')
+    .use(MonacoWebpackPlugin, [
+      {
+        languages: ['yaml'],
+        customLanguages: [
+          {
+            label: 'yaml',
+            entry: 'monaco-yaml',
+            worker: {
+              id: 'monaco-yaml/yamlWorker',
+              entry: 'monaco-yaml/yaml.worker'
+            }
+          }
+        ]
+      }
+    ]);
+}
+
+export function compressionPluginConfig(config: any) {
+  return config
+    .plugin('compression-webpack-plugin')
+    .use(CompressionWebpackPlugin, [
+      {
+        filename: '[path][base].gz',
+        algorithm: 'gzip',
+        test: /\.(js|css|html|svg)$/,
+        threshold: 10240,
+        minRatio: 0.8
+      }
+    ]);
+}

config/proxy.ts

@@ -1,6 +1,7 @@
 const proxyTableList = [
   'cli',
   'v1',
+  'v2',
   'auth',
   'v1-openai',
   'version',
@@ -18,6 +19,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,51 +1,256 @@
+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-rocket-launch1',
+        selectedIcon: 'icon-rocket-launch-fill',
+        defaultIcon: 'icon-rocket-launch1',
+        access: 'canSeeAdmin',
+        component: './llmodels/index'
+      },
+      {
+        name: 'userModels',
+        path: '/models/user-models',
+        key: 'userModels',
+        icon: 'icon-models',
+        selectedIcon: 'icon-models-filled',
+        defaultIcon: 'icon-models',
+        access: 'canSeeUser',
+        component: './llmodels/user-models'
+      }
+    ]
   },
   {
     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: 'backendsList',
+        path: '/resources/backends',
+        key: 'backendsList',
+        icon: 'icon-backend',
+        selectedIcon: 'icon-backend-filled',
+        defaultIcon: 'icon-backend',
+        access: 'canSeeAdmin',
+        component: './backends/index'
+      },
+      {
+        name: 'modelfiles',
+        path: '/resources/modelfiles',
+        key: 'modelfiles',
+        icon: 'icon-files',
+        selectedIcon: 'icon-files-filled',
+        defaultIcon: 'icon-files',
+        component: './resources/components/model-files'
+      }
+    ]
+  },
+  {
+    name: 'clusterManagement',
+    path: '/cluster-management',
+    key: 'clusterManagement',
+    access: 'canSeeAdmin',
+    routes: [
+      {
+        path: '/cluster-management',
+        redirect: '/cluster-management/clusters/list'
+      },
+      {
+        name: 'clusters',
+        path: '/cluster-management/clusters/list',
+        key: 'clusters',
+        icon: 'icon-cluster2-outline',
+        selectedIcon: 'icon-cluster2-filled',
+        defaultIcon: 'icon-cluster2-outline',
+        component: './cluster-management/clusters',
+        subMenu: [
+          '/cluster-management/clusters/detail',
+          '/cluster-management/clusters/create'
+        ]
+      },
+      {
+        name: 'clusterDetail',
+        path: '/cluster-management/clusters/detail',
+        key: 'clusterDetail',
+        icon: 'icon-cluster2-outline',
+        selectedIcon: 'icon-cluster2-filled',
+        defaultIcon: 'icon-cluster2-outline',
+        hideInMenu: true,
+        component: './cluster-management/cluster-detail'
+      },
+      {
+        name: 'clusterCreate',
+        path: '/cluster-management/clusters/create',
+        key: 'clusterCreate',
+        icon: 'icon-cluster2-outline',
+        selectedIcon: 'icon-cluster2-filled',
+        defaultIcon: 'icon-cluster2-outline',
+        hideInMenu: true,
+        component: './cluster-management/cluster-create'
+      },
+      {
+        name: 'credentials',
+        path: '/cluster-management/credentials',
+        key: 'credentials',
+        icon: 'icon-credential-outline',
+        selectedIcon: 'icon-credential-filled',
+        defaultIcon: 'icon-credential-outline',
+        component: './cluster-management/credentials'
+      }
+    ]
+  },
+  {
+    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: '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',
@@ -66,7 +271,7 @@ export default [
     name: '404',
     path: '*',
     key: '404',
-    layout: false,
+    hideInMenu: true,
     component: './404'
   }
 ];

config/theme.ts

@@ -1,55 +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'
-    },
-    Tooltip: {
-      colorBgSpotlight: 'rgba(110,110,110,1)'
-      // sizePopupArrow: 0
-    },
-    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',
-    colorSuccess: '#54cc98',
-    borderRadius: 4,
-    borderRadiusSM: 2,
-    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

@@ -3,6 +3,7 @@
   "author": "jialin",
   "scripts": {
     "build": "max build",
+    "check:locales": "npx tsx ./src/locales/check.ts",
     "dev": "max dev",
     "format": "prettier --cache --write .",
     "postinstall": "max setup",
@@ -16,7 +17,8 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.5.1",
-    "@ant-design/pro-components": "^2.7.18",
+    "@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",
@@ -27,39 +29,67 @@
     "@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.20.6",
+    "antd": "^5.25.4",
     "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",
+    "jdenticon": "^3.3.0",
     "jotai": "^2.8.4",
+    "js-yaml": "^4.1.0",
+    "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",
+    "minimatch": "^10.0.3",
+    "ml-dataset-iris": "^1.2.1",
+    "ml-pca": "^4.1.1",
+    "monaco-editor": "^0.53.0",
+    "monaco-editor-webpack-plugin": "^7.1.0",
+    "monaco-yaml": "^5.4.0",
     "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.3",
     "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-intersection-observer": "^9.16.0",
+    "react-markdown": "^9.0.3",
+    "rehype-katex": "^7.0.1",
+    "remark-breaks": "^4.0.0",
+    "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0",
     "simplebar-react": "^3.2.6",
+    "styled-components": "^6.1.15",
+    "tinycolor2": "^1.6.0",
     "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",
@@ -76,7 +106,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"
+    }
   }
 }

src/access.ts

@@ -4,8 +4,15 @@ export default (initialState: { currentUser?: Global.UserInfo }) => {
     initialState.currentUser &&
     initialState.currentUser.is_admin
   );
+  const canSeeUser = !!(
+    initialState &&
+    initialState.currentUser &&
+    !initialState.currentUser.is_admin
+  );
+
   return {
     canSeeAdmin,
+    canSeeUser,
     canDelete: true,
     canLogin: true
   };

src/app.tsx

@@ -1,14 +1,32 @@
 import { GPUStackVersionAtom, UpdateCheckAtom } from '@/atoms/user';
 import { setAtomStorage } from '@/atoms/utils';
+import { DEFAULT_ENTER_PAGE, GPUSTACK_API_BASE_URL } from '@/config/settings';
 import { requestConfig } from '@/request-config';
 import {
   queryCurrentUserState,
   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';
+import { message } from 'antd';
 
-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(DEFAULT_ENTER_PAGE.adminForFirst);
+    }
+  }
+};
 
 // runtime configuration
 export async function getInitialState(): Promise<{
@@ -20,14 +38,19 @@ export async function getInitialState(): Promise<{
   const getUpdateCheck = async () => {
     try {
       const data = await updateCheck();
-      setAtomStorage(UpdateCheckAtom, data);
+
+      setAtomStorage(UpdateCheckAtom, {
+        ...data
+      });
       return data;
     } catch (error) {
       console.error('updateCheck error', error);
     }
   };
 
-  const fetchUserInfo = async (): Promise<Global.UserInfo> => {
+  const fetchUserInfo = async (config?: {
+    skipErrorHandler?: boolean;
+  }): Promise<Global.UserInfo> => {
     try {
       const data = await queryCurrentUserState({
         skipErrorHandler: true
@@ -36,8 +59,19 @@ export async function getInitialState(): Promise<{
         getUpdateCheck();
       }
       return data;
-    } catch (error) {
-      history.push(loginPath);
+    } catch (error: any) {
+      const data = error?.response?.data;
+      if (data?.code === 401 && data?.message.includes('deactivate')) {
+        message.error({
+          content: (
+            <div>
+              <span>{data?.message}</span>
+            </div>
+          ),
+          duration: 5
+        });
+      }
+      history.push(DEFAULT_ENTER_PAGE.login);
     }
     return {} as Global.UserInfo;
   };
@@ -45,7 +79,16 @@ export async function getInitialState(): Promise<{
   const getAppVersionInfo = async () => {
     try {
       const data = await queryVersionInfo();
-      setAtomStorage(GPUStackVersionAtom, data);
+
+      const isDev = data.version?.indexOf('0.0.0') > -1;
+      const isRc = data.version?.indexOf('rc') > -1;
+
+      setAtomStorage(GPUStackVersionAtom, {
+        ...data,
+        isProd: !isDev && !isRc,
+        isDev,
+        isRc
+      });
     } catch (error) {
       console.error('queryVersionInfo error', error);
     }
@@ -53,9 +96,9 @@ export async function getInitialState(): Promise<{
 
   getAppVersionInfo();
 
-  if (![loginPath].includes(location.pathname)) {
+  if (![DEFAULT_ENTER_PAGE.login].includes(location.pathname)) {
     const userInfo = await fetchUserInfo();
-
+    checkDefaultPage(userInfo);
     return {
       fetchUserInfo,
       currentUser: userInfo
@@ -67,6 +110,6 @@ export async function getInitialState(): Promise<{
 }
 
 export const request: RequestConfig = {
-  baseURL: ' /v1',
+  baseURL: `/${GPUSTACK_API_BASE_URL}`,
   ...requestConfig
 };

src/assets/images/oidc.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1755020187776" class="icon" viewBox="0 0 1105 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7392" xmlns:xlink="http://www.w3.org/1999/xlink" width="138.125" height="128"><path d="M507.2896 133.44768l130.98496-71.4496v820.9408l-130.97984 69.71392V133.44768z" fill="#F38019" p-id="7393"></path><path d="M479.39072 323.968a724.30592 724.30592 0 0 0-77.056 16.6144C118.35904 417.01376 37.77536 603.8016 67.95776 701.696c30.11584 97.8944 161.03424 263.2192 439.2704 250.19904 0.13824-27.41248 0.13824-57.73824 0-90.89536-200.49408-26.37824-302.67904-88.82688-306.55488-187.40736-5.74464-147.74272 134.1696-216.90368 217.87136-229.0176 16.82432-2.49344 37.66272-5.67808 61.19936-8.6528l-0.27648-111.9488h-0.07168z m185.12384 107.65312c52.1984 5.6832 103.57248 18.69312 147.0464 44.44672-10.65984 5.19168-34.26816 19.73248-70.82496 43.47904l290.49344 66.39104-16.54272-206.58176-78.37184 44.30336c-116.10112-57.8048-205.19936-91.0336-267.29984-99.6864l-4.50048 107.648z" fill="#ADAFB3" p-id="7394"></path></svg>

src/assets/images/password.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M140-180v-88.92q0-29.39 15.96-54.43 15.96-25.03 42.66-38.49 59.3-29.08 119.65-43.62Q378.62-420 440-420q21.06 0 42.12 1.89 21.05 1.88 42.11 5.65-1.69 51.46 20.81 96.81Q567.54-270.31 609-240v60H140ZM753.85-72.31l-53.35-53.14v-164.73q-39.11-11.51-63.85-43.97-24.73-32.46-24.73-74.7 0-51.46 36.38-87.84t87.85-36.38q51.46 0 87.66 36.39Q860-460.28 860-408.79q0 39.94-22.42 70.71-22.43 30.77-57.2 44.23l44.23 44.23-53.07 53.2 53.07 53.19-70.76 70.92ZM440-484.62q-57.75 0-98.87-41.12Q300-566.86 300-624.61q0-57.75 41.13-98.88 41.12-41.12 98.87-41.12 57.75 0 98.87 41.12Q580-682.36 580-624.61q0 57.75-41.13 98.87-41.12 41.12-98.87 41.12Zm296.15 93.47q14.7 0 25.04-10.54 10.35-10.54 10.35-25.23 0-14.69-10.35-25.04-10.34-10.35-25.04-10.35-14.69 0-25.23 10.35-10.54 10.35-10.54 25.04t10.54 25.23q10.54 10.54 25.23 10.54Z"/></svg>

src/assets/images/saml.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none">
+␍<g fill="#C22E33">
+␍<path d="M7.754 2l.463.41c.343.304.687.607 1.026.915C11.44 5.32 13.3 7.565 14.7 10.149c.072.132.137.268.202.403l.098.203-.108.057-.081-.115-.21-.299-.147-.214c-1.019-1.479-2.04-2.96-3.442-4.145a6.563 6.563 0 00-1.393-.904c-1.014-.485-1.916-.291-2.69.505-.736.757-1.118 1.697-1.463 2.653-.045.123-.092.245-.139.367l-.082.215-.172-.055c.1-.348.192-.698.284-1.049.21-.795.42-1.59.712-2.356.31-.816.702-1.603 1.093-2.39.169-.341.338-.682.5-1.025h.092z"/>
+␍<path d="M8.448 11.822c-1.626.77-5.56 1.564-7.426 1.36C.717 11.576 3.71 4.05 5.18 2.91l-.095.218a4.638 4.638 0 01-.138.303l-.066.129c-.76 1.462-1.519 2.926-1.908 4.53a7.482 7.482 0 00-.228 1.689c-.01 1.34.824 2.252 2.217 2.309.67.027 1.347-.043 2.023-.114.294-.03.587-.061.88-.084.108-.008.214-.021.352-.039l.231-.028z"/>
+␍<path d="M3.825 14.781c-.445.034-.89.068-1.333.108 4.097.39 8.03-.277 11.91-1.644-1.265-2.23-2.97-3.991-4.952-5.522.026.098.084.169.141.239l.048.06c.17.226.348.448.527.67.409.509.818 1.018 1.126 1.578.778 1.42.356 2.648-1.168 3.296-1.002.427-2.097.718-3.18.892-1.03.164-2.075.243-3.119.323z"/>
+␍</g>
+␍</svg>

src/assets/styles/common.less

@@ -6,6 +6,10 @@
   margin-bottom: 8px;
 }
 
+.m-b-6 {
+  margin-bottom: 6px;
+}
+
 .m-b-5 {
   margin-bottom: 5px;
 }
@@ -42,6 +46,18 @@
   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;
 }
@@ -74,19 +90,40 @@
   padding-left: 8px;
 }
 
+.m-t-6 {
+  margin-top: 6px;
+}
+
 .flex {
   display: flex;
 }
+
 // space-between
 .flex-between {
   display: flex;
   justify-content: space-between;
 }
 
+.justify-between {
+  display: flex;
+  justify-content: space-between;
+}
+
 .justify-center {
   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;
@@ -132,6 +169,22 @@
   gap: 8px;
 }
 
+.gap-4 {
+  gap: 4px;
+}
+
+.gap-20 {
+  gap: 20px;
+}
+
+.gap-6 {
+  gap: 6px;
+}
+
+.line-24 {
+  line-height: 24px;
+}
+
 .relative {
   position: relative;
 }
@@ -144,6 +197,10 @@
   font-size: var(--font-size-base);
 }
 
+.font-size-13 {
+  font-size: 13px;
+}
+
 .font-size-14 {
   font-size: var(--font-size-middle);
 }
@@ -156,6 +213,34 @@
   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-t-0 {
+  margin-top: 0;
+}
+
+.m-b-16 {
+  margin-bottom: 16px;
+}
+
+.m-r-16 {
+  margin-right: 16px;
+}
+
 .font-400 {
   font-weight: var(--font-weight-normal);
 }
@@ -164,10 +249,18 @@
   font-weight: var(--font-weight-medium);
 }
 
+.font-500 {
+  font-weight: var(--font-weight-500);
+}
+
 .font-700 {
   font-weight: var(--font-weight-bold);
 }
 
+.text-primary {
+  color: var(--ant-color-text);
+}
+
 .text-secondary {
   color: var(--ant-color-text-secondary);
 }
@@ -175,3 +268,92 @@
 .text-tertiary {
   color: var(--ant-color-text-tertiary);
 }
+
+.text-quaternary {
+  color: var(--ant-color-text-quaternary);
+}
+
+.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);
+}
+
+.text-success {
+  color: var(--ant-color-success);
+}
+
+.desc-fill {
+  font-weight: 600;
+  color: var(--ant-color-text);
+  background-color: var(--ant-color-fill-content);
+  line-height: 1.5;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.line-6 {
+  line-height: 24px;
+}

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,14 +1,9 @@
 .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;
-      padding-block-end: 12px;
+      padding-block-end: 8px;
     }
 
     .umi-plugin-layout-right {

src/atoms/clusters.ts

@@ -0,0 +1,65 @@
+import { atom } from 'jotai';
+
+// models expand keys: create, update , delete,
+export const expandKeysAtom = atom<string[]>([]);
+
+export const regionListAtom = atom<
+  {
+    datacenter: string;
+    label: string;
+    value: string;
+    icon: string;
+    sizes: string[];
+  }[]
+>([]);
+
+export const regionInstanceTypeListAtom = atom<
+  {
+    label: string;
+    value: string;
+    description: string;
+    specInfo: Record<string, any>;
+    vendor: string;
+    available: boolean;
+    regions: string[];
+  }[]
+>([]);
+
+export const regionOSImageListAtom = atom<
+  {
+    label: string;
+    value: string;
+    os_image: string;
+    name: string;
+    description: string;
+    vendor: string;
+    specInfo: Record<string, any>;
+    regions: string[];
+  }[]
+>([]);
+
+export const allRegionOSImageListAtom = atom<
+  {
+    label: string;
+    value: string;
+    regions: string[];
+  }[]
+>([]);
+
+export const allRegionInstanceTypeListAtom = atom<
+  {
+    label: string;
+    value: string;
+    regions: string[];
+  }[]
+>([]);
+
+export const fromClusterCreationAtom = atom(false);
+
+/**
+ * for temporary cluster session storage during creation/editing
+ */
+export const clusterSessionAtom = atom<{
+  firstAddWorker: boolean;
+  firstAddCluster: boolean;
+} | null>(null);

src/atoms/models.ts

@@ -0,0 +1,52 @@
+import { BackendOption } from '@/pages/llmodels/config/types';
+import { atom, getDefaultStore } from 'jotai';
+
+// models expand keys: create, update , delete,
+export const modelsExpandKeysAtom = atom<string[]>([]);
+
+export const modelsSessionAtom = atom<Record<string, any>>({});
+
+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);
+};
+
+// store for cluster list: res.items from api
+export const clusterListAtom = atom<
+  {
+    label: string;
+    value: number;
+    provider: string;
+    state: string;
+    is_default: boolean;
+    workers: number;
+    ready_workers: number;
+    gpus: number;
+  }[]
+>([]);
+
+// store for worker list: res.items from api
+export const workerListAtom = atom<
+  {
+    label: string;
+    value: number;
+    cluster_id: number;
+    state: string;
+    id: number;
+    labels: Record<string, any>;
+    name: string;
+  }[]
+>([]);
+
+export const backendOptionsAtom = atom<BackendOption[]>([]);
+
+export const resourceOverviewAtom = atom<Record<string, any>>({});

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,57 @@
+import { COLOR_PRIMARY } 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;
+  hideAddResourceModal?: boolean;
+};
+
+export const defaultSettings: UserSettings = {
+  theme: 'light',
+  mode: 'auto',
+  isDarkTheme: false,
+  colorPrimary: COLOR_PRIMARY,
+  collapsed: false,
+  hideAddResourceModal: 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', {
+  ...getStorageUserSettings()
+});
+
+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 || COLOR_PRIMARY,
+      isDarkTheme: newSettings.theme === 'realDark'
+    });
+  }
+);
+export const hideModalTemporarilyAtom = atom<boolean>(false);

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,15 @@ export const userAtom = atomWithStorage<any>('userInfo', null);
 export const GPUStackVersionAtom = atom<{
   version: string;
   git_commit: string;
+  isProd: boolean;
+  isDev?: boolean;
+  isRc?: boolean;
 }>({
   version: '',
-  git_commit: ''
+  git_commit: '',
+  isProd: false,
+  isDev: false,
+  isRc: false
 });
 
 export const UpdateCheckAtom = atom<{

src/atoms/utils/index.ts

@@ -1,5 +1,38 @@
+import { defaultSettings } from '@/atoms/settings';
 import { getDefaultStore } from 'jotai';
 
+export const clearStorageUserSettings = () => {
+  try {
+    const savedSettings = JSON.parse(
+      localStorage.getItem('userSettings') || '{}'
+    );
+    localStorage.setItem(
+      'userSettings',
+      JSON.stringify({
+        ...savedSettings,
+        hideAddResourceModal: false,
+        colorPrimary: undefined
+      })
+    );
+  } catch (error) {
+    console.log('Error clearing user settings:', error);
+  }
+};
+
+export const resetStorageUserSettings = () => {
+  try {
+    localStorage.setItem(
+      'userSettings',
+      JSON.stringify({
+        ...defaultSettings,
+        colorPrimary: undefined
+      })
+    );
+  } catch (error) {
+    console.log('Error clearing user settings:', error);
+  }
+};
+
 export const clearAtomStorage = (atom: any) => {
   if (!atom) {
     return;

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.tsx

@@ -0,0 +1,182 @@
+import {
+  CheckCircleFilled,
+  LoadingOutlined,
+  WarningFilled
+} from '@ant-design/icons';
+import { Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import classNames from 'classnames';
+import React from 'react';
+import styled from 'styled-components';
+import OverlayScroller, { OverlayScrollerOptions } from '../overlay-scroller';
+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 useStyles = createStyles(({ token, css }) => {
+  return {
+    alertBlockInfo: css`
+      padding-block: 6px;
+      padding-inline: 10px 16px;
+      position: relative;
+      padding-left: 32px;
+      text-align: left;
+      border-radius: ${token.borderRadius}px;
+      margin: 0;
+      border: 1px solid transparent;
+      .ant-typography {
+        margin-bottom: 0;
+      }
+
+      &.danger {
+        border-color: ${token.colorErrorBorder};
+        background-color: ${token.colorErrorBg};
+      }
+
+      &.warning {
+        border-color: ${token.colorWarningBorder};
+        background-color: ${token.colorWarningBg};
+      }
+
+      &.transition {
+        color: ${token.geekblue7};
+        background: ${token.geekblue1};
+        border-color: ${token.geekblue3};
+      }
+
+      &.success {
+        border: 1px solid ${token.colorSuccess};
+        color: ${token.colorSuccessText};
+        background: ${token.colorSuccessBg};
+
+        .content.success {
+          font-weight: var(--font-weight-normal);
+        }
+      }
+      .title {
+        position: absolute;
+        left: 0;
+        top: 0;
+        display: flex;
+        height: 32px;
+        padding: 5px 10px;
+        border-radius: ${token.borderRadius}px ${token.borderRadius}px 0 0;
+
+        .info-icon {
+          &.danger {
+            color: ${token.colorErrorText};
+          }
+
+          &.warning {
+            color: ${token.colorWarningText};
+          }
+
+          &.transition {
+            color: ${token.geekblue7};
+          }
+
+          &.success {
+            color: ${token.colorSuccessText};
+          }
+        }
+
+        .text {
+          font-weight: var(--font-weight-bold);
+        }
+      }
+    `
+  };
+});
+
+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;
+  const { styles } = useStyles();
+
+  const renderIcon = () => {
+    if (type === 'transition') {
+      return <LoadingOutlined />;
+    }
+    if (type === 'success') {
+      return <CheckCircleFilled />;
+    }
+    return <WarningFilled />;
+  };
+
+  return (
+    <>
+      {message ? (
+        <div
+          className={classNames(styles.alertBlockInfo, type)}
+          style={{ ...style }}
+        >
+          <Typography.Paragraph
+            ellipsis={
+              ellipsis ?? {
+                rows: rows,
+                tooltip: message
+              }
+            }
+          >
+            <div className={classNames('title', type)}>
+              <span className={classNames('info-icon', type)}>
+                {icon ?? renderIcon()}
+              </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 AlertInfo;

src/components/alert-info/index.tsx

@@ -0,0 +1,49 @@
+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={{
+            fontWeight: 400,
+            whiteSpace: 'pre-line',
+            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

@@ -1,10 +1,31 @@
-import { Image as AntImage, ImageProps } from 'antd';
+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 }> = (props) => {
-  const { height = 100, ...rest } = props;
-  const [width, setWidth] = useState(0);
+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) => {
@@ -20,15 +41,91 @@ const AutoImage: React.FC<ImageProps & { height: number }> = (props) => {
   }, []);
 
   const handleOnLoad = useCallback(async () => {
+    if (autoSize) {
+      return;
+    }
     const { ratio } = await getImgRatio(props.src || '');
-    setWidth(height * ratio);
+
+    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((e: any) => {
+    setIsError(true);
+    e.target.src = fallbackImg;
+  }, []);
+
   useEffect(() => {
     handleOnLoad();
   }, [handleOnLoad]);
 
-  return <AntImage {...rest} height={height} width={width} />;
+  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 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,203 @@
+import { CloseCircleOutlined, LoadingOutlined } from '@ant-design/icons';
+import { Progress, ProgressProps, Spin } 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 () => {}, []);
+
+  const renderProgress = () => {
+    <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)"
+    />;
+  };
+
+  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'
+                }}
+              >
+                <Spin
+                  indicator={<LoadingOutlined style={{ fontSize: 32 }} spin />}
+                />
+              </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,3 +1,4 @@
+import { CloseOutlined } from '@ant-design/icons';
 import { Tag, Tooltip, type TagProps } from 'antd';
 import { throttle } from 'lodash';
 import React, {
@@ -7,7 +8,8 @@ import React, {
   useRef,
   useState
 } from 'react';
-import TitleTip from './title-tip';
+import styled from 'styled-components';
+import { TooltipOverlayScroller } from '../overlay-scroller';
 
 // type TagProps = React.ComponentProps<typeof Tag>;
 
@@ -20,9 +22,20 @@ interface AutoTooltipProps extends Omit<TagProps, 'title'> {
   ghost?: boolean;
   title?: React.ReactNode;
   showTitle?: boolean;
+  closable?: boolean;
+  radius?: number | string;
+  filled?: boolean;
   tooltipProps?: React.ComponentProps<typeof Tooltip>;
 }
 
+const StyledTag = styled(Tag)`
+  margin: 0;
+  &.tag-filled {
+    border: none;
+    background-color: var(--ant-color-fill-secondary);
+  }
+`;
+
 const AutoTooltip: React.FC<AutoTooltipProps> = ({
   children,
   maxWidth = '100%',
@@ -31,11 +44,13 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
   title,
   showTitle = false,
   tooltipProps,
+  radius = 12,
+  filled = false,
   ...tagProps
 }) => {
   const contentRef = useRef<HTMLDivElement>(null);
   const [isOverflowing, setIsOverflowing] = useState(false);
-  const resizeObserver = useRef<ResizeObserver>();
+  const resizeObserver = useRef<ResizeObserver | null>(null);
 
   const checkOverflow = useCallback(() => {
     if (contentRef.current) {
@@ -44,6 +59,25 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
     }
   }, [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);
@@ -70,34 +104,46 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
   );
 
   return (
-    <Tooltip
-      overlayInnerStyle={{ paddingInline: 0 }}
-      destroyTooltipOnHide={false}
-      title={
-        isOverflowing || showTitle ? (
-          <TitleTip
-            isOverflowing={isOverflowing}
-            title={title}
-            showTitle={showTitle}
-          >
-            {children}
-          </TitleTip>
-        ) : (
-          ''
-        )
-      }
-      {...tooltipProps}
+    <TooltipOverlayScroller
+      toolTipProps={{
+        ...tooltipProps,
+        destroyOnHidden: 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={{
+            paddingInline: tagProps.closable ? '8px 22px' : 8,
+            borderRadius: radius,
+            ...tagStyle
+          }}
+          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

@@ -1,4 +1,4 @@
-import useOverlayScroller from '@/hooks/use-overlay-scroller';
+import { OverlayScroller } from '@/components/overlay-scroller';
 import React from 'react';
 
 interface TitleTipProps {
@@ -10,21 +10,18 @@ interface TitleTipProps {
 
 const TitleTip: React.FC<TitleTipProps> = (props) => {
   const { isOverflowing, showTitle, title, children } = props;
-  const { initialize } = useOverlayScroller();
-  const scrollRef = React.useRef<any>(null);
-
-  React.useEffect(() => {
-    if (scrollRef.current) {
-      initialize(scrollRef.current);
-    }
-  }, [initialize, scrollRef.current]);
 
   return (
-    <div style={{ maxHeight: 200, overflowY: 'auto' }} ref={scrollRef}>
-      <div style={{ width: 'max-content', maxWidth: 250, paddingInline: 10 }}>
+    <OverlayScroller maxHeight={200}>
+      <div
+        style={{
+          width: 'fit-content',
+          maxWidth: 'var(--width-tooltip-max)'
+        }}
+      >
         {isOverflowing || showTitle ? title || children : ''}
       </div>
-    </div>
+    </OverlayScroller>
   );
 };
 

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

@@ -2,6 +2,6 @@
   border-radius: var(--border-radius-small);
   background-color: var(--color-white-1);
   box-shadow: none;
-  padding: 10px;
-  border: 1px solid var(--color-border-1);
+  padding: 10px 16px;
+  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/collapse-container/index.tsx

@@ -0,0 +1,208 @@
+import IconFont from '@/components/icon-font';
+import { Card } from 'antd';
+import { createStyles } from 'antd-style';
+import classNames from 'classnames';
+import React, { useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+
+const CardStyled = styled(Card)`
+  box-shadow: none !important;
+  &.isOpen {
+    .ant-card-head {
+      border-bottom: 1px solid var(--ant-color-border-secondary);
+      border-radius: var(--ant-border-radius) var(--ant-border-radius) 0 0;
+    }
+  }
+  .ant-card-head {
+    cursor: pointer;
+    background-color: var(--ant-color-fill-quaternary);
+    border-bottom: none;
+    border-radius: var(--ant-border-radius);
+    padding: 0 16px;
+    &:hover {
+      background-color: var(--ant-color-fill-secondary);
+      .del-btn {
+        display: block;
+      }
+    }
+  }
+`;
+
+const useStyles = createStyles(({ css, token }) => {
+  return {
+    title: css`
+      font-weight: 400;
+      height: 56px;
+      font-size: var(--font-size-base);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      cursor: pointer;
+    `,
+    expandIcon: css`
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    `,
+    subtitle: css`
+      font-size: 14px;
+      color: ${token.colorTextSecondary};
+    `,
+    content: css`
+      padding-top: 8px;
+    `,
+    left: css`
+      flex: 1;
+    `,
+    right: css`
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      .del-btn {
+        display: none;
+      }
+    `
+  };
+});
+
+export interface CollapsibleContainerProps {
+  title?: React.ReactNode;
+  subtitle?: React.ReactNode;
+  right?: React.ReactNode;
+  deleteBtn?: React.ReactNode;
+  defaultOpen?: boolean;
+  open?: boolean;
+  collapsible?: boolean;
+  showExpandIcon?: boolean;
+  onToggle?: (open: boolean) => void;
+  disabled?: boolean;
+  variant?: 'outlined' | 'borderless' | undefined;
+  iconPosition?: 'left' | 'right';
+  className?: string;
+  children?: React.ReactNode;
+  styles?: {
+    body?: React.CSSProperties;
+    header?: React.CSSProperties;
+    content?: React.CSSProperties;
+  };
+}
+
+export default function CollapsibleContainer({
+  title,
+  subtitle,
+  right,
+  deleteBtn,
+  defaultOpen = true,
+  open,
+  onToggle,
+  disabled = false,
+  showExpandIcon = true,
+  variant = 'borderless',
+  className = '',
+  collapsible,
+  iconPosition = 'left',
+  styles: cardStyles,
+  children
+}: CollapsibleContainerProps) {
+  const { styles } = useStyles();
+  const isControlled = typeof open === 'boolean';
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isOpen = collapsible
+    ? isControlled
+      ? (open as boolean)
+      : internalOpen
+    : true;
+
+  const toggle = () => {
+    if (disabled || !collapsible) return;
+    const next = !isOpen;
+    if (!isControlled) setInternalOpen(next);
+    onToggle?.(next);
+  };
+
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [height, setHeight] = useState(isOpen ? 'auto' : '0px');
+
+  const renderIcon = () => {
+    if (showExpandIcon) {
+      return (
+        <IconFont
+          rotate={isOpen ? 180 : 0}
+          type="icon-down"
+          style={{
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            fontSize: 12
+          }}
+        />
+      );
+    }
+    return null;
+  };
+
+  const renderTitle = () => {
+    if (!collapsible) {
+      return null;
+    }
+    return (
+      <div className={styles.title} onClick={toggle}>
+        <div className={styles.left}>
+          <div className={styles.expandIcon}>
+            {iconPosition === 'left' && renderIcon()}
+            {title && <div>{title}</div>}
+          </div>
+          {subtitle && <div className={styles.subtitle}>{subtitle}</div>}
+        </div>
+        <div className={styles.right}>
+          {right && <span>{right}</span>}
+          {deleteBtn && <span className="del-btn">{deleteBtn}</span>}
+          {iconPosition === 'right' && renderIcon()}
+        </div>
+      </div>
+    );
+  };
+
+  useEffect(() => {
+    if (!collapsible) {
+      setHeight('auto');
+      return;
+    }
+    if (isOpen) {
+      const scrollHeight = contentRef.current?.scrollHeight || 0;
+      setHeight(scrollHeight + 'px');
+      const timer = setTimeout(() => setHeight('auto'), 200);
+      return () => clearTimeout(timer);
+    } else {
+      const scrollHeight = contentRef.current?.scrollHeight || 0;
+      setHeight(scrollHeight + 'px');
+      requestAnimationFrame(() => setHeight('0px'));
+      return () => {};
+    }
+  }, [isOpen, collapsible]);
+
+  return (
+    <CardStyled
+      className={classNames(className, { collapsible, disabled, isOpen })}
+      variant={variant}
+      styles={{
+        body: {
+          padding: 0,
+          ...cardStyles?.body
+        },
+        header: {
+          ...cardStyles?.header
+        }
+      }}
+      title={renderTitle()}
+    >
+      <div
+        ref={contentRef}
+        style={{
+          height: height,
+          overflow: 'hidden'
+        }}
+      >
+        <div style={{ paddingTop: 8, ...cardStyles?.content }}>{children}</div>
+      </div>
+    </CardStyled>
+  );
+}

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 = 'default',
   fontSize = '14px',
   style,
+  btnStyle,
+  placement,
   size = 'middle'
 }) => {
   const intl = useIntl();
@@ -39,14 +55,19 @@ const CopyButton: React.FC<CopyButtonProps> = ({
       });
 
       clipboardRef.current.on('error', (e: any) => {
-        message.success(
-          intl.formatMessage({ id: 'common.copy.fail' }) as string
-        );
+        message.error(intl.formatMessage({ id: 'common.copy.fail' }) as string);
         e.clearSelection();
       });
     }
   };
 
+  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 +76,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 +85,7 @@ const CopyButton: React.FC<CopyButtonProps> = ({
         size={size}
         disabled={!!disabled}
         data-clipboard-text={text}
+        style={{ ...btnStyle }}
         icon={
           copied ? (
             <CheckCircleFilled
@@ -73,7 +95,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}
+      destroyOnHidden={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' })}
+          <Button type="primary" onClick={handleOk} size="middle" danger>
+            {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,39 @@
-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'),
+      icon: item.icon
+        ? React.cloneElement(item.icon, { style: { fontSize: 14 } })
+        : null,
+      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,51 @@
 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 styled from 'styled-components';
+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 DropdownWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  background-color: var(--ant-color-bg-elevated);
+  padding: 5px;
+  align-items: flex-start;
+  border-radius: var(--border-radius-base);
+  box-shadow: var(--ant-box-shadow-secondary);
+  min-width: 160px;
+`;
+
 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,59 +62,88 @@ 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
-          dropdownRender={(menus: any) => {
+          disabled={disabled}
+          trigger={trigger}
+          type="primary"
+          popupRender={(menus: any) => {
             return (
-              <div
-                className="flex flex-column "
-                style={{
-                  backgroundColor: 'var(--color-white-1)',
-                  padding: 5,
-                  alignItems: 'flex-start',
-                  borderRadius: 'var(--border-radius-base)',
-                  boxShadow: 'var(--ant-box-shadow-secondary)'
-                }}
-              >
+              <DropdownWrapper>
                 {_.map(_.tail(items), (item: any) => {
                   return (
                     <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' }}
+                      style={{
+                        width: '100%',
+                        justifyContent: 'flex-start',
+                        paddingInline: 10
+                      }}
                     >
                       {intl.formatMessage({ id: item.label })}
                     </Button>
                   );
                 })}
-              </div>
+              </DropdownWrapper>
             );
           }}
           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 +151,4 @@ const DropdownButtons: React.FC<DropdownButtonsProps> = ({
   );
 };
 
-export default memo(DropdownButtons);
+export default DropdownButtons;

src/components/dynamic-form/components/field-item.tsx

@@ -0,0 +1,19 @@
+import ComponentsMap from '@/components/seal-form/config/components';
+import { SealFormItemProps } from '@/components/seal-form/types';
+import { Form } from 'antd';
+import React from 'react';
+
+interface FieldItemProps extends SealFormItemProps {
+  widget: keyof typeof ComponentsMap;
+  name: string;
+}
+
+const FieldItem: React.FC<FieldItemProps> = (props) => {
+  const { name, widget, required = [], ...rest } = props;
+
+  const Component = ComponentsMap[widget];
+
+  return <Form.Item name={name}></Form.Item>;
+};
+
+export default FieldItem;

src/components/dynamic-form/components/form-widget.tsx

@@ -0,0 +1,59 @@
+import ComponentsMap from '@/components/seal-form/config/components';
+import { FormWidgetProps } from '../config/types';
+
+const FormWidget: React.FC<
+  FormWidgetProps & {
+    onChange?: (data: any) => void;
+    disabled?: boolean;
+  }
+> = ({
+  widget,
+  title: label,
+  required,
+  placeholder,
+  options,
+  description,
+  enum: enumValues,
+  style,
+  value,
+  min,
+  max,
+  status,
+  checked,
+  isInFormItems,
+  disabled,
+  onChange
+}) => {
+  const Component = ComponentsMap[widget];
+
+  const optionList = enumValues?.map((item: string | number) => ({
+    label: item,
+    value: item
+  }));
+
+  return Component ? (
+    <Component
+      {...{
+        label,
+        required,
+        placeholder,
+        description,
+        min,
+        max
+      }}
+      status={status}
+      isInFormItems={isInFormItems}
+      disabled={disabled}
+      options={options || optionList}
+      value={value}
+      checked={checked}
+      style={{
+        width: '100%',
+        ...style
+      }}
+      onChange={onChange}
+    />
+  ) : null;
+};
+
+export default FormWidget;

src/components/dynamic-form/components/list-map.tsx

@@ -0,0 +1,175 @@
+import Wrapper from '@/components/label-selector/wrapper';
+import { MinusOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
+import React, { useEffect, useMemo } from 'react';
+import styled from 'styled-components';
+import { statusType } from '../config/types';
+import FormWidget from './form-widget';
+
+const RowWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+`;
+
+const WidgetBox = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+`;
+interface ListMapProps {
+  minItems?: number;
+  dataList: any[];
+  label?: React.ReactNode;
+  btnText?: string;
+  requiredFields?: string[];
+  validateStatusList?: Record<string, statusType>[];
+  properties: Record<string, any>;
+  disabled?: boolean;
+  onAdd?: (data: any[]) => void;
+  onDelete?: (deletedItem: any, data: any[]) => void;
+  onChange?: (data: any) => void;
+}
+
+interface ListItemProps {
+  schemaList: any[];
+  data: Record<string, any>;
+  disabled?: boolean;
+  validateStatus?: Record<string, statusType>;
+  onChange?: (data: any) => void;
+}
+
+const ListItem: React.FC<ListItemProps> = ({
+  schemaList,
+  data,
+  onChange,
+  validateStatus,
+  disabled
+}) => {
+  const handleValueChange = (name: string, target: any) => {
+    if (target?.target?.type === 'checkbox') {
+      const checked = target.target?.checked;
+      onChange?.({ [name]: checked });
+    } else {
+      const value = target?.target ? target.target.value : target;
+      onChange?.({ [name]: value });
+    }
+  };
+  return (
+    <>
+      {schemaList.map((schema: any) => (
+        <FormWidget
+          status={validateStatus?.[schema.name]}
+          widget={schema.type}
+          {...schema}
+          disabled={disabled || schema.readOnly}
+          key={schema.name}
+          value={data?.[schema.name]}
+          checked={data?.[schema.name]}
+          isInFormItems={false}
+          onChange={(target) => handleValueChange(schema.name, target)}
+        />
+      ))}
+    </>
+  );
+};
+
+const ListMap: React.FC<ListMapProps> = ({
+  dataList = [],
+  label,
+  btnText,
+  properties = {},
+  requiredFields = [],
+  minItems = 0,
+  validateStatusList = [],
+  disabled,
+  onAdd,
+  onDelete,
+  onChange
+}) => {
+  const [items, setItems] = React.useState(dataList || []);
+
+  const schemaList = useMemo(() => {
+    const list = Object.entries(properties).map(([key, value]) => ({
+      ...value,
+      required: requiredFields.includes(key),
+      name: key
+    }));
+    return list;
+  }, [properties, requiredFields]);
+
+  const handleOnAdd = () => {
+    const keys = Object.keys(properties);
+    const newItems = [
+      ...items,
+      { ...keys.reduce((acc, key) => ({ ...acc, [key]: '' }), {}) }
+    ];
+    setItems(newItems);
+    onAdd?.(newItems);
+  };
+
+  const handleDelete = (index: number) => {
+    const deleteItem = items[index];
+    const newItems = items.filter((_, i) => i !== index);
+    setItems(newItems);
+    onDelete?.(deleteItem, newItems);
+  };
+
+  const handleItemChange = (index: number, data: { [key: string]: any }) => {
+    const newItems = [...items];
+    newItems[index] = { ...newItems[index], ...data };
+    setItems(newItems);
+    onChange?.(newItems);
+  };
+
+  useEffect(() => {
+    if (!dataList.length && minItems > 0) {
+      handleOnAdd();
+    }
+  }, []);
+
+  useEffect(() => {
+    setItems(dataList);
+  }, [dataList]);
+
+  return (
+    <Wrapper
+      label={label}
+      btnText={btnText}
+      onAdd={handleOnAdd}
+      disabled={disabled}
+    >
+      {items.map((item, index) => (
+        <RowWrapper key={index}>
+          <WidgetBox>
+            <ListItem
+              schemaList={schemaList}
+              data={item}
+              validateStatus={validateStatusList?.[index]}
+              disabled={disabled}
+              onChange={(value) => handleItemChange(index, value)}
+            />
+          </WidgetBox>
+          {!disabled && (
+            <Button
+              size="small"
+              type="default"
+              shape="circle"
+              style={{
+                width: 24,
+                marginLeft: 10,
+                flex: 'none'
+              }}
+              icon={<MinusOutlined />}
+              onClick={() => handleDelete(index)}
+            />
+          )}
+        </RowWrapper>
+      ))}
+    </Wrapper>
+  );
+};
+
+export default ListMap;

src/components/dynamic-form/config/types.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+
+// refer to json schema
+export interface FieldSchema {
+  type: 'string' | 'number' | 'boolean' | 'object' | 'array';
+  title?: string;
+  name: string;
+  description?: string;
+  properties?: Record<string, FieldSchema>;
+  default?: any;
+  enum?: string[];
+  minItems?: number;
+  maxItems?: number;
+  items?: FieldSchema[];
+  widget?: string;
+  min?: number;
+  style?: React.CSSProperties;
+  required?: string[];
+}
+
+export type statusType = 'error' | 'warning' | '' | undefined;
+export interface FormWidgetProps {
+  status?: statusType;
+  isInFormItems?: boolean;
+  widget: 'Input' | 'Select' | 'Checkbox' | 'InputNumber';
+  name: string;
+  title?: string;
+  required?: boolean;
+  placeholder?: string;
+  readOnly?: boolean;
+  options?: { label: string; value: string | number }[];
+  description?: string;
+  enum?: (string | number)[];
+  style?: React.CSSProperties;
+  value?: any;
+  checked?: boolean;
+  min?: number;
+  max?: number;
+}

src/components/dynamic-form/hooks/use-parse-fields.ts

@@ -0,0 +1,33 @@
+import { useMemo } from 'react';
+import { FieldSchema } from '../config/types';
+
+interface ParsedField {
+  name: (string | number)[];
+  schema: FieldSchema;
+}
+
+const parseSchema = (
+  schema: Record<string, FieldSchema>,
+  parentName: (string | number)[] = []
+): ParsedField[] => {
+  const fields: ParsedField[] = [];
+
+  Object.entries(schema).forEach(([key, fieldSchema]) => {
+    const currentName = [...parentName, key];
+    if (fieldSchema.type === 'object' && fieldSchema.properties) {
+      fields.push(...parseSchema(fieldSchema.properties, currentName));
+    } else if (fieldSchema.type === 'array' && fieldSchema.items) {
+      fields.push({ name: currentName, schema: fieldSchema });
+    } else {
+      fields.push({ name: currentName, schema: fieldSchema });
+    }
+  });
+
+  return fields;
+};
+
+const useParsedFields = (schema: Record<string, FieldSchema>) => {
+  return useMemo(() => parseSchema(schema), [schema]);
+};
+
+export default useParsedFields;

src/components/dynamic-form/hooks/use-validate-fields.ts

@@ -0,0 +1,61 @@
+import { useRef } from 'react';
+import { statusType } from '../config/types';
+
+export default function useValidateFields(params: {
+  requiredFields?: string[];
+  setValidateStatusList: (statusList: { [key: string]: statusType }[]) => void;
+}) {
+  const { requiredFields, setValidateStatusList } = params;
+  const validationEnabled = useRef(false);
+
+  const isEmptyValue = (value: any, key: string) => {
+    return !value;
+  };
+
+  const validateRule = (value: any, key: string) => {
+    return true;
+  };
+
+  const listMapValidator = async (_: any, valueList: any) => {
+    if (!validationEnabled.current) {
+      return Promise.resolve();
+    }
+
+    const fields = new Set<string>();
+    const statusList: { [key: string]: statusType }[] = [];
+
+    (valueList || []).forEach((item: any, index: number) => {
+      const status: { [key: string]: statusType } = {};
+      Object.entries(item || {}).forEach(([key, value]) => {
+        if (isEmptyValue(value, key)) {
+          fields.add(key);
+          if (requiredFields?.includes(key)) {
+            status[key] = 'error';
+          } else {
+            status[key] = '';
+          }
+        } else if (validateRule(value, key)) {
+          status[key] = '';
+        }
+      });
+      statusList.push(status);
+    });
+
+    setValidateStatusList(statusList);
+
+    if (fields.size > 0) {
+      return Promise.reject(`${Array.from(fields).join(', ')} is required`);
+    }
+
+    return Promise.resolve();
+  };
+
+  const toggleValidation = (enabled: boolean) => {
+    validationEnabled.current = enabled;
+  };
+
+  return {
+    listMapValidator,
+    toggleValidation
+  };
+}

src/components/dynamic-form/index.tsx

@@ -0,0 +1,26 @@
+import { Form } from 'antd';
+import React from 'react';
+import { FieldSchema } from './config/types';
+
+interface DynamicFormProps {
+  schema: FieldSchema;
+  onSubmit: (values: any) => void;
+}
+
+const DynamicForm: React.FC<DynamicFormProps> = ({ schema, onSubmit }) => {
+  const form = Form.useFormInstance();
+
+  const handleFinish = (values: any) => {
+    onSubmit(values);
+  };
+
+  return (
+    <>
+      <Form form={form} onFinish={handleFinish}>
+        {/* Render form fields based on schema */}
+      </Form>
+    </>
+  );
+};
+
+export default DynamicForm;

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,61 +1,125 @@
-import { throttle } from 'lodash';
-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;
+  chartHeight?: number;
   height: number | string;
   width: number | string;
-}> = ({ options, width, height }) => {
+  ref?: any;
+}> = forwardRef(({ options, width, height, chartHeight }, 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) => {
+    if (!chart.current) return;
     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?.off('finished', handleOnFinished);
       chart.current?.dispose();
     };
-  }, [init]);
+  }, []);
 
   useEffect(() => {
     resizeable.current = false;
-    resize();
+    finished.current = false;
     setOption(options);
+    resizeable.current = true;
   }, [options]);
 
-  useEffect(() => {
-    let timer: any = null;
-    timer = setTimeout(() => {
-      resizeable.current = true;
-    }, 300);
-    return () => {
-      clearTimeout(timer);
-    };
-  }, []);
-
   useEffect(() => {
     const handleResize = throttle(() => {
       if (resizeable.current) {
@@ -65,17 +129,22 @@ const Chart: React.FC<{
 
     if (container.current) {
       resizeObserver.current = new ResizeObserver(handleResize);
-
       resizeObserver.current.observe(container.current);
     }
     return () => {
-      if (container.current) {
-        resizeObserver.current?.unobserve(container.current);
-      }
+      resizeObserver.current?.disconnect();
+      resizeObserver.current = undefined;
     };
   }, []);
 
-  return <div ref={container} style={{ width: width, height }}></div>;
-};
+  return (
+    <div className="chart-wrapper" style={{ width: width, height }}>
+      <div
+        ref={container}
+        style={{ width: width, height: chartHeight || height }}
+      ></div>
+    </div>
+  );
+});
 
 export default Chart;

src/components/echarts/config.ts

@@ -1,190 +1,236 @@
+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
-  }
-};
+  const chartColorMap = useMemo(() => {
+    return {
+      titleColor: token.colorText,
+      splitLineColor: token.colorBorder,
+      tickLineColor: token.colorSplit,
+      axislabelColor: token.colorTextTertiary,
+      colorSecondary: token.colorTextSecondary,
+      colorTertiary: 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 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 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 title = {
-  show: true,
-  left: 'center',
-  textStyle: {
-    fontSize: 12,
-    color: '#000'
-  },
-  text: ''
-};
+      params.forEach((item: any) => {
+        let value = isFunction(callback)
+          ? callback?.(item.data.value)
+          : item.data.value;
 
-export const barItemConfig = {
-  type: 'bar',
-  barMaxWidth: 20,
-  barMinWidth: 8,
-  // stack: 'total',
-  barGap: '30%',
-  barCategoryGap: '50%'
-};
+        const borderRadius = item.seriesType === 'bar' ? '2px' : '8px';
 
-export const lineItemConfig = {
-  type: 'line',
-  smooth: true,
-  showSymbol: false,
-  itemStyle: {},
-  lineStyle: {
-    width: 1.5,
-    opacity: 0.7
-  }
-};
+        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>`;
+      });
 
-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'
+      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,
+    itemGap: 12,
+    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,
+    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 {
+    token,
+    tooltip,
+    grid,
+    legend,
+    xAxis,
+    yAxis,
+    title,
+    chartColorMap,
+    barItemConfig,
+    lineItemConfig,
+    gaugeItemConfig,
+    isDark: isDarkTheme
+  };
+}

src/components/echarts/gauge.tsx

@@ -1,38 +1,68 @@
 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 from 'react';
 import { ChartProps } from './types';
 
+const strokeColorFunc = (percent: number) => {
+  if (percent <= 50 || percent === undefined) {
+    return 'rgb(84, 204, 152, 80%)';
+  }
+  if (percent <= 80) {
+    return 'rgba(250, 173, 20, 80%)';
+  }
+  return 'rgba(255, 77, 79, 80%)';
+};
+
 const GaugeChart: React.FC<Omit<ChartProps, 'seriesData' | 'xAxisData'>> = (
   props
 ) => {
-  const { value, height, width, labelFormatter, title, color } = props;
+  const {
+    gaugeItemConfig,
+    title: titleConfig,
+    chartColorMap
+  } = useChartConfig();
+  const { value, height, width, labelFormatter, title, color, gaugeConfig } =
+    props;
+  const titleText = typeof title === 'string' ? title : title?.text;
+
   if (!value && value !== 0) {
-    return <EmptyData height={height} title={title}></EmptyData>;
+    return <EmptyData height={height} title={titleText}></EmptyData>;
   }
 
   const setDataOptions = () => {
+    const colorValue = color || strokeColorFunc(value);
+    const combineGaugeConfig = {
+      ...gaugeItemConfig,
+      ...gaugeConfig
+    };
+
+    combineGaugeConfig.detail.rich.value.color = colorValue;
+    combineGaugeConfig.detail.rich.unit.color = colorValue;
+
     return {
       title: {
         ...titleConfig,
-        text: title,
-        top: '0',
-        left: 'center'
+        text: titleText,
+        textStyle: {
+          fontSize: 12,
+          color: chartColorMap.colorSecondary,
+          fontWeight: 400
+        },
+        top: 10,
+        left: 'center',
+        ...(typeof title === 'object' ? title : {})
       },
       series: [
         {
-          ...gaugeItemConfig,
+          ...combineGaugeConfig,
           axisLine: {
-            ...gaugeItemConfig.axisLine,
+            ...combineGaugeConfig.axisLine,
             lineStyle: {
-              ...gaugeItemConfig.axisLine.lineStyle,
+              ...combineGaugeConfig.axisLine.lineStyle,
               color: [
-                [value / 100, color],
-                [1, 'rgba(221, 221, 221, 0.5)']
+                [value / 100, colorValue],
+                [1, chartColorMap.gaugeBgColor]
               ]
             }
           },
@@ -40,7 +70,11 @@ const GaugeChart: React.FC<Omit<ChartProps, 'seriesData' | 'xAxisData'>> = (
             color: 'transparent'
           },
           detail: {
-            ...gaugeItemConfig.detail,
+            ...combineGaugeConfig.detail,
+            borderColor: colorValue,
+            lineHeight: 20,
+            height: 18,
+            width: 50,
             formatter: labelFormatter || gaugeItemConfig.detail.formatter
           },
           data: [{ value }]
@@ -60,4 +94,4 @@ const GaugeChart: React.FC<Omit<ChartProps, 'seriesData' | 'xAxisData'>> = (
   );
 };
 
-export default memo(GaugeChart);
+export default GaugeChart;