diff --git a/.github/workflows/bot-auto-cherry-pick.yml b/.github/workflows/bot-auto-cherry-pick.yml
index 608d523a0130..ecba3750ffc6 100644
--- a/.github/workflows/bot-auto-cherry-pick.yml
+++ b/.github/workflows/bot-auto-cherry-pick.yml
@@ -6,7 +6,7 @@ on:
 
 jobs:
   comment:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     steps:
       - name: Comment cherry-pick command
         uses: actions/github-script@v5
diff --git a/.github/workflows/bot-cherry-pick.yml b/.github/workflows/bot-cherry-pick.yml
index 183ee3e251db..670d4f2f8368 100644
--- a/.github/workflows/bot-cherry-pick.yml
+++ b/.github/workflows/bot-cherry-pick.yml
@@ -6,7 +6,7 @@ jobs:
   cherry-pick:
     name: Cherry Pick
     if: github.event.issue.pull_request != '' && contains(github.event.comment.body, '/cherry-pick') && github.event.comment.user.login=='sealos-ci-robot'
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     steps:
       - name: Write vars
         id: set-target
@@ -26,7 +26,7 @@ jobs:
           fi
           echo "prNumber=$PR_NUMBER" >> $GITHUB_OUTPUT
       - name: Checkout the latest code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           token: ${{ secrets.GH_PAT }}
           fetch-depth: 0
diff --git a/.github/workflows/bot-issues-translator.yml b/.github/workflows/bot-issues-translator.yml
index bc29458d81e9..823fc578d237 100644
--- a/.github/workflows/bot-issues-translator.yml
+++ b/.github/workflows/bot-issues-translator.yml
@@ -10,7 +10,7 @@ jobs:
       issues: write
       discussions: write
       pull-requests: write
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     steps:
       - uses: usthe/issues-translate-action@v2.7
         with:
diff --git a/.github/workflows/bot-labels.yml b/.github/workflows/bot-labels.yml
index ff15f94f4cb0..54d46ed9e2e0 100644
--- a/.github/workflows/bot-labels.yml
+++ b/.github/workflows/bot-labels.yml
@@ -7,7 +7,7 @@ jobs:
     permissions:
       contents: read
       pull-requests: write
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     steps:
       - uses: actions/labeler@v4
         with:
diff --git a/.github/workflows/bot.yml b/.github/workflows/bot.yml
index cee8bc2dbe11..7cd1a037c89e 100644
--- a/.github/workflows/bot.yml
+++ b/.github/workflows/bot.yml
@@ -6,10 +6,10 @@ on:
 jobs:
   comment:
     if: startswith(github.event.comment.body, '/')
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     steps:
       - name: Checkout the latest code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Gh Robot for Sealos
         uses: labring/robot@v2.0.0
         with:
diff --git a/.github/workflows/check-coverage.yml b/.github/workflows/check-coverage.yml
index fa92da48b7b8..23ba7c346f61 100644
--- a/.github/workflows/check-coverage.yml
+++ b/.github/workflows/check-coverage.yml
@@ -25,13 +25,13 @@ env:
 
 jobs:
   coverage:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup Golang with cache
-        uses: magnetikonline/action-golang-cache@v3
+        uses: magnetikonline/action-golang-cache@v5
         with:
           go-version: ${{ env.GO_VERSION }}
 
diff --git a/.github/workflows/check-format-code.yml b/.github/workflows/check-format-code.yml
index 6215a7e4d02d..9de0b54c75c9 100755
--- a/.github/workflows/check-format-code.yml
+++ b/.github/workflows/check-format-code.yml
@@ -25,16 +25,16 @@ env:
 
 jobs:
   format-code:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           repository: ${{ github.event.pull_request.head.repo.full_name }}
           ref: ${{ github.head_ref }}
 
       - name: Setup Golang with cache
-        uses: magnetikonline/action-golang-cache@v3
+        uses: magnetikonline/action-golang-cache@v5
         with:
           go-version: ${{ env.GO_VERSION }}
 
diff --git a/.github/workflows/check-license.yml b/.github/workflows/check-license.yml
index 378bf78269cd..fa3a5ffc3f4e 100755
--- a/.github/workflows/check-license.yml
+++ b/.github/workflows/check-license.yml
@@ -25,15 +25,15 @@ env:
 
 jobs:
   check-license:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
       - name: Setup Go
-        uses: actions/setup-go@v3
+        uses: actions/setup-go@v5
         with:
           go-version: ${{ env.GO_VERSION }}
 
diff --git a/.github/workflows/check-link-error.yml b/.github/workflows/check-link-error.yml
index c65dd13bd7e5..87887a08df99 100644
--- a/.github/workflows/check-link-error.yml
+++ b/.github/workflows/check-link-error.yml
@@ -7,9 +7,9 @@ on:
 
 jobs:
   linkChecker:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           ref: ${{ github.event.pull_request.head.ref }}
           repository: ${{ github.event.pull_request.head.repo.full_name }}
diff --git a/.github/workflows/check-semgrep.yml b/.github/workflows/check-semgrep.yml
index c0a2ab55e223..405e5012e620 100644
--- a/.github/workflows/check-semgrep.yml
+++ b/.github/workflows/check-semgrep.yml
@@ -25,7 +25,7 @@ jobs:
     # User-definable name of this GitHub Actions job:
     name: Scan
     # If you are self-hosting, change the following `runs-on` value:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
 
     container:
       # A Docker image with Semgrep installed. Do not change this.
@@ -39,7 +39,7 @@ jobs:
 
     steps:
       # Fetch project source with GitHub Actions Checkout.
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       # Run the "semgrep ci" command on the command line of the docker image.
       -
         run: |
diff --git a/.github/workflows/ci-patch-image.yml b/.github/workflows/ci-patch-image.yml
index 87ec6e05f6ae..f1390f0f4260 100755
--- a/.github/workflows/ci-patch-image.yml
+++ b/.github/workflows/ci-patch-image.yml
@@ -46,11 +46,11 @@ jobs:
 
   container-sealos:
     needs: [ call_ci_workflow ]
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
     if: ${{ (github.event_name == 'push') || (inputs.push_mage == true) }}
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Expose git commit data
         uses: rlespinasse/git-commit-data-action@v1
       - # Add support for more platforms with QEMU (optional)
@@ -58,12 +58,12 @@ jobs:
         name: Set up QEMU
         uses: docker/setup-qemu-action@v2
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
+        uses: docker/setup-buildx-action@v3
         with:
           driver-opts: network=host
 
       - name: Login to Docker Hub
-        uses: docker/login-action@v2
+        uses: docker/login-action@v3
         with:
           registry: ghcr.io
           username: ${{ github.repository_owner }}
@@ -110,12 +110,12 @@ jobs:
     if: ${{ (github.event_name == 'push') || (inputs.push_mage == true) }}
     needs:
       - container-sealos
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     permissions:
       issues: write
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Expose git commit data
         uses: rlespinasse/git-commit-data-action@v1
       - name: Renew issue and Sync Images
@@ -141,12 +141,12 @@ jobs:
     needs:
       - call_ci_workflow
       - save-sealos
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     permissions:
       issues: write
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Download sealos
         uses: actions/download-artifact@v4
         with:
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 11601ebee4d1..89a3ddf7864f 100755
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -40,12 +40,12 @@ on:
 
 jobs:
   resolve-modules:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
     outputs:
       matrix: ${{ steps.set-matrix.outputs.matrix }}
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Resolve Modules
         id: set-matrix
@@ -53,15 +53,15 @@ jobs:
 
   golangci-lint:
     needs: [ resolve-modules ]
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
     strategy:
       matrix: ${{ fromJson(needs.resolve-modules.outputs.matrix) }}
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup Golang with cache
-        uses: magnetikonline/action-golang-cache@v3
+        uses: magnetikonline/action-golang-cache@v5
         with:
           go-version: ${{ env.GO_VERSION }}
 
@@ -69,7 +69,7 @@ jobs:
         run: sudo apt update && sudo apt install -y libgpgme-dev libbtrfs-dev libdevmapper-dev
 
       - name: Run Linter
-        uses: golangci/golangci-lint-action@v3
+        uses: golangci/golangci-lint-action@v6
         with:
           version: v1.54.2
           working-directory: ${{ matrix.workdir }}
diff --git a/.github/workflows/cloud-release.yml b/.github/workflows/cloud-release.yml
index c7ab2032aee3..221bf62ead7e 100644
--- a/.github/workflows/cloud-release.yml
+++ b/.github/workflows/cloud-release.yml
@@ -36,7 +36,7 @@ jobs:
 
   release-frontends:
     if: ${{ github.event.inputs.build_offline_tar_only == false }}
-    uses: ./.github/workflows/frontend.yml
+    uses: ./.github/workflows/frontends.yml
     with:
       push_image: true
       push_image_tag: ${{ github.event.inputs.tag || github.event.release.tag_name }}
@@ -75,7 +75,7 @@ jobs:
       OSS_BUCKET: ${{ secrets.OSS_BUCKET }}
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Download sealos
         uses: actions/download-artifact@v4
         with:
@@ -114,7 +114,7 @@ jobs:
       OSS_BUCKET: ${{ secrets.OSS_BUCKET }}
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Download sealos
         uses: actions/download-artifact@v4
         with:
diff --git a/.github/workflows/cloud.yml b/.github/workflows/cloud.yml
index f244f05a69c0..4fa19378af0c 100644
--- a/.github/workflows/cloud.yml
+++ b/.github/workflows/cloud.yml
@@ -65,10 +65,10 @@ jobs:
     if: ${{ (github.event_name == 'release') ||(github.event_name == 'push')  || (inputs.push_image == true) }}
     needs:
       - save-sealos
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - name: Expose git commit data
diff --git a/.github/workflows/controllers.yml b/.github/workflows/controllers.yml
index 69ee063c0e6e..cf1597501833 100644
--- a/.github/workflows/controllers.yml
+++ b/.github/workflows/controllers.yml
@@ -50,12 +50,12 @@ env:
   LICENSE_KEY: ${{ secrets.LICENSE_KEY }}
 jobs:
   resolve-modules:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
     outputs:
       matrix: ${{ steps.set-matrix.outputs.matrix }}
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Resolve Modules
         id: set-matrix
@@ -64,28 +64,28 @@ jobs:
   golangci-lint:
     if: ${{ github.event_name }} == 'push' || ${{ github.event_name }} == 'pull_request'
     needs: [ resolve-modules ]
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
     strategy:
       matrix: ${{ fromJson(needs.resolve-modules.outputs.matrix) }}
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup Golang with cache
-        uses: magnetikonline/action-golang-cache@v3
+        uses: magnetikonline/action-golang-cache@v5
         with:
           go-version: ${{ env.GO_VERSION }}
       - name: Install Dependencies
         run: sudo apt update && sudo apt install -y libgpgme-dev libbtrfs-dev libdevmapper-dev
       - name: Run Linter
-        uses: golangci/golangci-lint-action@v3
+        uses: golangci/golangci-lint-action@v6
         with:
           version: v1.54.2
           working-directory: ${{ matrix.workdir }}
           args: "--out-${NO_FUTURE}format colored-line-number"
 
   image-build:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     strategy:
       matrix:
         module:
@@ -103,12 +103,12 @@ jobs:
           - { name: objectstorage, path: objectstorage }
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
       - name: Setup Golang with cache
-        uses: magnetikonline/action-golang-cache@v3
+        uses: magnetikonline/action-golang-cache@v5
         with:
           go-version: ${{ env.GO_VERSION }}
 
@@ -150,12 +150,12 @@ jobs:
         name: Set up QEMU
         uses: docker/setup-qemu-action@v2
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
+        uses: docker/setup-buildx-action@v3
         with:
           driver-opts: network=host
 
       - name: Login to Docker Hub
-        uses: docker/login-action@v2
+        uses: docker/login-action@v3
         if: ${{ (github.event_name == 'push') ||(github.event_name == 'create') || (inputs.push_image == true)  }}
         with:
           registry: ghcr.io
@@ -163,7 +163,7 @@ jobs:
           password: ${{ secrets.GH_PAT }}
       - name: Docker meta
         id: meta
-        uses: docker/metadata-action@v4
+        uses: docker/metadata-action@v5
         with:
           images: |
             ghcr.io/${{ github.repository_owner }}/sealos-${{ matrix.module.name }}-controller
@@ -172,7 +172,7 @@ jobs:
             type=raw,value=${{ steps.prepare.outputs.tag_name }},enable=true
 
       - name: build (and publish) ${{ matrix.module.name }} main image
-        uses: docker/build-push-action@v4
+        uses: docker/build-push-action@v6
         with:
           context: ./controllers/${{ matrix.module.path }}
           file: ./controllers/${{ matrix.module.path }}/Dockerfile
@@ -190,7 +190,7 @@ jobs:
     needs:
       - image-build
       - save-sealos
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     strategy:
       matrix:
         module:
@@ -208,7 +208,7 @@ jobs:
           - { name: objectstorage, path: objectstorage }
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
diff --git a/.github/workflows/delete_workflow.yml b/.github/workflows/delete_workflow.yml
index 263c2f41aa05..38cab465e511 100644
--- a/.github/workflows/delete_workflow.yml
+++ b/.github/workflows/delete_workflow.yml
@@ -30,7 +30,7 @@ on:
 
 jobs:
   del_runs:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     steps:
       - name: Delete workflow runs
         uses: Mattraks/delete-workflow-runs@v2
diff --git a/.github/workflows/deploy-docs-preview.yml b/.github/workflows/deploy-docs-preview.yml
index d53f2b149dd9..a8465634290d 100644
--- a/.github/workflows/deploy-docs-preview.yml
+++ b/.github/workflows/deploy-docs-preview.yml
@@ -32,7 +32,7 @@ jobs:
       name: Preview
       url: ${{ steps.vercel-action.outputs.preview-url }}
 
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
 
     # Job outputs
     outputs:
@@ -40,7 +40,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           ref: ${{ github.event.pull_request.head.ref }}
           repository: ${{ github.event.pull_request.head.repo.full_name }}
@@ -91,9 +91,9 @@ jobs:
 
   docsOutput:
     needs: [ build ]
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           ref: ${{ github.event.pull_request.head.ref }}
           repository: ${{ github.event.pull_request.head.repo.full_name }}
diff --git a/.github/workflows/deploy-docs-site.yml b/.github/workflows/deploy-docs-site.yml
index a2d1cdef61cc..342e85c59ffd 100644
--- a/.github/workflows/deploy-docs-site.yml
+++ b/.github/workflows/deploy-docs-site.yml
@@ -26,10 +26,10 @@ env:
 jobs:
   build:
     name: Build
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Detect package manager
         id: detect-package-manager
diff --git a/.github/workflows/docs-site-image.yml b/.github/workflows/docs-site-image.yml
index 8e3bc0199d09..6cb4ef2fb871 100644
--- a/.github/workflows/docs-site-image.yml
+++ b/.github/workflows/docs-site-image.yml
@@ -9,7 +9,7 @@ on:
 
 jobs:
   build-docs-image:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -53,7 +53,7 @@ jobs:
           password: ${{ secrets.ALI_HUB_PASSWORD }}
 
       - name: Build and push Docker images to ghcr.io and Aliyun Hub
-        uses: docker/build-push-action@v5
+        uses: docker/build-push-action@v6
         with:
           context: ./docs
           file: ./docs/website/Dockerfile
@@ -65,11 +65,11 @@ jobs:
 
   update-docs-image:
     needs: build-docs-image
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     if: github.repository == 'labring/sealos'
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - uses: actions-hub/kubectl@master
         env:
           KUBE_CONFIG: ${{ secrets.SEALOS_TOP_KUBE_CONF }}
diff --git a/.github/workflows/e2e_k3s_multi_node.yml b/.github/workflows/e2e_k3s_multi_node.yml
index da74ac52a9a9..cd7910edded5 100644
--- a/.github/workflows/e2e_k3s_multi_node.yml
+++ b/.github/workflows/e2e_k3s_multi_node.yml
@@ -19,7 +19,7 @@ jobs:
       target_pull: true
   e2e_apply_test:
     needs: [ call_ci_workflow ]
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     permissions:
       issues: write
     strategy:
@@ -80,7 +80,7 @@ jobs:
           echo 'test_${{ matrix.arch }}_result=success' >> "$GITHUB_OUTPUT"
   issue_commit:
     needs: [ e2e_apply_test ]
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     permissions:
       issues: write
     if: ${{ always() && github.event.label.name == 'need-e2e-apply-test' }} #success() || failure()
diff --git a/.github/workflows/e2e_k8s_multi_node.yml b/.github/workflows/e2e_k8s_multi_node.yml
index 22bdf1478def..8940d9d85826 100644
--- a/.github/workflows/e2e_k8s_multi_node.yml
+++ b/.github/workflows/e2e_k8s_multi_node.yml
@@ -19,7 +19,7 @@ jobs:
       target_pull: true
   e2e_apply_test:
     needs: [ call_ci_workflow ]
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     permissions:
       issues: write
     strategy:
@@ -80,7 +80,7 @@ jobs:
           echo 'test_${{ matrix.arch }}_result=success' >> "$GITHUB_OUTPUT"
   issue_commit:
     needs: [ e2e_apply_test ]
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     permissions:
       issues: write
     if: ${{ always() && github.event.label.name == 'need-e2e-apply-test' }} #success() || failure()
diff --git a/.github/workflows/e2e_test_core.yml b/.github/workflows/e2e_test_core.yml
index d65f056e827f..446c5d5f3777 100644
--- a/.github/workflows/e2e_test_core.yml
+++ b/.github/workflows/e2e_test_core.yml
@@ -60,7 +60,7 @@ jobs:
             E2E_sealos_runtime_version_docker_127_test,
             E2E_sealos_runtime_version_docker_128_test
           ]
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
     steps:
       - name: Download image-cri-shim
         uses: actions/download-artifact@v4
diff --git a/.github/workflows/e2e_test_core_k3s.yml b/.github/workflows/e2e_test_core_k3s.yml
index 2ef9908dd62a..50769a8522dd 100644
--- a/.github/workflows/e2e_test_core_k3s.yml
+++ b/.github/workflows/e2e_test_core_k3s.yml
@@ -34,7 +34,7 @@ jobs:
           [
             E2E_sealos_k3s_basic_test,
           ]
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
     steps:
       - name: Download image-cri-shim
         uses: actions/download-artifact@v4
diff --git a/.github/workflows/e2e_test_image_cri_shim.yml b/.github/workflows/e2e_test_image_cri_shim.yml
index 89c79c698a41..64cf947c8831 100644
--- a/.github/workflows/e2e_test_image_cri_shim.yml
+++ b/.github/workflows/e2e_test_image_cri_shim.yml
@@ -26,7 +26,7 @@ jobs:
       image: false
   verify-image_cri_shim:
     needs: [ call_ci_workflow ]
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
     steps:
       - name: Install Dependencies
         run: sudo apt update && sudo apt install -y libgpgme-dev libbtrfs-dev libdevmapper-dev
diff --git a/.github/workflows/frontend.yml b/.github/workflows/frontend.yml
index a807f20db17f..0456c92b8bf2 100644
--- a/.github/workflows/frontend.yml
+++ b/.github/workflows/frontend.yml
@@ -1,83 +1,131 @@
 name: Build Frontend Image
 
 on:
-  create:
-    tags:
   workflow_call:
     inputs:
-      push_image:
-        description: 'Push image'
-        required: false
-        type: boolean
-        default: false
-      push_image_tag:
-        description: 'Push image tag'
-        default: 'latest'
-        required: false
+      module:
+        description: "Module"
+        required: true
         type: string
-  workflow_dispatch:
-    inputs:
       push_image:
-        description: 'Push image'
+        description: "Push image"
         required: false
         type: boolean
         default: false
       push_image_tag:
-        description: 'Push image tag'
-        default: 'latest'
+        description: "Push image tag"
+        default: "latest"
         required: false
         type: string
-  push:
-    branches: ['main']
-    paths:
-      - 'frontend/desktop/**'
-      - 'frontend/providers/**'
-      - '.github/workflows/frontend.yml'
-      - '!**/*.md'
-      - '!**/*.yaml'
-  pull_request:
-    branches: ['*']
-    paths:
-      - 'frontend/desktop/**'
-      - 'frontend/providers/**'
-      - '.github/workflows/frontend.yml'
-      - '!**/*.md'
-      - '!**/*.yaml'
 
 env:
   # Common versions
-  GO_VERSION: '1.20'
-  DEFAULT_OWNER: 'labring'
+  GO_VERSION: "1.20"
+  DEFAULT_OWNER: "labring"
 
 jobs:
   image-build:
-    runs-on: ubuntu-latest
     strategy:
       matrix:
-        module:
-          [
-            providers/license,
-            providers/cronjob,
-            providers/template,
-            providers/adminer,
-            providers/applaunchpad,
-            providers/terminal,
-            providers/dbprovider,
-            providers/costcenter,
-            providers/objectstorage,
-            providers/kubepanel,
-            providers/workorder,
-            providers/devbox,
-            desktop,
-          ]
+        include:
+          - arch: amd64
+          - arch: arm64
+            runs-on: ubuntu-24.04-arm
+    runs-on: ${{ matrix.runs-on || 'ubuntu-24.04' }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Extract module name
+        id: module_name
+        run: |
+          MODULE_NAME=$(basename ${{ inputs.module }})
+          echo "MODULE_NAME=${MODULE_NAME}" >> $GITHUB_ENV
+          echo "GHCR_REPO=ghcr.io/${{ github.repository_owner }}/sealos-${MODULE_NAME}-frontend" >> $GITHUB_ENV
+
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: |
+            ${{ env.GHCR_REPO }}
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to Github Container Hub
+        if: ${{ inputs.push_image }}
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GH_PAT }}
+
+      - name: Build
+        id: build
+        uses: docker/build-push-action@v6
+        with:
+          context: ./frontend
+          file: ./frontend/Dockerfile
+          platforms: linux/${{ matrix.arch }}
+          build-args: |
+            name=${{ env.MODULE_NAME }}
+            path=${{ inputs.module }}
+          labels: ${{ steps.meta.outputs.labels }}
+          outputs: type=image,"name=${{ env.GHCR_REPO }}",name-canonical=true,push-by-digest=${{ inputs.push_image }},push=${{ inputs.push_image }}
+      - name: Export digest
+        run: |
+          mkdir -p ${{ runner.temp }}/digests
+          digest="${{ steps.build.outputs.digest }}"
+          touch "${{ runner.temp }}/digests/${digest#sha256:}"
+
+      - name: Upload digest
+        uses: actions/upload-artifact@v4
+        with:
+          name: digests-${{ env.MODULE_NAME }}-${{ matrix.arch }}
+          path: ${{ runner.temp }}/digests/*
+          if-no-files-found: error
+          retention-days: 1
+
+  image-release:
+    name: Push Docker Images
+    needs: image-build
+    runs-on: ubuntu-24.04
+    if: ${{ inputs.push_image }}
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
+      - name: Login to Github Container Hub
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GH_PAT }}
+
+      - name: Extract module name
+        id: module_name
+        run: |
+          MODULE_NAME=$(basename ${{ inputs.module }})
+          echo "MODULE_NAME=${MODULE_NAME}" >> $GITHUB_ENV
+          echo "GHCR_REPO=ghcr.io/${{ github.repository_owner }}/sealos-${MODULE_NAME}-frontend" >> $GITHUB_ENV
+
+      - name: Download digests
+        uses: actions/download-artifact@v4
+        with:
+          path: ${{ runner.temp }}/digests
+          pattern: digests-${{ env.MODULE_NAME }}-*
+          merge-multiple: true
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
       - name: Expose git commit data
         uses: rlespinasse/git-commit-data-action@v1
+
       - name: Check if tag
         id: check_tag
         run: |
@@ -86,100 +134,47 @@ jobs:
           else
             echo "isTag=false" >> "$GITHUB_OUTPUT"
           fi
+
       - name: Prepare
         id: prepare
         run: |
-          bash ./scripts/resolve-tag-image.sh "${{ inputs.push_image }}" "${{ steps.check_tag.outputs.isTag }}"  "${{ inputs.push_image_tag }}"
-      - name: Extract module name
-        id: module_name
-        run: |
-          MODULE_NAME=$(basename ${{ matrix.module }})
-          echo "MODULE_NAME=${MODULE_NAME}" >> $GITHUB_ENV
+          bash ./scripts/resolve-tag-image.sh "${{ inputs.push_image }}" "${{ steps.check_tag.outputs.isTag }}" "${{ inputs.push_image_tag }}"
 
       - name: Docker meta
         id: meta
-        uses: docker/metadata-action@v4
+        uses: docker/metadata-action@v5
         with:
           images: |
-            ghcr.io/${{ github.repository_owner }}/sealos-${{ env.MODULE_NAME }}-frontend
+            ${{ env.GHCR_REPO }}
           tags: |
             type=raw,value=latest,enable=${{ github.ref == format('refs/heads/{0}', 'main') }}
             type=raw,value=${{ steps.prepare.outputs.tag_name }},enable=true
+            type=sha
 
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v2
+      - name: Create manifest list and push
+        working-directory: ${{ runner.temp }}/digests
+        run: |
+          docker buildx imagetools create $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
+            $(printf '${{ env.GHCR_REPO }}@sha256:%s ' *)
 
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
+      - name: Inspect image
+        run: |
+          docker buildx imagetools inspect ${{ env.GHCR_REPO }}:${{ steps.meta.outputs.version }}
 
-      - name: Login to Github Container Hub
-        if: ${{ (github.event_name == 'push') ||(github.event_name == 'create') || (inputs.push_image == true) }}
-        uses: docker/login-action@v2
-        with:
-          registry: ghcr.io
-          username: ${{ github.repository_owner }}
-          password: ${{ secrets.GH_PAT }}
-      - name: Cache pnpm-store
-        uses: actions/cache@v3
-        with:
-          path: pnpm-store
-          key: pnpm-store-${{ hashFiles('Dockerfile') }}
-      - name: inject pnpm-store into docker
-        uses: reproducible-containers/buildkit-cache-dance@v2.1.2
-        with:
-          cache-source: pnpm-store
-      - name: Build And Push
-        uses: docker/build-push-action@v4
-        with:
-          context: ./frontend
-          file: ./frontend/Dockerfile
-          platforms: linux/amd64,linux/arm64
-          build-args: |
-            name=${{ env.MODULE_NAME }}
-            path=${{ matrix.module }}
-          # Push if it's a push event or if push_image is true
-          push: ${{ (github.event_name == 'push') ||(github.event_name == 'create') || (inputs.push_image == true)  }}
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
-  save-sealos:
-    uses: ./.github/workflows/import-save-sealos.yml
-    with:
-      artifact_name: sealos-frontend
   cluster-image-build:
-    if: ${{ (github.event_name == 'push') ||(github.event_name == 'create') || (inputs.push_image == true)  }}
     needs:
-      - image-build
-      - save-sealos
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        module:
-          [
-            providers/license,
-            providers/cronjob,
-            providers/template,
-            providers/adminer,
-            providers/applaunchpad,
-            providers/terminal,
-            providers/dbprovider,
-            providers/costcenter,
-            providers/objectstorage,
-            providers/kubepanel,
-            providers/workorder,
-            providers/devbox,
-            desktop,
-          ]
+      - image-release
+    if: ${{ inputs.push_image }}
+    runs-on: ubuntu-24.04
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - name: Extract module name
         id: module_name
         run: |
-          MODULE_NAME=$(basename ${{ matrix.module }})
+          MODULE_NAME=$(basename ${{ inputs.module }})
           echo "MODULE_NAME=${MODULE_NAME}" >> $GITHUB_ENV
 
       - name: Expose git commit data
@@ -195,7 +190,7 @@ jobs:
       - name: Prepare
         id: prepare
         run: |
-          tag_name=$(bash ./scripts/resolve-tag-image.sh "${{ inputs.push_image }}" "${{ steps.check_tag.outputs.isTag }}"  "${{ inputs.push_image_tag }}")
+          tag_name=$(bash ./scripts/resolve-tag-image.sh "${{ inputs.push_image }}" "${{ steps.check_tag.outputs.isTag }}" "${{ inputs.push_image_tag }}")
           echo old_docker_repo=ghcr.io/labring/sealos-${{ env.MODULE_NAME }}-frontend >> $GITHUB_OUTPUT
           echo old_docker_image=ghcr.io/labring/sealos-${{ env.MODULE_NAME }}-frontend:latest >> $GITHUB_OUTPUT
           echo new_docker_repo=ghcr.io/${{ github.repository_owner }}/sealos-${{ env.MODULE_NAME }}-frontend >> $GITHUB_OUTPUT
@@ -220,7 +215,7 @@ jobs:
           sudo sealos login -u ${{ github.repository_owner }} -p ${{ secrets.GH_PAT }} --debug ghcr.io
 
       - name: Build ${{ env.MODULE_NAME }}-frontend cluster image
-        working-directory: frontend/${{ matrix.module }}/deploy
+        working-directory: frontend/${{ inputs.module }}/deploy
         run: |
           sudo sed -i "s;${{ steps.prepare.outputs.old_docker_image }};${{ steps.prepare.outputs.new_docker_image }};" manifests/*
           sudo sealos build -t ${{ steps.prepare.outputs.cluster_image }}-amd64 --platform linux/amd64 -f Kubefile
@@ -244,14 +239,14 @@ jobs:
         with:
           version: v0.0.8-rc1
         env:
-          GH_TOKEN: '${{ secrets.GH_PAT }}'
-          SEALOS_TYPE: 'issue_renew'
-          SEALOS_ISSUE_TITLE: '[DaylyReport] Auto build for sealos'
-          SEALOS_ISSUE_BODYFILE: 'scripts/ISSUE_RENEW.md'
-          SEALOS_ISSUE_LABEL: 'dayly-report'
-          SEALOS_ISSUE_TYPE: 'day'
-          SEALOS_ISSUE_REPO: 'labring-actions/cluster-image'
-          SEALOS_COMMENT_BODY: '/imagesync ${{ steps.prepare.outputs.cluster_image }}'
+          GH_TOKEN: "${{ secrets.GH_PAT }}"
+          SEALOS_TYPE: "issue_renew"
+          SEALOS_ISSUE_TITLE: "[DaylyReport] Auto build for sealos"
+          SEALOS_ISSUE_BODYFILE: "scripts/ISSUE_RENEW.md"
+          SEALOS_ISSUE_LABEL: "dayly-report"
+          SEALOS_ISSUE_TYPE: "day"
+          SEALOS_ISSUE_REPO: "labring-actions/cluster-image"
+          SEALOS_COMMENT_BODY: "/imagesync ${{ steps.prepare.outputs.cluster_image }}"
 
       - name: Renew issue and Sync Images for ${{ steps.prepare.outputs.latest_cluster_image }}
         uses: labring/gh-rebot@v0.0.6
@@ -259,11 +254,11 @@ jobs:
         with:
           version: v0.0.8-rc1
         env:
-          GH_TOKEN: '${{ secrets.GH_PAT }}'
-          SEALOS_TYPE: 'issue_renew'
-          SEALOS_ISSUE_TITLE: '[DaylyReport] Auto build for sealos'
-          SEALOS_ISSUE_BODYFILE: 'scripts/ISSUE_RENEW.md'
-          SEALOS_ISSUE_LABEL: 'dayly-report'
-          SEALOS_ISSUE_TYPE: 'day'
-          SEALOS_ISSUE_REPO: 'labring-actions/cluster-image'
-          SEALOS_COMMENT_BODY: '/imagesync ${{ steps.prepare.outputs.latest_cluster_image }}'
+          GH_TOKEN: "${{ secrets.GH_PAT }}"
+          SEALOS_TYPE: "issue_renew"
+          SEALOS_ISSUE_TITLE: "[DaylyReport] Auto build for sealos"
+          SEALOS_ISSUE_BODYFILE: "scripts/ISSUE_RENEW.md"
+          SEALOS_ISSUE_LABEL: "dayly-report"
+          SEALOS_ISSUE_TYPE: "day"
+          SEALOS_ISSUE_REPO: "labring-actions/cluster-image"
+          SEALOS_COMMENT_BODY: "/imagesync ${{ steps.prepare.outputs.latest_cluster_image }}"
diff --git a/.github/workflows/frontends.yml b/.github/workflows/frontends.yml
new file mode 100644
index 000000000000..d8aed24959fd
--- /dev/null
+++ b/.github/workflows/frontends.yml
@@ -0,0 +1,79 @@
+name: Build Frontends Image
+
+on:
+  create:
+    tags:
+  workflow_call:
+    inputs:
+      push_image:
+        description: "Push image"
+        required: false
+        type: boolean
+        default: false
+      push_image_tag:
+        description: "Push image tag"
+        default: "latest"
+        required: false
+        type: string
+  workflow_dispatch:
+    inputs:
+      push_image:
+        description: "Push image"
+        required: false
+        type: boolean
+        default: false
+      push_image_tag:
+        description: "Push image tag"
+        default: "latest"
+        required: false
+        type: string
+  push:
+    branches: ["main"]
+    paths:
+      - "frontend/desktop/**"
+      - "frontend/providers/**"
+      - ".github/workflows/frontend.yml"
+      - "!**/*.md"
+      - "!**/*.yaml"
+  pull_request:
+    branches: ["*"]
+    paths:
+      - "frontend/desktop/**"
+      - "frontend/providers/**"
+      - ".github/workflows/frontend.yml"
+      - "!**/*.md"
+      - "!**/*.yaml"
+
+jobs:
+  save-sealos:
+    uses: ./.github/workflows/import-save-sealos.yml
+    with:
+      artifact_name: sealos-frontend
+
+  image-build:
+    uses: ./.github/workflows/frontend.yml
+    needs: save-sealos
+    secrets: inherit
+    strategy:
+      fail-fast: false
+      matrix:
+        module:
+          [
+            providers/license,
+            providers/cronjob,
+            providers/template,
+            providers/adminer,
+            providers/applaunchpad,
+            providers/terminal,
+            providers/dbprovider,
+            providers/costcenter,
+            providers/objectstorage,
+            providers/kubepanel,
+            providers/workorder,
+            providers/devbox,
+            desktop,
+          ]
+    with:
+      module: ${{ matrix.module }}
+      push_image: ${{ (github.event_name == 'push') || (github.event_name == 'create') || (inputs.push_image == true) }}
+      push_image_tag: ${{ inputs.push_image_tag }}
diff --git a/.github/workflows/import-patch-image.yml b/.github/workflows/import-patch-image.yml
index 13b5ee2b0d83..20de191621a4 100755
--- a/.github/workflows/import-patch-image.yml
+++ b/.github/workflows/import-patch-image.yml
@@ -26,15 +26,15 @@ on:
 
 jobs:
   resolve-modules-arch:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
     outputs:
       matrix: ${{ steps.set-matrix.outputs.matrix }}
     steps:
       - name: Checkout
         if: ${{ (inputs.target_pull == false) }}
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Checkout by Pull Request Target
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         if: ${{ (inputs.target_pull == true) }}
         with:
           ref: ${{ github.event.pull_request.head.ref }}
@@ -43,15 +43,15 @@ jobs:
         id: set-matrix
         run: bash ./scripts/resolve-patch-modules.sh ${{ inputs.arch }} "true"
   resolve-modules:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
     outputs:
       matrix: ${{ steps.set-matrix.outputs.matrix }}
     steps:
       - name: Checkout
         if: ${{ (inputs.target_pull == false) }}
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Checkout by Pull Request Target
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         if: ${{ (inputs.target_pull == true) }}
         with:
           ref: ${{ github.event.pull_request.head.ref }}
@@ -61,23 +61,23 @@ jobs:
         run: bash ./scripts/resolve-patch-modules.sh ${{ inputs.arch }}
   build:
     needs: [ resolve-modules ]
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
     strategy:
       matrix: ${{ fromJson(needs.resolve-modules.outputs.matrix) }}
     steps:
       - name: Checkout
         if: ${{ (inputs.target_pull == false) }}
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - name: Checkout by Pull Request Target
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         if: ${{ (inputs.target_pull == true) }}
         with:
           ref: ${{ github.event.pull_request.head.ref }}
           repository: ${{ github.event.pull_request.head.repo.full_name }}
       - name: Setup Golang with cache
-        uses: magnetikonline/action-golang-cache@v3
+        uses: magnetikonline/action-golang-cache@v5
         with:
           go-version: ${{ env.GO_VERSION }}
 
@@ -98,22 +98,22 @@ jobs:
           name: ${{ matrix.binary }}-${{ matrix.arch }}
           path: bin/linux_${{ matrix.arch}}/${{ matrix.binary }}
   test:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
     if: ${{ (inputs.e2e == true) }}
     steps:
       - name: Checkout
         if: ${{ (inputs.target_pull == false) }}
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - name: Checkout by Pull Request Target
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         if: ${{ (inputs.target_pull == true) }}
         with:
           ref: ${{ github.event.pull_request.head.ref }}
           repository: ${{ github.event.pull_request.head.repo.full_name }}
       - name: Setup Golang with cache
-        uses: magnetikonline/action-golang-cache@v3
+        uses: magnetikonline/action-golang-cache@v5
         with:
           go-version: ${{ env.GO_VERSION }}
       - name: Install Dependencies
@@ -129,7 +129,7 @@ jobs:
           path: test/e2e/e2e.test
   docker:
     needs: [ resolve-modules-arch,build ]
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
     if: ${{ (inputs.image == true) }}
     services:
       registry:
@@ -141,9 +141,9 @@ jobs:
     steps:
       - name: Checkout
         if: ${{ (inputs.target_pull == false) }}
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Checkout by Pull Request Target
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         if: ${{ (inputs.target_pull == true) }}
         with:
           ref: ${{ github.event.pull_request.head.ref }}
@@ -176,7 +176,7 @@ jobs:
           path: docker/sealos
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
+        uses: docker/setup-buildx-action@v3
         with:
           driver-opts: network=host
 
@@ -187,7 +187,7 @@ jobs:
           chmod a+x docker/lvscare/*
 
       - name: Build and Push lvscare Image
-        uses: docker/build-push-action@v3
+        uses: docker/build-push-action@v6
         with:
           context: docker/lvscare
           file: docker/lvscare/Dockerfile.main
diff --git a/.github/workflows/import-save-sealos.yml b/.github/workflows/import-save-sealos.yml
index 2b91cacfb543..5c2aee8e2b6a 100755
--- a/.github/workflows/import-save-sealos.yml
+++ b/.github/workflows/import-save-sealos.yml
@@ -14,7 +14,7 @@ on:
 
 jobs:
   save-sealos:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     steps:
       - name: Install sealos
         uses: labring/sealos-action@v0.0.7
diff --git a/.github/workflows/objectstorage.yaml b/.github/workflows/objectstorage.yaml
index 6a73be61f262..f27e59fe15a1 100644
--- a/.github/workflows/objectstorage.yaml
+++ b/.github/workflows/objectstorage.yaml
@@ -67,10 +67,10 @@ jobs:
     if: ${{ (github.event_name == 'release') ||(github.event_name == 'push')  || (inputs.push_image == true) }}
     needs:
       - save-sealos
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - name: Expose git commit data
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 2c5f7ef858ee..c82057c36371 100755
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -14,15 +14,15 @@ on:
 
 jobs:
   goreleaser:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
       - name: Setup Golang with cache
-        uses: magnetikonline/action-golang-cache@v3
+        uses: magnetikonline/action-golang-cache@v5
         with:
           go-version: ${{ env.GO_VERSION }}
 
@@ -33,14 +33,14 @@ jobs:
             qemu-user-static binfmt-support
 
       - name: Login to GitHub Container Registry
-        uses: docker/login-action@v2
+        uses: docker/login-action@v3
         with:
           registry: ghcr.io
           username: ${{ github.repository_owner }}
           password: ${{ secrets.GH_RELEASE_PAT }}
 
       - name: Run GoReleaser
-        uses: goreleaser/goreleaser-action@v3
+        uses: goreleaser/goreleaser-action@v6
         with:
           args: release --clean --release-footer-tmpl=scripts/release/footer.md.tmpl --release-header-tmpl=scripts/release/head.md.tmpl
         env:
@@ -49,12 +49,12 @@ jobs:
           FURY_TOKEN: ${{ secrets.FURY_TOKEN }}
 
   sync:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
     needs:
       - goreleaser
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - name: Fetch Current version
@@ -91,12 +91,12 @@ jobs:
           SEALOS_COMMENT_BODY: "/imagebuild_apps sealos ${{steps.get-current-tag.outputs.tag }}"
 
   changelog:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
     needs:
       - goreleaser
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - name: Fetch Current version
diff --git a/.github/workflows/services.yml b/.github/workflows/services.yml
index 75b7b2850bae..929fd67ac7f4 100644
--- a/.github/workflows/services.yml
+++ b/.github/workflows/services.yml
@@ -50,12 +50,12 @@ env:
 
 jobs:
   resolve-modules:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
     outputs:
       matrix: ${{ steps.set-matrix.outputs.matrix }}
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Resolve Modules
         id: set-matrix
@@ -63,39 +63,39 @@ jobs:
 
   golangci-lint:
     needs: [  resolve-modules ]
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
     strategy:
       matrix: ${{ fromJson(needs.resolve-modules.outputs.matrix) }}
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup Golang with cache
-        uses: magnetikonline/action-golang-cache@v3
+        uses: magnetikonline/action-golang-cache@v5
         with:
           go-version: ${{ env.GO_VERSION }}
 
       - name: Run Linter
-        uses: golangci/golangci-lint-action@v3
+        uses: golangci/golangci-lint-action@v6
         with:
           version: v1.54.2
           working-directory: ${{ matrix.workdir }}
           args: "--out-${NO_FUTURE}format colored-line-number"
 
   image-build:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     strategy:
       matrix:
         ## TODO: add more modules
-        module: [ database, pay, account, minio, launchpad, exceptionmonitor, aiproxy, devbox ]
+        module: [ database, pay, account, minio, launchpad, exceptionmonitor, aiproxy, devbox, vlogs ]
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
       - name: Setup Golang with cache
-        uses: magnetikonline/action-golang-cache@v3
+        uses: magnetikonline/action-golang-cache@v5
         with:
           go-version: ${{ env.GO_VERSION }}
 
@@ -138,12 +138,12 @@ jobs:
         name: Set up QEMU
         uses: docker/setup-qemu-action@v2
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
+        uses: docker/setup-buildx-action@v3
         with:
           driver-opts: network=host
 
       - name: Login to Docker Hub
-        uses: docker/login-action@v2
+        uses: docker/login-action@v3
         if: ${{ (github.event_name == 'push') ||(github.event_name == 'create') || (inputs.push_image == true)  }}
         with:
           registry: ghcr.io
@@ -152,7 +152,7 @@ jobs:
 
       - name: Docker meta
         id: meta
-        uses: docker/metadata-action@v4
+        uses: docker/metadata-action@v5
         with:
           images: |
             ghcr.io/${{ github.repository_owner }}/sealos-${{ matrix.module }}-service
@@ -161,7 +161,7 @@ jobs:
             type=raw,value=${{ steps.prepare.outputs.tag_name }},enable=true
 
       - name: build (and publish) ${{ matrix.module }} main image
-        uses: docker/build-push-action@v4
+        uses: docker/build-push-action@v6
         with:
           context: ./service/${{ matrix.module }}
           file: ./service/${{ matrix.module }}/Dockerfile
@@ -180,14 +180,14 @@ jobs:
     needs:
       - image-build
       - save-sealos
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     strategy:
       matrix:
         ## TODO: add more modules
-        module: [ database, pay, account, minio, launchpad, exceptionmonitor, aiproxy, devbox ]
+        module: [ database, pay, account, minio, launchpad, exceptionmonitor, aiproxy, devbox, vlogs ]
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
diff --git a/.github/workflows/sync_code.yml b/.github/workflows/sync_code.yml
index cb19b9f704fc..1ef254953d27 100644
--- a/.github/workflows/sync_code.yml
+++ b/.github/workflows/sync_code.yml
@@ -8,10 +8,10 @@ on:
   workflow_dispatch:
 jobs:
   sync:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Run GitHub File Sync
         # Can update to v1 when https://github.com/BetaHuhn/repo-file-sync-action/issues/168 is resolved
diff --git a/.github/workflows/sync_docs.yml b/.github/workflows/sync_docs.yml
index 9bd054624a8e..71f9300c0a24 100644
--- a/.github/workflows/sync_docs.yml
+++ b/.github/workflows/sync_docs.yml
@@ -9,10 +9,10 @@ on:
   workflow_dispatch:
 jobs:
   sync:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Run GitHub File Sync
         uses: BetaHuhn/repo-file-sync-action@v1.21.0
diff --git a/.github/workflows/webhooks.yml b/.github/workflows/webhooks.yml
index 47d05e8a276a..dd6248e315c8 100644
--- a/.github/workflows/webhooks.yml
+++ b/.github/workflows/webhooks.yml
@@ -28,12 +28,12 @@ env:
 
 jobs:
   resolve-modules:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
     outputs:
       matrix: ${{ steps.set-matrix.outputs.matrix }}
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Resolve Modules
         id: set-matrix
@@ -41,15 +41,15 @@ jobs:
 
   golangci-lint:
     needs: [ resolve-modules ]
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
     strategy:
       matrix: ${{ fromJson(needs.resolve-modules.outputs.matrix) }}
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup Golang with cache
-        uses: magnetikonline/action-golang-cache@v3
+        uses: magnetikonline/action-golang-cache@v5
         with:
           go-version: ${{ env.GO_VERSION }}
 
@@ -57,25 +57,25 @@ jobs:
         run: sudo apt update && sudo apt install -y libgpgme-dev libbtrfs-dev libdevmapper-dev
 
       - name: Run Linter
-        uses: golangci/golangci-lint-action@v3
+        uses: golangci/golangci-lint-action@v6
         with:
           version: v1.54.2
           working-directory: ${{ matrix.workdir }}
           args: "--out-${NO_FUTURE}format colored-line-number"
 
   image-build:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     strategy:
       matrix:
         module: [ admission ]
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
       - name: Setup Golang with cache
-        uses: magnetikonline/action-golang-cache@v3
+        uses: magnetikonline/action-golang-cache@v5
         with:
           go-version: ${{ env.GO_VERSION }}
 
@@ -107,12 +107,12 @@ jobs:
         name: Set up QEMU
         uses: docker/setup-qemu-action@v2
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
+        uses: docker/setup-buildx-action@v3
         with:
           driver-opts: network=host
 
       - name: Login to Docker Hub
-        uses: docker/login-action@v2
+        uses: docker/login-action@v3
         if: ${{ (github.event_name == 'push') || (inputs.push_mage == true) }}
         with:
           registry: ghcr.io
diff --git a/README.md b/README.md
index 5b35844dfe18..0b8903d64625 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@
     <img src="./docs/4.0/img/sealos-left.png" />
   </picture>
   
-A Cloud Operating System designed for managing cloud-native applications
+A Cloud Operating System for Managing Cloud Native Applications
 
 </h2>
 
@@ -38,7 +38,7 @@ A Cloud Operating System designed for managing cloud-native applications
 
 <br />
 
-[![discord](https://theme.zdassets.com/theme_assets/678183/cc59daa07820943e943c2fc283b9079d7003ff76.svg)](https://discord.gg/qzBmGGZGk7)
+[![Discord](https://theme.zdassets.com/theme_assets/678183/cc59daa07820943e943c2fc283b9079d7003ff76.svg)](https://discord.gg/qzBmGGZGk7)
 
 </div>
 
@@ -54,47 +54,47 @@ Sealos['siːləs] is a cloud operating system distribution based on the Kubernet
 
 <img width="916" alt="image" src="https://github.com/labring/sealos/assets/8912557/9e8c1d76-718e-4910-a9ab-94f220a61a9c">
 
-## Create any development environment in sealos with one click
+## Create your Development Environment in Sealos with just one click
 
-1. [Login in](https://cloud.sealos.run) , open sealos Devbox.
+1. [Login](https://cloud.sealos.run) and open Sealos Devbox.
    
    <img width="656" alt="image" src="https://github.com/user-attachments/assets/79692f6c-315f-4363-9426-b41f541f9a55">
    
-2. Create a development env, any language, any framework.
+2. Create a development environment, choosing from a range of languages and frameworks.
    
    <img width="1147" alt="image" src="https://github.com/user-attachments/assets/6075bbb0-4765-4786-9154-3adaa139900c">
    
-3. Use vscode or cursor access to the Env.
+3. Access your environment from a selection of IDEs, such as VSCode and Cursor.
    
    <img width="864" alt="image" src="https://github.com/user-attachments/assets/e5f9dcdc-5149-4e43-aa13-6c17507fbe9f">
    
    <img width="1024" alt="image" src="https://github.com/user-attachments/assets/9a985280-6ff2-48dc-83b9-9abd8f93af17">
 
-## Create any database on sealos
+## Create your Database on Sealos
 
-1. [Login in](https://cloud.sealos.run) , open sealos database.
+1. [Login](https://cloud.sealos.run), open Sealos database.
    
    <img width="567" alt="image" src="https://github.com/user-attachments/assets/74ca3ce9-6ef8-4396-b9c2-7c1940bb7e0c">
 
-2. Create Database.
+2. Create your database.
 
    <img width="874" alt="image" src="https://github.com/user-attachments/assets/4cc88a54-70e6-458f-9766-4578774e7f81">
 
-3. Access your database.
+3. View your database and access details.
 
    <img width="1430" alt="image" src="https://github.com/user-attachments/assets/bcf54218-f4f4-4c89-a107-0bbde6f92d67">
 
-## Deploy any docker image on sealos
+## Deploy your Docker Image on Sealos
 
-1. [Login in](https://cloud.sealos.run) , open sealos App launchpad.
+1. [Login](https://cloud.sealos.run), open Sealos App Launchpad.
 
-  <img width="567" alt="image" src="https://github.com/user-attachments/assets/5f6481c0-05c6-4892-a096-94b613cee73c">
+   <img width="567" alt="image" src="https://github.com/user-attachments/assets/5f6481c0-05c6-4892-a096-94b613cee73c">
 
-2. Deploy a docker image, ingress, deployment...
+2. Deploy the Docker image using a Kubernetes Deployment and expose it with an Ingress.
 
    <img width="971" alt="image" src="https://github.com/user-attachments/assets/a291571f-d9fe-42e5-812e-3d8f274a97ca">
 
-3. Access your service.
+3. View your app details and access your service.
 
    <img width="1016" alt="image" src="https://github.com/user-attachments/assets/a54884cf-a1e8-4178-88af-655234ec7eef">
 
@@ -118,9 +118,9 @@ Sealos['siːləs] is a cloud operating system distribution based on the Kubernet
 
 ## 🏘️ Community & support
 
-+ 🌐 Visit the [Sealos website](https://sealos.io/) for full documentation and useful links.
-+ 💬 Join our [Discord server](https://discord.gg/qzBmGGZGk7) is to chat with Sealos developers and other Sealos users. This is a good place to learn about Sealos and Kubernetes, ask questions, and share your experiences.
-+ 🐦 Tweet at @sealosio on [Twitter](https://twitter.com/sealosio) and follow us.
++ 🌐 Visit the [Sealos Website](https://sealos.io/) for full documentation and useful links.
++ 💬 Join our [Discord Server](https://discord.gg/qzBmGGZGk7) is to chat with Sealos developers and other Sealos users. This is a good place to learn about Sealos and Kubernetes, ask questions, and share your experiences.
++ 🐦 Tweet at @Sealos_io on [X/Twitter](https://x.com/Sealos_io) and follow us.
 + 🐞 Create [GitHub Issues](https://github.com/labring/sealos/issues/new/choose) for bug reports and feature requests.
 
 ## 🚧 Roadmap
@@ -129,7 +129,7 @@ Sealos maintains a [public roadmap](https://github.com/orgs/labring/projects/4/v
 
 ## 👩‍💻 Contributing & Development
 
-Have a look through [existing Issues](https://github.com/labring/sealos/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc) and [Pull Requests](https://github.com/labring/sealos/pulls?q=is%3Apr+is%3Aopen+sort%3Aupdated-desc) that you could help with. If you'd like to request a feature or report a bug, please [create a GitHub Issue](https://github.com/labring/sealos/issues/new/choose) using one of the templates provided.
+Have a look through [existing issues](https://github.com/labring/sealos/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc) and [Pull Requests](https://github.com/labring/sealos/pulls?q=is%3Apr+is%3Aopen+sort%3Aupdated-desc) that you could help with. If you'd like to request a feature or report a bug, please [create a GitHub Issue](https://github.com/labring/sealos/issues/new/choose) using one of the templates provided.
 
 📖 [See contribution guide →](./CONTRIBUTING.md)
 
diff --git a/README_zh.md b/README_zh.md
index 1336e1cf98bb..b10897ce2581 100644
--- a/README_zh.md
+++ b/README_zh.md
@@ -85,7 +85,7 @@ Sealos 是一款以 Kubernetes 为内核的**云操作系统发行版**。它以
 
 - 💬 加入我们的 [Discord服务器](https://discord.gg/qzBmGGZGk7)，与 Sealos 开发者和终端用户进行交流。这是了解 Sealos 和 Kubernetes 以及提问和分享经验的理想之地。
 
-- 🐦 在 [Twitter](https://twitter.com/sealosio) 上关注我们。
+- 🐦 在 [Twitter](https://twitter.com/Sailos_io) 上关注我们。
 
 - 🐞 请将任何 Sealos 的 Bug、问题和需求提交到 [GitHub Issue](https://github.com/labring/sealos/issues/new/choose)。
 
diff --git a/controllers/account/config/rbac/role.yaml b/controllers/account/config/rbac/role.yaml
index ae3b9773c50b..26a337e80020 100644
--- a/controllers/account/config/rbac/role.yaml
+++ b/controllers/account/config/rbac/role.yaml
@@ -208,6 +208,18 @@ rules:
   - get
   - patch
   - update
+- apiGroups:
+  - batch
+  resources:
+  - cronjobs
+  verbs:
+  - create
+  - delete
+  - get
+  - list
+  - patch
+  - update
+  - watch
 - apiGroups:
   - ""
   resources:
diff --git a/controllers/account/controllers/account_controller.go b/controllers/account/controllers/account_controller.go
index f7c21e42564a..a32b2911d239 100644
--- a/controllers/account/controllers/account_controller.go
+++ b/controllers/account/controllers/account_controller.go
@@ -59,6 +59,33 @@ import (
 	"sigs.k8s.io/controller-runtime/pkg/controller/controllerutil"
 )
 
+type CVMTaskRunner struct {
+	DBClient database.Interface
+	Logger   logr.Logger
+	*AccountReconciler
+}
+
+func (r *CVMTaskRunner) Start(ctx context.Context) error {
+	ticker := time.NewTicker(env.GetDurationEnvWithDefault("BILLING_CVM_INTERVAL", 10*time.Minute))
+	defer func() {
+		ticker.Stop()
+		r.Logger.Info("stop billing cvm")
+	}()
+	for {
+		select {
+		case <-ticker.C:
+			r.Logger.Info("start billing cvm", "time", time.Now().Format(time.RFC3339))
+			err := r.BillingCVM()
+			if err != nil {
+				r.Logger.Error(err, "fail to billing cvm")
+			}
+			r.Logger.Info("end billing cvm", "time", time.Now().Format(time.RFC3339))
+		case <-ctx.Done():
+			return nil
+		}
+	}
+}
+
 const (
 	ACCOUNTNAMESPACEENV     = "ACCOUNT_NAMESPACE"
 	DEFAULTACCOUNTNAMESPACE = "sealos-system"
diff --git a/controllers/account/controllers/billing_controller.go b/controllers/account/controllers/billing_controller.go
index 7d78299d9d82..71c2229d2bb9 100644
--- a/controllers/account/controllers/billing_controller.go
+++ b/controllers/account/controllers/billing_controller.go
@@ -22,27 +22,63 @@ import (
 	"strings"
 	"time"
 
+	"k8s.io/client-go/rest"
+
+	"k8s.io/client-go/kubernetes/scheme"
+
+	"github.com/labring/sealos/controllers/pkg/utils/env"
+
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+
+	userv1 "github.com/labring/sealos/controllers/user/api/v1"
+
+	ctrl "sigs.k8s.io/controller-runtime"
+
 	"github.com/labring/sealos/controllers/pkg/types"
 
-	v12 "github.com/labring/sealos/controllers/account/api/v1"
 	"github.com/labring/sealos/controllers/pkg/resources"
 
-	"sigs.k8s.io/controller-runtime/pkg/controller"
-
 	"github.com/go-logr/logr"
-	corev1 "k8s.io/api/core/v1"
-	"sigs.k8s.io/controller-runtime/pkg/builder"
-	"sigs.k8s.io/controller-runtime/pkg/event"
-	"sigs.k8s.io/controller-runtime/pkg/predicate"
 
 	"github.com/labring/sealos/controllers/pkg/database"
-	v1 "github.com/labring/sealos/controllers/user/api/v1"
 
 	"k8s.io/apimachinery/pkg/runtime"
-	ctrl "sigs.k8s.io/controller-runtime"
 	"sigs.k8s.io/controller-runtime/pkg/client"
 )
 
+type BillingTaskRunner struct {
+	*BillingReconciler
+}
+
+func (r *BillingTaskRunner) Start(ctx context.Context) error {
+	if err := r.ExecuteBillingTask(); err != nil {
+		r.Logger.Error(err, "failed to execute billing task")
+	}
+	defer func() {
+		r.Logger.Info("stop billing reconcile", "time", time.Now().Format(time.RFC3339))
+	}()
+	now := time.Now()
+	nextHour := now.Truncate(time.Hour).Add(time.Hour).Add(5 * time.Minute)
+	r.Logger.Info("next billing reconcile time", "time", nextHour.Format(time.RFC3339))
+	time.Sleep(nextHour.Sub(now))
+
+	ticker := time.NewTicker(time.Hour)
+	defer ticker.Stop()
+	for {
+		if err := r.ExecuteBillingTask(); err != nil {
+			r.Logger.Error(err, "failed to execute billing task")
+		}
+		select {
+		case <-ticker.C:
+			if err := r.ExecuteBillingTask(); err != nil {
+				r.Logger.Error(err, "failed to execute billing task")
+			}
+		case <-ctx.Done():
+			return nil
+		}
+	}
+}
+
 const (
 	UserNamespacePrefix = "ns-"
 	ResourceQuotaPrefix = "quota-"
@@ -55,83 +91,110 @@ type BillingReconciler struct {
 	client.Client
 	Scheme *runtime.Scheme
 	logr.Logger
-	DBClient   database.Account
-	AccountV2  database.AccountV2
-	Properties *resources.PropertyTypeLS
+	DBClient        database.Account
+	AccountV2       database.AccountV2
+	Properties      *resources.PropertyTypeLS
+	concurrentLimit int64
 }
 
-//+kubebuilder:rbac:groups=core,resources=namespaces,verbs=get;list;watch;create;update;patch;delete
-//+kubebuilder:rbac:groups=core,resources=resourcequotas,verbs=get;list;watch;create;update;patch;delete
-//+kubebuilder:rbac:groups=rbac.authorization.k8s.io,resources=rolebindings,verbs=get;list;watch;create;update;patch;delete
-//+kubebuilder:rbac:groups=rbac.authorization.k8s.io,resources=roles,verbs=get;list;watch;create;update;patch;delete
-
-// Reconcile is part of the main kubernetes reconciliation loop which aims to
-// move the current state of the cluster closer to the desired state.
-// TODO(user): Modify the Reconcile function to compare the state specified by
-// the Billing object against the actual cluster state, and then
-// perform operations to make the cluster state reflect the state specified by
-// the user.
-//
-// For more details, check Reconcile and its Result here:
-// - https://pkg.go.dev/sigs.k8s.io/controller-runtime@v0.11.2/pkg/reconcile
-func (r *BillingReconciler) Reconcile(ctx context.Context, req ctrl.Request) (ctrl.Result, error) {
-	r.Logger.V(1).Info("Reconcile Billing: ", "req.NamespacedName", req.NamespacedName)
-	ns := &corev1.Namespace{}
-	if err := r.Get(ctx, req.NamespacedName, ns); err != nil {
-		return ctrl.Result{}, client.IgnoreNotFound(err)
-	}
-
-	if ns.DeletionTimestamp != nil {
-		r.Logger.V(1).Info("namespace is deleting", "namespace", ns)
-		return ctrl.Result{}, nil
-	}
-
-	owner := ns.Labels[v1.UserLabelOwnerKey]
-	nsList, err := getOwnNsList(r.Client, owner)
+func (r *BillingReconciler) ExecuteBillingTask() error {
+	r.Logger.Info("start billing reconcile", "time", time.Now().Format(time.RFC3339))
+	ownerListMap, err := r.getRecentUsedOwners()
 	if err != nil {
-		r.Logger.Error(err, "get own namespace list failed")
-		return ctrl.Result{Requeue: true}, err
+		return fmt.Errorf("failed to get the owner list of the recently used resource: %w", err)
+	}
+	err = r.reconcileOwnerListBatch(ownerListMap, env.GetIntEnvWithDefault("BILLING_RECONCILE_BATCH_COUNT", 200), time.Now(), r.reconcileOwnerList)
+	if err != nil {
+		return fmt.Errorf("failed to reconcile owner list batch: %w", err)
+	}
+	r.Logger.Info("finish billing reconcile", "time", time.Now().Format(time.RFC3339))
+	return nil
+}
+
+func (r *BillingReconciler) reconcileOwnerList(ownerListMap map[string][]string, now time.Time) error {
+	endHourTime := time.Date(now.Year(), now.Month(), now.Day(), now.Hour(), 0, 0, 0, time.Local).UTC()
+	startHourTime := endHourTime.Add(-1 * time.Hour)
+	var ownerList, failedList []string
+	for owner := range ownerListMap {
+		ownerList = append(ownerList, owner)
+	}
+	updateOwnerList, err := r.DBClient.GetOwnersRecentUpdates(ownerList, endHourTime)
+	if err != nil {
+		return fmt.Errorf("get owners without recent updates failed: %w", err)
 	}
-	r.Logger.V(1).Info("own namespace list", "own", owner, "nsList", nsList)
-	now := time.Now()
-	currentHourTime := time.Date(now.Year(), now.Month(), now.Day(), now.Hour(), 0, 0, 0, time.Local).UTC()
-	queryTime := currentHourTime.Add(-1 * time.Hour)
 
-	// TODO r.处理Unsettle状态的账单
+	// remove the owner that does not need to be updated
+	for _, owner := range updateOwnerList {
+		delete(ownerListMap, owner)
+	}
+	r.Logger.Info("get owners recent updates", "already update owner count", len(updateOwnerList), "remaining owner count", len(ownerListMap))
 
-	if exist, lastUpdateTime, _ := r.DBClient.GetBillingLastUpdateTime(owner, v12.Consumption); exist {
-		if lastUpdateTime.Equal(currentHourTime) || lastUpdateTime.After(currentHourTime) {
-			return ctrl.Result{Requeue: true, RequeueAfter: time.Until(currentHourTime.Add(1*time.Hour + 10*time.Minute))}, nil
+	ownerBillings, err := r.DBClient.GenerateBillingData(startHourTime, endHourTime, r.Properties, ownerListMap)
+	if err != nil {
+		return fmt.Errorf("generate billing data failed: %w", err)
+	}
+	r.Logger.Info("generate billing data", "count", len(ownerBillings))
+	for owner, billings := range ownerBillings {
+		amount := int64(0)
+		orderIDs := make([]string, 0, len(billings))
+		for _, billing := range billings {
+			amount += billing.Amount
+			orderIDs = append(orderIDs, billing.OrderID)
 		}
-		// 24小时内的数据，从上次更新时间开始计算，否则从当前时间起算
-		if lastUpdateTime.After(currentHourTime.Add(-24 * time.Hour)) {
-			queryTime = lastUpdateTime
+		if err = r.DBClient.SaveBillings(billings...); err != nil {
+			r.Logger.Error(err, "save billings failed", "owner", owner, "amount", amount)
+			failedList = append(failedList, owner)
+			continue
 		}
+		if err := r.rechargeBalance(owner, amount); err != nil {
+			r.Logger.Error(err, "recharge balance failed", "owner", owner, "amount", amount)
+			failedList = append(failedList, owner)
+			if err := r.DBClient.UpdateBillingStatus(orderIDs, resources.Unsettled); err != nil {
+				r.Logger.Error(err, "update billing unsettled status failed", "orderIDs", orderIDs)
+			}
+		}
+	}
+	if len(failedList) > 0 {
+		r.Logger.Error(fmt.Errorf("failed to reconcile owner list: %v", failedList), "failed to reconcile owner list")
 	}
+	return nil
+}
 
-	orderList := []string{}
-	consumAmount := int64(0)
-	// 计算上次billing到当前的时间之间的整点，左开右闭
-	for t := queryTime.Truncate(time.Hour).Add(time.Hour); t.Before(currentHourTime) || t.Equal(currentHourTime); t = t.Add(time.Hour) {
-		ids, amount, err := r.DBClient.GenerateBillingData(t.Add(-1*time.Hour), t, r.Properties, nsList, getUsername(owner))
-		if err != nil {
-			return ctrl.Result{}, fmt.Errorf("generate billing data failed: %w", err)
+// reconcileOwnerListBatch process ownerlistmap in batch mode
+func (r *BillingReconciler) reconcileOwnerListBatch(
+	ownerListMap map[string][]string, // The owner -> namespaces mapping needs to be handled
+	batchSize int, // number of owners processed per batch
+	now time.Time, // current time
+	reconcileFunc func(map[string][]string, time.Time) error, // processing function
+) error {
+	if batchSize <= 0 {
+		return fmt.Errorf("batch size must be greater than zero")
+	}
+
+	owners := make([]string, 0, len(ownerListMap)) // store all owners
+	for owner := range ownerListMap {
+		owners = append(owners, owner)
+	}
+
+	total := len(owners)
+	for i := 0; i < total; i += batchSize {
+		end := i + batchSize
+		if end > total {
+			end = total
 		}
-		orderList = append(orderList, ids...)
-		consumAmount += amount
-	}
-	if consumAmount > 0 {
-		if err := r.rechargeBalance(owner, consumAmount); err != nil {
-			for i := range orderList {
-				if err := r.DBClient.UpdateBillingStatus(orderList[i], resources.Unsettled); err != nil {
-					r.Logger.Error(err, "update billing status failed", "id", orderList[i])
-				}
-			}
-			return ctrl.Result{}, fmt.Errorf("recharge balance failed: %w", err)
+
+		batchOwners := owners[i:end] // the owner list of the current batch
+		batchOwnerMap := make(map[string][]string, len(batchOwners))
+		for _, owner := range batchOwners {
+			batchOwnerMap[owner] = ownerListMap[owner] // example retrieve a namespace
+		}
+		// call processing logic
+		if err := reconcileFunc(batchOwnerMap, now); err != nil {
+			return fmt.Errorf("failed to reconcile batch from %d to %d: %w", i, end, err)
 		}
-		r.Logger.V(1).Info("success recharge balance", "owner", owner, "amount", consumAmount)
+		r.Logger.Info("reconcile batch", "from", i, "to", end)
 	}
-	return ctrl.Result{Requeue: true, RequeueAfter: time.Until(currentHourTime.Add(1*time.Hour + 10*time.Minute))}, nil
+	return nil
 }
 
 func (r *BillingReconciler) rechargeBalance(owner string, amount int64) (err error) {
@@ -144,48 +207,90 @@ func (r *BillingReconciler) rechargeBalance(owner string, amount int64) (err err
 	return nil
 }
 
-func getOwnNsList(clt client.Client, user string) ([]string, error) {
-	nsList := &corev1.NamespaceList{}
-	if err := clt.List(context.Background(), nsList, client.MatchingLabels{v1.UserLabelOwnerKey: user}); err != nil {
-		return nil, fmt.Errorf("list namespace failed: %w", err)
+func (r *BillingReconciler) getRecentUsedOwners() (map[string][]string, error) {
+	now := time.Now()
+	endHourTime := time.Date(now.Year(), now.Month(), now.Day(), now.Hour(), 0, 0, 0, time.Local).UTC()
+	startHourTime := endHourTime.Add(-1 * time.Hour)
+	namespaceList, err := r.DBClient.GetTimeUsedNamespaceList(startHourTime, endHourTime)
+	if err != nil {
+		return nil, fmt.Errorf("get recent owners failed: %w", err)
+	}
+	nsToOwnerMap, err := GetAllUser()
+	if err != nil {
+		return nil, fmt.Errorf("get all user failed: %w", err)
 	}
-	nsListStr := make([]string, len(nsList.Items))
-	for i := range nsList.Items {
-		nsListStr[i] = nsList.Items[i].Name
+	r.Logger.Info("get owner and namespace", "owner count", len(nsToOwnerMap), "namespace count", len(namespaceList))
+	usedOwnerList := make(map[string][]string)
+	for _, ns := range namespaceList {
+		if owner, ok := nsToOwnerMap[ns]; ok {
+			if _, ok := usedOwnerList[owner]; !ok {
+				usedOwnerList[owner] = []string{}
+			}
+			usedOwnerList[owner] = append(usedOwnerList[owner], ns)
+		}
 	}
-	return nsListStr, nil
+	r.Logger.Info("get all user", "count", len(usedOwnerList))
+	return usedOwnerList, nil
 }
 
-func (r *BillingReconciler) initDB() error {
-	return r.DBClient.CreateBillingIfNotExist()
+func getUsername(namespace string) string {
+	return strings.TrimPrefix(namespace, UserNamespacePrefix)
 }
 
-// SetupWithManager sets up the controller with the Manager.
-func (r *BillingReconciler) SetupWithManager(mgr ctrl.Manager, rateOpts controller.Options) error {
+func (r *BillingReconciler) Init() error {
 	r.Logger = ctrl.Log.WithName("controller").WithName("Billing")
-	if err := r.initDB(); err != nil {
-		r.Logger.Error(err, "init db failed")
-	}
-	return ctrl.NewControllerManagedBy(mgr).
-		For(&corev1.Namespace{}, builder.WithPredicates(predicate.Funcs{
-			CreateFunc: func(createEvent event.CreateEvent) bool {
-				own, ok := createEvent.Object.GetLabels()[v1.UserLabelOwnerKey]
-				return ok && getUsername(createEvent.Object.GetName()) == own
-			},
-			UpdateFunc: func(_ event.UpdateEvent) bool {
-				return false
-			},
-			DeleteFunc: func(_ event.DeleteEvent) bool {
-				return false
-			},
-			GenericFunc: func(_ event.GenericEvent) bool {
-				return false
-			},
-		})).
-		WithOptions(rateOpts).
-		Complete(r)
+	if err := r.DBClient.CreateBillingIfNotExist(); err != nil {
+		return fmt.Errorf("create billing collection failed: %w", err)
+	}
+	r.concurrentLimit = env.GetInt64EnvWithDefault("BILLING_CONCURRENT_LIMIT", 100)
+	return nil
 }
 
-func getUsername(namespace string) string {
-	return strings.TrimPrefix(namespace, UserNamespacePrefix)
+// map[namespace]owner
+func GetAllUser() (map[string]string, error) {
+	err := userv1.AddToScheme(scheme.Scheme)
+	if err != nil {
+		return nil, fmt.Errorf("unable to add scheme: %v", err)
+	}
+	config, err := rest.InClusterConfig()
+	if err != nil {
+		return nil, fmt.Errorf("unable to build config: %v", err)
+	}
+	//TODO from cluster config
+	//config, err := clientcmd.BuildConfigFromFlags("", os.Getenv("KUBECONFIG"))
+	//if err != nil {
+	//	return nil, fmt.Errorf("unable to build config: %v", err)
+	//}
+	k8sClt, err := client.New(config, client.Options{Scheme: scheme.Scheme})
+	if err != nil {
+		return nil, fmt.Errorf("unable to create client: %v", err)
+	}
+	nsToOwnerMap := make(map[string]string)
+
+	listOpts := &client.ListOptions{
+		Limit: 5000,
+	}
+	for {
+		userMetaList := &metav1.PartialObjectMetadataList{}
+		userMetaList.SetGroupVersionKind(userv1.GroupVersion.WithKind("UserList"))
+
+		if err := k8sClt.List(context.Background(), userMetaList, listOpts); err != nil {
+			return nil, fmt.Errorf("failed to list instances: %v", err)
+		}
+
+		for _, user := range userMetaList.Items {
+			owner := user.Annotations[userv1.UserLabelOwnerKey]
+			if owner == "" {
+				continue
+			}
+			nsToOwnerMap["ns-"+user.Name] = owner
+		}
+
+		token := userMetaList.GetContinue()
+		if token == "" {
+			break
+		}
+		listOpts.Continue = token
+	}
+	return nsToOwnerMap, nil
 }
diff --git a/controllers/account/controllers/debt_controller.go b/controllers/account/controllers/debt_controller.go
index 8a3de2cb7fc1..b620b998e622 100644
--- a/controllers/account/controllers/debt_controller.go
+++ b/controllers/account/controllers/debt_controller.go
@@ -246,6 +246,18 @@ func (r *DebtReconciler) reconcile(ctx context.Context, userCr, userID string) e
 	return nil
 }
 
+func getOwnNsList(clt client.Client, user string) ([]string, error) {
+	nsList := &corev1.NamespaceList{}
+	if err := clt.List(context.Background(), nsList, client.MatchingLabels{userv1.UserLabelOwnerKey: user}); err != nil {
+		return nil, fmt.Errorf("list namespace failed: %w", err)
+	}
+	nsListStr := make([]string, len(nsList.Items))
+	for i := range nsList.Items {
+		nsListStr[i] = nsList.Items[i].Name
+	}
+	return nsListStr, nil
+}
+
 var ErrAccountNotExist = errors.New("account not exist")
 
 /*
diff --git a/controllers/account/controllers/namespace_controller.go b/controllers/account/controllers/namespace_controller.go
index 960e310a0357..f825e4e8b191 100644
--- a/controllers/account/controllers/namespace_controller.go
+++ b/controllers/account/controllers/namespace_controller.go
@@ -23,6 +23,8 @@ import (
 	"strings"
 	"time"
 
+	"k8s.io/utils/ptr"
+
 	"sigs.k8s.io/controller-runtime/pkg/controller/controllerutil"
 
 	"github.com/minio/madmin-go/v3"
@@ -42,6 +44,7 @@ import (
 	kbv1alpha1 "github.com/apecloud/kubeblocks/apis/apps/v1alpha1"
 
 	"github.com/go-logr/logr"
+	batchv1 "k8s.io/api/batch/v1"
 	corev1 "k8s.io/api/core/v1"
 	"k8s.io/apimachinery/pkg/runtime"
 	ctrl "sigs.k8s.io/controller-runtime"
@@ -73,6 +76,7 @@ const (
 //+kubebuilder:rbac:groups=core,resources=namespaces,verbs=get;list;watch;create;update;patch;delete
 //+kubebuilder:rbac:groups=core,resources=namespaces/status,verbs=get;update;patch
 //+kubebuilder:rbac:groups=core,resources=namespaces/finalizers,verbs=update
+//+kubebuilder:rbac:groups=batch,resources=cronjobs,verbs=get;list;watch;create;update;patch;delete
 //+kubebuilder:rbac:groups="",resources=secrets,verbs=get;list;watch;create;update;patch;delete
 //+kubebuilder:rbac:groups=apps.kubeblocks.io,resources=clusters,verbs=get;list;watch;create;update;patch;delete
 //+kubebuilder:rbac:groups=apps.kubeblocks.io,resources=clusters/status,verbs=get;update;patch
@@ -132,16 +136,16 @@ func (r *NamespaceReconciler) Reconcile(ctx context.Context, req ctrl.Request) (
 }
 
 func (r *NamespaceReconciler) SuspendUserResource(ctx context.Context, namespace string) error {
+	// suspend kb cluster
 	// limit0 resource quota
 	// suspend pod: deploy pod && clone unmanaged pod
-	// delete infra cr
+	// suspend cronjob
 	pipelines := []func(context.Context, string) error{
 		r.suspendKBCluster,
 		r.suspendOrphanPod,
 		r.limitResourceQuotaCreate,
 		r.deleteControlledPod,
-		//TODO how to suspend infra cr or delete infra cr
-		//r.suspendInfraResources,
+		r.suspendCronJob,
 		r.suspendObjectStorage,
 	}
 	for _, fn := range pipelines {
@@ -485,3 +489,20 @@ func (AnnotationChangedPredicate) Create(e event.CreateEvent) bool {
 	_, ok := e.Object.GetAnnotations()[v1.DebtNamespaceAnnoStatusKey]
 	return ok
 }
+
+func (r *NamespaceReconciler) suspendCronJob(ctx context.Context, namespace string) error {
+	cronJobList := batchv1.CronJobList{}
+	if err := r.Client.List(ctx, &cronJobList, client.InNamespace(namespace)); err != nil {
+		return err
+	}
+	for _, cronJob := range cronJobList.Items {
+		if cronJob.Spec.Suspend != nil && *cronJob.Spec.Suspend {
+			continue
+		}
+		cronJob.Spec.Suspend = ptr.To(true)
+		if err := r.Client.Update(ctx, &cronJob); err != nil {
+			return fmt.Errorf("failed to suspend cronjob %s: %w", cronJob.Name, err)
+		}
+	}
+	return nil
+}
diff --git a/controllers/account/controllers/payment_controller.go b/controllers/account/controllers/payment_controller.go
index 1a016bc44a7d..1ae5f1c8dc81 100644
--- a/controllers/account/controllers/payment_controller.go
+++ b/controllers/account/controllers/payment_controller.go
@@ -23,6 +23,8 @@ import (
 	"sync"
 	"time"
 
+	"github.com/labring/sealos/controllers/pkg/utils/env"
+
 	"github.com/google/uuid"
 
 	"sigs.k8s.io/controller-runtime/pkg/manager"
@@ -319,7 +321,7 @@ func (r *PaymentReconciler) reconcileNewPayment(payment *accountv1.Payment) erro
 	if err != nil {
 		return fmt.Errorf("get payment Interface failed: %w", err)
 	}
-	tradeNO, codeURL, err := payHandler.CreatePayment(payment.Spec.Amount/10000, payment.Spec.UserID, "sealos cloud pay [domain="+r.domain+"]")
+	tradeNO, codeURL, err := payHandler.CreatePayment(payment.Spec.Amount/10000, payment.Spec.UserID, fmt.Sprintf(env.GetEnvWithDefault("PAY_DESCRIBE_FORMAT", `sealos cloud pay [domain="%s"]`), r.domain))
 	if err != nil {
 		return fmt.Errorf("get tradeNO and codeURL failed: %w", err)
 	}
diff --git a/controllers/account/deploy/manifests/deploy.yaml b/controllers/account/deploy/manifests/deploy.yaml
index 6ae9808efe5c..ea4b379d9072 100644
--- a/controllers/account/deploy/manifests/deploy.yaml
+++ b/controllers/account/deploy/manifests/deploy.yaml
@@ -421,6 +421,18 @@ rules:
   - get
   - patch
   - update
+- apiGroups:
+  - batch
+  resources:
+  - cronjobs
+  verbs:
+  - create
+  - delete
+  - get
+  - list
+  - patch
+  - update
+  - watch
 - apiGroups:
   - ""
   resources:
diff --git a/controllers/account/main.go b/controllers/account/main.go
index 9f875848ac97..5ee6415ce9dc 100644
--- a/controllers/account/main.go
+++ b/controllers/account/main.go
@@ -29,7 +29,6 @@ import (
 	notificationv1 "github.com/labring/sealos/controllers/pkg/notification/api/v1"
 	"github.com/labring/sealos/controllers/pkg/resources"
 	"github.com/labring/sealos/controllers/pkg/types"
-	"github.com/labring/sealos/controllers/pkg/utils/env"
 	rate "github.com/labring/sealos/controllers/pkg/utils/rate"
 	userv1 "github.com/labring/sealos/controllers/user/api/v1"
 
@@ -218,14 +217,23 @@ func main() {
 		setupLog.Error(err, "unable to get property type")
 		os.Exit(1)
 	}
-	if err = (&controllers.BillingReconciler{
+	billingReconciler := controllers.BillingReconciler{
 		DBClient:   dbClient,
 		Properties: resources.DefaultPropertyTypeLS,
 		Client:     mgr.GetClient(),
 		Scheme:     mgr.GetScheme(),
 		AccountV2:  v2Account,
-	}).SetupWithManager(mgr, rateOpts); err != nil {
-		setupManagerError(err, "Billing")
+	}
+	if err = billingReconciler.Init(); err != nil {
+		setupLog.Error(err, "unable to init billing reconciler")
+		os.Exit(1)
+	}
+	billingTaskRunner := &controllers.BillingTaskRunner{
+		BillingReconciler: &billingReconciler,
+	}
+	if err := mgr.Add(billingTaskRunner); err != nil {
+		setupLog.Error(err, "unable to add billing task runner")
+		os.Exit(1)
 	}
 
 	if err = (&controllers.PodReconciler{
@@ -261,23 +269,32 @@ func main() {
 		os.Exit(1)
 	}
 
-	go func() {
-		if cvmDBClient == nil {
-			setupLog.Info("CVM DB client is nil, skip billing cvm")
-			return
+	if cvmDBClient != nil {
+		cvmTaskRunner := &controllers.CVMTaskRunner{
+			DBClient:          cvmDBClient,
+			Logger:            ctrl.Log.WithName("CVMTaskRunner"),
+			AccountReconciler: accountReconciler,
 		}
-		ticker := time.NewTicker(env.GetDurationEnvWithDefault("BILLING_CVM_INTERVAL", 10*time.Minute))
-		defer ticker.Stop()
-		for {
-			setupLog.Info("start billing cvm", "time", time.Now().Format(time.RFC3339))
-			err := accountReconciler.BillingCVM()
-			if err != nil {
-				setupLog.Error(err, "fail to billing cvm")
-			}
-			setupLog.Info("end billing cvm", "time", time.Now().Format(time.RFC3339))
-			<-ticker.C
+		if err := mgr.Add(cvmTaskRunner); err != nil {
+			setupLog.Error(err, "unable to add cvm task runner")
+			os.Exit(1)
 		}
-	}()
+	}
+	//go func() {
+	//	now := time.Now()
+	//	nextHour := now.Truncate(time.Hour).Add(time.Hour)
+	//	time.Sleep(nextHour.Sub(now))
+	//
+	//	ticker := time.NewTicker(time.Hour)
+	//	defer ticker.Stop()
+	//	for {
+	//		setupLog.Info("start billing reconcile", "time", time.Now().Format(time.RFC3339))
+	//		if err := billingReconciler.ExecuteBillingTask(); err != nil {
+	//			setupLog.Error(err, "failed to execute billing task")
+	//		}
+	//		<-ticker.C
+	//	}
+	//}()
 
 	setupLog.Info("starting manager")
 	if err := mgr.Start(ctrl.SetupSignalHandler()); err != nil {
diff --git a/controllers/devbox/api/v1alpha1/devbox_types.go b/controllers/devbox/api/v1alpha1/devbox_types.go
index 5c82533e142e..165cbea66601 100644
--- a/controllers/devbox/api/v1alpha1/devbox_types.go
+++ b/controllers/devbox/api/v1alpha1/devbox_types.go
@@ -18,17 +18,10 @@ package v1alpha1
 
 import (
 	corev1 "k8s.io/api/core/v1"
-	"k8s.io/apimachinery/pkg/api/resource"
 	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
 )
 
-type ResourceName string
-
 const (
-	// ResourceCPU CPU, in cores. (500m = .5 cores)
-	ResourceCPU ResourceName = "cpu"
-	// ResourceMemory Memory, in bytes. (500Gi = 500GiB = 500 * 1024 * 1024 * 1024)
-	ResourceMemory ResourceName = "memory"
 	// FinalizerName is the finalizer for Devbox
 	FinalizerName = "devbox.sealos.io/finalizer"
 	DevBoxPartOf  = "devbox"
@@ -52,8 +45,6 @@ const (
 	NetworkTypeTailnet  NetworkType = "Tailnet"
 )
 
-type ResourceList map[ResourceName]resource.Quantity
-
 type RuntimeRef struct {
 	// +kubebuilder:validation:Required
 	Name string `json:"name"`
@@ -69,46 +60,75 @@ type NetworkSpec struct {
 	ExtraPorts []corev1.ContainerPort `json:"extraPorts"`
 }
 
+type Config struct {
+	// +kubebuilder:validation:Optional
+	// +kubebuilder:default=devbox
+	User string `json:"user"`
+
+	// +kubebuilder:validation:Optional
+	Labels map[string]string `json:"labels,omitempty"`
+	// +kubebuilder:validation:Optional
+	Annotations map[string]string `json:"annotations,omitempty"`
+
+	// +kubebuilder:validation:Optional
+	Command []string `json:"command,omitempty"`
+	// kubebuilder:validation:Optional
+	Args []string `json:"args,omitempty"`
+	// +kubebuilder:validation:Optional
+	// +kubebuilder:default=/home/devbox/project
+	WorkingDir string `json:"workingDir,omitempty"`
+	// +kubebuilder:validation:Optional
+	Env []corev1.EnvVar `json:"env,omitempty"`
+
+	// +kubebuilder:validation:Optional
+	// +kubebuilder:default={/bin/bash,-c}
+	ReleaseCommand []string `json:"releaseCommand,omitempty"`
+	// +kubebuilder:validation:Optional
+	// +kubebuilder:default={/home/devbox/project/entrypoint.sh}
+	ReleaseArgs []string `json:"releaseArgs,omitempty"`
+
+	// TODO: in v1alpha2 api we need fix the port and app port into one field and create a new type for it.
+	// +kubebuilder:validation:Optional
+	// +kubebuilder:default={{name:"devbox-ssh-port",containerPort:22,protocol:TCP}}
+	Ports []corev1.ContainerPort `json:"ports,omitempty"`
+	// +kubebuilder:validation:Optional
+	// +kubebuilder:default={{name:"devbox-app-port",port:8080,protocol:TCP}}
+	AppPorts []corev1.ServicePort `json:"appPorts,omitempty"`
+
+	// +kubebuilder:validation:Optional
+	VolumeMounts []corev1.VolumeMount `json:"volumeMounts,omitempty"`
+	// +kubebuilder:validation:Optional
+	Volumes []corev1.Volume `json:"volumes,omitempty"`
+}
+
 // DevboxSpec defines the desired state of Devbox
 type DevboxSpec struct {
 	// +kubebuilder:validation:Required
 	// +kubebuilder:validation:Enum=Running;Stopped
 	State DevboxState `json:"state"`
 	// +kubebuilder:validation:Required
-	Resource ResourceList `json:"resource"`
+	Resource corev1.ResourceList `json:"resource"`
 
 	// +kubebuilder:validation:Optional
 	// +kubebuilder:default=false
 	Squash bool `json:"squash"`
 
 	// +kubebuilder:validation:Required
-	RuntimeRef RuntimeRef `json:"runtimeRef"`
-
-	// +kubebuilder:validation:Required
-	NetworkSpec NetworkSpec `json:"network,omitempty"`
+	Image string `json:"image"`
 
-	// todo add rewrite labels and annotations...
-	// +kubebuilder:validation:Optional
-	ExtraLabels map[string]string `json:"extraLabels,omitempty"`
 	// +kubebuilder:validation:Optional
-	ExtraAnnotations map[string]string `json:"extraAnnotations,omitempty"`
+	TemplateID string `json:"templateID"`
 
-	// +kubebuilder:validation:Optional
-	Command []string `json:"command,omitempty"`
-	// +kubebuilder:validation:Optional
-	Args []string `json:"args,omitempty"`
-	// +kubebuilder:validation:Optional
-	WorkingDir string `json:"workingDir,omitempty"`
-	// todo add rewrite env...
-	// +kubebuilder:validation:Optional
-	ExtraEnvs []corev1.EnvVar `json:"extraEnvs"`
+	// +kubebuilder:validation:Required
+	Config Config `json:"config"`
+
+	// +kubebuilder:validation:Required
+	NetworkSpec NetworkSpec `json:"network,omitempty"`
 
-	// todo add rewrite volumes and volume mounts..
 	// +kubebuilder:validation:Optional
-	ExtraVolumes []corev1.Volume `json:"extraVolumes,omitempty"`
+	RuntimeClassName string `json:"runtimeClassName,omitempty"`
 	// +kubebuilder:validation:Optional
-	ExtraVolumeMounts []corev1.VolumeMount `json:"extraVolumeMounts,omitempty"`
-
+	NodeSelector map[string]string `json:"nodeSelector,omitempty"`
 	// +kubebuilder:validation:Optional
 	Tolerations []corev1.Toleration `json:"tolerations,omitempty"`
 	// +kubebuilder:validation:Optional
@@ -189,8 +209,6 @@ type DevboxStatus struct {
 // +kubebuilder:object:root=true
 // +kubebuilder:subresource:status
 // +kubebuilder:printcolumn:name="State",type="string",JSONPath=".spec.state"
-// +kubebuilder:printcolumn:name="RuntimeRef",type="string",JSONPath=".spec.runtimeRef.name"
-// +kubebuilder:printcolumn:name="PodPhase",type="string",JSONPath=".status.podPhase"
 // +kubebuilder:printcolumn:name="NetworkType",type="string",JSONPath=".status.network.type"
 // +kubebuilder:printcolumn:name="NodePort",type="integer",JSONPath=".status.network.nodePort"
 // +kubebuilder:printcolumn:name="Phase",type="string",JSONPath=".status.phase"
diff --git a/controllers/devbox/api/v1alpha1/runtime_types.go b/controllers/devbox/api/v1alpha1/runtime_types.go
deleted file mode 100644
index 52791dbf79b2..000000000000
--- a/controllers/devbox/api/v1alpha1/runtime_types.go
+++ /dev/null
@@ -1,140 +0,0 @@
-/*
-Copyright 2024.
-
-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.
-*/
-
-package v1alpha1
-
-import (
-	corev1 "k8s.io/api/core/v1"
-	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
-)
-
-type Config struct {
-	// +kubebuilder:validation:Optional
-	// +kubebuilder:default=sealos
-	User string `json:"user"`
-
-	// +kubebuilder:validation:Required
-	Image string `json:"image"`
-
-	// +kubebuilder:validation:Optional
-	Labels map[string]string `json:"labels,omitempty"`
-	// +kubebuilder:validation:Optional
-	Annotations map[string]string `json:"annotations,omitempty"`
-
-	// +kubebuilder:validation:Optional
-	Command []string `json:"command,omitempty"`
-	// kubebuilder:validation:Optional
-	Args []string `json:"args,omitempty"`
-	// +kubebuilder:validation:Optional
-	// +kubebuilder:default=/home/sealos/project
-	WorkingDir string `json:"workingDir,omitempty"`
-	// +kubebuilder:validation:Optional
-	Env []corev1.EnvVar `json:"env,omitempty"`
-
-	// +kubebuilder:validation:Optional
-	// +kubebuilder:default={/bin/bash,-c}
-	ReleaseCommand []string `json:"releaseCommand,omitempty"`
-	// +kubebuilder:validation:Optional
-	// +kubebuilder:default={/home/sealos/project/entrypoint.sh}
-	ReleaseArgs []string `json:"releaseArgs,omitempty"`
-
-	// TODO: in v1alpha2 api we need fix the port and app port into one field and create a new type for it.
-	// +kubebuilder:validation:Optional
-	// +kubebuilder:default={{name:"devbox-ssh-port",containerPort:22,protocol:TCP}}
-	Ports []corev1.ContainerPort `json:"ports,omitempty"`
-	// +kubebuilder:validation:Optional
-	// +kubebuilder:default={{name:"devbox-app-port",port:8080,protocol:TCP}}
-	AppPorts []corev1.ServicePort `json:"appPorts,omitempty"`
-
-	// +kubebuilder:validation:Optional
-	VolumeMounts []corev1.VolumeMount `json:"volumeMounts,omitempty"`
-	// +kubebuilder:validation:Optional
-	Volumes []corev1.Volume `json:"volumes,omitempty"`
-}
-
-type Component struct {
-	// +kubebuilder:validation:Required
-	Name string `json:"name"`
-	// +kubebuilder:validation:Required
-	Version string `json:"version"`
-}
-
-type RuntimeState string
-
-const (
-	RuntimeStateActive     RuntimeState = "active"
-	RuntimeStateDeprecated RuntimeState = "deprecated"
-)
-
-// RuntimeSpec defines the desired state of Runtime
-type RuntimeSpec struct {
-	// +kubebuilder:validation:Required
-	ClassRef string `json:"classRef"`
-	// +kubebuilder:validation:Required
-	Version string `json:"version"`
-
-	// +kubebuilder:validation:Optional
-	Components []Component `json:"components,omitempty"`
-	// +kubebuilder:validation:Optional
-	Category []string `json:"category,omitempty"`
-	// +kube:validation:Optional
-	Description string `json:"description,omitempty"`
-
-	// +kubebuilder:validation:Required
-	Config Config `json:"config"`
-
-	// +kubebuilder:validation:Optional
-	RuntimeVersion string `json:"runtimeVersion,omitempty"`
-	// +kubebuilder:validation:Optional
-	// +kubebuilder:validation:Enum=active;deprecated
-	// +kubebuilder:default=active
-	State RuntimeState `json:"state,omitempty"`
-}
-
-// RuntimeStatus defines the observed state of Runtime
-type RuntimeStatus struct {
-	// INSERT ADDITIONAL STATUS FIELD - define observed state of cluster
-	// Important: Run "make" to regenerate code after modifying this file
-}
-
-// +kubebuilder:object:root=true
-// +kubebuilder:subresource:status
-// +kubebuilder:printcolumn:name="Class",type=string,JSONPath=`.spec.classRef`
-// +kubebuilder:printcolumn:name="Version",type=string,JSONPath=`.spec.version`
-// +kubebuilder:printcolumn:name="RuntimeVersion",type=string,JSONPath=`.spec.runtimeVersion`
-// +kubebuilder:printcolumn:name="State",type=string,JSONPath=`.spec.state`
-
-// Runtime is the Schema for the runtimes API
-type Runtime struct {
-	metav1.TypeMeta   `json:",inline"`
-	metav1.ObjectMeta `json:"metadata,omitempty"`
-
-	Spec   RuntimeSpec   `json:"spec,omitempty"`
-	Status RuntimeStatus `json:"status,omitempty"`
-}
-
-// +kubebuilder:object:root=true
-
-// RuntimeList contains a list of Runtime
-type RuntimeList struct {
-	metav1.TypeMeta `json:",inline"`
-	metav1.ListMeta `json:"metadata,omitempty"`
-	Items           []Runtime `json:"items"`
-}
-
-func init() {
-	SchemeBuilder.Register(&Runtime{}, &RuntimeList{})
-}
diff --git a/controllers/devbox/api/v1alpha1/runtimeclass_types.go b/controllers/devbox/api/v1alpha1/runtimeclass_types.go
deleted file mode 100644
index 8d8599e5ebda..000000000000
--- a/controllers/devbox/api/v1alpha1/runtimeclass_types.go
+++ /dev/null
@@ -1,71 +0,0 @@
-/*
-Copyright 2024.
-
-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.
-*/
-
-package v1alpha1
-
-import (
-	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
-)
-
-type RuntimeClassKind string
-
-const (
-	RuntimeClassOSKind        RuntimeClassKind = "OS"
-	RuntimeClassLanguageKind  RuntimeClassKind = "Language"
-	RuntimeClassFrameworkKind RuntimeClassKind = "Framework"
-)
-
-// RuntimeClassSpec defines the desired state of RuntimeClass
-type RuntimeClassSpec struct {
-	// +kubebuilder:validation:Required
-	// +kubebuilder:validation:Enum=OS;Language;Framework
-	Kind RuntimeClassKind `json:"kind"`
-	// +kubebuilder:validation:Required
-	Title string `json:"title"`
-	// +kubebuilder:validation:Optional
-	Description string `json:"description"`
-}
-
-// RuntimeClassStatus defines the observed state of RuntimeClass
-type RuntimeClassStatus struct {
-	// INSERT ADDITIONAL STATUS FIELD - define observed state of cluster
-	// Important: Run "make" to regenerate code after modifying this file
-}
-
-// +kubebuilder:object:root=true
-// +kubebuilder:subresource:status
-
-// RuntimeClass is the Schema for the runtimeclasses API
-type RuntimeClass struct {
-	metav1.TypeMeta   `json:",inline"`
-	metav1.ObjectMeta `json:"metadata,omitempty"`
-
-	Spec   RuntimeClassSpec   `json:"spec,omitempty"`
-	Status RuntimeClassStatus `json:"status,omitempty"`
-}
-
-// +kubebuilder:object:root=true
-
-// RuntimeClassList contains a list of RuntimeClass
-type RuntimeClassList struct {
-	metav1.TypeMeta `json:",inline"`
-	metav1.ListMeta `json:"metadata,omitempty"`
-	Items           []RuntimeClass `json:"items"`
-}
-
-func init() {
-	SchemeBuilder.Register(&RuntimeClass{}, &RuntimeClassList{})
-}
diff --git a/controllers/devbox/api/v1alpha1/zz_generated.deepcopy.go b/controllers/devbox/api/v1alpha1/zz_generated.deepcopy.go
index cbf872db25e7..d1590df7e111 100644
--- a/controllers/devbox/api/v1alpha1/zz_generated.deepcopy.go
+++ b/controllers/devbox/api/v1alpha1/zz_generated.deepcopy.go
@@ -41,21 +41,6 @@ func (in *CommitHistory) DeepCopy() *CommitHistory {
 	return out
 }
 
-// DeepCopyInto is an autogenerated deepcopy function, copying the receiver, writing into out. in must be non-nil.
-func (in *Component) DeepCopyInto(out *Component) {
-	*out = *in
-}
-
-// DeepCopy is an autogenerated deepcopy function, copying the receiver, creating a new Component.
-func (in *Component) DeepCopy() *Component {
-	if in == nil {
-		return nil
-	}
-	out := new(Component)
-	in.DeepCopyInto(out)
-	return out
-}
-
 // DeepCopyInto is an autogenerated deepcopy function, copying the receiver, writing into out. in must be non-nil.
 func (in *Config) DeepCopyInto(out *Config) {
 	*out = *in
@@ -291,58 +276,20 @@ func (in *DevboxSpec) DeepCopyInto(out *DevboxSpec) {
 	*out = *in
 	if in.Resource != nil {
 		in, out := &in.Resource, &out.Resource
-		*out = make(ResourceList, len(*in))
+		*out = make(v1.ResourceList, len(*in))
 		for key, val := range *in {
 			(*out)[key] = val.DeepCopy()
 		}
 	}
-	out.RuntimeRef = in.RuntimeRef
+	in.Config.DeepCopyInto(&out.Config)
 	in.NetworkSpec.DeepCopyInto(&out.NetworkSpec)
-	if in.ExtraLabels != nil {
-		in, out := &in.ExtraLabels, &out.ExtraLabels
-		*out = make(map[string]string, len(*in))
-		for key, val := range *in {
-			(*out)[key] = val
-		}
-	}
-	if in.ExtraAnnotations != nil {
-		in, out := &in.ExtraAnnotations, &out.ExtraAnnotations
+	if in.NodeSelector != nil {
+		in, out := &in.NodeSelector, &out.NodeSelector
 		*out = make(map[string]string, len(*in))
 		for key, val := range *in {
 			(*out)[key] = val
 		}
 	}
-	if in.Command != nil {
-		in, out := &in.Command, &out.Command
-		*out = make([]string, len(*in))
-		copy(*out, *in)
-	}
-	if in.Args != nil {
-		in, out := &in.Args, &out.Args
-		*out = make([]string, len(*in))
-		copy(*out, *in)
-	}
-	if in.ExtraEnvs != nil {
-		in, out := &in.ExtraEnvs, &out.ExtraEnvs
-		*out = make([]v1.EnvVar, len(*in))
-		for i := range *in {
-			(*in)[i].DeepCopyInto(&(*out)[i])
-		}
-	}
-	if in.ExtraVolumes != nil {
-		in, out := &in.ExtraVolumes, &out.ExtraVolumes
-		*out = make([]v1.Volume, len(*in))
-		for i := range *in {
-			(*in)[i].DeepCopyInto(&(*out)[i])
-		}
-	}
-	if in.ExtraVolumeMounts != nil {
-		in, out := &in.ExtraVolumeMounts, &out.ExtraVolumeMounts
-		*out = make([]v1.VolumeMount, len(*in))
-		for i := range *in {
-			(*in)[i].DeepCopyInto(&(*out)[i])
-		}
-	}
 	if in.Tolerations != nil {
 		in, out := &in.Tolerations, &out.Tolerations
 		*out = make([]v1.Toleration, len(*in))
@@ -520,175 +467,6 @@ func (in *OperationRequestStatus) DeepCopy() *OperationRequestStatus {
 	return out
 }
 
-// DeepCopyInto is an autogenerated deepcopy function, copying the receiver, writing into out. in must be non-nil.
-func (in ResourceList) DeepCopyInto(out *ResourceList) {
-	{
-		in := &in
-		*out = make(ResourceList, len(*in))
-		for key, val := range *in {
-			(*out)[key] = val.DeepCopy()
-		}
-	}
-}
-
-// DeepCopy is an autogenerated deepcopy function, copying the receiver, creating a new ResourceList.
-func (in ResourceList) DeepCopy() ResourceList {
-	if in == nil {
-		return nil
-	}
-	out := new(ResourceList)
-	in.DeepCopyInto(out)
-	return *out
-}
-
-// DeepCopyInto is an autogenerated deepcopy function, copying the receiver, writing into out. in must be non-nil.
-func (in *Runtime) DeepCopyInto(out *Runtime) {
-	*out = *in
-	out.TypeMeta = in.TypeMeta
-	in.ObjectMeta.DeepCopyInto(&out.ObjectMeta)
-	in.Spec.DeepCopyInto(&out.Spec)
-	out.Status = in.Status
-}
-
-// DeepCopy is an autogenerated deepcopy function, copying the receiver, creating a new Runtime.
-func (in *Runtime) DeepCopy() *Runtime {
-	if in == nil {
-		return nil
-	}
-	out := new(Runtime)
-	in.DeepCopyInto(out)
-	return out
-}
-
-// DeepCopyObject is an autogenerated deepcopy function, copying the receiver, creating a new runtime.Object.
-func (in *Runtime) DeepCopyObject() runtime.Object {
-	if c := in.DeepCopy(); c != nil {
-		return c
-	}
-	return nil
-}
-
-// DeepCopyInto is an autogenerated deepcopy function, copying the receiver, writing into out. in must be non-nil.
-func (in *RuntimeClass) DeepCopyInto(out *RuntimeClass) {
-	*out = *in
-	out.TypeMeta = in.TypeMeta
-	in.ObjectMeta.DeepCopyInto(&out.ObjectMeta)
-	out.Spec = in.Spec
-	out.Status = in.Status
-}
-
-// DeepCopy is an autogenerated deepcopy function, copying the receiver, creating a new RuntimeClass.
-func (in *RuntimeClass) DeepCopy() *RuntimeClass {
-	if in == nil {
-		return nil
-	}
-	out := new(RuntimeClass)
-	in.DeepCopyInto(out)
-	return out
-}
-
-// DeepCopyObject is an autogenerated deepcopy function, copying the receiver, creating a new runtime.Object.
-func (in *RuntimeClass) DeepCopyObject() runtime.Object {
-	if c := in.DeepCopy(); c != nil {
-		return c
-	}
-	return nil
-}
-
-// DeepCopyInto is an autogenerated deepcopy function, copying the receiver, writing into out. in must be non-nil.
-func (in *RuntimeClassList) DeepCopyInto(out *RuntimeClassList) {
-	*out = *in
-	out.TypeMeta = in.TypeMeta
-	in.ListMeta.DeepCopyInto(&out.ListMeta)
-	if in.Items != nil {
-		in, out := &in.Items, &out.Items
-		*out = make([]RuntimeClass, len(*in))
-		for i := range *in {
-			(*in)[i].DeepCopyInto(&(*out)[i])
-		}
-	}
-}
-
-// DeepCopy is an autogenerated deepcopy function, copying the receiver, creating a new RuntimeClassList.
-func (in *RuntimeClassList) DeepCopy() *RuntimeClassList {
-	if in == nil {
-		return nil
-	}
-	out := new(RuntimeClassList)
-	in.DeepCopyInto(out)
-	return out
-}
-
-// DeepCopyObject is an autogenerated deepcopy function, copying the receiver, creating a new runtime.Object.
-func (in *RuntimeClassList) DeepCopyObject() runtime.Object {
-	if c := in.DeepCopy(); c != nil {
-		return c
-	}
-	return nil
-}
-
-// DeepCopyInto is an autogenerated deepcopy function, copying the receiver, writing into out. in must be non-nil.
-func (in *RuntimeClassSpec) DeepCopyInto(out *RuntimeClassSpec) {
-	*out = *in
-}
-
-// DeepCopy is an autogenerated deepcopy function, copying the receiver, creating a new RuntimeClassSpec.
-func (in *RuntimeClassSpec) DeepCopy() *RuntimeClassSpec {
-	if in == nil {
-		return nil
-	}
-	out := new(RuntimeClassSpec)
-	in.DeepCopyInto(out)
-	return out
-}
-
-// DeepCopyInto is an autogenerated deepcopy function, copying the receiver, writing into out. in must be non-nil.
-func (in *RuntimeClassStatus) DeepCopyInto(out *RuntimeClassStatus) {
-	*out = *in
-}
-
-// DeepCopy is an autogenerated deepcopy function, copying the receiver, creating a new RuntimeClassStatus.
-func (in *RuntimeClassStatus) DeepCopy() *RuntimeClassStatus {
-	if in == nil {
-		return nil
-	}
-	out := new(RuntimeClassStatus)
-	in.DeepCopyInto(out)
-	return out
-}
-
-// DeepCopyInto is an autogenerated deepcopy function, copying the receiver, writing into out. in must be non-nil.
-func (in *RuntimeList) DeepCopyInto(out *RuntimeList) {
-	*out = *in
-	out.TypeMeta = in.TypeMeta
-	in.ListMeta.DeepCopyInto(&out.ListMeta)
-	if in.Items != nil {
-		in, out := &in.Items, &out.Items
-		*out = make([]Runtime, len(*in))
-		for i := range *in {
-			(*in)[i].DeepCopyInto(&(*out)[i])
-		}
-	}
-}
-
-// DeepCopy is an autogenerated deepcopy function, copying the receiver, creating a new RuntimeList.
-func (in *RuntimeList) DeepCopy() *RuntimeList {
-	if in == nil {
-		return nil
-	}
-	out := new(RuntimeList)
-	in.DeepCopyInto(out)
-	return out
-}
-
-// DeepCopyObject is an autogenerated deepcopy function, copying the receiver, creating a new runtime.Object.
-func (in *RuntimeList) DeepCopyObject() runtime.Object {
-	if c := in.DeepCopy(); c != nil {
-		return c
-	}
-	return nil
-}
-
 // DeepCopyInto is an autogenerated deepcopy function, copying the receiver, writing into out. in must be non-nil.
 func (in *RuntimeRef) DeepCopyInto(out *RuntimeRef) {
 	*out = *in
@@ -703,44 +481,3 @@ func (in *RuntimeRef) DeepCopy() *RuntimeRef {
 	in.DeepCopyInto(out)
 	return out
 }
-
-// DeepCopyInto is an autogenerated deepcopy function, copying the receiver, writing into out. in must be non-nil.
-func (in *RuntimeSpec) DeepCopyInto(out *RuntimeSpec) {
-	*out = *in
-	if in.Components != nil {
-		in, out := &in.Components, &out.Components
-		*out = make([]Component, len(*in))
-		copy(*out, *in)
-	}
-	if in.Category != nil {
-		in, out := &in.Category, &out.Category
-		*out = make([]string, len(*in))
-		copy(*out, *in)
-	}
-	in.Config.DeepCopyInto(&out.Config)
-}
-
-// DeepCopy is an autogenerated deepcopy function, copying the receiver, creating a new RuntimeSpec.
-func (in *RuntimeSpec) DeepCopy() *RuntimeSpec {
-	if in == nil {
-		return nil
-	}
-	out := new(RuntimeSpec)
-	in.DeepCopyInto(out)
-	return out
-}
-
-// DeepCopyInto is an autogenerated deepcopy function, copying the receiver, writing into out. in must be non-nil.
-func (in *RuntimeStatus) DeepCopyInto(out *RuntimeStatus) {
-	*out = *in
-}
-
-// DeepCopy is an autogenerated deepcopy function, copying the receiver, creating a new RuntimeStatus.
-func (in *RuntimeStatus) DeepCopy() *RuntimeStatus {
-	if in == nil {
-		return nil
-	}
-	out := new(RuntimeStatus)
-	in.DeepCopyInto(out)
-	return out
-}
diff --git a/controllers/devbox/cmd/main.go b/controllers/devbox/cmd/main.go
index 62416e9441da..ac3bd5fbf25c 100644
--- a/controllers/devbox/cmd/main.go
+++ b/controllers/devbox/cmd/main.go
@@ -27,6 +27,7 @@ import (
 	"k8s.io/client-go/rest"
 
 	corev1 "k8s.io/api/core/v1"
+	"k8s.io/apimachinery/pkg/api/resource"
 	"k8s.io/apimachinery/pkg/labels"
 	"k8s.io/apimachinery/pkg/runtime"
 	utilruntime "k8s.io/apimachinery/pkg/util/runtime"
@@ -42,7 +43,9 @@ import (
 
 	devboxv1alpha1 "github.com/labring/sealos/controllers/devbox/api/v1alpha1"
 	"github.com/labring/sealos/controllers/devbox/internal/controller"
+	"github.com/labring/sealos/controllers/devbox/internal/controller/utils/matcher"
 	"github.com/labring/sealos/controllers/devbox/internal/controller/utils/registry"
+	utilresource "github.com/labring/sealos/controllers/devbox/internal/controller/utils/resource"
 	// +kubebuilder:scaffold:imports
 )
 
@@ -65,19 +68,26 @@ func main() {
 	var secureMetrics bool
 	var enableHTTP2 bool
 	var tlsOpts []func(*tls.Config)
+	// debug flag
+	var debugMode bool
+	// registry flag
 	var registryAddr string
 	var registryUser string
 	var registryPassword string
-	var authAddr string
+	// resource flag
 	var requestCPURate float64
 	var requestMemoryRate float64
 	var requestEphemeralStorage string
 	var limitEphemeralStorage string
-	var debugMode bool
-	flag.StringVar(&registryAddr, "registry-addr", "sealos.hub:5000", "The address of the registry")
-	flag.StringVar(&registryUser, "registry-user", "admin", "The user of the registry")
-	flag.StringVar(&registryPassword, "registry-password", "passw0rd", "The password of the registry")
-	flag.StringVar(&authAddr, "auth-addr", "sealos.hub:5000", "The address of the auth")
+	var maximumLimitEphemeralStorage string
+	// pod matcher flag
+	var enablePodResourceMatcher bool
+	var enablePodEnvMatcher bool
+	var enablePodPortMatcher bool
+	var enablePodEphemeralStorageMatcher bool
+	// config qps and burst
+	var configQPS int
+	var configBurst int
 	flag.StringVar(&metricsAddr, "metrics-bind-address", "0", "The address the metrics endpoint binds to. "+
 		"Use :8443 for HTTPS or :8080 for HTTP, or leave as 0 to disable the metrics service.")
 	flag.StringVar(&probeAddr, "health-probe-bind-address", ":8081", "The address the probe endpoint binds to.")
@@ -88,11 +98,26 @@ func main() {
 		"If set, the metrics endpoint is served securely via HTTPS. Use --metrics-secure=false to use HTTP instead.")
 	flag.BoolVar(&enableHTTP2, "enable-http2", false,
 		"If set, HTTP/2 will be enabled for the metrics and webhook servers")
+	// debug flag
 	flag.BoolVar(&debugMode, "debug", false, "If set, debug mode will be enabled")
+	// registry flag
+	flag.StringVar(&registryAddr, "registry-addr", "sealos.hub:5000", "The address of the registry")
+	flag.StringVar(&registryUser, "registry-user", "admin", "The user of the registry")
+	flag.StringVar(&registryPassword, "registry-password", "passw0rd", "The password of the registry")
+	// resource flag
 	flag.Float64Var(&requestCPURate, "request-cpu-rate", 10, "The request rate of cpu limit in devbox.")
 	flag.Float64Var(&requestMemoryRate, "request-memory-rate", 10, "The request rate of memory limit in devbox.")
-	flag.StringVar(&requestEphemeralStorage, "request-ephemeral-storage", "500Mi", "The request value of ephemeral storage in devbox.")
-	flag.StringVar(&limitEphemeralStorage, "limit-ephemeral-storage", "10Gi", "The limit value of ephemeral storage in devbox.")
+	flag.StringVar(&requestEphemeralStorage, "request-ephemeral-storage", "500Mi", "The default request value of ephemeral storage in devbox.")
+	flag.StringVar(&limitEphemeralStorage, "limit-ephemeral-storage", "10Gi", "The default limit value of ephemeral storage in devbox.")
+	flag.StringVar(&maximumLimitEphemeralStorage, "maximum-limit-ephemeral-storage", "50Gi", "The maximum limit value of ephemeral storage in devbox.")
+	// pod matcher flag, pod resource matcher, env matcher, port matcher will be enabled by default, ephemeral storage matcher will be disabled by default
+	flag.BoolVar(&enablePodResourceMatcher, "enable-pod-resource-matcher", true, "If set, pod resource matcher will be enabled")
+	flag.BoolVar(&enablePodEnvMatcher, "enable-pod-env-matcher", true, "If set, pod env matcher will be enabled")
+	flag.BoolVar(&enablePodPortMatcher, "enable-pod-port-matcher", true, "If set, pod port matcher will be enabled")
+	flag.BoolVar(&enablePodEphemeralStorageMatcher, "enable-pod-ephemeral-storage-matcher", false, "If set, pod ephemeral storage matcher will be enabled")
+	// config qps and burst
+	flag.IntVar(&configQPS, "config-qps", 50, "The qps of the config")
+	flag.IntVar(&configBurst, "config-burst", 100, "The burst of the config")
 	opts := zap.Options{
 		Development: true,
 	}
@@ -149,7 +174,12 @@ func main() {
 		"app.kubernetes.io/part-of":    "devbox",
 	})
 
-	mgr, err := ctrl.NewManager(ctrl.GetConfigOrDie(), ctrl.Options{
+	config := ctrl.GetConfigOrDie()
+	// set qps and burst to config qps and burst for kube-config
+	config.QPS = float32(configQPS)
+	config.Burst = configBurst
+
+	mgr, err := ctrl.NewManager(config, ctrl.Options{
 		Scheme:                 scheme,
 		Metrics:                metricsServerOptions,
 		WebhookServer:          webhookServer,
@@ -182,16 +212,36 @@ func main() {
 		os.Exit(1)
 	}
 
+	podMatchers := []matcher.PodMatcher{}
+	if enablePodResourceMatcher {
+		podMatchers = append(podMatchers, matcher.ResourceMatcher{})
+	}
+	if enablePodEnvMatcher {
+		podMatchers = append(podMatchers, matcher.EnvVarMatcher{})
+	}
+	if enablePodPortMatcher {
+		podMatchers = append(podMatchers, matcher.PortMatcher{})
+	}
+	if enablePodEphemeralStorageMatcher {
+		podMatchers = append(podMatchers, matcher.EphemeralStorageMatcher{})
+	}
+
 	if err = (&controller.DevboxReconciler{
-		Client:                  mgr.GetClient(),
-		Scheme:                  mgr.GetScheme(),
-		CommitImageRegistry:     registryAddr,
-		Recorder:                mgr.GetEventRecorderFor("devbox-controller"),
-		RequestCPURate:          requestCPURate,
-		RequestMemoryRate:       requestMemoryRate,
-		RequestEphemeralStorage: requestEphemeralStorage,
-		LimitEphemeralStorage:   limitEphemeralStorage,
-		DebugMode:               debugMode,
+		Client:              mgr.GetClient(),
+		Scheme:              mgr.GetScheme(),
+		CommitImageRegistry: registryAddr,
+		Recorder:            mgr.GetEventRecorderFor("devbox-controller"),
+		RequestRate: utilresource.RequestRate{
+			CPU:    requestCPURate,
+			Memory: requestMemoryRate,
+		},
+		EphemeralStorage: utilresource.EphemeralStorage{
+			DefaultRequest: resource.MustParse(requestEphemeralStorage),
+			DefaultLimit:   resource.MustParse(limitEphemeralStorage),
+			MaximumLimit:   resource.MustParse(maximumLimitEphemeralStorage),
+		},
+		PodMatchers: podMatchers,
+		DebugMode:   debugMode,
 	}).SetupWithManager(mgr); err != nil {
 		setupLog.Error(err, "unable to create controller", "controller", "Devbox")
 		os.Exit(1)
diff --git a/controllers/devbox/config/crd/bases/devbox.sealos.io_devboxes.yaml b/controllers/devbox/config/crd/bases/devbox.sealos.io_devboxes.yaml
index eaf11b9e5770..0a0d64cb4672 100644
--- a/controllers/devbox/config/crd/bases/devbox.sealos.io_devboxes.yaml
+++ b/controllers/devbox/config/crd/bases/devbox.sealos.io_devboxes.yaml
@@ -32,12 +32,6 @@ spec:
     - jsonPath: .spec.state
       name: State
       type: string
-    - jsonPath: .spec.runtimeRef.name
-      name: RuntimeRef
-      type: string
-    - jsonPath: .status.podPhase
-      name: PodPhase
-      type: string
     - jsonPath: .status.network.type
       name: NetworkType
       type: string
@@ -834,1780 +828,1933 @@ spec:
                         type: array
                     type: object
                 type: object
-              args:
-                items:
-                  type: string
-                type: array
-              command:
-                items:
-                  type: string
-                type: array
-              extraAnnotations:
-                additionalProperties:
-                  type: string
-                type: object
-              extraEnvs:
-                description: todo add rewrite env...
-                items:
-                  description: EnvVar represents an environment variable present in
-                    a Container.
-                  properties:
-                    name:
-                      description: Name of the environment variable. Must be a C_IDENTIFIER.
-                      type: string
-                    value:
-                      description: |-
-                        Variable references $(VAR_NAME) are expanded
-                        using the previously defined environment variables in the container and
-                        any service environment variables. If a variable cannot be resolved,
-                        the reference in the input string will be unchanged. Double $$ are reduced
-                        to a single $, which allows for escaping the $(VAR_NAME) syntax: i.e.
-                        "$$(VAR_NAME)" will produce the string literal "$(VAR_NAME)".
-                        Escaped references will never be expanded, regardless of whether the variable
-                        exists or not.
-                        Defaults to "".
+              config:
+                properties:
+                  annotations:
+                    additionalProperties:
                       type: string
-                    valueFrom:
-                      description: Source for the environment variable's value. Cannot
-                        be used if value is not empty.
+                    type: object
+                  appPorts:
+                    default:
+                    - name: devbox-app-port
+                      port: 8080
+                      protocol: TCP
+                    items:
+                      description: ServicePort contains information on service's port.
                       properties:
-                        configMapKeyRef:
-                          description: Selects a key of a ConfigMap.
-                          properties:
-                            key:
-                              description: The key to select.
-                              type: string
-                            name:
-                              description: |-
-                                Name of the referent.
-                                More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                                TODO: Add other useful fields. apiVersion, kind, uid?
-                              type: string
-                            optional:
-                              description: Specify whether the ConfigMap or its key
-                                must be defined
-                              type: boolean
-                          required:
-                          - key
-                          type: object
-                          x-kubernetes-map-type: atomic
-                        fieldRef:
+                        appProtocol:
                           description: |-
-                            Selects a field of the pod: supports metadata.name, metadata.namespace, `metadata.labels['<KEY>']`, `metadata.annotations['<KEY>']`,
-                            spec.nodeName, spec.serviceAccountName, status.hostIP, status.podIP, status.podIPs.
-                          properties:
-                            apiVersion:
-                              description: Version of the schema the FieldPath is
-                                written in terms of, defaults to "v1".
-                              type: string
-                            fieldPath:
-                              description: Path of the field to select in the specified
-                                API version.
-                              type: string
-                          required:
-                          - fieldPath
-                          type: object
-                          x-kubernetes-map-type: atomic
-                        resourceFieldRef:
+                            The application protocol for this port.
+                            This is used as a hint for implementations to offer richer behavior for protocols that they understand.
+                            This field follows standard Kubernetes label syntax.
+                            Valid values are either:
+
+
+                            * Un-prefixed protocol names - reserved for IANA standard service names (as per
+                            RFC-6335 and https://www.iana.org/assignments/service-names).
+
+
+                            * Kubernetes-defined prefixed names:
+                              * 'kubernetes.io/h2c' - HTTP/2 over cleartext as described in https://www.rfc-editor.org/rfc/rfc7540
+                              * 'kubernetes.io/ws'  - WebSocket over cleartext as described in https://www.rfc-editor.org/rfc/rfc6455
+                              * 'kubernetes.io/wss' - WebSocket over TLS as described in https://www.rfc-editor.org/rfc/rfc6455
+
+
+                            * Other protocols should use implementation-defined prefixed names such as
+                            mycompany.com/my-custom-protocol.
+                          type: string
+                        name:
                           description: |-
-                            Selects a resource of the container: only resources limits and requests
-                            (limits.cpu, limits.memory, limits.ephemeral-storage, requests.cpu, requests.memory and requests.ephemeral-storage) are currently supported.
-                          properties:
-                            containerName:
-                              description: 'Container name: required for volumes,
-                                optional for env vars'
-                              type: string
-                            divisor:
-                              anyOf:
-                              - type: integer
-                              - type: string
-                              description: Specifies the output format of the exposed
-                                resources, defaults to "1"
-                              pattern: ^(\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))(([KMGTPE]i)|[numkMGTPE]|([eE](\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))))?$
-                              x-kubernetes-int-or-string: true
-                            resource:
-                              description: 'Required: resource to select'
-                              type: string
-                          required:
-                          - resource
-                          type: object
-                          x-kubernetes-map-type: atomic
-                        secretKeyRef:
-                          description: Selects a key of a secret in the pod's namespace
+                            The name of this port within the service. This must be a DNS_LABEL.
+                            All ports within a ServiceSpec must have unique names. When considering
+                            the endpoints for a Service, this must match the 'name' field in the
+                            EndpointPort.
+                            Optional if only one ServicePort is defined on this service.
+                          type: string
+                        nodePort:
+                          description: |-
+                            The port on each node on which this service is exposed when type is
+                            NodePort or LoadBalancer.  Usually assigned by the system. If a value is
+                            specified, in-range, and not in use it will be used, otherwise the
+                            operation will fail.  If not specified, a port will be allocated if this
+                            Service requires one.  If this field is specified when creating a
+                            Service which does not need it, creation will fail. This field will be
+                            wiped when updating a Service to no longer need it (e.g. changing type
+                            from NodePort to ClusterIP).
+                            More info: https://kubernetes.io/docs/concepts/services-networking/service/#type-nodeport
+                          format: int32
+                          type: integer
+                        port:
+                          description: The port that will be exposed by this service.
+                          format: int32
+                          type: integer
+                        protocol:
+                          default: TCP
+                          description: |-
+                            The IP protocol for this port. Supports "TCP", "UDP", and "SCTP".
+                            Default is TCP.
+                          type: string
+                        targetPort:
+                          anyOf:
+                          - type: integer
+                          - type: string
+                          description: |-
+                            Number or name of the port to access on the pods targeted by the service.
+                            Number must be in the range 1 to 65535. Name must be an IANA_SVC_NAME.
+                            If this is a string, it will be looked up as a named port in the
+                            target Pod's container ports. If this is not specified, the value
+                            of the 'port' field is used (an identity map).
+                            This field is ignored for services with clusterIP=None, and should be
+                            omitted or set equal to the 'port' field.
+                            More info: https://kubernetes.io/docs/concepts/services-networking/service/#defining-a-service
+                          x-kubernetes-int-or-string: true
+                      required:
+                      - port
+                      type: object
+                    type: array
+                  args:
+                    description: kubebuilder:validation:Optional
+                    items:
+                      type: string
+                    type: array
+                  command:
+                    items:
+                      type: string
+                    type: array
+                  env:
+                    items:
+                      description: EnvVar represents an environment variable present
+                        in a Container.
+                      properties:
+                        name:
+                          description: Name of the environment variable. Must be a
+                            C_IDENTIFIER.
+                          type: string
+                        value:
+                          description: |-
+                            Variable references $(VAR_NAME) are expanded
+                            using the previously defined environment variables in the container and
+                            any service environment variables. If a variable cannot be resolved,
+                            the reference in the input string will be unchanged. Double $$ are reduced
+                            to a single $, which allows for escaping the $(VAR_NAME) syntax: i.e.
+                            "$$(VAR_NAME)" will produce the string literal "$(VAR_NAME)".
+                            Escaped references will never be expanded, regardless of whether the variable
+                            exists or not.
+                            Defaults to "".
+                          type: string
+                        valueFrom:
+                          description: Source for the environment variable's value.
+                            Cannot be used if value is not empty.
                           properties:
-                            key:
-                              description: The key of the secret to select from.  Must
-                                be a valid secret key.
-                              type: string
-                            name:
+                            configMapKeyRef:
+                              description: Selects a key of a ConfigMap.
+                              properties:
+                                key:
+                                  description: The key to select.
+                                  type: string
+                                name:
+                                  description: |-
+                                    Name of the referent.
+                                    More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
+                                    TODO: Add other useful fields. apiVersion, kind, uid?
+                                  type: string
+                                optional:
+                                  description: Specify whether the ConfigMap or its
+                                    key must be defined
+                                  type: boolean
+                              required:
+                              - key
+                              type: object
+                              x-kubernetes-map-type: atomic
+                            fieldRef:
                               description: |-
-                                Name of the referent.
-                                More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                                TODO: Add other useful fields. apiVersion, kind, uid?
-                              type: string
-                            optional:
-                              description: Specify whether the Secret or its key must
-                                be defined
-                              type: boolean
-                          required:
-                          - key
+                                Selects a field of the pod: supports metadata.name, metadata.namespace, `metadata.labels['<KEY>']`, `metadata.annotations['<KEY>']`,
+                                spec.nodeName, spec.serviceAccountName, status.hostIP, status.podIP, status.podIPs.
+                              properties:
+                                apiVersion:
+                                  description: Version of the schema the FieldPath
+                                    is written in terms of, defaults to "v1".
+                                  type: string
+                                fieldPath:
+                                  description: Path of the field to select in the
+                                    specified API version.
+                                  type: string
+                              required:
+                              - fieldPath
+                              type: object
+                              x-kubernetes-map-type: atomic
+                            resourceFieldRef:
+                              description: |-
+                                Selects a resource of the container: only resources limits and requests
+                                (limits.cpu, limits.memory, limits.ephemeral-storage, requests.cpu, requests.memory and requests.ephemeral-storage) are currently supported.
+                              properties:
+                                containerName:
+                                  description: 'Container name: required for volumes,
+                                    optional for env vars'
+                                  type: string
+                                divisor:
+                                  anyOf:
+                                  - type: integer
+                                  - type: string
+                                  description: Specifies the output format of the
+                                    exposed resources, defaults to "1"
+                                  pattern: ^(\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))(([KMGTPE]i)|[numkMGTPE]|([eE](\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))))?$
+                                  x-kubernetes-int-or-string: true
+                                resource:
+                                  description: 'Required: resource to select'
+                                  type: string
+                              required:
+                              - resource
+                              type: object
+                              x-kubernetes-map-type: atomic
+                            secretKeyRef:
+                              description: Selects a key of a secret in the pod's
+                                namespace
+                              properties:
+                                key:
+                                  description: The key of the secret to select from.  Must
+                                    be a valid secret key.
+                                  type: string
+                                name:
+                                  description: |-
+                                    Name of the referent.
+                                    More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
+                                    TODO: Add other useful fields. apiVersion, kind, uid?
+                                  type: string
+                                optional:
+                                  description: Specify whether the Secret or its key
+                                    must be defined
+                                  type: boolean
+                              required:
+                              - key
+                              type: object
+                              x-kubernetes-map-type: atomic
                           type: object
-                          x-kubernetes-map-type: atomic
+                      required:
+                      - name
                       type: object
-                  required:
-                  - name
-                  type: object
-                type: array
-              extraLabels:
-                additionalProperties:
-                  type: string
-                description: todo add rewrite labels and annotations...
-                type: object
-              extraVolumeMounts:
-                items:
-                  description: VolumeMount describes a mounting of a Volume within
-                    a container.
-                  properties:
-                    mountPath:
-                      description: |-
-                        Path within the container at which the volume should be mounted.  Must
-                        not contain ':'.
-                      type: string
-                    mountPropagation:
-                      description: |-
-                        mountPropagation determines how mounts are propagated from the host
-                        to container and the other way around.
-                        When not set, MountPropagationNone is used.
-                        This field is beta in 1.10.
-                      type: string
-                    name:
-                      description: This must match the Name of a Volume.
-                      type: string
-                    readOnly:
-                      description: |-
-                        Mounted read-only if true, read-write otherwise (false or unspecified).
-                        Defaults to false.
-                      type: boolean
-                    subPath:
-                      description: |-
-                        Path within the volume from which the container's volume should be mounted.
-                        Defaults to "" (volume's root).
-                      type: string
-                    subPathExpr:
-                      description: |-
-                        Expanded path within the volume from which the container's volume should be mounted.
-                        Behaves similarly to SubPath but environment variable references $(VAR_NAME) are expanded using the container's environment.
-                        Defaults to "" (volume's root).
-                        SubPathExpr and SubPath are mutually exclusive.
+                    type: array
+                  labels:
+                    additionalProperties:
                       type: string
-                  required:
-                  - mountPath
-                  - name
-                  type: object
-                type: array
-              extraVolumes:
-                description: todo add rewrite volumes and volume mounts..
-                items:
-                  description: Volume represents a named volume in a pod that may
-                    be accessed by any container in the pod.
-                  properties:
-                    awsElasticBlockStore:
-                      description: |-
-                        awsElasticBlockStore represents an AWS Disk resource that is attached to a
-                        kubelet's host machine and then exposed to the pod.
-                        More info: https://kubernetes.io/docs/concepts/storage/volumes#awselasticblockstore
+                    type: object
+                  ports:
+                    default:
+                    - containerPort: 22
+                      name: devbox-ssh-port
+                      protocol: TCP
+                    description: 'TODO: in v1alpha2 api we need fix the port and app
+                      port into one field and create a new type for it.'
+                    items:
+                      description: ContainerPort represents a network port in a single
+                        container.
                       properties:
-                        fsType:
+                        containerPort:
                           description: |-
-                            fsType is the filesystem type of the volume that you want to mount.
-                            Tip: Ensure that the filesystem type is supported by the host operating system.
-                            Examples: "ext4", "xfs", "ntfs". Implicitly inferred to be "ext4" if unspecified.
-                            More info: https://kubernetes.io/docs/concepts/storage/volumes#awselasticblockstore
-                            TODO: how do we prevent errors in the filesystem from compromising the machine
+                            Number of port to expose on the pod's IP address.
+                            This must be a valid port number, 0 < x < 65536.
+                          format: int32
+                          type: integer
+                        hostIP:
+                          description: What host IP to bind the external port to.
                           type: string
-                        partition:
+                        hostPort:
                           description: |-
-                            partition is the partition in the volume that you want to mount.
-                            If omitted, the default is to mount by volume name.
-                            Examples: For volume /dev/sda1, you specify the partition as "1".
-                            Similarly, the volume partition for /dev/sda is "0" (or you can leave the property empty).
+                            Number of port to expose on the host.
+                            If specified, this must be a valid port number, 0 < x < 65536.
+                            If HostNetwork is specified, this must match ContainerPort.
+                            Most containers do not need this.
                           format: int32
                           type: integer
-                        readOnly:
+                        name:
                           description: |-
-                            readOnly value true will force the readOnly setting in VolumeMounts.
-                            More info: https://kubernetes.io/docs/concepts/storage/volumes#awselasticblockstore
-                          type: boolean
-                        volumeID:
+                            If specified, this must be an IANA_SVC_NAME and unique within the pod. Each
+                            named port in a pod must have a unique name. Name for the port that can be
+                            referred to by services.
+                          type: string
+                        protocol:
+                          default: TCP
                           description: |-
-                            volumeID is unique ID of the persistent disk resource in AWS (Amazon EBS volume).
-                            More info: https://kubernetes.io/docs/concepts/storage/volumes#awselasticblockstore
+                            Protocol for port. Must be UDP, TCP, or SCTP.
+                            Defaults to "TCP".
                           type: string
                       required:
-                      - volumeID
+                      - containerPort
                       type: object
-                    azureDisk:
-                      description: azureDisk represents an Azure Data Disk mount on
-                        the host and bind mount to the pod.
+                    type: array
+                  releaseArgs:
+                    default:
+                    - /home/devbox/project/entrypoint.sh
+                    items:
+                      type: string
+                    type: array
+                  releaseCommand:
+                    default:
+                    - /bin/bash
+                    - -c
+                    items:
+                      type: string
+                    type: array
+                  user:
+                    default: devbox
+                    type: string
+                  volumeMounts:
+                    items:
+                      description: VolumeMount describes a mounting of a Volume within
+                        a container.
                       properties:
-                        cachingMode:
-                          description: 'cachingMode is the Host Caching mode: None,
-                            Read Only, Read Write.'
-                          type: string
-                        diskName:
-                          description: diskName is the Name of the data disk in the
-                            blob storage
-                          type: string
-                        diskURI:
-                          description: diskURI is the URI of data disk in the blob
-                            storage
+                        mountPath:
+                          description: |-
+                            Path within the container at which the volume should be mounted.  Must
+                            not contain ':'.
                           type: string
-                        fsType:
+                        mountPropagation:
                           description: |-
-                            fsType is Filesystem type to mount.
-                            Must be a filesystem type supported by the host operating system.
-                            Ex. "ext4", "xfs", "ntfs". Implicitly inferred to be "ext4" if unspecified.
+                            mountPropagation determines how mounts are propagated from the host
+                            to container and the other way around.
+                            When not set, MountPropagationNone is used.
+                            This field is beta in 1.10.
                           type: string
-                        kind:
-                          description: 'kind expected values are Shared: multiple
-                            blob disks per storage account  Dedicated: single blob
-                            disk per storage account  Managed: azure managed data
-                            disk (only in managed availability set). defaults to shared'
+                        name:
+                          description: This must match the Name of a Volume.
                           type: string
                         readOnly:
                           description: |-
-                            readOnly Defaults to false (read/write). ReadOnly here will force
-                            the ReadOnly setting in VolumeMounts.
+                            Mounted read-only if true, read-write otherwise (false or unspecified).
+                            Defaults to false.
                           type: boolean
-                      required:
-                      - diskName
-                      - diskURI
-                      type: object
-                    azureFile:
-                      description: azureFile represents an Azure File Service mount
-                        on the host and bind mount to the pod.
-                      properties:
-                        readOnly:
+                        subPath:
                           description: |-
-                            readOnly defaults to false (read/write). ReadOnly here will force
-                            the ReadOnly setting in VolumeMounts.
-                          type: boolean
-                        secretName:
-                          description: secretName is the  name of secret that contains
-                            Azure Storage Account Name and Key
+                            Path within the volume from which the container's volume should be mounted.
+                            Defaults to "" (volume's root).
                           type: string
-                        shareName:
-                          description: shareName is the azure share Name
+                        subPathExpr:
+                          description: |-
+                            Expanded path within the volume from which the container's volume should be mounted.
+                            Behaves similarly to SubPath but environment variable references $(VAR_NAME) are expanded using the container's environment.
+                            Defaults to "" (volume's root).
+                            SubPathExpr and SubPath are mutually exclusive.
                           type: string
                       required:
-                      - secretName
-                      - shareName
+                      - mountPath
+                      - name
                       type: object
-                    cephfs:
-                      description: cephFS represents a Ceph FS mount on the host that
-                        shares a pod's lifetime
+                    type: array
+                  volumes:
+                    items:
+                      description: Volume represents a named volume in a pod that
+                        may be accessed by any container in the pod.
                       properties:
-                        monitors:
-                          description: |-
-                            monitors is Required: Monitors is a collection of Ceph monitors
-                            More info: https://examples.k8s.io/volumes/cephfs/README.md#how-to-use-it
-                          items:
-                            type: string
-                          type: array
-                        path:
-                          description: 'path is Optional: Used as the mounted root,
-                            rather than the full Ceph tree, default is /'
-                          type: string
-                        readOnly:
+                        awsElasticBlockStore:
                           description: |-
-                            readOnly is Optional: Defaults to false (read/write). ReadOnly here will force
-                            the ReadOnly setting in VolumeMounts.
-                            More info: https://examples.k8s.io/volumes/cephfs/README.md#how-to-use-it
-                          type: boolean
-                        secretFile:
-                          description: |-
-                            secretFile is Optional: SecretFile is the path to key ring for User, default is /etc/ceph/user.secret
-                            More info: https://examples.k8s.io/volumes/cephfs/README.md#how-to-use-it
-                          type: string
-                        secretRef:
-                          description: |-
-                            secretRef is Optional: SecretRef is reference to the authentication secret for User, default is empty.
-                            More info: https://examples.k8s.io/volumes/cephfs/README.md#how-to-use-it
+                            awsElasticBlockStore represents an AWS Disk resource that is attached to a
+                            kubelet's host machine and then exposed to the pod.
+                            More info: https://kubernetes.io/docs/concepts/storage/volumes#awselasticblockstore
                           properties:
-                            name:
+                            fsType:
                               description: |-
-                                Name of the referent.
-                                More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                                TODO: Add other useful fields. apiVersion, kind, uid?
+                                fsType is the filesystem type of the volume that you want to mount.
+                                Tip: Ensure that the filesystem type is supported by the host operating system.
+                                Examples: "ext4", "xfs", "ntfs". Implicitly inferred to be "ext4" if unspecified.
+                                More info: https://kubernetes.io/docs/concepts/storage/volumes#awselasticblockstore
+                                TODO: how do we prevent errors in the filesystem from compromising the machine
+                              type: string
+                            partition:
+                              description: |-
+                                partition is the partition in the volume that you want to mount.
+                                If omitted, the default is to mount by volume name.
+                                Examples: For volume /dev/sda1, you specify the partition as "1".
+                                Similarly, the volume partition for /dev/sda is "0" (or you can leave the property empty).
+                              format: int32
+                              type: integer
+                            readOnly:
+                              description: |-
+                                readOnly value true will force the readOnly setting in VolumeMounts.
+                                More info: https://kubernetes.io/docs/concepts/storage/volumes#awselasticblockstore
+                              type: boolean
+                            volumeID:
+                              description: |-
+                                volumeID is unique ID of the persistent disk resource in AWS (Amazon EBS volume).
+                                More info: https://kubernetes.io/docs/concepts/storage/volumes#awselasticblockstore
                               type: string
+                          required:
+                          - volumeID
                           type: object
-                          x-kubernetes-map-type: atomic
-                        user:
-                          description: |-
-                            user is optional: User is the rados user name, default is admin
-                            More info: https://examples.k8s.io/volumes/cephfs/README.md#how-to-use-it
-                          type: string
-                      required:
-                      - monitors
-                      type: object
-                    cinder:
-                      description: |-
-                        cinder represents a cinder volume attached and mounted on kubelets host machine.
-                        More info: https://examples.k8s.io/mysql-cinder-pd/README.md
-                      properties:
-                        fsType:
-                          description: |-
-                            fsType is the filesystem type to mount.
-                            Must be a filesystem type supported by the host operating system.
-                            Examples: "ext4", "xfs", "ntfs". Implicitly inferred to be "ext4" if unspecified.
-                            More info: https://examples.k8s.io/mysql-cinder-pd/README.md
-                          type: string
-                        readOnly:
-                          description: |-
-                            readOnly defaults to false (read/write). ReadOnly here will force
-                            the ReadOnly setting in VolumeMounts.
-                            More info: https://examples.k8s.io/mysql-cinder-pd/README.md
-                          type: boolean
-                        secretRef:
-                          description: |-
-                            secretRef is optional: points to a secret object containing parameters used to connect
-                            to OpenStack.
+                        azureDisk:
+                          description: azureDisk represents an Azure Data Disk mount
+                            on the host and bind mount to the pod.
                           properties:
-                            name:
+                            cachingMode:
+                              description: 'cachingMode is the Host Caching mode:
+                                None, Read Only, Read Write.'
+                              type: string
+                            diskName:
+                              description: diskName is the Name of the data disk in
+                                the blob storage
+                              type: string
+                            diskURI:
+                              description: diskURI is the URI of data disk in the
+                                blob storage
+                              type: string
+                            fsType:
                               description: |-
-                                Name of the referent.
-                                More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                                TODO: Add other useful fields. apiVersion, kind, uid?
+                                fsType is Filesystem type to mount.
+                                Must be a filesystem type supported by the host operating system.
+                                Ex. "ext4", "xfs", "ntfs". Implicitly inferred to be "ext4" if unspecified.
+                              type: string
+                            kind:
+                              description: 'kind expected values are Shared: multiple
+                                blob disks per storage account  Dedicated: single
+                                blob disk per storage account  Managed: azure managed
+                                data disk (only in managed availability set). defaults
+                                to shared'
                               type: string
+                            readOnly:
+                              description: |-
+                                readOnly Defaults to false (read/write). ReadOnly here will force
+                                the ReadOnly setting in VolumeMounts.
+                              type: boolean
+                          required:
+                          - diskName
+                          - diskURI
                           type: object
-                          x-kubernetes-map-type: atomic
-                        volumeID:
-                          description: |-
-                            volumeID used to identify the volume in cinder.
-                            More info: https://examples.k8s.io/mysql-cinder-pd/README.md
-                          type: string
-                      required:
-                      - volumeID
-                      type: object
-                    configMap:
-                      description: configMap represents a configMap that should populate
-                        this volume
-                      properties:
-                        defaultMode:
-                          description: |-
-                            defaultMode is optional: mode bits used to set permissions on created files by default.
-                            Must be an octal value between 0000 and 0777 or a decimal value between 0 and 511.
-                            YAML accepts both octal and decimal values, JSON requires decimal values for mode bits.
-                            Defaults to 0644.
-                            Directories within the path are not affected by this setting.
-                            This might be in conflict with other options that affect the file
-                            mode, like fsGroup, and the result can be other mode bits set.
-                          format: int32
-                          type: integer
-                        items:
-                          description: |-
-                            items if unspecified, each key-value pair in the Data field of the referenced
-                            ConfigMap will be projected into the volume as a file whose name is the
-                            key and content is the value. If specified, the listed keys will be
-                            projected into the specified paths, and unlisted keys will not be
-                            present. If a key is specified which is not present in the ConfigMap,
-                            the volume setup will error unless it is marked optional. Paths must be
-                            relative and may not contain the '..' path or start with '..'.
-                          items:
-                            description: Maps a string key to a path within a volume.
-                            properties:
-                              key:
-                                description: key is the key to project.
-                                type: string
-                              mode:
-                                description: |-
-                                  mode is Optional: mode bits used to set permissions on this file.
-                                  Must be an octal value between 0000 and 0777 or a decimal value between 0 and 511.
-                                  YAML accepts both octal and decimal values, JSON requires decimal values for mode bits.
-                                  If not specified, the volume defaultMode will be used.
-                                  This might be in conflict with other options that affect the file
-                                  mode, like fsGroup, and the result can be other mode bits set.
-                                format: int32
-                                type: integer
-                              path:
-                                description: |-
-                                  path is the relative path of the file to map the key to.
-                                  May not be an absolute path.
-                                  May not contain the path element '..'.
-                                  May not start with the string '..'.
-                                type: string
-                            required:
-                            - key
-                            - path
-                            type: object
-                          type: array
-                        name:
-                          description: |-
-                            Name of the referent.
-                            More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                            TODO: Add other useful fields. apiVersion, kind, uid?
-                          type: string
-                        optional:
-                          description: optional specify whether the ConfigMap or its
-                            keys must be defined
-                          type: boolean
-                      type: object
-                      x-kubernetes-map-type: atomic
-                    csi:
-                      description: csi (Container Storage Interface) represents ephemeral
-                        storage that is handled by certain external CSI drivers (Beta
-                        feature).
-                      properties:
-                        driver:
-                          description: |-
-                            driver is the name of the CSI driver that handles this volume.
-                            Consult with your admin for the correct name as registered in the cluster.
-                          type: string
-                        fsType:
-                          description: |-
-                            fsType to mount. Ex. "ext4", "xfs", "ntfs".
-                            If not provided, the empty value is passed to the associated CSI driver
-                            which will determine the default filesystem to apply.
-                          type: string
-                        nodePublishSecretRef:
-                          description: |-
-                            nodePublishSecretRef is a reference to the secret object containing
-                            sensitive information to pass to the CSI driver to complete the CSI
-                            NodePublishVolume and NodeUnpublishVolume calls.
-                            This field is optional, and  may be empty if no secret is required. If the
-                            secret object contains more than one secret, all secret references are passed.
+                        azureFile:
+                          description: azureFile represents an Azure File Service
+                            mount on the host and bind mount to the pod.
                           properties:
-                            name:
+                            readOnly:
                               description: |-
-                                Name of the referent.
-                                More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                                TODO: Add other useful fields. apiVersion, kind, uid?
+                                readOnly defaults to false (read/write). ReadOnly here will force
+                                the ReadOnly setting in VolumeMounts.
+                              type: boolean
+                            secretName:
+                              description: secretName is the  name of secret that
+                                contains Azure Storage Account Name and Key
                               type: string
+                            shareName:
+                              description: shareName is the azure share Name
+                              type: string
+                          required:
+                          - secretName
+                          - shareName
                           type: object
-                          x-kubernetes-map-type: atomic
-                        readOnly:
-                          description: |-
-                            readOnly specifies a read-only configuration for the volume.
-                            Defaults to false (read/write).
-                          type: boolean
-                        volumeAttributes:
-                          additionalProperties:
-                            type: string
-                          description: |-
-                            volumeAttributes stores driver-specific properties that are passed to the CSI
-                            driver. Consult your driver's documentation for supported values.
+                        cephfs:
+                          description: cephFS represents a Ceph FS mount on the host
+                            that shares a pod's lifetime
+                          properties:
+                            monitors:
+                              description: |-
+                                monitors is Required: Monitors is a collection of Ceph monitors
+                                More info: https://examples.k8s.io/volumes/cephfs/README.md#how-to-use-it
+                              items:
+                                type: string
+                              type: array
+                            path:
+                              description: 'path is Optional: Used as the mounted
+                                root, rather than the full Ceph tree, default is /'
+                              type: string
+                            readOnly:
+                              description: |-
+                                readOnly is Optional: Defaults to false (read/write). ReadOnly here will force
+                                the ReadOnly setting in VolumeMounts.
+                                More info: https://examples.k8s.io/volumes/cephfs/README.md#how-to-use-it
+                              type: boolean
+                            secretFile:
+                              description: |-
+                                secretFile is Optional: SecretFile is the path to key ring for User, default is /etc/ceph/user.secret
+                                More info: https://examples.k8s.io/volumes/cephfs/README.md#how-to-use-it
+                              type: string
+                            secretRef:
+                              description: |-
+                                secretRef is Optional: SecretRef is reference to the authentication secret for User, default is empty.
+                                More info: https://examples.k8s.io/volumes/cephfs/README.md#how-to-use-it
+                              properties:
+                                name:
+                                  description: |-
+                                    Name of the referent.
+                                    More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
+                                    TODO: Add other useful fields. apiVersion, kind, uid?
+                                  type: string
+                              type: object
+                              x-kubernetes-map-type: atomic
+                            user:
+                              description: |-
+                                user is optional: User is the rados user name, default is admin
+                                More info: https://examples.k8s.io/volumes/cephfs/README.md#how-to-use-it
+                              type: string
+                          required:
+                          - monitors
                           type: object
-                      required:
-                      - driver
-                      type: object
-                    downwardAPI:
-                      description: downwardAPI represents downward API about the pod
-                        that should populate this volume
-                      properties:
-                        defaultMode:
+                        cinder:
                           description: |-
-                            Optional: mode bits to use on created files by default. Must be a
-                            Optional: mode bits used to set permissions on created files by default.
-                            Must be an octal value between 0000 and 0777 or a decimal value between 0 and 511.
-                            YAML accepts both octal and decimal values, JSON requires decimal values for mode bits.
-                            Defaults to 0644.
-                            Directories within the path are not affected by this setting.
-                            This might be in conflict with other options that affect the file
-                            mode, like fsGroup, and the result can be other mode bits set.
-                          format: int32
-                          type: integer
-                        items:
-                          description: Items is a list of downward API volume file
-                          items:
-                            description: DownwardAPIVolumeFile represents information
-                              to create the file containing the pod field
-                            properties:
-                              fieldRef:
-                                description: 'Required: Selects a field of the pod:
-                                  only annotations, labels, name and namespace are
-                                  supported.'
+                            cinder represents a cinder volume attached and mounted on kubelets host machine.
+                            More info: https://examples.k8s.io/mysql-cinder-pd/README.md
+                          properties:
+                            fsType:
+                              description: |-
+                                fsType is the filesystem type to mount.
+                                Must be a filesystem type supported by the host operating system.
+                                Examples: "ext4", "xfs", "ntfs". Implicitly inferred to be "ext4" if unspecified.
+                                More info: https://examples.k8s.io/mysql-cinder-pd/README.md
+                              type: string
+                            readOnly:
+                              description: |-
+                                readOnly defaults to false (read/write). ReadOnly here will force
+                                the ReadOnly setting in VolumeMounts.
+                                More info: https://examples.k8s.io/mysql-cinder-pd/README.md
+                              type: boolean
+                            secretRef:
+                              description: |-
+                                secretRef is optional: points to a secret object containing parameters used to connect
+                                to OpenStack.
+                              properties:
+                                name:
+                                  description: |-
+                                    Name of the referent.
+                                    More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
+                                    TODO: Add other useful fields. apiVersion, kind, uid?
+                                  type: string
+                              type: object
+                              x-kubernetes-map-type: atomic
+                            volumeID:
+                              description: |-
+                                volumeID used to identify the volume in cinder.
+                                More info: https://examples.k8s.io/mysql-cinder-pd/README.md
+                              type: string
+                          required:
+                          - volumeID
+                          type: object
+                        configMap:
+                          description: configMap represents a configMap that should
+                            populate this volume
+                          properties:
+                            defaultMode:
+                              description: |-
+                                defaultMode is optional: mode bits used to set permissions on created files by default.
+                                Must be an octal value between 0000 and 0777 or a decimal value between 0 and 511.
+                                YAML accepts both octal and decimal values, JSON requires decimal values for mode bits.
+                                Defaults to 0644.
+                                Directories within the path are not affected by this setting.
+                                This might be in conflict with other options that affect the file
+                                mode, like fsGroup, and the result can be other mode bits set.
+                              format: int32
+                              type: integer
+                            items:
+                              description: |-
+                                items if unspecified, each key-value pair in the Data field of the referenced
+                                ConfigMap will be projected into the volume as a file whose name is the
+                                key and content is the value. If specified, the listed keys will be
+                                projected into the specified paths, and unlisted keys will not be
+                                present. If a key is specified which is not present in the ConfigMap,
+                                the volume setup will error unless it is marked optional. Paths must be
+                                relative and may not contain the '..' path or start with '..'.
+                              items:
+                                description: Maps a string key to a path within a
+                                  volume.
                                 properties:
-                                  apiVersion:
-                                    description: Version of the schema the FieldPath
-                                      is written in terms of, defaults to "v1".
+                                  key:
+                                    description: key is the key to project.
                                     type: string
-                                  fieldPath:
-                                    description: Path of the field to select in the
-                                      specified API version.
+                                  mode:
+                                    description: |-
+                                      mode is Optional: mode bits used to set permissions on this file.
+                                      Must be an octal value between 0000 and 0777 or a decimal value between 0 and 511.
+                                      YAML accepts both octal and decimal values, JSON requires decimal values for mode bits.
+                                      If not specified, the volume defaultMode will be used.
+                                      This might be in conflict with other options that affect the file
+                                      mode, like fsGroup, and the result can be other mode bits set.
+                                    format: int32
+                                    type: integer
+                                  path:
+                                    description: |-
+                                      path is the relative path of the file to map the key to.
+                                      May not be an absolute path.
+                                      May not contain the path element '..'.
+                                      May not start with the string '..'.
                                     type: string
                                 required:
-                                - fieldPath
+                                - key
+                                - path
                                 type: object
-                                x-kubernetes-map-type: atomic
-                              mode:
-                                description: |-
-                                  Optional: mode bits used to set permissions on this file, must be an octal value
-                                  between 0000 and 0777 or a decimal value between 0 and 511.
-                                  YAML accepts both octal and decimal values, JSON requires decimal values for mode bits.
-                                  If not specified, the volume defaultMode will be used.
-                                  This might be in conflict with other options that affect the file
-                                  mode, like fsGroup, and the result can be other mode bits set.
-                                format: int32
-                                type: integer
-                              path:
-                                description: 'Required: Path is  the relative path
-                                  name of the file to be created. Must not be absolute
-                                  or contain the ''..'' path. Must be utf-8 encoded.
-                                  The first item of the relative path must not start
-                                  with ''..'''
+                              type: array
+                            name:
+                              description: |-
+                                Name of the referent.
+                                More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
+                                TODO: Add other useful fields. apiVersion, kind, uid?
+                              type: string
+                            optional:
+                              description: optional specify whether the ConfigMap
+                                or its keys must be defined
+                              type: boolean
+                          type: object
+                          x-kubernetes-map-type: atomic
+                        csi:
+                          description: csi (Container Storage Interface) represents
+                            ephemeral storage that is handled by certain external
+                            CSI drivers (Beta feature).
+                          properties:
+                            driver:
+                              description: |-
+                                driver is the name of the CSI driver that handles this volume.
+                                Consult with your admin for the correct name as registered in the cluster.
+                              type: string
+                            fsType:
+                              description: |-
+                                fsType to mount. Ex. "ext4", "xfs", "ntfs".
+                                If not provided, the empty value is passed to the associated CSI driver
+                                which will determine the default filesystem to apply.
+                              type: string
+                            nodePublishSecretRef:
+                              description: |-
+                                nodePublishSecretRef is a reference to the secret object containing
+                                sensitive information to pass to the CSI driver to complete the CSI
+                                NodePublishVolume and NodeUnpublishVolume calls.
+                                This field is optional, and  may be empty if no secret is required. If the
+                                secret object contains more than one secret, all secret references are passed.
+                              properties:
+                                name:
+                                  description: |-
+                                    Name of the referent.
+                                    More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
+                                    TODO: Add other useful fields. apiVersion, kind, uid?
+                                  type: string
+                              type: object
+                              x-kubernetes-map-type: atomic
+                            readOnly:
+                              description: |-
+                                readOnly specifies a read-only configuration for the volume.
+                                Defaults to false (read/write).
+                              type: boolean
+                            volumeAttributes:
+                              additionalProperties:
                                 type: string
-                              resourceFieldRef:
-                                description: |-
-                                  Selects a resource of the container: only resources limits and requests
-                                  (limits.cpu, limits.memory, requests.cpu and requests.memory) are currently supported.
+                              description: |-
+                                volumeAttributes stores driver-specific properties that are passed to the CSI
+                                driver. Consult your driver's documentation for supported values.
+                              type: object
+                          required:
+                          - driver
+                          type: object
+                        downwardAPI:
+                          description: downwardAPI represents downward API about the
+                            pod that should populate this volume
+                          properties:
+                            defaultMode:
+                              description: |-
+                                Optional: mode bits to use on created files by default. Must be a
+                                Optional: mode bits used to set permissions on created files by default.
+                                Must be an octal value between 0000 and 0777 or a decimal value between 0 and 511.
+                                YAML accepts both octal and decimal values, JSON requires decimal values for mode bits.
+                                Defaults to 0644.
+                                Directories within the path are not affected by this setting.
+                                This might be in conflict with other options that affect the file
+                                mode, like fsGroup, and the result can be other mode bits set.
+                              format: int32
+                              type: integer
+                            items:
+                              description: Items is a list of downward API volume
+                                file
+                              items:
+                                description: DownwardAPIVolumeFile represents information
+                                  to create the file containing the pod field
                                 properties:
-                                  containerName:
-                                    description: 'Container name: required for volumes,
-                                      optional for env vars'
-                                    type: string
-                                  divisor:
-                                    anyOf:
-                                    - type: integer
-                                    - type: string
-                                    description: Specifies the output format of the
-                                      exposed resources, defaults to "1"
-                                    pattern: ^(\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))(([KMGTPE]i)|[numkMGTPE]|([eE](\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))))?$
-                                    x-kubernetes-int-or-string: true
-                                  resource:
-                                    description: 'Required: resource to select'
+                                  fieldRef:
+                                    description: 'Required: Selects a field of the
+                                      pod: only annotations, labels, name and namespace
+                                      are supported.'
+                                    properties:
+                                      apiVersion:
+                                        description: Version of the schema the FieldPath
+                                          is written in terms of, defaults to "v1".
+                                        type: string
+                                      fieldPath:
+                                        description: Path of the field to select in
+                                          the specified API version.
+                                        type: string
+                                    required:
+                                    - fieldPath
+                                    type: object
+                                    x-kubernetes-map-type: atomic
+                                  mode:
+                                    description: |-
+                                      Optional: mode bits used to set permissions on this file, must be an octal value
+                                      between 0000 and 0777 or a decimal value between 0 and 511.
+                                      YAML accepts both octal and decimal values, JSON requires decimal values for mode bits.
+                                      If not specified, the volume defaultMode will be used.
+                                      This might be in conflict with other options that affect the file
+                                      mode, like fsGroup, and the result can be other mode bits set.
+                                    format: int32
+                                    type: integer
+                                  path:
+                                    description: 'Required: Path is  the relative
+                                      path name of the file to be created. Must not
+                                      be absolute or contain the ''..'' path. Must
+                                      be utf-8 encoded. The first item of the relative
+                                      path must not start with ''..'''
                                     type: string
+                                  resourceFieldRef:
+                                    description: |-
+                                      Selects a resource of the container: only resources limits and requests
+                                      (limits.cpu, limits.memory, requests.cpu and requests.memory) are currently supported.
+                                    properties:
+                                      containerName:
+                                        description: 'Container name: required for
+                                          volumes, optional for env vars'
+                                        type: string
+                                      divisor:
+                                        anyOf:
+                                        - type: integer
+                                        - type: string
+                                        description: Specifies the output format of
+                                          the exposed resources, defaults to "1"
+                                        pattern: ^(\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))(([KMGTPE]i)|[numkMGTPE]|([eE](\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))))?$
+                                        x-kubernetes-int-or-string: true
+                                      resource:
+                                        description: 'Required: resource to select'
+                                        type: string
+                                    required:
+                                    - resource
+                                    type: object
+                                    x-kubernetes-map-type: atomic
                                 required:
-                                - resource
+                                - path
                                 type: object
-                                x-kubernetes-map-type: atomic
-                            required:
-                            - path
-                            type: object
-                          type: array
-                      type: object
-                    emptyDir:
-                      description: |-
-                        emptyDir represents a temporary directory that shares a pod's lifetime.
-                        More info: https://kubernetes.io/docs/concepts/storage/volumes#emptydir
-                      properties:
-                        medium:
+                              type: array
+                          type: object
+                        emptyDir:
                           description: |-
-                            medium represents what type of storage medium should back this directory.
-                            The default is "" which means to use the node's default medium.
-                            Must be an empty string (default) or Memory.
+                            emptyDir represents a temporary directory that shares a pod's lifetime.
                             More info: https://kubernetes.io/docs/concepts/storage/volumes#emptydir
-                          type: string
-                        sizeLimit:
-                          anyOf:
-                          - type: integer
-                          - type: string
+                          properties:
+                            medium:
+                              description: |-
+                                medium represents what type of storage medium should back this directory.
+                                The default is "" which means to use the node's default medium.
+                                Must be an empty string (default) or Memory.
+                                More info: https://kubernetes.io/docs/concepts/storage/volumes#emptydir
+                              type: string
+                            sizeLimit:
+                              anyOf:
+                              - type: integer
+                              - type: string
+                              description: |-
+                                sizeLimit is the total amount of local storage required for this EmptyDir volume.
+                                The size limit is also applicable for memory medium.
+                                The maximum usage on memory medium EmptyDir would be the minimum value between
+                                the SizeLimit specified here and the sum of memory limits of all containers in a pod.
+                                The default is nil which means that the limit is undefined.
+                                More info: https://kubernetes.io/docs/concepts/storage/volumes#emptydir
+                              pattern: ^(\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))(([KMGTPE]i)|[numkMGTPE]|([eE](\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))))?$
+                              x-kubernetes-int-or-string: true
+                          type: object
+                        ephemeral:
                           description: |-
-                            sizeLimit is the total amount of local storage required for this EmptyDir volume.
-                            The size limit is also applicable for memory medium.
-                            The maximum usage on memory medium EmptyDir would be the minimum value between
-                            the SizeLimit specified here and the sum of memory limits of all containers in a pod.
-                            The default is nil which means that the limit is undefined.
-                            More info: https://kubernetes.io/docs/concepts/storage/volumes#emptydir
-                          pattern: ^(\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))(([KMGTPE]i)|[numkMGTPE]|([eE](\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))))?$
-                          x-kubernetes-int-or-string: true
-                      type: object
-                    ephemeral:
-                      description: |-
-                        ephemeral represents a volume that is handled by a cluster storage driver.
-                        The volume's lifecycle is tied to the pod that defines it - it will be created before the pod starts,
-                        and deleted when the pod is removed.
+                            ephemeral represents a volume that is handled by a cluster storage driver.
+                            The volume's lifecycle is tied to the pod that defines it - it will be created before the pod starts,
+                            and deleted when the pod is removed.
 
 
-                        Use this if:
-                        a) the volume is only needed while the pod runs,
-                        b) features of normal volumes like restoring from snapshot or capacity
-                           tracking are needed,
-                        c) the storage driver is specified through a storage class, and
-                        d) the storage driver supports dynamic volume provisioning through
-                           a PersistentVolumeClaim (see EphemeralVolumeSource for more
-                           information on the connection between this volume type
-                           and PersistentVolumeClaim).
+                            Use this if:
+                            a) the volume is only needed while the pod runs,
+                            b) features of normal volumes like restoring from snapshot or capacity
+                               tracking are needed,
+                            c) the storage driver is specified through a storage class, and
+                            d) the storage driver supports dynamic volume provisioning through
+                               a PersistentVolumeClaim (see EphemeralVolumeSource for more
+                               information on the connection between this volume type
+                               and PersistentVolumeClaim).
 
 
-                        Use PersistentVolumeClaim or one of the vendor-specific
-                        APIs for volumes that persist for longer than the lifecycle
-                        of an individual pod.
+                            Use PersistentVolumeClaim or one of the vendor-specific
+                            APIs for volumes that persist for longer than the lifecycle
+                            of an individual pod.
 
 
-                        Use CSI for light-weight local ephemeral volumes if the CSI driver is meant to
-                        be used that way - see the documentation of the driver for
-                        more information.
+                            Use CSI for light-weight local ephemeral volumes if the CSI driver is meant to
+                            be used that way - see the documentation of the driver for
+                            more information.
 
 
-                        A pod can use both types of ephemeral volumes and
-                        persistent volumes at the same time.
-                      properties:
-                        volumeClaimTemplate:
-                          description: |-
-                            Will be used to create a stand-alone PVC to provision the volume.
-                            The pod in which this EphemeralVolumeSource is embedded will be the
-                            owner of the PVC, i.e. the PVC will be deleted together with the
-                            pod.  The name of the PVC will be `<pod name>-<volume name>` where
-                            `<volume name>` is the name from the `PodSpec.Volumes` array
-                            entry. Pod validation will reject the pod if the concatenated name
-                            is not valid for a PVC (for example, too long).
+                            A pod can use both types of ephemeral volumes and
+                            persistent volumes at the same time.
+                          properties:
+                            volumeClaimTemplate:
+                              description: |-
+                                Will be used to create a stand-alone PVC to provision the volume.
+                                The pod in which this EphemeralVolumeSource is embedded will be the
+                                owner of the PVC, i.e. the PVC will be deleted together with the
+                                pod.  The name of the PVC will be `<pod name>-<volume name>` where
+                                `<volume name>` is the name from the `PodSpec.Volumes` array
+                                entry. Pod validation will reject the pod if the concatenated name
+                                is not valid for a PVC (for example, too long).
 
 
-                            An existing PVC with that name that is not owned by the pod
-                            will *not* be used for the pod to avoid using an unrelated
-                            volume by mistake. Starting the pod is then blocked until
-                            the unrelated PVC is removed. If such a pre-created PVC is
-                            meant to be used by the pod, the PVC has to updated with an
-                            owner reference to the pod once the pod exists. Normally
-                            this should not be necessary, but it may be useful when
-                            manually reconstructing a broken cluster.
+                                An existing PVC with that name that is not owned by the pod
+                                will *not* be used for the pod to avoid using an unrelated
+                                volume by mistake. Starting the pod is then blocked until
+                                the unrelated PVC is removed. If such a pre-created PVC is
+                                meant to be used by the pod, the PVC has to updated with an
+                                owner reference to the pod once the pod exists. Normally
+                                this should not be necessary, but it may be useful when
+                                manually reconstructing a broken cluster.
 
 
-                            This field is read-only and no changes will be made by Kubernetes
-                            to the PVC after it has been created.
+                                This field is read-only and no changes will be made by Kubernetes
+                                to the PVC after it has been created.
 
 
-                            Required, must not be nil.
-                          properties:
-                            metadata:
-                              description: |-
-                                May contain labels and annotations that will be copied into the PVC
-                                when creating it. No other fields are allowed and will be rejected during
-                                validation.
-                              type: object
-                            spec:
-                              description: |-
-                                The specification for the PersistentVolumeClaim. The entire content is
-                                copied unchanged into the PVC that gets created from this
-                                template. The same fields as in a PersistentVolumeClaim
-                                are also valid here.
+                                Required, must not be nil.
                               properties:
-                                accessModes:
-                                  description: |-
-                                    accessModes contains the desired access modes the volume should have.
-                                    More info: https://kubernetes.io/docs/concepts/storage/persistent-volumes#access-modes-1
-                                  items:
-                                    type: string
-                                  type: array
-                                dataSource:
+                                metadata:
                                   description: |-
-                                    dataSource field can be used to specify either:
-                                    * An existing VolumeSnapshot object (snapshot.storage.k8s.io/VolumeSnapshot)
-                                    * An existing PVC (PersistentVolumeClaim)
-                                    If the provisioner or an external controller can support the specified data source,
-                                    it will create a new volume based on the contents of the specified data source.
-                                    When the AnyVolumeDataSource feature gate is enabled, dataSource contents will be copied to dataSourceRef,
-                                    and dataSourceRef contents will be copied to dataSource when dataSourceRef.namespace is not specified.
-                                    If the namespace is specified, then dataSourceRef will not be copied to dataSource.
-                                  properties:
-                                    apiGroup:
-                                      description: |-
-                                        APIGroup is the group for the resource being referenced.
-                                        If APIGroup is not specified, the specified Kind must be in the core API group.
-                                        For any other third-party types, APIGroup is required.
-                                      type: string
-                                    kind:
-                                      description: Kind is the type of resource being
-                                        referenced
-                                      type: string
-                                    name:
-                                      description: Name is the name of resource being
-                                        referenced
-                                      type: string
-                                  required:
-                                  - kind
-                                  - name
+                                    May contain labels and annotations that will be copied into the PVC
+                                    when creating it. No other fields are allowed and will be rejected during
+                                    validation.
                                   type: object
-                                  x-kubernetes-map-type: atomic
-                                dataSourceRef:
+                                spec:
                                   description: |-
-                                    dataSourceRef specifies the object from which to populate the volume with data, if a non-empty
-                                    volume is desired. This may be any object from a non-empty API group (non
-                                    core object) or a PersistentVolumeClaim object.
-                                    When this field is specified, volume binding will only succeed if the type of
-                                    the specified object matches some installed volume populator or dynamic
-                                    provisioner.
-                                    This field will replace the functionality of the dataSource field and as such
-                                    if both fields are non-empty, they must have the same value. For backwards
-                                    compatibility, when namespace isn't specified in dataSourceRef,
-                                    both fields (dataSource and dataSourceRef) will be set to the same
-                                    value automatically if one of them is empty and the other is non-empty.
-                                    When namespace is specified in dataSourceRef,
-                                    dataSource isn't set to the same value and must be empty.
-                                    There are three important differences between dataSource and dataSourceRef:
-                                    * While dataSource only allows two specific types of objects, dataSourceRef
-                                      allows any non-core object, as well as PersistentVolumeClaim objects.
-                                    * While dataSource ignores disallowed values (dropping them), dataSourceRef
-                                      preserves all values, and generates an error if a disallowed value is
-                                      specified.
-                                    * While dataSource only allows local objects, dataSourceRef allows objects
-                                      in any namespaces.
-                                    (Beta) Using this field requires the AnyVolumeDataSource feature gate to be enabled.
-                                    (Alpha) Using the namespace field of dataSourceRef requires the CrossNamespaceVolumeDataSource feature gate to be enabled.
+                                    The specification for the PersistentVolumeClaim. The entire content is
+                                    copied unchanged into the PVC that gets created from this
+                                    template. The same fields as in a PersistentVolumeClaim
+                                    are also valid here.
                                   properties:
-                                    apiGroup:
+                                    accessModes:
                                       description: |-
-                                        APIGroup is the group for the resource being referenced.
-                                        If APIGroup is not specified, the specified Kind must be in the core API group.
-                                        For any other third-party types, APIGroup is required.
-                                      type: string
-                                    kind:
-                                      description: Kind is the type of resource being
-                                        referenced
-                                      type: string
-                                    name:
-                                      description: Name is the name of resource being
-                                        referenced
-                                      type: string
-                                    namespace:
+                                        accessModes contains the desired access modes the volume should have.
+                                        More info: https://kubernetes.io/docs/concepts/storage/persistent-volumes#access-modes-1
+                                      items:
+                                        type: string
+                                      type: array
+                                    dataSource:
                                       description: |-
-                                        Namespace is the namespace of resource being referenced
-                                        Note that when a namespace is specified, a gateway.networking.k8s.io/ReferenceGrant object is required in the referent namespace to allow that namespace's owner to accept the reference. See the ReferenceGrant documentation for details.
-                                        (Alpha) This field requires the CrossNamespaceVolumeDataSource feature gate to be enabled.
-                                      type: string
-                                  required:
-                                  - kind
-                                  - name
-                                  type: object
-                                resources:
-                                  description: |-
-                                    resources represents the minimum resources the volume should have.
-                                    If RecoverVolumeExpansionFailure feature is enabled users are allowed to specify resource requirements
-                                    that are lower than previous value but must still be higher than capacity recorded in the
-                                    status field of the claim.
-                                    More info: https://kubernetes.io/docs/concepts/storage/persistent-volumes#resources
-                                  properties:
-                                    claims:
+                                        dataSource field can be used to specify either:
+                                        * An existing VolumeSnapshot object (snapshot.storage.k8s.io/VolumeSnapshot)
+                                        * An existing PVC (PersistentVolumeClaim)
+                                        If the provisioner or an external controller can support the specified data source,
+                                        it will create a new volume based on the contents of the specified data source.
+                                        When the AnyVolumeDataSource feature gate is enabled, dataSource contents will be copied to dataSourceRef,
+                                        and dataSourceRef contents will be copied to dataSource when dataSourceRef.namespace is not specified.
+                                        If the namespace is specified, then dataSourceRef will not be copied to dataSource.
+                                      properties:
+                                        apiGroup:
+                                          description: |-
+                                            APIGroup is the group for the resource being referenced.
+                                            If APIGroup is not specified, the specified Kind must be in the core API group.
+                                            For any other third-party types, APIGroup is required.
+                                          type: string
+                                        kind:
+                                          description: Kind is the type of resource
+                                            being referenced
+                                          type: string
+                                        name:
+                                          description: Name is the name of resource
+                                            being referenced
+                                          type: string
+                                      required:
+                                      - kind
+                                      - name
+                                      type: object
+                                      x-kubernetes-map-type: atomic
+                                    dataSourceRef:
                                       description: |-
-                                        Claims lists the names of resources, defined in spec.resourceClaims,
-                                        that are used by this container.
+                                        dataSourceRef specifies the object from which to populate the volume with data, if a non-empty
+                                        volume is desired. This may be any object from a non-empty API group (non
+                                        core object) or a PersistentVolumeClaim object.
+                                        When this field is specified, volume binding will only succeed if the type of
+                                        the specified object matches some installed volume populator or dynamic
+                                        provisioner.
+                                        This field will replace the functionality of the dataSource field and as such
+                                        if both fields are non-empty, they must have the same value. For backwards
+                                        compatibility, when namespace isn't specified in dataSourceRef,
+                                        both fields (dataSource and dataSourceRef) will be set to the same
+                                        value automatically if one of them is empty and the other is non-empty.
+                                        When namespace is specified in dataSourceRef,
+                                        dataSource isn't set to the same value and must be empty.
+                                        There are three important differences between dataSource and dataSourceRef:
+                                        * While dataSource only allows two specific types of objects, dataSourceRef
+                                          allows any non-core object, as well as PersistentVolumeClaim objects.
+                                        * While dataSource ignores disallowed values (dropping them), dataSourceRef
+                                          preserves all values, and generates an error if a disallowed value is
+                                          specified.
+                                        * While dataSource only allows local objects, dataSourceRef allows objects
+                                          in any namespaces.
+                                        (Beta) Using this field requires the AnyVolumeDataSource feature gate to be enabled.
+                                        (Alpha) Using the namespace field of dataSourceRef requires the CrossNamespaceVolumeDataSource feature gate to be enabled.
+                                      properties:
+                                        apiGroup:
+                                          description: |-
+                                            APIGroup is the group for the resource being referenced.
+                                            If APIGroup is not specified, the specified Kind must be in the core API group.
+                                            For any other third-party types, APIGroup is required.
+                                          type: string
+                                        kind:
+                                          description: Kind is the type of resource
+                                            being referenced
+                                          type: string
+                                        name:
+                                          description: Name is the name of resource
+                                            being referenced
+                                          type: string
+                                        namespace:
+                                          description: |-
+                                            Namespace is the namespace of resource being referenced
+                                            Note that when a namespace is specified, a gateway.networking.k8s.io/ReferenceGrant object is required in the referent namespace to allow that namespace's owner to accept the reference. See the ReferenceGrant documentation for details.
+                                            (Alpha) This field requires the CrossNamespaceVolumeDataSource feature gate to be enabled.
+                                          type: string
+                                      required:
+                                      - kind
+                                      - name
+                                      type: object
+                                    resources:
+                                      description: |-
+                                        resources represents the minimum resources the volume should have.
+                                        If RecoverVolumeExpansionFailure feature is enabled users are allowed to specify resource requirements
+                                        that are lower than previous value but must still be higher than capacity recorded in the
+                                        status field of the claim.
+                                        More info: https://kubernetes.io/docs/concepts/storage/persistent-volumes#resources
+                                      properties:
+                                        claims:
+                                          description: |-
+                                            Claims lists the names of resources, defined in spec.resourceClaims,
+                                            that are used by this container.
 
 
-                                        This is an alpha field and requires enabling the
-                                        DynamicResourceAllocation feature gate.
+                                            This is an alpha field and requires enabling the
+                                            DynamicResourceAllocation feature gate.
 
 
-                                        This field is immutable. It can only be set for containers.
-                                      items:
-                                        description: ResourceClaim references one
-                                          entry in PodSpec.ResourceClaims.
-                                        properties:
-                                          name:
+                                            This field is immutable. It can only be set for containers.
+                                          items:
+                                            description: ResourceClaim references
+                                              one entry in PodSpec.ResourceClaims.
+                                            properties:
+                                              name:
+                                                description: |-
+                                                  Name must match the name of one entry in pod.spec.resourceClaims of
+                                                  the Pod where this field is used. It makes that resource available
+                                                  inside a container.
+                                                type: string
+                                            required:
+                                            - name
+                                            type: object
+                                          type: array
+                                          x-kubernetes-list-map-keys:
+                                          - name
+                                          x-kubernetes-list-type: map
+                                        limits:
+                                          additionalProperties:
+                                            anyOf:
+                                            - type: integer
+                                            - type: string
+                                            pattern: ^(\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))(([KMGTPE]i)|[numkMGTPE]|([eE](\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))))?$
+                                            x-kubernetes-int-or-string: true
+                                          description: |-
+                                            Limits describes the maximum amount of compute resources allowed.
+                                            More info: https://kubernetes.io/docs/concepts/configuration/manage-resources-containers/
+                                          type: object
+                                        requests:
+                                          additionalProperties:
+                                            anyOf:
+                                            - type: integer
+                                            - type: string
+                                            pattern: ^(\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))(([KMGTPE]i)|[numkMGTPE]|([eE](\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))))?$
+                                            x-kubernetes-int-or-string: true
+                                          description: |-
+                                            Requests describes the minimum amount of compute resources required.
+                                            If Requests is omitted for a container, it defaults to Limits if that is explicitly specified,
+                                            otherwise to an implementation-defined value. Requests cannot exceed Limits.
+                                            More info: https://kubernetes.io/docs/concepts/configuration/manage-resources-containers/
+                                          type: object
+                                      type: object
+                                    selector:
+                                      description: selector is a label query over
+                                        volumes to consider for binding.
+                                      properties:
+                                        matchExpressions:
+                                          description: matchExpressions is a list
+                                            of label selector requirements. The requirements
+                                            are ANDed.
+                                          items:
                                             description: |-
-                                              Name must match the name of one entry in pod.spec.resourceClaims of
-                                              the Pod where this field is used. It makes that resource available
-                                              inside a container.
+                                              A label selector requirement is a selector that contains values, a key, and an operator that
+                                              relates the key and values.
+                                            properties:
+                                              key:
+                                                description: key is the label key
+                                                  that the selector applies to.
+                                                type: string
+                                              operator:
+                                                description: |-
+                                                  operator represents a key's relationship to a set of values.
+                                                  Valid operators are In, NotIn, Exists and DoesNotExist.
+                                                type: string
+                                              values:
+                                                description: |-
+                                                  values is an array of string values. If the operator is In or NotIn,
+                                                  the values array must be non-empty. If the operator is Exists or DoesNotExist,
+                                                  the values array must be empty. This array is replaced during a strategic
+                                                  merge patch.
+                                                items:
+                                                  type: string
+                                                type: array
+                                            required:
+                                            - key
+                                            - operator
+                                            type: object
+                                          type: array
+                                        matchLabels:
+                                          additionalProperties:
                                             type: string
-                                        required:
-                                        - name
-                                        type: object
-                                      type: array
-                                      x-kubernetes-list-map-keys:
-                                      - name
-                                      x-kubernetes-list-type: map
-                                    limits:
-                                      additionalProperties:
-                                        anyOf:
-                                        - type: integer
-                                        - type: string
-                                        pattern: ^(\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))(([KMGTPE]i)|[numkMGTPE]|([eE](\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))))?$
-                                        x-kubernetes-int-or-string: true
-                                      description: |-
-                                        Limits describes the maximum amount of compute resources allowed.
-                                        More info: https://kubernetes.io/docs/concepts/configuration/manage-resources-containers/
+                                          description: |-
+                                            matchLabels is a map of {key,value} pairs. A single {key,value} in the matchLabels
+                                            map is equivalent to an element of matchExpressions, whose key field is "key", the
+                                            operator is "In", and the values array contains only "value". The requirements are ANDed.
+                                          type: object
                                       type: object
-                                    requests:
-                                      additionalProperties:
-                                        anyOf:
-                                        - type: integer
-                                        - type: string
-                                        pattern: ^(\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))(([KMGTPE]i)|[numkMGTPE]|([eE](\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))))?$
-                                        x-kubernetes-int-or-string: true
+                                      x-kubernetes-map-type: atomic
+                                    storageClassName:
                                       description: |-
-                                        Requests describes the minimum amount of compute resources required.
-                                        If Requests is omitted for a container, it defaults to Limits if that is explicitly specified,
-                                        otherwise to an implementation-defined value. Requests cannot exceed Limits.
-                                        More info: https://kubernetes.io/docs/concepts/configuration/manage-resources-containers/
-                                      type: object
+                                        storageClassName is the name of the StorageClass required by the claim.
+                                        More info: https://kubernetes.io/docs/concepts/storage/persistent-volumes#class-1
+                                      type: string
+                                    volumeMode:
+                                      description: |-
+                                        volumeMode defines what type of volume is required by the claim.
+                                        Value of Filesystem is implied when not included in claim spec.
+                                      type: string
+                                    volumeName:
+                                      description: volumeName is the binding reference
+                                        to the PersistentVolume backing this claim.
+                                      type: string
                                   type: object
-                                selector:
-                                  description: selector is a label query over volumes
-                                    to consider for binding.
-                                  properties:
-                                    matchExpressions:
-                                      description: matchExpressions is a list of label
-                                        selector requirements. The requirements are
-                                        ANDed.
-                                      items:
-                                        description: |-
-                                          A label selector requirement is a selector that contains values, a key, and an operator that
-                                          relates the key and values.
-                                        properties:
-                                          key:
-                                            description: key is the label key that
-                                              the selector applies to.
-                                            type: string
-                                          operator:
-                                            description: |-
-                                              operator represents a key's relationship to a set of values.
-                                              Valid operators are In, NotIn, Exists and DoesNotExist.
-                                            type: string
-                                          values:
-                                            description: |-
-                                              values is an array of string values. If the operator is In or NotIn,
-                                              the values array must be non-empty. If the operator is Exists or DoesNotExist,
-                                              the values array must be empty. This array is replaced during a strategic
-                                              merge patch.
-                                            items:
-                                              type: string
-                                            type: array
-                                        required:
-                                        - key
-                                        - operator
-                                        type: object
-                                      type: array
-                                    matchLabels:
-                                      additionalProperties:
-                                        type: string
-                                      description: |-
-                                        matchLabels is a map of {key,value} pairs. A single {key,value} in the matchLabels
-                                        map is equivalent to an element of matchExpressions, whose key field is "key", the
-                                        operator is "In", and the values array contains only "value". The requirements are ANDed.
-                                      type: object
-                                  type: object
-                                  x-kubernetes-map-type: atomic
-                                storageClassName:
-                                  description: |-
-                                    storageClassName is the name of the StorageClass required by the claim.
-                                    More info: https://kubernetes.io/docs/concepts/storage/persistent-volumes#class-1
-                                  type: string
-                                volumeMode:
+                              required:
+                              - spec
+                              type: object
+                          type: object
+                        fc:
+                          description: fc represents a Fibre Channel resource that
+                            is attached to a kubelet's host machine and then exposed
+                            to the pod.
+                          properties:
+                            fsType:
+                              description: |-
+                                fsType is the filesystem type to mount.
+                                Must be a filesystem type supported by the host operating system.
+                                Ex. "ext4", "xfs", "ntfs". Implicitly inferred to be "ext4" if unspecified.
+                                TODO: how do we prevent errors in the filesystem from compromising the machine
+                              type: string
+                            lun:
+                              description: 'lun is Optional: FC target lun number'
+                              format: int32
+                              type: integer
+                            readOnly:
+                              description: |-
+                                readOnly is Optional: Defaults to false (read/write). ReadOnly here will force
+                                the ReadOnly setting in VolumeMounts.
+                              type: boolean
+                            targetWWNs:
+                              description: 'targetWWNs is Optional: FC target worldwide
+                                names (WWNs)'
+                              items:
+                                type: string
+                              type: array
+                            wwids:
+                              description: |-
+                                wwids Optional: FC volume world wide identifiers (wwids)
+                                Either wwids or combination of targetWWNs and lun must be set, but not both simultaneously.
+                              items:
+                                type: string
+                              type: array
+                          type: object
+                        flexVolume:
+                          description: |-
+                            flexVolume represents a generic volume resource that is
+                            provisioned/attached using an exec based plugin.
+                          properties:
+                            driver:
+                              description: driver is the name of the driver to use
+                                for this volume.
+                              type: string
+                            fsType:
+                              description: |-
+                                fsType is the filesystem type to mount.
+                                Must be a filesystem type supported by the host operating system.
+                                Ex. "ext4", "xfs", "ntfs". The default filesystem depends on FlexVolume script.
+                              type: string
+                            options:
+                              additionalProperties:
+                                type: string
+                              description: 'options is Optional: this field holds
+                                extra command options if any.'
+                              type: object
+                            readOnly:
+                              description: |-
+                                readOnly is Optional: defaults to false (read/write). ReadOnly here will force
+                                the ReadOnly setting in VolumeMounts.
+                              type: boolean
+                            secretRef:
+                              description: |-
+                                secretRef is Optional: secretRef is reference to the secret object containing
+                                sensitive information to pass to the plugin scripts. This may be
+                                empty if no secret object is specified. If the secret object
+                                contains more than one secret, all secrets are passed to the plugin
+                                scripts.
+                              properties:
+                                name:
                                   description: |-
-                                    volumeMode defines what type of volume is required by the claim.
-                                    Value of Filesystem is implied when not included in claim spec.
-                                  type: string
-                                volumeName:
-                                  description: volumeName is the binding reference
-                                    to the PersistentVolume backing this claim.
+                                    Name of the referent.
+                                    More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
+                                    TODO: Add other useful fields. apiVersion, kind, uid?
                                   type: string
                               type: object
+                              x-kubernetes-map-type: atomic
                           required:
-                          - spec
-                          type: object
-                      type: object
-                    fc:
-                      description: fc represents a Fibre Channel resource that is
-                        attached to a kubelet's host machine and then exposed to the
-                        pod.
-                      properties:
-                        fsType:
-                          description: |-
-                            fsType is the filesystem type to mount.
-                            Must be a filesystem type supported by the host operating system.
-                            Ex. "ext4", "xfs", "ntfs". Implicitly inferred to be "ext4" if unspecified.
-                            TODO: how do we prevent errors in the filesystem from compromising the machine
-                          type: string
-                        lun:
-                          description: 'lun is Optional: FC target lun number'
-                          format: int32
-                          type: integer
-                        readOnly:
-                          description: |-
-                            readOnly is Optional: Defaults to false (read/write). ReadOnly here will force
-                            the ReadOnly setting in VolumeMounts.
-                          type: boolean
-                        targetWWNs:
-                          description: 'targetWWNs is Optional: FC target worldwide
-                            names (WWNs)'
-                          items:
-                            type: string
-                          type: array
-                        wwids:
-                          description: |-
-                            wwids Optional: FC volume world wide identifiers (wwids)
-                            Either wwids or combination of targetWWNs and lun must be set, but not both simultaneously.
-                          items:
-                            type: string
-                          type: array
-                      type: object
-                    flexVolume:
-                      description: |-
-                        flexVolume represents a generic volume resource that is
-                        provisioned/attached using an exec based plugin.
-                      properties:
-                        driver:
-                          description: driver is the name of the driver to use for
-                            this volume.
-                          type: string
-                        fsType:
-                          description: |-
-                            fsType is the filesystem type to mount.
-                            Must be a filesystem type supported by the host operating system.
-                            Ex. "ext4", "xfs", "ntfs". The default filesystem depends on FlexVolume script.
-                          type: string
-                        options:
-                          additionalProperties:
-                            type: string
-                          description: 'options is Optional: this field holds extra
-                            command options if any.'
+                          - driver
                           type: object
-                        readOnly:
-                          description: |-
-                            readOnly is Optional: defaults to false (read/write). ReadOnly here will force
-                            the ReadOnly setting in VolumeMounts.
-                          type: boolean
-                        secretRef:
-                          description: |-
-                            secretRef is Optional: secretRef is reference to the secret object containing
-                            sensitive information to pass to the plugin scripts. This may be
-                            empty if no secret object is specified. If the secret object
-                            contains more than one secret, all secrets are passed to the plugin
-                            scripts.
+                        flocker:
+                          description: flocker represents a Flocker volume attached
+                            to a kubelet's host machine. This depends on the Flocker
+                            control service being running
                           properties:
-                            name:
+                            datasetName:
                               description: |-
-                                Name of the referent.
-                                More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                                TODO: Add other useful fields. apiVersion, kind, uid?
+                                datasetName is Name of the dataset stored as metadata -> name on the dataset for Flocker
+                                should be considered as deprecated
+                              type: string
+                            datasetUUID:
+                              description: datasetUUID is the UUID of the dataset.
+                                This is unique identifier of a Flocker dataset
                               type: string
                           type: object
-                          x-kubernetes-map-type: atomic
-                      required:
-                      - driver
-                      type: object
-                    flocker:
-                      description: flocker represents a Flocker volume attached to
-                        a kubelet's host machine. This depends on the Flocker control
-                        service being running
-                      properties:
-                        datasetName:
-                          description: |-
-                            datasetName is Name of the dataset stored as metadata -> name on the dataset for Flocker
-                            should be considered as deprecated
-                          type: string
-                        datasetUUID:
-                          description: datasetUUID is the UUID of the dataset. This
-                            is unique identifier of a Flocker dataset
-                          type: string
-                      type: object
-                    gcePersistentDisk:
-                      description: |-
-                        gcePersistentDisk represents a GCE Disk resource that is attached to a
-                        kubelet's host machine and then exposed to the pod.
-                        More info: https://kubernetes.io/docs/concepts/storage/volumes#gcepersistentdisk
-                      properties:
-                        fsType:
-                          description: |-
-                            fsType is filesystem type of the volume that you want to mount.
-                            Tip: Ensure that the filesystem type is supported by the host operating system.
-                            Examples: "ext4", "xfs", "ntfs". Implicitly inferred to be "ext4" if unspecified.
-                            More info: https://kubernetes.io/docs/concepts/storage/volumes#gcepersistentdisk
-                            TODO: how do we prevent errors in the filesystem from compromising the machine
-                          type: string
-                        partition:
-                          description: |-
-                            partition is the partition in the volume that you want to mount.
-                            If omitted, the default is to mount by volume name.
-                            Examples: For volume /dev/sda1, you specify the partition as "1".
-                            Similarly, the volume partition for /dev/sda is "0" (or you can leave the property empty).
-                            More info: https://kubernetes.io/docs/concepts/storage/volumes#gcepersistentdisk
-                          format: int32
-                          type: integer
-                        pdName:
-                          description: |-
-                            pdName is unique name of the PD resource in GCE. Used to identify the disk in GCE.
-                            More info: https://kubernetes.io/docs/concepts/storage/volumes#gcepersistentdisk
-                          type: string
-                        readOnly:
+                        gcePersistentDisk:
                           description: |-
-                            readOnly here will force the ReadOnly setting in VolumeMounts.
-                            Defaults to false.
+                            gcePersistentDisk represents a GCE Disk resource that is attached to a
+                            kubelet's host machine and then exposed to the pod.
                             More info: https://kubernetes.io/docs/concepts/storage/volumes#gcepersistentdisk
-                          type: boolean
-                      required:
-                      - pdName
-                      type: object
-                    gitRepo:
-                      description: |-
-                        gitRepo represents a git repository at a particular revision.
-                        DEPRECATED: GitRepo is deprecated. To provision a container with a git repo, mount an
-                        EmptyDir into an InitContainer that clones the repo using git, then mount the EmptyDir
-                        into the Pod's container.
-                      properties:
-                        directory:
-                          description: |-
-                            directory is the target directory name.
-                            Must not contain or start with '..'.  If '.' is supplied, the volume directory will be the
-                            git repository.  Otherwise, if specified, the volume will contain the git repository in
-                            the subdirectory with the given name.
-                          type: string
-                        repository:
-                          description: repository is the URL
-                          type: string
-                        revision:
-                          description: revision is the commit hash for the specified
-                            revision.
-                          type: string
-                      required:
-                      - repository
-                      type: object
-                    glusterfs:
-                      description: |-
-                        glusterfs represents a Glusterfs mount on the host that shares a pod's lifetime.
-                        More info: https://examples.k8s.io/volumes/glusterfs/README.md
-                      properties:
-                        endpoints:
-                          description: |-
-                            endpoints is the endpoint name that details Glusterfs topology.
-                            More info: https://examples.k8s.io/volumes/glusterfs/README.md#create-a-pod
-                          type: string
-                        path:
-                          description: |-
-                            path is the Glusterfs volume path.
-                            More info: https://examples.k8s.io/volumes/glusterfs/README.md#create-a-pod
-                          type: string
-                        readOnly:
+                          properties:
+                            fsType:
+                              description: |-
+                                fsType is filesystem type of the volume that you want to mount.
+                                Tip: Ensure that the filesystem type is supported by the host operating system.
+                                Examples: "ext4", "xfs", "ntfs". Implicitly inferred to be "ext4" if unspecified.
+                                More info: https://kubernetes.io/docs/concepts/storage/volumes#gcepersistentdisk
+                                TODO: how do we prevent errors in the filesystem from compromising the machine
+                              type: string
+                            partition:
+                              description: |-
+                                partition is the partition in the volume that you want to mount.
+                                If omitted, the default is to mount by volume name.
+                                Examples: For volume /dev/sda1, you specify the partition as "1".
+                                Similarly, the volume partition for /dev/sda is "0" (or you can leave the property empty).
+                                More info: https://kubernetes.io/docs/concepts/storage/volumes#gcepersistentdisk
+                              format: int32
+                              type: integer
+                            pdName:
+                              description: |-
+                                pdName is unique name of the PD resource in GCE. Used to identify the disk in GCE.
+                                More info: https://kubernetes.io/docs/concepts/storage/volumes#gcepersistentdisk
+                              type: string
+                            readOnly:
+                              description: |-
+                                readOnly here will force the ReadOnly setting in VolumeMounts.
+                                Defaults to false.
+                                More info: https://kubernetes.io/docs/concepts/storage/volumes#gcepersistentdisk
+                              type: boolean
+                          required:
+                          - pdName
+                          type: object
+                        gitRepo:
                           description: |-
-                            readOnly here will force the Glusterfs volume to be mounted with read-only permissions.
-                            Defaults to false.
-                            More info: https://examples.k8s.io/volumes/glusterfs/README.md#create-a-pod
-                          type: boolean
-                      required:
-                      - endpoints
-                      - path
-                      type: object
-                    hostPath:
-                      description: |-
-                        hostPath represents a pre-existing file or directory on the host
-                        machine that is directly exposed to the container. This is generally
-                        used for system agents or other privileged things that are allowed
-                        to see the host machine. Most containers will NOT need this.
-                        More info: https://kubernetes.io/docs/concepts/storage/volumes#hostpath
-                        ---
-                        TODO(jonesdl) We need to restrict who can use host directory mounts and who can/can not
-                        mount host directories as read/write.
-                      properties:
-                        path:
+                            gitRepo represents a git repository at a particular revision.
+                            DEPRECATED: GitRepo is deprecated. To provision a container with a git repo, mount an
+                            EmptyDir into an InitContainer that clones the repo using git, then mount the EmptyDir
+                            into the Pod's container.
+                          properties:
+                            directory:
+                              description: |-
+                                directory is the target directory name.
+                                Must not contain or start with '..'.  If '.' is supplied, the volume directory will be the
+                                git repository.  Otherwise, if specified, the volume will contain the git repository in
+                                the subdirectory with the given name.
+                              type: string
+                            repository:
+                              description: repository is the URL
+                              type: string
+                            revision:
+                              description: revision is the commit hash for the specified
+                                revision.
+                              type: string
+                          required:
+                          - repository
+                          type: object
+                        glusterfs:
                           description: |-
-                            path of the directory on the host.
-                            If the path is a symlink, it will follow the link to the real path.
-                            More info: https://kubernetes.io/docs/concepts/storage/volumes#hostpath
-                          type: string
-                        type:
+                            glusterfs represents a Glusterfs mount on the host that shares a pod's lifetime.
+                            More info: https://examples.k8s.io/volumes/glusterfs/README.md
+                          properties:
+                            endpoints:
+                              description: |-
+                                endpoints is the endpoint name that details Glusterfs topology.
+                                More info: https://examples.k8s.io/volumes/glusterfs/README.md#create-a-pod
+                              type: string
+                            path:
+                              description: |-
+                                path is the Glusterfs volume path.
+                                More info: https://examples.k8s.io/volumes/glusterfs/README.md#create-a-pod
+                              type: string
+                            readOnly:
+                              description: |-
+                                readOnly here will force the Glusterfs volume to be mounted with read-only permissions.
+                                Defaults to false.
+                                More info: https://examples.k8s.io/volumes/glusterfs/README.md#create-a-pod
+                              type: boolean
+                          required:
+                          - endpoints
+                          - path
+                          type: object
+                        hostPath:
                           description: |-
-                            type for HostPath Volume
-                            Defaults to ""
+                            hostPath represents a pre-existing file or directory on the host
+                            machine that is directly exposed to the container. This is generally
+                            used for system agents or other privileged things that are allowed
+                            to see the host machine. Most containers will NOT need this.
                             More info: https://kubernetes.io/docs/concepts/storage/volumes#hostpath
-                          type: string
-                      required:
-                      - path
-                      type: object
-                    iscsi:
-                      description: |-
-                        iscsi represents an ISCSI Disk resource that is attached to a
-                        kubelet's host machine and then exposed to the pod.
-                        More info: https://examples.k8s.io/volumes/iscsi/README.md
-                      properties:
-                        chapAuthDiscovery:
-                          description: chapAuthDiscovery defines whether support iSCSI
-                            Discovery CHAP authentication
-                          type: boolean
-                        chapAuthSession:
-                          description: chapAuthSession defines whether support iSCSI
-                            Session CHAP authentication
-                          type: boolean
-                        fsType:
-                          description: |-
-                            fsType is the filesystem type of the volume that you want to mount.
-                            Tip: Ensure that the filesystem type is supported by the host operating system.
-                            Examples: "ext4", "xfs", "ntfs". Implicitly inferred to be "ext4" if unspecified.
-                            More info: https://kubernetes.io/docs/concepts/storage/volumes#iscsi
-                            TODO: how do we prevent errors in the filesystem from compromising the machine
-                          type: string
-                        initiatorName:
-                          description: |-
-                            initiatorName is the custom iSCSI Initiator Name.
-                            If initiatorName is specified with iscsiInterface simultaneously, new iSCSI interface
-                            <target portal>:<volume name> will be created for the connection.
-                          type: string
-                        iqn:
-                          description: iqn is the target iSCSI Qualified Name.
-                          type: string
-                        iscsiInterface:
-                          description: |-
-                            iscsiInterface is the interface Name that uses an iSCSI transport.
-                            Defaults to 'default' (tcp).
-                          type: string
-                        lun:
-                          description: lun represents iSCSI Target Lun number.
-                          format: int32
-                          type: integer
-                        portals:
-                          description: |-
-                            portals is the iSCSI Target Portal List. The portal is either an IP or ip_addr:port if the port
-                            is other than default (typically TCP ports 860 and 3260).
-                          items:
-                            type: string
-                          type: array
-                        readOnly:
-                          description: |-
-                            readOnly here will force the ReadOnly setting in VolumeMounts.
-                            Defaults to false.
-                          type: boolean
-                        secretRef:
-                          description: secretRef is the CHAP Secret for iSCSI target
-                            and initiator authentication
+                            ---
+                            TODO(jonesdl) We need to restrict who can use host directory mounts and who can/can not
+                            mount host directories as read/write.
                           properties:
-                            name:
+                            path:
                               description: |-
-                                Name of the referent.
-                                More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                                TODO: Add other useful fields. apiVersion, kind, uid?
+                                path of the directory on the host.
+                                If the path is a symlink, it will follow the link to the real path.
+                                More info: https://kubernetes.io/docs/concepts/storage/volumes#hostpath
+                              type: string
+                            type:
+                              description: |-
+                                type for HostPath Volume
+                                Defaults to ""
+                                More info: https://kubernetes.io/docs/concepts/storage/volumes#hostpath
                               type: string
+                          required:
+                          - path
                           type: object
-                          x-kubernetes-map-type: atomic
-                        targetPortal:
+                        iscsi:
                           description: |-
-                            targetPortal is iSCSI Target Portal. The Portal is either an IP or ip_addr:port if the port
-                            is other than default (typically TCP ports 860 and 3260).
-                          type: string
-                      required:
-                      - iqn
-                      - lun
-                      - targetPortal
-                      type: object
-                    name:
-                      description: |-
-                        name of the volume.
-                        Must be a DNS_LABEL and unique within the pod.
-                        More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                      type: string
-                    nfs:
-                      description: |-
-                        nfs represents an NFS mount on the host that shares a pod's lifetime
-                        More info: https://kubernetes.io/docs/concepts/storage/volumes#nfs
-                      properties:
-                        path:
+                            iscsi represents an ISCSI Disk resource that is attached to a
+                            kubelet's host machine and then exposed to the pod.
+                            More info: https://examples.k8s.io/volumes/iscsi/README.md
+                          properties:
+                            chapAuthDiscovery:
+                              description: chapAuthDiscovery defines whether support
+                                iSCSI Discovery CHAP authentication
+                              type: boolean
+                            chapAuthSession:
+                              description: chapAuthSession defines whether support
+                                iSCSI Session CHAP authentication
+                              type: boolean
+                            fsType:
+                              description: |-
+                                fsType is the filesystem type of the volume that you want to mount.
+                                Tip: Ensure that the filesystem type is supported by the host operating system.
+                                Examples: "ext4", "xfs", "ntfs". Implicitly inferred to be "ext4" if unspecified.
+                                More info: https://kubernetes.io/docs/concepts/storage/volumes#iscsi
+                                TODO: how do we prevent errors in the filesystem from compromising the machine
+                              type: string
+                            initiatorName:
+                              description: |-
+                                initiatorName is the custom iSCSI Initiator Name.
+                                If initiatorName is specified with iscsiInterface simultaneously, new iSCSI interface
+                                <target portal>:<volume name> will be created for the connection.
+                              type: string
+                            iqn:
+                              description: iqn is the target iSCSI Qualified Name.
+                              type: string
+                            iscsiInterface:
+                              description: |-
+                                iscsiInterface is the interface Name that uses an iSCSI transport.
+                                Defaults to 'default' (tcp).
+                              type: string
+                            lun:
+                              description: lun represents iSCSI Target Lun number.
+                              format: int32
+                              type: integer
+                            portals:
+                              description: |-
+                                portals is the iSCSI Target Portal List. The portal is either an IP or ip_addr:port if the port
+                                is other than default (typically TCP ports 860 and 3260).
+                              items:
+                                type: string
+                              type: array
+                            readOnly:
+                              description: |-
+                                readOnly here will force the ReadOnly setting in VolumeMounts.
+                                Defaults to false.
+                              type: boolean
+                            secretRef:
+                              description: secretRef is the CHAP Secret for iSCSI
+                                target and initiator authentication
+                              properties:
+                                name:
+                                  description: |-
+                                    Name of the referent.
+                                    More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
+                                    TODO: Add other useful fields. apiVersion, kind, uid?
+                                  type: string
+                              type: object
+                              x-kubernetes-map-type: atomic
+                            targetPortal:
+                              description: |-
+                                targetPortal is iSCSI Target Portal. The Portal is either an IP or ip_addr:port if the port
+                                is other than default (typically TCP ports 860 and 3260).
+                              type: string
+                          required:
+                          - iqn
+                          - lun
+                          - targetPortal
+                          type: object
+                        name:
                           description: |-
-                            path that is exported by the NFS server.
-                            More info: https://kubernetes.io/docs/concepts/storage/volumes#nfs
+                            name of the volume.
+                            Must be a DNS_LABEL and unique within the pod.
+                            More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
                           type: string
-                        readOnly:
+                        nfs:
                           description: |-
-                            readOnly here will force the NFS export to be mounted with read-only permissions.
-                            Defaults to false.
+                            nfs represents an NFS mount on the host that shares a pod's lifetime
                             More info: https://kubernetes.io/docs/concepts/storage/volumes#nfs
-                          type: boolean
-                        server:
-                          description: |-
-                            server is the hostname or IP address of the NFS server.
-                            More info: https://kubernetes.io/docs/concepts/storage/volumes#nfs
-                          type: string
-                      required:
-                      - path
-                      - server
-                      type: object
-                    persistentVolumeClaim:
-                      description: |-
-                        persistentVolumeClaimVolumeSource represents a reference to a
-                        PersistentVolumeClaim in the same namespace.
-                        More info: https://kubernetes.io/docs/concepts/storage/persistent-volumes#persistentvolumeclaims
-                      properties:
-                        claimName:
+                          properties:
+                            path:
+                              description: |-
+                                path that is exported by the NFS server.
+                                More info: https://kubernetes.io/docs/concepts/storage/volumes#nfs
+                              type: string
+                            readOnly:
+                              description: |-
+                                readOnly here will force the NFS export to be mounted with read-only permissions.
+                                Defaults to false.
+                                More info: https://kubernetes.io/docs/concepts/storage/volumes#nfs
+                              type: boolean
+                            server:
+                              description: |-
+                                server is the hostname or IP address of the NFS server.
+                                More info: https://kubernetes.io/docs/concepts/storage/volumes#nfs
+                              type: string
+                          required:
+                          - path
+                          - server
+                          type: object
+                        persistentVolumeClaim:
                           description: |-
-                            claimName is the name of a PersistentVolumeClaim in the same namespace as the pod using this volume.
+                            persistentVolumeClaimVolumeSource represents a reference to a
+                            PersistentVolumeClaim in the same namespace.
                             More info: https://kubernetes.io/docs/concepts/storage/persistent-volumes#persistentvolumeclaims
-                          type: string
-                        readOnly:
-                          description: |-
-                            readOnly Will force the ReadOnly setting in VolumeMounts.
-                            Default false.
-                          type: boolean
-                      required:
-                      - claimName
-                      type: object
-                    photonPersistentDisk:
-                      description: photonPersistentDisk represents a PhotonController
-                        persistent disk attached and mounted on kubelets host machine
-                      properties:
-                        fsType:
-                          description: |-
-                            fsType is the filesystem type to mount.
-                            Must be a filesystem type supported by the host operating system.
-                            Ex. "ext4", "xfs", "ntfs". Implicitly inferred to be "ext4" if unspecified.
-                          type: string
-                        pdID:
-                          description: pdID is the ID that identifies Photon Controller
-                            persistent disk
-                          type: string
-                      required:
-                      - pdID
-                      type: object
-                    portworxVolume:
-                      description: portworxVolume represents a portworx volume attached
-                        and mounted on kubelets host machine
-                      properties:
-                        fsType:
-                          description: |-
-                            fSType represents the filesystem type to mount
-                            Must be a filesystem type supported by the host operating system.
-                            Ex. "ext4", "xfs". Implicitly inferred to be "ext4" if unspecified.
-                          type: string
-                        readOnly:
-                          description: |-
-                            readOnly defaults to false (read/write). ReadOnly here will force
-                            the ReadOnly setting in VolumeMounts.
-                          type: boolean
-                        volumeID:
-                          description: volumeID uniquely identifies a Portworx volume
-                          type: string
-                      required:
-                      - volumeID
-                      type: object
-                    projected:
-                      description: projected items for all in one resources secrets,
-                        configmaps, and downward API
-                      properties:
-                        defaultMode:
-                          description: |-
-                            defaultMode are the mode bits used to set permissions on created files by default.
-                            Must be an octal value between 0000 and 0777 or a decimal value between 0 and 511.
-                            YAML accepts both octal and decimal values, JSON requires decimal values for mode bits.
-                            Directories within the path are not affected by this setting.
-                            This might be in conflict with other options that affect the file
-                            mode, like fsGroup, and the result can be other mode bits set.
-                          format: int32
-                          type: integer
-                        sources:
-                          description: sources is the list of volume projections
-                          items:
-                            description: Projection that may be projected along with
-                              other supported volume types
-                            properties:
-                              configMap:
-                                description: configMap information about the configMap
-                                  data to project
-                                properties:
-                                  items:
-                                    description: |-
-                                      items if unspecified, each key-value pair in the Data field of the referenced
-                                      ConfigMap will be projected into the volume as a file whose name is the
-                                      key and content is the value. If specified, the listed keys will be
-                                      projected into the specified paths, and unlisted keys will not be
-                                      present. If a key is specified which is not present in the ConfigMap,
-                                      the volume setup will error unless it is marked optional. Paths must be
-                                      relative and may not contain the '..' path or start with '..'.
-                                    items:
-                                      description: Maps a string key to a path within
-                                        a volume.
-                                      properties:
-                                        key:
-                                          description: key is the key to project.
-                                          type: string
-                                        mode:
-                                          description: |-
-                                            mode is Optional: mode bits used to set permissions on this file.
-                                            Must be an octal value between 0000 and 0777 or a decimal value between 0 and 511.
-                                            YAML accepts both octal and decimal values, JSON requires decimal values for mode bits.
-                                            If not specified, the volume defaultMode will be used.
-                                            This might be in conflict with other options that affect the file
-                                            mode, like fsGroup, and the result can be other mode bits set.
-                                          format: int32
-                                          type: integer
-                                        path:
-                                          description: |-
-                                            path is the relative path of the file to map the key to.
-                                            May not be an absolute path.
-                                            May not contain the path element '..'.
-                                            May not start with the string '..'.
-                                          type: string
-                                      required:
-                                      - key
-                                      - path
-                                      type: object
-                                    type: array
-                                  name:
-                                    description: |-
-                                      Name of the referent.
-                                      More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                                      TODO: Add other useful fields. apiVersion, kind, uid?
-                                    type: string
-                                  optional:
-                                    description: optional specify whether the ConfigMap
-                                      or its keys must be defined
-                                    type: boolean
-                                type: object
-                                x-kubernetes-map-type: atomic
-                              downwardAPI:
-                                description: downwardAPI information about the downwardAPI
-                                  data to project
+                          properties:
+                            claimName:
+                              description: |-
+                                claimName is the name of a PersistentVolumeClaim in the same namespace as the pod using this volume.
+                                More info: https://kubernetes.io/docs/concepts/storage/persistent-volumes#persistentvolumeclaims
+                              type: string
+                            readOnly:
+                              description: |-
+                                readOnly Will force the ReadOnly setting in VolumeMounts.
+                                Default false.
+                              type: boolean
+                          required:
+                          - claimName
+                          type: object
+                        photonPersistentDisk:
+                          description: photonPersistentDisk represents a PhotonController
+                            persistent disk attached and mounted on kubelets host
+                            machine
+                          properties:
+                            fsType:
+                              description: |-
+                                fsType is the filesystem type to mount.
+                                Must be a filesystem type supported by the host operating system.
+                                Ex. "ext4", "xfs", "ntfs". Implicitly inferred to be "ext4" if unspecified.
+                              type: string
+                            pdID:
+                              description: pdID is the ID that identifies Photon Controller
+                                persistent disk
+                              type: string
+                          required:
+                          - pdID
+                          type: object
+                        portworxVolume:
+                          description: portworxVolume represents a portworx volume
+                            attached and mounted on kubelets host machine
+                          properties:
+                            fsType:
+                              description: |-
+                                fSType represents the filesystem type to mount
+                                Must be a filesystem type supported by the host operating system.
+                                Ex. "ext4", "xfs". Implicitly inferred to be "ext4" if unspecified.
+                              type: string
+                            readOnly:
+                              description: |-
+                                readOnly defaults to false (read/write). ReadOnly here will force
+                                the ReadOnly setting in VolumeMounts.
+                              type: boolean
+                            volumeID:
+                              description: volumeID uniquely identifies a Portworx
+                                volume
+                              type: string
+                          required:
+                          - volumeID
+                          type: object
+                        projected:
+                          description: projected items for all in one resources secrets,
+                            configmaps, and downward API
+                          properties:
+                            defaultMode:
+                              description: |-
+                                defaultMode are the mode bits used to set permissions on created files by default.
+                                Must be an octal value between 0000 and 0777 or a decimal value between 0 and 511.
+                                YAML accepts both octal and decimal values, JSON requires decimal values for mode bits.
+                                Directories within the path are not affected by this setting.
+                                This might be in conflict with other options that affect the file
+                                mode, like fsGroup, and the result can be other mode bits set.
+                              format: int32
+                              type: integer
+                            sources:
+                              description: sources is the list of volume projections
+                              items:
+                                description: Projection that may be projected along
+                                  with other supported volume types
                                 properties:
-                                  items:
-                                    description: Items is a list of DownwardAPIVolume
-                                      file
-                                    items:
-                                      description: DownwardAPIVolumeFile represents
-                                        information to create the file containing
-                                        the pod field
-                                      properties:
-                                        fieldRef:
-                                          description: 'Required: Selects a field
-                                            of the pod: only annotations, labels,
-                                            name and namespace are supported.'
+                                  configMap:
+                                    description: configMap information about the configMap
+                                      data to project
+                                    properties:
+                                      items:
+                                        description: |-
+                                          items if unspecified, each key-value pair in the Data field of the referenced
+                                          ConfigMap will be projected into the volume as a file whose name is the
+                                          key and content is the value. If specified, the listed keys will be
+                                          projected into the specified paths, and unlisted keys will not be
+                                          present. If a key is specified which is not present in the ConfigMap,
+                                          the volume setup will error unless it is marked optional. Paths must be
+                                          relative and may not contain the '..' path or start with '..'.
+                                        items:
+                                          description: Maps a string key to a path
+                                            within a volume.
+                                          properties:
+                                            key:
+                                              description: key is the key to project.
+                                              type: string
+                                            mode:
+                                              description: |-
+                                                mode is Optional: mode bits used to set permissions on this file.
+                                                Must be an octal value between 0000 and 0777 or a decimal value between 0 and 511.
+                                                YAML accepts both octal and decimal values, JSON requires decimal values for mode bits.
+                                                If not specified, the volume defaultMode will be used.
+                                                This might be in conflict with other options that affect the file
+                                                mode, like fsGroup, and the result can be other mode bits set.
+                                              format: int32
+                                              type: integer
+                                            path:
+                                              description: |-
+                                                path is the relative path of the file to map the key to.
+                                                May not be an absolute path.
+                                                May not contain the path element '..'.
+                                                May not start with the string '..'.
+                                              type: string
+                                          required:
+                                          - key
+                                          - path
+                                          type: object
+                                        type: array
+                                      name:
+                                        description: |-
+                                          Name of the referent.
+                                          More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
+                                          TODO: Add other useful fields. apiVersion, kind, uid?
+                                        type: string
+                                      optional:
+                                        description: optional specify whether the
+                                          ConfigMap or its keys must be defined
+                                        type: boolean
+                                    type: object
+                                    x-kubernetes-map-type: atomic
+                                  downwardAPI:
+                                    description: downwardAPI information about the
+                                      downwardAPI data to project
+                                    properties:
+                                      items:
+                                        description: Items is a list of DownwardAPIVolume
+                                          file
+                                        items:
+                                          description: DownwardAPIVolumeFile represents
+                                            information to create the file containing
+                                            the pod field
                                           properties:
-                                            apiVersion:
-                                              description: Version of the schema the
-                                                FieldPath is written in terms of,
-                                                defaults to "v1".
-                                              type: string
-                                            fieldPath:
-                                              description: Path of the field to select
-                                                in the specified API version.
+                                            fieldRef:
+                                              description: 'Required: Selects a field
+                                                of the pod: only annotations, labels,
+                                                name and namespace are supported.'
+                                              properties:
+                                                apiVersion:
+                                                  description: Version of the schema
+                                                    the FieldPath is written in terms
+                                                    of, defaults to "v1".
+                                                  type: string
+                                                fieldPath:
+                                                  description: Path of the field to
+                                                    select in the specified API version.
+                                                  type: string
+                                              required:
+                                              - fieldPath
+                                              type: object
+                                              x-kubernetes-map-type: atomic
+                                            mode:
+                                              description: |-
+                                                Optional: mode bits used to set permissions on this file, must be an octal value
+                                                between 0000 and 0777 or a decimal value between 0 and 511.
+                                                YAML accepts both octal and decimal values, JSON requires decimal values for mode bits.
+                                                If not specified, the volume defaultMode will be used.
+                                                This might be in conflict with other options that affect the file
+                                                mode, like fsGroup, and the result can be other mode bits set.
+                                              format: int32
+                                              type: integer
+                                            path:
+                                              description: 'Required: Path is  the
+                                                relative path name of the file to
+                                                be created. Must not be absolute or
+                                                contain the ''..'' path. Must be utf-8
+                                                encoded. The first item of the relative
+                                                path must not start with ''..'''
                                               type: string
+                                            resourceFieldRef:
+                                              description: |-
+                                                Selects a resource of the container: only resources limits and requests
+                                                (limits.cpu, limits.memory, requests.cpu and requests.memory) are currently supported.
+                                              properties:
+                                                containerName:
+                                                  description: 'Container name: required
+                                                    for volumes, optional for env
+                                                    vars'
+                                                  type: string
+                                                divisor:
+                                                  anyOf:
+                                                  - type: integer
+                                                  - type: string
+                                                  description: Specifies the output
+                                                    format of the exposed resources,
+                                                    defaults to "1"
+                                                  pattern: ^(\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))(([KMGTPE]i)|[numkMGTPE]|([eE](\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))))?$
+                                                  x-kubernetes-int-or-string: true
+                                                resource:
+                                                  description: 'Required: resource
+                                                    to select'
+                                                  type: string
+                                              required:
+                                              - resource
+                                              type: object
+                                              x-kubernetes-map-type: atomic
                                           required:
-                                          - fieldPath
+                                          - path
                                           type: object
-                                          x-kubernetes-map-type: atomic
-                                        mode:
-                                          description: |-
-                                            Optional: mode bits used to set permissions on this file, must be an octal value
-                                            between 0000 and 0777 or a decimal value between 0 and 511.
-                                            YAML accepts both octal and decimal values, JSON requires decimal values for mode bits.
-                                            If not specified, the volume defaultMode will be used.
-                                            This might be in conflict with other options that affect the file
-                                            mode, like fsGroup, and the result can be other mode bits set.
-                                          format: int32
-                                          type: integer
-                                        path:
-                                          description: 'Required: Path is  the relative
-                                            path name of the file to be created. Must
-                                            not be absolute or contain the ''..''
-                                            path. Must be utf-8 encoded. The first
-                                            item of the relative path must not start
-                                            with ''..'''
-                                          type: string
-                                        resourceFieldRef:
-                                          description: |-
-                                            Selects a resource of the container: only resources limits and requests
-                                            (limits.cpu, limits.memory, requests.cpu and requests.memory) are currently supported.
+                                        type: array
+                                    type: object
+                                  secret:
+                                    description: secret information about the secret
+                                      data to project
+                                    properties:
+                                      items:
+                                        description: |-
+                                          items if unspecified, each key-value pair in the Data field of the referenced
+                                          Secret will be projected into the volume as a file whose name is the
+                                          key and content is the value. If specified, the listed keys will be
+                                          projected into the specified paths, and unlisted keys will not be
+                                          present. If a key is specified which is not present in the Secret,
+                                          the volume setup will error unless it is marked optional. Paths must be
+                                          relative and may not contain the '..' path or start with '..'.
+                                        items:
+                                          description: Maps a string key to a path
+                                            within a volume.
                                           properties:
-                                            containerName:
-                                              description: 'Container name: required
-                                                for volumes, optional for env vars'
+                                            key:
+                                              description: key is the key to project.
                                               type: string
-                                            divisor:
-                                              anyOf:
-                                              - type: integer
-                                              - type: string
-                                              description: Specifies the output format
-                                                of the exposed resources, defaults
-                                                to "1"
-                                              pattern: ^(\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))(([KMGTPE]i)|[numkMGTPE]|([eE](\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))))?$
-                                              x-kubernetes-int-or-string: true
-                                            resource:
-                                              description: 'Required: resource to
-                                                select'
+                                            mode:
+                                              description: |-
+                                                mode is Optional: mode bits used to set permissions on this file.
+                                                Must be an octal value between 0000 and 0777 or a decimal value between 0 and 511.
+                                                YAML accepts both octal and decimal values, JSON requires decimal values for mode bits.
+                                                If not specified, the volume defaultMode will be used.
+                                                This might be in conflict with other options that affect the file
+                                                mode, like fsGroup, and the result can be other mode bits set.
+                                              format: int32
+                                              type: integer
+                                            path:
+                                              description: |-
+                                                path is the relative path of the file to map the key to.
+                                                May not be an absolute path.
+                                                May not contain the path element '..'.
+                                                May not start with the string '..'.
                                               type: string
                                           required:
-                                          - resource
+                                          - key
+                                          - path
                                           type: object
-                                          x-kubernetes-map-type: atomic
-                                      required:
-                                      - path
-                                      type: object
-                                    type: array
-                                type: object
-                              secret:
-                                description: secret information about the secret data
-                                  to project
-                                properties:
-                                  items:
-                                    description: |-
-                                      items if unspecified, each key-value pair in the Data field of the referenced
-                                      Secret will be projected into the volume as a file whose name is the
-                                      key and content is the value. If specified, the listed keys will be
-                                      projected into the specified paths, and unlisted keys will not be
-                                      present. If a key is specified which is not present in the Secret,
-                                      the volume setup will error unless it is marked optional. Paths must be
-                                      relative and may not contain the '..' path or start with '..'.
-                                    items:
-                                      description: Maps a string key to a path within
-                                        a volume.
-                                      properties:
-                                        key:
-                                          description: key is the key to project.
-                                          type: string
-                                        mode:
-                                          description: |-
-                                            mode is Optional: mode bits used to set permissions on this file.
-                                            Must be an octal value between 0000 and 0777 or a decimal value between 0 and 511.
-                                            YAML accepts both octal and decimal values, JSON requires decimal values for mode bits.
-                                            If not specified, the volume defaultMode will be used.
-                                            This might be in conflict with other options that affect the file
-                                            mode, like fsGroup, and the result can be other mode bits set.
-                                          format: int32
-                                          type: integer
-                                        path:
-                                          description: |-
-                                            path is the relative path of the file to map the key to.
-                                            May not be an absolute path.
-                                            May not contain the path element '..'.
-                                            May not start with the string '..'.
-                                          type: string
-                                      required:
-                                      - key
-                                      - path
-                                      type: object
-                                    type: array
-                                  name:
-                                    description: |-
-                                      Name of the referent.
-                                      More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                                      TODO: Add other useful fields. apiVersion, kind, uid?
-                                    type: string
-                                  optional:
-                                    description: optional field specify whether the
-                                      Secret or its key must be defined
-                                    type: boolean
+                                        type: array
+                                      name:
+                                        description: |-
+                                          Name of the referent.
+                                          More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
+                                          TODO: Add other useful fields. apiVersion, kind, uid?
+                                        type: string
+                                      optional:
+                                        description: optional field specify whether
+                                          the Secret or its key must be defined
+                                        type: boolean
+                                    type: object
+                                    x-kubernetes-map-type: atomic
+                                  serviceAccountToken:
+                                    description: serviceAccountToken is information
+                                      about the serviceAccountToken data to project
+                                    properties:
+                                      audience:
+                                        description: |-
+                                          audience is the intended audience of the token. A recipient of a token
+                                          must identify itself with an identifier specified in the audience of the
+                                          token, and otherwise should reject the token. The audience defaults to the
+                                          identifier of the apiserver.
+                                        type: string
+                                      expirationSeconds:
+                                        description: |-
+                                          expirationSeconds is the requested duration of validity of the service
+                                          account token. As the token approaches expiration, the kubelet volume
+                                          plugin will proactively rotate the service account token. The kubelet will
+                                          start trying to rotate the token if the token is older than 80 percent of
+                                          its time to live or if the token is older than 24 hours.Defaults to 1 hour
+                                          and must be at least 10 minutes.
+                                        format: int64
+                                        type: integer
+                                      path:
+                                        description: |-
+                                          path is the path relative to the mount point of the file to project the
+                                          token into.
+                                        type: string
+                                    required:
+                                    - path
+                                    type: object
                                 type: object
-                                x-kubernetes-map-type: atomic
-                              serviceAccountToken:
-                                description: serviceAccountToken is information about
-                                  the serviceAccountToken data to project
+                              type: array
+                          type: object
+                        quobyte:
+                          description: quobyte represents a Quobyte mount on the host
+                            that shares a pod's lifetime
+                          properties:
+                            group:
+                              description: |-
+                                group to map volume access to
+                                Default is no group
+                              type: string
+                            readOnly:
+                              description: |-
+                                readOnly here will force the Quobyte volume to be mounted with read-only permissions.
+                                Defaults to false.
+                              type: boolean
+                            registry:
+                              description: |-
+                                registry represents a single or multiple Quobyte Registry services
+                                specified as a string as host:port pair (multiple entries are separated with commas)
+                                which acts as the central registry for volumes
+                              type: string
+                            tenant:
+                              description: |-
+                                tenant owning the given Quobyte volume in the Backend
+                                Used with dynamically provisioned Quobyte volumes, value is set by the plugin
+                              type: string
+                            user:
+                              description: |-
+                                user to map volume access to
+                                Defaults to serivceaccount user
+                              type: string
+                            volume:
+                              description: volume is a string that references an already
+                                created Quobyte volume by name.
+                              type: string
+                          required:
+                          - registry
+                          - volume
+                          type: object
+                        rbd:
+                          description: |-
+                            rbd represents a Rados Block Device mount on the host that shares a pod's lifetime.
+                            More info: https://examples.k8s.io/volumes/rbd/README.md
+                          properties:
+                            fsType:
+                              description: |-
+                                fsType is the filesystem type of the volume that you want to mount.
+                                Tip: Ensure that the filesystem type is supported by the host operating system.
+                                Examples: "ext4", "xfs", "ntfs". Implicitly inferred to be "ext4" if unspecified.
+                                More info: https://kubernetes.io/docs/concepts/storage/volumes#rbd
+                                TODO: how do we prevent errors in the filesystem from compromising the machine
+                              type: string
+                            image:
+                              description: |-
+                                image is the rados image name.
+                                More info: https://examples.k8s.io/volumes/rbd/README.md#how-to-use-it
+                              type: string
+                            keyring:
+                              description: |-
+                                keyring is the path to key ring for RBDUser.
+                                Default is /etc/ceph/keyring.
+                                More info: https://examples.k8s.io/volumes/rbd/README.md#how-to-use-it
+                              type: string
+                            monitors:
+                              description: |-
+                                monitors is a collection of Ceph monitors.
+                                More info: https://examples.k8s.io/volumes/rbd/README.md#how-to-use-it
+                              items:
+                                type: string
+                              type: array
+                            pool:
+                              description: |-
+                                pool is the rados pool name.
+                                Default is rbd.
+                                More info: https://examples.k8s.io/volumes/rbd/README.md#how-to-use-it
+                              type: string
+                            readOnly:
+                              description: |-
+                                readOnly here will force the ReadOnly setting in VolumeMounts.
+                                Defaults to false.
+                                More info: https://examples.k8s.io/volumes/rbd/README.md#how-to-use-it
+                              type: boolean
+                            secretRef:
+                              description: |-
+                                secretRef is name of the authentication secret for RBDUser. If provided
+                                overrides keyring.
+                                Default is nil.
+                                More info: https://examples.k8s.io/volumes/rbd/README.md#how-to-use-it
+                              properties:
+                                name:
+                                  description: |-
+                                    Name of the referent.
+                                    More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
+                                    TODO: Add other useful fields. apiVersion, kind, uid?
+                                  type: string
+                              type: object
+                              x-kubernetes-map-type: atomic
+                            user:
+                              description: |-
+                                user is the rados user name.
+                                Default is admin.
+                                More info: https://examples.k8s.io/volumes/rbd/README.md#how-to-use-it
+                              type: string
+                          required:
+                          - image
+                          - monitors
+                          type: object
+                        scaleIO:
+                          description: scaleIO represents a ScaleIO persistent volume
+                            attached and mounted on Kubernetes nodes.
+                          properties:
+                            fsType:
+                              description: |-
+                                fsType is the filesystem type to mount.
+                                Must be a filesystem type supported by the host operating system.
+                                Ex. "ext4", "xfs", "ntfs".
+                                Default is "xfs".
+                              type: string
+                            gateway:
+                              description: gateway is the host address of the ScaleIO
+                                API Gateway.
+                              type: string
+                            protectionDomain:
+                              description: protectionDomain is the name of the ScaleIO
+                                Protection Domain for the configured storage.
+                              type: string
+                            readOnly:
+                              description: |-
+                                readOnly Defaults to false (read/write). ReadOnly here will force
+                                the ReadOnly setting in VolumeMounts.
+                              type: boolean
+                            secretRef:
+                              description: |-
+                                secretRef references to the secret for ScaleIO user and other
+                                sensitive information. If this is not provided, Login operation will fail.
+                              properties:
+                                name:
+                                  description: |-
+                                    Name of the referent.
+                                    More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
+                                    TODO: Add other useful fields. apiVersion, kind, uid?
+                                  type: string
+                              type: object
+                              x-kubernetes-map-type: atomic
+                            sslEnabled:
+                              description: sslEnabled Flag enable/disable SSL communication
+                                with Gateway, default false
+                              type: boolean
+                            storageMode:
+                              description: |-
+                                storageMode indicates whether the storage for a volume should be ThickProvisioned or ThinProvisioned.
+                                Default is ThinProvisioned.
+                              type: string
+                            storagePool:
+                              description: storagePool is the ScaleIO Storage Pool
+                                associated with the protection domain.
+                              type: string
+                            system:
+                              description: system is the name of the storage system
+                                as configured in ScaleIO.
+                              type: string
+                            volumeName:
+                              description: |-
+                                volumeName is the name of a volume already created in the ScaleIO system
+                                that is associated with this volume source.
+                              type: string
+                          required:
+                          - gateway
+                          - secretRef
+                          - system
+                          type: object
+                        secret:
+                          description: |-
+                            secret represents a secret that should populate this volume.
+                            More info: https://kubernetes.io/docs/concepts/storage/volumes#secret
+                          properties:
+                            defaultMode:
+                              description: |-
+                                defaultMode is Optional: mode bits used to set permissions on created files by default.
+                                Must be an octal value between 0000 and 0777 or a decimal value between 0 and 511.
+                                YAML accepts both octal and decimal values, JSON requires decimal values
+                                for mode bits. Defaults to 0644.
+                                Directories within the path are not affected by this setting.
+                                This might be in conflict with other options that affect the file
+                                mode, like fsGroup, and the result can be other mode bits set.
+                              format: int32
+                              type: integer
+                            items:
+                              description: |-
+                                items If unspecified, each key-value pair in the Data field of the referenced
+                                Secret will be projected into the volume as a file whose name is the
+                                key and content is the value. If specified, the listed keys will be
+                                projected into the specified paths, and unlisted keys will not be
+                                present. If a key is specified which is not present in the Secret,
+                                the volume setup will error unless it is marked optional. Paths must be
+                                relative and may not contain the '..' path or start with '..'.
+                              items:
+                                description: Maps a string key to a path within a
+                                  volume.
                                 properties:
-                                  audience:
-                                    description: |-
-                                      audience is the intended audience of the token. A recipient of a token
-                                      must identify itself with an identifier specified in the audience of the
-                                      token, and otherwise should reject the token. The audience defaults to the
-                                      identifier of the apiserver.
+                                  key:
+                                    description: key is the key to project.
                                     type: string
-                                  expirationSeconds:
+                                  mode:
                                     description: |-
-                                      expirationSeconds is the requested duration of validity of the service
-                                      account token. As the token approaches expiration, the kubelet volume
-                                      plugin will proactively rotate the service account token. The kubelet will
-                                      start trying to rotate the token if the token is older than 80 percent of
-                                      its time to live or if the token is older than 24 hours.Defaults to 1 hour
-                                      and must be at least 10 minutes.
-                                    format: int64
+                                      mode is Optional: mode bits used to set permissions on this file.
+                                      Must be an octal value between 0000 and 0777 or a decimal value between 0 and 511.
+                                      YAML accepts both octal and decimal values, JSON requires decimal values for mode bits.
+                                      If not specified, the volume defaultMode will be used.
+                                      This might be in conflict with other options that affect the file
+                                      mode, like fsGroup, and the result can be other mode bits set.
+                                    format: int32
                                     type: integer
                                   path:
                                     description: |-
-                                      path is the path relative to the mount point of the file to project the
-                                      token into.
+                                      path is the relative path of the file to map the key to.
+                                      May not be an absolute path.
+                                      May not contain the path element '..'.
+                                      May not start with the string '..'.
                                     type: string
                                 required:
+                                - key
                                 - path
                                 type: object
-                            type: object
-                          type: array
-                      type: object
-                    quobyte:
-                      description: quobyte represents a Quobyte mount on the host
-                        that shares a pod's lifetime
-                      properties:
-                        group:
-                          description: |-
-                            group to map volume access to
-                            Default is no group
-                          type: string
-                        readOnly:
-                          description: |-
-                            readOnly here will force the Quobyte volume to be mounted with read-only permissions.
-                            Defaults to false.
-                          type: boolean
-                        registry:
-                          description: |-
-                            registry represents a single or multiple Quobyte Registry services
-                            specified as a string as host:port pair (multiple entries are separated with commas)
-                            which acts as the central registry for volumes
-                          type: string
-                        tenant:
-                          description: |-
-                            tenant owning the given Quobyte volume in the Backend
-                            Used with dynamically provisioned Quobyte volumes, value is set by the plugin
-                          type: string
-                        user:
-                          description: |-
-                            user to map volume access to
-                            Defaults to serivceaccount user
-                          type: string
-                        volume:
-                          description: volume is a string that references an already
-                            created Quobyte volume by name.
-                          type: string
-                      required:
-                      - registry
-                      - volume
-                      type: object
-                    rbd:
-                      description: |-
-                        rbd represents a Rados Block Device mount on the host that shares a pod's lifetime.
-                        More info: https://examples.k8s.io/volumes/rbd/README.md
-                      properties:
-                        fsType:
-                          description: |-
-                            fsType is the filesystem type of the volume that you want to mount.
-                            Tip: Ensure that the filesystem type is supported by the host operating system.
-                            Examples: "ext4", "xfs", "ntfs". Implicitly inferred to be "ext4" if unspecified.
-                            More info: https://kubernetes.io/docs/concepts/storage/volumes#rbd
-                            TODO: how do we prevent errors in the filesystem from compromising the machine
-                          type: string
-                        image:
-                          description: |-
-                            image is the rados image name.
-                            More info: https://examples.k8s.io/volumes/rbd/README.md#how-to-use-it
-                          type: string
-                        keyring:
-                          description: |-
-                            keyring is the path to key ring for RBDUser.
-                            Default is /etc/ceph/keyring.
-                            More info: https://examples.k8s.io/volumes/rbd/README.md#how-to-use-it
-                          type: string
-                        monitors:
-                          description: |-
-                            monitors is a collection of Ceph monitors.
-                            More info: https://examples.k8s.io/volumes/rbd/README.md#how-to-use-it
-                          items:
-                            type: string
-                          type: array
-                        pool:
-                          description: |-
-                            pool is the rados pool name.
-                            Default is rbd.
-                            More info: https://examples.k8s.io/volumes/rbd/README.md#how-to-use-it
-                          type: string
-                        readOnly:
-                          description: |-
-                            readOnly here will force the ReadOnly setting in VolumeMounts.
-                            Defaults to false.
-                            More info: https://examples.k8s.io/volumes/rbd/README.md#how-to-use-it
-                          type: boolean
-                        secretRef:
-                          description: |-
-                            secretRef is name of the authentication secret for RBDUser. If provided
-                            overrides keyring.
-                            Default is nil.
-                            More info: https://examples.k8s.io/volumes/rbd/README.md#how-to-use-it
-                          properties:
-                            name:
+                              type: array
+                            optional:
+                              description: optional field specify whether the Secret
+                                or its keys must be defined
+                              type: boolean
+                            secretName:
                               description: |-
-                                Name of the referent.
-                                More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                                TODO: Add other useful fields. apiVersion, kind, uid?
+                                secretName is the name of the secret in the pod's namespace to use.
+                                More info: https://kubernetes.io/docs/concepts/storage/volumes#secret
                               type: string
                           type: object
-                          x-kubernetes-map-type: atomic
-                        user:
-                          description: |-
-                            user is the rados user name.
-                            Default is admin.
-                            More info: https://examples.k8s.io/volumes/rbd/README.md#how-to-use-it
-                          type: string
-                      required:
-                      - image
-                      - monitors
-                      type: object
-                    scaleIO:
-                      description: scaleIO represents a ScaleIO persistent volume
-                        attached and mounted on Kubernetes nodes.
-                      properties:
-                        fsType:
-                          description: |-
-                            fsType is the filesystem type to mount.
-                            Must be a filesystem type supported by the host operating system.
-                            Ex. "ext4", "xfs", "ntfs".
-                            Default is "xfs".
-                          type: string
-                        gateway:
-                          description: gateway is the host address of the ScaleIO
-                            API Gateway.
-                          type: string
-                        protectionDomain:
-                          description: protectionDomain is the name of the ScaleIO
-                            Protection Domain for the configured storage.
-                          type: string
-                        readOnly:
-                          description: |-
-                            readOnly Defaults to false (read/write). ReadOnly here will force
-                            the ReadOnly setting in VolumeMounts.
-                          type: boolean
-                        secretRef:
-                          description: |-
-                            secretRef references to the secret for ScaleIO user and other
-                            sensitive information. If this is not provided, Login operation will fail.
+                        storageos:
+                          description: storageOS represents a StorageOS volume attached
+                            and mounted on Kubernetes nodes.
                           properties:
-                            name:
+                            fsType:
                               description: |-
-                                Name of the referent.
-                                More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                                TODO: Add other useful fields. apiVersion, kind, uid?
+                                fsType is the filesystem type to mount.
+                                Must be a filesystem type supported by the host operating system.
+                                Ex. "ext4", "xfs", "ntfs". Implicitly inferred to be "ext4" if unspecified.
+                              type: string
+                            readOnly:
+                              description: |-
+                                readOnly defaults to false (read/write). ReadOnly here will force
+                                the ReadOnly setting in VolumeMounts.
+                              type: boolean
+                            secretRef:
+                              description: |-
+                                secretRef specifies the secret to use for obtaining the StorageOS API
+                                credentials.  If not specified, default values will be attempted.
+                              properties:
+                                name:
+                                  description: |-
+                                    Name of the referent.
+                                    More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
+                                    TODO: Add other useful fields. apiVersion, kind, uid?
+                                  type: string
+                              type: object
+                              x-kubernetes-map-type: atomic
+                            volumeName:
+                              description: |-
+                                volumeName is the human-readable name of the StorageOS volume.  Volume
+                                names are only unique within a namespace.
+                              type: string
+                            volumeNamespace:
+                              description: |-
+                                volumeNamespace specifies the scope of the volume within StorageOS.  If no
+                                namespace is specified then the Pod's namespace will be used.  This allows the
+                                Kubernetes name scoping to be mirrored within StorageOS for tighter integration.
+                                Set VolumeName to any name to override the default behaviour.
+                                Set to "default" if you are not using namespaces within StorageOS.
+                                Namespaces that do not pre-exist within StorageOS will be created.
                               type: string
                           type: object
-                          x-kubernetes-map-type: atomic
-                        sslEnabled:
-                          description: sslEnabled Flag enable/disable SSL communication
-                            with Gateway, default false
-                          type: boolean
-                        storageMode:
-                          description: |-
-                            storageMode indicates whether the storage for a volume should be ThickProvisioned or ThinProvisioned.
-                            Default is ThinProvisioned.
-                          type: string
-                        storagePool:
-                          description: storagePool is the ScaleIO Storage Pool associated
-                            with the protection domain.
-                          type: string
-                        system:
-                          description: system is the name of the storage system as
-                            configured in ScaleIO.
-                          type: string
-                        volumeName:
-                          description: |-
-                            volumeName is the name of a volume already created in the ScaleIO system
-                            that is associated with this volume source.
-                          type: string
-                      required:
-                      - gateway
-                      - secretRef
-                      - system
-                      type: object
-                    secret:
-                      description: |-
-                        secret represents a secret that should populate this volume.
-                        More info: https://kubernetes.io/docs/concepts/storage/volumes#secret
-                      properties:
-                        defaultMode:
-                          description: |-
-                            defaultMode is Optional: mode bits used to set permissions on created files by default.
-                            Must be an octal value between 0000 and 0777 or a decimal value between 0 and 511.
-                            YAML accepts both octal and decimal values, JSON requires decimal values
-                            for mode bits. Defaults to 0644.
-                            Directories within the path are not affected by this setting.
-                            This might be in conflict with other options that affect the file
-                            mode, like fsGroup, and the result can be other mode bits set.
-                          format: int32
-                          type: integer
-                        items:
-                          description: |-
-                            items If unspecified, each key-value pair in the Data field of the referenced
-                            Secret will be projected into the volume as a file whose name is the
-                            key and content is the value. If specified, the listed keys will be
-                            projected into the specified paths, and unlisted keys will not be
-                            present. If a key is specified which is not present in the Secret,
-                            the volume setup will error unless it is marked optional. Paths must be
-                            relative and may not contain the '..' path or start with '..'.
-                          items:
-                            description: Maps a string key to a path within a volume.
-                            properties:
-                              key:
-                                description: key is the key to project.
-                                type: string
-                              mode:
-                                description: |-
-                                  mode is Optional: mode bits used to set permissions on this file.
-                                  Must be an octal value between 0000 and 0777 or a decimal value between 0 and 511.
-                                  YAML accepts both octal and decimal values, JSON requires decimal values for mode bits.
-                                  If not specified, the volume defaultMode will be used.
-                                  This might be in conflict with other options that affect the file
-                                  mode, like fsGroup, and the result can be other mode bits set.
-                                format: int32
-                                type: integer
-                              path:
-                                description: |-
-                                  path is the relative path of the file to map the key to.
-                                  May not be an absolute path.
-                                  May not contain the path element '..'.
-                                  May not start with the string '..'.
-                                type: string
-                            required:
-                            - key
-                            - path
-                            type: object
-                          type: array
-                        optional:
-                          description: optional field specify whether the Secret or
-                            its keys must be defined
-                          type: boolean
-                        secretName:
-                          description: |-
-                            secretName is the name of the secret in the pod's namespace to use.
-                            More info: https://kubernetes.io/docs/concepts/storage/volumes#secret
-                          type: string
-                      type: object
-                    storageos:
-                      description: storageOS represents a StorageOS volume attached
-                        and mounted on Kubernetes nodes.
-                      properties:
-                        fsType:
-                          description: |-
-                            fsType is the filesystem type to mount.
-                            Must be a filesystem type supported by the host operating system.
-                            Ex. "ext4", "xfs", "ntfs". Implicitly inferred to be "ext4" if unspecified.
-                          type: string
-                        readOnly:
-                          description: |-
-                            readOnly defaults to false (read/write). ReadOnly here will force
-                            the ReadOnly setting in VolumeMounts.
-                          type: boolean
-                        secretRef:
-                          description: |-
-                            secretRef specifies the secret to use for obtaining the StorageOS API
-                            credentials.  If not specified, default values will be attempted.
+                        vsphereVolume:
+                          description: vsphereVolume represents a vSphere volume attached
+                            and mounted on kubelets host machine
                           properties:
-                            name:
+                            fsType:
                               description: |-
-                                Name of the referent.
-                                More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                                TODO: Add other useful fields. apiVersion, kind, uid?
+                                fsType is filesystem type to mount.
+                                Must be a filesystem type supported by the host operating system.
+                                Ex. "ext4", "xfs", "ntfs". Implicitly inferred to be "ext4" if unspecified.
+                              type: string
+                            storagePolicyID:
+                              description: storagePolicyID is the storage Policy Based
+                                Management (SPBM) profile ID associated with the StoragePolicyName.
+                              type: string
+                            storagePolicyName:
+                              description: storagePolicyName is the storage Policy
+                                Based Management (SPBM) profile name.
                               type: string
+                            volumePath:
+                              description: volumePath is the path that identifies
+                                vSphere volume vmdk
+                              type: string
+                          required:
+                          - volumePath
                           type: object
-                          x-kubernetes-map-type: atomic
-                        volumeName:
-                          description: |-
-                            volumeName is the human-readable name of the StorageOS volume.  Volume
-                            names are only unique within a namespace.
-                          type: string
-                        volumeNamespace:
-                          description: |-
-                            volumeNamespace specifies the scope of the volume within StorageOS.  If no
-                            namespace is specified then the Pod's namespace will be used.  This allows the
-                            Kubernetes name scoping to be mirrored within StorageOS for tighter integration.
-                            Set VolumeName to any name to override the default behaviour.
-                            Set to "default" if you are not using namespaces within StorageOS.
-                            Namespaces that do not pre-exist within StorageOS will be created.
-                          type: string
-                      type: object
-                    vsphereVolume:
-                      description: vsphereVolume represents a vSphere volume attached
-                        and mounted on kubelets host machine
-                      properties:
-                        fsType:
-                          description: |-
-                            fsType is filesystem type to mount.
-                            Must be a filesystem type supported by the host operating system.
-                            Ex. "ext4", "xfs", "ntfs". Implicitly inferred to be "ext4" if unspecified.
-                          type: string
-                        storagePolicyID:
-                          description: storagePolicyID is the storage Policy Based
-                            Management (SPBM) profile ID associated with the StoragePolicyName.
-                          type: string
-                        storagePolicyName:
-                          description: storagePolicyName is the storage Policy Based
-                            Management (SPBM) profile name.
-                          type: string
-                        volumePath:
-                          description: volumePath is the path that identifies vSphere
-                            volume vmdk
-                          type: string
                       required:
-                      - volumePath
+                      - name
                       type: object
-                  required:
-                  - name
-                  type: object
-                type: array
+                    type: array
+                  workingDir:
+                    default: /home/devbox/project
+                    type: string
+                type: object
+              image:
+                type: string
               network:
                 properties:
                   extraPorts:
@@ -2656,6 +2803,10 @@ spec:
                 required:
                 - type
                 type: object
+              nodeSelector:
+                additionalProperties:
+                  type: string
+                type: object
               resource:
                 additionalProperties:
                   anyOf:
@@ -2663,16 +2814,10 @@ spec:
                   - type: string
                   pattern: ^(\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))(([KMGTPE]i)|[numkMGTPE]|([eE](\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))))?$
                   x-kubernetes-int-or-string: true
+                description: ResourceList is a set of (resource name, quantity) pairs.
                 type: object
-              runtimeRef:
-                properties:
-                  name:
-                    type: string
-                  namespace:
-                    type: string
-                required:
-                - name
-                type: object
+              runtimeClassName:
+                type: string
               squash:
                 default: false
                 type: boolean
@@ -2681,6 +2826,8 @@ spec:
                 - Running
                 - Stopped
                 type: string
+              templateID:
+                type: string
               tolerations:
                 items:
                   description: |-
@@ -2719,11 +2866,10 @@ spec:
                       type: string
                   type: object
                 type: array
-              workingDir:
-                type: string
             required:
+            - config
+            - image
             - resource
-            - runtimeRef
             - state
             type: object
           status:
diff --git a/controllers/devbox/config/crd/bases/devbox.sealos.io_runtimeclasses.yaml b/controllers/devbox/config/crd/bases/devbox.sealos.io_runtimeclasses.yaml
deleted file mode 100644
index 29513a0b9b83..000000000000
--- a/controllers/devbox/config/crd/bases/devbox.sealos.io_runtimeclasses.yaml
+++ /dev/null
@@ -1,77 +0,0 @@
-# Copyright © 2024 sealos.
-#
-# 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.
-
----
-apiVersion: apiextensions.k8s.io/v1
-kind: CustomResourceDefinition
-metadata:
-  annotations:
-    controller-gen.kubebuilder.io/version: v0.14.0
-  name: runtimeclasses.devbox.sealos.io
-spec:
-  group: devbox.sealos.io
-  names:
-    kind: RuntimeClass
-    listKind: RuntimeClassList
-    plural: runtimeclasses
-    singular: runtimeclass
-  scope: Namespaced
-  versions:
-  - name: v1alpha1
-    schema:
-      openAPIV3Schema:
-        description: RuntimeClass is the Schema for the runtimeclasses API
-        properties:
-          apiVersion:
-            description: |-
-              APIVersion defines the versioned schema of this representation of an object.
-              Servers should convert recognized schemas to the latest internal value, and
-              may reject unrecognized values.
-              More info: https://git.k8s.io/community/contributors/devel/sig-architecture/api-conventions.md#resources
-            type: string
-          kind:
-            description: |-
-              Kind is a string value representing the REST resource this object represents.
-              Servers may infer this from the endpoint the client submits requests to.
-              Cannot be updated.
-              In CamelCase.
-              More info: https://git.k8s.io/community/contributors/devel/sig-architecture/api-conventions.md#types-kinds
-            type: string
-          metadata:
-            type: object
-          spec:
-            description: RuntimeClassSpec defines the desired state of RuntimeClass
-            properties:
-              description:
-                type: string
-              kind:
-                enum:
-                - OS
-                - Language
-                - Framework
-                type: string
-              title:
-                type: string
-            required:
-            - kind
-            - title
-            type: object
-          status:
-            description: RuntimeClassStatus defines the observed state of RuntimeClass
-            type: object
-        type: object
-    served: true
-    storage: true
-    subresources:
-      status: {}
diff --git a/controllers/devbox/config/crd/bases/devbox.sealos.io_runtimes.yaml b/controllers/devbox/config/crd/bases/devbox.sealos.io_runtimes.yaml
deleted file mode 100644
index 00ed31895c33..000000000000
--- a/controllers/devbox/config/crd/bases/devbox.sealos.io_runtimes.yaml
+++ /dev/null
@@ -1,2040 +0,0 @@
-# Copyright © 2024 sealos.
-#
-# 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.
-
----
-apiVersion: apiextensions.k8s.io/v1
-kind: CustomResourceDefinition
-metadata:
-  annotations:
-    controller-gen.kubebuilder.io/version: v0.14.0
-  name: runtimes.devbox.sealos.io
-spec:
-  group: devbox.sealos.io
-  names:
-    kind: Runtime
-    listKind: RuntimeList
-    plural: runtimes
-    singular: runtime
-  scope: Namespaced
-  versions:
-  - additionalPrinterColumns:
-    - jsonPath: .spec.classRef
-      name: Class
-      type: string
-    - jsonPath: .spec.version
-      name: Version
-      type: string
-    - jsonPath: .spec.runtimeVersion
-      name: RuntimeVersion
-      type: string
-    - jsonPath: .spec.state
-      name: State
-      type: string
-    name: v1alpha1
-    schema:
-      openAPIV3Schema:
-        description: Runtime is the Schema for the runtimes API
-        properties:
-          apiVersion:
-            description: |-
-              APIVersion defines the versioned schema of this representation of an object.
-              Servers should convert recognized schemas to the latest internal value, and
-              may reject unrecognized values.
-              More info: https://git.k8s.io/community/contributors/devel/sig-architecture/api-conventions.md#resources
-            type: string
-          kind:
-            description: |-
-              Kind is a string value representing the REST resource this object represents.
-              Servers may infer this from the endpoint the client submits requests to.
-              Cannot be updated.
-              In CamelCase.
-              More info: https://git.k8s.io/community/contributors/devel/sig-architecture/api-conventions.md#types-kinds
-            type: string
-          metadata:
-            type: object
-          spec:
-            description: RuntimeSpec defines the desired state of Runtime
-            properties:
-              category:
-                items:
-                  type: string
-                type: array
-              classRef:
-                type: string
-              components:
-                items:
-                  properties:
-                    name:
-                      type: string
-                    version:
-                      type: string
-                  required:
-                  - name
-                  - version
-                  type: object
-                type: array
-              config:
-                properties:
-                  annotations:
-                    additionalProperties:
-                      type: string
-                    type: object
-                  appPorts:
-                    default:
-                    - name: devbox-app-port
-                      port: 8080
-                      protocol: TCP
-                    items:
-                      description: ServicePort contains information on service's port.
-                      properties:
-                        appProtocol:
-                          description: |-
-                            The application protocol for this port.
-                            This is used as a hint for implementations to offer richer behavior for protocols that they understand.
-                            This field follows standard Kubernetes label syntax.
-                            Valid values are either:
-
-
-                            * Un-prefixed protocol names - reserved for IANA standard service names (as per
-                            RFC-6335 and https://www.iana.org/assignments/service-names).
-
-
-                            * Kubernetes-defined prefixed names:
-                              * 'kubernetes.io/h2c' - HTTP/2 over cleartext as described in https://www.rfc-editor.org/rfc/rfc7540
-                              * 'kubernetes.io/ws'  - WebSocket over cleartext as described in https://www.rfc-editor.org/rfc/rfc6455
-                              * 'kubernetes.io/wss' - WebSocket over TLS as described in https://www.rfc-editor.org/rfc/rfc6455
-
-
-                            * Other protocols should use implementation-defined prefixed names such as
-                            mycompany.com/my-custom-protocol.
-                          type: string
-                        name:
-                          description: |-
-                            The name of this port within the service. This must be a DNS_LABEL.
-                            All ports within a ServiceSpec must have unique names. When considering
-                            the endpoints for a Service, this must match the 'name' field in the
-                            EndpointPort.
-                            Optional if only one ServicePort is defined on this service.
-                          type: string
-                        nodePort:
-                          description: |-
-                            The port on each node on which this service is exposed when type is
-                            NodePort or LoadBalancer.  Usually assigned by the system. If a value is
-                            specified, in-range, and not in use it will be used, otherwise the
-                            operation will fail.  If not specified, a port will be allocated if this
-                            Service requires one.  If this field is specified when creating a
-                            Service which does not need it, creation will fail. This field will be
-                            wiped when updating a Service to no longer need it (e.g. changing type
-                            from NodePort to ClusterIP).
-                            More info: https://kubernetes.io/docs/concepts/services-networking/service/#type-nodeport
-                          format: int32
-                          type: integer
-                        port:
-                          description: The port that will be exposed by this service.
-                          format: int32
-                          type: integer
-                        protocol:
-                          default: TCP
-                          description: |-
-                            The IP protocol for this port. Supports "TCP", "UDP", and "SCTP".
-                            Default is TCP.
-                          type: string
-                        targetPort:
-                          anyOf:
-                          - type: integer
-                          - type: string
-                          description: |-
-                            Number or name of the port to access on the pods targeted by the service.
-                            Number must be in the range 1 to 65535. Name must be an IANA_SVC_NAME.
-                            If this is a string, it will be looked up as a named port in the
-                            target Pod's container ports. If this is not specified, the value
-                            of the 'port' field is used (an identity map).
-                            This field is ignored for services with clusterIP=None, and should be
-                            omitted or set equal to the 'port' field.
-                            More info: https://kubernetes.io/docs/concepts/services-networking/service/#defining-a-service
-                          x-kubernetes-int-or-string: true
-                      required:
-                      - port
-                      type: object
-                    type: array
-                  args:
-                    description: kubebuilder:validation:Optional
-                    items:
-                      type: string
-                    type: array
-                  command:
-                    items:
-                      type: string
-                    type: array
-                  env:
-                    items:
-                      description: EnvVar represents an environment variable present
-                        in a Container.
-                      properties:
-                        name:
-                          description: Name of the environment variable. Must be a
-                            C_IDENTIFIER.
-                          type: string
-                        value:
-                          description: |-
-                            Variable references $(VAR_NAME) are expanded
-                            using the previously defined environment variables in the container and
-                            any service environment variables. If a variable cannot be resolved,
-                            the reference in the input string will be unchanged. Double $$ are reduced
-                            to a single $, which allows for escaping the $(VAR_NAME) syntax: i.e.
-                            "$$(VAR_NAME)" will produce the string literal "$(VAR_NAME)".
-                            Escaped references will never be expanded, regardless of whether the variable
-                            exists or not.
-                            Defaults to "".
-                          type: string
-                        valueFrom:
-                          description: Source for the environment variable's value.
-                            Cannot be used if value is not empty.
-                          properties:
-                            configMapKeyRef:
-                              description: Selects a key of a ConfigMap.
-                              properties:
-                                key:
-                                  description: The key to select.
-                                  type: string
-                                name:
-                                  description: |-
-                                    Name of the referent.
-                                    More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                                    TODO: Add other useful fields. apiVersion, kind, uid?
-                                  type: string
-                                optional:
-                                  description: Specify whether the ConfigMap or its
-                                    key must be defined
-                                  type: boolean
-                              required:
-                              - key
-                              type: object
-                              x-kubernetes-map-type: atomic
-                            fieldRef:
-                              description: |-
-                                Selects a field of the pod: supports metadata.name, metadata.namespace, `metadata.labels['<KEY>']`, `metadata.annotations['<KEY>']`,
-                                spec.nodeName, spec.serviceAccountName, status.hostIP, status.podIP, status.podIPs.
-                              properties:
-                                apiVersion:
-                                  description: Version of the schema the FieldPath
-                                    is written in terms of, defaults to "v1".
-                                  type: string
-                                fieldPath:
-                                  description: Path of the field to select in the
-                                    specified API version.
-                                  type: string
-                              required:
-                              - fieldPath
-                              type: object
-                              x-kubernetes-map-type: atomic
-                            resourceFieldRef:
-                              description: |-
-                                Selects a resource of the container: only resources limits and requests
-                                (limits.cpu, limits.memory, limits.ephemeral-storage, requests.cpu, requests.memory and requests.ephemeral-storage) are currently supported.
-                              properties:
-                                containerName:
-                                  description: 'Container name: required for volumes,
-                                    optional for env vars'
-                                  type: string
-                                divisor:
-                                  anyOf:
-                                  - type: integer
-                                  - type: string
-                                  description: Specifies the output format of the
-                                    exposed resources, defaults to "1"
-                                  pattern: ^(\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))(([KMGTPE]i)|[numkMGTPE]|([eE](\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))))?$
-                                  x-kubernetes-int-or-string: true
-                                resource:
-                                  description: 'Required: resource to select'
-                                  type: string
-                              required:
-                              - resource
-                              type: object
-                              x-kubernetes-map-type: atomic
-                            secretKeyRef:
-                              description: Selects a key of a secret in the pod's
-                                namespace
-                              properties:
-                                key:
-                                  description: The key of the secret to select from.  Must
-                                    be a valid secret key.
-                                  type: string
-                                name:
-                                  description: |-
-                                    Name of the referent.
-                                    More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                                    TODO: Add other useful fields. apiVersion, kind, uid?
-                                  type: string
-                                optional:
-                                  description: Specify whether the Secret or its key
-                                    must be defined
-                                  type: boolean
-                              required:
-                              - key
-                              type: object
-                              x-kubernetes-map-type: atomic
-                          type: object
-                      required:
-                      - name
-                      type: object
-                    type: array
-                  image:
-                    type: string
-                  labels:
-                    additionalProperties:
-                      type: string
-                    type: object
-                  ports:
-                    default:
-                    - containerPort: 22
-                      name: devbox-ssh-port
-                      protocol: TCP
-                    description: 'TODO: in v1alpha2 api we need fix the port and app
-                      port into one field and create a new type for it.'
-                    items:
-                      description: ContainerPort represents a network port in a single
-                        container.
-                      properties:
-                        containerPort:
-                          description: |-
-                            Number of port to expose on the pod's IP address.
-                            This must be a valid port number, 0 < x < 65536.
-                          format: int32
-                          type: integer
-                        hostIP:
-                          description: What host IP to bind the external port to.
-                          type: string
-                        hostPort:
-                          description: |-
-                            Number of port to expose on the host.
-                            If specified, this must be a valid port number, 0 < x < 65536.
-                            If HostNetwork is specified, this must match ContainerPort.
-                            Most containers do not need this.
-                          format: int32
-                          type: integer
-                        name:
-                          description: |-
-                            If specified, this must be an IANA_SVC_NAME and unique within the pod. Each
-                            named port in a pod must have a unique name. Name for the port that can be
-                            referred to by services.
-                          type: string
-                        protocol:
-                          default: TCP
-                          description: |-
-                            Protocol for port. Must be UDP, TCP, or SCTP.
-                            Defaults to "TCP".
-                          type: string
-                      required:
-                      - containerPort
-                      type: object
-                    type: array
-                  releaseArgs:
-                    default:
-                    - /home/sealos/project/entrypoint.sh
-                    items:
-                      type: string
-                    type: array
-                  releaseCommand:
-                    default:
-                    - /bin/bash
-                    - -c
-                    items:
-                      type: string
-                    type: array
-                  user:
-                    default: sealos
-                    type: string
-                  volumeMounts:
-                    items:
-                      description: VolumeMount describes a mounting of a Volume within
-                        a container.
-                      properties:
-                        mountPath:
-                          description: |-
-                            Path within the container at which the volume should be mounted.  Must
-                            not contain ':'.
-                          type: string
-                        mountPropagation:
-                          description: |-
-                            mountPropagation determines how mounts are propagated from the host
-                            to container and the other way around.
-                            When not set, MountPropagationNone is used.
-                            This field is beta in 1.10.
-                          type: string
-                        name:
-                          description: This must match the Name of a Volume.
-                          type: string
-                        readOnly:
-                          description: |-
-                            Mounted read-only if true, read-write otherwise (false or unspecified).
-                            Defaults to false.
-                          type: boolean
-                        subPath:
-                          description: |-
-                            Path within the volume from which the container's volume should be mounted.
-                            Defaults to "" (volume's root).
-                          type: string
-                        subPathExpr:
-                          description: |-
-                            Expanded path within the volume from which the container's volume should be mounted.
-                            Behaves similarly to SubPath but environment variable references $(VAR_NAME) are expanded using the container's environment.
-                            Defaults to "" (volume's root).
-                            SubPathExpr and SubPath are mutually exclusive.
-                          type: string
-                      required:
-                      - mountPath
-                      - name
-                      type: object
-                    type: array
-                  volumes:
-                    items:
-                      description: Volume represents a named volume in a pod that
-                        may be accessed by any container in the pod.
-                      properties:
-                        awsElasticBlockStore:
-                          description: |-
-                            awsElasticBlockStore represents an AWS Disk resource that is attached to a
-                            kubelet's host machine and then exposed to the pod.
-                            More info: https://kubernetes.io/docs/concepts/storage/volumes#awselasticblockstore
-                          properties:
-                            fsType:
-                              description: |-
-                                fsType is the filesystem type of the volume that you want to mount.
-                                Tip: Ensure that the filesystem type is supported by the host operating system.
-                                Examples: "ext4", "xfs", "ntfs". Implicitly inferred to be "ext4" if unspecified.
-                                More info: https://kubernetes.io/docs/concepts/storage/volumes#awselasticblockstore
-                                TODO: how do we prevent errors in the filesystem from compromising the machine
-                              type: string
-                            partition:
-                              description: |-
-                                partition is the partition in the volume that you want to mount.
-                                If omitted, the default is to mount by volume name.
-                                Examples: For volume /dev/sda1, you specify the partition as "1".
-                                Similarly, the volume partition for /dev/sda is "0" (or you can leave the property empty).
-                              format: int32
-                              type: integer
-                            readOnly:
-                              description: |-
-                                readOnly value true will force the readOnly setting in VolumeMounts.
-                                More info: https://kubernetes.io/docs/concepts/storage/volumes#awselasticblockstore
-                              type: boolean
-                            volumeID:
-                              description: |-
-                                volumeID is unique ID of the persistent disk resource in AWS (Amazon EBS volume).
-                                More info: https://kubernetes.io/docs/concepts/storage/volumes#awselasticblockstore
-                              type: string
-                          required:
-                          - volumeID
-                          type: object
-                        azureDisk:
-                          description: azureDisk represents an Azure Data Disk mount
-                            on the host and bind mount to the pod.
-                          properties:
-                            cachingMode:
-                              description: 'cachingMode is the Host Caching mode:
-                                None, Read Only, Read Write.'
-                              type: string
-                            diskName:
-                              description: diskName is the Name of the data disk in
-                                the blob storage
-                              type: string
-                            diskURI:
-                              description: diskURI is the URI of data disk in the
-                                blob storage
-                              type: string
-                            fsType:
-                              description: |-
-                                fsType is Filesystem type to mount.
-                                Must be a filesystem type supported by the host operating system.
-                                Ex. "ext4", "xfs", "ntfs". Implicitly inferred to be "ext4" if unspecified.
-                              type: string
-                            kind:
-                              description: 'kind expected values are Shared: multiple
-                                blob disks per storage account  Dedicated: single
-                                blob disk per storage account  Managed: azure managed
-                                data disk (only in managed availability set). defaults
-                                to shared'
-                              type: string
-                            readOnly:
-                              description: |-
-                                readOnly Defaults to false (read/write). ReadOnly here will force
-                                the ReadOnly setting in VolumeMounts.
-                              type: boolean
-                          required:
-                          - diskName
-                          - diskURI
-                          type: object
-                        azureFile:
-                          description: azureFile represents an Azure File Service
-                            mount on the host and bind mount to the pod.
-                          properties:
-                            readOnly:
-                              description: |-
-                                readOnly defaults to false (read/write). ReadOnly here will force
-                                the ReadOnly setting in VolumeMounts.
-                              type: boolean
-                            secretName:
-                              description: secretName is the  name of secret that
-                                contains Azure Storage Account Name and Key
-                              type: string
-                            shareName:
-                              description: shareName is the azure share Name
-                              type: string
-                          required:
-                          - secretName
-                          - shareName
-                          type: object
-                        cephfs:
-                          description: cephFS represents a Ceph FS mount on the host
-                            that shares a pod's lifetime
-                          properties:
-                            monitors:
-                              description: |-
-                                monitors is Required: Monitors is a collection of Ceph monitors
-                                More info: https://examples.k8s.io/volumes/cephfs/README.md#how-to-use-it
-                              items:
-                                type: string
-                              type: array
-                            path:
-                              description: 'path is Optional: Used as the mounted
-                                root, rather than the full Ceph tree, default is /'
-                              type: string
-                            readOnly:
-                              description: |-
-                                readOnly is Optional: Defaults to false (read/write). ReadOnly here will force
-                                the ReadOnly setting in VolumeMounts.
-                                More info: https://examples.k8s.io/volumes/cephfs/README.md#how-to-use-it
-                              type: boolean
-                            secretFile:
-                              description: |-
-                                secretFile is Optional: SecretFile is the path to key ring for User, default is /etc/ceph/user.secret
-                                More info: https://examples.k8s.io/volumes/cephfs/README.md#how-to-use-it
-                              type: string
-                            secretRef:
-                              description: |-
-                                secretRef is Optional: SecretRef is reference to the authentication secret for User, default is empty.
-                                More info: https://examples.k8s.io/volumes/cephfs/README.md#how-to-use-it
-                              properties:
-                                name:
-                                  description: |-
-                                    Name of the referent.
-                                    More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                                    TODO: Add other useful fields. apiVersion, kind, uid?
-                                  type: string
-                              type: object
-                              x-kubernetes-map-type: atomic
-                            user:
-                              description: |-
-                                user is optional: User is the rados user name, default is admin
-                                More info: https://examples.k8s.io/volumes/cephfs/README.md#how-to-use-it
-                              type: string
-                          required:
-                          - monitors
-                          type: object
-                        cinder:
-                          description: |-
-                            cinder represents a cinder volume attached and mounted on kubelets host machine.
-                            More info: https://examples.k8s.io/mysql-cinder-pd/README.md
-                          properties:
-                            fsType:
-                              description: |-
-                                fsType is the filesystem type to mount.
-                                Must be a filesystem type supported by the host operating system.
-                                Examples: "ext4", "xfs", "ntfs". Implicitly inferred to be "ext4" if unspecified.
-                                More info: https://examples.k8s.io/mysql-cinder-pd/README.md
-                              type: string
-                            readOnly:
-                              description: |-
-                                readOnly defaults to false (read/write). ReadOnly here will force
-                                the ReadOnly setting in VolumeMounts.
-                                More info: https://examples.k8s.io/mysql-cinder-pd/README.md
-                              type: boolean
-                            secretRef:
-                              description: |-
-                                secretRef is optional: points to a secret object containing parameters used to connect
-                                to OpenStack.
-                              properties:
-                                name:
-                                  description: |-
-                                    Name of the referent.
-                                    More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                                    TODO: Add other useful fields. apiVersion, kind, uid?
-                                  type: string
-                              type: object
-                              x-kubernetes-map-type: atomic
-                            volumeID:
-                              description: |-
-                                volumeID used to identify the volume in cinder.
-                                More info: https://examples.k8s.io/mysql-cinder-pd/README.md
-                              type: string
-                          required:
-                          - volumeID
-                          type: object
-                        configMap:
-                          description: configMap represents a configMap that should
-                            populate this volume
-                          properties:
-                            defaultMode:
-                              description: |-
-                                defaultMode is optional: mode bits used to set permissions on created files by default.
-                                Must be an octal value between 0000 and 0777 or a decimal value between 0 and 511.
-                                YAML accepts both octal and decimal values, JSON requires decimal values for mode bits.
-                                Defaults to 0644.
-                                Directories within the path are not affected by this setting.
-                                This might be in conflict with other options that affect the file
-                                mode, like fsGroup, and the result can be other mode bits set.
-                              format: int32
-                              type: integer
-                            items:
-                              description: |-
-                                items if unspecified, each key-value pair in the Data field of the referenced
-                                ConfigMap will be projected into the volume as a file whose name is the
-                                key and content is the value. If specified, the listed keys will be
-                                projected into the specified paths, and unlisted keys will not be
-                                present. If a key is specified which is not present in the ConfigMap,
-                                the volume setup will error unless it is marked optional. Paths must be
-                                relative and may not contain the '..' path or start with '..'.
-                              items:
-                                description: Maps a string key to a path within a
-                                  volume.
-                                properties:
-                                  key:
-                                    description: key is the key to project.
-                                    type: string
-                                  mode:
-                                    description: |-
-                                      mode is Optional: mode bits used to set permissions on this file.
-                                      Must be an octal value between 0000 and 0777 or a decimal value between 0 and 511.
-                                      YAML accepts both octal and decimal values, JSON requires decimal values for mode bits.
-                                      If not specified, the volume defaultMode will be used.
-                                      This might be in conflict with other options that affect the file
-                                      mode, like fsGroup, and the result can be other mode bits set.
-                                    format: int32
-                                    type: integer
-                                  path:
-                                    description: |-
-                                      path is the relative path of the file to map the key to.
-                                      May not be an absolute path.
-                                      May not contain the path element '..'.
-                                      May not start with the string '..'.
-                                    type: string
-                                required:
-                                - key
-                                - path
-                                type: object
-                              type: array
-                            name:
-                              description: |-
-                                Name of the referent.
-                                More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                                TODO: Add other useful fields. apiVersion, kind, uid?
-                              type: string
-                            optional:
-                              description: optional specify whether the ConfigMap
-                                or its keys must be defined
-                              type: boolean
-                          type: object
-                          x-kubernetes-map-type: atomic
-                        csi:
-                          description: csi (Container Storage Interface) represents
-                            ephemeral storage that is handled by certain external
-                            CSI drivers (Beta feature).
-                          properties:
-                            driver:
-                              description: |-
-                                driver is the name of the CSI driver that handles this volume.
-                                Consult with your admin for the correct name as registered in the cluster.
-                              type: string
-                            fsType:
-                              description: |-
-                                fsType to mount. Ex. "ext4", "xfs", "ntfs".
-                                If not provided, the empty value is passed to the associated CSI driver
-                                which will determine the default filesystem to apply.
-                              type: string
-                            nodePublishSecretRef:
-                              description: |-
-                                nodePublishSecretRef is a reference to the secret object containing
-                                sensitive information to pass to the CSI driver to complete the CSI
-                                NodePublishVolume and NodeUnpublishVolume calls.
-                                This field is optional, and  may be empty if no secret is required. If the
-                                secret object contains more than one secret, all secret references are passed.
-                              properties:
-                                name:
-                                  description: |-
-                                    Name of the referent.
-                                    More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                                    TODO: Add other useful fields. apiVersion, kind, uid?
-                                  type: string
-                              type: object
-                              x-kubernetes-map-type: atomic
-                            readOnly:
-                              description: |-
-                                readOnly specifies a read-only configuration for the volume.
-                                Defaults to false (read/write).
-                              type: boolean
-                            volumeAttributes:
-                              additionalProperties:
-                                type: string
-                              description: |-
-                                volumeAttributes stores driver-specific properties that are passed to the CSI
-                                driver. Consult your driver's documentation for supported values.
-                              type: object
-                          required:
-                          - driver
-                          type: object
-                        downwardAPI:
-                          description: downwardAPI represents downward API about the
-                            pod that should populate this volume
-                          properties:
-                            defaultMode:
-                              description: |-
-                                Optional: mode bits to use on created files by default. Must be a
-                                Optional: mode bits used to set permissions on created files by default.
-                                Must be an octal value between 0000 and 0777 or a decimal value between 0 and 511.
-                                YAML accepts both octal and decimal values, JSON requires decimal values for mode bits.
-                                Defaults to 0644.
-                                Directories within the path are not affected by this setting.
-                                This might be in conflict with other options that affect the file
-                                mode, like fsGroup, and the result can be other mode bits set.
-                              format: int32
-                              type: integer
-                            items:
-                              description: Items is a list of downward API volume
-                                file
-                              items:
-                                description: DownwardAPIVolumeFile represents information
-                                  to create the file containing the pod field
-                                properties:
-                                  fieldRef:
-                                    description: 'Required: Selects a field of the
-                                      pod: only annotations, labels, name and namespace
-                                      are supported.'
-                                    properties:
-                                      apiVersion:
-                                        description: Version of the schema the FieldPath
-                                          is written in terms of, defaults to "v1".
-                                        type: string
-                                      fieldPath:
-                                        description: Path of the field to select in
-                                          the specified API version.
-                                        type: string
-                                    required:
-                                    - fieldPath
-                                    type: object
-                                    x-kubernetes-map-type: atomic
-                                  mode:
-                                    description: |-
-                                      Optional: mode bits used to set permissions on this file, must be an octal value
-                                      between 0000 and 0777 or a decimal value between 0 and 511.
-                                      YAML accepts both octal and decimal values, JSON requires decimal values for mode bits.
-                                      If not specified, the volume defaultMode will be used.
-                                      This might be in conflict with other options that affect the file
-                                      mode, like fsGroup, and the result can be other mode bits set.
-                                    format: int32
-                                    type: integer
-                                  path:
-                                    description: 'Required: Path is  the relative
-                                      path name of the file to be created. Must not
-                                      be absolute or contain the ''..'' path. Must
-                                      be utf-8 encoded. The first item of the relative
-                                      path must not start with ''..'''
-                                    type: string
-                                  resourceFieldRef:
-                                    description: |-
-                                      Selects a resource of the container: only resources limits and requests
-                                      (limits.cpu, limits.memory, requests.cpu and requests.memory) are currently supported.
-                                    properties:
-                                      containerName:
-                                        description: 'Container name: required for
-                                          volumes, optional for env vars'
-                                        type: string
-                                      divisor:
-                                        anyOf:
-                                        - type: integer
-                                        - type: string
-                                        description: Specifies the output format of
-                                          the exposed resources, defaults to "1"
-                                        pattern: ^(\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))(([KMGTPE]i)|[numkMGTPE]|([eE](\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))))?$
-                                        x-kubernetes-int-or-string: true
-                                      resource:
-                                        description: 'Required: resource to select'
-                                        type: string
-                                    required:
-                                    - resource
-                                    type: object
-                                    x-kubernetes-map-type: atomic
-                                required:
-                                - path
-                                type: object
-                              type: array
-                          type: object
-                        emptyDir:
-                          description: |-
-                            emptyDir represents a temporary directory that shares a pod's lifetime.
-                            More info: https://kubernetes.io/docs/concepts/storage/volumes#emptydir
-                          properties:
-                            medium:
-                              description: |-
-                                medium represents what type of storage medium should back this directory.
-                                The default is "" which means to use the node's default medium.
-                                Must be an empty string (default) or Memory.
-                                More info: https://kubernetes.io/docs/concepts/storage/volumes#emptydir
-                              type: string
-                            sizeLimit:
-                              anyOf:
-                              - type: integer
-                              - type: string
-                              description: |-
-                                sizeLimit is the total amount of local storage required for this EmptyDir volume.
-                                The size limit is also applicable for memory medium.
-                                The maximum usage on memory medium EmptyDir would be the minimum value between
-                                the SizeLimit specified here and the sum of memory limits of all containers in a pod.
-                                The default is nil which means that the limit is undefined.
-                                More info: https://kubernetes.io/docs/concepts/storage/volumes#emptydir
-                              pattern: ^(\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))(([KMGTPE]i)|[numkMGTPE]|([eE](\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))))?$
-                              x-kubernetes-int-or-string: true
-                          type: object
-                        ephemeral:
-                          description: |-
-                            ephemeral represents a volume that is handled by a cluster storage driver.
-                            The volume's lifecycle is tied to the pod that defines it - it will be created before the pod starts,
-                            and deleted when the pod is removed.
-
-
-                            Use this if:
-                            a) the volume is only needed while the pod runs,
-                            b) features of normal volumes like restoring from snapshot or capacity
-                               tracking are needed,
-                            c) the storage driver is specified through a storage class, and
-                            d) the storage driver supports dynamic volume provisioning through
-                               a PersistentVolumeClaim (see EphemeralVolumeSource for more
-                               information on the connection between this volume type
-                               and PersistentVolumeClaim).
-
-
-                            Use PersistentVolumeClaim or one of the vendor-specific
-                            APIs for volumes that persist for longer than the lifecycle
-                            of an individual pod.
-
-
-                            Use CSI for light-weight local ephemeral volumes if the CSI driver is meant to
-                            be used that way - see the documentation of the driver for
-                            more information.
-
-
-                            A pod can use both types of ephemeral volumes and
-                            persistent volumes at the same time.
-                          properties:
-                            volumeClaimTemplate:
-                              description: |-
-                                Will be used to create a stand-alone PVC to provision the volume.
-                                The pod in which this EphemeralVolumeSource is embedded will be the
-                                owner of the PVC, i.e. the PVC will be deleted together with the
-                                pod.  The name of the PVC will be `<pod name>-<volume name>` where
-                                `<volume name>` is the name from the `PodSpec.Volumes` array
-                                entry. Pod validation will reject the pod if the concatenated name
-                                is not valid for a PVC (for example, too long).
-
-
-                                An existing PVC with that name that is not owned by the pod
-                                will *not* be used for the pod to avoid using an unrelated
-                                volume by mistake. Starting the pod is then blocked until
-                                the unrelated PVC is removed. If such a pre-created PVC is
-                                meant to be used by the pod, the PVC has to updated with an
-                                owner reference to the pod once the pod exists. Normally
-                                this should not be necessary, but it may be useful when
-                                manually reconstructing a broken cluster.
-
-
-                                This field is read-only and no changes will be made by Kubernetes
-                                to the PVC after it has been created.
-
-
-                                Required, must not be nil.
-                              properties:
-                                metadata:
-                                  description: |-
-                                    May contain labels and annotations that will be copied into the PVC
-                                    when creating it. No other fields are allowed and will be rejected during
-                                    validation.
-                                  type: object
-                                spec:
-                                  description: |-
-                                    The specification for the PersistentVolumeClaim. The entire content is
-                                    copied unchanged into the PVC that gets created from this
-                                    template. The same fields as in a PersistentVolumeClaim
-                                    are also valid here.
-                                  properties:
-                                    accessModes:
-                                      description: |-
-                                        accessModes contains the desired access modes the volume should have.
-                                        More info: https://kubernetes.io/docs/concepts/storage/persistent-volumes#access-modes-1
-                                      items:
-                                        type: string
-                                      type: array
-                                    dataSource:
-                                      description: |-
-                                        dataSource field can be used to specify either:
-                                        * An existing VolumeSnapshot object (snapshot.storage.k8s.io/VolumeSnapshot)
-                                        * An existing PVC (PersistentVolumeClaim)
-                                        If the provisioner or an external controller can support the specified data source,
-                                        it will create a new volume based on the contents of the specified data source.
-                                        When the AnyVolumeDataSource feature gate is enabled, dataSource contents will be copied to dataSourceRef,
-                                        and dataSourceRef contents will be copied to dataSource when dataSourceRef.namespace is not specified.
-                                        If the namespace is specified, then dataSourceRef will not be copied to dataSource.
-                                      properties:
-                                        apiGroup:
-                                          description: |-
-                                            APIGroup is the group for the resource being referenced.
-                                            If APIGroup is not specified, the specified Kind must be in the core API group.
-                                            For any other third-party types, APIGroup is required.
-                                          type: string
-                                        kind:
-                                          description: Kind is the type of resource
-                                            being referenced
-                                          type: string
-                                        name:
-                                          description: Name is the name of resource
-                                            being referenced
-                                          type: string
-                                      required:
-                                      - kind
-                                      - name
-                                      type: object
-                                      x-kubernetes-map-type: atomic
-                                    dataSourceRef:
-                                      description: |-
-                                        dataSourceRef specifies the object from which to populate the volume with data, if a non-empty
-                                        volume is desired. This may be any object from a non-empty API group (non
-                                        core object) or a PersistentVolumeClaim object.
-                                        When this field is specified, volume binding will only succeed if the type of
-                                        the specified object matches some installed volume populator or dynamic
-                                        provisioner.
-                                        This field will replace the functionality of the dataSource field and as such
-                                        if both fields are non-empty, they must have the same value. For backwards
-                                        compatibility, when namespace isn't specified in dataSourceRef,
-                                        both fields (dataSource and dataSourceRef) will be set to the same
-                                        value automatically if one of them is empty and the other is non-empty.
-                                        When namespace is specified in dataSourceRef,
-                                        dataSource isn't set to the same value and must be empty.
-                                        There are three important differences between dataSource and dataSourceRef:
-                                        * While dataSource only allows two specific types of objects, dataSourceRef
-                                          allows any non-core object, as well as PersistentVolumeClaim objects.
-                                        * While dataSource ignores disallowed values (dropping them), dataSourceRef
-                                          preserves all values, and generates an error if a disallowed value is
-                                          specified.
-                                        * While dataSource only allows local objects, dataSourceRef allows objects
-                                          in any namespaces.
-                                        (Beta) Using this field requires the AnyVolumeDataSource feature gate to be enabled.
-                                        (Alpha) Using the namespace field of dataSourceRef requires the CrossNamespaceVolumeDataSource feature gate to be enabled.
-                                      properties:
-                                        apiGroup:
-                                          description: |-
-                                            APIGroup is the group for the resource being referenced.
-                                            If APIGroup is not specified, the specified Kind must be in the core API group.
-                                            For any other third-party types, APIGroup is required.
-                                          type: string
-                                        kind:
-                                          description: Kind is the type of resource
-                                            being referenced
-                                          type: string
-                                        name:
-                                          description: Name is the name of resource
-                                            being referenced
-                                          type: string
-                                        namespace:
-                                          description: |-
-                                            Namespace is the namespace of resource being referenced
-                                            Note that when a namespace is specified, a gateway.networking.k8s.io/ReferenceGrant object is required in the referent namespace to allow that namespace's owner to accept the reference. See the ReferenceGrant documentation for details.
-                                            (Alpha) This field requires the CrossNamespaceVolumeDataSource feature gate to be enabled.
-                                          type: string
-                                      required:
-                                      - kind
-                                      - name
-                                      type: object
-                                    resources:
-                                      description: |-
-                                        resources represents the minimum resources the volume should have.
-                                        If RecoverVolumeExpansionFailure feature is enabled users are allowed to specify resource requirements
-                                        that are lower than previous value but must still be higher than capacity recorded in the
-                                        status field of the claim.
-                                        More info: https://kubernetes.io/docs/concepts/storage/persistent-volumes#resources
-                                      properties:
-                                        claims:
-                                          description: |-
-                                            Claims lists the names of resources, defined in spec.resourceClaims,
-                                            that are used by this container.
-
-
-                                            This is an alpha field and requires enabling the
-                                            DynamicResourceAllocation feature gate.
-
-
-                                            This field is immutable. It can only be set for containers.
-                                          items:
-                                            description: ResourceClaim references
-                                              one entry in PodSpec.ResourceClaims.
-                                            properties:
-                                              name:
-                                                description: |-
-                                                  Name must match the name of one entry in pod.spec.resourceClaims of
-                                                  the Pod where this field is used. It makes that resource available
-                                                  inside a container.
-                                                type: string
-                                            required:
-                                            - name
-                                            type: object
-                                          type: array
-                                          x-kubernetes-list-map-keys:
-                                          - name
-                                          x-kubernetes-list-type: map
-                                        limits:
-                                          additionalProperties:
-                                            anyOf:
-                                            - type: integer
-                                            - type: string
-                                            pattern: ^(\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))(([KMGTPE]i)|[numkMGTPE]|([eE](\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))))?$
-                                            x-kubernetes-int-or-string: true
-                                          description: |-
-                                            Limits describes the maximum amount of compute resources allowed.
-                                            More info: https://kubernetes.io/docs/concepts/configuration/manage-resources-containers/
-                                          type: object
-                                        requests:
-                                          additionalProperties:
-                                            anyOf:
-                                            - type: integer
-                                            - type: string
-                                            pattern: ^(\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))(([KMGTPE]i)|[numkMGTPE]|([eE](\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))))?$
-                                            x-kubernetes-int-or-string: true
-                                          description: |-
-                                            Requests describes the minimum amount of compute resources required.
-                                            If Requests is omitted for a container, it defaults to Limits if that is explicitly specified,
-                                            otherwise to an implementation-defined value. Requests cannot exceed Limits.
-                                            More info: https://kubernetes.io/docs/concepts/configuration/manage-resources-containers/
-                                          type: object
-                                      type: object
-                                    selector:
-                                      description: selector is a label query over
-                                        volumes to consider for binding.
-                                      properties:
-                                        matchExpressions:
-                                          description: matchExpressions is a list
-                                            of label selector requirements. The requirements
-                                            are ANDed.
-                                          items:
-                                            description: |-
-                                              A label selector requirement is a selector that contains values, a key, and an operator that
-                                              relates the key and values.
-                                            properties:
-                                              key:
-                                                description: key is the label key
-                                                  that the selector applies to.
-                                                type: string
-                                              operator:
-                                                description: |-
-                                                  operator represents a key's relationship to a set of values.
-                                                  Valid operators are In, NotIn, Exists and DoesNotExist.
-                                                type: string
-                                              values:
-                                                description: |-
-                                                  values is an array of string values. If the operator is In or NotIn,
-                                                  the values array must be non-empty. If the operator is Exists or DoesNotExist,
-                                                  the values array must be empty. This array is replaced during a strategic
-                                                  merge patch.
-                                                items:
-                                                  type: string
-                                                type: array
-                                            required:
-                                            - key
-                                            - operator
-                                            type: object
-                                          type: array
-                                        matchLabels:
-                                          additionalProperties:
-                                            type: string
-                                          description: |-
-                                            matchLabels is a map of {key,value} pairs. A single {key,value} in the matchLabels
-                                            map is equivalent to an element of matchExpressions, whose key field is "key", the
-                                            operator is "In", and the values array contains only "value". The requirements are ANDed.
-                                          type: object
-                                      type: object
-                                      x-kubernetes-map-type: atomic
-                                    storageClassName:
-                                      description: |-
-                                        storageClassName is the name of the StorageClass required by the claim.
-                                        More info: https://kubernetes.io/docs/concepts/storage/persistent-volumes#class-1
-                                      type: string
-                                    volumeMode:
-                                      description: |-
-                                        volumeMode defines what type of volume is required by the claim.
-                                        Value of Filesystem is implied when not included in claim spec.
-                                      type: string
-                                    volumeName:
-                                      description: volumeName is the binding reference
-                                        to the PersistentVolume backing this claim.
-                                      type: string
-                                  type: object
-                              required:
-                              - spec
-                              type: object
-                          type: object
-                        fc:
-                          description: fc represents a Fibre Channel resource that
-                            is attached to a kubelet's host machine and then exposed
-                            to the pod.
-                          properties:
-                            fsType:
-                              description: |-
-                                fsType is the filesystem type to mount.
-                                Must be a filesystem type supported by the host operating system.
-                                Ex. "ext4", "xfs", "ntfs". Implicitly inferred to be "ext4" if unspecified.
-                                TODO: how do we prevent errors in the filesystem from compromising the machine
-                              type: string
-                            lun:
-                              description: 'lun is Optional: FC target lun number'
-                              format: int32
-                              type: integer
-                            readOnly:
-                              description: |-
-                                readOnly is Optional: Defaults to false (read/write). ReadOnly here will force
-                                the ReadOnly setting in VolumeMounts.
-                              type: boolean
-                            targetWWNs:
-                              description: 'targetWWNs is Optional: FC target worldwide
-                                names (WWNs)'
-                              items:
-                                type: string
-                              type: array
-                            wwids:
-                              description: |-
-                                wwids Optional: FC volume world wide identifiers (wwids)
-                                Either wwids or combination of targetWWNs and lun must be set, but not both simultaneously.
-                              items:
-                                type: string
-                              type: array
-                          type: object
-                        flexVolume:
-                          description: |-
-                            flexVolume represents a generic volume resource that is
-                            provisioned/attached using an exec based plugin.
-                          properties:
-                            driver:
-                              description: driver is the name of the driver to use
-                                for this volume.
-                              type: string
-                            fsType:
-                              description: |-
-                                fsType is the filesystem type to mount.
-                                Must be a filesystem type supported by the host operating system.
-                                Ex. "ext4", "xfs", "ntfs". The default filesystem depends on FlexVolume script.
-                              type: string
-                            options:
-                              additionalProperties:
-                                type: string
-                              description: 'options is Optional: this field holds
-                                extra command options if any.'
-                              type: object
-                            readOnly:
-                              description: |-
-                                readOnly is Optional: defaults to false (read/write). ReadOnly here will force
-                                the ReadOnly setting in VolumeMounts.
-                              type: boolean
-                            secretRef:
-                              description: |-
-                                secretRef is Optional: secretRef is reference to the secret object containing
-                                sensitive information to pass to the plugin scripts. This may be
-                                empty if no secret object is specified. If the secret object
-                                contains more than one secret, all secrets are passed to the plugin
-                                scripts.
-                              properties:
-                                name:
-                                  description: |-
-                                    Name of the referent.
-                                    More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                                    TODO: Add other useful fields. apiVersion, kind, uid?
-                                  type: string
-                              type: object
-                              x-kubernetes-map-type: atomic
-                          required:
-                          - driver
-                          type: object
-                        flocker:
-                          description: flocker represents a Flocker volume attached
-                            to a kubelet's host machine. This depends on the Flocker
-                            control service being running
-                          properties:
-                            datasetName:
-                              description: |-
-                                datasetName is Name of the dataset stored as metadata -> name on the dataset for Flocker
-                                should be considered as deprecated
-                              type: string
-                            datasetUUID:
-                              description: datasetUUID is the UUID of the dataset.
-                                This is unique identifier of a Flocker dataset
-                              type: string
-                          type: object
-                        gcePersistentDisk:
-                          description: |-
-                            gcePersistentDisk represents a GCE Disk resource that is attached to a
-                            kubelet's host machine and then exposed to the pod.
-                            More info: https://kubernetes.io/docs/concepts/storage/volumes#gcepersistentdisk
-                          properties:
-                            fsType:
-                              description: |-
-                                fsType is filesystem type of the volume that you want to mount.
-                                Tip: Ensure that the filesystem type is supported by the host operating system.
-                                Examples: "ext4", "xfs", "ntfs". Implicitly inferred to be "ext4" if unspecified.
-                                More info: https://kubernetes.io/docs/concepts/storage/volumes#gcepersistentdisk
-                                TODO: how do we prevent errors in the filesystem from compromising the machine
-                              type: string
-                            partition:
-                              description: |-
-                                partition is the partition in the volume that you want to mount.
-                                If omitted, the default is to mount by volume name.
-                                Examples: For volume /dev/sda1, you specify the partition as "1".
-                                Similarly, the volume partition for /dev/sda is "0" (or you can leave the property empty).
-                                More info: https://kubernetes.io/docs/concepts/storage/volumes#gcepersistentdisk
-                              format: int32
-                              type: integer
-                            pdName:
-                              description: |-
-                                pdName is unique name of the PD resource in GCE. Used to identify the disk in GCE.
-                                More info: https://kubernetes.io/docs/concepts/storage/volumes#gcepersistentdisk
-                              type: string
-                            readOnly:
-                              description: |-
-                                readOnly here will force the ReadOnly setting in VolumeMounts.
-                                Defaults to false.
-                                More info: https://kubernetes.io/docs/concepts/storage/volumes#gcepersistentdisk
-                              type: boolean
-                          required:
-                          - pdName
-                          type: object
-                        gitRepo:
-                          description: |-
-                            gitRepo represents a git repository at a particular revision.
-                            DEPRECATED: GitRepo is deprecated. To provision a container with a git repo, mount an
-                            EmptyDir into an InitContainer that clones the repo using git, then mount the EmptyDir
-                            into the Pod's container.
-                          properties:
-                            directory:
-                              description: |-
-                                directory is the target directory name.
-                                Must not contain or start with '..'.  If '.' is supplied, the volume directory will be the
-                                git repository.  Otherwise, if specified, the volume will contain the git repository in
-                                the subdirectory with the given name.
-                              type: string
-                            repository:
-                              description: repository is the URL
-                              type: string
-                            revision:
-                              description: revision is the commit hash for the specified
-                                revision.
-                              type: string
-                          required:
-                          - repository
-                          type: object
-                        glusterfs:
-                          description: |-
-                            glusterfs represents a Glusterfs mount on the host that shares a pod's lifetime.
-                            More info: https://examples.k8s.io/volumes/glusterfs/README.md
-                          properties:
-                            endpoints:
-                              description: |-
-                                endpoints is the endpoint name that details Glusterfs topology.
-                                More info: https://examples.k8s.io/volumes/glusterfs/README.md#create-a-pod
-                              type: string
-                            path:
-                              description: |-
-                                path is the Glusterfs volume path.
-                                More info: https://examples.k8s.io/volumes/glusterfs/README.md#create-a-pod
-                              type: string
-                            readOnly:
-                              description: |-
-                                readOnly here will force the Glusterfs volume to be mounted with read-only permissions.
-                                Defaults to false.
-                                More info: https://examples.k8s.io/volumes/glusterfs/README.md#create-a-pod
-                              type: boolean
-                          required:
-                          - endpoints
-                          - path
-                          type: object
-                        hostPath:
-                          description: |-
-                            hostPath represents a pre-existing file or directory on the host
-                            machine that is directly exposed to the container. This is generally
-                            used for system agents or other privileged things that are allowed
-                            to see the host machine. Most containers will NOT need this.
-                            More info: https://kubernetes.io/docs/concepts/storage/volumes#hostpath
-                            ---
-                            TODO(jonesdl) We need to restrict who can use host directory mounts and who can/can not
-                            mount host directories as read/write.
-                          properties:
-                            path:
-                              description: |-
-                                path of the directory on the host.
-                                If the path is a symlink, it will follow the link to the real path.
-                                More info: https://kubernetes.io/docs/concepts/storage/volumes#hostpath
-                              type: string
-                            type:
-                              description: |-
-                                type for HostPath Volume
-                                Defaults to ""
-                                More info: https://kubernetes.io/docs/concepts/storage/volumes#hostpath
-                              type: string
-                          required:
-                          - path
-                          type: object
-                        iscsi:
-                          description: |-
-                            iscsi represents an ISCSI Disk resource that is attached to a
-                            kubelet's host machine and then exposed to the pod.
-                            More info: https://examples.k8s.io/volumes/iscsi/README.md
-                          properties:
-                            chapAuthDiscovery:
-                              description: chapAuthDiscovery defines whether support
-                                iSCSI Discovery CHAP authentication
-                              type: boolean
-                            chapAuthSession:
-                              description: chapAuthSession defines whether support
-                                iSCSI Session CHAP authentication
-                              type: boolean
-                            fsType:
-                              description: |-
-                                fsType is the filesystem type of the volume that you want to mount.
-                                Tip: Ensure that the filesystem type is supported by the host operating system.
-                                Examples: "ext4", "xfs", "ntfs". Implicitly inferred to be "ext4" if unspecified.
-                                More info: https://kubernetes.io/docs/concepts/storage/volumes#iscsi
-                                TODO: how do we prevent errors in the filesystem from compromising the machine
-                              type: string
-                            initiatorName:
-                              description: |-
-                                initiatorName is the custom iSCSI Initiator Name.
-                                If initiatorName is specified with iscsiInterface simultaneously, new iSCSI interface
-                                <target portal>:<volume name> will be created for the connection.
-                              type: string
-                            iqn:
-                              description: iqn is the target iSCSI Qualified Name.
-                              type: string
-                            iscsiInterface:
-                              description: |-
-                                iscsiInterface is the interface Name that uses an iSCSI transport.
-                                Defaults to 'default' (tcp).
-                              type: string
-                            lun:
-                              description: lun represents iSCSI Target Lun number.
-                              format: int32
-                              type: integer
-                            portals:
-                              description: |-
-                                portals is the iSCSI Target Portal List. The portal is either an IP or ip_addr:port if the port
-                                is other than default (typically TCP ports 860 and 3260).
-                              items:
-                                type: string
-                              type: array
-                            readOnly:
-                              description: |-
-                                readOnly here will force the ReadOnly setting in VolumeMounts.
-                                Defaults to false.
-                              type: boolean
-                            secretRef:
-                              description: secretRef is the CHAP Secret for iSCSI
-                                target and initiator authentication
-                              properties:
-                                name:
-                                  description: |-
-                                    Name of the referent.
-                                    More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                                    TODO: Add other useful fields. apiVersion, kind, uid?
-                                  type: string
-                              type: object
-                              x-kubernetes-map-type: atomic
-                            targetPortal:
-                              description: |-
-                                targetPortal is iSCSI Target Portal. The Portal is either an IP or ip_addr:port if the port
-                                is other than default (typically TCP ports 860 and 3260).
-                              type: string
-                          required:
-                          - iqn
-                          - lun
-                          - targetPortal
-                          type: object
-                        name:
-                          description: |-
-                            name of the volume.
-                            Must be a DNS_LABEL and unique within the pod.
-                            More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                          type: string
-                        nfs:
-                          description: |-
-                            nfs represents an NFS mount on the host that shares a pod's lifetime
-                            More info: https://kubernetes.io/docs/concepts/storage/volumes#nfs
-                          properties:
-                            path:
-                              description: |-
-                                path that is exported by the NFS server.
-                                More info: https://kubernetes.io/docs/concepts/storage/volumes#nfs
-                              type: string
-                            readOnly:
-                              description: |-
-                                readOnly here will force the NFS export to be mounted with read-only permissions.
-                                Defaults to false.
-                                More info: https://kubernetes.io/docs/concepts/storage/volumes#nfs
-                              type: boolean
-                            server:
-                              description: |-
-                                server is the hostname or IP address of the NFS server.
-                                More info: https://kubernetes.io/docs/concepts/storage/volumes#nfs
-                              type: string
-                          required:
-                          - path
-                          - server
-                          type: object
-                        persistentVolumeClaim:
-                          description: |-
-                            persistentVolumeClaimVolumeSource represents a reference to a
-                            PersistentVolumeClaim in the same namespace.
-                            More info: https://kubernetes.io/docs/concepts/storage/persistent-volumes#persistentvolumeclaims
-                          properties:
-                            claimName:
-                              description: |-
-                                claimName is the name of a PersistentVolumeClaim in the same namespace as the pod using this volume.
-                                More info: https://kubernetes.io/docs/concepts/storage/persistent-volumes#persistentvolumeclaims
-                              type: string
-                            readOnly:
-                              description: |-
-                                readOnly Will force the ReadOnly setting in VolumeMounts.
-                                Default false.
-                              type: boolean
-                          required:
-                          - claimName
-                          type: object
-                        photonPersistentDisk:
-                          description: photonPersistentDisk represents a PhotonController
-                            persistent disk attached and mounted on kubelets host
-                            machine
-                          properties:
-                            fsType:
-                              description: |-
-                                fsType is the filesystem type to mount.
-                                Must be a filesystem type supported by the host operating system.
-                                Ex. "ext4", "xfs", "ntfs". Implicitly inferred to be "ext4" if unspecified.
-                              type: string
-                            pdID:
-                              description: pdID is the ID that identifies Photon Controller
-                                persistent disk
-                              type: string
-                          required:
-                          - pdID
-                          type: object
-                        portworxVolume:
-                          description: portworxVolume represents a portworx volume
-                            attached and mounted on kubelets host machine
-                          properties:
-                            fsType:
-                              description: |-
-                                fSType represents the filesystem type to mount
-                                Must be a filesystem type supported by the host operating system.
-                                Ex. "ext4", "xfs". Implicitly inferred to be "ext4" if unspecified.
-                              type: string
-                            readOnly:
-                              description: |-
-                                readOnly defaults to false (read/write). ReadOnly here will force
-                                the ReadOnly setting in VolumeMounts.
-                              type: boolean
-                            volumeID:
-                              description: volumeID uniquely identifies a Portworx
-                                volume
-                              type: string
-                          required:
-                          - volumeID
-                          type: object
-                        projected:
-                          description: projected items for all in one resources secrets,
-                            configmaps, and downward API
-                          properties:
-                            defaultMode:
-                              description: |-
-                                defaultMode are the mode bits used to set permissions on created files by default.
-                                Must be an octal value between 0000 and 0777 or a decimal value between 0 and 511.
-                                YAML accepts both octal and decimal values, JSON requires decimal values for mode bits.
-                                Directories within the path are not affected by this setting.
-                                This might be in conflict with other options that affect the file
-                                mode, like fsGroup, and the result can be other mode bits set.
-                              format: int32
-                              type: integer
-                            sources:
-                              description: sources is the list of volume projections
-                              items:
-                                description: Projection that may be projected along
-                                  with other supported volume types
-                                properties:
-                                  configMap:
-                                    description: configMap information about the configMap
-                                      data to project
-                                    properties:
-                                      items:
-                                        description: |-
-                                          items if unspecified, each key-value pair in the Data field of the referenced
-                                          ConfigMap will be projected into the volume as a file whose name is the
-                                          key and content is the value. If specified, the listed keys will be
-                                          projected into the specified paths, and unlisted keys will not be
-                                          present. If a key is specified which is not present in the ConfigMap,
-                                          the volume setup will error unless it is marked optional. Paths must be
-                                          relative and may not contain the '..' path or start with '..'.
-                                        items:
-                                          description: Maps a string key to a path
-                                            within a volume.
-                                          properties:
-                                            key:
-                                              description: key is the key to project.
-                                              type: string
-                                            mode:
-                                              description: |-
-                                                mode is Optional: mode bits used to set permissions on this file.
-                                                Must be an octal value between 0000 and 0777 or a decimal value between 0 and 511.
-                                                YAML accepts both octal and decimal values, JSON requires decimal values for mode bits.
-                                                If not specified, the volume defaultMode will be used.
-                                                This might be in conflict with other options that affect the file
-                                                mode, like fsGroup, and the result can be other mode bits set.
-                                              format: int32
-                                              type: integer
-                                            path:
-                                              description: |-
-                                                path is the relative path of the file to map the key to.
-                                                May not be an absolute path.
-                                                May not contain the path element '..'.
-                                                May not start with the string '..'.
-                                              type: string
-                                          required:
-                                          - key
-                                          - path
-                                          type: object
-                                        type: array
-                                      name:
-                                        description: |-
-                                          Name of the referent.
-                                          More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                                          TODO: Add other useful fields. apiVersion, kind, uid?
-                                        type: string
-                                      optional:
-                                        description: optional specify whether the
-                                          ConfigMap or its keys must be defined
-                                        type: boolean
-                                    type: object
-                                    x-kubernetes-map-type: atomic
-                                  downwardAPI:
-                                    description: downwardAPI information about the
-                                      downwardAPI data to project
-                                    properties:
-                                      items:
-                                        description: Items is a list of DownwardAPIVolume
-                                          file
-                                        items:
-                                          description: DownwardAPIVolumeFile represents
-                                            information to create the file containing
-                                            the pod field
-                                          properties:
-                                            fieldRef:
-                                              description: 'Required: Selects a field
-                                                of the pod: only annotations, labels,
-                                                name and namespace are supported.'
-                                              properties:
-                                                apiVersion:
-                                                  description: Version of the schema
-                                                    the FieldPath is written in terms
-                                                    of, defaults to "v1".
-                                                  type: string
-                                                fieldPath:
-                                                  description: Path of the field to
-                                                    select in the specified API version.
-                                                  type: string
-                                              required:
-                                              - fieldPath
-                                              type: object
-                                              x-kubernetes-map-type: atomic
-                                            mode:
-                                              description: |-
-                                                Optional: mode bits used to set permissions on this file, must be an octal value
-                                                between 0000 and 0777 or a decimal value between 0 and 511.
-                                                YAML accepts both octal and decimal values, JSON requires decimal values for mode bits.
-                                                If not specified, the volume defaultMode will be used.
-                                                This might be in conflict with other options that affect the file
-                                                mode, like fsGroup, and the result can be other mode bits set.
-                                              format: int32
-                                              type: integer
-                                            path:
-                                              description: 'Required: Path is  the
-                                                relative path name of the file to
-                                                be created. Must not be absolute or
-                                                contain the ''..'' path. Must be utf-8
-                                                encoded. The first item of the relative
-                                                path must not start with ''..'''
-                                              type: string
-                                            resourceFieldRef:
-                                              description: |-
-                                                Selects a resource of the container: only resources limits and requests
-                                                (limits.cpu, limits.memory, requests.cpu and requests.memory) are currently supported.
-                                              properties:
-                                                containerName:
-                                                  description: 'Container name: required
-                                                    for volumes, optional for env
-                                                    vars'
-                                                  type: string
-                                                divisor:
-                                                  anyOf:
-                                                  - type: integer
-                                                  - type: string
-                                                  description: Specifies the output
-                                                    format of the exposed resources,
-                                                    defaults to "1"
-                                                  pattern: ^(\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))(([KMGTPE]i)|[numkMGTPE]|([eE](\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))))?$
-                                                  x-kubernetes-int-or-string: true
-                                                resource:
-                                                  description: 'Required: resource
-                                                    to select'
-                                                  type: string
-                                              required:
-                                              - resource
-                                              type: object
-                                              x-kubernetes-map-type: atomic
-                                          required:
-                                          - path
-                                          type: object
-                                        type: array
-                                    type: object
-                                  secret:
-                                    description: secret information about the secret
-                                      data to project
-                                    properties:
-                                      items:
-                                        description: |-
-                                          items if unspecified, each key-value pair in the Data field of the referenced
-                                          Secret will be projected into the volume as a file whose name is the
-                                          key and content is the value. If specified, the listed keys will be
-                                          projected into the specified paths, and unlisted keys will not be
-                                          present. If a key is specified which is not present in the Secret,
-                                          the volume setup will error unless it is marked optional. Paths must be
-                                          relative and may not contain the '..' path or start with '..'.
-                                        items:
-                                          description: Maps a string key to a path
-                                            within a volume.
-                                          properties:
-                                            key:
-                                              description: key is the key to project.
-                                              type: string
-                                            mode:
-                                              description: |-
-                                                mode is Optional: mode bits used to set permissions on this file.
-                                                Must be an octal value between 0000 and 0777 or a decimal value between 0 and 511.
-                                                YAML accepts both octal and decimal values, JSON requires decimal values for mode bits.
-                                                If not specified, the volume defaultMode will be used.
-                                                This might be in conflict with other options that affect the file
-                                                mode, like fsGroup, and the result can be other mode bits set.
-                                              format: int32
-                                              type: integer
-                                            path:
-                                              description: |-
-                                                path is the relative path of the file to map the key to.
-                                                May not be an absolute path.
-                                                May not contain the path element '..'.
-                                                May not start with the string '..'.
-                                              type: string
-                                          required:
-                                          - key
-                                          - path
-                                          type: object
-                                        type: array
-                                      name:
-                                        description: |-
-                                          Name of the referent.
-                                          More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                                          TODO: Add other useful fields. apiVersion, kind, uid?
-                                        type: string
-                                      optional:
-                                        description: optional field specify whether
-                                          the Secret or its key must be defined
-                                        type: boolean
-                                    type: object
-                                    x-kubernetes-map-type: atomic
-                                  serviceAccountToken:
-                                    description: serviceAccountToken is information
-                                      about the serviceAccountToken data to project
-                                    properties:
-                                      audience:
-                                        description: |-
-                                          audience is the intended audience of the token. A recipient of a token
-                                          must identify itself with an identifier specified in the audience of the
-                                          token, and otherwise should reject the token. The audience defaults to the
-                                          identifier of the apiserver.
-                                        type: string
-                                      expirationSeconds:
-                                        description: |-
-                                          expirationSeconds is the requested duration of validity of the service
-                                          account token. As the token approaches expiration, the kubelet volume
-                                          plugin will proactively rotate the service account token. The kubelet will
-                                          start trying to rotate the token if the token is older than 80 percent of
-                                          its time to live or if the token is older than 24 hours.Defaults to 1 hour
-                                          and must be at least 10 minutes.
-                                        format: int64
-                                        type: integer
-                                      path:
-                                        description: |-
-                                          path is the path relative to the mount point of the file to project the
-                                          token into.
-                                        type: string
-                                    required:
-                                    - path
-                                    type: object
-                                type: object
-                              type: array
-                          type: object
-                        quobyte:
-                          description: quobyte represents a Quobyte mount on the host
-                            that shares a pod's lifetime
-                          properties:
-                            group:
-                              description: |-
-                                group to map volume access to
-                                Default is no group
-                              type: string
-                            readOnly:
-                              description: |-
-                                readOnly here will force the Quobyte volume to be mounted with read-only permissions.
-                                Defaults to false.
-                              type: boolean
-                            registry:
-                              description: |-
-                                registry represents a single or multiple Quobyte Registry services
-                                specified as a string as host:port pair (multiple entries are separated with commas)
-                                which acts as the central registry for volumes
-                              type: string
-                            tenant:
-                              description: |-
-                                tenant owning the given Quobyte volume in the Backend
-                                Used with dynamically provisioned Quobyte volumes, value is set by the plugin
-                              type: string
-                            user:
-                              description: |-
-                                user to map volume access to
-                                Defaults to serivceaccount user
-                              type: string
-                            volume:
-                              description: volume is a string that references an already
-                                created Quobyte volume by name.
-                              type: string
-                          required:
-                          - registry
-                          - volume
-                          type: object
-                        rbd:
-                          description: |-
-                            rbd represents a Rados Block Device mount on the host that shares a pod's lifetime.
-                            More info: https://examples.k8s.io/volumes/rbd/README.md
-                          properties:
-                            fsType:
-                              description: |-
-                                fsType is the filesystem type of the volume that you want to mount.
-                                Tip: Ensure that the filesystem type is supported by the host operating system.
-                                Examples: "ext4", "xfs", "ntfs". Implicitly inferred to be "ext4" if unspecified.
-                                More info: https://kubernetes.io/docs/concepts/storage/volumes#rbd
-                                TODO: how do we prevent errors in the filesystem from compromising the machine
-                              type: string
-                            image:
-                              description: |-
-                                image is the rados image name.
-                                More info: https://examples.k8s.io/volumes/rbd/README.md#how-to-use-it
-                              type: string
-                            keyring:
-                              description: |-
-                                keyring is the path to key ring for RBDUser.
-                                Default is /etc/ceph/keyring.
-                                More info: https://examples.k8s.io/volumes/rbd/README.md#how-to-use-it
-                              type: string
-                            monitors:
-                              description: |-
-                                monitors is a collection of Ceph monitors.
-                                More info: https://examples.k8s.io/volumes/rbd/README.md#how-to-use-it
-                              items:
-                                type: string
-                              type: array
-                            pool:
-                              description: |-
-                                pool is the rados pool name.
-                                Default is rbd.
-                                More info: https://examples.k8s.io/volumes/rbd/README.md#how-to-use-it
-                              type: string
-                            readOnly:
-                              description: |-
-                                readOnly here will force the ReadOnly setting in VolumeMounts.
-                                Defaults to false.
-                                More info: https://examples.k8s.io/volumes/rbd/README.md#how-to-use-it
-                              type: boolean
-                            secretRef:
-                              description: |-
-                                secretRef is name of the authentication secret for RBDUser. If provided
-                                overrides keyring.
-                                Default is nil.
-                                More info: https://examples.k8s.io/volumes/rbd/README.md#how-to-use-it
-                              properties:
-                                name:
-                                  description: |-
-                                    Name of the referent.
-                                    More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                                    TODO: Add other useful fields. apiVersion, kind, uid?
-                                  type: string
-                              type: object
-                              x-kubernetes-map-type: atomic
-                            user:
-                              description: |-
-                                user is the rados user name.
-                                Default is admin.
-                                More info: https://examples.k8s.io/volumes/rbd/README.md#how-to-use-it
-                              type: string
-                          required:
-                          - image
-                          - monitors
-                          type: object
-                        scaleIO:
-                          description: scaleIO represents a ScaleIO persistent volume
-                            attached and mounted on Kubernetes nodes.
-                          properties:
-                            fsType:
-                              description: |-
-                                fsType is the filesystem type to mount.
-                                Must be a filesystem type supported by the host operating system.
-                                Ex. "ext4", "xfs", "ntfs".
-                                Default is "xfs".
-                              type: string
-                            gateway:
-                              description: gateway is the host address of the ScaleIO
-                                API Gateway.
-                              type: string
-                            protectionDomain:
-                              description: protectionDomain is the name of the ScaleIO
-                                Protection Domain for the configured storage.
-                              type: string
-                            readOnly:
-                              description: |-
-                                readOnly Defaults to false (read/write). ReadOnly here will force
-                                the ReadOnly setting in VolumeMounts.
-                              type: boolean
-                            secretRef:
-                              description: |-
-                                secretRef references to the secret for ScaleIO user and other
-                                sensitive information. If this is not provided, Login operation will fail.
-                              properties:
-                                name:
-                                  description: |-
-                                    Name of the referent.
-                                    More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                                    TODO: Add other useful fields. apiVersion, kind, uid?
-                                  type: string
-                              type: object
-                              x-kubernetes-map-type: atomic
-                            sslEnabled:
-                              description: sslEnabled Flag enable/disable SSL communication
-                                with Gateway, default false
-                              type: boolean
-                            storageMode:
-                              description: |-
-                                storageMode indicates whether the storage for a volume should be ThickProvisioned or ThinProvisioned.
-                                Default is ThinProvisioned.
-                              type: string
-                            storagePool:
-                              description: storagePool is the ScaleIO Storage Pool
-                                associated with the protection domain.
-                              type: string
-                            system:
-                              description: system is the name of the storage system
-                                as configured in ScaleIO.
-                              type: string
-                            volumeName:
-                              description: |-
-                                volumeName is the name of a volume already created in the ScaleIO system
-                                that is associated with this volume source.
-                              type: string
-                          required:
-                          - gateway
-                          - secretRef
-                          - system
-                          type: object
-                        secret:
-                          description: |-
-                            secret represents a secret that should populate this volume.
-                            More info: https://kubernetes.io/docs/concepts/storage/volumes#secret
-                          properties:
-                            defaultMode:
-                              description: |-
-                                defaultMode is Optional: mode bits used to set permissions on created files by default.
-                                Must be an octal value between 0000 and 0777 or a decimal value between 0 and 511.
-                                YAML accepts both octal and decimal values, JSON requires decimal values
-                                for mode bits. Defaults to 0644.
-                                Directories within the path are not affected by this setting.
-                                This might be in conflict with other options that affect the file
-                                mode, like fsGroup, and the result can be other mode bits set.
-                              format: int32
-                              type: integer
-                            items:
-                              description: |-
-                                items If unspecified, each key-value pair in the Data field of the referenced
-                                Secret will be projected into the volume as a file whose name is the
-                                key and content is the value. If specified, the listed keys will be
-                                projected into the specified paths, and unlisted keys will not be
-                                present. If a key is specified which is not present in the Secret,
-                                the volume setup will error unless it is marked optional. Paths must be
-                                relative and may not contain the '..' path or start with '..'.
-                              items:
-                                description: Maps a string key to a path within a
-                                  volume.
-                                properties:
-                                  key:
-                                    description: key is the key to project.
-                                    type: string
-                                  mode:
-                                    description: |-
-                                      mode is Optional: mode bits used to set permissions on this file.
-                                      Must be an octal value between 0000 and 0777 or a decimal value between 0 and 511.
-                                      YAML accepts both octal and decimal values, JSON requires decimal values for mode bits.
-                                      If not specified, the volume defaultMode will be used.
-                                      This might be in conflict with other options that affect the file
-                                      mode, like fsGroup, and the result can be other mode bits set.
-                                    format: int32
-                                    type: integer
-                                  path:
-                                    description: |-
-                                      path is the relative path of the file to map the key to.
-                                      May not be an absolute path.
-                                      May not contain the path element '..'.
-                                      May not start with the string '..'.
-                                    type: string
-                                required:
-                                - key
-                                - path
-                                type: object
-                              type: array
-                            optional:
-                              description: optional field specify whether the Secret
-                                or its keys must be defined
-                              type: boolean
-                            secretName:
-                              description: |-
-                                secretName is the name of the secret in the pod's namespace to use.
-                                More info: https://kubernetes.io/docs/concepts/storage/volumes#secret
-                              type: string
-                          type: object
-                        storageos:
-                          description: storageOS represents a StorageOS volume attached
-                            and mounted on Kubernetes nodes.
-                          properties:
-                            fsType:
-                              description: |-
-                                fsType is the filesystem type to mount.
-                                Must be a filesystem type supported by the host operating system.
-                                Ex. "ext4", "xfs", "ntfs". Implicitly inferred to be "ext4" if unspecified.
-                              type: string
-                            readOnly:
-                              description: |-
-                                readOnly defaults to false (read/write). ReadOnly here will force
-                                the ReadOnly setting in VolumeMounts.
-                              type: boolean
-                            secretRef:
-                              description: |-
-                                secretRef specifies the secret to use for obtaining the StorageOS API
-                                credentials.  If not specified, default values will be attempted.
-                              properties:
-                                name:
-                                  description: |-
-                                    Name of the referent.
-                                    More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                                    TODO: Add other useful fields. apiVersion, kind, uid?
-                                  type: string
-                              type: object
-                              x-kubernetes-map-type: atomic
-                            volumeName:
-                              description: |-
-                                volumeName is the human-readable name of the StorageOS volume.  Volume
-                                names are only unique within a namespace.
-                              type: string
-                            volumeNamespace:
-                              description: |-
-                                volumeNamespace specifies the scope of the volume within StorageOS.  If no
-                                namespace is specified then the Pod's namespace will be used.  This allows the
-                                Kubernetes name scoping to be mirrored within StorageOS for tighter integration.
-                                Set VolumeName to any name to override the default behaviour.
-                                Set to "default" if you are not using namespaces within StorageOS.
-                                Namespaces that do not pre-exist within StorageOS will be created.
-                              type: string
-                          type: object
-                        vsphereVolume:
-                          description: vsphereVolume represents a vSphere volume attached
-                            and mounted on kubelets host machine
-                          properties:
-                            fsType:
-                              description: |-
-                                fsType is filesystem type to mount.
-                                Must be a filesystem type supported by the host operating system.
-                                Ex. "ext4", "xfs", "ntfs". Implicitly inferred to be "ext4" if unspecified.
-                              type: string
-                            storagePolicyID:
-                              description: storagePolicyID is the storage Policy Based
-                                Management (SPBM) profile ID associated with the StoragePolicyName.
-                              type: string
-                            storagePolicyName:
-                              description: storagePolicyName is the storage Policy
-                                Based Management (SPBM) profile name.
-                              type: string
-                            volumePath:
-                              description: volumePath is the path that identifies
-                                vSphere volume vmdk
-                              type: string
-                          required:
-                          - volumePath
-                          type: object
-                      required:
-                      - name
-                      type: object
-                    type: array
-                  workingDir:
-                    default: /home/sealos/project
-                    type: string
-                required:
-                - image
-                type: object
-              description:
-                type: string
-              runtimeVersion:
-                type: string
-              state:
-                default: active
-                enum:
-                - active
-                - deprecated
-                type: string
-              version:
-                type: string
-            required:
-            - classRef
-            - config
-            - version
-            type: object
-          status:
-            description: RuntimeStatus defines the observed state of Runtime
-            type: object
-        type: object
-    served: true
-    storage: true
-    subresources:
-      status: {}
diff --git a/controllers/devbox/config/crd/kustomization.yaml b/controllers/devbox/config/crd/kustomization.yaml
index 455200e6d9e9..37bb4dbbdd96 100644
--- a/controllers/devbox/config/crd/kustomization.yaml
+++ b/controllers/devbox/config/crd/kustomization.yaml
@@ -17,8 +17,6 @@
 # It should be run by config/default
 resources:
 - bases/devbox.sealos.io_devboxes.yaml
-- bases/devbox.sealos.io_runtimes.yaml
-- bases/devbox.sealos.io_runtimeclasses.yaml
 - bases/devbox.sealos.io_devboxreleases.yaml
 - bases/devbox.sealos.io_operationrequests.yaml
 # +kubebuilder:scaffold:crdkustomizeresource
@@ -31,8 +29,6 @@ patches:
 # [CERTMANAGER] To enable cert-manager, uncomment all the sections with [CERTMANAGER] prefix.
 # patches here are for enabling the CA injection for each CRD
 #- path: patches/cainjection_in_devboxes.yaml
-#- path: patches/cainjection_in_runtimes.yaml
-#- path: patches/cainjection_in_runtimeclasses.yaml
 #- path: patches/cainjection_in_devboxreleases.yaml
 #- path: patches/cainjection_in_operationrequests.yaml
 # +kubebuilder:scaffold:crdkustomizecainjectionpatch
diff --git a/controllers/devbox/config/manager/manager.yaml b/controllers/devbox/config/manager/manager.yaml
index d8098831880e..a571e871f397 100644
--- a/controllers/devbox/config/manager/manager.yaml
+++ b/controllers/devbox/config/manager/manager.yaml
@@ -80,7 +80,6 @@ spec:
           - --registry-addr={{ .registryAddr }}
           - --registry-user={{ .registryUser }}
           - --registry-password={{ .registryPassword }}
-          - --auth-addr={{ .authAddr }}
         image: controller:latest
         name: manager
         securityContext:
diff --git a/controllers/devbox/config/rbac/kustomization.yaml b/controllers/devbox/config/rbac/kustomization.yaml
index f7feaa591dc4..1a77a2ef46e5 100644
--- a/controllers/devbox/config/rbac/kustomization.yaml
+++ b/controllers/devbox/config/rbac/kustomization.yaml
@@ -40,10 +40,6 @@ resources:
 - operationrequest_viewer_role.yaml
 - devboxrelease_editor_role.yaml
 - devboxrelease_viewer_role.yaml
-- runtimeclass_editor_role.yaml
-- runtimeclass_viewer_role.yaml
-- runtime_editor_role.yaml
-- runtime_viewer_role.yaml
 - devbox_editor_role.yaml
 - devbox_viewer_role.yaml
 
diff --git a/controllers/devbox/config/rbac/runtime_editor_role.yaml b/controllers/devbox/config/rbac/runtime_editor_role.yaml
deleted file mode 100644
index e3645875342c..000000000000
--- a/controllers/devbox/config/rbac/runtime_editor_role.yaml
+++ /dev/null
@@ -1,41 +0,0 @@
-# Copyright © 2024 sealos.
-#
-# 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.
-
-# permissions for end users to edit runtimes.
-apiVersion: rbac.authorization.k8s.io/v1
-kind: ClusterRole
-metadata:
-  labels:
-    app.kubernetes.io/name: devbox
-    app.kubernetes.io/managed-by: kustomize
-  name: runtime-editor-role
-rules:
-- apiGroups:
-  - devbox.sealos.io
-  resources:
-  - runtimes
-  verbs:
-  - create
-  - delete
-  - get
-  - list
-  - patch
-  - update
-  - watch
-- apiGroups:
-  - devbox.sealos.io
-  resources:
-  - runtimes/status
-  verbs:
-  - get
diff --git a/controllers/devbox/config/rbac/runtime_viewer_role.yaml b/controllers/devbox/config/rbac/runtime_viewer_role.yaml
deleted file mode 100644
index 464ff30775f1..000000000000
--- a/controllers/devbox/config/rbac/runtime_viewer_role.yaml
+++ /dev/null
@@ -1,37 +0,0 @@
-# Copyright © 2024 sealos.
-#
-# 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.
-
-# permissions for end users to view runtimes.
-apiVersion: rbac.authorization.k8s.io/v1
-kind: ClusterRole
-metadata:
-  labels:
-    app.kubernetes.io/name: devbox
-    app.kubernetes.io/managed-by: kustomize
-  name: runtime-viewer-role
-rules:
-- apiGroups:
-  - devbox.sealos.io
-  resources:
-  - runtimes
-  verbs:
-  - get
-  - list
-  - watch
-- apiGroups:
-  - devbox.sealos.io
-  resources:
-  - runtimes/status
-  verbs:
-  - get
diff --git a/controllers/devbox/config/rbac/runtimeclass_editor_role.yaml b/controllers/devbox/config/rbac/runtimeclass_editor_role.yaml
deleted file mode 100644
index 9483f0bd01a9..000000000000
--- a/controllers/devbox/config/rbac/runtimeclass_editor_role.yaml
+++ /dev/null
@@ -1,41 +0,0 @@
-# Copyright © 2024 sealos.
-#
-# 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.
-
-# permissions for end users to edit runtimeclasses.
-apiVersion: rbac.authorization.k8s.io/v1
-kind: ClusterRole
-metadata:
-  labels:
-    app.kubernetes.io/name: devbox
-    app.kubernetes.io/managed-by: kustomize
-  name: runtimeclass-editor-role
-rules:
-- apiGroups:
-  - devbox.sealos.io
-  resources:
-  - runtimeclasses
-  verbs:
-  - create
-  - delete
-  - get
-  - list
-  - patch
-  - update
-  - watch
-- apiGroups:
-  - devbox.sealos.io
-  resources:
-  - runtimeclasses/status
-  verbs:
-  - get
diff --git a/controllers/devbox/config/rbac/runtimeclass_viewer_role.yaml b/controllers/devbox/config/rbac/runtimeclass_viewer_role.yaml
deleted file mode 100644
index 97ba3a15d8f0..000000000000
--- a/controllers/devbox/config/rbac/runtimeclass_viewer_role.yaml
+++ /dev/null
@@ -1,37 +0,0 @@
-# Copyright © 2024 sealos.
-#
-# 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.
-
-# permissions for end users to view runtimeclasses.
-apiVersion: rbac.authorization.k8s.io/v1
-kind: ClusterRole
-metadata:
-  labels:
-    app.kubernetes.io/name: devbox
-    app.kubernetes.io/managed-by: kustomize
-  name: runtimeclass-viewer-role
-rules:
-- apiGroups:
-  - devbox.sealos.io
-  resources:
-  - runtimeclasses
-  verbs:
-  - get
-  - list
-  - watch
-- apiGroups:
-  - devbox.sealos.io
-  resources:
-  - runtimeclasses/status
-  verbs:
-  - get
diff --git a/controllers/devbox/config/samples/devbox_v1alpha1_devbox.yaml b/controllers/devbox/config/samples/devbox_v1alpha1_devbox.yaml
index b0b194ef79c2..71e5bf070b02 100644
--- a/controllers/devbox/config/samples/devbox_v1alpha1_devbox.yaml
+++ b/controllers/devbox/config/samples/devbox_v1alpha1_devbox.yaml
@@ -18,19 +18,23 @@ metadata:
   labels:
     app.kubernetes.io/name: devbox
     app.kubernetes.io/managed-by: kustomize
-  name: devbox-sample
+  name: devbox-gpu-sample
 spec:
   state: Running
+  runtimeClassName: nvidia
   resource:
     cpu: 2
     memory: 4000Mi
+    nvidia.com/gpu: 1
   runtimeRef:
-    name: go-1-22-5
+    name: go-1-22-5-2024-11-12-0651
     namespace: devbox-system
+  nodeSelector:
+    nvidia.com/gpu.product: Tesla-P40
   network:
     type: NodePort
     extraPorts:
       - containerPort: 443
         name: 'https'
       - containerPort: 80
-        name: 'http'
\ No newline at end of file
+        name: 'http'
diff --git a/controllers/devbox/config/samples/devbox_v1alpha1_runtime.yaml b/controllers/devbox/config/samples/devbox_v1alpha1_runtime.yaml
deleted file mode 100644
index 774a7a5947ef..000000000000
--- a/controllers/devbox/config/samples/devbox_v1alpha1_runtime.yaml
+++ /dev/null
@@ -1,93 +0,0 @@
-# Copyright © 2024 sealos.
-#
-# 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.
-
-apiVersion: devbox.sealos.io/v1alpha1
-kind: Runtime
-metadata:
-  name: go-1-22-5
-  namespace: devbox-system
-spec:
-  classRef: go
-  title: go1.22.5
-  description: go1.22.5
-  config:
-    image: ghcr.io/cbluebird/devbox/go1.22.5:2f4067
-    workingDir: /home/sealos/project
-    releaseCommand:
-      - /bin/bash
-      - -c
-    releaseArgs:
-      - /home/sealos/project/entrypoint.sh
-  category:
-    - ubuntu
-    - go
----
-apiVersion: devbox.sealos.io/v1alpha1
-kind: Runtime
-metadata:
-  name: go-1-23-0
-  namespace: devbox-system
-spec:
-  classRef: go
-  config:
-    image: ghcr.io/labring-actions/devbox/go-1.23.0:409348
-    ports:
-      - containerPort: 22
-        name: devbox-ssh-port
-        protocol: TCP
-    appPorts:
-      - name: devbox-app-port
-        port: 8080
-        protocol: TCP
-    user: sealos
-    workingDir: /home/sealos/project
-    releaseCommand:
-      - /bin/bash
-      - -c
-    releaseArgs:
-      - /home/sealos/project/entrypoint.sh
-  description: go 1.23.0
-  version: "1.23.0"
----
-apiVersion: devbox.sealos.io/v1alpha1
-kind: Runtime
-metadata:
-  name: gin
-  namespace: devbox-system
-spec:
-  classRef: gin
-  title: gin
-  description: gin
-  config:
-    image: ghcr.io/cbluebird/devbox/gin:2f4067
-  category:
-    - ubuntu
-    - go
-    - gin
----
-apiVersion: devbox.sealos.io/v1alpha1
-kind: Runtime
-metadata:
-  name: spring-boot
-  namespace: devbox-system
-spec:
-  classRef: spring-boot
-  title: Spring Boot
-  description: Spring Boot
-  config:
-    image: ghcr.io/cbluebird/devbox/spring-boot:2f4067
-  category:
-    - ubuntu
-    - java
-    - spring-boot
diff --git a/controllers/devbox/config/samples/devbox_v1alpha1_runtimeclass.yaml b/controllers/devbox/config/samples/devbox_v1alpha1_runtimeclass.yaml
deleted file mode 100644
index 3886893f263a..000000000000
--- a/controllers/devbox/config/samples/devbox_v1alpha1_runtimeclass.yaml
+++ /dev/null
@@ -1,73 +0,0 @@
-# Copyright © 2024 sealos.
-#
-# 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.
-
-apiVersion: devbox.sealos.io/v1alpha1
-kind: RuntimeClass
-metadata:
-  name: go
-  namespace: devbox-system
-spec:
-  kind: Language
-  title: go
-  description: go
----
-apiVersion: devbox.sealos.io/v1alpha1
-kind: RuntimeClass
-metadata:
-  name: gin
-  namespace: devbox-system
-spec:
-  kind: Framework
-  title: gin
-  description: gin
----
-apiVersion: devbox.sealos.io/v1alpha1
-kind: RuntimeClass
-metadata:
-  name: java
-  namespace: devbox-system
-spec:
-  kind: Language
-  title: java
-  description: java
----
-apiVersion: devbox.sealos.io/v1alpha1
-kind: RuntimeClass
-metadata:
-  name: spring-boot
-  namespace: devbox-system
-spec:
-  kind: Framework
-  title: Spring Boot
-  description: Spring Boot
----
-apiVersion: devbox.sealos.io/v1alpha1
-kind: RuntimeClass
-metadata:
-  name: python
-  namespace: devbox-system
-spec:
-  kind: Language
-  title: python
-  description: python
----
-apiVersion: devbox.sealos.io/v1alpha1
-kind: RuntimeClass
-metadata:
-  name: nodejs
-  namespace: devbox-system
-spec:
-  kind: Language
-  title: node.js
-  description: node.js
\ No newline at end of file
diff --git a/controllers/devbox/deploy/manifests/deploy.yaml.tmpl b/controllers/devbox/deploy/manifests/deploy.yaml.tmpl
index 7286e29b5b83..910d8310bf19 100644
--- a/controllers/devbox/deploy/manifests/deploy.yaml.tmpl
+++ b/controllers/devbox/deploy/manifests/deploy.yaml.tmpl
@@ -40,12 +40,6 @@ spec:
     - jsonPath: .spec.state
       name: State
       type: string
-    - jsonPath: .spec.runtimeRef.name
-      name: RuntimeRef
-      type: string
-    - jsonPath: .status.podPhase
-      name: PodPhase
-      type: string
     - jsonPath: .status.network.type
       name: NetworkType
       type: string
@@ -842,2488 +836,145 @@ spec:
                         type: array
                     type: object
                 type: object
-              args:
-                items:
-                  type: string
-                type: array
-              command:
-                items:
-                  type: string
-                type: array
-              extraAnnotations:
-                additionalProperties:
-                  type: string
-                type: object
-              extraEnvs:
-                description: todo add rewrite env...
-                items:
-                  description: EnvVar represents an environment variable present in
-                    a Container.
-                  properties:
-                    name:
-                      description: Name of the environment variable. Must be a C_IDENTIFIER.
-                      type: string
-                    value:
-                      description: |-
-                        Variable references $(VAR_NAME) are expanded
-                        using the previously defined environment variables in the container and
-                        any service environment variables. If a variable cannot be resolved,
-                        the reference in the input string will be unchanged. Double $$ are reduced
-                        to a single $, which allows for escaping the $(VAR_NAME) syntax: i.e.
-                        "$$(VAR_NAME)" will produce the string literal "$(VAR_NAME)".
-                        Escaped references will never be expanded, regardless of whether the variable
-                        exists or not.
-                        Defaults to "".
+              config:
+                properties:
+                  annotations:
+                    additionalProperties:
                       type: string
-                    valueFrom:
-                      description: Source for the environment variable's value. Cannot
-                        be used if value is not empty.
+                    type: object
+                  appPorts:
+                    default:
+                    - name: devbox-app-port
+                      port: 8080
+                      protocol: TCP
+                    items:
+                      description: ServicePort contains information on service's port.
                       properties:
-                        configMapKeyRef:
-                          description: Selects a key of a ConfigMap.
-                          properties:
-                            key:
-                              description: The key to select.
-                              type: string
-                            name:
-                              description: |-
-                                Name of the referent.
-                                More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                                TODO: Add other useful fields. apiVersion, kind, uid?
-                              type: string
-                            optional:
-                              description: Specify whether the ConfigMap or its key
-                                must be defined
-                              type: boolean
-                          required:
-                          - key
-                          type: object
-                          x-kubernetes-map-type: atomic
-                        fieldRef:
-                          description: |-
-                            Selects a field of the pod: supports metadata.name, metadata.namespace, `metadata.labels['<KEY>']`, `metadata.annotations['<KEY>']`,
-                            spec.nodeName, spec.serviceAccountName, status.hostIP, status.podIP, status.podIPs.
-                          properties:
-                            apiVersion:
-                              description: Version of the schema the FieldPath is
-                                written in terms of, defaults to "v1".
-                              type: string
-                            fieldPath:
-                              description: Path of the field to select in the specified
-                                API version.
-                              type: string
-                          required:
-                          - fieldPath
-                          type: object
-                          x-kubernetes-map-type: atomic
-                        resourceFieldRef:
+                        appProtocol:
                           description: |-
-                            Selects a resource of the container: only resources limits and requests
-                            (limits.cpu, limits.memory, limits.ephemeral-storage, requests.cpu, requests.memory and requests.ephemeral-storage) are currently supported.
-                          properties:
-                            containerName:
-                              description: 'Container name: required for volumes,
-                                optional for env vars'
-                              type: string
-                            divisor:
-                              anyOf:
-                              - type: integer
-                              - type: string
-                              description: Specifies the output format of the exposed
-                                resources, defaults to "1"
-                              pattern: ^(\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))(([KMGTPE]i)|[numkMGTPE]|([eE](\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))))?$
-                              x-kubernetes-int-or-string: true
-                            resource:
-                              description: 'Required: resource to select'
-                              type: string
-                          required:
-                          - resource
-                          type: object
-                          x-kubernetes-map-type: atomic
-                        secretKeyRef:
-                          description: Selects a key of a secret in the pod's namespace
-                          properties:
-                            key:
-                              description: The key of the secret to select from.  Must
-                                be a valid secret key.
-                              type: string
-                            name:
-                              description: |-
-                                Name of the referent.
-                                More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                                TODO: Add other useful fields. apiVersion, kind, uid?
-                              type: string
-                            optional:
-                              description: Specify whether the Secret or its key must
-                                be defined
-                              type: boolean
-                          required:
-                          - key
-                          type: object
-                          x-kubernetes-map-type: atomic
-                      type: object
-                  required:
-                  - name
-                  type: object
-                type: array
-              extraLabels:
-                additionalProperties:
-                  type: string
-                description: todo add rewrite labels and annotations...
-                type: object
-              extraVolumeMounts:
-                items:
-                  description: VolumeMount describes a mounting of a Volume within
-                    a container.
-                  properties:
-                    mountPath:
-                      description: |-
-                        Path within the container at which the volume should be mounted.  Must
-                        not contain ':'.
-                      type: string
-                    mountPropagation:
-                      description: |-
-                        mountPropagation determines how mounts are propagated from the host
-                        to container and the other way around.
-                        When not set, MountPropagationNone is used.
-                        This field is beta in 1.10.
-                      type: string
-                    name:
-                      description: This must match the Name of a Volume.
-                      type: string
-                    readOnly:
-                      description: |-
-                        Mounted read-only if true, read-write otherwise (false or unspecified).
-                        Defaults to false.
-                      type: boolean
-                    subPath:
-                      description: |-
-                        Path within the volume from which the container's volume should be mounted.
-                        Defaults to "" (volume's root).
-                      type: string
-                    subPathExpr:
-                      description: |-
-                        Expanded path within the volume from which the container's volume should be mounted.
-                        Behaves similarly to SubPath but environment variable references $(VAR_NAME) are expanded using the container's environment.
-                        Defaults to "" (volume's root).
-                        SubPathExpr and SubPath are mutually exclusive.
-                      type: string
-                  required:
-                  - mountPath
-                  - name
-                  type: object
-                type: array
-              extraVolumes:
-                description: todo add rewrite volumes and volume mounts..
-                items:
-                  description: Volume represents a named volume in a pod that may
-                    be accessed by any container in the pod.
-                  properties:
-                    awsElasticBlockStore:
-                      description: |-
-                        awsElasticBlockStore represents an AWS Disk resource that is attached to a
-                        kubelet's host machine and then exposed to the pod.
-                        More info: https://kubernetes.io/docs/concepts/storage/volumes#awselasticblockstore
-                      properties:
-                        fsType:
+                            The application protocol for this port.
+                            This is used as a hint for implementations to offer richer behavior for protocols that they understand.
+                            This field follows standard Kubernetes label syntax.
+                            Valid values are either:
+
+
+                            * Un-prefixed protocol names - reserved for IANA standard service names (as per
+                            RFC-6335 and https://www.iana.org/assignments/service-names).
+
+
+                            * Kubernetes-defined prefixed names:
+                              * 'kubernetes.io/h2c' - HTTP/2 over cleartext as described in https://www.rfc-editor.org/rfc/rfc7540
+                              * 'kubernetes.io/ws'  - WebSocket over cleartext as described in https://www.rfc-editor.org/rfc/rfc6455
+                              * 'kubernetes.io/wss' - WebSocket over TLS as described in https://www.rfc-editor.org/rfc/rfc6455
+
+
+                            * Other protocols should use implementation-defined prefixed names such as
+                            mycompany.com/my-custom-protocol.
+                          type: string
+                        name:
                           description: |-
-                            fsType is the filesystem type of the volume that you want to mount.
-                            Tip: Ensure that the filesystem type is supported by the host operating system.
-                            Examples: "ext4", "xfs", "ntfs". Implicitly inferred to be "ext4" if unspecified.
-                            More info: https://kubernetes.io/docs/concepts/storage/volumes#awselasticblockstore
-                            TODO: how do we prevent errors in the filesystem from compromising the machine
+                            The name of this port within the service. This must be a DNS_LABEL.
+                            All ports within a ServiceSpec must have unique names. When considering
+                            the endpoints for a Service, this must match the 'name' field in the
+                            EndpointPort.
+                            Optional if only one ServicePort is defined on this service.
                           type: string
-                        partition:
+                        nodePort:
                           description: |-
-                            partition is the partition in the volume that you want to mount.
-                            If omitted, the default is to mount by volume name.
-                            Examples: For volume /dev/sda1, you specify the partition as "1".
-                            Similarly, the volume partition for /dev/sda is "0" (or you can leave the property empty).
+                            The port on each node on which this service is exposed when type is
+                            NodePort or LoadBalancer.  Usually assigned by the system. If a value is
+                            specified, in-range, and not in use it will be used, otherwise the
+                            operation will fail.  If not specified, a port will be allocated if this
+                            Service requires one.  If this field is specified when creating a
+                            Service which does not need it, creation will fail. This field will be
+                            wiped when updating a Service to no longer need it (e.g. changing type
+                            from NodePort to ClusterIP).
+                            More info: https://kubernetes.io/docs/concepts/services-networking/service/#type-nodeport
                           format: int32
                           type: integer
-                        readOnly:
-                          description: |-
-                            readOnly value true will force the readOnly setting in VolumeMounts.
-                            More info: https://kubernetes.io/docs/concepts/storage/volumes#awselasticblockstore
-                          type: boolean
-                        volumeID:
-                          description: |-
-                            volumeID is unique ID of the persistent disk resource in AWS (Amazon EBS volume).
-                            More info: https://kubernetes.io/docs/concepts/storage/volumes#awselasticblockstore
-                          type: string
-                      required:
-                      - volumeID
-                      type: object
-                    azureDisk:
-                      description: azureDisk represents an Azure Data Disk mount on
-                        the host and bind mount to the pod.
-                      properties:
-                        cachingMode:
-                          description: 'cachingMode is the Host Caching mode: None,
-                            Read Only, Read Write.'
-                          type: string
-                        diskName:
-                          description: diskName is the Name of the data disk in the
-                            blob storage
-                          type: string
-                        diskURI:
-                          description: diskURI is the URI of data disk in the blob
-                            storage
-                          type: string
-                        fsType:
+                        port:
+                          description: The port that will be exposed by this service.
+                          format: int32
+                          type: integer
+                        protocol:
+                          default: TCP
                           description: |-
-                            fsType is Filesystem type to mount.
-                            Must be a filesystem type supported by the host operating system.
-                            Ex. "ext4", "xfs", "ntfs". Implicitly inferred to be "ext4" if unspecified.
-                          type: string
-                        kind:
-                          description: 'kind expected values are Shared: multiple
-                            blob disks per storage account  Dedicated: single blob
-                            disk per storage account  Managed: azure managed data
-                            disk (only in managed availability set). defaults to shared'
+                            The IP protocol for this port. Supports "TCP", "UDP", and "SCTP".
+                            Default is TCP.
                           type: string
-                        readOnly:
-                          description: |-
-                            readOnly Defaults to false (read/write). ReadOnly here will force
-                            the ReadOnly setting in VolumeMounts.
-                          type: boolean
-                      required:
-                      - diskName
-                      - diskURI
-                      type: object
-                    azureFile:
-                      description: azureFile represents an Azure File Service mount
-                        on the host and bind mount to the pod.
-                      properties:
-                        readOnly:
+                        targetPort:
+                          anyOf:
+                          - type: integer
+                          - type: string
                           description: |-
-                            readOnly defaults to false (read/write). ReadOnly here will force
-                            the ReadOnly setting in VolumeMounts.
-                          type: boolean
-                        secretName:
-                          description: secretName is the  name of secret that contains
-                            Azure Storage Account Name and Key
-                          type: string
-                        shareName:
-                          description: shareName is the azure share Name
-                          type: string
+                            Number or name of the port to access on the pods targeted by the service.
+                            Number must be in the range 1 to 65535. Name must be an IANA_SVC_NAME.
+                            If this is a string, it will be looked up as a named port in the
+                            target Pod's container ports. If this is not specified, the value
+                            of the 'port' field is used (an identity map).
+                            This field is ignored for services with clusterIP=None, and should be
+                            omitted or set equal to the 'port' field.
+                            More info: https://kubernetes.io/docs/concepts/services-networking/service/#defining-a-service
+                          x-kubernetes-int-or-string: true
                       required:
-                      - secretName
-                      - shareName
+                      - port
                       type: object
-                    cephfs:
-                      description: cephFS represents a Ceph FS mount on the host that
-                        shares a pod's lifetime
+                    type: array
+                  args:
+                    description: kubebuilder:validation:Optional
+                    items:
+                      type: string
+                    type: array
+                  command:
+                    items:
+                      type: string
+                    type: array
+                  env:
+                    items:
+                      description: EnvVar represents an environment variable present
+                        in a Container.
                       properties:
-                        monitors:
-                          description: |-
-                            monitors is Required: Monitors is a collection of Ceph monitors
-                            More info: https://examples.k8s.io/volumes/cephfs/README.md#how-to-use-it
-                          items:
-                            type: string
-                          type: array
-                        path:
-                          description: 'path is Optional: Used as the mounted root,
-                            rather than the full Ceph tree, default is /'
+                        name:
+                          description: Name of the environment variable. Must be a
+                            C_IDENTIFIER.
                           type: string
-                        readOnly:
-                          description: |-
-                            readOnly is Optional: Defaults to false (read/write). ReadOnly here will force
-                            the ReadOnly setting in VolumeMounts.
-                            More info: https://examples.k8s.io/volumes/cephfs/README.md#how-to-use-it
-                          type: boolean
-                        secretFile:
+                        value:
                           description: |-
-                            secretFile is Optional: SecretFile is the path to key ring for User, default is /etc/ceph/user.secret
-                            More info: https://examples.k8s.io/volumes/cephfs/README.md#how-to-use-it
+                            Variable references $(VAR_NAME) are expanded
+                            using the previously defined environment variables in the container and
+                            any service environment variables. If a variable cannot be resolved,
+                            the reference in the input string will be unchanged. Double $$ are reduced
+                            to a single $, which allows for escaping the $(VAR_NAME) syntax: i.e.
+                            "$$(VAR_NAME)" will produce the string literal "$(VAR_NAME)".
+                            Escaped references will never be expanded, regardless of whether the variable
+                            exists or not.
+                            Defaults to "".
                           type: string
-                        secretRef:
-                          description: |-
-                            secretRef is Optional: SecretRef is reference to the authentication secret for User, default is empty.
-                            More info: https://examples.k8s.io/volumes/cephfs/README.md#how-to-use-it
+                        valueFrom:
+                          description: Source for the environment variable's value.
+                            Cannot be used if value is not empty.
                           properties:
-                            name:
-                              description: |-
-                                Name of the referent.
-                                More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                                TODO: Add other useful fields. apiVersion, kind, uid?
-                              type: string
-                          type: object
-                          x-kubernetes-map-type: atomic
-                        user:
-                          description: |-
-                            user is optional: User is the rados user name, default is admin
-                            More info: https://examples.k8s.io/volumes/cephfs/README.md#how-to-use-it
-                          type: string
-                      required:
-                      - monitors
-                      type: object
-                    cinder:
-                      description: |-
-                        cinder represents a cinder volume attached and mounted on kubelets host machine.
-                        More info: https://examples.k8s.io/mysql-cinder-pd/README.md
-                      properties:
-                        fsType:
-                          description: |-
-                            fsType is the filesystem type to mount.
-                            Must be a filesystem type supported by the host operating system.
-                            Examples: "ext4", "xfs", "ntfs". Implicitly inferred to be "ext4" if unspecified.
-                            More info: https://examples.k8s.io/mysql-cinder-pd/README.md
-                          type: string
-                        readOnly:
-                          description: |-
-                            readOnly defaults to false (read/write). ReadOnly here will force
-                            the ReadOnly setting in VolumeMounts.
-                            More info: https://examples.k8s.io/mysql-cinder-pd/README.md
-                          type: boolean
-                        secretRef:
-                          description: |-
-                            secretRef is optional: points to a secret object containing parameters used to connect
-                            to OpenStack.
-                          properties:
-                            name:
-                              description: |-
-                                Name of the referent.
-                                More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                                TODO: Add other useful fields. apiVersion, kind, uid?
-                              type: string
-                          type: object
-                          x-kubernetes-map-type: atomic
-                        volumeID:
-                          description: |-
-                            volumeID used to identify the volume in cinder.
-                            More info: https://examples.k8s.io/mysql-cinder-pd/README.md
-                          type: string
-                      required:
-                      - volumeID
-                      type: object
-                    configMap:
-                      description: configMap represents a configMap that should populate
-                        this volume
-                      properties:
-                        defaultMode:
-                          description: |-
-                            defaultMode is optional: mode bits used to set permissions on created files by default.
-                            Must be an octal value between 0000 and 0777 or a decimal value between 0 and 511.
-                            YAML accepts both octal and decimal values, JSON requires decimal values for mode bits.
-                            Defaults to 0644.
-                            Directories within the path are not affected by this setting.
-                            This might be in conflict with other options that affect the file
-                            mode, like fsGroup, and the result can be other mode bits set.
-                          format: int32
-                          type: integer
-                        items:
-                          description: |-
-                            items if unspecified, each key-value pair in the Data field of the referenced
-                            ConfigMap will be projected into the volume as a file whose name is the
-                            key and content is the value. If specified, the listed keys will be
-                            projected into the specified paths, and unlisted keys will not be
-                            present. If a key is specified which is not present in the ConfigMap,
-                            the volume setup will error unless it is marked optional. Paths must be
-                            relative and may not contain the '..' path or start with '..'.
-                          items:
-                            description: Maps a string key to a path within a volume.
-                            properties:
-                              key:
-                                description: key is the key to project.
-                                type: string
-                              mode:
-                                description: |-
-                                  mode is Optional: mode bits used to set permissions on this file.
-                                  Must be an octal value between 0000 and 0777 or a decimal value between 0 and 511.
-                                  YAML accepts both octal and decimal values, JSON requires decimal values for mode bits.
-                                  If not specified, the volume defaultMode will be used.
-                                  This might be in conflict with other options that affect the file
-                                  mode, like fsGroup, and the result can be other mode bits set.
-                                format: int32
-                                type: integer
-                              path:
-                                description: |-
-                                  path is the relative path of the file to map the key to.
-                                  May not be an absolute path.
-                                  May not contain the path element '..'.
-                                  May not start with the string '..'.
-                                type: string
-                            required:
-                            - key
-                            - path
-                            type: object
-                          type: array
-                        name:
-                          description: |-
-                            Name of the referent.
-                            More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                            TODO: Add other useful fields. apiVersion, kind, uid?
-                          type: string
-                        optional:
-                          description: optional specify whether the ConfigMap or its
-                            keys must be defined
-                          type: boolean
-                      type: object
-                      x-kubernetes-map-type: atomic
-                    csi:
-                      description: csi (Container Storage Interface) represents ephemeral
-                        storage that is handled by certain external CSI drivers (Beta
-                        feature).
-                      properties:
-                        driver:
-                          description: |-
-                            driver is the name of the CSI driver that handles this volume.
-                            Consult with your admin for the correct name as registered in the cluster.
-                          type: string
-                        fsType:
-                          description: |-
-                            fsType to mount. Ex. "ext4", "xfs", "ntfs".
-                            If not provided, the empty value is passed to the associated CSI driver
-                            which will determine the default filesystem to apply.
-                          type: string
-                        nodePublishSecretRef:
-                          description: |-
-                            nodePublishSecretRef is a reference to the secret object containing
-                            sensitive information to pass to the CSI driver to complete the CSI
-                            NodePublishVolume and NodeUnpublishVolume calls.
-                            This field is optional, and  may be empty if no secret is required. If the
-                            secret object contains more than one secret, all secret references are passed.
-                          properties:
-                            name:
-                              description: |-
-                                Name of the referent.
-                                More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                                TODO: Add other useful fields. apiVersion, kind, uid?
-                              type: string
-                          type: object
-                          x-kubernetes-map-type: atomic
-                        readOnly:
-                          description: |-
-                            readOnly specifies a read-only configuration for the volume.
-                            Defaults to false (read/write).
-                          type: boolean
-                        volumeAttributes:
-                          additionalProperties:
-                            type: string
-                          description: |-
-                            volumeAttributes stores driver-specific properties that are passed to the CSI
-                            driver. Consult your driver's documentation for supported values.
-                          type: object
-                      required:
-                      - driver
-                      type: object
-                    downwardAPI:
-                      description: downwardAPI represents downward API about the pod
-                        that should populate this volume
-                      properties:
-                        defaultMode:
-                          description: |-
-                            Optional: mode bits to use on created files by default. Must be a
-                            Optional: mode bits used to set permissions on created files by default.
-                            Must be an octal value between 0000 and 0777 or a decimal value between 0 and 511.
-                            YAML accepts both octal and decimal values, JSON requires decimal values for mode bits.
-                            Defaults to 0644.
-                            Directories within the path are not affected by this setting.
-                            This might be in conflict with other options that affect the file
-                            mode, like fsGroup, and the result can be other mode bits set.
-                          format: int32
-                          type: integer
-                        items:
-                          description: Items is a list of downward API volume file
-                          items:
-                            description: DownwardAPIVolumeFile represents information
-                              to create the file containing the pod field
-                            properties:
-                              fieldRef:
-                                description: 'Required: Selects a field of the pod:
-                                  only annotations, labels, name and namespace are
-                                  supported.'
-                                properties:
-                                  apiVersion:
-                                    description: Version of the schema the FieldPath
-                                      is written in terms of, defaults to "v1".
-                                    type: string
-                                  fieldPath:
-                                    description: Path of the field to select in the
-                                      specified API version.
-                                    type: string
-                                required:
-                                - fieldPath
-                                type: object
-                                x-kubernetes-map-type: atomic
-                              mode:
-                                description: |-
-                                  Optional: mode bits used to set permissions on this file, must be an octal value
-                                  between 0000 and 0777 or a decimal value between 0 and 511.
-                                  YAML accepts both octal and decimal values, JSON requires decimal values for mode bits.
-                                  If not specified, the volume defaultMode will be used.
-                                  This might be in conflict with other options that affect the file
-                                  mode, like fsGroup, and the result can be other mode bits set.
-                                format: int32
-                                type: integer
-                              path:
-                                description: 'Required: Path is  the relative path
-                                  name of the file to be created. Must not be absolute
-                                  or contain the ''..'' path. Must be utf-8 encoded.
-                                  The first item of the relative path must not start
-                                  with ''..'''
-                                type: string
-                              resourceFieldRef:
-                                description: |-
-                                  Selects a resource of the container: only resources limits and requests
-                                  (limits.cpu, limits.memory, requests.cpu and requests.memory) are currently supported.
-                                properties:
-                                  containerName:
-                                    description: 'Container name: required for volumes,
-                                      optional for env vars'
-                                    type: string
-                                  divisor:
-                                    anyOf:
-                                    - type: integer
-                                    - type: string
-                                    description: Specifies the output format of the
-                                      exposed resources, defaults to "1"
-                                    pattern: ^(\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))(([KMGTPE]i)|[numkMGTPE]|([eE](\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))))?$
-                                    x-kubernetes-int-or-string: true
-                                  resource:
-                                    description: 'Required: resource to select'
-                                    type: string
-                                required:
-                                - resource
-                                type: object
-                                x-kubernetes-map-type: atomic
-                            required:
-                            - path
-                            type: object
-                          type: array
-                      type: object
-                    emptyDir:
-                      description: |-
-                        emptyDir represents a temporary directory that shares a pod's lifetime.
-                        More info: https://kubernetes.io/docs/concepts/storage/volumes#emptydir
-                      properties:
-                        medium:
-                          description: |-
-                            medium represents what type of storage medium should back this directory.
-                            The default is "" which means to use the node's default medium.
-                            Must be an empty string (default) or Memory.
-                            More info: https://kubernetes.io/docs/concepts/storage/volumes#emptydir
-                          type: string
-                        sizeLimit:
-                          anyOf:
-                          - type: integer
-                          - type: string
-                          description: |-
-                            sizeLimit is the total amount of local storage required for this EmptyDir volume.
-                            The size limit is also applicable for memory medium.
-                            The maximum usage on memory medium EmptyDir would be the minimum value between
-                            the SizeLimit specified here and the sum of memory limits of all containers in a pod.
-                            The default is nil which means that the limit is undefined.
-                            More info: https://kubernetes.io/docs/concepts/storage/volumes#emptydir
-                          pattern: ^(\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))(([KMGTPE]i)|[numkMGTPE]|([eE](\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))))?$
-                          x-kubernetes-int-or-string: true
-                      type: object
-                    ephemeral:
-                      description: |-
-                        ephemeral represents a volume that is handled by a cluster storage driver.
-                        The volume's lifecycle is tied to the pod that defines it - it will be created before the pod starts,
-                        and deleted when the pod is removed.
-
-
-                        Use this if:
-                        a) the volume is only needed while the pod runs,
-                        b) features of normal volumes like restoring from snapshot or capacity
-                           tracking are needed,
-                        c) the storage driver is specified through a storage class, and
-                        d) the storage driver supports dynamic volume provisioning through
-                           a PersistentVolumeClaim (see EphemeralVolumeSource for more
-                           information on the connection between this volume type
-                           and PersistentVolumeClaim).
-
-
-                        Use PersistentVolumeClaim or one of the vendor-specific
-                        APIs for volumes that persist for longer than the lifecycle
-                        of an individual pod.
-
-
-                        Use CSI for light-weight local ephemeral volumes if the CSI driver is meant to
-                        be used that way - see the documentation of the driver for
-                        more information.
-
-
-                        A pod can use both types of ephemeral volumes and
-                        persistent volumes at the same time.
-                      properties:
-                        volumeClaimTemplate:
-                          description: |-
-                            Will be used to create a stand-alone PVC to provision the volume.
-                            The pod in which this EphemeralVolumeSource is embedded will be the
-                            owner of the PVC, i.e. the PVC will be deleted together with the
-                            pod.  The name of the PVC will be `<pod name>-<volume name>` where
-                            `<volume name>` is the name from the `PodSpec.Volumes` array
-                            entry. Pod validation will reject the pod if the concatenated name
-                            is not valid for a PVC (for example, too long).
-
-
-                            An existing PVC with that name that is not owned by the pod
-                            will *not* be used for the pod to avoid using an unrelated
-                            volume by mistake. Starting the pod is then blocked until
-                            the unrelated PVC is removed. If such a pre-created PVC is
-                            meant to be used by the pod, the PVC has to updated with an
-                            owner reference to the pod once the pod exists. Normally
-                            this should not be necessary, but it may be useful when
-                            manually reconstructing a broken cluster.
-
-
-                            This field is read-only and no changes will be made by Kubernetes
-                            to the PVC after it has been created.
-
-
-                            Required, must not be nil.
-                          properties:
-                            metadata:
-                              description: |-
-                                May contain labels and annotations that will be copied into the PVC
-                                when creating it. No other fields are allowed and will be rejected during
-                                validation.
-                              type: object
-                            spec:
-                              description: |-
-                                The specification for the PersistentVolumeClaim. The entire content is
-                                copied unchanged into the PVC that gets created from this
-                                template. The same fields as in a PersistentVolumeClaim
-                                are also valid here.
-                              properties:
-                                accessModes:
-                                  description: |-
-                                    accessModes contains the desired access modes the volume should have.
-                                    More info: https://kubernetes.io/docs/concepts/storage/persistent-volumes#access-modes-1
-                                  items:
-                                    type: string
-                                  type: array
-                                dataSource:
-                                  description: |-
-                                    dataSource field can be used to specify either:
-                                    * An existing VolumeSnapshot object (snapshot.storage.k8s.io/VolumeSnapshot)
-                                    * An existing PVC (PersistentVolumeClaim)
-                                    If the provisioner or an external controller can support the specified data source,
-                                    it will create a new volume based on the contents of the specified data source.
-                                    When the AnyVolumeDataSource feature gate is enabled, dataSource contents will be copied to dataSourceRef,
-                                    and dataSourceRef contents will be copied to dataSource when dataSourceRef.namespace is not specified.
-                                    If the namespace is specified, then dataSourceRef will not be copied to dataSource.
-                                  properties:
-                                    apiGroup:
-                                      description: |-
-                                        APIGroup is the group for the resource being referenced.
-                                        If APIGroup is not specified, the specified Kind must be in the core API group.
-                                        For any other third-party types, APIGroup is required.
-                                      type: string
-                                    kind:
-                                      description: Kind is the type of resource being
-                                        referenced
-                                      type: string
-                                    name:
-                                      description: Name is the name of resource being
-                                        referenced
-                                      type: string
-                                  required:
-                                  - kind
-                                  - name
-                                  type: object
-                                  x-kubernetes-map-type: atomic
-                                dataSourceRef:
-                                  description: |-
-                                    dataSourceRef specifies the object from which to populate the volume with data, if a non-empty
-                                    volume is desired. This may be any object from a non-empty API group (non
-                                    core object) or a PersistentVolumeClaim object.
-                                    When this field is specified, volume binding will only succeed if the type of
-                                    the specified object matches some installed volume populator or dynamic
-                                    provisioner.
-                                    This field will replace the functionality of the dataSource field and as such
-                                    if both fields are non-empty, they must have the same value. For backwards
-                                    compatibility, when namespace isn't specified in dataSourceRef,
-                                    both fields (dataSource and dataSourceRef) will be set to the same
-                                    value automatically if one of them is empty and the other is non-empty.
-                                    When namespace is specified in dataSourceRef,
-                                    dataSource isn't set to the same value and must be empty.
-                                    There are three important differences between dataSource and dataSourceRef:
-                                    * While dataSource only allows two specific types of objects, dataSourceRef
-                                      allows any non-core object, as well as PersistentVolumeClaim objects.
-                                    * While dataSource ignores disallowed values (dropping them), dataSourceRef
-                                      preserves all values, and generates an error if a disallowed value is
-                                      specified.
-                                    * While dataSource only allows local objects, dataSourceRef allows objects
-                                      in any namespaces.
-                                    (Beta) Using this field requires the AnyVolumeDataSource feature gate to be enabled.
-                                    (Alpha) Using the namespace field of dataSourceRef requires the CrossNamespaceVolumeDataSource feature gate to be enabled.
-                                  properties:
-                                    apiGroup:
-                                      description: |-
-                                        APIGroup is the group for the resource being referenced.
-                                        If APIGroup is not specified, the specified Kind must be in the core API group.
-                                        For any other third-party types, APIGroup is required.
-                                      type: string
-                                    kind:
-                                      description: Kind is the type of resource being
-                                        referenced
-                                      type: string
-                                    name:
-                                      description: Name is the name of resource being
-                                        referenced
-                                      type: string
-                                    namespace:
-                                      description: |-
-                                        Namespace is the namespace of resource being referenced
-                                        Note that when a namespace is specified, a gateway.networking.k8s.io/ReferenceGrant object is required in the referent namespace to allow that namespace's owner to accept the reference. See the ReferenceGrant documentation for details.
-                                        (Alpha) This field requires the CrossNamespaceVolumeDataSource feature gate to be enabled.
-                                      type: string
-                                  required:
-                                  - kind
-                                  - name
-                                  type: object
-                                resources:
-                                  description: |-
-                                    resources represents the minimum resources the volume should have.
-                                    If RecoverVolumeExpansionFailure feature is enabled users are allowed to specify resource requirements
-                                    that are lower than previous value but must still be higher than capacity recorded in the
-                                    status field of the claim.
-                                    More info: https://kubernetes.io/docs/concepts/storage/persistent-volumes#resources
-                                  properties:
-                                    claims:
-                                      description: |-
-                                        Claims lists the names of resources, defined in spec.resourceClaims,
-                                        that are used by this container.
-
-
-                                        This is an alpha field and requires enabling the
-                                        DynamicResourceAllocation feature gate.
-
-
-                                        This field is immutable. It can only be set for containers.
-                                      items:
-                                        description: ResourceClaim references one
-                                          entry in PodSpec.ResourceClaims.
-                                        properties:
-                                          name:
-                                            description: |-
-                                              Name must match the name of one entry in pod.spec.resourceClaims of
-                                              the Pod where this field is used. It makes that resource available
-                                              inside a container.
-                                            type: string
-                                        required:
-                                        - name
-                                        type: object
-                                      type: array
-                                      x-kubernetes-list-map-keys:
-                                      - name
-                                      x-kubernetes-list-type: map
-                                    limits:
-                                      additionalProperties:
-                                        anyOf:
-                                        - type: integer
-                                        - type: string
-                                        pattern: ^(\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))(([KMGTPE]i)|[numkMGTPE]|([eE](\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))))?$
-                                        x-kubernetes-int-or-string: true
-                                      description: |-
-                                        Limits describes the maximum amount of compute resources allowed.
-                                        More info: https://kubernetes.io/docs/concepts/configuration/manage-resources-containers/
-                                      type: object
-                                    requests:
-                                      additionalProperties:
-                                        anyOf:
-                                        - type: integer
-                                        - type: string
-                                        pattern: ^(\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))(([KMGTPE]i)|[numkMGTPE]|([eE](\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))))?$
-                                        x-kubernetes-int-or-string: true
-                                      description: |-
-                                        Requests describes the minimum amount of compute resources required.
-                                        If Requests is omitted for a container, it defaults to Limits if that is explicitly specified,
-                                        otherwise to an implementation-defined value. Requests cannot exceed Limits.
-                                        More info: https://kubernetes.io/docs/concepts/configuration/manage-resources-containers/
-                                      type: object
-                                  type: object
-                                selector:
-                                  description: selector is a label query over volumes
-                                    to consider for binding.
-                                  properties:
-                                    matchExpressions:
-                                      description: matchExpressions is a list of label
-                                        selector requirements. The requirements are
-                                        ANDed.
-                                      items:
-                                        description: |-
-                                          A label selector requirement is a selector that contains values, a key, and an operator that
-                                          relates the key and values.
-                                        properties:
-                                          key:
-                                            description: key is the label key that
-                                              the selector applies to.
-                                            type: string
-                                          operator:
-                                            description: |-
-                                              operator represents a key's relationship to a set of values.
-                                              Valid operators are In, NotIn, Exists and DoesNotExist.
-                                            type: string
-                                          values:
-                                            description: |-
-                                              values is an array of string values. If the operator is In or NotIn,
-                                              the values array must be non-empty. If the operator is Exists or DoesNotExist,
-                                              the values array must be empty. This array is replaced during a strategic
-                                              merge patch.
-                                            items:
-                                              type: string
-                                            type: array
-                                        required:
-                                        - key
-                                        - operator
-                                        type: object
-                                      type: array
-                                    matchLabels:
-                                      additionalProperties:
-                                        type: string
-                                      description: |-
-                                        matchLabels is a map of {key,value} pairs. A single {key,value} in the matchLabels
-                                        map is equivalent to an element of matchExpressions, whose key field is "key", the
-                                        operator is "In", and the values array contains only "value". The requirements are ANDed.
-                                      type: object
-                                  type: object
-                                  x-kubernetes-map-type: atomic
-                                storageClassName:
-                                  description: |-
-                                    storageClassName is the name of the StorageClass required by the claim.
-                                    More info: https://kubernetes.io/docs/concepts/storage/persistent-volumes#class-1
-                                  type: string
-                                volumeMode:
-                                  description: |-
-                                    volumeMode defines what type of volume is required by the claim.
-                                    Value of Filesystem is implied when not included in claim spec.
-                                  type: string
-                                volumeName:
-                                  description: volumeName is the binding reference
-                                    to the PersistentVolume backing this claim.
-                                  type: string
-                              type: object
-                          required:
-                          - spec
-                          type: object
-                      type: object
-                    fc:
-                      description: fc represents a Fibre Channel resource that is
-                        attached to a kubelet's host machine and then exposed to the
-                        pod.
-                      properties:
-                        fsType:
-                          description: |-
-                            fsType is the filesystem type to mount.
-                            Must be a filesystem type supported by the host operating system.
-                            Ex. "ext4", "xfs", "ntfs". Implicitly inferred to be "ext4" if unspecified.
-                            TODO: how do we prevent errors in the filesystem from compromising the machine
-                          type: string
-                        lun:
-                          description: 'lun is Optional: FC target lun number'
-                          format: int32
-                          type: integer
-                        readOnly:
-                          description: |-
-                            readOnly is Optional: Defaults to false (read/write). ReadOnly here will force
-                            the ReadOnly setting in VolumeMounts.
-                          type: boolean
-                        targetWWNs:
-                          description: 'targetWWNs is Optional: FC target worldwide
-                            names (WWNs)'
-                          items:
-                            type: string
-                          type: array
-                        wwids:
-                          description: |-
-                            wwids Optional: FC volume world wide identifiers (wwids)
-                            Either wwids or combination of targetWWNs and lun must be set, but not both simultaneously.
-                          items:
-                            type: string
-                          type: array
-                      type: object
-                    flexVolume:
-                      description: |-
-                        flexVolume represents a generic volume resource that is
-                        provisioned/attached using an exec based plugin.
-                      properties:
-                        driver:
-                          description: driver is the name of the driver to use for
-                            this volume.
-                          type: string
-                        fsType:
-                          description: |-
-                            fsType is the filesystem type to mount.
-                            Must be a filesystem type supported by the host operating system.
-                            Ex. "ext4", "xfs", "ntfs". The default filesystem depends on FlexVolume script.
-                          type: string
-                        options:
-                          additionalProperties:
-                            type: string
-                          description: 'options is Optional: this field holds extra
-                            command options if any.'
-                          type: object
-                        readOnly:
-                          description: |-
-                            readOnly is Optional: defaults to false (read/write). ReadOnly here will force
-                            the ReadOnly setting in VolumeMounts.
-                          type: boolean
-                        secretRef:
-                          description: |-
-                            secretRef is Optional: secretRef is reference to the secret object containing
-                            sensitive information to pass to the plugin scripts. This may be
-                            empty if no secret object is specified. If the secret object
-                            contains more than one secret, all secrets are passed to the plugin
-                            scripts.
-                          properties:
-                            name:
-                              description: |-
-                                Name of the referent.
-                                More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                                TODO: Add other useful fields. apiVersion, kind, uid?
-                              type: string
-                          type: object
-                          x-kubernetes-map-type: atomic
-                      required:
-                      - driver
-                      type: object
-                    flocker:
-                      description: flocker represents a Flocker volume attached to
-                        a kubelet's host machine. This depends on the Flocker control
-                        service being running
-                      properties:
-                        datasetName:
-                          description: |-
-                            datasetName is Name of the dataset stored as metadata -> name on the dataset for Flocker
-                            should be considered as deprecated
-                          type: string
-                        datasetUUID:
-                          description: datasetUUID is the UUID of the dataset. This
-                            is unique identifier of a Flocker dataset
-                          type: string
-                      type: object
-                    gcePersistentDisk:
-                      description: |-
-                        gcePersistentDisk represents a GCE Disk resource that is attached to a
-                        kubelet's host machine and then exposed to the pod.
-                        More info: https://kubernetes.io/docs/concepts/storage/volumes#gcepersistentdisk
-                      properties:
-                        fsType:
-                          description: |-
-                            fsType is filesystem type of the volume that you want to mount.
-                            Tip: Ensure that the filesystem type is supported by the host operating system.
-                            Examples: "ext4", "xfs", "ntfs". Implicitly inferred to be "ext4" if unspecified.
-                            More info: https://kubernetes.io/docs/concepts/storage/volumes#gcepersistentdisk
-                            TODO: how do we prevent errors in the filesystem from compromising the machine
-                          type: string
-                        partition:
-                          description: |-
-                            partition is the partition in the volume that you want to mount.
-                            If omitted, the default is to mount by volume name.
-                            Examples: For volume /dev/sda1, you specify the partition as "1".
-                            Similarly, the volume partition for /dev/sda is "0" (or you can leave the property empty).
-                            More info: https://kubernetes.io/docs/concepts/storage/volumes#gcepersistentdisk
-                          format: int32
-                          type: integer
-                        pdName:
-                          description: |-
-                            pdName is unique name of the PD resource in GCE. Used to identify the disk in GCE.
-                            More info: https://kubernetes.io/docs/concepts/storage/volumes#gcepersistentdisk
-                          type: string
-                        readOnly:
-                          description: |-
-                            readOnly here will force the ReadOnly setting in VolumeMounts.
-                            Defaults to false.
-                            More info: https://kubernetes.io/docs/concepts/storage/volumes#gcepersistentdisk
-                          type: boolean
-                      required:
-                      - pdName
-                      type: object
-                    gitRepo:
-                      description: |-
-                        gitRepo represents a git repository at a particular revision.
-                        DEPRECATED: GitRepo is deprecated. To provision a container with a git repo, mount an
-                        EmptyDir into an InitContainer that clones the repo using git, then mount the EmptyDir
-                        into the Pod's container.
-                      properties:
-                        directory:
-                          description: |-
-                            directory is the target directory name.
-                            Must not contain or start with '..'.  If '.' is supplied, the volume directory will be the
-                            git repository.  Otherwise, if specified, the volume will contain the git repository in
-                            the subdirectory with the given name.
-                          type: string
-                        repository:
-                          description: repository is the URL
-                          type: string
-                        revision:
-                          description: revision is the commit hash for the specified
-                            revision.
-                          type: string
-                      required:
-                      - repository
-                      type: object
-                    glusterfs:
-                      description: |-
-                        glusterfs represents a Glusterfs mount on the host that shares a pod's lifetime.
-                        More info: https://examples.k8s.io/volumes/glusterfs/README.md
-                      properties:
-                        endpoints:
-                          description: |-
-                            endpoints is the endpoint name that details Glusterfs topology.
-                            More info: https://examples.k8s.io/volumes/glusterfs/README.md#create-a-pod
-                          type: string
-                        path:
-                          description: |-
-                            path is the Glusterfs volume path.
-                            More info: https://examples.k8s.io/volumes/glusterfs/README.md#create-a-pod
-                          type: string
-                        readOnly:
-                          description: |-
-                            readOnly here will force the Glusterfs volume to be mounted with read-only permissions.
-                            Defaults to false.
-                            More info: https://examples.k8s.io/volumes/glusterfs/README.md#create-a-pod
-                          type: boolean
-                      required:
-                      - endpoints
-                      - path
-                      type: object
-                    hostPath:
-                      description: |-
-                        hostPath represents a pre-existing file or directory on the host
-                        machine that is directly exposed to the container. This is generally
-                        used for system agents or other privileged things that are allowed
-                        to see the host machine. Most containers will NOT need this.
-                        More info: https://kubernetes.io/docs/concepts/storage/volumes#hostpath
-                        ---
-                        TODO(jonesdl) We need to restrict who can use host directory mounts and who can/can not
-                        mount host directories as read/write.
-                      properties:
-                        path:
-                          description: |-
-                            path of the directory on the host.
-                            If the path is a symlink, it will follow the link to the real path.
-                            More info: https://kubernetes.io/docs/concepts/storage/volumes#hostpath
-                          type: string
-                        type:
-                          description: |-
-                            type for HostPath Volume
-                            Defaults to ""
-                            More info: https://kubernetes.io/docs/concepts/storage/volumes#hostpath
-                          type: string
-                      required:
-                      - path
-                      type: object
-                    iscsi:
-                      description: |-
-                        iscsi represents an ISCSI Disk resource that is attached to a
-                        kubelet's host machine and then exposed to the pod.
-                        More info: https://examples.k8s.io/volumes/iscsi/README.md
-                      properties:
-                        chapAuthDiscovery:
-                          description: chapAuthDiscovery defines whether support iSCSI
-                            Discovery CHAP authentication
-                          type: boolean
-                        chapAuthSession:
-                          description: chapAuthSession defines whether support iSCSI
-                            Session CHAP authentication
-                          type: boolean
-                        fsType:
-                          description: |-
-                            fsType is the filesystem type of the volume that you want to mount.
-                            Tip: Ensure that the filesystem type is supported by the host operating system.
-                            Examples: "ext4", "xfs", "ntfs". Implicitly inferred to be "ext4" if unspecified.
-                            More info: https://kubernetes.io/docs/concepts/storage/volumes#iscsi
-                            TODO: how do we prevent errors in the filesystem from compromising the machine
-                          type: string
-                        initiatorName:
-                          description: |-
-                            initiatorName is the custom iSCSI Initiator Name.
-                            If initiatorName is specified with iscsiInterface simultaneously, new iSCSI interface
-                            <target portal>:<volume name> will be created for the connection.
-                          type: string
-                        iqn:
-                          description: iqn is the target iSCSI Qualified Name.
-                          type: string
-                        iscsiInterface:
-                          description: |-
-                            iscsiInterface is the interface Name that uses an iSCSI transport.
-                            Defaults to 'default' (tcp).
-                          type: string
-                        lun:
-                          description: lun represents iSCSI Target Lun number.
-                          format: int32
-                          type: integer
-                        portals:
-                          description: |-
-                            portals is the iSCSI Target Portal List. The portal is either an IP or ip_addr:port if the port
-                            is other than default (typically TCP ports 860 and 3260).
-                          items:
-                            type: string
-                          type: array
-                        readOnly:
-                          description: |-
-                            readOnly here will force the ReadOnly setting in VolumeMounts.
-                            Defaults to false.
-                          type: boolean
-                        secretRef:
-                          description: secretRef is the CHAP Secret for iSCSI target
-                            and initiator authentication
-                          properties:
-                            name:
-                              description: |-
-                                Name of the referent.
-                                More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                                TODO: Add other useful fields. apiVersion, kind, uid?
-                              type: string
-                          type: object
-                          x-kubernetes-map-type: atomic
-                        targetPortal:
-                          description: |-
-                            targetPortal is iSCSI Target Portal. The Portal is either an IP or ip_addr:port if the port
-                            is other than default (typically TCP ports 860 and 3260).
-                          type: string
-                      required:
-                      - iqn
-                      - lun
-                      - targetPortal
-                      type: object
-                    name:
-                      description: |-
-                        name of the volume.
-                        Must be a DNS_LABEL and unique within the pod.
-                        More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                      type: string
-                    nfs:
-                      description: |-
-                        nfs represents an NFS mount on the host that shares a pod's lifetime
-                        More info: https://kubernetes.io/docs/concepts/storage/volumes#nfs
-                      properties:
-                        path:
-                          description: |-
-                            path that is exported by the NFS server.
-                            More info: https://kubernetes.io/docs/concepts/storage/volumes#nfs
-                          type: string
-                        readOnly:
-                          description: |-
-                            readOnly here will force the NFS export to be mounted with read-only permissions.
-                            Defaults to false.
-                            More info: https://kubernetes.io/docs/concepts/storage/volumes#nfs
-                          type: boolean
-                        server:
-                          description: |-
-                            server is the hostname or IP address of the NFS server.
-                            More info: https://kubernetes.io/docs/concepts/storage/volumes#nfs
-                          type: string
-                      required:
-                      - path
-                      - server
-                      type: object
-                    persistentVolumeClaim:
-                      description: |-
-                        persistentVolumeClaimVolumeSource represents a reference to a
-                        PersistentVolumeClaim in the same namespace.
-                        More info: https://kubernetes.io/docs/concepts/storage/persistent-volumes#persistentvolumeclaims
-                      properties:
-                        claimName:
-                          description: |-
-                            claimName is the name of a PersistentVolumeClaim in the same namespace as the pod using this volume.
-                            More info: https://kubernetes.io/docs/concepts/storage/persistent-volumes#persistentvolumeclaims
-                          type: string
-                        readOnly:
-                          description: |-
-                            readOnly Will force the ReadOnly setting in VolumeMounts.
-                            Default false.
-                          type: boolean
-                      required:
-                      - claimName
-                      type: object
-                    photonPersistentDisk:
-                      description: photonPersistentDisk represents a PhotonController
-                        persistent disk attached and mounted on kubelets host machine
-                      properties:
-                        fsType:
-                          description: |-
-                            fsType is the filesystem type to mount.
-                            Must be a filesystem type supported by the host operating system.
-                            Ex. "ext4", "xfs", "ntfs". Implicitly inferred to be "ext4" if unspecified.
-                          type: string
-                        pdID:
-                          description: pdID is the ID that identifies Photon Controller
-                            persistent disk
-                          type: string
-                      required:
-                      - pdID
-                      type: object
-                    portworxVolume:
-                      description: portworxVolume represents a portworx volume attached
-                        and mounted on kubelets host machine
-                      properties:
-                        fsType:
-                          description: |-
-                            fSType represents the filesystem type to mount
-                            Must be a filesystem type supported by the host operating system.
-                            Ex. "ext4", "xfs". Implicitly inferred to be "ext4" if unspecified.
-                          type: string
-                        readOnly:
-                          description: |-
-                            readOnly defaults to false (read/write). ReadOnly here will force
-                            the ReadOnly setting in VolumeMounts.
-                          type: boolean
-                        volumeID:
-                          description: volumeID uniquely identifies a Portworx volume
-                          type: string
-                      required:
-                      - volumeID
-                      type: object
-                    projected:
-                      description: projected items for all in one resources secrets,
-                        configmaps, and downward API
-                      properties:
-                        defaultMode:
-                          description: |-
-                            defaultMode are the mode bits used to set permissions on created files by default.
-                            Must be an octal value between 0000 and 0777 or a decimal value between 0 and 511.
-                            YAML accepts both octal and decimal values, JSON requires decimal values for mode bits.
-                            Directories within the path are not affected by this setting.
-                            This might be in conflict with other options that affect the file
-                            mode, like fsGroup, and the result can be other mode bits set.
-                          format: int32
-                          type: integer
-                        sources:
-                          description: sources is the list of volume projections
-                          items:
-                            description: Projection that may be projected along with
-                              other supported volume types
-                            properties:
-                              configMap:
-                                description: configMap information about the configMap
-                                  data to project
-                                properties:
-                                  items:
-                                    description: |-
-                                      items if unspecified, each key-value pair in the Data field of the referenced
-                                      ConfigMap will be projected into the volume as a file whose name is the
-                                      key and content is the value. If specified, the listed keys will be
-                                      projected into the specified paths, and unlisted keys will not be
-                                      present. If a key is specified which is not present in the ConfigMap,
-                                      the volume setup will error unless it is marked optional. Paths must be
-                                      relative and may not contain the '..' path or start with '..'.
-                                    items:
-                                      description: Maps a string key to a path within
-                                        a volume.
-                                      properties:
-                                        key:
-                                          description: key is the key to project.
-                                          type: string
-                                        mode:
-                                          description: |-
-                                            mode is Optional: mode bits used to set permissions on this file.
-                                            Must be an octal value between 0000 and 0777 or a decimal value between 0 and 511.
-                                            YAML accepts both octal and decimal values, JSON requires decimal values for mode bits.
-                                            If not specified, the volume defaultMode will be used.
-                                            This might be in conflict with other options that affect the file
-                                            mode, like fsGroup, and the result can be other mode bits set.
-                                          format: int32
-                                          type: integer
-                                        path:
-                                          description: |-
-                                            path is the relative path of the file to map the key to.
-                                            May not be an absolute path.
-                                            May not contain the path element '..'.
-                                            May not start with the string '..'.
-                                          type: string
-                                      required:
-                                      - key
-                                      - path
-                                      type: object
-                                    type: array
-                                  name:
-                                    description: |-
-                                      Name of the referent.
-                                      More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                                      TODO: Add other useful fields. apiVersion, kind, uid?
-                                    type: string
-                                  optional:
-                                    description: optional specify whether the ConfigMap
-                                      or its keys must be defined
-                                    type: boolean
-                                type: object
-                                x-kubernetes-map-type: atomic
-                              downwardAPI:
-                                description: downwardAPI information about the downwardAPI
-                                  data to project
-                                properties:
-                                  items:
-                                    description: Items is a list of DownwardAPIVolume
-                                      file
-                                    items:
-                                      description: DownwardAPIVolumeFile represents
-                                        information to create the file containing
-                                        the pod field
-                                      properties:
-                                        fieldRef:
-                                          description: 'Required: Selects a field
-                                            of the pod: only annotations, labels,
-                                            name and namespace are supported.'
-                                          properties:
-                                            apiVersion:
-                                              description: Version of the schema the
-                                                FieldPath is written in terms of,
-                                                defaults to "v1".
-                                              type: string
-                                            fieldPath:
-                                              description: Path of the field to select
-                                                in the specified API version.
-                                              type: string
-                                          required:
-                                          - fieldPath
-                                          type: object
-                                          x-kubernetes-map-type: atomic
-                                        mode:
-                                          description: |-
-                                            Optional: mode bits used to set permissions on this file, must be an octal value
-                                            between 0000 and 0777 or a decimal value between 0 and 511.
-                                            YAML accepts both octal and decimal values, JSON requires decimal values for mode bits.
-                                            If not specified, the volume defaultMode will be used.
-                                            This might be in conflict with other options that affect the file
-                                            mode, like fsGroup, and the result can be other mode bits set.
-                                          format: int32
-                                          type: integer
-                                        path:
-                                          description: 'Required: Path is  the relative
-                                            path name of the file to be created. Must
-                                            not be absolute or contain the ''..''
-                                            path. Must be utf-8 encoded. The first
-                                            item of the relative path must not start
-                                            with ''..'''
-                                          type: string
-                                        resourceFieldRef:
-                                          description: |-
-                                            Selects a resource of the container: only resources limits and requests
-                                            (limits.cpu, limits.memory, requests.cpu and requests.memory) are currently supported.
-                                          properties:
-                                            containerName:
-                                              description: 'Container name: required
-                                                for volumes, optional for env vars'
-                                              type: string
-                                            divisor:
-                                              anyOf:
-                                              - type: integer
-                                              - type: string
-                                              description: Specifies the output format
-                                                of the exposed resources, defaults
-                                                to "1"
-                                              pattern: ^(\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))(([KMGTPE]i)|[numkMGTPE]|([eE](\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))))?$
-                                              x-kubernetes-int-or-string: true
-                                            resource:
-                                              description: 'Required: resource to
-                                                select'
-                                              type: string
-                                          required:
-                                          - resource
-                                          type: object
-                                          x-kubernetes-map-type: atomic
-                                      required:
-                                      - path
-                                      type: object
-                                    type: array
-                                type: object
-                              secret:
-                                description: secret information about the secret data
-                                  to project
-                                properties:
-                                  items:
-                                    description: |-
-                                      items if unspecified, each key-value pair in the Data field of the referenced
-                                      Secret will be projected into the volume as a file whose name is the
-                                      key and content is the value. If specified, the listed keys will be
-                                      projected into the specified paths, and unlisted keys will not be
-                                      present. If a key is specified which is not present in the Secret,
-                                      the volume setup will error unless it is marked optional. Paths must be
-                                      relative and may not contain the '..' path or start with '..'.
-                                    items:
-                                      description: Maps a string key to a path within
-                                        a volume.
-                                      properties:
-                                        key:
-                                          description: key is the key to project.
-                                          type: string
-                                        mode:
-                                          description: |-
-                                            mode is Optional: mode bits used to set permissions on this file.
-                                            Must be an octal value between 0000 and 0777 or a decimal value between 0 and 511.
-                                            YAML accepts both octal and decimal values, JSON requires decimal values for mode bits.
-                                            If not specified, the volume defaultMode will be used.
-                                            This might be in conflict with other options that affect the file
-                                            mode, like fsGroup, and the result can be other mode bits set.
-                                          format: int32
-                                          type: integer
-                                        path:
-                                          description: |-
-                                            path is the relative path of the file to map the key to.
-                                            May not be an absolute path.
-                                            May not contain the path element '..'.
-                                            May not start with the string '..'.
-                                          type: string
-                                      required:
-                                      - key
-                                      - path
-                                      type: object
-                                    type: array
-                                  name:
-                                    description: |-
-                                      Name of the referent.
-                                      More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                                      TODO: Add other useful fields. apiVersion, kind, uid?
-                                    type: string
-                                  optional:
-                                    description: optional field specify whether the
-                                      Secret or its key must be defined
-                                    type: boolean
-                                type: object
-                                x-kubernetes-map-type: atomic
-                              serviceAccountToken:
-                                description: serviceAccountToken is information about
-                                  the serviceAccountToken data to project
-                                properties:
-                                  audience:
-                                    description: |-
-                                      audience is the intended audience of the token. A recipient of a token
-                                      must identify itself with an identifier specified in the audience of the
-                                      token, and otherwise should reject the token. The audience defaults to the
-                                      identifier of the apiserver.
-                                    type: string
-                                  expirationSeconds:
-                                    description: |-
-                                      expirationSeconds is the requested duration of validity of the service
-                                      account token. As the token approaches expiration, the kubelet volume
-                                      plugin will proactively rotate the service account token. The kubelet will
-                                      start trying to rotate the token if the token is older than 80 percent of
-                                      its time to live or if the token is older than 24 hours.Defaults to 1 hour
-                                      and must be at least 10 minutes.
-                                    format: int64
-                                    type: integer
-                                  path:
-                                    description: |-
-                                      path is the path relative to the mount point of the file to project the
-                                      token into.
-                                    type: string
-                                required:
-                                - path
-                                type: object
-                            type: object
-                          type: array
-                      type: object
-                    quobyte:
-                      description: quobyte represents a Quobyte mount on the host
-                        that shares a pod's lifetime
-                      properties:
-                        group:
-                          description: |-
-                            group to map volume access to
-                            Default is no group
-                          type: string
-                        readOnly:
-                          description: |-
-                            readOnly here will force the Quobyte volume to be mounted with read-only permissions.
-                            Defaults to false.
-                          type: boolean
-                        registry:
-                          description: |-
-                            registry represents a single or multiple Quobyte Registry services
-                            specified as a string as host:port pair (multiple entries are separated with commas)
-                            which acts as the central registry for volumes
-                          type: string
-                        tenant:
-                          description: |-
-                            tenant owning the given Quobyte volume in the Backend
-                            Used with dynamically provisioned Quobyte volumes, value is set by the plugin
-                          type: string
-                        user:
-                          description: |-
-                            user to map volume access to
-                            Defaults to serivceaccount user
-                          type: string
-                        volume:
-                          description: volume is a string that references an already
-                            created Quobyte volume by name.
-                          type: string
-                      required:
-                      - registry
-                      - volume
-                      type: object
-                    rbd:
-                      description: |-
-                        rbd represents a Rados Block Device mount on the host that shares a pod's lifetime.
-                        More info: https://examples.k8s.io/volumes/rbd/README.md
-                      properties:
-                        fsType:
-                          description: |-
-                            fsType is the filesystem type of the volume that you want to mount.
-                            Tip: Ensure that the filesystem type is supported by the host operating system.
-                            Examples: "ext4", "xfs", "ntfs". Implicitly inferred to be "ext4" if unspecified.
-                            More info: https://kubernetes.io/docs/concepts/storage/volumes#rbd
-                            TODO: how do we prevent errors in the filesystem from compromising the machine
-                          type: string
-                        image:
-                          description: |-
-                            image is the rados image name.
-                            More info: https://examples.k8s.io/volumes/rbd/README.md#how-to-use-it
-                          type: string
-                        keyring:
-                          description: |-
-                            keyring is the path to key ring for RBDUser.
-                            Default is /etc/ceph/keyring.
-                            More info: https://examples.k8s.io/volumes/rbd/README.md#how-to-use-it
-                          type: string
-                        monitors:
-                          description: |-
-                            monitors is a collection of Ceph monitors.
-                            More info: https://examples.k8s.io/volumes/rbd/README.md#how-to-use-it
-                          items:
-                            type: string
-                          type: array
-                        pool:
-                          description: |-
-                            pool is the rados pool name.
-                            Default is rbd.
-                            More info: https://examples.k8s.io/volumes/rbd/README.md#how-to-use-it
-                          type: string
-                        readOnly:
-                          description: |-
-                            readOnly here will force the ReadOnly setting in VolumeMounts.
-                            Defaults to false.
-                            More info: https://examples.k8s.io/volumes/rbd/README.md#how-to-use-it
-                          type: boolean
-                        secretRef:
-                          description: |-
-                            secretRef is name of the authentication secret for RBDUser. If provided
-                            overrides keyring.
-                            Default is nil.
-                            More info: https://examples.k8s.io/volumes/rbd/README.md#how-to-use-it
-                          properties:
-                            name:
-                              description: |-
-                                Name of the referent.
-                                More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                                TODO: Add other useful fields. apiVersion, kind, uid?
-                              type: string
-                          type: object
-                          x-kubernetes-map-type: atomic
-                        user:
-                          description: |-
-                            user is the rados user name.
-                            Default is admin.
-                            More info: https://examples.k8s.io/volumes/rbd/README.md#how-to-use-it
-                          type: string
-                      required:
-                      - image
-                      - monitors
-                      type: object
-                    scaleIO:
-                      description: scaleIO represents a ScaleIO persistent volume
-                        attached and mounted on Kubernetes nodes.
-                      properties:
-                        fsType:
-                          description: |-
-                            fsType is the filesystem type to mount.
-                            Must be a filesystem type supported by the host operating system.
-                            Ex. "ext4", "xfs", "ntfs".
-                            Default is "xfs".
-                          type: string
-                        gateway:
-                          description: gateway is the host address of the ScaleIO
-                            API Gateway.
-                          type: string
-                        protectionDomain:
-                          description: protectionDomain is the name of the ScaleIO
-                            Protection Domain for the configured storage.
-                          type: string
-                        readOnly:
-                          description: |-
-                            readOnly Defaults to false (read/write). ReadOnly here will force
-                            the ReadOnly setting in VolumeMounts.
-                          type: boolean
-                        secretRef:
-                          description: |-
-                            secretRef references to the secret for ScaleIO user and other
-                            sensitive information. If this is not provided, Login operation will fail.
-                          properties:
-                            name:
-                              description: |-
-                                Name of the referent.
-                                More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                                TODO: Add other useful fields. apiVersion, kind, uid?
-                              type: string
-                          type: object
-                          x-kubernetes-map-type: atomic
-                        sslEnabled:
-                          description: sslEnabled Flag enable/disable SSL communication
-                            with Gateway, default false
-                          type: boolean
-                        storageMode:
-                          description: |-
-                            storageMode indicates whether the storage for a volume should be ThickProvisioned or ThinProvisioned.
-                            Default is ThinProvisioned.
-                          type: string
-                        storagePool:
-                          description: storagePool is the ScaleIO Storage Pool associated
-                            with the protection domain.
-                          type: string
-                        system:
-                          description: system is the name of the storage system as
-                            configured in ScaleIO.
-                          type: string
-                        volumeName:
-                          description: |-
-                            volumeName is the name of a volume already created in the ScaleIO system
-                            that is associated with this volume source.
-                          type: string
-                      required:
-                      - gateway
-                      - secretRef
-                      - system
-                      type: object
-                    secret:
-                      description: |-
-                        secret represents a secret that should populate this volume.
-                        More info: https://kubernetes.io/docs/concepts/storage/volumes#secret
-                      properties:
-                        defaultMode:
-                          description: |-
-                            defaultMode is Optional: mode bits used to set permissions on created files by default.
-                            Must be an octal value between 0000 and 0777 or a decimal value between 0 and 511.
-                            YAML accepts both octal and decimal values, JSON requires decimal values
-                            for mode bits. Defaults to 0644.
-                            Directories within the path are not affected by this setting.
-                            This might be in conflict with other options that affect the file
-                            mode, like fsGroup, and the result can be other mode bits set.
-                          format: int32
-                          type: integer
-                        items:
-                          description: |-
-                            items If unspecified, each key-value pair in the Data field of the referenced
-                            Secret will be projected into the volume as a file whose name is the
-                            key and content is the value. If specified, the listed keys will be
-                            projected into the specified paths, and unlisted keys will not be
-                            present. If a key is specified which is not present in the Secret,
-                            the volume setup will error unless it is marked optional. Paths must be
-                            relative and may not contain the '..' path or start with '..'.
-                          items:
-                            description: Maps a string key to a path within a volume.
-                            properties:
-                              key:
-                                description: key is the key to project.
-                                type: string
-                              mode:
-                                description: |-
-                                  mode is Optional: mode bits used to set permissions on this file.
-                                  Must be an octal value between 0000 and 0777 or a decimal value between 0 and 511.
-                                  YAML accepts both octal and decimal values, JSON requires decimal values for mode bits.
-                                  If not specified, the volume defaultMode will be used.
-                                  This might be in conflict with other options that affect the file
-                                  mode, like fsGroup, and the result can be other mode bits set.
-                                format: int32
-                                type: integer
-                              path:
-                                description: |-
-                                  path is the relative path of the file to map the key to.
-                                  May not be an absolute path.
-                                  May not contain the path element '..'.
-                                  May not start with the string '..'.
-                                type: string
-                            required:
-                            - key
-                            - path
-                            type: object
-                          type: array
-                        optional:
-                          description: optional field specify whether the Secret or
-                            its keys must be defined
-                          type: boolean
-                        secretName:
-                          description: |-
-                            secretName is the name of the secret in the pod's namespace to use.
-                            More info: https://kubernetes.io/docs/concepts/storage/volumes#secret
-                          type: string
-                      type: object
-                    storageos:
-                      description: storageOS represents a StorageOS volume attached
-                        and mounted on Kubernetes nodes.
-                      properties:
-                        fsType:
-                          description: |-
-                            fsType is the filesystem type to mount.
-                            Must be a filesystem type supported by the host operating system.
-                            Ex. "ext4", "xfs", "ntfs". Implicitly inferred to be "ext4" if unspecified.
-                          type: string
-                        readOnly:
-                          description: |-
-                            readOnly defaults to false (read/write). ReadOnly here will force
-                            the ReadOnly setting in VolumeMounts.
-                          type: boolean
-                        secretRef:
-                          description: |-
-                            secretRef specifies the secret to use for obtaining the StorageOS API
-                            credentials.  If not specified, default values will be attempted.
-                          properties:
-                            name:
-                              description: |-
-                                Name of the referent.
-                                More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                                TODO: Add other useful fields. apiVersion, kind, uid?
-                              type: string
-                          type: object
-                          x-kubernetes-map-type: atomic
-                        volumeName:
-                          description: |-
-                            volumeName is the human-readable name of the StorageOS volume.  Volume
-                            names are only unique within a namespace.
-                          type: string
-                        volumeNamespace:
-                          description: |-
-                            volumeNamespace specifies the scope of the volume within StorageOS.  If no
-                            namespace is specified then the Pod's namespace will be used.  This allows the
-                            Kubernetes name scoping to be mirrored within StorageOS for tighter integration.
-                            Set VolumeName to any name to override the default behaviour.
-                            Set to "default" if you are not using namespaces within StorageOS.
-                            Namespaces that do not pre-exist within StorageOS will be created.
-                          type: string
-                      type: object
-                    vsphereVolume:
-                      description: vsphereVolume represents a vSphere volume attached
-                        and mounted on kubelets host machine
-                      properties:
-                        fsType:
-                          description: |-
-                            fsType is filesystem type to mount.
-                            Must be a filesystem type supported by the host operating system.
-                            Ex. "ext4", "xfs", "ntfs". Implicitly inferred to be "ext4" if unspecified.
-                          type: string
-                        storagePolicyID:
-                          description: storagePolicyID is the storage Policy Based
-                            Management (SPBM) profile ID associated with the StoragePolicyName.
-                          type: string
-                        storagePolicyName:
-                          description: storagePolicyName is the storage Policy Based
-                            Management (SPBM) profile name.
-                          type: string
-                        volumePath:
-                          description: volumePath is the path that identifies vSphere
-                            volume vmdk
-                          type: string
-                      required:
-                      - volumePath
-                      type: object
-                  required:
-                  - name
-                  type: object
-                type: array
-              network:
-                properties:
-                  extraPorts:
-                    items:
-                      description: ContainerPort represents a network port in a single
-                        container.
-                      properties:
-                        containerPort:
-                          description: |-
-                            Number of port to expose on the pod's IP address.
-                            This must be a valid port number, 0 < x < 65536.
-                          format: int32
-                          type: integer
-                        hostIP:
-                          description: What host IP to bind the external port to.
-                          type: string
-                        hostPort:
-                          description: |-
-                            Number of port to expose on the host.
-                            If specified, this must be a valid port number, 0 < x < 65536.
-                            If HostNetwork is specified, this must match ContainerPort.
-                            Most containers do not need this.
-                          format: int32
-                          type: integer
-                        name:
-                          description: |-
-                            If specified, this must be an IANA_SVC_NAME and unique within the pod. Each
-                            named port in a pod must have a unique name. Name for the port that can be
-                            referred to by services.
-                          type: string
-                        protocol:
-                          default: TCP
-                          description: |-
-                            Protocol for port. Must be UDP, TCP, or SCTP.
-                            Defaults to "TCP".
-                          type: string
-                      required:
-                      - containerPort
-                      type: object
-                    type: array
-                  type:
-                    enum:
-                    - NodePort
-                    - Tailnet
-                    type: string
-                required:
-                - type
-                type: object
-              resource:
-                additionalProperties:
-                  anyOf:
-                  - type: integer
-                  - type: string
-                  pattern: ^(\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))(([KMGTPE]i)|[numkMGTPE]|([eE](\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))))?$
-                  x-kubernetes-int-or-string: true
-                type: object
-              runtimeRef:
-                properties:
-                  name:
-                    type: string
-                  namespace:
-                    type: string
-                required:
-                - name
-                type: object
-              squash:
-                default: false
-                type: boolean
-              state:
-                enum:
-                - Running
-                - Stopped
-                type: string
-              tolerations:
-                items:
-                  description: |-
-                    The pod this Toleration is attached to tolerates any taint that matches
-                    the triple <key,value,effect> using the matching operator <operator>.
-                  properties:
-                    effect:
-                      description: |-
-                        Effect indicates the taint effect to match. Empty means match all taint effects.
-                        When specified, allowed values are NoSchedule, PreferNoSchedule and NoExecute.
-                      type: string
-                    key:
-                      description: |-
-                        Key is the taint key that the toleration applies to. Empty means match all taint keys.
-                        If the key is empty, operator must be Exists; this combination means to match all values and all keys.
-                      type: string
-                    operator:
-                      description: |-
-                        Operator represents a key's relationship to the value.
-                        Valid operators are Exists and Equal. Defaults to Equal.
-                        Exists is equivalent to wildcard for value, so that a pod can
-                        tolerate all taints of a particular category.
-                      type: string
-                    tolerationSeconds:
-                      description: |-
-                        TolerationSeconds represents the period of time the toleration (which must be
-                        of effect NoExecute, otherwise this field is ignored) tolerates the taint. By default,
-                        it is not set, which means tolerate the taint forever (do not evict). Zero and
-                        negative values will be treated as 0 (evict immediately) by the system.
-                      format: int64
-                      type: integer
-                    value:
-                      description: |-
-                        Value is the taint value the toleration matches to.
-                        If the operator is Exists, the value should be empty, otherwise just a regular string.
-                      type: string
-                  type: object
-                type: array
-              workingDir:
-                type: string
-            required:
-            - resource
-            - runtimeRef
-            - state
-            type: object
-          status:
-            description: DevboxStatus defines the observed state of Devbox
-            properties:
-              commitHistory:
-                items:
-                  properties:
-                    containerID:
-                      description: ContainerID is the container id
-                      type: string
-                    image:
-                      description: Image is the image of the commit
-                      type: string
-                    node:
-                      description: Node is the node name
-                      type: string
-                    pod:
-                      description: Pod is the pod name
-                      type: string
-                    predicatedStatus:
-                      description: predicatedStatus default `pending`, will be set
-                        to `success` if pod status is running successfully.
-                      type: string
-                    status:
-                      description: status will be set based on expectedStatus after
-                        devbox pod delete or stop. if expectedStatus is still pending,
-                        it means the pod is not running successfully, so we need to
-                        set it to `failed`
-                      type: string
-                    time:
-                      description: Time is the time when the commit is created
-                      format: date-time
-                      type: string
-                  required:
-                  - containerID
-                  - image
-                  - node
-                  - pod
-                  - predicatedStatus
-                  - status
-                  - time
-                  type: object
-                type: array
-              lastState:
-                description: |-
-                  ContainerState holds a possible state of container.
-                  Only one of its members may be specified.
-                  If none of them is specified, the default one is ContainerStateWaiting.
-                properties:
-                  running:
-                    description: Details about a running container
-                    properties:
-                      startedAt:
-                        description: Time at which the container was last (re-)started
-                        format: date-time
-                        type: string
-                    type: object
-                  terminated:
-                    description: Details about a terminated container
-                    properties:
-                      containerID:
-                        description: Container's ID in the format '<type>://<container_id>'
-                        type: string
-                      exitCode:
-                        description: Exit status from the last termination of the
-                          container
-                        format: int32
-                        type: integer
-                      finishedAt:
-                        description: Time at which the container last terminated
-                        format: date-time
-                        type: string
-                      message:
-                        description: Message regarding the last termination of the
-                          container
-                        type: string
-                      reason:
-                        description: (brief) reason from the last termination of the
-                          container
-                        type: string
-                      signal:
-                        description: Signal from the last termination of the container
-                        format: int32
-                        type: integer
-                      startedAt:
-                        description: Time at which previous execution of the container
-                          started
-                        format: date-time
-                        type: string
-                    required:
-                    - exitCode
-                    type: object
-                  waiting:
-                    description: Details about a waiting container
-                    properties:
-                      message:
-                        description: Message regarding why the container is not yet
-                          running.
-                        type: string
-                      reason:
-                        description: (brief) reason the container is not yet running.
-                        type: string
-                    type: object
-                type: object
-              network:
-                properties:
-                  nodePort:
-                    format: int32
-                    type: integer
-                  tailnet:
-                    description: todo TailNet
-                    type: string
-                  type:
-                    default: NodePort
-                    enum:
-                    - NodePort
-                    - Tailnet
-                    type: string
-                required:
-                - type
-                type: object
-              phase:
-                type: string
-              state:
-                description: |-
-                  ContainerState holds a possible state of container.
-                  Only one of its members may be specified.
-                  If none of them is specified, the default one is ContainerStateWaiting.
-                properties:
-                  running:
-                    description: Details about a running container
-                    properties:
-                      startedAt:
-                        description: Time at which the container was last (re-)started
-                        format: date-time
-                        type: string
-                    type: object
-                  terminated:
-                    description: Details about a terminated container
-                    properties:
-                      containerID:
-                        description: Container's ID in the format '<type>://<container_id>'
-                        type: string
-                      exitCode:
-                        description: Exit status from the last termination of the
-                          container
-                        format: int32
-                        type: integer
-                      finishedAt:
-                        description: Time at which the container last terminated
-                        format: date-time
-                        type: string
-                      message:
-                        description: Message regarding the last termination of the
-                          container
-                        type: string
-                      reason:
-                        description: (brief) reason from the last termination of the
-                          container
-                        type: string
-                      signal:
-                        description: Signal from the last termination of the container
-                        format: int32
-                        type: integer
-                      startedAt:
-                        description: Time at which previous execution of the container
-                          started
-                        format: date-time
-                        type: string
-                    required:
-                    - exitCode
-                    type: object
-                  waiting:
-                    description: Details about a waiting container
-                    properties:
-                      message:
-                        description: Message regarding why the container is not yet
-                          running.
-                        type: string
-                      reason:
-                        description: (brief) reason the container is not yet running.
-                        type: string
-                    type: object
-                type: object
-            type: object
-        type: object
-    served: true
-    storage: true
-    subresources:
-      status: {}
----
-apiVersion: apiextensions.k8s.io/v1
-kind: CustomResourceDefinition
-metadata:
-  annotations:
-    controller-gen.kubebuilder.io/version: v0.14.0
-  name: devboxreleases.devbox.sealos.io
-spec:
-  group: devbox.sealos.io
-  names:
-    kind: DevBoxRelease
-    listKind: DevBoxReleaseList
-    plural: devboxreleases
-    singular: devboxrelease
-  scope: Namespaced
-  versions:
-  - additionalPrinterColumns:
-    - jsonPath: .spec.devboxName
-      name: DevboxName
-      type: string
-    - jsonPath: .spec.newTag
-      name: NewTag
-      type: string
-    - jsonPath: .status.phase
-      name: Phase
-      type: string
-    - jsonPath: .status.originalImage
-      name: OriginalImage
-      type: string
-    name: v1alpha1
-    schema:
-      openAPIV3Schema:
-        description: DevBoxRelease is the Schema for the devboxreleases API
-        properties:
-          apiVersion:
-            description: |-
-              APIVersion defines the versioned schema of this representation of an object.
-              Servers should convert recognized schemas to the latest internal value, and
-              may reject unrecognized values.
-              More info: https://git.k8s.io/community/contributors/devel/sig-architecture/api-conventions.md#resources
-            type: string
-          kind:
-            description: |-
-              Kind is a string value representing the REST resource this object represents.
-              Servers may infer this from the endpoint the client submits requests to.
-              Cannot be updated.
-              In CamelCase.
-              More info: https://git.k8s.io/community/contributors/devel/sig-architecture/api-conventions.md#types-kinds
-            type: string
-          metadata:
-            type: object
-          spec:
-            description: DevBoxReleaseSpec defines the desired state of DevBoxRelease
-            properties:
-              devboxName:
-                type: string
-              newTag:
-                type: string
-              notes:
-                type: string
-            required:
-            - devboxName
-            - newTag
-            type: object
-          status:
-            description: DevBoxReleaseStatus defines the observed state of DevBoxRelease
-            properties:
-              originalImage:
-                type: string
-              phase:
-                default: Pending
-                type: string
-            type: object
-        type: object
-    served: true
-    storage: true
-    subresources:
-      status: {}
----
-apiVersion: apiextensions.k8s.io/v1
-kind: CustomResourceDefinition
-metadata:
-  annotations:
-    controller-gen.kubebuilder.io/version: v0.14.0
-  name: operationrequests.devbox.sealos.io
-spec:
-  group: devbox.sealos.io
-  names:
-    kind: OperationRequest
-    listKind: OperationRequestList
-    plural: operationrequests
-    singular: operationrequest
-  scope: Namespaced
-  versions:
-  - name: v1alpha1
-    schema:
-      openAPIV3Schema:
-        description: OperationRequest is the Schema for the operationrequests API
-        properties:
-          apiVersion:
-            description: |-
-              APIVersion defines the versioned schema of this representation of an object.
-              Servers should convert recognized schemas to the latest internal value, and
-              may reject unrecognized values.
-              More info: https://git.k8s.io/community/contributors/devel/sig-architecture/api-conventions.md#resources
-            type: string
-          kind:
-            description: |-
-              Kind is a string value representing the REST resource this object represents.
-              Servers may infer this from the endpoint the client submits requests to.
-              Cannot be updated.
-              In CamelCase.
-              More info: https://git.k8s.io/community/contributors/devel/sig-architecture/api-conventions.md#types-kinds
-            type: string
-          metadata:
-            type: object
-          spec:
-            description: OperationRequestSpec defines the desired state of OperationRequest
-            type: object
-          status:
-            description: OperationRequestStatus defines the observed state of OperationRequest
-            type: object
-        type: object
-    served: true
-    storage: true
-    subresources:
-      status: {}
----
-apiVersion: apiextensions.k8s.io/v1
-kind: CustomResourceDefinition
-metadata:
-  annotations:
-    controller-gen.kubebuilder.io/version: v0.14.0
-  name: runtimeclasses.devbox.sealos.io
-spec:
-  group: devbox.sealos.io
-  names:
-    kind: RuntimeClass
-    listKind: RuntimeClassList
-    plural: runtimeclasses
-    singular: runtimeclass
-  scope: Namespaced
-  versions:
-  - name: v1alpha1
-    schema:
-      openAPIV3Schema:
-        description: RuntimeClass is the Schema for the runtimeclasses API
-        properties:
-          apiVersion:
-            description: |-
-              APIVersion defines the versioned schema of this representation of an object.
-              Servers should convert recognized schemas to the latest internal value, and
-              may reject unrecognized values.
-              More info: https://git.k8s.io/community/contributors/devel/sig-architecture/api-conventions.md#resources
-            type: string
-          kind:
-            description: |-
-              Kind is a string value representing the REST resource this object represents.
-              Servers may infer this from the endpoint the client submits requests to.
-              Cannot be updated.
-              In CamelCase.
-              More info: https://git.k8s.io/community/contributors/devel/sig-architecture/api-conventions.md#types-kinds
-            type: string
-          metadata:
-            type: object
-          spec:
-            description: RuntimeClassSpec defines the desired state of RuntimeClass
-            properties:
-              description:
-                type: string
-              kind:
-                enum:
-                - OS
-                - Language
-                - Framework
-                type: string
-              title:
-                type: string
-            required:
-            - kind
-            - title
-            type: object
-          status:
-            description: RuntimeClassStatus defines the observed state of RuntimeClass
-            type: object
-        type: object
-    served: true
-    storage: true
-    subresources:
-      status: {}
----
-apiVersion: apiextensions.k8s.io/v1
-kind: CustomResourceDefinition
-metadata:
-  annotations:
-    controller-gen.kubebuilder.io/version: v0.14.0
-  name: runtimes.devbox.sealos.io
-spec:
-  group: devbox.sealos.io
-  names:
-    kind: Runtime
-    listKind: RuntimeList
-    plural: runtimes
-    singular: runtime
-  scope: Namespaced
-  versions:
-  - additionalPrinterColumns:
-    - jsonPath: .spec.classRef
-      name: Class
-      type: string
-    - jsonPath: .spec.version
-      name: Version
-      type: string
-    - jsonPath: .spec.runtimeVersion
-      name: RuntimeVersion
-      type: string
-    - jsonPath: .spec.state
-      name: State
-      type: string
-    name: v1alpha1
-    schema:
-      openAPIV3Schema:
-        description: Runtime is the Schema for the runtimes API
-        properties:
-          apiVersion:
-            description: |-
-              APIVersion defines the versioned schema of this representation of an object.
-              Servers should convert recognized schemas to the latest internal value, and
-              may reject unrecognized values.
-              More info: https://git.k8s.io/community/contributors/devel/sig-architecture/api-conventions.md#resources
-            type: string
-          kind:
-            description: |-
-              Kind is a string value representing the REST resource this object represents.
-              Servers may infer this from the endpoint the client submits requests to.
-              Cannot be updated.
-              In CamelCase.
-              More info: https://git.k8s.io/community/contributors/devel/sig-architecture/api-conventions.md#types-kinds
-            type: string
-          metadata:
-            type: object
-          spec:
-            description: RuntimeSpec defines the desired state of Runtime
-            properties:
-              category:
-                items:
-                  type: string
-                type: array
-              classRef:
-                type: string
-              components:
-                items:
-                  properties:
-                    name:
-                      type: string
-                    version:
-                      type: string
-                  required:
-                  - name
-                  - version
-                  type: object
-                type: array
-              config:
-                properties:
-                  annotations:
-                    additionalProperties:
-                      type: string
-                    type: object
-                  appPorts:
-                    default:
-                    - name: devbox-app-port
-                      port: 8080
-                      protocol: TCP
-                    items:
-                      description: ServicePort contains information on service's port.
-                      properties:
-                        appProtocol:
-                          description: |-
-                            The application protocol for this port.
-                            This is used as a hint for implementations to offer richer behavior for protocols that they understand.
-                            This field follows standard Kubernetes label syntax.
-                            Valid values are either:
-
-
-                            * Un-prefixed protocol names - reserved for IANA standard service names (as per
-                            RFC-6335 and https://www.iana.org/assignments/service-names).
-
-
-                            * Kubernetes-defined prefixed names:
-                              * 'kubernetes.io/h2c' - HTTP/2 over cleartext as described in https://www.rfc-editor.org/rfc/rfc7540
-                              * 'kubernetes.io/ws'  - WebSocket over cleartext as described in https://www.rfc-editor.org/rfc/rfc6455
-                              * 'kubernetes.io/wss' - WebSocket over TLS as described in https://www.rfc-editor.org/rfc/rfc6455
-
-
-                            * Other protocols should use implementation-defined prefixed names such as
-                            mycompany.com/my-custom-protocol.
-                          type: string
-                        name:
-                          description: |-
-                            The name of this port within the service. This must be a DNS_LABEL.
-                            All ports within a ServiceSpec must have unique names. When considering
-                            the endpoints for a Service, this must match the 'name' field in the
-                            EndpointPort.
-                            Optional if only one ServicePort is defined on this service.
-                          type: string
-                        nodePort:
-                          description: |-
-                            The port on each node on which this service is exposed when type is
-                            NodePort or LoadBalancer.  Usually assigned by the system. If a value is
-                            specified, in-range, and not in use it will be used, otherwise the
-                            operation will fail.  If not specified, a port will be allocated if this
-                            Service requires one.  If this field is specified when creating a
-                            Service which does not need it, creation will fail. This field will be
-                            wiped when updating a Service to no longer need it (e.g. changing type
-                            from NodePort to ClusterIP).
-                            More info: https://kubernetes.io/docs/concepts/services-networking/service/#type-nodeport
-                          format: int32
-                          type: integer
-                        port:
-                          description: The port that will be exposed by this service.
-                          format: int32
-                          type: integer
-                        protocol:
-                          default: TCP
-                          description: |-
-                            The IP protocol for this port. Supports "TCP", "UDP", and "SCTP".
-                            Default is TCP.
-                          type: string
-                        targetPort:
-                          anyOf:
-                          - type: integer
-                          - type: string
-                          description: |-
-                            Number or name of the port to access on the pods targeted by the service.
-                            Number must be in the range 1 to 65535. Name must be an IANA_SVC_NAME.
-                            If this is a string, it will be looked up as a named port in the
-                            target Pod's container ports. If this is not specified, the value
-                            of the 'port' field is used (an identity map).
-                            This field is ignored for services with clusterIP=None, and should be
-                            omitted or set equal to the 'port' field.
-                            More info: https://kubernetes.io/docs/concepts/services-networking/service/#defining-a-service
-                          x-kubernetes-int-or-string: true
-                      required:
-                      - port
-                      type: object
-                    type: array
-                  args:
-                    description: kubebuilder:validation:Optional
-                    items:
-                      type: string
-                    type: array
-                  command:
-                    items:
-                      type: string
-                    type: array
-                  env:
-                    items:
-                      description: EnvVar represents an environment variable present
-                        in a Container.
-                      properties:
-                        name:
-                          description: Name of the environment variable. Must be a
-                            C_IDENTIFIER.
-                          type: string
-                        value:
-                          description: |-
-                            Variable references $(VAR_NAME) are expanded
-                            using the previously defined environment variables in the container and
-                            any service environment variables. If a variable cannot be resolved,
-                            the reference in the input string will be unchanged. Double $$ are reduced
-                            to a single $, which allows for escaping the $(VAR_NAME) syntax: i.e.
-                            "$$(VAR_NAME)" will produce the string literal "$(VAR_NAME)".
-                            Escaped references will never be expanded, regardless of whether the variable
-                            exists or not.
-                            Defaults to "".
-                          type: string
-                        valueFrom:
-                          description: Source for the environment variable's value.
-                            Cannot be used if value is not empty.
-                          properties:
-                            configMapKeyRef:
-                              description: Selects a key of a ConfigMap.
-                              properties:
-                                key:
-                                  description: The key to select.
-                                  type: string
-                                name:
-                                  description: |-
-                                    Name of the referent.
-                                    More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
-                                    TODO: Add other useful fields. apiVersion, kind, uid?
-                                  type: string
-                                optional:
-                                  description: Specify whether the ConfigMap or its
-                                    key must be defined
-                                  type: boolean
-                              required:
-                              - key
-                              type: object
-                              x-kubernetes-map-type: atomic
-                            fieldRef:
+                            configMapKeyRef:
+                              description: Selects a key of a ConfigMap.
+                              properties:
+                                key:
+                                  description: The key to select.
+                                  type: string
+                                name:
+                                  description: |-
+                                    Name of the referent.
+                                    More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#names
+                                    TODO: Add other useful fields. apiVersion, kind, uid?
+                                  type: string
+                                optional:
+                                  description: Specify whether the ConfigMap or its
+                                    key must be defined
+                                  type: boolean
+                              required:
+                              - key
+                              type: object
+                              x-kubernetes-map-type: atomic
+                            fieldRef:
                               description: |-
                                 Selects a field of the pod: supports metadata.name, metadata.namespace, `metadata.labels['<KEY>']`, `metadata.annotations['<KEY>']`,
                                 spec.nodeName, spec.serviceAccountName, status.hostIP, status.podIP, status.podIPs.
@@ -3391,8 +1042,6 @@ spec:
                       - name
                       type: object
                     type: array
-                  image:
-                    type: string
                   labels:
                     additionalProperties:
                       type: string
@@ -3443,7 +1092,7 @@ spec:
                     type: array
                   releaseArgs:
                     default:
-                    - /home/sealos/project/entrypoint.sh
+                    - /home/devbox/project/entrypoint.sh
                     items:
                       type: string
                     type: array
@@ -3455,7 +1104,7 @@ spec:
                       type: string
                     type: array
                   user:
-                    default: sealos
+                    default: devbox
                     type: string
                   volumeMounts:
                     items:
@@ -5109,30 +2758,393 @@ spec:
                       type: object
                     type: array
                   workingDir:
-                    default: /home/sealos/project
+                    default: /home/devbox/project
+                    type: string
+                type: object
+              image:
+                type: string
+              network:
+                properties:
+                  type:
+                    enum:
+                    - NodePort
+                    - Tailnet
+                    type: string
+                required:
+                - type
+                type: object
+              resource:
+                additionalProperties:
+                  anyOf:
+                  - type: integer
+                  - type: string
+                  pattern: ^(\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))(([KMGTPE]i)|[numkMGTPE]|([eE](\+|-)?(([0-9]+(\.[0-9]*)?)|(\.[0-9]+))))?$
+                  x-kubernetes-int-or-string: true
+                type: object
+              squash:
+                default: false
+                type: boolean
+              state:
+                enum:
+                - Running
+                - Stopped
+                type: string
+              templateID:
+                type: string
+              tolerations:
+                items:
+                  description: |-
+                    The pod this Toleration is attached to tolerates any taint that matches
+                    the triple <key,value,effect> using the matching operator <operator>.
+                  properties:
+                    effect:
+                      description: |-
+                        Effect indicates the taint effect to match. Empty means match all taint effects.
+                        When specified, allowed values are NoSchedule, PreferNoSchedule and NoExecute.
+                      type: string
+                    key:
+                      description: |-
+                        Key is the taint key that the toleration applies to. Empty means match all taint keys.
+                        If the key is empty, operator must be Exists; this combination means to match all values and all keys.
+                      type: string
+                    operator:
+                      description: |-
+                        Operator represents a key's relationship to the value.
+                        Valid operators are Exists and Equal. Defaults to Equal.
+                        Exists is equivalent to wildcard for value, so that a pod can
+                        tolerate all taints of a particular category.
+                      type: string
+                    tolerationSeconds:
+                      description: |-
+                        TolerationSeconds represents the period of time the toleration (which must be
+                        of effect NoExecute, otherwise this field is ignored) tolerates the taint. By default,
+                        it is not set, which means tolerate the taint forever (do not evict). Zero and
+                        negative values will be treated as 0 (evict immediately) by the system.
+                      format: int64
+                      type: integer
+                    value:
+                      description: |-
+                        Value is the taint value the toleration matches to.
+                        If the operator is Exists, the value should be empty, otherwise just a regular string.
+                      type: string
+                  type: object
+                type: array
+            required:
+            - config
+            - image
+            - resource
+            - state
+            type: object
+          status:
+            description: DevboxStatus defines the observed state of Devbox
+            properties:
+              commitHistory:
+                items:
+                  properties:
+                    containerID:
+                      description: ContainerID is the container id
+                      type: string
+                    image:
+                      description: Image is the image of the commit
+                      type: string
+                    node:
+                      description: Node is the node name
+                      type: string
+                    pod:
+                      description: Pod is the pod name
+                      type: string
+                    predicatedStatus:
+                      description: predicatedStatus default `pending`, will be set
+                        to `success` if pod status is running successfully.
+                      type: string
+                    status:
+                      description: status will be set based on expectedStatus after
+                        devbox pod delete or stop. if expectedStatus is still pending,
+                        it means the pod is not running successfully, so we need to
+                        set it to `failed`
+                      type: string
+                    time:
+                      description: Time is the time when the commit is created
+                      format: date-time
+                      type: string
+                  required:
+                  - containerID
+                  - image
+                  - node
+                  - pod
+                  - predicatedStatus
+                  - status
+                  - time
+                  type: object
+                type: array
+              lastState:
+                description: |-
+                  ContainerState holds a possible state of container.
+                  Only one of its members may be specified.
+                  If none of them is specified, the default one is ContainerStateWaiting.
+                properties:
+                  running:
+                    description: Details about a running container
+                    properties:
+                      startedAt:
+                        description: Time at which the container was last (re-)started
+                        format: date-time
+                        type: string
+                    type: object
+                  terminated:
+                    description: Details about a terminated container
+                    properties:
+                      containerID:
+                        description: Container's ID in the format '<type>://<container_id>'
+                        type: string
+                      exitCode:
+                        description: Exit status from the last termination of the
+                          container
+                        format: int32
+                        type: integer
+                      finishedAt:
+                        description: Time at which the container last terminated
+                        format: date-time
+                        type: string
+                      message:
+                        description: Message regarding the last termination of the
+                          container
+                        type: string
+                      reason:
+                        description: (brief) reason from the last termination of the
+                          container
+                        type: string
+                      signal:
+                        description: Signal from the last termination of the container
+                        format: int32
+                        type: integer
+                      startedAt:
+                        description: Time at which previous execution of the container
+                          started
+                        format: date-time
+                        type: string
+                    required:
+                    - exitCode
+                    type: object
+                  waiting:
+                    description: Details about a waiting container
+                    properties:
+                      message:
+                        description: Message regarding why the container is not yet
+                          running.
+                        type: string
+                      reason:
+                        description: (brief) reason the container is not yet running.
+                        type: string
+                    type: object
+                type: object
+              network:
+                properties:
+                  nodePort:
+                    format: int32
+                    type: integer
+                  tailnet:
+                    description: todo TailNet
+                    type: string
+                  type:
+                    default: NodePort
+                    enum:
+                    - NodePort
+                    - Tailnet
                     type: string
                 required:
-                - image
+                - type
+                type: object
+              phase:
+                type: string
+              state:
+                description: |-
+                  ContainerState holds a possible state of container.
+                  Only one of its members may be specified.
+                  If none of them is specified, the default one is ContainerStateWaiting.
+                properties:
+                  running:
+                    description: Details about a running container
+                    properties:
+                      startedAt:
+                        description: Time at which the container was last (re-)started
+                        format: date-time
+                        type: string
+                    type: object
+                  terminated:
+                    description: Details about a terminated container
+                    properties:
+                      containerID:
+                        description: Container's ID in the format '<type>://<container_id>'
+                        type: string
+                      exitCode:
+                        description: Exit status from the last termination of the
+                          container
+                        format: int32
+                        type: integer
+                      finishedAt:
+                        description: Time at which the container last terminated
+                        format: date-time
+                        type: string
+                      message:
+                        description: Message regarding the last termination of the
+                          container
+                        type: string
+                      reason:
+                        description: (brief) reason from the last termination of the
+                          container
+                        type: string
+                      signal:
+                        description: Signal from the last termination of the container
+                        format: int32
+                        type: integer
+                      startedAt:
+                        description: Time at which previous execution of the container
+                          started
+                        format: date-time
+                        type: string
+                    required:
+                    - exitCode
+                    type: object
+                  waiting:
+                    description: Details about a waiting container
+                    properties:
+                      message:
+                        description: Message regarding why the container is not yet
+                          running.
+                        type: string
+                      reason:
+                        description: (brief) reason the container is not yet running.
+                        type: string
+                    type: object
                 type: object
-              description:
-                type: string
-              runtimeVersion:
+            type: object
+        type: object
+    served: true
+    storage: true
+    subresources:
+      status: {}
+---
+apiVersion: apiextensions.k8s.io/v1
+kind: CustomResourceDefinition
+metadata:
+  annotations:
+    controller-gen.kubebuilder.io/version: v0.14.0
+  name: devboxreleases.devbox.sealos.io
+spec:
+  group: devbox.sealos.io
+  names:
+    kind: DevBoxRelease
+    listKind: DevBoxReleaseList
+    plural: devboxreleases
+    singular: devboxrelease
+  scope: Namespaced
+  versions:
+  - additionalPrinterColumns:
+    - jsonPath: .spec.devboxName
+      name: DevboxName
+      type: string
+    - jsonPath: .spec.newTag
+      name: NewTag
+      type: string
+    - jsonPath: .status.phase
+      name: Phase
+      type: string
+    - jsonPath: .status.originalImage
+      name: OriginalImage
+      type: string
+    name: v1alpha1
+    schema:
+      openAPIV3Schema:
+        description: DevBoxRelease is the Schema for the devboxreleases API
+        properties:
+          apiVersion:
+            description: |-
+              APIVersion defines the versioned schema of this representation of an object.
+              Servers should convert recognized schemas to the latest internal value, and
+              may reject unrecognized values.
+              More info: https://git.k8s.io/community/contributors/devel/sig-architecture/api-conventions.md#resources
+            type: string
+          kind:
+            description: |-
+              Kind is a string value representing the REST resource this object represents.
+              Servers may infer this from the endpoint the client submits requests to.
+              Cannot be updated.
+              In CamelCase.
+              More info: https://git.k8s.io/community/contributors/devel/sig-architecture/api-conventions.md#types-kinds
+            type: string
+          metadata:
+            type: object
+          spec:
+            description: DevBoxReleaseSpec defines the desired state of DevBoxRelease
+            properties:
+              devboxName:
                 type: string
-              state:
-                default: active
-                enum:
-                - active
-                - deprecated
+              newTag:
                 type: string
-              version:
+              notes:
                 type: string
             required:
-            - classRef
-            - config
-            - version
+            - devboxName
+            - newTag
+            type: object
+          status:
+            description: DevBoxReleaseStatus defines the observed state of DevBoxRelease
+            properties:
+              originalImage:
+                type: string
+              phase:
+                default: Pending
+                type: string
+            type: object
+        type: object
+    served: true
+    storage: true
+    subresources:
+      status: {}
+---
+apiVersion: apiextensions.k8s.io/v1
+kind: CustomResourceDefinition
+metadata:
+  annotations:
+    controller-gen.kubebuilder.io/version: v0.14.0
+  name: operationrequests.devbox.sealos.io
+spec:
+  group: devbox.sealos.io
+  names:
+    kind: OperationRequest
+    listKind: OperationRequestList
+    plural: operationrequests
+    singular: operationrequest
+  scope: Namespaced
+  versions:
+  - name: v1alpha1
+    schema:
+      openAPIV3Schema:
+        description: OperationRequest is the Schema for the operationrequests API
+        properties:
+          apiVersion:
+            description: |-
+              APIVersion defines the versioned schema of this representation of an object.
+              Servers should convert recognized schemas to the latest internal value, and
+              may reject unrecognized values.
+              More info: https://git.k8s.io/community/contributors/devel/sig-architecture/api-conventions.md#resources
+            type: string
+          kind:
+            description: |-
+              Kind is a string value representing the REST resource this object represents.
+              Servers may infer this from the endpoint the client submits requests to.
+              Cannot be updated.
+              In CamelCase.
+              More info: https://git.k8s.io/community/contributors/devel/sig-architecture/api-conventions.md#types-kinds
+            type: string
+          metadata:
+            type: object
+          spec:
+            description: OperationRequestSpec defines the desired state of OperationRequest
             type: object
           status:
-            description: RuntimeStatus defines the observed state of Runtime
+            description: OperationRequestStatus defines the observed state of OperationRequest
             type: object
         type: object
     served: true
@@ -5483,106 +3495,6 @@ rules:
   - get
 ---
 apiVersion: rbac.authorization.k8s.io/v1
-kind: ClusterRole
-metadata:
-  labels:
-    app.kubernetes.io/managed-by: kustomize
-    app.kubernetes.io/name: devbox
-  name: devbox-runtime-editor-role
-rules:
-- apiGroups:
-  - devbox.sealos.io
-  resources:
-  - runtimes
-  verbs:
-  - create
-  - delete
-  - get
-  - list
-  - patch
-  - update
-  - watch
-- apiGroups:
-  - devbox.sealos.io
-  resources:
-  - runtimes/status
-  verbs:
-  - get
----
-apiVersion: rbac.authorization.k8s.io/v1
-kind: ClusterRole
-metadata:
-  labels:
-    app.kubernetes.io/managed-by: kustomize
-    app.kubernetes.io/name: devbox
-  name: devbox-runtime-viewer-role
-rules:
-- apiGroups:
-  - devbox.sealos.io
-  resources:
-  - runtimes
-  verbs:
-  - get
-  - list
-  - watch
-- apiGroups:
-  - devbox.sealos.io
-  resources:
-  - runtimes/status
-  verbs:
-  - get
----
-apiVersion: rbac.authorization.k8s.io/v1
-kind: ClusterRole
-metadata:
-  labels:
-    app.kubernetes.io/managed-by: kustomize
-    app.kubernetes.io/name: devbox
-  name: devbox-runtimeclass-editor-role
-rules:
-- apiGroups:
-  - devbox.sealos.io
-  resources:
-  - runtimeclasses
-  verbs:
-  - create
-  - delete
-  - get
-  - list
-  - patch
-  - update
-  - watch
-- apiGroups:
-  - devbox.sealos.io
-  resources:
-  - runtimeclasses/status
-  verbs:
-  - get
----
-apiVersion: rbac.authorization.k8s.io/v1
-kind: ClusterRole
-metadata:
-  labels:
-    app.kubernetes.io/managed-by: kustomize
-    app.kubernetes.io/name: devbox
-  name: devbox-runtimeclass-viewer-role
-rules:
-- apiGroups:
-  - devbox.sealos.io
-  resources:
-  - runtimeclasses
-  verbs:
-  - get
-  - list
-  - watch
-- apiGroups:
-  - devbox.sealos.io
-  resources:
-  - runtimeclasses/status
-  verbs:
-  - get
----
-apiVersion: rbac.authorization.k8s.io/v1
 kind: RoleBinding
 metadata:
   labels:
@@ -5675,7 +3587,6 @@ spec:
         - --registry-addr={{ .registryAddr }}
         - --registry-user={{ .registryUser }}
         - --registry-password={{ .registryPassword }}
-        - --auth-addr={{ .authAddr }}
         command:
         - /manager
         image: ghcr.io/labring/sealos-devbox-controller:latest
diff --git a/controllers/devbox/internal/controller/devbox_controller.go b/controllers/devbox/internal/controller/devbox_controller.go
index 76fcb82d9dae..54eb2e84c015 100644
--- a/controllers/devbox/internal/controller/devbox_controller.go
+++ b/controllers/devbox/internal/controller/devbox_controller.go
@@ -23,6 +23,8 @@ import (
 
 	devboxv1alpha1 "github.com/labring/sealos/controllers/devbox/api/v1alpha1"
 	"github.com/labring/sealos/controllers/devbox/internal/controller/helper"
+	"github.com/labring/sealos/controllers/devbox/internal/controller/utils/matcher"
+	"github.com/labring/sealos/controllers/devbox/internal/controller/utils/resource"
 	"github.com/labring/sealos/controllers/devbox/label"
 
 	corev1 "k8s.io/api/core/v1"
@@ -37,6 +39,7 @@ import (
 	ctrl "sigs.k8s.io/controller-runtime"
 	"sigs.k8s.io/controller-runtime/pkg/builder"
 	"sigs.k8s.io/controller-runtime/pkg/client"
+	"sigs.k8s.io/controller-runtime/pkg/controller"
 	"sigs.k8s.io/controller-runtime/pkg/controller/controllerutil"
 	"sigs.k8s.io/controller-runtime/pkg/log"
 	"sigs.k8s.io/controller-runtime/pkg/predicate"
@@ -44,11 +47,12 @@ import (
 
 // DevboxReconciler reconciles a Devbox object
 type DevboxReconciler struct {
-	CommitImageRegistry     string
-	RequestCPURate          float64
-	RequestMemoryRate       float64
-	RequestEphemeralStorage string
-	LimitEphemeralStorage   string
+	CommitImageRegistry string
+
+	RequestRate      resource.RequestRate
+	EphemeralStorage resource.EphemeralStorage
+
+	PodMatchers []matcher.PodMatcher
 
 	DebugMode bool
 
@@ -260,12 +264,8 @@ func (r *DevboxReconciler) syncPod(ctx context.Context, devbox *devboxv1alpha1.D
 
 	switch devbox.Spec.State {
 	case devboxv1alpha1.DevboxStateRunning:
-		runtimecr, err := r.getRuntime(ctx, devbox)
-		if err != nil {
-			return err
-		}
 		nextCommitHistory := r.generateNextCommitHistory(devbox)
-		expectPod := r.generateDevboxPod(devbox, runtimecr, nextCommitHistory)
+		expectPod := r.generateDevboxPod(devbox, nextCommitHistory)
 
 		switch len(podList.Items) {
 		case 0:
@@ -298,7 +298,7 @@ func (r *DevboxReconciler) syncPod(ctx context.Context, devbox *devboxv1alpha1.D
 				logger.Info("pod has been deleted")
 				return r.handlePodDeleted(ctx, devbox, pod)
 			}
-			switch helper.PodMatchExpectations(expectPod, pod) {
+			switch matcher.PodMatchExpectations(expectPod, pod, r.PodMatchers...) {
 			case true:
 				// pod match expectations
 				logger.Info("pod match expectations")
@@ -343,12 +343,8 @@ func (r *DevboxReconciler) syncPod(ctx context.Context, devbox *devboxv1alpha1.D
 }
 
 func (r *DevboxReconciler) syncService(ctx context.Context, devbox *devboxv1alpha1.Devbox, recLabels map[string]string) error {
-	runtimecr, err := r.getRuntime(ctx, devbox)
-	if err != nil {
-		return err
-	}
 	var servicePorts []corev1.ServicePort
-	for _, port := range runtimecr.Spec.Config.Ports {
+	for _, port := range devbox.Spec.Config.Ports {
 		servicePorts = append(servicePorts, corev1.ServicePort{
 			Name:       port.Name,
 			Port:       port.ContainerPort,
@@ -399,7 +395,7 @@ func (r *DevboxReconciler) syncService(ctx context.Context, devbox *devboxv1alph
 
 	// Retrieve the updated Service to get the NodePort
 	var updatedService corev1.Service
-	err = retry.OnError(
+	err := retry.OnError(
 		retry.DefaultRetry,
 		func(err error) bool { return client.IgnoreNotFound(err) == nil },
 		func() error {
@@ -426,26 +422,27 @@ func (r *DevboxReconciler) syncService(ctx context.Context, devbox *devboxv1alph
 	return r.Status().Update(ctx, devbox)
 }
 
-// get the runtime
-func (r *DevboxReconciler) getRuntime(ctx context.Context, devbox *devboxv1alpha1.Devbox) (*devboxv1alpha1.Runtime, error) {
-	runtimeNamespace := devbox.Spec.RuntimeRef.Namespace
-	if runtimeNamespace == "" {
-		runtimeNamespace = devbox.Namespace
-	}
-	runtimecr := &devboxv1alpha1.Runtime{}
-	if err := r.Get(ctx, client.ObjectKey{Namespace: runtimeNamespace, Name: devbox.Spec.RuntimeRef.Name}, runtimecr); err != nil {
-		return nil, err
-	}
-	return runtimecr, nil
-}
-
 // create a new pod, add predicated status to nextCommitHistory
 func (r *DevboxReconciler) createPod(ctx context.Context, devbox *devboxv1alpha1.Devbox, expectPod *corev1.Pod, nextCommitHistory *devboxv1alpha1.CommitHistory) error {
+	logger := log.FromContext(ctx)
+
+	logger.Info("creating pod",
+		"podName", expectPod.Name,
+		"namespace", expectPod.Namespace,
+		"nextCommitHistory", nextCommitHistory)
+
 	nextCommitHistory.Status = devboxv1alpha1.CommitStatusPending
 	nextCommitHistory.PredicatedStatus = devboxv1alpha1.CommitStatusPending
+
+	if expectPod.Name == "" {
+		return fmt.Errorf("pod name cannot be empty")
+	}
+
 	if err := r.Create(ctx, expectPod); err != nil {
+		logger.Error(err, "failed to create pod")
 		return err
 	}
+
 	devbox.Status.CommitHistory = append(devbox.Status.CommitHistory, nextCommitHistory)
 	return nil
 }
@@ -463,7 +460,9 @@ func (r *DevboxReconciler) deletePod(ctx context.Context, devbox *devboxv1alpha1
 		return err
 	}
 	// update commit history status because pod has been deleted
-	devbox.Status.LastTerminationState = pod.Status.ContainerStatuses[0].State
+	if len(pod.Status.ContainerStatuses) != 0 {
+		devbox.Status.LastTerminationState = pod.Status.ContainerStatuses[0].State
+	}
 	helper.UpdateCommitHistory(devbox, pod, true)
 	return nil
 }
@@ -476,8 +475,10 @@ func (r *DevboxReconciler) handlePodDeleted(ctx context.Context, devbox *devboxv
 		return err
 	}
 	// update commit history status because pod has been deleted
+	if len(pod.Status.ContainerStatuses) != 0 {
+		devbox.Status.LastTerminationState = pod.Status.ContainerStatuses[0].State
+	}
 	helper.UpdateCommitHistory(devbox, pod, true)
-	devbox.Status.LastTerminationState = pod.Status.ContainerStatuses[0].State
 	return nil
 }
 
@@ -513,38 +514,34 @@ func (r *DevboxReconciler) deleteResourcesByLabels(ctx context.Context, obj clie
 	return client.IgnoreNotFound(err)
 }
 
-func (r *DevboxReconciler) generateDevboxPod(devbox *devboxv1alpha1.Devbox, runtime *devboxv1alpha1.Runtime, nextCommitHistory *devboxv1alpha1.CommitHistory) *corev1.Pod {
+func (r *DevboxReconciler) generateDevboxPod(devbox *devboxv1alpha1.Devbox, nextCommitHistory *devboxv1alpha1.CommitHistory) *corev1.Pod {
 	objectMeta := metav1.ObjectMeta{
 		Name:        nextCommitHistory.Pod,
 		Namespace:   devbox.Namespace,
-		Labels:      helper.GeneratePodLabels(devbox, runtime),
-		Annotations: helper.GeneratePodAnnotations(devbox, runtime),
+		Labels:      helper.GeneratePodLabels(devbox),
+		Annotations: helper.GeneratePodAnnotations(devbox),
 	}
 
-	// set up ports and env by using runtime ports and devbox extra ports
-	ports := runtime.Spec.Config.Ports
+	ports := devbox.Spec.Config.Ports
 	// TODO: add extra ports to pod, currently not support
 	// ports = append(ports, devbox.Spec.NetworkSpec.ExtraPorts...)
 
-	envs := runtime.Spec.Config.Env
-	envs = append(envs, devbox.Spec.ExtraEnvs...)
+	envs := devbox.Spec.Config.Env
 	envs = append(envs, helper.GenerateDevboxEnvVars(devbox, nextCommitHistory)...)
 
 	//get image name
 	var imageName string
 	if r.DebugMode {
-		imageName = runtime.Spec.Config.Image
+		imageName = devbox.Spec.Image
 	} else {
-		imageName = helper.GetLastSuccessCommitImageName(devbox, runtime)
+		imageName = helper.GetLastSuccessCommitImageName(devbox)
 	}
 
-	volumes := runtime.Spec.Config.Volumes
+	volumes := devbox.Spec.Config.Volumes
 	volumes = append(volumes, helper.GenerateSSHVolume(devbox))
-	volumes = append(volumes, devbox.Spec.ExtraVolumes...)
 
-	volumeMounts := runtime.Spec.Config.VolumeMounts
+	volumeMounts := devbox.Spec.Config.VolumeMounts
 	volumeMounts = append(volumeMounts, helper.GenerateSSHVolumeMounts()...)
-	volumeMounts = append(volumeMounts, devbox.Spec.ExtraVolumeMounts...)
 
 	containers := []corev1.Container{
 		{
@@ -554,16 +551,23 @@ func (r *DevboxReconciler) generateDevboxPod(devbox *devboxv1alpha1.Devbox, runt
 			Ports:        ports,
 			VolumeMounts: volumeMounts,
 
-			WorkingDir: helper.GenerateWorkingDir(devbox, runtime),
-			Command:    helper.GenerateCommand(devbox, runtime),
-			Args:       helper.GenerateDevboxArgs(devbox, runtime),
-			Resources:  helper.GenerateResourceRequirements(devbox, r.RequestCPURate, r.RequestMemoryRate, r.RequestEphemeralStorage, r.LimitEphemeralStorage),
-		},
+			WorkingDir: helper.GetWorkingDir(devbox),
+			Command:    helper.GetCommand(devbox),
+			Args:       helper.GetArgs(devbox),
+			Resources:  helper.GenerateResourceRequirements(devbox, r.RequestRate, r.EphemeralStorage)},
 	}
 
 	terminationGracePeriodSeconds := 300
 	automountServiceAccountToken := false
 
+	runtimeClassName := devbox.Spec.RuntimeClassName
+	var runtimeClassNamePtr *string
+	if runtimeClassName == "" {
+		runtimeClassNamePtr = nil
+	} else {
+		runtimeClassNamePtr = ptr.To(runtimeClassName)
+	}
+
 	expectPod := &corev1.Pod{
 		ObjectMeta: objectMeta,
 		Spec: corev1.PodSpec{
@@ -575,8 +579,11 @@ func (r *DevboxReconciler) generateDevboxPod(devbox *devboxv1alpha1.Devbox, runt
 			Containers: containers,
 			Volumes:    volumes,
 
-			Tolerations: devbox.Spec.Tolerations,
-			Affinity:    devbox.Spec.Affinity,
+			RuntimeClassName: runtimeClassNamePtr,
+
+			NodeSelector: devbox.Spec.NodeSelector,
+			Tolerations:  devbox.Spec.Tolerations,
+			Affinity:     devbox.Spec.Affinity,
 		},
 	}
 	// set controller reference and finalizer
@@ -604,6 +611,7 @@ func (r *DevboxReconciler) generateImageName(devbox *devboxv1alpha1.Devbox) stri
 // SetupWithManager sets up the controller with the Manager.
 func (r *DevboxReconciler) SetupWithManager(mgr ctrl.Manager) error {
 	return ctrl.NewControllerManagedBy(mgr).
+		WithOptions(controller.Options{MaxConcurrentReconciles: 10}).
 		For(&devboxv1alpha1.Devbox{}, builder.WithPredicates(predicate.GenerationChangedPredicate{})).
 		Owns(&corev1.Pod{}, builder.WithPredicates(predicate.ResourceVersionChangedPredicate{})). // enqueue request if pod spec/status is updated
 		Owns(&corev1.Service{}, builder.WithPredicates(predicate.GenerationChangedPredicate{})).
diff --git a/controllers/devbox/internal/controller/devboxrelease_controller.go b/controllers/devbox/internal/controller/devboxrelease_controller.go
index 538f67c7da25..543d3398e486 100644
--- a/controllers/devbox/internal/controller/devboxrelease_controller.go
+++ b/controllers/devbox/internal/controller/devboxrelease_controller.go
@@ -20,6 +20,7 @@ import (
 	"context"
 	"errors"
 	"fmt"
+	"time"
 
 	reference "github.com/google/go-containerregistry/pkg/name"
 
@@ -85,7 +86,7 @@ func (r *DevBoxReleaseReconciler) Reconcile(ctx context.Context, req ctrl.Reques
 		err := r.CreateReleaseTag(ctx, devboxRelease)
 		if err != nil && errors.Is(err, registry.ErrorManifestNotFound) {
 			logger.Info("Manifest not found, retrying", "devbox", devboxRelease.Spec.DevboxName, "newTag", devboxRelease.Spec.NewTag)
-			return ctrl.Result{Requeue: true}, nil
+			return ctrl.Result{RequeueAfter: time.Second * 10}, nil
 		} else if err != nil {
 			logger.Error(err, "Failed to create release tag", "devbox", devboxRelease.Spec.DevboxName, "newTag", devboxRelease.Spec.NewTag)
 			devboxRelease.Status.Phase = devboxv1alpha1.DevboxReleasePhaseFailed
@@ -135,7 +136,7 @@ func (r *DevBoxReleaseReconciler) GetImageInfo(devbox *devboxv1alpha1.Devbox) (s
 	if len(devbox.Status.CommitHistory) == 0 {
 		return "", "", "", fmt.Errorf("commit history is empty")
 	}
-	commitHistory := helper.GetLastSuccessCommitHistory(devbox)
+	commitHistory := helper.GetLastPredicatedSuccessCommitHistory(devbox)
 	if commitHistory == nil {
 		return "", "", "", fmt.Errorf("no successful commit history found")
 	}
diff --git a/controllers/devbox/internal/controller/helper/devbox.go b/controllers/devbox/internal/controller/helper/devbox.go
index bd00faee4c8d..73fb7ab6d7ef 100644
--- a/controllers/devbox/internal/controller/helper/devbox.go
+++ b/controllers/devbox/internal/controller/helper/devbox.go
@@ -16,7 +16,6 @@ package helper
 
 import (
 	"fmt"
-	"log/slog"
 	"sort"
 	"strings"
 
@@ -31,6 +30,7 @@ import (
 	"k8s.io/utils/ptr"
 
 	devboxv1alpha1 "github.com/labring/sealos/controllers/devbox/api/v1alpha1"
+	utilsresource "github.com/labring/sealos/controllers/devbox/internal/controller/utils/resource"
 	"github.com/labring/sealos/controllers/devbox/label"
 )
 
@@ -38,16 +38,11 @@ const (
 	DevBoxPartOf = "devbox"
 )
 
-func GeneratePodLabels(devbox *devboxv1alpha1.Devbox, runtime *devboxv1alpha1.Runtime) map[string]string {
+func GeneratePodLabels(devbox *devboxv1alpha1.Devbox) map[string]string {
 	labels := make(map[string]string)
 
-	if runtime.Spec.Config.Labels != nil {
-		for k, v := range runtime.Spec.Config.Labels {
-			labels[k] = v
-		}
-	}
-	if devbox.Spec.ExtraLabels != nil {
-		for k, v := range devbox.Spec.ExtraLabels {
+	if devbox.Spec.Config.Labels != nil {
+		for k, v := range devbox.Spec.Config.Labels {
 			labels[k] = v
 		}
 	}
@@ -62,15 +57,10 @@ func GeneratePodLabels(devbox *devboxv1alpha1.Devbox, runtime *devboxv1alpha1.Ru
 	return labels
 }
 
-func GeneratePodAnnotations(devbox *devboxv1alpha1.Devbox, runtime *devboxv1alpha1.Runtime) map[string]string {
+func GeneratePodAnnotations(devbox *devboxv1alpha1.Devbox) map[string]string {
 	annotations := make(map[string]string)
-	if runtime.Spec.Config.Annotations != nil {
-		for k, v := range runtime.Spec.Config.Annotations {
-			annotations[k] = v
-		}
-	}
-	if devbox.Spec.ExtraAnnotations != nil {
-		for k, v := range devbox.Spec.ExtraAnnotations {
+	if devbox.Spec.Config.Annotations != nil {
+		for k, v := range devbox.Spec.Config.Annotations {
 			annotations[k] = v
 		}
 	}
@@ -200,10 +190,6 @@ func podContainerID(pod *corev1.Pod) string {
 	}
 	return ""
 }
-
-// PredicateCommitStatus returns the commit status of the pod
-// if the pod container id is empty, it means the pod is pending or has't started, we can assume the image has not been committed
-// otherwise, it means the pod has been started, we can assume the image has been committed
 func PredicateCommitStatus(pod *corev1.Pod) devboxv1alpha1.CommitStatus {
 	if podContainerID(pod) == "" {
 		return devboxv1alpha1.CommitStatusPending
@@ -211,85 +197,6 @@ func PredicateCommitStatus(pod *corev1.Pod) devboxv1alpha1.CommitStatus {
 	return devboxv1alpha1.CommitStatusSuccess
 }
 
-func PodMatchExpectations(expectPod *corev1.Pod, pod *corev1.Pod) bool {
-	if len(pod.Spec.Containers) == 0 {
-		slog.Info("Pod has no containers")
-		return false
-	}
-	container := pod.Spec.Containers[0]
-	expectContainer := expectPod.Spec.Containers[0]
-
-	// Check CPU and memory limits
-	if container.Resources.Requests.Cpu().Cmp(*expectContainer.Resources.Requests.Cpu()) != 0 {
-		slog.Info("CPU requests are not equal")
-		return false
-	}
-	if container.Resources.Limits.Cpu().Cmp(*expectContainer.Resources.Limits.Cpu()) != 0 {
-		slog.Info("CPU limits are not equal")
-		return false
-	}
-	if container.Resources.Requests.Memory().Cmp(*expectContainer.Resources.Requests.Memory()) != 0 {
-		slog.Info("Memory requests are not equal")
-		return false
-	}
-	if container.Resources.Limits.Memory().Cmp(*expectContainer.Resources.Limits.Memory()) != 0 {
-		slog.Info("Memory limits are not equal")
-		return false
-	}
-
-	// Check Ephemeral Storage changes
-	if container.Resources.Requests.StorageEphemeral().Cmp(*expectContainer.Resources.Requests.StorageEphemeral()) != 0 {
-		slog.Info("Ephemeral-Storage requests are not equal")
-		return false
-	}
-	if container.Resources.Limits.StorageEphemeral().Cmp(*expectContainer.Resources.Limits.StorageEphemeral()) != 0 {
-		slog.Info("Ephemeral-Storage limits are not equal")
-		return false
-	}
-
-	// Check environment variables
-	if len(container.Env) != len(expectContainer.Env) {
-		return false
-	}
-	for _, env := range container.Env {
-		found := false
-		for _, expectEnv := range expectContainer.Env {
-			if env.Name == "SEALOS_COMMIT_IMAGE_NAME" {
-				found = true
-				break
-			}
-			if env.Name == expectEnv.Name && env.Value == expectEnv.Value {
-				found = true
-				break
-			}
-		}
-		if !found {
-			slog.Info("Environment variables are not equal", "env not found", env.Name, "env value", env.Value)
-			return false
-		}
-	}
-
-	// Check ports
-	if len(container.Ports) != len(expectContainer.Ports) {
-		return false
-	}
-	for _, expectPort := range expectContainer.Ports {
-		found := false
-		for _, podPort := range container.Ports {
-			if expectPort.ContainerPort == podPort.ContainerPort && expectPort.Protocol == podPort.Protocol {
-				found = true
-				break
-			}
-		}
-		if !found {
-			slog.Info("Ports are not equal")
-			return false
-		}
-	}
-
-	return true
-}
-
 func GenerateDevboxEnvVars(devbox *devboxv1alpha1.Devbox, nextCommitHistory *devboxv1alpha1.CommitHistory) []corev1.EnvVar {
 	// if devbox.Spec.Squash is true, and devbox.Status.CommitHistory has success commit history, we need to set SEALOS_COMMIT_IMAGE_SQUASH to true
 	doSquash := false
@@ -347,13 +254,29 @@ func GetLastSuccessCommitHistory(devbox *devboxv1alpha1.Devbox) *devboxv1alpha1.
 	return nil
 }
 
-func GetLastSuccessCommitImageName(devbox *devboxv1alpha1.Devbox, runtime *devboxv1alpha1.Runtime) string {
+func GetLastPredicatedSuccessCommitHistory(devbox *devboxv1alpha1.Devbox) *devboxv1alpha1.CommitHistory {
 	if len(devbox.Status.CommitHistory) == 0 {
-		return runtime.Spec.Config.Image
+		return nil
+	}
+	// Sort commit history by time in descending order
+	sort.Slice(devbox.Status.CommitHistory, func(i, j int) bool {
+		return devbox.Status.CommitHistory[i].Time.After(devbox.Status.CommitHistory[j].Time.Time)
+	})
+	for _, commit := range devbox.Status.CommitHistory {
+		if commit.PredicatedStatus == devboxv1alpha1.CommitStatusSuccess {
+			return commit
+		}
+	}
+	return nil
+}
+
+func GetLastSuccessCommitImageName(devbox *devboxv1alpha1.Devbox) string {
+	if len(devbox.Status.CommitHistory) == 0 {
+		return devbox.Spec.Image
 	}
 	commit := GetLastSuccessCommitHistory(devbox)
 	if commit == nil {
-		return runtime.Spec.Config.Image
+		return devbox.Spec.Image
 	}
 	return commit.Image
 }
@@ -398,76 +321,63 @@ func GenerateSSHVolume(devbox *devboxv1alpha1.Devbox) corev1.Volume {
 	}
 }
 
-func GenerateResourceRequirements(devbox *devboxv1alpha1.Devbox,
-	requestCPURate, requestMemoryRate float64,
-	requestEphemeralStorage, limitEphemeralStorage string,
-) corev1.ResourceRequirements {
+// GenerateResourceRequirements generates the resource requirements for the Devbox pod
+func GenerateResourceRequirements(devbox *devboxv1alpha1.Devbox, requestRate utilsresource.RequestRate, ephemeralStorage utilsresource.EphemeralStorage) corev1.ResourceRequirements {
 	return corev1.ResourceRequirements{
-		Requests: calculateResourceRequest(
-			corev1.ResourceList{
-				corev1.ResourceCPU:              devbox.Spec.Resource["cpu"],
-				corev1.ResourceMemory:           devbox.Spec.Resource["memory"],
-				corev1.ResourceEphemeralStorage: resource.MustParse(requestEphemeralStorage),
-			},
-			requestCPURate, requestMemoryRate,
-		),
-		Limits: corev1.ResourceList{
-			corev1.ResourceCPU:              devbox.Spec.Resource["cpu"],
-			corev1.ResourceMemory:           devbox.Spec.Resource["memory"],
-			corev1.ResourceEphemeralStorage: resource.MustParse(limitEphemeralStorage),
-		},
+		Limits:   calculateResourceLimit(devbox.Spec.Resource, ephemeralStorage),
+		Requests: calculateResourceRequest(devbox.Spec.Resource, requestRate, ephemeralStorage),
 	}
 }
 
-func IsExceededQuotaError(err error) bool {
-	return strings.Contains(err.Error(), "exceeded quota")
+func calculateResourceLimit(original corev1.ResourceList, ephemeralStorage utilsresource.EphemeralStorage) corev1.ResourceList {
+	limit := original.DeepCopy()
+	// If ephemeral storage limit is not set, set it to default limit
+	if l, ok := limit[corev1.ResourceEphemeralStorage]; !ok {
+		limit[corev1.ResourceEphemeralStorage] = ephemeralStorage.DefaultLimit
+	} else {
+		// Check if the resource limit for ephemeral storage is set and compare it, if it is exceeded the maximum limit, set it to maximum limit
+		if l.AsApproximateFloat64() > ephemeralStorage.MaximumLimit.AsApproximateFloat64() {
+			limit[corev1.ResourceEphemeralStorage] = ephemeralStorage.MaximumLimit
+		}
+	}
+	return limit
 }
 
-func calculateResourceRequest(limit corev1.ResourceList, requestCPURate, requestMemoryRate float64) corev1.ResourceList {
-	if limit == nil {
-		return nil
-	}
-	request := make(corev1.ResourceList)
+func calculateResourceRequest(original corev1.ResourceList, requestRate utilsresource.RequestRate, ephemeralStorage utilsresource.EphemeralStorage) corev1.ResourceList {
+	// deep copy limit to request, only cpu and memory are calculated
+	request := original.DeepCopy()
 	// Calculate CPU request
-	if cpu, ok := limit[corev1.ResourceCPU]; ok {
+	if cpu, ok := original[corev1.ResourceCPU]; ok {
 		cpuValue := cpu.AsApproximateFloat64()
-		cpuRequest := cpuValue / requestCPURate
+		cpuRequest := cpuValue / requestRate.CPU
 		request[corev1.ResourceCPU] = *resource.NewMilliQuantity(int64(cpuRequest*1000), resource.DecimalSI)
 	}
 	// Calculate memory request
-	if memory, ok := limit[corev1.ResourceMemory]; ok {
+	if memory, ok := original[corev1.ResourceMemory]; ok {
 		memoryValue := memory.AsApproximateFloat64()
-		memoryRequest := memoryValue / requestMemoryRate
+		memoryRequest := memoryValue / requestRate.Memory
 		request[corev1.ResourceMemory] = *resource.NewQuantity(int64(memoryRequest), resource.BinarySI)
 	}
-
-	if ephemeralStorage, ok := limit[corev1.ResourceEphemeralStorage]; ok {
-		request[corev1.ResourceEphemeralStorage] = ephemeralStorage
-	}
-
+	// Set ephemeral storage request to default request
+	request[corev1.ResourceEphemeralStorage] = ephemeralStorage.DefaultRequest
 	return request
 }
 
-// GenerateWorkingDir generates the working directory for the Devbox pod
-func GenerateWorkingDir(devbox *devboxv1alpha1.Devbox, runtime *devboxv1alpha1.Runtime) string {
-	if devbox.Spec.WorkingDir != "" {
-		return devbox.Spec.WorkingDir
-	}
-	return runtime.Spec.Config.WorkingDir
+// GetWorkingDir get the working directory for the Devbox pod
+func GetWorkingDir(devbox *devboxv1alpha1.Devbox) string {
+	return devbox.Spec.Config.WorkingDir
 }
 
-// GenerateCommand generates the command for the Devbox pod
-func GenerateCommand(devbox *devboxv1alpha1.Devbox, runtime *devboxv1alpha1.Runtime) []string {
-	if len(devbox.Spec.Command) != 0 {
-		return devbox.Spec.Command
-	}
-	return runtime.Spec.Config.Command
+// GetCommand get the command for the Devbox pod
+func GetCommand(devbox *devboxv1alpha1.Devbox) []string {
+	return devbox.Spec.Config.Command
 }
 
-// GenerateDevboxArgs generates the arguments for the Devbox pod
-func GenerateDevboxArgs(devbox *devboxv1alpha1.Devbox, runtime *devboxv1alpha1.Runtime) []string {
-	if len(devbox.Spec.Args) != 0 {
-		return devbox.Spec.Args
-	}
-	return runtime.Spec.Config.Args
+// GetArgs get the arguments for the Devbox pod
+func GetArgs(devbox *devboxv1alpha1.Devbox) []string {
+	return devbox.Spec.Config.Args
+}
+
+func IsExceededQuotaError(err error) bool {
+	return strings.Contains(err.Error(), "exceeded quota")
 }
diff --git a/controllers/devbox/internal/controller/utils/matcher/matcher.go b/controllers/devbox/internal/controller/utils/matcher/matcher.go
new file mode 100644
index 000000000000..dfad8e59f9f6
--- /dev/null
+++ b/controllers/devbox/internal/controller/utils/matcher/matcher.go
@@ -0,0 +1,154 @@
+// Copyright © 2024 sealos.
+//
+// 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.
+
+package matcher
+
+import (
+	"log/slog"
+
+	corev1 "k8s.io/api/core/v1"
+)
+
+type PodMatcher interface {
+	Match(expectPod *corev1.Pod, pod *corev1.Pod) bool
+}
+
+type ResourceMatcher struct{}
+
+func (r ResourceMatcher) Match(expectPod *corev1.Pod, pod *corev1.Pod) bool {
+	if len(pod.Spec.Containers) == 0 {
+		slog.Info("Pod has no containers")
+		return false
+	}
+	container := pod.Spec.Containers[0]
+	expectContainer := expectPod.Spec.Containers[0]
+
+	if container.Resources.Requests.Cpu().Cmp(*expectContainer.Resources.Requests.Cpu()) != 0 {
+		slog.Info("CPU requests are not equal")
+		return false
+	}
+	if container.Resources.Limits.Cpu().Cmp(*expectContainer.Resources.Limits.Cpu()) != 0 {
+		slog.Info("CPU limits are not equal")
+		return false
+	}
+	if container.Resources.Requests.Memory().Cmp(*expectContainer.Resources.Requests.Memory()) != 0 {
+		slog.Info("Memory requests are not equal")
+		return false
+	}
+	if container.Resources.Limits.Memory().Cmp(*expectContainer.Resources.Limits.Memory()) != 0 {
+		slog.Info("Memory limits are not equal")
+		return false
+	}
+	return true
+}
+
+type EphemeralStorageMatcher struct{}
+
+func (e EphemeralStorageMatcher) Match(expectPod *corev1.Pod, pod *corev1.Pod) bool {
+	if len(pod.Spec.Containers) == 0 {
+		slog.Info("Pod has no containers")
+		return false
+	}
+	container := pod.Spec.Containers[0]
+	expectContainer := expectPod.Spec.Containers[0]
+
+	if container.Resources.Limits.StorageEphemeral().Cmp(*expectContainer.Resources.Limits.StorageEphemeral()) != 0 {
+		slog.Info("Ephemeral-Storage limits are not equal")
+		return false
+	}
+	if container.Resources.Requests.StorageEphemeral().Cmp(*expectContainer.Resources.Requests.StorageEphemeral()) != 0 {
+		slog.Info("Ephemeral-Storage requests are not equal")
+		return false
+	}
+	return true
+}
+
+type EnvVarMatcher struct{}
+
+func (e EnvVarMatcher) Match(expectPod *corev1.Pod, pod *corev1.Pod) bool {
+	if len(pod.Spec.Containers) == 0 {
+		slog.Info("Pod has no containers")
+		return false
+	}
+	container := pod.Spec.Containers[0]
+	expectContainer := expectPod.Spec.Containers[0]
+
+	if len(container.Env) != len(expectContainer.Env) {
+		slog.Info("Environment variable count mismatch")
+		return false
+	}
+
+	for _, env := range container.Env {
+		found := false
+		for _, expectEnv := range expectContainer.Env {
+			if env.Name == "SEALOS_COMMIT_IMAGE_NAME" {
+				found = true
+				break
+			}
+			if env.Name == expectEnv.Name && env.Value == expectEnv.Value {
+				found = true
+				break
+			}
+		}
+		if !found {
+			slog.Info("Environment variables are not equal", "env not found", env.Name, "env value", env.Value)
+			return false
+		}
+	}
+	return true
+}
+
+type PortMatcher struct{}
+
+func (p PortMatcher) Match(expectPod *corev1.Pod, pod *corev1.Pod) bool {
+	if len(pod.Spec.Containers) == 0 {
+		slog.Info("Pod has no containers")
+		return false
+	}
+	container := pod.Spec.Containers[0]
+	expectContainer := expectPod.Spec.Containers[0]
+
+	if len(container.Ports) != len(expectContainer.Ports) {
+		slog.Info("Port count mismatch")
+		return false
+	}
+
+	for _, expectPort := range expectContainer.Ports {
+		found := false
+		for _, podPort := range container.Ports {
+			if expectPort.ContainerPort == podPort.ContainerPort && expectPort.Protocol == podPort.Protocol {
+				found = true
+				break
+			}
+		}
+		if !found {
+			slog.Info("Ports are not equal")
+			return false
+		}
+	}
+	return true
+}
+
+// PredicateCommitStatus returns the commit status of the pod
+// if the pod container id is empty, it means the pod is pending or has't started, we can assume the image has not been committed
+// otherwise, it means the pod has been started, we can assume the image has been committed
+
+func PodMatchExpectations(expectPod *corev1.Pod, pod *corev1.Pod, matchers ...PodMatcher) bool {
+	for _, matcher := range matchers {
+		if !matcher.Match(expectPod, pod) {
+			return false
+		}
+	}
+	return true
+}
diff --git a/controllers/devbox/internal/controller/helper/devbox_test.go b/controllers/devbox/internal/controller/utils/matcher/matcher_test.go
similarity index 95%
rename from controllers/devbox/internal/controller/helper/devbox_test.go
rename to controllers/devbox/internal/controller/utils/matcher/matcher_test.go
index f3563b743fb6..1317615196af 100644
--- a/controllers/devbox/internal/controller/helper/devbox_test.go
+++ b/controllers/devbox/internal/controller/utils/matcher/matcher_test.go
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-package helper
+package matcher
 
 import (
 	"testing"
@@ -156,9 +156,16 @@ func TestPodMatchExpectations(t *testing.T) {
 		},
 	}
 
+	matchers := []PodMatcher{
+		ResourceMatcher{},
+		EnvVarMatcher{},
+		PortMatcher{},
+		EphemeralStorageMatcher{},
+	}
+
 	for _, tt := range tests {
 		t.Run(tt.name, func(t *testing.T) {
-			result := PodMatchExpectations(expectPod, tt.pod)
+			result := PodMatchExpectations(expectPod, tt.pod, matchers...)
 			if result != tt.expected {
 				t.Errorf("CheckPodConsistency() = %v, expected %v", result, tt.expected)
 			}
diff --git a/controllers/devbox/internal/controller/utils/resource/resource.go b/controllers/devbox/internal/controller/utils/resource/resource.go
new file mode 100644
index 000000000000..3e0e47813602
--- /dev/null
+++ b/controllers/devbox/internal/controller/utils/resource/resource.go
@@ -0,0 +1,30 @@
+// Copyright © 2024 sealos.
+//
+// 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.
+
+package resource
+
+import (
+	"k8s.io/apimachinery/pkg/api/resource"
+)
+
+type RequestRate struct {
+	CPU    float64
+	Memory float64
+}
+
+type EphemeralStorage struct {
+	DefaultRequest resource.Quantity
+	DefaultLimit   resource.Quantity
+	MaximumLimit   resource.Quantity
+}
diff --git a/controllers/objectstorage/deploy/manifests/deploy.yaml.tmpl b/controllers/objectstorage/deploy/manifests/deploy.yaml.tmpl
index d050afa43b6e..4c3bd5aa11dc 100644
--- a/controllers/objectstorage/deploy/manifests/deploy.yaml.tmpl
+++ b/controllers/objectstorage/deploy/manifests/deploy.yaml.tmpl
@@ -277,29 +277,29 @@ rules:
       - patch
       - update
   - apiGroups:
-        - ''
-      resources:
-        - resourcequotas
-      verbs:
-        - get
-        - patch
-        - update
-        - create
-        - delete
-        - watch
-        - list
+      - ''
+    resources:
+      - resourcequotas
+    verbs:
+      - get
+      - patch
+      - update
+      - create
+      - delete
+      - watch
+      - list
   - apiGroups:
-        - ''
-      resources:
-        - resourcequotas/status
-      verbs:
-        - get
-        - patch
-        - update
-        - create
-        - delete
-        - watch
-        - list
+      - ''
+    resources:
+      - resourcequotas/status
+    verbs:
+      - get
+      - patch
+      - update
+      - create
+      - delete
+      - watch
+      - list
 
 ---
 apiVersion: rbac.authorization.k8s.io/v1
diff --git a/controllers/pkg/common/account.go b/controllers/pkg/common/account.go
index ddc0813ecddd..06a0f790d13c 100644
--- a/controllers/pkg/common/account.go
+++ b/controllers/pkg/common/account.go
@@ -15,3 +15,8 @@
 package common
 
 type Type int
+
+const (
+	Consumption Type = iota
+	SubConsumption
+)
diff --git a/controllers/pkg/database/cockroach/accountv2.go b/controllers/pkg/database/cockroach/accountv2.go
index f331269e41df..92b6065e89fa 100644
--- a/controllers/pkg/database/cockroach/accountv2.go
+++ b/controllers/pkg/database/cockroach/accountv2.go
@@ -1188,3 +1188,20 @@ func (c *Cockroach) GetUserRealNameInfoByUserID(userID string) (*types.UserRealN
 	}
 	return &userRealNameInfo, nil
 }
+
+func (c *Cockroach) GetEnterpriseRealNameInfoByUserID(userID string) (*types.EnterpriseRealNameInfo, error) {
+	// get user info
+	ops := &types.UserQueryOpts{ID: userID}
+	user, err := c.GetUserCr(ops)
+
+	if err != nil {
+		return nil, fmt.Errorf("failed to get user: %v", err)
+	}
+
+	// get user realname info
+	var enterpriseRealNameInfo types.EnterpriseRealNameInfo
+	if err := c.DB.Where(&types.EnterpriseRealNameInfo{UserUID: user.UserUID}).First(&enterpriseRealNameInfo).Error; err != nil {
+		return nil, fmt.Errorf("failed to get enterprise real name info: %w", err)
+	}
+	return &enterpriseRealNameInfo, nil
+}
diff --git a/controllers/pkg/database/interface.go b/controllers/pkg/database/interface.go
index 36e474a41ea5..09bc64591957 100644
--- a/controllers/pkg/database/interface.go
+++ b/controllers/pkg/database/interface.go
@@ -47,19 +47,21 @@ type CVM interface {
 
 type Account interface {
 	GetBillingLastUpdateTime(owner string, _type common.Type) (bool, time.Time, error)
+	GetOwnersRecentUpdates(ownerList []string, checkTime time.Time) ([]string, error)
+	GetTimeUsedNamespaceList(startTime, endTime time.Time) ([]string, error)
 	SaveBillings(billing ...*resources.Billing) error
 	SaveObjTraffic(obs ...*types.ObjectStorageTraffic) error
 	GetAllLatestObjTraffic(startTime, endTime time.Time) ([]types.ObjectStorageTraffic, error)
 	HandlerTimeObjBucketSentTraffic(startTime, endTime time.Time, bucket string) (int64, error)
 	GetTimeObjBucketBucket(startTime, endTime time.Time) ([]string, error)
 	GetUnsettingBillingHandler(owner string) ([]resources.BillingHandler, error)
-	UpdateBillingStatus(orderID string, status resources.BillingStatus) error
+	UpdateBillingStatus(orderIDs []string, status resources.BillingStatus) error
 	GetUpdateTimeForCategoryAndPropertyFromMetering(category string, property string) (time.Time, error)
 	GetAllPayment() ([]resources.Billing, error)
 	InitDefaultPropertyTypeLS() error
 	SavePropertyTypes(types []resources.PropertyType) error
 	GetBillingCount(accountType common.Type, startTime, endTime time.Time) (count, amount int64, err error)
-	GenerateBillingData(startTime, endTime time.Time, prols *resources.PropertyTypeLS, namespaces []string, owner string) (orderID []string, amount int64, err error)
+	GenerateBillingData(startTime, endTime time.Time, prols *resources.PropertyTypeLS, ownerToNS map[string][]string) (map[string][]*resources.Billing, error)
 	InsertMonitor(ctx context.Context, monitors ...*resources.Monitor) error
 	GetDistinctMonitorCombinations(startTime, endTime time.Time) ([]resources.Monitor, error)
 	DropMonitorCollectionsOlderThan(days int) error
diff --git a/controllers/pkg/database/mongo/account.go b/controllers/pkg/database/mongo/account.go
index e8dc8ce38ef7..2aa6ac5c94e4 100644
--- a/controllers/pkg/database/mongo/account.go
+++ b/controllers/pkg/database/mongo/account.go
@@ -149,6 +149,87 @@ func (m *mongoDB) GetBillingLastUpdateTime(owner string, _type common.Type) (boo
 	return false, time.Time{}, fmt.Errorf("failed to convert time field to primitive.DateTime: %v", result["time"])
 }
 
+func (m *mongoDB) GetOwnersRecentUpdates(ownerList []string, checkTime time.Time) ([]string, error) {
+	// MongoDB filter
+	filter := bson.M{
+		"owner": bson.M{"$in": ownerList},
+		"type":  common.Consumption,
+		"app_type": bson.M{
+			"$nin": []int{int(resources.AppType[resources.CVM]), int(resources.AppType[resources.LLMToken])},
+		},
+	}
+
+	// Aggregate query: Group by owner to get the latest time
+	pipeline := mongo.Pipeline{
+		{{Key: "$match", Value: filter}},
+		{{Key: "$sort", Value: bson.D{{Key: "owner", Value: 1}, {Key: "time", Value: -1}}}}, // Sort by owner first, then by time in descending order
+		{{Key: "$group", Value: bson.D{
+			{Key: "_id", Value: "$owner"},
+			{Key: "lastUpdateTime", Value: bson.D{{Key: "$first", Value: "$time"}}}, // fetch latest Time
+		}}},
+	}
+	// execute aggregate query
+	cursor, err := m.getBillingCollection().Aggregate(context.Background(), pipeline)
+	if err != nil {
+		return nil, fmt.Errorf("failed to execute aggregate query: %w", err)
+	}
+	defer cursor.Close(context.Background())
+
+	// get all the data out at once
+	var results []struct {
+		Owner         string             `bson:"_id"`
+		LastUpdateRaw primitive.DateTime `bson:"lastUpdateTime"`
+	}
+	if err := cursor.All(context.Background(), &results); err != nil {
+		return nil, fmt.Errorf("failed to decode cursor: %w", err)
+	}
+
+	// use map to store query results
+	latestUpdates := make(map[string]time.Time, len(results))
+	for _, result := range results {
+		latestUpdates[result.Owner] = result.LastUpdateRaw.Time()
+	}
+
+	// **In-memory processing: Filters owners that have been updated since checkTime**
+	var updatedOwners []string
+	for _, owner := range ownerList {
+		lastUpdateTime, exists := latestUpdates[owner]
+		if exists && (lastUpdateTime.After(checkTime) || lastUpdateTime.Equal(checkTime)) {
+			updatedOwners = append(updatedOwners, owner)
+		}
+	}
+	return updatedOwners, nil
+}
+
+func (m *mongoDB) GetTimeUsedNamespaceList(startTime, endTime time.Time) ([]string, error) {
+	pipeline := mongo.Pipeline{
+		{{Key: "$match", Value: bson.D{{Key: "time", Value: bson.D{{Key: "$gte", Value: startTime}, {Key: "$lt", Value: endTime}}}}}},
+		{{Key: "$group", Value: bson.D{{Key: "_id", Value: "$category"}}}},
+		{{Key: "$project", Value: bson.D{{Key: "_id", Value: 0}, {Key: "namespace", Value: "$_id"}}}},
+	}
+	cursor, err := m.getMonitorCollection(startTime).Aggregate(context.Background(), pipeline)
+	if err != nil {
+		return nil, fmt.Errorf("aggregate error: %v", err)
+	}
+	defer cursor.Close(context.Background())
+
+	var namespaces []string
+	for cursor.Next(context.Background()) {
+		var result struct {
+			Namespace string `bson:"namespace"`
+		}
+		err := cursor.Decode(&result)
+		if err != nil {
+			return nil, fmt.Errorf("decode error: %v", err)
+		}
+		namespaces = append(namespaces, result.Namespace)
+	}
+	if err = cursor.Err(); err != nil {
+		return nil, fmt.Errorf("cursor error: %v", err)
+	}
+	return namespaces, nil
+}
+
 func (m *mongoDB) GetUnsettingBillingHandler(owner string) ([]resources.BillingHandler, error) {
 	filter := bson.M{
 		"owner": owner,
@@ -178,15 +259,15 @@ func (m *mongoDB) GetUnsettingBillingHandler(owner string) ([]resources.BillingH
 	return results, nil
 }
 
-func (m *mongoDB) UpdateBillingStatus(orderID string, status resources.BillingStatus) error {
+func (m *mongoDB) UpdateBillingStatus(orderIDs []string, status resources.BillingStatus) error {
 	// create a query filter
-	filter := bson.M{"order_id": orderID}
+	filter := bson.M{"order_id": bson.M{"$in": orderIDs}}
 	update := bson.M{
 		"$set": bson.M{
 			"status": status,
 		},
 	}
-	_, err := m.getBillingCollection().UpdateOne(context.Background(), filter, update)
+	_, err := m.getBillingCollection().UpdateMany(context.Background(), filter, update)
 	if err != nil {
 		return fmt.Errorf("update error: %v", err)
 	}
@@ -421,185 +502,234 @@ func (m *mongoDB) SavePropertyTypes(types []resources.PropertyType) error {
 	return err
 }
 
-func (m *mongoDB) GenerateBillingData(startTime, endTime time.Time, prols *resources.PropertyTypeLS, namespaces []string, owner string) (orderID []string, amount int64, err error) {
-	minutes := endTime.Sub(startTime).Minutes()
-
-	groupStage := bson.D{
-		primitive.E{Key: "_id", Value: bson.D{{Key: "type", Value: "$type"}, {Key: "name", Value: "$name"}, {Key: "category", Value: "$category"}, {Key: "parent_type", Value: "$parent_type"}, {Key: "parent_name", Value: "$parent_name"}}},
-		primitive.E{Key: "count", Value: bson.D{{Key: "$sum", Value: 1}}},
+func (m *mongoDB) GenerateBillingData(startTime, endTime time.Time, prols *resources.PropertyTypeLS, ownerToNS map[string][]string) (map[string][]*resources.Billing, error) {
+	ownerMonitors, err := m.FetchOwnerMonitorRecords(startTime, endTime, ownerToNS)
+	if err != nil {
+		return nil, fmt.Errorf("failed to fetch monitor records: %v", err)
 	}
-
-	projectStage := bson.D{
-		primitive.E{Key: "_id", Value: 0},
-		primitive.E{Key: "type", Value: "$_id.type"},
-		primitive.E{Key: "name", Value: "$_id.name"},
-		primitive.E{Key: "parent_type", Value: "$_id.parent_type"},
-		primitive.E{Key: "parent_name", Value: "$_id.parent_name"},
-		primitive.E{Key: "category", Value: "$_id.category"},
+	var ownerBillings = make(map[string][]*resources.Billing)
+	for owner, monitors := range ownerMonitors {
+		billings, err := GenerateBillingDataFromRecords(monitors, prols, startTime, endTime, owner)
+		if err != nil {
+			return nil, fmt.Errorf("failed to generate billing data: %v", err)
+		}
+		ownerBillings[owner] = billings
 	}
+	return ownerBillings, nil
+}
 
-	// initialize the used phase
-	usedStage := bson.M{}
-
-	// Build the $group and $project phases dynamically from EnumMap
-	for key, value := range prols.EnumMap {
-		keyStr := strconv.Itoa(int(key))
-
-		// $max - $min;
-		// When max is not zero, the minimum value other than the zero value is used to prevent some data from obtaining a value in special cases
-		// max-min=0 if the hour has only one data piece or no data piece
-		if value.PriceType == resources.DIF {
-			// for non 0 $min
-			minWithCondition := bson.D{
-				{Key: "$min", Value: bson.D{
-					{Key: "$cond", Value: bson.A{
-						bson.D{{Key: "$eq", Value: bson.A{"$used." + keyStr, 0}}},
-						nil, // 将0值排除在外
-						"$used." + keyStr,
-					}},
-				}},
-			}
-
-			groupStage = append(groupStage,
-				primitive.E{Key: keyStr + "_max", Value: bson.D{{Key: "$max", Value: "$used." + keyStr}}}, // 正常计算$max
-				primitive.E{Key: keyStr + "_min", Value: minWithCondition},
-			)
-
-			// added to the used phase
-			usedStage[keyStr] = bson.D{{Key: "$subtract", Value: bson.A{
-				"$" + keyStr + "_max",
-				"$" + keyStr + "_min",
-			}}}
-			continue
-		}
-		if value.PriceType == resources.SUM {
-			groupStage = append(groupStage, primitive.E{Key: keyStr, Value: bson.D{{Key: "$sum", Value: "$used." + keyStr}}})
-			usedStage[keyStr] = bson.D{{Key: "$toInt", Value: "$" + keyStr}}
-			continue
+func (m *mongoDB) FetchOwnerMonitorRecords(startTime, endTime time.Time, ownerToNS map[string][]string) (map[string][]resources.Monitor, error) {
+	// collect all namespaces to avoid repetition
+	nsSet := make(map[string]struct{})
+	for _, nsList := range ownerToNS {
+		for _, ns := range nsList {
+			nsSet[ns] = struct{}{}
 		}
-		groupStage = append(groupStage, primitive.E{Key: keyStr, Value: bson.D{{Key: "$sum", Value: "$used." + keyStr}}})
-		usedStage[keyStr] = bson.D{{Key: "$toInt", Value: bson.D{{Key: "$round", Value: bson.D{{Key: "$divide", Value: bson.A{
-			"$" + keyStr, minutes}}}}}}}
+	}
+	namespaces := make([]string, 0, len(nsSet))
+	for ns := range nsSet {
+		namespaces = append(namespaces, ns)
 	}
 
-	// add the used phase to the $project phase
-	projectStage = append(projectStage, primitive.E{Key: "used", Value: usedStage})
-
-	// construction-pipeline
-	pipeline := mongo.Pipeline{
-		{{Key: "$match", Value: bson.D{{Key: "time", Value: bson.D{{Key: "$gte", Value: startTime}, {Key: "$lt", Value: endTime}}}, {Key: "category", Value: bson.D{{Key: "$in", Value: namespaces}}}}}},
-		{{Key: "$group", Value: groupStage}},
-		{{Key: "$project", Value: projectStage}},
+	// get all matching monitor records from mongodb
+	collection := m.getMonitorCollection(startTime)
+	filter := bson.M{
+		"time":     bson.M{"$gte": startTime, "$lt": endTime},
+		"category": bson.M{"$in": namespaces}, // 查询所有涉及的 namespaces
 	}
 
-	cursor, err := m.getMonitorCollection(startTime).Aggregate(context.Background(), pipeline)
+	cursor, err := collection.Find(context.Background(), filter)
 	if err != nil {
-		return nil, 0, fmt.Errorf("aggregate error: %v", err)
+		return nil, fmt.Errorf("failed to find monitor records: %w", err)
 	}
 	defer cursor.Close(context.Background())
 
-	var appCostsMap = make(map[string]map[string][]resources.AppCost)
-	// map[ns/type]int64
-	var nsTypeAmount = make(map[string]int64)
-
-	for cursor.Next(context.Background()) {
-		var result struct {
-			Type       uint8                 `bson:"type"`
-			Namespace  string                `bson:"category"`
-			Name       string                `bson:"name"`
-			ParentType uint8                 `bson:"parent_type"`
-			ParentName string                `bson:"parent_name"`
-			Used       resources.EnumUsedMap `bson:"used"`
+	// reading mongodb data
+	var allRecords []resources.Monitor
+	if err := cursor.All(context.Background(), &allRecords); err != nil {
+		return nil, fmt.Errorf("failed to decode monitor records: %w", err)
+	}
+
+	// build the mapping of owner monitor data
+	ownerMonitorRecords := make(map[string][]resources.Monitor)
+	for _, record := range allRecords {
+		for owner, nsList := range ownerToNS {
+			// Only the records of the namespace that belong to the owner are saved
+			for _, ns := range nsList {
+				if record.Category == ns {
+					ownerMonitorRecords[owner] = append(ownerMonitorRecords[owner], record)
+					break // avoid duplicate additions
+				}
+			}
 		}
+	}
 
-		err := cursor.Decode(&result)
-		if err != nil {
-			return nil, 0, fmt.Errorf("decode error: %v", err)
-		}
+	return ownerMonitorRecords, nil
+}
 
-		//TODO delete
-		//logger.Info("generate billing data", "result", result)
+func GenerateBillingDataFromRecords(records []resources.Monitor, prols *resources.PropertyTypeLS, startTime, endTime time.Time, owner string) (billings []*resources.Billing, err error) {
+	// Calculate the interval (minutes) to ensure that the divisor is not 0
+	minutes := math.Max(endTime.Sub(startTime).Minutes(), 1)
 
-		if _, ok := appCostsMap[result.Namespace]; !ok {
-			appCostsMap[result.Namespace] = make(map[string][]resources.AppCost)
+	// 存储分组后的数据
+	aggregatedMap := make(map[string]*struct {
+		resources.Monitor
+		UsedValues map[uint8][]int64
+		Count      int64
+	})
+
+	// 分组 key 生成规则
+	genGroupKey := func(rec resources.Monitor) string {
+		return fmt.Sprintf("%s/%d/%s", rec.Category, rec.Type, rec.Name)
+	}
+
+	// 遍历所有记录，按分组键聚合
+	for _, rec := range records {
+		key := genGroupKey(rec)
+		if _, ok := aggregatedMap[key]; !ok {
+			aggregatedMap[key] = &struct {
+				resources.Monitor
+				UsedValues map[uint8][]int64
+				Count      int64
+			}{
+				Monitor:    rec,
+				UsedValues: make(map[uint8][]int64),
+				Count:      0,
+			}
 		}
-		strType := strconv.Itoa(int(result.Type))
-		if _, ok := appCostsMap[result.Namespace][strType]; !ok {
-			appCostsMap[result.Namespace][strType] = make([]resources.AppCost, 0)
+		aggregatedMap[key].Count++
+		for k, v := range rec.Used {
+			//aggregatedMap[key].UsedValues[k] = append(aggregatedMap[key].UsedValues[k], v)
+			if _, exists := aggregatedMap[key].UsedValues[k]; !exists {
+				aggregatedMap[key].UsedValues[k] = make([]int64, 0, len(records))
+			}
+			aggregatedMap[key].UsedValues[k] = append(aggregatedMap[key].UsedValues[k], v)
+		}
+	}
+
+	// 存储最终计费数据
+	// map[namespace]map[app_type | parent_type/parent_name][]resources.AppCost
+	appCostsMap := make(map[string]map[string][]resources.AppCost)
+	nsTypeAmount := make(map[string]map[string]int64)
+
+	calculateFinalUsed := func(values map[uint8][]int64, prols *resources.PropertyTypeLS, minutes float64) map[uint8]int64 {
+		finalUsed := make(map[uint8]int64)
+		for propKey, vals := range values {
+			if prop, ok := prols.EnumMap[propKey]; ok {
+				finalUsed[propKey] = computeUsedValue(vals, prop, minutes)
+			}
 		}
+		return finalUsed
+	}
+	// 计算最终 Used 数据
+	for _, agg := range aggregatedMap {
+		finalUsed := calculateFinalUsed(agg.UsedValues, prols, minutes)
+		// 计算费用
 		appCost := resources.AppCost{
-			Type:       result.Type,
-			Used:       result.Used,
-			Name:       result.Name,
+			Type:       agg.Type,
+			Name:       agg.Name,
+			Used:       finalUsed,
 			UsedAmount: make(map[uint8]int64),
 		}
-		// Calculate the amount and set the used value
-		for property := range result.Used {
-			if prop, ok := prols.EnumMap[property]; ok {
+		var totalAmount int64
+		for propKey, usedVal := range finalUsed {
+			if prop, ok := prols.EnumMap[propKey]; ok {
 				if prop.UnitPrice > 0 {
-					appCost.UsedAmount[property] = int64(math.Ceil(float64(result.Used[property]) * prop.UnitPrice))
-					appCost.Amount += appCost.UsedAmount[property]
+					feeFloat := float64(usedVal) * prop.UnitPrice
+					if feeFloat > math.MaxInt64 {
+						return nil, fmt.Errorf("fee calculation overflow: %f", feeFloat)
+					}
+					fee := int64(math.Ceil(feeFloat))
+					appCost.UsedAmount[propKey] = fee
+					totalAmount += fee
 				}
 			}
 		}
-		if appCost.Amount == 0 {
+		if totalAmount == 0 {
 			continue
 		}
-		key := result.Namespace + "/" + strType
-		if result.ParentType != 0 && result.ParentName != "" {
-			key = result.Namespace + "/" + strconv.Itoa(int(result.ParentType)) + "/" + result.ParentName
+		appCost.Amount = totalAmount
+		groupKey := strconv.Itoa(int(agg.Type))
+		if agg.ParentType != 0 && agg.ParentName != "" {
+			groupKey = strconv.Itoa(int(agg.ParentType)) + "/" + agg.ParentName
+		}
+		ns := agg.Category
+		if _, ok := nsTypeAmount[ns]; !ok {
+			nsTypeAmount[ns] = make(map[string]int64)
+		}
+		nsTypeAmount[ns][groupKey] += totalAmount
+
+		if _, ok := appCostsMap[ns]; !ok {
+			appCostsMap[ns] = make(map[string][]resources.AppCost)
 		}
-		nsTypeAmount[key] += appCost.Amount
-		appCostsMap[result.Namespace][key] = append(appCostsMap[result.Namespace][key], appCost)
+		appCostsMap[ns][groupKey] = append(appCostsMap[ns][groupKey], appCost)
 	}
+	billings = make([]*resources.Billing, 0)
 
+	// 生成 Billing 数据
 	for ns, appCostMap := range appCostsMap {
-		for tp, appCost := range appCostMap {
-			amountt := nsTypeAmount[tp]
-			if amountt == 0 {
+		for tp, appCostList := range appCostMap {
+			amount := nsTypeAmount[ns][tp]
+			if amount <= 0 {
 				continue
 			}
 			id, err := gonanoid.New(12)
 			if err != nil {
-				return nil, 0, fmt.Errorf("generate billing id error: %v", err)
+				return nil, fmt.Errorf("generate billing id error: %v", err)
 			}
-			// tp = ns/type/parentName && parentName not contain "/"
-			appType, appName := 0, ""
-			switch strings.Count(tp, "/") {
-			case 1:
-				appType, _ = strconv.Atoi(strings.Split(tp, "/")[1])
-			case 2:
-				appType, _ = strconv.Atoi(strings.Split(tp, "/")[1])
-				appName = strings.Split(tp, "/")[2]
+			parts := strings.Split(tp, "/")
+			appType, _ := strconv.Atoi(parts[0])
+			appName := ""
+			if len(parts) > 1 {
+				appName = parts[1]
 			}
-			billing := resources.Billing{
+			billings = append(billings, &resources.Billing{
 				OrderID:   id,
 				Type:      Consumption,
 				Namespace: ns,
 				AppType:   uint8(appType),
 				AppName:   appName,
-				AppCosts:  appCost,
-				Amount:    amountt,
+				AppCosts:  appCostList,
+				Amount:    amount,
 				Owner:     owner,
 				Time:      endTime,
 				Status:    resources.Settled,
-			}
-			amount += amountt
-			orderID = append(orderID, id)
-			// Insert the billing document
-			_, err = m.getBillingCollection().InsertOne(context.Background(), billing)
-			if err != nil {
-				return nil, 0, fmt.Errorf("insert error: %v", err)
-			}
-			//TODO delete
-			//logger.Info("generate billing data", "billing", billing)
+			})
 		}
 	}
+	return billings, nil
+}
 
-	if err = cursor.Err(); err != nil {
-		return nil, 0, fmt.Errorf("cursor error: %v", err)
+func computeUsedValue(usedValues []int64, prop resources.PropertyType, minutes float64) int64 {
+	switch prop.PriceType {
+	case resources.DIF:
+		var maxVal int64 = -math.MaxInt64
+		var minVal int64 = math.MaxInt64
+		for _, v := range usedValues {
+			if v > maxVal {
+				maxVal = v
+			}
+			if v != 0 && v < minVal {
+				minVal = v
+			}
+		}
+		if maxVal > minVal {
+			return maxVal - minVal
+		}
+		return 0
+	case resources.SUM:
+		var sum int64
+		for _, v := range usedValues {
+			sum += v
+		}
+		return sum
+	default:
+		var sum int64
+		for _, v := range usedValues {
+			sum += v
+		}
+		return int64(math.Round(float64(sum) / minutes))
 	}
-	return orderID, amount, nil
 }
 
 func (m *mongoDB) GetUpdateTimeForCategoryAndPropertyFromMetering(category string, property string) (time.Time, error) {
diff --git a/controllers/pkg/database/mongo/account_test.go b/controllers/pkg/database/mongo/account_test.go
index 82f3f94f121b..46d3ef147b4a 100644
--- a/controllers/pkg/database/mongo/account_test.go
+++ b/controllers/pkg/database/mongo/account_test.go
@@ -294,27 +294,6 @@ info generate billing data used {2 ns-7uyfrr47 pay-xy map[0:325 1:166 2:0]}
 	   cpu: 500m
 	   memory: 256Mi
 */
-func TestMongoDB_GenerateBillingData(t *testing.T) {
-	dbCTX := context.Background()
-
-	m, err := NewMongoInterface(dbCTX, os.Getenv("MONGODB_URI"))
-	if err != nil {
-		t.Errorf("failed to connect mongo: error = %v", err)
-	}
-	defer func() {
-		if err = m.Disconnect(dbCTX); err != nil {
-			t.Errorf("failed to disconnect mongo: error = %v", err)
-		}
-	}()
-	queryTime := time.Now().UTC()
-
-	ids, amount, err := m.GenerateBillingData(queryTime.Add(-1*time.Hour), queryTime, resources.DefaultPropertyTypeLS, []string{"ns-7uyfrr47", "ns-1jc12uh6", "ns-ezplle8l"}, "1jc12uh6")
-	if err != nil {
-		t.Fatalf("failed to generate billing data: %v", err)
-	}
-	t.Logf("generate billing data used %v", amount)
-	t.Logf("generate billing data used %v", ids)
-}
 
 func TestMongoDB_SetPropertyTypeLS(t *testing.T) {
 	dbCTX := context.Background()
@@ -479,3 +458,72 @@ func Test_mongoDB_GetTimeObjBucketBucket(t *testing.T) {
 		t.Logf("bucket: %#+v", bucket)
 	}
 }
+
+func Test_mongoDB_GetTimeUsedOwnerList(t *testing.T) {
+	dbCTX := context.Background()
+
+	m, err := NewMongoInterface(dbCTX, "")
+	if err != nil {
+		t.Errorf("failed to connect mongo: error = %v", err)
+	}
+	defer func() {
+		if err = m.Disconnect(dbCTX); err != nil {
+			t.Errorf("failed to disconnect mongo: error = %v", err)
+		}
+	}()
+
+	owners, err := m.GetTimeUsedNamespaceList(time.Now().UTC().Add(-time.Hour), time.Now().UTC())
+	if err != nil {
+		t.Fatalf("failed to get time used owner list: %v", err)
+	}
+	t.Logf("get time used owner list success: %v", owners)
+}
+
+func Test_mongoDB_GenerateBillingData(t *testing.T) {
+	dbCTX := context.Background()
+
+	m, err := NewMongoInterface(dbCTX, os.Getenv("MONGO_URI"))
+	if err != nil {
+		t.Errorf("failed to connect mongo: error = %v", err)
+	}
+	defer func() {
+		if err = m.Disconnect(dbCTX); err != nil {
+			t.Errorf("failed to disconnect mongo: error = %v", err)
+		}
+	}()
+
+	prols := resources.DefaultPropertyTypeLS
+	ownerToNS := map[string][]string{
+		"ax1uut8w": {"ns-tnw80mhk", "ns-ax1uut8w"},
+	}
+	billings, err := m.GenerateBillingData(time.Now().UTC().Add(-time.Hour), time.Now().UTC(), prols, ownerToNS)
+	if err != nil {
+		t.Fatalf("failed to generate billing data: %v", err)
+	}
+	for _, billing := range billings {
+		for _, bill := range billing {
+			t.Logf("%+v\n", bill)
+		}
+	}
+}
+
+func Test_mongoDB_GetOwnersWithoutRecentUpdates(t *testing.T) {
+	dbCTX := context.Background()
+
+	m, err := NewMongoInterface(dbCTX, "")
+	if err != nil {
+		t.Errorf("failed to connect mongo: error = %v", err)
+	}
+	defer func() {
+		if err = m.Disconnect(dbCTX); err != nil {
+			t.Errorf("failed to disconnect mongo: error = %v", err)
+		}
+	}()
+	now := time.Now().UTC()
+	endHourTime := time.Date(now.Year(), now.Month(), now.Day(), now.Hour(), 0, 0, 0, time.Local).UTC()
+	owners, err := m.GetOwnersRecentUpdates([]string{"nfhmc74p"}, endHourTime)
+	if err != nil {
+		t.Fatalf("failed to get owners without recent updates: %v", err)
+	}
+	t.Logf("get owners without recent updates success: %v", owners)
+}
diff --git a/controllers/pkg/resources/resources.go b/controllers/pkg/resources/resources.go
index 542798b12be5..79ba47529cd7 100644
--- a/controllers/pkg/resources/resources.go
+++ b/controllers/pkg/resources/resources.go
@@ -135,7 +135,7 @@ type Billing struct {
 	// if type = Transfer, then transfer is not nil
 	Transfer *Transfer `json:"transfer" bson:"transfer,omitempty"`
 	Detail   string    `json:"detail" bson:"detail,omitempty"`
-	UserUID  uuid.UUID `json:"user_uid" bson:"user_uid,omitempty"`
+	//UserUID  uuid.UUID `json:"user_uid" bson:"user_uid,omitempty"`
 }
 
 type Payment struct {
diff --git a/controllers/pkg/types/global.go b/controllers/pkg/types/global.go
index 12ce3a8db7a1..4404fd102802 100644
--- a/controllers/pkg/types/global.go
+++ b/controllers/pkg/types/global.go
@@ -301,3 +301,21 @@ type UserRealNameInfo struct {
 func (UserRealNameInfo) TableName() string {
 	return "UserRealNameInfo"
 }
+
+type EnterpriseRealNameInfo struct {
+	ID                       uuid.UUID       `gorm:"column:id;type:uuid;default:gen_random_uuid();primary_key"`
+	UserUID                  uuid.UUID       `gorm:"column:userUid;type:uuid;unique"`
+	EnterpriseName           *string         `gorm:"column:enterpriseName;type:text"`
+	EnterpriseQualification  *string         `gorm:"column:enterpriseQualification;type:text"`
+	LegalRepresentativePhone *string         `gorm:"column:legalRepresentativePhone;type:text"`
+	IsVerified               bool            `gorm:"column:isVerified;type:boolean;default:false"`
+	VerificationStatus       *string         `gorm:"column:verificationStatus;type:text"`
+	CreatedAt                time.Time       `gorm:"column:createdAt;type:timestamp(3) with time zone;default:current_timestamp()"`
+	UpdatedAt                time.Time       `gorm:"column:updatedAt;type:timestamp(3) with time zone;autoUpdateTime"`
+	AdditionalInfo           json.RawMessage `gorm:"column:additionalInfo;type:jsonb"`
+	SupportingMaterials      json.RawMessage `gorm:"column:supportingMaterials;type:jsonb"`
+}
+
+func (EnterpriseRealNameInfo) TableName() string {
+	return "EnterpriseRealNameInfo"
+}
diff --git a/docs/4.0/docs/Community.md b/docs/4.0/docs/Community.md
index 6722b4c49c50..2f1b01d67106 100644
--- a/docs/4.0/docs/Community.md
+++ b/docs/4.0/docs/Community.md
@@ -3,5 +3,5 @@
 Sealos is an open source project that is driven by the participation of users and contributors. If you have questions or suggestions about using the product while reading this documentation, please try the following ways to seek support. Our team and community will do their best to help you.
 
 + 💬 Join our [Discord server](https://discord.gg/qzBmGGZGk7) is to chat with Sealos developers and other Sealos users. This is a good place to learn about Sealos and Kubernetes, ask questions, and share your experiences.
-+ 🐦 Tweet at @sealosio on [Twitter](https://twitter.com/sealosio) and follow us.
++ 🐦 Tweet at @Sailos_io on [Twitter](https://twitter.com/Sailos_io) and follow us.
 + 🐞 Create [GitHub Issues](https://github.com/labring/sealos/issues/new/choose) for bug reports and feature requests.
\ No newline at end of file
diff --git a/docs/4.0/i18n/zh-Hans/Community.md b/docs/4.0/i18n/zh-Hans/Community.md
index 1c7654defbdc..c015bb6aee20 100644
--- a/docs/4.0/i18n/zh-Hans/Community.md
+++ b/docs/4.0/i18n/zh-Hans/Community.md
@@ -7,5 +7,5 @@ Sealos 是一个由用户和贡献者参与推动的开源项目，如果您对
   ![](https://oss.laf.run/htr4n1-images/sealos-qr-code.jpg)
 
 + 💬 加入我们的 [Discord 服务器](https://discord.gg/qzBmGGZGk7)，与 Sealos 开发者和终端用户进行交流。
-+ 🐦 在 [Twitter](https://twitter.com/sealosio) 上关注我们。
++ 🐦 在 [Twitter](https://twitter.com/Sailos_io) 上关注我们。
 + 🐞 请将任何 Sealos 的 Bug、问题和需求提交到 [GitHub Issue](https://github.com/labring/sealos/issues/new/choose)。
\ No newline at end of file
diff --git a/docs/5.0/docs/community.md b/docs/5.0/docs/community.md
index 696dbfcc7fa1..eb8c107e584c 100644
--- a/docs/5.0/docs/community.md
+++ b/docs/5.0/docs/community.md
@@ -1,6 +1,6 @@
 ---
 keywords: [Sealos, open source project, Kubernetes, Discord server, GitHub Issues]
-description: Sealos is an open source project driven by user participation. Join our Discord server, tweet at @sealosio, or create GitHub Issues for support.
+description: Sealos is an open source project driven by user participation. Join our Discord server, tweet at @Sailos_io, or create GitHub Issues for support.
 ---
 
 # Community
@@ -11,5 +11,5 @@ team and community will do their best to help you.
 
 + 💬 Join our [Discord server](https://discord.gg/qzBmGGZGk7) is to chat with Sealos developers and other Sealos users.
   This is a good place to learn about Sealos and Kubernetes, ask questions, and share your experiences.
-+ 🐦 Tweet at @sealosio on [Twitter](https://twitter.com/sealosio) and follow us.
++ 🐦 Tweet at @Sailos_io on [Twitter](https://twitter.com/Sailos_io) and follow us.
 + 🐞 Create [GitHub Issues](https://github.com/labring/sealos/issues/new/choose) for bug reports and feature requests.
\ No newline at end of file
diff --git a/docs/5.0/docs/user-guide/devbox/faq.md b/docs/5.0/docs/user-guide/devbox/faq.md
index 41fb84a6df14..0e55a5164aff 100644
--- a/docs/5.0/docs/user-guide/devbox/faq.md
+++ b/docs/5.0/docs/user-guide/devbox/faq.md
@@ -114,33 +114,4 @@ Alternatively, you could change your application's port.
 
 ## 9. How to Change the Default User to Root in Devbox
 
-If you want to connect to Devbox as the root user when opening a local editor, please follow these steps. First, ensure
-your Devbox can connect properly using the default configuration. Open the file `~/.ssh/sealos/devbox_config` on your
-local machine. If you are uncertain about the file's location, please refer to Question 2.
-
-Locate the configuration that you wish to modify to use the root user, for example:
-
-```config
-Host usw.sailos.io_ns-rqtny6y6_devbox1234
-  HostName usw.sailos.io
-  User devbox
-  Port 40911
-  IdentityFile ~/.ssh/sealos/usw.sailos.io_ns-rqtny6y6_devbox1234
-  IdentitiesOnly yes
-  StrictHostKeyChecking no
-```
-
-Change the `User` value to root, as follows:
-
-```config
-Host usw.sailos.io_ns-rqtny6y6_devbox1234
-  HostName usw.sailos.io
-  User root
-  Port 40911
-  IdentityFile ~/.ssh/sealos/usw.sailos.io_ns-rqtny6y6_devbox1234
-  IdentitiesOnly yes
-  StrictHostKeyChecking no
-```
-
-After saving the changes, exit the local editor connected to Devbox and then reopen the editor. You should now be
-connected to Devbox as the root user.
\ No newline at end of file
+Run 'sudo su' in the terminal to switch to the root user.
diff --git a/docs/5.0/i18n/zh-Hans/community.md b/docs/5.0/i18n/zh-Hans/community.md
index a7f0dd161af0..274cb076d243 100644
--- a/docs/5.0/i18n/zh-Hans/community.md
+++ b/docs/5.0/i18n/zh-Hans/community.md
@@ -12,5 +12,5 @@ Sealos 是一个由用户和贡献者参与推动的开源项目，如果您对
 ![](https://oss.laf.run/htr4n1-images/sealos-qr-code.jpg)
 
 + 💬 加入我们的 [Discord 服务器](https://discord.gg/qzBmGGZGk7)，与 Sealos 开发者和终端用户进行交流。
-+ 🐦 在 [Twitter](https://twitter.com/sealosio) 上关注我们。
++ 🐦 在 [Twitter](https://twitter.com/Sailos_io) 上关注我们。
 + 🐞 请将任何 Sealos 的 Bug、问题和需求提交到 [GitHub Issue](https://github.com/labring/sealos/issues/new/choose)。
\ No newline at end of file
diff --git a/docs/5.0/i18n/zh-Hans/user-guide/devbox/faq.md b/docs/5.0/i18n/zh-Hans/user-guide/devbox/faq.md
index 794a022a44f1..2fdb800ffb9e 100644
--- a/docs/5.0/i18n/zh-Hans/user-guide/devbox/faq.md
+++ b/docs/5.0/i18n/zh-Hans/user-guide/devbox/faq.md
@@ -107,34 +107,7 @@ sudo go run main.go
 
 或者变更你的端口。
 
-## 9、如何在 Devbox 中更换默认的用户为 root 用户
-
-如果你需要在打开本地编辑器时，链接到 Devbox 的用户为 root，可以参考以下的步骤。
-首先请确保你的 Devbox 在使用默认的配置时，可以正常连接。
-打开本地电脑的 `~/.ssh/sealos/devbox_config`，如果不清楚这个文件在哪里，请参考问题2。
-
-找到你需要切换为 root 用户的配置，例如:
 
-```config
-Host usw.sailos.io_ns-rqtny6y6_devbox1234
-  HostName usw.sailos.io
-  User devbox
-  Port 40911
-  IdentityFile ~/.ssh/sealos/usw.sailos.io_ns-rqtny6y6_devbox1234
-  IdentitiesOnly yes
-  StrictHostKeyChecking no
-```
-
-修改 `User` 的值为 root，例如:
-
-```config
-Host usw.sailos.io_ns-rqtny6y6_devbox1234
-  HostName usw.sailos.io
-  User root
-  Port 40911
-  IdentityFile ~/.ssh/sealos/usw.sailos.io_ns-rqtny6y6_devbox1234
-  IdentitiesOnly yes
-  StrictHostKeyChecking no
-```
+## 9、如何在 Devbox 中更换默认的用户为 root 用户
 
-保存之后退出打开了 Devbox 的本地编辑器，重新打开编辑器，连接到 Devbox，此时的用户已经切换为 root。
\ No newline at end of file
+终端里运行`sudo su`即可切换到 root 用户。
diff --git a/docs/blog/en/2023/how-sealos-cloud-mastered-multi-tenancy-with-the-right-gateway-choice/images/envoy-resource.png b/docs/blog/en/2023/how-sealos-cloud-mastered-multi-tenancy-with-the-right-gateway-choice/images/envoy-resource.png
deleted file mode 100644
index c3db14f508dc..000000000000
Binary files a/docs/blog/en/2023/how-sealos-cloud-mastered-multi-tenancy-with-the-right-gateway-choice/images/envoy-resource.png and /dev/null differ
diff --git a/docs/blog/en/2023/how-sealos-cloud-mastered-multi-tenancy-with-the-right-gateway-choice/images/higress-controller.png b/docs/blog/en/2023/how-sealos-cloud-mastered-multi-tenancy-with-the-right-gateway-choice/images/higress-controller.png
deleted file mode 100644
index c4835a35efba..000000000000
Binary files a/docs/blog/en/2023/how-sealos-cloud-mastered-multi-tenancy-with-the-right-gateway-choice/images/higress-controller.png and /dev/null differ
diff --git a/docs/blog/en/2023/how-sealos-cloud-mastered-multi-tenancy-with-the-right-gateway-choice/images/higress-gateway.png b/docs/blog/en/2023/how-sealos-cloud-mastered-multi-tenancy-with-the-right-gateway-choice/images/higress-gateway.png
deleted file mode 100644
index e607ff6143bc..000000000000
Binary files a/docs/blog/en/2023/how-sealos-cloud-mastered-multi-tenancy-with-the-right-gateway-choice/images/higress-gateway.png and /dev/null differ
diff --git a/docs/blog/en/2023/how-sealos-cloud-mastered-multi-tenancy-with-the-right-gateway-choice/images/nginx-resource.png b/docs/blog/en/2023/how-sealos-cloud-mastered-multi-tenancy-with-the-right-gateway-choice/images/nginx-resource.png
deleted file mode 100644
index aa36990d2d9c..000000000000
Binary files a/docs/blog/en/2023/how-sealos-cloud-mastered-multi-tenancy-with-the-right-gateway-choice/images/nginx-resource.png and /dev/null differ
diff --git a/docs/blog/en/2023/how-sealos-cloud-mastered-multi-tenancy-with-the-right-gateway-choice/index.md b/docs/blog/en/2023/how-sealos-cloud-mastered-multi-tenancy-with-the-right-gateway-choice/index.md
deleted file mode 100644
index 11107935c333..000000000000
--- a/docs/blog/en/2023/how-sealos-cloud-mastered-multi-tenancy-with-the-right-gateway-choice/index.md
+++ /dev/null
@@ -1,127 +0,0 @@
----
-slug: how-sealos-cloud-mastered-multi-tenancy-with-the-right-gateway-choice
-title: How Sealos Cloud Mastered Multi-Tenancy with the Right Gateway Choice
-description: Explore how Sealos Cloud optimizes its gateway selection amidst handling hundreds of thousands of Ingress rules and strict multi-tenancy requirements. From the limitations of Nginx Ingress to the eventual choice of Higress, this article delves deep into the performance, stability, and security of various gateway options, offering valuable insights for gateway selection in multi-tenant scenarios in public network environments.
-authors: [fanux]
-tags: [Kubernetes, Sealos, Gateway]
-keywords: [Cloud Operating System, Sealos, K8s, Cloud Native, Gateway, Envoy, Ingress]
-image: images/feature.jpg
-date: 2024-01-20T10:00
----
-
-[Sealos](https://sealos.io) Cloud has stretched the capabilities of nearly all the leading open-source gateways to their limits. This article aims to serve as a practical guide, helping to navigate common challenges and offering advice for choosing the right gateway.
-
-<!--truncate-->
-
-## Complex Challenges in Sealos Cloud
-
-Ever since the launch of [Sealos Cloud](https://cloud.sealos.io), the platform has seen a meteoric rise in user numbers, currently standing at **87,000 registered users**. Each of these users creates applications, and each application demands its individual access point, leading to an extraordinarily large number of routing entries across the entire cluster. **This necessitates support for ingress capabilities on the scale of hundreds of thousands.**
-
-Furthermore, offering shared cluster services on the public internet places stringent demands on multi-tenancy. It's crucial that user routes are completely isolated from one another to ensure optimal route integrity, demanding high-quality isolation and sophisticated traffic control measures.
-
-The exposure to potential cyber threats is extensive in public clouds. Hackers not only target applications running on the cloud but also aim at the platform's outbound network infrastructure, thereby intensifying the security challenges.
-
-The demands on controller performance and stability are substantial. Many controllers, when faced with an increasing number of routing entries, consume extensive resources, which can sometimes lead to Out of Memory (OOM) issues, ultimately causing gateway failures.
-
-## Nginx Ingress
-
-Our initial choice was Nginx Ingress, but we eventually faced several critical issues that proved to be deal-breakers:
-
-* **Reload dilemma**: Every ingress modification results in brief disconnections. In a cluster bustling with users, the high frequency of ingress adjustments leads to consistent network instability.
-* **Unreliable long connections**: Due to the dynamic nature of adjustments, long-term connections are prone to frequent disruptions.
-* **Suboptimal performance:** The gateway's responsiveness is sluggish, and it's relatively resource-hungry.
-
-These significant concerns have led us to move away from gateways rooted in Nginx architecture. Our empirical testing revealed that Envoy-based gateways significantly outperform others, showing minimal performance overhead in both the control and data planes.
-
-Here's a glimpse of Envoy's performance:
-
-![](images/envoy-resource.png)
-
-In contrast, here's what we observed with Nginx's performance:
-
-![](images/nginx-resource.png)
-
-The disparity is pronounced, leading us to decisively set aside options based on Nginx and fully embrace the robust capabilities of Envoy.
-
-## APISIX
-
-[APISIX](https://github.com/apache/apisix) is a commendable project, particularly in addressing Nginx reload issues. At [Laf](https://github.com/labring/laf), we initially embraced APISIX. However, we encountered instability with its Ingress Controller, leading to frequent major disruptions and controller OOM issues. Despite our preference for APISIX, these persistent issues necessitated a switch to an alternative gateway. The APISIX community is actively working on these challenges, and we look forward to its continued improvement.
-
-In summary, while APISIX demonstrates excellent stability, its controller still requires significant optimization and stability enhancements. The community provides robust support, but **due to our immediate operational challenges, we had to transition to a different gateway solution.**
-
-## Cilium Gateway
-
-Having switched our [CNI](https://sealos.io/docs/self-hosting/lifecycle-management/quick-start/deploy-kubernetes#install-kubernetes-cluster) to Cilium early on, we recognized its potential and contemplated using the Cilium Gateway. However, reality presented its challenges.
-
-[Cilium Gateway](https://cilium.io/use-cases/gateway-api/) exclusively supports LB mode, creating a dependency on cloud provider LBs. Given our need for private deployment scenarios, this dependence was undesirable. In terms of stability, the Ingress activation delay in scenarios with numerous routes was significantly prolonged, taking minutes instead of the preferable 5 seconds. **Therefore, we concluded that it's necessary to wait for further development in this aspect.**
-
-## Envoy Gateway
-
-In the realm of Kubernetes (K8s) standards, there is a noticeable shift from the traditional Ingress to the Gateway standard. Our foundational preference for Envoy leads us to consider the implementation of the [Envoy Gateway](https://github.com/envoyproxy/gateway) as a promising option. Our exploration of the Envoy Gateway revealed that it is still in a preliminary phase, plagued by several instability issues like memory overflows, path policies not being effective, and certain functionalities not working in the merge gateway mode. We are actively engaged in resolving these issues and are contributing to the upstream community with constructive feedback and improvements. Our aim is to nurture the Envoy Gateway to a level where it becomes fully viable for production environments.
-
-## The High-Prestige but Less Practical Gateway Standard
-
-The Gateway standard finds itself in a tricky situation. It appears the designers may not have thoroughly explored multi-tenant environments in practice. When a cluster is shared among multiple tenants, it is crucial to clearly define and separate the rights and responsibilities of administrators and users. Gateway's initial design overlooked this aspect. For instance:
-
-```yaml
-apiVersion: gateway.networking.k8s.io/v1
-kind: Gateway
-metadata:
-  name: eg
-spec:
-  gatewayClassName: eg
-  listeners:
-  - name: http
-    port: 80
-    protocol: HTTP
-    # hostname: "*.example.com"
-  - name: https
-    port: 443
-    protocol: HTTPS
-    # hostname: "*.example.com"
-    tls:
-      mode: Terminate
-      certificateRefs:
-      - kind: Secret
-        name: example-com
-```
-
-Settings like listening ports should ideally be managed by cluster administrators rather than ordinary users. On the other hand, configuring TLS certificates should be more user-centric, although administrators might still need some control. However, in this setup, the delineation of permissions is unclear. Consequently, users are also given the ability to configure the Gateway, leading to the necessity for intricate permission control in the controller, such as managing port whitelists and detecting conflicts.
-
-A more sophisticated design approach might involve relocating tenant-level fields to HTTPRoute or establishing a separate CRD, thereby clarifying the distinction between regular users and super administrators. The current approach is functional, but it tends to be somewhat muddled and less efficient.
-
-## Higress: The Clear Winner
-
-Beyond the key projects we focused on, numerous others were evaluated but are not listed here. Ultimately, Sealos chose [Higress](https://github.com/alibaba/higress) for its gateway needs.
-
-Our criteria for gateway selection were straightforward: we sought a solution that was not only functionally adequate but also highly stable. Higress emerged as our choice, essentially by process of elimination.
-
-**Stability was our primary concern. Among the contenders, Higress was the only one meeting our production standards**, although some challenges arose. Thankfully, the proactive Higress community swiftly resolved these issues. Notable challenges included:
-
-1. **Ingress Activation Speed** – Initially, it took over two minutes for new routes to activate when dealing with many entries. This was optimized by the community to about 3 seconds, a remarkable improvement that eliminated the need for further optimization, as it now outpaces the container Ready time. Higress's use of an incremental configuration loading approach ensures exceptional performance, even with a high volume of routing entries.
-2. **Controller OOM** – Previously, the controller faced memory issues due to high resource consumption without dynamic loading. These issues have been effectively addressed.
-3. **Timeout Issues** – In one of our primary clusters, we encountered sporadic request timeouts related to the onDemandRDS configuration. We've temporarily disabled this feature and are investigating further. This problem was not present in our other clusters.
-
-From a security standpoint, many issues we faced were linked to performance bottlenecks, such as traffic surges overwhelming the gateway. This underscores the vital importance of gateway performance. In our tests, Envoy demonstrated remarkable robustness, and the design of the controller proved to be a critical factor in operational success. Higress has shown exceptional performance in this regard:
-
-![](images/higress-controller.png)
-
-![](images/higress-gateway.png)
-
-Given our extensive routing and high-volume traffic, Higress stands out for its remarkably low resource demand.
-
-Higress also boasts compatibility with Nginx Ingress syntax, mainly in annotations. Our prior reliance on Ingress meant there was almost no need for code migration, allowing for a swift upgrade process within minutes.
-
-To further encourage community development, we also have recommendations for Higress:
-
-* Enhanced support for the Gateway standard is needed. Although it already supports the v1 version, it lacks full compatibility with the features available on Ingress.
-* We suggest the introduction of more sophisticated functionalities, especially in areas like security and circuit breaking. We are open to paying for these features, but as our platform evolves, stronger functionalities become necessary.
-* We advise developing additional peripheral features through a plugin mechanism, aiming to make the core features more cohesive, simpler, and more reliable.
-
-## Summary
-
-Gateways are a fundamental component for cloud services and applications. As our scale grows, we face an array of new challenges. Our aim is to build strong collaborations with the broader community, enhancing the development of open-source gateways and benefiting a larger pool of developers.
-
-The gateways mentioned are all of high quality. Sealos not utilizing them is not a commentary on their effectiveness but a reflection of our unique and stringent scenarios. Gateways that support multi-tenancy in public internet environments are few. Therefore, it's crucial for decision-makers to consider their specific scenarios. Our choices should serve as a guideline, and Sealos is dedicated to maintaining an open approach in monitoring the evolution of various gateways.
-
-We are immensely grateful to the Higress open-source community for their substantial support and to the Alibaba Cloud Native Team for contributing such a valuable project to the community.
diff --git a/docs/blog/en/2023/k8s-multi-tenancy.md b/docs/blog/en/2023/k8s-multi-tenancy.md
deleted file mode 100644
index 99239400d712..000000000000
--- a/docs/blog/en/2023/k8s-multi-tenancy.md
+++ /dev/null
@@ -1,94 +0,0 @@
----
-slug: k8s-multi-tenancy
-title: The Promise and Challenges of Kubernetes Multi-Tenant
-description: explores the value proposition of multi-tenant Kubernetes, implementation hurdles, and potential solutions to unlock its benefits.
-authors: [fanux]
-tags: [Kubernetes, Sealos, Multi-Tenant]
-keywords: [Cloud Operating System, Sealos, K8s, Cloud Native, Cloud Computing, Cloud OS, PaaS, Multi-Tenant, Runtime Isolation, Namespace]
-image: https://cdn.jsdelivr.net/gh/yangchuansheng/imghosting6@main/uPic/2023-11-29-17-36-fBsk9p.jpg
-date: 2023-11-29T10:00
----
-
-In today's business landscape, managing cloud and server resources is becoming increasingly unwieldy as companies diversify and scale. While powerful, Kubernetes lacks native support for multi-tenancy - the ability to securely isolate multiple tenant workloads. This gap creates deployment friction for teams and missed efficiency opportunities for enterprises.
-
-**This article explores the value proposition of multi-tenant Kubernetes, implementation hurdles, and potential solutions to unlock its benefits.**
-
-<!--truncate-->
-
-## The Potential of Multi-Tenant Kubernetes
-
-Multi-tenancy refers to an architecture allowing multiple users or "tenants" to share resources from the same system while keeping data isolated and secure. For Kubernetes, this means running workloads from different teams on a shared cluster without risk of resource conflicts, data leaks, or security issues.
-
-![Diagram of single vs multi-tenant Kubernetes](https://cdn.jsdelivr.net/gh/yangchuansheng/imghosting6@main/uPic/2023-11-29-10-34-rLPyaY.jpg)
-
-### Pain Points of Single-Tenant Setups
-
-Consider an enterprise Kubernetes cluster used by 20 internal departments. Without multi-tenancy, several pain points emerge:
-
-1. **Inefficiency** - Deployments get bottlenecked through cluster administrators, hampering velocity.
-2. **Underutilization** - Workloads cannot mix, leading to resource stranding.
-3. **Sprawl** - Lacking isolation allows cluster entanglement over time.
-4. **Limitations** - Fixed single-tenant structure strains under changing demands.
-
-![Comparison table of single vs multi-tenant Kubernetes](https://cdn.jsdelivr.net/gh/yangchuansheng/imghosting6@main/uPic/2023-11-29-15-53-DGg4ig.png)
-
-### The Multi-Tenant Advantage
-
-Conversely, effective multi-tenancy unlocks greater cloud agility:
-
-1. **Organization** - Teams self-manage resources without wasteful allocation conflicts.
-2. **Velocity** - Services rapidly provision without administrative bottlenecks.
-3. **Efficiency** - Cluster administrators focus holistically rather than application-by-application.
-4. **Resilience** - Workload isolation enhances stability despite diverse deployments.
-
-## Navigating Multi-Tenancy Challenges in Kubernetes
-
-In the Kubernetes (K8s) landscape, establishing a multi-tenant architecture is a complex endeavor, transcending the mere application of namespaces and involving an array of technical intricacies.
-
-### Challenge 1: Curbing Over-Privilege Risks
-
-Central to a multi-tenant K8s framework is the strict regulation of user permissions. In scenarios where a cluster is shared among several users, overly privileged individuals can pose a serious threat. Prohibitions against accessing server nodes or executing node-level commands, such as `kubectl get node`, are essential. Further, it's crucial to curtail other high-risk activities, including the activation of container privileged modes, and sharing of host filesystems, ports, and networks.
-
-Sealos addresses these concerns through a multi-faceted isolation approach. It employs OpenEBS for block-level storage isolation, Firecracker and Cloud Hypervisor for computational isolation, and Cilium for network isolation, ensuring that the activities of one tenant do not adversely affect others.
-
-### Challenge 2: User Identity, Authorization, and Namespace Ties
-
-Inherent to K8s is the absence of a native user management framework. This necessitates the creation of a user identity system, integration with external user management platforms, and issuance of unique kubeconfig files or tokens. Moreover, it's imperative to forge a multifaceted linkage between users and namespaces, coupled with the distribution of tailored permissions.
-
-![Image Depicting User-Namespace Association](https://cdn.jsdelivr.net/gh/yangchuansheng/imghosting6@main/uPic/2023-11-29-10-34-Dfn5xa.png)
-
-Sealos's framework enables administrators to effectively slot users into designated namespaces and regulate their roles, thereby achieving a granular control over permissions. This guarantees that users access only the resources they are legitimately permitted to use.
-
-![Image Illustrating User Permissions Management](https://cdn.jsdelivr.net/gh/yangchuansheng/imghosting6@main/uPic/2023-11-29-10-34-wknQxI.png)
-
-![Image Showcasing User Role Control](https://cdn.jsdelivr.net/gh/yangchuansheng/imghosting6@main/uPic/2023-11-29-10-34-RQFrTB.png)
-
-### Challenge 3: Metering and Managing Quotas
-
-A critical aspect of multi-tenancy in K8s is the equitable distribution and meticulous tracking of resource usage, including CPU, memory, disk, and network utilization. Managing excess usage and differentiating between internal and external network traffic are particularly challenging, as is accurately attributing traffic to specific containers and tenants.
-
-Utilizing eBPF technology, Sealos adeptly monitors network traffic, correlating it with tenant information and storing it in a database for precise billing and resource management. For compute and storage resources, Sealos relies on controllers to gather and administer relevant data, ensuring efficient resource oversight.
-
-![](https://cdn.jsdelivr.net/gh/yangchuansheng/imghosting6@main/uPic/2023-11-29-10-36-HsycaI.png)
-
-## Extreme Multi-Tenancy - The Sealos Challenge
-
-In the realm of multi-tenancy, Sealos embarks on an ambitious journey, operating within the unpredictable confines of a public network. This scenario invites any developer to join and partake in a communal Kubernetes cluster, which inherently raises substantial security and stability risks.
-
-![](https://cdn.jsdelivr.net/gh/yangchuansheng/imghosting6@main/uPic/2023-11-29-10-54-kbCMsN.png)
-
-The method adopted by Sealos brings forth distinct benefits: cost-effectiveness, as it negates the need for users to independently build and manage their clusters, leading to significant cost reductions in cloud services. It also enhances resource utilization, allowing container operations on a smaller scale, thereby leveraging the platform’s flexibility and resources. Crucially, establishing strong isolation in such a public network setting can bolster security and stability.
-
-Nevertheless, Sealos is confronted with a series of formidable challenges:
-
-**Challenge 1: Overcoming Gateway Limitations** The substantial user base of Sealos generates immense traffic, pushing the boundaries of many mainstream open-source gateways. A single user update can potentially impact the entire user base, as systems like Nginx require configuration reloads. Moreover, specific well-known gateways, which remain unnamed, struggle with issues like CPU overload and delays in configuration effectiveness. Sealos has proactively engaged with upstream communities for potential improvements.
-
-**Challenge 2: Addressing Runtime Isolation** Strong isolation is critical for ensuring security in Sealos's multi-tenant environment, but current mainstream runtime environments fall short of meeting these requirements. For example, Firecracker's inadequate GPU support presents a significant limitation for high-performance computing applications.
-
-**Challenge 3: Ensuring Storage Isolation** A paramount concern for Sealos is the isolation of tenant data to prevent unauthorized access or data breaches. The goal is to implement block-level storage isolation, a challenging but necessary endeavor.
-
-**Challenge 4: Network Metering and Contention Management** Managing and accurately metering network resources is essential in a multi-tenant infrastructure. Sealos is committed to distributing these resources fairly, particularly in situations where resource contention occurs, to ensure that all users have fair and efficient access to network resources.
-
-**Summary**
-
-Only with the advancement and maturity of multi-tenancy can the true essence of a cloud be actualized, harnessing over ninety percent of its inherent capabilities. Facing the complexities and unpredictabilities of the public internet, Sealos excels by providing secure and isolated multi-tenant environments. It achieves this while ensuring efficiency and reducing operational costs. The underlying technology Sealos uses is elegantly designed, catering perfectly to businesses where a single cloud platform is shared among all developers.
\ No newline at end of file
diff --git a/docs/blog/en/2023/sealos-release.md b/docs/blog/en/2023/sealos-release.md
deleted file mode 100644
index 5725dc826a9d..000000000000
--- a/docs/blog/en/2023/sealos-release.md
+++ /dev/null
@@ -1,115 +0,0 @@
----
-slug: sealos-release
-title: "Sealos: Revolutionizing Cloud Computing with a User-Friendly Operating System"
-description: Explore the journey of Sealos, a grand cloud operating system project, from its inception as a simple Kubernetes installer to a comprehensive platform transforming cloud computing. Dive into the creator's story, the evolution of Sealos, and how it simplifies cloud operations for businesses and individuals alike.
-authors: [fanux]
-tags: [Kubernetes, Sealos]
-keywords: [cloud operating system, Sealos, Kubernetes, cloud native, Cloud computing, cluster image, Sealer, cloud-native technologies]
-image: https://cdn.jsdelivr.net/gh/yangchuansheng/imghosting5@main/uPic/2023-08-31-09-52-gLmSek.jpg
-date: 2023-06-13T10:00
----
-
-In the ever-evolving landscape of cloud computing, a groundbreaking innovation has emerged, reshaping our understanding of cloud infrastructures. Sealos, transcending its initial scope as a Kubernetes installation tool, has emerged as a pioneering [cloud operating system](https://sealos.io). In this blog, we'll delve into the journey of Sealos, from its inception to becoming a cornerstone in cloud computing, offering unparalleled user experience and efficiency.
-
-<!--truncate-->
-
-## The Inception of Sealos
-
-It all started one quiet night in 2018. A single line of code marked the beginning of something extraordinary. Initially named "kubeinit," the project soon outgrew its initial scope. Recognizing the need for a broader vision, the project was aptly renamed Sealos. It was not merely about installing Kubernetes; it was about piecing together a comprehensive [cloud operating system](https://sealos.io). This pivotal moment set the stage for the evolution of Sealos, a vision that would redefine cloud computing.
-
-![](https://cdn.jsdelivr.net/gh/yangchuansheng/imghosting-test@main/uPic/2023-08-21-15-15-rcAujq.webp)
-
-## The Entrepreneurial Journey and Initial Challenges
-
-The journey of Sealos is a tale of challenges, perseverance, and innovation. When Sealos made its debut on the Alibaba Cloud Marketplace at 15 yuan per copy, the expectation of commercial success was modest. But the first sale, a mere 15 yuan, was a monumental milestone. It was more than just a transaction; it was a validation of potential, a glimpse into a future of endless possibilities. 
-
-However, this initial success came with its own set of challenges. Providing after-sales service proved to be a Herculean task, demanding constant attention and problem-solving, often at the cost of personal time. This phase was crucial, laying the groundwork for understanding user needs and driving Sealos towards excellence.
-
-## Enhancements and Innovations in Sealos
-
-The development journey of Sealos has been marked by constant innovation and improvement. The initial version, while functional, was just the beginning. Recognizing the need for a more robust solution, Sealos evolved into its second iteration, leveraging Ansible for enhanced performance. 
-
-However, the pursuit of perfection never ceased. The third version of Sealos was a breakthrough, simplifying load balancing and eliminating dependencies, making it a pinnacle in installation simplicity. This relentless pursuit of innovation reflects the core ethos of Sealos – to simplify complex cloud operations while enhancing efficiency and reliability.
-
-## Focus on Installation: A Strategic Choice
-
-Installation is often the first encounter users have with any software, and for Sealos, it was crucial to make this experience as smooth as possible. Focusing on installation was a strategic choice, ensuring that users could easily step into the world of cloud-native technologies. This focus also set the stage for users to explore the full spectrum of Sealos' capabilities, fostering a deeper engagement with the platform.
-
-## Sealos at Alibaba: The Birth of Sealer
-
-During its tenure at Alibaba, Sealos underwent a significant transformation with the development of Sealer. This was a pivotal point, as Sealer brought unparalleled flexibility to the installation process. The concept of cluster imaging, akin to a "cloud version Docker image," was introduced, allowing users to define their installation packages. This innovation not only enhanced the abstraction levels but also offered unprecedented flexibility, reinforcing Sealos' position as a frontrunner in [cloud operating system](https://sealos.io)s.
-
-```
-dockerfile
-FROM kubernetes:v1.25.0
-COPY mysql .
-CMD helm install mysql .
-```
-
-This concept allows the [cloud operating system](https://sealos.io) to have "images" just like a standalone operating system. Another step is completed in this grand vision. 
-
-## Sealos as a [cloud operating system](https://sealos.io)
-
-At its core, Sealos is more than just a set of tools; it's a full-fledged [cloud operating system](https://sealos.io). With the mantra "Everything is an application," Sealos redefines how we perceive data centers and cloud resources. By treating the entire data center as a unified entity rather than isolated servers, Sealos turns it into a virtual supercomputer, offering seamless, distributed application management. This approach not only simplifies the cloud computing process but also maximizes efficiency and scalability.
-
-![](https://cdn.jsdelivr.net/gh/yangchuansheng/imghosting-test@main/uPic/2023-08-21-15-30-Zn4l1W.webp)
-
-## Design Philosophy: Minimalism and User-Centric Approach
-
-In a domain often cluttered with complexity, Sealos stands out with its minimalist design. But don't be fooled by its simplicity; every element of Sealos is designed with powerful functionality in mind. This design philosophy stems from a deep understanding of user needs, especially in the B2B software realm where user experience is often overlooked. Sealos breaks this norm, ensuring that every interaction with the platform is intuitive, efficient, and pleasant.
-
-![](https://cdn.jsdelivr.net/gh/yangchuansheng/imghosting-test@main/uPic/2023-08-21-15-31-jqkByJ.png)
-
-The black, white, and gray design style will make you feel like you're drinking plain water while using the product, rather than a beverage, let alone footwash (as some products make you feel like dying). Developers already suffer enough, and I hope that using Sealos will bring you a pleasant mood.  
-
-Sealos can pinpoint the pain points of applications. For example, the App Launchpad, an application manager, allows you to launch your own application within 30 seconds. This involves numerous details, such as automatically configuring public domain names and resolving HTTPS certificate issues.
-
-## Affordability and Efficiency with Sealos
-
-One of the most compelling aspects of Sealos is its cost-effectiveness. The platform allows for the efficient running of applications, significantly reducing operational costs. This affordability is achieved through innovative approaches like paying only for active containers and automatic scaling during low traffic periods. Such features make Sealos not just a powerful [cloud operating system](https://sealos.io), but also an economically viable solution for businesses of all sizes.
-
-![](https://cdn.jsdelivr.net/gh/yangchuansheng/imghosting-test@main/uPic/2023-08-21-15-34-NmR7oB.png)
-
-For enterprises, this can significantly reduce resource utilization costs. We ourselves run over 7,000 applications on just 10 servers. What does that mean? After deploying a Sealos cluster, as long as the server resource utilization is below 70%, you can continuously add applications to the cluster until it reaches its capacity. 
-
-You might wonder, **why not use Kubernetes directly?** The reason is simple. For enterprises like Xunfei, applications are distributed across various departments, making multi-tenancy, isolation, and collaboration crucial. Using Kubernetes directly could disrupt the cluster, and the worst-case scenario is that a department or user inadvertently causes a security issue that crashes the entire cluster. Sealos perfectly solves this problem!
-
-Sealos can help 80% of enterprises reduce their resource utilization costs by 80%.
-
-## Sealos: Liberating Cloud Management
-
-Sealos champions the principle of "everything is an application," catering to a diverse range of users, from novices to cloud-native experts. This design ensures that users can leverage Sealos without the burden of understanding complex Kubernetes concepts. At the same time, it provides flexibility and power to those who are well-versed in cloud-native technologies. This dual approach democratizes cloud management, making it accessible to a broader audience while retaining the depth and flexibility for experts.
-
-Sealos pays great attention to the coordination between applications. For example, if you're using function compute on Sealos, the default database might be MongoDB. But what if you want to use PostgreSQL? In this case, you can install a PostgreSQL application on Sealos and access it directly within the function compute through service discovery. Since they are in the same cluster, they can directly communicate through internal DNS.
-
-![](https://cdn.jsdelivr.net/gh/yangchuansheng/imghosting-test@main/uPic/2023-08-21-15-37-5VOWuC.png)
-
-Sealos is streamlined yet not simplistic. All components can be uninstalled, allowing the cloud to perfectly meet your needs—more is considered excessive, less is considered insufficient. This also means that whether it's a single server or hundreds of data centers, they can be built into a cloud with just one command.
-
-## Real-World Applications and User Base
-
-- Run an nginx demo on Sealos in just 30 seconds with automatic scaling.
-- Start various databases in 30 seconds and connect to them directly within your business system's intranet.  
-- Launch your business applications written in various programming languages directly on Sealos.
-
-These three capabilities serve as the foundation, and you can gradually explore and discover new territories. 
-
-When it comes to running your own business, we have made many detailed optimizations for this scenario. For example, automatic allocation of subdomains, horizontal autoscaling, and support for running various stateful services.
-
-You will find that with Sealos, **whether you're deploying a monitoring system or running a low-code platform, it's all within reach. You can easily host your blog on Sealos at a low cost. Using the Sealos terminal, you can run any Kubernetes-compatible application without difficulty in automation.**
-
-Sealos' versatility is demonstrated through its wide array of applications across various sectors. From supporting high-concurrency services during critical times to running large-scale GPU clusters, Sealos proves its mettle in the most demanding scenarios. Its growing community, with over 100,000 users, including large enterprises, is a testament to its reliability and efficiency in real-world applications.
-
-![Sealos Community](https://jsd.onmicrosoft.cn/gh/yangchuansheng/imghosting-test@main/uPic/2023-11-16-19-51-Ve2aWX.png)
-
-## The Future Roadmap of Sealos
-
-Looking ahead, Sealos is poised for even greater achievements. The roadmap envisions a ubiquitous [cloud operating system](https://sealos.io), offering an experience as seamless and user-friendly as a personal computer. With a commitment to continuous innovation, Sealos aims to enable rapid deployment of new businesses, significant cost reductions, and the simplicity of creating a cloud with just a click.
-
-The Sealos [cloud operating system](https://sealos.io) will also incorporate a **Copilot**, acting as a navigator's assistant. It can automatically perform cloud-native transformations, helping developers easily enter the realm of cloud-native. It can also assist in diagnosing cluster issues, identifying security vulnerabilities, and providing professional operational advice like an expert.
-
-## Conclusion
-
-Reflecting on the five-year journey of Sealos, it's evident that the vision conceived at the first line of code has been realized. This journey, marked by milestones, challenges, and triumphs, was made possible by the trust and support of the community, contributors, and partners. As Sealos embarks on its next phase, it stands ready to exceed expectations and redefine the cloud computing experience.
-
-Experience the transformative power of the [Sealos cloud operating system](https://cloud.sealos.io). Join our community and embark on a journey of simplified, efficient, and innovative cloud computing.
\ No newline at end of file
diff --git a/docs/blog/en/2023/to-run-or-not-to-run-a-database-on-kubernetes/images/feature.jpg b/docs/blog/en/2023/to-run-or-not-to-run-a-database-on-kubernetes/images/feature.jpg
deleted file mode 100644
index 47e90ce07285..000000000000
Binary files a/docs/blog/en/2023/to-run-or-not-to-run-a-database-on-kubernetes/images/feature.jpg and /dev/null differ
diff --git a/docs/blog/en/2023/to-run-or-not-to-run-a-database-on-kubernetes/images/sealos-database.png b/docs/blog/en/2023/to-run-or-not-to-run-a-database-on-kubernetes/images/sealos-database.png
deleted file mode 100644
index f51861d140ca..000000000000
Binary files a/docs/blog/en/2023/to-run-or-not-to-run-a-database-on-kubernetes/images/sealos-database.png and /dev/null differ
diff --git a/docs/blog/en/2023/to-run-or-not-to-run-a-database-on-kubernetes/index.md b/docs/blog/en/2023/to-run-or-not-to-run-a-database-on-kubernetes/index.md
deleted file mode 100644
index e605d45b8b4d..000000000000
--- a/docs/blog/en/2023/to-run-or-not-to-run-a-database-on-kubernetes/index.md
+++ /dev/null
@@ -1,148 +0,0 @@
----
-slug: to-run-or-not-to-run-a-database-on-kubernetes
-title: To run or not to run a database on Kubernetes?
-description: This article thoroughly examines the advantages of using Kubernetes (K8s) for database management, including enhanced stability, performance, and operational efficiency. 
-authors: [fanux]
-tags: [Kubernetes, Sealos, Database]
-keywords: [Cloud Operating System, Sealos, K8s, Cloud Native, Cloud Computing, Cloud OS, PaaS, Database, Container]
-image: ./images/feature.jpg
-date: 2023-12-06T10:00
----
-
-Yesterday, an insightful article by Mr. Feng explored [the drawbacks of deploying databases in K8S](https://mp.weixin.qq.com/s/4a8Qy4O80xqsnytC4l9lRg).
-
-Debating the merits of containerized databases might have been relevant four years ago, but in 2023, it's crucial to understand the broader acceptance of this technology.
-
-<!--truncate-->
-
-I began working with K8s from its 0.9 version. Initially, with the CSI still in its nascent stage, true stability wasn't achieved until version 1.0. During my time at iFLYTEK, I played a key role in developing and maintaining a comprehensive system that was integral to the company's internal PaaS services.
-
-We set up a cluster with 30 physical machines, deceptively small yet technologically advanced, running around 3000 applications of varied types including microservices, databases, message queues, and caches. **This cluster, utilized by hundreds of our developers, was maintained with less than half a person's effort, illustrating the efficiency brought by K8s.**
-
-Additionally, we managed to upgrade the Linux kernel seamlessly, a task unimaginable without the support of K8s. Normally, coordinating such an upgrade could take as long as six months.
-
-I've also seen a cluster hosting 400 databases, which required 400 servers and a 40-person team, yet operated at less than 10% efficiency. This cluster, a victim of excessive manual maintenance, reflects a common challenge many teams encounter in managing and optimizing their infrastructure efficiently.
-
-Upon joining Alibaba, I observed that all databases for delivery purposes were operated on K8s. For over five years now, we've been running databases in containers flawlessly, with no incidents.
-
-## Democratizing Database Expertise on K8s
-
-In the business sector, companies often confront two primary challenges with database management: either their management skills are not robust enough to maximize database potential, or they face significant expenditures in managing their databases. The concept of "[Database on K8s](https://sealos.io/docs/guides/dbprovider/)" introduces a standardization that addresses these issues. Such standardization facilitates collaboration and alters the dynamics of productivity and production relationships, leading to a substantial increase in efficiency. This approach empowers teams, even those lacking in specialized skills, to leverage professional capabilities. This is analogous to the distinct roles in agriculture and animal husbandry, where focus in their respective domains enhances overall efficiency and output.
-
-The KubeBlocks team is a prime example of this. Their expertise and accumulation of knowledge in database management are likely superior to that of most companies. They have transformed their experiential knowledge into code, crafting controllers that enable other businesses to operate in an exceptionally streamlined manner. K8s plays a crucial role in making this feasible.
-
-One common query is: Why not opt for Ansible? Operational staff often favor Ansible due to its compatibility with their tools. However, Ansible is primarily focused on deployment and operational tasks. K8s controllers, on the other hand, are built on the principle that **tasks achievable by machines should not be manually performed by humans**. They facilitate **a constant, 24-hour synchronization between desired and actual states**, a challenging task with Ansible. Would Ansible be the choice for setting up a routine task?
-
-This mirrors the era before operating systems when programmers manually punched holes in paper tapes to execute programs. Running programs on paper tapes or CDs was possible, but it begged the question of the necessity of operating systems.
-
-The underlying principle is the same: Ansible is a valuable tool for operational staff, but K8s's objective is to do away with lower-level operational work (such as writing and executing Ansible scripts). K8s enables more efficient and automated database management, granting teams without extensive database management expertise access to high-level services.
-
-## The Benefits of Running Databases on Kubernetes
-
-Most concerns around database-on-Kubernetes boil down to:  
-
-**How stable is it?**
-
-**Can I effectively troubleshoot issues?**  
-
-**Does performance suffice?**  
-
-### Complexity  
-
-Complexity for databases on Kubernetes involves two key aspects: 
-
-1. Build complexity   
-2. Usage complexity  
-
-**First: Build Complexity**  
-
-Building a production-grade database platform directly atop native Kubernetes proves costly, unfriendly for beginners lacking depth of expertise. You'd need to create multiple critical components yourself - Kubernetes storage drivers, database controllers, etc. Hands-on expertise makes this possible, but proves challenging.  
-
-Hence the appeal of distributions, much like CentOS, Ubuntu, etc. for Linux instead of direct kernel wrangling. Consider Kubernetes the "cloud kernel." Using the raw kernel sans customization leaves an insufficiently robust, user-friendly experience. The kernel merely provides a framework; users must architect and integrate many optimizations themselves. Kubernetes distributions help solve this. For instance, [Sealos delivers](https://sealos.io/docs/self-hosting/lifecycle-management/quick-start/deploy-kubernetes/) **full systems including highly available clusters, finely-tuned storage, and optimized databases in one click**. Two simple commands:  
-
-```bash
-$ sealos run labring/kubernetes:v1.27.7 labring/helm:v3.9.4 labring/cilium:v1.13.4 \
---masters 192.168.64.2,192.168.64.22,192.168.64.20 \ 
---nodes 192.168.64.21,192.168.64.19 -p [your-ssh-passwd]  
-
-$ sealos run labring/openebs:v3.9.0 labring/mysql:8.0
-```  
-
-Done. The complete system with HA cluster, finely-tuned storage, and optimized databases emerges in minutes. While Ansible aids installs, **it cannot handle critical runtime needs like self-healing and multi-tenancy** - key advantages Kubernetes provides for databases-as-a-service.  
-
-**Second: Usage Complexity**   
-
-Leveraging cloud operating system distributions and controllers, users can deploy standardized database services, moving away from script-based solutions.
-
-![](images/sealos-database.png)  
-
-This interface is designed for universal ease of use. Even beginners can manage to establish a three-replica PostgreSQL cluster, incorporating backup, recovery, and monitoring functions. This capability democratizes access for all developers within an organization and **underscores the fundamental divergence between 'cloud computing thinking' and 'script-based thinking'. Cloud computing democratizes service provision (as a Service), in contrast to the traditional script-based methods which serve more as operational conveniences.**
-
-### Stability
-
-Our team, despite not specializing in database technology, has successfully established a highly stable database system. This demonstrates the potential of what dedicated experts in the field can accomplish. For users, this means that database stability concerns can be confidently entrusted to seasoned professionals.
-
-Consider the [Sealos Public Cloud](https://cloud.sealos.io) as an example. It currently supports thousands of applications with fully containerized databases, all under the maintenance of the KubeBlocks team. Any arising database issues are efficiently handled by them. From a cost-benefit perspective, utilizing KubeBlocks' commercial services is more economical than employing a full-time database administrator. Furthermore, as Sealos architects, we ensure that database users face minimal operational concerns. Our stability standards exceed those of many non-specialist teams.
-
-Additionally, database lifecycle management involves specific tasks, and over time, stability issues are progressively resolved. These improvements, often made at the code level, incrementally reduce end-user concerns. This parallels the enhanced stability of the Linux system, achieved through ongoing technological development and optimization. **A well-designed software architecture not only improves but also consolidates its robustness, reducing dependence on human oversight. An illustrative comparison is that Oracle users might find themselves enjoying more leisure time than those using open-source MySQL.**
-
-Hence, both empirical evidence and theoretical considerations suggest that stability should not pose a hurdle for running databases on K8s. **Choosing K8s for database management effectively means leveraging the pooled expertise of numerous preeminent database experts. Their extensive knowledge and skill, embedded in the code, provide standardized, high-quality services to users. Such depth and efficiency of expertise are challenging to replicate with basic scripting alone.**
-
-### Performance
-
-It's a common belief that databases in containers underperform, but this is usually due to a lack of proper handling. The KubeBlocks team's in-depth testing and optimization, detailed in their analysis, show that these complexities are not for users to worry about. **The intricacies are already incorporated into the controller's code, making the process user-friendly**. In fact, the effect of containers on database performance is minor, with disk I/O and network bandwidth latency being the real influential factors.
-
-The OpenEBS raw disk plus database controller solution addresses these performance issues effectively. By employing a database controller, dependency on distributed storage is removed. This controller ensures both high performance and availability for database replicas, irrespective of the service type, and is seamless for the user. In case of a failure, it automatically makes adjustments, offering a superior database user experience.
-
-[Sealos](https://sealos.io) is a prime example of this solution in action, achieving high availability without compromising performance. It interacts directly with raw disks, facilitating automatic scaling, backup, and recovery. In the event of a node failure, the controller swiftly launches a new node, synchronizes the data, and integrates it into the cluster. These advanced capabilities, beyond the reach of traditional scripting methods that often require manual intervention, showcase the superiority of cloud operating systems.
-
-Thus, **running databases on K8s not only avoids performance issues but also offers stability that often surpasses the capabilities of many IT operations teams**. This approach is user-friendly and straightforward, with self-service functionalities. Would this be an option you'd consider?
-
-
-## Do not deny or affirm without considering practical scenarios
-
-In considering whether to containerize databases, we must take into account diverse real-world applications.
-
-For some companies with stable non-containerized databases and sufficient funds for database experts, there's little motivation to migrate to Kubernetes (K8s). Why risk migration issues? For example, banks often rely on specialized Oracle machines with straightforward subscription models, providing little impetus for change.
-
-Conversely, many business development teams and organizations now face a compelling choice: **to access sophisticated database capabilities at a minimal cost, thereby focusing their primary efforts on business development.**
-
-They might choose cloud database services like RDS (Relational Database Service) or Kubernetes (K8s) based database solutions. This method requires an ongoing management process, replacing manual roles and equipping teams with limited database knowledge. This represents a significant trend, where upfront costs (like developing controllers) increase, but the incremental costs for each team utilizing the database substantially decrease.
-
-There are various approaches to achieve this, such as virtual machines or Ansible, but Kubernetes-based controllers stand out as the superior solution. Even for services offering RDS-like functionalities, the Kubernetes tech stack emerges as the optimal choice. Virtual machines, being more cumbersome and costly, incur greater performance overheads. And for tools like Ansible to achieve self-service and multi-tenancy seems overly optimistic.
-
-## Summary
-
-### Kubernetes' Unique Strategic Significance
-
-Kubernetes brings tremendous force multiplication, like mastering lifelong martial arts training. Without Kubernetes, you might exert 10% of a database's true potential. Used skillfully, Kubernetes massively amplifies operational database efficiency, savings, and resilience.
-
-### Technological Progress Reshapes Work Patterns
-
-As technology advances, specialized database users and caretakers decouple. Manual upkeep yields to intelligent automation. Amidst this shift, standardization enables effective collaboration at global scale. No stronger de facto standard for cloud-native automation exists now than containers and Kubernetes, so database adoption seems inevitable.
-
-### Practical Proof Points  
-
-Globally, many teams have successfully run databases on Kubernetes in production across critical dimensions like cost, usability, stability, performance, and more - with remarkable measurable results. Once accustomed to Kubernetes' advantages, tough to justify reverting to old-school manual operations. For instance, Sealos' architecture evolved from Ansible (v2) to Golang (v3) - now at [v4 and v5](https://github.com/labring/sealos). This exemplifies "cloud native thinking", not legacy "ops script thinking" tied to specific individuals. If a solution lacks even basic APIs, how can we discuss advanced scalability and productivity? Systems should consider machine consumers first, then human ones - this unlocks true automation leverage. Hence, API > CLI > GUI.
-
-### Operations Roles Transform  
-
-Many legacy DBAs naturally feel inclined to spread Kubernetes database FUD, protecting their niche skillsets. But enlightened technology leadership will consistently discover immense TCO and productivity gains from thoughtful, staged standardization - we've erased entire 40-person ops teams when strategically migrating systems to Kubernetes without layoffs. Without question, many ops engineers justifiably feel their roles threatened amidst displacement by increasingly automated toolchains. But technologies only accelerate; they cannot unwind. Leaders must shepherd transitions.
-
-### Kubernetes Maturity and Ecosystem Growth
-
-Kubernetes rapidly matures while its ecosystem explodes with new solutions. Inevitable chaos results as practices and culture race to catch adoption. But time cures challenges - take heart knowing robust distributions have repeatedly emerged across domains like Linux. These tame entropy and ease adoption by curating “batteries-included” solutions optimized for regular challenges. Sealos leads here as a purpose-built Kubernetes cloud-native OS distribution for standardizing database (and other) operational burdens. Recently, across 200+ Sealos users, literally none reported fundamental database operational struggles. A few cited early instability, but root causes like resource misconfigurations got systematically addressed - now they report Kubernetes-automated databases proving >9 times more stable than DIY trial-and-error.
-
-### The Enterprise Strategic Choice  
-
-Actual organizational needs should determine if and how organizations adopt Kubernetes databases-as-a-service. But the intelligent path brings tremendous advantages: solutions like Sealos + KubeBlocks equate to:  
-
-1. 8+ years of specialized Kubernetes platform expertise
-2. A top-tier database team including multiple senior engineers
-3. Extreme usability, resilience, and performance  
-
-...all for less than the cost of staffing database specialists internally. Internal political hesitations naturally arise amid shifts. But pragmatic facts speak volumes about the optimal way forward.
-
-### Final Thoughts  
-
-Rather than rebutting each counterargument exhaustively, I'll leave readers to independently judge the landscape and merits based on results. Please share your perspectives so together we uncover greater collective truth. The future looks abundantly bright for Kubernetes' democratization of reliability and scale across critical domains like databases.
\ No newline at end of file
diff --git a/docs/blog/en/2023/what-is-sealos.md b/docs/blog/en/2023/what-is-sealos.md
deleted file mode 100644
index e45fdafa791d..000000000000
--- a/docs/blog/en/2023/what-is-sealos.md
+++ /dev/null
@@ -1,337 +0,0 @@
----
-slug: what-is-sealos
-title: "Sealos vs Traditional Cloud Platforms: A Comparative Analysis of Efficiency and Cost"
-description: "Explore the innovative Sealos cloud operating system: a Kubernetes-based platform revolutionizing cloud computing. Dive into its design, unique features, and competitive advantages over traditional cloud services. Learn how Sealos optimizes user experience, reduces costs, and simplifies cloud resource management for businesses and developers."
-authors: [fanux]
-tags: [Kubernetes, Sealos]
-keywords: [Cloud Operating System, Sealos, K8s, Cloud Native, Cloud Computing, Cloud OS, PaaS, Rancher, KubeSphere, Cloud Service]
-image: https://cdn.jsdelivr.net/gh/yangchuansheng/imghosting5@main/uPic/2023-08-31-09-52-gLmSek.jpg
-date: 2023-07-10T10:00
----
-
-With the rapid development and widespread application of cloud computing, businesses and developers are increasingly seeking flexible and efficient ways to manage and deploy cloud resources. In this context, Sealos emerges as not only a [cloud operating system](https://sealos.io) with Kubernetes at its core, but also as an innovative solution aimed at simplifying and optimizing the cloud computing experience.
-
-This article delves into the core functions, technical features, design philosophy of Sealos, and how it revolutionizes the [cloud operating system](https://sealos.io) domain. We will also explore Sealos' applications in various usage scenarios and compare it with other cloud service platforms in the market to demonstrate its unique competitive advantages and potential.
-
-<!--truncate-->
-
-## What is Sealos?
-
-Conceptually, Sealos is similar to operating systems like Windows, but with two key differences. First, Sealos does not operate on a single server; its core concept is to **treat the entire data center or resources across multiple servers as a unified whole**. This approach breaks the limitation of traditional operating systems that operate on a single machine, extending resource and application management to a larger scale, **enabling the operation and management of applications across the entire data center**, significantly enhancing the utilization efficiency of cloud resources and operational capabilities.
-
-![](https://cdn.jsdelivr.net/gh/yangchuansheng/imghosting-test@main/uPic/2023-11-17-13-46-9Nel1a.png)
-
-Unlike ordinary operating systems that support daily applications like QQ and WeChat, Sealos focuses on providing developers with the environment they need for distributed applications. In the world of Sealos, **complex cloud computing tasks become as simple and intuitive as using a personal computer**. Whether running common web services like Nginx or deploying and managing distributed applications written in various programming languages, Sealos can do it all with one click, greatly reducing the complexity of configuration and management. Its design philosophy emphasizes user-friendliness and simplicity, striving to eliminate technical barriers in using cloud services, making cloud computing's powerful capabilities easily accessible to every user.
-
-## Core Problems Solved by Sealos
-
-Sealos primarily addresses the following core issues:
-
-### Optimizing Cloud Experience
-
-#### User Interface
-
-The significance of the User Interface (UI) is self-evident. Traditional standalone operating systems have provided us with a standardized user experience paradigm. However, many of today’s cloud platforms have evolved into vast and complex systems, causing users to lose their way in the product. This has even led to the creation of specialized training positions for cloud services, reflecting a failure in product design to some extent. For example, few people need training to use an iPhone, as its product design is already excellent and very easy to understand and operate.
-
-In product design philosophy, we first need to recognize that different user roles have varying focal points. The user base of cloud services includes developers, database administrators (DBAs), operations personnel, Kubernetes (k8s) experts, technical novices, and industry experts. Trying to satisfy all these roles with one product is nearly impossible. For instance, even with the same CI/CD (Continuous Integration/Continuous Deployment) tool, some prefer Jenkins, while others favor Drone.
-
-Many PaaS platforms take CI/CD as an example and often integrate specific tools like Jenkins, leading to a need to rebuild core functions when the tool becomes less popular or better alternatives emerge. Also, this design fails to meet the preferences of different users.
-
-The approach of standalone operating systems is worth learning from. The operating system itself does not interfere too much but is responsible for managing applications well. This allows users to freely choose their preferred applications, such as office software DingTalk or Feishu, which are independent of the Windows operating system. This method grants users a great degree of freedom. Although many PaaS platforms also offer app markets, they do not consider applications as the primary element. Instead, most platforms focus on Kubernetes as the core, which is not wrong per se, but **this approach only targets the cloud-native user group and fails to achieve a high level of abstraction**.
-
-The Sealos platform fully follows the operating system philosophy. It focuses on the specific functions users need. For example, a DBA creating a database does not need to worry about the details of Kubernetes; users of Function Compute services do not need to be concerned about whether they run in containers; and Kubernetes experts can operate through the Lens application or command-line tools. This design philosophy allows various types of users to find suitable tools and services on its platform, thereby optimizing the overall user experience.
-
-#### API > CLI > GUI
-
-Many people's understanding of a product is limited to its GUI, but in reality, a cloud service product without an API is almost useless to businesses. To improve efficiency, businesses need to connect and integrate various systems, highlighting the importance of APIs. Cloud services are often designed not just for human users but also for other programs or systems, to achieve a high degree of automation in enterprise operations.
-
-![](https://cdn.jsdelivr.net/gh/yangchuansheng/imghosting-test@main/uPic/2023-11-17-14-36-qnQmDa.jpg)
-
-Sealos provides APIs that are fully compatible with Kubernetes' CRD (Custom Resource Definitions) design. Users can manage and control their cloud resources through Sealos' APIs in the same way as operating in a Kubernetes environment. For security, Sealos assigns a permission-limited kubeconfig authentication file to each tenant. These files allow tenants to flexibly connect, manage, and secure different systems and resources.
-
-This design not only makes Sealos' cloud services more powerful and flexible but also provides enterprises with an efficient, automated way to manage their cloud infrastructure. With the extensive application of APIs, businesses can easily integrate Sealos cloud services into their existing workflows, thus enhancing operational efficiency and flexibility.
-
-#### Fast and Efficient Operation Experience
-
-Our goal is to ensure that most operations can be completed within 30 seconds, and at most not exceed 3 minutes. If the operation time of a feature exceeds this standard, there must be a problem, necessitating reevaluation and redesign.
-
-#### Catering to All Users
-
-Although Sealos is primarily aimed at developers, in the process of functional design, we also pay attention to the experience of non-technical background users. For this purpose, we specifically invite administrative staff without technical backgrounds to experience our services firsthand. This helps us validate the ease of use of our product. If they can smoothly complete the operation process, it proves that our product is easy to operate and user-friendly. The ease of use of the product is our core pursuit. If users need guidance from others to use the service, it indicates that our design still has room for improvement.
-
-#### Focus on High-Quality Applications
-
-In the field of application development, Sealos always prioritizes quality over quantity. For the vast majority of applications, a stable operating environment and backend database support are indispensable. We focus on refining these basic applications first, and then expand to other application fields, integrating cutting-edge applications from various directions and domains, to provide users with comprehensive and efficient solutions.
-
-#### Ensuring Scalability and Security
-
-Sealos does not set standards on its own but strictly follows mature systems and de facto standards, ensuring high compatibility with the entire cloud-native ecosystem. All cloud-native applications can run safely on Sealos, and even some non-productized applications can be run through Sealos' terminal. Our compatibility is built on full support for Kubernetes, with enhanced security measures.
-
-![](https://cdn.jsdelivr.net/gh/yangchuansheng/imghosting-test@main/uPic/2023-11-17-14-48-vbJezM.png)
-
-In Sealos, to prevent improper operations or inappropriate image downloads from causing catastrophic effects on the entire system, each user's permissions are restricted within their own namespace. This permission management mechanism strengthens the security and stability of enterprise-level [cloud operating system](https://sealos.io)s.
-
-### Reducing Cloud Costs
-
-Our goal is not just to help you cut costs by 30%—such a target lacks challenge and is too mundane. We aim to minimize the marginal cost of cloud services, ideally to one-tenth of the original cost. How to achieve this? This is the direction we are pursuing. So, how can we achieve this goal?
-
-#### Redefining Cloud Architecture: Abandoning Traditional Models
-
-**First, we must abandon the traditional three-tier architecture model of IaaS, PaaS, and SaaS.**
-
-Why give up this classic architecture? The reason is that the traditional layered model no longer meets the current technological developments and market demands. Take IaaS as an example; it simulates hardware like routers, switches, and virtual machines in data centers through software. While this improves scheduling flexibility, it also leads to a sharp increase in software costs. For instance, OpenStack requires a team of dozens of people to maintain its stability, directly resulting in high software costs. In the past, this approach seemed necessary to improve resource utilization, but now, from an application perspective, many applications don't care if they run in a separate VPC during operation.
-
-![](https://jsd.onmicrosoft.cn/gh/yangchuansheng/imghosting-test@main/uPic/2023-11-17-15-00-2jC2C8.png)
-
-The above is a diagram I drew five years ago, which is gradually becoming a reality. This is similar to the development history of single-machine operating systems: initially layered, later evolving into a more efficient kernel architecture. The layered architecture of cloud computing also carries historical baggage. Once enterprises abandon IaaS, they can save substantial costs and enjoy higher performance.
-
-From this new perspective, we find that IaaS is actually unnecessary. Technically speaking, PaaS and SaaS are essentially the same; they are both application-level services and thus do not need to be overly differentiated. In the new cloud kernel architecture, we only need to effectively implement isolation between tenants. This does not require complex and heavyweight solutions. For example, Sealos offers a way to share a Kubernetes cluster among multiple tenants in an untrusted public network environment. We achieve this goal using strong isolation containers (like Firecracker), network policies (like Cilium), and block device isolation for storage (like OpenEBS), not only reducing costs but also achieving better results.
-
-![](https://jsd.onmicrosoft.cn/gh/yangchuansheng/imghosting-test@main/uPic/2023-11-17-15-02-6N4ygp.png)
-
-#### Increasing Application Density and Scheduling Efficiency
-
-Unless it's a very heavy compute-intensive application, it's almost embarrassing to not run over 100 applications on a server. On Sealos, we run 800 applications on one server while ensuring application stability.
-
-This is very important for enterprises, as it significantly reduces the need for hardware resources. If you are a corporate executive, you might want to re-examine your company's overall resource utilization rate, which is often below 20%. Through our method, there is much more room for improvement.
-
-With Sealos, enterprises can save up to half the cost in a simpler way.
-
-#### Full Elasticity
-
-Inactive applications at night should rest and leave resources for offline computing or training tasks. This is actually more advantageous with public clouds, as resources can be directly released, saving a lot of costs.
-
-Sealos directly incorporates this key feature. If all enterprise applications operate in this way, huge cost savings can be achieved.
-
-#### Eliminating Zombie Applications and Servers
-
-There are many development and testing programs in enterprises. How do you know which ones are not being used? There are also many zombie "servers." Some companies can only maintain who used what with an Excel sheet, asking around periodically to retire servers that no one claims. Slightly more advanced ones might use an outdated CMDB.
-
-The radical solution to this problem is: charging money. Yes, internal enterprise applications should also be charged, and those that owe fees should be shut down directly.
-
-This way, each department can apply for a budget, and developers apply for a budget. Once the budget is used up, the application is shut down, ensuring no zombie applications in the long term. Sealos brings all servers under unified management, turning the entire cluster into a large resource pool, eliminating the possibility of zombie servers. It also saves enterprises a lot of operational manpower.
-
-To eliminate resource waste, such fine-tuned operations are needed, and Sealos achieves this purpose at a very low cost. The only thing enterprise managers need to do is allocate money to each sub-account.
-
-![](https://jsd.onmicrosoft.cn/gh/yangchuansheng/imghosting-test@main/uPic/2023-11-17-16-18-ijXZ4y.png)
-
-This way, you can precisely control how much each department and each person spends, further analyzing ROI.
-
-#### Operating the Entire Cloud with Half a Person
-
-A team of operators? An operations team for each business unit? Have you ever seen Microsoft sell a PC and then provide you with an operator? Therefore, it's still about inadequate software. If the software is sufficiently excellent and stable, there's no need for the role of an operator. Or this role will change, like writing orchestration files or operators.
-
-The developers of Sealos spent less than half the effort to maintain the entire cloud. Whether it's 8,000, 80,000, 800,000, or 8 million applications, it only requires half a person. This is the [cloud operating system](https://sealos.io), which doesn't increase operational complexity as the scale grows.
-
-I am a neutral person, but I have an extreme view: in a sufficiently mature cloud, there should be no role for operations. If your enterprise has more than 3 operators (excluding those who move servers), you should seriously reflect on this.
-
-Here's a clear path for current operations staff: develop [cloud operating system](https://sealos.io)s.
-
-#### Research and Development Human Resource Costs
-
-I am a developer, and I spend at least 50% of my effort on things other than development. Those miscellaneous tasks may account for 20%, but their impact is 80%. They interrupt what I'm doing, like when you finish writing code and think about selling servers, configuring certificates, packaging, and going live. I bet no developer likes doing these things unless they're masochistic. Developers are lazy, and to be lazy, they develop a bunch of tools. This is the victory of the lazy, and Sealos is also created by the lazy. So if something can be automated, never do it manually; if AI can do it, never do it manually.
-
-![](https://jsd.onmicrosoft.cn/gh/yangchuansheng/imghosting-test@main/uPic/2023-11-17-16-18-as6HSI.png)
-
-Analyzing issues yourself is tiring; AI is more professional than humans.
-
-The function computing capability of Laf on Sealos makes writing code as simple as writing a blog post. Just click save, shut down, and leave. To leave work early, use Laf efficiently.
-
-All backend dependencies, like databases, can be resolved in under 30 seconds. In the future, AI will automatically package, deploy, code, and debug.
-
-This intangible increase in development efficiency can save unimaginable costs. In our customer examples, there are many cases of two people doing the work of five.
-
-### One-Click Private Cloud Construction, Consistent Experience Between Public and Private Clouds
-
-Sealos has a profound understanding of cloud computing:
-
-**Public and private clouds are the same thing, the same abstraction, the same set of codes, and the same experience, just with different applications installed.**
-
-You will find that Linux, whether running in your own data center or in a public cloud, is the same product form. This is the characteristic of excellent software: achieving a high degree of abstraction.
-
-Sealos was designed with this in mind. In fact, public and private clouds are essentially the same; they both link computing resources. Many people might think they are different, but public clouds also have recharge and billing. These functions just need to be placed in a separate application, which can be left uninstalled in scenarios where they are not needed.
-
-![](https://jsd.onmicrosoft.cn/gh/yangchuansheng/imghosting-test@main/uPic/2023-11-17-16-18-vMGZyu.png)
-
-However, even if a larger enterprise builds a private cloud, it should be similar to a public cloud in form. Metering and billing are very important features. Enterprises with more than 10 people need to finely operate cloud resources, let alone enterprises with thousands of employees using private clouds. The cost allocation among departments is essential.
-
-Some minor differences, like WeChat payment or third-party login, may indeed be unnecessary, which are just small configurations.
-
-## An In-Depth Look into Sealos Technology
-
-Sealos takes on a challenging scenario: allowing multiple tenants to share a Kubernetes cluster in an untrustworthy public network environment.
-
-The benefits of this approach are significant:
-- Users can start directly without building a cluster and only pay for containers, significantly reducing costs.
-- As the scale increases, a flywheel effect occurs, drastically reducing marginal costs. (Sealos's Moore's Law: Every doubling of the Sealos cluster size reduces cloud costs for users by 30%)
-
-However, this approach also presents a significant technical challenge: ensuring isolation, security, and scalability.
-
-By overcoming these technical challenges, we not only provide great value to customers in the public cloud but also easily handle private cloud scenarios.
-
-![Sealos Technology Analysis](https://jsd.onmicrosoft.cn/gh/yangchuansheng/imghosting-test@main/uPic/2023-11-17-16-19-sJYA9X.png)
-
-Decomposing Sealos's technology system:
-
-### Ubiquitous Operation
-A well-known open-source project in this area might be Terraform. Unfortunately, it's slow to start when interfacing with certain clouds (due to poorly written drivers; not Terraform's fault) and can easily hit API call limits of cloud providers (also due to erratic driver requests), failing to meet our needs.
-
-Moreover, we prefer Kubernetes CRD standards over Terraform. Consequently, we developed our own infrastructure controller. What normally took 10 minutes to launch, we optimized to 30 seconds, which is nearly the limit barring faster server startups by cloud providers. The optimization mainly involved parallel processing and algorithmic adjustments, rather than simple 10-second delays. Additionally, launching a Sealos cluster on these VMs takes only 3 minutes, already outperforming many similar products (which generally take 15 minutes).
-
-Running on bare metal also requires considering extensive compatibility issues. Thus, Sealos almost entirely abandons RPM, Apt, and other OS-tied installation tools, achieving compatibility with all major Linux distributions. We don't support Windows, simply because we don't prefer it.
-
-Our cluster imaging capability also effectively supports mainstream hardware architectures like ARM and x86.
-
-### Cloud Driver Layer
-This component faces massive challenges. Without considering isolation and security, installing containerd, Calico, and OpenEBS might suffice. However, in a public, untrusted environment, such weak isolation is unacceptable. Therefore, we've innovated with new technologies, such as Firecracker, for strong container isolation. The challenges of running VMs within VMs in cloud providers' infrastructure will be addressed in a separate article.
-
-Our network needs require high measurement and isolation standards. Traditional solutions like Calico rely heavily on iptables rules, becoming unusable at scale. We tested and found a 30% failure rate under stress with just 5000 rules. For networking, we introduced Cilium, using eBPF to address these issues and multi-tenant network metering.
-
-![Cloud Driver Layer](https://jsd.onmicrosoft.cn/gh/yangchuansheng/imghosting-test@main/uPic/2023-11-17-16-19-REW9Fy.png)
-
-For storage, we use OpenEBS plus LVM, mounting isolated volumes for each user, allowing them to enjoy local disk performance. File storage, however, becomes a significant issue. NFS and similar solutions are nearly toys, unsuitable for production. Thus, we developed Sealfs, a high-performance filesystem, from scratch in Rust, emphasizing simplicity and support for RDMA.
-
-### Lifecycle Management and Cluster Imaging
-For cluster installation and scaling, Sealos users know the process is nearly perfected, with complex clusters managed with a single command!
-
-Cluster imaging capability, likely unmatched globally, is supported by Sealos and Sealer, both of which I led in development. This capability is king in delivery! Entire clusters can be packaged in a fully Docker-compatible format, enabling one-click deployment in customer environments.
-
-In the face of our cluster imaging capability, other delivery tools pale in comparison.
-
-### Tenant Management
-Multi-tenancy is a critical need for any enterprise-level user. Designing tenant permissions requires flexibility without complexity, ensuring isolation and collaboration among departments or developers. Native Kubernetes doesn't address these needs, offering only rudimentary namespace management.
-
-Sealos assigns each user an independent kubeconfig, limiting their permissions to their namespace. Users can share their namespaces but are prohibited from risky actions like piercing through to the host, using privileges, or sharing host filesystem ports.
-
-### Application Management
-Applications are first-class citizens in Sealos, with everything above the cloud kernel being an application. The challenge here is finding a unified application management approach in a multi-tenant environment.
-
-- Some applications need admin rights to run a controller.
-- Others need to run a separate instance.
-- Some, like a ChatGPT API, are shared by multiple users.
-- Certain applications, like terminal apps, auto-release when unused.
-
-The system also needs to control and meter these applications, further complicating matters.
-
-Sealos abstracts these capabilities into applications, similar to running apps on macOS.
-
-### Proprietary Function Compute Application Laf
-
-Laf revolutionizes code writing, akin to blogging.
-
-- Cloud-based development with immediate results.
-- Efficient use of Laf means early finishes.
-- Even administrative staff can easily use cloud development.
-- Function computes come in two types: those that deploy in 30 seconds, and those that discourage use in 30 seconds.
-
-Laf's millisecond-level publishing outperforms others, where a typical deployment takes 3 to 5 seconds. Laf achieves faster than blogging speeds.
-
-Laf integrates GPT-4, reducing the need for manual coding. We trained thousands of Laf codes, enhancing AI writing capabilities.
-
-Databases and object storage are built-in. Except for some AI coding, almost no other concerns are needed.
-
-It uniquely supports WebSocket, outmatching others (where function compute charges by duration).
-
-Unlike other function computes that are not persistent, Laf utilizes always-on, auto-scaling containers.
-
-### Proprietary AI Knowledge Base Application FastGPT
-
-Laf's AI codes, Sealos's automatic fault diagnosis, AI auto-deployment of applications, and Docker image building rely on FastGPT for knowledge base construction.
-
-![FastGPT Application](https://jsd.onmicrosoft.cn/gh/yangchuansheng/imghosting-test@main/uPic/2023-11-17-16-19-cCinq3.png)
-
-### Databases/Message Queues Applications
-We focus on the operating system and some built-in apps. For highly specialized areas like databases and message queues, we collaborate with top teams. For databases, we partner with Kubeblocks, led by PolarDB founder Cao Wei (conveniently next door, with great coffee and reliable databases). Kubeblocks orchestrates MySQL, PostgreSQL, MongoDB, Redis, etc., ensuring data security and recovery.
-
-For message queues, we collaborate with RocketMQ founder Wang Xiaorui, addressing RocketMQ and Kafka services.
-
-In DevOps, we work with Gitea, 90% compatible with GitHub Actions, led by the Gitea creator. The near-perfect compatibility with GitHub Actions is a wise choice.
-
-### Metering and Billing
-
-Metering is complex, requiring a monitoring-like collection mechanism. Beyond measuring container CPU, memory, and disk usage, it must associate data with namespaces and ultimately accounts. More challenging measurements include database access counts in function computes and storage used by each tenant. The most difficult is measuring network bandwidth without impacting performance.
-
-The metering system's challenge is its sensitivity. Any error affects customer billing, necessitating a reconciliation system to verify measurements and ensure billing accuracy.
-
-With this capability, enterprises can finely operate internal departments and developers, automatically shutting down applications with overdue payments, virtually eliminating idle processes.
-
-We've also unified the abstraction for metering in both public and private cloud modes.
-
-## Sealos Design Philosophy and Principles
-
-The essence of remarkable technology is its simplicity from the user's perspective, similar to the Apple iPhone and the Android operating system. Cloud computing can achieve this too, but simplicity without powerful functionality is merely rudimentary. A brilliant architecture doesn't sacrifice complexity for functionality.
-
-If Sealos deviates from these principles, it becomes cumbersome and heads towards obsolescence.
-
-### The Principle of Simplicity
-
-Sealos embodies simplicity in two aspects: product design and system architecture.
-
-In terms of product design, we are committed to not burdening users. We want users to use the cloud as easily as they use personal computers, focusing on applications relevant to their roles without being disturbed by unnecessary features. This does not imply weak functionalities; Sealos can enhance system capabilities by extending any application and provides native APIs for flexible expansion.
-
-At the system architecture level, abandoning the traditional IaaS, PaaS, SaaS three-tier architecture is wise. From an application perspective, there's no need for such complex support structures. With cloud kernel and cloud drivers, **everything above the system is an application.**
-
-### Fragmentation
-
-Sealos can be simplified to just a bare Kubernetes, or expand to thousands of applications. It can run on a TV box or in data centers with tens of thousands of servers. Think of Linux, which can operate on embedded devices and in the largest data centers. This represents a fragmented architecture, meeting your exact needs without overwhelming you with unnecessary capabilities.
-
-Only this architecture can achieve limitless expansion.
-
-### Modular Assembly
-
-A cohesive and streamlined architecture allows for customization according to individual needs. Your cloud should be just right – neither too much nor too little. This is possible thanks to a high level of abstraction. Specific functionalities are implemented by applications themselves, while the cloud OS only needs to pool resources and manage applications. Thus, even if there are tens of thousands of applications in the ecosystem, the complexity of your cloud doesn't increase. Think about how you use a smartphone; the cloud can be used in the same way.
-
-## Use Cases
-
-### Using Sealos Cloud Services Directly
-
-- Any business component that can be built into a Docker image can easily run on Sealos (with future AI assistance for image building). This includes projects written in various programming languages within a company.
-- One-click launch for highly available clusters of the four major databases: pgsql, mysql, mongo, and redis. Complete with backup, recovery, monitoring, and control.
-- Various well-known open-source projects can run on Sealos.
-
-Thus, Sealos effectively supports your business systems, addressing runtime issues and all backend dependencies.
-
-### Building a Complete Private Cloud
-
-It's increasingly apparent that bare metal not only performs better than virtual machines but is also more cost-effective. However, many companies are hesitant to opt for hardware hosting due to the complexity of managing software – be it OpenStack or Kubernetes.
-
-The cloud service version of Sealos can be cloned exactly into your own data center. Sealos already serves tens of thousands of online users, supporting scenarios and complexities that surpass most companies. After all, companies with tens of thousands of developers are rare.
-
-So, with bare metal and Sealos, both hardware and software are set, and building a private cloud becomes feasible.
-
-The cost of self-building?
-
-- Purchase servers.
-- Launch clusters with a single command – so simple anyone can do it, regardless of the number of servers.
-- Minimal maintenance, about 0.5 person. We've nearly achieved self-maintenance. The current online cluster serves tens of thousands of applications with approximately 0.1 person's effort in maintenance.
-
-## Comparison with Other Platforms
-
-### Comparing with Other Cloud-Native PaaS Platforms
-
-One of the most frequently asked questions is about the biggest difference in design philosophy. Sealos does not aim to be an all-encompassing PaaS platform. The [cloud operating system](https://sealos.io) itself is highly abstracted, essentially 'nothing'. On Sealos, applications are the prime focus, meeting users' needs through various applications. For instance, when using the Database application on Sealos, you need not worry about any other concepts, not even knowing how to spell 'Kubernetes'.
-
-Sealos, differing from traditional PaaS platforms that aim for all-inclusiveness, regards the [cloud operating system](https://sealos.io) as a highly abstract 'nothing', emphasizing the importance of applications. On the Sealos platform, **applications are considered the top priority**, catering to a diverse range of user needs. For example, when using the database application on Sealos, users don’t need to concern themselves with any other concepts, **not even how to spell “Kubernetes”**.
-
-Rancher and KubeSphere are excellent PaaS platforms. However, Sealos does not consider Kubernetes as its core purpose. It focuses more on the applications running on Kubernetes than Kubernetes itself. Hence, Sealos targets a wide range of developers, intending to create a versatile operating system, not confined to serving only the cloud-native sector. Sealos even prefers not to emphasize the yet-to-be-defined concept of 'cloud-native'.
-
-Therefore, the core idea of Sealos is not “a better Kubernetes” but rather “**providing the applications users need through Kubernetes**”.
-
-> What do users really need?
->
-
-In the operating system domain, user needs define the system’s functionalities. The flexibility of an operating system means it does not impose extra burdens on users. For example, Windows is a gaming platform for gamers, a programming tool for programmers, and a graphic processing software for graphic artists. The identity of an operating system is determined by its users, depending on which applications are loaded. Sealos also embraces this philosophy, hence different users will have distinctly different experiences.
-
-### Comparing Various K8s Installation Tools
-
-Installation is merely a boot function of the entire operating system, but Sealos also has unique features in cluster lifecycle management and application packaging and delivery.
-
-Firstly, Sealos can complete installation with a single command. Secondly, using cluster images, the entire cluster can be packaged and delivered anywhere. Lastly, Sealos allows users to flexibly customize their required cluster like writing a Dockerfile, freely assembling and replacing components in the image, offering hundreds of components for user selection.
-
-## Conclusion
-
-The Sealos community now has a vast user base, developed over many years, battle-tested, with stability proven in various extreme scenarios, steady as an old dog.
-
-Our cloud service has seen exaggerated growth in registered users and application numbers, exceeding 6k online developers and nearly ten thousand applications within two weeks of launch.
-
-We will provide users with a [cloud operating system](https://sealos.io) that is consistent in both public and private cloud experiences, simple, affordable, open, and powerful.
\ No newline at end of file
diff --git a/docs/blog/en/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/feature.jpg b/docs/blog/en/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/feature.jpg
deleted file mode 100644
index ac9764aaf636..000000000000
Binary files a/docs/blog/en/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/feature.jpg and /dev/null differ
diff --git a/docs/blog/en/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/meilisearch-on-sealos-desktop-2.jpg b/docs/blog/en/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/meilisearch-on-sealos-desktop-2.jpg
deleted file mode 100644
index 20166e44d873..000000000000
Binary files a/docs/blog/en/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/meilisearch-on-sealos-desktop-2.jpg and /dev/null differ
diff --git a/docs/blog/en/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/meilisearch-on-sealos-desktop.jpg b/docs/blog/en/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/meilisearch-on-sealos-desktop.jpg
deleted file mode 100644
index 14cb1053c6e1..000000000000
Binary files a/docs/blog/en/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/meilisearch-on-sealos-desktop.jpg and /dev/null differ
diff --git a/docs/blog/en/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/meilisearch-private-address-on-sealos.jpg b/docs/blog/en/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/meilisearch-private-address-on-sealos.jpg
deleted file mode 100644
index 60025ff8046f..000000000000
Binary files a/docs/blog/en/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/meilisearch-private-address-on-sealos.jpg and /dev/null differ
diff --git a/docs/blog/en/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/open-meilisearch-terminal-on-sealos.jpg b/docs/blog/en/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/open-meilisearch-terminal-on-sealos.jpg
deleted file mode 100644
index 7a224efb3e70..000000000000
Binary files a/docs/blog/en/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/open-meilisearch-terminal-on-sealos.jpg and /dev/null differ
diff --git a/docs/blog/en/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/star-history-of-meilisearch.png b/docs/blog/en/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/star-history-of-meilisearch.png
deleted file mode 100644
index df050313a35c..000000000000
Binary files a/docs/blog/en/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/star-history-of-meilisearch.png and /dev/null differ
diff --git a/docs/blog/en/2024/how-to-deploy-and-configure-meilisearch-using-docker/index.md b/docs/blog/en/2024/how-to-deploy-and-configure-meilisearch-using-docker/index.md
deleted file mode 100644
index 9aab30abd4e5..000000000000
--- a/docs/blog/en/2024/how-to-deploy-and-configure-meilisearch-using-docker/index.md
+++ /dev/null
@@ -1,280 +0,0 @@
----
-slug: how-to-deploy-and-configure-meilisearch-using-docker
-title: "How To Deploy and Configure Meilisearch using Docker"
-description: Discover how Meilisearch, the lightning-fast open-source search engine, can transform your app's search experience. Learn installation, features, and integration tips.
-authors: [Carson Yang]
-tags: [Developer Tools, Sealos, Meilisearch, Flarum]
-keywords: [Meilisearch, search engine, fast search, open-source, Flarum, Meilisearch vs Elasticsearch, search engine comparison]
-image: ./images/feature.jpg
-date: 2024-07-01T10:00
----
-
-## Introduction
-
-In today's digital world, search functionality is a real game-changer. It's the backbone of virtually every application, making our lives easier and more efficient. From e-commerce platforms to content management systems and corporate knowledge bases, users want to find information quickly and accurately. However, traditional search solutions often fall short, struggling with slow response times, irrelevant results, poor scalability, and lack of flexibility. These issues don't just frustrate users – they can drive them away, ultimately putting a dent in business growth.
-
-We're so excited to introduce you to [Meilisearch](https://www.meilisearch.com/), an amazing open-source search engine that's here to shake things up! Meilisearch is a fresh newcomer to the search engine scene, and it's already making waves with its easy-to-use deployment, lightning-fast queries, and feature-rich toolkit. Just imagine this: with just one simple command, you can have a Meilisearch server up and running, ready to tackle queries. It's not just powerful; it's also super user-friendly! It's got all these amazing features like fuzzy matching and schema-less indexing, plus a sleek web interface for you to play around with.
-
-<!--truncate-->
-
-In this guide, we're going to take a deep dive into Meilisearch's world. Here's what we'll cover: 
-
-+ the nitty-gritty of Meilisearch's standout features and why they matter.
-+ setting up Meilisearch on your system step by step.
-+ Meilisearch 101: Essential techniques to get you started.
-+ Real-world application: Integrating Meilisearch into a Flarum forum (because theory is great, but practice makes perfect).
-+ How Meilisearch stacks up against the competition in the search engine arena.
-
-## Prerequisites
-
-Before we get started, we just wanted to make sure you've got these bases covered:
-
-- You're comfortable navigating the command line 
-- You've got a grasp on RESTful API concepts 
-- Bonus points: A [Sealos](https://sealos.io) account for lightning-fast Meilisearch deployment (optional, but handy) 
-- Ready to revolutionize your search experience? Let's get started with Meilisearch!
-
-## Introduction to Meilisearch
-
-[Meilisearch](https://github.com/meilisearch/meilisearch) is a game-changing open-source search engine, it is powered by [Rust](https://www.rust-lang.org/) and offers lightning-fast full-text search capabilities while being incredibly user-friendly and easy to integrate. Meilisearch is built on four key principles that set it apart:
-
-1. **Blazing Speed**: It delivers results in under 50 milliseconds, no matter how large your dataset is.
-2. **Spot-On Relevance**: It uses smart algorithms to ensure the most relevant results always come first.
-3. **Developer's Dream**: It features intuitive APIs and clear documentation, making integration a breeze.
-4. **Tailor-Made Searches**: It offers a wide range of customization options to fine-tune your search experience.
-
-Since its launch in 2018, Meilisearch has been on a roll! It's been a real rising star in the open-source community. Thanks to its user-friendly features and exceptional performance, it has already garnered an impressive 40,000+ stars on GitHub.
-
-![Star history chart of the Meilisearch open source project](./images/star-history-of-meilisearch.png)
-
-## ## Core Features of Meilisearch
-
-Meilisearch offers a robust set of search capabilities, making it an ideal choice for projects ranging from personal websites to large-scale enterprise applications. Here's what sets it apart:
-
-### Lightning-Fast Performance
-
-- **Blazing Speed**: It delivers results in under 50 ms, no matter how much data you're working with.
-- **Instant Feedback**: It even implements search-as-you-type for real-time responsiveness!
-- **Typo-Tolerant**: It intelligently handles misspellings, ensuring relevant results despite query errors.
-
-### Advanced Relevance Features
-
-- **Custom Ranking**: Tailor result prioritization to your specific needs.
-- **Faceted Search**: Enable intuitive filtering and navigation through multi-dimensional data.
-- **Synonym Recognition**: Enhance search flexibility by setting up synonyms.
-
-### Comprehensive Language Support
-
-- **Global Readiness**: Optimized for a wide array of languages, including complex scripts like Chinese and Japanese.
-- **Smart Filtering**: Customizable stop word lists to improve result quality across all supported languages.
-
-### Powerful Advanced Features
-
-- **Geo-aware Search**: Incorporate location-based searching and sorting.
-- **Secure Multi-tenancy**: Implement robust data segregation with tenant tokens.
-- **Result Highlighting**: Emphasize matching text in search outputs.
-- **Flexible Document Management**: Easily add, update, or remove documents within your index.
-
-### Developer-Friendly Ecosystem
-
-- **Intuitive API**: Offers a RESTful interface for seamless integration.
-- **Multilingual SDKs**: Official support across various programming languages.
-- **Comprehensive Documentation**: Access detailed guides and practical examples.
-- **Self-Hosting Option**: Deploy on your own infrastructure for complete control.
-
-## Meilisearch vs. Other Search Solutions
-
-Let's take a closer look at Meilisearch and see how it compares to other leading search solutions!
-
-| Feature          | Meilisearch    | Elasticsearch                              | Algolia   |
-| ---------------- | -------------- | ------------------------------------------ | --------- |
-| Response time    | Lightning-fast (<50ms) | Varies, often >100ms               | Swift (<100ms) |
-| Ease of use      | Highly intuitive | Moderate learning curve                  | User-friendly |
-| Typo correction  | Built-in       | Configurable                               | Built-in  |
-| Multilingual support | Excellent   | Proficient                                | Excellent |
-| Geospatial search | Supported     | Supported                                  | Supported |
-| Open-source      | Fully open     | Partially (some proprietary features)      | Proprietary |
-| Pricing          | Free (self-hosted) | Free (self-hosted), paid cloud options | Paid SaaS |
-
-While Elasticsearch has a ton of great features and a strong ecosystem, Algolia is all about cloud services and out-of-the-box functionality. But what really sets Meilisearch apart is its speed, simplicity, and open-source commitment. If you're a small to medium-sized project or team looking for the best of both worlds—performance and accessibility—Meilisearch is the perfect fit!
-
-## Installation and Configuration of Meilisearch
-
-Setting up Meilisearch is a piece of cake! With a smorgasbord of installation options to fit your needs like a glove, it couldn't be easier.
-
-One of Meilisearch's standout features is its seamless integration with Docker, making deployment and scalability a breeze. The official Meilisearch Docker image allows you to get a Meilisearch instance up and running with just a single command:
-
-```bash
-$ docker run -p 7700:7700 getmeili/meilisearch:latest
-```
-
-This Docker-based approach ensures consistent environments across development, testing, and production, significantly simplifying the deployment process.
-
-Not a tech wizard? No problem! The [Sealos app store](https://sealos.io/docs/guides/templates/) has got your back with one-click deployment templates. It's as easy as pie - just point, click, and you're off to the races!
-
-**Do you Want to get Meilisearch up and running in a jiffy without getting lost in the weeds of complex setup?** Sealos might be your golden ticket.
-
-First things first, head over to the [Meilisearch template page](https://template.cloud.sealos.io/deploy?templateName=meilisearch) and hit the "Deploy on sealos" button in the top right corner.
-
-> New to the [Sealos](https://sealos.io/) scene? No biggie - just sign up for a Sealos cloud account, log in, and you'll be on your way to the deployment page in no time.
-
-Now, listen up! There are just two settings you need to get right to keep your Meilisearch instance running like a well-oiled machine:
-
-1. **MEILI_ENV**: This bad boy sets the mood for your instance - either **production** or **development**.
-
-   Production mode:
-   - Search preview? Nope, it's all business.
-
-   Development mode:
-   - Search preview's on tap - perfect for tinkering to your heart's content.
-
-2. **MEILI_MASTER_KEY**: Think of this as your Meilisearch's VIP pass. It locks down everything except `GET /health`. Want in? You'll need to flash those API keys.
-
-   Production mode:
-   - A master key is non-negotiable. No ifs, ands, or buts.
-   - Try to skimp on the key (less than 16 bytes), and Meilisearch will throw a tantrum and refuse to play ball.
-
-   Development mode:
-   - Master key? Take it or leave it.
-   - No key? It's the Wild West - everything's up for grabs.
-
-Here's the lowdown: If you don't bring your own key to the party or if it's not up to snuff, Meilisearch will try to hook you up with an auto-generated one.
-
-Long story short: **In production, a master key is your ride-or-die. In development? It's dealer's choice.**
-
-Whipping up a key is a walk in the park. Just punch this into your Linux or macOS terminal:
-
-```bash
-openssl rand -base64 48
-```
-
-Once you've done that, just hit the "Deploy Application" button and let the magic happen.
-
-Once everything is all said and done, just head on over to the app details page and hang tight until you see "running." Then, just give that external address a click, and you'll be in Meilisearch search preview heaven in no time!
-
-All you have to do is enter your master key, and you're all set!
-
-Here's a little pro tip for you: just give your Sealos desktop (that's the [cloud.sealos.io](https://cloud.sealos.io) page) a quick refresh, and you'll see a shiny new icon! 
-
-![Meilisearch on Sealos Desktop](./images/meilisearch-on-sealos-desktop.jpg)
-
-Just one click, and you'll be right there with the Meilisearch preview!
-
-![Meilisearch on Sealos Desktop](./images/meilisearch-on-sealos-desktop-2.jpg)
-
-Does this feel a little familiar? It's got that Windows shortcut vibe going on, doesn't it? It just goes to show that Sealos can do all the same tricks as your trusty old desktop OS, but with its head in the clouds!
-
-## Basic Usage of Meilisearch
-
-Meilisearch offers a user-friendly RESTful API that seamlessly integrates with various programming languages and frameworks. Here's a quick guide to essential operations:
-
-### 1. Creating an Index
-
-Start by setting up a search index for your data:
-
-```bash
-$ curl \
-  -X POST 'http://localhost:7700/indexes' \
-  -H 'Content-Type: application/json' \
-  -H 'Authorization: Bearer YOUR_API_KEY' \
-  --data-binary '{
-    "uid": "movies",
-    "primaryKey": "id"
-  }'
-```
-
-### 2. Adding Documents
-
-Next, populate your index with some data:
-
-```bash
-$ curl \
-  -X POST 'http://localhost:7700/indexes/movies/documents' \
-  -H 'Content-Type: application/json' \
-  -H 'Authorization: Bearer YOUR_API_KEY' \
-  --data-binary '[
-    {
-      "id": 1,
-      "title": "Carol",
-      "genres": ["Romance", "Drama"]
-    },
-    {
-      "id": 2,
-      "title": "Wonder Woman",
-      "genres": ["Action", "Adventure"]
-    }
-  ]'
-```
-
-### 3. Performing a Search
-
-Finally, execute a search query on your indexed documents:
-
-```bash
-$ curl \
-  -X POST 'http://localhost:7700/indexes/movies/search' \
-  -H 'Content-Type: application/json' \
-  -H 'Authorization: Bearer YOUR_API_KEY' \
-  --data-binary '{
-    "q": "wonder"
-  }'
-```
-
-## Integrating Meilisearch into Flarum Forum
-
-This guide walks you through integrating Meilisearch into your [Flarum](https://template.cloud.sealos.io/deploy?templateName=flarum) forum, giving your users a turbo-charged search experience.
-
-### 1. Install Meilisearch SDK
-
-Fire up the terminal from your Flarum app's details page and run. In the Flarum application details interface, click the terminal button in the bottom right corner:
-
-![Open Meilisearch terminal on Sealos Desktop](./images/open-meilisearch-terminal-on-sealos.jpg)
-
-Execute the following command in the opened terminal to install the Meilisearch SDK:
-
-```bash
-extension require meilisearch/meilisearch-php
-```
-
-### 2. Add Scout Search Extension
-
-In the same terminal, execute:
-
-```bash
-extension require clarkwinkelmann/flarum-ext-scout
-```
-
-### 3. Set Up Scout Extension
-
-Head over to your Flarum admin panel. Then, switch on Scout and choose Meilisearch as your search engine. Then, just plug in Meilisearch's URL and key
-
-If you've got Meilisearch and Flarum in the same Sealos availability zone, you can just use Meilisearch's internal network address, go ahead and enter the Meilisearch application details page. Once you're there, just click on the internal network address to copy Meilisearch's internal network address. Then, paste it as the value of the Scout plugin's Meilisearch Host above.
-
-![Meilisearch private address on Sealos](./images/meilisearch-private-address-on-sealos.jpg)
-
-### 4. Beef Up Meilisearch's Memory
-
-Meilisearch needs a little more space to play nice with Flarum. Here's how to bump it from 128M to 1G:
-
-1. Find your Meilisearch app details
-2. Hit "Update"
-3. Crank memory up to 1G
-4. Save changes
-
-### 5. Feed Meilisearch Your Data
-
-Get your existing content into Meilisearch with:
-
-```bash
-php flarum scout:import-all
-```
-
-You'll see "Imported" messages for each data type when it's done.
-
-And there you have it! Your Flarum forum now boasts turbocharged search capabilities, including slick Chinese text search! Let's give it a spin!
-
-## Conclusion
-
-Meilisearch is a real powerhouse for developers looking to supercharge their apps with lightning-fast, spot-on search capabilities. Our journey through this tutorial has unveiled Meilisearch's standout features, guided you through the setup process, and shown you how to weave it seamlessly into your projects.
-
-But hey, don't stop here! We’d love for you to explore even more of the amazing features that Meilisearch has to offer! Have fun tinkering with custom ranking rules and playing around with synonym settings! You'll be amazed at how you can fine-tune your search experience.
\ No newline at end of file
diff --git a/docs/blog/en/2024/how-to-set-up-affine/images/AFFINE-console.png b/docs/blog/en/2024/how-to-set-up-affine/images/AFFINE-console.png
deleted file mode 100644
index e82958216382..000000000000
Binary files a/docs/blog/en/2024/how-to-set-up-affine/images/AFFINE-console.png and /dev/null differ
diff --git a/docs/blog/en/2024/how-to-set-up-affine/images/AFFINE-console2.png b/docs/blog/en/2024/how-to-set-up-affine/images/AFFINE-console2.png
deleted file mode 100644
index dcb1c5a2143d..000000000000
Binary files a/docs/blog/en/2024/how-to-set-up-affine/images/AFFINE-console2.png and /dev/null differ
diff --git a/docs/blog/en/2024/how-to-set-up-affine/images/AFFINE-details.png b/docs/blog/en/2024/how-to-set-up-affine/images/AFFINE-details.png
deleted file mode 100644
index b38e1ae3e83a..000000000000
Binary files a/docs/blog/en/2024/how-to-set-up-affine/images/AFFINE-details.png and /dev/null differ
diff --git a/docs/blog/en/2024/how-to-set-up-affine/images/AFFINE-logs.png b/docs/blog/en/2024/how-to-set-up-affine/images/AFFINE-logs.png
deleted file mode 100644
index 82ffc3110928..000000000000
Binary files a/docs/blog/en/2024/how-to-set-up-affine/images/AFFINE-logs.png and /dev/null differ
diff --git a/docs/blog/en/2024/how-to-set-up-affine/images/AFFINE-on-sealos.png b/docs/blog/en/2024/how-to-set-up-affine/images/AFFINE-on-sealos.png
deleted file mode 100644
index 8647a6b66052..000000000000
Binary files a/docs/blog/en/2024/how-to-set-up-affine/images/AFFINE-on-sealos.png and /dev/null differ
diff --git a/docs/blog/en/2024/how-to-set-up-affine/images/AFFINE-on-sealos2.png b/docs/blog/en/2024/how-to-set-up-affine/images/AFFINE-on-sealos2.png
deleted file mode 100644
index 061cd0eb230f..000000000000
Binary files a/docs/blog/en/2024/how-to-set-up-affine/images/AFFINE-on-sealos2.png and /dev/null differ
diff --git a/docs/blog/en/2024/how-to-set-up-affine/images/AFFINE-whiteboard.png b/docs/blog/en/2024/how-to-set-up-affine/images/AFFINE-whiteboard.png
deleted file mode 100644
index dcc99fe0837b..000000000000
Binary files a/docs/blog/en/2024/how-to-set-up-affine/images/AFFINE-whiteboard.png and /dev/null differ
diff --git a/docs/blog/en/2024/how-to-set-up-affine/images/AFFINE-workspace.png b/docs/blog/en/2024/how-to-set-up-affine/images/AFFINE-workspace.png
deleted file mode 100644
index f40ff9204f47..000000000000
Binary files a/docs/blog/en/2024/how-to-set-up-affine/images/AFFINE-workspace.png and /dev/null differ
diff --git a/docs/blog/en/2024/how-to-set-up-affine/images/AFFINE.jpg b/docs/blog/en/2024/how-to-set-up-affine/images/AFFINE.jpg
deleted file mode 100644
index 8fea1fd20f14..000000000000
Binary files a/docs/blog/en/2024/how-to-set-up-affine/images/AFFINE.jpg and /dev/null differ
diff --git a/docs/blog/en/2024/how-to-set-up-affine/index.md b/docs/blog/en/2024/how-to-set-up-affine/index.md
deleted file mode 100644
index a9c5439ec00b..000000000000
--- a/docs/blog/en/2024/how-to-set-up-affine/index.md
+++ /dev/null
@@ -1,80 +0,0 @@
----
-slug: how-to-set-up-affine
-title: "AFFINE Deployment and Usage Guide: Mastering AFFINE's Self-Hosting Basics"
-description: Master AFFiNE self-hosting and experience the future of knowledge management. Our guide takes you through the process, enabling you to harness this integrated KnowledgeOS.
-authors: [Carson Yang]
-tags: [Notes, Sealos, Wiki]
-keywords: [AFFINE, Sealos, Notion, Notes, Wiki, whiteboard]
-image: images/feature.jpg
-date: 2024-04-07T10:00
----
-
-AFFiNE is a completely open-source alternative to Notion and Miro, with a greater emphasis on privacy and security. Unlike Notion, AFFiNE prioritizes the storage of note content locally. The GitHub repository can be found at [https://github.com/toeverything/AFFiNE](https://github.com/toeverything/AFFiNE).
-
-<!--truncate-->
-
-Built using Rust and TypeScript, AFFiNE offers developers maximum flexibility with a simple, single-command setup. This allows for easy customization and deployment of the application.
-
-While Miro and Notion focus primarily on whiteboards and pages, AFFiNE positions itself as an integrated KnowledgeOS. It supports kanban boards, tables, and rich text paragraphs as building blocks to create pages or whiteboards, enabling comprehensive document editing, data processing, and brainstorming in one place.
-
-![](./images/AFFINE.jpg)
-
-## Key Features of AFFiNE
-
-### 1. Seamless Integration of Documents and Whiteboards
-
-AFFiNE stands out as one of the few applications that allows users to place any type of content on a borderless canvas, including rich text, sticky notes, embedded web pages, multi-view databases, linked pages, and even slides.
-
-Each page in AFFiNE has two views, allowing users to access and edit fully functional blocks anywhere, in any form.
-
-![](./images/AFFINE-whiteboard.png)
-
-### 2. Multi-modal AI Copilot
-
-AFFiNE's AI capabilities can assist with a wide range of tasks, from writing professional work reports and turning outlines into expressive slides to summarizing articles into well-structured mind maps. It can even help users draw and write prototype apps and web pages with just a single prompt.
-
-### 3. Local-First & Real-Time Collaboration
-
-AFFiNE adheres to the concept of local-first, emphasizing data privacy. Users have the option to opt out of the cloud service and synchronize their data independently, providing them with greater control over their information.
-
-### 4. Self-Hosting
-
-Users can freely fork and build custom versions of AFFiNE or self-host the application. AFFiNE also plans to launch a plugin community and support third-party modules in the future.
-
-## Self-Hosting AFFiNE
-
-Self-hosting AFFiNE requires PostgreSQL and Redis databases, which can be complex to set up. However, the [Sealos app store](https://sealos.run/docs/guides/templates/) offers a one-click deployment template that simplifies the process.
-
-To get started, open this link:
-
-[![](https://cdn.jsdelivr.net/gh/labring-actions/templates@main/Deploy-on-Sealos.svg)](https://bja.sealos.run/?openapp=system-template%3FtemplateName%3Daffine)
-
-Set the administrator's email (AFFINE_ADMIN_EMAIL) and password (AFFINE_ADMIN_PASSWORD), then click "Go to Sealos deployment" in the upper right corner.
-
-> New users of [Sealos](https://sealos.io) will need to register and log in to a Sealos public cloud account. After logging in, you'll be redirected to the template deployment page.
-
-On the deployment page, click "Deploy Application" in the upper right corner to initiate the deployment process. Once the deployment is complete, click "Details" to view the application details page.
-
-![](./images/AFFINE-on-sealos.png)
-
-Wait for the instance status to change to "running," then click the log icon to view the logs:
-
-![](./images/AFFINE-on-sealos2.png)
-
-A successful startup will display the following log:
-
-![](./images/AFFINE-logs.png)
-
-Click on the external network address to open the visual interface of AFFiNE:
-
-![](./images/AFFINE-details.png)
-
-By default, AFFiNE uses local browser storage. To log in to your self-hosted instance, click "Log in and enable" in the upper right corner:
-
-![](./images/AFFINE-console.png)
-
-After logging in, be sure to click "Enable AFFINE Cloud Service" to avoid data loss, as failing to do so will result in data being stored in the local browser:
-
-![](./images/AFFINE-console2.png)
-
-Once the self-hosted cloud service is enabled, you can start using AFFiNE and take advantage of all its features.
\ No newline at end of file
diff --git a/docs/blog/en/authors.yml b/docs/blog/en/authors.yml
deleted file mode 100644
index 1a9418e77f73..000000000000
--- a/docs/blog/en/authors.yml
+++ /dev/null
@@ -1,18 +0,0 @@
-fanux:
-  name: fanux
-  title: '@sealos'
-  url: https://github.com/fanux
-  image_url: https://avatars.githubusercontent.com/u/8912557?v=4
-
-xiao-jay:
-  name: xiao-jay
-  title: '@sealos'
-  url: https://github.com/xiao-jay
-  image_url: https://avatars.githubusercontent.com/u/87080562?v=4
-
-Carson Yang:
-  name: Carson Yang
-  title: '@sealos'
-  url: https://github.com/yangchuansheng
-  image_url: https://avatars.githubusercontent.com/u/15308462?v=4
-
diff --git a/docs/blog/zh-Hans/2019/08/26/kubernetes-with-sealos.md b/docs/blog/zh-Hans/2019/08/26/kubernetes-with-sealos.md
deleted file mode 100644
index e74aee4638d4..000000000000
--- a/docs/blog/zh-Hans/2019/08/26/kubernetes-with-sealos.md
+++ /dev/null
@@ -1,133 +0,0 @@
----
-slug: kubernetes with sealos
-title: sealos - 以 kubernetes 为内核的云操作系统发行版
-authors: [fanux]
-tags: [kubernetes,sealos]
----
-
-# 基于云内核的未来云计算架构
-
-早期单机操作系统也是分层架构，后面才演化成今天的如 linux windows 的宏内核微内核架构，云操作系统也会有类似发展趋势
-
-以前都是单机应用，而现代应用几乎都是分布式应用，kubernetes 已经成为事实上的“云操作系统内核”，能让云内核普及的发型版呼之欲出
-
-![image](https://user-images.githubusercontent.com/8912557/176412542-2726e976-617b-4921-a37c-375a814deb8b.png)
-
-你会发现现在 IaaS PaaS SaaS 在云原生技术普及的浪潮中已经名存实亡，比如容器运行在裸机上就已经拥有非常好的性能了，是否还需要 IaaS 这一层，PaaS SaaS 本质都是容器是否还需要去可以区分，这三层架构已经被击穿！
-
-程序员很认“鸭式辩型”，就是会游泳长了翅膀的就是鸭子，这种抽象思维是极重要的，这也就是为啥 linux 一切皆文件的设计哲学了。而一个运行的 mysql 集群与一个 crm 软件其实也没有本质区别，所以在云操作系统中，“内核之上皆为应用”。
-
-## 云计算三次浪潮
-
-基于云内核的云操作系统未来会引发云计算的巨大变革。
-
-![image](https://user-images.githubusercontent.com/8912557/176412592-51d55344-0f57-4918-8499-826fa7a7bf28.png)
-
-先来看看有意思的 web1 web2 web3, 再把互联网的变革套用到云计算中，你会发现，生产关系有非常类似的地方。
-
-【1 对 n 关系】
-* web1 : 门户网站生产内容，用户查看内容 
-* 云计算 1.0 : 公有云厂商开发服务，企业和开发者使用
-
-这个阶段生产关系是 1 对多的，你会发现云厂商几十款云产品是无法满足市场上体量庞大偏好各异的需求的，就像 web1 用户只能看小编写的一些新闻一样。
-
----
-【n 对 1 对 n 关系】
-* web2 : UGC 用户生产内容，用户之间产生链接 
-* 云计算 2.0 : 开发者生产云计算应用，给用户使用 
-
-渐渐的云厂商开始弄 markting place, 一定程度想通过开放市场来连接云计算的生产者与消费者，这就是云计算朝着 2.0 过度的信号, 但是缺乏标准就意味着难以协作，这个阶段想要彻底爆发必须要有“实际上的标准”出现。
-
-Docker 镜像算是非常好的标准，但是可惜难以覆盖分布式软件，但是大家通过 docker hub 协作就是一个非常好的协作模型了。
-
-kubernetes 的 API 的标准是真正有潜力成为云计算 2.0 事实标准的。未来大家都通过这个系统来相互协作，就像安卓生态蓬勃的应用爆炸一样，这样才能诞生越来越多优质的云服务出来。
-
----
-【n 对 n 关系】
-* web 3 : 网络所有权属于网络的所有参与者，数据回归用户自己手中
-* 云计算 3.0 : 算力属于所有计算的参与者，一台分布式超级计算机诞生
-
-整个过程其实是让计算和服务更民主，任何组织个人都可以贡献自己的算力，发布和使用应用的人也不用关心应用到底运行在哪个地方，整个计算的使用像使用一台虚拟计算机一样。 和现在很多大的公链一样，不过目前的智能合约还是场景过于局限，计算成本过高，形式上很像超级计算机，效果上还是差了好几个鸿沟。
-
-## 基于云内核设计的云计算会更便宜
-
-当前公有云提供的云服务还是极其昂贵的, 在某云厂商官网查到的价格和 IDC 托管硬件相比，如果是存储类型的机器，价格相差十倍！（不过云厂商对大B都有非常大的折扣，小B没有这种福利）
-
-![image](https://user-images.githubusercontent.com/8912557/176412650-31db6594-a15b-4c95-a47b-9838e9fff6a1.png)
-
-很多公有云厂商妖魔化私有云，说私有云就不叫云，我想问私有云怎么就不叫云了，是因为私有云太便宜还是私有云动了谁的蛋糕？
-
-这个价格对比小学生都能算的清楚。其实在云内核设计的云操作系统出现之前公有云确实会便宜，因为软件成本很高，企业想云在自己机房玩一套如 openstack 这样的 IaaS 几乎每年会花费上千万成本，而现在开源生态逐渐成熟让软件成本变得便宜和稳定，私有云的成本便宜逻辑又开始成立了。
-
-那还有个问题就是“传统公有云为什么贵？”
-* 第一，因为基于的还是 IaaS PaaS SaaS 的架构，每一层都意味着成本，软件的复杂度直接决定成本，所谓的一切自研的优势现在反而会变成成本劣势，这是最主要的原因。
-* 第二，谈边际成本，这个不是按照公有云的用户体量去计算的，而是按照每个可用区的建设成本去计算的，如果软件体系复杂，每个机房需要大量管理节点，需要大量交付人员配合，那成本就无法降下来。但是基于内核设计的云操作系统管理节点只需三台，实习生都能在半个小时以内交付，就像装 centos 一样简单。
-* 第三，次要原因是因为公有云的弹性都是要预留资源的，这部分成本都会摊到消费者头上。
-
-很多企业的业务资源使用都是相对固定，半年一年作一次扩容等，托管或者自建肯定会更便宜，促销活动什么的一年也就几次，在促销时使用公有云即可，这样成本可以大幅度降低。
-
-## 云计算会走向开源开放
-
-封闭的云服务对于企业来说是灾难，最简单的一个场景是应对云厂商的涨价行为，如果强绑定就意味着失去了议价权，近期某云厂商云开发就提价十倍，有些小企业的利润直接就被云服务吃光了。
-
-第二个原因是云厂商的云产品如果发展的不好是有可能被下架的，如果企业不幸使用了这类产品，下架时又需要付出巨大迁移成本，有些与代码耦合的甚至需要重写代码。
-
-开源自然是开放的最好实现方式，不仅对上面几种场景有比较好的应对措施，关键还可以自由按照自己的需求进行定制。
-
-所以未来开源与云是左右腿，像 vercel supabase [sealos](https://github.com/labring/sealos) 这样的产品是云计算的大势所趋。
-
-## 基于内核架构的云计算会变得更简单
-
-复杂的东西无法普及，复杂的软件要么走向腐烂和消亡，要么重构变得简单，云计算也是如此，你会发现 centos ubuntu 这样的 linux 发行版普及了，但是现在的一些公有云能力很难到处运行和做到普及，即便是开源了，像 openstack 一直未能普及，原因很简单，需要几十个人的团队才能在生产环境玩起来的话绝大多数企业都会放弃。
-
-什么叫“内聚”，就是功能不是以牺牲复杂度来换取的，像 linux 的 core 很内聚，驱动即使扩展了一万个系统复杂度也没增加，虽然代码在一直增加。所以软件设计时的抽象能力就变得极重要，基于云内核架构设计的云操作系统也是高“内聚”的，通过扩展应用来扩展能力，而各应用之间是低耦合的。
-
-## 内核架构云操作系统爆发时机
-
-> 基于开源技术的云服务在侵蚀昂贵且强绑定的公有云的服务
-
-现在可以发现公有云云原生领域提供的服务商业化做的好的几乎都是开源强相关的， 如基于 kubernetes 的云服务，基于 prometheus grafana 的可观测服务等。
-
-用户越来越聪明了，便宜还是贵按按计算器就能算出来，而且绑定意味着认人鱼肉，技术选型明显往开源技术倾斜。
-
-> 云原生侵蚀传统 IaaS 服务
-
-基于虚拟机的业务增长速度已经远远赶不上云原生生态的发展速度了，基于 kubernetes 的云原生生态每年几倍甚至有些产品每年几十倍的增长，大量企业在从虚拟机架构往云原生架构迁移。
-
-前几年市场被教育的很好，越来越多企业知道云原生降本增效不是一点点，该填的坑也被填的差不多了，开始考虑从观望状态变成实践了。
-
-> 市场需要一款云操作系统进一步降低云原生门槛与成本
-
-现状是企业在实践云原生的时候还是容易迷失，生态过于庞大复杂，上千款生态软件让很多企业无从下手，而且真要落地至少得有个专家能把云原生计算存储网络都玩的明白，所以这个生态依然还是缺乏好用的开箱即用的发行版。
-
-其实这个发行版的要求还是很高的，要非常简单不多不少的去满足客户的需求，还不能给用户带来负担，这就必须得非常好的设计理念和实现机制。
-
-## 如何实现这样一个云操作系统
-
-如何去设计这样一个操作系统，首先一定需要有非常好的设计理念
-
-1. 化整为零，这意味着如果你不装应用，这个系统就是空的，就是 nothing,就是 void*,就和你买了一台新电脑里面除了操作系统什么也没装一样。
-2. 自由组装，所有用户的需求都是通过具体应用实现的而这些应用都是按需求从应用市场中下载，不会硬塞给用户不需要的东西，未能得到满足的需求也是通过应用去扩展。云操作系统不会去追求各种应用风格的统一，就像 macOS 上的微信和飞书不会有统一的风格和账户系统一样，只有这样各应用才能在自己的场景尽情发挥出最大优势。
-
-![image](https://user-images.githubusercontent.com/8912557/176412722-87da5eaa-2a27-424f-b429-e2cab7c00eb2.png)
-
-实现层面，core 是非常内聚的意味它向下仅提供云内核生命周期管理，如安装/伸缩/升级/清理，向上做好应用的打包与管理即可。
-
-应用市场方面很重要，一定要有好的标准，这涉及到应用的提供者与消费者之间的协作，OCI registry 仓库就是个非常好的已有事实标准，兼容它是最好的选择。
-
-User interface 一定要简单极致，这是用户直接使用你东西的地方，API > CLI > GUI, Desktop 是产品化的终极形态，真的做到用云像用 PC 操作系统一样简单。
-
-剩下一切都在于扩展应用的宽度和深度：
-1. 广度，常用分布式软件如 mysql 集群，redis 集群，消息队列等逐步覆盖，不断扩展常用分布式应用数量
-2. 深度，基本安装->高可用->可监控->自运维->高性能/安全性->产品化，几个阶段衡量一个分布式应用成熟度
-
-那 [sealos](https://github.com/labring/sealos) 就是使用这样的思维去设计的，[laf](https://github.com/labring/laf) 就是 sealos 上的第一款杀手级应用。
-
-## 总结
-
-未来的云会更便宜 更开放 更简单，最终会有一款优秀的发行版本实现云原生的普及，而 [sealos](https://github.com/labring/sealos) 诞生之日起就朝着这个目标不断进步~
-
-相信未来云计算属于所有算力的提供者，云的价值也会属于所有云计算的参与者，不再受任何厂商绑定之苦，更便宜的享受云计算带来的便利。开源开放带给大家简单/便宜的云计算！
-
-> 作者：fanux.方海涛.中弈 sealos 作者, CNCF sealer 项目发起人。曾就职阿里云，现任环界云计算 CEO, 环界获得陆奇博士奇绩创坛种子轮投资
-
diff --git a/docs/blog/zh-Hans/2023/how-sealos-cloud-mastered-multi-tenancy-with-the-right-gateway-choice/images/envoy-resource.png b/docs/blog/zh-Hans/2023/how-sealos-cloud-mastered-multi-tenancy-with-the-right-gateway-choice/images/envoy-resource.png
deleted file mode 100644
index c3db14f508dc..000000000000
Binary files a/docs/blog/zh-Hans/2023/how-sealos-cloud-mastered-multi-tenancy-with-the-right-gateway-choice/images/envoy-resource.png and /dev/null differ
diff --git a/docs/blog/zh-Hans/2023/how-sealos-cloud-mastered-multi-tenancy-with-the-right-gateway-choice/images/higress-controller.png b/docs/blog/zh-Hans/2023/how-sealos-cloud-mastered-multi-tenancy-with-the-right-gateway-choice/images/higress-controller.png
deleted file mode 100644
index c4835a35efba..000000000000
Binary files a/docs/blog/zh-Hans/2023/how-sealos-cloud-mastered-multi-tenancy-with-the-right-gateway-choice/images/higress-controller.png and /dev/null differ
diff --git a/docs/blog/zh-Hans/2023/how-sealos-cloud-mastered-multi-tenancy-with-the-right-gateway-choice/images/higress-gateway.png b/docs/blog/zh-Hans/2023/how-sealos-cloud-mastered-multi-tenancy-with-the-right-gateway-choice/images/higress-gateway.png
deleted file mode 100644
index e607ff6143bc..000000000000
Binary files a/docs/blog/zh-Hans/2023/how-sealos-cloud-mastered-multi-tenancy-with-the-right-gateway-choice/images/higress-gateway.png and /dev/null differ
diff --git a/docs/blog/zh-Hans/2023/how-sealos-cloud-mastered-multi-tenancy-with-the-right-gateway-choice/images/nginx-resource.png b/docs/blog/zh-Hans/2023/how-sealos-cloud-mastered-multi-tenancy-with-the-right-gateway-choice/images/nginx-resource.png
deleted file mode 100644
index aa36990d2d9c..000000000000
Binary files a/docs/blog/zh-Hans/2023/how-sealos-cloud-mastered-multi-tenancy-with-the-right-gateway-choice/images/nginx-resource.png and /dev/null differ
diff --git a/docs/blog/zh-Hans/2023/how-sealos-cloud-mastered-multi-tenancy-with-the-right-gateway-choice/index.md b/docs/blog/zh-Hans/2023/how-sealos-cloud-mastered-multi-tenancy-with-the-right-gateway-choice/index.md
deleted file mode 100644
index 55d582f63ca8..000000000000
--- a/docs/blog/zh-Hans/2023/how-sealos-cloud-mastered-multi-tenancy-with-the-right-gateway-choice/index.md
+++ /dev/null
@@ -1,126 +0,0 @@
----
-slug: how-sealos-cloud-mastered-multi-tenancy-with-the-right-gateway-choice
-title: Sealos 网关选型血泪史：云原生网关哪家强
-description: 探索 Sealos Cloud 如何在面对数十万条 Ingress 规则和严格的多租户要求中优化其网关选择。从 Nginx Ingress 的局限性到最终选择 Higress，这篇文章深入分析了各种网关选项的性能、稳定性和安全性，为公网环境中支持多租户场景的网关选型提供了宝贵的洞见。
-authors: [fanux]
-tags: [Kubernetes, Sealos, 网关]
-keywords: [云操作系统, Sealos, K8s, 云原生, 网关, Envoy, Ingress]
-image: images/feature.jpg
-date: 2024-01-20T10:00
----
-
-[Sealos](https://sealos.run) 公有云几乎打爆了市面上所有主流的开源网关，本文可以给大家很好的避坑，在网关选型方面做一些参考。
-
-<!--truncate-->
-
-## Sealos Cloud 的复杂场景
-
-[Sealos 公有云](https://cloud.sealos.io)上线以来，用户呈爆发式增长，目前总共注册用户 8.7w，每个用户都去创建应用，每个应用都需要有自己的访问入口，就导致整个集群路由条目非常巨大，需要有支撑数十万条 ingress 的能力。
-
-另外，在公网提供共享集群的服务，对多租户要求极为苛刻，用户之间的路由必须不能相互影响，需要非常好的隔离性，以及流量控制能力。
-
-公有云的受攻击面是很大的，黑客会攻击云上跑的用户应用，也会直接攻击平台的出口网络，安全性上也有非常大的挑战。
-
-对控制器的性能和稳定要求都比较高，很多控制器路由条目一多时消耗资源会非常大，甚至 OOM 导致网关奔溃。
-
-## 排除 Nginx Ingress 
-
-我们最早用的就是 Nginx Ingress, 最后发现有几个核心问题无法解决：
-
-* reload 问题，每次有 ingress 变更会导致断连一小会，而一个集群用户一多的时候，ingress 的创建变更会是个频繁事件，就会导致网络经常不稳定。
-* 长链接不稳定，也是因为变更，在用的长链接会经常断。
-* 性能不行，生效时间慢，消耗资源多。
-
-所以几乎排除掉了很多底层用 Nginx 实现的网关。我们实测下来基于 Envoy 实现的网关性能彪悍太多，几乎控制面和数据面都不怎么消耗性能。
-
-这是 Envoy 的：
-
-![](images/envoy-resource.png)
-
-这是 Nginx 的：
-
-![](images/nginx-resource.png)
-
-差距非常之大，所以我们就可以排除掉 Nginx 系列选项了。彻底拥抱 Envoy。
-
-## 关于 APISIX
-
-APISIX 本身是个优秀项目，解决了 Nginx reload 的一些问题，所以我们 [Laf](https://laf.run) 早期也用了 APISIX，但是很不幸 APISIX 的 Ingress Controller 并不是很稳定，控制面奔溃给造成了我们好几次大的故障，还出现过控制器 OOM 等问题，我们本来真的很想用，但是最终还是因为故障问题被强制劝退，当然 APISIX 社区也在一直跟进这些问题，希望能越做越好。
-
-总结一下就是: APISIX 本身稳定性很好，但是控制器需要优化的东西还很多，稳定性也有待提高。社区支持力度也很大，无奈我们线上问题火烧眉毛没法按照社区的节奏慢慢迭代，只能先切成别的网关了。
-
-## Cilium Gateway
-
-[Sealos 的 CNI](https://sealos.run/docs/self-hosting/lifecycle-management/quick-start/deploy-kubernetes#%E5%AE%89%E8%A3%85-k8s-%E9%9B%86%E7%BE%A4-1) 很早就切换成 Cilium 了，确实很强，所以我们想着网关也统一用 Cilium 得了，但是现实很骨感。
-
-Cilium Gateway 只支持 LB 模式，这样就强依赖云厂商的 LB，而我们也有一些私有化的场景，所以不希望耦合，稳定性方面也遇到了路由非常多的时候 Ingress 生效特别慢的问题，需要分钟级生效，这样用户的体验就很差了，我们能接受的是 5s 内路由生效。所以结论就是只能再等等。
-
-## Envoy Gateway
-
-K8s 标准的发展来看，会逐渐从 Ingress 迁移到 Gateway 的标准，而我们底层又更倾向使用 Envoy，那 Envoy Gateway 的实现似乎是一个很好的选择，所以我们调研了 Envoy Gateway, 但是这个项目还是太过于早期，遇到了一些不稳定的 bug，比如会 OOM，pathpolicy 不生效，有些特性在 merge gateway 模式下不生效等问题，在持续解决中，我们也在不断帮助上游社区提改进意见和贡献，希望未来可以能达到生产可用的状态。
-
-## 逼格很高但不那么实用的 Gateway 标准
-
-Gateway 的处境很尬感，我的感觉是设计者并没有真的实践过多租户场景，当多租户共享一个集群时，就要明确区分管理者和使用者的权限问题，Gateway 设计之初就没完全考虑清楚，举个例子：
-
-```yaml
-apiVersion: gateway.networking.k8s.io/v1
-kind: Gateway
-metadata:
-  name: eg
-spec:
-  gatewayClassName: eg
-  listeners:
-  - name: http
-    port: 80
-    protocol: HTTP
-    # hostname: "*.example.com"
-  - name: https
-    port: 443
-    protocol: HTTPS
-    # hostname: "*.example.com"
-    tls:
-      mode: Terminate
-      certificateRefs:
-      - kind: Secret
-        name: example-com
-```
-这里监听端口这类的配置应该是给集群管理员而不是普通用户，而 TLS 证书的配置属于某个应用，管理员可以有权限配置，主要还是每个用户去配置自己的，所以这里面权限就没有分开。 那就只能让用户也有权限配置 Gateway，所以这里就又需要在控制器里实现很多的权限控制的细节问题，如端口号白名单，冲突检测等。
-
-个人觉得更优雅的设计是把其中租户级别的字段下沉到 HTTPRoute 中实现，或者一个单独的 CRD,这样用户态和超级管理员就可以分开的更清楚。 现有的方式也能做，就是有点混杂。
-
-## 最终 Higress 胜出
-
-除了以上重点的项目我们还测试了很多其他项目，我这里就不一一列举了。 Sealos 最终选了 Higress。
-
-我们目前选择网关的逻辑很简单，主要就是在满足我们功能的前提下足够稳定，最终选择 Higress 几乎是排除法得出来的。
-
-稳定性是排在第一位的，在我们的场景里面能够达到生产可用的目前只有 Higress，不过实践过程中也出现过一些问题，好在 Higress 社区的支持力度很大，很快速的解决了，主要有几个：
-
-1. ingress 生效速度慢，路由条目多时 2min 多新建路由才能生效，社区最后优化到了 3s 左右，这已经到极致了，也没有再优化的必要了，因为已经比容器 Ready 时间还短了, Higress 使用了一种增量加载配置的机制，让海量路由条目时也能有夸张的性能。
-2. 控制器 OOM,在无动态加载时资源消耗比较大，出现过 OOM 的情况，目前三高问题都解决掉了。
-3. 超时问题，有一个进一步优化加载延时的参数配置 onDemandRDS 在我们一个主集群会偶发请求超时，目前是把该配置关闭了，还在进一步查看原因，而在其它集群中未发现这个问题。
-
-安全性方面，我们很多时候的故障问题都是性能问题造成的，流量过大，打爆网关比较常见，所以网关的性能变得至关重要，实测下来 Envoy 要彪悍很多，控制器写的好不好也生死攸关，这个方面 Higress 表现出众：
-
-![](images/higress-controller.png)
-
-![](images/higress-gateway.png)
-
-在我们已经海量路由，超高并发的情况下，需要的资源少的可怜。 
-
-Higress 还兼容 Nginx Ingress 语法，主要是一些 annotations，我们之前的代码都是用的 Ingress，所以几乎没有任何迁移成本，直接几分钟的升级就可以搞定。
-
-同样为了促进社区更好的发展我们也给 Higress 一些意见：
-
-* 能对 Gateway 的标准有更好的支持，目前虽然已经支持了 v1 版本，但还没有完全兼容 ingress 上的能力。
-* 能开放出一些大杀器的功能，比如安全和熔断方面的能力。让开源和商业结合的更紧密一些，我们倒是不排斥付费，但是随着平台发展，需要更强的一些功能。
-* 周边功能建议更多通过插件机制扩展，让核心功能更内聚一些，简单可依赖。
-
-## 总结
-
-网关对于云和应用而言是个非常非常核心的组件，随着我们规模的不断扩大也会出现很多新的挑战，我们希望能和上下游社区建立紧密的合作，让开源网关能得到更好的发展，让更多开发者受益。
-
-以上列举的很多网关都很优秀，Sealos 没用不代表项目不厉害，只是我们的场景苛刻且奇葩，真的在公网环境能支持多租户的网关并不多，所以各位看官还是要从自己的场景出发，我们的选型仅作参考，同样 Sealos 本身也会以一个开放心态来继续跟进其他网关的发展。
-
-最后非常感谢 Higress 开源社区的大力支持，感谢阿里云云原生团队开源了这么优秀的项目，造福广大社区用户。
diff --git a/docs/blog/zh-Hans/2023/k8s-multi-tenancy.md b/docs/blog/zh-Hans/2023/k8s-multi-tenancy.md
deleted file mode 100644
index c55f3bb9151c..000000000000
--- a/docs/blog/zh-Hans/2023/k8s-multi-tenancy.md
+++ /dev/null
@@ -1,116 +0,0 @@
----
-slug: k8s-multi-tenancy
-title: K8s 多租户方案的挑战与价值
-description: 本文深入探讨了 K8s 多租户的概念、其在现代企业中的应用价值，以及实现这一机制所面临的技术挑战和解决方案。
-authors: [fanux]
-tags: [Kubernetes, Sealos, 多租户]
-keywords: [云操作系统, Sealos, K8s, 云原生, 多租户, 隔离, 命名空间]
-image: https://cdn.jsdelivr.net/gh/yangchuansheng/imghosting6@main/uPic/2023-11-29-17-36-fBsk9p.jpg
-date: 2023-11-29T10:00
----
-
-在当今企业环境中，随着业务的快速增长和多样化，服务器和云资源的管理会越来越让人头疼。K8s 虽然很强大，但在处理多个部门或团队的业务部署需求时，如果缺乏有效的多租户支持，在效率和资源管理方面都会不尽如人意。
-
-**本文将深入探讨 K8s 多租户的概念、其在现代企业中的应用价值，以及实现这一机制所面临的技术挑战和解决方案。**
-
-<!--truncate-->
-
-## K8s 多租户的价值
-
-“多租户”是一种软件架构的设计方式，允许多个用户（租户）共享相同的系统或程序组件，同时保持各自数据的隔离性和安全性。在 K8s 环境中，实现有效的多租户机制意味着能够在同一 K8s 集群中运行多个独立的租户工作负载，而无需担心资源冲突、数据泄露或安全问题。
-
-![](https://cdn.jsdelivr.net/gh/yangchuansheng/imghosting6@main/uPic/2023-11-29-10-34-rLPyaY.jpg)
-
-### 没有多租户支持的挑战
-
-当企业购买很多服务器并安装 K8s 后，企业内部多个部门 (例如 20 个) 可能都需要在同一集群上部署各自的业务应用。在没有多租户机制的情况下，这种集群使用方式有很多弊端：
-
-1. **低效率：**每个部门不能自主使用集群，必须通过集群管理员进行部署和管理。不仅减慢了部署进程，还可能造成排队等待的情况，大大降低工作效率。
-
-2. **资源利用不充分：**业务应用不能混合部署，需要对服务器资源进行划分，最终可能会导致资源无法充分利用，造成浪费。
-
-3. **业务和资源管理混乱：**在一个没有租户隔离的集群中，各部门的业务相互干扰，难以管理。随着时间的推移，集群的管理和运维变得越来越复杂。
-
-4. **规模扩展受限：**在一个单一租户的环境下，集群难以支持多样化的业务需求，限制了企业的扩展能力。
-
-![](https://cdn.jsdelivr.net/gh/yangchuansheng/imghosting6@main/uPic/2023-11-29-10-34-yua4G3.png)
-
-### 多租户架构的优势
-
-一旦有了多租户能力，企业就可以真正意义上构建自己的云环境，实现资源的最大化利用和高效管理：
-
-1. **资源管理有序：**通过账户系统，每个部门可以自主管理其资源使用，无需担心资源分配和使用上的混乱。
-
-2. **效率大幅提升：**各部门可以独立进行业务部署和更新，无需麻烦集群管理员，极大提高了操作效率和业务的灵活性。
-
-3. **资源扩展灵活：**集群管理员只需关注整个集群的资源状况，而不是单个业务应用，资源按需分配和扩展会更加灵活和高效。
-
-4. **业务隔离保障稳定性：**不同部门的业务应用在集群中彼此隔离，避免了相互干扰，保障了业务的稳定运行。
-
-## K8s 多租户的挑战
-
-在 K8s 环境中实现多租户架构难度非常大，不是简单使用命名空间的能力就能实现的，还涉及到非常多的技术挑战。
-
-### 挑战 1：防止越权
-
-在 K8s 多租户环境中，限制每个用户的权限是关键。当多个用户共享一个集群时，一个权限过高的用户可能会对整个集群构成致命威胁。例如，禁止用户访问服务器节点或执行节点级别的操作，如使用 `kubectl get node` 命令。此外，需要限制其他高风险操作，如启用容器特权模式、共享主机文件系统、端口和网络等。
-
-为了解决这些问题，Sealos 在其底层架构中采用了多种隔离手段。例如，使用 OpenEBS 进行存储的块级别隔离，Firecracker 以及 Cloud Hypervisor 用于计算运行时的隔离，以及通过 Cilium 实现网络隔离。这些措施确保即使在共享环境中，每个租户的操作也不会影响到其他租户。
-
-### 挑战 2：用户的概念、授权与命名空间绑定
-
-K8s 本身不具备原生的用户管理系统。因此，需要通过扩展功能来构建用户概念，与第三方用户系统对接，为每个用户生成独立的 kubeconfig 认证文件或 token。此外，需要建立用户与命名空间 (namespace) 之间的多对多关系，并为用户分配适当的权限。
-
-![](https://cdn.jsdelivr.net/gh/yangchuansheng/imghosting6@main/uPic/2023-11-29-10-34-Dfn5xa.png)
-
-Sealos 的设计允许管理员将用户加入特定的命名空间，并对其角色进行管理，从而有效地控制权限。这样管理员就可以细粒度地管理用户权限，确保每个用户只能访问和修改他们被授权的资源。
-
-![](https://cdn.jsdelivr.net/gh/yangchuansheng/imghosting6@main/uPic/2023-11-29-10-34-wknQxI.png)
-
-![](https://cdn.jsdelivr.net/gh/yangchuansheng/imghosting6@main/uPic/2023-11-29-10-34-RQFrTB.png)
-
-### 挑战 3：计量与配额管理
-
-在多租户环境中，合理地分配和监控资源使用是另一个重大挑战。需要明确每个租户使用了多少 CPU、内存、磁盘和网络资源，并在资源使用超出配额时进行适当的处理。网络计量尤其复杂，需要区分内外网流量，而且要追踪到达特定容器的流量，并确定这些容器属于哪个租户。
-
-Sealos 采用 eBPF 技术来监控网络流量，并通过控制器将流量数据与租户信息相关联，存储到数据库中。这样可以与计量计费系统对接，实现对资源使用的准确计费。对于计算和存储资源的监控，Sealos 同样采用了控制器来收集和管理这些信息。
-
-![](https://cdn.jsdelivr.net/gh/yangchuansheng/imghosting6@main/uPic/2023-11-29-10-36-HsycaI.png)
-
-## Sealos 多租户的挑战
-
-如果说上面的这些问题很难解决，那么 **Sealos 的场景是在上述难度上乘以了 10 倍**，因为 Sealos 选择了在公网这个不可信的环境中解决多租户问题，意味着给任意的开发者公开注册，然后一起共享一个 K8s 集群。
-
-![](https://cdn.jsdelivr.net/gh/yangchuansheng/imghosting6@main/uPic/2023-11-29-10-54-kbCMsN.png)
-
-公网环境的不可信性和开放性使得实现多租户变得尤为复杂。在这种环境下，任何开发者都可以注册并共享同一个 K8s 集群，这就带来了巨大的安全和稳定性挑战。但是，如果能够成功实现，其好处也是显而易见的：
-
-1. **成本效益**：用户无需单独搭建和维护完整的集群，显著降低了云服务的使用成本。
-2. **资源优化**：允许每个容器运行在更小的规模上，充分利用平台的弹性和资源。
-3. **强隔离性**：在公网环境中实现良好的多租户隔离，可以确保更高的安全性和稳定性。
-
-前途的光明的，但挑战也是巨大的。
-
-### 挑战 1：网关限制
-
-Sealos 目前拥有数万注册用户，流量很大，我们几乎已经打爆了市面上很多主流的开源网关。在这种情况下，一个用户的更新可能导致所有其他用户受到影响，因为 Nginx 需要重新加载配置，这显然是不能接受的。
-
-还有某知名网关 (不便透露)，控制器 CPU 很容易就被打爆。
-
-还有某知名网关 (同样不便透露)，数量一多配置生效需要超过两分钟。不过我们已经和上游社区进行了反馈，应该很快会有改进。
-
-### 挑战 2：运行时隔离问题
-
-Sealos 需要实现强隔离以保证多租户环境的安全。然而，市面上的主流运行时环境并不能满足 Sealos 的隔离需求。例如，Firecracker 无法提供对 GPU 的良好支持，这对于需要高性能计算的应用来说是一个比较严重的限制。
-
-### 挑战 3：存储隔离问题
-
-Sealos 需要确保不同租户的数据彼此隔离，防止数据泄露或被其他租户错误访问。这就需要实现块级别的存储隔离，挑战也很大。
-
-### 挑战 4：网络计量和争用管理
-
-最后，网络资源的计量和管理也是多租户环境中的关键问题。Sealos 需要准确地计量每个用户的网络使用情况，并且在资源有限的情况下合理地分配网络资源。当网络资源产生争用时，需要有机制来公平地解决这些争用，确保所有用户都能公平合理地使用网络资源。
-
-## 总结
-
-多租户成熟了才能算作是一朵真正的云，才能把云的威力发挥到九成以上。面对公网这一极其复杂和不可预测的环境，Sealos 不仅实现了多租户的隔离和安全，还在保障高效运行的同时，降低了成本。且底层使用了非常多优雅的技术方案，彻底解决企业所有开发者共享一朵云的需求。
diff --git a/docs/blog/zh-Hans/2023/sealos-release.md b/docs/blog/zh-Hans/2023/sealos-release.md
deleted file mode 100644
index 948e4514a9a8..000000000000
--- a/docs/blog/zh-Hans/2023/sealos-release.md
+++ /dev/null
@@ -1,188 +0,0 @@
----
-slug: sealos-release
-title: Sealos - 云操作系统的未来
-description: 深入探索 Sealos 的发展历程，从一个简单的 K8s 安装工具到一个全面的云操作系统项目。了解创始人的故事，Sealos 的演变，以及它如何简化企业和个人的云计算操作。
-authors: [fanux]
-tags: [Kubernetes, Sealos]
-keywords: [云操作系统, Sealos, K8s, 云原生]
-image: https://jsd.cdn.zzko.cn/gh/yangchuansheng/imghosting5@main/uPic/2023-08-31-09-52-gLmSek.jpg
-date: 2023-06-13T10:00
----
-
-## 这是个宏伟的计划 
-
-这是一个宏伟的计划，漫长且有趣。
-
-在今天这个快速发展的云计算领域，Sealos 不仅是一个项目，它是对未来云操作系统概念的重新定义和实践。从一个简单的 K8s 安装工具开始，Sealos 的发展已迈入了全新的领域，目标是构建一个完整、高效且易于管理的[云操作系统](https://sealos.run)。
-
-2018 年的某个夜晚，夜深人静，我挥舞键盘，敲下了 Sealos 的第一行代码。当时仓库命名为 “kubeinit”，后来觉得格局太小，我不可能只做一个安装 K8s 的工具。安装只是更大计划的一部分，于是更名为 [Sealos](https://github.com/labring/sealos/ "Sealos")，一个宏大的[云操作系统](https://sealos.run)计划就此诞生！
-
-![](https://jsd.cdn.zzko.cn/gh/yangchuansheng/imghosting5@main/uPic/2023-08-31-09-52-gLmSek.jpg)
-
-<!--truncate-->
-
-Sealos 的第一个版本写完后，我就把它发布到了阿里云市场出售，**每份售价 15 元**。我没想到真的会有人买，当第一笔 15 元进账时，我异常兴奋，仿佛一个商业帝国就在眼前。但是，结果是我花了一整天时间为这位客户提供售后服务。。。**电影院里还在帮用户解决问题**。
-
-先来一波回忆杀：
-
-![](https://jsd.cdn.zzko.cn/gh/yangchuansheng/imghosting-test@main/uPic/2023-11-16-17-59-VHeU8B.jpg)
-
-随后销量暴增，很快我就换了新手机 iPhone 8，但是问题也同时增加，以至于我根本无法及时提供所有的售后服务。于是我决定重写 Sealos，发布了基于 Ansible 的 v2  版本。最终还是觉得没有做到极致，因为用户还是遇到太多依赖问题无法解决。直到读完 kube-proxy 的源码，我发现有一种方案可以把负载均衡变得更简单，**干掉所有依赖**。于是我编写了 Sealos 的 v3 版本，在安装方面做到了极致。 
-
-### 为何一开始专注于安装 ？
-
-因为安装是入口，绝大多数人在学习云原生技术时都无法避开这个问题。**安装的流量入口足够大，无疑是一个绝佳的切入点**。一旦用户习惯使用 Sealos 进行安装，就会逐步探索 Sealos 的其他功能。
-
-### 在阿里的工作
-
-**在阿里工作期间，我开发了 Sealer**。这里最重要的一点就是，让安装足够灵活。以前用户只能使用我创建的安装包，而集群镜像的创新可以让用户自由定义安装包，也可以自由组合任何安装包。这里有个让我感到自豪的想法 : **把整个集群视为一个整体，把 K8s 看作一个操作系统，那么在这个[云操作系统](https://sealos.run)中，“云版 Docker 镜像”会是什么样子？**这无疑是一个伟大的想法，极具抽象度和灵活性。 
-
-```dockerfile
-FROM kubernetes:v1.25.0  
-COPY mysql .  
-CMD helm install mysql . 
-```
-
-这种构想让**[云操作系统](https://sealos.run)也像单机操作系统一样有了“镜像”**，伟大的构想又完成了一个环节。 
-
-### 创业第一年
-
-那么，Sealos [云操作系统](https://sealos.run)最终会演变成什么样子呢？这是一个难以言状的问题，我只有一个朦胧的设想，隐隐若现。直到创业过程中连续迭代了三个版本，才有了今天的形态——**一切皆应用！**
-
-理解这一点其实很简单，只需要把单机操作系统上安装的单机应用替换成各种分布式应用即可。整个数据中心，**你看到的不再是一台台孤立的服务器，而是一个整体，变成了一台虚拟的超级计算机。** 
-
-![](https://jsd.cdn.zzko.cn/gh/yangchuansheng/imghosting-test@main/uPic/2023-11-16-17-59-ffDeDv.jpg)
-
-这样简洁、清爽且臻至完美的[云操作系统](https://sealos.run)，相信你在第一眼见到它的时候，便会喜欢上它！
-
-这就是我五年的呕心沥血之作 —— Sealos！献给大家～
-
-## 云可以如此干净 
-
-Sealos 保持了极简的设计，没有任何多余的按钮。实现简洁与强大并行的功能，有时候难如登天，但我们仍在产品设计上投入了大量的心血。无论何人，使用 Sealos 都将沉醉在我们为之打造的舒适体验中。
-
-在 B 端软件的世界里，付款者与使用者往往并非同一人，导致产品体验时常被忽略，最关键的还是要说服决策者。而 Sealos 不一样，我们坚信产品体验高于一切，如果我们在产品上花费大量精力最终导致失败，那也死而无憾。 
-
-![](https://jsd.cdn.zzko.cn/gh/yangchuansheng/imghosting-test@main/uPic/2023-11-16-17-59-v1fPyx.jpg)
-
-这种黑白灰的设计风格会让你使用产品时**感觉像在喝白开水，而不是在喝饮料，更不是在喝洗脚水** （某些产品使用起来想死的心都有）。开发者已经够痛苦了，我希望你们在使用 Sealos 时心情美好。 
-
-Sealos 能一针见血地戳中应用的痛点，比如这个应用管理器 App Launchpad，30 秒就可以让你上线自己的应用。这里涉及到大量细节，比如自动配置公网域名，自动解决 HTTPS 证书问题等。
-
-## 云可以如此便宜？
-
-我在 Sealos 上运行了 10 多个应用，包括三个数据库，还有博客，低代码平台，测试平台等，每天只花 4 块钱 : 
-
-![](https://jsd.cdn.zzko.cn/gh/yangchuansheng/imghosting-test@main/uPic/2023-11-16-17-59-X4FAjB.jpg)
-
-为什么能这么便宜？
-
-- 只需要为运行的容器付费，无需虚拟机，也无需创建整个 K8s 集群，打开直接用。 
-- 自动伸缩，夜间用户量少时副本缩小到 1。 
-- 我们可以充分利用公有云的弹性，编写大量自动化代码，夜间释放计算资源，降低成本。 
-
-这对于企业来说，可以减少大量的资源使用成本。我们自己就在 10 台服务器上运行了 7000 多个应用，这意味着什么？企业部署一套 Sealos 集群后，只要服务器资源利用率低于 70% 就可以不断向集群中添加应用，直到填满为止。
-
-你可能会问，**为什么不能直接使用 Kubernetes？** 原因很简单，对于诸如讯飞这样的企业，应用分散在各个部门，这时多租户、隔离与协作会变成刚需，直接使用 K8s 会把集群搞乱，最要命的可能是一个部门或者用户不注意搞了个安全问题会让整个集群崩溃，而 Sealos 完美解决了这个问题！
-
-Sealos 可以帮助 80% 的企业降低 80% 的资源使用成本。
-
-## 云可以如此自由
-
-与其他管理平台或 PaaS 平台不同，Sealos 的核心设计理念是“一切皆应用”。不同的开发者，不同的角色使用不同的应用，这让每个用户在使用时都没有心智负担。就像安卓生态中有几十上百万个应用，你只关心自己使用的那几款应用，不用关心其他应用在做什么。
-
-![](https://jsd.cdn.zzko.cn/gh/yangchuansheng/imghosting-test@main/uPic/2023-11-16-17-59-OsRpZy.jpg)
-
-这样的设计有两个主要优势：
-
-### 懂不懂 K8s 都能愉快地使用 Sealos
-
-许多基于 K8s 的 PaaS 平台或发行版要么暴露大量 K8s 原生概念，要么屏蔽这些概念。这两种做法都不理想。
-
-暴露大量原生概念对小白和新手不友好，屏蔽 K8s 则失去了灵活性和兼容性，对 K8s 老司机也非常不友好。
-
-Sealos 采取了不同的做法。在这个平台上，不同的人可以使用不同的应用。比如你是开发者想写 CRUD，你可以直接使用 Laf 这个函数应用。如果你是 DBA，你可以直接使用数据库应用。在这种情况下，你完全不需要关心 Kubernetes，这些概念会被完全屏蔽。
-
-如果用户是云原生专家，他们可以在 Sealos 上安装 Lens 和各种 K8s Dashboard，也可以打开终端敲各种原生命令。这就极大提高了灵活度。
-
-### 自由组装
-
-Sealos 非常关注应用间的相互配合。例如，你在 Sealos 上使用函数计算，默认数据库可能是 MongoDB，但如果你想用 PostgreSQL 怎么办？这时就可以在 Sealos 上安装一个 PostgreSQL 应用，然后通过服务发现直接在函数计算里面访问。因为在同一个集群内，可以直接通过内网 DNS 相互配合。
-
-![](https://jsd.cdn.zzko.cn/gh/yangchuansheng/imghosting-test@main/uPic/2023-11-16-18-00-HEtGtd.jpg)
-
-Sealos 精简而不简单，所有组件都可以卸载，这让云恰好满足你的需求——多一分则嫌多，少一分则嫌少。这也意味着无论是一台服务器还是上百台数据中心，都可以通过一条命令构建成一朵云。
-
-## Sealos 到底能干什么
-
-- 30 秒在 Sealos 上跑个 nginx demo，自动伸缩
-- 30 秒起各种数据库，业务系统内网直接连接数据库 
-- 在 Sealos 上直接启动你写的各种编程语言业务
-
-这三个能力是基础，其他的能力你可以慢慢探索，慢慢发现新大陆。
-
-在运行自己业务上，我们针对这个场景做了很多细节优化，比如自动分配二级域名，自动横向伸缩，支持运行各种有状态服务等。
-
-你会发现，借助 Sealos，**无论是部署一个拨测系统，还是运行一个低代码平台，都是信手拈来。您的博客也可以轻松托管在 Sealos 上，成本低廉。使用 Sealos 终端，运行任何兼容 K8s 的应用，自动化操作不再是难题。**
-
-更进一步发现：原来**有个 AI 在帮你自动做故障诊断，自动上线业务，甚至帮你写代码并自动测试上线**。
-
-![](https://jsd.cdn.zzko.cn/gh/yangchuansheng/imghosting-test@main/uPic/2023-11-16-18-01-t4W7LN.jpg)
-
-然后你会发现普通人也能用 Sealos：
-
-+ 你可以在 Sealos 上快速安装财务软件；
-+ 你也可以在 Sealos 上快速安装知识库，给企业所有人写笔记；
-+ 你还可以在 Sealos 上快速安装聊天软件供企业内部沟通协作。
-
-到这里你会惊喜地发现：Sealos 竟然什么都能干，真的通用，而且还如此简单！最后你会有所领悟，**原来这就是[云操作系统](https://sealos.run)！**
-
-## 真的有人在用 Sealos 吗 ? 
-
-当然有，Sealos 社区用户 10 万+，不乏各种大企业。  
-
-![](https://jsd.cdn.zzko.cn/gh/yangchuansheng/imghosting-test@main/uPic/2023-11-16-18-01-ZOZ4Ud.jpg)
-
-上线两个月时间注册用户已经破万，云服务共计运行 **7000+ 应用**。
-
-**只有一些小微应用适合 Sealos 吗 ?** 
-
-当然不，Sealos 的客户中有**国健大数据**，在疫情期间支撑健康码的服务，一秒钟都不能挂的高并发业务。也支撑过超大规模的 GPU 集群，每天处理 80T 数据，整个集群 80PB 数据。**聚道云**上百个应用跑在 Sealos 平台上。 
-
-## 阶梯计划 
-
-Sealos 的宏图不止于此，我们的目标是进化为一款无所不在的[云操作系统](https://sealos.run)，为人们提供如同使用个人电脑般简易的云服务体验。借助 Sealos，企业可轻松实现：
-
-- 迅疾如闪电，一分钟上线新业务
-- 一年可缩减半数成本 
-- 简单如拨动开关，一键起一朵云
-
-企业用云，一款 Sealos 就足矣。
-
-未来，我们将继续秉持工匠精神，精心打磨 Sealos 中企业所需的常用应用，如数据库、消息队列、推理能力、各类编程语言执行环境等。
-
-Sealos [云操作系统](https://sealos.run)中还会**内置一个 Copilot**，它像一位航海家的副手，它可自动进行云原生改造，帮助开发者轻松迈入云原生的大门，也可以像专家一样帮助诊断集群问题，安全漏洞，并给出专业操作建议。
-
-## 总结 
-
-历经五载，Sealos 总算实现了我当初写下第一行代码时的愿景 —— [云操作系统](https://sealos.run)。
-
-感谢第一个为我付了 15块的同学，您的信任与鼓舞犹如一笔巨资，赋予我前行的力量。
-
-感谢社区的全体贡献者，尤其是始终与我同行的老崔同学，众行远。
-
-感谢讯飞复杂业务场景的锤炼，让我对业务场景有更深入的理解。
-
-感谢阿里云在我写 Sealer 时的支持与帮助，为 Sealos 集群镜像的底层能力铸造了坚实的基石。
-
-感谢与我共同开启创业之旅的所有伙伴，是大家共同将一颗灵感的种子，种植成为现实的大树。
-
-感谢奇绩创坛踹了我临门一脚，也**感谢陆奇博士**出乎意料的看好我们给了我们很大信心。
-
-感谢李军院长康一教授，张海龙，高捷资本，金福资产给我们的帮助、指导和信任。
-
-感谢每一位选择 Sealos 的用户，你们包容了整个迭代过程中的种种问题，与我们共同雕琢更完美的 Sealos。
-
-预祝每一位选择了我们的决策者，此刻你们的决策绝对是明智的。现在，Sealos 已经跨越了全新的起点，未来我们一定不负众望，向大家交付一款完美的[云操作系统](https://sealos.run)。
-
-欢迎大家来体验 Sealos [云操作系统](https://sealos.run)的魅力👉 [https://cloud.sealos.io/](https://cloud.sealos.io/)
\ No newline at end of file
diff --git a/docs/blog/zh-Hans/2023/to-run-or-not-to-run-a-database-on-kubernetes/images/feature.jpg b/docs/blog/zh-Hans/2023/to-run-or-not-to-run-a-database-on-kubernetes/images/feature.jpg
deleted file mode 100644
index 47e90ce07285..000000000000
Binary files a/docs/blog/zh-Hans/2023/to-run-or-not-to-run-a-database-on-kubernetes/images/feature.jpg and /dev/null differ
diff --git a/docs/blog/zh-Hans/2023/to-run-or-not-to-run-a-database-on-kubernetes/images/sealos-database.png b/docs/blog/zh-Hans/2023/to-run-or-not-to-run-a-database-on-kubernetes/images/sealos-database.png
deleted file mode 100644
index 96cc662cc039..000000000000
Binary files a/docs/blog/zh-Hans/2023/to-run-or-not-to-run-a-database-on-kubernetes/images/sealos-database.png and /dev/null differ
diff --git a/docs/blog/zh-Hans/2023/to-run-or-not-to-run-a-database-on-kubernetes/index.md b/docs/blog/zh-Hans/2023/to-run-or-not-to-run-a-database-on-kubernetes/index.md
deleted file mode 100644
index 33401cf0619c..000000000000
--- a/docs/blog/zh-Hans/2023/to-run-or-not-to-run-a-database-on-kubernetes/index.md
+++ /dev/null
@@ -1,144 +0,0 @@
----
-slug: to-run-or-not-to-run-a-database-on-kubernetes
-title: 在 K8s 上跑数据库，到底有没有意义？
-description: 本文深入分析了 K8s 在数据库管理上的优势，包括稳定性、性能和运维效率。了解为什么将数据库集成到 K8s 是当今技术趋势的一部分，并探讨这一选择对企业和开发团队的意义。
-authors: [fanux]
-tags: [Kubernetes, Sealos, 数据库]
-keywords: [云操作系统, Sealos, K8s, 云原生, 数据库, 容器,]
-image: ./images/feature.jpg
-date: 2023-12-06T10:00
----
-
-昨天冯老板发了一篇文章探讨了[为什么将数据库放入 K8S 中不是一个明智的选择](https://mp.weixin.qq.com/s/4a8Qy4O80xqsnytC4l9lRg)。
-
-如果是四年前有人质疑容器化数据库我觉得还可以 battle 一下，都 2023 年了还有人不能认清这个大势，我就有必要来谈谈我的看法了。
-
-<!--truncate-->
-
-我从 K8s 0.9 版本时就开始做这件事，当时确实略早，CSI 都不成熟，到 1.0 才稍微稳定点，当时我在科大讯飞工作，负责的项目是建设和维护一整套系统，这套系统最终支撑了公司内部的 PaaS 服务。
-
-我们构建了一个 30 台物理机的集群，别看这个集群很小，但是非常有技术含量，里面跑了近 3000 个应用，而且是各种类型的，包括但不限于微服务，数据库，消息队列，缓存等等。**这个集群被公司内部几百名开发人员同时使用，但是整个集群的运维工作只需不到半个人力就能完成，如果没有 K8s 这一切绝对不可能。**
-
-我们还在不影响上层应用的情况下，无感知地升级了 Linux 内核。这种无感知升级如果没有 K8s 的支持是无法想象的，光是和各个业务线沟通可能都需要半年。
-
-我见过另外一个集群，跑了 400 个数据库而已，堆了 400 台服务器和 40 个人的运维团队，集群的整体利用率却不到 10%。整个集群无人敢动，只能一直堆人，人肉运维。这种情况虽然可以归咎于组织的不专业，但实际上，很多团队都面临着类似的挑战，无法有效地管理和优化他们的基础设施。
-
-后来我去了阿里，所有的交付类场景数据库全部是跑在 K8s 上。迄今为止我们在容器里跑数据库五年有余，0 故障。
-
-## 数据库 on K8s：专业能力的普及化
-
-绝大多数做业务的公司对数据库的处理通常存在两个问题：要么是数据库管理水平一般，无法充分发挥数据库的潜能；要么是每年需要在数据库管理上花费大量成本。[数据库 on K8s](https://sealos.run/docs/guides/dbprovider/) 可以让这一切标准化，有了标准，人与人之间才可以协作，生产力改变生产关系，从而大幅提效，让绝大多数不具备专业能力的团队享受到专业能力，本质上分工更明确了，就像农业和畜牧业分离一样，各自专注于自己的领域，从而提高整体的效率和产出。
-
-以 KubeBlocks 团队为例，我相信绝大多数公司在数据库层面的积累和专业能力都没有他们强。而且他们将这些实践经验转化为代码，写成了控制器，以极其简单的方式赋能给其他企业。K8s 让这一切成为可能。
-
-你可能会问：为什么不用 Ansible？运维人员可能很推崇 Ansible，因为和他们手头上的工具很匹配，用起来很顺手。Ansible 的核心思想是帮助用户部署和执行运维操作，而 K8s 的控制器则是基于另一种思路：**机器能做的事就不应该由人来做**。通过 Operator，可以实现 **24 小时不间断地同步期望状态和实际状态**，而这是用 Ansible 很难实现的，你用 Ansible 实现是想写个定时任务嘛？
-
-这就像在操作系统诞生之前，程序员需要手动给纸带穿孔来运行程序。有人可能会说，用纸带也能运行程序，甚至可以把程序刻录在光盘上运行，为什么还需要操作系统呢？
-
-这其实是同样的道理：Ansible 对运维人员来说是一款好工具，但 K8s 的目标是消除低端运维工作 (即编写和执行 Ansible 脚本的工作)。通过 K8s，我们可以实现更高效、更自动化的数据库管理，从而让那些不具备专业数据库管理能力的团队也能享受到专业级的服务。
-
-## 数据库 on K8s 的优势
-
-大部分人对于在 K8s 上运行数据库的担忧无非就集中在这几个问题上：
-
-**稳定性不知道怎么样？**
-
-**出了问题我没法排查？**
-
-**性能是不是不够好？**
-
-### 复杂度
-
-在 K8s 上运行数据库，复杂度主要分为两个方面：
-
-1. 建设这套系统的复杂度
-2. 使用上的复杂度
-
-**第一：建设这套系统的复杂度**
-
-如果直接基于原生的 K8s (裸 K8s) 去构建数据库系统，成本会相对较高，而且对于新手来说，这样的操作并不友好，你需要自己建设 K8s 存储驱动、数据库控制器等多个组件，没有深厚的专业知识和实践经验是搞不定的。
-
-这个时候发行版的优势就体现出来了，类似于 Linux 系统中，大多数人更倾向于使用 CentOS、Ubuntu 等发行版，而不是直接操作内核。我们也可以将 K8s 视为一种 “云内核”，如果你只是直接使用内核而不进行适当的定制和优化，可能会觉得它不够好用。因为内核本身只是提供了一个框架，很多功能和优化需要用户自己去实现。而 K8s 发行版则帮助用户解决了这一问题。例如，[Sealos 可以帮你一键](https://sealos.run/docs/self-hosting/lifecycle-management/quick-start/deploy-kubernetes)构建**包括高可用性集群、存储插件和数据库在内的完整系统**。这一切只需要简单的两条命令：
-
-```bash
-$ sealos run labring/kubernetes:v1.27.7 labring/helm:v3.9.4 labring/cilium:v1.13.4 \
-     --masters 192.168.64.2,192.168.64.22,192.168.64.20 \
-     --nodes 192.168.64.21,192.168.64.19 -p [your-ssh-passwd]
-$ sealos run labring/openebs:v3.9.0 labring/mysql:8.0
-```
-
-然后就没有然后了，一个包含高可用集群、存储插件和数据库的系统就诞生了。虽然 Ansible 可以帮助你解决安装问题，但它**无法处理运行时的自愈、多租户等问题**，而 on K8s 可以让数据库 as a Service。
-
-**第二：使用上的复杂度**
-
-通过云操作系统发行版和控制器，用户可以实现产品化的数据库服务，而不是靠脚本解决问题。
-
-![](images/sealos-database.png)
-
-这个页面我相信没有人不会使用吧？即使是菜鸡如我，都有能力建设起一个具有 3 副本的 PostgreSQL 集群，并且包含备份、恢复和监控等功能。这种能力不仅可以赋予企业中的所有开发者，也**展示了 “云计算思维” 与 “脚本思维” 的根本区别**。**云计算让每个人都能够提供服务 (as a Service)，而传统的脚本方法只是运维人员的一种便捷工具。**
-
-### 稳定性
-
-我们团队在数据库领域谈不上专业，都能建立起相当稳定的数据库系统，更别说专门研究这个领域的顶尖专家了。这个事情使用者不用操心，扔给专业的人去做就可以了。
-
-举个例子，[Sealos 公有云](https://cloud.sealos.io)目前运行了数千个应用，这些应用的数据库都是完全容器化的，由 KubeBlocks 团队提供支持。一旦数据库出现任何问题，我们只需将问题扔给他们即可。从成本角度来看，随便招聘一个 DBA 的成本都远高于我们支付 KubeBlocks 商业版的费用了，而且 Sealos 还是平台的建设方，对于使用数据库的最终用户来说就更不用关心了。从目前的运行情况来看，我们的稳定性已经远超许多非专业团队的运维水平。
-
-而且基本上数据库的生命周期管理就那么多事，稳定性问题是会随着时间的推移被收敛的，这些问题不断在代码层面被解决掉，最终用户关心的越来越少。这一点类似于 Linux 系统的稳定性，随着技术的不断成熟和优化，其稳定性已经达到了非常高的水平。**一个良好的软件架构会不断提升和收敛其鲁棒性，并逐渐减少对人的依赖，比如使用 Oracle 的人喝茶时间一定比用开源 MySQL 的人喝茶时间多。**
-
-所以无论从现实情况还是理论分析来看，稳定性都不应该成为用户在 K8s 上运行数据库的障碍。**将数据库运行在 k8s 上，实际上是在利用几十名顶尖数据库专家的经验，他们将自己的知识和技能沉淀到代码中，以标准化的方式为用户服务。单靠脚本很难将这些经验沉淀得如此彻底和高效。**。单靠脚本很难将这些经验沉淀得如此彻底和高效。
-
-### 性能
-
-说数据库跑容器性能不好的大概率都是不会玩的，KubeBlocks 团队做过深入的测试与调优，并撰写了很详细的分析文章，很多人觉得真复杂，但是其实这个复杂的事又不需要用户去做。**这些复杂性已经被内嵌在控制器的代码中，对于最终用户来说，这一过程并不复杂**。而且，容器对数据库性能的影响几乎可以忽略不计，真正重要的是磁盘 IO 和网络带宽时延等因素。
-
-OpenEBS 裸盘+数据库控制器的方案就可以有效解决性能问题。有了数据库控制器，就无需依赖于分布式存储。控制器能够保证数据库多副本的高性能和高可用性，无论是有状态服务还是无状态服务，对于用户来说都感觉不到差异。如果实例发生故障，控制器会自动进行调整。这才是一种极致的数据库使用体验。
-
-[Sealos](https://sealos.run) 目前已经采用了这种解决方案，在保证高可用性的同时，又不牺牲性能。它可以直接对接裸盘，进行自动扩容、备份和恢复。如果节点发生故障，控制器会自动启动新节点，同步数据并将其加入集群。这些高级功能只能在云操作系统中实现，传统的脚本方法只能望尘莫及，而且后者通常还需要人工介入，比如半夜挂了就只能 on call 了。
-
-所以**在 K8s 上运行数据库不仅没有性能问题，其稳定性甚至都超过了大多数运维人员的能力**。而且，这种方式已经做到了简单易用和自助操作，你要不要用？
-
-## 不脱离实际场景去否定和肯定
-
-在讨论数据库是否应该容器化时，我们必须考虑不同的实际应用场景。
-
-有些公司的数据库已经非常稳定的以非容器化的方式在运行了，也不差钱养着一群数据库专家，这样的情况当然没有动力把数据库搬到 K8s 上，搬出问题谁来背锅？例如，银行通常使用专门的 Oracle 一体机，只需支付订阅费用即可，这样的系统很难有迁移的动力。
-
-然而，对于许多业务开发团队和组织来说，他们现在面临着一个新的选择：**以极低的成本获得高度专业的数据库能力，从而将核心团队的精力全部集中在业务开发上。**
-
-要达到这一效果，他们可以选择直接使用 RDS (关系数据库服务) 这样的数据库云服务，或者采用基于 K8s 的数据库解决方案。这种方法需要一个长时间运行的管理进程来替代人工角色，以赋予那些不懂数据库的团队相应的能力。这就是一个大的趋势，固定成本 (例如开发控制器的成本) 提升了，但是边际成本 (每个使用数据库的团队的成本) 会大幅降低。
-
-当前有很多方案可以做到这一点，比如基于虚拟机或基于 Ansible，但毋庸置疑基于 K8s 的控制器在当前看来是最优解。即便是提供类似 RDS 这种能力的服务，底层使用 k8s 技术栈也是最优解。相比之下，虚拟机就不太行了，重，成本自然高，而且有更多的性能消耗。而像 Ansible 这类工具想要实现自助服务和多租户支持，更是异想天开。
-
-## 总结
-
-### K8s 的重要性
-
-K8s 是个大杀器，像是无崖子一甲子的功力你能发挥几成，如果 K8s 不跑数据库，你大概只能发挥 1 成功力。用好 K8s 能够极大地增强数据库运维的效能。
-
-### 技术进步带来的分工变革
-
-随着技术的不断进步，数据库的管理者和使用者会逐渐分离，传统的人工操作正在逐步被自动化程序所取代。在这个过程中，标准化就成了有效协作的基石。目前没有看到比容器技术和 K8s 更强的事实标准诞生，因此，将数据库跑到 K8s 上是大势所趋。
-
-### 实践案例和效益
-
-目前已经有很多团队在成本、易用性、稳定性和性能等多个维度上成功实践了 K8s，取得了显著的成果，也尝到了这样做的甜头。由奢入俭难，一旦企业体验到了 K8s 带来的好处，很难再回到传统的运维方式。以 Sealos 为例，从 v2 使用 ansible，到 v3 完全转向 golang，[现在已经发展到 v4 和 v5](https://github.com/labring/sealos)，这种技术的演进正是基于 “云计算” 和 “云操作系统” 的思维，而不是传统的 “运维脚本” 思维。脚本连个 API 都实现不了你我谈先进生产力？设计一个系统优先考虑的不一定是给人用的，而是给别的系统调用的，这样整个自动化才能起飞，这就是为什么 API > CLI > GUI 的原因。
-
-### 运维角色的转变
-
-目前还是有很多存量市场的 DBA 运维人员想保住自己的饭碗在唱衰这个方向，但是英明的决策者迟早会发现采用 K8s 可以大幅降低人力成本，提高效率和系统稳定性。**良禽择木而栖，希望很多运维同学能意识到你们在逐渐被取代是事实，当年我们做讯飞云的时候有近 40 人的运维团队，做完之后连运维这个组都没了**。在阿里云的时候我们团队也是 0 运维人员。
-
-### K8s 的快速成熟和生态发展
-
-K8s 在以极快的速度走向更成熟，生态在蓬勃发展，诞生了短期的乱象，让落地实践变得无所适从。但是不要担心，优秀的发行版一定会出现，发行版就在做 “熵减” 的事情，简化用户的使用体验，就像 Linux 内核到 Linux 发行版的演进一样，Sealos 就是其中一款基于 K8s 的云操作系统发行版。我最近一段时间回访了将近 200 名 Sealos 的付费用户，没有一个用户反馈上面的数据库不会用的，有反馈不稳定的，几个原因，磁盘满了，升级导致的问题等，这几个问题都被收敛掉了，最终趋近于 0，至少可以说是比用户自己搭建的稳定性高出好几个 9。
-
-### 企业的选择
-
-企业选不选这样的方案还是根据自己实际情况来判断，但是聪明的企业在尝试数据库 on K8s 之后会带来极大的好处，例如选择了 Sealos + KubeBlocks 的组合，就相当于拥有了：
-
-1. 一个拥有8年以上经验的专业 K8s 团队。
-2. 一个 P10 带了一帮 P8-9 的顶尖专业数据库团队。
-3. 一个极友好的产品体验，鲁棒性极高，性能极高的数据库系统。
-
-连招聘一个专家的成本都不到。当然这种选择一定有阻力，阻力大部分来自于企业内部那些想保住自己饭碗其实可以不太需要的人。
-
-我本可以对冯老板的论调逐条反击，但是边看文章边写还是太累了，碎碎念这些，希望看看到底有多少人能有更高级点的认知，希望能听到更多支持 OR 反对我们的声音，一起探索真理～
\ No newline at end of file
diff --git "a/docs/blog/zh-Hans/2023/velero\347\232\204\344\275\277\347\224\250.md" "b/docs/blog/zh-Hans/2023/velero\347\232\204\344\275\277\347\224\250.md"
deleted file mode 100644
index 9946ea53c64d..000000000000
--- "a/docs/blog/zh-Hans/2023/velero\347\232\204\344\275\277\347\224\250.md"
+++ /dev/null
@@ -1,149 +0,0 @@
----
-slug: Use velero to perform cluster backup on k8s
-title: Use velero to perform cluster backup on k8s
-authors: [xiao-jay]
-tags: [kubernetes,sealos]
----
-
-## velero的使用
-
-文档：https://velero.io/
-
-### 注意使用1.24的k8s
-
-1.25的k8s暂时会有coredns的pod起不来的问题，导致不能备份
-
-```
-kubectl get pod -A
-kube-system        coredns-565d847f94-5b2wt                   0/1     CrashLoopBackOff   2271 (4m1s ago)   8d
-kube-system        coredns-565d847f94-jtw9f                   0/1     CrashLoopBackOff   2271 (88s ago)    8d
-```
-
-
-
-### 以aws作为存储举例
-
-### 1、安装aws cli
-
-```
-apt install awscli
-aws configure  #登陆aws
-```
-
-
-
-创建bucket
-
-```
-BUCKET=<YOUR_BUCKET>
-REGION=<YOUR_REGION>
-aws s3api create-bucket \
-    --bucket $BUCKET \
-    --region $REGION \
-    --create-bucket-configuration LocationConstraint=$REGION
-```
-
-
-
-### 2、安装velero
-
-```
-wget https://github.com/vmware-tanzu/velero/releases/download/v1.9.2/velero-v1.9.2-linux-amd64.tar.gz
-tar -xvf velero-v1.9.2-linux-amd64.tar.gz
-mv velero-v1.9.2-linux-amd64/velero /usr/local/bin/
-```
-
-
-
-### 3、把aws作为备份存储
-
-创建一个credentials-velero文件
-
-```
-[default]
-aws_access_key_id=<AWS_ACCESS_KEY_ID>
-aws_secret_access_key=<AWS_SECRET_ACCESS_KEY>
-```
-
-
-
-```
-export BUCKET=xxxx
-export REGION=xxxx
-velero install \
-    --provider aws \
-    --plugins velero/velero-plugin-for-aws:v1.5.0 \
-    --bucket $BUCKET \
-    --backup-location-config region=$REGION \
-    --snapshot-location-config region=$REGION \
-    --secret-file ./credentials-velero
-```
-
-查看是否安装成功，availabe就是成功了
-
-```
-root@yyj-master1:/home/ubuntu# kubectl get pod -n velero
-NAME                      READY   STATUS    RESTARTS   AGE
-velero-7dd66cfb94-pbf47   1/1     Running   0          12m
-root@yyj-k8s124-test-master1:/home/ubuntu# velero backup-location get
-NAME      PROVIDER   BUCKET/PREFIX   PHASE       LAST VALIDATED                  ACCESS MODE   DEFAULT
-default   aws        sealos-test     Available   2022-11-10 02:43:28 +0000 UTC   ReadWrite     true
-```
-
-
-
-### 4、Quick Start
-
-```
-git clone https://github.com/vmware-tanzu/velero.git
-cd velero
-```
-
-#### Basic example (without PersistentVolumes)
-
-1. Start the sample nginx app:
-
-   ```bash
-   kubectl apply -f examples/nginx-app/base.yaml
-   ```
-
-2. Create a backup:
-
-   ```bash
-   velero backup create nginx-backup --include-namespaces nginx-example
-   ```
-
-   然后bucket里面就出现backup
-
-   ![](https://tva1.sinaimg.cn/large/008vxvgGly1h7zu5ykpwxj30pv0ds0ts.jpg)
-
-3. Simulate a disaster:
-
-   ```bash
-   kubectl delete namespaces nginx-example
-   ```
-
-   Wait for the namespace to be deleted.
-
-4. Restore your lost resources:
-
-   ```bash
-   velero restore create --from-backup nginx-backup
-   ```
-
-
-
-### 5、集群备份
-
-每一个小时全部内容备份一次
-
-```fallback
-velero schedule create full-cluster-backup --schedule="0 * * * *"
-```
-
-
-
-
-
-
-
diff --git a/docs/blog/zh-Hans/2023/vm-sealos-create.md b/docs/blog/zh-Hans/2023/vm-sealos-create.md
deleted file mode 100644
index 14352302d609..000000000000
--- a/docs/blog/zh-Hans/2023/vm-sealos-create.md
+++ /dev/null
@@ -1,139 +0,0 @@
----
-slug: using sh quick build a k8s cluster 
-title: using sh quick build a k8s cluster
-authors: [xiao-jay]
-tags: [kubernetes,sealos]
----
-
-## 使用 multipass 虚拟出虚拟机然后基于 sealos 快速构建一主一从的 k8s 集群，
-
-
-### 前置条件
-1、安装好multipass
-如果需要虚拟机把ip暴露出来，需要配置一下网桥
-https://multipass.run/docs/networks-command
-
-2、~/.ssh必要创建好，使用本地ssh来作为虚拟机的ssh
-```
-创建命令`ssh-keygen -t rsa` or `ssh-keygen -t rsa -C "xxxxx@xxx.com"`
-```
-
-
-### 使用教程
-
-```
-./start_vm.sh 
-./start_vm.sh name #指定集群名字
-```
-
-脚本内容
-
-```
-#!/usr/bin/env sh
-# requirement
-# ~/.ssh must have id_rsa.pub,id_rsa
-
-# Usage:
-# - sh start_vm.sh
-# - sh start_vm.sh  Name
-
-NAME="laf-test"
-# if set first param in command line
-if [ -n "$1" ]; then
-    NAME="$1"
-fi
-
-# check if multipass is installed
-if ! command -v multipass; then
-    echo "multipass is not installed, please install it first"
-    exit 1
-fi
-
-
-MASTER_NAME="$NAME""-master1"
-NODE_NAME="$NAME""-node1"
-# delete the vm if it already exists
-if multipass list | grep -e "^$MASTER_NAME"; then
-    echo "existing vm $MASTER_NAME"
-   echo "Deleting the existing vm $MASTER_NAME"
-   multipass delete -p "$MASTER_NAME"
-fi
-
-if multipass list | grep -e "^$NODE_NAME "; then
-    echo "existing vm $NODE_NAME"
-   echo "Deleting the existing vm $NODE_NAME"
-   multipass delete -p "$NODE_NAME"
-fi
-
-echo "Creating VM..."
-#multipass launch --name "$NAME" --cpus 2 --mem 4G --disk 100G 
-echo "\tmultipass launch --name $MASTER_NAME --cpus 2 --mem 4G --disk 100G "
-multipass launch --name $MASTER_NAME --cpus 2 --mem 4G --disk 100G 
-
-echo "\tmultipass launch --name $NODE_NAME --cpus 2 --mem 4G --disk 100G "
-multipass launch --name $NODE_NAME --cpus 2 --mem 4G --disk 100G 
-
-if [ $? -eq 0 ]; then
-    echo "vm is created"
-else
-    echo "ERROR: failed to create vm, please retry"
-    exit 1
-fi
-
-# shellcheck disable=SC2139
-alias vm_root_exec="multipass exec $MASTER_NAME -- sudo -u root"
-alias vm_node_exec="multipass exec $NODE_NAME -- sudo -u root"
-echo "Installing sealos..."
-set -x
-vm_root_exec -s << EOF
-echo "deb [trusted=yes] https://apt.fury.io/labring/ /" | tee /etc/apt/sources.list.d/labring.list
-apt update
-apt install sealos=4.1.3 -y
-EOF
-set +x
-
-set -x
-vm_node_exec -s << EOF
-echo "deb [trusted=yes] https://apt.fury.io/labring/ /" | tee /etc/apt/sources.list.d/labring.list
-apt update
-apt install sealos=4.1.3 -y
-EOF
-set +x
-
-set -x
-cp -r ~/.ssh ~/vm_ssh
-
-vm_root_exec rm -rf /root/.ssh
-vm_root_exec mkdir /root/.ssh
-multipass transfer ~/vm_ssh/id_rsa $MASTER_NAME:/home/ubuntu/
-multipass transfer ~/vm_ssh/id_rsa.pub $MASTER_NAME:/home/ubuntu/
-vm_root_exec cp -r /home/ubuntu/id_rsa /root/.ssh/id_rsa
-vm_root_exec chmod 600 /root/.ssh/id_rsa
-vm_root_exec cp -r /home/ubuntu/id_rsa.pub /root/.ssh/id_rsa.pub
-
-vm_node_exec rm -rf /root/.ssh
-vm_node_exec mkdir /root/.ssh
-multipass transfer ~/vm_ssh/id_rsa.pub $NODE_NAME:/home/ubuntu
-vm_node_exec cp -r /home/ubuntu/id_rsa.pub /root/.ssh/authorized_keys
-
-rm -rf ~/vm_ssh
-
-set +x
-
-master_ip=$(multipass info "$MASTER_NAME" | grep IPv4: | awk '{print $2}')
-node_ip=$(multipass info "$NODE_NAME" | grep IPv4: | awk '{print $2}')
-
-echo master_ip: $master_ip
-echo node_ip: $node_ip
-
-echo "Installing k8s..."
-set -x
-vm_root_exec sealos run labring/kubernetes:v1.24.0 labring/helm:v3.8.2 labring/calico:v3.22.1 --masters $master_ip --nodes $node_ip
-#vm_root_exec kubectl taint node $NAME node-role.kubernetes.io/master-
-#vm_root_exec kubectl taint node $NAME node-role.kubernetes.io/control-plane-
-set +x
-set +e
-
-echo "k8s cluster is ready."
-```
-
diff --git a/docs/blog/zh-Hans/2023/what-is-sealos.md b/docs/blog/zh-Hans/2023/what-is-sealos.md
deleted file mode 100644
index 187e92491f77..000000000000
--- a/docs/blog/zh-Hans/2023/what-is-sealos.md
+++ /dev/null
@@ -1,349 +0,0 @@
----
-slug: what-is-sealos
-title: Sealos vs. 传统云服务：全方位对比分析
-description: 深入探讨 Sealos 的核心功能、技术特点、设计理念，以及它如何革新云操作系统领域。我们也将探索 Sealos 在不同使用场景下的应用，并与市场上其他云服务平台进行比较，以展现其独特的市场优势和潜力。
-authors: [fanux]
-tags: [Kubernetes, Sealos]
-keywords: [云操作系统, Sealos, K8s, 云原生, 云计算, 分布式, PaaS, Rancher, KubeSphere, 云服务]
-image: https://cdn.jsdelivr.net/gh/yangchuansheng/imghosting-test@main/uPic/2023-11-17-15-50-TKK1Ol.webp
-date: 2023-07-10T10:00
----
-
-随着云计算的快速发展和广泛应用，企业和开发者越来越希望能够灵活、高效地管理和部署云资源。在这个背景下，Sealos 应运而生，它不仅是一个以 K8s 为内核的[云操作系统](https://sealos.run)，更是一个创新的解决方案，旨在简化和优化云计算的使用体验。
-
-本文将深入探讨 Sealos 的核心功能、技术特点、设计理念，以及它如何革新[云操作系统](https://sealos.run)领域。我们也将探索 Sealos 在不同使用场景下的应用，并与市场上其他云服务平台进行比较，以展现其独特的市场优势和潜力。
-
-<!--truncate-->
-
-## Sealos 是什么？
-
-Sealos 在概念上类似于如 Windows 这样的操作系统，但有两个关键的不同点。首先，Sealos 不是在单个服务器上运行，它的核心理念是**将整个数据中心或跨多服务器的资源视为一个统一的整体**。这种方法突破了传统操作系统只在单一机器上运行的局限，将资源和应用管理扩展到了更大规模，能够**在整个数据中心范围内运行和管理应用**，从而大幅提升云资源的利用效率和运维能力。
-
-![](https://jsd.cdn.zzko.cn/gh/yangchuansheng/imghosting-test@main/uPic/2023-11-17-13-46-9Nel1a.png)
-
-与普通操作系统支持的 QQ、微信等日常应用不同，Sealos 专注于为开发者提供所需的分布式应用环境。在 Sealos 的世界里，**复杂的云计算任务变得像使用个人电脑一样简单直观**。无论是运行常见的 Web 服务如 Nginx，还是部署和管理各种编程语言编写的分布式应用，Sealos 都能一键完成，极大地减少了配置和管理的复杂性。它的设计哲学强调用户友好性和简洁性，致力于消除使用云服务时的技术壁垒，让每个用户都能轻松享受到云计算的强大能力。
-
-## Sealos 解决的核心问题
-
-Sealos 主要解决了以下几个核心问题：
-
-### 优化用云体验
-
-#### 用户界面
-
-用户界面 (User Interface) 的重要性不言而喻。传统的单机操作系统为我们提供了一个标准化的用户体验范例。然而，当今众多的云平台已经演变成庞大而复杂的系统，导致用户在产品中迷失方向。甚至催生了一些专门针对云服务的培训岗位，这在某种程度上反映了产品设计的失败。例如，很少有人需要参加苹果手机的使用培训，因为其产品设计已经足够优秀，非常易于理解和操作。
-
-在产品设计理念上，我们首先需要认识到不同的用户角色关注点各异。在云服务的用户群体中，有开发者、数据库管理员 (DBA)、运维人员、熟悉 K8s (k8s) 的专家、技术新手和行业专家等。试图用一个产品满足所有这些角色的需求几乎是不可能的。例如，即使是同一个 CI/CD (持续集成/持续部署) 工具，也有人偏爱 Jenkins，而有人更喜欢 Drone。
-
-许多 PaaS 平台以 CI/CD 为例，通常集成了特定工具如 Jenkins，这导致一旦该工具不再流行或有更优秀的替代品出现时，平台需重构核心功能。同时，这种设计无法满足不同用户的偏好。
-
-单机操作系统的做法值得我们学习。操作系统本身并不过多干预，而是负责良好地管理应用程序。这样，用户就可以自由选择他们喜欢的应用，如办公软件钉钉或飞书，而这与 Windows 操作系统无关。这种方法赋予了用户极大的自由度。尽管许多 PaaS 平台也提供应用市场，但他们并没有将应用视为首要元素。相反，大多数平台将 K8s 视为核心，这不是说有什么大错，但**这种做法只能定位于云原生用户群体，并不能实现高度的抽象**。
-
-Sealos 平台则完全遵循了操作系统的理念。它专注于用户所需的具体功能。例如，DBA 在创建数据库时无需关心 K8s 的具体细节；使用函数计算服务的用户不必关心其是否运行在容器中；而对于 K8s 技术专家，则可以通过 Lens 应用程序或命令行工具进行操作。Sealos 的这种设计理念，使得各类用户都能在其平台上找到合适的工具和服务，从而优化了整体的用户体验。
-
-#### API > CLI > GUI
-
-许多人对产品的理解仅限于其 GUI，但实际上，一个没有 API 的云服务产品对企业而言几乎无用。企业为了提高效率，需要打通和对接各种系统，这时 API 的重要性就显现出来了。云服务的设计往往不仅仅是为了人类用户，更多的是为了其他程序或系统，以实现企业操作的高度自动化。
-
-![](https://jsd.cdn.zzko.cn/gh/yangchuansheng/imghosting-test@main/uPic/2023-11-17-14-36-qnQmDa.jpg)
-
-具体来说，Sealos 提供的 API 与 K8s 的 CRD (Custom Resource Definitions，自定义资源定义) 设计完全兼容。用户可以通过 Sealos 的 API，以与操作 K8s 环境相同的方式来管理和控制他们的云资源。为了安全性，Sealos 为每个租户分配了权限受限的 kubeconfig 认证文件。这些文件允许租户在保证安全的前提下，灵活地对接和管理不同的系统和资源。
-
-这种设计不仅使得 Sealos 的云服务更加强大和灵活，而且为企业提供了一种高效、自动化的方式来管理他们的云基础设施。通过 API 的广泛应用，企业可以轻松地整合 Sealos 云服务到他们现有的工作流程中，从而提高运营效率和灵活性。
-
-#### 快速、高效的操作体验
-
-我们的目标是确保大多数操作能在 30 秒内完成，最长不超过 3 分钟。如果某项功能的操作时间超过这个标准，那一定是有问题的，需要重新评估和设计。
-
-#### 面向所有用户
-
-尽管 Sealos 主要面向开发者，但在功能设计过程中，我们同样关注非技术背景用户的体验。为此，我们特意邀请无技术背景的行政人员亲身体验我们的服务，以此来验证产品的易用性。如果他们能够顺畅完成操作流程，便证明我们的产品操作简便、易于上手。产品的易用性是我们的核心追求，若用户需要他人指导才能使用服务，那就说明我们的设计尚有不足。
-
-#### 专注于高质量应用
-
-在应用开发领域，Sealos 始终将质量置于数量之上。对绝大多数应用而言，稳定的运行环境及后端数据库支持是不可或缺的。我们致力于先对这些基础应用进行精细打磨，随后才拓展至其他应用领域，融合各个方向、领域的尖端应用，以便为用户提供全面且高效的解决方案。
-
-#### 保障扩展性和安全性
-
-Sealos 并不自己去设定标准，而是严格遵循成熟的体系和事实标准，这一策略确保了我们的服务与整个云原生生态系统的高度兼容。所有云原生应用均可在 Sealos 上安全运行，即便没有产品化的一些应用也可以通过 Sealos 的终端来运行。我们的兼容性建立在全面支持 K8s 的基础上，同时在安全性方面进行了加强。
-
-![](https://jsd.cdn.zzko.cn/gh/yangchuansheng/imghosting-test@main/uPic/2023-11-17-14-48-vbJezM.png)
-
-在 Sealos 中，为了避免不当操作或不适当的镜像下载对整个系统造成灾难性影响，每位用户的权限被限制在其自身的命名空间内。这种权限管理机制加强了企业级[云操作系统](https://sealos.run)的安全性与稳定性。
-
-### 降低用云成本
-
-我们的目标不仅是帮您降低 30% 的成本——这样的目标缺乏挑战性，过于枯燥。我们追求的是将云服务的边际成本降至极低，至少要达到原成本的十分之一。如何实现这一目标？这正是我们追求的方向。那么如何实现这个目标呢？
-
-#### 重定义云架构：摒弃传统模式
-
-**首先，我们要摒弃传统的 IaaS、PaaS 和 SaaS 三层架构模式。**
-
-为何选择放弃这一经典架构？原因在于，传统的分层模式已不再符合当前的技术发展和市场需求。以 IaaS 为例，它通过软件模拟数据中心中的路由器、交换机和虚拟机等硬件，虽然提高了调度的灵活性，但同时也导致软件成本急剧增加。以 OpenStack 为例，没有数十人的团队是难以维护其稳定性的，这直接导致了高昂的软件成本。过去，这种方式似乎是提高资源利用率的必要手段，但现在从应用的角度看，许多应用在运行时并不关心它们是否运行在独立的 VPC 中。
-
-![](https://jsd.cdn.zzko.cn/gh/yangchuansheng/imghosting-test@main/uPic/2023-11-17-15-00-2jC2C8.png)
-
-以上是我五年前画的一张图，现在逐渐变成了现实，这与单机操作系统的发展历程类似：最初是分层的，后来逐渐发展成为更高效的内核架构。云计算的分层架构同样携带着历史的包袱。一旦企业摒弃了 IaaS，它们就可以节省大量成本，并享受到更高的性能。
-
-从这个新的视角出发，我们发现，实际上并不需要 IaaS。同时，从技术角度来看，PaaS 和 SaaS 本质上是相同的，它们都是应用层面的服务，因此也无需进行过度区分。在新的云内核架构中，我们只需要有效地实现多租户之间的隔离。这并不需要复杂重量级的解决方案。例如，Sealos 提供了一种在不可信公网环境中实现多租户共享一个 K8s 集群的方式。我们利用强隔离容器 (如 Firecracker)、网络策略 (如 Cilium) 以及存储块设备隔离 (如 OpenEBS) 来实现这一目标，不仅成本更低，效果也更好。
-
-![](https://cdn.jsdelivr.net/gh/yangchuansheng/imghosting-test@main/uPic/2023-11-17-15-02-6N4ygp.png)
-
-#### 提高应用密度和调度效率
-
-除非是非常重型计算密集型的应用，不然一台服务器上不跑个 100 多个应用你出门都不好意思和别人打招呼，而在 Sealos 上我们一台服务器跑 800 个应用！还能保证应用的稳定。
-
-这对企业来说非常重要，企业可以显著减少对硬件资源的采购需求。如果你是企业高管，可以重新审视一下公司的整体资源利用率，你会发现大部分情况下这一比率都低于 20%。通过我们的方法，还有很多倍的提升空间。
-
-通过 Sealos，企业能够以更简单的方式节省高达一半的成本。
-
-#### 充分弹性
-
-夜间企业的不活跃应用应该都去睡觉休息，把资源留给离线计算或者训练任务，这点其实用公有云更有优势，因为可以直接释放资源，节省大量成本。
-
-![](https://jsd.cdn.zzko.cn/gh/yangchuansheng/imghosting-test@main/uPic/2023-11-17-16-18-LIZ6Yt.png)
-
-Sealos 直接把这一重要特性内置。如果企业所有应用都以这样的方式运行，可以节省巨量的成本。
-
-#### 干掉僵尸应用和僵尸服务器
-
-企业里面有很多开发测试的程序，怎么知道哪些没人在用？甚至还有很多僵尸 “服务器”，有些企业只能靠一个 exel 表来维护谁用了啥，过一段时间把负责都问一遍，清退没人有的服务器，稍微高端点的会搞个老掉牙的 CMDB。。。
-
-解决这个问题的釜底抽薪办法是：收钱。对，企业内部也得收钱，欠费的应用就直接干掉。
-
-这样每个部门可以申请额度，开发者申请额度，额度用完就干掉应用，这样可以长期保证没有僵尸应用。而 Sealos 把所有服务器都统一纳管，整个集群变成一个大资源池，当然就不可能存在僵尸服务器了。同时还帮企业节省了一帮运维人力。
-
-要想杜绝资源浪费就需要这样精细化运营，Sealos 以极低的成本达到这个目的，企业管理者唯一要做的事就是给每个子账户分钱即可。
-
-![](https://jsd.cdn.zzko.cn/gh/yangchuansheng/imghosting-test@main/uPic/2023-11-17-16-18-ijXZ4y.png)
-
-这样你可以精细化的控制到每个部门每个人用多少钱，从而进一步分析 ROI。
-
-#### 最多半个人运维整个云
-
-一帮运维？每个业务都有运维组？你见过微软把 PC 卖给你再给你配个运维？所以还是软件不够优秀，足够优秀足够稳定就不需要运维这个角色。或者这个角色做的事情会改变比如写编排文件写 operator。
-
-Sealos 的开发者花了不到一半精力维护整个云，8000 个应用时半个人，8w 个也是 80w 个也是 800w 个也是半个人，这就是[云操作系统](https://sealos.run)，不会因为体量变大而增加运维复杂度。
-
-我是一个比较中性的人但是我有个极端观点是云足够成熟的情况下不应该有运维这个角色，如果你的企业运维超过 3 个人 (搬服务器的除外)，那应该好好反思一下。
-
-在给现在的运维人员指条明路：去开发[云操作系统](https://sealos.run)。
-
-#### 研发人力成本
-
-我是一个研发，我至少 50% 以上的精力花在了研发之外的事上，那些杂事加起来可能有 20% 但是其影响可能是 80% 。它会割裂我正在做的事，比如你写完代码想着还要卖服务器，配置证书，打包，上线一想到这些我敢打赌没有哪个开发者喜欢做这些事，除非他是个变态。开发者是群懒人，为了偷懒开发出一大堆工具，这是偷懒者的胜利，sealos 也是一群偷懒者创造的，所以能自动绝不手动，能 AI 绝不人工。
-
-![](https://jsd.cdn.zzko.cn/gh/yangchuansheng/imghosting-test@main/uPic/2023-11-17-16-18-as6HSI.png)
-
-自己分析问题多累，AI 比人还专业。
-
-Sealos 上函数计算能力 Laf 就可以让写代码像写博客一样简单，点击保存，关机走人，要想下班早，Laf 得用好。
-
-所有后端依赖如数据库这些都可以轻松 30s 之内解决。未来还有 AI 自动打包上线，自动编码调试等。
-
-这无形中的研发效率提升可以节省的成本是难以想象的，我们客户例子中 2 个人干五个人活的比比皆是。
-
-### 一键构建私有云，公有云私有云体验一致
-
-Sealos 对云计算的理解是深刻的：
-
-**公有云和私有云是一回事，同一个抽象，同一套代码，同一种体验，装的应用不同尔而已**
-
-你会发现 linux 不管跑在你自己的数据中心还是跑在公有云上都是一种产品形态，这就是优秀软件的特点，能做到高度抽象。
-
-Sealos 设计之初就考虑到这一点，其实公有云与私有云本质是一样的，都是链接计算资源。很多人可能觉得不一样啊，公有云还有充值计费什么的，其实只需要把这些功能放到一个单独的应用中即可，这样在不需要的场景直接不安装这个应用。
-
-![](https://jsd.cdn.zzko.cn/gh/yangchuansheng/imghosting-test@main/uPic/2023-11-17-16-18-vMGZyu.png)
-
-但其实大一点的企业即便做私有云它的形态也应该和公有云一样，计量计费是非常重要的一个功能，企业超过 10 个人都需要精细化运营云资源，就更别说成千上万人的企业用私有云了，各部门的成本分摊等。
-
-一些非常小的差异比如微信支付第三方登录这些可能确实不太需要，这就是一些小的配置。
-
-## Sealos 技术分析
-
-Sealos 选择一条非常有挑战的场景：在公网不可信的环境中让多租户共享一个 K8s 集群。
-
-这样做的好处是巨大的：
-
-- 用户进来直接用，不需要构建集群，也只需要为容器付费，成本大大降低。
-- 随着规模增大就会产生飞轮效应，让边际成本大量降低。(Sealos 摩尔定律：Sealos 集群规模每翻一倍用户用云成本会降低 30%)
-
-同时带来了一个巨大的技术挑战：隔离性，安全性和超大规模。
-
-我们解决了这个技术挑战，那不仅在公有云上为客户提供很大价值，在私有云场景就更轻松拿捏了。
-
-![](https://jsd.cdn.zzko.cn/gh/yangchuansheng/imghosting-test@main/uPic/2023-11-17-16-19-sJYA9X.png)
-
-从这张图中拆解 Sealos 的技术体系：
-
-### 到处运行
-
-这块比较著名的开源项目可能是 terraform 了，不过很遗憾在对接某个云时启动速度很慢 (某些 driver 写的不够好，不能怪 terraform)，而且很容易触发云厂商的 API 调用 limit (也是 driver 乱请求)，无法满足我们的需求。
-
-而且我们希望的标准是 K8s CRD 而非 terraform，这样配合上 helm 就可以，于是我们自研了一个对接基础设施的控制器。结果是本需要 10min 启动的基础设施我们优化到了 30s，这几乎是极限了，很难在有压榨空间了，除非云厂商自己服务器启动时间能再快些。优化点主要在一些并行的处理以及退避算法调优，而不是动不动就 sleep 10s。加上在这些虚拟机上启动 Sealos 集群也只需要 3min，这已经优于很多同类产品了，大家可以自行比较 (其它一般 15min)
-
-同样在裸机上运行要考虑大量兼容性问题，所以 Sealos 底层几乎全部抛弃 rpm apt 这些与操作系统耦合的安装工具，这样几乎兼容了全部主流的 linux 发行版。windows 我们不支持，原因是因为单纯的讨厌不喜欢。
-
-同时我们的集群镜像能力可以很好的同时支持 ARM x86 这些主流硬件体系架构。
-
-### 云驱动层
-
-这块挑战巨大，如果不考虑安全性隔离性，这块装一个 containerd calico openebs 可能就 OK 了，但是在公网不可信环境中这种弱隔离肯定是不行的，所以我们在一些新的技术上填坑，如 firecracker 来解决容器维度强隔离，而云厂商虚拟机里套虚拟机又是有问题的，这里后续我们会单独发一篇文章来介绍。
-
-网络我们对计量和隔离的要求极高，而 calico 这些你懂的，隔离会使用大量的 iptables 规则，规模一大基本网络就不可用了，我们测试过 5000 条规则时压力测试一下就有 30% 的失败率。网络这块我们就引入了 cilium，通过 ebpf 来解决这这些问题，还有多租户的网络计量。
-
-![](https://jsd.cdn.zzko.cn/gh/yangchuansheng/imghosting-test@main/uPic/2023-11-17-16-19-REW9Fy.png)
-
-存储我们使用 openebs + lvm，为每个用户挂载独立隔离的卷，这样用户可以享受到本地磁盘的性能。而文件存储又变成一个大问题，nfs 这些几乎只是玩具，根本无法生产。所以我们世界冠军同学带队基于 rust 完全自研 sealfs 文件系统，架构超级精简，主打高性能，支持 RDMA。
-
-### 生命周期管理与集群镜像
-
-对于集群安装扩容 Sealos 老用户都知道，几乎已经被做到极致了，多复杂的集群一律一条命令搞定！
-
-而集群镜像能力世界上可能 (为了不触犯广告法加上可能二字) 只有两款软件支持 Sealos 和 sealer，都是我主导开发的，sealer 在阿里时捐给了 CNCF。这种能力是交付之王！可以用完全兼容 Docker 镜像的格式把整个集群打包，到了客户环境一键交付。
-
-在集群镜像能力面前可能 (用词严谨) 其它所有交付工具我只能说：都是弟弟。
-
-### 租户管理
-
-任何一个企业级用户，多租户都是刚需，在设计租户权限的时候既要灵活又不能复杂，这些部门或者开发者之间既要相互隔离，又需要能相互协作，而原生的 K8s 是不帮你做这些的，只提供一个最粗略的 namespace 管理肯定是不够的。
-
-Sealos 会为每个登录的用户分配一个独立的 kubeconfig，其权限只会被限制到用户自己的 namespace 中，用户可以把自己的 namespace 共享给别人。用户想穿透到主机，或者使用特权，或者共享主机文件系统端口号这些危险操作统统禁止，这才是企业实践云原生的 (可能) 最佳姿势。
-
-### 应用管理
-
-应用是 Sealos 的一等公民，在云内核之上，一切皆应用。这里最难的地方是在多租户的情况下如何寻求一个统一的应用管理方式的抽象。
-
-比如有些应用是需要一个管理员权限跑一个控制器的。
-
-有些应用是需要跑一个单独的实例的。
-
-有些应用是一个实例多个用户共享使用的。如一个 chatGPT API。
-
-有些应用是不使用时就要被自动释放的。如 terminal 应用，没人用会自动被回收。
-
-而系统还需要对这些应用进行权限的管控和计量，进一步增加了复杂度。
-
-Sealos 把这些能力全部抽象成了应用，就像你 macOS 上跑的应用一样。
-
-### 自研函数计算应用 Laf
-
-真的让你体验什么是像写博客一样写代码
-
-- 云端开发，码上生花
-- Laf 用的好，天天下班早
-- 行政都会用的云开发
-- 函数计算有两种 30s 上线的和 30s 劝退的
-
-Laf 的毫秒级发布几乎吊打一切，一般其他方案发布一次都得等个 3 到 5s，而 laf 能做到比发博客还快。
-
-Laf 直接集成 GPT4，大部分代码就不用你自己写了，我们训练了几千份 Laf 的代码，现在 AI 写起来已经很绝绝子了。
-
-数据库内置，对象存储内置，除了用 AI 写点代码几乎不用关心其它任何东西。
-
-对 websocket 的支持几乎天下无敌 (有些 function 按调用时长收费，我就问你一个长链接你的钱包还够不够)
-
-别的函数计算不是常驻模型，一个 chatGPT 的会话 ID 你都得存到数据库，而 Laf 完全不需要，用的是常驻自动伸缩容器。
-
-### 自研 AI 知识库应用 fastGPT
-
-Laf AI 写代码，sealos 故障自动诊断，AI 自动上线应用，自动构建 Docker 镜像，这些统统靠 fastGPT 这个项目，自动帮你构建知识库。
-
-![](https://jsd.cdn.zzko.cn/gh/yangchuansheng/imghosting-test@main/uPic/2023-11-17-16-19-cCinq3.png)
-
-### 数据库/消息队列等应用
-
-我们核心聚焦在操作系统和部分内置应用上，数据库消息队列这些是个非常专业的领域，我们选择的办法是与顶级天团团队合作，数据库我们选用 kubeblocks，是 polarDB 创始人曹伟主导的项目 (刚好就在我们隔壁，他们的咖啡好喝，数据库好用)。kubeblocks 统一编排了 mysql pgsql mongo redis，各种高可用数据备份恢复等，绝对的为数据保驾护航。数据库管控我们与 bytebase 合作，google **云数据库团队担任技术负责人陈天舟带队。**
-
-消息队列我们选择与 rocketmq 创始人王小瑞合作，统一解决 rocketmq kafka 等消息队列服务。
-
-devops 我们与 gitea 合作，90% 兼容 github actions，gitea 作者亲自带队，github actions 几乎是一个完美 devops 方案，gitea 选择与其兼容是一个非常明智的选择。
-
-### 计量计费
-
-计量并不容易，首先需要有类似监控系统的采集机制，容器的 CPU 内存磁盘，采集到了之后需要与其 namespace 关联，最终关联到账户。除此之外还需要采集一些比较难采集到的东西，比如函数计算里面数据库的访问次数，对象存储每个租户用的大小等。最难的是在不影响网络性能的情况下对网络带宽的计量。
-
-计量系统的挑战是他不像监控系统那样对精准度要求不高，一旦计量出错用户的钱就出错，是个非常敏感操作，我们需要有个对账的系统对计量进行校验，确保没有收错钱。
-
-有了这个能力，企业就要以对部门和内部开发者做精细化的运营，应用欠费自动停机就会让整个公司几乎没有僵尸进程。
-
-我们还实现了公有云模式与私有云模式计量的统一抽象。
-
-## Sealos 设计理念与原则
-
-牛掰的东西从使用者视角来看一定是简单的，如苹果手机，安卓操作系统。云计算同样可以做到，但是如果简单功能不强，那叫简陋。牛逼的架构不会牺牲复杂度来增强功能。
-
-Sealos 一旦违背这些原则，就会走向笨重，奔向死亡。
-
-### 大道至简
-
-Sealos 大道至简体现在两个方面：产品设计&系统架构。
-
-产品上我们坚决不想给用户带来任何负担，就希望用户像用个人电脑一样用云，是什么样的角色关心什么样的应用，坚决不让额外你不需要用的功能对你产生干扰。这不意味着功能就弱，Sealos 可以通过扩展任何应用来增强系统的能力，也提供原生 API 来自由扩展。
-
-系统架构层面抛弃 IaaS PaaS SaaS 三层架构是个明智之举，因为从应用视角来看其实压根就不需要复杂的三层架构去支撑，云内核+云驱动，**系统之上皆为应用。**
-
-### 化整为零
-
-Sealos 可以精简到只剩一个裸 kubernetes，也可以装成千上万个应用，可以跑在电视盒子上，也可以运行在数万台服务器的数据中心，想想优秀的 linux 是不是也是这样，可以运行在嵌入式设备上也可以运行在最大的数据中心，这就是一种化整为零的架构，可以做到恰好满足你的需求，而不是堆了一大堆你不需要的能力。
-
-只有这种架构才能做到无限扩展。
-
-### 自由组装
-
-内聚精简的架构就可以根据自己的需求来做组装，让你的云多一分则嫌多，少一分则嫌少。这得益于高度抽象的能力，具体功能通过应用本身去实现，而[云操作系统](https://sealos.run)本身对下只需要池化资源，对上只需要管理好应用即可，这样即便整个生态几十万应用出现也不会增加你的云的复杂度。参考你是怎么用智能手机的，云也可以这样玩。
-
-## 使用场景
-
-### 直接使用 Sealos 提供的云服务
-
-- 任何的业务组件能 build 成 docker 镜像的就能很轻松跑在 Sealos 上 (后面当然会有 AI 帮助完成镜像构建，什么 Docker 我不懂)，比如企业内部各种编程语言写的项目。
-- 四大数据库高可用集群一键启动 pgsql/mysql/mongo/redis，备份/恢复/监控/管控应有仅有。
-- 各种知名开源项目都可运行在 Sealos 上。
-
-所以可以很好的在 Sealos 上运行你的业务系统，解决了业务运行时问题和所有后端依赖。
-
-### 帮助你构建完整的私有云
-
-大家可能越来越发现裸硬件不仅比虚拟机性能更好，而且价格还便宜，不过还是大量公司还不会考虑托管硬件，原因就在于很难搞得定软件部分，搭 openstack？搭 kubernetes？其实都差点意思。
-
-Sealos 的云服务版本可以一模一样的 clone 到你自己的机房，Sealos 目前已经服务数万在线用户了，能支持的场景和复杂度已经超过绝大多数公司了，毕竟有几万开发者的公司还是不多的。
-
-所以裸机+Sealos 软硬件都有了，自建私有云这个事就成立了。
-
-自建成本有多高呢？
-
-- 买好服务器
-- 一条命令起集群，小白都会，管你多少台服务器都是一键
-- 最多 0.5 人维护，我们基本实现了自运维，目前在线集群服务上万应用投入的维护人力 0.1 个左右
-
-## 与其他平台的比较
-
-### 对比其他云原生 PaaS 平台
-
-这是问的最多的，最大的区别是设计理念，Sealos 不会去做一个大而全的 PaaS 平台，[云操作系统](https://sealos.run)本身是高度抽象的，是 nothing，Sealos 上应用是一等公民，通过各种不同的应用来满足用户的需求，比如 Sealos 上 Database 应用，你在使用它时完全不用关心其他任何概念，kubernetes 单词怎么拼都不知道。
-
-与追求大而全的传统 PaaS 平台不同，Sealos 把[云操作系统](https://sealos.run)视为高度抽象化的 “nothing”，强调应用程序的重要性。在 Sealos 平台上，**应用被视为第一等公民**，通过多样化的应用来满足用户的各种需求。例如，使用 Sealos 的数据库应用时，用户无需关注任何其他概念，**甚至不需要知道如何拼写 “Kubernetes”**。
-
-Rancher 和 KubeSphere 是非常优秀的 PaaS 平台。但 Sealos 并不将 K8s 作为其核心目的。它更注重于 K8s 上运行的应用，而非 K8s 本身。因此，Sealos 的目标用户是广泛的开发者群体，其意图是打造一个通用性操作系统，不局限于仅服务于云原生领域。Sealos 甚至都不太想强调 “云原生” 这一尚未明确定义的概念。
-
-因此，Sealos 的核心思想并非是 “更好用的 Kubernetes”，而是 “**利用 K8s 为用户提供所需的应用**”。
-
-> 用户真正需要的是什么？
->
-
-在操作系统领域，用户的需求定义了系统的功能。操作系统的灵活性意味着它不会给用户带来额外负担。例如，Windows 对于游戏玩家而言是游戏平台，对程序员则是编程工具，对美工来说则是图像处理软件。操作系统的形态由使用者决定，取决于装载了哪些应用。Sealos 也秉承这样的设计理念，因此不同用户的体验将截然不同。
-
-### 对比各种 K8s 安装工具
-
-安装只是整个操作系统的一个 boot 功能，不过 Sealos 在集群生命周期管理和应用打包交付上也有极大的特色。
-
-首先，Sealos 通过一条命令即可完成安装。其次，利用集群镜像，可以将整个集群打包并随处交付。最后，Sealos 允许用户像编写 Dockerfile 一样灵活地定制所需的集群，自由组装和替换镜像中的组件，提供了上百种组件供用户选择。
-
-## 总结
-
-Sealos 社区现在拥有庞大的社区用户基础，发展了很多年，久经沙场，稳定性在各种极端场景下久经考验，稳如老狗。
-
-我们云服务注册用户和应用数量也在夸张级别的增长，上线两周超 6k 在线开发者，近万应用数量。
-
-我们会为用户提供一个公有云私有云体验完全一致，简单，便宜，开放，强大的[云操作系统](https://sealos.run)。
\ No newline at end of file
diff --git a/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/access-meilisearch-on-sealos.jpg b/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/access-meilisearch-on-sealos.jpg
deleted file mode 100644
index a522b7e4f4fa..000000000000
Binary files a/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/access-meilisearch-on-sealos.jpg and /dev/null differ
diff --git a/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/change-meilisearch-mem-on-sealos.jpg b/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/change-meilisearch-mem-on-sealos.jpg
deleted file mode 100644
index 3c01b896c94e..000000000000
Binary files a/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/change-meilisearch-mem-on-sealos.jpg and /dev/null differ
diff --git a/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/deploy-meilisearch-on-sealos.png b/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/deploy-meilisearch-on-sealos.png
deleted file mode 100644
index 99e9b0abe16a..000000000000
Binary files a/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/deploy-meilisearch-on-sealos.png and /dev/null differ
diff --git a/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/details-of-meilisearch-on-sealos.png b/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/details-of-meilisearch-on-sealos.png
deleted file mode 100644
index b309fd40880c..000000000000
Binary files a/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/details-of-meilisearch-on-sealos.png and /dev/null differ
diff --git a/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/feature.jpg b/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/feature.jpg
deleted file mode 100644
index ac9764aaf636..000000000000
Binary files a/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/feature.jpg and /dev/null differ
diff --git a/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/flarum-admin-panel.jpg b/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/flarum-admin-panel.jpg
deleted file mode 100644
index 9b8833e4a4a2..000000000000
Binary files a/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/flarum-admin-panel.jpg and /dev/null differ
diff --git a/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/flarum-integrate-meilisearch.jpg b/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/flarum-integrate-meilisearch.jpg
deleted file mode 100644
index 4a701e0a3e90..000000000000
Binary files a/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/flarum-integrate-meilisearch.jpg and /dev/null differ
diff --git a/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/import-flarum-index-to-meilisearch.png b/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/import-flarum-index-to-meilisearch.png
deleted file mode 100644
index 833951d01400..000000000000
Binary files a/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/import-flarum-index-to-meilisearch.png and /dev/null differ
diff --git a/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/meilisearch-on-sealos-desktop-2.jpg b/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/meilisearch-on-sealos-desktop-2.jpg
deleted file mode 100644
index 141200ee2016..000000000000
Binary files a/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/meilisearch-on-sealos-desktop-2.jpg and /dev/null differ
diff --git a/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/meilisearch-on-sealos-desktop.jpg b/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/meilisearch-on-sealos-desktop.jpg
deleted file mode 100644
index 40fbe13567a4..000000000000
Binary files a/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/meilisearch-on-sealos-desktop.jpg and /dev/null differ
diff --git a/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/meilisearch-private-address-on-sealos.jpg b/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/meilisearch-private-address-on-sealos.jpg
deleted file mode 100644
index 1556c8f99439..000000000000
Binary files a/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/meilisearch-private-address-on-sealos.jpg and /dev/null differ
diff --git a/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/open-meilisearch-terminal-on-sealos.jpg b/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/open-meilisearch-terminal-on-sealos.jpg
deleted file mode 100644
index 94f537cf841a..000000000000
Binary files a/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/open-meilisearch-terminal-on-sealos.jpg and /dev/null differ
diff --git a/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/public-address-of-meilisearch-on-sealos.png b/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/public-address-of-meilisearch-on-sealos.png
deleted file mode 100644
index 1ce6576c94af..000000000000
Binary files a/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/public-address-of-meilisearch-on-sealos.png and /dev/null differ
diff --git a/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/scout-extension-on-flarum.jpg b/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/scout-extension-on-flarum.jpg
deleted file mode 100644
index 0db407e505b6..000000000000
Binary files a/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/scout-extension-on-flarum.jpg and /dev/null differ
diff --git a/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/star-history-of-meilisearch.png b/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/star-history-of-meilisearch.png
deleted file mode 100644
index df050313a35c..000000000000
Binary files a/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/star-history-of-meilisearch.png and /dev/null differ
diff --git a/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/update-meilisearch-on-sealos.png b/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/update-meilisearch-on-sealos.png
deleted file mode 100644
index ab02ae73f9e8..000000000000
Binary files a/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/images/update-meilisearch-on-sealos.png and /dev/null differ
diff --git a/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/index.md b/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/index.md
deleted file mode 100644
index 36f4cfb883cb..000000000000
--- a/docs/blog/zh-Hans/2024/how-to-deploy-and-configure-meilisearch-using-docker/index.md
+++ /dev/null
@@ -1,294 +0,0 @@
----
-slug: how-to-deploy-and-configure-meilisearch-using-docker
-title: "Elasticsearch 替代品 Meilisearch 安装和使用教程"
-description: 本教程探讨了 Meilisearch 的核心特性、安装配置过程，以及如何将其集成到实际应用中。
-authors: [Carson Yang]
-tags: [Developer Tools, Sealos, Meilisearch, Flarum]
-keywords: [Meilisearch, 搜索引擎, 搜索, 开源, Flarum, Elasticsearch 替代, 搜索引擎对比]
-image: ./images/feature.jpg
-date: 2024-07-01T10:00
----
-
-如今搜索功能已成为几乎所有应用不可或缺的一部分。无论是电商平台、内容管理系统，还是企业内部知识库，用户都期待能够快速、准确地找到他们需要的信息。然而，传统的搜索解决方案往往面临着诸多挑战：响应速度慢、相关性差、难以适应大规模数据、缺乏灵活性等。这些问题不仅影响用户体验，还可能导致用户流失，最终影响业务增长。
-
-为了解决这些问题，我们将为您介绍一款强大而灵活的开源搜索引擎 - [Meilisearch](https://www.meilisearch.com/)。作为一个使用 [Rust](https://www.rust-lang.org/) 语言编写的独立搜索引擎，Meilisearch 以其简单的部署流程、快速的查询响应和丰富的功能集而著称。您只需一个命令行二进制文件，就能运行 Meilisearch 服务器并开始查询，大大简化了搜索引擎的使用门槛。它不仅支持模糊匹配和无模式索引等先进特性，还提供了用于演示目的的 Web 前端界面。
-
-<!--truncate-->
-
-在本教程中，我们将深入探讨 Meilisearch 的核心优势和实际应用。我们将涵盖以下内容：
-
-+ Meilisearch 的核心特性和优势概述
-+ 如何安装和配置 Meilisearch
-+ Meilisearch 的基本使用方法
-+ 将 Meilisearch 集成到实际应用中（以 Flarum 论坛为例）
-+ Meilisearch 与其他搜索解决方案的比较
-
-## 先决条件
-
-在开始之前，请确保您具备以下条件：
-
-- 基本的命令行操作知识
-- 对 RESTful API 的基本理解
-- （可选）一个 [Sealos](https://sealos.run) 账户，用于快速部署 Meilisearch
-
-## Meilisearch 简介
-
-[Meilisearch](https://github.com/meilisearch/meilisearch) 是一个使用 **Rust 语言编写**的强大开源搜索引擎。它提供了闪电般快速的全文搜索功能，并且易于使用和集成。Meilisearch 的设计理念围绕着以下核心原则：
-
-1. **速度至上**：在任何规模的数据集上，都能在 50 毫秒内返回结果。
-2. **相关性优先**：通过智能排序算法，确保最相关的结果总是排在前面。
-3. **开发者友好**：提供直观的 API 和丰富的文档，大大降低了集成和使用的门槛。
-4. **高度可定制**：灵活的配置选项，允许开发者根据具体需求调整搜索行为。
-
-自 2018 年首次发布以来，Meilisearch 凭借其简单易用的特性和卓越的性能，迅速在开源社区中脱颖而出。目前，它在 GitHub 上已经获得了超过 40,000 颗星。
-
-![开源项目 Meilisearch 的 Star History](./images/star-history-of-meilisearch.png)
-
-## Meilisearch 的核心特性
-
-Meilisearch 提供了丰富多样的搜索功能，可以满足从个人项目到大型企业应用的各种需求。以下是其核心特性：
-
-### 搜索性能
-
-- **闪电般的速度**：无论数据集大小如何，都能在 50 毫秒内返回结果。
-- **即时搜索**：支持 "搜索即输入" (Search-as-you-type) 功能，提供实时反馈。
-- **拼写容错**：智能处理拼写错误，即使查询中存在错误也能返回相关结果。
-
-### 相关性优化
-
-- **自定义排序**：允许根据业务需求自定义搜索结果的排序规则。
-- **分面搜索**：支持多维度的结果过滤和导航。
-- **同义词管理**：可以设置同义词，提高搜索的灵活性。
-
-### 多语言支持
-
-- **多语言优化**：针对多种语言进行了优化，包括中文、日文等非拉丁语系。
-- **停用词处理**：可配置停用词列表，忽略对搜索结果影响不大的常见词。
-
-### 高级功能
-
-- **地理位置搜索**：支持基于地理位置的搜索和排序。
-- **多租户支持**：通过租户令牌实现数据隔离和访问控制。
-- **高亮显示**：在搜索结果中高亮显示匹配的文本。
-- **文档管理**：支持添加、更新和删除索引中的文档。
-
-### 开发者友好
-
-- **RESTful API**：提供简洁明了的 API，易于集成。
-- **多语言 SDK**：官方提供多种编程语言的 SDK。
-- **详细文档**：提供全面的文档和示例。
-- **可自托管**：支持在自己的基础设施上部署和管理。
-
-## Meilisearch vs. 其他搜索解决方案
-
-为了更直观地展示 Meilisearch 的优势，我们可以将其与市面上的其他主流搜索解决方案进行对比：
-
-| 特性         | Meilisearch    | Elasticsearch                | Algolia   |
-| ------------ | -------------- | ---------------------------- | --------- |
-| 响应速度     | <50ms          | 因环境和配置而异，通常>100ms | <100ms    |
-| 易用性       | 高             | 中                           | 高        |
-| 自动错误纠正 | 是             | 需配置                       | 是        |
-| 多语言支持   | 优秀           | 良好                         | 优秀      |
-| 地理位置搜索 | 支持           | 支持                         | 支持      |
-| 开源         | 是             | 是（部分功能闭源）           | 否        |
-| 定价         | 免费（自托管） | 免费（自托管），付费云服务   | 付费 SaaS |
-
-虽然 Elasticsearch 在功能全面性和生态系统方面略胜一筹，Algolia 则在云服务和开箱即用体验上有优势，但 Meilisearch 在速度、易用性和开源友好度上独树一帜。特别是对于中小型项目和希望完全控制搜索基础设施的团队来说，Meilisearch 提供了一个完美的平衡点。
-
-## Meilisearch 的安装和配置
-
-Meilisearch 的安装和使用相对简单，提供了多种安装方式以适应不同的环境和需求。
-
-对于没有技术背景的同学而言，你也不用担心安装问题，[Sealos 应用商店](https://sealos.run/docs/guides/templates/)提供了一键部署的应用模板，点一下鼠标即可完成部署，非常丝滑。
-
-**如果你想快速部署一个 Meilisearch，又不想陷入繁琐的安装和配置过程**，可以试试 Sealos。
-
-直接打开 [Meilisearch 应用模板](https://template.bja.sealos.run/deploy?templateName=meilisearch)，然后点击右上角的 “去 Sealos 部署”。
-
-> 如果您是第一次使用 [Sealos](https://sealos.run/)，则需要注册登录 Sealos 公有云账号，登录之后会立即跳转到模板的部署页面。
-
-这里有两个关键的环境变量需要特别注意一下，正确配置这些变量可以确保您的 Meilisearch 的安全和性能。
-
-1. **MEILI_ENV**：用于配置实例的环境，只能是 **production** 或 **development**。
-
-   production 模式：
-
-   - 禁用了搜索预览界面。
-
-   development 模式：
-
-   - 启用了搜索预览功能。
-
-2. **MEILI_MASTER_KEY**：用于设置 Meilisearch 的主密钥，它会自动保护除 `GET /health` 之外的所有路由。只有通过 API 密钥才能访问其他端点，包括搜索预览界面。
-
-   在 production 模式下：
-
-   - 提供主密钥是强制性的。
-   - 如果没有提供主密钥或密钥长度小于 16 字节，Meilisearch 将抛出错误并拒绝启动。
-
-   在 development 模式下：
-
-   - 提供主密钥是可选的。
-   - 如果没有提供主密钥，所有路由将不受保护且可公开访问。
-
-无论在哪种模式下，如果你没有提供主密钥或提供的密钥长度小于 16 字节，Meilisearch 都会建议你使用一个自动生成的主密钥。
-
-总结一下：**如果是 production 模式，则必须要提供主密钥；如果是 development 模式，则可以不提供主密钥。**
-
-密钥的生成非常简单，直接在 Linux 或者 macOS 终端里执行以下命令即可生成一个随机密钥：
-
-```bash
-openssl rand -base64 48
-```
-
-填好参数之后，点击右上角的 “部署应用” 开始部署。
-
-![Deploy Meilisearch on Sealos](./images/deploy-meilisearch-on-sealos.png)
-
-部署完成后，直接点击应用的 “详情” 进入该应用的详情页面。
-
-![Details of Meilisearch on Sealos](./images/details-of-meilisearch-on-sealos.png)
-
-等待应用状态变成 running 之后，直接点击外网地址便可打开 Meilisearch 的搜索预览界面。
-
-![Public address of Meilisearch on Sealos](./images/public-address-of-meilisearch-on-sealos.png)
-
-打开之后是这个样子的，输入你设置的密钥，就可以访问了。
-
-![Access Meilisearch on Sealos](./images/access-meilisearch-on-sealos.jpg)
-
-除此之外，还有另外一种打开方式，先刷新 Sealos 桌面 (也就是在 [cloud.sealos.run](https://cloud.sealos.run) 界面刷新浏览器)，然后你就会发现 Sealos 桌面多了个图标：
-
-![Meilisearch on Sealos Desktop](./images/meilisearch-on-sealos-desktop.jpg)
-
-直接点击这个图标就可以打开 Meilisearch 的搜索预览界面了。
-
-![Meilisearch on Sealos Desktop](./images/meilisearch-on-sealos-desktop-2.jpg)
-
-是不是有点似曾相识？没错，很像 **Windows 的快捷方式！**
-
-单机操作系统可以这么玩，Sealos 云操作系统当然也可以这么玩。
-
-## Meilisearch 的基本使用
-
-Meilisearch 提供了直观的 RESTful API，使得与各种编程语言和框架的集成变得非常简单。以下是一些基本操作示例：
-
-### 1. 创建索引
-
-```bash
-$ curl \
-  -X POST 'http://localhost:7700/indexes' \
-  -H 'Content-Type: application/json' \
-  -H 'Authorization: Bearer YOUR_API_KEY' \
-  --data-binary '{
-    "uid": "movies",
-    "primaryKey": "id"
-  }'
-```
-
-### 2. 添加文档
-
-```bash
-$ curl \
-  -X POST 'http://localhost:7700/indexes/movies/documents' \
-  -H 'Content-Type: application/json' \
-  -H 'Authorization: Bearer YOUR_API_KEY' \
-  --data-binary '[
-    {
-      "id": 1,
-      "title": "Carol",
-      "genres": ["Romance", "Drama"]
-    },
-    {
-      "id": 2,
-      "title": "Wonder Woman",
-      "genres": ["Action", "Adventure"]
-    }
-  ]'
-```
-
-### 3. 搜索文档
-
-```bash
-$ curl \
-  -X POST 'http://localhost:7700/indexes/movies/search' \
-  -H 'Content-Type: application/json' \
-  -H 'Authorization: Bearer YOUR_API_KEY' \
-  --data-binary '{
-    "q": "wonder"
-  }'
-```
-
-## 将 Meilisearch 集成到 Flarum 论坛
-
-为了展示 Meilisearch 在实际应用中的强大功能，我们将以 Flarum 论坛为例，演示如何接入 Meilisearch 来提升搜索能力。
-
-> 关于 Flarum 的安装和使用方法，可参考我们之前写的文章：[Flarum 安装和使用教程](https://zhuanlan.zhihu.com/p/703201822)
-
-### 1. 安装 Meilisearch SDK
-
-在 Flarum 应用详情界面，点击右下角的终端按钮：
-
-![在 Sealos 中打开 Meilisearch 应用终端](./images/open-meilisearch-terminal-on-sealos.jpg)
-
-在打开的终端中执行以下命令安装 Meilisearch SDK：
-
-```bash
-extension require meilisearch/meilisearch-php
-```
-
-### 2. 安装 Scout Search 扩展
-
-和上面一样，在 Flarum 容器终端中执行以下命令安装 Scout Search 扩展：
-
-```bash
-extension require clarkwinkelmann/flarum-ext-scout
-```
-
-### 3. 启用 Scout 扩展
-
-在 Flarum 管理后台中启用 Scout 扩展，并选择 Meilisearch 作为搜索引擎，index 名称可写可不写。
-
-![Flarum admin panel](./images/flarum-admin-panel.jpg)
-
-下面还需要配置 Meilisearch 的 URL 和密钥。
-
-![Scout extension on flarum](./images/scout-extension-on-flarum.jpg)
-
-如果你的 Meilisearch 和 Flarum 部署在同一个 Sealos 可用区，那么可以直接使用 Meilisearch 的内网地址，进入 Meilisearch 的应用详情页面，点击内网地址便可复制 Meilisearch 的内网地址，然后作为上面 Scout 插件 Meilisearch Host 的值粘贴进去即可。
-
-![Meilisearch private address on Sealos](./images/meilisearch-private-address-on-sealos.jpg)
-
-### 4. 增加 Meilisearch 内存
-
-Sealos 中部署的 Meilisearch 默认只给了 128M 内存，如果要接入 Flarum，这个内存是不够用的，需要调整到 1G 才够用。操作方法如下：
-
-进入 Meilisearch 的应用详情页面，点击右上角的 “变更”：
-
-![Update Meilisearch on Sealos](./images/update-meilisearch-on-sealos.png)
-
-将内存调整到 1G，然后点击右上角的 “变更” 即可。
-
-![Change Meilisearch memory on Sealos](./images/change-meilisearch-mem-on-sealos.jpg)
-
-### 5. 导入 Meilisearch 索引
-
-使用以下命令将现有数据导入 Meilisearch 索引：
-
-```bash
-php flarum scout:import-all
-```
-
-下面这种结果就是导入成功了：
-
-![Import flarum index to Meilisearch](./images/import-flarum-index-to-meilisearch.png)
-
-最后来测试一下中文搜索功能：
-
-![Flarum integrate Meilisearch](./images/flarum-integrate-meilisearch.jpg)
-
-## 总结
-
-Meilisearch 为开发者提供了一个强大而灵活的搜索解决方案，特别适合那些需要快速、相关且易于实现的搜索功能的应用。通过本教程，我们探讨了 Meilisearch 的核心特性、安装配置过程，以及如何将其集成到实际应用中。
-
-我们鼓励您进一步探索 Meilisearch 的高级功能，如自定义排名规则、同义词设置等，以充分发挥其潜力。同时，关注 Meilisearch 的官方文档和社区更新，以获取最新的功能和最佳实践。
\ No newline at end of file
diff --git a/docs/blog/zh-Hans/2024/how-to-set-up-affine/images/AFFINE-console.png b/docs/blog/zh-Hans/2024/how-to-set-up-affine/images/AFFINE-console.png
deleted file mode 100644
index e82958216382..000000000000
Binary files a/docs/blog/zh-Hans/2024/how-to-set-up-affine/images/AFFINE-console.png and /dev/null differ
diff --git a/docs/blog/zh-Hans/2024/how-to-set-up-affine/images/AFFINE-console2.png b/docs/blog/zh-Hans/2024/how-to-set-up-affine/images/AFFINE-console2.png
deleted file mode 100644
index dcb1c5a2143d..000000000000
Binary files a/docs/blog/zh-Hans/2024/how-to-set-up-affine/images/AFFINE-console2.png and /dev/null differ
diff --git a/docs/blog/zh-Hans/2024/how-to-set-up-affine/images/AFFINE-details.png b/docs/blog/zh-Hans/2024/how-to-set-up-affine/images/AFFINE-details.png
deleted file mode 100644
index 7059e69d704c..000000000000
Binary files a/docs/blog/zh-Hans/2024/how-to-set-up-affine/images/AFFINE-details.png and /dev/null differ
diff --git a/docs/blog/zh-Hans/2024/how-to-set-up-affine/images/AFFINE-logs.png b/docs/blog/zh-Hans/2024/how-to-set-up-affine/images/AFFINE-logs.png
deleted file mode 100644
index 82ffc3110928..000000000000
Binary files a/docs/blog/zh-Hans/2024/how-to-set-up-affine/images/AFFINE-logs.png and /dev/null differ
diff --git a/docs/blog/zh-Hans/2024/how-to-set-up-affine/images/AFFINE-on-sealos.png b/docs/blog/zh-Hans/2024/how-to-set-up-affine/images/AFFINE-on-sealos.png
deleted file mode 100644
index 8164c91c8380..000000000000
Binary files a/docs/blog/zh-Hans/2024/how-to-set-up-affine/images/AFFINE-on-sealos.png and /dev/null differ
diff --git a/docs/blog/zh-Hans/2024/how-to-set-up-affine/images/AFFINE-on-sealos2.png b/docs/blog/zh-Hans/2024/how-to-set-up-affine/images/AFFINE-on-sealos2.png
deleted file mode 100644
index 98af4a97cbac..000000000000
Binary files a/docs/blog/zh-Hans/2024/how-to-set-up-affine/images/AFFINE-on-sealos2.png and /dev/null differ
diff --git a/docs/blog/zh-Hans/2024/how-to-set-up-affine/images/AFFINE-whiteboard.png b/docs/blog/zh-Hans/2024/how-to-set-up-affine/images/AFFINE-whiteboard.png
deleted file mode 100644
index dcc99fe0837b..000000000000
Binary files a/docs/blog/zh-Hans/2024/how-to-set-up-affine/images/AFFINE-whiteboard.png and /dev/null differ
diff --git a/docs/blog/zh-Hans/2024/how-to-set-up-affine/images/AFFINE-workspace.png b/docs/blog/zh-Hans/2024/how-to-set-up-affine/images/AFFINE-workspace.png
deleted file mode 100644
index f40ff9204f47..000000000000
Binary files a/docs/blog/zh-Hans/2024/how-to-set-up-affine/images/AFFINE-workspace.png and /dev/null differ
diff --git a/docs/blog/zh-Hans/2024/how-to-set-up-affine/images/AFFINE.jpg b/docs/blog/zh-Hans/2024/how-to-set-up-affine/images/AFFINE.jpg
deleted file mode 100644
index 8fea1fd20f14..000000000000
Binary files a/docs/blog/zh-Hans/2024/how-to-set-up-affine/images/AFFINE.jpg and /dev/null differ
diff --git a/docs/blog/zh-Hans/2024/how-to-set-up-affine/index.md b/docs/blog/zh-Hans/2024/how-to-set-up-affine/index.md
deleted file mode 100644
index 66927c6f5975..000000000000
--- a/docs/blog/zh-Hans/2024/how-to-set-up-affine/index.md
+++ /dev/null
@@ -1,84 +0,0 @@
----
-slug: how-to-set-up-affine
-title: Notion 开源替代品 AFFINE 部署和使用教程
-description: 本文介绍了开源知识库管理工具 AFFINE 的私有化部署和使用。
-authors: [Carson Yang]
-tags: [Notes, Sealos, Wiki]
-keywords: [AFFINE, Sealos, Notion, Notes, Wiki, whiteboard]
-image: images/feature.jpg
-date: 2024-04-07T10:00
----
-
-AFFiNE 是一款完全开源的 Notion + Miro 替代品，与 Notion 相比，AFFiNE 更注重隐私安全，优先将笔记内容保存到本地。
-
-<!--truncate-->
-
-GitHub 地址：[https://github.com/toeverything/AFFiNE](https://github.com/toeverything/AFFiNE)
-
-AFFiNE 使用 Rust 和 Typescript 构建，只需要一个命令即可运行整个项目，AFFiNE 以最简单的方式给了所有开发者最大的想象力。
-
-与专注于白板和页面的 Miro 和 Notion 不同，AFFiNE 将其定位定义为一体化的 KnowledgeOS。它支持看板、表格和富文本段落作为构建块来形成页面或白板，可以在这里进行文档编辑、数据处理或头脑风暴等综合处理。
-
-![](./images/AFFINE.jpg)
-
-## AFFiNE 的特性
-
-### 文档与白板融为一体
-
-许多编辑应用声称自己是提高生产力的画布，但 AFFiNE 是为数不多的几款可以让你在无边界画布上放置任何构建块的应用之一 -- 富文本、便签、任何嵌入的网页、多视图数据库、链接页面甚至幻灯片。
-
-每个页面都有 2 个视图，你可以在任何地方以任何形式访问和编辑功能齐全的块。
-
-![](./images/AFFINE-whiteboard.png)
-
-### 多模态 AI copilot
-
-无论是撰写专业的工作报告，还是将大纲转化为富有表现力的幻灯片，亦或是将文章总结为结构良好的思维导图，又或者……只需一个提示，即可直接绘制和编写原型应用和网页，AFFiNE AI 都可以做到。
-
-### 本地优先 & 实时协作
-
-AFFiNE 遵从本地优先的理念，强调数据的私有性，你完全可以不用它的云服务，自己进行同步。用户有了更多的选择权。
-
-![](./images/AFFINE-workspace.png)
-
-### 私有化部署
-
-用户可以随意分叉和构建自定义的 AFFiNE，也可以私有化部署。未来还会推出插件社区和第三方模块。
-
-## 私有化部署 AFFiNE
-
-AFFiNE 的私有化部署依赖 PostgreSQL 和 Redis 数据库，部署起来比较复杂。[Sealos 的应用商店](https://sealos.run/docs/guides/templates/)提供了一键部署的应用模板，点一下鼠标即可完成部署，非常丝滑。
-
-直接打开这个链接：
-
-[![](https://cdn.jsdelivr.net/gh/labring-actions/templates@main/Deploy-on-Sealos.svg)](https://bja.sealos.run/?openapp=system-template%3FtemplateName%3Daffine)
-
-接下来你只需要设置一下管理员的邮箱（AFFINE_ADMIN_EMAIL）和密码（AFFINE_ADMIN_PASSWORD），然后点击右上角的「去 Sealos 部署」。
-
-> 如果您是第一次使用 [Sealos](https://sealos.run)，则需要注册登录 Sealos 公有云账号，登录之后会立即跳转到模板的部署页面。
-
-跳转进来之后，点击右上角的「部署应用」开始部署，部署完成后，直接点击应用的「详情」进入该应用的详情页面。
-
-![](./images/AFFINE-on-sealos.png)
-
-等待实例的状态变成 running 后，点击日志图标查看日志：
-
-![](./images/AFFINE-on-sealos2.png)
-
-如果出现了下面的日志，就说明启动成功了：
-
-![](./images/AFFINE-logs.png)
-
-这时点击外网地址即可打开 AFFINE 的可视化界面：
-
-![](./images/AFFINE-details.png)
-
-打开之后，默认使用的是本地浏览器存储。如果想登录我们自己部署的云服务，需要点击右上角的「登录并启用」：
-
-![](./images/AFFINE-console.png)
-
-登录之后，还要再点击「启用 AFFINE Cloud 服务」，不然数据还是继续存储在本地浏览器中，容易丢失：
-
-![](./images/AFFINE-console2.png)
-
-启用之后，我们就可以愉快地使用 AFFINE 啦。
\ No newline at end of file
diff --git a/docs/blog/zh-Hans/authors.yml b/docs/blog/zh-Hans/authors.yml
deleted file mode 100644
index 1a9418e77f73..000000000000
--- a/docs/blog/zh-Hans/authors.yml
+++ /dev/null
@@ -1,18 +0,0 @@
-fanux:
-  name: fanux
-  title: '@sealos'
-  url: https://github.com/fanux
-  image_url: https://avatars.githubusercontent.com/u/8912557?v=4
-
-xiao-jay:
-  name: xiao-jay
-  title: '@sealos'
-  url: https://github.com/xiao-jay
-  image_url: https://avatars.githubusercontent.com/u/87080562?v=4
-
-Carson Yang:
-  name: Carson Yang
-  title: '@sealos'
-  url: https://github.com/yangchuansheng
-  image_url: https://avatars.githubusercontent.com/u/15308462?v=4
-
diff --git a/docs/blog/zh-Hans/options.json b/docs/blog/zh-Hans/options.json
deleted file mode 100644
index c57e381cb31e..000000000000
--- a/docs/blog/zh-Hans/options.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "title": {
-    "message": "博客",
-    "description": "The title for the blog used in SEO"
-  },
-  "description": {
-    "message": "Sealos 云操作系统正式发布！",
-    "description": "The description for the blog used in SEO"
-  },
-  "sidebar.title": {
-    "message": "最近的博客",
-    "description": "The label for the left sidebar"
-  }
-}
\ No newline at end of file
diff --git a/docs/website/docusaurus.config.js b/docs/website/docusaurus.config.js
index 94d64fb35278..3a12ff3ab07c 100644
--- a/docs/website/docusaurus.config.js
+++ b/docs/website/docusaurus.config.js
@@ -75,32 +75,34 @@ const config = {
 
   themeConfig: { // @type {import('@docusaurus/preset-classic').ThemeConfig}
     metadata: [{ name: 'title', content: 'Sealos by 环界云' }],
-    announcementBar: {
-      id: 'sealos_tip',
-      content: `
-      <div class="sealos-banner-box">
-        <div>${isDomesticSite ? 'If you are an international user, please visit 👉' : '如果您是国内用户，请直接访问 👉 '}</div>
-        <div class="sealos-banner-btn" onclick="window.open('${isDomesticSite ? 'https://sealos.io' : 'https://sealos.run'}', '_blank');">
-          ${isDomesticSite ? 'International Site' : '国内官网'}
+    ...(isDomesticSite ? {} : {
+      announcementBar: {
+        id: 'sealos_tip',
+        content: `
+        <div class="sealos-banner-box">
+          <div>如果您是国内用户，请直接访问 👉 </div>
+          <div class="sealos-banner-btn" onclick="window.open('https://sealos.run', '_blank');">
+            国内官网
+          </div>
+          <svg 
+            onclick="handleBannerClose()"
+            width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g clip-path="url(#clip0_1145_366)">
+              <path d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22Z" fill="white" fill-opacity="0.16"/>
+              <path d="M12 21.75C6.61507 21.75 2.25 17.3849 2.25 12C2.25 6.61507 6.61507 2.25 12 2.25C17.3849 2.25 21.75 6.61507 21.75 12C21.75 17.3849 17.3849 21.75 12 21.75Z" stroke="white" stroke-opacity="0.1" stroke-width="0.5"/>
+              <path d="M9.17184 7.75696L11.9998 10.586L14.8278 7.75696L16.2428 9.17196L13.4138 12L16.2428 14.828L14.8278 16.243L11.9998 13.414L9.17184 16.243L7.75684 14.828L10.5858 12L7.75684 9.17196L9.17184 7.75696Z" fill="white"/>
+            </g>
+            <defs>
+              <clipPath id="clip0_1145_366">
+                <rect width="24" height="24" fill="white"/>
+              </clipPath>
+            </defs>
+          </svg>
         </div>
-        <svg 
-          onclick="handleBannerClose()"
-          width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <g clip-path="url(#clip0_1145_366)">
-            <path d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22Z" fill="white" fill-opacity="0.16"/>
-            <path d="M12 21.75C6.61507 21.75 2.25 17.3849 2.25 12C2.25 6.61507 6.61507 2.25 12 2.25C17.3849 2.25 21.75 6.61507 21.75 12C21.75 17.3849 17.3849 21.75 12 21.75Z" stroke="white" stroke-opacity="0.1" stroke-width="0.5"/>
-            <path d="M9.17184 7.75696L11.9998 10.586L14.8278 7.75696L16.2428 9.17196L13.4138 12L16.2428 14.828L14.8278 16.243L11.9998 13.414L9.17184 16.243L7.75684 14.828L10.5858 12L7.75684 9.17196L9.17184 7.75696Z" fill="white"/>
-          </g>
-          <defs>
-            <clipPath id="clip0_1145_366">
-              <rect width="24" height="24" fill="white"/>
-            </clipPath>
-          </defs>
-        </svg>
-      </div>
-      `,
-      isCloseable: true,
-    },
+        `,
+        isCloseable: true,
+      }
+    }),
     algolia: {
       // Algolia 提供的应用 ID
       appId: "SLTSB7B9Y0",
diff --git a/docs/website/package-lock.json b/docs/website/package-lock.json
new file mode 100644
index 000000000000..cca3c3f30d10
--- /dev/null
+++ b/docs/website/package-lock.json
@@ -0,0 +1,14317 @@
+{
+  "name": "sealos-site",
+  "version": "5.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "sealos-site",
+      "version": "5.0.0",
+      "dependencies": {
+        "@docusaurus/core": "^2.4.3",
+        "@docusaurus/preset-classic": "^2.4.3",
+        "@docusaurus/theme-search-algolia": "^2.4.3",
+        "@headlessui/react": "^1.7.17",
+        "@mdx-js/react": "^1.6.22",
+        "autoprefixer": "^10.4.16",
+        "docusaurus-plugin-sass": "^0.2.2",
+        "dotenv": "^16.3.1",
+        "postcss": "^8.4.31",
+        "prism-react-renderer": "^1.3.5",
+        "prismjs": "^1.29.0",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
+        "react-helmet": "^6.1.0",
+        "sass": "^1.62.1",
+        "tailwindcss": "^3.3.3",
+        "wowjs": "^1.1.3"
+      },
+      "devDependencies": {
+        "@docusaurus/module-type-aliases": "^2.4.3",
+        "@tsconfig/docusaurus": "^1.0.6",
+        "babel-plugin-prismjs": "^2.1.0",
+        "typescript": "^5.0.4"
+      }
+    },
+    "node_modules/@algolia/autocomplete-core": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.8.2.tgz",
+      "integrity": "sha512-mTeshsyFhAqw/ebqNsQpMtbnjr+qVOSKXArEj4K0d7sqc8It1XD0gkASwecm9mF/jlOQ4Z9RNg1HbdA8JPdRwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/autocomplete-shared": "1.8.2"
+      }
+    },
+    "node_modules/@algolia/autocomplete-preset-algolia": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.8.2.tgz",
+      "integrity": "sha512-J0oTx4me6ZM9kIKPuL3lyU3aB8DEvpVvR6xWmHVROx5rOYJGQcZsdG4ozxwcOyiiu3qxMkIbzntnV1S1VWD8yA==",
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/autocomplete-shared": "1.8.2"
+      },
+      "peerDependencies": {
+        "@algolia/client-search": ">= 4.9.1 < 6",
+        "algoliasearch": ">= 4.9.1 < 6"
+      }
+    },
+    "node_modules/@algolia/autocomplete-shared": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-shared/-/autocomplete-shared-1.8.2.tgz",
+      "integrity": "sha512-b6Z/X4MczChMcfhk6kfRmBzPgjoPzuS9KGR4AFsiLulLNRAAqhP+xZTKtMnZGhLuc61I20d5WqlId02AZvcO6g==",
+      "license": "MIT"
+    },
+    "node_modules/@algolia/cache-browser-local-storage": {
+      "version": "4.17.1",
+      "resolved": "https://registry.npmjs.org/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.17.1.tgz",
+      "integrity": "sha512-e91Jpu93X3t3mVdQwF3ZDjSFMFIfzSc+I76G4EX8nl9RYXgqcjframoL05VTjcD2YCsI18RIHAWVCBoCXVZnrw==",
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/cache-common": "4.17.1"
+      }
+    },
+    "node_modules/@algolia/cache-common": {
+      "version": "4.17.1",
+      "resolved": "https://registry.npmjs.org/@algolia/cache-common/-/cache-common-4.17.1.tgz",
+      "integrity": "sha512-fvi1WT8aSiGAKrcTw8Qg3RYgcwW8GZMHcqEm4AyDBEy72JZlFBSY80cTQ75MslINjCHXLDT+9EN8AGI9WVY7uA==",
+      "license": "MIT"
+    },
+    "node_modules/@algolia/cache-in-memory": {
+      "version": "4.17.1",
+      "resolved": "https://registry.npmjs.org/@algolia/cache-in-memory/-/cache-in-memory-4.17.1.tgz",
+      "integrity": "sha512-NbBt6eBWlsXc5geSpfPRC5dkIB/0Ptthw8r0yM5Z7D3sPlYdnTZSO9y9XWXIptRMwmZe4cM8iBMN8y0tzbcBkA==",
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/cache-common": "4.17.1"
+      }
+    },
+    "node_modules/@algolia/client-account": {
+      "version": "4.17.1",
+      "resolved": "https://registry.npmjs.org/@algolia/client-account/-/client-account-4.17.1.tgz",
+      "integrity": "sha512-3rL/6ofJvyL+q8TiWM3qoM9tig+SY4gB1Vbsj+UeJPnJm8Khm+7OS+r+mFraqR6pTehYqN8yGYoE7x4diEn4aA==",
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/client-common": "4.17.1",
+        "@algolia/client-search": "4.17.1",
+        "@algolia/transporter": "4.17.1"
+      }
+    },
+    "node_modules/@algolia/client-account/node_modules/@algolia/client-common": {
+      "version": "4.17.1",
+      "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.17.1.tgz",
+      "integrity": "sha512-+r7kg4EgbFnGsDnoGSVNtXZO8xvZ0vzf1WAOV7sqV9PMf1bp6cpJP/3IuPrSk4t5w2KVl+pC8jfTM7HcFlfBEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/requester-common": "4.17.1",
+        "@algolia/transporter": "4.17.1"
+      }
+    },
+    "node_modules/@algolia/client-account/node_modules/@algolia/client-search": {
+      "version": "4.17.1",
+      "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.17.1.tgz",
+      "integrity": "sha512-Q5YfT5gVkx60PZDQBqp/zH9aUbBdC7HVvxupiHUgnCKqRQsRZjOhLest7AI6FahepuZLBZS62COrO7v+JvKY7w==",
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/client-common": "4.17.1",
+        "@algolia/requester-common": "4.17.1",
+        "@algolia/transporter": "4.17.1"
+      }
+    },
+    "node_modules/@algolia/client-analytics": {
+      "version": "4.17.1",
+      "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-4.17.1.tgz",
+      "integrity": "sha512-Bepr2w249vODqeBtM7i++tPmUsQ9B81aupUGbDWmjA/FX+jzQqOdhW8w1CFO5kWViNKTbz2WBIJ9U3x8hOa4bA==",
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/client-common": "4.17.1",
+        "@algolia/client-search": "4.17.1",
+        "@algolia/requester-common": "4.17.1",
+        "@algolia/transporter": "4.17.1"
+      }
+    },
+    "node_modules/@algolia/client-analytics/node_modules/@algolia/client-common": {
+      "version": "4.17.1",
+      "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.17.1.tgz",
+      "integrity": "sha512-+r7kg4EgbFnGsDnoGSVNtXZO8xvZ0vzf1WAOV7sqV9PMf1bp6cpJP/3IuPrSk4t5w2KVl+pC8jfTM7HcFlfBEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/requester-common": "4.17.1",
+        "@algolia/transporter": "4.17.1"
+      }
+    },
+    "node_modules/@algolia/client-analytics/node_modules/@algolia/client-search": {
+      "version": "4.17.1",
+      "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.17.1.tgz",
+      "integrity": "sha512-Q5YfT5gVkx60PZDQBqp/zH9aUbBdC7HVvxupiHUgnCKqRQsRZjOhLest7AI6FahepuZLBZS62COrO7v+JvKY7w==",
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/client-common": "4.17.1",
+        "@algolia/requester-common": "4.17.1",
+        "@algolia/transporter": "4.17.1"
+      }
+    },
+    "node_modules/@algolia/client-common": {
+      "version": "5.18.0",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/@algolia/client-personalization": {
+      "version": "4.17.1",
+      "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-4.17.1.tgz",
+      "integrity": "sha512-gJku9DG/THJpfsSlG/az0a3QIn+VVff9kKh8PG8+7ZfxOHS+C+Y5YSeZVsC+c2cfoKLPo3CuHIiJ/p86erR3bA==",
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/client-common": "4.17.1",
+        "@algolia/requester-common": "4.17.1",
+        "@algolia/transporter": "4.17.1"
+      }
+    },
+    "node_modules/@algolia/client-personalization/node_modules/@algolia/client-common": {
+      "version": "4.17.1",
+      "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.17.1.tgz",
+      "integrity": "sha512-+r7kg4EgbFnGsDnoGSVNtXZO8xvZ0vzf1WAOV7sqV9PMf1bp6cpJP/3IuPrSk4t5w2KVl+pC8jfTM7HcFlfBEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/requester-common": "4.17.1",
+        "@algolia/transporter": "4.17.1"
+      }
+    },
+    "node_modules/@algolia/client-search": {
+      "version": "5.18.0",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@algolia/client-common": "5.18.0",
+        "@algolia/requester-browser-xhr": "5.18.0",
+        "@algolia/requester-fetch": "5.18.0",
+        "@algolia/requester-node-http": "5.18.0"
+      },
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/@algolia/events": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@algolia/events/-/events-4.0.1.tgz",
+      "integrity": "sha512-FQzvOCgoFXAbf5Y6mYozw2aj5KCJoA3m4heImceldzPSMbdyS4atVjJzXKMsfX3wnZTFYwkkt8/z8UesLHlSBQ==",
+      "license": "MIT"
+    },
+    "node_modules/@algolia/logger-common": {
+      "version": "4.17.1",
+      "resolved": "https://registry.npmjs.org/@algolia/logger-common/-/logger-common-4.17.1.tgz",
+      "integrity": "sha512-Us28Ot+fLEmX9M96sa65VZ8EyEEzhYPxfhV9aQyKDjfXbUdJlJxKt6wZpoEg9RAPSdO8IjK9nmuW2P8au3rRsg==",
+      "license": "MIT"
+    },
+    "node_modules/@algolia/logger-console": {
+      "version": "4.17.1",
+      "resolved": "https://registry.npmjs.org/@algolia/logger-console/-/logger-console-4.17.1.tgz",
+      "integrity": "sha512-iKGQTpOjHiE64W3JIOu6dmDvn+AfYIElI9jf/Nt6umRPmP/JI9rK+OHUoW4pKrBtdG0DPd62ppeNXzSnLxY6/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/logger-common": "4.17.1"
+      }
+    },
+    "node_modules/@algolia/requester-browser-xhr": {
+      "version": "5.18.0",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@algolia/client-common": "5.18.0"
+      },
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/@algolia/requester-common": {
+      "version": "4.17.1",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-common/-/requester-common-4.17.1.tgz",
+      "integrity": "sha512-HggXdjvVFQR0I5l7hM5WdHgQ1tqcRWeyXZz8apQ7zPWZhirmY2E9D6LVhDh/UnWQNEm7nBtM+eMFONJ3bZccIQ==",
+      "license": "MIT"
+    },
+    "node_modules/@algolia/requester-fetch": {
+      "version": "5.18.0",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@algolia/client-common": "5.18.0"
+      },
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/@algolia/requester-node-http": {
+      "version": "5.18.0",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@algolia/client-common": "5.18.0"
+      },
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/@algolia/transporter": {
+      "version": "4.17.1",
+      "resolved": "https://registry.npmjs.org/@algolia/transporter/-/transporter-4.17.1.tgz",
+      "integrity": "sha512-ZM+qhX47Vh46mWH8/U9ihvy98HdTYpYQDSlqBD7IbiUbbyoCMke+qmdSX2MGhR2FCcXBSxejsJKKVAfbpaLVgg==",
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/cache-common": "4.17.1",
+        "@algolia/logger-common": "4.17.1",
+        "@algolia/requester-common": "4.17.1"
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmmirror.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@ampproject/remapping": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
+      "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.21.4",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.21.4.tgz",
+      "integrity": "sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/highlight": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.3.tgz",
+      "integrity": "sha512-aNtko9OPOwVESUFp3MZfD8Uzxl7JzSeJpd7npIoxCasU37PFbAQRpKglkaKwlHOyeJdrREpo8TW8ldrkYWwvIQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.22.1",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.22.1.tgz",
+      "integrity": "sha512-Hkqu7J4ynysSXxmAahpN1jjRwVJ+NdpraFLIWflgjpVob3KNyK3/tIUc7Q7szed8WMp0JNa7Qtd1E9Oo22F9gA==",
+      "license": "MIT",
+      "dependencies": {
+        "@ampproject/remapping": "^2.2.0",
+        "@babel/code-frame": "^7.21.4",
+        "@babel/generator": "^7.22.0",
+        "@babel/helper-compilation-targets": "^7.22.1",
+        "@babel/helper-module-transforms": "^7.22.1",
+        "@babel/helpers": "^7.22.0",
+        "@babel/parser": "^7.22.0",
+        "@babel/template": "^7.21.9",
+        "@babel/traverse": "^7.22.1",
+        "@babel/types": "^7.22.0",
+        "convert-source-map": "^1.7.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.2",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/core/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.3.tgz",
+      "integrity": "sha512-C17MW4wlk//ES/CJDL51kPNwl+qiBQyN7b9SKyVp11BLGFeSPoVaHrv+MNt8jwQFhQWowW88z1eeBx3pFz9v8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.22.3",
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "@jridgewell/trace-mapping": "^0.3.17",
+        "jsesc": "^2.5.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-annotate-as-pure": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz",
+      "integrity": "sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-builder-binary-assignment-operator-visitor": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.22.3.tgz",
+      "integrity": "sha512-ahEoxgqNoYXm0k22TvOke48i1PkavGu0qGCmcq9ugi6gnmvKNaMjKBSrZTnWUi1CFEeNAUiVba0Wtzm03aSkJg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.22.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.22.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.1.tgz",
+      "integrity": "sha512-Rqx13UM3yVB5q0D/KwQ8+SPfX/+Rnsy1Lw1k/UwOC4KC6qrzIQoY3lYnBu5EHKBlEHHcj0M0W8ltPSkD8rqfsQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.22.0",
+        "@babel/helper-validator-option": "^7.21.0",
+        "browserslist": "^4.21.3",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-create-class-features-plugin": {
+      "version": "7.22.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.1.tgz",
+      "integrity": "sha512-SowrZ9BWzYFgzUMwUmowbPSGu6CXL5MSuuCkG3bejahSpSymioPmuLdhPxNOc9MjuNGjy7M/HaXvJ8G82Lywlw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-environment-visitor": "^7.22.1",
+        "@babel/helper-function-name": "^7.21.0",
+        "@babel/helper-member-expression-to-functions": "^7.22.0",
+        "@babel/helper-optimise-call-expression": "^7.18.6",
+        "@babel/helper-replace-supers": "^7.22.1",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
+        "@babel/helper-split-export-declaration": "^7.18.6",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-create-class-features-plugin/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-create-regexp-features-plugin": {
+      "version": "7.22.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.22.1.tgz",
+      "integrity": "sha512-WWjdnfR3LPIe+0EY8td7WmjhytxXtjKAEpnAxun/hkNiyOaPlvGK+NZaBFIdi9ndYV3Gav7BpFvtUwnaJlwi1w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "regexpu-core": "^5.3.1",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-create-regexp-features-plugin/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-define-polyfill-provider": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.0.tgz",
+      "integrity": "sha512-RnanLx5ETe6aybRi1cO/edaRH+bNYWaryCEmjDDYyNr4wnSzyOp8T0dWipmqVHKEY3AbVKUom50AKSlj1zmKbg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-compilation-targets": "^7.17.7",
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "debug": "^4.1.1",
+        "lodash.debounce": "^4.0.8",
+        "resolve": "^1.14.2",
+        "semver": "^6.1.2"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0-0"
+      }
+    },
+    "node_modules/@babel/helper-define-polyfill-provider/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-environment-visitor": {
+      "version": "7.22.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.1.tgz",
+      "integrity": "sha512-Z2tgopurB/kTbidvzeBrc2To3PUP/9i5MUe+fU6QJCQDyPwSH2oRapkLw3KGECDYSjhQZCNxEvNvZlLw8JjGwA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-function-name": {
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.21.0.tgz",
+      "integrity": "sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.20.7",
+        "@babel/types": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-hoist-variables": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz",
+      "integrity": "sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-member-expression-to-functions": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.22.3.tgz",
+      "integrity": "sha512-Gl7sK04b/2WOb6OPVeNy9eFKeD3L6++CzL3ykPOWqTn08xgYYK0wz4TUh2feIImDXxcVW3/9WQ1NMKY66/jfZA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.22.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.21.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.21.4.tgz",
+      "integrity": "sha512-orajc5T2PsRYUN3ZryCEFeMDYwyw09c/pZeaQEZPH0MpKzSvn3e0uXsDBu3k03VI+9DBiRo+l22BfKTpKwa/Wg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.21.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.22.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.22.1.tgz",
+      "integrity": "sha512-dxAe9E7ySDGbQdCVOY/4+UcD8M9ZFqZcZhSPsPacvCG4M+9lwtDDQfI2EoaSvmf7W/8yCBkGU0m7Pvt1ru3UZw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-environment-visitor": "^7.22.1",
+        "@babel/helper-module-imports": "^7.21.4",
+        "@babel/helper-simple-access": "^7.21.5",
+        "@babel/helper-split-export-declaration": "^7.18.6",
+        "@babel/helper-validator-identifier": "^7.19.1",
+        "@babel/template": "^7.21.9",
+        "@babel/traverse": "^7.22.1",
+        "@babel/types": "^7.22.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-optimise-call-expression": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.18.6.tgz",
+      "integrity": "sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.21.5.tgz",
+      "integrity": "sha512-0WDaIlXKOX/3KfBK/dwP1oQGiPh6rjMkT7HIRv7i5RR2VUMwrx5ZL0dwBkKx7+SW1zwNdgjHd34IMk5ZjTeHVg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-remap-async-to-generator": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.18.9.tgz",
+      "integrity": "sha512-dI7q50YKd8BAv3VEfgg7PS7yD3Rtbi2J1XMXaalXO0W0164hYLnh8zpjRS0mte9MfVp/tltvr/cfdXPvJr1opA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-wrap-function": "^7.18.9",
+        "@babel/types": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-replace-supers": {
+      "version": "7.22.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.22.1.tgz",
+      "integrity": "sha512-ut4qrkE4AuSfrwHSps51ekR1ZY/ygrP1tp0WFm8oVq6nzc/hvfV/22JylndIbsf2U2M9LOMwiSddr6y+78j+OQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-environment-visitor": "^7.22.1",
+        "@babel/helper-member-expression-to-functions": "^7.22.0",
+        "@babel/helper-optimise-call-expression": "^7.18.6",
+        "@babel/template": "^7.21.9",
+        "@babel/traverse": "^7.22.1",
+        "@babel/types": "^7.22.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-simple-access": {
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.21.5.tgz",
+      "integrity": "sha512-ENPDAMC1wAjR0uaCUwliBdiSl1KBJAVnMTzXqi64c2MG8MPR6ii4qf7bSXDqSFbr4W6W028/rf5ivoHop5/mkg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.21.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.20.0.tgz",
+      "integrity": "sha512-5y1JYeNKfvnT8sZcK9DVRtpTbGiomYIHviSP3OQWmDPU3DeH4a1ZlT/N2lyQ5P8egjcRaT/Y9aNqUxK0WsnIIg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.20.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-split-export-declaration": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz",
+      "integrity": "sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.21.5.tgz",
+      "integrity": "sha512-5pTUx3hAJaZIdW99sJ6ZUUgWq/Y+Hja7TowEnLNMm1VivRgZQL3vpBY3qUACVsvw+yQU6+YgfBVmcbLaZtrA1w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.19.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz",
+      "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.21.0.tgz",
+      "integrity": "sha512-rmL/B8/f0mKS2baE9ZpyTcTavvEuWhTTW8amjzXNvYG4AwBsqTLikfXsEofsJEfKHf+HQVQbFOHy6o+4cnC/fQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-wrap-function": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.20.5.tgz",
+      "integrity": "sha512-bYMxIWK5mh+TgXGVqAtnu5Yn1un+v8DDZtqyzKRLUzrh70Eal2O3aZ7aPYiMADO4uKlkzOiRiZ6GX5q3qxvW9Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-function-name": "^7.19.0",
+        "@babel/template": "^7.18.10",
+        "@babel/traverse": "^7.20.5",
+        "@babel/types": "^7.20.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.22.3.tgz",
+      "integrity": "sha512-jBJ7jWblbgr7r6wYZHMdIqKc73ycaTcCaWRq4/2LpuPHcx7xMlZvpGQkOYc9HeSjn6rcx15CPlgVcBtZ4WZJ2w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.21.9",
+        "@babel/traverse": "^7.22.1",
+        "@babel/types": "^7.22.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/highlight": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz",
+      "integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.18.6",
+        "chalk": "^2.0.0",
+        "js-tokens": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "license": "MIT"
+    },
+    "node_modules/@babel/highlight/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.22.4",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.4.tgz",
+      "integrity": "sha512-VLLsx06XkEYqBtE5YGPwfSGwfrjnyPP5oiGty3S8pQLFDFLaS8VwWSIxkTXpcvr5zeYLE6+MBNl2npl/YnfofA==",
+      "license": "MIT",
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.18.6.tgz",
+      "integrity": "sha512-Dgxsyg54Fx1d4Nge8UnvTrED63vrwOdPmyvPzlNN/boaliRP54pm3pGzZD1SJUwrBA+Cs/xdG8kXX6Mn/RfISQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.22.3.tgz",
+      "integrity": "sha512-6r4yRwEnorYByILoDRnEqxtojYKuiIv9FojW2E8GUKo9eWBwbKcd9IiZOZpdyXc64RmyGGyPu3/uAcrz/dq2kQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
+        "@babel/plugin-transform-optional-chaining": "^7.22.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.13.0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-object-rest-spread": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.12.1.tgz",
+      "integrity": "sha512-s6SowJIjzlhx8o7lsFx5zmY4At6CTtDvgNQDdPzkBQucle58A6b/TTeEBYtyDgmcXjUTM+vE8YOGHZzzbc/ioA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.0",
+        "@babel/plugin-transform-parameters": "^7.12.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-private-property-in-object": {
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0.tgz",
+      "integrity": "sha512-ha4zfehbJjc5MmXBlHec1igel5TJXXLDDRbuJ4+XT2TJcyD9/V1919BA8gMvsdHcNMBy4WBUBiRb3nw/EQUtBw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-create-class-features-plugin": "^7.21.0",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-unicode-property-regex": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.18.6.tgz",
+      "integrity": "sha512-2BShG/d5yoZyXZfVePH91urL5wTG6ASZU9M4o03lKK8u8UW1y08OMttBSOADTcJrnPMpvDXRG3G8fyLh4ovs8w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-async-generators": {
+      "version": "7.8.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
+      "integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-class-properties": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz",
+      "integrity": "sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-class-static-block": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz",
+      "integrity": "sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-dynamic-import": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz",
+      "integrity": "sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-export-namespace-from": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz",
+      "integrity": "sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.3"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-import-assertions": {
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.20.0.tgz",
+      "integrity": "sha512-IUh1vakzNoWalR8ch/areW7qFopR2AEw03JlG7BbrDqmQ4X3q9uuipQwSGrUn7oGiemKjtSLDhNtQHzMHr1JdQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.19.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-import-attributes": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.22.3.tgz",
+      "integrity": "sha512-i35jZJv6aO7hxEbIWQ41adVfOzjm9dcYDNeWlBMd8p0ZQRtNUCBrmGwZt+H5lb+oOC9a3svp956KP0oWGA1YsA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.21.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-import-meta": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz",
+      "integrity": "sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-json-strings": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
+      "integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-jsx": {
+      "version": "7.21.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.21.4.tgz",
+      "integrity": "sha512-5hewiLct5OKyh6PLKEYaFclcqtIgCb6bmELouxjF6up5q3Sov7rOayW4RwhbaBL0dit8rA80GNfY+UuDp2mBbQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.20.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-logical-assignment-operators": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
+      "integrity": "sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-nullish-coalescing-operator": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
+      "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-numeric-separator": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz",
+      "integrity": "sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-object-rest-spread": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz",
+      "integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-optional-catch-binding": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
+      "integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-optional-chaining": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
+      "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-private-property-in-object": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz",
+      "integrity": "sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-top-level-await": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz",
+      "integrity": "sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-typescript": {
+      "version": "7.21.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.21.4.tgz",
+      "integrity": "sha512-xz0D39NvhQn4t4RNsHmDnnsaQizIlUkdtYvLs8La1BlfjQ6JEwxkJGeqJMW2tAXx+q6H+WFuUTXNdYVpEya0YA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.20.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-unicode-sets-regex": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz",
+      "integrity": "sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-arrow-functions": {
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.21.5.tgz",
+      "integrity": "sha512-wb1mhwGOCaXHDTcsRYMKF9e5bbMgqwxtqa2Y1ifH96dXJPwbuLX9qHy3clhrxVqgMz7nyNXs8VkxdH8UBcjKqA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.21.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-async-generator-functions": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.22.3.tgz",
+      "integrity": "sha512-36A4Aq48t66btydbZd5Fk0/xJqbpg/v4QWI4AH4cYHBXy9Mu42UOupZpebKFiCFNT9S9rJFcsld0gsv0ayLjtA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-environment-visitor": "^7.22.1",
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/helper-remap-async-to-generator": "^7.18.9",
+        "@babel/plugin-syntax-async-generators": "^7.8.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-async-to-generator": {
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.20.7.tgz",
+      "integrity": "sha512-Uo5gwHPT9vgnSXQxqGtpdufUiWp96gk7yiP4Mp5bm1QMkEmLXBO7PAGYbKoJ6DhAwiNkcHFBol/x5zZZkL/t0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-remap-async-to-generator": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-block-scoped-functions": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.18.6.tgz",
+      "integrity": "sha512-ExUcOqpPWnliRcPqves5HJcJOvHvIIWfuS4sroBUenPuMdmW+SMHDakmtS7qOo13sVppmUijqeTv7qqGsvURpQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-block-scoping": {
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.21.0.tgz",
+      "integrity": "sha512-Mdrbunoh9SxwFZapeHVrwFmri16+oYotcZysSzhNIVDwIAb1UV+kvnxULSYq9J3/q5MDG+4X6w8QVgD1zhBXNQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.20.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-class-properties": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.22.3.tgz",
+      "integrity": "sha512-mASLsd6rhOrLZ5F3WbCxkzl67mmOnqik0zrg5W6D/X0QMW7HtvnoL1dRARLKIbMP3vXwkwziuLesPqWVGIl6Bw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.22.1",
+        "@babel/helper-plugin-utils": "^7.21.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-class-static-block": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.22.3.tgz",
+      "integrity": "sha512-5BirgNWNOx7cwbTJCOmKFJ1pZjwk5MUfMIwiBBvsirCJMZeQgs5pk6i1OlkVg+1Vef5LfBahFOrdCnAWvkVKMw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.22.1",
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/plugin-syntax-class-static-block": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.12.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-classes": {
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.21.0.tgz",
+      "integrity": "sha512-RZhbYTCEUAe6ntPehC4hlslPWosNHDox+vAs4On/mCLRLfoDVHf6hVEd7kuxr1RnHwJmxFfUM3cZiZRmPxJPXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-compilation-targets": "^7.20.7",
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-function-name": "^7.21.0",
+        "@babel/helper-optimise-call-expression": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-replace-supers": "^7.20.7",
+        "@babel/helper-split-export-declaration": "^7.18.6",
+        "globals": "^11.1.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-computed-properties": {
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.21.5.tgz",
+      "integrity": "sha512-TR653Ki3pAwxBxUe8srfF3e4Pe3FTA46uaNHYyQwIoM4oWKSoOZiDNyHJ0oIoDIUPSRQbQG7jzgVBX3FPVne1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/template": "^7.20.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-destructuring": {
+      "version": "7.21.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.21.3.tgz",
+      "integrity": "sha512-bp6hwMFzuiE4HqYEyoGJ/V2LeIWn+hLVKc4pnj++E5XQptwhtcGmSayM029d/j2X1bPKGTlsyPwAubuU22KhMA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.20.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-dotall-regex": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.18.6.tgz",
+      "integrity": "sha512-6S3jpun1eEbAxq7TdjLotAsl4WpQI9DxfkycRcKrjhQYzU87qpXdknpBg/e+TdcMehqGnLFi7tnFUBR02Vq6wg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-duplicate-keys": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.18.9.tgz",
+      "integrity": "sha512-d2bmXCtZXYc59/0SanQKbiWINadaJXqtvIQIzd4+hNwkWBgyCd5F/2t1kXoUdvPMrxzPvhK6EMQRROxsue+mfw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-dynamic-import": {
+      "version": "7.22.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.22.1.tgz",
+      "integrity": "sha512-rlhWtONnVBPdmt+jeewS0qSnMz/3yLFrqAP8hHC6EDcrYRSyuz9f9yQhHvVn2Ad6+yO9fHXac5piudeYrInxwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-exponentiation-operator": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.18.6.tgz",
+      "integrity": "sha512-wzEtc0+2c88FVR34aQmiz56dxEkxr2g8DQb/KfaFa1JYXOFVsbhvAonFN6PwVWj++fKmku8NP80plJ5Et4wqHw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-export-namespace-from": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.22.3.tgz",
+      "integrity": "sha512-5Ti1cHLTDnt3vX61P9KZ5IG09bFXp4cDVFJIAeCZuxu9OXXJJZp5iP0n/rzM2+iAutJY+KWEyyHcRaHlpQ/P5g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-for-of": {
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.21.5.tgz",
+      "integrity": "sha512-nYWpjKW/7j/I/mZkGVgHJXh4bA1sfdFnJoOXwJuj4m3Q2EraO/8ZyrkCau9P5tbHQk01RMSt6KYLCsW7730SXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.21.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-function-name": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.18.9.tgz",
+      "integrity": "sha512-WvIBoRPaJQ5yVHzcnJFor7oS5Ls0PYixlTYE63lCj2RtdQEl15M68FXQlxnG6wdraJIXRdR7KI+hQ7q/9QjrCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-compilation-targets": "^7.18.9",
+        "@babel/helper-function-name": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-json-strings": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.22.3.tgz",
+      "integrity": "sha512-IuvOMdeOOY2X4hRNAT6kwbePtK21BUyrAEgLKviL8pL6AEEVUVcqtRdN/HJXBLGIbt9T3ETmXRnFedRRmQNTYw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/plugin-syntax-json-strings": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-literals": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.18.9.tgz",
+      "integrity": "sha512-IFQDSRoTPnrAIrI5zoZv73IFeZu2dhu6irxQjY9rNjTT53VmKg9fenjvoiOWOkJ6mm4jKVPtdMzBY98Fp4Z4cg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-logical-assignment-operators": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.22.3.tgz",
+      "integrity": "sha512-CbayIfOw4av2v/HYZEsH+Klks3NC2/MFIR3QR8gnpGNNPEaq2fdlVCRYG/paKs7/5hvBLQ+H70pGWOHtlNEWNA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-member-expression-literals": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.18.6.tgz",
+      "integrity": "sha512-qSF1ihLGO3q+/g48k85tUjD033C29TNTVB2paCwZPVmOsjn9pClvYYrM2VeJpBY2bcNkuny0YUyTNRyRxJ54KA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-amd": {
+      "version": "7.20.11",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.20.11.tgz",
+      "integrity": "sha512-NuzCt5IIYOW0O30UvqktzHYR2ud5bOWbY0yaxWZ6G+aFzOMJvrs5YHNikrbdaT15+KNO31nPOy5Fim3ku6Zb5g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.20.11",
+        "@babel/helper-plugin-utils": "^7.20.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-commonjs": {
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.21.5.tgz",
+      "integrity": "sha512-OVryBEgKUbtqMoB7eG2rs6UFexJi6Zj6FDXx+esBLPTCxCNxAY9o+8Di7IsUGJ+AVhp5ncK0fxWUBd0/1gPhrQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.21.5",
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/helper-simple-access": "^7.21.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-systemjs": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.22.3.tgz",
+      "integrity": "sha512-V21W3bKLxO3ZjcBJZ8biSvo5gQ85uIXW2vJfh7JSWf/4SLUSr1tOoHX3ruN4+Oqa2m+BKfsxTR1I+PsvkIWvNw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-hoist-variables": "^7.18.6",
+        "@babel/helper-module-transforms": "^7.22.1",
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/helper-validator-identifier": "^7.19.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-umd": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.18.6.tgz",
+      "integrity": "sha512-dcegErExVeXcRqNtkRU/z8WlBLnvD4MRnHgNs3MytRO1Mn1sHRyhbcpYbVMGclAqOjdW+9cfkdZno9dFdfKLfQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-named-capturing-groups-regex": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.22.3.tgz",
+      "integrity": "sha512-c6HrD/LpUdNNJsISQZpds3TXvfYIAbo+efE9aWmY/PmSRD0agrJ9cPMt4BmArwUQ7ZymEWTFjTyp+yReLJZh0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.22.1",
+        "@babel/helper-plugin-utils": "^7.21.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-new-target": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.22.3.tgz",
+      "integrity": "sha512-5RuJdSo89wKdkRTqtM9RVVJzHum9c2s0te9rB7vZC1zKKxcioWIy+xcu4OoIAjyFZhb/bp5KkunuLin1q7Ct+w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.21.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-nullish-coalescing-operator": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.22.3.tgz",
+      "integrity": "sha512-CpaoNp16nX7ROtLONNuCyenYdY/l7ZsR6aoVa7rW7nMWisoNoQNIH5Iay/4LDyRjKMuElMqXiBoOQCDLTMGZiw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-numeric-separator": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.22.3.tgz",
+      "integrity": "sha512-+AF88fPDJrnseMh5vD9+SH6wq4ZMvpiTMHh58uLs+giMEyASFVhcT3NkoyO+NebFCNnpHJEq5AXO2txV4AGPDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-object-rest-spread": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.22.3.tgz",
+      "integrity": "sha512-38bzTsqMMCI46/TQnJwPPpy33EjLCc1Gsm2hRTF6zTMWnKsN61vdrpuzIEGQyKEhDSYDKyZHrrd5FMj4gcUHhw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.22.3",
+        "@babel/helper-compilation-targets": "^7.22.1",
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-transform-parameters": "^7.22.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-object-super": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.18.6.tgz",
+      "integrity": "sha512-uvGz6zk+pZoS1aTZrOvrbj6Pp/kK2mp45t2B+bTDre2UgsZZ8EZLSJtUg7m/no0zOJUWgFONpB7Zv9W2tSaFlA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/helper-replace-supers": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-optional-catch-binding": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.22.3.tgz",
+      "integrity": "sha512-bnDFWXFzWY0BsOyqaoSXvMQ2F35zutQipugog/rqotL2S4ciFOKlRYUu9djt4iq09oh2/34hqfRR2k1dIvuu4g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-optional-chaining": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.22.3.tgz",
+      "integrity": "sha512-63v3/UFFxhPKT8j8u1jTTGVyITxl7/7AfOqK8C5gz1rHURPUGe3y5mvIf68eYKGoBNahtJnTxBKug4BQOnzeJg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-parameters": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.22.3.tgz",
+      "integrity": "sha512-x7QHQJHPuD9VmfpzboyGJ5aHEr9r7DsAsdxdhJiTB3J3j8dyl+NFZ+rX5Q2RWFDCs61c06qBfS4ys2QYn8UkMw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.21.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-private-methods": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.22.3.tgz",
+      "integrity": "sha512-fC7jtjBPFqhqpPAE+O4LKwnLq7gGkD3ZmC2E3i4qWH34mH3gOg2Xrq5YMHUq6DM30xhqM1DNftiRaSqVjEG+ug==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.22.1",
+        "@babel/helper-plugin-utils": "^7.21.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-private-property-in-object": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.22.3.tgz",
+      "integrity": "sha512-C7MMl4qWLpgVCbXfj3UW8rR1xeCnisQ0cU7YJHV//8oNBS0aCIVg1vFnZXxOckHhEpQyqNNkWmvSEWnMLlc+Vw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-create-class-features-plugin": "^7.22.1",
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-property-literals": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.18.6.tgz",
+      "integrity": "sha512-cYcs6qlgafTud3PAzrrRNbQtfpQ8+y/+M5tKmksS9+M1ckbH6kzY8MrexEM9mcA6JDsukE19iIRvAyYl463sMg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-constant-elements": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.22.3.tgz",
+      "integrity": "sha512-b5J6muxQYp4H7loAQv/c7GO5cPuRA6H5hx4gO+/Hn+Cu9MRQU0PNiUoWq1L//8sq6kFSNxGXFb2XTaUfa9y+Pg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.21.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-display-name": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.18.6.tgz",
+      "integrity": "sha512-TV4sQ+T013n61uMoygyMRm+xf04Bd5oqFpv2jAEQwSZ8NwQA7zeRPg1LMVg2PWi3zWBz+CLKD+v5bcpZ/BS0aA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.22.3.tgz",
+      "integrity": "sha512-JEulRWG2f04a7L8VWaOngWiK6p+JOSpB+DAtwfJgOaej1qdbNxqtK7MwTBHjUA10NeFcszlFNqCdbRcirzh2uQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-module-imports": "^7.21.4",
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/plugin-syntax-jsx": "^7.21.4",
+        "@babel/types": "^7.22.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-development": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.18.6.tgz",
+      "integrity": "sha512-SA6HEjwYFKF7WDjWcMcMGUimmw/nhNRDWxr+KaLSCrkD/LMDBvWRmHAYgE1HDeF8KUuI8OAu+RT6EOtKxSW2qA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/plugin-transform-react-jsx": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-pure-annotations": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.18.6.tgz",
+      "integrity": "sha512-I8VfEPg9r2TRDdvnHgPepTKvuRomzA8+u+nhY7qSI1fR2hRNebasZEETLyM5mAUr0Ku56OkXJ0I7NHJnO6cJiQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-regenerator": {
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.21.5.tgz",
+      "integrity": "sha512-ZoYBKDb6LyMi5yCsByQ5jmXsHAQDDYeexT1Szvlmui+lADvfSecr5Dxd/PkrTC3pAD182Fcju1VQkB4oCp9M+w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "regenerator-transform": "^0.15.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-reserved-words": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.18.6.tgz",
+      "integrity": "sha512-oX/4MyMoypzHjFrT1CdivfKZ+XvIPMFXwwxHp/r0Ddy2Vuomt4HDFGmft1TAY2yiTKiNSsh3kjBAzcM8kSdsjA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-runtime": {
+      "version": "7.22.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.22.4.tgz",
+      "integrity": "sha512-Urkiz1m4zqiRo17klj+l3nXgiRTFQng91Bc1eiLF7BMQu1e7wE5Gcq9xSv062IF068NHjcutSbIMev60gXxAvA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.21.4",
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "babel-plugin-polyfill-corejs2": "^0.4.3",
+        "babel-plugin-polyfill-corejs3": "^0.8.1",
+        "babel-plugin-polyfill-regenerator": "^0.5.0",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-runtime/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/plugin-transform-shorthand-properties": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.18.6.tgz",
+      "integrity": "sha512-eCLXXJqv8okzg86ywZJbRn19YJHU4XUa55oz2wbHhaQVn/MM+XhukiT7SYqp/7o00dg52Rj51Ny+Ecw4oyoygw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-spread": {
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.20.7.tgz",
+      "integrity": "sha512-ewBbHQ+1U/VnH1fxltbJqDeWBU1oNLG8Dj11uIv3xVf7nrQu0bPGe5Rf716r7K5Qz+SqtAOVswoVunoiBtGhxw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-sticky-regex": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.18.6.tgz",
+      "integrity": "sha512-kfiDrDQ+PBsQDO85yj1icueWMfGfJFKN1KCkndygtu/C9+XUfydLC8Iv5UYJqRwy4zk8EcplRxEOeLyjq1gm6Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-template-literals": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.18.9.tgz",
+      "integrity": "sha512-S8cOWfT82gTezpYOiVaGHrCbhlHgKhQt8XH5ES46P2XWmX92yisoZywf5km75wv5sYcXDUCLMmMxOLCtthDgMA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-typeof-symbol": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.18.9.tgz",
+      "integrity": "sha512-SRfwTtF11G2aemAZWivL7PD+C9z52v9EvMqH9BuYbabyPuKUvSWks3oCg6041pT925L4zVFqaVBeECwsmlguEw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-typescript": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.22.3.tgz",
+      "integrity": "sha512-pyjnCIniO5PNaEuGxT28h0HbMru3qCVrMqVgVOz/krComdIrY9W6FCLBq9NWHY8HDGaUlan+UhmZElDENIfCcw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-create-class-features-plugin": "^7.22.1",
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/plugin-syntax-typescript": "^7.21.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-unicode-escapes": {
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.21.5.tgz",
+      "integrity": "sha512-LYm/gTOwZqsYohlvFUe/8Tujz75LqqVC2w+2qPHLR+WyWHGCZPN1KBpJCJn+4Bk4gOkQy/IXKIge6az5MqwlOg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.21.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-unicode-property-regex": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.22.3.tgz",
+      "integrity": "sha512-5ScJ+OmdX+O6HRuMGW4kv7RL9vIKdtdAj9wuWUKy1wbHY3jaM/UlyIiC1G7J6UJiiyMukjjK0QwL3P0vBd0yYg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.22.1",
+        "@babel/helper-plugin-utils": "^7.21.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-unicode-regex": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.18.6.tgz",
+      "integrity": "sha512-gE7A6Lt7YLnNOL3Pb9BNeZvi+d8l7tcRrG4+pwJjK9hD2xX4mEvjlQW60G9EEmfXVYRPv9VRQcyegIVHCql/AA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-unicode-sets-regex": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.22.3.tgz",
+      "integrity": "sha512-hNufLdkF8vqywRp+P55j4FHXqAX2LRUccoZHH7AFn1pq5ZOO2ISKW9w13bFZVjBoTqeve2HOgoJCcaziJVhGNw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.22.1",
+        "@babel/helper-plugin-utils": "^7.21.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/preset-env": {
+      "version": "7.22.4",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.22.4.tgz",
+      "integrity": "sha512-c3lHOjbwBv0TkhYCr+XCR6wKcSZ1QbQTVdSkZUaVpLv8CVWotBMArWUi5UAJrcrQaEnleVkkvaV8F/pmc/STZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.22.3",
+        "@babel/helper-compilation-targets": "^7.22.1",
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/helper-validator-option": "^7.21.0",
+        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.18.6",
+        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.22.3",
+        "@babel/plugin-proposal-private-property-in-object": "^7.21.0",
+        "@babel/plugin-syntax-async-generators": "^7.8.4",
+        "@babel/plugin-syntax-class-properties": "^7.12.13",
+        "@babel/plugin-syntax-class-static-block": "^7.14.5",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3",
+        "@babel/plugin-syntax-import-assertions": "^7.20.0",
+        "@babel/plugin-syntax-import-attributes": "^7.22.3",
+        "@babel/plugin-syntax-import-meta": "^7.10.4",
+        "@babel/plugin-syntax-json-strings": "^7.8.3",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
+        "@babel/plugin-syntax-top-level-await": "^7.14.5",
+        "@babel/plugin-syntax-unicode-sets-regex": "^7.18.6",
+        "@babel/plugin-transform-arrow-functions": "^7.21.5",
+        "@babel/plugin-transform-async-generator-functions": "^7.22.3",
+        "@babel/plugin-transform-async-to-generator": "^7.20.7",
+        "@babel/plugin-transform-block-scoped-functions": "^7.18.6",
+        "@babel/plugin-transform-block-scoping": "^7.21.0",
+        "@babel/plugin-transform-class-properties": "^7.22.3",
+        "@babel/plugin-transform-class-static-block": "^7.22.3",
+        "@babel/plugin-transform-classes": "^7.21.0",
+        "@babel/plugin-transform-computed-properties": "^7.21.5",
+        "@babel/plugin-transform-destructuring": "^7.21.3",
+        "@babel/plugin-transform-dotall-regex": "^7.18.6",
+        "@babel/plugin-transform-duplicate-keys": "^7.18.9",
+        "@babel/plugin-transform-dynamic-import": "^7.22.1",
+        "@babel/plugin-transform-exponentiation-operator": "^7.18.6",
+        "@babel/plugin-transform-export-namespace-from": "^7.22.3",
+        "@babel/plugin-transform-for-of": "^7.21.5",
+        "@babel/plugin-transform-function-name": "^7.18.9",
+        "@babel/plugin-transform-json-strings": "^7.22.3",
+        "@babel/plugin-transform-literals": "^7.18.9",
+        "@babel/plugin-transform-logical-assignment-operators": "^7.22.3",
+        "@babel/plugin-transform-member-expression-literals": "^7.18.6",
+        "@babel/plugin-transform-modules-amd": "^7.20.11",
+        "@babel/plugin-transform-modules-commonjs": "^7.21.5",
+        "@babel/plugin-transform-modules-systemjs": "^7.22.3",
+        "@babel/plugin-transform-modules-umd": "^7.18.6",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.22.3",
+        "@babel/plugin-transform-new-target": "^7.22.3",
+        "@babel/plugin-transform-nullish-coalescing-operator": "^7.22.3",
+        "@babel/plugin-transform-numeric-separator": "^7.22.3",
+        "@babel/plugin-transform-object-rest-spread": "^7.22.3",
+        "@babel/plugin-transform-object-super": "^7.18.6",
+        "@babel/plugin-transform-optional-catch-binding": "^7.22.3",
+        "@babel/plugin-transform-optional-chaining": "^7.22.3",
+        "@babel/plugin-transform-parameters": "^7.22.3",
+        "@babel/plugin-transform-private-methods": "^7.22.3",
+        "@babel/plugin-transform-private-property-in-object": "^7.22.3",
+        "@babel/plugin-transform-property-literals": "^7.18.6",
+        "@babel/plugin-transform-regenerator": "^7.21.5",
+        "@babel/plugin-transform-reserved-words": "^7.18.6",
+        "@babel/plugin-transform-shorthand-properties": "^7.18.6",
+        "@babel/plugin-transform-spread": "^7.20.7",
+        "@babel/plugin-transform-sticky-regex": "^7.18.6",
+        "@babel/plugin-transform-template-literals": "^7.18.9",
+        "@babel/plugin-transform-typeof-symbol": "^7.18.9",
+        "@babel/plugin-transform-unicode-escapes": "^7.21.5",
+        "@babel/plugin-transform-unicode-property-regex": "^7.22.3",
+        "@babel/plugin-transform-unicode-regex": "^7.18.6",
+        "@babel/plugin-transform-unicode-sets-regex": "^7.22.3",
+        "@babel/preset-modules": "^0.1.5",
+        "@babel/types": "^7.22.4",
+        "babel-plugin-polyfill-corejs2": "^0.4.3",
+        "babel-plugin-polyfill-corejs3": "^0.8.1",
+        "babel-plugin-polyfill-regenerator": "^0.5.0",
+        "core-js-compat": "^3.30.2",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/preset-env/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/preset-modules": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.5.tgz",
+      "integrity": "sha512-A57th6YRG7oR3cq/yt/Y84MvGgE0eJG2F1JLhKuyG+jFxEgrd/HAMJatiFtmOiZurz+0DkrvbheCLaV5f2JfjA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/plugin-proposal-unicode-property-regex": "^7.4.4",
+        "@babel/plugin-transform-dotall-regex": "^7.4.4",
+        "@babel/types": "^7.4.4",
+        "esutils": "^2.0.2"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/preset-react": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.22.3.tgz",
+      "integrity": "sha512-lxDz1mnZ9polqClBCVBjIVUypoB4qV3/tZUDb/IlYbW1kiiLaXaX+bInbRjl+lNQ/iUZraQ3+S8daEmoELMWug==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/helper-validator-option": "^7.21.0",
+        "@babel/plugin-transform-react-display-name": "^7.18.6",
+        "@babel/plugin-transform-react-jsx": "^7.22.3",
+        "@babel/plugin-transform-react-jsx-development": "^7.18.6",
+        "@babel/plugin-transform-react-pure-annotations": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/preset-typescript": {
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.21.5.tgz",
+      "integrity": "sha512-iqe3sETat5EOrORXiQ6rWfoOg2y68Cs75B9wNxdPW4kixJxh7aXQE1KPdWLDniC24T/6dSnguF33W9j/ZZQcmA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/helper-validator-option": "^7.21.0",
+        "@babel/plugin-syntax-jsx": "^7.21.4",
+        "@babel/plugin-transform-modules-commonjs": "^7.21.5",
+        "@babel/plugin-transform-typescript": "^7.21.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/regjsgen": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@babel/regjsgen/-/regjsgen-0.8.0.tgz",
+      "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==",
+      "license": "MIT"
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.3.tgz",
+      "integrity": "sha512-XsDuspWKLUsxwCp6r7EhsExHtYfbe5oAGQ19kqngTdCPUoPQzOPdUbD/pB9PJiwb2ptYKQDjSJT3R6dC+EPqfQ==",
+      "license": "MIT",
+      "dependencies": {
+        "regenerator-runtime": "^0.13.11"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/runtime-corejs3": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.22.3.tgz",
+      "integrity": "sha512-6bdmknScYKmt8I9VjsJuKKGr+TwUb555FTf6tT1P/ANlCjTHCiYLhiQ4X/O7J731w5NOqu8c1aYHEVuOwPz7jA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-js-pure": "^3.30.2",
+        "regenerator-runtime": "^0.13.11"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.21.9",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.21.9.tgz",
+      "integrity": "sha512-MK0X5k8NKOuWRamiEfc3KEJiHMTkGZNUjzMipqCGDDc6ijRl/B7RGSKVGncu4Ro/HdyzzY6cmoXuKI2Gffk7vQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.21.4",
+        "@babel/parser": "^7.21.9",
+        "@babel/types": "^7.21.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.22.4",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.4.tgz",
+      "integrity": "sha512-Tn1pDsjIcI+JcLKq1AVlZEr4226gpuAQTsLMorsYg9tuS/kG7nuwwJ4AB8jfQuEgb/COBwR/DqJxmoiYFu5/rQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.21.4",
+        "@babel/generator": "^7.22.3",
+        "@babel/helper-environment-visitor": "^7.22.1",
+        "@babel/helper-function-name": "^7.21.0",
+        "@babel/helper-hoist-variables": "^7.18.6",
+        "@babel/helper-split-export-declaration": "^7.18.6",
+        "@babel/parser": "^7.22.4",
+        "@babel/types": "^7.22.4",
+        "debug": "^4.1.0",
+        "globals": "^11.1.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.22.4",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.4.tgz",
+      "integrity": "sha512-Tx9x3UBHTTsMSW85WB2kphxYQVvrZ/t1FxD88IpSgIjiUJlCm9z+xWIDwyo1vffTwSqteqyznB8ZE9vYYk16zA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.21.5",
+        "@babel/helper-validator-identifier": "^7.19.1",
+        "to-fast-properties": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@colors/colors": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
+      "integrity": "sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.90"
+      }
+    },
+    "node_modules/@discoveryjs/json-ext": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
+      "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/@docsearch/css": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@docsearch/css/-/css-3.4.0.tgz",
+      "integrity": "sha512-Hg8Xfma+rFwRi6Y/pfei4FJoQ1hdVURmmNs/XPoMTCPAImU+d5yxj+M+qdLtNjWRpfWziU4dQcqY94xgFBn2dg==",
+      "license": "MIT"
+    },
+    "node_modules/@docsearch/react": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@docsearch/react/-/react-3.4.0.tgz",
+      "integrity": "sha512-ufrp5879XYGojgS30ZAp8H4qIMbahRHB9M85VDBP36Xgz5QjYM54i1URKj5e219F7gqTtOivfztFTij6itc0MQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/autocomplete-core": "1.8.2",
+        "@algolia/autocomplete-preset-algolia": "1.8.2",
+        "@docsearch/css": "3.4.0",
+        "algoliasearch": "^4.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">= 16.8.0 < 19.0.0",
+        "react": ">= 16.8.0 < 19.0.0",
+        "react-dom": ">= 16.8.0 < 19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@docusaurus/core": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmmirror.com/@docusaurus/core/-/core-2.4.3.tgz",
+      "integrity": "sha512-dWH5P7cgeNSIg9ufReX6gaCl/TmrGKD38Orbwuz05WPhAQtFXHd5B8Qym1TiXfvUNvwoYKkAJOJuGe8ou0Z7PA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.18.6",
+        "@babel/generator": "^7.18.7",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/plugin-transform-runtime": "^7.18.6",
+        "@babel/preset-env": "^7.18.6",
+        "@babel/preset-react": "^7.18.6",
+        "@babel/preset-typescript": "^7.18.6",
+        "@babel/runtime": "^7.18.6",
+        "@babel/runtime-corejs3": "^7.18.6",
+        "@babel/traverse": "^7.18.8",
+        "@docusaurus/cssnano-preset": "2.4.3",
+        "@docusaurus/logger": "2.4.3",
+        "@docusaurus/mdx-loader": "2.4.3",
+        "@docusaurus/react-loadable": "5.5.2",
+        "@docusaurus/utils": "2.4.3",
+        "@docusaurus/utils-common": "2.4.3",
+        "@docusaurus/utils-validation": "2.4.3",
+        "@slorber/static-site-generator-webpack-plugin": "^4.0.7",
+        "@svgr/webpack": "^6.2.1",
+        "autoprefixer": "^10.4.7",
+        "babel-loader": "^8.2.5",
+        "babel-plugin-dynamic-import-node": "^2.3.3",
+        "boxen": "^6.2.1",
+        "chalk": "^4.1.2",
+        "chokidar": "^3.5.3",
+        "clean-css": "^5.3.0",
+        "cli-table3": "^0.6.2",
+        "combine-promises": "^1.1.0",
+        "commander": "^5.1.0",
+        "copy-webpack-plugin": "^11.0.0",
+        "core-js": "^3.23.3",
+        "css-loader": "^6.7.1",
+        "css-minimizer-webpack-plugin": "^4.0.0",
+        "cssnano": "^5.1.12",
+        "del": "^6.1.1",
+        "detect-port": "^1.3.0",
+        "escape-html": "^1.0.3",
+        "eta": "^2.0.0",
+        "file-loader": "^6.2.0",
+        "fs-extra": "^10.1.0",
+        "html-minifier-terser": "^6.1.0",
+        "html-tags": "^3.2.0",
+        "html-webpack-plugin": "^5.5.0",
+        "import-fresh": "^3.3.0",
+        "leven": "^3.1.0",
+        "lodash": "^4.17.21",
+        "mini-css-extract-plugin": "^2.6.1",
+        "postcss": "^8.4.14",
+        "postcss-loader": "^7.0.0",
+        "prompts": "^2.4.2",
+        "react-dev-utils": "^12.0.1",
+        "react-helmet-async": "^1.3.0",
+        "react-loadable": "npm:@docusaurus/react-loadable@5.5.2",
+        "react-loadable-ssr-addon-v5-slorber": "^1.0.1",
+        "react-router": "^5.3.3",
+        "react-router-config": "^5.1.1",
+        "react-router-dom": "^5.3.3",
+        "rtl-detect": "^1.0.4",
+        "semver": "^7.3.7",
+        "serve-handler": "^6.1.3",
+        "shelljs": "^0.8.5",
+        "terser-webpack-plugin": "^5.3.3",
+        "tslib": "^2.4.0",
+        "update-notifier": "^5.1.0",
+        "url-loader": "^4.1.1",
+        "wait-on": "^6.0.1",
+        "webpack": "^5.73.0",
+        "webpack-bundle-analyzer": "^4.5.0",
+        "webpack-dev-server": "^4.9.3",
+        "webpack-merge": "^5.8.0",
+        "webpackbar": "^5.0.2"
+      },
+      "bin": {
+        "docusaurus": "bin/docusaurus.mjs"
+      },
+      "engines": {
+        "node": ">=16.14"
+      },
+      "peerDependencies": {
+        "react": "^16.8.4 || ^17.0.0",
+        "react-dom": "^16.8.4 || ^17.0.0"
+      }
+    },
+    "node_modules/@docusaurus/cssnano-preset": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmmirror.com/@docusaurus/cssnano-preset/-/cssnano-preset-2.4.3.tgz",
+      "integrity": "sha512-ZvGSRCi7z9wLnZrXNPG6DmVPHdKGd8dIn9pYbEOFiYihfv4uDR3UtxogmKf+rT8ZlKFf5Lqne8E8nt08zNM8CA==",
+      "license": "MIT",
+      "dependencies": {
+        "cssnano-preset-advanced": "^5.3.8",
+        "postcss": "^8.4.14",
+        "postcss-sort-media-queries": "^4.2.1",
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">=16.14"
+      }
+    },
+    "node_modules/@docusaurus/logger": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmmirror.com/@docusaurus/logger/-/logger-2.4.3.tgz",
+      "integrity": "sha512-Zxws7r3yLufk9xM1zq9ged0YHs65mlRmtsobnFkdZTxWXdTYlWWLWdKyNKAsVC+D7zg+pv2fGbyabdOnyZOM3w==",
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^4.1.2",
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">=16.14"
+      }
+    },
+    "node_modules/@docusaurus/mdx-loader": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmmirror.com/@docusaurus/mdx-loader/-/mdx-loader-2.4.3.tgz",
+      "integrity": "sha512-b1+fDnWtl3GiqkL0BRjYtc94FZrcDDBV1j8446+4tptB9BAOlePwG2p/pK6vGvfL53lkOsszXMghr2g67M0vCw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.18.8",
+        "@babel/traverse": "^7.18.8",
+        "@docusaurus/logger": "2.4.3",
+        "@docusaurus/utils": "2.4.3",
+        "@mdx-js/mdx": "^1.6.22",
+        "escape-html": "^1.0.3",
+        "file-loader": "^6.2.0",
+        "fs-extra": "^10.1.0",
+        "image-size": "^1.0.1",
+        "mdast-util-to-string": "^2.0.0",
+        "remark-emoji": "^2.2.0",
+        "stringify-object": "^3.3.0",
+        "tslib": "^2.4.0",
+        "unified": "^9.2.2",
+        "unist-util-visit": "^2.0.3",
+        "url-loader": "^4.1.1",
+        "webpack": "^5.73.0"
+      },
+      "engines": {
+        "node": ">=16.14"
+      },
+      "peerDependencies": {
+        "react": "^16.8.4 || ^17.0.0",
+        "react-dom": "^16.8.4 || ^17.0.0"
+      }
+    },
+    "node_modules/@docusaurus/module-type-aliases": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmmirror.com/@docusaurus/module-type-aliases/-/module-type-aliases-2.4.3.tgz",
+      "integrity": "sha512-cwkBkt1UCiduuvEAo7XZY01dJfRn7UR/75mBgOdb1hKknhrabJZ8YH+7savd/y9kLExPyrhe0QwdS9GuzsRRIA==",
+      "license": "MIT",
+      "dependencies": {
+        "@docusaurus/react-loadable": "5.5.2",
+        "@docusaurus/types": "2.4.3",
+        "@types/history": "^4.7.11",
+        "@types/react": "*",
+        "@types/react-router-config": "*",
+        "@types/react-router-dom": "*",
+        "react-helmet-async": "*",
+        "react-loadable": "npm:@docusaurus/react-loadable@5.5.2"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
+    "node_modules/@docusaurus/plugin-content-blog": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmmirror.com/@docusaurus/plugin-content-blog/-/plugin-content-blog-2.4.3.tgz",
+      "integrity": "sha512-PVhypqaA0t98zVDpOeTqWUTvRqCEjJubtfFUQ7zJNYdbYTbS/E/ytq6zbLVsN/dImvemtO/5JQgjLxsh8XLo8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@docusaurus/core": "2.4.3",
+        "@docusaurus/logger": "2.4.3",
+        "@docusaurus/mdx-loader": "2.4.3",
+        "@docusaurus/types": "2.4.3",
+        "@docusaurus/utils": "2.4.3",
+        "@docusaurus/utils-common": "2.4.3",
+        "@docusaurus/utils-validation": "2.4.3",
+        "cheerio": "^1.0.0-rc.12",
+        "feed": "^4.2.2",
+        "fs-extra": "^10.1.0",
+        "lodash": "^4.17.21",
+        "reading-time": "^1.5.0",
+        "tslib": "^2.4.0",
+        "unist-util-visit": "^2.0.3",
+        "utility-types": "^3.10.0",
+        "webpack": "^5.73.0"
+      },
+      "engines": {
+        "node": ">=16.14"
+      },
+      "peerDependencies": {
+        "react": "^16.8.4 || ^17.0.0",
+        "react-dom": "^16.8.4 || ^17.0.0"
+      }
+    },
+    "node_modules/@docusaurus/plugin-content-docs": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmmirror.com/@docusaurus/plugin-content-docs/-/plugin-content-docs-2.4.3.tgz",
+      "integrity": "sha512-N7Po2LSH6UejQhzTCsvuX5NOzlC+HiXOVvofnEPj0WhMu1etpLEXE6a4aTxrtg95lQ5kf0xUIdjX9sh3d3G76A==",
+      "license": "MIT",
+      "dependencies": {
+        "@docusaurus/core": "2.4.3",
+        "@docusaurus/logger": "2.4.3",
+        "@docusaurus/mdx-loader": "2.4.3",
+        "@docusaurus/module-type-aliases": "2.4.3",
+        "@docusaurus/types": "2.4.3",
+        "@docusaurus/utils": "2.4.3",
+        "@docusaurus/utils-validation": "2.4.3",
+        "@types/react-router-config": "^5.0.6",
+        "combine-promises": "^1.1.0",
+        "fs-extra": "^10.1.0",
+        "import-fresh": "^3.3.0",
+        "js-yaml": "^4.1.0",
+        "lodash": "^4.17.21",
+        "tslib": "^2.4.0",
+        "utility-types": "^3.10.0",
+        "webpack": "^5.73.0"
+      },
+      "engines": {
+        "node": ">=16.14"
+      },
+      "peerDependencies": {
+        "react": "^16.8.4 || ^17.0.0",
+        "react-dom": "^16.8.4 || ^17.0.0"
+      }
+    },
+    "node_modules/@docusaurus/plugin-content-pages": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmmirror.com/@docusaurus/plugin-content-pages/-/plugin-content-pages-2.4.3.tgz",
+      "integrity": "sha512-txtDVz7y3zGk67q0HjG0gRttVPodkHqE0bpJ+7dOaTH40CQFLSh7+aBeGnPOTl+oCPG+hxkim4SndqPqXjQ8Bg==",
+      "license": "MIT",
+      "dependencies": {
+        "@docusaurus/core": "2.4.3",
+        "@docusaurus/mdx-loader": "2.4.3",
+        "@docusaurus/types": "2.4.3",
+        "@docusaurus/utils": "2.4.3",
+        "@docusaurus/utils-validation": "2.4.3",
+        "fs-extra": "^10.1.0",
+        "tslib": "^2.4.0",
+        "webpack": "^5.73.0"
+      },
+      "engines": {
+        "node": ">=16.14"
+      },
+      "peerDependencies": {
+        "react": "^16.8.4 || ^17.0.0",
+        "react-dom": "^16.8.4 || ^17.0.0"
+      }
+    },
+    "node_modules/@docusaurus/plugin-debug": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmmirror.com/@docusaurus/plugin-debug/-/plugin-debug-2.4.3.tgz",
+      "integrity": "sha512-LkUbuq3zCmINlFb+gAd4ZvYr+bPAzMC0hwND4F7V9bZ852dCX8YoWyovVUBKq4er1XsOwSQaHmNGtObtn8Av8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@docusaurus/core": "2.4.3",
+        "@docusaurus/types": "2.4.3",
+        "@docusaurus/utils": "2.4.3",
+        "fs-extra": "^10.1.0",
+        "react-json-view": "^1.21.3",
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">=16.14"
+      },
+      "peerDependencies": {
+        "react": "^16.8.4 || ^17.0.0",
+        "react-dom": "^16.8.4 || ^17.0.0"
+      }
+    },
+    "node_modules/@docusaurus/plugin-google-analytics": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmmirror.com/@docusaurus/plugin-google-analytics/-/plugin-google-analytics-2.4.3.tgz",
+      "integrity": "sha512-KzBV3k8lDkWOhg/oYGxlK5o9bOwX7KpPc/FTWoB+SfKhlHfhq7qcQdMi1elAaVEIop8tgK6gD1E58Q+XC6otSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@docusaurus/core": "2.4.3",
+        "@docusaurus/types": "2.4.3",
+        "@docusaurus/utils-validation": "2.4.3",
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">=16.14"
+      },
+      "peerDependencies": {
+        "react": "^16.8.4 || ^17.0.0",
+        "react-dom": "^16.8.4 || ^17.0.0"
+      }
+    },
+    "node_modules/@docusaurus/plugin-google-gtag": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmmirror.com/@docusaurus/plugin-google-gtag/-/plugin-google-gtag-2.4.3.tgz",
+      "integrity": "sha512-5FMg0rT7sDy4i9AGsvJC71MQrqQZwgLNdDetLEGDHLfSHLvJhQbTCUGbGXknUgWXQJckcV/AILYeJy+HhxeIFA==",
+      "license": "MIT",
+      "dependencies": {
+        "@docusaurus/core": "2.4.3",
+        "@docusaurus/types": "2.4.3",
+        "@docusaurus/utils-validation": "2.4.3",
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">=16.14"
+      },
+      "peerDependencies": {
+        "react": "^16.8.4 || ^17.0.0",
+        "react-dom": "^16.8.4 || ^17.0.0"
+      }
+    },
+    "node_modules/@docusaurus/plugin-google-tag-manager": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmmirror.com/@docusaurus/plugin-google-tag-manager/-/plugin-google-tag-manager-2.4.3.tgz",
+      "integrity": "sha512-1jTzp71yDGuQiX9Bi0pVp3alArV0LSnHXempvQTxwCGAEzUWWaBg4d8pocAlTpbP9aULQQqhgzrs8hgTRPOM0A==",
+      "license": "MIT",
+      "dependencies": {
+        "@docusaurus/core": "2.4.3",
+        "@docusaurus/types": "2.4.3",
+        "@docusaurus/utils-validation": "2.4.3",
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">=16.14"
+      },
+      "peerDependencies": {
+        "react": "^16.8.4 || ^17.0.0",
+        "react-dom": "^16.8.4 || ^17.0.0"
+      }
+    },
+    "node_modules/@docusaurus/plugin-sitemap": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmmirror.com/@docusaurus/plugin-sitemap/-/plugin-sitemap-2.4.3.tgz",
+      "integrity": "sha512-LRQYrK1oH1rNfr4YvWBmRzTL0LN9UAPxBbghgeFRBm5yloF6P+zv1tm2pe2hQTX/QP5bSKdnajCvfnScgKXMZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@docusaurus/core": "2.4.3",
+        "@docusaurus/logger": "2.4.3",
+        "@docusaurus/types": "2.4.3",
+        "@docusaurus/utils": "2.4.3",
+        "@docusaurus/utils-common": "2.4.3",
+        "@docusaurus/utils-validation": "2.4.3",
+        "fs-extra": "^10.1.0",
+        "sitemap": "^7.1.1",
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">=16.14"
+      },
+      "peerDependencies": {
+        "react": "^16.8.4 || ^17.0.0",
+        "react-dom": "^16.8.4 || ^17.0.0"
+      }
+    },
+    "node_modules/@docusaurus/preset-classic": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmmirror.com/@docusaurus/preset-classic/-/preset-classic-2.4.3.tgz",
+      "integrity": "sha512-tRyMliepY11Ym6hB1rAFSNGwQDpmszvWYJvlK1E+md4SW8i6ylNHtpZjaYFff9Mdk3i/Pg8ItQq9P0daOJAvQw==",
+      "license": "MIT",
+      "dependencies": {
+        "@docusaurus/core": "2.4.3",
+        "@docusaurus/plugin-content-blog": "2.4.3",
+        "@docusaurus/plugin-content-docs": "2.4.3",
+        "@docusaurus/plugin-content-pages": "2.4.3",
+        "@docusaurus/plugin-debug": "2.4.3",
+        "@docusaurus/plugin-google-analytics": "2.4.3",
+        "@docusaurus/plugin-google-gtag": "2.4.3",
+        "@docusaurus/plugin-google-tag-manager": "2.4.3",
+        "@docusaurus/plugin-sitemap": "2.4.3",
+        "@docusaurus/theme-classic": "2.4.3",
+        "@docusaurus/theme-common": "2.4.3",
+        "@docusaurus/theme-search-algolia": "2.4.3",
+        "@docusaurus/types": "2.4.3"
+      },
+      "engines": {
+        "node": ">=16.14"
+      },
+      "peerDependencies": {
+        "react": "^16.8.4 || ^17.0.0",
+        "react-dom": "^16.8.4 || ^17.0.0"
+      }
+    },
+    "node_modules/@docusaurus/react-loadable": {
+      "version": "5.5.2",
+      "resolved": "https://registry.npmjs.org/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz",
+      "integrity": "sha512-A3dYjdBGuy0IGT+wyLIGIKLRE+sAk1iNk0f1HjNDysO7u8lhL4N3VEm+FAubmJbAztn94F7MxBTPmnixbiyFdQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
+    "node_modules/@docusaurus/theme-classic": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmmirror.com/@docusaurus/theme-classic/-/theme-classic-2.4.3.tgz",
+      "integrity": "sha512-QKRAJPSGPfDY2yCiPMIVyr+MqwZCIV2lxNzqbyUW0YkrlmdzzP3WuQJPMGLCjWgQp/5c9kpWMvMxjhpZx1R32Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@docusaurus/core": "2.4.3",
+        "@docusaurus/mdx-loader": "2.4.3",
+        "@docusaurus/module-type-aliases": "2.4.3",
+        "@docusaurus/plugin-content-blog": "2.4.3",
+        "@docusaurus/plugin-content-docs": "2.4.3",
+        "@docusaurus/plugin-content-pages": "2.4.3",
+        "@docusaurus/theme-common": "2.4.3",
+        "@docusaurus/theme-translations": "2.4.3",
+        "@docusaurus/types": "2.4.3",
+        "@docusaurus/utils": "2.4.3",
+        "@docusaurus/utils-common": "2.4.3",
+        "@docusaurus/utils-validation": "2.4.3",
+        "@mdx-js/react": "^1.6.22",
+        "clsx": "^1.2.1",
+        "copy-text-to-clipboard": "^3.0.1",
+        "infima": "0.2.0-alpha.43",
+        "lodash": "^4.17.21",
+        "nprogress": "^0.2.0",
+        "postcss": "^8.4.14",
+        "prism-react-renderer": "^1.3.5",
+        "prismjs": "^1.28.0",
+        "react-router-dom": "^5.3.3",
+        "rtlcss": "^3.5.0",
+        "tslib": "^2.4.0",
+        "utility-types": "^3.10.0"
+      },
+      "engines": {
+        "node": ">=16.14"
+      },
+      "peerDependencies": {
+        "react": "^16.8.4 || ^17.0.0",
+        "react-dom": "^16.8.4 || ^17.0.0"
+      }
+    },
+    "node_modules/@docusaurus/theme-common": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmmirror.com/@docusaurus/theme-common/-/theme-common-2.4.3.tgz",
+      "integrity": "sha512-7KaDJBXKBVGXw5WOVt84FtN8czGWhM0lbyWEZXGp8AFfL6sZQfRTluFp4QriR97qwzSyOfQb+nzcDZZU4tezUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@docusaurus/mdx-loader": "2.4.3",
+        "@docusaurus/module-type-aliases": "2.4.3",
+        "@docusaurus/plugin-content-blog": "2.4.3",
+        "@docusaurus/plugin-content-docs": "2.4.3",
+        "@docusaurus/plugin-content-pages": "2.4.3",
+        "@docusaurus/utils": "2.4.3",
+        "@docusaurus/utils-common": "2.4.3",
+        "@types/history": "^4.7.11",
+        "@types/react": "*",
+        "@types/react-router-config": "*",
+        "clsx": "^1.2.1",
+        "parse-numeric-range": "^1.3.0",
+        "prism-react-renderer": "^1.3.5",
+        "tslib": "^2.4.0",
+        "use-sync-external-store": "^1.2.0",
+        "utility-types": "^3.10.0"
+      },
+      "engines": {
+        "node": ">=16.14"
+      },
+      "peerDependencies": {
+        "react": "^16.8.4 || ^17.0.0",
+        "react-dom": "^16.8.4 || ^17.0.0"
+      }
+    },
+    "node_modules/@docusaurus/theme-search-algolia": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmmirror.com/@docusaurus/theme-search-algolia/-/theme-search-algolia-2.4.3.tgz",
+      "integrity": "sha512-jziq4f6YVUB5hZOB85ELATwnxBz/RmSLD3ksGQOLDPKVzat4pmI8tddNWtriPpxR04BNT+ZfpPUMFkNFetSW1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@docsearch/react": "^3.1.1",
+        "@docusaurus/core": "2.4.3",
+        "@docusaurus/logger": "2.4.3",
+        "@docusaurus/plugin-content-docs": "2.4.3",
+        "@docusaurus/theme-common": "2.4.3",
+        "@docusaurus/theme-translations": "2.4.3",
+        "@docusaurus/utils": "2.4.3",
+        "@docusaurus/utils-validation": "2.4.3",
+        "algoliasearch": "^4.13.1",
+        "algoliasearch-helper": "^3.10.0",
+        "clsx": "^1.2.1",
+        "eta": "^2.0.0",
+        "fs-extra": "^10.1.0",
+        "lodash": "^4.17.21",
+        "tslib": "^2.4.0",
+        "utility-types": "^3.10.0"
+      },
+      "engines": {
+        "node": ">=16.14"
+      },
+      "peerDependencies": {
+        "react": "^16.8.4 || ^17.0.0",
+        "react-dom": "^16.8.4 || ^17.0.0"
+      }
+    },
+    "node_modules/@docusaurus/theme-translations": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmmirror.com/@docusaurus/theme-translations/-/theme-translations-2.4.3.tgz",
+      "integrity": "sha512-H4D+lbZbjbKNS/Zw1Lel64PioUAIT3cLYYJLUf3KkuO/oc9e0QCVhIYVtUI2SfBCF2NNdlyhBDQEEMygsCedIg==",
+      "license": "MIT",
+      "dependencies": {
+        "fs-extra": "^10.1.0",
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">=16.14"
+      }
+    },
+    "node_modules/@docusaurus/types": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmmirror.com/@docusaurus/types/-/types-2.4.3.tgz",
+      "integrity": "sha512-W6zNLGQqfrp/EoPD0bhb9n7OobP+RHpmvVzpA+Z/IuU3Q63njJM24hmT0GYboovWcDtFmnIJC9wcyx4RVPQscw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*",
+        "commander": "^5.1.0",
+        "joi": "^17.6.0",
+        "react-helmet-async": "^1.3.0",
+        "utility-types": "^3.10.0",
+        "webpack": "^5.73.0",
+        "webpack-merge": "^5.8.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.4 || ^17.0.0",
+        "react-dom": "^16.8.4 || ^17.0.0"
+      }
+    },
+    "node_modules/@docusaurus/utils": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmmirror.com/@docusaurus/utils/-/utils-2.4.3.tgz",
+      "integrity": "sha512-fKcXsjrD86Smxv8Pt0TBFqYieZZCPh4cbf9oszUq/AMhZn3ujwpKaVYZACPX8mmjtYx0JOgNx52CREBfiGQB4A==",
+      "license": "MIT",
+      "dependencies": {
+        "@docusaurus/logger": "2.4.3",
+        "@svgr/webpack": "^6.2.1",
+        "escape-string-regexp": "^4.0.0",
+        "file-loader": "^6.2.0",
+        "fs-extra": "^10.1.0",
+        "github-slugger": "^1.4.0",
+        "globby": "^11.1.0",
+        "gray-matter": "^4.0.3",
+        "js-yaml": "^4.1.0",
+        "lodash": "^4.17.21",
+        "micromatch": "^4.0.5",
+        "resolve-pathname": "^3.0.0",
+        "shelljs": "^0.8.5",
+        "tslib": "^2.4.0",
+        "url-loader": "^4.1.1",
+        "webpack": "^5.73.0"
+      },
+      "engines": {
+        "node": ">=16.14"
+      },
+      "peerDependencies": {
+        "@docusaurus/types": "*"
+      },
+      "peerDependenciesMeta": {
+        "@docusaurus/types": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@docusaurus/utils-common": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmmirror.com/@docusaurus/utils-common/-/utils-common-2.4.3.tgz",
+      "integrity": "sha512-/jascp4GbLQCPVmcGkPzEQjNaAk3ADVfMtudk49Ggb+131B1WDD6HqlSmDf8MxGdy7Dja2gc+StHf01kiWoTDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">=16.14"
+      },
+      "peerDependencies": {
+        "@docusaurus/types": "*"
+      },
+      "peerDependenciesMeta": {
+        "@docusaurus/types": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@docusaurus/utils-validation": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmmirror.com/@docusaurus/utils-validation/-/utils-validation-2.4.3.tgz",
+      "integrity": "sha512-G2+Vt3WR5E/9drAobP+hhZQMaswRwDlp6qOMi7o7ZypB+VO7N//DZWhZEwhcRGepMDJGQEwtPv7UxtYwPL9PBw==",
+      "license": "MIT",
+      "dependencies": {
+        "@docusaurus/logger": "2.4.3",
+        "@docusaurus/utils": "2.4.3",
+        "joi": "^17.6.0",
+        "js-yaml": "^4.1.0",
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">=16.14"
+      }
+    },
+    "node_modules/@hapi/hoek": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
+      "integrity": "sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@hapi/topo": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@hapi/topo/-/topo-5.1.0.tgz",
+      "integrity": "sha512-foQZKJig7Ob0BMAYBfcJk8d77QtOe7Wo4ox7ff1lQYoNNAb6jwcY1ncdoy2e9wQZzvNy7ODZCYJkK8kzmcAnAg==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@hapi/hoek": "^9.0.0"
+      }
+    },
+    "node_modules/@headlessui/react": {
+      "version": "1.7.17",
+      "resolved": "https://registry.npmmirror.com/@headlessui/react/-/react-1.7.17.tgz",
+      "integrity": "sha512-4am+tzvkqDSSgiwrsEpGWqgGo9dz8qU5M3znCkC4PgkpY4HcCZzEDEvozltGGGHIKl9jbXbZPSH5TWn4sWJdow==",
+      "license": "MIT",
+      "dependencies": {
+        "client-only": "^0.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18",
+        "react-dom": "^16 || ^17 || ^18"
+      }
+    },
+    "node_modules/@jest/schemas": {
+      "version": "29.4.3",
+      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.4.3.tgz",
+      "integrity": "sha512-VLYKXQmtmuEz6IxJsrZwzG9NvtkQsWNnWMsKxqWNu3+CnfzJQhp0WDDKWLVV9hLKr0l3SLLFRqcYHjhtyuDVxg==",
+      "license": "MIT",
+      "dependencies": {
+        "@sinclair/typebox": "^0.25.16"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@jest/types": {
+      "version": "29.5.0",
+      "resolved": "https://registry.npmjs.org/@jest/types/-/types-29.5.0.tgz",
+      "integrity": "sha512-qbu7kN6czmVRc3xWFQcAN03RAUamgppVUdXrvl1Wr3jlNF93o9mJbGcDWrwGB6ht44u7efB1qCFgVQmca24Uog==",
+      "license": "MIT",
+      "dependencies": {
+        "@jest/schemas": "^29.4.3",
+        "@types/istanbul-lib-coverage": "^2.0.0",
+        "@types/istanbul-reports": "^3.0.0",
+        "@types/node": "*",
+        "@types/yargs": "^17.0.8",
+        "chalk": "^4.0.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
+      "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
+      "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/source-map": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.3.tgz",
+      "integrity": "sha512-b+fsZXeLYi9fEULmfBrhxn4IrPlINf8fiNarzTof004v3lFdntdwa9PF7vFJqm3mg7s+ScJMxXaE3Acp1irZcg==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.4.15",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.18",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz",
+      "integrity": "sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "3.1.0",
+        "@jridgewell/sourcemap-codec": "1.4.14"
+      }
+    },
+    "node_modules/@jridgewell/trace-mapping/node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.4.14",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
+      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
+      "license": "MIT"
+    },
+    "node_modules/@leichtgewicht/ip-codec": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
+      "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==",
+      "license": "MIT"
+    },
+    "node_modules/@mdx-js/mdx": {
+      "version": "1.6.22",
+      "resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-1.6.22.tgz",
+      "integrity": "sha512-AMxuLxPz2j5/6TpF/XSdKpQP1NlG0z11dFOlq+2IP/lSgl11GY8ji6S/rgsViN/L0BDvHvUMruRb7ub+24LUYA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "7.12.9",
+        "@babel/plugin-syntax-jsx": "7.12.1",
+        "@babel/plugin-syntax-object-rest-spread": "7.8.3",
+        "@mdx-js/util": "1.6.22",
+        "babel-plugin-apply-mdx-type-prop": "1.6.22",
+        "babel-plugin-extract-import-names": "1.6.22",
+        "camelcase-css": "2.0.1",
+        "detab": "2.0.4",
+        "hast-util-raw": "6.0.1",
+        "lodash.uniq": "4.5.0",
+        "mdast-util-to-hast": "10.0.1",
+        "remark-footnotes": "2.0.0",
+        "remark-mdx": "1.6.22",
+        "remark-parse": "8.0.3",
+        "remark-squeeze-paragraphs": "4.0.0",
+        "style-to-object": "0.3.0",
+        "unified": "9.2.0",
+        "unist-builder": "2.0.3",
+        "unist-util-visit": "2.0.3"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@mdx-js/mdx/node_modules/@babel/core": {
+      "version": "7.12.9",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.12.9.tgz",
+      "integrity": "sha512-gTXYh3M5wb7FRXQy+FErKFAv90BnlOuNn1QkCK2lREoPAjrQCO49+HVSrFoe5uakFAF5eenS75KbO2vQiLrTMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/generator": "^7.12.5",
+        "@babel/helper-module-transforms": "^7.12.1",
+        "@babel/helpers": "^7.12.5",
+        "@babel/parser": "^7.12.7",
+        "@babel/template": "^7.12.7",
+        "@babel/traverse": "^7.12.9",
+        "@babel/types": "^7.12.7",
+        "convert-source-map": "^1.7.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.1",
+        "json5": "^2.1.2",
+        "lodash": "^4.17.19",
+        "resolve": "^1.3.2",
+        "semver": "^5.4.1",
+        "source-map": "^0.5.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@mdx-js/mdx/node_modules/@babel/plugin-syntax-jsx": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.12.1.tgz",
+      "integrity": "sha512-1yRi7yAtB0ETgxdY9ti/p2TivUxJkTdhu/ZbF9MshVGqOx1TdB3b7xCXs49Fupgg50N45KcAsRP/ZqWjs9SRjg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@mdx-js/mdx/node_modules/semver": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/@mdx-js/mdx/node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@mdx-js/mdx/node_modules/unified": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/unified/-/unified-9.2.0.tgz",
+      "integrity": "sha512-vx2Z0vY+a3YoTj8+pttM3tiJHCwY5UFbYdiWrwBEbHmK8pvsPj2rtAX2BFfgXen8T39CJWblWRDT4L5WGXtDdg==",
+      "license": "MIT",
+      "dependencies": {
+        "bail": "^1.0.0",
+        "extend": "^3.0.0",
+        "is-buffer": "^2.0.0",
+        "is-plain-obj": "^2.0.0",
+        "trough": "^1.0.0",
+        "vfile": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@mdx-js/react": {
+      "version": "1.6.22",
+      "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-1.6.22.tgz",
+      "integrity": "sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      },
+      "peerDependencies": {
+        "react": "^16.13.1 || ^17.0.0"
+      }
+    },
+    "node_modules/@mdx-js/util": {
+      "version": "1.6.22",
+      "resolved": "https://registry.npmjs.org/@mdx-js/util/-/util-1.6.22.tgz",
+      "integrity": "sha512-H1rQc1ZOHANWBvPcW+JpGwr+juXSxM8Q8YCkm3GhZd8REu1fHR3z99CErO1p9pkcfcxZnMdIZdIsXkOHY0NilA==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@polka/url": {
+      "version": "1.0.0-next.21",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",
+      "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
+      "license": "MIT"
+    },
+    "node_modules/@sideway/address": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",
+      "integrity": "sha512-7vwq+rOHVWjyXxVlR76Agnvhy8I9rpzjosTESvmhNeXOXdZZB15Fl+TI9x1SiHZH5Jv2wTGduSxFDIaq0m3DUw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@hapi/hoek": "^9.0.0"
+      }
+    },
+    "node_modules/@sideway/formula": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@sideway/formula/-/formula-3.0.1.tgz",
+      "integrity": "sha512-/poHZJJVjx3L+zVD6g9KgHfYnb443oi7wLu/XKojDviHy6HOEOA6z1Trk5aR1dGcmPenJEgb2sK2I80LeS3MIg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@sideway/pinpoint": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@sideway/pinpoint/-/pinpoint-2.0.0.tgz",
+      "integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@sinclair/typebox": {
+      "version": "0.25.24",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.25.24.tgz",
+      "integrity": "sha512-XJfwUVUKDHF5ugKwIcxEgc9k8b7HbznCp6eUfWgu710hMPNIO4aw4/zB5RogDQz8nd6gyCDpU9O/m6qYEWY6yQ==",
+      "license": "MIT"
+    },
+    "node_modules/@sindresorhus/is": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz",
+      "integrity": "sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@slorber/static-site-generator-webpack-plugin": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/@slorber/static-site-generator-webpack-plugin/-/static-site-generator-webpack-plugin-4.0.7.tgz",
+      "integrity": "sha512-Ug7x6z5lwrz0WqdnNFOMYrDQNTPAprvHLSh6+/fmml3qUiz6l5eq+2MzLKWtn/q5K5NpSiFsZTP/fck/3vjSxA==",
+      "license": "MIT",
+      "dependencies": {
+        "eval": "^0.1.8",
+        "p-map": "^4.0.0",
+        "webpack-sources": "^3.2.2"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-6.5.1.tgz",
+      "integrity": "sha512-9PYGcXrAxitycIjRmZB+Q0JaN07GZIWaTBIGQzfaZv+qr1n8X1XUEJ5rZ/vx6OVD9RRYlrNnXWExQXcmZeD/BQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-remove-jsx-attribute": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-8.0.0.tgz",
+      "integrity": "sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-remove-jsx-empty-expression": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-8.0.0.tgz",
+      "integrity": "sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-6.5.1.tgz",
+      "integrity": "sha512-8DPaVVE3fd5JKuIC29dqyMB54sA6mfgki2H2+swh+zNJoynC8pMPzOkidqHOSc6Wj032fhl8Z0TVn1GiPpAiJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-svg-dynamic-title": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-6.5.1.tgz",
+      "integrity": "sha512-FwOEi0Il72iAzlkaHrlemVurgSQRDFbk0OC8dSvD5fSBPHltNh7JtLsxmZUhjYBZo2PpcU/RJvvi6Q0l7O7ogw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-svg-em-dimensions": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-6.5.1.tgz",
+      "integrity": "sha512-gWGsiwjb4tw+ITOJ86ndY/DZZ6cuXMNE/SjcDRg+HLuCmwpcjOktwRF9WgAiycTqJD/QXqL2f8IzE2Rzh7aVXA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-transform-react-native-svg": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-6.5.1.tgz",
+      "integrity": "sha512-2jT3nTayyYP7kI6aGutkyfJ7UMGtuguD72OjeGLwVNyfPRBD8zQthlvL+fAbAKk5n9ZNcvFkp/b1lZ7VsYqVJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-transform-svg-component": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-6.5.1.tgz",
+      "integrity": "sha512-a1p6LF5Jt33O3rZoVRBqdxL350oge54iZWHNI6LJB5tQ7EelvD/Mb1mfBiZNAan0dt4i3VArkFRjA4iObuNykQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-preset": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-6.5.1.tgz",
+      "integrity": "sha512-6127fvO/FF2oi5EzSQOAjo1LE3OtNVh11R+/8FXa+mHx1ptAaS4cknIjnUA7e6j6fwGGJ17NzaTJFUwOV2zwCw==",
+      "license": "MIT",
+      "dependencies": {
+        "@svgr/babel-plugin-add-jsx-attribute": "^6.5.1",
+        "@svgr/babel-plugin-remove-jsx-attribute": "*",
+        "@svgr/babel-plugin-remove-jsx-empty-expression": "*",
+        "@svgr/babel-plugin-replace-jsx-attribute-value": "^6.5.1",
+        "@svgr/babel-plugin-svg-dynamic-title": "^6.5.1",
+        "@svgr/babel-plugin-svg-em-dimensions": "^6.5.1",
+        "@svgr/babel-plugin-transform-react-native-svg": "^6.5.1",
+        "@svgr/babel-plugin-transform-svg-component": "^6.5.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/core": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@svgr/core/-/core-6.5.1.tgz",
+      "integrity": "sha512-/xdLSWxK5QkqG524ONSjvg3V/FkNyCv538OIBdQqPNaAta3AsXj/Bd2FbvR87yMbXO2hFSWiAe/Q6IkVPDw+mw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.19.6",
+        "@svgr/babel-preset": "^6.5.1",
+        "@svgr/plugin-jsx": "^6.5.1",
+        "camelcase": "^6.2.0",
+        "cosmiconfig": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@svgr/hast-util-to-babel-ast": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-6.5.1.tgz",
+      "integrity": "sha512-1hnUxxjd83EAxbL4a0JDJoD3Dao3hmjvyvyEV8PzWmLK3B9m9NPlW7GKjFyoWE8nM7HnXzPcmmSyOW8yOddSXw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.20.0",
+        "entities": "^4.4.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@svgr/plugin-jsx": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-6.5.1.tgz",
+      "integrity": "sha512-+UdQxI3jgtSjCykNSlEMuy1jSRQlGC7pqBCPvkG/2dATdWo082zHTTK3uhnAju2/6XpE6B5mZ3z4Z8Ns01S8Gw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.19.6",
+        "@svgr/babel-preset": "^6.5.1",
+        "@svgr/hast-util-to-babel-ast": "^6.5.1",
+        "svg-parser": "^2.0.4"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@svgr/core": "^6.0.0"
+      }
+    },
+    "node_modules/@svgr/plugin-svgo": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@svgr/plugin-svgo/-/plugin-svgo-6.5.1.tgz",
+      "integrity": "sha512-omvZKf8ixP9z6GWgwbtmP9qQMPX4ODXi+wzbVZgomNFsUIlHA1sf4fThdwTWSsZGgvGAG6yE+b/F5gWUkcZ/iQ==",
+      "license": "MIT",
+      "dependencies": {
+        "cosmiconfig": "^7.0.1",
+        "deepmerge": "^4.2.2",
+        "svgo": "^2.8.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@svgr/core": "*"
+      }
+    },
+    "node_modules/@svgr/webpack": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@svgr/webpack/-/webpack-6.5.1.tgz",
+      "integrity": "sha512-cQ/AsnBkXPkEK8cLbv4Dm7JGXq2XrumKnL1dRpJD9rIO2fTIlJI9a1uCciYG1F2aUsox/hJQyNGbt3soDxSRkA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.19.6",
+        "@babel/plugin-transform-react-constant-elements": "^7.18.12",
+        "@babel/preset-env": "^7.19.4",
+        "@babel/preset-react": "^7.18.6",
+        "@babel/preset-typescript": "^7.18.6",
+        "@svgr/core": "^6.5.1",
+        "@svgr/plugin-jsx": "^6.5.1",
+        "@svgr/plugin-svgo": "^6.5.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@szmarczak/http-timer": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz",
+      "integrity": "sha512-XIB2XbzHTN6ieIjfIMV9hlVcfPU26s2vafYWQcZHWXHOxiaRZYEDKEwdl129Zyg50+foYV2jCgtrqSA6qNuNSA==",
+      "license": "MIT",
+      "dependencies": {
+        "defer-to-connect": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@trysound/sax": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
+      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/@tsconfig/docusaurus": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@tsconfig/docusaurus/-/docusaurus-1.0.7.tgz",
+      "integrity": "sha512-ffTXxGIP/IRMCjuzHd6M4/HdIrw1bMfC7Bv8hMkTadnePkpe0lG0oDSdbRpSDZb2rQMAgpbWiR10BvxvNYwYrg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/body-parser": {
+      "version": "1.19.2",
+      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
+      "integrity": "sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/connect": "*",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/bonjour": {
+      "version": "3.5.10",
+      "resolved": "https://registry.npmjs.org/@types/bonjour/-/bonjour-3.5.10.tgz",
+      "integrity": "sha512-p7ienRMiS41Nu2/igbJxxLDWrSZ0WxM8UQgCeO9KhoVF7cOVFkrKsiDr1EsJIla8vV3oEEjGcz11jc5yimhzZw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/connect": {
+      "version": "3.4.35",
+      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
+      "integrity": "sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/connect-history-api-fallback": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.5.0.tgz",
+      "integrity": "sha512-4x5FkPpLipqwthjPsF7ZRbOv3uoLUFkTA9G9v583qi4pACvq0uTELrB8OLUzPWUI4IJIyvM85vzkV1nyiI2Lig==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/express-serve-static-core": "*",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/eslint": {
+      "version": "8.40.0",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.40.0.tgz",
+      "integrity": "sha512-nbq2mvc/tBrK9zQQuItvjJl++GTN5j06DaPtp3hZCpngmG6Q3xoyEmd0TwZI0gAy/G1X0zhGBbr2imsGFdFV0g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "*",
+        "@types/json-schema": "*"
+      }
+    },
+    "node_modules/@types/eslint-scope": {
+      "version": "3.7.4",
+      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.4.tgz",
+      "integrity": "sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/eslint": "*",
+        "@types/estree": "*"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz",
+      "integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/express": {
+      "version": "4.17.17",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.17.tgz",
+      "integrity": "sha512-Q4FmmuLGBG58btUnfS1c1r/NQdlp3DMfGDGig8WhfpA2YRUtEkxAjkZb0yvplJGYdF1fsQ81iMDcH24sSCNC/Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/body-parser": "*",
+        "@types/express-serve-static-core": "^4.17.33",
+        "@types/qs": "*",
+        "@types/serve-static": "*"
+      }
+    },
+    "node_modules/@types/express-serve-static-core": {
+      "version": "4.17.35",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.35.tgz",
+      "integrity": "sha512-wALWQwrgiB2AWTT91CB62b6Yt0sNHpznUXeZEcnPU3DRdlDIz74x8Qg1UUYKSVFi+va5vKOLYRBI1bRKiLLKIg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*",
+        "@types/qs": "*",
+        "@types/range-parser": "*",
+        "@types/send": "*"
+      }
+    },
+    "node_modules/@types/hast": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.4.tgz",
+      "integrity": "sha512-wLEm0QvaoawEDoTRwzTXp4b4jpwiJDvR5KMnFnVodm3scufTlBOWRD6N1OBf9TZMhjlNsSfcO5V+7AF4+Vy+9g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
+    "node_modules/@types/history": {
+      "version": "4.7.11",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
+      "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/html-minifier-terser": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
+      "integrity": "sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/http-proxy": {
+      "version": "1.17.11",
+      "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.11.tgz",
+      "integrity": "sha512-HC8G7c1WmaF2ekqpnFq626xd3Zz0uvaqFmBJNRZCGEZCXkvSdJoNFn/8Ygbd9fKNQj8UzLdCETaI0UWPAjK7IA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/istanbul-lib-coverage": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz",
+      "integrity": "sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/istanbul-lib-report": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz",
+      "integrity": "sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/istanbul-lib-coverage": "*"
+      }
+    },
+    "node_modules/@types/istanbul-reports": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
+      "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/istanbul-lib-report": "*"
+      }
+    },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.12",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz",
+      "integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/mdast": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.11.tgz",
+      "integrity": "sha512-Y/uImid8aAwrEA24/1tcRZwpxX3pIFTSilcNDKSPn+Y2iDywSEachzRuvgAYYLR3wpGXAsMbv5lvKLDZLeYPAw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
+    "node_modules/@types/mime": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
+      "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "20.2.5",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.2.5.tgz",
+      "integrity": "sha512-JJulVEQXmiY9Px5axXHeYGLSjhkZEnD+MDPDGbCbIAbMslkKwmygtZFy1X6s/075Yo94sf8GuSlFfPzysQrWZQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/parse5": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-5.0.3.tgz",
+      "integrity": "sha512-kUNnecmtkunAoQ3CnjmMkzNU/gtxG8guhi+Fk2U/kOpIKjIMKnXGp4IJCgQJrXSgMsWYimYG4TGjz/UzbGEBTw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.5",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
+      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
+      "license": "MIT"
+    },
+    "node_modules/@types/qs": {
+      "version": "6.9.7",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
+      "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/range-parser": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
+      "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "18.2.7",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.7.tgz",
+      "integrity": "sha512-ojrXpSH2XFCmHm7Jy3q44nXDyN54+EYKP2lBhJ2bqfyPj6cIUW/FZW/Csdia34NQgq7KYcAlHi5184m4X88+yw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-router": {
+      "version": "5.1.20",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
+      "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-router-config": {
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/@types/react-router-config/-/react-router-config-5.0.7.tgz",
+      "integrity": "sha512-pFFVXUIydHlcJP6wJm7sDii5mD/bCmmAY0wQzq+M+uX7bqS95AQqHZWP1iNMKrWVQSuHIzj5qi9BvrtLX2/T4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*",
+        "@types/react-router": "^5.1.0"
+      }
+    },
+    "node_modules/@types/react-router-dom": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
+      "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*",
+        "@types/react-router": "*"
+      }
+    },
+    "node_modules/@types/retry": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
+      "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/sax": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@types/sax/-/sax-1.2.4.tgz",
+      "integrity": "sha512-pSAff4IAxJjfAXUG6tFkO7dsSbTmf8CtUpfhhZ5VhkRpC4628tJhh3+V6H1E+/Gs9piSzYKT5yzHO5M4GG9jkw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/scheduler": {
+      "version": "0.16.3",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
+      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/send": {
+      "version": "0.17.1",
+      "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.1.tgz",
+      "integrity": "sha512-Cwo8LE/0rnvX7kIIa3QHCkcuF21c05Ayb0ZfxPiv0W8VRiZiNW/WuRupHKpqqGVGf7SUA44QSOUKaEd9lIrd/Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mime": "^1",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/serve-index": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz",
+      "integrity": "sha512-d/Hs3nWDxNL2xAczmOVZNj92YZCS6RGxfBPjKzuu/XirCgXdpKEb88dYNbrYGint6IVWLNP+yonwVAuRC0T2Dg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/express": "*"
+      }
+    },
+    "node_modules/@types/serve-static": {
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.1.tgz",
+      "integrity": "sha512-NUo5XNiAdULrJENtJXZZ3fHtfMolzZwczzBbnAeBbqBwG+LaG6YaJtuwzwGSQZ2wsCrxjEhNNjAkKigy3n8teQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mime": "*",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/sockjs": {
+      "version": "0.3.33",
+      "resolved": "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.33.tgz",
+      "integrity": "sha512-f0KEEe05NvUnat+boPTZ0dgaLZ4SfSouXUgv5noUiefG2ajgKjmETo9ZJyuqsl7dfl2aHlLJUiki6B4ZYldiiw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/unist": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
+      "integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/ws": {
+      "version": "8.5.4",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.4.tgz",
+      "integrity": "sha512-zdQDHKUgcX/zBc4GrwsE/7dVdAD8JR4EuiAXiiUhhfyIJXXb2+PrGshFyeXWQPMmmZ2XxgaqclgpIC7eTXc1mg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/yargs": {
+      "version": "17.0.24",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.24.tgz",
+      "integrity": "sha512-6i0aC7jV6QzQB8ne1joVZ0eSFIstHsCrobmOtghM11yGlH0j43FKL2UhWdELkyps0zuf7qVTUVCCR+tgSlyLLw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/yargs-parser": "*"
+      }
+    },
+    "node_modules/@types/yargs-parser": {
+      "version": "21.0.0",
+      "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.0.tgz",
+      "integrity": "sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==",
+      "license": "MIT"
+    },
+    "node_modules/@webassemblyjs/ast": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz",
+      "integrity": "sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/helper-numbers": "1.11.6",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6"
+      }
+    },
+    "node_modules/@webassemblyjs/floating-point-hex-parser": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz",
+      "integrity": "sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw==",
+      "license": "MIT"
+    },
+    "node_modules/@webassemblyjs/helper-api-error": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz",
+      "integrity": "sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==",
+      "license": "MIT"
+    },
+    "node_modules/@webassemblyjs/helper-buffer": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.6.tgz",
+      "integrity": "sha512-z3nFzdcp1mb8nEOFFk8DrYLpHvhKC3grJD2ardfKOzmbmJvEf/tPIqCY+sNcwZIY8ZD7IkB2l7/pqhUhqm7hLA==",
+      "license": "MIT"
+    },
+    "node_modules/@webassemblyjs/helper-numbers": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz",
+      "integrity": "sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==",
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/floating-point-hex-parser": "1.11.6",
+        "@webassemblyjs/helper-api-error": "1.11.6",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@webassemblyjs/helper-wasm-bytecode": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz",
+      "integrity": "sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==",
+      "license": "MIT"
+    },
+    "node_modules/@webassemblyjs/helper-wasm-section": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.6.tgz",
+      "integrity": "sha512-LPpZbSOwTpEC2cgn4hTydySy1Ke+XEu+ETXuoyvuyezHO3Kjdu90KK95Sh9xTbmjrCsUwvWwCOQQNta37VrS9g==",
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.11.6",
+        "@webassemblyjs/helper-buffer": "1.11.6",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+        "@webassemblyjs/wasm-gen": "1.11.6"
+      }
+    },
+    "node_modules/@webassemblyjs/ieee754": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz",
+      "integrity": "sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==",
+      "license": "MIT",
+      "dependencies": {
+        "@xtuc/ieee754": "^1.2.0"
+      }
+    },
+    "node_modules/@webassemblyjs/leb128": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.6.tgz",
+      "integrity": "sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@webassemblyjs/utf8": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.6.tgz",
+      "integrity": "sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==",
+      "license": "MIT"
+    },
+    "node_modules/@webassemblyjs/wasm-edit": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.6.tgz",
+      "integrity": "sha512-Ybn2I6fnfIGuCR+Faaz7YcvtBKxvoLV3Lebn1tM4o/IAJzmi9AWYIPWpyBfU8cC+JxAO57bk4+zdsTjJR+VTOw==",
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.11.6",
+        "@webassemblyjs/helper-buffer": "1.11.6",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+        "@webassemblyjs/helper-wasm-section": "1.11.6",
+        "@webassemblyjs/wasm-gen": "1.11.6",
+        "@webassemblyjs/wasm-opt": "1.11.6",
+        "@webassemblyjs/wasm-parser": "1.11.6",
+        "@webassemblyjs/wast-printer": "1.11.6"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-gen": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.6.tgz",
+      "integrity": "sha512-3XOqkZP/y6B4F0PBAXvI1/bky7GryoogUtfwExeP/v7Nzwo1QLcq5oQmpKlftZLbT+ERUOAZVQjuNVak6UXjPA==",
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.11.6",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+        "@webassemblyjs/ieee754": "1.11.6",
+        "@webassemblyjs/leb128": "1.11.6",
+        "@webassemblyjs/utf8": "1.11.6"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-opt": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.6.tgz",
+      "integrity": "sha512-cOrKuLRE7PCe6AsOVl7WasYf3wbSo4CeOk6PkrjS7g57MFfVUF9u6ysQBBODX0LdgSvQqRiGz3CXvIDKcPNy4g==",
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.11.6",
+        "@webassemblyjs/helper-buffer": "1.11.6",
+        "@webassemblyjs/wasm-gen": "1.11.6",
+        "@webassemblyjs/wasm-parser": "1.11.6"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-parser": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.6.tgz",
+      "integrity": "sha512-6ZwPeGzMJM3Dqp3hCsLgESxBGtT/OeCvCZ4TA1JUPYgmhAx38tTPR9JaKy0S5H3evQpO/h2uWs2j6Yc/fjkpTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.11.6",
+        "@webassemblyjs/helper-api-error": "1.11.6",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+        "@webassemblyjs/ieee754": "1.11.6",
+        "@webassemblyjs/leb128": "1.11.6",
+        "@webassemblyjs/utf8": "1.11.6"
+      }
+    },
+    "node_modules/@webassemblyjs/wast-printer": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.6.tgz",
+      "integrity": "sha512-JM7AhRcE+yW2GWYaKeHL5vt4xqee5N2WcezptmgyhNS+ScggqcT1OtXykhAb13Sn5Yas0j2uv9tHgrjwvzAP4A==",
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.11.6",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@xtuc/ieee754": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
+      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@xtuc/long": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
+      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/accepts": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/accepts/node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/accepts/node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.8.2",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
+      "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-import-assertions": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz",
+      "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^8"
+      }
+    },
+    "node_modules/acorn-walk": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
+      "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/address": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/address/-/address-1.2.2.tgz",
+      "integrity": "sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/aggregate-error": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
+      "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==",
+      "license": "MIT",
+      "dependencies": {
+        "clean-stack": "^2.0.0",
+        "indent-string": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ajv-formats": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
+      "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ajv": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ajv-formats/node_modules/ajv": {
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ajv-formats/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "license": "MIT"
+    },
+    "node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/algoliasearch": {
+      "version": "4.17.1",
+      "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.17.1.tgz",
+      "integrity": "sha512-4GDQ1RhP2qUR3x8PevFRbEdqZqIARNViZYjgTJmA1T7wRNtFA3W4Aqc/RsODqa1J8IO/QDla5x4tWuUS8NV8wA==",
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/cache-browser-local-storage": "4.17.1",
+        "@algolia/cache-common": "4.17.1",
+        "@algolia/cache-in-memory": "4.17.1",
+        "@algolia/client-account": "4.17.1",
+        "@algolia/client-analytics": "4.17.1",
+        "@algolia/client-common": "4.17.1",
+        "@algolia/client-personalization": "4.17.1",
+        "@algolia/client-search": "4.17.1",
+        "@algolia/logger-common": "4.17.1",
+        "@algolia/logger-console": "4.17.1",
+        "@algolia/requester-browser-xhr": "4.17.1",
+        "@algolia/requester-common": "4.17.1",
+        "@algolia/requester-node-http": "4.17.1",
+        "@algolia/transporter": "4.17.1"
+      }
+    },
+    "node_modules/algoliasearch-helper": {
+      "version": "3.13.0",
+      "resolved": "https://registry.npmjs.org/algoliasearch-helper/-/algoliasearch-helper-3.13.0.tgz",
+      "integrity": "sha512-kV3c1jMQCvkARtGsSDvAwuht4PAMSsQILqPiH4WFiARoa3jXJ/r1TQoBWAjWyWF48rsNYCv7kzxgB4LTxrvvuw==",
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/events": "^4.0.1"
+      },
+      "peerDependencies": {
+        "algoliasearch": ">= 3.1 < 6"
+      }
+    },
+    "node_modules/algoliasearch/node_modules/@algolia/client-common": {
+      "version": "4.17.1",
+      "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.17.1.tgz",
+      "integrity": "sha512-+r7kg4EgbFnGsDnoGSVNtXZO8xvZ0vzf1WAOV7sqV9PMf1bp6cpJP/3IuPrSk4t5w2KVl+pC8jfTM7HcFlfBEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/requester-common": "4.17.1",
+        "@algolia/transporter": "4.17.1"
+      }
+    },
+    "node_modules/algoliasearch/node_modules/@algolia/client-search": {
+      "version": "4.17.1",
+      "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.17.1.tgz",
+      "integrity": "sha512-Q5YfT5gVkx60PZDQBqp/zH9aUbBdC7HVvxupiHUgnCKqRQsRZjOhLest7AI6FahepuZLBZS62COrO7v+JvKY7w==",
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/client-common": "4.17.1",
+        "@algolia/requester-common": "4.17.1",
+        "@algolia/transporter": "4.17.1"
+      }
+    },
+    "node_modules/algoliasearch/node_modules/@algolia/requester-browser-xhr": {
+      "version": "4.17.1",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.17.1.tgz",
+      "integrity": "sha512-W5mGfGDsyfVR+r4pUFrYLGBEM18gs38+GNt5PE5uPULy4uVTSnnVSkJkWeRkmLBk9zEZ/Nld8m4zavK6dtEuYg==",
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/requester-common": "4.17.1"
+      }
+    },
+    "node_modules/algoliasearch/node_modules/@algolia/requester-node-http": {
+      "version": "4.17.1",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.17.1.tgz",
+      "integrity": "sha512-NzFWecXT6d0PPsQY9L+/qoK2deF74OLcpvqCH+Vh3mh+QzPsFafcBExdguAjZsAWDn1R6JEeFW7/fo/p0SE57w==",
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/requester-common": "4.17.1"
+      }
+    },
+    "node_modules/animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==",
+      "license": "MIT"
+    },
+    "node_modules/ansi-align": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz",
+      "integrity": "sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.1.0"
+      }
+    },
+    "node_modules/ansi-align/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/ansi-align/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-html-community": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
+      "integrity": "sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==",
+      "engines": [
+        "node >= 0.8.0"
+      ],
+      "license": "Apache-2.0",
+      "bin": {
+        "ansi-html": "bin/ansi-html"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "license": "MIT"
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "license": "MIT"
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "license": "Python-2.0"
+    },
+    "node_modules/array-flatten": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz",
+      "integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==",
+      "license": "MIT"
+    },
+    "node_modules/array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==",
+      "license": "MIT"
+    },
+    "node_modules/at-least-node": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
+      "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/autoprefixer": {
+      "version": "10.4.16",
+      "resolved": "https://registry.npmmirror.com/autoprefixer/-/autoprefixer-10.4.16.tgz",
+      "integrity": "sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.21.10",
+        "caniuse-lite": "^1.0.30001538",
+        "fraction.js": "^4.3.6",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.0.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/axios": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.25.0.tgz",
+      "integrity": "sha512-cD8FOb0tRH3uuEe6+evtAbgJtfxr7ly3fQjYcMcuPlgkwVS9xboaVIpcDV+cYQe+yGykgwZCs1pzjntcGa6l5g==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.14.7"
+      }
+    },
+    "node_modules/babel-loader": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.3.0.tgz",
+      "integrity": "sha512-H8SvsMF+m9t15HNLMipppzkC+Y2Yq+v3SonZyU70RBL/h1gxPkH08Ot8pEE9Z4Kd+czyWJClmFS8qzIP9OZ04Q==",
+      "license": "MIT",
+      "dependencies": {
+        "find-cache-dir": "^3.3.1",
+        "loader-utils": "^2.0.0",
+        "make-dir": "^3.1.0",
+        "schema-utils": "^2.6.5"
+      },
+      "engines": {
+        "node": ">= 8.9"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0",
+        "webpack": ">=2"
+      }
+    },
+    "node_modules/babel-plugin-apply-mdx-type-prop": {
+      "version": "1.6.22",
+      "resolved": "https://registry.npmjs.org/babel-plugin-apply-mdx-type-prop/-/babel-plugin-apply-mdx-type-prop-1.6.22.tgz",
+      "integrity": "sha512-VefL+8o+F/DfK24lPZMtJctrCVOfgbqLAGZSkxwhazQv4VxPg3Za/i40fu22KR2m8eEda+IfSOlPLUSIiLcnCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "7.10.4",
+        "@mdx-js/util": "1.6.22"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.11.6"
+      }
+    },
+    "node_modules/babel-plugin-apply-mdx-type-prop/node_modules/@babel/helper-plugin-utils": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz",
+      "integrity": "sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==",
+      "license": "MIT"
+    },
+    "node_modules/babel-plugin-dynamic-import-node": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
+      "integrity": "sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "object.assign": "^4.1.0"
+      }
+    },
+    "node_modules/babel-plugin-extract-import-names": {
+      "version": "1.6.22",
+      "resolved": "https://registry.npmjs.org/babel-plugin-extract-import-names/-/babel-plugin-extract-import-names-1.6.22.tgz",
+      "integrity": "sha512-yJ9BsJaISua7d8zNT7oRG1ZLBJCIdZ4PZqmH8qa9N5AK01ifk3fnkc98AXhtzE7UkfCsEumvoQWgoYLhOnJ7jQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "7.10.4"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/babel-plugin-extract-import-names/node_modules/@babel/helper-plugin-utils": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz",
+      "integrity": "sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==",
+      "license": "MIT"
+    },
+    "node_modules/babel-plugin-polyfill-corejs2": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.3.tgz",
+      "integrity": "sha512-bM3gHc337Dta490gg+/AseNB9L4YLHxq1nGKZZSHbhXv4aTYU2MD2cjza1Ru4S6975YLTaL1K8uJf6ukJhhmtw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.17.7",
+        "@babel/helper-define-polyfill-provider": "^0.4.0",
+        "semver": "^6.1.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-plugin-polyfill-corejs2/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/babel-plugin-polyfill-corejs3": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.8.1.tgz",
+      "integrity": "sha512-ikFrZITKg1xH6pLND8zT14UPgjKHiGLqex7rGEZCH2EvhsneJaJPemmpQaIZV5AL03II+lXylw3UmddDK8RU5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-define-polyfill-provider": "^0.4.0",
+        "core-js-compat": "^3.30.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-plugin-polyfill-regenerator": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.0.tgz",
+      "integrity": "sha512-hDJtKjMLVa7Z+LwnTCxoDLQj6wdc+B8dun7ayF2fYieI6OzfuvcLMB32ihJZ4UhCBwNYGl5bg/x/P9cMdnkc2g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-define-polyfill-provider": "^0.4.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-plugin-prismjs": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-prismjs/-/babel-plugin-prismjs-2.1.0.tgz",
+      "integrity": "sha512-ehzSKYfeAz4U78zi/sfwsjDPlq0LvDKxNefcZTJ/iKBu+plsHsLqZhUeGf1+82LAcA35UZGbU6ksEx2Utphc/g==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "prismjs": "^1.18.0"
+      }
+    },
+    "node_modules/bail": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz",
+      "integrity": "sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "license": "MIT"
+    },
+    "node_modules/base16": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/base16/-/base16-1.0.0.tgz",
+      "integrity": "sha512-pNdYkNPiJUnEhnfXV56+sQy8+AaPcG3POZAUnwr4EeqCUZFz4u2PePbo3e5Gj4ziYPCWGUZT9RHisvJKnwFuBQ==",
+      "license": "MIT"
+    },
+    "node_modules/batch": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
+      "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==",
+      "license": "MIT"
+    },
+    "node_modules/big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/body-parser": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
+      "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "3.1.2",
+        "content-type": "~1.0.4",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.4.24",
+        "on-finished": "2.4.1",
+        "qs": "6.11.0",
+        "raw-body": "2.5.1",
+        "type-is": "~1.6.18",
+        "unpipe": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
+    },
+    "node_modules/body-parser/node_modules/bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/body-parser/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/body-parser/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "license": "MIT"
+    },
+    "node_modules/bonjour-service": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.1.1.tgz",
+      "integrity": "sha512-Z/5lQRMOG9k7W+FkeGTNjh7htqn/2LMnfOvBZ8pynNZCM9MwkQkI3zeI4oz09uWdcgmgHugVvBqxGg4VQJ5PCg==",
+      "license": "MIT",
+      "dependencies": {
+        "array-flatten": "^2.1.2",
+        "dns-equal": "^1.0.0",
+        "fast-deep-equal": "^3.1.3",
+        "multicast-dns": "^7.2.5"
+      }
+    },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "license": "ISC"
+    },
+    "node_modules/boxen": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/boxen/-/boxen-6.2.1.tgz",
+      "integrity": "sha512-H4PEsJXfFI/Pt8sjDWbHlQPx4zL/bvSQjcilJmaulGt5mLDorHOHpmdXAJcBcmru7PhYSp/cDMWRko4ZUMFkSw==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-align": "^3.0.1",
+        "camelcase": "^6.2.0",
+        "chalk": "^4.1.2",
+        "cli-boxes": "^3.0.0",
+        "string-width": "^5.0.1",
+        "type-fest": "^2.5.0",
+        "widest-line": "^4.0.1",
+        "wrap-ansi": "^8.0.1"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.22.1",
+      "resolved": "https://registry.npmmirror.com/browserslist/-/browserslist-4.22.1.tgz",
+      "integrity": "sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "caniuse-lite": "^1.0.30001541",
+        "electron-to-chromium": "^1.4.535",
+        "node-releases": "^2.0.13",
+        "update-browserslist-db": "^1.0.13"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "license": "MIT"
+    },
+    "node_modules/bytes": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
+      "integrity": "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/cacheable-request": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-6.1.0.tgz",
+      "integrity": "sha512-Oj3cAGPCqOZX7Rz64Uny2GYAZNliQSqfbePrgAQ1wKAihYmCUnraBtJtKcGR4xz7wF+LoJC+ssFZvv5BgF9Igg==",
+      "license": "MIT",
+      "dependencies": {
+        "clone-response": "^1.0.2",
+        "get-stream": "^5.1.0",
+        "http-cache-semantics": "^4.0.0",
+        "keyv": "^3.0.0",
+        "lowercase-keys": "^2.0.0",
+        "normalize-url": "^4.1.0",
+        "responselike": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cacheable-request/node_modules/get-stream": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
+      "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
+      "license": "MIT",
+      "dependencies": {
+        "pump": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cacheable-request/node_modules/lowercase-keys": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-2.0.0.tgz",
+      "integrity": "sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cacheable-request/node_modules/normalize-url": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.1.tgz",
+      "integrity": "sha512-9UZCFRHQdNrfTpGg8+1INIg93B6zE0aXMVFkw1WFwvO4SlZywU6aLg5Of0Ap/PgcbSw4LNxvMWXMeugwMCX0AA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/call-bind": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/camel-case": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
+      "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
+      "license": "MIT",
+      "dependencies": {
+        "pascal-case": "^3.1.2",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/camelcase": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/caniuse-api": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
+      "integrity": "sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==",
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.0.0",
+        "caniuse-lite": "^1.0.0",
+        "lodash.memoize": "^4.1.2",
+        "lodash.uniq": "^4.5.0"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001558",
+      "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001558.tgz",
+      "integrity": "sha512-/Et7DwLqpjS47JPEcz6VnxU9PwcIdVi0ciLXRWBQdj1XFye68pSQYpV0QtPTfUKWuOaEig+/Vez2l74eDc1tPQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/ccount": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/ccount/-/ccount-1.1.0.tgz",
+      "integrity": "sha512-vlNK021QdI7PNeiUh/lKkC/mNHHfV0m/Ad5JoI0TYtlBnJAslM/JIkm/tGC88bkLIwO6OQ5uV6ztS6kVAtCDlg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/character-entities": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz",
+      "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-legacy": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz",
+      "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-reference-invalid": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz",
+      "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/cheerio": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.12.tgz",
+      "integrity": "sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q==",
+      "license": "MIT",
+      "dependencies": {
+        "cheerio-select": "^2.1.0",
+        "dom-serializer": "^2.0.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1",
+        "htmlparser2": "^8.0.1",
+        "parse5": "^7.0.0",
+        "parse5-htmlparser2-tree-adapter": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/cheerio?sponsor=1"
+      }
+    },
+    "node_modules/cheerio-select": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-2.1.0.tgz",
+      "integrity": "sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-select": "^5.1.0",
+        "css-what": "^6.1.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://paulmillr.com/funding/"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chrome-trace-event": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
+      "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
+    "node_modules/ci-info": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.8.0.tgz",
+      "integrity": "sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/sibiraj-s"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/clean-css": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz",
+      "integrity": "sha512-JVJbM+f3d3Q704rF4bqQ5UUyTtuJ0JRKNbTKVEeujCCBoMdkEi+V+e8oktO9qGQNSvHrFTM6JZRXrUvGR1czww==",
+      "license": "MIT",
+      "dependencies": {
+        "source-map": "~0.6.0"
+      },
+      "engines": {
+        "node": ">= 10.0"
+      }
+    },
+    "node_modules/clean-stack": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
+      "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/cli-boxes": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-3.0.0.tgz",
+      "integrity": "sha512-/lzGpEWL/8PfI0BmBOPRwp0c/wFNX1RdUML3jK/RcSBA9T8mZDdQpqYBKtCFTOfQbwPqWEOpjqW+Fnayc0969g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cli-table3": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/cli-table3/-/cli-table3-0.6.3.tgz",
+      "integrity": "sha512-w5Jac5SykAeZJKntOxJCrm63Eg5/4dhMWIcuTbo9rpE+brgaSZo0RuNJZeOyMgsUdhDeojvgyQLmjI+K50ZGyg==",
+      "license": "MIT",
+      "dependencies": {
+        "string-width": "^4.2.0"
+      },
+      "engines": {
+        "node": "10.* || >= 12.*"
+      },
+      "optionalDependencies": {
+        "@colors/colors": "1.5.0"
+      }
+    },
+    "node_modules/cli-table3/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/cli-table3/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmmirror.com/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
+      "license": "MIT"
+    },
+    "node_modules/clone-deep": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
+      "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
+      "license": "MIT",
+      "dependencies": {
+        "is-plain-object": "^2.0.4",
+        "kind-of": "^6.0.2",
+        "shallow-clone": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/clone-response": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.3.tgz",
+      "integrity": "sha512-ROoL94jJH2dUVML2Y/5PEDNaSHgeOdSDicUyS7izcF63G6sTc/FTjLub4b8Il9S8S0beOfYt0TaA5qvFK+w0wA==",
+      "license": "MIT",
+      "dependencies": {
+        "mimic-response": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/collapse-white-space": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-1.0.6.tgz",
+      "integrity": "sha512-jEovNnrhMuqyCcjfEJA56v0Xq8SkIoPKDyaHahwo3POf4qcSXqMYuwNcOTzp74vTsR9Tn08z4MxWqAhcekogkQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "license": "MIT"
+    },
+    "node_modules/colord": {
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
+      "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==",
+      "license": "MIT"
+    },
+    "node_modules/colorette": {
+      "version": "2.0.20",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
+      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
+      "license": "MIT"
+    },
+    "node_modules/combine-promises": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/combine-promises/-/combine-promises-1.1.0.tgz",
+      "integrity": "sha512-ZI9jvcLDxqwaXEixOhArm3r7ReIivsXkpbyEWyeOhzz1QS0iSgBPnWvEqvIQtYyamGCYA88gFhmUrs9hrrQ0pg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/comma-separated-tokens": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz",
+      "integrity": "sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/commander": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
+      "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/commondir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
+      "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
+      "license": "MIT"
+    },
+    "node_modules/compressible": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
+      "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": ">= 1.43.0 < 2"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/compressible/node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/compression": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
+      "integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
+      "license": "MIT",
+      "dependencies": {
+        "accepts": "~1.3.5",
+        "bytes": "3.0.0",
+        "compressible": "~2.0.16",
+        "debug": "2.6.9",
+        "on-headers": "~1.0.2",
+        "safe-buffer": "5.1.2",
+        "vary": "~1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/compression/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/compression/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "license": "MIT"
+    },
+    "node_modules/compression/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "license": "MIT"
+    },
+    "node_modules/configstore": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/configstore/-/configstore-5.0.1.tgz",
+      "integrity": "sha512-aMKprgk5YhBNyH25hj8wGt2+D52Sw1DRRIzqBwLp2Ya9mFmY8KPvvtvmna8SxVR9JMZ4kzMD68N22vlaRpkeFA==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dot-prop": "^5.2.0",
+        "graceful-fs": "^4.1.2",
+        "make-dir": "^3.0.0",
+        "unique-string": "^2.0.0",
+        "write-file-atomic": "^3.0.0",
+        "xdg-basedir": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/connect-history-api-fallback": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-2.0.0.tgz",
+      "integrity": "sha512-U73+6lQFmfiNPrYbXqr6kZ1i1wiRqXnp2nhMsINseWXO8lDau0LGEffJ8kQi4EjLZympVgRdvqjAgiZ1tgzDDA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/consola": {
+      "version": "2.15.3",
+      "resolved": "https://registry.npmjs.org/consola/-/consola-2.15.3.tgz",
+      "integrity": "sha512-9vAdYbHj6x2fLKC4+oPH0kFzY/orMZyG2Aj+kNylHxKGJ/Ed4dpNyAQYwJOdqO4zdM7XpVHmyejQDcQHrnuXbw==",
+      "license": "MIT"
+    },
+    "node_modules/content-disposition": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz",
+      "integrity": "sha512-kRGRZw3bLlFISDBgwTSA1TMBFN6J6GWDeubmDE3AF+3+yXL8hTWv8r5rkLbqYXY4RjPk/EzHnClI3zQf1cFmHA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/content-type": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
+      "license": "MIT"
+    },
+    "node_modules/cookie": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
+      "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
+      "license": "MIT"
+    },
+    "node_modules/copy-text-to-clipboard": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/copy-text-to-clipboard/-/copy-text-to-clipboard-3.1.0.tgz",
+      "integrity": "sha512-PFM6BnjLnOON/lB3ta/Jg7Ywsv+l9kQGD4TWDCSlRBGmqnnTM5MrDkhAFgw+8HZt0wW6Q2BBE4cmy9sq+s9Qng==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/copy-webpack-plugin": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-11.0.0.tgz",
+      "integrity": "sha512-fX2MWpamkW0hZxMEg0+mYnA40LTosOSa5TqZ9GYIBzyJa9C3QUaMPSE2xAi/buNr8u89SfD9wHSQVBzrRa/SOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-glob": "^3.2.11",
+        "glob-parent": "^6.0.1",
+        "globby": "^13.1.1",
+        "normalize-path": "^3.0.0",
+        "schema-utils": "^4.0.0",
+        "serialize-javascript": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 14.15.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.1.0"
+      }
+    },
+    "node_modules/copy-webpack-plugin/node_modules/ajv": {
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/copy-webpack-plugin/node_modules/ajv-keywords": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      },
+      "peerDependencies": {
+        "ajv": "^8.8.2"
+      }
+    },
+    "node_modules/copy-webpack-plugin/node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/copy-webpack-plugin/node_modules/globby": {
+      "version": "13.1.4",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-13.1.4.tgz",
+      "integrity": "sha512-iui/IiiW+QrJ1X1hKH5qwlMQyv34wJAYwH1vrf8b9kBA4sNiif3gKsMHa+BrdnOpEudWjpotfa7LrTzB1ERS/g==",
+      "license": "MIT",
+      "dependencies": {
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.2.11",
+        "ignore": "^5.2.0",
+        "merge2": "^1.4.1",
+        "slash": "^4.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/copy-webpack-plugin/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "license": "MIT"
+    },
+    "node_modules/copy-webpack-plugin/node_modules/schema-utils": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.1.tgz",
+      "integrity": "sha512-lELhBAAly9NowEsX0yZBlw9ahZG+sK/1RJ21EpzdYHKEs13Vku3LJ+MIPhh4sMs0oCCeufZQEQbMekiA4vuVIQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "ajv": "^8.9.0",
+        "ajv-formats": "^2.1.1",
+        "ajv-keywords": "^5.1.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/copy-webpack-plugin/node_modules/slash": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz",
+      "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/core-js": {
+      "version": "3.30.2",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.30.2.tgz",
+      "integrity": "sha512-uBJiDmwqsbJCWHAwjrx3cvjbMXP7xD72Dmsn5LOJpiRmE3WbBbN5rCqQ2Qh6Ek6/eOrjlWngEynBWo4VxerQhg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
+    "node_modules/core-js-compat": {
+      "version": "3.30.2",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.30.2.tgz",
+      "integrity": "sha512-nriW1nuJjUgvkEjIot1Spwakz52V9YkYHZAQG6A1eCgC8AA1p0zngrQEP9R0+V6hji5XilWKG1Bd0YRppmGimA==",
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.21.5"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
+    "node_modules/core-js-pure": {
+      "version": "3.30.2",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.30.2.tgz",
+      "integrity": "sha512-p/npFUJXXBkCCTIlEGBdghofn00jWG6ZOtdoIXSJmAu2QBvN0IqpZXWweOytcwE6cfx8ZvVUy1vw8zxhe4Y2vg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "license": "MIT"
+    },
+    "node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/cross-fetch": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.6.tgz",
+      "integrity": "sha512-riRvo06crlE8HiqOwIpQhxwdOk4fOeR7FVM/wXoxchFEqMNUjvbs3bfo4OTgMEMHzppd4DxFBDbyySj8Cv781g==",
+      "license": "MIT",
+      "dependencies": {
+        "node-fetch": "^2.6.11"
+      }
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/crypto-random-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz",
+      "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/css-declaration-sorter": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.0.tgz",
+      "integrity": "sha512-jDfsatwWMWN0MODAFuHszfjphEXfNw9JUAhmY4pLu3TyTU+ohUpsbVtbU+1MZn4a47D9kqh03i4eyOm+74+zew==",
+      "license": "ISC",
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.9"
+      }
+    },
+    "node_modules/css-loader": {
+      "version": "6.8.1",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.8.1.tgz",
+      "integrity": "sha512-xDAXtEVGlD0gJ07iclwWVkLoZOpEvAWaSyf6W18S2pOC//K8+qUDIx8IIT3D+HjnmkJPQeesOPv5aiUaJsCM2g==",
+      "license": "MIT",
+      "dependencies": {
+        "icss-utils": "^5.1.0",
+        "postcss": "^8.4.21",
+        "postcss-modules-extract-imports": "^3.0.0",
+        "postcss-modules-local-by-default": "^4.0.3",
+        "postcss-modules-scope": "^3.0.0",
+        "postcss-modules-values": "^4.0.0",
+        "postcss-value-parser": "^4.2.0",
+        "semver": "^7.3.8"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/css-minimizer-webpack-plugin": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-4.2.2.tgz",
+      "integrity": "sha512-s3Of/4jKfw1Hj9CxEO1E5oXhQAxlayuHO2y/ML+C6I9sQ7FdzfEV6QgMLN3vI+qFsjJGIAFLKtQK7t8BOXAIyA==",
+      "license": "MIT",
+      "dependencies": {
+        "cssnano": "^5.1.8",
+        "jest-worker": "^29.1.2",
+        "postcss": "^8.4.17",
+        "schema-utils": "^4.0.0",
+        "serialize-javascript": "^6.0.0",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">= 14.15.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@parcel/css": {
+          "optional": true
+        },
+        "@swc/css": {
+          "optional": true
+        },
+        "clean-css": {
+          "optional": true
+        },
+        "csso": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/css-minimizer-webpack-plugin/node_modules/ajv": {
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/css-minimizer-webpack-plugin/node_modules/ajv-keywords": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      },
+      "peerDependencies": {
+        "ajv": "^8.8.2"
+      }
+    },
+    "node_modules/css-minimizer-webpack-plugin/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "license": "MIT"
+    },
+    "node_modules/css-minimizer-webpack-plugin/node_modules/schema-utils": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.1.tgz",
+      "integrity": "sha512-lELhBAAly9NowEsX0yZBlw9ahZG+sK/1RJ21EpzdYHKEs13Vku3LJ+MIPhh4sMs0oCCeufZQEQbMekiA4vuVIQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "ajv": "^8.9.0",
+        "ajv-formats": "^2.1.1",
+        "ajv-keywords": "^5.1.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/css-select": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
+      "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/cssnano": {
+      "version": "5.1.15",
+      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.1.15.tgz",
+      "integrity": "sha512-j+BKgDcLDQA+eDifLx0EO4XSA56b7uut3BQFH+wbSaSTuGLuiyTa/wbRYthUXX8LC9mLg+WWKe8h+qJuwTAbHw==",
+      "license": "MIT",
+      "dependencies": {
+        "cssnano-preset-default": "^5.2.14",
+        "lilconfig": "^2.0.3",
+        "yaml": "^1.10.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/cssnano"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/cssnano-preset-advanced": {
+      "version": "5.3.10",
+      "resolved": "https://registry.npmjs.org/cssnano-preset-advanced/-/cssnano-preset-advanced-5.3.10.tgz",
+      "integrity": "sha512-fnYJyCS9jgMU+cmHO1rPSPf9axbQyD7iUhLO5Df6O4G+fKIOMps+ZbU0PdGFejFBBZ3Pftf18fn1eG7MAPUSWQ==",
+      "license": "MIT",
+      "dependencies": {
+        "autoprefixer": "^10.4.12",
+        "cssnano-preset-default": "^5.2.14",
+        "postcss-discard-unused": "^5.1.0",
+        "postcss-merge-idents": "^5.1.1",
+        "postcss-reduce-idents": "^5.2.0",
+        "postcss-zindex": "^5.1.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/cssnano-preset-default": {
+      "version": "5.2.14",
+      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-5.2.14.tgz",
+      "integrity": "sha512-t0SFesj/ZV2OTylqQVOrFgEh5uanxbO6ZAdeCrNsUQ6fVuXwYTxJPNAGvGTxHbD68ldIJNec7PyYZDBrfDQ+6A==",
+      "license": "MIT",
+      "dependencies": {
+        "css-declaration-sorter": "^6.3.1",
+        "cssnano-utils": "^3.1.0",
+        "postcss-calc": "^8.2.3",
+        "postcss-colormin": "^5.3.1",
+        "postcss-convert-values": "^5.1.3",
+        "postcss-discard-comments": "^5.1.2",
+        "postcss-discard-duplicates": "^5.1.0",
+        "postcss-discard-empty": "^5.1.1",
+        "postcss-discard-overridden": "^5.1.0",
+        "postcss-merge-longhand": "^5.1.7",
+        "postcss-merge-rules": "^5.1.4",
+        "postcss-minify-font-values": "^5.1.0",
+        "postcss-minify-gradients": "^5.1.1",
+        "postcss-minify-params": "^5.1.4",
+        "postcss-minify-selectors": "^5.2.1",
+        "postcss-normalize-charset": "^5.1.0",
+        "postcss-normalize-display-values": "^5.1.0",
+        "postcss-normalize-positions": "^5.1.1",
+        "postcss-normalize-repeat-style": "^5.1.1",
+        "postcss-normalize-string": "^5.1.0",
+        "postcss-normalize-timing-functions": "^5.1.0",
+        "postcss-normalize-unicode": "^5.1.1",
+        "postcss-normalize-url": "^5.1.0",
+        "postcss-normalize-whitespace": "^5.1.1",
+        "postcss-ordered-values": "^5.1.3",
+        "postcss-reduce-initial": "^5.1.2",
+        "postcss-reduce-transforms": "^5.1.0",
+        "postcss-svgo": "^5.1.0",
+        "postcss-unique-selectors": "^5.1.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/cssnano-utils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.1.0.tgz",
+      "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==",
+      "license": "MIT",
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/csso": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz",
+      "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==",
+      "license": "MIT",
+      "dependencies": {
+        "css-tree": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
+      "license": "MIT"
+    },
+    "node_modules/debug": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/decompress-response": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-3.3.0.tgz",
+      "integrity": "sha512-BzRPQuY1ip+qDonAOz42gRm/pg9F768C+npV/4JOsxRC2sq+Rlk+Q4ZCAsOhnIaMrgarILY+RMUIvMmmX1qAEA==",
+      "license": "MIT",
+      "dependencies": {
+        "mimic-response": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/default-gateway": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-6.0.3.tgz",
+      "integrity": "sha512-fwSOJsbbNzZ/CUFpqFBqYfYNLj1NbMPm8MMCIzHjC83iSJRBEGmDUxU+WP661BaBQImeC2yHwXtz+P/O9o+XEg==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "execa": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/defer-to-connect": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-1.1.3.tgz",
+      "integrity": "sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ==",
+      "license": "MIT"
+    },
+    "node_modules/define-lazy-prop": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
+      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/define-properties": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.0.tgz",
+      "integrity": "sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==",
+      "license": "MIT",
+      "dependencies": {
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/del": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/del/-/del-6.1.1.tgz",
+      "integrity": "sha512-ua8BhapfP0JUJKC/zV9yHHDW/rDoDxP4Zhn3AkA6/xT6gY7jYXJiaeyBZznYVujhZZET+UgcbZiQ7sN3WqcImg==",
+      "license": "MIT",
+      "dependencies": {
+        "globby": "^11.0.1",
+        "graceful-fs": "^4.2.4",
+        "is-glob": "^4.0.1",
+        "is-path-cwd": "^2.2.0",
+        "is-path-inside": "^3.0.2",
+        "p-map": "^4.0.0",
+        "rimraf": "^3.0.2",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/destroy": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
+    },
+    "node_modules/detab": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/detab/-/detab-2.0.4.tgz",
+      "integrity": "sha512-8zdsQA5bIkoRECvCrNKPla84lyoR7DSAyf7p0YgXzBO9PDJx8KntPUay7NS6yp+KdxdVtiE5SpHKtbp2ZQyA9g==",
+      "license": "MIT",
+      "dependencies": {
+        "repeat-string": "^1.5.4"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/detect-node": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
+      "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
+      "license": "MIT"
+    },
+    "node_modules/detect-port": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/detect-port/-/detect-port-1.5.1.tgz",
+      "integrity": "sha512-aBzdj76lueB6uUst5iAs7+0H/oOjqI5D16XUWxlWMIMROhcM0rfsNVk93zTngq1dDNpoXRr++Sus7ETAExppAQ==",
+      "license": "MIT",
+      "dependencies": {
+        "address": "^1.0.1",
+        "debug": "4"
+      },
+      "bin": {
+        "detect": "bin/detect-port.js",
+        "detect-port": "bin/detect-port.js"
+      }
+    },
+    "node_modules/detect-port-alt": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/detect-port-alt/-/detect-port-alt-1.1.6.tgz",
+      "integrity": "sha512-5tQykt+LqfJFBEYaDITx7S7cR7mJ/zQmLXZ2qt5w04ainYZw6tBf9dBunMjVeVOdYVRUzUOE4HkY5J7+uttb5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "address": "^1.0.1",
+        "debug": "^2.6.0"
+      },
+      "bin": {
+        "detect": "bin/detect-port",
+        "detect-port": "bin/detect-port"
+      },
+      "engines": {
+        "node": ">= 4.2.1"
+      }
+    },
+    "node_modules/detect-port-alt/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/detect-port-alt/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "license": "MIT"
+    },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+      "license": "MIT",
+      "dependencies": {
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmmirror.com/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "license": "MIT"
+    },
+    "node_modules/dns-equal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
+      "integrity": "sha512-z+paD6YUQsk+AbGCEM4PrOXSss5gd66QfcVBFTKR/HpFL9jCqikS94HYwKww6fQyO7IxrIIyUu+g0Ka9tUS2Cg==",
+      "license": "MIT"
+    },
+    "node_modules/dns-packet": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-5.6.0.tgz",
+      "integrity": "sha512-rza3UH1LwdHh9qyPXp8lkwpjSNk/AMD3dPytUoRoqnypDUhY0xvbdmVhWOfxO68frEfV9BU8V12Ez7ZsHGZpCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@leichtgewicht/ip-codec": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/docusaurus-plugin-sass": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/docusaurus-plugin-sass/-/docusaurus-plugin-sass-0.2.3.tgz",
+      "integrity": "sha512-FbaE06K8NF8SPUYTwiG+83/jkXrwHJ/Afjqz3SUIGon6QvFwSSoKOcoxGQmUBnjTOk+deUONDx8jNWsegFJcBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "sass-loader": "^10.1.1"
+      },
+      "peerDependencies": {
+        "@docusaurus/core": "^2.0.0-beta",
+        "sass": "^1.30.0"
+      }
+    },
+    "node_modules/dom-converter": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
+      "integrity": "sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==",
+      "license": "MIT",
+      "dependencies": {
+        "utila": "~0.4"
+      }
+    },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+      "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/dot-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
+      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+      "license": "MIT",
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/dot-prop": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
+      "integrity": "sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==",
+      "license": "MIT",
+      "dependencies": {
+        "is-obj": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/dot-prop/node_modules/is-obj": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
+      "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/dotenv": {
+      "version": "16.3.1",
+      "resolved": "https://registry.npmmirror.com/dotenv/-/dotenv-16.3.1.tgz",
+      "integrity": "sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/motdotla/dotenv?sponsor=1"
+      }
+    },
+    "node_modules/duplexer": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
+      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
+      "license": "MIT"
+    },
+    "node_modules/duplexer3": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.5.tgz",
+      "integrity": "sha512-1A8za6ws41LQgv9HrE/66jyC5yuSjQ3L/KOpFtoBilsAK2iA2wuS5rTt1OCzIvtS2V7nVmedsUU+DGRcjBmOYA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "license": "MIT"
+    },
+    "node_modules/ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+      "license": "MIT"
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.4.571",
+      "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.571.tgz",
+      "integrity": "sha512-Sc+VtKwKCDj3f/kLBjdyjMpNzoZsU6WuL/wFb6EH8USmHEcebxRXcRrVpOpayxd52tuey4RUDpUsw5OS5LhJqg==",
+      "license": "ISC"
+    },
+    "node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "license": "MIT"
+    },
+    "node_modules/emojis-list": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/emoticon": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/emoticon/-/emoticon-3.2.0.tgz",
+      "integrity": "sha512-SNujglcLTTg+lDAcApPNgEdudaqQFiAbJCqzjNxJkvN9vAwCGi0uu8IUVvx+f16h+V44KCY6Y2yboroc9pilHg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/end-of-stream": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
+      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "once": "^1.4.0"
+      }
+    },
+    "node_modules/enhanced-resolve": {
+      "version": "5.14.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.14.1.tgz",
+      "integrity": "sha512-Vklwq2vDKtl0y/vtwjSesgJ5MYS7Etuk5txS8VdKL4AOS1aUlD96zqIfsOSLQsdv3xgMRbtkWM8eG9XDfKUPow==",
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "node_modules/es-module-lexer": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.2.1.tgz",
+      "integrity": "sha512-9978wrXM50Y4rTMmW5kXIC09ZdXQZqkE4mxhwkd8VbzsGkXGPgV4zWuqQJgCEzYngdo2dYDa0l8xhX4fkSwJSg==",
+      "license": "MIT"
+    },
+    "node_modules/escalade": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-goat": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/escape-goat/-/escape-goat-2.1.1.tgz",
+      "integrity": "sha512-8/uIhbG12Csjy2JEW7D9pHbreaVaS/OpN3ycnyvElTdwM5n6GY6W6e2IPemfvGZeUMqZ9A/3GqIZMgKnBhAw/Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+      "license": "MIT"
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "license": "BSD-2-Clause",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esrecurse/node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/eta": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/eta/-/eta-2.2.0.tgz",
+      "integrity": "sha512-UVQ72Rqjy/ZKQalzV5dCCJP80GrmPrMxh6NlNf+erV6ObL0ZFkhCstWRawS85z3smdr3d2wXPsZEY7rDPfGd2g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/eta-dev/eta?sponsor=1"
+      }
+    },
+    "node_modules/etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/eval": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/eval/-/eval-0.1.8.tgz",
+      "integrity": "sha512-EzV94NYKoO09GLXGjXj9JIlXijVck4ONSr5wiCWDvhsvj5jxSrzTmRU/9C1DyB6uToszLs8aifA6NQ7lEQdvFw==",
+      "dependencies": {
+        "@types/node": "*",
+        "require-like": ">= 0.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+      "license": "MIT"
+    },
+    "node_modules/events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.x"
+      }
+    },
+    "node_modules/execa": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
+      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
+      "license": "MIT",
+      "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^6.0.0",
+        "human-signals": "^2.1.0",
+        "is-stream": "^2.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^4.0.1",
+        "onetime": "^5.1.2",
+        "signal-exit": "^3.0.3",
+        "strip-final-newline": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
+    "node_modules/execa/node_modules/get-stream": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/express": {
+      "version": "4.18.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
+      "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
+      "license": "MIT",
+      "dependencies": {
+        "accepts": "~1.3.8",
+        "array-flatten": "1.1.1",
+        "body-parser": "1.20.1",
+        "content-disposition": "0.5.4",
+        "content-type": "~1.0.4",
+        "cookie": "0.5.0",
+        "cookie-signature": "1.0.6",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "finalhandler": "1.2.0",
+        "fresh": "0.5.2",
+        "http-errors": "2.0.0",
+        "merge-descriptors": "1.0.1",
+        "methods": "~1.1.2",
+        "on-finished": "2.4.1",
+        "parseurl": "~1.3.3",
+        "path-to-regexp": "0.1.7",
+        "proxy-addr": "~2.0.7",
+        "qs": "6.11.0",
+        "range-parser": "~1.2.1",
+        "safe-buffer": "5.2.1",
+        "send": "0.18.0",
+        "serve-static": "1.15.0",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "type-is": "~1.6.18",
+        "utils-merge": "1.0.1",
+        "vary": "~1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
+    "node_modules/express/node_modules/array-flatten": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+      "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
+      "license": "MIT"
+    },
+    "node_modules/express/node_modules/content-disposition": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
+      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "5.2.1"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/express/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/express/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "license": "MIT"
+    },
+    "node_modules/express/node_modules/path-to-regexp": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
+      "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==",
+      "license": "MIT"
+    },
+    "node_modules/express/node_modules/range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "license": "MIT"
+    },
+    "node_modules/extend-shallow": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+      "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
+      "license": "MIT",
+      "dependencies": {
+        "is-extendable": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "license": "MIT"
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmmirror.com/fast-glob/-/fast-glob-3.3.1.tgz",
+      "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==",
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "license": "MIT"
+    },
+    "node_modules/fast-url-parser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/fast-url-parser/-/fast-url-parser-1.1.3.tgz",
+      "integrity": "sha512-5jOCVXADYNuRkKFzNJ0dCCewsZiYo0dz8QNYljkOpFC6r2U4OBmKtvm/Tsuh4w1YYdDqDb31a8TVhBJ2OJKdqQ==",
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^1.3.2"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
+      "integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==",
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/faye-websocket": {
+      "version": "0.11.4",
+      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
+      "integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "websocket-driver": ">=0.5.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/fbemitter": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/fbemitter/-/fbemitter-3.0.0.tgz",
+      "integrity": "sha512-KWKaceCwKQU0+HPoop6gn4eOHk50bBv/VxjJtGMfwmJt3D29JpN4H4eisCtIPA+a8GVBam+ldMMpMjJUvpDyHw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "fbjs": "^3.0.0"
+      }
+    },
+    "node_modules/fbjs": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-3.0.4.tgz",
+      "integrity": "sha512-ucV0tDODnGV3JCnnkmoszb5lf4bNpzjv80K41wd4k798Etq+UYD0y0TIfalLjZoKgjive6/adkRnszwapiDgBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "cross-fetch": "^3.1.5",
+        "fbjs-css-vars": "^1.0.0",
+        "loose-envify": "^1.0.0",
+        "object-assign": "^4.1.0",
+        "promise": "^7.1.1",
+        "setimmediate": "^1.0.5",
+        "ua-parser-js": "^0.7.30"
+      }
+    },
+    "node_modules/fbjs-css-vars": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz",
+      "integrity": "sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==",
+      "license": "MIT"
+    },
+    "node_modules/feed": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/feed/-/feed-4.2.2.tgz",
+      "integrity": "sha512-u5/sxGfiMfZNtJ3OvQpXcvotFpYkL0n9u9mM2vkui2nGo8b4wvDkJ8gAkYqbA8QpGyFCv3RK0Z+Iv+9veCS9bQ==",
+      "license": "MIT",
+      "dependencies": {
+        "xml-js": "^1.6.11"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/file-loader": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
+      "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
+      "license": "MIT",
+      "dependencies": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^4.0.0 || ^5.0.0"
+      }
+    },
+    "node_modules/file-loader/node_modules/schema-utils": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.2.tgz",
+      "integrity": "sha512-pvjEHOgWc9OWA/f/DE3ohBWTD6EleVLf7iFUkoSwAxttdBhB9QUebQgxER2kWueOvRJXPHNnyrvvh9eZINB8Eg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/filesize": {
+      "version": "8.0.7",
+      "resolved": "https://registry.npmjs.org/filesize/-/filesize-8.0.7.tgz",
+      "integrity": "sha512-pjmC+bkIF8XI7fWaH8KxHcZL3DPybs1roSKP4rKDvy20tAWwIObE4+JIseG2byfGKhud5ZnM4YSGKBz7Sh0ndQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/finalhandler": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
+      "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "2.6.9",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "on-finished": "2.4.1",
+        "parseurl": "~1.3.3",
+        "statuses": "2.0.1",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/finalhandler/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/finalhandler/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "license": "MIT"
+    },
+    "node_modules/find-cache-dir": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
+      "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
+      "license": "MIT",
+      "dependencies": {
+        "commondir": "^1.0.1",
+        "make-dir": "^3.0.2",
+        "pkg-dir": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/avajs/find-cache-dir?sponsor=1"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/flux": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/flux/-/flux-4.0.4.tgz",
+      "integrity": "sha512-NCj3XlayA2UsapRpM7va6wU1+9rE5FIL7qoMcmxWHRzbp0yujihMBm9BBHZ1MDIk5h5o2Bl6eGiCe8rYELAmYw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "fbemitter": "^3.0.0",
+        "fbjs": "^3.0.1"
+      },
+      "peerDependencies": {
+        "react": "^15.0.2 || ^16.0.0 || ^17.0.0"
+      }
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.3.tgz",
+      "integrity": "sha512-SbH/l9ikmMWycd5puHJKTkZJKddF4iRLyW3DeZ08HTI7NGyLS38MXd/KGgeWumQO7YNQbW2u/NtPT2YowbPaGQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.8.3",
+        "@types/json-schema": "^7.0.5",
+        "chalk": "^4.1.0",
+        "chokidar": "^3.4.2",
+        "cosmiconfig": "^6.0.0",
+        "deepmerge": "^4.2.2",
+        "fs-extra": "^9.0.0",
+        "glob": "^7.1.6",
+        "memfs": "^3.1.2",
+        "minimatch": "^3.0.4",
+        "schema-utils": "2.7.0",
+        "semver": "^7.3.2",
+        "tapable": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "yarn": ">=1.0.0"
+      },
+      "peerDependencies": {
+        "eslint": ">= 6",
+        "typescript": ">= 2.7",
+        "vue-template-compiler": "*",
+        "webpack": ">= 4"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        },
+        "vue-template-compiler": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/cosmiconfig": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+      "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.1.0",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.7.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+      "license": "MIT",
+      "dependencies": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/schema-utils": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
+      "integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/json-schema": "^7.0.4",
+        "ajv": "^6.12.2",
+        "ajv-keywords": "^3.4.1"
+      },
+      "engines": {
+        "node": ">= 8.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/tapable": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
+      "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fraction.js": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmmirror.com/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
+    "node_modules/fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/fs-monkey": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.3.tgz",
+      "integrity": "sha512-cybjIfiiE+pTWicSCLFHSrXZ6EilF30oh91FDP9S2B051prEa7QWfrVTQm10/dDpswBDXZugPa1Ogu8Yh+HV0Q==",
+      "license": "Unlicense"
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "license": "ISC"
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "license": "MIT"
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
+      "integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-own-enumerable-property-symbols": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
+      "integrity": "sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==",
+      "license": "ISC"
+    },
+    "node_modules/get-stream": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
+      "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
+      "license": "MIT",
+      "dependencies": {
+        "pump": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/github-slugger": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-1.5.0.tgz",
+      "integrity": "sha512-wIh+gKBI9Nshz2o46B0B3f5k/W+WI9ZAv6y5Dn5WJ5SK1t0TnDimB4WE5rmTD05ZAIn8HALCZVmCsvj0w0v0lw==",
+      "license": "ISC"
+    },
+    "node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "license": "ISC",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/glob-to-regexp": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/global-dirs": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-3.0.1.tgz",
+      "integrity": "sha512-NBcGGFbBA9s1VzD41QXDG+3++t9Mn5t1FpLdhESY6oKY4gYTFpX4wO3sqGUa0Srjtbfj3szX0RnemmrVRUdULA==",
+      "license": "MIT",
+      "dependencies": {
+        "ini": "2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/global-dirs/node_modules/ini": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-2.0.0.tgz",
+      "integrity": "sha512-7PnF4oN3CvZF23ADhA5wRaYEQpJ8qygSkbtTXWBeXWXmEVRXK+1ITciHWwHhsjv1TmW0MgacIv6hEi5pX5NQdA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/global-modules": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz",
+      "integrity": "sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==",
+      "license": "MIT",
+      "dependencies": {
+        "global-prefix": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/global-prefix": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-3.0.0.tgz",
+      "integrity": "sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==",
+      "license": "MIT",
+      "dependencies": {
+        "ini": "^1.3.5",
+        "kind-of": "^6.0.2",
+        "which": "^1.3.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/global-prefix/node_modules/which": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "which": "bin/which"
+      }
+    },
+    "node_modules/globals": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/globby": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+      "license": "MIT",
+      "dependencies": {
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.2.9",
+        "ignore": "^5.2.0",
+        "merge2": "^1.4.1",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/got": {
+      "version": "9.6.0",
+      "resolved": "https://registry.npmjs.org/got/-/got-9.6.0.tgz",
+      "integrity": "sha512-R7eWptXuGYxwijs0eV+v3o6+XH1IqVK8dJOEecQfTmkncw9AV4dcw/Dhxi8MdlqPthxxpZyizMzyg8RTmEsG+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@sindresorhus/is": "^0.14.0",
+        "@szmarczak/http-timer": "^1.1.2",
+        "cacheable-request": "^6.0.0",
+        "decompress-response": "^3.3.0",
+        "duplexer3": "^0.1.4",
+        "get-stream": "^4.1.0",
+        "lowercase-keys": "^1.0.1",
+        "mimic-response": "^1.0.1",
+        "p-cancelable": "^1.0.0",
+        "to-readable-stream": "^1.0.0",
+        "url-parse-lax": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "license": "ISC"
+    },
+    "node_modules/gray-matter": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/gray-matter/-/gray-matter-4.0.3.tgz",
+      "integrity": "sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-yaml": "^3.13.1",
+        "kind-of": "^6.0.2",
+        "section-matter": "^1.0.0",
+        "strip-bom-string": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
+    "node_modules/gray-matter/node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "license": "MIT",
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "node_modules/gray-matter/node_modules/js-yaml": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/gzip-size": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
+      "integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "duplexer": "^0.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/handle-thing": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
+      "integrity": "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==",
+      "license": "MIT"
+    },
+    "node_modules/has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
+      "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
+      "license": "MIT",
+      "dependencies": {
+        "get-intrinsic": "^1.1.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
+      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-yarn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/has-yarn/-/has-yarn-2.1.0.tgz",
+      "integrity": "sha512-UqBRqi4ju7T+TqGNdqAO0PaSVGsDGJUBQvk9eUWNGRY1CFGDzYhLWoM7JQEemnlvVcv/YEmc2wNW8BC24EnUsw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/hast-to-hyperscript": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/hast-to-hyperscript/-/hast-to-hyperscript-9.0.1.tgz",
+      "integrity": "sha512-zQgLKqF+O2F72S1aa4y2ivxzSlko3MAvxkwG8ehGmNiqd98BIN3JM1rAJPmplEyLmGLO2QZYJtIneOSZ2YbJuA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^2.0.3",
+        "comma-separated-tokens": "^1.0.0",
+        "property-information": "^5.3.0",
+        "space-separated-tokens": "^1.0.0",
+        "style-to-object": "^0.3.0",
+        "unist-util-is": "^4.0.0",
+        "web-namespaces": "^1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-from-parse5": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/hast-util-from-parse5/-/hast-util-from-parse5-6.0.1.tgz",
+      "integrity": "sha512-jeJUWiN5pSxW12Rh01smtVkZgZr33wBokLzKLwinYOUfSzm1Nl/c3GUGebDyOKjdsRgMvoVbV0VpAcpjF4NrJA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/parse5": "^5.0.0",
+        "hastscript": "^6.0.0",
+        "property-information": "^5.0.0",
+        "vfile": "^4.0.0",
+        "vfile-location": "^3.2.0",
+        "web-namespaces": "^1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-parse-selector": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz",
+      "integrity": "sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-raw": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/hast-util-raw/-/hast-util-raw-6.0.1.tgz",
+      "integrity": "sha512-ZMuiYA+UF7BXBtsTBNcLBF5HzXzkyE6MLzJnL605LKE8GJylNjGc4jjxazAHUtcwT5/CEt6afRKViYB4X66dig==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "hast-util-from-parse5": "^6.0.0",
+        "hast-util-to-parse5": "^6.0.0",
+        "html-void-elements": "^1.0.0",
+        "parse5": "^6.0.0",
+        "unist-util-position": "^3.0.0",
+        "vfile": "^4.0.0",
+        "web-namespaces": "^1.0.0",
+        "xtend": "^4.0.0",
+        "zwitch": "^1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-raw/node_modules/parse5": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
+      "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==",
+      "license": "MIT"
+    },
+    "node_modules/hast-util-to-parse5": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-to-parse5/-/hast-util-to-parse5-6.0.0.tgz",
+      "integrity": "sha512-Lu5m6Lgm/fWuz8eWnrKezHtVY83JeRGaNQ2kn9aJgqaxvVkFCZQBEhgodZUDUvoodgyROHDb3r5IxAEdl6suJQ==",
+      "license": "MIT",
+      "dependencies": {
+        "hast-to-hyperscript": "^9.0.0",
+        "property-information": "^5.0.0",
+        "web-namespaces": "^1.0.0",
+        "xtend": "^4.0.0",
+        "zwitch": "^1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hastscript": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-6.0.0.tgz",
+      "integrity": "sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "comma-separated-tokens": "^1.0.0",
+        "hast-util-parse-selector": "^2.0.0",
+        "property-information": "^5.0.0",
+        "space-separated-tokens": "^1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "license": "MIT",
+      "bin": {
+        "he": "bin/he"
+      }
+    },
+    "node_modules/history": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
+      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.1.2",
+        "loose-envify": "^1.2.0",
+        "resolve-pathname": "^3.0.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0",
+        "value-equal": "^1.0.1"
+      }
+    },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hpack.js": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
+      "integrity": "sha512-zJxVehUdMGIKsRaNt7apO2Gqp0BdqW5yaiGHXXmbpvxgBYVZnAql+BJb4RO5ad2MgpbZKn5G6nMnegrH1FcNYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.1",
+        "obuf": "^1.0.0",
+        "readable-stream": "^2.0.1",
+        "wbuf": "^1.1.0"
+      }
+    },
+    "node_modules/hpack.js/node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT"
+    },
+    "node_modules/hpack.js/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/hpack.js/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
+    "node_modules/hpack.js/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/html-entities": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.3.tgz",
+      "integrity": "sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==",
+      "license": "MIT"
+    },
+    "node_modules/html-minifier-terser": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
+      "integrity": "sha512-YXxSlJBZTP7RS3tWnQw74ooKa6L9b9i9QYXY21eUEvhZ3u9XLfv6OnFsQq6RxkhHygsaUMvYsZRV5rU/OVNZxw==",
+      "license": "MIT",
+      "dependencies": {
+        "camel-case": "^4.1.2",
+        "clean-css": "^5.2.2",
+        "commander": "^8.3.0",
+        "he": "^1.2.0",
+        "param-case": "^3.0.4",
+        "relateurl": "^0.2.7",
+        "terser": "^5.10.0"
+      },
+      "bin": {
+        "html-minifier-terser": "cli.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/html-minifier-terser/node_modules/commander": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/html-tags": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz",
+      "integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/html-void-elements": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-1.0.5.tgz",
+      "integrity": "sha512-uE/TxKuyNIcx44cIWnjr/rfIATDH7ZaOMmstu0CwhFG1Dunhlp4OC6/NMbhiwoq5BpW0ubi303qnEk/PZj614w==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/html-webpack-plugin": {
+      "version": "5.5.1",
+      "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.1.tgz",
+      "integrity": "sha512-cTUzZ1+NqjGEKjmVgZKLMdiFg3m9MdRXkZW2OEe69WYVi5ONLMmlnSZdXzGGMOq0C8jGDrL6EWyEDDUioHO/pA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/html-minifier-terser": "^6.0.0",
+        "html-minifier-terser": "^6.0.2",
+        "lodash": "^4.17.21",
+        "pretty-error": "^4.0.0",
+        "tapable": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/html-webpack-plugin"
+      },
+      "peerDependencies": {
+        "webpack": "^5.20.0"
+      }
+    },
+    "node_modules/htmlparser2": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
+      "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1",
+        "entities": "^4.4.0"
+      }
+    },
+    "node_modules/http-cache-semantics": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
+      "integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/http-deceiver": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
+      "integrity": "sha512-LmpOGxTfbpgtGVxJrj5k7asXHCgNZp5nLfp+hWc8QQRqtb7fUy6kRY3BO1h9ddF6yIPYUARgxGOwB42DnxIaNw==",
+      "license": "MIT"
+    },
+    "node_modules/http-errors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "depd": "2.0.0",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "toidentifier": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/http-parser-js": {
+      "version": "0.5.8",
+      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.8.tgz",
+      "integrity": "sha512-SGeBX54F94Wgu5RH3X5jsDtf4eHyRogWX1XGT3b4HuW3tQPM4AaBzoUji/4AAJNXCEOWZ5O0DgZmJw1947gD5Q==",
+      "license": "MIT"
+    },
+    "node_modules/http-proxy": {
+      "version": "1.18.1",
+      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
+      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
+      "license": "MIT",
+      "dependencies": {
+        "eventemitter3": "^4.0.0",
+        "follow-redirects": "^1.0.0",
+        "requires-port": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/http-proxy-middleware": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.6.tgz",
+      "integrity": "sha512-ya/UeJ6HVBYxrgYotAZo1KvPWlgB48kUJLDePFeneHsVujFaW5WNj2NgWCAE//B1Dl02BIfYlpNgBy8Kf8Rjmw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/http-proxy": "^1.17.8",
+        "http-proxy": "^1.18.1",
+        "is-glob": "^4.0.1",
+        "is-plain-obj": "^3.0.0",
+        "micromatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "@types/express": "^4.17.13"
+      },
+      "peerDependenciesMeta": {
+        "@types/express": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/http-proxy-middleware/node_modules/is-plain-obj": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
+      "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/human-signals": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
+      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=10.17.0"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/icss-utils": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
+      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
+      "license": "ISC",
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/ignore": {
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
+      "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/image-size": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-1.0.2.tgz",
+      "integrity": "sha512-xfOoWjceHntRb3qFCrh5ZFORYH8XCdYpASltMhZ/Q0KZiOwjdE/Yl2QCiWdwD+lygV5bMCvauzgu5PxBX/Yerg==",
+      "license": "MIT",
+      "dependencies": {
+        "queue": "6.0.2"
+      },
+      "bin": {
+        "image-size": "bin/image-size.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/immer": {
+      "version": "9.0.21",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz",
+      "integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
+    "node_modules/immutable": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz",
+      "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==",
+      "license": "MIT"
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/import-lazy": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-2.1.0.tgz",
+      "integrity": "sha512-m7ZEHgtw69qOGw+jwxXkHlrlIPdTGkyh66zXZ1ajZbxkDBNjSY/LGbmjc7h0s2ELsUDTAhFr55TrPSSqJGPG0A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/indent-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/infima": {
+      "version": "0.2.0-alpha.43",
+      "resolved": "https://registry.npmjs.org/infima/-/infima-0.2.0-alpha.43.tgz",
+      "integrity": "sha512-2uw57LvUqW0rK/SWYnd/2rRfxNA5DDNOh33jxF7fy46VWoNhGxiUQyVZHbBMjQ33mQem0cjdDVwgWVAmlRfgyQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "license": "ISC",
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
+    "node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "license": "ISC"
+    },
+    "node_modules/inline-style-parser": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.1.1.tgz",
+      "integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==",
+      "license": "MIT"
+    },
+    "node_modules/interpret": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz",
+      "integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
+    "node_modules/ipaddr.js": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz",
+      "integrity": "sha512-1qTgH9NG+IIJ4yfKs2e6Pp1bZg8wbDbKHT21HrLIeYBTRLgMYKnMTPAuI3Lcs61nfx5h1xlXnbJtH1kX5/d/ng==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/is-alphabetical": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
+      "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-alphanumerical": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz",
+      "integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==",
+      "license": "MIT",
+      "dependencies": {
+        "is-alphabetical": "^1.0.0",
+        "is-decimal": "^1.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "license": "MIT"
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-buffer": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
+      "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/is-ci": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-2.0.0.tgz",
+      "integrity": "sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==",
+      "license": "MIT",
+      "dependencies": {
+        "ci-info": "^2.0.0"
+      },
+      "bin": {
+        "is-ci": "bin.js"
+      }
+    },
+    "node_modules/is-ci/node_modules/ci-info": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz",
+      "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==",
+      "license": "MIT"
+    },
+    "node_modules/is-core-module": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.12.1.tgz",
+      "integrity": "sha512-Q4ZuBAe2FUsKtyQJoQHlvP8OvBERxO3jEmy1I7hcRXcJBGGHFh/aJBswbXuS9sgrDH2QUO8ilkwNPHvHMd8clg==",
+      "license": "MIT",
+      "dependencies": {
+        "has": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-decimal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz",
+      "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-docker": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+      "license": "MIT",
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-extendable": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
+      "integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-hexadecimal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz",
+      "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-installed-globally": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.4.0.tgz",
+      "integrity": "sha512-iwGqO3J21aaSkC7jWnHP/difazwS7SFeIqxv6wEtLU8Y5KlzFTjyqcSIT0d8s4+dDhKytsk9PJZ2BkS5eZwQRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "global-dirs": "^3.0.0",
+        "is-path-inside": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-npm": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-npm/-/is-npm-5.0.0.tgz",
+      "integrity": "sha512-WW/rQLOazUq+ST/bCAVBp/2oMERWLsR7OrKyt052dNDk4DHcDE0/7QSXITlmi+VBcV13DfIbysG3tZJm5RfdBA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-obj": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
+      "integrity": "sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-path-cwd": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz",
+      "integrity": "sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/is-path-inside": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-plain-obj": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz",
+      "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "license": "MIT",
+      "dependencies": {
+        "isobject": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-regexp": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz",
+      "integrity": "sha512-7zjFAPO4/gwyQAAgRRmqeEeyIICSdmCqa3tsVHMdBzaXXRiqopZL4Cyghg/XulGWrtABTpbnYYzzIRffLkP4oA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-root": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-root/-/is-root-2.1.0.tgz",
+      "integrity": "sha512-AGOriNp96vNBd3HtU+RzFEc75FfR5ymiYv8E553I71SCeXBiMsVDUtdio1OEFvrPyLIQ9tVR5RxXIFe5PUFjMg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/is-stream": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==",
+      "license": "MIT"
+    },
+    "node_modules/is-whitespace-character": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz",
+      "integrity": "sha512-SDweEzfIZM0SJV0EUga669UTKlmL0Pq8Lno0QDQsPnvECB3IM2aP0gdx5TrU0A01MAPfViaZiI2V1QMZLaKK5w==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-word-character": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-word-character/-/is-word-character-1.0.4.tgz",
+      "integrity": "sha512-5SMO8RVennx3nZrqtKwCGyyetPE9VDba5ugvKLaD4KopPG5kR4mQ7tNt/r7feL5yt5h3lpuBbIUmCOG2eSzXHA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-wsl": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+      "license": "MIT",
+      "dependencies": {
+        "is-docker": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-yarn-global": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/is-yarn-global/-/is-yarn-global-0.3.0.tgz",
+      "integrity": "sha512-VjSeb/lHmkoyd8ryPVIKvOCn4D1koMqY+vqyjjUfc3xyKtP4dYOxM44sZrnqQSzSds3xyOrUTLTC9LVCVgLngw==",
+      "license": "MIT"
+    },
+    "node_modules/isarray": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+      "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==",
+      "license": "MIT"
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "license": "ISC"
+    },
+    "node_modules/isobject": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/jest-util": {
+      "version": "29.5.0",
+      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.5.0.tgz",
+      "integrity": "sha512-RYMgG/MTadOr5t8KdhejfvUU82MxsCu5MF6KuDUHl+NuwzUt+Sm6jJWxTJVrDR1j5M/gJVCPKQEpWXY+yIQ6lQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jest/types": "^29.5.0",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "ci-info": "^3.2.0",
+        "graceful-fs": "^4.2.9",
+        "picomatch": "^2.2.3"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/jest-worker": {
+      "version": "29.5.0",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-29.5.0.tgz",
+      "integrity": "sha512-NcrQnevGoSp4b5kg+akIpthoAFHxPBcb5P6mYPY0fUNT+sSvmtu6jlkEle3anczUKIKEbMxFimk9oTP/tpIPgA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*",
+        "jest-util": "^29.5.0",
+        "merge-stream": "^2.0.0",
+        "supports-color": "^8.0.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/jest-worker/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmmirror.com/jiti/-/jiti-1.21.0.tgz",
+      "integrity": "sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==",
+      "license": "MIT",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
+    "node_modules/joi": {
+      "version": "17.9.2",
+      "resolved": "https://registry.npmjs.org/joi/-/joi-17.9.2.tgz",
+      "integrity": "sha512-Itk/r+V4Dx0V3c7RLFdRh12IOjySm2/WGPMubBT92cQvRfYZhPM2W0hZlctjj72iES8jsRCwp7S/cRmWBnJ4nw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@hapi/hoek": "^9.0.0",
+        "@hapi/topo": "^5.0.0",
+        "@sideway/address": "^4.1.3",
+        "@sideway/formula": "^3.0.1",
+        "@sideway/pinpoint": "^2.0.0"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT"
+    },
+    "node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/jsesc": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
+      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/json-buffer": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.0.tgz",
+      "integrity": "sha512-CuUqjv0FUZIdXkHPI8MezCnFCdaTAacej1TZYulLoAg1h/PhwkdXFN4V/gzY4g+fMBCOV2xF+rp7t2XD2ns/NQ==",
+      "license": "MIT"
+    },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "license": "MIT"
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "license": "MIT"
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/keyv": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.1.0.tgz",
+      "integrity": "sha512-9ykJ/46SN/9KPM/sichzQ7OvXyGDYKGTaDlKMGCAlg2UK8KRy4jb0d8sFc+0Tt0YYnThq8X2RZgCg74RPxgcVA==",
+      "license": "MIT",
+      "dependencies": {
+        "json-buffer": "3.0.0"
+      }
+    },
+    "node_modules/kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/kleur": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
+      "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/klona": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz",
+      "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/latest-version": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/latest-version/-/latest-version-5.1.0.tgz",
+      "integrity": "sha512-weT+r0kTkRQdCdYCNtkMwWXQTMEswKrFBkm4ckQOMVhhqhIMI1UT2hMj+1iigIhgSZm5gTmrRXBNoGUgaTY1xA==",
+      "license": "MIT",
+      "dependencies": {
+        "package-json": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/launch-editor": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.6.0.tgz",
+      "integrity": "sha512-JpDCcQnyAAzZZaZ7vEiSqL690w7dAEyLao+KC96zBplnYbJS7TYNjvM3M7y3dGz+v7aIsJk3hllWuc0kWAjyRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "picocolors": "^1.0.0",
+        "shell-quote": "^1.7.3"
+      }
+    },
+    "node_modules/leven": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
+      "integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/lilconfig": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "license": "MIT"
+    },
+    "node_modules/loader-runner": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
+      "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.11.5"
+      }
+    },
+    "node_modules/loader-utils": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+      "license": "MIT",
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^2.1.2"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.curry": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.curry/-/lodash.curry-4.1.1.tgz",
+      "integrity": "sha512-/u14pXGviLaweY5JI0IUzgzF2J6Ne8INyzAZjImcryjgkZ+ebruBxy2/JaOOkTqScddcYtakjhSaeemV8lR0tA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.flow": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.flow/-/lodash.flow-3.5.0.tgz",
+      "integrity": "sha512-ff3BX/tSioo+XojX4MOsOMhJw0nZoUEF011LX8g8d3gvjVbxd89cCio4BCXronjxcTUIJUoqKEUA+n4CqvvRPw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.memoize": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
+      "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.uniq": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
+      "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==",
+      "license": "MIT"
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/lower-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/lowercase-keys": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz",
+      "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/make-dir": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/make-dir/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/markdown-escapes": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/markdown-escapes/-/markdown-escapes-1.0.4.tgz",
+      "integrity": "sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/mdast-squeeze-paragraphs": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-squeeze-paragraphs/-/mdast-squeeze-paragraphs-4.0.0.tgz",
+      "integrity": "sha512-zxdPn69hkQ1rm4J+2Cs2j6wDEv7O17TfXTJ33tl/+JPIoEmtV9t2ZzBM5LPHE8QlHsmVD8t3vPKCyY3oH+H8MQ==",
+      "license": "MIT",
+      "dependencies": {
+        "unist-util-remove": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-definitions": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-definitions/-/mdast-util-definitions-4.0.0.tgz",
+      "integrity": "sha512-k8AJ6aNnUkB7IE+5azR9h81O5EQ/cTDXtWdMq9Kk5KcEW/8ritU5CeLg/9HhOC++nALHBlaogJ5jz0Ybk3kPMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "unist-util-visit": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-hast": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-10.0.1.tgz",
+      "integrity": "sha512-BW3LM9SEMnjf4HXXVApZMt8gLQWVNXc3jryK0nJu/rOXPOnlkUjmdkDlmxMirpbU9ILncGFIwLH/ubnWBbcdgA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^3.0.0",
+        "@types/unist": "^2.0.0",
+        "mdast-util-definitions": "^4.0.0",
+        "mdurl": "^1.0.0",
+        "unist-builder": "^2.0.0",
+        "unist-util-generated": "^1.0.0",
+        "unist-util-position": "^3.0.0",
+        "unist-util-visit": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-2.0.0.tgz",
+      "integrity": "sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
+      "license": "CC0-1.0"
+    },
+    "node_modules/mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+      "integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==",
+      "license": "MIT"
+    },
+    "node_modules/media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/memfs": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.5.1.tgz",
+      "integrity": "sha512-UWbFJKvj5k+nETdteFndTpYxdeTMox/ULeqX5k/dpaQJCCFmj5EeKv3dBcyO2xmkRAx2vppRu5dVG7SOtsGOzA==",
+      "license": "Unlicense",
+      "dependencies": {
+        "fs-monkey": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/merge-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
+      "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==",
+      "license": "MIT"
+    },
+    "node_modules/merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "license": "MIT"
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.2",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "license": "MIT",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.33.0.tgz",
+      "integrity": "sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.18",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.18.tgz",
+      "integrity": "sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "~1.33.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mimic-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/mimic-response": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
+      "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/mini-css-extract-plugin": {
+      "version": "2.7.6",
+      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.6.tgz",
+      "integrity": "sha512-Qk7HcgaPkGG6eD77mLvZS1nmxlao3j+9PkrT9Uc7HAE1id3F41+DdBRYRYkbyfNRGzm8/YWtzhw7nVPmwhqTQw==",
+      "license": "MIT",
+      "dependencies": {
+        "schema-utils": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/mini-css-extract-plugin/node_modules/ajv": {
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/mini-css-extract-plugin/node_modules/ajv-keywords": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      },
+      "peerDependencies": {
+        "ajv": "^8.8.2"
+      }
+    },
+    "node_modules/mini-css-extract-plugin/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "license": "MIT"
+    },
+    "node_modules/mini-css-extract-plugin/node_modules/schema-utils": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.1.tgz",
+      "integrity": "sha512-lELhBAAly9NowEsX0yZBlw9ahZG+sK/1RJ21EpzdYHKEs13Vku3LJ+MIPhh4sMs0oCCeufZQEQbMekiA4vuVIQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "ajv": "^8.9.0",
+        "ajv-formats": "^2.1.1",
+        "ajv-keywords": "^5.1.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/minimalistic-assert": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
+      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==",
+      "license": "ISC"
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/mrmime": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
+      "integrity": "sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "license": "MIT"
+    },
+    "node_modules/multicast-dns": {
+      "version": "7.2.5",
+      "resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-7.2.5.tgz",
+      "integrity": "sha512-2eznPJP8z2BFLX50tf0LuODrpINqP1RVIm/CObbTcBRITQgmC/TjcREF1NeTBzIcR5XO/ukWo+YHOjBbFwIupg==",
+      "license": "MIT",
+      "dependencies": {
+        "dns-packet": "^5.2.2",
+        "thunky": "^1.0.2"
+      },
+      "bin": {
+        "multicast-dns": "cli.js"
+      }
+    },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmmirror.com/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
+      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/negotiator": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/neo-async": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
+      "license": "MIT"
+    },
+    "node_modules/no-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+      "license": "MIT",
+      "dependencies": {
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/node-emoji": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.11.0.tgz",
+      "integrity": "sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash": "^4.17.21"
+      }
+    },
+    "node_modules/node-fetch": {
+      "version": "2.6.11",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.11.tgz",
+      "integrity": "sha512-4I6pdBY1EthSqDmJkiNk3JIT8cswwR9nfeW/cPdUagJYEQG7R95WRH74wpz7ma8Gh/9dI9FP+OU+0E4FvtA55w==",
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/node-forge": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
+      "integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==",
+      "license": "(BSD-3-Clause OR GPL-2.0)",
+      "engines": {
+        "node": ">= 6.13.0"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.13",
+      "resolved": "https://registry.npmmirror.com/node-releases/-/node-releases-2.0.13.tgz",
+      "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==",
+      "license": "MIT"
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-url": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
+      "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/npm-run-path": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==",
+      "license": "MIT"
+    },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.12.3",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
+      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.assign": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz",
+      "integrity": "sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "has-symbols": "^1.0.3",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/obuf": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
+      "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==",
+      "license": "MIT"
+    },
+    "node_modules/on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "license": "MIT",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/on-headers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
+      "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "license": "ISC",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/onetime": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "license": "MIT",
+      "dependencies": {
+        "mimic-fn": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/open": {
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
+      "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
+      "license": "MIT",
+      "dependencies": {
+        "define-lazy-prop": "^2.0.0",
+        "is-docker": "^2.1.1",
+        "is-wsl": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/opener": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
+      "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
+      "license": "(WTFPL OR MIT)",
+      "bin": {
+        "opener": "bin/opener-bin.js"
+      }
+    },
+    "node_modules/p-cancelable": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-1.1.0.tgz",
+      "integrity": "sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "license": "MIT",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/p-map": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
+      "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
+      "license": "MIT",
+      "dependencies": {
+        "aggregate-error": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-retry": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-4.6.2.tgz",
+      "integrity": "sha512-312Id396EbJdvRONlngUx0NydfrIQ5lsYu0znKVUzVvArzEIt08V1qhtyESbGVd1FGX7UKtiFp5uwKZdM8wIuQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/retry": "0.12.0",
+        "retry": "^0.13.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/package-json": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/package-json/-/package-json-6.5.0.tgz",
+      "integrity": "sha512-k3bdm2n25tkyxcjSKzB5x8kfVxlMdgsbPr0GkZcwHsLpba6cBjqCt1KlcChKEvxHIcTB1FVMuwoijZ26xex5MQ==",
+      "license": "MIT",
+      "dependencies": {
+        "got": "^9.6.0",
+        "registry-auth-token": "^4.0.0",
+        "registry-url": "^5.0.0",
+        "semver": "^6.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/package-json/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/param-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
+      "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
+      "license": "MIT",
+      "dependencies": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/parse-entities": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz",
+      "integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==",
+      "license": "MIT",
+      "dependencies": {
+        "character-entities": "^1.0.0",
+        "character-entities-legacy": "^1.0.0",
+        "character-reference-invalid": "^1.0.0",
+        "is-alphanumerical": "^1.0.0",
+        "is-decimal": "^1.0.0",
+        "is-hexadecimal": "^1.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/parse-numeric-range": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/parse-numeric-range/-/parse-numeric-range-1.3.0.tgz",
+      "integrity": "sha512-twN+njEipszzlMJd4ONUYgSfZPDxgHhT9Ahed5uTigpQn90FggW4SA/AIPq/6a149fTbE9qBEcSwE3FAEp6wQQ==",
+      "license": "ISC"
+    },
+    "node_modules/parse5": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
+      "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^4.4.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5-htmlparser2-tree-adapter": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.0.0.tgz",
+      "integrity": "sha512-B77tOZrqqfUfnVcOrUvfdLbz4pu4RopLD/4vmu3HUPswwTA8OH0EMW9BlWR2B0RCoiZRAHEUu7IxeP1Pd1UU+g==",
+      "license": "MIT",
+      "dependencies": {
+        "domhandler": "^5.0.2",
+        "parse5": "^7.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/pascal-case": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
+      "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
+      "license": "MIT",
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-is-inside": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz",
+      "integrity": "sha512-DUWJr3+ULp4zXmol/SZkFf3JGsS9/SIv+Y3Rt93/UjPpDpklB5f1er4O3POIbUuUJ3FXgqte2Q7SrU6zAqwk8w==",
+      "license": "(WTFPL OR MIT)"
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "license": "MIT"
+    },
+    "node_modules/path-to-regexp": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+      "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+      "license": "MIT",
+      "dependencies": {
+        "isarray": "0.0.1"
+      }
+    },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmmirror.com/pirates/-/pirates-4.0.6.tgz",
+      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/pkg-dir": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+      "license": "MIT",
+      "dependencies": {
+        "find-up": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pkg-up": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-3.1.0.tgz",
+      "integrity": "sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==",
+      "license": "MIT",
+      "dependencies": {
+        "find-up": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pkg-up/node_modules/find-up": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+      "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/pkg-up/node_modules/locate-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+      "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^3.0.0",
+        "path-exists": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/pkg-up/node_modules/p-locate": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+      "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/pkg-up/node_modules/path-exists": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+      "integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-calc": {
+      "version": "8.2.4",
+      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-8.2.4.tgz",
+      "integrity": "sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.9",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.2"
+      }
+    },
+    "node_modules/postcss-colormin": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-5.3.1.tgz",
+      "integrity": "sha512-UsWQG0AqTFQmpBegeLLc1+c3jIqBNB0zlDGRWR+dQ3pRKJL1oeMzyqmH3o2PIfn9MBdNrVPWhDbT769LxCTLJQ==",
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.21.4",
+        "caniuse-api": "^3.0.0",
+        "colord": "^2.9.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-convert-values": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-5.1.3.tgz",
+      "integrity": "sha512-82pC1xkJZtcJEfiLw6UXnXVXScgtBrjlO5CBmuDQc+dlb88ZYheFsjTn40+zBVi3DkfF7iezO0nJUPLcJK3pvA==",
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.21.4",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-discard-comments": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz",
+      "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==",
+      "license": "MIT",
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-discard-duplicates": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz",
+      "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==",
+      "license": "MIT",
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-discard-empty": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz",
+      "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==",
+      "license": "MIT",
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-discard-overridden": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz",
+      "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
+      "license": "MIT",
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-discard-unused": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-discard-unused/-/postcss-discard-unused-5.1.0.tgz",
+      "integrity": "sha512-KwLWymI9hbwXmJa0dkrzpRbSJEh0vVUd7r8t0yOGPcfKzyJJxFM8kLyC5Ev9avji6nY95pOp1W6HqIrfT+0VGw==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.5"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmmirror.com/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmmirror.com/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmmirror.com/postcss-load-config/-/postcss-load-config-4.0.1.tgz",
+      "integrity": "sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==",
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^2.0.5",
+        "yaml": "^2.1.1"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-load-config/node_modules/yaml": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmmirror.com/yaml/-/yaml-2.3.3.tgz",
+      "integrity": "sha512-zw0VAJxgeZ6+++/su5AFoqBbZbrEakwu+X0M5HmcwUiBL7AzcuPKjj5we4xfQLp78LkEMpD0cOnUhmgOVy3KdQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/postcss-loader": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-7.3.2.tgz",
+      "integrity": "sha512-c7qDlXErX6n0VT+LUsW+nwefVtTu3ORtVvK8EXuUIDcxo+b/euYqpuHlJAvePb0Af5e8uMjR/13e0lTuYifaig==",
+      "license": "MIT",
+      "dependencies": {
+        "cosmiconfig": "^8.1.3",
+        "jiti": "^1.18.2",
+        "klona": "^2.0.6",
+        "semver": "^7.3.8"
+      },
+      "engines": {
+        "node": ">= 14.15.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "postcss": "^7.0.0 || ^8.0.1",
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/postcss-loader/node_modules/cosmiconfig": {
+      "version": "8.1.3",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.1.3.tgz",
+      "integrity": "sha512-/UkO2JKI18b5jVMJUp0lvKFMpa/Gye+ZgZjKD+DGEN9y7NRcf/nK1A0sp67ONmKtnDCNMS44E6jrk0Yc3bDuUw==",
+      "license": "MIT",
+      "dependencies": {
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/d-fischer"
+      }
+    },
+    "node_modules/postcss-merge-idents": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-merge-idents/-/postcss-merge-idents-5.1.1.tgz",
+      "integrity": "sha512-pCijL1TREiCoog5nQp7wUe+TUonA2tC2sQ54UGeMmryK3UFGIYKqDyjnqd6RcuI4znFn9hWSLNN8xKE/vWcUQw==",
+      "license": "MIT",
+      "dependencies": {
+        "cssnano-utils": "^3.1.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-merge-longhand": {
+      "version": "5.1.7",
+      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.1.7.tgz",
+      "integrity": "sha512-YCI9gZB+PLNskrK0BB3/2OzPnGhPkBEwmwhfYk1ilBHYVAZB7/tkTHFBAnCrvBBOmeYyMYw3DMjT55SyxMBzjQ==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0",
+        "stylehacks": "^5.1.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-merge-rules": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-5.1.4.tgz",
+      "integrity": "sha512-0R2IuYpgU93y9lhVbO/OylTtKMVcHb67zjWIfCiKR9rWL3GUk1677LAqD/BcHizukdZEjT8Ru3oHRoAYoJy44g==",
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.21.4",
+        "caniuse-api": "^3.0.0",
+        "cssnano-utils": "^3.1.0",
+        "postcss-selector-parser": "^6.0.5"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-minify-font-values": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-5.1.0.tgz",
+      "integrity": "sha512-el3mYTgx13ZAPPirSVsHqFzl+BBBDrXvbySvPGFnQcTI4iNslrPaFq4muTkLZmKlGk4gyFAYUBMH30+HurREyA==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-minify-gradients": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-5.1.1.tgz",
+      "integrity": "sha512-VGvXMTpCEo4qHTNSa9A0a3D+dxGFZCYwR6Jokk+/3oB6flu2/PnPXAh2x7x52EkY5xlIHLm+Le8tJxe/7TNhzw==",
+      "license": "MIT",
+      "dependencies": {
+        "colord": "^2.9.1",
+        "cssnano-utils": "^3.1.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-minify-params": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-5.1.4.tgz",
+      "integrity": "sha512-+mePA3MgdmVmv6g+30rn57USjOGSAyuxUmkfiWpzalZ8aiBkdPYjXWtHuwJGm1v5Ojy0Z0LaSYhHaLJQB0P8Jw==",
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.21.4",
+        "cssnano-utils": "^3.1.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-minify-selectors": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-5.2.1.tgz",
+      "integrity": "sha512-nPJu7OjZJTsVUmPdm2TcaiohIwxP+v8ha9NehQ2ye9szv4orirRU3SDdtUmKH+10nzn0bAyOXZ0UEr7OpvLehg==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.5"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-modules-extract-imports": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
+      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
+      "license": "ISC",
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-local-by-default": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.3.tgz",
+      "integrity": "sha512-2/u2zraspoACtrbFRnTijMiQtb4GW4BvatjaG/bCjYQo8kLTdevCUlwuBHx2sCnSyrI3x3qj4ZK1j5LQBgzmwA==",
+      "license": "MIT",
+      "dependencies": {
+        "icss-utils": "^5.0.0",
+        "postcss-selector-parser": "^6.0.2",
+        "postcss-value-parser": "^4.1.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-scope": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz",
+      "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==",
+      "license": "ISC",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.4"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-values": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
+      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
+      "license": "ISC",
+      "dependencies": {
+        "icss-utils": "^5.0.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmmirror.com/postcss-nested/-/postcss-nested-6.0.1.tgz",
+      "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.11"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-normalize-charset": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
+      "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==",
+      "license": "MIT",
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-display-values": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-5.1.0.tgz",
+      "integrity": "sha512-WP4KIM4o2dazQXWmFaqMmcvsKmhdINFblgSeRgn8BJ6vxaMyaJkwAzpPpuvSIoG/rmX3M+IrRZEz2H0glrQNEA==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-positions": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-5.1.1.tgz",
+      "integrity": "sha512-6UpCb0G4eofTCQLFVuI3EVNZzBNPiIKcA1AKVka+31fTVySphr3VUgAIULBhxZkKgwLImhzMR2Bw1ORK+37INg==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-repeat-style": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-5.1.1.tgz",
+      "integrity": "sha512-mFpLspGWkQtBcWIRFLmewo8aC3ImN2i/J3v8YCFUwDnPu3Xz4rLohDO26lGjwNsQxB3YF0KKRwspGzE2JEuS0g==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-string": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-5.1.0.tgz",
+      "integrity": "sha512-oYiIJOf4T9T1N4i+abeIc7Vgm/xPCGih4bZz5Nm0/ARVJ7K6xrDlLwvwqOydvyL3RHNf8qZk6vo3aatiw/go3w==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-timing-functions": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-5.1.0.tgz",
+      "integrity": "sha512-DOEkzJ4SAXv5xkHl0Wa9cZLF3WCBhF3o1SKVxKQAa+0pYKlueTpCgvkFAHfk+Y64ezX9+nITGrDZeVGgITJXjg==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-unicode": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-5.1.1.tgz",
+      "integrity": "sha512-qnCL5jzkNUmKVhZoENp1mJiGNPcsJCs1aaRmURmeJGES23Z/ajaln+EPTD+rBeNkSryI+2WTdW+lwcVdOikrpA==",
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.21.4",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-url": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-5.1.0.tgz",
+      "integrity": "sha512-5upGeDO+PVthOxSmds43ZeMeZfKH+/DKgGRD7TElkkyS46JXAUhMzIKiCa7BabPeIy3AQcTkXwVVN7DbqsiCew==",
+      "license": "MIT",
+      "dependencies": {
+        "normalize-url": "^6.0.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-whitespace": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-5.1.1.tgz",
+      "integrity": "sha512-83ZJ4t3NUDETIHTa3uEg6asWjSBYL5EdkVB0sDncx9ERzOKBVJIUeDO9RyA9Zwtig8El1d79HBp0JEi8wvGQnA==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-ordered-values": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-5.1.3.tgz",
+      "integrity": "sha512-9UO79VUhPwEkzbb3RNpqqghc6lcYej1aveQteWY+4POIwlqkYE21HKWaLDF6lWNuqCobEAyTovVhtI32Rbv2RQ==",
+      "license": "MIT",
+      "dependencies": {
+        "cssnano-utils": "^3.1.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-reduce-idents": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-idents/-/postcss-reduce-idents-5.2.0.tgz",
+      "integrity": "sha512-BTrLjICoSB6gxbc58D5mdBK8OhXRDqud/zodYfdSi52qvDHdMwk+9kB9xsM8yJThH/sZU5A6QVSmMmaN001gIg==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-reduce-initial": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-5.1.2.tgz",
+      "integrity": "sha512-dE/y2XRaqAi6OvjzD22pjTUQ8eOfc6m/natGHgKFBK9DxFmIm69YmaRVQrGgFlEfc1HePIurY0TmDeROK05rIg==",
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.21.4",
+        "caniuse-api": "^3.0.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-reduce-transforms": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-5.1.0.tgz",
+      "integrity": "sha512-2fbdbmgir5AvpW9RLtdONx1QoYG2/EtqpNQbFASDlixBbAYuTcJ0dECwlqNqH7VbaUnEnh8SrxOe2sRIn24XyQ==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.0.13",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
+      "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-sort-media-queries": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/postcss-sort-media-queries/-/postcss-sort-media-queries-4.4.1.tgz",
+      "integrity": "sha512-QDESFzDDGKgpiIh4GYXsSy6sek2yAwQx1JASl5AxBtU1Lq2JfKBljIPNdil989NcSKRQX1ToiaKphImtBuhXWw==",
+      "license": "MIT",
+      "dependencies": {
+        "sort-css-media-queries": "2.1.0"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.16"
+      }
+    },
+    "node_modules/postcss-svgo": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-5.1.0.tgz",
+      "integrity": "sha512-D75KsH1zm5ZrHyxPakAxJWtkyXew5qwS70v56exwvw542d9CRtTo78K0WeFxZB4G7JXKKMbEZtZayTGdIky/eA==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0",
+        "svgo": "^2.7.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-unique-selectors": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-5.1.1.tgz",
+      "integrity": "sha512-5JiODlELrz8L2HwxfPnhOWZYWDxVHWL83ufOv84NrcgipI7TaeRsatAhK4Tr2/ZiYldpK/wBvw5BD3qfaK96GA==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.5"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "license": "MIT"
+    },
+    "node_modules/postcss-zindex": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-zindex/-/postcss-zindex-5.1.0.tgz",
+      "integrity": "sha512-fgFMf0OtVSBR1va1JNHYgMxYk73yhn/qb4uQDq1DLGYolz8gHCyr/sesEuGUaYs58E3ZJRcpoGuPVoB7Meiq9A==",
+      "license": "MIT",
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/prepend-http": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz",
+      "integrity": "sha512-ravE6m9Atw9Z/jjttRUZ+clIXogdghyZAuWJ3qEzjT+jI/dL1ifAqhZeC5VHzQp1MSt1+jxKkFNemj/iO7tVUA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/pretty-error": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-4.0.0.tgz",
+      "integrity": "sha512-AoJ5YMAcXKYxKhuJGdcvse+Voc6v1RgnsR3nWcYU7q4t6z0Q6T86sv5Zq8VIRbOWWFpvdGE83LtdSMNd+6Y0xw==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash": "^4.17.20",
+        "renderkid": "^3.0.0"
+      }
+    },
+    "node_modules/pretty-time": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/pretty-time/-/pretty-time-1.1.0.tgz",
+      "integrity": "sha512-28iF6xPQrP8Oa6uxE6a1biz+lWeTOAPKggvjB8HAs6nVMKZwf5bG++632Dx614hIWgUPkgivRfG+a8uAXGTIbA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/prism-react-renderer": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-1.3.5.tgz",
+      "integrity": "sha512-IJ+MSwBWKG+SM3b2SUfdrhC+gu01QkV2KmRQgREThBfSQRoufqRfxfHUxpG1WcaFjP+kojcFyO9Qqtpgt3qLCg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=0.14.9"
+      }
+    },
+    "node_modules/prismjs": {
+      "version": "1.29.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+      "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "license": "MIT"
+    },
+    "node_modules/promise": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+      "license": "MIT",
+      "dependencies": {
+        "asap": "~2.0.3"
+      }
+    },
+    "node_modules/prompts": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
+      "integrity": "sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==",
+      "license": "MIT",
+      "dependencies": {
+        "kleur": "^3.0.3",
+        "sisteransi": "^1.0.5"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/property-information": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.6.0.tgz",
+      "integrity": "sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==",
+      "license": "MIT",
+      "dependencies": {
+        "xtend": "^4.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/proxy-addr": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+      "license": "MIT",
+      "dependencies": {
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/proxy-addr/node_modules/ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/pump": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+      "license": "MIT",
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+      "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==",
+      "license": "MIT"
+    },
+    "node_modules/pupa": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/pupa/-/pupa-2.1.1.tgz",
+      "integrity": "sha512-l1jNAspIBSFqbT+y+5FosojNpVpF94nlI+wDUpqP9enwOTfHx9f0gh5nB96vl+6yTpsJsypeNrwfzPrKuHB41A==",
+      "license": "MIT",
+      "dependencies": {
+        "escape-goat": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pure-color": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/pure-color/-/pure-color-1.3.0.tgz",
+      "integrity": "sha512-QFADYnsVoBMw1srW7OVKEYjG+MbIa49s54w1MA1EDY6r2r/sTcKKYqRX1f4GYvnXP7eN/Pe9HFcX+hwzmrXRHA==",
+      "license": "MIT"
+    },
+    "node_modules/qs": {
+      "version": "6.11.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "side-channel": "^1.0.4"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/queue": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz",
+      "integrity": "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "~2.0.3"
+      }
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/randombytes": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
+      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "^5.1.0"
+      }
+    },
+    "node_modules/range-parser": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz",
+      "integrity": "sha512-kA5WQoNVo4t9lNx2kQNFCxKeBl5IbbSNBl1M/tLkw9WCn+hxNBAW5Qh8gdhs63CJnhjJ2zQWFoqPJP2sK1AV5A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/raw-body": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
+      "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "3.1.2",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/raw-body/node_modules/bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "license": "(BSD-2-Clause OR MIT OR Apache-2.0)",
+      "dependencies": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      },
+      "bin": {
+        "rc": "cli.js"
+      }
+    },
+    "node_modules/rc/node_modules/strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
+      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-base16-styling": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/react-base16-styling/-/react-base16-styling-0.6.0.tgz",
+      "integrity": "sha512-yvh/7CArceR/jNATXOKDlvTnPKPmGZz7zsenQ3jUwLzHkNUR0CvY3yGYJbWJ/nnxsL8Sgmt5cO3/SILVuPO6TQ==",
+      "license": "MIT",
+      "dependencies": {
+        "base16": "^1.0.0",
+        "lodash.curry": "^4.0.1",
+        "lodash.flow": "^3.3.0",
+        "pure-color": "^1.2.0"
+      }
+    },
+    "node_modules/react-dev-utils": {
+      "version": "12.0.1",
+      "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
+      "integrity": "sha512-84Ivxmr17KjUupyqzFode6xKhjwuEJDROWKJy/BthkL7Wn6NJ8h4WE6k/exAv6ImS+0oZLRRW5j/aINMHyeGeQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.16.0",
+        "address": "^1.1.2",
+        "browserslist": "^4.18.1",
+        "chalk": "^4.1.2",
+        "cross-spawn": "^7.0.3",
+        "detect-port-alt": "^1.1.6",
+        "escape-string-regexp": "^4.0.0",
+        "filesize": "^8.0.6",
+        "find-up": "^5.0.0",
+        "fork-ts-checker-webpack-plugin": "^6.5.0",
+        "global-modules": "^2.0.0",
+        "globby": "^11.0.4",
+        "gzip-size": "^6.0.0",
+        "immer": "^9.0.7",
+        "is-root": "^2.1.0",
+        "loader-utils": "^3.2.0",
+        "open": "^8.4.0",
+        "pkg-up": "^3.1.0",
+        "prompts": "^2.4.2",
+        "react-error-overlay": "^6.0.11",
+        "recursive-readdir": "^2.2.2",
+        "shell-quote": "^1.7.3",
+        "strip-ansi": "^6.0.1",
+        "text-table": "^0.2.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/react-dev-utils/node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/react-dev-utils/node_modules/loader-utils": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-3.2.1.tgz",
+      "integrity": "sha512-ZvFw1KWS3GVyYBYb7qkmRM/WwL2TQQBxgCK62rlvm4WpVQ23Nb4tYjApUlfjrEGvOs7KHEsmyUn75OHZrJMWPw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12.13.0"
+      }
+    },
+    "node_modules/react-dev-utils/node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/react-dev-utils/node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/react-dev-utils/node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
+      "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "scheduler": "^0.20.2"
+      },
+      "peerDependencies": {
+        "react": "17.0.2"
+      }
+    },
+    "node_modules/react-error-overlay": {
+      "version": "6.0.11",
+      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
+      "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==",
+      "license": "MIT"
+    },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==",
+      "license": "MIT"
+    },
+    "node_modules/react-helmet": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.1.1",
+        "react-side-effect": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0"
+      }
+    },
+    "node_modules/react-helmet-async": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/react-helmet-async/-/react-helmet-async-1.3.0.tgz",
+      "integrity": "sha512-9jZ57/dAn9t3q6hneQS0wukqC2ENOBgMNVEhb/ZG9ZSxUetzVIw4iAmEU38IaVg3QGYauQPhSeUTuIUtFglWpg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.2.0",
+        "shallowequal": "^1.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.6.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.6.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
+    "node_modules/react-json-view": {
+      "version": "1.21.3",
+      "resolved": "https://registry.npmjs.org/react-json-view/-/react-json-view-1.21.3.tgz",
+      "integrity": "sha512-13p8IREj9/x/Ye4WI/JpjhoIwuzEgUAtgJZNBJckfzJt1qyh24BdTm6UQNGnyTq9dapQdrqvquZTo3dz1X6Cjw==",
+      "license": "MIT",
+      "dependencies": {
+        "flux": "^4.0.1",
+        "react-base16-styling": "^0.6.0",
+        "react-lifecycles-compat": "^3.0.4",
+        "react-textarea-autosize": "^8.3.2"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0 || ^16.3.0 || ^15.5.4",
+        "react-dom": "^17.0.0 || ^16.3.0 || ^15.5.4"
+      }
+    },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
+      "license": "MIT"
+    },
+    "node_modules/react-loadable": {
+      "name": "@docusaurus/react-loadable",
+      "version": "5.5.2",
+      "resolved": "https://registry.npmjs.org/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz",
+      "integrity": "sha512-A3dYjdBGuy0IGT+wyLIGIKLRE+sAk1iNk0f1HjNDysO7u8lhL4N3VEm+FAubmJbAztn94F7MxBTPmnixbiyFdQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
+    "node_modules/react-loadable-ssr-addon-v5-slorber": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/react-loadable-ssr-addon-v5-slorber/-/react-loadable-ssr-addon-v5-slorber-1.0.1.tgz",
+      "integrity": "sha512-lq3Lyw1lGku8zUEJPDxsNm1AfYHBrO9Y1+olAYwpUJ2IGFBskM0DMKok97A6LWUpHm+o7IvQBOWu9MLenp9Z+A==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "peerDependencies": {
+        "react-loadable": "*",
+        "webpack": ">=4.41.1 || 5.x"
+      }
+    },
+    "node_modules/react-router": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz",
+      "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.13",
+        "history": "^4.9.0",
+        "hoist-non-react-statics": "^3.1.0",
+        "loose-envify": "^1.3.1",
+        "path-to-regexp": "^1.7.0",
+        "prop-types": "^15.6.2",
+        "react-is": "^16.6.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=15"
+      }
+    },
+    "node_modules/react-router-config": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/react-router-config/-/react-router-config-5.1.1.tgz",
+      "integrity": "sha512-DuanZjaD8mQp1ppHjgnnUnyOlqYXZVjnov/JzFhjLEwd3Z4dYjMSnqrEzzGThH47vpCOqPPwJM2FtthLeJ8Pbg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.1.2"
+      },
+      "peerDependencies": {
+        "react": ">=15",
+        "react-router": ">=5"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.4.tgz",
+      "integrity": "sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.13",
+        "history": "^4.9.0",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.2",
+        "react-router": "5.3.4",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=15"
+      }
+    },
+    "node_modules/react-side-effect": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
+      "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-textarea-autosize": {
+      "version": "8.4.1",
+      "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.4.1.tgz",
+      "integrity": "sha512-aD2C+qK6QypknC+lCMzteOdIjoMbNlgSFmJjCV+DrfTPwp59i/it9mMNf2HDzvRjQgKAyBDPyLJhcrzElf2U4Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "use-composed-ref": "^1.3.0",
+        "use-latest": "^1.2.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/reading-time": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/reading-time/-/reading-time-1.5.0.tgz",
+      "integrity": "sha512-onYyVhBNr4CmAxFsKS7bz+uTLRakypIe4R+5A824vBSkQy/hB3fZepoVEf8OVAxzLvK+H/jm9TzpI3ETSm64Kg==",
+      "license": "MIT"
+    },
+    "node_modules/rechoir": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
+      "integrity": "sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==",
+      "dependencies": {
+        "resolve": "^1.1.6"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/recursive-readdir": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.3.tgz",
+      "integrity": "sha512-8HrF5ZsXk5FAH9dgsx3BlUer73nIhuj+9OrQwEbLTPOBzGkL1lsFCR01am+v+0m2Cmbs1nP12hLDl5FA7EszKA==",
+      "license": "MIT",
+      "dependencies": {
+        "minimatch": "^3.0.5"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/regenerate": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
+      "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==",
+      "license": "MIT"
+    },
+    "node_modules/regenerate-unicode-properties": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz",
+      "integrity": "sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ==",
+      "license": "MIT",
+      "dependencies": {
+        "regenerate": "^1.4.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "license": "MIT"
+    },
+    "node_modules/regenerator-transform": {
+      "version": "0.15.1",
+      "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.1.tgz",
+      "integrity": "sha512-knzmNAcuyxV+gQCufkYcvOqX/qIIfHLv0u5x79kRxuGojfYVky1f15TzZEu2Avte8QGepvUNTnLskf8E6X6Vyg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.8.4"
+      }
+    },
+    "node_modules/regexpu-core": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.3.2.tgz",
+      "integrity": "sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/regjsgen": "^0.8.0",
+        "regenerate": "^1.4.2",
+        "regenerate-unicode-properties": "^10.1.0",
+        "regjsparser": "^0.9.1",
+        "unicode-match-property-ecmascript": "^2.0.0",
+        "unicode-match-property-value-ecmascript": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/registry-auth-token": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-4.2.2.tgz",
+      "integrity": "sha512-PC5ZysNb42zpFME6D/XlIgtNGdTl8bBOCw90xQLVMpzuuubJKYDWFAEuUNc+Cn8Z8724tg2SDhDRrkVEsqfDMg==",
+      "license": "MIT",
+      "dependencies": {
+        "rc": "1.2.8"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/registry-url": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-5.1.0.tgz",
+      "integrity": "sha512-8acYXXTI0AkQv6RAOjE3vOaIXZkT9wo4LOFbBKYQEEnnMNBpKqdUrI6S4NT0KPIo/WVvJ5tE/X5LF/TQUf0ekw==",
+      "license": "MIT",
+      "dependencies": {
+        "rc": "^1.2.8"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/regjsparser": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.9.1.tgz",
+      "integrity": "sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "jsesc": "~0.5.0"
+      },
+      "bin": {
+        "regjsparser": "bin/parser"
+      }
+    },
+    "node_modules/regjsparser/node_modules/jsesc": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
+      "integrity": "sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      }
+    },
+    "node_modules/relateurl": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
+      "integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/remark-emoji": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/remark-emoji/-/remark-emoji-2.2.0.tgz",
+      "integrity": "sha512-P3cj9s5ggsUvWw5fS2uzCHJMGuXYRb0NnZqYlNecewXt8QBU9n5vW3DUUKOhepS8F9CwdMx9B8a3i7pqFWAI5w==",
+      "license": "MIT",
+      "dependencies": {
+        "emoticon": "^3.2.0",
+        "node-emoji": "^1.10.0",
+        "unist-util-visit": "^2.0.3"
+      }
+    },
+    "node_modules/remark-footnotes": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/remark-footnotes/-/remark-footnotes-2.0.0.tgz",
+      "integrity": "sha512-3Clt8ZMH75Ayjp9q4CorNeyjwIxHFcTkaektplKGl2A1jNGEUey8cKL0ZC5vJwfcD5GFGsNLImLG/NGzWIzoMQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-mdx": {
+      "version": "1.6.22",
+      "resolved": "https://registry.npmjs.org/remark-mdx/-/remark-mdx-1.6.22.tgz",
+      "integrity": "sha512-phMHBJgeV76uyFkH4rvzCftLfKCr2RZuF+/gmVcaKrpsihyzmhXjA0BEMDaPTXG5y8qZOKPVo83NAOX01LPnOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "7.12.9",
+        "@babel/helper-plugin-utils": "7.10.4",
+        "@babel/plugin-proposal-object-rest-spread": "7.12.1",
+        "@babel/plugin-syntax-jsx": "7.12.1",
+        "@mdx-js/util": "1.6.22",
+        "is-alphabetical": "1.0.4",
+        "remark-parse": "8.0.3",
+        "unified": "9.2.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-mdx/node_modules/@babel/core": {
+      "version": "7.12.9",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.12.9.tgz",
+      "integrity": "sha512-gTXYh3M5wb7FRXQy+FErKFAv90BnlOuNn1QkCK2lREoPAjrQCO49+HVSrFoe5uakFAF5eenS75KbO2vQiLrTMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/generator": "^7.12.5",
+        "@babel/helper-module-transforms": "^7.12.1",
+        "@babel/helpers": "^7.12.5",
+        "@babel/parser": "^7.12.7",
+        "@babel/template": "^7.12.7",
+        "@babel/traverse": "^7.12.9",
+        "@babel/types": "^7.12.7",
+        "convert-source-map": "^1.7.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.1",
+        "json5": "^2.1.2",
+        "lodash": "^4.17.19",
+        "resolve": "^1.3.2",
+        "semver": "^5.4.1",
+        "source-map": "^0.5.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/remark-mdx/node_modules/@babel/helper-plugin-utils": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz",
+      "integrity": "sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==",
+      "license": "MIT"
+    },
+    "node_modules/remark-mdx/node_modules/@babel/plugin-syntax-jsx": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.12.1.tgz",
+      "integrity": "sha512-1yRi7yAtB0ETgxdY9ti/p2TivUxJkTdhu/ZbF9MshVGqOx1TdB3b7xCXs49Fupgg50N45KcAsRP/ZqWjs9SRjg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/remark-mdx/node_modules/semver": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/remark-mdx/node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-mdx/node_modules/unified": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/unified/-/unified-9.2.0.tgz",
+      "integrity": "sha512-vx2Z0vY+a3YoTj8+pttM3tiJHCwY5UFbYdiWrwBEbHmK8pvsPj2rtAX2BFfgXen8T39CJWblWRDT4L5WGXtDdg==",
+      "license": "MIT",
+      "dependencies": {
+        "bail": "^1.0.0",
+        "extend": "^3.0.0",
+        "is-buffer": "^2.0.0",
+        "is-plain-obj": "^2.0.0",
+        "trough": "^1.0.0",
+        "vfile": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-parse": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-8.0.3.tgz",
+      "integrity": "sha512-E1K9+QLGgggHxCQtLt++uXltxEprmWzNfg+MxpfHsZlrddKzZ/hZyWHDbK3/Ap8HJQqYJRXP+jHczdL6q6i85Q==",
+      "license": "MIT",
+      "dependencies": {
+        "ccount": "^1.0.0",
+        "collapse-white-space": "^1.0.2",
+        "is-alphabetical": "^1.0.0",
+        "is-decimal": "^1.0.0",
+        "is-whitespace-character": "^1.0.0",
+        "is-word-character": "^1.0.0",
+        "markdown-escapes": "^1.0.0",
+        "parse-entities": "^2.0.0",
+        "repeat-string": "^1.5.4",
+        "state-toggle": "^1.0.0",
+        "trim": "0.0.1",
+        "trim-trailing-lines": "^1.0.0",
+        "unherit": "^1.0.4",
+        "unist-util-remove-position": "^2.0.0",
+        "vfile-location": "^3.0.0",
+        "xtend": "^4.0.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-squeeze-paragraphs": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/remark-squeeze-paragraphs/-/remark-squeeze-paragraphs-4.0.0.tgz",
+      "integrity": "sha512-8qRqmL9F4nuLPIgl92XUuxI3pFxize+F1H0e/W3llTk0UsjJaj01+RrirkMw7P21RKe4X6goQhYRSvNWX+70Rw==",
+      "license": "MIT",
+      "dependencies": {
+        "mdast-squeeze-paragraphs": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/renderkid": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz",
+      "integrity": "sha512-q/7VIQA8lmM1hF+jn+sFSPWGlMkSAeNYcPLmDQx2zzuiDfaLrOmumR8iaUKlenFgh0XRPIUeSPlH3A+AW3Z5pg==",
+      "license": "MIT",
+      "dependencies": {
+        "css-select": "^4.1.3",
+        "dom-converter": "^0.2.0",
+        "htmlparser2": "^6.1.0",
+        "lodash": "^4.17.21",
+        "strip-ansi": "^6.0.1"
+      }
+    },
+    "node_modules/renderkid/node_modules/css-select": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
+      "integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.0.1",
+        "domhandler": "^4.3.1",
+        "domutils": "^2.8.0",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/renderkid/node_modules/dom-serializer": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
+      "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.0",
+        "entities": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/renderkid/node_modules/domhandler": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
+      "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.2.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/renderkid/node_modules/domutils": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^1.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/renderkid/node_modules/entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "license": "BSD-2-Clause",
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/renderkid/node_modules/htmlparser2": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
+      "integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.0.0",
+        "domutils": "^2.5.2",
+        "entities": "^2.0.0"
+      }
+    },
+    "node_modules/repeat-string": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
+      "integrity": "sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/require-like": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/require-like/-/require-like-0.1.2.tgz",
+      "integrity": "sha512-oyrU88skkMtDdauHDuKVrgR+zuItqr6/c//FXzvmxRGMexSDc6hNvJInGW3LL46n+8b50RykrvwSUIIQH2LQ5A==",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
+      "license": "MIT"
+    },
+    "node_modules/resolve": {
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz",
+      "integrity": "sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==",
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.11.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/resolve-pathname": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
+      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==",
+      "license": "MIT"
+    },
+    "node_modules/responselike": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/responselike/-/responselike-1.0.2.tgz",
+      "integrity": "sha512-/Fpe5guzJk1gPqdJLJR5u7eG/gNY4nImjbRDaVWVMRhne55TCmj2i9Q+54PBRfatRC8v/rIiv9BN0pMd9OV5EQ==",
+      "license": "MIT",
+      "dependencies": {
+        "lowercase-keys": "^1.0.0"
+      }
+    },
+    "node_modules/retry": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
+      "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "license": "ISC",
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/rtl-detect": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/rtl-detect/-/rtl-detect-1.0.4.tgz",
+      "integrity": "sha512-EBR4I2VDSSYr7PkBmFy04uhycIpDKp+21p/jARYXlCSjQksTBQcJ0HFUPOO79EPPH5JS6VAhiIQbycf0O3JAxQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/rtlcss": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-3.5.0.tgz",
+      "integrity": "sha512-wzgMaMFHQTnyi9YOwsx9LjOxYXJPzS8sYnFaKm6R5ysvTkwzHiB0vxnbHwchHQT65PTdBjDG21/kQBWI7q9O7A==",
+      "license": "MIT",
+      "dependencies": {
+        "find-up": "^5.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.3.11",
+        "strip-json-comments": "^3.1.1"
+      },
+      "bin": {
+        "rtlcss": "bin/rtlcss.js"
+      }
+    },
+    "node_modules/rtlcss/node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/rtlcss/node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/rtlcss/node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/rtlcss/node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/rxjs": {
+      "version": "7.8.1",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
+      "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "license": "MIT"
+    },
+    "node_modules/sass": {
+      "version": "1.62.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.62.1.tgz",
+      "integrity": "sha512-NHpxIzN29MXvWiuswfc1W3I0N8SXBd8UR26WntmDlRYf0bSADnwnOjsyMZ3lMezSlArD33Vs3YFhp7dWvL770A==",
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-loader": {
+      "version": "10.4.1",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.4.1.tgz",
+      "integrity": "sha512-aX/iJZTTpNUNx/OSYzo2KsjIUQHqvWsAhhUijFjAPdZTEhstjZI9zTNvkTTwsx+uNUJqUwOw5gacxQMx4hJxGQ==",
+      "license": "MIT",
+      "dependencies": {
+        "klona": "^2.0.4",
+        "loader-utils": "^2.0.0",
+        "neo-async": "^2.6.2",
+        "schema-utils": "^3.0.0",
+        "semver": "^7.3.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "fibers": ">= 3.1.0",
+        "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0",
+        "sass": "^1.3.0",
+        "webpack": "^4.36.0 || ^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "fibers": {
+          "optional": true
+        },
+        "node-sass": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/sass-loader/node_modules/schema-utils": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.2.tgz",
+      "integrity": "sha512-pvjEHOgWc9OWA/f/DE3ohBWTD6EleVLf7iFUkoSwAxttdBhB9QUebQgxER2kWueOvRJXPHNnyrvvh9eZINB8Eg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/sax": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
+      "license": "ISC"
+    },
+    "node_modules/scheduler": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
+      "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
+    "node_modules/schema-utils": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
+      "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/json-schema": "^7.0.5",
+        "ajv": "^6.12.4",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 8.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/section-matter": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
+      "integrity": "sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==",
+      "license": "MIT",
+      "dependencies": {
+        "extend-shallow": "^2.0.1",
+        "kind-of": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/select-hose": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
+      "integrity": "sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg==",
+      "license": "MIT"
+    },
+    "node_modules/selfsigned": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.1.1.tgz",
+      "integrity": "sha512-GSL3aowiF7wa/WtSFwnUrludWFoNhftq8bUkH9pkzjpN2XSPOAYEgg6e0sS9s0rZwgJzJiQRPU18A6clnoW5wQ==",
+      "license": "MIT",
+      "dependencies": {
+        "node-forge": "^1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/semver": {
+      "version": "7.5.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
+      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "license": "ISC",
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/semver-diff": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/semver-diff/-/semver-diff-3.1.1.tgz",
+      "integrity": "sha512-GX0Ix/CJcHyB8c4ykpHGIAvLyOwOobtM/8d+TQkAd81/bEjgPHrfba41Vpesr7jX/t8Uh+R3EX9eAS5be+jQYg==",
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/semver-diff/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/semver/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/semver/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "license": "ISC"
+    },
+    "node_modules/send": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
+      "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "2.0.0",
+        "mime": "1.6.0",
+        "ms": "2.1.3",
+        "on-finished": "2.4.1",
+        "range-parser": "~1.2.1",
+        "statuses": "2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/send/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/send/node_modules/debug/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "license": "MIT"
+    },
+    "node_modules/send/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/send/node_modules/range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/serialize-javascript": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.1.tgz",
+      "integrity": "sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "randombytes": "^2.1.0"
+      }
+    },
+    "node_modules/serve-handler": {
+      "version": "6.1.5",
+      "resolved": "https://registry.npmjs.org/serve-handler/-/serve-handler-6.1.5.tgz",
+      "integrity": "sha512-ijPFle6Hwe8zfmBxJdE+5fta53fdIY0lHISJvuikXB3VYFafRjMRpOffSPvCYsbKyBA7pvy9oYr/BT1O3EArlg==",
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "3.0.0",
+        "content-disposition": "0.5.2",
+        "fast-url-parser": "1.1.3",
+        "mime-types": "2.1.18",
+        "minimatch": "3.1.2",
+        "path-is-inside": "1.0.2",
+        "path-to-regexp": "2.2.1",
+        "range-parser": "1.2.0"
+      }
+    },
+    "node_modules/serve-handler/node_modules/path-to-regexp": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-2.2.1.tgz",
+      "integrity": "sha512-gu9bD6Ta5bwGrrU8muHzVOBFFREpp2iRkVfhBJahwJ6p6Xw20SjT0MxLnwkjOibQmGSYhiUnf2FLe7k+jcFmGQ==",
+      "license": "MIT"
+    },
+    "node_modules/serve-index": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz",
+      "integrity": "sha512-pXHfKNP4qujrtteMrSBb0rc8HJ9Ms/GrXwcUtUtD5s4ewDJI8bT3Cz2zTVRMKtri49pLx2e0Ya8ziP5Ya2pZZw==",
+      "license": "MIT",
+      "dependencies": {
+        "accepts": "~1.3.4",
+        "batch": "0.6.1",
+        "debug": "2.6.9",
+        "escape-html": "~1.0.3",
+        "http-errors": "~1.6.2",
+        "mime-types": "~2.1.17",
+        "parseurl": "~1.3.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/serve-index/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/serve-index/node_modules/depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/serve-index/node_modules/http-errors": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
+      "integrity": "sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==",
+      "license": "MIT",
+      "dependencies": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.3",
+        "setprototypeof": "1.1.0",
+        "statuses": ">= 1.4.0 < 2"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/serve-index/node_modules/inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==",
+      "license": "ISC"
+    },
+    "node_modules/serve-index/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "license": "MIT"
+    },
+    "node_modules/serve-index/node_modules/setprototypeof": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
+      "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==",
+      "license": "ISC"
+    },
+    "node_modules/serve-index/node_modules/statuses": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/serve-static": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
+      "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
+      "license": "MIT",
+      "dependencies": {
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "0.18.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+      "license": "MIT"
+    },
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+      "license": "ISC"
+    },
+    "node_modules/shallow-clone": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
+      "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
+      "license": "MIT",
+      "dependencies": {
+        "kind-of": "^6.0.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
+      "license": "MIT"
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shell-quote": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.1.tgz",
+      "integrity": "sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/shelljs": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.8.5.tgz",
+      "integrity": "sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "glob": "^7.0.0",
+        "interpret": "^1.0.0",
+        "rechoir": "^0.6.2"
+      },
+      "bin": {
+        "shjs": "bin/shjs"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+      "license": "ISC"
+    },
+    "node_modules/sirv": {
+      "version": "1.0.19",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.19.tgz",
+      "integrity": "sha512-JuLThK3TnZG1TAKDwNIqNq6QA2afLOCcm+iE8D1Kj3GA40pSPsxQjjJl0J8X3tsR7T+CP1GavpzLwYkgVLWrZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@polka/url": "^1.0.0-next.20",
+        "mrmime": "^1.0.0",
+        "totalist": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/sisteransi": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
+      "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
+      "license": "MIT"
+    },
+    "node_modules/sitemap": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/sitemap/-/sitemap-7.1.1.tgz",
+      "integrity": "sha512-mK3aFtjz4VdJN0igpIJrinf3EO8U8mxOPsTBzSsy06UtjZQJ3YY3o3Xa7zSc5nMqcMrRwlChHZ18Kxg0caiPBg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "^17.0.5",
+        "@types/sax": "^1.2.1",
+        "arg": "^5.0.0",
+        "sax": "^1.2.4"
+      },
+      "bin": {
+        "sitemap": "dist/cli.js"
+      },
+      "engines": {
+        "node": ">=12.0.0",
+        "npm": ">=5.6.0"
+      }
+    },
+    "node_modules/sitemap/node_modules/@types/node": {
+      "version": "17.0.45",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.45.tgz",
+      "integrity": "sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==",
+      "license": "MIT"
+    },
+    "node_modules/slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/sockjs": {
+      "version": "0.3.24",
+      "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz",
+      "integrity": "sha512-GJgLTZ7vYb/JtPSSZ10hsOYIvEYsjbNU+zPdIHcUaWVNUEPivzxku31865sSSud0Da0W4lEeOPlmw93zLQchuQ==",
+      "license": "MIT",
+      "dependencies": {
+        "faye-websocket": "^0.11.3",
+        "uuid": "^8.3.2",
+        "websocket-driver": "^0.7.4"
+      }
+    },
+    "node_modules/sort-css-media-queries": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/sort-css-media-queries/-/sort-css-media-queries-2.1.0.tgz",
+      "integrity": "sha512-IeWvo8NkNiY2vVYdPa27MCQiR0MN0M80johAYFVxWWXQ44KU84WNxjslwBHmc/7ZL2ccwkM7/e6S5aiKZXm7jA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6.3.0"
+      }
+    },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "node_modules/space-separated-tokens": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz",
+      "integrity": "sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/spdy": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz",
+      "integrity": "sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.1.0",
+        "handle-thing": "^2.0.0",
+        "http-deceiver": "^1.2.7",
+        "select-hose": "^2.0.0",
+        "spdy-transport": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/spdy-transport": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/spdy-transport/-/spdy-transport-3.0.0.tgz",
+      "integrity": "sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.1.0",
+        "detect-node": "^2.0.4",
+        "hpack.js": "^2.1.6",
+        "obuf": "^1.1.2",
+        "readable-stream": "^3.0.6",
+        "wbuf": "^1.7.3"
+      }
+    },
+    "node_modules/sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/stable": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
+      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
+      "license": "MIT"
+    },
+    "node_modules/state-toggle": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/state-toggle/-/state-toggle-1.0.3.tgz",
+      "integrity": "sha512-d/5Z4/2iiCnHw6Xzghyhb+GcmF89bxwgXG60wjIiZaxnymbyOmI8Hk4VqHXiVVp6u2ysaskFfXg3ekCj4WNftQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/statuses": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/std-env": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.3.3.tgz",
+      "integrity": "sha512-Rz6yejtVyWnVjC1RFvNmYL10kgjC49EOghxWn0RFqlCHGFpQx+Xe7yW3I4ceK1SGrWIGMjD5Kbue8W/udkbMJg==",
+      "license": "MIT"
+    },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/string-width/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/string-width/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/stringify-object": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz",
+      "integrity": "sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "get-own-enumerable-property-symbols": "^3.0.0",
+        "is-obj": "^1.0.1",
+        "is-regexp": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-bom-string": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom-string/-/strip-bom-string-1.0.0.tgz",
+      "integrity": "sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/strip-final-newline": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
+      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/style-to-object": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.3.0.tgz",
+      "integrity": "sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA==",
+      "license": "MIT",
+      "dependencies": {
+        "inline-style-parser": "0.1.1"
+      }
+    },
+    "node_modules/stylehacks": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
+      "integrity": "sha512-sBpcd5Hx7G6seo7b1LkpttvTz7ikD0LlH5RmdcBNb6fFR0Fl7LQwHDFr300q4cwUqi+IYrFGmsIHieMBfnN/Bw==",
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.21.4",
+        "postcss-selector-parser": "^6.0.4"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/sucrase": {
+      "version": "3.34.0",
+      "resolved": "https://registry.npmmirror.com/sucrase/-/sucrase-3.34.0.tgz",
+      "integrity": "sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "7.1.6",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/sucrase/node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmmirror.com/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/sucrase/node_modules/glob": {
+      "version": "7.1.6",
+      "resolved": "https://registry.npmmirror.com/glob/-/glob-7.1.6.tgz",
+      "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+      "license": "ISC",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/svg-parser": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
+      "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==",
+      "license": "MIT"
+    },
+    "node_modules/svgo": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz",
+      "integrity": "sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==",
+      "license": "MIT",
+      "dependencies": {
+        "@trysound/sax": "0.2.0",
+        "commander": "^7.2.0",
+        "css-select": "^4.1.3",
+        "css-tree": "^1.1.3",
+        "csso": "^4.2.0",
+        "picocolors": "^1.0.0",
+        "stable": "^0.1.8"
+      },
+      "bin": {
+        "svgo": "bin/svgo"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/svgo/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/svgo/node_modules/css-select": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
+      "integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.0.1",
+        "domhandler": "^4.3.1",
+        "domutils": "^2.8.0",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/svgo/node_modules/dom-serializer": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
+      "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.0",
+        "entities": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/svgo/node_modules/domhandler": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
+      "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.2.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/svgo/node_modules/domutils": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^1.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/svgo/node_modules/entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "license": "BSD-2-Clause",
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmmirror.com/tailwindcss/-/tailwindcss-3.3.5.tgz",
+      "integrity": "sha512-5SEZU4J7pxZgSkv7FP1zY8i2TIAOooNZ1e/OGtxIEv6GltpoiXUqWvLy89+a10qYTB1N5Ifkuw9lqQkN9sscvA==",
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.0",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.19.1",
+        "lilconfig": "^2.1.0",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.23",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.1",
+        "postcss-nested": "^6.0.1",
+        "postcss-selector-parser": "^6.0.11",
+        "resolve": "^1.22.2",
+        "sucrase": "^3.32.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/tapable": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
+      "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/terser": {
+      "version": "5.17.6",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.17.6.tgz",
+      "integrity": "sha512-V8QHcs8YuyLkLHsJO5ucyff1ykrLVsR4dNnS//L5Y3NiSXpbK1J+WMVUs67eI0KTxs9JtHhgEQpXQVHlHI92DQ==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@jridgewell/source-map": "^0.3.2",
+        "acorn": "^8.5.0",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
+      },
+      "bin": {
+        "terser": "bin/terser"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/terser-webpack-plugin": {
+      "version": "5.3.9",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.9.tgz",
+      "integrity": "sha512-ZuXsqE07EcggTWQjXUj+Aot/OMcD0bMKGgF63f7UxYcu5/AJF53aIpK1YoP5xR9l6s/Hy2b+t1AM0bLNPRuhwA==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/trace-mapping": "^0.3.17",
+        "jest-worker": "^27.4.5",
+        "schema-utils": "^3.1.1",
+        "serialize-javascript": "^6.0.1",
+        "terser": "^5.16.8"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.1.0"
+      },
+      "peerDependenciesMeta": {
+        "@swc/core": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "uglify-js": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/terser-webpack-plugin/node_modules/jest-worker": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
+      "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*",
+        "merge-stream": "^2.0.0",
+        "supports-color": "^8.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
+    "node_modules/terser-webpack-plugin/node_modules/schema-utils": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.2.tgz",
+      "integrity": "sha512-pvjEHOgWc9OWA/f/DE3ohBWTD6EleVLf7iFUkoSwAxttdBhB9QUebQgxER2kWueOvRJXPHNnyrvvh9eZINB8Eg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/terser-webpack-plugin/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/terser/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "license": "MIT"
+    },
+    "node_modules/text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
+      "license": "MIT"
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmmirror.com/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmmirror.com/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/thunky": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
+      "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
+      "license": "MIT"
+    },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
+      "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==",
+      "license": "MIT"
+    },
+    "node_modules/tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==",
+      "license": "MIT"
+    },
+    "node_modules/to-fast-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/to-readable-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/to-readable-stream/-/to-readable-stream-1.0.0.tgz",
+      "integrity": "sha512-Iq25XBt6zD5npPhlLVXGFN3/gyR2/qODcKNNyTMd4vbm39HUaOiAM4PMq0eMVC/Tkxz+Zjdsc55g9yyz+Yq00Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/totalist": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/totalist/-/totalist-1.1.0.tgz",
+      "integrity": "sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
+      "license": "MIT"
+    },
+    "node_modules/trim": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz",
+      "integrity": "sha512-YzQV+TZg4AxpKxaTHK3c3D+kRDCGVEE7LemdlQZoQXn0iennk10RsIoY6ikzAqJTc9Xjl9C1/waHom/J86ziAQ=="
+    },
+    "node_modules/trim-trailing-lines": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/trim-trailing-lines/-/trim-trailing-lines-1.1.4.tgz",
+      "integrity": "sha512-rjUWSqnfTNrjbB9NQWfPMH/xRK1deHeGsHoVfpxJ++XeYXE0d6B1En37AHfw3jtfTU7dzMzZL2jjpe8Qb5gLIQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/trough": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/trough/-/trough-1.0.5.tgz",
+      "integrity": "sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmmirror.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/tslib": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.2.tgz",
+      "integrity": "sha512-5svOrSA2w3iGFDs1HibEVBGbDrAY82bFQ3HZ3ixB+88nsbsWQoKqDRb5UBYAUPEzbBn6dAp5gRNXglySbx1MlA==",
+      "license": "0BSD"
+    },
+    "node_modules/type-fest": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "license": "MIT",
+      "dependencies": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/type-is/node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/type-is/node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/typedarray-to-buffer": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
+      "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
+      "license": "MIT",
+      "dependencies": {
+        "is-typedarray": "^1.0.0"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz",
+      "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==",
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=12.20"
+      }
+    },
+    "node_modules/ua-parser-js": {
+      "version": "0.7.35",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.35.tgz",
+      "integrity": "sha512-veRf7dawaj9xaWEu9HoTVn5Pggtc/qj+kqTOFvNiN1l0YdxwC1kvel57UCjThjGa3BHBihE8/UJAHI+uQHmd/g==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/ua-parser-js"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/faisalman"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/unherit": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/unherit/-/unherit-1.1.3.tgz",
+      "integrity": "sha512-Ft16BJcnapDKp0+J/rqFC3Rrk6Y/Ng4nzsC028k2jdDII/rdZ7Wd3pPT/6+vIIxRagwRc9K0IUX0Ra4fKvw+WQ==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.0",
+        "xtend": "^4.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/unicode-canonical-property-names-ecmascript": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
+      "integrity": "sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unicode-match-property-ecmascript": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz",
+      "integrity": "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "unicode-canonical-property-names-ecmascript": "^2.0.0",
+        "unicode-property-aliases-ecmascript": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unicode-match-property-value-ecmascript": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz",
+      "integrity": "sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unicode-property-aliases-ecmascript": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz",
+      "integrity": "sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unified": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/unified/-/unified-9.2.2.tgz",
+      "integrity": "sha512-Sg7j110mtefBD+qunSLO1lqOEKdrwBFBrR6Qd8f4uwkhWNlbkaqwHse6e7QvD3AP/MNoJdEDLaf8OxYyoWgorQ==",
+      "license": "MIT",
+      "dependencies": {
+        "bail": "^1.0.0",
+        "extend": "^3.0.0",
+        "is-buffer": "^2.0.0",
+        "is-plain-obj": "^2.0.0",
+        "trough": "^1.0.0",
+        "vfile": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unique-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",
+      "integrity": "sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==",
+      "license": "MIT",
+      "dependencies": {
+        "crypto-random-string": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/unist-builder": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/unist-builder/-/unist-builder-2.0.3.tgz",
+      "integrity": "sha512-f98yt5pnlMWlzP539tPc4grGMsFaQQlP/vM396b00jngsiINumNmsY8rkXjfoi1c6QaM8nQ3vaGDuoKWbe/1Uw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-generated": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/unist-util-generated/-/unist-util-generated-1.1.6.tgz",
+      "integrity": "sha512-cln2Mm1/CZzN5ttGK7vkoGw+RZ8VcUH6BtGbq98DDtRGquAAOXig1mrBQYelOwMXYS8rK+vZDyyojSjp7JX+Lg==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-is": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.1.0.tgz",
+      "integrity": "sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-position": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-3.1.0.tgz",
+      "integrity": "sha512-w+PkwCbYSFw8vpgWD0v7zRCl1FpY3fjDSQ3/N/wNd9Ffa4gPi8+4keqt99N3XW6F99t/mUzp2xAhNmfKWp95QA==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-remove": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/unist-util-remove/-/unist-util-remove-2.1.0.tgz",
+      "integrity": "sha512-J8NYPyBm4baYLdCbjmf1bhPu45Cr1MWTm77qd9istEkzWpnN6O9tMsEbB2JhNnBCqGENRqEWomQ+He6au0B27Q==",
+      "license": "MIT",
+      "dependencies": {
+        "unist-util-is": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-remove-position": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-remove-position/-/unist-util-remove-position-2.0.1.tgz",
+      "integrity": "sha512-fDZsLYIe2uT+oGFnuZmy73K6ZxOPG/Qcm+w7jbEjaFcJgbQ6cqjs/eSPzXhsmGpAsWPkqZM9pYjww5QTn3LHMA==",
+      "license": "MIT",
+      "dependencies": {
+        "unist-util-visit": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-stringify-position": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
+      "integrity": "sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^2.0.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-2.0.3.tgz",
+      "integrity": "sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "unist-util-is": "^4.0.0",
+        "unist-util-visit-parents": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit-parents": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-3.1.1.tgz",
+      "integrity": "sha512-1KROIZWo6bcMrZEwiH2UrXDyalAa0uqzWCxCJj6lPOvTve2WkfgCytoDTPaMnodXh1WrXOq0haVYHj99ynJlsg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "unist-util-is": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/universalify": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmmirror.com/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
+      "integrity": "sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.1.1",
+        "picocolors": "^1.0.0"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/update-notifier": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/update-notifier/-/update-notifier-5.1.0.tgz",
+      "integrity": "sha512-ItnICHbeMh9GqUy31hFPrD1kcuZ3rpxDZbf4KUDavXwS0bW5m7SLbDQpGX3UYr072cbrF5hFUs3r5tUsPwjfHw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boxen": "^5.0.0",
+        "chalk": "^4.1.0",
+        "configstore": "^5.0.1",
+        "has-yarn": "^2.1.0",
+        "import-lazy": "^2.1.0",
+        "is-ci": "^2.0.0",
+        "is-installed-globally": "^0.4.0",
+        "is-npm": "^5.0.0",
+        "is-yarn-global": "^0.3.0",
+        "latest-version": "^5.1.0",
+        "pupa": "^2.1.1",
+        "semver": "^7.3.4",
+        "semver-diff": "^3.1.1",
+        "xdg-basedir": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/yeoman/update-notifier?sponsor=1"
+      }
+    },
+    "node_modules/update-notifier/node_modules/boxen": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/boxen/-/boxen-5.1.2.tgz",
+      "integrity": "sha512-9gYgQKXx+1nP8mP7CzFyaUARhg7D3n1dF/FnErWmu9l6JvGpNUN278h0aSb+QjoiKSWG+iZ3uHrcqk0qrY9RQQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-align": "^3.0.0",
+        "camelcase": "^6.2.0",
+        "chalk": "^4.1.0",
+        "cli-boxes": "^2.2.1",
+        "string-width": "^4.2.2",
+        "type-fest": "^0.20.2",
+        "widest-line": "^3.1.0",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/update-notifier/node_modules/cli-boxes": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-2.2.1.tgz",
+      "integrity": "sha512-y4coMcylgSCdVinjiDBuR8PCC2bLjyGTwEmPb9NHR/QaNU6EUOXcTY/s6VjGMD6ENSEaeQYHCY0GNGS5jfMwPw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/update-notifier/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/update-notifier/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/update-notifier/node_modules/type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/update-notifier/node_modules/widest-line": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-3.1.0.tgz",
+      "integrity": "sha512-NsmoXalsWVDMGupxZ5R08ka9flZjjiLvHVAWYOKtiKM8ujtZWr9cRffak+uSE48+Ob8ObalXpwyeUiyDD6QFgg==",
+      "license": "MIT",
+      "dependencies": {
+        "string-width": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/update-notifier/node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/uri-js/node_modules/punycode": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
+      "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/url-loader": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-4.1.1.tgz",
+      "integrity": "sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==",
+      "license": "MIT",
+      "dependencies": {
+        "loader-utils": "^2.0.0",
+        "mime-types": "^2.1.27",
+        "schema-utils": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "file-loader": "*",
+        "webpack": "^4.0.0 || ^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "file-loader": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/url-loader/node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/url-loader/node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/url-loader/node_modules/schema-utils": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.2.tgz",
+      "integrity": "sha512-pvjEHOgWc9OWA/f/DE3ohBWTD6EleVLf7iFUkoSwAxttdBhB9QUebQgxER2kWueOvRJXPHNnyrvvh9eZINB8Eg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/url-parse-lax": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz",
+      "integrity": "sha512-NjFKA0DidqPa5ciFcSrXnAltTtzz84ogy+NebPvfEgAck0+TNg4UJ4IN+fB7zRZfbgUf0syOo9MDxFkDSMuFaQ==",
+      "license": "MIT",
+      "dependencies": {
+        "prepend-http": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/use-composed-ref": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.3.0.tgz",
+      "integrity": "sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/use-isomorphic-layout-effect": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
+      "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-latest": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.1.tgz",
+      "integrity": "sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==",
+      "license": "MIT",
+      "dependencies": {
+        "use-isomorphic-layout-effect": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "license": "MIT"
+    },
+    "node_modules/utila": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
+      "integrity": "sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA==",
+      "license": "MIT"
+    },
+    "node_modules/utility-types": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.10.0.tgz",
+      "integrity": "sha512-O11mqxmi7wMKCo6HKFt5AhO4BwY3VV68YU07tgxfz8zJTIxr4BpsezN49Ffwy9j3ZpwwJp4fkRwjRzq3uWE6Rg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
+    "node_modules/value-equal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
+      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==",
+      "license": "MIT"
+    },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/vfile": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-4.2.1.tgz",
+      "integrity": "sha512-O6AE4OskCG5S1emQ/4gl8zK586RqA3srz3nfK/Viy0UPToBc5Trp9BVFb1u0CjsKrAWwnpr4ifM/KBXPWwJbCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "is-buffer": "^2.0.0",
+        "unist-util-stringify-position": "^2.0.0",
+        "vfile-message": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-location": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-3.2.0.tgz",
+      "integrity": "sha512-aLEIZKv/oxuCDZ8lkJGhuhztf/BW4M+iHdCwglA/eWc+vtuRFJj8EtgceYFX4LRjOhCAAiNHsKGssC6onJ+jbA==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-message": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz",
+      "integrity": "sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "unist-util-stringify-position": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/wait-on": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/wait-on/-/wait-on-6.0.1.tgz",
+      "integrity": "sha512-zht+KASY3usTY5u2LgaNqn/Cd8MukxLGjdcZxT2ns5QzDmTFc4XoWBgC+C/na+sMRZTuVygQoMYwdcVjHnYIVw==",
+      "license": "MIT",
+      "dependencies": {
+        "axios": "^0.25.0",
+        "joi": "^17.6.0",
+        "lodash": "^4.17.21",
+        "minimist": "^1.2.5",
+        "rxjs": "^7.5.4"
+      },
+      "bin": {
+        "wait-on": "bin/wait-on"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/watchpack": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
+      "integrity": "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==",
+      "license": "MIT",
+      "dependencies": {
+        "glob-to-regexp": "^0.4.1",
+        "graceful-fs": "^4.1.2"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/wbuf": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz",
+      "integrity": "sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==",
+      "license": "MIT",
+      "dependencies": {
+        "minimalistic-assert": "^1.0.0"
+      }
+    },
+    "node_modules/web-namespaces": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-1.1.4.tgz",
+      "integrity": "sha512-wYxSGajtmoP4WxfejAPIr4l0fVh+jeMXZb08wNc0tMg6xsfZXj3cECqIK0G7ZAqUq0PP8WlMDtaOGVBTAWztNw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/webpack": {
+      "version": "5.84.1",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.84.1.tgz",
+      "integrity": "sha512-ZP4qaZ7vVn/K8WN/p990SGATmrL1qg4heP/MrVneczYtpDGJWlrgZv55vxaV2ul885Kz+25MP2kSXkPe3LZfmg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/eslint-scope": "^3.7.3",
+        "@types/estree": "^1.0.0",
+        "@webassemblyjs/ast": "^1.11.5",
+        "@webassemblyjs/wasm-edit": "^1.11.5",
+        "@webassemblyjs/wasm-parser": "^1.11.5",
+        "acorn": "^8.7.1",
+        "acorn-import-assertions": "^1.9.0",
+        "browserslist": "^4.14.5",
+        "chrome-trace-event": "^1.0.2",
+        "enhanced-resolve": "^5.14.1",
+        "es-module-lexer": "^1.2.1",
+        "eslint-scope": "5.1.1",
+        "events": "^3.2.0",
+        "glob-to-regexp": "^0.4.1",
+        "graceful-fs": "^4.2.9",
+        "json-parse-even-better-errors": "^2.3.1",
+        "loader-runner": "^4.2.0",
+        "mime-types": "^2.1.27",
+        "neo-async": "^2.6.2",
+        "schema-utils": "^3.1.2",
+        "tapable": "^2.1.1",
+        "terser-webpack-plugin": "^5.3.7",
+        "watchpack": "^2.4.0",
+        "webpack-sources": "^3.2.3"
+      },
+      "bin": {
+        "webpack": "bin/webpack.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependenciesMeta": {
+        "webpack-cli": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/webpack-bundle-analyzer": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.8.0.tgz",
+      "integrity": "sha512-ZzoSBePshOKhr+hd8u6oCkZVwpVaXgpw23ScGLFpR6SjYI7+7iIWYarjN6OEYOfRt8o7ZyZZQk0DuMizJ+LEIg==",
+      "license": "MIT",
+      "dependencies": {
+        "@discoveryjs/json-ext": "0.5.7",
+        "acorn": "^8.0.4",
+        "acorn-walk": "^8.0.0",
+        "chalk": "^4.1.0",
+        "commander": "^7.2.0",
+        "gzip-size": "^6.0.0",
+        "lodash": "^4.17.20",
+        "opener": "^1.5.2",
+        "sirv": "^1.0.7",
+        "ws": "^7.3.1"
+      },
+      "bin": {
+        "webpack-bundle-analyzer": "lib/bin/analyzer.js"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
+    "node_modules/webpack-bundle-analyzer/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/webpack-dev-middleware": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.3.tgz",
+      "integrity": "sha512-hj5CYrY0bZLB+eTO+x/j67Pkrquiy7kWepMHmUMoPsmcUaeEnQJqFzHJOyxgWlq746/wUuA64p9ta34Kyb01pA==",
+      "license": "MIT",
+      "dependencies": {
+        "colorette": "^2.0.10",
+        "memfs": "^3.4.3",
+        "mime-types": "^2.1.31",
+        "range-parser": "^1.2.1",
+        "schema-utils": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^4.0.0 || ^5.0.0"
+      }
+    },
+    "node_modules/webpack-dev-middleware/node_modules/ajv": {
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/webpack-dev-middleware/node_modules/ajv-keywords": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      },
+      "peerDependencies": {
+        "ajv": "^8.8.2"
+      }
+    },
+    "node_modules/webpack-dev-middleware/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "license": "MIT"
+    },
+    "node_modules/webpack-dev-middleware/node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/webpack-dev-middleware/node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/webpack-dev-middleware/node_modules/range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/webpack-dev-middleware/node_modules/schema-utils": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.1.tgz",
+      "integrity": "sha512-lELhBAAly9NowEsX0yZBlw9ahZG+sK/1RJ21EpzdYHKEs13Vku3LJ+MIPhh4sMs0oCCeufZQEQbMekiA4vuVIQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "ajv": "^8.9.0",
+        "ajv-formats": "^2.1.1",
+        "ajv-keywords": "^5.1.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/webpack-dev-server": {
+      "version": "4.15.0",
+      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.15.0.tgz",
+      "integrity": "sha512-HmNB5QeSl1KpulTBQ8UT4FPrByYyaLxpJoQ0+s7EvUrMc16m0ZS1sgb1XGqzmgCPk0c9y+aaXxn11tbLzuM7NQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/bonjour": "^3.5.9",
+        "@types/connect-history-api-fallback": "^1.3.5",
+        "@types/express": "^4.17.13",
+        "@types/serve-index": "^1.9.1",
+        "@types/serve-static": "^1.13.10",
+        "@types/sockjs": "^0.3.33",
+        "@types/ws": "^8.5.1",
+        "ansi-html-community": "^0.0.8",
+        "bonjour-service": "^1.0.11",
+        "chokidar": "^3.5.3",
+        "colorette": "^2.0.10",
+        "compression": "^1.7.4",
+        "connect-history-api-fallback": "^2.0.0",
+        "default-gateway": "^6.0.3",
+        "express": "^4.17.3",
+        "graceful-fs": "^4.2.6",
+        "html-entities": "^2.3.2",
+        "http-proxy-middleware": "^2.0.3",
+        "ipaddr.js": "^2.0.1",
+        "launch-editor": "^2.6.0",
+        "open": "^8.0.9",
+        "p-retry": "^4.5.0",
+        "rimraf": "^3.0.2",
+        "schema-utils": "^4.0.0",
+        "selfsigned": "^2.1.1",
+        "serve-index": "^1.9.1",
+        "sockjs": "^0.3.24",
+        "spdy": "^4.0.2",
+        "webpack-dev-middleware": "^5.3.1",
+        "ws": "^8.13.0"
+      },
+      "bin": {
+        "webpack-dev-server": "bin/webpack-dev-server.js"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^4.37.0 || ^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "webpack": {
+          "optional": true
+        },
+        "webpack-cli": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/webpack-dev-server/node_modules/ajv": {
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/webpack-dev-server/node_modules/ajv-keywords": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      },
+      "peerDependencies": {
+        "ajv": "^8.8.2"
+      }
+    },
+    "node_modules/webpack-dev-server/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "license": "MIT"
+    },
+    "node_modules/webpack-dev-server/node_modules/schema-utils": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.1.tgz",
+      "integrity": "sha512-lELhBAAly9NowEsX0yZBlw9ahZG+sK/1RJ21EpzdYHKEs13Vku3LJ+MIPhh4sMs0oCCeufZQEQbMekiA4vuVIQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "ajv": "^8.9.0",
+        "ajv-formats": "^2.1.1",
+        "ajv-keywords": "^5.1.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/webpack-dev-server/node_modules/ws": {
+      "version": "8.13.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
+      "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/webpack-merge": {
+      "version": "5.9.0",
+      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.9.0.tgz",
+      "integrity": "sha512-6NbRQw4+Sy50vYNTw7EyOn41OZItPiXB8GNv3INSoe3PSFaHJEz3SHTrYVaRm2LilNGnFUzh0FAwqPEmU/CwDg==",
+      "license": "MIT",
+      "dependencies": {
+        "clone-deep": "^4.0.1",
+        "wildcard": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/webpack-sources": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
+      "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/webpack/node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/webpack/node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/webpack/node_modules/schema-utils": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.2.tgz",
+      "integrity": "sha512-pvjEHOgWc9OWA/f/DE3ohBWTD6EleVLf7iFUkoSwAxttdBhB9QUebQgxER2kWueOvRJXPHNnyrvvh9eZINB8Eg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/webpackbar": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/webpackbar/-/webpackbar-5.0.2.tgz",
+      "integrity": "sha512-BmFJo7veBDgQzfWXl/wwYXr/VFus0614qZ8i9znqcl9fnEdiVkdbi0TedLQ6xAK92HZHDJ0QmyQ0fmuZPAgCYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^4.1.0",
+        "consola": "^2.15.3",
+        "pretty-time": "^1.1.0",
+        "std-env": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "webpack": "3 || 4 || 5"
+      }
+    },
+    "node_modules/websocket-driver": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
+      "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "http-parser-js": ">=0.5.1",
+        "safe-buffer": ">=5.1.0",
+        "websocket-extensions": ">=0.1.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/websocket-extensions": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/widest-line": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-4.0.1.tgz",
+      "integrity": "sha512-o0cyEG0e8GPzT4iGHphIOh0cJOV8fivsXxddQasHPHfoZf1ZexrfeA21w2NaEN1RHE+fXlfISmOE8R9N3u3Qig==",
+      "license": "MIT",
+      "dependencies": {
+        "string-width": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/wildcard": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.1.tgz",
+      "integrity": "sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==",
+      "license": "MIT"
+    },
+    "node_modules/wowjs": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/wowjs/-/wowjs-1.1.3.tgz",
+      "integrity": "sha512-HQp1gi56wYmjOYYOMZ08TnDGpT+AO21RJVa0t1NJ3jU8l3dMyP+sY7TO/lilzVp4JFjW88bBY87RnpxdpSKofA==",
+      "dependencies": {
+        "animate.css": "latest"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "license": "ISC"
+    },
+    "node_modules/write-file-atomic": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
+      "integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
+      "license": "ISC",
+      "dependencies": {
+        "imurmurhash": "^0.1.4",
+        "is-typedarray": "^1.0.0",
+        "signal-exit": "^3.0.2",
+        "typedarray-to-buffer": "^3.1.5"
+      }
+    },
+    "node_modules/ws": {
+      "version": "7.5.9",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
+      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.3.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/xdg-basedir": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-4.0.0.tgz",
+      "integrity": "sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/xml-js": {
+      "version": "1.6.11",
+      "resolved": "https://registry.npmjs.org/xml-js/-/xml-js-1.6.11.tgz",
+      "integrity": "sha512-7rVi2KMfwfWFl+GpPg6m80IVMWXLRjO+PxTq7V2CDhoGak0wzYzFgUY2m4XJ47OGdXd8eLE8EmwfAmdjw7lC1g==",
+      "license": "MIT",
+      "dependencies": {
+        "sax": "^1.2.4"
+      },
+      "bin": {
+        "xml-js": "bin/cli.js"
+      }
+    },
+    "node_modules/xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4"
+      }
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "license": "ISC"
+    },
+    "node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/zwitch": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-1.0.5.tgz",
+      "integrity": "sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    }
+  }
+}
diff --git a/docs/website/src/pages/self-hosting/plan/index.tsx b/docs/website/src/pages/self-hosting/plan/index.tsx
index 137971cf4658..6fbc995de77e 100644
--- a/docs/website/src/pages/self-hosting/plan/index.tsx
+++ b/docs/website/src/pages/self-hosting/plan/index.tsx
@@ -34,6 +34,7 @@ export default function Plan() {
   const [months, setMonths] = useState('3');
   const [cpu, setCpu] = useState(8);
   const [memory, setMemory] = useState(16);
+  const [isOpen, setIsOpen] = useState(false);
 
   const price = useMemo(() => {
     return calculatePrice({ cpu, memory, months });
@@ -295,41 +296,56 @@ export default function Plan() {
           <div className="flex items-center mt-10">
             <div className="w-28">月数</div>
             <div className="relative">
-              <select
-                value={months}
-                onChange={(e) => {
-                  setMonths(e.target.value);
-                }}
-                className="w-52 input-select h-8 border-gray-300 border-none bg-transparent text-white/80 text-xs rounded-md block focus-visible:outline-none lg:w-10"
+              <div
+                className="w-52 input-select min-w-[100px] h-8 flex items-center px-3 cursor-pointer text-white/80 text-xs lg:w-10"
+                onClick={() => setIsOpen(!isOpen)}
                 style={{
                   borderRadius: '6px',
                   border: '1px solid rgba(232, 235, 240, 0.10)',
                   background: 'rgba(247, 248, 250, 0.10)'
                 }}
               >
-                {MonthMapList.map((item) => (
-                  <option key={item.label} value={item.value}>
-                    {item.label}
-                  </option>
-                ))}
-              </select>
-              <div className="absolute top-[6px] right-[10px]">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="17"
-                  height="16"
-                  viewBox="0 0 17 16"
-                  fill="none"
-                >
-                  <path
-                    fillRule="evenodd"
-                    clipRule="evenodd"
-                    d="M4.32173 5.52851C4.58208 5.26816 5.00419 5.26816 5.26454 5.52851L8.79313 9.05711L12.3217 5.52851C12.5821 5.26816 13.0042 5.26816 13.2645 5.52851C13.5249 5.78886 13.5249 6.21097 13.2645 6.47132L9.26454 10.4713C9.00419 10.7317 8.58208 10.7317 8.32173 10.4713L4.32173 6.47132C4.06138 6.21097 4.06138 5.78886 4.32173 5.52851Z"
-                    fill="white"
-                    fillOpacity="0.7"
-                  />
-                </svg>
+                {MonthMapList.find((item) => item.value === months)?.label}
+                <div className="absolute top-[6px] right-[10px]">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="17"
+                    height="16"
+                    viewBox="0 0 17 16"
+                    fill="none"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      d="M4.32173 5.52851C4.58208 5.26816 5.00419 5.26816 5.26454 5.52851L8.79313 9.05711L12.3217 5.52851C12.5821 5.26816 13.0042 5.26816 13.2645 5.52851C13.5249 5.78886 13.5249 6.21097 13.2645 6.47132L9.26454 10.4713C9.00419 10.7317 8.58208 10.7317 8.32173 10.4713L4.32173 6.47132C4.06138 6.21097 4.06138 5.78886 4.32173 5.52851Z"
+                      fill="white"
+                      fillOpacity="0.7"
+                    />
+                  </svg>
+                </div>
               </div>
+              {isOpen && (
+                <div
+                  className="absolute top-full left-0 w-52 mt-1 z-10 rounded-md overflow-hidden"
+                  style={{
+                    background: 'rgba(247, 248, 250, 0.10)',
+                    border: '1px solid rgba(232, 235, 240, 0.10)'
+                  }}
+                >
+                  {MonthMapList.map((item) => (
+                    <div
+                      key={item.value}
+                      className="px-3 py-2 hover:bg-white/10 cursor-pointer text-white/80 text-xs"
+                      onClick={() => {
+                        setMonths(item.value);
+                        setIsOpen(false);
+                      }}
+                    >
+                      {item.label}
+                    </div>
+                  ))}
+                </div>
+              )}
             </div>
           </div>
 
diff --git a/docs/website/yarn.lock b/docs/website/yarn.lock
index 0d5f203176f6..b12fbda18eb6 100644
--- a/docs/website/yarn.lock
+++ b/docs/website/yarn.lock
@@ -67,6 +67,9 @@
     "@algolia/requester-common" "4.17.1"
     "@algolia/transporter" "4.17.1"
 
+"@algolia/client-common@5.18.0":
+  version "5.18.0"
+
 "@algolia/client-personalization@4.17.1":
   version "4.17.1"
   resolved "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-4.17.1.tgz"
@@ -76,6 +79,14 @@
     "@algolia/requester-common" "4.17.1"
     "@algolia/transporter" "4.17.1"
 
+"@algolia/client-search@>= 4.9.1 < 6":
+  version "5.18.0"
+  dependencies:
+    "@algolia/client-common" "5.18.0"
+    "@algolia/requester-browser-xhr" "5.18.0"
+    "@algolia/requester-fetch" "5.18.0"
+    "@algolia/requester-node-http" "5.18.0"
+
 "@algolia/client-search@4.17.1":
   version "4.17.1"
   resolved "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.17.1.tgz"
@@ -109,11 +120,21 @@
   dependencies:
     "@algolia/requester-common" "4.17.1"
 
+"@algolia/requester-browser-xhr@5.18.0":
+  version "5.18.0"
+  dependencies:
+    "@algolia/client-common" "5.18.0"
+
 "@algolia/requester-common@4.17.1":
   version "4.17.1"
   resolved "https://registry.npmjs.org/@algolia/requester-common/-/requester-common-4.17.1.tgz"
   integrity sha512-HggXdjvVFQR0I5l7hM5WdHgQ1tqcRWeyXZz8apQ7zPWZhirmY2E9D6LVhDh/UnWQNEm7nBtM+eMFONJ3bZccIQ==
 
+"@algolia/requester-fetch@5.18.0":
+  version "5.18.0"
+  dependencies:
+    "@algolia/client-common" "5.18.0"
+
 "@algolia/requester-node-http@4.17.1":
   version "4.17.1"
   resolved "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.17.1.tgz"
@@ -121,6 +142,11 @@
   dependencies:
     "@algolia/requester-common" "4.17.1"
 
+"@algolia/requester-node-http@5.18.0":
+  version "5.18.0"
+  dependencies:
+    "@algolia/client-common" "5.18.0"
+
 "@algolia/transporter@4.17.1":
   version "4.17.1"
   resolved "https://registry.npmjs.org/@algolia/transporter/-/transporter-4.17.1.tgz"
@@ -132,7 +158,7 @@
 
 "@alloc/quick-lru@^5.2.0":
   version "5.2.0"
-  resolved "https://registry.npmmirror.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
+  resolved "https://registry.npmmirror.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz"
   integrity sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==
 
 "@ampproject/remapping@^2.2.0":
@@ -155,6 +181,27 @@
   resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.3.tgz"
   integrity sha512-aNtko9OPOwVESUFp3MZfD8Uzxl7JzSeJpd7npIoxCasU37PFbAQRpKglkaKwlHOyeJdrREpo8TW8ldrkYWwvIQ==
 
+"@babel/core@^7.0.0", "@babel/core@^7.0.0-0", "@babel/core@^7.11.6", "@babel/core@^7.12.0", "@babel/core@^7.13.0", "@babel/core@^7.18.6", "@babel/core@^7.19.6", "@babel/core@^7.4.0-0":
+  version "7.22.1"
+  resolved "https://registry.npmjs.org/@babel/core/-/core-7.22.1.tgz"
+  integrity sha512-Hkqu7J4ynysSXxmAahpN1jjRwVJ+NdpraFLIWflgjpVob3KNyK3/tIUc7Q7szed8WMp0JNa7Qtd1E9Oo22F9gA==
+  dependencies:
+    "@ampproject/remapping" "^2.2.0"
+    "@babel/code-frame" "^7.21.4"
+    "@babel/generator" "^7.22.0"
+    "@babel/helper-compilation-targets" "^7.22.1"
+    "@babel/helper-module-transforms" "^7.22.1"
+    "@babel/helpers" "^7.22.0"
+    "@babel/parser" "^7.22.0"
+    "@babel/template" "^7.21.9"
+    "@babel/traverse" "^7.22.1"
+    "@babel/types" "^7.22.0"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.2"
+    semver "^6.3.0"
+
 "@babel/core@7.12.9":
   version "7.12.9"
   resolved "https://registry.npmjs.org/@babel/core/-/core-7.12.9.tgz"
@@ -177,27 +224,6 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
-"@babel/core@^7.18.6", "@babel/core@^7.19.6":
-  version "7.22.1"
-  resolved "https://registry.npmjs.org/@babel/core/-/core-7.22.1.tgz"
-  integrity sha512-Hkqu7J4ynysSXxmAahpN1jjRwVJ+NdpraFLIWflgjpVob3KNyK3/tIUc7Q7szed8WMp0JNa7Qtd1E9Oo22F9gA==
-  dependencies:
-    "@ampproject/remapping" "^2.2.0"
-    "@babel/code-frame" "^7.21.4"
-    "@babel/generator" "^7.22.0"
-    "@babel/helper-compilation-targets" "^7.22.1"
-    "@babel/helper-module-transforms" "^7.22.1"
-    "@babel/helpers" "^7.22.0"
-    "@babel/parser" "^7.22.0"
-    "@babel/template" "^7.21.9"
-    "@babel/traverse" "^7.22.1"
-    "@babel/types" "^7.22.0"
-    convert-source-map "^1.7.0"
-    debug "^4.1.0"
-    gensync "^1.0.0-beta.2"
-    json5 "^2.2.2"
-    semver "^6.3.0"
-
 "@babel/generator@^7.12.5", "@babel/generator@^7.18.7", "@babel/generator@^7.22.0", "@babel/generator@^7.22.3":
   version "7.22.3"
   resolved "https://registry.npmjs.org/@babel/generator/-/generator-7.22.3.tgz"
@@ -324,16 +350,16 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
-"@babel/helper-plugin-utils@7.10.4":
-  version "7.10.4"
-  resolved "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz"
-  integrity sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==
-
 "@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.16.7", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.18.9", "@babel/helper-plugin-utils@^7.19.0", "@babel/helper-plugin-utils@^7.20.2", "@babel/helper-plugin-utils@^7.21.5", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
   version "7.21.5"
   resolved "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.21.5.tgz"
   integrity sha512-0WDaIlXKOX/3KfBK/dwP1oQGiPh6rjMkT7HIRv7i5RR2VUMwrx5ZL0dwBkKx7+SW1zwNdgjHd34IMk5ZjTeHVg==
 
+"@babel/helper-plugin-utils@7.10.4":
+  version "7.10.4"
+  resolved "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz"
+  integrity sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==
+
 "@babel/helper-remap-async-to-generator@^7.18.9":
   version "7.18.9"
   resolved "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.18.9.tgz"
@@ -531,13 +557,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-jsx@7.12.1":
-  version "7.12.1"
-  resolved "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.12.1.tgz"
-  integrity sha512-1yRi7yAtB0ETgxdY9ti/p2TivUxJkTdhu/ZbF9MshVGqOx1TdB3b7xCXs49Fupgg50N45KcAsRP/ZqWjs9SRjg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-
 "@babel/plugin-syntax-jsx@^7.21.4":
   version "7.21.4"
   resolved "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.21.4.tgz"
@@ -545,6 +564,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.20.2"
 
+"@babel/plugin-syntax-jsx@7.12.1":
+  version "7.12.1"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.12.1.tgz"
+  integrity sha512-1yRi7yAtB0ETgxdY9ti/p2TivUxJkTdhu/ZbF9MshVGqOx1TdB3b7xCXs49Fupgg50N45KcAsRP/ZqWjs9SRjg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-syntax-logical-assignment-operators@^7.10.4":
   version "7.10.4"
   resolved "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz"
@@ -566,7 +592,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-syntax-object-rest-spread@7.8.3", "@babel/plugin-syntax-object-rest-spread@^7.8.0", "@babel/plugin-syntax-object-rest-spread@^7.8.3":
+"@babel/plugin-syntax-object-rest-spread@^7.8.0", "@babel/plugin-syntax-object-rest-spread@^7.8.3", "@babel/plugin-syntax-object-rest-spread@7.8.3":
   version "7.8.3"
   resolved "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz"
   integrity sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
@@ -1265,9 +1291,9 @@
     "@docsearch/css" "3.4.0"
     algoliasearch "^4.0.0"
 
-"@docusaurus/core@2.4.3", "@docusaurus/core@^2.4.3":
+"@docusaurus/core@^2.0.0-beta", "@docusaurus/core@^2.4.3", "@docusaurus/core@2.4.3":
   version "2.4.3"
-  resolved "https://registry.npmmirror.com/@docusaurus/core/-/core-2.4.3.tgz#d86624901386fd8164ce4bff9cc7f16fde57f523"
+  resolved "https://registry.npmmirror.com/@docusaurus/core/-/core-2.4.3.tgz"
   integrity sha512-dWH5P7cgeNSIg9ufReX6gaCl/TmrGKD38Orbwuz05WPhAQtFXHd5B8Qym1TiXfvUNvwoYKkAJOJuGe8ou0Z7PA==
   dependencies:
     "@babel/core" "^7.18.6"
@@ -1344,7 +1370,7 @@
 
 "@docusaurus/cssnano-preset@2.4.3":
   version "2.4.3"
-  resolved "https://registry.npmmirror.com/@docusaurus/cssnano-preset/-/cssnano-preset-2.4.3.tgz#1d7e833c41ce240fcc2812a2ac27f7b862f32de0"
+  resolved "https://registry.npmmirror.com/@docusaurus/cssnano-preset/-/cssnano-preset-2.4.3.tgz"
   integrity sha512-ZvGSRCi7z9wLnZrXNPG6DmVPHdKGd8dIn9pYbEOFiYihfv4uDR3UtxogmKf+rT8ZlKFf5Lqne8E8nt08zNM8CA==
   dependencies:
     cssnano-preset-advanced "^5.3.8"
@@ -1354,7 +1380,7 @@
 
 "@docusaurus/logger@2.4.3":
   version "2.4.3"
-  resolved "https://registry.npmmirror.com/@docusaurus/logger/-/logger-2.4.3.tgz#518bbc965fb4ebe8f1d0b14e5f4161607552d34c"
+  resolved "https://registry.npmmirror.com/@docusaurus/logger/-/logger-2.4.3.tgz"
   integrity sha512-Zxws7r3yLufk9xM1zq9ged0YHs65mlRmtsobnFkdZTxWXdTYlWWLWdKyNKAsVC+D7zg+pv2fGbyabdOnyZOM3w==
   dependencies:
     chalk "^4.1.2"
@@ -1362,7 +1388,7 @@
 
 "@docusaurus/mdx-loader@2.4.3":
   version "2.4.3"
-  resolved "https://registry.npmmirror.com/@docusaurus/mdx-loader/-/mdx-loader-2.4.3.tgz#e8ff37f30a060eaa97b8121c135f74cb531a4a3e"
+  resolved "https://registry.npmmirror.com/@docusaurus/mdx-loader/-/mdx-loader-2.4.3.tgz"
   integrity sha512-b1+fDnWtl3GiqkL0BRjYtc94FZrcDDBV1j8446+4tptB9BAOlePwG2p/pK6vGvfL53lkOsszXMghr2g67M0vCw==
   dependencies:
     "@babel/parser" "^7.18.8"
@@ -1383,9 +1409,9 @@
     url-loader "^4.1.1"
     webpack "^5.73.0"
 
-"@docusaurus/module-type-aliases@2.4.3", "@docusaurus/module-type-aliases@^2.4.3":
+"@docusaurus/module-type-aliases@^2.4.3", "@docusaurus/module-type-aliases@2.4.3":
   version "2.4.3"
-  resolved "https://registry.npmmirror.com/@docusaurus/module-type-aliases/-/module-type-aliases-2.4.3.tgz#d08ef67e4151e02f352a2836bcf9ecde3b9c56ac"
+  resolved "https://registry.npmmirror.com/@docusaurus/module-type-aliases/-/module-type-aliases-2.4.3.tgz"
   integrity sha512-cwkBkt1UCiduuvEAo7XZY01dJfRn7UR/75mBgOdb1hKknhrabJZ8YH+7savd/y9kLExPyrhe0QwdS9GuzsRRIA==
   dependencies:
     "@docusaurus/react-loadable" "5.5.2"
@@ -1399,7 +1425,7 @@
 
 "@docusaurus/plugin-content-blog@2.4.3":
   version "2.4.3"
-  resolved "https://registry.npmmirror.com/@docusaurus/plugin-content-blog/-/plugin-content-blog-2.4.3.tgz#6473b974acab98e967414d8bbb0d37e0cedcea14"
+  resolved "https://registry.npmmirror.com/@docusaurus/plugin-content-blog/-/plugin-content-blog-2.4.3.tgz"
   integrity sha512-PVhypqaA0t98zVDpOeTqWUTvRqCEjJubtfFUQ7zJNYdbYTbS/E/ytq6zbLVsN/dImvemtO/5JQgjLxsh8XLo8Q==
   dependencies:
     "@docusaurus/core" "2.4.3"
@@ -1421,7 +1447,7 @@
 
 "@docusaurus/plugin-content-docs@2.4.3":
   version "2.4.3"
-  resolved "https://registry.npmmirror.com/@docusaurus/plugin-content-docs/-/plugin-content-docs-2.4.3.tgz#aa224c0512351e81807adf778ca59fd9cd136973"
+  resolved "https://registry.npmmirror.com/@docusaurus/plugin-content-docs/-/plugin-content-docs-2.4.3.tgz"
   integrity sha512-N7Po2LSH6UejQhzTCsvuX5NOzlC+HiXOVvofnEPj0WhMu1etpLEXE6a4aTxrtg95lQ5kf0xUIdjX9sh3d3G76A==
   dependencies:
     "@docusaurus/core" "2.4.3"
@@ -1443,7 +1469,7 @@
 
 "@docusaurus/plugin-content-pages@2.4.3":
   version "2.4.3"
-  resolved "https://registry.npmmirror.com/@docusaurus/plugin-content-pages/-/plugin-content-pages-2.4.3.tgz#7f285e718b53da8c8d0101e70840c75b9c0a1ac0"
+  resolved "https://registry.npmmirror.com/@docusaurus/plugin-content-pages/-/plugin-content-pages-2.4.3.tgz"
   integrity sha512-txtDVz7y3zGk67q0HjG0gRttVPodkHqE0bpJ+7dOaTH40CQFLSh7+aBeGnPOTl+oCPG+hxkim4SndqPqXjQ8Bg==
   dependencies:
     "@docusaurus/core" "2.4.3"
@@ -1457,7 +1483,7 @@
 
 "@docusaurus/plugin-debug@2.4.3":
   version "2.4.3"
-  resolved "https://registry.npmmirror.com/@docusaurus/plugin-debug/-/plugin-debug-2.4.3.tgz#2f90eb0c9286a9f225444e3a88315676fe02c245"
+  resolved "https://registry.npmmirror.com/@docusaurus/plugin-debug/-/plugin-debug-2.4.3.tgz"
   integrity sha512-LkUbuq3zCmINlFb+gAd4ZvYr+bPAzMC0hwND4F7V9bZ852dCX8YoWyovVUBKq4er1XsOwSQaHmNGtObtn8Av8Q==
   dependencies:
     "@docusaurus/core" "2.4.3"
@@ -1469,7 +1495,7 @@
 
 "@docusaurus/plugin-google-analytics@2.4.3":
   version "2.4.3"
-  resolved "https://registry.npmmirror.com/@docusaurus/plugin-google-analytics/-/plugin-google-analytics-2.4.3.tgz#0d19993136ade6f7a7741251b4f617400d92ab45"
+  resolved "https://registry.npmmirror.com/@docusaurus/plugin-google-analytics/-/plugin-google-analytics-2.4.3.tgz"
   integrity sha512-KzBV3k8lDkWOhg/oYGxlK5o9bOwX7KpPc/FTWoB+SfKhlHfhq7qcQdMi1elAaVEIop8tgK6gD1E58Q+XC6otSQ==
   dependencies:
     "@docusaurus/core" "2.4.3"
@@ -1479,7 +1505,7 @@
 
 "@docusaurus/plugin-google-gtag@2.4.3":
   version "2.4.3"
-  resolved "https://registry.npmmirror.com/@docusaurus/plugin-google-gtag/-/plugin-google-gtag-2.4.3.tgz#e1a80b0696771b488562e5b60eff21c9932d9e1c"
+  resolved "https://registry.npmmirror.com/@docusaurus/plugin-google-gtag/-/plugin-google-gtag-2.4.3.tgz"
   integrity sha512-5FMg0rT7sDy4i9AGsvJC71MQrqQZwgLNdDetLEGDHLfSHLvJhQbTCUGbGXknUgWXQJckcV/AILYeJy+HhxeIFA==
   dependencies:
     "@docusaurus/core" "2.4.3"
@@ -1489,7 +1515,7 @@
 
 "@docusaurus/plugin-google-tag-manager@2.4.3":
   version "2.4.3"
-  resolved "https://registry.npmmirror.com/@docusaurus/plugin-google-tag-manager/-/plugin-google-tag-manager-2.4.3.tgz#e41fbf79b0ffc2de1cc4013eb77798cff0ad98e3"
+  resolved "https://registry.npmmirror.com/@docusaurus/plugin-google-tag-manager/-/plugin-google-tag-manager-2.4.3.tgz"
   integrity sha512-1jTzp71yDGuQiX9Bi0pVp3alArV0LSnHXempvQTxwCGAEzUWWaBg4d8pocAlTpbP9aULQQqhgzrs8hgTRPOM0A==
   dependencies:
     "@docusaurus/core" "2.4.3"
@@ -1499,7 +1525,7 @@
 
 "@docusaurus/plugin-sitemap@2.4.3":
   version "2.4.3"
-  resolved "https://registry.npmmirror.com/@docusaurus/plugin-sitemap/-/plugin-sitemap-2.4.3.tgz#1b3930900a8f89670ce7e8f83fb4730cd3298c32"
+  resolved "https://registry.npmmirror.com/@docusaurus/plugin-sitemap/-/plugin-sitemap-2.4.3.tgz"
   integrity sha512-LRQYrK1oH1rNfr4YvWBmRzTL0LN9UAPxBbghgeFRBm5yloF6P+zv1tm2pe2hQTX/QP5bSKdnajCvfnScgKXMZQ==
   dependencies:
     "@docusaurus/core" "2.4.3"
@@ -1514,7 +1540,7 @@
 
 "@docusaurus/preset-classic@^2.4.3":
   version "2.4.3"
-  resolved "https://registry.npmmirror.com/@docusaurus/preset-classic/-/preset-classic-2.4.3.tgz#074c57ebf29fa43d23bd1c8ce691226f542bc262"
+  resolved "https://registry.npmmirror.com/@docusaurus/preset-classic/-/preset-classic-2.4.3.tgz"
   integrity sha512-tRyMliepY11Ym6hB1rAFSNGwQDpmszvWYJvlK1E+md4SW8i6ylNHtpZjaYFff9Mdk3i/Pg8ItQq9P0daOJAvQw==
   dependencies:
     "@docusaurus/core" "2.4.3"
@@ -1541,7 +1567,7 @@
 
 "@docusaurus/theme-classic@2.4.3":
   version "2.4.3"
-  resolved "https://registry.npmmirror.com/@docusaurus/theme-classic/-/theme-classic-2.4.3.tgz#29360f2eb03a0e1686eb19668633ef313970ee8f"
+  resolved "https://registry.npmmirror.com/@docusaurus/theme-classic/-/theme-classic-2.4.3.tgz"
   integrity sha512-QKRAJPSGPfDY2yCiPMIVyr+MqwZCIV2lxNzqbyUW0YkrlmdzzP3WuQJPMGLCjWgQp/5c9kpWMvMxjhpZx1R32Q==
   dependencies:
     "@docusaurus/core" "2.4.3"
@@ -1572,7 +1598,7 @@
 
 "@docusaurus/theme-common@2.4.3":
   version "2.4.3"
-  resolved "https://registry.npmmirror.com/@docusaurus/theme-common/-/theme-common-2.4.3.tgz#bb31d70b6b67d0bdef9baa343192dcec49946a2e"
+  resolved "https://registry.npmmirror.com/@docusaurus/theme-common/-/theme-common-2.4.3.tgz"
   integrity sha512-7KaDJBXKBVGXw5WOVt84FtN8czGWhM0lbyWEZXGp8AFfL6sZQfRTluFp4QriR97qwzSyOfQb+nzcDZZU4tezUw==
   dependencies:
     "@docusaurus/mdx-loader" "2.4.3"
@@ -1592,9 +1618,9 @@
     use-sync-external-store "^1.2.0"
     utility-types "^3.10.0"
 
-"@docusaurus/theme-search-algolia@2.4.3", "@docusaurus/theme-search-algolia@^2.4.3":
+"@docusaurus/theme-search-algolia@^2.4.3", "@docusaurus/theme-search-algolia@2.4.3":
   version "2.4.3"
-  resolved "https://registry.npmmirror.com/@docusaurus/theme-search-algolia/-/theme-search-algolia-2.4.3.tgz#32d4cbefc3deba4112068fbdb0bde11ac51ece53"
+  resolved "https://registry.npmmirror.com/@docusaurus/theme-search-algolia/-/theme-search-algolia-2.4.3.tgz"
   integrity sha512-jziq4f6YVUB5hZOB85ELATwnxBz/RmSLD3ksGQOLDPKVzat4pmI8tddNWtriPpxR04BNT+ZfpPUMFkNFetSW1Q==
   dependencies:
     "@docsearch/react" "^3.1.1"
@@ -1616,15 +1642,15 @@
 
 "@docusaurus/theme-translations@2.4.3":
   version "2.4.3"
-  resolved "https://registry.npmmirror.com/@docusaurus/theme-translations/-/theme-translations-2.4.3.tgz#91ac73fc49b8c652b7a54e88b679af57d6ac6102"
+  resolved "https://registry.npmmirror.com/@docusaurus/theme-translations/-/theme-translations-2.4.3.tgz"
   integrity sha512-H4D+lbZbjbKNS/Zw1Lel64PioUAIT3cLYYJLUf3KkuO/oc9e0QCVhIYVtUI2SfBCF2NNdlyhBDQEEMygsCedIg==
   dependencies:
     fs-extra "^10.1.0"
     tslib "^2.4.0"
 
-"@docusaurus/types@2.4.3":
+"@docusaurus/types@*", "@docusaurus/types@2.4.3":
   version "2.4.3"
-  resolved "https://registry.npmmirror.com/@docusaurus/types/-/types-2.4.3.tgz#4aead281ca09f721b3c0a9b926818450cfa3db31"
+  resolved "https://registry.npmmirror.com/@docusaurus/types/-/types-2.4.3.tgz"
   integrity sha512-W6zNLGQqfrp/EoPD0bhb9n7OobP+RHpmvVzpA+Z/IuU3Q63njJM24hmT0GYboovWcDtFmnIJC9wcyx4RVPQscw==
   dependencies:
     "@types/history" "^4.7.11"
@@ -1638,14 +1664,14 @@
 
 "@docusaurus/utils-common@2.4.3":
   version "2.4.3"
-  resolved "https://registry.npmmirror.com/@docusaurus/utils-common/-/utils-common-2.4.3.tgz#30656c39ef1ce7e002af7ba39ea08330f58efcfb"
+  resolved "https://registry.npmmirror.com/@docusaurus/utils-common/-/utils-common-2.4.3.tgz"
   integrity sha512-/jascp4GbLQCPVmcGkPzEQjNaAk3ADVfMtudk49Ggb+131B1WDD6HqlSmDf8MxGdy7Dja2gc+StHf01kiWoTDQ==
   dependencies:
     tslib "^2.4.0"
 
 "@docusaurus/utils-validation@2.4.3":
   version "2.4.3"
-  resolved "https://registry.npmmirror.com/@docusaurus/utils-validation/-/utils-validation-2.4.3.tgz#8122c394feef3e96c73f6433987837ec206a63fb"
+  resolved "https://registry.npmmirror.com/@docusaurus/utils-validation/-/utils-validation-2.4.3.tgz"
   integrity sha512-G2+Vt3WR5E/9drAobP+hhZQMaswRwDlp6qOMi7o7ZypB+VO7N//DZWhZEwhcRGepMDJGQEwtPv7UxtYwPL9PBw==
   dependencies:
     "@docusaurus/logger" "2.4.3"
@@ -1656,7 +1682,7 @@
 
 "@docusaurus/utils@2.4.3":
   version "2.4.3"
-  resolved "https://registry.npmmirror.com/@docusaurus/utils/-/utils-2.4.3.tgz#52b000d989380a2125831b84e3a7327bef471e89"
+  resolved "https://registry.npmmirror.com/@docusaurus/utils/-/utils-2.4.3.tgz"
   integrity sha512-fKcXsjrD86Smxv8Pt0TBFqYieZZCPh4cbf9oszUq/AMhZn3ujwpKaVYZACPX8mmjtYx0JOgNx52CREBfiGQB4A==
   dependencies:
     "@docusaurus/logger" "2.4.3"
@@ -1690,7 +1716,7 @@
 
 "@headlessui/react@^1.7.17":
   version "1.7.17"
-  resolved "https://registry.npmmirror.com/@headlessui/react/-/react-1.7.17.tgz#a0ec23af21b527c030967245fd99776aa7352bc6"
+  resolved "https://registry.npmmirror.com/@headlessui/react/-/react-1.7.17.tgz"
   integrity sha512-4am+tzvkqDSSgiwrsEpGWqgGo9dz8qU5M3znCkC4PgkpY4HcCZzEDEvozltGGGHIKl9jbXbZPSH5TWn4sWJdow==
   dependencies:
     client-only "^0.0.1"
@@ -1741,16 +1767,16 @@
     "@jridgewell/gen-mapping" "^0.3.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
-"@jridgewell/sourcemap-codec@1.4.14":
-  version "1.4.14"
-  resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz"
-  integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
-
 "@jridgewell/sourcemap-codec@^1.4.10":
   version "1.4.15"
   resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz"
   integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
 
+"@jridgewell/sourcemap-codec@1.4.14":
+  version "1.4.14"
+  resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz"
+  integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
+
 "@jridgewell/trace-mapping@^0.3.17", "@jridgewell/trace-mapping@^0.3.9":
   version "0.3.18"
   resolved "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz"
@@ -1807,7 +1833,7 @@
     "@nodelib/fs.stat" "2.0.5"
     run-parallel "^1.1.9"
 
-"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
+"@nodelib/fs.stat@^2.0.2", "@nodelib/fs.stat@2.0.5":
   version "2.0.5"
   resolved "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz"
   integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
@@ -1915,7 +1941,7 @@
     "@svgr/babel-plugin-transform-react-native-svg" "^6.5.1"
     "@svgr/babel-plugin-transform-svg-component" "^6.5.1"
 
-"@svgr/core@^6.5.1":
+"@svgr/core@*", "@svgr/core@^6.0.0", "@svgr/core@^6.5.1":
   version "6.5.1"
   resolved "https://registry.npmjs.org/@svgr/core/-/core-6.5.1.tgz"
   integrity sha512-/xdLSWxK5QkqG524ONSjvg3V/FkNyCv538OIBdQqPNaAta3AsXj/Bd2FbvR87yMbXO2hFSWiAe/Q6IkVPDw+mw==
@@ -2110,12 +2136,7 @@
   dependencies:
     "@types/unist" "*"
 
-"@types/mime@*":
-  version "3.0.1"
-  resolved "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz"
-  integrity sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA==
-
-"@types/mime@^1":
+"@types/mime@*", "@types/mime@^1":
   version "1.3.2"
   resolved "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz"
   integrity sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==
@@ -2181,7 +2202,7 @@
     "@types/history" "^4.7.11"
     "@types/react" "*"
 
-"@types/react@*":
+"@types/react@*", "@types/react@>= 16.8.0 < 19.0.0":
   version "18.2.7"
   resolved "https://registry.npmjs.org/@types/react/-/react-18.2.7.tgz"
   integrity sha512-ojrXpSH2XFCmHm7Jy3q44nXDyN54+EYKP2lBhJ2bqfyPj6cIUW/FZW/Csdia34NQgq7KYcAlHi5184m4X88+yw==
@@ -2261,7 +2282,7 @@
   dependencies:
     "@types/yargs-parser" "*"
 
-"@webassemblyjs/ast@1.11.6", "@webassemblyjs/ast@^1.11.5":
+"@webassemblyjs/ast@^1.11.5", "@webassemblyjs/ast@1.11.6":
   version "1.11.6"
   resolved "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz"
   integrity sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==
@@ -2362,7 +2383,7 @@
     "@webassemblyjs/wasm-gen" "1.11.6"
     "@webassemblyjs/wasm-parser" "1.11.6"
 
-"@webassemblyjs/wasm-parser@1.11.6", "@webassemblyjs/wasm-parser@^1.11.5":
+"@webassemblyjs/wasm-parser@^1.11.5", "@webassemblyjs/wasm-parser@1.11.6":
   version "1.11.6"
   resolved "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.6.tgz"
   integrity sha512-6ZwPeGzMJM3Dqp3hCsLgESxBGtT/OeCvCZ4TA1JUPYgmhAx38tTPR9JaKy0S5H3evQpO/h2uWs2j6Yc/fjkpTQ==
@@ -2410,7 +2431,7 @@ acorn-walk@^8.0.0:
   resolved "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz"
   integrity sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==
 
-acorn@^8.0.4, acorn@^8.5.0, acorn@^8.7.1:
+acorn@^8, acorn@^8.0.4, acorn@^8.5.0, acorn@^8.7.1:
   version "8.8.2"
   resolved "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz"
   integrity sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==
@@ -2447,7 +2468,7 @@ ajv-keywords@^5.1.0:
   dependencies:
     fast-deep-equal "^3.1.3"
 
-ajv@^6.12.2, ajv@^6.12.4, ajv@^6.12.5:
+ajv@^6.12.2, ajv@^6.12.4, ajv@^6.12.5, ajv@^6.9.1:
   version "6.12.6"
   resolved "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz"
   integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
@@ -2457,7 +2478,17 @@ ajv@^6.12.2, ajv@^6.12.4, ajv@^6.12.5:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-ajv@^8.0.0, ajv@^8.9.0:
+ajv@^8.0.0:
+  version "8.12.0"
+  resolved "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz"
+  integrity sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    json-schema-traverse "^1.0.0"
+    require-from-string "^2.0.2"
+    uri-js "^4.2.2"
+
+ajv@^8.8.2, ajv@^8.9.0:
   version "8.12.0"
   resolved "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz"
   integrity sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==
@@ -2474,7 +2505,7 @@ algoliasearch-helper@^3.10.0:
   dependencies:
     "@algolia/events" "^4.0.1"
 
-algoliasearch@^4.0.0, algoliasearch@^4.13.1:
+algoliasearch@^4.0.0, algoliasearch@^4.13.1, "algoliasearch@>= 3.1 < 6", "algoliasearch@>= 4.9.1 < 6":
   version "4.17.1"
   resolved "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.17.1.tgz"
   integrity sha512-4GDQ1RhP2qUR3x8PevFRbEdqZqIARNViZYjgTJmA1T7wRNtFA3W4Aqc/RsODqa1J8IO/QDla5x4tWuUS8NV8wA==
@@ -2542,7 +2573,7 @@ ansi-styles@^6.1.0:
 
 any-promise@^1.0.0:
   version "1.3.0"
-  resolved "https://registry.npmmirror.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
+  resolved "https://registry.npmmirror.com/any-promise/-/any-promise-1.3.0.tgz"
   integrity sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==
 
 anymatch@~3.1.2:
@@ -2570,16 +2601,16 @@ argparse@^2.0.1:
   resolved "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
-array-flatten@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz"
-  integrity sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==
-
 array-flatten@^2.1.2:
   version "2.1.2"
   resolved "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz"
   integrity sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==
 
+array-flatten@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz"
+  integrity sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==
+
 array-union@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz"
@@ -2595,21 +2626,9 @@ at-least-node@^1.0.0:
   resolved "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz"
   integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
 
-autoprefixer@^10.4.12, autoprefixer@^10.4.7:
-  version "10.4.14"
-  resolved "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz"
-  integrity sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==
-  dependencies:
-    browserslist "^4.21.5"
-    caniuse-lite "^1.0.30001464"
-    fraction.js "^4.2.0"
-    normalize-range "^0.1.2"
-    picocolors "^1.0.0"
-    postcss-value-parser "^4.2.0"
-
-autoprefixer@^10.4.16:
+autoprefixer@^10.4.12, autoprefixer@^10.4.16, autoprefixer@^10.4.7:
   version "10.4.16"
-  resolved "https://registry.npmmirror.com/autoprefixer/-/autoprefixer-10.4.16.tgz#fad1411024d8670880bdece3970aa72e3572feb8"
+  resolved "https://registry.npmmirror.com/autoprefixer/-/autoprefixer-10.4.16.tgz"
   integrity sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==
   dependencies:
     browserslist "^4.21.10"
@@ -2793,19 +2812,9 @@ braces@^3.0.2, braces@~3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
-browserslist@^4.0.0, browserslist@^4.14.5, browserslist@^4.18.1, browserslist@^4.21.3, browserslist@^4.21.4, browserslist@^4.21.5:
-  version "4.21.7"
-  resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.21.7.tgz"
-  integrity sha512-BauCXrQ7I2ftSqd2mvKHGo85XR0u7Ru3C/Hxsy/0TkfCtjrmAbPdzLGasmoiBxplpDXlPvdjX9u7srIMfgasNA==
-  dependencies:
-    caniuse-lite "^1.0.30001489"
-    electron-to-chromium "^1.4.411"
-    node-releases "^2.0.12"
-    update-browserslist-db "^1.0.11"
-
-browserslist@^4.21.10:
+browserslist@^4.0.0, browserslist@^4.14.5, browserslist@^4.18.1, browserslist@^4.21.10, browserslist@^4.21.3, browserslist@^4.21.4, browserslist@^4.21.5, "browserslist@>= 4.21.0":
   version "4.22.1"
-  resolved "https://registry.npmmirror.com/browserslist/-/browserslist-4.22.1.tgz#ba91958d1a59b87dab6fed8dfbcb3da5e2e9c619"
+  resolved "https://registry.npmmirror.com/browserslist/-/browserslist-4.22.1.tgz"
   integrity sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==
   dependencies:
     caniuse-lite "^1.0.30001541"
@@ -2862,7 +2871,7 @@ camel-case@^4.1.2:
     pascal-case "^3.1.2"
     tslib "^2.0.3"
 
-camelcase-css@2.0.1, camelcase-css@^2.0.1:
+camelcase-css@^2.0.1, camelcase-css@2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz"
   integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
@@ -2882,14 +2891,9 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001464, caniuse-lite@^1.0.30001489:
-  version "1.0.30001491"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001491.tgz"
-  integrity sha512-17EYIi4TLnPiTzVKMveIxU5ETlxbSO3B6iPvMbprqnKh4qJsQGk5Nh1Lp4jIMAE0XfrujsJuWZAM3oJdMHaKBA==
-
-caniuse-lite@^1.0.30001538, caniuse-lite@^1.0.30001541:
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001538, caniuse-lite@^1.0.30001541:
   version "1.0.30001558"
-  resolved "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001558.tgz#d2c6e21fdbfe83817f70feab902421a19b7983ee"
+  resolved "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001558.tgz"
   integrity sha512-/Et7DwLqpjS47JPEcz6VnxU9PwcIdVi0ciLXRWBQdj1XFye68pSQYpV0QtPTfUKWuOaEig+/Vez2l74eDc1tPQ==
 
 ccount@^1.0.0:
@@ -2954,7 +2958,7 @@ cheerio@^1.0.0-rc.12:
     parse5 "^7.0.0"
     parse5-htmlparser2-tree-adapter "^7.0.0"
 
-"chokidar@>=3.0.0 <4.0.0", chokidar@^3.4.2, chokidar@^3.5.3:
+chokidar@^3.4.2, chokidar@^3.5.3, "chokidar@>=3.0.0 <4.0.0":
   version "3.5.3"
   resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz"
   integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@@ -3017,7 +3021,7 @@ cli-table3@^0.6.2:
 
 client-only@^0.0.1:
   version "0.0.1"
-  resolved "https://registry.npmmirror.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
+  resolved "https://registry.npmmirror.com/client-only/-/client-only-0.0.1.tgz"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
 
 clone-deep@^4.0.1:
@@ -3060,16 +3064,16 @@ color-convert@^2.0.1:
   dependencies:
     color-name "~1.1.4"
 
-color-name@1.1.3:
-  version "1.1.3"
-  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz"
-  integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
-
 color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
+color-name@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz"
+  integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
+
 colord@^2.9.1:
   version "2.9.3"
   resolved "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz"
@@ -3097,7 +3101,7 @@ commander@^2.20.0:
 
 commander@^4.0.0:
   version "4.1.1"
-  resolved "https://registry.npmmirror.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
+  resolved "https://registry.npmmirror.com/commander/-/commander-4.1.1.tgz"
   integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
 
 commander@^5.1.0:
@@ -3435,20 +3439,27 @@ csstype@^3.0.2:
   resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz"
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
 
-debug@2.6.9, debug@^2.6.0:
+debug@^2.6.0:
   version "2.6.9"
   resolved "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz"
   integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
   dependencies:
     ms "2.0.0"
 
-debug@4, debug@^4.1.0, debug@^4.1.1:
+debug@^4.1.0, debug@^4.1.1, debug@4:
   version "4.3.4"
   resolved "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
   dependencies:
     ms "2.1.2"
 
+debug@2.6.9:
+  version "2.6.9"
+  resolved "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz"
+  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
+  dependencies:
+    ms "2.0.0"
+
 decompress-response@^3.3.0:
   version "3.3.0"
   resolved "https://registry.npmjs.org/decompress-response/-/decompress-response-3.3.0.tgz"
@@ -3505,16 +3516,16 @@ del@^6.1.1:
     rimraf "^3.0.2"
     slash "^3.0.0"
 
-depd@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz"
-  integrity sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==
-
 depd@~1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz"
   integrity sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==
 
+depd@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz"
+  integrity sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==
+
 destroy@1.2.0:
   version "1.2.0"
   resolved "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz"
@@ -3550,7 +3561,7 @@ detect-port@^1.3.0:
 
 didyoumean@^1.2.2:
   version "1.2.2"
-  resolved "https://registry.npmmirror.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
+  resolved "https://registry.npmmirror.com/didyoumean/-/didyoumean-1.2.2.tgz"
   integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
 
 dir-glob@^3.0.1:
@@ -3562,7 +3573,7 @@ dir-glob@^3.0.1:
 
 dlv@^1.1.3:
   version "1.1.3"
-  resolved "https://registry.npmmirror.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
+  resolved "https://registry.npmmirror.com/dlv/-/dlv-1.1.3.tgz"
   integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
 
 dns-equal@^1.0.0:
@@ -3663,19 +3674,19 @@ dot-prop@^5.2.0:
 
 dotenv@^16.3.1:
   version "16.3.1"
-  resolved "https://registry.npmmirror.com/dotenv/-/dotenv-16.3.1.tgz#369034de7d7e5b120972693352a3bf112172cc3e"
+  resolved "https://registry.npmmirror.com/dotenv/-/dotenv-16.3.1.tgz"
   integrity sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==
 
-duplexer3@^0.1.4:
-  version "0.1.5"
-  resolved "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.5.tgz"
-  integrity sha512-1A8za6ws41LQgv9HrE/66jyC5yuSjQ3L/KOpFtoBilsAK2iA2wuS5rTt1OCzIvtS2V7nVmedsUU+DGRcjBmOYA==
-
 duplexer@^0.1.2:
   version "0.1.2"
   resolved "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz"
   integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==
 
+duplexer3@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.5.tgz"
+  integrity sha512-1A8za6ws41LQgv9HrE/66jyC5yuSjQ3L/KOpFtoBilsAK2iA2wuS5rTt1OCzIvtS2V7nVmedsUU+DGRcjBmOYA==
+
 eastasianwidth@^0.2.0:
   version "0.2.0"
   resolved "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz"
@@ -3686,14 +3697,9 @@ ee-first@1.1.1:
   resolved "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz"
   integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==
 
-electron-to-chromium@^1.4.411:
-  version "1.4.413"
-  resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.413.tgz"
-  integrity sha512-Gd+/OAhRca06dkVxIQo/W7dr6Nmk9cx6lQdZ19GvFp51k5B/lUAokm6SJfNkdV8kFLsC3Z4sLTyEHWCnB1Efbw==
-
 electron-to-chromium@^1.4.535:
   version "1.4.571"
-  resolved "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.571.tgz#8aa71539eb82db98740c3ec861256cc34e0356fd"
+  resolved "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.571.tgz"
   integrity sha512-Sc+VtKwKCDj3f/kLBjdyjMpNzoZsU6WuL/wFb6EH8USmHEcebxRXcRrVpOpayxd52tuey4RUDpUsw5OS5LhJqg==
 
 emoji-regex@^8.0.0:
@@ -3915,20 +3921,9 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-glob@^3.2.11, fast-glob@^3.2.9:
-  version "3.2.12"
-  resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz"
-  integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==
-  dependencies:
-    "@nodelib/fs.stat" "^2.0.2"
-    "@nodelib/fs.walk" "^1.2.3"
-    glob-parent "^5.1.2"
-    merge2 "^1.3.0"
-    micromatch "^4.0.4"
-
-fast-glob@^3.3.0:
+fast-glob@^3.2.11, fast-glob@^3.2.9, fast-glob@^3.3.0:
   version "3.3.1"
-  resolved "https://registry.npmmirror.com/fast-glob/-/fast-glob-3.3.1.tgz#784b4e897340f3dbbef17413b3f11acf03c874c4"
+  resolved "https://registry.npmmirror.com/fast-glob/-/fast-glob-3.3.1.tgz"
   integrity sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==
   dependencies:
     "@nodelib/fs.stat" "^2.0.2"
@@ -3995,7 +3990,7 @@ feed@^4.2.2:
   dependencies:
     xml-js "^1.6.11"
 
-file-loader@^6.2.0:
+file-loader@*, file-loader@^6.2.0:
   version "6.2.0"
   resolved "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz"
   integrity sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==
@@ -4097,14 +4092,9 @@ forwarded@0.2.0:
   resolved "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz"
   integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==
 
-fraction.js@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz"
-  integrity sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==
-
 fraction.js@^4.3.6:
   version "4.3.7"
-  resolved "https://registry.npmmirror.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
+  resolved "https://registry.npmmirror.com/fraction.js/-/fraction.js-4.3.7.tgz"
   integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
 
 fresh@0.5.2:
@@ -4141,21 +4131,11 @@ fs.realpath@^1.0.0:
   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
-fsevents@~2.3.2:
-  version "2.3.2"
-  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
-  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
-
 function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
   integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
 
-function-bind@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
-  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
-
 gensync@^1.0.0-beta.1, gensync@^1.0.0-beta.2:
   version "1.0.0-beta.2"
   resolved "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz"
@@ -4207,7 +4187,14 @@ glob-parent@^5.1.2, glob-parent@~5.1.2:
   dependencies:
     is-glob "^4.0.1"
 
-glob-parent@^6.0.1, glob-parent@^6.0.2:
+glob-parent@^6.0.1:
+  version "6.0.2"
+  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz"
+  integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
+  dependencies:
+    is-glob "^4.0.3"
+
+glob-parent@^6.0.2:
   version "6.0.2"
   resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz"
   integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
@@ -4219,27 +4206,27 @@ glob-to-regexp@^0.4.1:
   resolved "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz"
   integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
 
-glob@7.1.6:
-  version "7.1.6"
-  resolved "https://registry.npmmirror.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
-  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
+glob@^7.0.0, glob@^7.1.3, glob@^7.1.6:
+  version "7.2.3"
+  resolved "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz"
+  integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
   dependencies:
     fs.realpath "^1.0.0"
     inflight "^1.0.4"
     inherits "2"
-    minimatch "^3.0.4"
+    minimatch "^3.1.1"
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^7.0.0, glob@^7.1.3, glob@^7.1.6:
-  version "7.2.3"
-  resolved "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz"
-  integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
+glob@7.1.6:
+  version "7.1.6"
+  resolved "https://registry.npmmirror.com/glob/-/glob-7.1.6.tgz"
+  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
   dependencies:
     fs.realpath "^1.0.0"
     inflight "^1.0.4"
     inherits "2"
-    minimatch "^3.1.1"
+    minimatch "^3.0.4"
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
@@ -4377,13 +4364,6 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-hasown@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmmirror.com/hasown/-/hasown-2.0.0.tgz#f4c513d454a57b7c7e1650778de226b11700546c"
-  integrity sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==
-  dependencies:
-    function-bind "^1.1.2"
-
 hast-to-hyperscript@^9.0.0:
   version "9.0.1"
   resolved "https://registry.npmjs.org/hast-to-hyperscript/-/hast-to-hyperscript-9.0.1.tgz"
@@ -4555,6 +4535,16 @@ http-deceiver@^1.2.7:
   resolved "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz"
   integrity sha512-LmpOGxTfbpgtGVxJrj5k7asXHCgNZp5nLfp+hWc8QQRqtb7fUy6kRY3BO1h9ddF6yIPYUARgxGOwB42DnxIaNw==
 
+http-errors@~1.6.2:
+  version "1.6.3"
+  resolved "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz"
+  integrity sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==
+  dependencies:
+    depd "~1.1.2"
+    inherits "2.0.3"
+    setprototypeof "1.1.0"
+    statuses ">= 1.4.0 < 2"
+
 http-errors@2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz"
@@ -4566,16 +4556,6 @@ http-errors@2.0.0:
     statuses "2.0.1"
     toidentifier "1.0.1"
 
-http-errors@~1.6.2:
-  version "1.6.3"
-  resolved "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz"
-  integrity sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==
-  dependencies:
-    depd "~1.1.2"
-    inherits "2.0.3"
-    setprototypeof "1.1.0"
-    statuses ">= 1.4.0 < 2"
-
 http-parser-js@>=0.5.1:
   version "0.5.8"
   resolved "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.8.tgz"
@@ -4676,7 +4656,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@2.0.4, inherits@^2.0.0, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.3:
+inherits@^2.0.0, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.3, inherits@2, inherits@2.0.4:
   version "2.0.4"
   resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -4686,16 +4666,16 @@ inherits@2.0.3:
   resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz"
   integrity sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==
 
-ini@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/ini/-/ini-2.0.0.tgz"
-  integrity sha512-7PnF4oN3CvZF23ADhA5wRaYEQpJ8qygSkbtTXWBeXWXmEVRXK+1ITciHWwHhsjv1TmW0MgacIv6hEi5pX5NQdA==
-
 ini@^1.3.5, ini@~1.3.0:
   version "1.3.8"
   resolved "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz"
   integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
 
+ini@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/ini/-/ini-2.0.0.tgz"
+  integrity sha512-7PnF4oN3CvZF23ADhA5wRaYEQpJ8qygSkbtTXWBeXWXmEVRXK+1ITciHWwHhsjv1TmW0MgacIv6hEi5pX5NQdA==
+
 inline-style-parser@0.1.1:
   version "0.1.1"
   resolved "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.1.1.tgz"
@@ -4713,17 +4693,17 @@ invariant@^2.2.4:
   dependencies:
     loose-envify "^1.0.0"
 
-ipaddr.js@1.9.1:
-  version "1.9.1"
-  resolved "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz"
-  integrity sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==
-
 ipaddr.js@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz"
   integrity sha512-1qTgH9NG+IIJ4yfKs2e6Pp1bZg8wbDbKHT21HrLIeYBTRLgMYKnMTPAuI3Lcs61nfx5h1xlXnbJtH1kX5/d/ng==
 
-is-alphabetical@1.0.4, is-alphabetical@^1.0.0:
+ipaddr.js@1.9.1:
+  version "1.9.1"
+  resolved "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz"
+  integrity sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==
+
+is-alphabetical@^1.0.0, is-alphabetical@1.0.4:
   version "1.0.4"
   resolved "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz"
   integrity sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==
@@ -4767,13 +4747,6 @@ is-core-module@^2.11.0:
   dependencies:
     has "^1.0.3"
 
-is-core-module@^2.13.0:
-  version "2.13.1"
-  resolved "https://registry.npmmirror.com/is-core-module/-/is-core-module-2.13.1.tgz#ad0d7532c6fea9da1ebdc82742d74525c6273384"
-  integrity sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==
-  dependencies:
-    hasown "^2.0.0"
-
 is-decimal@^1.0.0:
   version "1.0.4"
   resolved "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz"
@@ -4908,16 +4881,16 @@ is-yarn-global@^0.3.0:
   resolved "https://registry.npmjs.org/is-yarn-global/-/is-yarn-global-0.3.0.tgz"
   integrity sha512-VjSeb/lHmkoyd8ryPVIKvOCn4D1koMqY+vqyjjUfc3xyKtP4dYOxM44sZrnqQSzSds3xyOrUTLTC9LVCVgLngw==
 
-isarray@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-  integrity sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==
-
 isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
   integrity sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==
 
+isarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
+  integrity sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==
+
 isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz"
@@ -4959,14 +4932,9 @@ jest-worker@^29.1.2:
     merge-stream "^2.0.0"
     supports-color "^8.0.0"
 
-jiti@^1.18.2:
-  version "1.18.2"
-  resolved "https://registry.npmjs.org/jiti/-/jiti-1.18.2.tgz"
-  integrity sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==
-
-jiti@^1.19.1:
+jiti@^1.18.2, jiti@^1.19.1:
   version "1.21.0"
-  resolved "https://registry.npmmirror.com/jiti/-/jiti-1.21.0.tgz#7c97f8fe045724e136a397f7340475244156105d"
+  resolved "https://registry.npmmirror.com/jiti/-/jiti-1.21.0.tgz"
   integrity sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==
 
 joi@^17.6.0:
@@ -5157,7 +5125,7 @@ lodash.memoize@^4.1.2:
   resolved "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz"
   integrity sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==
 
-lodash.uniq@4.5.0, lodash.uniq@^4.5.0:
+lodash.uniq@^4.5.0, lodash.uniq@4.5.0:
   version "4.5.0"
   resolved "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz"
   integrity sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==
@@ -5300,7 +5268,7 @@ micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.5:
     braces "^3.0.2"
     picomatch "^2.3.1"
 
-mime-db@1.52.0, "mime-db@>= 1.43.0 < 2":
+"mime-db@>= 1.43.0 < 2":
   version "1.52.0"
   resolved "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz"
   integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
@@ -5310,14 +5278,40 @@ mime-db@~1.33.0:
   resolved "https://registry.npmjs.org/mime-db/-/mime-db-1.33.0.tgz"
   integrity sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==
 
-mime-types@2.1.18:
+mime-db@1.52.0:
+  version "1.52.0"
+  resolved "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-types@^2.1.27:
+  version "2.1.35"
+  resolved "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
+mime-types@^2.1.31:
+  version "2.1.35"
+  resolved "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
+mime-types@~2.1.17, mime-types@2.1.18:
   version "2.1.18"
   resolved "https://registry.npmjs.org/mime-types/-/mime-types-2.1.18.tgz"
   integrity sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==
   dependencies:
     mime-db "~1.33.0"
 
-mime-types@^2.1.27, mime-types@^2.1.31, mime-types@~2.1.17, mime-types@~2.1.24, mime-types@~2.1.34:
+mime-types@~2.1.24:
+  version "2.1.35"
+  resolved "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
+mime-types@~2.1.34:
   version "2.1.35"
   resolved "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz"
   integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
@@ -5351,20 +5345,13 @@ minimalistic-assert@^1.0.0:
   resolved "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz"
   integrity sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==
 
-minimatch@3.1.2, minimatch@^3.1.1:
+minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@3.1.2:
   version "3.1.2"
   resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz"
   integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
   dependencies:
     brace-expansion "^1.1.7"
 
-minimatch@^3.0.4, minimatch@^3.0.5:
-  version "3.0.8"
-  resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.0.8.tgz"
-  integrity sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==
-  dependencies:
-    brace-expansion "^1.1.7"
-
 minimist@^1.2.0, minimist@^1.2.5:
   version "1.2.8"
   resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz"
@@ -5400,7 +5387,7 @@ multicast-dns@^7.2.5:
 
 mz@^2.7.0:
   version "2.7.0"
-  resolved "https://registry.npmmirror.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
+  resolved "https://registry.npmmirror.com/mz/-/mz-2.7.0.tgz"
   integrity sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==
   dependencies:
     any-promise "^1.0.0"
@@ -5449,14 +5436,9 @@ node-forge@^1:
   resolved "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz"
   integrity sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==
 
-node-releases@^2.0.12:
-  version "2.0.12"
-  resolved "https://registry.npmjs.org/node-releases/-/node-releases-2.0.12.tgz"
-  integrity sha512-QzsYKWhXTWx8h1kIvqfnC++o0pEmpRQA/aenALsL2F4pqNVr7YzcdMlDij5WBnwftRbJCNJL/O7zdKaxKPHqgQ==
-
 node-releases@^2.0.13:
   version "2.0.13"
-  resolved "https://registry.npmmirror.com/node-releases/-/node-releases-2.0.13.tgz#d5ed1627c23e3461e819b02e57b75e4899b1c81d"
+  resolved "https://registry.npmmirror.com/node-releases/-/node-releases-2.0.13.tgz"
   integrity sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==
 
 normalize-path@^3.0.0, normalize-path@~3.0.0:
@@ -5505,7 +5487,7 @@ object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
 
 object-hash@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.npmmirror.com/object-hash/-/object-hash-3.0.0.tgz#73f97f753e7baffc0e2cc9d6e079079744ac82e9"
+  resolved "https://registry.npmmirror.com/object-hash/-/object-hash-3.0.0.tgz"
   integrity sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==
 
 object-inspect@^1.9.0:
@@ -5748,6 +5730,13 @@ path-parse@^1.0.7:
   resolved "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
+path-to-regexp@^1.7.0:
+  version "1.8.0"
+  resolved "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz"
+  integrity sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==
+  dependencies:
+    isarray "0.0.1"
+
 path-to-regexp@0.1.7:
   version "0.1.7"
   resolved "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz"
@@ -5758,13 +5747,6 @@ path-to-regexp@2.2.1:
   resolved "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-2.2.1.tgz"
   integrity sha512-gu9bD6Ta5bwGrrU8muHzVOBFFREpp2iRkVfhBJahwJ6p6Xw20SjT0MxLnwkjOibQmGSYhiUnf2FLe7k+jcFmGQ==
 
-path-to-regexp@^1.7.0:
-  version "1.8.0"
-  resolved "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz"
-  integrity sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==
-  dependencies:
-    isarray "0.0.1"
-
 path-type@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz"
@@ -5782,12 +5764,12 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3, picomatch@^2.3.1:
 
 pify@^2.3.0:
   version "2.3.0"
-  resolved "https://registry.npmmirror.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+  resolved "https://registry.npmmirror.com/pify/-/pify-2.3.0.tgz"
   integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
 
 pirates@^4.0.1:
   version "4.0.6"
-  resolved "https://registry.npmmirror.com/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9"
+  resolved "https://registry.npmmirror.com/pirates/-/pirates-4.0.6.tgz"
   integrity sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==
 
 pkg-dir@^4.1.0:
@@ -5859,7 +5841,7 @@ postcss-discard-unused@^5.1.0:
 
 postcss-import@^15.1.0:
   version "15.1.0"
-  resolved "https://registry.npmmirror.com/postcss-import/-/postcss-import-15.1.0.tgz#41c64ed8cc0e23735a9698b3249ffdbf704adc70"
+  resolved "https://registry.npmmirror.com/postcss-import/-/postcss-import-15.1.0.tgz"
   integrity sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==
   dependencies:
     postcss-value-parser "^4.0.0"
@@ -5868,14 +5850,14 @@ postcss-import@^15.1.0:
 
 postcss-js@^4.0.1:
   version "4.0.1"
-  resolved "https://registry.npmmirror.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2"
+  resolved "https://registry.npmmirror.com/postcss-js/-/postcss-js-4.0.1.tgz"
   integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==
   dependencies:
     camelcase-css "^2.0.1"
 
 postcss-load-config@^4.0.1:
   version "4.0.1"
-  resolved "https://registry.npmmirror.com/postcss-load-config/-/postcss-load-config-4.0.1.tgz#152383f481c2758274404e4962743191d73875bd"
+  resolved "https://registry.npmmirror.com/postcss-load-config/-/postcss-load-config-4.0.1.tgz"
   integrity sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==
   dependencies:
     lilconfig "^2.0.5"
@@ -5979,7 +5961,7 @@ postcss-modules-values@^4.0.0:
 
 postcss-nested@^6.0.1:
   version "6.0.1"
-  resolved "https://registry.npmmirror.com/postcss-nested/-/postcss-nested-6.0.1.tgz#f83dc9846ca16d2f4fa864f16e9d9f7d0961662c"
+  resolved "https://registry.npmmirror.com/postcss-nested/-/postcss-nested-6.0.1.tgz"
   integrity sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==
   dependencies:
     postcss-selector-parser "^6.0.11"
@@ -6117,18 +6099,9 @@ postcss-zindex@^5.1.0:
   resolved "https://registry.npmjs.org/postcss-zindex/-/postcss-zindex-5.1.0.tgz"
   integrity sha512-fgFMf0OtVSBR1va1JNHYgMxYk73yhn/qb4uQDq1DLGYolz8gHCyr/sesEuGUaYs58E3ZJRcpoGuPVoB7Meiq9A==
 
-postcss@^8.3.11, postcss@^8.4.14, postcss@^8.4.17, postcss@^8.4.21:
-  version "8.4.24"
-  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz"
-  integrity sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==
-  dependencies:
-    nanoid "^3.3.6"
-    picocolors "^1.0.0"
-    source-map-js "^1.0.2"
-
-postcss@^8.4.23, postcss@^8.4.31:
+"postcss@^7.0.0 || ^8.0.1", postcss@^8.0.0, postcss@^8.0.9, postcss@^8.1.0, postcss@^8.2.14, postcss@^8.2.15, postcss@^8.2.2, postcss@^8.3.11, postcss@^8.4.14, postcss@^8.4.16, postcss@^8.4.17, postcss@^8.4.21, postcss@^8.4.23, postcss@^8.4.31, postcss@>=8.0.9:
   version "8.4.31"
-  resolved "https://registry.npmmirror.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
+  resolved "https://registry.npmmirror.com/postcss/-/postcss-8.4.31.tgz"
   integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
   dependencies:
     nanoid "^3.3.6"
@@ -6158,7 +6131,7 @@ prism-react-renderer@^1.3.5:
   resolved "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-1.3.5.tgz"
   integrity sha512-IJ+MSwBWKG+SM3b2SUfdrhC+gu01QkV2KmRQgREThBfSQRoufqRfxfHUxpG1WcaFjP+kojcFyO9Qqtpgt3qLCg==
 
-prismjs@^1.28.0, prismjs@^1.29.0:
+prismjs@^1.18.0, prismjs@^1.28.0, prismjs@^1.29.0:
   version "1.29.0"
   resolved "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz"
   integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==
@@ -6263,16 +6236,21 @@ randombytes@^2.1.0:
   dependencies:
     safe-buffer "^5.1.0"
 
-range-parser@1.2.0:
-  version "1.2.0"
-  resolved "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz"
-  integrity sha512-kA5WQoNVo4t9lNx2kQNFCxKeBl5IbbSNBl1M/tLkw9WCn+hxNBAW5Qh8gdhs63CJnhjJ2zQWFoqPJP2sK1AV5A==
+range-parser@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz"
+  integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
 
-range-parser@^1.2.1, range-parser@~1.2.1:
+range-parser@~1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz"
   integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
 
+range-parser@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz"
+  integrity sha512-kA5WQoNVo4t9lNx2kQNFCxKeBl5IbbSNBl1M/tLkw9WCn+hxNBAW5Qh8gdhs63CJnhjJ2zQWFoqPJP2sK1AV5A==
+
 raw-body@2.5.1:
   version "2.5.1"
   resolved "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz"
@@ -6283,7 +6261,7 @@ raw-body@2.5.1:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-rc@1.2.8, rc@^1.2.8:
+rc@^1.2.8, rc@1.2.8:
   version "1.2.8"
   resolved "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz"
   integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==
@@ -6333,7 +6311,7 @@ react-dev-utils@^12.0.1:
     strip-ansi "^6.0.1"
     text-table "^0.2.0"
 
-react-dom@^17.0.2:
+react-dom@*, "react-dom@^16 || ^17 || ^18", "react-dom@^16.6.0 || ^17.0.0 || ^18.0.0", "react-dom@^16.8.4 || ^17.0.0", "react-dom@^17.0.0 || ^16.3.0 || ^15.5.4", react-dom@^17.0.2, "react-dom@>= 16.8.0 < 19.0.0":
   version "17.0.2"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz"
   integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
@@ -6365,7 +6343,7 @@ react-helmet-async@*, react-helmet-async@^1.3.0:
 
 react-helmet@^6.1.0:
   version "6.1.0"
-  resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"
+  resolved "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz"
   integrity sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==
   dependencies:
     object-assign "^4.1.1"
@@ -6400,9 +6378,9 @@ react-loadable-ssr-addon-v5-slorber@^1.0.1:
   dependencies:
     "@babel/runtime" "^7.10.3"
 
-"react-loadable@npm:@docusaurus/react-loadable@5.5.2":
+react-loadable@*, "react-loadable@npm:@docusaurus/react-loadable@5.5.2":
   version "5.5.2"
-  resolved "https://registry.yarnpkg.com/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz#81aae0db81ecafbdaee3651f12804580868fa6ce"
+  resolved "https://registry.npmjs.org/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz"
   integrity sha512-A3dYjdBGuy0IGT+wyLIGIKLRE+sAk1iNk0f1HjNDysO7u8lhL4N3VEm+FAubmJbAztn94F7MxBTPmnixbiyFdQ==
   dependencies:
     "@types/react" "*"
@@ -6428,7 +6406,7 @@ react-router-dom@^5.3.3:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
-react-router@5.3.4, react-router@^5.3.3:
+react-router@^5.3.3, react-router@>=5, react-router@5.3.4:
   version "5.3.4"
   resolved "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz"
   integrity sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==
@@ -6445,7 +6423,7 @@ react-router@5.3.4, react-router@^5.3.3:
 
 react-side-effect@^2.1.0:
   version "2.1.2"
-  resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.2.tgz#dc6345b9e8f9906dc2eeb68700b615e0b4fe752a"
+  resolved "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz"
   integrity sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==
 
 react-textarea-autosize@^8.3.2:
@@ -6457,7 +6435,7 @@ react-textarea-autosize@^8.3.2:
     use-composed-ref "^1.3.0"
     use-latest "^1.2.1"
 
-react@^17.0.2:
+react@*, "react@^15.0.2 || ^16.0.0 || ^17.0.0", "react@^16 || ^17 || ^18", "react@^16.13.1 || ^17.0.0", "react@^16.3.0 || ^17.0.0 || ^18.0.0", "react@^16.6.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.4 || ^17.0.0", "react@^17.0.0 || ^16.3.0 || ^15.5.4", react@^17.0.2, "react@>= 16.8.0 < 19.0.0", react@>=0.14.9, react@>=15, react@>=16.3.0, react@17.0.2:
   version "17.0.2"
   resolved "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
   integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
@@ -6467,7 +6445,7 @@ react@^17.0.2:
 
 read-cache@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.npmmirror.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
+  resolved "https://registry.npmmirror.com/read-cache/-/read-cache-1.0.0.tgz"
   integrity sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==
   dependencies:
     pify "^2.3.0"
@@ -6680,7 +6658,7 @@ resolve-pathname@^3.0.0:
   resolved "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz"
   integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==
 
-resolve@^1.1.6, resolve@^1.14.2, resolve@^1.3.2:
+resolve@^1.1.6, resolve@^1.1.7, resolve@^1.14.2, resolve@^1.22.2, resolve@^1.3.2:
   version "1.22.2"
   resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz"
   integrity sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==
@@ -6689,15 +6667,6 @@ resolve@^1.1.6, resolve@^1.14.2, resolve@^1.3.2:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
-resolve@^1.1.7, resolve@^1.22.2:
-  version "1.22.8"
-  resolved "https://registry.npmmirror.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
-  integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
-  dependencies:
-    is-core-module "^2.13.0"
-    path-parse "^1.0.7"
-    supports-preserve-symlinks-flag "^1.0.0"
-
 responselike@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/responselike/-/responselike-1.0.2.tgz"
@@ -6751,15 +6720,20 @@ rxjs@^7.5.4:
   dependencies:
     tslib "^2.1.0"
 
-safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+safe-buffer@^5.1.0, safe-buffer@>=5.1.0, safe-buffer@~5.2.0, safe-buffer@5.2.1:
+  version "5.2.1"
+  resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
+safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"
   resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
-safe-buffer@5.2.1, safe-buffer@>=5.1.0, safe-buffer@^5.1.0, safe-buffer@~5.2.0:
-  version "5.2.1"
-  resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz"
-  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+safe-buffer@5.1.2:
+  version "5.1.2"
+  resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz"
+  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
 "safer-buffer@>= 2.1.2 < 3":
   version "2.1.2"
@@ -6777,7 +6751,7 @@ sass-loader@^10.1.1:
     schema-utils "^3.0.0"
     semver "^7.3.2"
 
-sass@^1.62.1:
+sass@^1.3.0, sass@^1.30.0, sass@^1.62.1:
   version "1.62.1"
   resolved "https://registry.npmjs.org/sass/-/sass-1.62.1.tgz"
   integrity sha512-NHpxIzN29MXvWiuswfc1W3I0N8SXBd8UR26WntmDlRYf0bSADnwnOjsyMZ3lMezSlArD33Vs3YFhp7dWvL770A==
@@ -6799,15 +6773,6 @@ scheduler@^0.20.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-schema-utils@2.7.0:
-  version "2.7.0"
-  resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz"
-  integrity sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==
-  dependencies:
-    "@types/json-schema" "^7.0.4"
-    ajv "^6.12.2"
-    ajv-keywords "^3.4.1"
-
 schema-utils@^2.6.5:
   version "2.7.1"
   resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz"
@@ -6817,7 +6782,25 @@ schema-utils@^2.6.5:
     ajv "^6.12.4"
     ajv-keywords "^3.5.2"
 
-schema-utils@^3.0.0, schema-utils@^3.1.1, schema-utils@^3.1.2:
+schema-utils@^3.0.0:
+  version "3.1.2"
+  resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.2.tgz"
+  integrity sha512-pvjEHOgWc9OWA/f/DE3ohBWTD6EleVLf7iFUkoSwAxttdBhB9QUebQgxER2kWueOvRJXPHNnyrvvh9eZINB8Eg==
+  dependencies:
+    "@types/json-schema" "^7.0.8"
+    ajv "^6.12.5"
+    ajv-keywords "^3.5.2"
+
+schema-utils@^3.1.1:
+  version "3.1.2"
+  resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.2.tgz"
+  integrity sha512-pvjEHOgWc9OWA/f/DE3ohBWTD6EleVLf7iFUkoSwAxttdBhB9QUebQgxER2kWueOvRJXPHNnyrvvh9eZINB8Eg==
+  dependencies:
+    "@types/json-schema" "^7.0.8"
+    ajv "^6.12.5"
+    ajv-keywords "^3.5.2"
+
+schema-utils@^3.1.2:
   version "3.1.2"
   resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.2.tgz"
   integrity sha512-pvjEHOgWc9OWA/f/DE3ohBWTD6EleVLf7iFUkoSwAxttdBhB9QUebQgxER2kWueOvRJXPHNnyrvvh9eZINB8Eg==
@@ -6836,6 +6819,15 @@ schema-utils@^4.0.0:
     ajv-formats "^2.1.1"
     ajv-keywords "^5.1.0"
 
+schema-utils@2.7.0:
+  version "2.7.0"
+  resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz"
+  integrity sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==
+  dependencies:
+    "@types/json-schema" "^7.0.4"
+    ajv "^6.12.2"
+    ajv-keywords "^3.4.1"
+
 section-matter@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz"
@@ -6868,7 +6860,27 @@ semver@^5.4.1:
   resolved "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
 
-semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.2.0, semver@^6.3.0:
+semver@^6.0.0:
+  version "6.3.0"
+  resolved "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz"
+  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
+
+semver@^6.1.1:
+  version "6.3.0"
+  resolved "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz"
+  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
+
+semver@^6.1.2:
+  version "6.3.0"
+  resolved "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz"
+  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
+
+semver@^6.2.0:
+  version "6.3.0"
+  resolved "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz"
+  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
+
+semver@^6.3.0:
   version "6.3.0"
   resolved "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
@@ -7058,7 +7070,7 @@ sort-css-media-queries@2.1.0:
   resolved "https://registry.npmjs.org/sort-css-media-queries/-/sort-css-media-queries-2.1.0.tgz"
   integrity sha512-IeWvo8NkNiY2vVYdPa27MCQiR0MN0M80johAYFVxWWXQ44KU84WNxjslwBHmc/7ZL2ccwkM7/e6S5aiKZXm7jA==
 
-"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
+source-map-js@^1.0.2, "source-map-js@>=0.6.2 <2.0.0":
   version "1.0.2"
   resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
@@ -7124,22 +7136,45 @@ state-toggle@^1.0.0:
   resolved "https://registry.npmjs.org/state-toggle/-/state-toggle-1.0.3.tgz"
   integrity sha512-d/5Z4/2iiCnHw6Xzghyhb+GcmF89bxwgXG60wjIiZaxnymbyOmI8Hk4VqHXiVVp6u2ysaskFfXg3ekCj4WNftQ==
 
-statuses@2.0.1:
-  version "2.0.1"
-  resolved "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz"
-  integrity sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==
-
 "statuses@>= 1.4.0 < 2":
   version "1.5.0"
   resolved "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz"
   integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
 
+statuses@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz"
+  integrity sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==
+
 std-env@^3.0.1:
   version "3.3.3"
   resolved "https://registry.npmjs.org/std-env/-/std-env-3.3.3.tgz"
   integrity sha512-Rz6yejtVyWnVjC1RFvNmYL10kgjC49EOghxWn0RFqlCHGFpQx+Xe7yW3I4ceK1SGrWIGMjD5Kbue8W/udkbMJg==
 
-string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2:
+string_decoder@^1.1.1:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz"
+  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
+  dependencies:
+    safe-buffer "~5.2.0"
+
+string_decoder@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz"
+  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
+  dependencies:
+    safe-buffer "~5.1.0"
+
+string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.2:
+  version "4.2.3"
+  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.2.0:
   version "4.2.3"
   resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -7157,20 +7192,6 @@ string-width@^5.0.1:
     emoji-regex "^9.2.2"
     strip-ansi "^7.0.1"
 
-string_decoder@^1.1.1:
-  version "1.3.0"
-  resolved "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz"
-  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
-  dependencies:
-    safe-buffer "~5.2.0"
-
-string_decoder@~1.1.1:
-  version "1.1.1"
-  resolved "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz"
-  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
-  dependencies:
-    safe-buffer "~5.1.0"
-
 stringify-object@^3.3.0:
   version "3.3.0"
   resolved "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz"
@@ -7214,7 +7235,7 @@ strip-json-comments@~2.0.1:
   resolved "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz"
   integrity sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==
 
-style-to-object@0.3.0, style-to-object@^0.3.0:
+style-to-object@^0.3.0, style-to-object@0.3.0:
   version "0.3.0"
   resolved "https://registry.npmjs.org/style-to-object/-/style-to-object-0.3.0.tgz"
   integrity sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA==
@@ -7231,7 +7252,7 @@ stylehacks@^5.1.1:
 
 sucrase@^3.32.0:
   version "3.34.0"
-  resolved "https://registry.npmmirror.com/sucrase/-/sucrase-3.34.0.tgz#1e0e2d8fcf07f8b9c3569067d92fbd8690fb576f"
+  resolved "https://registry.npmmirror.com/sucrase/-/sucrase-3.34.0.tgz"
   integrity sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==
   dependencies:
     "@jridgewell/gen-mapping" "^0.3.2"
@@ -7288,7 +7309,7 @@ svgo@^2.7.0, svgo@^2.8.0:
 
 tailwindcss@^3.3.3:
   version "3.3.5"
-  resolved "https://registry.npmmirror.com/tailwindcss/-/tailwindcss-3.3.5.tgz#22a59e2fbe0ecb6660809d9cc5f3976b077be3b8"
+  resolved "https://registry.npmmirror.com/tailwindcss/-/tailwindcss-3.3.5.tgz"
   integrity sha512-5SEZU4J7pxZgSkv7FP1zY8i2TIAOooNZ1e/OGtxIEv6GltpoiXUqWvLy89+a10qYTB1N5Ifkuw9lqQkN9sscvA==
   dependencies:
     "@alloc/quick-lru" "^5.2.0"
@@ -7352,14 +7373,14 @@ text-table@^0.2.0:
 
 thenify-all@^1.0.0:
   version "1.6.0"
-  resolved "https://registry.npmmirror.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
+  resolved "https://registry.npmmirror.com/thenify-all/-/thenify-all-1.6.0.tgz"
   integrity sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==
   dependencies:
     thenify ">= 3.1.0 < 4"
 
 "thenify@>= 3.1.0 < 4":
   version "3.3.1"
-  resolved "https://registry.npmmirror.com/thenify/-/thenify-3.3.1.tgz#8932e686a4066038a016dd9e2ca46add9838a95f"
+  resolved "https://registry.npmmirror.com/thenify/-/thenify-3.3.1.tgz"
   integrity sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==
   dependencies:
     any-promise "^1.0.0"
@@ -7428,7 +7449,7 @@ trough@^1.0.0:
 
 ts-interface-checker@^0.1.9:
   version "0.1.13"
-  resolved "https://registry.npmmirror.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
+  resolved "https://registry.npmmirror.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz"
   integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
 
 tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.0:
@@ -7461,7 +7482,7 @@ typedarray-to-buffer@^3.1.5:
   dependencies:
     is-typedarray "^1.0.0"
 
-typescript@^5.0.4:
+typescript@^5.0.4, "typescript@>= 2.7":
   version "5.0.4"
   resolved "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz"
   integrity sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==
@@ -7502,10 +7523,10 @@ unicode-property-aliases-ecmascript@^2.0.0:
   resolved "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz"
   integrity sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==
 
-unified@9.2.0:
-  version "9.2.0"
-  resolved "https://registry.npmjs.org/unified/-/unified-9.2.0.tgz"
-  integrity sha512-vx2Z0vY+a3YoTj8+pttM3tiJHCwY5UFbYdiWrwBEbHmK8pvsPj2rtAX2BFfgXen8T39CJWblWRDT4L5WGXtDdg==
+unified@^9.2.2:
+  version "9.2.2"
+  resolved "https://registry.npmjs.org/unified/-/unified-9.2.2.tgz"
+  integrity sha512-Sg7j110mtefBD+qunSLO1lqOEKdrwBFBrR6Qd8f4uwkhWNlbkaqwHse6e7QvD3AP/MNoJdEDLaf8OxYyoWgorQ==
   dependencies:
     bail "^1.0.0"
     extend "^3.0.0"
@@ -7514,10 +7535,10 @@ unified@9.2.0:
     trough "^1.0.0"
     vfile "^4.0.0"
 
-unified@^9.2.2:
-  version "9.2.2"
-  resolved "https://registry.npmjs.org/unified/-/unified-9.2.2.tgz"
-  integrity sha512-Sg7j110mtefBD+qunSLO1lqOEKdrwBFBrR6Qd8f4uwkhWNlbkaqwHse6e7QvD3AP/MNoJdEDLaf8OxYyoWgorQ==
+unified@9.2.0:
+  version "9.2.0"
+  resolved "https://registry.npmjs.org/unified/-/unified-9.2.0.tgz"
+  integrity sha512-vx2Z0vY+a3YoTj8+pttM3tiJHCwY5UFbYdiWrwBEbHmK8pvsPj2rtAX2BFfgXen8T39CJWblWRDT4L5WGXtDdg==
   dependencies:
     bail "^1.0.0"
     extend "^3.0.0"
@@ -7533,7 +7554,7 @@ unique-string@^2.0.0:
   dependencies:
     crypto-random-string "^2.0.0"
 
-unist-builder@2.0.3, unist-builder@^2.0.0:
+unist-builder@^2.0.0, unist-builder@2.0.3:
   version "2.0.3"
   resolved "https://registry.npmjs.org/unist-builder/-/unist-builder-2.0.3.tgz"
   integrity sha512-f98yt5pnlMWlzP539tPc4grGMsFaQQlP/vM396b00jngsiINumNmsY8rkXjfoi1c6QaM8nQ3vaGDuoKWbe/1Uw==
@@ -7582,7 +7603,7 @@ unist-util-visit-parents@^3.0.0:
     "@types/unist" "^2.0.0"
     unist-util-is "^4.0.0"
 
-unist-util-visit@2.0.3, unist-util-visit@^2.0.0, unist-util-visit@^2.0.3:
+unist-util-visit@^2.0.0, unist-util-visit@^2.0.3, unist-util-visit@2.0.3:
   version "2.0.3"
   resolved "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-2.0.3.tgz"
   integrity sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q==
@@ -7596,22 +7617,14 @@ universalify@^2.0.0:
   resolved "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz"
   integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==
 
-unpipe@1.0.0, unpipe@~1.0.0:
+unpipe@~1.0.0, unpipe@1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz"
   integrity sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==
 
-update-browserslist-db@^1.0.11:
-  version "1.0.11"
-  resolved "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz"
-  integrity sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==
-  dependencies:
-    escalade "^3.1.1"
-    picocolors "^1.0.0"
-
 update-browserslist-db@^1.0.13:
   version "1.0.13"
-  resolved "https://registry.npmmirror.com/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz#3c5e4f5c083661bd38ef64b6328c26ed6c8248c4"
+  resolved "https://registry.npmmirror.com/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz"
   integrity sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==
   dependencies:
     escalade "^3.1.1"
@@ -7689,7 +7702,7 @@ util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
 
 utila@~0.4:
   version "0.4.0"
-  resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
+  resolved "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz"
   integrity sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA==
 
 utility-types@^3.10.0:
@@ -7852,7 +7865,7 @@ webpack-sources@^3.2.2, webpack-sources@^3.2.3:
   resolved "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz"
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
 
-webpack@^5.73.0:
+"webpack@^4.0.0 || ^5.0.0", "webpack@^4.36.0 || ^5.0.0", "webpack@^4.37.0 || ^5.0.0", webpack@^5.0.0, webpack@^5.1.0, webpack@^5.20.0, webpack@^5.73.0, "webpack@>= 4", webpack@>=2, "webpack@>=4.41.1 || 5.x", "webpack@3 || 4 || 5":
   version "5.84.1"
   resolved "https://registry.npmjs.org/webpack/-/webpack-5.84.1.tgz"
   integrity sha512-ZP4qaZ7vVn/K8WN/p990SGATmrL1qg4heP/MrVneczYtpDGJWlrgZv55vxaV2ul885Kz+25MP2kSXkPe3LZfmg==
@@ -7892,7 +7905,7 @@ webpackbar@^5.0.2:
     pretty-time "^1.1.0"
     std-env "^3.0.1"
 
-websocket-driver@>=0.5.1, websocket-driver@^0.7.4:
+websocket-driver@^0.7.4, websocket-driver@>=0.5.1:
   version "0.7.4"
   resolved "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz"
   integrity sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==
@@ -8031,7 +8044,7 @@ yaml@^1.10.0, yaml@^1.10.2, yaml@^1.7.2:
 
 yaml@^2.1.1:
   version "2.3.3"
-  resolved "https://registry.npmmirror.com/yaml/-/yaml-2.3.3.tgz#01f6d18ef036446340007db8e016810e5d64aad9"
+  resolved "https://registry.npmmirror.com/yaml/-/yaml-2.3.3.tgz"
   integrity sha512-zw0VAJxgeZ6+++/su5AFoqBbZbrEakwu+X0M5HmcwUiBL7AzcuPKjj5we4xfQLp78LkEMpD0cOnUhmgOVy3KdQ==
 
 yocto-queue@^0.1.0:
diff --git a/extensions/ide/vscode/devbox/CHANGELOG.md b/extensions/ide/vscode/devbox/CHANGELOG.md
index bec8e4d2259a..fd285c0a7f0e 100644
--- a/extensions/ide/vscode/devbox/CHANGELOG.md
+++ b/extensions/ide/vscode/devbox/CHANGELOG.md
@@ -6,6 +6,18 @@ Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how
 
 ## [Unreleased]
 
+## [1.3.4] - 2025-02-18
+
+### Fixed
+
+- Windsurf can not open.
+
+## [1.3.1] - 2025-01-21
+
+### Added
+
+- Support Windsurf and Trae.
+
 ## [1.3.0] - 2024-12-24
 
 ### Fixed
diff --git a/extensions/ide/vscode/devbox/package.json b/extensions/ide/vscode/devbox/package.json
index 5329d79ee141..70b7c506fffd 100644
--- a/extensions/ide/vscode/devbox/package.json
+++ b/extensions/ide/vscode/devbox/package.json
@@ -2,7 +2,7 @@
   "name": "devbox-aio",
   "displayName": "%displayName%",
   "description": "%description%",
-  "version": "1.3.0",
+  "version": "1.3.4",
   "keywords": [
     "devbox",
     "remote development",
diff --git a/extensions/ide/vscode/devbox/src/commands/remoteConnector.ts b/extensions/ide/vscode/devbox/src/commands/remoteConnector.ts
index 82000f5e4e5b..31db2b95d452 100644
--- a/extensions/ide/vscode/devbox/src/commands/remoteConnector.ts
+++ b/extensions/ide/vscode/devbox/src/commands/remoteConnector.ts
@@ -256,13 +256,19 @@ export class RemoteSSHConnector extends Disposable {
       vscode.env.uriScheme === 'vscode' ||
       vscode.env.uriScheme === 'vscode-insiders' ||
       vscode.env.uriScheme === 'cursor'
-    if (!isOfficialVscode) {
+    const isTrae = vscode.env.uriScheme === 'trae'
+
+    // windsurf has remote-ssh inside already
+    if (!isOfficialVscode && !isTrae) {
       return true
     }
 
-    const msVscodeRemoteExt = vscode.extensions.getExtension(
-      'ms-vscode-remote.remote-ssh'
-    )
+    const remoteSSHId = isOfficialVscode
+      ? 'ms-vscode-remote.remote-ssh'
+      : 'labring.open-remote-ssh-for-trae'
+
+    const msVscodeRemoteExt = vscode.extensions.getExtension(remoteSSHId)
+
     if (msVscodeRemoteExt) {
       return true
     }
@@ -281,16 +287,13 @@ export class RemoteSSHConnector extends Disposable {
       return false
     }
 
-    await vscode.commands.executeCommand(
-      'extension.open',
-      'ms-vscode-remote.remote-ssh'
-    )
+    await vscode.commands.executeCommand('extension.open', remoteSSHId)
     await vscode.commands.executeCommand(
       'workbench.extensions.installExtension',
-      'ms-vscode-remote.remote-ssh'
+      remoteSSHId
     )
 
-    Logger.info('"ms-vscode-remote.remote-ssh" extension is installed')
+    Logger.info(`"${remoteSSHId}" extension is installed`)
 
     return true
   }
diff --git a/extensions/ide/vscode/devbox/src/providers/DBViewProvider.ts b/extensions/ide/vscode/devbox/src/providers/DBViewProvider.ts
index d97f38fa8306..b6fa9b077a47 100644
--- a/extensions/ide/vscode/devbox/src/providers/DBViewProvider.ts
+++ b/extensions/ide/vscode/devbox/src/providers/DBViewProvider.ts
@@ -123,7 +123,6 @@ export class DBViewProvider
     await this.refreshDatabases()
   }
   private async openWebTerminal(dbInfo: Database) {
-    console.log('dbInfo', dbInfo)
     const commandMap = {
       postgresql: `psql '${dbInfo.connection}'`,
       mongodb: `mongosh '${dbInfo.connection}'`,
diff --git a/extensions/ide/vscode/devbox/src/providers/DevboxListViewProvider.ts b/extensions/ide/vscode/devbox/src/providers/DevboxListViewProvider.ts
index 74d22e522925..8dbb1fb02ba7 100644
--- a/extensions/ide/vscode/devbox/src/providers/DevboxListViewProvider.ts
+++ b/extensions/ide/vscode/devbox/src/providers/DevboxListViewProvider.ts
@@ -237,30 +237,33 @@ class ProjectTreeDataProvider
     }
 
     try {
+      const appName = vscode.env.appName
+
       // 1. remove global state
       GlobalStateManager.remove(deletedHost)
 
-      // 2. remove remote-ssh config
-      const existingSSHHostPlatforms = vscode.workspace
-        .getConfiguration('remote.SSH')
-        .get<{ [host: string]: string }>('remotePlatform', {})
-      const newSSHHostPlatforms = Object.keys(existingSSHHostPlatforms).reduce(
-        (acc: { [host: string]: string }, host: string) => {
+      // 2. remove remote-ssh config if app is not windsurf or Trae
+      if (appName !== 'Windsurf' && appName !== 'Trae') {
+        const existingSSHHostPlatforms = vscode.workspace
+          .getConfiguration('remote.SSH')
+          .get<{ [host: string]: string }>('remotePlatform', {})
+        const newSSHHostPlatforms = Object.keys(
+          existingSSHHostPlatforms
+        ).reduce((acc: { [host: string]: string }, host: string) => {
           if (host.startsWith(deletedHost)) {
             return acc
           }
           acc[host] = existingSSHHostPlatforms[host]
           return acc
-        },
-        {}
-      )
-      await vscode.workspace
-        .getConfiguration('remote.SSH')
-        .update(
-          'remotePlatform',
-          newSSHHostPlatforms,
-          vscode.ConfigurationTarget.Global
-        )
+        }, {})
+        await vscode.workspace
+          .getConfiguration('remote.SSH')
+          .update(
+            'remotePlatform',
+            newSSHHostPlatforms,
+            vscode.ConfigurationTarget.Global
+          )
+      }
 
       // 3. remove ssh config
       const content = await fs.promises.readFile(
diff --git a/extensions/ide/vscode/devbox/src/utils/handleUri.ts b/extensions/ide/vscode/devbox/src/utils/handleUri.ts
index 4ed00928adef..899a6d3ca32f 100644
--- a/extensions/ide/vscode/devbox/src/utils/handleUri.ts
+++ b/extensions/ide/vscode/devbox/src/utils/handleUri.ts
@@ -20,7 +20,8 @@ export class UriHandler {
       uri.scheme !== 'vscode' &&
       uri.scheme !== 'cursor' &&
       uri.scheme !== 'vscode-insiders' &&
-      uri.scheme !== 'windsurf'
+      uri.scheme !== 'windsurf' &&
+      uri.scheme !== 'trae'
     ) {
       return
     }
diff --git a/extensions/ide/vscode/devbox/src/utils/remoteSSHConfig.ts b/extensions/ide/vscode/devbox/src/utils/remoteSSHConfig.ts
index 8c64e4af8f8a..b40666306e55 100644
--- a/extensions/ide/vscode/devbox/src/utils/remoteSSHConfig.ts
+++ b/extensions/ide/vscode/devbox/src/utils/remoteSSHConfig.ts
@@ -1,35 +1,38 @@
-import * as vscode from 'vscode'
-import { Logger } from '../common/logger'
+import * as vscode from "vscode";
+import { Logger } from "../common/logger";
 
 // update Remote-SSH config
 export const modifiedRemoteSSHConfig = async (sshHostLabel: string) => {
-  Logger.info(`Modifying Remote-SSH config for ${sshHostLabel}`)
+  Logger.info(`Modifying Remote-SSH config for ${sshHostLabel}`);
 
   const existingSSHHostPlatforms = vscode.workspace
-    .getConfiguration('remote.SSH')
-    .get<{ [host: string]: string }>('remotePlatform', {})
+    .getConfiguration("remote.SSH")
+    .get<{ [host: string]: string }>("remotePlatform", {});
 
   // delete repeated remotePlatform by sshDomain_namespace_devboxName
   const newSSHHostPlatforms = Object.keys(existingSSHHostPlatforms).reduce(
     (acc: { [host: string]: string }, host: string) => {
       if (host.startsWith(sshHostLabel)) {
-        return acc
+        return acc;
       }
-      acc[host] = existingSSHHostPlatforms[host]
-      return acc
+      acc[host] = existingSSHHostPlatforms[host];
+      return acc;
     },
     {}
-  )
+  );
   // add new ssh host label
-  newSSHHostPlatforms[sshHostLabel] = 'linux'
+  newSSHHostPlatforms[sshHostLabel] = "linux";
 
-  await vscode.workspace
-    .getConfiguration('remote.SSH')
-    .update(
-      'remotePlatform',
-      newSSHHostPlatforms,
-      vscode.ConfigurationTarget.Global
-    )
+  const appName = vscode.env.appName;
+  if (appName !== "Windsurf" && appName !== "Trae") {
+    await vscode.workspace
+      .getConfiguration("remote.SSH")
+      .update(
+        "remotePlatform",
+        newSSHHostPlatforms,
+        vscode.ConfigurationTarget.Global
+      );
+  }
 
   // await vscode.workspace
   //   .getConfiguration('remote.SSH')
@@ -41,5 +44,5 @@ export const modifiedRemoteSSHConfig = async (sshHostLabel: string) => {
   //   .getConfiguration('remote.SSH')
   //   .update('useLocalServer', true, vscode.ConfigurationTarget.Global)
 
-  Logger.info(`Modified Remote-SSH config for ${sshHostLabel}`)
-}
+  Logger.info(`Modified Remote-SSH config for ${sshHostLabel}`);
+};
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
index 3d4809f1f906..b62dc3792d1f 100644
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -45,7 +45,7 @@ FROM deps AS builder
 # Next.js collects completely anonymous telemetry data about general usage.
 # Learn more here: https://nextjs.org/telemetry
 # Uncomment the following line in case you want to disable telemetry during the build.
-ENV NEXT_TELEMETRY_DISABLED 1
+ENV NEXT_TELEMETRY_DISABLED=1
 
 # COPY --from=deps /app/packages ./packages
 
@@ -62,9 +62,9 @@ fi
 # Production image, copy all the files and run next
 FROM base AS runner
 
-ENV NODE_ENV production
+ENV NODE_ENV=production
 # Uncomment the following line in case you want to disable telemetry during runtime.
-ENV NEXT_TELEMETRY_DISABLED 1
+ENV NEXT_TELEMETRY_DISABLED=1
 
 RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs
@@ -96,7 +96,7 @@ COPY --from=builder --chown=nextjs:nodejs /app/$path/.next/standalone ./
 COPY --from=builder --chown=nextjs:nodejs /app/$path/.next/static ./$path/.next/static
 EXPOSE 3000
 
-ENV PORT 3000
+ENV PORT=3000
 
 ENV launchpath=./${path}/server.js
 
diff --git a/frontend/README.md b/frontend/README.md
index ea1c24f7d977..29edd7574417 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -68,7 +68,7 @@ make push-images DOCKER_USERNAME=<your_account> IMAGE_TAG=<tag>
 
 Refer to other apps to add some configuration.
 
-1. .github/workflows/frontend.yml
+1. .github/workflows/frontends.yml
 2. deploy/cloud/init.sh
 3. deploy/cloud/scripts/init.sh
 4. frontend/providers/app/deploy/manifests/appcr.yaml.tmpl
diff --git a/frontend/desktop/.gitignore b/frontend/desktop/.gitignore
index 3d4d46cf7ef3..329a68a1d110 100644
--- a/frontend/desktop/.gitignore
+++ b/frontend/desktop/.gitignore
@@ -42,5 +42,6 @@ yalc.lock
 
 config.yaml
 .env
+.env.local
 data/config.local.yaml
 #/prisma/region/generated/
diff --git a/frontend/desktop/package.json b/frontend/desktop/package.json
index 7a7be9f5adad..5a3379fb9d6d 100644
--- a/frontend/desktop/package.json
+++ b/frontend/desktop/package.json
@@ -34,6 +34,7 @@
     "@sealos/driver": "workspace:^",
     "@sealos/ui": "workspace:^",
     "@tanstack/react-query": "^4.35.3",
+    "@umami/node": "^0.4.0",
     "axios": "^1.5.1",
     "clsx": "^1.2.1",
     "cors": "^2.8.5",
@@ -42,7 +43,6 @@
     "decimal.js": "^10.4.3",
     "eslint": "8.38.0",
     "eslint-config-next": "13.3.0",
-    "formidable": "^3.5.1",
     "framer-motion": "^10.16.4",
     "i18next": "^23.11.5",
     "immer": "^10.0.2",
@@ -81,7 +81,6 @@
   "devDependencies": {
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
-    "@types/formidable": "^3.4.5",
     "@types/jest": "^29.5.10",
     "@types/js-cookie": "^3.0.4",
     "@types/js-yaml": "^4.0.6",
@@ -93,6 +92,7 @@
     "@types/nprogress": "^0.2.1",
     "@types/react": "18.2.37",
     "@types/react-dom": "18.0.11",
+    "@types/umami-browser": "^2.3.2",
     "@types/uuid": "^9.0.4",
     "dotenv-cli": "^7.3.0",
     "jest": "^29.7.0",
diff --git a/frontend/desktop/public/locales/en/common.json b/frontend/desktop/public/locales/en/common.json
index 49352373b0ac..3dec81410663 100644
--- a/frontend/desktop/public/locales/en/common.json
+++ b/frontend/desktop/public/locales/en/common.json
@@ -3,6 +3,9 @@
   "accept": "Accept",
   "accept_invitation": "Accept Invitation",
   "access": "Access",
+  "account_bank_required": "Please enter the correct bank name of the enterprise",
+  "account_number": "Bank Account",
+  "account_number_required": "Please enter the correct recipient bank account of the enterprise",
   "account_settings": "Account Settings",
   "added": "Added",
   "agree_policy": "I have read and agree to the",
@@ -19,6 +22,7 @@
   "attachment": "appendix",
   "avatar": "Avatar",
   "balance": "Balance",
+  "bank_name": "Bank",
   "bind": "Link",
   "bind_success": "Binding successful",
   "bonus": "Bonus",
@@ -39,6 +43,9 @@
   "confirm": "Confirm",
   "confirm_again": "confirm again",
   "confirmnewpassword": "Confirm New Password",
+  "contact_info": "Phone Number",
+  "contact_info_must_be_numeric": "It must be a numeric string",
+  "contact_info_required": "Please enter the correct contact information",
   "core": "Core",
   "cost_center": "Cost Center",
   "create_team": "Create Workspace",
@@ -67,9 +74,22 @@
   "emailchangesuccess": "Email modified successfully",
   "enter": "Enter",
   "enter_confirm": "Please enter {{value}} to confirm",
+  "enterpriseKey": "Enterprise Name  (Bank Account Name)",
+  "enterpriseKeyPlaceholder": "Enter the name of your enterprise",
+  "enterprise_auth_tips": "We will deposit a small amount into your enterprise bank account.\nConfirm the amount to complete verification. ",
+  "enterprise_key": "Unified Social Credit Code",
+  "enterprise_key_required": "Please enter the correct Unified Social Credit Code (USCC) of the enterprise",
+  "enterprise_keyname": "Enterprise Name  (Bank Account Name) ",
+  "enterprise_keyname_placeholder": "Enter the name of your enterprise",
   "enterprise_name": "Company name",
-  "enterprise_name_required": "Please enter the correct company name",
-  "enterprise_verification": "Enterprise real name",
+  "enterprise_name_required": "Please enter the correct enterprise name",
+  "enterprise_realname_cancel_failed": "Cancellation failed.",
+  "enterprise_realname_cancel_success": "Cancellation successful.",
+  "enterprise_realname_payment_failed": "Verify that the payment amount failed to be transferred.",
+  "enterprise_realname_payment_success": "Verify that the amount has been transferred to your company's bank account.",
+  "enterprise_realname_verify_failed": "Enterprise real-name verification failed.",
+  "enterprise_realname_verify_success": "Enterprise real-name verification successful.",
+  "enterprise_verification": "Enterprise",
   "expected_to_use_next_month": "Usage for the next 30 days",
   "expected_used": "Estimated Runaway",
   "face_recognition_failed": "Personal real name failed",
@@ -83,6 +103,7 @@
   "generate_invitation_link": "Generate invitation link",
   "get_code": "verification",
   "get_code_failed": "Get code failed",
+  "get_verification_amount": "Request",
   "gift_amount": "Reward {{amount}} balance.",
   "github": "Github",
   "google": "Google",
@@ -109,6 +130,7 @@
   "invalid_phone_number": "Invalid phone number",
   "invalid_user_id": "Invalid User ID",
   "invalid_username_or_password": "Invalid username or password",
+  "invalid_verification_amount": "The verification amount format is invalid",
   "invalid_verification_code": "Invalid verification code",
   "invitation_reminder": "Invitation reminder",
   "invite_member": "Invite Member",
@@ -118,8 +140,10 @@
   "laf_on_sealos": "Laf on Sealos",
   "language": "Language",
   "launch_various_third-party_applications_with_one_click": "Launch various third-party applications with one click",
+  "legal_person": "Legal Representative",
   "license_buy": "License Buy",
   "link": "link",
+  "link_to_workorder": "Submit a Ticket",
   "loading": "Loading",
   "log_in": "Log In",
   "log_out": "Log Out",
@@ -149,7 +173,7 @@
   "next_time": "Next",
   "nickname": "Nickname",
   "no_apps_found": "No Apps Found",
-  "no_realname_auth": "NO REALNAME AUTH",
+  "no_realname_auth": "Identity Not Verified",
   "notification": "Notification",
   "noworkspacecreated": "You haven't created a workspace yet",
   "official_account_login": "Official account login",
@@ -168,17 +192,18 @@
   "payment_result": "Payment Result",
   "payment_status": "Payment Status",
   "payment_successful": "Payment Successful",
-  "personal_verification": "Personal real name",
+  "personal_verification": "Individual",
   "phone": "Phone",
   "phone_number_tips": "Phone Number",
   "phonechangesuccess": "Mobile phone number modified successfully",
   "please_enter": "Please enter",
+  "please_enter_account_number": "Enter the bank account number",
+  "please_enter_bank_name": "Enter a bank name",
+  "please_enter_contact_info": "Enter the phone number",
+  "please_enter_enterprise_key": "Enter the Unified Social Credit Code",
+  "please_enter_legal_person": "Enter the name of the legal representative",
   "please_enter_username": "Please enter your username",
-  "please_enter_your_enterprise_name": "Please enter your business name",
-  "please_fill_all_fields": "File cannot be empty",
-  "please_read_and_agree_to_the_agreement": "Please read and agree to the agreement",
-  "please_upload_the_business_license": "Please upload a photo of your business license",
-  "please_upload_the_supporting_materials": "Please sign and stamp the downloaded attachment and upload a photo",
+  "please_enter_verification_amount": "Enter the verification amount (in cents).",
   "privacy_policy": "Privacy Policy",
   "private_team_id_of_user": "User's ID",
   "purchase_history": "Purchase History",
@@ -190,12 +215,11 @@
   "read_all": "Read All",
   "read_and_agree": "Please read and agree to the agreement below",
   "realNameVerification": "Real Name Verification",
-  "realName_verification": "Real Name Verification",
+  "realName_verification": "Identity Verification",
   "realname_auth_now": "Click to verify your name",
   "realname_auth_reminder": "Real-name authentication reminder",
   "realname_auth_reminder_desc": "Real-name verification is required for regions in China. Without real-name verification, top-up will be restricted. Successful real-name verification will be rewarded with a {{reward}} Sealos balance.",
-  "realname_auth_tips_a": "1. Please ensure that the name, ID number and mobile phone number filled in are consistent.",
-  "realname_auth_tips_b": "2. The number segments provided by some virtual operators may not pass verification. Please apply for a work order and pass manual verification.",
+  "realname_auth_reminder_desc_no_reward": "Real-name verification is required for regions in China. Without real-name verification, top-up will be restricted.",
   "realname_info": "RealName",
   "receive_tips": "{{managerName}} invite you join in {{teamName}} as {{role}}",
   "recharge_amount": "Recharge Amount",
@@ -208,6 +232,7 @@
   "remain_other_region_resource_tips": "There are still associated resources that have not been deleted in your account. To help you successfully complete the account cancellation process, please clean up all region resources to ensure that nothing is missing.",
   "remain_template_tips": "There are still undeleted template resources in your account. To help you smoothly complete the account cancellation process, please manually delete all template resources to avoid data loss",
   "remain_workspace_tips": "There are still undeleted associated resources in your account. To help you successfully complete the account cancellation process, please clean up or transfer your workspace to avoid data loss.",
+  "remaining_attempts": "{{count}} times left",
   "remaining_time": "Remaining Time: ",
   "remove": "Remove",
   "remove_member_tips": "Determine that you want to remove the member?",
@@ -229,22 +254,23 @@
   "status": "Status",
   "storage": "Storage",
   "submit_error": "Submit Error",
-  "supporting_materials": "Proof material",
+  "submit_verification": "Submit ",
   "switching_disc": "Switching Disc",
   "team": "Workspace",
   "terminal": "Terminal",
   "the_invited_user_must_be_others": "The invited user must be others",
   "toggle_app_bar": "Toggle App Bar",
   "total_amount": "Total Amount",
+  "transAmt_not_match": "The verification amount does not match. Please note that the verification amount is in cents. For example, if the received amount is 0.23 yuan, enter 23.",
   "unbind": "Unbind",
   "unbind_success": "Unbinding successfully",
   "unbound": "Not Linked",
   "under_active_development": "Under active development 🚧",
   "unread": "Unread",
-  "upload_success": "Upload successful",
   "used_last_month": "Usage for the last 30 days",
   "used_resources": "Resources Used",
   "user_name": "User Name",
+  "user_name_required": "Please enter the correct name of the enterprise's legal representative",
   "username": "Username",
   "username_tips": "Username must be 3-16 characters, including letters, numbers",
   "usertask": {
@@ -255,6 +281,10 @@
     "task_launchpad_desc": "Create a container cluster with one click, automatically deploy container applications, and provide intranet/extranet access addresses",
     "task_launchpad_title": "Deploy App"
   },
+  "verification_amount": "Verification Amount",
+  "verification_amount_required": "The verification amount cannot be empty",
+  "verification_amount_tips": "Shanghai UnionPay will deposit a random amount into your bank account for\nverification, typically arriving in real-time. If not received in 3 business day, please ",
+  "verification_amount_tips2": "Please confirm the deposited verification amount with your finance team. It usually arrives in real-time.",
   "verification_code_login": "with Phone",
   "verify_code_tips": "6-digit Verification Code",
   "verify_password": "Verify password",
@@ -272,4 +302,4 @@
   "you_can_view_fees_through_the_fee_center": "You can view fees through the fee center",
   "you_have_not_purchased_the_license": "You have not purchased the License",
   "yuan": "Yuan"
-}
\ No newline at end of file
+}
diff --git a/frontend/desktop/public/locales/zh/common.json b/frontend/desktop/public/locales/zh/common.json
index a21880bd6044..1e56f9d94f35 100644
--- a/frontend/desktop/public/locales/zh/common.json
+++ b/frontend/desktop/public/locales/zh/common.json
@@ -3,6 +3,9 @@
   "accept": "接受",
   "accept_invitation": "接受邀请",
   "access": "权限",
+  "account_bank_required": "请输入正确的企业开户行",
+  "account_number": "银行账号",
+  "account_number_required": "请输入正确的企业开户行收款银行账号",
   "account_settings": "账户设置",
   "added": "已加入",
   "agree_policy": "我已阅读并同意",
@@ -18,6 +21,7 @@
   "attachment": "附件",
   "avatar": "头像",
   "balance": "余额",
+  "bank_name": "开户银行",
   "bind": "绑定",
   "bind_success": "绑定成功",
   "bonus": "赠",
@@ -38,6 +42,9 @@
   "confirm": "确认",
   "confirm_again": "再次确认",
   "confirmnewpassword": "确认新密码",
+  "contact_info": "联系方式 (手机号码)",
+  "contact_info_must_be_numeric": "必须是数字字符串",
+  "contact_info_required": "请输入正确的联系方式",
   "core": "核",
   "create_team": "创建工作空间",
   "created_time": "创建时间",
@@ -64,8 +71,19 @@
   "emailchangesuccess": "电子邮箱修改成功",
   "enter": "输入",
   "enter_confirm": "请输入 {{value}} 确认",
+  "enterprise_auth_tips": "我们会向你提交的对公账户进行小额打款, 请输入收到的金额完成验证。",
+  "enterprise_key": "统一社会信用代码",
+  "enterprise_key_required": "请输入正确的企业统一社会信用代码",
+  "enterprise_keyname": "企业名称 (需与银行开户名一致)",
+  "enterprise_keyname_placeholder": "请输入企业名称 (需与银行开户名一致)",
   "enterprise_name": "企业名称",
   "enterprise_name_required": "请输入正确的企业名字",
+  "enterprise_realname_cancel_failed": "取消失败",
+  "enterprise_realname_cancel_success": "取消成功",
+  "enterprise_realname_payment_failed": "验证金额打款失败",
+  "enterprise_realname_payment_success": "验证金额已经打款到您的企业开户银行",
+  "enterprise_realname_verify_failed": "企业实名失败",
+  "enterprise_realname_verify_success": "企业实名成功",
   "enterprise_verification": "企业实名",
   "expected_to_use_next_month": "未来30天预计使用",
   "expected_used": "预计还能使用",
@@ -80,6 +98,7 @@
   "generate_invitation_link": "生成邀请链接",
   "get_code": "获取验证码",
   "get_code_failed": "获取验证码失败",
+  "get_verification_amount": "获取验证金额",
   "gift_amount": "赠送 {{amount}} 余额.",
   "github": "Github",
   "google": "Google",
@@ -106,6 +125,7 @@
   "invalid_phone_number": "无效的手机号",
   "invalid_user_id": "用户的 ID 不合法",
   "invalid_username_or_password": "用户名或密码错误",
+  "invalid_verification_amount": "验证金额格式不合法",
   "invalid_verification_code": "无效的验证码",
   "invitation_reminder": "受邀提醒",
   "invite_member": "邀请成员",
@@ -114,8 +134,10 @@
   "jump_over": "跳过",
   "language": "语言",
   "launch_various_third-party_applications_with_one_click": "一键启动各种第三方应用",
+  "legal_person": "法定代表人",
   "license_buy": "License 购买",
   "link": "链接",
+  "link_to_workorder": "提交工单",
   "loading": "加载中",
   "log_in": "登录",
   "log_out": "登出",
@@ -169,12 +191,13 @@
   "phone_number_tips": "手机号",
   "phonechangesuccess": "手机号修改成功",
   "please_enter": "请输入",
+  "please_enter_account_number": "请输入银行账号",
+  "please_enter_bank_name": "请输入开户行名",
+  "please_enter_contact_info": "请输入联系方式",
+  "please_enter_enterprise_key": "请输入统一社会信用代码",
+  "please_enter_legal_person": "请输入法人姓名",
   "please_enter_username": "请输入您的用户名",
-  "please_enter_your_enterprise_name": "请输入您的企业名称",
-  "please_fill_all_fields": "文件不能为空",
-  "please_read_and_agree_to_the_agreement": "请阅读并同意协议",
-  "please_upload_the_business_license": "请上传企业的营业执照照片",
-  "please_upload_the_supporting_materials": "请在下载的附件上签名并盖好公章，上传照片",
+  "please_enter_verification_amount": "请输入验证金额（单位分）",
   "privacy_policy": "隐私政策",
   "private_team_id_of_user": "用户ID",
   "purchase_history": "购买记录",
@@ -190,8 +213,7 @@
   "realname_auth_now": "点击进行实名",
   "realname_auth_reminder": "实名认证提醒",
   "realname_auth_reminder_desc": "国内可用区需要实名认证，未实名认证将会被限制充值，实名认证成功奖励 Sealos 余额 {{reward}} 元。",
-  "realname_auth_tips_a": "1、请确保所填写的姓名、身份证号码和手机号码信息一致。",
-  "realname_auth_tips_b": "2、部分虚拟运营商提供的号段可能无法验证通过，请申请工单通过人工协助认证。",
+  "realname_auth_reminder_desc_no_reward": "国内可用区需要实名认证，未实名认证将会被限制充值。",
   "realname_info": "实名信息",
   "receive_tips": "{{managerName}} 邀请你到 {{teamName}} 成为 {{role}}",
   "recharge_amount": "充值金额",
@@ -204,6 +226,7 @@
   "remain_other_region_resource_tips": "您好，您的账户中仍有未删除的关联资源，为了帮助您顺利完成账户注销流程，请您清理所有可用区资源，确保无遗漏。",
   "remain_template_tips": "您的账户中仍有未删除的模板资源，为了帮助您顺利完成账户注销流程，请您手动删除所有模板资源，以避免数据丢失",
   "remain_workspace_tips": "您的账户中仍有未删除的关联资源，为了帮助您顺利完成账户注销流程，请您清理或转移您的工作空间，以避免数据丢失",
+  "remaining_attempts": "剩余 {{count}} 次",
   "remaining_time": "剩余激活时间: ",
   "remove": "移除",
   "remove_member_tips": "确认要移除该成员?",
@@ -224,20 +247,21 @@
   "status": "状态",
   "storage": "存储",
   "submit_error": "提交错误",
-  "supporting_materials": "证明材料",
+  "submit_verification": "提交认证 ",
   "switching_disc": "切换圆盘",
   "team": "工作空间",
   "the_invited_user_must_be_others": "只能邀请其他人",
   "toggle_app_bar": "切换应用栏",
+  "transAmt_not_match": "验证金额不匹配，注意验证金额单位是分，例如收到的打款金额为 0.23 元 则输入23。",
   "unbind": "解绑",
   "unbind_success": "解绑成功",
   "unbound": "未绑定",
   "under_active_development": "正在积极开发中 🚧",
   "unread": "未读",
-  "upload_success": "上传成功",
   "used_last_month": "过去30天已使用",
   "used_resources": "已用资源",
   "user_name": "用户名",
+  "user_name_required": "请输入正确的企业法人姓名",
   "username": "用户名",
   "username_tips": "用户名为3-16位的英文或数字的字符",
   "usertask": {
@@ -248,6 +272,10 @@
     "task_launchpad_desc": "一键创建容器集群，自动化 部署容器应用，并提供内 网/外网访问地址",
     "task_launchpad_title": "部署应用"
   },
+  "verification_amount": "验证金额",
+  "verification_amount_required": "验证金额不能为空",
+  "verification_amount_tips": "验证金额将由上海银联打入你提交的对公账号, 金额随机, 一般实时到账。若三个工作日内未收到, 请",
+  "verification_amount_tips2": "请联系公司财务确认企业银行账户收到的验证金额, 一般实时到账, 长期有效。",
   "verification_code_login": "手机号登录",
   "verify_code_tips": "6位验证码",
   "verify_password": "确认密码",
diff --git a/frontend/desktop/src/api/auth.ts b/frontend/desktop/src/api/auth.ts
index 33ee7e991d78..658468914555 100644
--- a/frontend/desktop/src/api/auth.ts
+++ b/frontend/desktop/src/api/auth.ts
@@ -6,6 +6,7 @@ import { ApiResp, Region } from '@/types';
 import { BIND_STATUS } from '@/types/response/bind';
 import { RESOURCE_STATUS } from '@/types/response/checkResource';
 import { DELETE_USER_STATUS } from '@/types/response/deleteUser';
+import { EnterpriseAuthInfo, PAYMENTSTATUS } from '@/types/response/enterpriseRealName';
 import { USER_MERGE_STATUS } from '@/types/response/merge';
 import { UNBIND_STATUS } from '@/types/response/unbind';
 import { SemData } from '@/types/sem';
@@ -58,7 +59,6 @@ export const _UserInfo = (request: AxiosInstance) => () =>
     ApiResp<{
       info: {
         realName?: string;
-        enterpriseVerificationStatus?: string;
         enterpriseRealName?: string;
         userRestrictedLevel?: number;
         uid: string;
@@ -172,27 +172,52 @@ export const _getFaceAuthStatusRequest = (request: AxiosInstance) => (data: { bi
     data
   );
 
-export const _enterpriseRealNameAuthRequest = (request: AxiosInstance) => (data: FormData) => {
-  return request.post<any, ApiResp<{ status: string }>>(
-    '/api/account/enterpriseRealNameAuth',
-    data,
-    {
-      headers: {
-        'Content-Type': 'multipart/form-data'
-      }
-    }
+export const _enterpriseRealNameAuthPaymentRequest =
+  (request: AxiosInstance) =>
+  (data: {
+    key: string;
+    accountBank: string;
+    accountNo: string;
+    keyName: string;
+    usrName: string;
+    contactInfo: string;
+  }) => {
+    return request.post<typeof data, ApiResp<{ paymentStatus: PAYMENTSTATUS }>>(
+      '/api/account/enterpriseRealName',
+      data
+    );
+  };
+
+export const _enterpriseRealNameAuthVerifyRequest =
+  (request: AxiosInstance) => (data: { transAmt: string }) => {
+    return request.post<
+      typeof data,
+      ApiResp<{ authState: 'success' | 'failed'; enterpriseRealName: string }>
+    >('/api/account/enterpriseRealNameVerify', data);
+  };
+
+export const _enterpriseRealNameAuthInfoRequest = (request: AxiosInstance) => () => {
+  return request.get<any, ApiResp<EnterpriseAuthInfo>>('/api/account/enterpriseRealName');
+};
+
+export const _enterpriseRealNameAuthCancelRequest = (request: AxiosInstance) => () => {
+  return request.patch<any, ApiResp<{ paymentStatus: PAYMENTSTATUS }>>(
+    '/api/account/enterpriseRealName'
   );
 };
 
 export const _getAmount = (request: AxiosInstance) => () =>
   request<never, ApiResp<{ balance: number; deductionBalance: number }>>('/api/account/getAmount');
-
+export const _verifyToken = (request: AxiosInstance) => () =>
+  request<never, ApiResp<null>>('/api/auth/verify');
 export const passwordExistRequest = _passwordExistRequest(request);
 export const passwordLoginRequest = _passwordLoginRequest(request, (token) => {
   useSessionStore.setState({ token });
 });
+
 export const passwordModifyRequest = _passwordModifyRequest(request);
 export const UserInfo = _UserInfo(request);
+export const verifyToken = _verifyToken(request);
 export const regionList = _regionList(request);
 
 export const getSmsBindCodeRequest = _getSmsBindCodeRequest(request);
@@ -211,7 +236,11 @@ export const deleteUserRequest = _deleteUser(request);
 export const checkRemainResource = _checkRemainResource(request);
 export const forceDeleteUser = _forceDeleteUser(request);
 
-export const enterpriseRealNameAuthRequest = _enterpriseRealNameAuthRequest(request);
+export const enterpriseRealNameAuthPaymentRequest = _enterpriseRealNameAuthPaymentRequest(request);
+export const enterpriseRealNameAuthVerifyRequest = _enterpriseRealNameAuthVerifyRequest(request);
+export const enterpriseRealNameAuthInfoRequest = _enterpriseRealNameAuthInfoRequest(request);
+export const enterpriseRealNameAuthCancelRequest = _enterpriseRealNameAuthCancelRequest(request);
+
 export const faceAuthGenerateQRcodeUriRequest = _faceAuthGenerateQRcodeUriRequest(request);
 export const getFaceAuthStatusRequest = _getFaceAuthStatusRequest(request);
 
diff --git a/frontend/desktop/src/api/platform.ts b/frontend/desktop/src/api/platform.ts
index b37d0347a529..313000b532f3 100644
--- a/frontend/desktop/src/api/platform.ts
+++ b/frontend/desktop/src/api/platform.ts
@@ -92,6 +92,7 @@ export const getResource = () => {
       totalMemory: string;
       totalStorage: string;
       runningPodCount: string;
+      totalGpuCount: string;
       totalPodCount: string;
     }>
   >('/api/desktop/getResource');
diff --git a/frontend/desktop/src/components/account/AccountCenter/index.tsx b/frontend/desktop/src/components/account/AccountCenter/index.tsx
index 0f311a0c1f4e..c100b5fd22b8 100644
--- a/frontend/desktop/src/components/account/AccountCenter/index.tsx
+++ b/frontend/desktop/src/components/account/AccountCenter/index.tsx
@@ -222,14 +222,34 @@ export default function Index(props: Omit<IconButtonProps, 'aria-label'>) {
                     <ConfigItem
                       LeftElement={<Text>{t('common:realname_info')}</Text>}
                       RightElement={
-                        infoData.data.enterpriseVerificationStatus === 'Success' ||
-                        infoData.data.realName ? (
-                          <Flex flex={1}>
+                        infoData.data.enterpriseRealName || infoData.data.realName ? (
+                          <Flex flex={1} alignItems="center" gap="4px">
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              width="16"
+                              height="17"
+                              viewBox="0 0 16 17"
+                              fill="none"
+                            >
+                              <path
+                                fillRule="evenodd"
+                                clipRule="evenodd"
+                                d="M12.6667 4.43778L8.41778 2.98243C8.13698 2.88625 7.83213 2.88651 7.55151 2.98317L3.33333 4.43606V9.42245C3.33333 11.9998 5.42267 14.0891 8 14.0891C10.5773 14.0891 12.6667 11.9998 12.6667 9.42245V4.43778ZM2.31306 3.37727C2.12574 3.44179 2 3.61808 2 3.81621V9.42245C2 12.7362 4.68629 15.4225 8 15.4225C11.3137 15.4225 14 12.7362 14 9.42245V3.81679C14 3.61838 13.8739 3.44191 13.6862 3.37761L8.84983 1.72104C8.28825 1.52868 7.67854 1.5292 7.11729 1.72252L2.31306 3.37727ZM5.10471 7.85479C5.36506 7.59444 5.78717 7.59444 6.04752 7.85479L7.58137 9.38864L10.4987 6.47126C10.7591 6.21091 11.1812 6.21091 11.4416 6.47126C11.7019 6.73161 11.7019 7.15372 11.4416 7.41407L8.05518 10.8005C8.04844 10.8072 8.0416 10.8137 8.03465 10.8201C7.7732 11.063 7.3643 11.0572 7.10987 10.8028L5.10471 8.7976C4.84436 8.53725 4.84436 8.11514 5.10471 7.85479Z"
+                                fill="#039855"
+                              />
+                            </svg>
                             <Text
                               maxWidth="200px"
                               whiteSpace="nowrap"
                               overflow="hidden"
                               textOverflow="ellipsis"
+                              color="var(--light-general-on-surface-lowest, var(--Gray-Modern-500, #667085))"
+                              fontFamily="PingFang SC"
+                              fontSize="14px"
+                              fontStyle="normal"
+                              fontWeight={500}
+                              lineHeight="20px"
+                              letterSpacing="0.1px"
                             >
                               {infoData?.data.enterpriseRealName || infoData?.data.realName}
                             </Text>
@@ -240,8 +260,37 @@ export default function Index(props: Omit<IconButtonProps, 'aria-label'>) {
                             _active={{ transform: 'scale(0.95)' }}
                             colorScheme="red"
                             onClick={() => setPageState(PageState.REALNAME_AUTH)}
+                            display="flex"
+                            padding="4px 4px 4px 8px"
+                            justifyContent="center"
+                            alignItems="center"
+                            gap="2px"
+                            borderRadius="6px"
+                            bg="var(--Red-50, #FEF3F2)"
+                            color="var(--Red-500, #F04438)"
+                            fontFamily="PingFang SC"
+                            fontSize="14px"
+                            fontStyle="normal"
+                            fontWeight="500"
+                            lineHeight="20px"
+                            letterSpacing="0.1px"
+                            textTransform="none"
                           >
-                            {t('common:no_realname_auth')} <CloseIcon boxSize={3} ml={1} />
+                            {t('common:no_realname_auth')}
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              width="16"
+                              height="17"
+                              viewBox="0 0 16 17"
+                              fill="none"
+                            >
+                              <path
+                                fillRule="evenodd"
+                                clipRule="evenodd"
+                                d="M5.52876 4.02876C5.26841 4.28911 5.26841 4.71122 5.52876 4.97157L9.05735 8.50016L5.52876 12.0288C5.26841 12.2891 5.26841 12.7112 5.52876 12.9716C5.78911 13.2319 6.21122 13.2319 6.47157 12.9716L10.4716 8.97157C10.7319 8.71122 10.7319 8.28911 10.4716 8.02876L6.47157 4.02876C6.21122 3.76841 5.78911 3.76841 5.52876 4.02876Z"
+                                fill="#F04438"
+                              />
+                            </svg>
                           </Badge>
                         )
                       }
diff --git a/frontend/desktop/src/components/account/RealNameModal.tsx b/frontend/desktop/src/components/account/RealNameModal.tsx
index dfc40a332ad2..8c01662c911d 100644
--- a/frontend/desktop/src/components/account/RealNameModal.tsx
+++ b/frontend/desktop/src/components/account/RealNameModal.tsx
@@ -20,26 +20,20 @@ import {
   Spinner,
   Link,
   FormErrorMessage,
-  HStack,
-  TabIndicator,
   FlexProps
 } from '@chakra-ui/react';
 import { CloseIcon, useMessage, WarningIcon } from '@sealos/ui';
 import { useTranslation } from 'next-i18next';
-import React, {
-  forwardRef,
-  ReactElement,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useState
-} from 'react';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from 'react';
 import { Tabs, TabList, TabPanels, Tab, TabPanel } from '@chakra-ui/react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import {
-  enterpriseRealNameAuthRequest,
+  enterpriseRealNameAuthCancelRequest,
+  enterpriseRealNameAuthInfoRequest,
+  enterpriseRealNameAuthPaymentRequest,
+  enterpriseRealNameAuthVerifyRequest,
   faceAuthGenerateQRcodeUriRequest,
   getFaceAuthStatusRequest
 } from '@/api/auth';
@@ -47,9 +41,8 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import useSessionStore from '@/stores/session';
 import { useQuery } from '@tanstack/react-query';
 import QRCode from 'qrcode.react';
-import { useDropzone } from 'react-dropzone';
 import { useConfigStore } from '@/stores/config';
-import { DeleteIcon, PictureIcon, UploadIcon, AttachmentIcon } from '../icons';
+import { PAYMENTSTATUS } from '@/types/response/enterpriseRealName';
 
 export function useRealNameAuthNotification(props?: UseToastOptions) {
   const { t } = useTranslation();
@@ -81,7 +74,6 @@ export function useRealNameAuthNotification(props?: UseToastOptions) {
                   color="yellow.600"
                   fontSize="16px"
                   fontWeight={500}
-                  fontFamily="PingFang SC"
                   lineHeight="24px"
                   letterSpacing="0.15px"
                   fontStyle="normal"
@@ -111,21 +103,21 @@ export function useRealNameAuthNotification(props?: UseToastOptions) {
               <Text
                 flex="1 0 0"
                 color="grayModern.900"
-                fontFamily="PingFang SC"
                 fontSize="14px"
                 fontWeight={400}
                 lineHeight="20px"
                 letterSpacing="0.25px"
               >
-                {t('common:realname_auth_reminder_desc', {
-                  reward: realNameReward
-                })}
+                {realNameReward?.toString() === '0'
+                  ? t('common:realname_auth_reminder_desc_no_reward')
+                  : t('common:realname_auth_reminder_desc', {
+                      reward: realNameReward
+                    })}
                 <RealNameModal onFormSuccess={props.onClose}>
                   <Text
                     as="span"
                     cursor="pointer"
                     color="yellow.600"
-                    fontFamily="PingFang SC"
                     fontSize="14px"
                     fontWeight={500}
                     lineHeight="20px"
@@ -188,8 +180,11 @@ const RealNameModal = forwardRef<
         <ModalContent
           borderRadius={'12px'}
           maxW={'540px'}
-          bgColor={'#FFF'}
+          bgColor="white"
           backdropFilter="blur(150px)"
+          containerProps={{
+            zIndex: '5500'
+          }}
         >
           <ModalCloseButton right={'20px'} top="12px" p="0" />
           <ModalHeader
@@ -200,38 +195,74 @@ const RealNameModal = forwardRef<
           >
             <Text>{t('common:realName_verification')}</Text>
           </ModalHeader>
-          <ModalBody w="100%" py="32px" px={'60px'}>
+          <ModalBody w="100%" py="32px" px="52px">
             <Tabs position="relative" variant="unstyled" isLazy>
-              <TabList gap="12px">
+              <TabList
+                gap="4px"
+                width="fit-content"
+                display="flex"
+                padding="3px"
+                alignItems="flex-start"
+                sx={{
+                  borderRadius: '6px',
+                  border: '1px solid',
+                  borderColor: 'grayModern.200',
+                  background: 'grayModern.50'
+                }}
+              >
                 <Tab
-                  display="flex"
-                  padding="8px 4px"
-                  justifyContent="center"
-                  alignItems="center"
-                  gap="10px"
-                  color="grayModern.500"
-                  fontWeight={500}
-                  _selected={{ color: 'grayModern.900' }}
-                  _focus={{ boxShadow: 'none' }}
+                  sx={{
+                    display: 'flex',
+                    padding: '5px 10px',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    gap: '6px',
+                    borderRadius: '4px',
+                    fontSize: '14px',
+                    fontStyle: 'normal',
+                    fontWeight: 500,
+                    lineHeight: '20px',
+                    letterSpacing: '0.1px',
+                    color: 'grayModern.500',
+                    _selected: {
+                      color: 'brightBlue.600',
+                      bg: 'white',
+                      boxShadow:
+                        '0px 1px 2px 0px rgba(19, 51, 107, 0.10), 0px 0px 1px 0px rgba(19, 51, 107, 0.15)'
+                    },
+                    _focus: { boxShadow: 'none' }
+                  }}
                 >
                   {t('common:personal_verification')}
                 </Tab>
-                {/* <Tab
-                  display="flex"
-                  padding="8px 4px"
-                  justifyContent="center"
-                  alignItems="center"
-                  fontWeight={500}
-                  gap="10px"
-                  color="grayModern.500"
-                  _selected={{ color: 'grayModern.900' }}
-                  _focus={{ boxShadow: 'none' }}
+
+                <Tab
+                  sx={{
+                    display: 'flex',
+                    padding: '5px 10px',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    gap: '6px',
+                    borderRadius: '4px',
+                    fontSize: '14px',
+                    fontStyle: 'normal',
+                    fontWeight: 500,
+                    lineHeight: '20px',
+                    letterSpacing: '0.1px',
+                    color: 'grayModern.500',
+                    _selected: {
+                      color: 'brightBlue.600',
+                      bg: 'white',
+                      boxShadow:
+                        '0px 1px 2px 0px rgba(19, 51, 107, 0.10), 0px 0px 1px 0px rgba(19, 51, 107, 0.15)'
+                    },
+                    _focus: { boxShadow: 'none' }
+                  }}
                 >
                   {t('common:enterprise_verification')}
-                </Tab> */}
+                </Tab>
               </TabList>
-              <TabIndicator height="2px" bg="grayModern.900" borderRadius="1px" />
-              <TabPanels mt="28px">
+              <TabPanels m="0" p="0">
                 <TabPanel p="0">
                   <FaceIdRealNameAuthORcode
                     onFormSuccess={() => {
@@ -242,7 +273,7 @@ const RealNameModal = forwardRef<
                     }}
                   />
                 </TabPanel>
-                {/* <TabPanel p="0">
+                <TabPanel p="0">
                   <EnterpriseVerification
                     onFormSuccess={() => {
                       onClose();
@@ -251,7 +282,7 @@ const RealNameModal = forwardRef<
                       }
                     }}
                   />
-                </TabPanel> */}
+                </TabPanel>
               </TabPanels>
             </Tabs>
           </ModalBody>
@@ -269,36 +300,72 @@ export function RealNameAuthForm(
   const { t } = useTranslation();
   return (
     <Tabs position="relative" variant="unstyled" isLazy>
-      <TabList gap="12px">
+      <TabList
+        gap="4px"
+        width="fit-content"
+        display="flex"
+        padding="3px"
+        alignItems="flex-start"
+        sx={{
+          borderRadius: '6px',
+          border: '1px solid',
+          borderColor: 'grayModern.200',
+          background: 'grayModern.50'
+        }}
+      >
         <Tab
-          display="flex"
-          padding="8px 4px"
-          justifyContent="center"
-          alignItems="center"
-          gap="10px"
-          color="grayModern.500"
-          fontWeight={500}
-          _selected={{ color: 'grayModern.900' }}
-          _focus={{ boxShadow: 'none' }}
+          sx={{
+            display: 'flex',
+            padding: '5px 10px',
+            justifyContent: 'center',
+            alignItems: 'center',
+            gap: '6px',
+            borderRadius: '4px',
+            fontSize: '14px',
+            fontStyle: 'normal',
+            fontWeight: 500,
+            lineHeight: '20px',
+            letterSpacing: '0.1px',
+            color: 'grayModern.500',
+            _selected: {
+              color: 'brightBlue.600',
+              bg: 'white',
+              boxShadow:
+                '0px 1px 2px 0px rgba(19, 51, 107, 0.10), 0px 0px 1px 0px rgba(19, 51, 107, 0.15)'
+            },
+            _focus: { boxShadow: 'none' }
+          }}
         >
           {t('common:personal_verification')}
         </Tab>
-        {/* <Tab
-          display="flex"
-          padding="8px 4px"
-          justifyContent="center"
-          alignItems="center"
-          fontWeight={500}
-          gap="10px"
-          color="grayModern.500"
-          _selected={{ color: 'grayModern.900' }}
-          _focus={{ boxShadow: 'none' }}
+
+        <Tab
+          sx={{
+            display: 'flex',
+            padding: '5px 10px',
+            justifyContent: 'center',
+            alignItems: 'center',
+            gap: '6px',
+            borderRadius: '4px',
+            fontSize: '14px',
+            fontStyle: 'normal',
+            fontWeight: 500,
+            lineHeight: '20px',
+            letterSpacing: '0.1px',
+            color: 'grayModern.500',
+            _selected: {
+              color: 'brightBlue.600',
+              bg: 'white',
+              boxShadow:
+                '0px 1px 2px 0px rgba(19, 51, 107, 0.10), 0px 0px 1px 0px rgba(19, 51, 107, 0.15)'
+            },
+            _focus: { boxShadow: 'none' }
+          }}
         >
           {t('common:enterprise_verification')}
-        </Tab> */}
+        </Tab>
       </TabList>
-      <TabIndicator height="2px" bg="grayModern.900" borderRadius="1px" />
-      <TabPanels mt="28px">
+      <TabPanels p="0" m="0">
         <TabPanel p="0">
           <FaceIdRealNameAuthORcode
             onFormSuccess={() => {
@@ -308,7 +375,7 @@ export function RealNameAuthForm(
             }}
           />
         </TabPanel>
-        {/* <TabPanel p="0">
+        <TabPanel p="0">
           <EnterpriseVerification
             onFormSuccess={() => {
               if (props.onFormSuccess && typeof props.onFormSuccess === 'function') {
@@ -316,7 +383,7 @@ export function RealNameAuthForm(
               }
             }}
           />
-        </TabPanel> */}
+        </TabPanel>
       </TabPanels>
     </Tabs>
   );
@@ -424,7 +491,7 @@ export function FaceIdRealNameAuthORcode(
 
   if (error) {
     return (
-      <Box>
+      <Box mt="32px">
         <Text color="red.500">{t('common:failed_to_get_qr_code')}</Text>
         <Flex mt="28px">
           <Button onClick={() => handleRefetch()}>{t('common:retry_get_qr_code')}</Button>
@@ -435,7 +502,7 @@ export function FaceIdRealNameAuthORcode(
 
   if (isLoading) {
     return (
-      <Center>
+      <Center mt="32px">
         <Spinner />
         <Text ml={3}>{t('common:loading')}</Text>
       </Center>
@@ -443,13 +510,12 @@ export function FaceIdRealNameAuthORcode(
   }
 
   return (
-    <Box>
+    <Box mt="32px" mb="16px">
       {data?.data?.url && (
         <>
           <Flex flexDirection="column" alignItems="center" gap="16px" alignSelf="stretch">
             <Text
               color="grayModern.600"
-              fontFamily="PingFang SC"
               fontSize="14px"
               fontStyle="normal"
               fontWeight={500}
@@ -462,20 +528,6 @@ export function FaceIdRealNameAuthORcode(
             <Center>
               <QRCode value={data.data.url} size={200} />
             </Center>
-            {isPolling && (
-              <Text
-                color="grayModern.600"
-                fontFamily="PingFang SC"
-                fontSize="12px"
-                fontStyle="normal"
-                fontWeight={500}
-                lineHeight="20px" // 142.857%
-                letterSpacing="0.1px"
-                textAlign="center"
-              >
-                {t('common:waiting_for_face_recognition')}
-              </Text>
-            )}
           </Flex>
         </>
       )}
@@ -483,420 +535,746 @@ export function FaceIdRealNameAuthORcode(
   );
 }
 
-function FileUploadBox({
-  onDrop,
-  file,
-  removeFile,
-  label,
-  description,
-  isAttachment
-}: {
-  onDrop: (acceptedFiles: File[]) => void;
-  file: File | null;
-  removeFile: () => void;
-  label: string;
-  description: string;
-  isAttachment?: boolean;
-}) {
-  const { commonConfig } = useConfigStore((s) => s);
-  const enterpriseSupportingMaterialsUri = commonConfig?.enterpriseSupportingMaterials;
-  const { getRootProps, getInputProps } = useDropzone({
-    onDrop,
-    maxFiles: 1,
-    accept: {
-      'image/*': ['.png', '.jpg', '.jpeg'],
-      'application/pdf': ['.pdf']
-    }
-  });
-  const { t } = useTranslation();
-
-  return (
-    <Box
-      h="116px"
-      display="flex"
-      justifyContent="space-between"
-      alignItems="flex-start"
-      alignSelf="stretch"
-      gap="var(--xs, 4px)"
-    >
-      <Text
-        mb={2}
-        color="grayModern.900"
-        fontFamily="PingFang SC"
-        fontSize="14px"
-        fontStyle="normal"
-        fontWeight={500}
-        lineHeight="20px"
-        letterSpacing="0.1px"
-      >
-        {label}
-      </Text>
-      <Box
-        w="328px"
-        h="116px"
-        display="flex"
-        flexDirection="column"
-        alignItems="flex-start"
-        gap="8px"
-      >
-        <Text
-          color="var(--light-general-on-surface-lowest, var(--Gray-Modern-500, #667085))"
-          fontFamily="PingFang SC"
-          fontSize="12px"
-          fontStyle="normal"
-          fontWeight={500}
-          lineHeight="16px"
-          letterSpacing="0.5px"
-        >
-          {description}
-        </Text>
-        <Box
-          id="upload-box"
-          h="64px"
-          display="flex"
-          alignItems="center"
-          justifyContent="center"
-          gap="10px"
-          width="100%"
-          borderRadius="var(--sm, 6px)"
-          border={
-            file
-              ? '1px dashed var(--Bright-Blue-500, #219BF4)'
-              : '1px dashed var(--Gray-Modern-300, #C4CBD7)'
-          }
-          bg={file ? 'var(--Bright-Blue-50, #F0FBFF)' : 'var(--Gray-Modern-25, #FBFBFC)'}
-          cursor="pointer"
-          {...getRootProps()}
-        >
-          <input {...getInputProps()} />
-          <Flex direction="column" alignItems="center" color="blue.500" gap="2px">
-            <UploadIcon width="20px" height="20px" />
-            <Text
-              color="var(--light-general-on-surface, var(--Gray-Modern-900, #111824))"
-              fontFamily="PingFang SC"
-              fontSize="10px"
-              fontStyle="normal"
-              fontWeight={500}
-              lineHeight="14px"
-              letterSpacing="0.2px"
-            >
-              {t('common:click_to_upload_file')}
-            </Text>
-          </Flex>
-        </Box>{' '}
-        <Flex
-          display="flex"
-          flexDirection="row"
-          alignItems="center" // Change to center for vertical alignment
-          justifyContent="space-between"
-          gap="4px"
-          alignSelf="stretch"
-          mt="-1.5"
-        >
-          <Flex flex="1" alignItems="center">
-            {file ? (
-              <Flex alignItems="center" justifyContent="flex-start" width="100%">
-                <Flex alignItems="center" gap="8px" minWidth="0">
-                  <PictureIcon h="16px" w="16px" flexShrink="0" />
-                  <Text
-                    flexShrink={1}
-                    maxWidth="200px"
-                    color="var(--light-general-on-surface-low, var(--Gray-Modern-600, #485264))"
-                    fontFamily="PingFang SC"
-                    fontSize="12px"
-                    fontStyle="normal"
-                    fontWeight={400}
-                    lineHeight="140%"
-                    whiteSpace="nowrap"
-                    overflow="hidden"
-                    textOverflow="ellipsis"
-                  >
-                    {file.name}
-                  </Text>
-                </Flex>
-                <Button
-                  size="sm"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    removeFile();
-                  }}
-                  variant="ghost"
-                  style={{
-                    display: 'flex',
-                    width: '24px',
-                    height: '24px',
-                    padding: 0,
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    minWidth: 'auto',
-                    flexShrink: 0
-                  }}
-                >
-                  <DeleteIcon h="16px" w="16px" />
-                </Button>
-              </Flex>
-            ) : null}
-          </Flex>
-          {isAttachment && (
-            <Link
-              gap="var(--sm, 6px)"
-              display="flex"
-              alignItems="center"
-              padding="var(--xs, 4px)"
-              ml="auto"
-              href={enterpriseSupportingMaterialsUri}
-              download
-              // mt={file ? '0' : '4px'}
-            >
-              <Flex alignItems="center" gap="6px">
-                <AttachmentIcon h="16px" w="16px" />
-                <Text
-                  color="var(--light-sealos-secondary-text, var(--Bright-Blue-600, #0884DD))"
-                  fontFamily="PingFang SC"
-                  fontSize="12px"
-                  fontWeight={500}
-                  lineHeight="16px"
-                  letterSpacing="0.5px"
-                >
-                  {t('common:attachment')}
-                </Text>
-              </Flex>
-            </Link>
-          )}
-        </Flex>
-      </Box>
-    </Box>
-  );
-}
-
 function EnterpriseVerification(
   props: FlexProps & {
     onFormSuccess?: () => void;
   }
 ) {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const { message } = useMessage();
-
   const { session } = useSessionStore((s) => s);
   const { setSessionProp } = useSessionStore();
-
   const queryClient = useQueryClient();
+  const domain = useConfigStore((state) => state.cloudConfig?.domain);
 
   const schema = z.object({
-    enterpriseName: z
+    key: z.string().min(1, { message: t('common:enterprise_key_required') }),
+    accountBank: z.string().min(1, { message: t('common:account_bank_required') }),
+    accountNo: z.string().min(1, { message: t('common:account_number_required') }),
+    keyName: z.string().min(1, { message: t('common:enterprise_name_required') }),
+    usrName: z.string().min(1, { message: t('common:user_name_required') }),
+    contactInfo: z
+      .string()
+      .min(1, { message: t('common:contact_info_required') })
+      .regex(/^\d+$/, { message: t('common:contact_info_must_be_numeric') })
+  });
+
+  const verificationSchema = z.object({
+    transAmt: z
       .string()
-      .min(1, { message: t('common:enterprise_name_required') })
-      .max(50, { message: t('common:enterprise_name_required') }),
-    enterpriseQualification: z.instanceof(File).nullable(),
-    supportingMaterials: z.instanceof(File).nullable()
+      .refine((val) => /^\d{1,3}$/.test(val), { message: t('common:invalid_verification_amount') })
   });
 
+  const { data: enterpriseRealNameAuthInfo, isLoading: enterpriseRealNameAuthInfoLoading } =
+    useQuery(['enterpriseRealNameAuthInfo'], enterpriseRealNameAuthInfoRequest, {
+      refetchOnWindowFocus: false
+    });
+
   type FormData = z.infer<typeof schema>;
 
   const {
-    register,
-    handleSubmit,
-    setValue,
-    watch,
-    reset,
-    formState: { errors }
-  } = useForm<FormData>({
+    register: registerMain,
+    handleSubmit: handleMainSubmit,
+    reset: resetMain,
+    formState: { errors: mainErrors }
+  } = useForm<z.infer<typeof schema>>({
     resolver: zodResolver(schema),
-    defaultValues: {
-      enterpriseName: '',
-      enterpriseQualification: null,
-      supportingMaterials: null
-    }
+    mode: 'onChange'
   });
 
-  const enterpriseQualification = watch('enterpriseQualification');
-  const supportingMaterials = watch('supportingMaterials');
+  const {
+    register: registerVerification,
+    watch: watchVerification,
+    reset: resetVerification,
+    formState: { errors: verificationErrors }
+  } = useForm<z.infer<typeof verificationSchema>>({
+    resolver: zodResolver(verificationSchema),
+    mode: 'onChange'
+  });
 
-  const onDropEnterpriseQualification = useCallback(
-    (acceptedFiles: File[]) => {
-      setValue('enterpriseQualification', acceptedFiles[0], { shouldValidate: true });
-    },
-    [setValue]
-  );
+  const transAmt = watchVerification('transAmt');
 
-  const onDropCertificateMaterial = useCallback(
-    (acceptedFiles: File[]) => {
-      setValue('supportingMaterials', acceptedFiles[0], { shouldValidate: true });
-    },
-    [setValue]
-  );
+  useEffect(() => {
+    if (
+      enterpriseRealNameAuthInfo?.data &&
+      enterpriseRealNameAuthInfo.data.paymentStatus === PAYMENTSTATUS.PROCESSING
+    ) {
+      const { key, accountBank, accountNo, keyName, usrName, contactInfo } =
+        enterpriseRealNameAuthInfo.data;
+      resetMain({
+        key,
+        accountBank,
+        accountNo,
+        keyName,
+        usrName,
+        contactInfo
+      });
+    }
+  }, [enterpriseRealNameAuthInfo?.data, resetMain]);
 
-  const removeEnterpriseQualification = () =>
-    setValue('enterpriseQualification', null, { shouldValidate: true });
-  const removeSupportingMaterials = () =>
-    setValue('supportingMaterials', null, { shouldValidate: true });
+  const canPayment = enterpriseRealNameAuthInfo?.data?.paymentStatus !== PAYMENTSTATUS.PROCESSING;
 
-  const enterpriseRealNameAuthMutation = useMutation(enterpriseRealNameAuthRequest, {
+  const canVerify = enterpriseRealNameAuthInfo?.data?.paymentStatus === PAYMENTSTATUS.PROCESSING;
+
+  const canCancel = enterpriseRealNameAuthInfo?.data?.paymentStatus === PAYMENTSTATUS.PROCESSING;
+
+  const canInput = enterpriseRealNameAuthInfo?.data?.paymentStatus !== PAYMENTSTATUS.PROCESSING;
+
+  const remainingAttempts = enterpriseRealNameAuthInfo?.data?.remainingAttempts;
+
+  const [errorMessage, setErrorMessage] = useState<string>('');
+
+  const enterpriseRealNameAuthPaymentMutation = useMutation(enterpriseRealNameAuthPaymentRequest, {
     onSuccess: (data) => {
-      if (data.code === 200) {
+      if (data.code === 200 && data.data?.paymentStatus === PAYMENTSTATUS.PROCESSING) {
         message({
-          title: t('common:upload_success'),
+          title: t('common:enterprise_realname_payment_success'),
           status: 'success',
           duration: 2000,
-          isClosable: true,
-          position: 'top'
+          isClosable: true
         });
+        setErrorMessage('');
+        queryClient.invalidateQueries(['enterpriseRealNameAuthInfo']);
+      } else {
+        message({
+          title: t('common:enterprise_realname_payment_failed'),
+          status: 'error',
+          duration: 2000,
+          isClosable: true
+        });
+        setErrorMessage(data.message || t('common:enterprise_realname_payment_failed'));
+      }
+    },
+    onError: (error: any) => {
+      message({
+        title: t('common:enterprise_realname_payment_failed'),
+        status: 'error',
+        duration: 2000,
+        isClosable: true
+      });
+      setErrorMessage(error.message || t('common:enterprise_realname_payment_failed'));
+    }
+  });
+
+  const enterpriseRealNameAuthVerifyMutation = useMutation(enterpriseRealNameAuthVerifyRequest, {
+    onSuccess: (data) => {
+      if (data.code === 200 && data.data?.authState === 'success') {
+        message({
+          title: t('common:enterprise_realname_verify_success'),
+          status: 'success',
+          duration: 2000,
+          isClosable: true
+        });
+
+        setErrorMessage('');
 
-        queryClient.invalidateQueries([session?.token, 'UserInfo']);
         setSessionProp('user', {
           ...useSessionStore.getState().session!.user!,
-          enterpriseVerificationStatus: data.data?.status
+          enterpriseRealName: data.data?.enterpriseRealName
         });
 
-        reset();
+        queryClient.invalidateQueries([session?.token, 'UserInfo']);
+        queryClient.invalidateQueries(['enterpriseRealNameAuthInfo']);
+        resetMain();
+        resetVerification();
 
-        if (props.onFormSuccess && typeof props.onFormSuccess === 'function') {
+        if (props.onFormSuccess) {
           props.onFormSuccess();
         }
       } else {
         message({
-          title: data.message,
+          title: t('common:enterprise_realname_verify_failed'),
           status: 'error',
-          position: 'top',
           duration: 2000,
           isClosable: true
         });
+        setErrorMessage(
+          data.message ? t(data.message as any) : t('common:enterprise_realname_verify_failed')
+        );
       }
     },
-    onError: (error: Error) => {
+    onError: (error: any) => {
       message({
-        title: error.message,
+        title: t('common:enterprise_realname_verify_failed'),
         status: 'error',
-        position: 'top',
         duration: 2000,
         isClosable: true
       });
+      setErrorMessage(error.message || t('common:enterprise_realname_verify_failed'));
     }
   });
 
-  const onValidate = async (data: {
-    enterpriseName: string;
-    enterpriseQualification: File | null;
-    supportingMaterials: File | null;
-  }) => {
-    if (!data.enterpriseQualification || !data.supportingMaterials) {
+  const enterpriseRealNameAuthCancelMutation = useMutation(enterpriseRealNameAuthCancelRequest, {
+    onSuccess: (data) => {
+      if (data.code === 200 && data.data?.paymentStatus === PAYMENTSTATUS.CANCEL) {
+        message({
+          title: t('common:enterprise_realname_cancel_success'),
+          status: 'success',
+          duration: 2000,
+          isClosable: true
+        });
+        setErrorMessage('');
+        queryClient.invalidateQueries(['enterpriseRealNameAuthInfo']);
+      } else {
+        message({
+          title: t('common:enterprise_realname_cancel_failed'),
+          status: 'error',
+          duration: 2000,
+          isClosable: true
+        });
+        setErrorMessage(t('common:enterprise_realname_cancel_failed'));
+      }
+    },
+    onError: (error: any) => {
       message({
-        title: t('common:please_fill_all_fields'),
-        status: 'warning',
-        position: 'top',
+        title: t('common:enterprise_realname_cancel_failed'),
+        status: 'error',
         duration: 2000,
         isClosable: true
       });
-
-      return;
+      setErrorMessage(error.message || t('common:enterprise_realname_cancel_failed'));
     }
-    const formData = new FormData();
-    formData.append('enterpriseName', data.enterpriseName);
-    formData.append('enterpriseQualification', data.enterpriseQualification);
-    formData.append('supportingMaterials', data.supportingMaterials);
-    enterpriseRealNameAuthMutation.mutate(formData);
-  };
+  });
 
-  const onInvalid = () => {
-    const firstErrorMessage = Object.values(errors)[0]?.message;
-    if (firstErrorMessage) {
+  const handleVerifyClick = () => {
+    if (!transAmt || !/^\d{1,3}$/.test(transAmt)) {
       message({
-        title: firstErrorMessage,
+        title: t('common:invalid_verification_amount'),
         status: 'error',
-        position: 'top',
         duration: 2000,
         isClosable: true
       });
+      setErrorMessage(t('common:invalid_verification_amount'));
+      return;
     }
+
+    enterpriseRealNameAuthVerifyMutation.mutate({ transAmt });
   };
 
-  const onSubmit = handleSubmit(onValidate, onInvalid);
+  if (enterpriseRealNameAuthInfoLoading) {
+    return (
+      <Center mt="32px">
+        <Spinner />
+        <Text ml={3}>{t('common:loading')}</Text>
+      </Center>
+    );
+  }
 
   return (
-    <form onSubmit={onSubmit}>
-      <VStack
-        align="flex-start"
-        gap="24px"
-        sx={{
-          flexDirection: 'column'
-        }}
+    <VStack spacing="24px" align="stretch" w="full">
+      <Box
+        as="form"
+        w="full"
+        onSubmit={handleMainSubmit((data: FormData) => {
+          enterpriseRealNameAuthPaymentMutation.mutate(data);
+        })}
       >
-        <FormControl isInvalid={!!errors.enterpriseName}>
-          <HStack
+        <Flex py="16px" px="0" w="full">
+          <Text
+            alignSelf="stretch"
+            color="grayModern.500"
+            fontSize="12px"
+            fontWeight={400}
+            lineHeight="16px"
+            letterSpacing="0.048px"
+          >
+            {t('common:enterprise_auth_tips')}
+          </Text>
+        </Flex>
+        <VStack spacing="24px" w="full">
+          <FormControl
+            isInvalid={!!mainErrors.keyName}
+            w="full"
             display="flex"
-            justifyContent="space-between"
-            alignItems="center"
+            flexDirection="column"
+            gap="4px"
+          >
+            <Flex
+              flexDirection="column"
+              alignItems="flex-start"
+              alignSelf="stretch"
+              gap="8px"
+              w="full"
+            >
+              <FormLabel
+                color={!canInput ? 'grayModern.400' : 'grayModern.900'}
+                fontSize="12px"
+                fontWeight={500}
+                lineHeight="16px"
+                letterSpacing="0.5px"
+                p="0"
+                m="0"
+                w="full"
+              >
+                {t('common:enterprise_keyname')}
+              </FormLabel>
+              <Input
+                {...registerMain('keyName')}
+                isDisabled={!canInput}
+                placeholder={t('common:enterprise_keyname_placeholder')}
+                h="32px"
+                px="12px"
+                alignItems="center"
+                w="full"
+                borderRadius="6px"
+                borderColor="grayModern.200"
+                bg="grayModern.50"
+              />
+            </Flex>
+            <FormErrorMessage
+              w="full"
+              color="red.600"
+              fontSize="12px"
+              fontWeight={400}
+              lineHeight="16px"
+              letterSpacing="0.048px"
+              p="0"
+              m="0"
+            >
+              {mainErrors.keyName?.message}
+            </FormErrorMessage>
+          </FormControl>
+
+          <FormControl
+            isInvalid={!!mainErrors.key}
+            w="full"
+            display="flex"
+            flexDirection="column"
+            gap="4px"
+          >
+            <Flex
+              flexDirection="column"
+              alignItems="flex-start"
+              alignSelf="stretch"
+              gap="8px"
+              w="full"
+            >
+              <FormLabel
+                color={!canInput ? 'grayModern.400' : 'grayModern.900'}
+                fontSize="12px"
+                fontWeight={500}
+                lineHeight="16px"
+                letterSpacing="0.5px"
+                p="0"
+                m="0"
+                w="full"
+              >
+                {t('common:enterprise_key')}
+              </FormLabel>
+              <Input
+                {...registerMain('key')}
+                isDisabled={!canInput}
+                placeholder={t('common:please_enter_enterprise_key')}
+                h="32px"
+                px="12px"
+                alignItems="center"
+                w="full"
+                borderRadius="6px"
+                borderColor="grayModern.200"
+                bg="grayModern.50"
+              />
+            </Flex>
+            <FormErrorMessage
+              w="full"
+              color="red.600"
+              fontSize="12px"
+              fontWeight={400}
+              lineHeight="16px"
+              letterSpacing="0.048px"
+              p="0"
+              m="0"
+            >
+              {mainErrors.key?.message}
+            </FormErrorMessage>
+          </FormControl>
+
+          <FormControl
+            isInvalid={!!mainErrors.usrName}
+            w="full"
+            display="flex"
+            flexDirection="column"
+            gap="4px"
+          >
+            <Flex
+              flexDirection="column"
+              alignItems="flex-start"
+              alignSelf="stretch"
+              gap="8px"
+              w="full"
+            >
+              <FormLabel
+                color={!canInput ? 'grayModern.400' : 'grayModern.900'}
+                fontSize="12px"
+                fontWeight={500}
+                lineHeight="16px"
+                letterSpacing="0.5px"
+                p="0"
+                m="0"
+                w="full"
+              >
+                {t('common:legal_person')}
+              </FormLabel>
+              <Input
+                {...registerMain('usrName')}
+                isDisabled={!canInput}
+                placeholder={t('common:please_enter_legal_person')}
+                h="32px"
+                px="12px"
+                alignItems="center"
+                w="full"
+                borderRadius="6px"
+                borderColor="grayModern.200"
+                bg="grayModern.50"
+              />
+            </Flex>
+            <FormErrorMessage
+              w="full"
+              color="red.600"
+              fontSize="12px"
+              fontWeight={400}
+              lineHeight="16px"
+              letterSpacing="0.048px"
+              p="0"
+              m="0"
+            >
+              {mainErrors.usrName?.message}
+            </FormErrorMessage>
+          </FormControl>
+
+          <FormControl
+            isInvalid={!!mainErrors.accountNo}
+            w="full"
+            display="flex"
+            flexDirection="column"
+            gap="4px"
+          >
+            <Flex
+              flexDirection="column"
+              alignItems="flex-start"
+              alignSelf="stretch"
+              gap="8px"
+              w="full"
+            >
+              <FormLabel
+                color={!canInput ? 'grayModern.400' : 'grayModern.900'}
+                fontSize="12px"
+                fontWeight={500}
+                lineHeight="16px"
+                letterSpacing="0.5px"
+                p="0"
+                m="0"
+                w="full"
+              >
+                {t('common:account_number')}
+              </FormLabel>
+              <Input
+                {...registerMain('accountNo')}
+                isDisabled={!canInput}
+                placeholder={t('common:please_enter_account_number')}
+                h="32px"
+                px="12px"
+                alignItems="center"
+                w="full"
+                borderRadius="6px"
+                borderColor="grayModern.200"
+                bg="grayModern.50"
+              />
+            </Flex>
+            <FormErrorMessage
+              w="full"
+              color="red.600"
+              fontSize="12px"
+              fontWeight={400}
+              lineHeight="16px"
+              letterSpacing="0.048px"
+              p="0"
+              m="0"
+            >
+              {mainErrors.accountNo?.message}
+            </FormErrorMessage>
+          </FormControl>
+
+          <FormControl
+            isInvalid={!!mainErrors.accountBank}
+            w="full"
+            display="flex"
+            flexDirection="column"
+            gap="4px"
+          >
+            <Flex
+              flexDirection="column"
+              alignItems="flex-start"
+              alignSelf="stretch"
+              gap="8px"
+              w="full"
+            >
+              <FormLabel
+                color={!canInput ? 'grayModern.400' : 'grayModern.900'}
+                fontSize="12px"
+                fontWeight={500}
+                lineHeight="16px"
+                letterSpacing="0.5px"
+                p="0"
+                m="0"
+                w="full"
+              >
+                {t('common:bank_name')}
+              </FormLabel>
+              <Input
+                {...registerMain('accountBank')}
+                isDisabled={!canInput}
+                placeholder={t('common:please_enter_bank_name')}
+                h="32px"
+                px="12px"
+                alignItems="center"
+                w="full"
+                borderRadius="6px"
+                borderColor="grayModern.200"
+                bg="grayModern.50"
+              />
+            </Flex>
+            <FormErrorMessage
+              w="full"
+              color="red.600"
+              fontSize="12px"
+              fontWeight={400}
+              lineHeight="16px"
+              letterSpacing="0.048px"
+              p="0"
+              m="0"
+            >
+              {mainErrors.accountBank?.message}
+            </FormErrorMessage>
+          </FormControl>
+
+          <FormControl
+            isInvalid={!!mainErrors.contactInfo}
+            w="full"
+            display="flex"
+            flexDirection="column"
+            gap="4px"
+          >
+            <Flex
+              flexDirection="column"
+              alignItems="flex-start"
+              alignSelf="stretch"
+              gap="8px"
+              w="full"
+            >
+              <FormLabel
+                color={!canInput ? 'grayModern.400' : 'grayModern.900'}
+                fontSize="12px"
+                fontWeight={500}
+                lineHeight="16px"
+                letterSpacing="0.5px"
+                p="0"
+                m="0"
+                w="full"
+              >
+                {t('common:contact_info')}
+              </FormLabel>
+              <Input
+                {...registerMain('contactInfo')}
+                isDisabled={!canInput}
+                placeholder={t('common:please_enter_contact_info')}
+                h="32px"
+                px="12px"
+                alignItems="center"
+                w="full"
+                borderRadius="6px"
+                borderColor="grayModern.200"
+                bg="grayModern.50"
+              />
+            </Flex>
+            <FormErrorMessage
+              w="full"
+              color="red.600"
+              fontSize="12px"
+              fontWeight={400}
+              lineHeight="16px"
+              letterSpacing="0.048px"
+              p="0"
+              m="0"
+            >
+              {mainErrors.contactInfo?.message}
+            </FormErrorMessage>
+          </FormControl>
+        </VStack>
+        {(errorMessage || !canPayment) && (
+          <Box
+            mt="16px"
+            display="flex"
+            padding="12px"
+            alignItems="flex-start"
+            gap="6px"
             alignSelf="stretch"
-            h="32px"
+            borderRadius="6px"
+            border={
+              errorMessage
+                ? '1px solid var(--Red-600, #D92D20)'
+                : '1px solid var(--Green-600, #039855)'
+            }
+            background={errorMessage ? 'red.50' : 'white'}
+            maxH="100px"
+            overflowY="auto"
           >
-            <FormLabel
-              color="grayModern.900"
-              fontFamily="PingFang SC"
-              fontSize="14px"
+            <Text
+              color={errorMessage ? 'red.600' : 'green.600'}
+              fontSize="12px"
               fontStyle="normal"
               fontWeight={500}
-              lineHeight="20px"
-              letterSpacing="0.1px"
+              lineHeight="16px"
+              letterSpacing="0.5px"
+              wordBreak="break-word"
             >
-              {t('common:enterprise_name')}
-            </FormLabel>
-            <Input
-              placeholder={t('common:please_enter_your_enterprise_name')}
-              {...register('enterpriseName')}
-              display="flex"
-              width="328px"
-              height="32px"
-              padding="8px 12px"
-              alignItems="center"
-              borderRadius="6px"
-              border="1px solid #E8EBF0"
-              background="#F7F8FA"
-              color="grayModern.500"
-            />
-          </HStack>
-          {errors.enterpriseName && (
-            <FormErrorMessage>{errors.enterpriseName.message}</FormErrorMessage>
-          )}
-        </FormControl>
-
-        <FileUploadBox
-          onDrop={onDropEnterpriseQualification}
-          file={enterpriseQualification}
-          removeFile={removeEnterpriseQualification}
-          label={t('common:business_license')}
-          description={t('common:please_upload_the_business_license')}
-        />
-
-        <FileUploadBox
-          onDrop={onDropCertificateMaterial}
-          file={supportingMaterials}
-          removeFile={removeSupportingMaterials}
-          label={t('common:supporting_materials')}
-          description={t('common:please_upload_the_supporting_materials')}
-          isAttachment={true}
-        />
-
-        <Flex alignItems="flex-end" gap="36px" alignSelf="stretch" flexDirection="column">
-          <Flex flexDirection="column" gap="16px" alignItems="flex-end">
-            <Button
-              type="submit"
-              colorScheme="blue"
-              // isDisabled={!enterpriseQualification || !supportingMaterials}
-              isLoading={enterpriseRealNameAuthMutation.isLoading}
+              {errorMessage || t('common:verification_amount_tips2')}
+            </Text>
+          </Box>
+        )}
+        <Flex flexDirection="column" alignItems="flex-start" gap="8px" mt="16px">
+          <Text
+            color="grayModern.900"
+            fontSize="12px"
+            fontStyle="normal"
+            fontWeight={500}
+            lineHeight="16px"
+            letterSpacing="0.5px"
+          >
+            {t('common:verification_amount')}
+          </Text>
+          <FormControl
+            isInvalid={!!verificationErrors.transAmt}
+            w="full"
+            display="flex"
+            flexDirection="column"
+            gap="4px"
+          >
+            <Flex
               display="flex"
-              padding="var(--xs, 4px)"
-              justifyContent="center"
               alignItems="center"
-              gap="var(--sm, 6px)"
-              borderRadius="8px"
-              width="90px"
+              gap="8px"
+              alignSelf="stretch"
+              justify="flex-end"
+              w="100%"
             >
-              {t('common:confirm')}
-            </Button>
-          </Flex>
+              <Input
+                {...registerVerification('transAmt')}
+                isDisabled={!canVerify}
+                placeholder={t('common:please_enter_verification_amount')}
+                h="32px"
+                px="12px"
+                alignItems="center"
+                w="full"
+                borderRadius="6px"
+                bg="grayModern.50"
+              />
+              <Button
+                type="submit"
+                variant="unstyled"
+                h="32px"
+                isDisabled={!canPayment || remainingAttempts === 0}
+                isLoading={enterpriseRealNameAuthPaymentMutation.isLoading}
+                px="14px"
+                justifyContent="center"
+                alignItems="center"
+                borderRadius="6px"
+                border="1px solid var(--Gray-Modern-250, #DFE2EA)"
+                background="var(--White, #FFF)"
+                boxShadow="0px 1px 2px 0px rgba(19, 51, 107, 0.05), 0px 0px 1px 0px rgba(19, 51, 107, 0.08)"
+                color="grayModern.600"
+                fontSize="12px"
+                fontWeight={500}
+                lineHeight="16px"
+                letterSpacing="0.5px"
+                whiteSpace="nowrap"
+                minW="fit-content"
+              >
+                {t('common:get_verification_amount')}
+              </Button>
+            </Flex>
+            <FormErrorMessage
+              w="full"
+              color="red.600"
+              fontSize="12px"
+              fontWeight={400}
+              lineHeight="16px"
+              letterSpacing="0.048px"
+              p="0"
+              m="0"
+            >
+              {verificationErrors.transAmt?.message}
+            </FormErrorMessage>
+          </FormControl>
+          <Text
+            color="grayModern.500"
+            fontSize="12px"
+            fontWeight={400}
+            lineHeight="16px"
+            letterSpacing="0.048px"
+          >
+            {t('common:verification_amount_tips')}
+            <Link
+              href={`https://${domain}/?openapp=system-workorder`}
+              color="brightBlue.600"
+              textDecoration="underline"
+            >
+              {t('common:link_to_workorder')}
+            </Link>
+            {i18n.language === 'zh' && '。'}
+          </Text>
+        </Flex>
+      </Box>
+
+      <Flex alignItems="center" justifyContent="flex-end" w="full">
+        <Flex alignItems="center" gap="12px" h="36px">
+          <Button
+            minW="fit-content"
+            h="36px"
+            variant="unstyled"
+            onClick={() => enterpriseRealNameAuthCancelMutation.mutate()}
+            isDisabled={!canCancel}
+            isLoading={enterpriseRealNameAuthCancelMutation.isLoading}
+            px="14px"
+            justifyContent="center"
+            alignItems="center"
+            borderRadius="6px"
+            border="grayModern.250"
+            background="white"
+            boxShadow="0px 1px 2px 0px rgba(19, 51, 107, 0.05), 0px 0px 1px 0px rgba(19, 51, 107, 0.08)"
+          >
+            <Text
+              color="grayModern.600"
+              fontSize="14px"
+              fontStyle="normal"
+              fontWeight={500}
+              lineHeight="20px"
+              letterSpacing="0.1px"
+            >
+              {t('common:cancel')}
+            </Text>
+          </Button>
+          <Button
+            minW="fit-content"
+            h="36px"
+            variant="primary"
+            onClick={handleVerifyClick}
+            isDisabled={!canVerify || remainingAttempts === 0}
+            isLoading={enterpriseRealNameAuthVerifyMutation.isLoading}
+            px="14px"
+            justifyContent="center"
+            alignItems="center"
+            borderRadius="6px"
+            border="1px solid var(--Gray-Modern-250, #DFE2EA)"
+            boxShadow="0px 1px 2px 0px rgba(19, 51, 107, 0.05), 0px 0px 1px 0px rgba(19, 51, 107, 0.08)"
+          >
+            <Text>
+              {t('common:submit_verification')} (
+              {t('common:remaining_attempts', { count: remainingAttempts })})
+            </Text>
+          </Button>
         </Flex>
-      </VStack>
-    </form>
+      </Flex>
+    </VStack>
   );
 }
 
diff --git a/frontend/desktop/src/components/desktop_content/index.tsx b/frontend/desktop/src/components/desktop_content/index.tsx
index 345a330c6e83..173cb4c455cb 100644
--- a/frontend/desktop/src/components/desktop_content/index.tsx
+++ b/frontend/desktop/src/components/desktop_content/index.tsx
@@ -127,7 +127,7 @@ export default function Desktop(props: any) {
 
   useEffect(() => {
     if (infoData.isSuccess && commonConfig?.realNameAuthEnabled) {
-      if (!infoData?.data?.realName && infoData?.data?.enterpriseVerificationStatus !== 'Success') {
+      if (!infoData?.data?.realName && !infoData?.data?.enterpriseRealName) {
         realNameAuthNotificationIdRef.current = realNameAuthNotification({
           duration: null,
           isClosable: true
diff --git a/frontend/desktop/src/components/desktop_content/monitor.tsx b/frontend/desktop/src/components/desktop_content/monitor.tsx
index 53c7d0b791a0..5cbeaf58d5a1 100644
--- a/frontend/desktop/src/components/desktop_content/monitor.tsx
+++ b/frontend/desktop/src/components/desktop_content/monitor.tsx
@@ -3,8 +3,9 @@ import { Box, CircularProgress, CircularProgressLabel, Flex, Text } from '@chakr
 import { MonitorIcon } from '@sealos/ui';
 import { useQuery } from '@tanstack/react-query';
 import { useTranslation } from 'next-i18next';
-import { CpuIcon, FlowIcon, MemoryIcon, StorageIcon } from '../icons';
+import { CpuIcon, FlowIcon, GpuIcon, MemoryIcon, StorageIcon } from '../icons';
 import { blurBackgroundStyles } from './index';
+import { useMemo } from 'react';
 
 export default function Monitor({ needStyles = true }: { needStyles?: boolean }) {
   const { t } = useTranslation();
@@ -12,32 +13,45 @@ export default function Monitor({ needStyles = true }: { needStyles?: boolean })
     staleTime: 60 * 1000
   });
 
-  const info = [
-    {
-      label: 'CPU',
-      value: data?.data?.totalCpu,
-      icon: <CpuIcon />,
-      unit: 'C'
-    },
-    {
-      label: t('common:memory'),
-      value: data?.data?.totalMemory,
-      icon: <MemoryIcon />,
-      unit: 'GB'
-    },
-    {
-      label: t('common:storage'),
-      value: data?.data?.totalStorage,
-      icon: <StorageIcon />,
-      unit: 'GB'
-    },
-    {
-      label: t('common:flow'),
-      value: `~`,
-      icon: <FlowIcon />,
-      unit: 'GB'
-    }
-  ];
+  const info = useMemo(
+    () => [
+      {
+        label: 'CPU',
+        value: data?.data?.totalCpu,
+        icon: <CpuIcon />,
+        unit: 'C'
+      },
+      {
+        label: t('common:memory'),
+        value: data?.data?.totalMemory,
+        icon: <MemoryIcon />,
+        unit: 'GB'
+      },
+      {
+        label: t('common:storage'),
+        value: data?.data?.totalStorage,
+        icon: <StorageIcon />,
+        unit: 'GB'
+      },
+      {
+        label: t('common:flow'),
+        value: `~`,
+        icon: <FlowIcon />,
+        unit: 'GB'
+      },
+      ...(Number(data?.data?.totalGpuCount) > 0
+        ? [
+            {
+              label: 'GPU',
+              value: data?.data?.totalGpuCount,
+              icon: <GpuIcon color={'rgba(255, 255, 255, 0.90)'} width={'13px'} height={'13px'} />,
+              unit: 'Card'
+            }
+          ]
+        : [])
+    ],
+    [data?.data, t]
+  );
 
   const totalPodCount = Number(data?.data?.totalPodCount) || 0;
   const runningPodCount = Number(data?.data?.runningPodCount) || 0;
diff --git a/frontend/desktop/src/components/icons/index.tsx b/frontend/desktop/src/components/icons/index.tsx
index 5e42b63ca27f..54aa7322e449 100644
--- a/frontend/desktop/src/components/icons/index.tsx
+++ b/frontend/desktop/src/components/icons/index.tsx
@@ -605,3 +605,24 @@ export function AttachmentIcon(props: IconProps) {
     </Icon>
   );
 }
+
+export function GpuIcon(props: IconProps) {
+  return (
+    <Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentcolor" {...props}>
+      <path
+        d="M9.96854 18H14.0315C13.9933 18.0002 13.9557 18.0001 13.919 18.0001H10.081C10.0443 18.0001 10.0067 18.0002 9.96854 18Z"
+        fill="currentColor"
+      />
+      <path
+        d="M9.68745 16.459C10.4621 16.879 11.4048 17.089 12.5154 17.089C13.0288 17.089 13.5468 17.0423 14.0694 16.949C14.5921 16.8557 15.0634 16.7343 15.4834 16.585C15.7074 16.5103 15.8661 16.389 15.9594 16.221C16.0528 16.053 16.0995 15.8477 16.0995 15.605V12.357C16.0995 12.077 16.0248 11.8623 15.8754 11.713C15.7354 11.5637 15.5254 11.489 15.2454 11.489H13.0474C12.7674 11.489 12.5528 11.559 12.4035 11.699C12.2541 11.8297 12.1794 12.021 12.1794 12.273C12.1794 12.5157 12.2541 12.707 12.4035 12.847C12.5528 12.987 12.7674 13.057 13.0474 13.057H14.3074V14.9921C14.0945 15.0529 13.8799 15.1031 13.6635 15.143C13.3088 15.2083 12.9634 15.241 12.6274 15.241C11.6288 15.241 10.8728 14.9703 10.3594 14.429C9.85545 13.8877 9.60345 13.0897 9.60345 12.035C9.60345 11.335 9.71078 10.747 9.92545 10.271C10.1495 9.78567 10.4854 9.42167 10.9334 9.179C11.3814 8.927 11.9368 8.801 12.5994 8.801C13.0101 8.801 13.3881 8.843 13.7334 8.927C14.0788 9.00167 14.4054 9.123 14.7134 9.291C14.9468 9.403 15.1521 9.44034 15.3295 9.403C15.5161 9.35634 15.6654 9.263 15.7774 9.123C15.8988 8.97367 15.9734 8.80567 16.0014 8.619C16.0388 8.423 16.0201 8.241 15.9454 8.073C15.8801 7.89567 15.7494 7.751 15.5534 7.639C15.0868 7.37767 14.6014 7.191 14.0975 7.079C13.5934 6.967 13.0894 6.911 12.5854 6.911C11.7641 6.911 11.0268 7.03234 10.3734 7.275C9.72945 7.51767 9.17878 7.863 8.72145 8.311C8.27345 8.74967 7.92812 9.28634 7.68545 9.921C7.45212 10.5463 7.33545 11.251 7.33545 12.035C7.33545 13.0523 7.53612 13.939 7.93745 14.695C8.33878 15.451 8.92212 16.039 9.68745 16.459Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.7587 2.00012H16.2413C17.0462 2.00011 17.7107 2.0001 18.2518 2.04432C18.8139 2.09024 19.3306 2.18881 19.816 2.4361C20.5686 2.81959 21.1805 3.43151 21.564 4.18416C21.8113 4.6695 21.9099 5.1862 21.9558 5.7483C22 6.28949 22 6.95384 22 7.7588V16.2414C22 17.0464 22 17.7108 21.9558 18.2519C21.9099 18.814 21.8113 19.3307 21.564 19.8161C21.1805 20.5687 20.5686 21.1807 19.816 21.5641C19.3306 21.8114 18.8139 21.91 18.2518 21.9559C17.7106 22.0001 17.0463 22.0001 16.2413 22.0001H7.75878C6.95377 22.0001 6.28939 22.0001 5.74817 21.9559C5.18608 21.91 4.66937 21.8114 4.18404 21.5641C3.43139 21.1807 2.81947 20.5687 2.43598 19.8161C2.18868 19.3307 2.09012 18.814 2.0442 18.2519C1.99998 17.7108 1.99999 17.0464 2 16.2414V7.75881C1.99999 6.95385 1.99998 6.28948 2.0442 5.7483C2.09012 5.1862 2.18868 4.6695 2.43598 4.18416C2.81947 3.43151 3.43139 2.81959 4.18404 2.4361C4.66938 2.18881 5.18608 2.09024 5.74818 2.04432C6.28936 2.0001 6.95375 2.00011 7.7587 2.00012ZM5.91104 4.03768C5.47262 4.07349 5.24842 4.13842 5.09202 4.21811C4.7157 4.40986 4.40974 4.71582 4.21799 5.09214C4.1383 5.24854 4.07337 5.47275 4.03755 5.91116C4.00078 6.36125 4 6.94354 4 7.80012V16.2001C4 17.0567 4.00078 17.639 4.03755 18.0891C4.07337 18.5275 4.1383 18.7517 4.21799 18.9081C4.40973 19.2844 4.7157 19.5904 5.09202 19.7821C5.24842 19.8618 5.47263 19.9267 5.91104 19.9626C6.36113 19.9993 6.94342 20.0001 7.8 20.0001H16.2C17.0566 20.0001 17.6389 19.9993 18.089 19.9626C18.5274 19.9268 18.7516 19.8618 18.908 19.7821C19.2843 19.5904 19.5903 19.2844 19.782 18.9081C19.8617 18.7517 19.9266 18.5275 19.9624 18.0891C19.9992 17.639 20 17.0567 20 16.2001V7.80012C20 6.94355 19.9992 6.36125 19.9624 5.91116C19.9266 5.47275 19.8617 5.24854 19.782 5.09214C19.5903 4.71582 19.2843 4.40986 18.908 4.21811C18.7516 4.13842 18.5274 4.0735 18.089 4.03768C17.6389 4.0009 17.0566 4.00012 16.2 4.00012L7.8 4.00012C6.94342 4.00012 6.36113 4.0009 5.91104 4.03768Z"
+        fill="currentColor"
+      />
+    </Icon>
+  );
+}
diff --git a/frontend/desktop/src/components/signin/auth/usePassword.tsx b/frontend/desktop/src/components/signin/auth/usePassword.tsx
index be8ed7cecf75..b95c4604b3ec 100644
--- a/frontend/desktop/src/components/signin/auth/usePassword.tsx
+++ b/frontend/desktop/src/components/signin/auth/usePassword.tsx
@@ -95,8 +95,6 @@ export default function usePassword({
                         userId: payload.userId,
                         userUid: payload.userUid,
                         realName: infoData.data?.info.realName || undefined,
-                        enterpriseVerificationStatus:
-                          infoData.data?.info.enterpriseVerificationStatus || undefined,
                         enterpriseRealName: infoData.data?.info.enterpriseRealName || undefined,
                         userRestrictedLevel: infoData.data?.info.userRestrictedLevel || undefined
                       },
diff --git a/frontend/desktop/src/components/signin/auth/useWechat.tsx b/frontend/desktop/src/components/signin/auth/useWechat.tsx
index ea2084389d24..759830f2d863 100644
--- a/frontend/desktop/src/components/signin/auth/useWechat.tsx
+++ b/frontend/desktop/src/components/signin/auth/useWechat.tsx
@@ -54,8 +54,6 @@ export default function useWechat() {
             userId: payload.userId,
             realName: infoData.data?.info.realName || undefined,
             userRestrictedLevel: infoData.data?.info.userRestrictedLevel || undefined,
-            enterpriseVerificationStatus:
-              infoData.data?.info.enterpriseVerificationStatus || undefined,
             enterpriseRealName: infoData.data?.info.enterpriseRealName || undefined
           },
           // @ts-ignore
diff --git a/frontend/desktop/src/components/task/useDriver.tsx b/frontend/desktop/src/components/task/useDriver.tsx
index b18967179415..1a1ddbca9a97 100644
--- a/frontend/desktop/src/components/task/useDriver.tsx
+++ b/frontend/desktop/src/components/task/useDriver.tsx
@@ -1,6 +1,7 @@
 import { checkUserTask, getUserTasks, updateTask } from '@/api/platform';
 import { AppStoreIcon, DBproviderIcon, DriverStarIcon, LaunchpadIcon } from '@/components/icons';
 import useAppStore from '@/stores/app';
+import useCallbackStore from '@/stores/callback';
 import { useConfigStore } from '@/stores/config';
 import { useDesktopConfigStore } from '@/stores/desktopConfig';
 import { UserTask } from '@/types/task';
@@ -22,6 +23,7 @@ export default function useDriver() {
   const { taskComponentState, setTaskComponentState } = useDesktopConfigStore();
   const { canShowGuide } = useDesktopConfigStore();
   const { installedApps } = useAppStore();
+  const { workspaceInviteCode } = useCallbackStore();
 
   useEffect(() => {
     const fetchUserTasks = async () => {
@@ -51,13 +53,13 @@ export default function useDriver() {
       }
     };
 
-    if (isPC && conf?.guideEnabled && canShowGuide) {
+    if (isPC && conf?.guideEnabled && canShowGuide && !workspaceInviteCode) {
       handleUserGuide();
     } else {
       setDesktopGuide(false);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [conf?.guideEnabled, isPC, canShowGuide]);
+  }, [conf?.guideEnabled, isPC, canShowGuide, workspaceInviteCode]);
 
   const completeGuide = async () => {
     try {
diff --git a/frontend/desktop/src/components/team/WorkspaceToggle.tsx b/frontend/desktop/src/components/team/WorkspaceToggle.tsx
index c9b02ef69bf4..81136db5346e 100644
--- a/frontend/desktop/src/components/team/WorkspaceToggle.tsx
+++ b/frontend/desktop/src/components/team/WorkspaceToggle.tsx
@@ -1,7 +1,6 @@
 import { nsListRequest, switchRequest } from '@/api/namespace';
 import NsListItem from '@/components/team/NsListItem';
 import TeamCenter from '@/components/team/TeamCenter';
-import useAppStore from '@/stores/app';
 import useSessionStore from '@/stores/session';
 import { NSType } from '@/types/team';
 import { AccessTokenPayload } from '@/types/token';
@@ -16,13 +15,12 @@ import { CubeIcon, DesktopExchangeIcon } from '../icons';
 
 export default function WorkspaceToggle() {
   const disclosure = useDisclosure();
-  const { setWorkSpaceId, session } = useSessionStore();
+  const { session } = useSessionStore();
   const { t } = useTranslation();
   const user = session?.user;
   const ns_uid = user?.ns_uid || '';
   const router = useRouter();
   const queryClient = useQueryClient();
-  const { init } = useAppStore();
   const mutation = useMutation({
     mutationFn: switchRequest,
     async onSuccess(data) {
diff --git a/frontend/desktop/src/constants/account.ts b/frontend/desktop/src/constants/account.ts
index 0ccc4f735e71..c41c44de088e 100644
--- a/frontend/desktop/src/constants/account.ts
+++ b/frontend/desktop/src/constants/account.ts
@@ -4,3 +4,8 @@ export const LicenseFrontendKey = 'cloud.sealos.io/license-frontend';
 export const templateDeployKey = 'cloud.sealos.io/deploy-on-sealos';
 
 export const userSystemNamespace = 'user-system' as const;
+
+export enum trackEventName {
+  'dailyLoginFirst' = 'dailyLoginFirst',
+  'signUp' = 'signUp'
+}
diff --git a/frontend/desktop/src/pages/_app.tsx b/frontend/desktop/src/pages/_app.tsx
index 2205a6583b4a..a5847777351c 100644
--- a/frontend/desktop/src/pages/_app.tsx
+++ b/frontend/desktop/src/pages/_app.tsx
@@ -48,4 +48,5 @@ const App = ({ Component, pageProps }: AppProps) => {
     </QueryClientProvider>
   );
 };
+
 export default appWithTranslation(App);
diff --git a/frontend/desktop/src/pages/_document.tsx b/frontend/desktop/src/pages/_document.tsx
index 91869f08cfe1..1a1c9f10283b 100644
--- a/frontend/desktop/src/pages/_document.tsx
+++ b/frontend/desktop/src/pages/_document.tsx
@@ -1,6 +1,6 @@
-import { Head, Html, Main, NextScript } from 'next/document';
-import { ColorModeScript } from '@chakra-ui/react';
 import { theme } from '@/styles/chakraTheme';
+import { ColorModeScript } from '@chakra-ui/react';
+import { Head, Html, Main, NextScript } from 'next/document';
 
 export default function Document() {
   return (
diff --git a/frontend/desktop/src/pages/api/account/enterpriseRealName.ts b/frontend/desktop/src/pages/api/account/enterpriseRealName.ts
new file mode 100644
index 000000000000..b82a2ab6dea8
--- /dev/null
+++ b/frontend/desktop/src/pages/api/account/enterpriseRealName.ts
@@ -0,0 +1,337 @@
+import { jsonRes } from '@/services/backend/response';
+import { enableEnterpriseRealNameAuth } from '@/services/enable';
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { generateAuthenticationToken, verifyAccessToken } from '@/services/backend/auth';
+import { globalPrisma } from '@/services/backend/db/init';
+import { z } from 'zod';
+import { PAYMENTSTATUS } from '@/types/response/enterpriseRealName';
+import { EnterpriseAuthInfo } from '@/types/response/enterpriseRealName';
+import { AdditionalInfo } from '@/types/response/enterpriseRealName';
+import { AccessTokenPayload } from '@/types/token';
+
+type JsonValue = string | number | boolean | object | null;
+
+type RealNameAuthProvider = {
+  id: string;
+  backend: string;
+  authType: string;
+  maxFailedTimes: number;
+  config: JsonValue;
+  createdAt: Date;
+  updatedAt: Date;
+};
+
+type UnionPay3060Config = {
+  api: string;
+};
+
+interface ApiError {
+  detail: any;
+  errorId: string;
+  message: string;
+  timestamp: number;
+  code: string;
+}
+
+interface EnterpriseAuthResponse {
+  subBank: string;
+  transAmt: string;
+  orderId: string;
+  isCharged: boolean;
+  legalPersonName: string;
+  isTransactionSuccess: boolean;
+  key: string;
+  enterpriseName: string;
+  accountCity: string;
+  respCode: string;
+  respMsg: string;
+  accountProv: string;
+  accountBank: string;
+  accountNo: string;
+}
+
+interface ApiResponse {
+  error?: ApiError;
+  data?: EnterpriseAuthResponse;
+  success: boolean;
+}
+
+const schema = z.object({
+  key: z.string().min(1),
+  accountBank: z.string().min(1),
+  accountNo: z.string().min(1),
+  keyName: z.string().min(1),
+  usrName: z.string().min(1),
+  contactInfo: z.string().min(1).regex(/^\d+$/, 'Contact info must contain only numbers')
+});
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (!enableEnterpriseRealNameAuth) {
+    console.error('enterpriseRealNameAuth: enterprise real name authentication not enabled');
+    return jsonRes(res, { code: 503, message: 'Enterprise real name authentication not enabled' });
+  }
+
+  const payload = await verifyAccessToken(req.headers);
+  if (!payload) return jsonRes(res, { code: 401, message: 'Token is invalid' });
+
+  switch (req.method) {
+    case 'GET':
+      return handleGet(req, res, payload.userUid);
+    case 'POST':
+      return handlePost(req, res, payload.userUid, payload);
+    case 'PATCH':
+      return handlePatch(req, res, payload.userUid);
+    default:
+      console.error('enterpriseRealNameAuth: Method not allowed');
+      return jsonRes(res, { code: 405, message: 'Method not allowed' });
+  }
+}
+
+async function handleGet(req: NextApiRequest, res: NextApiResponse, userUid: string) {
+  try {
+    const realNameAuthProvider: RealNameAuthProvider | null =
+      await globalPrisma.realNameAuthProvider.findFirst({
+        where: {
+          backend: 'UNIONPAY',
+          authType: '3060'
+        }
+      });
+
+    if (!realNameAuthProvider) {
+      throw new Error('enterpriseRealNameAuth: Real name authentication provider not found');
+    }
+
+    const info = await globalPrisma.enterpriseRealNameInfo.findUnique({
+      where: { userUid }
+    });
+
+    if (!info || !info.additionalInfo) {
+      return jsonRes(res, {
+        code: 200,
+        data: { remainingAttempts: realNameAuthProvider.maxFailedTimes }
+      });
+    }
+
+    const additionalInfo = info.additionalInfo as unknown as AdditionalInfo;
+
+    const response: EnterpriseAuthInfo = {
+      paymentStatus: additionalInfo.paymentStatus,
+      key: additionalInfo.key,
+      accountBank: additionalInfo.accountBank,
+      accountNo: additionalInfo.accountNo,
+      keyName: additionalInfo.keyName,
+      usrName: additionalInfo.usrName,
+      contactInfo: additionalInfo.contactInfo,
+      remainingAttempts: realNameAuthProvider.maxFailedTimes - (additionalInfo.authTimes || 0)
+    };
+
+    return jsonRes(res, { code: 200, data: response });
+  } catch (error) {
+    console.error('Error fetching enterprise auth info:', error);
+    return jsonRes(res, { code: 500, message: 'Internal server error' });
+  }
+}
+
+async function handlePost(
+  req: NextApiRequest,
+  res: NextApiResponse,
+  userUid: string,
+  payload: AccessTokenPayload
+) {
+  try {
+    const realNameAuthProvider: RealNameAuthProvider | null =
+      await globalPrisma.realNameAuthProvider.findFirst({
+        where: {
+          backend: 'UNIONPAY',
+          authType: '3060'
+        }
+      });
+
+    if (!realNameAuthProvider) {
+      throw new Error('enterpriseRealNameAuth: Real name authentication provider not found');
+    }
+
+    const config: UnionPay3060Config = realNameAuthProvider.config as UnionPay3060Config;
+
+    if (!config) {
+      throw new Error('enterpriseRealNameAuth: Real name authentication configuration not found');
+    }
+
+    const enterpriseRealNameAuthApi = config.api;
+
+    const enterpriseRealName = await globalPrisma.enterpriseRealNameInfo.findUnique({
+      where: { userUid }
+    });
+
+    if (enterpriseRealName && enterpriseRealName.isVerified) {
+      return jsonRes(res, {
+        code: 400,
+        message: 'Enterprise real name authentication has been completed'
+      });
+    }
+
+    if (
+      enterpriseRealName &&
+      enterpriseRealName.additionalInfo &&
+      (enterpriseRealName.additionalInfo as unknown as AdditionalInfo).authTimes >=
+        realNameAuthProvider.maxFailedTimes
+    ) {
+      return jsonRes(res, {
+        code: 400,
+        message: 'Enterprise real name authentication has reached the maximum number of attempts'
+      });
+    }
+
+    const validationResult = schema.safeParse(req.body);
+    if (!validationResult.success) {
+      return jsonRes(res, {
+        code: 400,
+        message: 'Invalid request body',
+        data: validationResult.error.issues
+      });
+    }
+
+    const data = validationResult.data;
+
+    const enterprise = await globalPrisma.enterpriseRealNameInfo.findFirst({
+      where: {
+        enterpriseName: data.keyName,
+        isVerified: true
+      }
+    });
+
+    if (enterprise) {
+      return jsonRes(res, {
+        code: 400,
+        message: 'Enterprise real name information has been used'
+      });
+    }
+
+    const globalToken = generateAuthenticationToken({
+      userUid: payload.userUid,
+      userId: payload.userId,
+      regionUid: payload.regionUid
+    });
+
+    const response = await fetch(enterpriseRealNameAuthApi, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${globalToken}`
+      },
+      cache: 'no-store',
+      body: JSON.stringify({
+        key: data.key,
+        accountBank: data.accountBank,
+        accountNo: data.accountNo,
+        keyName: data.keyName,
+        usrName: data.usrName
+      })
+    });
+
+    const apiResponse: ApiResponse = await response.json();
+
+    if (!apiResponse.success) {
+      return jsonRes(res, {
+        code: 400,
+        message: apiResponse?.error?.message || 'API request failed'
+      });
+    }
+
+    if (!apiResponse.data?.isTransactionSuccess || !apiResponse.data?.transAmt) {
+      return jsonRes(res, {
+        code: 400,
+        message: `request failed, code: ${apiResponse.data?.respCode}, message: ${apiResponse.data?.respMsg}`
+      });
+    }
+
+    if (!response.ok) {
+      throw new Error(`API request failed with status ${response.status}`);
+    }
+
+    await globalPrisma.enterpriseRealNameInfo.upsert({
+      where: { userUid },
+      update: {
+        enterpriseName: apiResponse.data.enterpriseName,
+        isVerified: false,
+        additionalInfo: {
+          paymentStatus: PAYMENTSTATUS.PROCESSING,
+          key: apiResponse.data.key,
+          accountBank: apiResponse.data.accountBank,
+          accountNo: apiResponse.data.accountNo,
+          keyName: apiResponse.data.enterpriseName,
+          usrName: apiResponse.data.legalPersonName,
+          contactInfo: data.contactInfo,
+          transAmt: apiResponse.data.transAmt,
+          authTimes: (enterpriseRealName?.additionalInfo as unknown as AdditionalInfo)?.authTimes
+            ? (enterpriseRealName?.additionalInfo as unknown as AdditionalInfo).authTimes + 1
+            : 1
+        }
+      },
+      create: {
+        userUid,
+        enterpriseName: apiResponse.data.enterpriseName,
+        isVerified: false,
+        additionalInfo: {
+          paymentStatus: PAYMENTSTATUS.PROCESSING,
+          key: apiResponse.data.key,
+          accountBank: apiResponse.data.accountBank,
+          accountNo: apiResponse.data.accountNo,
+          keyName: apiResponse.data.enterpriseName,
+          usrName: apiResponse.data.legalPersonName,
+          contactInfo: data.contactInfo,
+          transAmt: apiResponse.data.transAmt,
+          authTimes: 1
+        }
+      }
+    });
+
+    return jsonRes(res, {
+      code: 200,
+      message: 'Enterprise auth request processed successfully',
+      data: {
+        paymentStatus: PAYMENTSTATUS.PROCESSING
+      }
+    });
+  } catch (error) {
+    console.error('Error processing enterprise auth request:', error);
+    return jsonRes(res, { code: 500, message: 'Internal server error' });
+  }
+}
+
+async function handlePatch(req: NextApiRequest, res: NextApiResponse, userUid: string) {
+  try {
+    const info = await globalPrisma.enterpriseRealNameInfo.findUnique({
+      where: { userUid }
+    });
+
+    if (!info) {
+      return jsonRes(res, { code: 404, message: 'Enterprise auth info not found' });
+    }
+
+    if (info.isVerified) {
+      return jsonRes(res, { code: 400, message: 'Enterprise auth has been completed' });
+    }
+
+    await globalPrisma.enterpriseRealNameInfo.update({
+      where: { userUid },
+      data: {
+        additionalInfo: {
+          ...(info.additionalInfo as object),
+          paymentStatus: PAYMENTSTATUS.CANCEL
+        }
+      }
+    });
+
+    return jsonRes(res, {
+      code: 200,
+      message: 'Payment status updated successfully',
+      data: {
+        paymentStatus: PAYMENTSTATUS.CANCEL
+      }
+    });
+  } catch (error) {
+    console.error('Error updating payment status:', error);
+    return jsonRes(res, { code: 500, message: 'Internal server error' });
+  }
+}
diff --git a/frontend/desktop/src/pages/api/account/enterpriseRealNameAuth.ts b/frontend/desktop/src/pages/api/account/enterpriseRealNameAuth.ts
deleted file mode 100644
index dcbb683ad37f..000000000000
--- a/frontend/desktop/src/pages/api/account/enterpriseRealNameAuth.ts
+++ /dev/null
@@ -1,245 +0,0 @@
-import { jsonRes } from '@/services/backend/response';
-import { enableEnterpriseRealNameAuth } from '@/services/enable';
-import type { NextApiRequest, NextApiResponse } from 'next';
-import { verifyAccessToken } from '@/services/backend/auth';
-import { globalPrisma } from '@/services/backend/db/init';
-import { RealNameOSSConfigType } from '@/types';
-import * as Minio from 'minio';
-import formidable, { Fields, Files, File, Part } from 'formidable';
-import path from 'path';
-import Formidable from 'formidable/Formidable';
-import fs from 'fs/promises';
-
-export const config = {
-  api: {
-    bodyParser: false
-  }
-};
-
-const realNameOSS: RealNameOSSConfigType = global.AppConfig.realNameOSS;
-
-const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
-const ALLOWED_FILE_TYPES = ['image/jpeg', 'image/png', 'application/pdf'];
-
-export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-  if (!enableEnterpriseRealNameAuth) {
-    console.error('enterpriseRealNameAuth: enterprise real name authentication not enabled');
-    return jsonRes(res, { code: 503, message: 'Enterprise real name authentication not enabled' });
-  }
-
-  if (req.method !== 'POST') {
-    console.error('enterpriseRealNameAuth: Method not allowed');
-    return jsonRes(res, { code: 405, message: 'Method not allowed' });
-  }
-
-  const payload = await verifyAccessToken(req.headers);
-  if (!payload) return jsonRes(res, { code: 401, message: 'Token is invalid' });
-
-  if (!realNameOSS) {
-    return jsonRes(res, {
-      code: 500,
-      message: 'Real name authentication oss configuration not found'
-    });
-  }
-
-  try {
-    const userUid = payload.userUid;
-
-    const form = formidable({
-      multiples: false,
-      keepExtensions: true,
-      maxFileSize: MAX_FILE_SIZE,
-      filter: function (part: Part): boolean {
-        return part.mimetype !== null && ALLOWED_FILE_TYPES.includes(part.mimetype);
-      },
-      filename: function (name: string, ext: string, part: Part, form: Formidable): string {
-        const sanitizedName = sanitizeFilename(part.originalFilename || 'unnamed');
-        return sanitizedName;
-      }
-    });
-
-    const formData = await parseFormData(req, form);
-    const { fields, files } = formData;
-
-    const enterpriseName = fields.enterpriseName?.[0];
-
-    if ((enterpriseName && enterpriseName.length < 1) || enterpriseName.length > 20) {
-      return jsonRes(res, {
-        code: 400,
-        message: 'Enterprise name must be between 1 and 20 characters'
-      });
-    }
-
-    if (!files.enterpriseQualification?.[0] || !files.supportingMaterials?.[0]) {
-      return jsonRes(res, {
-        code: 400,
-        message: 'Enterprise qualification and supporting materials are required'
-      });
-    }
-
-    if (
-      files &&
-      files.enterpriseQualification?.[0] &&
-      files.enterpriseQualification?.[0].size > MAX_FILE_SIZE
-    ) {
-      return jsonRes(res, {
-        code: 400,
-        message: 'Enterprise qualification file size exceeds the maximum limit'
-      });
-    }
-
-    if (
-      files &&
-      files.supportingMaterials?.[0] &&
-      files.supportingMaterials?.[0].size > MAX_FILE_SIZE
-    ) {
-      return jsonRes(res, {
-        code: 400,
-        message: 'Supporting materials file size exceeds the maximum limit'
-      });
-    }
-
-    // Check if EnterpriseRealNameInfo exists
-    const existingInfo = await globalPrisma.enterpriseRealNameInfo.findUnique({
-      where: { userUid }
-    });
-
-    if (!existingInfo) {
-      // Create new EnterpriseRealNameInfo
-      const ossPaths = await uploadFiles(userUid, files);
-      await createEnterpriseRealNameInfo(userUid, enterpriseName, ossPaths);
-      return jsonRes(res, {
-        code: 200,
-        message: 'Enterprise real name authentication submitted successfully',
-        data: { status: 'Pending' }
-      });
-    }
-
-    // Handle existing EnterpriseRealNameInfo cases
-    switch (existingInfo.verificationStatus) {
-      case 'Pending':
-        return jsonRes(res, { code: 400, message: 'Authentication is under review' });
-      case 'Success':
-        return jsonRes(res, { code: 400, message: 'Cannot authenticate multiple times' });
-      case 'Failed':
-        // Re-upload files and update EnterpriseRealNameInfo
-        const newOssPaths = await uploadFiles(userUid, files);
-        await updateEnterpriseRealNameInfo(existingInfo.id, enterpriseName, newOssPaths);
-        return jsonRes(res, {
-          code: 200,
-          data: { status: 'Pending' },
-          message: 'Enterprise real name authentication resubmitted successfully'
-        });
-      default:
-        return jsonRes(res, { code: 500, message: 'Invalid verification status' });
-    }
-  } catch (error) {
-    console.error('enterpriseRealNameAuth: Internal error', error);
-    return jsonRes(res, { code: 500, message: 'The server has encountered an error' });
-  }
-}
-
-// Helper functions
-async function parseFormData(req: NextApiRequest, form: Formidable): Promise<any> {
-  return new Promise((resolve, reject) => {
-    form.parse(req, (err: Error, fields: Fields, files: Files) => {
-      if (err) {
-        reject(err);
-      } else {
-        resolve({ fields, files });
-      }
-    });
-  });
-}
-
-function sanitizeFilename(filename: string): string {
-  // Remove any path components
-  const basename = path.basename(filename);
-  // Define a blacklist of malicious characters
-  const blacklist = /[<>:"/\\|?*\x00-\x1F]/g;
-  // Replace blacklisted characters with underscores
-  return basename.replace(blacklist, '_');
-}
-
-async function uploadFiles(userUid: string, files: Files): Promise<string[]> {
-  const minioConfig: Minio.ClientOptions = {
-    endPoint: realNameOSS.endpoint,
-    accessKey: realNameOSS.accessKey,
-    secretKey: realNameOSS.accessKeySecret,
-    useSSL: realNameOSS.ssl
-  };
-  const minioClient = new Minio.Client(minioConfig);
-
-  const filesToUpload = [
-    { file: files.enterpriseQualification?.[0], name: 'enterpriseQualification' },
-    { file: files.supportingMaterials?.[0], name: 'supportingMaterials' }
-  ].filter((item) => item.file !== null);
-
-  const uploadPromises = filesToUpload.map((item) =>
-    uploadFile(minioClient, userUid, item.file!, item.name)
-  );
-
-  return await Promise.all(uploadPromises);
-}
-
-async function uploadFile(
-  minioClient: Minio.Client,
-  userUid: string,
-  file: File,
-  fileType: string
-): Promise<string> {
-  const timestamp = Date.now();
-  const fileName = `${timestamp}_${fileType}_${file.newFilename}`;
-  const filePath = `/${userUid}/${fileName}`;
-  try {
-    await minioClient.fPutObject(realNameOSS.enterpriseRealNameBucket, filePath, file.filepath, {
-      'Content-Type': file.mimetype || 'application/octet-stream'
-    });
-
-    // Check if the file exists before attempting to delete it
-    try {
-      await fs.access(file.filepath);
-      // If no error is thrown, the file exists, so we can delete it
-      await fs.unlink(file.filepath);
-      console.debug(`File ${file.filepath} has been deleted.`);
-    } catch (accessError) {
-      // If an error is thrown, the file doesn't exist
-      console.debug(`File ${file.filepath} does not exist or is not accessible.`);
-    }
-  } catch (error) {
-    console.error('EnterpriseRealNameAuth uploadFile: Error uploading file', error);
-    throw error;
-  }
-
-  return filePath;
-}
-
-async function createEnterpriseRealNameInfo(
-  userUid: string,
-  enterpriseName: string,
-  ossPaths: string[]
-) {
-  await globalPrisma.enterpriseRealNameInfo.create({
-    data: {
-      userUid,
-      enterpriseName: enterpriseName,
-      supportingMaterials: { ossPaths: ossPaths }, // Remaining paths for supportingMaterials
-      verificationStatus: 'Pending'
-    }
-  });
-}
-
-async function updateEnterpriseRealNameInfo(
-  id: string,
-  enterpriseName: string,
-  ossPaths: string[]
-) {
-  await globalPrisma.enterpriseRealNameInfo.update({
-    where: { id },
-    data: {
-      enterpriseName: enterpriseName,
-      supportingMaterials: { ossPaths: ossPaths },
-      verificationStatus: 'Pending'
-    }
-  });
-}
diff --git a/frontend/desktop/src/pages/api/account/enterpriseRealNameVerify.ts b/frontend/desktop/src/pages/api/account/enterpriseRealNameVerify.ts
new file mode 100644
index 000000000000..bf0057224f50
--- /dev/null
+++ b/frontend/desktop/src/pages/api/account/enterpriseRealNameVerify.ts
@@ -0,0 +1,248 @@
+import { jsonRes } from '@/services/backend/response';
+import { enableEnterpriseRealNameAuth } from '@/services/enable';
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { verifyAccessToken } from '@/services/backend/auth';
+import { globalPrisma } from '@/services/backend/db/init';
+import { z } from 'zod';
+import { PAYMENTSTATUS } from '@/types/response/enterpriseRealName';
+import { AdditionalInfo } from '@/types/response/enterpriseRealName';
+import { RealNameAuthProvider } from '@/pages/api/account/faceIdRealNameAuthCallback';
+import { TencentCloudFaceAuthConfig } from '@/pages/api/account/faceIdRealNameAuthCallback';
+import { getInviterInfo } from '@/utils/getInviteInfo';
+
+const schema = z.object({
+  transAmt: z.string().min(1)
+});
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (!enableEnterpriseRealNameAuth) {
+    console.error('enterpriseRealNameVerify: enterprise real name authentication not enabled');
+    return jsonRes(res, { code: 503, message: 'Enterprise real name authentication not enabled' });
+  }
+
+  if (req.method !== 'POST') {
+    console.error('enterpriseRealNameVerify: Method not allowed');
+    return jsonRes(res, { code: 405, message: 'Method not allowed' });
+  }
+
+  const payload = await verifyAccessToken(req.headers);
+  if (!payload) return jsonRes(res, { code: 401, message: 'Token is invalid' });
+
+  const userUid = payload.userUid;
+  const userId = payload.userId;
+
+  const inviteInfo = await getInviterInfo(userId);
+
+  try {
+    const realNameAuthProvider: RealNameAuthProvider | null =
+      await globalPrisma.realNameAuthProvider.findFirst({
+        where: {
+          backend: 'TENCENTCLOUD',
+          authType: 'tcloudFaceAuth'
+        }
+      });
+
+    if (!realNameAuthProvider) {
+      throw new Error('faceidRealNameAuth: Real name authentication provider not found');
+    }
+
+    const config: TencentCloudFaceAuthConfig =
+      realNameAuthProvider.config as TencentCloudFaceAuthConfig;
+
+    if (!config) {
+      throw new Error('faceidRealNameAuth: Real name authentication configuration not found');
+    }
+
+    const realNameAuthReward = config.realNameAuthReward;
+
+    const validationResult = schema.safeParse(req.body);
+    if (!validationResult.success) {
+      return jsonRes(res, {
+        code: 400,
+        message: 'Invalid request body',
+        data: validationResult.error.issues
+      });
+    }
+
+    const { transAmt } = validationResult.data;
+
+    const info = await globalPrisma.enterpriseRealNameInfo.findUnique({
+      where: { userUid: payload.userUid }
+    });
+
+    if (!info || !info.additionalInfo) {
+      return jsonRes(res, {
+        code: 404,
+        data: {
+          authState: 'failed'
+        },
+        message: 'Enterprise auth info not found'
+      });
+    }
+
+    if (info.isVerified) {
+      return jsonRes(res, {
+        code: 400,
+        message: 'Enterprise real name authentication already verified'
+      });
+    }
+
+    const additionalInfo = info.additionalInfo as unknown as AdditionalInfo;
+
+    if (additionalInfo.transAmt !== transAmt) {
+      return jsonRes(res, {
+        code: 200,
+        message: 'transAmt_not_match',
+        data: {
+          authState: 'failed'
+        }
+      });
+    }
+
+    if (realNameAuthReward) {
+      await globalPrisma.$transaction(async (globalPrisma) => {
+        const currentAccount = await globalPrisma.account.findUniqueOrThrow({
+          where: { userUid }
+        });
+
+        if (!currentAccount.balance) {
+          throw new Error('enterpriseRealNameVerify: Account balance not found');
+        }
+
+        const currentActivityBonus = currentAccount.activityBonus || BigInt(0);
+        const realnameReward = BigInt(realNameAuthReward);
+
+        const newActivityBonus = currentActivityBonus + realnameReward;
+        const newBalance = currentAccount.balance + realnameReward;
+
+        const updatedAccount = await globalPrisma.account.update({
+          where: { userUid },
+          data: {
+            activityBonus: newActivityBonus,
+            balance: newBalance
+          }
+        });
+
+        const enterpriseRealNameInfo = await globalPrisma.enterpriseRealNameInfo.update({
+          where: { userUid: payload.userUid },
+          data: {
+            isVerified: true,
+            additionalInfo: {
+              ...additionalInfo,
+              paymentStatus: PAYMENTSTATUS.SUCCESS
+            }
+          }
+        });
+
+        const accountTransaction = await globalPrisma.accountTransaction.create({
+          data: {
+            type: 'REALNAME_AUTH_REWARD',
+            userUid: userUid,
+            balance: realnameReward,
+            balance_before: currentAccount.balance,
+            deduction_balance: 0, // No deduction in this case
+            deduction_balance_before: currentAccount.deduction_balance,
+            message: 'Real name authentication reward',
+            billing_id: enterpriseRealNameInfo.id // You'll need to implement this function
+          }
+        });
+
+        await globalPrisma.userTask.updateMany({
+          where: {
+            userUid,
+            task: {
+              taskType: 'REAL_NAME_AUTH'
+            },
+            status: 'NOT_COMPLETED'
+          },
+          data: {
+            rewardStatus: 'COMPLETED',
+            status: 'COMPLETED',
+            completedAt: new Date()
+          }
+        });
+
+        if (inviteInfo.inviterId && inviteInfo.amount) {
+          const inviterUser = await globalPrisma.user.findUniqueOrThrow({
+            where: { id: inviteInfo.inviterId }
+          });
+
+          if (!inviterUser) {
+            throw new Error('enterpriseRealNameVerify: Inviter user not found');
+          }
+
+          const inviterAccount = await globalPrisma.account.findUniqueOrThrow({
+            where: { userUid: inviterUser.uid }
+          });
+
+          if (!inviterAccount.balance) {
+            throw new Error('enterpriseRealNameVerify: Inviter account balance not found');
+          }
+
+          const currentActivityBonus = inviterAccount.activityBonus || BigInt(0);
+          const realnameInviteReward = inviteInfo.amount;
+
+          const newActivityBonus = currentActivityBonus + realnameInviteReward;
+          const newBalance = inviterAccount.balance + realnameInviteReward;
+
+          await globalPrisma.account.update({
+            where: { userUid: inviterUser.uid },
+            data: {
+              activityBonus: newActivityBonus,
+              balance: newBalance
+            }
+          });
+
+          await globalPrisma.accountTransaction.create({
+            data: {
+              type: 'REALNAME_AUTH_INVITE_REWARD',
+              userUid: inviterUser.uid,
+              balance: realnameInviteReward,
+              balance_before: inviterAccount.balance,
+              deduction_balance: 0, // No deduction in this case
+              deduction_balance_before: inviterAccount.deduction_balance,
+              message: 'Real name authentication invite reward',
+              billing_id: enterpriseRealNameInfo.id // You'll need to implement this function
+            }
+          });
+        }
+
+        return {
+          account: updatedAccount,
+          transaction: accountTransaction,
+          enterpriseRealNameInfo: enterpriseRealNameInfo
+        };
+      });
+
+      return jsonRes(res, {
+        code: 200,
+        data: {
+          authState: 'success',
+          enterpriseRealName: additionalInfo.keyName
+        }
+      });
+    }
+
+    await globalPrisma.enterpriseRealNameInfo.update({
+      where: { userUid: payload.userUid },
+      data: {
+        isVerified: true,
+        additionalInfo: {
+          ...additionalInfo,
+          paymentStatus: PAYMENTSTATUS.SUCCESS
+        }
+      }
+    });
+
+    return jsonRes(res, {
+      code: 200,
+      data: {
+        authState: 'success',
+        enterpriseRealName: additionalInfo.keyName
+      }
+    });
+  } catch (error) {
+    console.error('Error processing verify request:', error);
+    return jsonRes(res, { code: 500, message: 'Internal server error' });
+  }
+}
diff --git a/frontend/desktop/src/pages/api/account/faceIdRealNameAuthCallback.ts b/frontend/desktop/src/pages/api/account/faceIdRealNameAuthCallback.ts
index a91e0aec8c95..3bee1fd161cc 100644
--- a/frontend/desktop/src/pages/api/account/faceIdRealNameAuthCallback.ts
+++ b/frontend/desktop/src/pages/api/account/faceIdRealNameAuthCallback.ts
@@ -7,8 +7,9 @@ import { globalPrisma } from '@/services/backend/db/init';
 import { GetDetectInfoEnhancedResponse } from 'tencentcloud-sdk-nodejs/tencentcloud/services/faceid/v20180301/faceid_models';
 import { RealNameOSSConfigType } from '@/types';
 import { Client, ClientOptions } from 'minio';
+import { getInviterInfo } from '@/utils/getInviteInfo';
 
-type TencentCloudFaceAuthConfig = {
+export type TencentCloudFaceAuthConfig = {
   secretId: string;
   secretKey: string;
   ruleId: string;
@@ -17,7 +18,7 @@ type TencentCloudFaceAuthConfig = {
 
 type JsonValue = string | number | boolean | object | null;
 
-type RealNameAuthProvider = {
+export type RealNameAuthProvider = {
   id: string;
   backend: string;
   authType: string;
@@ -95,6 +96,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     const isFaceRecognitionSuccess = userRealNameFaceAuthInfo.Text?.ErrCode === 0;
 
     const userUid = payload.userUid;
+    const userId = payload.userId;
     const timestamp = Date.now();
 
     // Fetch existing user real name info
@@ -106,6 +108,12 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
       return jsonRes(res, { code: 400, message: 'User real name info not found' });
     }
 
+    if (userRealNameInfo.isVerified) {
+      return jsonRes(res, { code: 400, message: 'User real name info already verified' });
+    }
+
+    const inviteInfo = await getInviterInfo(userId);
+
     let additionalInfo: AdditionalInfo = userRealNameInfo.additionalInfo;
 
     additionalInfo.faceRecognition.callback.isUsed = true;
@@ -147,86 +155,15 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
       additionalInfo.userMaterials.push(videoPath);
     }
 
-    if (isFaceRecognitionSuccess) {
-      if (realNameAuthReward) {
-        await globalPrisma.$transaction(async (globalPrisma) => {
-          const currentAccount = await globalPrisma.account.findUniqueOrThrow({
-            where: { userUid }
-          });
-
-          if (!currentAccount.balance) {
-            throw new Error('faceidRealNameAuth: Account balance not found');
-          }
-
-          const currentActivityBonus = currentAccount.activityBonus || BigInt(0);
-          const rewardBigInt = BigInt(realNameAuthReward);
-
-          const newActivityBonus = currentActivityBonus + rewardBigInt;
-          const newBalance = currentAccount.balance + rewardBigInt;
-
-          const updatedAccount = await globalPrisma.account.update({
-            where: { userUid },
-            data: {
-              activityBonus: newActivityBonus,
-              balance: newBalance
-            }
-          });
-
-          const userRealNameInfo = await globalPrisma.userRealNameInfo.update({
-            where: { userUid },
-            data: {
-              realName: userRealNameFaceAuthInfo.Text?.Name,
-              idCard: userRealNameFaceAuthInfo.Text?.IdCard,
-              isVerified: true,
-              additionalInfo: additionalInfo
-            }
-          });
-
-          const accountTransaction = await globalPrisma.accountTransaction.create({
-            data: {
-              type: 'REALNAME_AUTH_REWARD',
-              userUid: userUid,
-              balance: rewardBigInt,
-              balance_before: currentAccount.balance,
-              deduction_balance: 0, // No deduction in this case
-              deduction_balance_before: currentAccount.deduction_balance,
-              message: 'Real name authentication reward',
-              billing_id: userRealNameInfo.id // You'll need to implement this function
-            }
-          });
-
-          await globalPrisma.userTask.updateMany({
-            where: {
-              userUid,
-              task: {
-                taskType: 'REAL_NAME_AUTH'
-              },
-              status: 'NOT_COMPLETED'
-            },
-            data: {
-              rewardStatus: 'COMPLETED',
-              status: 'COMPLETED',
-              completedAt: new Date()
-            }
-          });
-
-          return {
-            account: updatedAccount,
-            transaction: accountTransaction,
-            userRealNameInfo: userRealNameInfo
-          };
-        });
-      } else {
-        await globalPrisma.userRealNameInfo.update({
-          where: { userUid },
-          data: {
-            realName: userRealNameFaceAuthInfo.Text?.Name,
-            idCard: userRealNameFaceAuthInfo.Text?.IdCard,
-            isVerified: true,
-            additionalInfo: additionalInfo
-          }
-        });
-      }
+    if (!isFaceRecognitionSuccess) {
+      await globalPrisma.userRealNameInfo.update({
+        where: { userUid: userUid },
+        data: {
+          isVerified: false,
+          idVerifyFailedTimes: { increment: 1 },
+          additionalInfo: additionalInfo
+        }
+      });
 
       res.setHeader('Content-Type', 'text/html');
       return res.send(`
@@ -246,17 +183,28 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
             }
             h1 {
               text-align: center;
+              color: #ff0000; /* Red color for error message */
             }
           </style>
         </head>
         <body>
-          <h1>Real Name Authentication Successful</h1>
+          <h1>Real Name Authentication Failed</h1>
         </body>
         </html>
       `);
-    } else {
+    }
+
+    const realnameInfo = await globalPrisma.userRealNameInfo.findFirst({
+      where: {
+        realName: userRealNameFaceAuthInfo.Text?.Name,
+        idCard: userRealNameFaceAuthInfo.Text?.IdCard,
+        isVerified: true
+      }
+    });
+
+    if (realnameInfo) {
       await globalPrisma.userRealNameInfo.update({
-        where: { userUid },
+        where: { userUid: userUid },
         data: {
           isVerified: false,
           idVerifyFailedTimes: { increment: 1 },
@@ -287,11 +235,190 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
           </style>
         </head>
         <body>
-          <h1>Real Name Authentication Failed</h1>
+          <h1>Real name information has been used</h1>
         </body>
         </html>
       `);
     }
+
+    if (realNameAuthReward) {
+      await globalPrisma.$transaction(async (globalPrisma) => {
+        const currentAccount = await globalPrisma.account.findUniqueOrThrow({
+          where: { userUid }
+        });
+
+        if (!currentAccount.balance) {
+          throw new Error('faceidRealNameAuth: Account balance not found');
+        }
+
+        const currentActivityBonus = currentAccount.activityBonus || BigInt(0);
+        const realnameReward = BigInt(realNameAuthReward);
+
+        const newActivityBonus = currentActivityBonus + realnameReward;
+        const newBalance = currentAccount.balance + realnameReward;
+
+        const updatedAccount = await globalPrisma.account.update({
+          where: { userUid },
+          data: {
+            activityBonus: newActivityBonus,
+            balance: newBalance
+          }
+        });
+
+        const userRealNameInfo = await globalPrisma.userRealNameInfo.update({
+          where: { userUid },
+          data: {
+            realName: userRealNameFaceAuthInfo.Text?.Name,
+            idCard: userRealNameFaceAuthInfo.Text?.IdCard,
+            isVerified: true,
+            additionalInfo: additionalInfo
+          }
+        });
+
+        const accountTransaction = await globalPrisma.accountTransaction.create({
+          data: {
+            type: 'REALNAME_AUTH_REWARD',
+            userUid: userUid,
+            balance: realnameReward,
+            balance_before: currentAccount.balance,
+            deduction_balance: 0, // No deduction in this case
+            deduction_balance_before: currentAccount.deduction_balance,
+            message: 'Real name authentication reward',
+            billing_id: userRealNameInfo.id // You'll need to implement this function
+          }
+        });
+
+        await globalPrisma.userTask.updateMany({
+          where: {
+            userUid,
+            task: {
+              taskType: 'REAL_NAME_AUTH'
+            },
+            status: 'NOT_COMPLETED'
+          },
+          data: {
+            rewardStatus: 'COMPLETED',
+            status: 'COMPLETED',
+            completedAt: new Date()
+          }
+        });
+
+        if (inviteInfo.inviterId && inviteInfo.amount) {
+          const inviterUser = await globalPrisma.user.findUniqueOrThrow({
+            where: { id: inviteInfo.inviterId }
+          });
+
+          if (!inviterUser) {
+            throw new Error('faceidRealNameAuth: Inviter user not found');
+          }
+
+          const inviterAccount = await globalPrisma.account.findUniqueOrThrow({
+            where: { userUid: inviterUser.uid }
+          });
+
+          if (!inviterAccount.balance) {
+            throw new Error('faceidRealNameAuth: Inviter account balance not found');
+          }
+
+          const currentActivityBonus = inviterAccount.activityBonus || BigInt(0);
+          const realnameInviteReward = inviteInfo.amount;
+
+          const newActivityBonus = currentActivityBonus + realnameInviteReward;
+          const newBalance = inviterAccount.balance + realnameInviteReward;
+
+          await globalPrisma.account.update({
+            where: { userUid: inviterUser.uid },
+            data: {
+              activityBonus: newActivityBonus,
+              balance: newBalance
+            }
+          });
+
+          await globalPrisma.accountTransaction.create({
+            data: {
+              type: 'REALNAME_AUTH_INVITE_REWARD',
+              userUid: inviterUser.uid,
+              balance: realnameInviteReward,
+              balance_before: inviterAccount.balance,
+              deduction_balance: 0, // No deduction in this case
+              deduction_balance_before: inviterAccount.deduction_balance,
+              message: 'Real name authentication invite reward',
+              billing_id: userRealNameInfo.id // You'll need to implement this function
+            }
+          });
+        }
+
+        return {
+          account: updatedAccount,
+          transaction: accountTransaction,
+          userRealNameInfo: userRealNameInfo
+        };
+      });
+
+      res.setHeader('Content-Type', 'text/html');
+      return res.send(`
+          <!DOCTYPE html>
+          <html lang="en">
+          <head>
+            <meta charset="UTF-8">
+            <meta name="viewport" content="width=device-width, initial-scale=1.0">
+            <title>Real Name Authentication</title>
+            <style>
+              body, html {
+                height: 100%;
+                margin: 0;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+              }
+              h1 {
+                text-align: center;
+              }
+            </style>
+          </head>
+          <body>
+            <h1>Real Name Authentication Successful</h1>
+          </body>
+          </html>
+        `);
+    }
+
+    await globalPrisma.userRealNameInfo.update({
+      where: { userUid },
+      data: {
+        realName: userRealNameFaceAuthInfo.Text?.Name,
+        idCard: userRealNameFaceAuthInfo.Text?.IdCard,
+        isVerified: true,
+        additionalInfo: additionalInfo
+      }
+    });
+
+    res.setHeader('Content-Type', 'text/html');
+    return res.send(`
+        <!DOCTYPE html>
+        <html lang="en">
+        <head>
+          <meta charset="UTF-8">
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          <title>Real Name Authentication</title>
+          <style>
+            body, html {
+              height: 100%;
+              margin: 0;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            }
+            h1 {
+              text-align: center;
+            }
+          </style>
+        </head>
+        <body>
+          <h1>Real Name Authentication Successful</h1>
+        </body>
+        </html>
+      `);
   } catch (error) {
     console.error('faceidRealNameAuth: Internal error');
     if (error instanceof Error) {
@@ -351,16 +478,16 @@ async function getUserRealNameInfo(
     credential: {
       secretId: config.secretId,
       secretKey: config.secretKey
-    },
-    region: '',
-    profile: {
-      signMethod: 'HmacSHA256',
-      httpProfile: {
-        endpoint: 'faceid.tencentcloudapi.com',
-        reqMethod: 'POST',
-        reqTimeout: 30 // Request timeout, default 60s
-      }
     }
+    // region: '',
+    // profile: {
+    //   signMethod: 'HmacSHA256',
+    //   httpProfile: {
+    //     endpoint: 'faceid.tencentcloudapi.com',
+    //     reqMethod: 'POST',
+    //     reqTimeout: 30 // Request timeout, default 60s
+    //   }
+    // }
   });
 
   const params = {
diff --git a/frontend/desktop/src/pages/api/account/generateRealNameQRcodeUri.ts b/frontend/desktop/src/pages/api/account/generateRealNameQRcodeUri.ts
index 3120f8a859ac..d184611722df 100644
--- a/frontend/desktop/src/pages/api/account/generateRealNameQRcodeUri.ts
+++ b/frontend/desktop/src/pages/api/account/generateRealNameQRcodeUri.ts
@@ -179,16 +179,16 @@ async function generateRealNameQRcodeUri(
     credential: {
       secretId: config.secretId,
       secretKey: config.secretKey
-    },
-    region: '',
-    profile: {
-      signMethod: 'HmacSHA256',
-      httpProfile: {
-        endpoint: 'faceid.tencentcloudapi.com',
-        reqMethod: 'POST',
-        reqTimeout: 30 // Request timeout, default 60s
-      }
     }
+    // region: '',
+    // profile: {
+    //   signMethod: 'HmacSHA256',
+    //   httpProfile: {
+    //     endpoint: 'faceid.tencentcloudapi.com',
+    //     reqMethod: 'POST',
+    //     reqTimeout: 30 // Request timeout, default 60s
+    //   }
+    // }
   });
 
   const params = {
diff --git a/frontend/desktop/src/pages/api/auth/info.ts b/frontend/desktop/src/pages/api/auth/info.ts
index cdb11082c915..1532dc4b419b 100644
--- a/frontend/desktop/src/pages/api/auth/info.ts
+++ b/frontend/desktop/src/pages/api/auth/info.ts
@@ -73,7 +73,6 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
       id: string;
       name: string;
       realName?: string;
-      enterpriseVerificationStatus?: string;
       enterpriseRealName?: string;
       userRestrictedLevel?: number;
     } = {
@@ -105,13 +104,16 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         }))
     };
 
-    if (realNameInfo && realNameInfo.isVerified) {
-      info.realName = realNameInfo.realName || undefined;
+    if (realNameInfo && realNameInfo.isVerified && realNameInfo.realName) {
+      info.realName = realNameInfo.realName;
     }
 
-    if (enterpriseRealNameInfo) {
-      info.enterpriseVerificationStatus = enterpriseRealNameInfo.verificationStatus || undefined;
-      info.enterpriseRealName = enterpriseRealNameInfo.enterpriseName || undefined;
+    if (
+      enterpriseRealNameInfo &&
+      enterpriseRealNameInfo.isVerified &&
+      enterpriseRealNameInfo.enterpriseName
+    ) {
+      info.enterpriseRealName = enterpriseRealNameInfo.enterpriseName;
     }
 
     if (restrictedUser) {
diff --git a/frontend/desktop/src/pages/api/desktop/getResource.ts b/frontend/desktop/src/pages/api/desktop/getResource.ts
index 8e569580b538..784281b59754 100644
--- a/frontend/desktop/src/pages/api/desktop/getResource.ts
+++ b/frontend/desktop/src/pages/api/desktop/getResource.ts
@@ -23,6 +23,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     let totalMemoryLimits = 0;
     let totalStorageRequests = 0;
     let runningPodCount = 0;
+    let totalGpuCount = 0;
     let totalPodCount = 0;
 
     for (const pod of result.body.items) {
@@ -40,9 +41,12 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         const limits = container?.resources.limits as {
           cpu: string;
           memory: string;
+          ['nvidia.com/gpu']?: string;
         };
         totalCpuLimits += parseResourceValue(limits.cpu);
         totalMemoryLimits += parseResourceValue(limits.memory);
+
+        totalGpuCount += Number(limits['nvidia.com/gpu'] || 0);
       }
 
       if (!pod?.spec?.volumes) continue;
@@ -65,7 +69,8 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         totalMemory: totalMemoryLimits.toFixed(2),
         totalStorage: totalStorageRequests.toFixed(2),
         runningPodCount,
-        totalPodCount
+        totalPodCount,
+        totalGpuCount
         // result: result.body.items
       }
     });
diff --git a/frontend/desktop/src/pages/api/platform/getAppConfig.ts b/frontend/desktop/src/pages/api/platform/getAppConfig.ts
index 1c74133ba509..617959d8f2f1 100644
--- a/frontend/desktop/src/pages/api/platform/getAppConfig.ts
+++ b/frontend/desktop/src/pages/api/platform/getAppConfig.ts
@@ -1,23 +1,24 @@
+import { getAuthClientConfig } from '@/pages/api/platform/getAuthConfig';
+import { getCloudConfig } from '@/pages/api/platform/getCloudConfig';
+import { getLayoutConfig } from '@/pages/api/platform/getLayoutConfig';
+import {
+  commitTransactionjob,
+  finishTransactionJob,
+  runTransactionjob
+} from '@/services/backend/cronjob';
 import { jsonRes } from '@/services/backend/response';
-import type { NextApiRequest, NextApiResponse } from 'next';
 import {
   AppClientConfigType,
   AuthClientConfigType,
   CloudConfigType,
   CommonClientConfigType,
   DefaultAppClientConfig,
-  LayoutConfigType
+  LayoutConfigType,
+  TrackingConfigType
 } from '@/types/system';
-import { getCloudConfig } from '@/pages/api/platform/getCloudConfig';
-import { getAuthClientConfig } from '@/pages/api/platform/getAuthConfig';
-import { getLayoutConfig } from '@/pages/api/platform/getLayoutConfig';
-import { getCommonClientConfig } from './getCommonConfig';
 import { Cron } from 'croner';
-import {
-  commitTransactionjob,
-  finishTransactionJob,
-  runTransactionjob
-} from '@/services/backend/cronjob';
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { getCommonClientConfig } from './getCommonConfig';
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   const config = await getAppConfig();
@@ -31,7 +32,8 @@ function genResConfig(
   cloudConf: CloudConfigType,
   authConf: AuthClientConfigType,
   commonConf: CommonClientConfigType,
-  layoutConf: LayoutConfigType
+  layoutConf: LayoutConfigType,
+  tracking: Required<TrackingConfigType>
 ): AppClientConfigType {
   return {
     cloud: cloudConf,
@@ -39,7 +41,8 @@ function genResConfig(
     desktop: {
       auth: authConf,
       layout: layoutConf
-    }
+    },
+    tracking: tracking
   };
 }
 
@@ -49,7 +52,12 @@ export async function getAppConfig(): Promise<AppClientConfigType> {
     const authConf = await getAuthClientConfig();
     const commonConf = await getCommonClientConfig();
     const layoutConf = await getLayoutConfig();
-    const conf = genResConfig(cloudConf, authConf, commonConf, layoutConf);
+    const _tracking = global.AppConfig.tracking;
+    const tracking: Required<TrackingConfigType> = {
+      websiteId: _tracking.websiteId || '',
+      hostUrl: _tracking.hostUrl || ''
+    };
+    const conf = genResConfig(cloudConf, authConf, commonConf, layoutConf, tracking);
     if (!global.commitCroner) {
       // console.log('init commit croner');
       global.commitCroner = new Cron('* * * * * *', commitTransactionjob, {
diff --git a/frontend/desktop/src/pages/api/platform/getCommonConfig.ts b/frontend/desktop/src/pages/api/platform/getCommonConfig.ts
index 87733b9937f0..c34c82b3308b 100644
--- a/frontend/desktop/src/pages/api/platform/getCommonConfig.ts
+++ b/frontend/desktop/src/pages/api/platform/getCommonConfig.ts
@@ -6,8 +6,8 @@ import {
   DefaultCommonClientConfig
 } from '@/types/system';
 import { readFileSync } from 'fs';
-import type { NextApiRequest, NextApiResponse } from 'next';
 import yaml from 'js-yaml';
+import type { NextApiRequest, NextApiResponse } from 'next';
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   const config = await getCommonClientConfig();
@@ -18,13 +18,13 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 }
 function genResCommonClientConfig(common: CommonConfigType): CommonClientConfigType {
   return {
+    trackingEnabled: !!common.trackingEnabled,
     enterpriseRealNameAuthEnabled: !!common.enterpriseRealNameAuthEnabled,
     realNameAuthEnabled: !!common.realNameAuthEnabled,
     realNameReward: common.realNameReward || 0,
     guideEnabled: !!common.guideEnabled,
     rechargeEnabled: !!common.rechargeEnabled,
-    cfSiteKey: common.cfSiteKey || '',
-    enterpriseSupportingMaterials: common.enterpriseSupportingMaterials || ''
+    cfSiteKey: common.cfSiteKey || ''
   };
 }
 export async function getCommonClientConfig(): Promise<CommonClientConfigType> {
diff --git a/frontend/desktop/src/pages/index.tsx b/frontend/desktop/src/pages/index.tsx
index 6d74c5787c4c..8c375187ef7c 100644
--- a/frontend/desktop/src/pages/index.tsx
+++ b/frontend/desktop/src/pages/index.tsx
@@ -1,5 +1,6 @@
 import { nsListRequest, switchRequest } from '@/api/namespace';
 import DesktopContent from '@/components/desktop_content';
+import { trackEventName } from '@/constants/account';
 import useAppStore from '@/stores/app';
 import useCallbackStore from '@/stores/callback';
 import { useConfigStore } from '@/stores/config';
@@ -14,6 +15,7 @@ import { switchKubeconfigNamespace } from '@/utils/switchKubeconfigNamespace';
 import { compareFirstLanguages } from '@/utils/tools';
 import { Box, useColorMode } from '@chakra-ui/react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import dayjs from 'dayjs';
 import { jwtDecode } from 'jwt-decode';
 import { isString } from 'lodash';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
@@ -32,13 +34,13 @@ export const MoreAppsContext = createContext<IMoreAppsContext | null>(null);
 
 export default function Home({ sealos_cloud_domain }: { sealos_cloud_domain: string }) {
   const router = useRouter();
-  const { isUserLogin } = useSessionStore();
+  const { firstUse, setFirstUse, isUserLogin } = useSessionStore();
   const { colorMode, toggleColorMode } = useColorMode();
   const init = useAppStore((state) => state.init);
   const setAutoLaunch = useAppStore((state) => state.setAutoLaunch);
   const { autolaunchWorkspaceUid } = useAppStore();
   const { session } = useSessionStore();
-  const { layoutConfig } = useConfigStore();
+  const { layoutConfig, commonConfig, trackingConfig } = useConfigStore();
   const { workspaceInviteCode, setWorkspaceInviteCode } = useCallbackStore();
   const { setCanShowGuide } = useDesktopConfigStore();
 
@@ -78,6 +80,9 @@ export default function Home({ sealos_cloud_domain }: { sealos_cloud_domain: str
     const is_login = isUserLogin();
     const whitelistApps = ['system-template', 'system-fastdeploy'];
     if (!is_login) {
+      // clear firstusetime
+      setFirstUse(null);
+
       const { appkey, appQuery } = parseOpenappQuery((query?.openapp as string) || '');
       // Invited new user
       if (query?.uid && typeof query?.uid === 'string') {
@@ -95,6 +100,7 @@ export default function Home({ sealos_cloud_domain }: { sealos_cloud_domain: str
       if (isString(query?.workspaceUid)) workspaceUid = query.workspaceUid;
       if (appkey && typeof appQuery === 'string')
         setAutoLaunch(appkey, { raw: appQuery }, workspaceUid);
+
       router.replace(destination);
     } else {
       let workspaceUid: string | undefined;
@@ -205,7 +211,31 @@ export default function Home({ sealos_cloud_domain }: { sealos_cloud_domain: str
       return;
     }
   }, [workspaceInviteCode]);
-
+  useEffect(() => {
+    (async (state) => {
+      try {
+        if (
+          commonConfig?.trackingEnabled &&
+          (!firstUse || !dayjs(firstUse).isSame(dayjs(), 'day'))
+        ) {
+          const umami = window.umami;
+          if (!!umami) {
+            const result = await umami.track(trackEventName.dailyLoginFirst, {
+              userId: session?.user.userId!,
+              userUid: session?.user.userUid!
+            });
+            if (result.ok && result.status === 200) {
+              setFirstUse(new Date());
+            } else {
+              console.error('Failed to update first use date');
+            }
+          }
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    })();
+  }, [commonConfig, firstUse]);
   return (
     <Box position={'relative'} overflow={'hidden'} w="100vw" h="100vh">
       <Head>
diff --git a/frontend/desktop/src/services/backend/globalAuth.ts b/frontend/desktop/src/services/backend/globalAuth.ts
index 93790424131b..0ce532ce98fc 100644
--- a/frontend/desktop/src/services/backend/globalAuth.ts
+++ b/frontend/desktop/src/services/backend/globalAuth.ts
@@ -12,7 +12,8 @@ import {
   User,
   UserStatus
 } from 'prisma/global/generated/client';
-import { enableSignUp } from '../enable';
+import { enableSignUp, enableTracking } from '../enable';
+import { trackSignUp } from './tracking';
 
 type TransactionClient = Omit<
   PrismaClient,
@@ -254,7 +255,6 @@ export async function signUpByPassword({
 
       return { user };
     });
-
     return result;
   } catch (error) {
     console.error('globalAuth: Error during sign up:', error);
@@ -329,13 +329,21 @@ export const getGlobalToken = async ({
         password,
         semData
       });
-      result && (user = result.user);
-      if (inviterId && result) {
-        inviteHandler({
-          inviterId: inviterId,
-          inviteeId: result?.user.name,
-          signResult: result
-        });
+      if (!!result) {
+        user = result.user;
+        if (inviterId && result) {
+          inviteHandler({
+            inviterId: inviterId,
+            inviteeId: result?.user.name,
+            signResult: result
+          });
+        }
+        if (enableTracking()) {
+          await trackSignUp({
+            userId: result.user.id,
+            userUid: result.user.uid
+          });
+        }
       }
     } else {
       const result = await signInByPassword({
@@ -356,22 +364,30 @@ export const getGlobalToken = async ({
         avatar_url,
         semData
       });
-      result && (user = result.user);
-      if (inviterId && result) {
-        inviteHandler({
-          inviterId: inviterId,
-          inviteeId: result?.user.name,
-          signResult: result
-        });
-      }
-      if (bdVid && result) {
-        uploadConvertData({ newType: [3], bdVid })
-          .then((res) => {
-            console.log(res);
-          })
-          .catch((err) => {
-            console.log(err);
+      if (result) {
+        user = result.user;
+        if (inviterId) {
+          inviteHandler({
+            inviterId: inviterId,
+            inviteeId: result?.user.name,
+            signResult: result
           });
+        }
+        if (bdVid) {
+          await uploadConvertData({ newType: [3], bdVid })
+            .then((res) => {
+              console.log(res);
+            })
+            .catch((err) => {
+              console.log(err);
+            });
+        }
+        if (enableTracking()) {
+          await trackSignUp({
+            userId: result.user.id,
+            userUid: result.user.uid
+          });
+        }
       }
     } else {
       const result = await signIn({
diff --git a/frontend/desktop/src/services/backend/tracking/index.ts b/frontend/desktop/src/services/backend/tracking/index.ts
new file mode 100644
index 000000000000..edb29b5d5f9f
--- /dev/null
+++ b/frontend/desktop/src/services/backend/tracking/index.ts
@@ -0,0 +1,31 @@
+import { trackEventName } from '@/constants/account';
+import { Umami } from '@umami/node';
+const getUmami = () => {
+  return new Umami({
+    websiteId: global.AppConfig.tracking.websiteId,
+    hostUrl: global.AppConfig.tracking.hostUrl
+  });
+};
+export type TLoginPayload = {
+  userUid: string;
+  userId: string;
+};
+export const trackSignUp = (data: TLoginPayload) => {
+  const umami = getUmami();
+  return umami
+    .track(trackEventName.signUp, data)
+    .then((res) => {
+      console.log('[tracking][signUp][success]');
+    })
+    .catch((e) => {
+      console.error('[tracking][signUp]:', e);
+      return Promise.resolve(null);
+    });
+};
+export const trackDailyLoginFirst = (data: TLoginPayload) => {
+  const umami = getUmami();
+  return umami.track(trackEventName.dailyLoginFirst, data).catch((e) => {
+    console.error('[tracking][dailyLoginFirst]:', e);
+    return Promise.resolve(null);
+  });
+};
diff --git a/frontend/desktop/src/services/enable.ts b/frontend/desktop/src/services/enable.ts
index 2a650da533ec..e08e93ee7c25 100644
--- a/frontend/desktop/src/services/enable.ts
+++ b/frontend/desktop/src/services/enable.ts
@@ -17,6 +17,7 @@ export const getBillingUrl = () => global.AppConfig.desktop.auth.billingUrl || '
 export const getWorkorderUrl = () => global.AppConfig.desktop.auth.workorderUrl || '';
 export const getCvmUrl = () => global.AppConfig.desktop.auth.cloudVitrualMachineUrl || '';
 export const getTeamLimit = () => global.AppConfig.desktop.teamManagement?.maxTeamCount || 50;
+export const enableTracking = () => !!global.AppConfig.common.trackingEnabled;
 export const getTeamInviteLimit = () =>
   global.AppConfig.desktop.teamManagement?.maxTeamMemberCount || 50;
 
diff --git a/frontend/desktop/src/stores/config.ts b/frontend/desktop/src/stores/config.ts
index be7a147fba95..951a9653b604 100644
--- a/frontend/desktop/src/stores/config.ts
+++ b/frontend/desktop/src/stores/config.ts
@@ -1,19 +1,21 @@
+import { getAppConfig } from '@/api/platform';
 import {
+  AuthClientConfigType,
   CloudConfigType,
+  CommonClientConfigType,
   LayoutConfigType,
-  AuthClientConfigType,
-  CommonClientConfigType
+  TrackingConfigType
 } from '@/types';
 import { create } from 'zustand';
 import { devtools } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
-import { getAppConfig } from '@/api/platform';
 
 type State = {
   cloudConfig?: CloudConfigType;
   authConfig?: AuthClientConfigType;
   commonConfig?: CommonClientConfigType;
   layoutConfig?: LayoutConfigType;
+  trackingConfig?: TrackingConfigType;
   initAppConfig: () => Promise<void>;
 };
 
@@ -24,11 +26,12 @@ export const useConfigStore = create<State>()(
       authConfig: undefined,
       commonConfig: undefined,
       layoutConfig: undefined,
-
+      trackingConfig: undefined,
       async initAppConfig() {
         const data = await getAppConfig();
         console.log('initAppConfig', data.data);
         set((state) => {
+          state.trackingConfig = data.data.tracking;
           state.layoutConfig = data.data.desktop.layout;
           state.authConfig = data.data.desktop.auth;
           state.cloudConfig = data.data.cloud;
diff --git a/frontend/desktop/src/stores/session.ts b/frontend/desktop/src/stores/session.ts
index 051e7c50ad77..064e7127c0aa 100644
--- a/frontend/desktop/src/stores/session.ts
+++ b/frontend/desktop/src/stores/session.ts
@@ -13,9 +13,11 @@ type SessionState = {
   token: string;
   provider?: OauthProvider;
   oauth_state: string;
+  firstUse: Date | null;
   setSession: (ss: Session) => void;
   setSessionProp: <T extends keyof Session>(key: T, value: Session[T]) => void;
   delSession: () => void;
+  setFirstUse: (d: Date | null) => void;
   isUserLogin: () => boolean;
   /*
 			when proxy oauth2.0 ,the domainState need to be used 
@@ -26,6 +28,7 @@ type SessionState = {
     action: string;
     statePayload: string[];
   };
+
   setProvider: (provider?: OauthProvider) => void;
   setToken: (token: string) => void;
   lastWorkSpaceId: string;
@@ -37,9 +40,15 @@ const useSessionStore = create<SessionState>()(
     immer((set, get) => ({
       session: undefined,
       provider: undefined,
+      firstUse: null,
       oauth_state: '',
       token: '',
       lastWorkSpaceId: '',
+      setFirstUse(d) {
+        set({
+          firstUse: d
+        });
+      },
       setSession: (ss: Session) => set({ session: ss }),
       setSessionProp: (key: keyof Session, value: any) => {
         set((state) => {
diff --git a/frontend/desktop/src/types/index.ts b/frontend/desktop/src/types/index.ts
index deff17a71ee2..5746e3739978 100644
--- a/frontend/desktop/src/types/index.ts
+++ b/frontend/desktop/src/types/index.ts
@@ -1,18 +1,19 @@
-import { type MongoClient } from 'mongodb';
-import { type AppConfigType } from './system';
+import { Umami } from '@umami/node';
 import { Cron } from 'croner';
+import { type MongoClient } from 'mongodb';
 import { Transporter } from 'nodemailer';
 import SMTPPool from 'nodemailer/lib/smtp-pool';
+import { type AppConfigType } from './system';
 export * from './api';
-export * from './session';
 export * from './app';
 export * from './crd';
+export * from './license';
+export * from './login';
 export * from './payment';
+export * from './region';
+export * from './session';
 export * from './system';
-export * from './login';
 export * from './tools';
-export * from './license';
-export * from './region';
 
 declare global {
   var mongodb: MongoClient | null;
@@ -23,4 +24,5 @@ declare global {
   var WechatAccessToken: string | undefined;
   var WechatExpiresIn: number | undefined;
   var nodemailer: Transporter<SMTPPool.SentMessageInfo> | undefined;
+  var umami: Umami | undefined;
 }
diff --git a/frontend/desktop/src/types/response/enterpriseRealName.ts b/frontend/desktop/src/types/response/enterpriseRealName.ts
new file mode 100644
index 000000000000..a480d2879af2
--- /dev/null
+++ b/frontend/desktop/src/types/response/enterpriseRealName.ts
@@ -0,0 +1,29 @@
+export enum PAYMENTSTATUS {
+  PROCESSING = 'PROCESSING',
+  FAILED = 'FAILED',
+  SUCCESS = 'SUCCESS',
+  CANCEL = 'USER_CANCEL'
+}
+
+export interface EnterpriseAuthInfo {
+  paymentStatus: PAYMENTSTATUS;
+  key: string;
+  accountBank: string;
+  accountNo: string;
+  keyName: string;
+  usrName: string;
+  contactInfo: string;
+  remainingAttempts: number;
+}
+
+export interface AdditionalInfo {
+  paymentStatus: PAYMENTSTATUS;
+  key: string;
+  accountBank: string;
+  accountNo: string;
+  keyName: string;
+  usrName: string;
+  contactInfo: string;
+  transAmt: string;
+  authTimes: number;
+}
diff --git a/frontend/desktop/src/types/session.ts b/frontend/desktop/src/types/session.ts
index 043a45bae711..a8d762d594fa 100644
--- a/frontend/desktop/src/types/session.ts
+++ b/frontend/desktop/src/types/session.ts
@@ -8,7 +8,6 @@ export type OAuthToken = {
 export type UserInfo = {
   readonly userRestrictedLevel?: number;
   readonly realName?: string;
-  readonly enterpriseVerificationStatus?: string;
   readonly enterpriseRealName?: string;
   readonly k8s_username: string;
   readonly name: string;
diff --git a/frontend/desktop/src/types/system.ts b/frontend/desktop/src/types/system.ts
index 2704631a701c..2743e54b39a0 100644
--- a/frontend/desktop/src/types/system.ts
+++ b/frontend/desktop/src/types/system.ts
@@ -9,7 +9,6 @@ export type CloudConfigType = {
 
 export type CommonConfigType = {
   enterpriseRealNameAuthEnabled: boolean;
-  enterpriseSupportingMaterials: string;
   realNameAuthEnabled: boolean;
   realNameReward: number;
   guideEnabled: boolean;
@@ -20,6 +19,7 @@ export type CommonConfigType = {
   objectstorageUrl: string;
   applaunchpadUrl: string;
   dbproviderUrl: string;
+  trackingEnabled: boolean;
 };
 export type CommonClientConfigType = DeepRequired<
   Omit<
@@ -64,7 +64,6 @@ export type LayoutConfigType = {
   customerServiceURL?: string;
   forcedLanguage?: string;
   currencySymbol?: 'shellCoin' | 'cny' | 'usd';
-
   protocol?: ProtocolConfigType;
   common: {
     githubStarEnabled: boolean;
@@ -177,7 +176,19 @@ export type AuthClientConfigType = {
       'cloudVitrualMachineUrl'
     ]
   >
->;
+> & {
+  idp: {
+    sms: {
+      enabled: boolean;
+      ali: {
+        enabled: boolean;
+      };
+      email: {
+        enabled: boolean;
+      };
+    };
+  };
+};
 
 export type JwtConfigType = {
   internal?: string;
@@ -194,6 +205,11 @@ export type DesktopConfigType<T = AuthConfigType> = {
   };
 };
 
+export type TrackingConfigType = {
+  websiteId?: string;
+  hostUrl?: string;
+};
+
 export type RealNameOSSConfigType = {
   accessKey: string;
   accessKeySecret: string;
@@ -209,18 +225,20 @@ export type AppConfigType = {
   common: CommonConfigType;
   database: DatabaseConfigType;
   desktop: DesktopConfigType;
+  tracking: TrackingConfigType;
   realNameOSS: RealNameOSSConfigType;
 };
 
 export type AppClientConfigType = {
   cloud: CloudConfigType;
   common: CommonClientConfigType;
+  tracking: Required<TrackingConfigType>;
   desktop: DesktopConfigType<AuthClientConfigType>;
 };
 
 export const DefaultCommonClientConfig: CommonClientConfigType = {
   enterpriseRealNameAuthEnabled: false,
-  enterpriseSupportingMaterials: '',
+  trackingEnabled: false,
   realNameAuthEnabled: false,
   realNameReward: 0,
   guideEnabled: false,
@@ -309,10 +327,13 @@ export const DefaultAuthClientConfig: AuthClientConfigType = {
   },
   billingToken: ''
 };
-
 export const DefaultAppClientConfig: AppClientConfigType = {
   cloud: DefaultCloudConfig,
   common: DefaultCommonClientConfig,
+  tracking: {
+    websiteId: '',
+    hostUrl: ''
+  },
   desktop: {
     layout: DefaultLayoutConfig,
     auth: DefaultAuthClientConfig
diff --git a/frontend/desktop/src/types/token.ts b/frontend/desktop/src/types/token.ts
index f2852f59b7eb..9486c57b6e43 100644
--- a/frontend/desktop/src/types/token.ts
+++ b/frontend/desktop/src/types/token.ts
@@ -1,6 +1,7 @@
 export type AuthenticationTokenPayload = {
   userUid: string;
   userId: string;
+  regionUid?: string;
 };
 export type AccessTokenPayload = {
   regionUid: string;
diff --git a/frontend/desktop/src/utils/getInviteInfo.ts b/frontend/desktop/src/utils/getInviteInfo.ts
new file mode 100644
index 000000000000..9b2e4b88fa7c
--- /dev/null
+++ b/frontend/desktop/src/utils/getInviteInfo.ts
@@ -0,0 +1,51 @@
+import { AuthConfigType } from '@/types/system';
+interface InviterResponse {
+  code: number;
+  message: string;
+  data?: {
+    inviterId: string;
+    reward: {
+      amount: number;
+    };
+  };
+}
+
+export async function getInviterInfo(
+  inviteeId: string
+): Promise<{ inviterId?: string; amount?: bigint }> {
+  const conf = global.AppConfig?.desktop.auth as AuthConfigType;
+  const inviteEnabled = conf.invite?.enabled || false;
+  const secretKey = conf.invite?.lafSecretKey || '';
+  const baseUrl = conf.invite?.lafBaseURL || '';
+
+  if (!inviteEnabled || !secretKey || !baseUrl) {
+    return {};
+  }
+
+  try {
+    const response = await fetch(`https://${baseUrl}/getInviter`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        inviteeId,
+        secretKey
+      })
+    });
+
+    const result: InviterResponse = await response.json();
+
+    if (result.code !== 200) {
+      return {};
+    }
+
+    return {
+      inviterId: result.data?.inviterId,
+      amount: result.data?.reward?.amount ? BigInt(result.data.reward.amount * 1000000) : BigInt(0)
+    };
+  } catch (error) {
+    console.error('getInviteInfo error:', error);
+    return {};
+  }
+}
diff --git a/frontend/desktop/src/utils/sessionConfig.ts b/frontend/desktop/src/utils/sessionConfig.ts
index c1c44563f6b1..a594900ef845 100644
--- a/frontend/desktop/src/utils/sessionConfig.ts
+++ b/frontend/desktop/src/utils/sessionConfig.ts
@@ -22,7 +22,6 @@ export const sessionConfig = async ({
     user: {
       userRestrictedLevel: infoData.data?.info.userRestrictedLevel || undefined,
       realName: infoData.data?.info.realName || undefined,
-      enterpriseVerificationStatus: infoData.data?.info.enterpriseVerificationStatus || undefined,
       enterpriseRealName: infoData.data?.info.enterpriseRealName || undefined,
       k8s_username: payload.userCrName,
       name: infoData.data?.info.nickname || '',
diff --git a/frontend/packages/ui/src/components/Select/index.tsx b/frontend/packages/ui/src/components/Select/index.tsx
index f75268a28e99..8958a5ab0985 100644
--- a/frontend/packages/ui/src/components/Select/index.tsx
+++ b/frontend/packages/ui/src/components/Select/index.tsx
@@ -54,7 +54,16 @@ const MySelect = (
     }
   });
 
-  const activeMenu = useMemo(() => list.find((item) => item.value === value), [list, value]);
+  const activeMenu = useMemo(() => {
+    const foundItem = list.find((item) => item.value === value);
+    if (!foundItem && value) {
+      return {
+        label: value,
+        value: value
+      };
+    }
+    return foundItem;
+  }, [list, value]);
 
   return (
     <Menu autoSelect={false} isOpen={isOpen} onOpen={onOpen} onClose={onClose}>
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 6e48aa7038fd..5320c887cae6 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -111,6 +111,9 @@ importers:
       '@tanstack/react-query':
         specifier: ^4.35.3
         version: 4.36.1(react-dom@18.2.0)(react@18.2.0)
+      '@umami/node':
+        specifier: ^0.4.0
+        version: 0.4.0
       axios:
         specifier: ^1.5.1
         version: 1.6.2
@@ -135,9 +138,6 @@ importers:
       eslint-config-next:
         specifier: 13.3.0
         version: 13.3.0(eslint@8.38.0)(typescript@5.2.2)
-      formidable:
-        specifier: ^3.5.1
-        version: 3.5.1
       framer-motion:
         specifier: ^10.16.4
         version: 10.16.5(react-dom@18.2.0)(react@18.2.0)
@@ -247,9 +247,6 @@ importers:
       '@testing-library/react':
         specifier: ^14.0.0
         version: 14.1.2(react-dom@18.2.0)(react@18.2.0)
-      '@types/formidable':
-        specifier: ^3.4.5
-        version: 3.4.5
       '@types/jest':
         specifier: ^29.5.10
         version: 29.5.10
@@ -283,6 +280,9 @@ importers:
       '@types/react-dom':
         specifier: 18.0.11
         version: 18.0.11
+      '@types/umami-browser':
+        specifier: ^2.3.2
+        version: 2.3.2
       '@types/uuid':
         specifier: ^9.0.4
         version: 9.0.7
@@ -482,6 +482,9 @@ importers:
 
   providers/aiproxy:
     dependencies:
+      '@hookform/resolvers':
+        specifier: ^3.9.0
+        version: 3.9.0(react-hook-form@7.48.2)
       '@sealos/ui':
         specifier: workspace:*
         version: link:../../packages/ui
@@ -500,6 +503,12 @@ importers:
       date-fns:
         specifier: ^2.30.0
         version: 2.30.0
+      downshift:
+        specifier: ^9.0.8
+        version: 9.0.8(react@18.2.0)
+      echarts:
+        specifier: ^5.4.3
+        version: 5.4.3
       i18next:
         specifier: ^23.11.5
         version: 23.12.1
@@ -520,7 +529,7 @@ importers:
         version: 9.0.2
       next:
         specifier: 14.2.5
-        version: 14.2.5(@babel/core@7.23.5)(react-dom@18.2.0)(react@18.2.0)(sass@1.69.5)
+        version: 14.2.5(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: ^18
         version: 18.2.0
@@ -533,9 +542,15 @@ importers:
       react-hook-form:
         specifier: ^7.46.2
         version: 7.48.2(react@18.2.0)
+      react-json-view:
+        specifier: ^1.21.3
+        version: 1.21.3(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)
       sealos-desktop-sdk:
         specifier: workspace:*
         version: link:../../packages/client-sdk
+      zod:
+        specifier: ^3.23.8
+        version: 3.23.8
       zustand:
         specifier: ^4.5.4
         version: 4.5.4(@types/react@18.2.37)(immer@10.1.1)(react@18.2.0)
@@ -612,6 +627,9 @@ importers:
       '@tanstack/react-query':
         specifier: ^4.35.3
         version: 4.36.1(react-dom@18.2.0)(react@18.2.0)
+      '@tanstack/react-table':
+        specifier: ^8.10.7
+        version: 8.10.7(react-dom@18.2.0)(react@18.2.0)
       ansi_up:
         specifier: ^5.2.1
         version: 5.2.1
@@ -621,6 +639,9 @@ importers:
       base64-stream:
         specifier: ^1.0.0
         version: 1.0.0
+      date-fns:
+        specifier: ^2.30.0
+        version: 2.30.0
       dayjs:
         specifier: ^1.11.10
         version: 1.11.10
@@ -678,6 +699,9 @@ importers:
       react:
         specifier: 18.2.0
         version: 18.2.0
+      react-day-picker:
+        specifier: ^8.8.2
+        version: 8.9.1(date-fns@2.30.0)(react@18.2.0)
       react-dom:
         specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
@@ -1475,6 +1499,9 @@ importers:
       '@prisma/client':
         specifier: ^5.10.2
         version: 5.10.2(prisma@5.10.2)
+      '@sealos/driver':
+        specifier: workspace:^
+        version: link:../../packages/driver
       '@sealos/ui':
         specifier: workspace:^
         version: link:../../packages/ui
@@ -5526,6 +5553,13 @@ packages:
     dependencies:
       regenerator-runtime: 0.14.0
 
+  /@babel/runtime@7.26.0:
+    resolution: {integrity: sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      regenerator-runtime: 0.14.0
+    dev: false
+
   /@babel/template@7.22.15:
     resolution: {integrity: sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==}
     engines: {node: '>=6.9.0'}
@@ -10513,6 +10547,10 @@ packages:
     resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
     dev: false
 
+  /@types/umami-browser@2.3.2:
+    resolution: {integrity: sha512-Y/6dm2EDSw57x3nxFz0X4WoK0ykeWKEGJnrKVGSXE6r6LlibPcKbVr5jPcmEfwya9l2PWzzIlOXRVH/7RU/dUQ==}
+    dev: true
+
   /@types/unist@2.0.10:
     resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==}
     dev: false
@@ -10869,6 +10907,10 @@ packages:
       eslint-visitor-keys: 3.4.3
     dev: true
 
+  /@umami/node@0.4.0:
+    resolution: {integrity: sha512-pyphprbiF7KiDSc+SWZ4/rVM8B5vU27zIiFfEPj2lEqczpI4xAKSp+dM3tlzyRAWJL32fcbCfAaLGhJZQV13Rg==}
+    dev: false
+
   /@ungap/structured-clone@1.2.0:
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
     dev: true
@@ -11776,6 +11818,10 @@ packages:
   /balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
+  /base16@1.0.0:
+    resolution: {integrity: sha512-pNdYkNPiJUnEhnfXV56+sQy8+AaPcG3POZAUnwr4EeqCUZFz4u2PePbo3e5Gj4ziYPCWGUZT9RHisvJKnwFuBQ==}
+    dev: false
+
   /base64-arraybuffer@0.1.2:
     resolution: {integrity: sha512-ewBKKVVPIl78B26mYQHYlaxR7NydMiD/GxwLNIwTAfLIE4xhN2Gxcy30//azq5UrejXjzGpWjcBu3NUJxzMMzg==}
     engines: {node: '>= 0.6.0'}
@@ -12422,6 +12468,10 @@ packages:
     resolution: {integrity: sha512-nadqwNxghAGTamwIqQSG433W6OADZx2vCo3UXHNrzTRHK/htu+7+L0zhjEoaeaQVNAi3YgqWDv8+tzf0hRfR+A==}
     dev: false
 
+  /compute-scroll-into-view@3.1.0:
+    resolution: {integrity: sha512-rj8l8pD4bJ1nx+dAkMhV1xB5RuZEyVysfxJqB1pRchh1KVvwOv9b7CGB8ZfjTImVv2oF+sYMUkMZq6Na5Ftmbg==}
+    dev: false
+
   /concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
@@ -12587,6 +12637,14 @@ packages:
     hasBin: true
     dev: false
 
+  /cross-fetch@3.1.8:
+    resolution: {integrity: sha512-cvA+JwZoU0Xq+h6WkMvAUqPEYy92Obet6UdKLfW60qn99ftItKjB5T+BkyWOFWe2pUyfQ+IJHmpOTznqk1M6Kg==}
+    dependencies:
+      node-fetch: 2.7.0
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
   /cross-fetch@4.0.0:
     resolution: {integrity: sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g==}
     dependencies:
@@ -13273,6 +13331,19 @@ packages:
       minimatch: 3.1.2
     dev: false
 
+  /downshift@9.0.8(react@18.2.0):
+    resolution: {integrity: sha512-59BWD7+hSUQIM1DeNPLirNNnZIO9qMdIK5GQ/Uo8q34gT4B78RBlb9dhzgnh0HfQTJj4T/JKYD8KoLAlMWnTsA==}
+    peerDependencies:
+      react: '>=16.12.0'
+    dependencies:
+      '@babel/runtime': 7.26.0
+      compute-scroll-into-view: 3.1.0
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-is: 18.2.0
+      tslib: 2.6.2
+    dev: false
+
   /drange@1.1.1:
     resolution: {integrity: sha512-pYxfDYpued//QpnLIm4Avk7rsNtAtQkUES2cwAYSvD/wd2pKD71gN2Ebj3e7klzXwjocvE8c5vx/1fxwpqmSxA==}
     engines: {node: '>=4'}
@@ -14299,7 +14370,7 @@ packages:
       debug: 3.2.7
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.13.1)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.0)(eslint@8.57.0)
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.13.1)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.0)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -15436,6 +15507,32 @@ packages:
       bser: 2.1.1
     dev: true
 
+  /fbemitter@3.0.0:
+    resolution: {integrity: sha512-KWKaceCwKQU0+HPoop6gn4eOHk50bBv/VxjJtGMfwmJt3D29JpN4H4eisCtIPA+a8GVBam+ldMMpMjJUvpDyHw==}
+    dependencies:
+      fbjs: 3.0.5
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
+  /fbjs-css-vars@1.0.2:
+    resolution: {integrity: sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==}
+    dev: false
+
+  /fbjs@3.0.5:
+    resolution: {integrity: sha512-ztsSx77JBtkuMrEypfhgc3cI0+0h+svqeie7xHbh1k/IKdcydnvadp/mUaGgjAOXQmQSxsqgaRhS3q9fy+1kxg==}
+    dependencies:
+      cross-fetch: 3.1.8
+      fbjs-css-vars: 1.0.2
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      promise: 7.3.1
+      setimmediate: 1.0.5
+      ua-parser-js: 1.0.39
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
   /fecha@4.2.3:
     resolution: {integrity: sha512-OP2IUU6HeYKJi3i0z4A19kHMQoLVs4Hc+DPqqxI2h/DPZHTm/vjsfC6P0b4jCMy14XizLBqvndQ+UilD7707Jw==}
     dev: false
@@ -15538,6 +15635,18 @@ packages:
   /flatted@3.2.9:
     resolution: {integrity: sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==}
 
+  /flux@4.0.4(react@18.2.0):
+    resolution: {integrity: sha512-NCj3XlayA2UsapRpM7va6wU1+9rE5FIL7qoMcmxWHRzbp0yujihMBm9BBHZ1MDIk5h5o2Bl6eGiCe8rYELAmYw==}
+    peerDependencies:
+      react: ^15.0.2 || ^16.0.0 || ^17.0.0
+    dependencies:
+      fbemitter: 3.0.0
+      fbjs: 3.0.5
+      react: 18.2.0
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
   /fmin@0.0.2:
     resolution: {integrity: sha512-sSi6DzInhl9d8yqssDfGZejChO8d2bAGIpysPsvYsxFe898z89XhCZg6CPNV3nhUhFefeC/AXZK2bAJxlBjN6A==}
     dependencies:
@@ -17999,9 +18108,17 @@ packages:
     resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
     dev: false
 
+  /lodash.curry@4.1.1:
+    resolution: {integrity: sha512-/u14pXGviLaweY5JI0IUzgzF2J6Ne8INyzAZjImcryjgkZ+ebruBxy2/JaOOkTqScddcYtakjhSaeemV8lR0tA==}
+    dev: false
+
   /lodash.debounce@4.0.8:
     resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
 
+  /lodash.flow@3.5.0:
+    resolution: {integrity: sha512-ff3BX/tSioo+XojX4MOsOMhJw0nZoUEF011LX8g8d3gvjVbxd89cCio4BCXronjxcTUIJUoqKEUA+n4CqvvRPw==}
+    dev: false
+
   /lodash.includes@4.3.0:
     resolution: {integrity: sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==}
     dev: false
@@ -18096,6 +18213,7 @@ packages:
   /lru-cache@6.0.0:
     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
     engines: {node: '>=10'}
+    requiresBuild: true
     dependencies:
       yallist: 4.0.0
 
@@ -19515,6 +19633,48 @@ packages:
       - babel-plugin-macros
     dev: false
 
+  /next@14.2.5(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-0f8aRfBVL+mpzfBjYfQuLWh2WyAwtJXCRfkPF4UJ5qd2YwrHczsrSzXU4tRMV0OAxR8ZJZWPFn6uhSC56UTsLA==}
+    engines: {node: '>=18.17.0'}
+    hasBin: true
+    peerDependencies:
+      '@opentelemetry/api': ^1.1.0
+      '@playwright/test': ^1.41.2
+      react: ^18.2.0
+      react-dom: ^18.2.0
+      sass: ^1.3.0
+    peerDependenciesMeta:
+      '@opentelemetry/api':
+        optional: true
+      '@playwright/test':
+        optional: true
+      sass:
+        optional: true
+    dependencies:
+      '@next/env': 14.2.5
+      '@swc/helpers': 0.5.5
+      busboy: 1.6.0
+      caniuse-lite: 1.0.30001594
+      graceful-fs: 4.2.11
+      postcss: 8.4.31
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      styled-jsx: 5.1.1(react@18.2.0)
+    optionalDependencies:
+      '@next/swc-darwin-arm64': 14.2.5
+      '@next/swc-darwin-x64': 14.2.5
+      '@next/swc-linux-arm64-gnu': 14.2.5
+      '@next/swc-linux-arm64-musl': 14.2.5
+      '@next/swc-linux-x64-gnu': 14.2.5
+      '@next/swc-linux-x64-musl': 14.2.5
+      '@next/swc-win32-arm64-msvc': 14.2.5
+      '@next/swc-win32-ia32-msvc': 14.2.5
+      '@next/swc-win32-x64-msvc': 14.2.5
+    transitivePeerDependencies:
+      - '@babel/core'
+      - babel-plugin-macros
+    dev: false
+
   /node-abi@3.54.0:
     resolution: {integrity: sha512-p7eGEiQil0YUV3ItH4/tBb781L5impVmmx2E9FRKF7d18XXzp4PGT2tdYMFY6wQqgxD0IwNZOiSJ0/K0fSi/OA==}
     engines: {node: '>=10'}
@@ -20252,6 +20412,12 @@ packages:
     resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
     dev: false
 
+  /promise@7.3.1:
+    resolution: {integrity: sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==}
+    dependencies:
+      asap: 2.0.6
+    dev: false
+
   /prompts@2.4.2:
     resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
     engines: {node: '>= 6'}
@@ -20306,6 +20472,10 @@ packages:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
 
+  /pure-color@1.3.0:
+    resolution: {integrity: sha512-QFADYnsVoBMw1srW7OVKEYjG+MbIa49s54w1MA1EDY6r2r/sTcKKYqRX1f4GYvnXP7eN/Pe9HFcX+hwzmrXRHA==}
+    dev: false
+
   /pure-rand@6.0.4:
     resolution: {integrity: sha512-LA0Y9kxMYv47GIPJy6MI84fqTd2HmYZI83W/kM/SkKfDlajnZYfmXFTxkbY+xSBPkLJxltMa9hIkmdc29eguMA==}
     dev: true
@@ -20971,6 +21141,15 @@ packages:
       - prop-types
     dev: false
 
+  /react-base16-styling@0.6.0:
+    resolution: {integrity: sha512-yvh/7CArceR/jNATXOKDlvTnPKPmGZz7zsenQ3jUwLzHkNUR0CvY3yGYJbWJ/nnxsL8Sgmt5cO3/SILVuPO6TQ==}
+    dependencies:
+      base16: 1.0.0
+      lodash.curry: 4.1.1
+      lodash.flow: 3.5.0
+      pure-color: 1.3.0
+    dev: false
+
   /react-clientside-effect@1.2.6(react@18.2.0):
     resolution: {integrity: sha512-XGGGRQAKY+q25Lz9a/4EPqom7WRjz3z9R2k4jhVKA/puQFH/5Nt27vFZYql4m4NVNdUvX8PS3O7r/Zzm7cjUlg==}
     peerDependencies:
@@ -21145,6 +21324,23 @@ packages:
   /react-is@18.2.0:
     resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
 
+  /react-json-view@1.21.3(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-13p8IREj9/x/Ye4WI/JpjhoIwuzEgUAtgJZNBJckfzJt1qyh24BdTm6UQNGnyTq9dapQdrqvquZTo3dz1X6Cjw==}
+    peerDependencies:
+      react: ^17.0.0 || ^16.3.0 || ^15.5.4
+      react-dom: ^17.0.0 || ^16.3.0 || ^15.5.4
+    dependencies:
+      flux: 4.0.4(react@18.2.0)
+      react: 18.2.0
+      react-base16-styling: 0.6.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-lifecycles-compat: 3.0.4
+      react-textarea-autosize: 8.5.6(@types/react@18.2.37)(react@18.2.0)
+    transitivePeerDependencies:
+      - '@types/react'
+      - encoding
+    dev: false
+
   /react-lifecycles-compat@3.0.4:
     resolution: {integrity: sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==}
     dev: false
@@ -21262,6 +21458,20 @@ packages:
       refractor: 3.6.0
     dev: false
 
+  /react-textarea-autosize@8.5.6(@types/react@18.2.37)(react@18.2.0):
+    resolution: {integrity: sha512-aT3ioKXMa8f6zHYGebhbdMD2L00tKeRX1zuVuDx9YQK/JLLRSaSxq3ugECEmUB9z2kvk6bFSIoRHLkkUv0RJiw==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    dependencies:
+      '@babel/runtime': 7.26.0
+      react: 18.2.0
+      use-composed-ref: 1.4.0(@types/react@18.2.37)(react@18.2.0)
+      use-latest: 1.3.0(@types/react@18.2.37)(react@18.2.0)
+    transitivePeerDependencies:
+      - '@types/react'
+    dev: false
+
   /react-universal-interface@0.6.2(react@18.2.0)(tslib@2.6.2):
     resolution: {integrity: sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==}
     peerDependencies:
@@ -22683,6 +22893,23 @@ packages:
       react: 18.2.0
     dev: false
 
+  /styled-jsx@5.1.1(react@18.2.0):
+    resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==}
+    engines: {node: '>= 12.0.0'}
+    peerDependencies:
+      '@babel/core': '*'
+      babel-plugin-macros: '*'
+      react: '>= 16.8.0 || 17.x.x || ^18.0.0-0'
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      babel-plugin-macros:
+        optional: true
+    dependencies:
+      client-only: 0.0.1
+      react: 18.2.0
+    dev: false
+
   /stylis@4.2.0:
     resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==}
     dev: false
@@ -23379,6 +23606,11 @@ packages:
     resolution: {integrity: sha512-xV8kqRKM+jhMvcHWUKthV9fNebIzrNy//2O9ZwWcfiBFR5f25XVZPLlEajk/sf3Ra15V92isyQqnIEXRDaZWEA==}
     dev: false
 
+  /ua-parser-js@1.0.39:
+    resolution: {integrity: sha512-k24RCVWlEcjkdOxYmVJgeD/0a1TiSpqLg+ZalVGV9lsnr4yqu0w7tX/x2xX6G4zpkgQnRf89lxuZ1wsbjXM8lw==}
+    hasBin: true
+    dev: false
+
   /uglify-js@2.8.29:
     resolution: {integrity: sha512-qLq/4y2pjcU3vhlhseXGGJ7VbFO4pBANu0kwl8VCa9KEI0V8VfZIx2Fy3w01iSTA/pGwKZSmu/+I4etLNDdt5w==}
     engines: {node: '>=0.8.0'}
@@ -23593,6 +23825,19 @@ packages:
       tslib: 2.6.2
     dev: false
 
+  /use-composed-ref@1.4.0(@types/react@18.2.37)(react@18.2.0):
+    resolution: {integrity: sha512-djviaxuOOh7wkj0paeO1Q/4wMZ8Zrnag5H6yBvzN7AKKe8beOaED9SF5/ByLqsku8NP4zQqsvM2u3ew/tJK8/w==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.2.37
+      react: 18.2.0
+    dev: false
+
   /use-intl@3.17.2(react@18.2.0):
     resolution: {integrity: sha512-9lPgt41nS8x4AYCLfIC9VKCmamnVxzPM2nze7lpp/I1uaSSQvIz5MQpYUFikv08cMUsCwAWahU0e+arHInpdcw==}
     peerDependencies:
@@ -23603,6 +23848,33 @@ packages:
       react: 18.2.0
     dev: false
 
+  /use-isomorphic-layout-effect@1.2.0(@types/react@18.2.37)(react@18.2.0):
+    resolution: {integrity: sha512-q6ayo8DWoPZT0VdG4u3D3uxcgONP3Mevx2i2b0434cwWBoL+aelL1DzkXI6w3PhTZzUeR2kaVlZn70iCiseP6w==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.2.37
+      react: 18.2.0
+    dev: false
+
+  /use-latest@1.3.0(@types/react@18.2.37)(react@18.2.0):
+    resolution: {integrity: sha512-mhg3xdm9NaM8q+gLT8KryJPnRFOz1/5XPBhmDEVZK1webPzDjrPk7f/mbpeLqTgB9msytYWANxgALOCJKnLvcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.2.37
+      react: 18.2.0
+      use-isomorphic-layout-effect: 1.2.0(@types/react@18.2.37)(react@18.2.0)
+    dev: false
+
   /use-sidecar@1.1.2(@types/react@18.2.37)(react@18.2.0):
     resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==}
     engines: {node: '>=10'}
diff --git a/frontend/providers/aiproxy/api/platform.ts b/frontend/providers/aiproxy/api/platform.ts
index 2f83f5ecd23c..a64ba9064fb1 100644
--- a/frontend/providers/aiproxy/api/platform.ts
+++ b/frontend/providers/aiproxy/api/platform.ts
@@ -1,25 +1,124 @@
-import { KeysSearchResponse } from '@/app/api/get-keys/route'
-import { QueryParams, SearchResponse } from '@/app/api/get-logs/route'
-import { QueryParams as KeysQueryParams } from '@/app/api/get-keys/route'
-import { GET, POST, DELETE } from '@/utils/request'
-import { ModelPrice } from '@/types/backend'
+import { GET, POST, DELETE, PUT } from '@/utils/frontend/request'
+import { ChannelQueryParams, GetChannelsResponse } from '@/app/api/admin/channel/route'
+import { ChannelStatus, CreateChannelRequest } from '@/types/admin/channels/channelInfo'
+import { ApiResp } from '@/types/api'
+import { GetOptionResponse } from '@/app/api/admin/option/route'
+import { BatchOptionData } from '@/types/admin/option'
+import { GetEnabledModelsResponse } from '@/app/api/models/enabled/route'
+import { GetTokensQueryParams, GetTokensResponse } from '@/app/api/user/token/route'
+import { TokenInfo } from '@/types/user/token'
+import { UserLogSearchResponse } from '@/app/api/user/log/route'
+import { UserLogQueryParams } from '@/app/api/user/log/route'
+import { GlobalLogQueryParams, GlobalLogSearchResponse } from '@/app/api/admin/log/route'
+import { GetAllChannelEnabledModelsResponse } from '@/app/api/models/builtin/channel/route'
+import { GetDefaultModelAndModeMappingResponse } from '@/app/api/models/default/route'
+import { GetChannelTypeNamesResponse } from '@/app/api/admin/channel/type-name/route'
+import { GroupQueryParams, GroupStatus } from '@/types/admin/group'
+import { GroupSearchResponse } from '@/app/api/admin/group/route'
+import { GetAllChannelResponse } from '@/app/api/admin/channel/all/route'
+import { DashboardQueryParams } from '@/app/api/user/dashboard/route'
+import { DashboardResponse } from '@/types/user/dashboard'
+import { UserLogDetailResponse } from '@/app/api/user/log/detail/[log_id]/route'
 
 export const initAppConfig = () =>
-  GET<{ aiproxyBackend: string; currencySymbol: 'shellCoin' | 'cny' | 'usd' }>(
-    '/api/init-app-config'
-  )
+  GET<{
+    aiproxyBackend: string
+    currencySymbol: 'shellCoin' | 'cny' | 'usd'
+    docUrl: string
+    isInvitationActive: boolean
+    invitationUrl: string
+  }>('/api/init-app-config')
 
-export const getModels = () => GET<string[]>('/api/get-models')
+// <user>
+export const getEnabledMode = () => GET<GetEnabledModelsResponse['data']>('/api/models/enabled')
 
-export const getModelPrices = () => GET<ModelPrice[]>('/api/get-mode-price')
+// log
+export const getUserLogs = (params: UserLogQueryParams) =>
+  GET<UserLogSearchResponse['data']>('/api/user/log', params)
 
-export const getLogs = (params: QueryParams) => GET<SearchResponse['data']>('/api/get-logs', params)
+export const getUserLogDetail = (log_id: number) =>
+  GET<UserLogDetailResponse['data']>(`/api/user/log/detail/${log_id}`)
 
-export const getKeys = (params: KeysQueryParams) =>
-  GET<KeysSearchResponse['data']>('/api/get-keys', params)
+// token
+export const getTokens = (params: GetTokensQueryParams) =>
+  GET<GetTokensResponse['data']>('/api/user/token', params)
 
-export const createKey = (name: string) => POST('/api/create-key', { name })
+export const createToken = (name: string) =>
+  POST<ApiResp<TokenInfo>['data']>('/api/user/token', { name })
 
-export const deleteKey = (id: number) => DELETE(`/api/delete-key/${id}`)
+export const deleteToken = (id: number) => DELETE(`/api/user/token/${id}`)
 
-export const updateKey = (id: number, status: number) => POST(`/api/update-key/${id}`, { status })
+export const updateToken = (id: number, status: number) =>
+  POST<ApiResp>(`/api/user/token/${id}`, { status: status })
+
+// dashboard
+export const getDashboardData = (params: DashboardQueryParams) =>
+  GET<DashboardResponse['data']>('/api/user/dashboard', params)
+// ------------------------------------------------------------
+// <admin>
+
+export const getChannels = (params: ChannelQueryParams) =>
+  GET<GetChannelsResponse['data']>('/api/admin/channel', params)
+
+// channel
+export const createChannel = (params: CreateChannelRequest) =>
+  POST<ApiResp>('/api/admin/channel', params)
+
+export const updateChannel = (params: CreateChannelRequest, id: string) =>
+  PUT<ApiResp>(`/api/admin/channel/${id}`, params)
+
+export const updateChannelStatus = (id: string, status: ChannelStatus) =>
+  POST<ApiResp>(`/api/admin/channel/${id}/status`, { status })
+
+export const getChannelTypeNames = () =>
+  GET<GetChannelTypeNamesResponse['data']>('/api/admin/channel/type-name')
+
+export const getAllChannels = () => GET<GetAllChannelResponse['data']>('/api/admin/channel/all')
+
+export const deleteChannel = (id: string) => DELETE(`/api/admin/channel/${id}`)
+
+export const uploadChannels = (formData: FormData) =>
+  POST<ApiResp>('/api/admin/channel/upload', formData, {
+    headers: {
+      // Don't set Content-Type header here, it will be automatically set with the correct boundary
+    }
+  })
+
+// channel built-in support models and default model default mode mapping
+export const getChannelBuiltInSupportModels = () =>
+  GET<GetAllChannelEnabledModelsResponse['data']>('/api/models/builtin/channel')
+
+export const getChannelDefaultModelAndDefaultModeMapping = () =>
+  GET<GetDefaultModelAndModeMappingResponse['data']>('/api/models/default')
+
+// option
+export const getOption = () => GET<GetOptionResponse['data']>('/api/admin/option')
+
+export const updateOption = (params: { key: string; value: string }) =>
+  PUT<ApiResp>(`/api/admin/option/`, params)
+
+export const batchOption = (params: BatchOptionData) =>
+  PUT<ApiResp>(`/api/admin/option/batch`, params)
+
+export const uploadOptions = (formData: FormData) =>
+  POST<ApiResp>('/api/admin/option/upload', formData, {
+    headers: {
+      // Don't set Content-Type header here, it will be automatically set with the correct boundary
+    }
+  })
+
+// log
+export const getGlobalLogs = (params: GlobalLogQueryParams) =>
+  GET<GlobalLogSearchResponse['data']>('/api/admin/log', params)
+
+// group
+export const getGroups = (params: GroupQueryParams) =>
+  GET<GroupSearchResponse['data']>('/api/admin/group', params)
+
+export const updateGroupStatus = (id: string, status: GroupStatus) =>
+  POST<ApiResp>(`/api/admin/group/${id}/status`, { status })
+
+export const updateGroupQpm = (id: string, qpm: number) =>
+  POST<ApiResp>(`/api/admin/group/${id}/qpm`, { qpm })
+
+export const deleteGroup = (id: string) => DELETE(`/api/admin/group/${id}`)
diff --git a/frontend/providers/aiproxy/app/[lng]/(admin)/dashboard/components/ChannelTable.tsx b/frontend/providers/aiproxy/app/[lng]/(admin)/dashboard/components/ChannelTable.tsx
new file mode 100644
index 000000000000..db14c632bb82
--- /dev/null
+++ b/frontend/providers/aiproxy/app/[lng]/(admin)/dashboard/components/ChannelTable.tsx
@@ -0,0 +1,750 @@
+'use client'
+import {
+  Checkbox,
+  Box,
+  Flex,
+  Table,
+  TableContainer,
+  Tbody,
+  Td,
+  Text,
+  Th,
+  Thead,
+  Tr,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  useDisclosure,
+  Spinner
+} from '@chakra-ui/react'
+import {
+  Column,
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable
+} from '@tanstack/react-table'
+import { useTranslationClientSide } from '@/app/i18n/client'
+import { useI18n } from '@/providers/i18n/i18nContext'
+import { ChannelInfo, ChannelStatus, ChannelType } from '@/types/admin/channels/channelInfo'
+import { useQueryClient, useMutation, useQuery } from '@tanstack/react-query'
+import { useState, useMemo, useEffect } from 'react'
+import {
+  deleteChannel,
+  getChannels,
+  getChannelTypeNames,
+  updateChannelStatus
+} from '@/api/platform'
+import SwitchPage from '@/components/common/SwitchPage'
+import UpdateChannelModal from './UpdateChannelModal'
+import { useMessage } from '@sealos/ui'
+import { QueryKey } from '@/types/query-key'
+import { downloadJson } from '@/utils/common'
+
+export default function ChannelTable({
+  exportData
+}: {
+  exportData: (data: ChannelInfo[]) => void
+}) {
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const { lng } = useI18n()
+  const { t } = useTranslationClientSide(lng, 'common')
+  const [operationType, setOperationType] = useState<'create' | 'update'>('update')
+  const [channelInfo, setChannelInfo] = useState<ChannelInfo | undefined>(undefined)
+  const [total, setTotal] = useState(0)
+  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(10)
+
+  const [selectedChannels, setSelectedChannels] = useState<ChannelInfo[]>([])
+
+  useEffect(() => {
+    exportData(selectedChannels)
+  }, [selectedChannels])
+
+  const { message } = useMessage({
+    warningBoxBg: 'var(--Yellow-50, #FFFAEB)',
+    warningIconBg: 'var(--Yellow-500, #F79009)',
+    warningIconFill: 'white',
+    successBoxBg: 'var(--Green-50, #EDFBF3)',
+    successIconBg: 'var(--Green-600, #039855)',
+    successIconFill: 'white'
+  })
+
+  const queryClient = useQueryClient()
+
+  const { isLoading: isChannelTypeNamesLoading, data: channelTypeNames } = useQuery({
+    queryKey: [QueryKey.GetChannelTypeNames],
+    queryFn: () => getChannelTypeNames()
+  })
+
+  const { data, isLoading: isChannelsLoading } = useQuery({
+    queryKey: [QueryKey.GetChannels, page, pageSize],
+    queryFn: () => getChannels({ page, perPage: pageSize }),
+    refetchOnReconnect: true,
+    onSuccess(data) {
+      setTotal(data?.total || 0)
+    }
+  })
+
+  const updateChannelStatusMutation = useMutation(
+    ({ id, status }: { id: string; status: number }) => updateChannelStatus(id, status),
+    {
+      onSuccess() {
+        message({
+          status: 'success',
+          title: t('channel.updateSuccess'),
+          isClosable: true,
+          duration: 2000,
+          position: 'top'
+        })
+        queryClient.invalidateQueries([QueryKey.GetChannels])
+        queryClient.invalidateQueries([QueryKey.GetChannelTypeNames])
+      },
+      onError(err: any) {
+        message({
+          status: 'warning',
+          title: t('channel.updateFailed'),
+          description: err?.message || t('channel.updateFailed'),
+          isClosable: true,
+          position: 'top'
+        })
+      }
+    }
+  )
+  const deleteChannelMutation = useMutation(({ id }: { id: string }) => deleteChannel(id), {
+    onSuccess() {
+      message({
+        status: 'success',
+        title: t('channel.deleteSuccess'),
+        isClosable: true,
+        duration: 2000,
+        position: 'top'
+      })
+      queryClient.invalidateQueries([QueryKey.GetChannels])
+      queryClient.invalidateQueries([QueryKey.GetChannelTypeNames])
+    },
+    onError(err: any) {
+      message({
+        status: 'warning',
+        title: t('channel.deleteFailed'),
+        description: err?.message || t('channel.deleteFailed'),
+        isClosable: true,
+        position: 'top'
+      })
+    }
+  })
+
+  // Update the button click handlers in the table actions column:
+  const handleStatusUpdate = (id: string, currentStatus: number) => {
+    const newStatus =
+      currentStatus === ChannelStatus.ChannelStatusDisabled
+        ? ChannelStatus.ChannelStatusEnabled
+        : ChannelStatus.ChannelStatusDisabled
+    updateChannelStatusMutation.mutate({ id, status: newStatus })
+  }
+
+  const columnHelper = createColumnHelper<ChannelInfo>()
+
+  const handleHeaderCheckboxChange = (isChecked: boolean) => {
+    if (isChecked) {
+      setSelectedChannels(data?.channels || [])
+    } else {
+      setSelectedChannels([])
+    }
+  }
+
+  const handleRowCheckboxChange = (channel: ChannelInfo, isChecked: boolean) => {
+    if (isChecked) {
+      setSelectedChannels([...selectedChannels, channel])
+    } else {
+      setSelectedChannels(selectedChannels.filter((c) => c.id !== channel.id))
+    }
+  }
+
+  const handleExportRow = (channel: ChannelInfo) => {
+    const channels = [channel]
+    const filename = `channel_${channels[0].id}_${new Date().toISOString()}.json`
+    downloadJson(channels, filename)
+  }
+
+  const columns = [
+    columnHelper.accessor((row) => row.id, {
+      id: 'id',
+      header: () => (
+        <Flex display="inline-flex" alignItems="center" gap="16px">
+          <Checkbox
+            width="16px"
+            height="16px"
+            borderRadius="4px"
+            colorScheme="grayModern"
+            isChecked={
+              data?.channels &&
+              data.channels.length > 0 &&
+              selectedChannels.length === data.channels.length
+            }
+            onChange={(e) => handleHeaderCheckboxChange(e.target.checked)}
+            sx={{
+              '.chakra-checkbox__control': {
+                width: '16px',
+                height: '16px',
+                border: '1px solid',
+                borderColor: 'grayModern.300',
+                background: 'grayModern.100',
+                transition: 'all 0.2s ease',
+                _checked: {
+                  background: 'grayModern.500',
+                  borderColor: 'grayModern.500'
+                }
+              }
+            }}
+          />
+          <Text
+            color="grayModern.600"
+            fontFamily="PingFang SC"
+            fontSize="12px"
+            fontWeight={500}
+            lineHeight="16px"
+            letterSpacing="0.5px">
+            {t('channels.id')}
+          </Text>
+        </Flex>
+      ),
+      cell: (info) => (
+        <Flex display="inline-flex" alignItems="center" gap="16px">
+          <Checkbox
+            width="16px"
+            height="16px"
+            borderRadius="4px"
+            colorScheme="grayModern"
+            isChecked={selectedChannels.some((c) => c.id === info.getValue())}
+            onChange={(e) => handleRowCheckboxChange(info.row.original, e.target.checked)}
+            sx={{
+              '.chakra-checkbox__control': {
+                width: '16px',
+                height: '16px',
+                border: '1px solid',
+                borderColor: 'grayModern.300',
+                background: 'white',
+                _checked: {
+                  background: 'grayModern.500',
+                  borderColor: 'grayModern.500'
+                }
+              }
+            }}
+          />
+          <Text
+            color="grayModern.600"
+            fontFamily="PingFang SC"
+            fontSize="12px"
+            fontWeight={500}
+            lineHeight="16px"
+            letterSpacing="0.5px">
+            {info.getValue()}
+          </Text>
+        </Flex>
+      )
+    }),
+    columnHelper.accessor((row) => row.name, {
+      id: 'name',
+      header: () => (
+        <Text
+          color="grayModern.600"
+          fontFamily="PingFang SC"
+          fontSize="12px"
+          fontWeight={500}
+          lineHeight="16px"
+          letterSpacing="0.5px">
+          {t('channels.name')}
+        </Text>
+      ),
+      cell: (info) => (
+        <Text
+          color="grayModern.600"
+          fontFamily="PingFang SC"
+          fontSize="12px"
+          fontWeight={500}
+          lineHeight="16px"
+          letterSpacing="0.5px">
+          {info.getValue()}
+        </Text>
+      )
+    }),
+    columnHelper.accessor((row) => row.type, {
+      id: 'type',
+      header: () => (
+        <Text
+          color="grayModern.600"
+          fontFamily="PingFang SC"
+          fontSize="12px"
+          fontWeight={500}
+          lineHeight="16px"
+          letterSpacing="0.5px">
+          {t('channels.type')}
+        </Text>
+      ),
+      cell: (info) => (
+        <Text
+          color="grayModern.600"
+          fontFamily="PingFang SC"
+          fontSize="12px"
+          fontWeight={500}
+          lineHeight="16px"
+          letterSpacing="0.5px">
+          {channelTypeNames?.[String(info.getValue()) as ChannelType]}
+        </Text>
+      )
+    }),
+    columnHelper.accessor((row) => row.request_count, {
+      id: 'request_count',
+      header: () => (
+        <Text
+          color="grayModern.600"
+          fontFamily="PingFang SC"
+          fontSize="12px"
+          fontWeight={500}
+          lineHeight="16px"
+          letterSpacing="0.5px">
+          {t('channels.requestCount')}
+        </Text>
+      ),
+      cell: (info) => (
+        <Text
+          color="grayModern.600"
+          fontFamily="PingFang SC"
+          fontSize="12px"
+          fontWeight={500}
+          lineHeight="16px"
+          letterSpacing="0.5px">
+          {info.getValue()}
+        </Text>
+      )
+    }),
+    columnHelper.accessor((row) => row.status, {
+      id: 'status',
+      header: () => (
+        <Text
+          color="grayModern.600"
+          fontFamily="PingFang SC"
+          fontSize="12px"
+          fontWeight={500}
+          lineHeight="16px"
+          letterSpacing="0.5px">
+          {t('channels.status')}
+        </Text>
+      ),
+      cell: (info) => {
+        const status = info.getValue()
+        let statusText = ''
+        let statusColor = ''
+
+        switch (status) {
+          case ChannelStatus.ChannelStatusEnabled:
+            statusText = t('keystatus.enabled')
+            statusColor = 'green.600'
+            break
+          case ChannelStatus.ChannelStatusDisabled:
+            statusText = t('keystatus.disabled')
+            statusColor = 'red.600'
+            break
+          case ChannelStatus.ChannelStatusAutoDisabled:
+            statusText = t('channelStatus.autoDisabled')
+            statusColor = 'orange.500'
+            break
+          default:
+            statusText = t('keystatus.unknown')
+            statusColor = 'gray.500'
+        }
+
+        return (
+          <Text
+            color={statusColor}
+            fontFamily="PingFang SC"
+            fontSize="12px"
+            fontWeight={500}
+            lineHeight="16px"
+            letterSpacing="0.5px">
+            {statusText}
+          </Text>
+        )
+      }
+    }),
+
+    columnHelper.display({
+      id: 'actions',
+      header: () => (
+        <Text
+          color="grayModern.600"
+          fontFamily="PingFang SC"
+          fontSize="12px"
+          fontWeight={500}
+          lineHeight="16px"
+          letterSpacing="0.5px">
+          {t('channels.action')}
+        </Text>
+      ),
+      cell: (info) => (
+        <Menu>
+          <MenuButton
+            display="inline-flex"
+            p="4px"
+            alignItems="center"
+            gap="6px"
+            borderRadius="6px"
+            transition="all 0.2s"
+            _hover={{ bg: 'gray.100' }}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none">
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M6.66663 3.33333C6.66663 2.59695 7.26358 2 7.99996 2C8.73634 2 9.33329 2.59695 9.33329 3.33333C9.33329 4.06971 8.73634 4.66667 7.99996 4.66667C7.26358 4.66667 6.66663 4.06971 6.66663 3.33333ZM6.66663 8C6.66663 7.26362 7.26358 6.66667 7.99996 6.66667C8.73634 6.66667 9.33329 7.26362 9.33329 8C9.33329 8.73638 8.73634 9.33333 7.99996 9.33333C7.26358 9.33333 6.66663 8.73638 6.66663 8ZM6.66663 12.6667C6.66663 11.9303 7.26358 11.3333 7.99996 11.3333C8.73634 11.3333 9.33329 11.9303 9.33329 12.6667C9.33329 13.403 8.73634 14 7.99996 14C7.26358 14 6.66663 13.403 6.66663 12.6667Z"
+                fill="#485264"
+              />
+            </svg>
+          </MenuButton>
+          <MenuList
+            minW="88px"
+            w="88px"
+            p="6px"
+            gap="2px"
+            alignItems="flex-start"
+            bg="white"
+            borderRadius="6px"
+            boxShadow="0px 4px 10px 0px rgba(19, 51, 107, 0.10), 0px 0px 1px 0px rgba(19, 51, 107, 0.10)">
+            {/* <MenuItem
+              display="flex"
+              p="6px 4px"
+              alignItems="center"
+              gap="8px"
+              alignSelf="stretch"
+              borderRadius="4px"
+              color="grayModern.600"
+              _hover={{
+                bg: 'rgba(17, 24, 36, 0.05)',
+                color: 'brightBlue.600'
+              }}
+              onClick={() => console.log('Export', info.row.original.id)}>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none">
+                <path
+                  d="M9.47739 2.2602C9.50277 2.21437 9.56866 2.21437 9.59403 2.2602L10.2438 3.43359C10.2498 3.44453 10.2588 3.45355 10.2698 3.45962L11.4432 4.10934C11.489 4.13472 11.489 4.20061 11.4432 4.22598L10.2698 4.87571C10.2588 4.88177 10.2498 4.89079 10.2438 4.90173L9.59403 6.07512C9.56866 6.12095 9.50277 6.12095 9.47739 6.07512L8.82767 4.90173C8.82161 4.89079 8.81258 4.88177 8.80164 4.87571L7.62825 4.22598C7.58242 4.20061 7.58242 4.13472 7.62825 4.10934L8.80164 3.45962C8.81258 3.45355 8.82161 3.44453 8.82767 3.43359L9.47739 2.2602Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M2.84715 2.83856C3.21164 2.47407 3.80259 2.47407 4.16708 2.83856L13.5095 12.1809C13.8739 12.5454 13.8739 13.1364 13.5095 13.5009C13.145 13.8654 12.554 13.8654 12.1895 13.5009L2.84715 4.15849C2.48266 3.79401 2.48266 3.20305 2.84715 2.83856Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M4.26066 8.92065C4.23528 8.87482 4.16939 8.87482 4.14401 8.92065L3.49429 10.094C3.48823 10.105 3.47921 10.114 3.46826 10.1201L2.29488 10.7698C2.24905 10.7952 2.24905 10.8611 2.29488 10.8864L3.46826 11.5362C3.47921 11.5422 3.48823 11.5512 3.49429 11.5622L4.14401 12.7356C4.16939 12.7814 4.23528 12.7814 4.26066 12.7356L4.91038 11.5622C4.91644 11.5512 4.92546 11.5422 4.93641 11.5362L6.1098 10.8864C6.15563 10.8611 6.15563 10.7952 6.1098 10.7698L4.93641 10.1201C4.92546 10.114 4.91644 10.105 4.91038 10.094L4.26066 8.92065Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M2.23669 6.87438C2.21065 6.84835 2.21065 6.80614 2.23669 6.7801L2.8096 6.20719C2.83564 6.18115 2.87785 6.18115 2.90389 6.20719L3.4768 6.7801C3.50283 6.80614 3.50283 6.84835 3.4768 6.87438L2.90389 7.4473C2.87785 7.47333 2.83564 7.47333 2.8096 7.4473L2.23669 6.87438Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M11.5622 7.44054C11.5362 7.46657 11.5362 7.50878 11.5622 7.53482L12.1352 8.10773C12.1612 8.13377 12.2034 8.13377 12.2294 8.10773L12.8023 7.53482C12.8284 7.50878 12.8284 7.46657 12.8023 7.44054L12.2294 6.86762C12.2034 6.84159 12.1612 6.84159 12.1352 6.86762L11.5622 7.44054Z"
+                  fill="currentColor"
+                />
+              </svg>
+              <Text
+                fontFamily="PingFang SC"
+                fontSize="12px"
+                fontStyle="normal"
+                fontWeight="500"
+                lineHeight="16px"
+                letterSpacing="0.5px">
+                {t('channels.test')}
+              </Text>
+            </MenuItem> */}
+            <MenuItem
+              display="flex"
+              p="6px 4px"
+              alignItems="center"
+              gap="8px"
+              alignSelf="stretch"
+              borderRadius="4px"
+              color="grayModern.600"
+              _hover={{
+                bg: 'rgba(17, 24, 36, 0.05)',
+                color:
+                  info.row.original.status === ChannelStatus.ChannelStatusEnabled
+                    ? '#D92D20'
+                    : 'brightBlue.600'
+              }}
+              onClick={() =>
+                handleStatusUpdate(String(info.row.original.id), info.row.original.status)
+              }>
+              {info.row.original.status === ChannelStatus.ChannelStatusEnabled ? (
+                <>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="none">
+                    <path
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      d="M3.63017 4.57294C2.88892 5.5168 2.44686 6.70677 2.44686 8C2.44686 11.0669 4.9331 13.5532 8.00004 13.5532C9.29326 13.5532 10.4832 13.1111 11.4271 12.3699L3.63017 4.57294ZM4.57298 3.63013L12.3699 11.4271C13.1112 10.4832 13.5532 9.29322 13.5532 8C13.5532 4.93306 11.067 2.44681 8.00004 2.44681C6.70682 2.44681 5.51684 2.88887 4.57298 3.63013ZM1.11353 8C1.11353 4.19668 4.19672 1.11348 8.00004 1.11348C11.8034 1.11348 14.8866 4.19668 14.8866 8C14.8866 11.8033 11.8034 14.8865 8.00004 14.8865C4.19672 14.8865 1.11353 11.8033 1.11353 8Z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                  <Text
+                    fontFamily="PingFang SC"
+                    fontSize="12px"
+                    fontStyle="normal"
+                    fontWeight="500"
+                    lineHeight="16px"
+                    letterSpacing="0.5px">
+                    {t('channels.disable')}
+                  </Text>
+                </>
+              ) : (
+                <>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="none">
+                    <path
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      d="M5.79427 11.5962L10.4323 8.98988C11.1347 8.59516 11.5697 8.34899 11.8659 8.1453C11.9632 8.07842 12.0235 8.03024 12.0586 8.00006C12.0235 7.96988 11.9632 7.92169 11.8659 7.85482C11.5697 7.65113 11.1347 7.40495 10.4323 7.01024L5.79426 4.4039C5.09214 4.00934 4.65523 3.76552 4.3252 3.61737C4.18814 3.55585 4.10581 3.52842 4.06506 3.51662C4.04193 3.52371 4.02176 3.53393 4.00487 3.5458C3.99613 3.58816 3.98409 3.6599 3.97362 3.771C3.94094 4.1177 3.93933 4.60263 3.93933 5.39372L3.93933 10.6064C3.93933 11.3975 3.94094 11.8824 3.97362 12.2291C3.98409 12.3402 3.99613 12.412 4.00487 12.4543C4.02176 12.4662 4.04193 12.4764 4.06506 12.4835C4.10581 12.4717 4.18814 12.4443 4.3252 12.3827C4.65523 12.2346 5.09214 11.9908 5.79427 11.5962ZM13.4344 7.32001C13.2073 6.82372 12.5309 6.44358 11.178 5.68331L6.53993 3.07697C5.18701 2.31669 4.51056 1.93656 3.95547 1.99334C3.4713 2.04287 3.03146 2.29004 2.74531 2.6734C2.41724 3.1129 2.41724 3.87317 2.41724 5.39372L2.41724 10.6064C2.41724 12.1269 2.41724 12.8872 2.74531 13.3267C3.03146 13.7101 3.4713 13.9572 3.95547 14.0068C4.51055 14.0636 5.18702 13.6834 6.53994 12.9231L11.178 10.3168C12.5309 9.55654 13.2073 9.1764 13.4344 8.68011C13.6324 8.24723 13.6324 7.75289 13.4344 7.32001Z"
+                      fill="currentcolor"
+                    />
+                  </svg>
+                  <Text
+                    fontFamily="PingFang SC"
+                    fontSize="12px"
+                    fontStyle="normal"
+                    fontWeight="500"
+                    lineHeight="16px"
+                    letterSpacing="0.5px">
+                    {t('channels.enable')}
+                  </Text>
+                </>
+              )}
+            </MenuItem>
+            <MenuItem
+              display="flex"
+              p="6px 4px"
+              alignItems="center"
+              gap="8px"
+              alignSelf="stretch"
+              borderRadius="4px"
+              color="grayModern.600"
+              _hover={{
+                bg: 'rgba(17, 24, 36, 0.05)',
+                color: 'brightBlue.600'
+              }}
+              onClick={() => {
+                setOperationType('update')
+                setChannelInfo(info.row.original)
+                onOpen()
+              }}>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none">
+                <path
+                  d="M12.0523 2.93262L13.3722 4.25256L14.2789 3.34585C14.4462 3.17856 14.5299 3.0949 14.5773 3.00621C14.6844 2.80608 14.6844 2.56569 14.5773 2.36557C14.5299 2.27687 14.4462 2.19323 14.2789 2.02594C14.1116 1.85864 14.028 1.77497 13.9393 1.72752C13.7391 1.62045 13.4987 1.62045 13.2986 1.72752C13.2099 1.77497 13.1263 1.85862 12.959 2.02592L12.0523 2.93262Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M7.04104 10.4281C6.99727 10.4309 6.94313 10.4309 6.87317 10.4309H6.30799C6.15331 10.4309 6.07597 10.4309 6.0171 10.4003C5.9675 10.3745 5.92705 10.3341 5.90128 10.2845C5.8707 10.2256 5.8707 10.1483 5.8707 9.9936V9.42304C5.8707 9.26836 5.8707 9.19102 5.90128 9.13215C5.9046 9.12575 5.90817 9.1195 5.91198 9.11341C5.95109 9.0338 6.03139 8.9535 6.17161 8.81328L11.188 3.79689L12.5079 5.11682L7.49154 10.1332C7.32748 10.2973 7.24544 10.3793 7.15057 10.4093C7.11488 10.4206 7.07802 10.4269 7.04104 10.4281Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M5.62978 1.94104C5.00856 1.94103 4.50132 1.94103 4.08949 1.97523C3.66341 2.01061 3.28008 2.08603 2.92343 2.27129C2.38767 2.5496 1.95084 2.98643 1.67254 3.52218C1.48727 3.87884 1.41186 4.26216 1.37647 4.68826C1.34227 5.10009 1.34228 5.60732 1.34229 6.22854V10.3859C1.34228 11.0072 1.34227 11.5144 1.37647 11.9262C1.41186 12.3523 1.48727 12.7357 1.67254 13.0923C1.95084 13.6281 2.38767 14.0649 2.92343 14.3432C3.28008 14.5285 3.66341 14.6039 4.0895 14.6393C4.50134 14.6735 5.00858 14.6735 5.62983 14.6735H9.78716C10.4084 14.6735 10.9156 14.6735 11.3275 14.6393C11.7536 14.6039 12.1369 14.5285 12.4936 14.3432C13.0293 14.0649 13.4661 13.6281 13.7444 13.0923C13.9297 12.7357 14.0051 12.3523 14.0405 11.9263C14.0747 11.5144 14.0747 11.0072 14.0747 10.386V7.69404C14.0747 7.32585 13.7762 7.02737 13.408 7.02737C13.0398 7.02737 12.7414 7.32585 12.7414 7.69404V10.3575C12.7414 11.0141 12.7408 11.4658 12.7118 11.8159C12.6833 12.158 12.6312 12.3431 12.5612 12.4777C12.4094 12.7699 12.1712 13.0082 11.8789 13.16C11.7443 13.2299 11.5593 13.2821 11.2171 13.3105C10.867 13.3396 10.4153 13.3401 9.7587 13.3401H5.65828C5.00167 13.3401 4.54998 13.3396 4.19985 13.3105C3.8577 13.2821 3.67268 13.2299 3.53806 13.16C3.24583 13.0082 3.00756 12.7699 2.85576 12.4777C2.78583 12.3431 2.73365 12.158 2.70523 11.8159C2.67615 11.4658 2.67562 11.0141 2.67562 10.3575V6.25704C2.67562 5.60043 2.67615 5.14873 2.70523 4.7986C2.73365 4.45645 2.78583 4.27143 2.85576 4.13681C3.00756 3.84459 3.24583 3.60631 3.53806 3.45451C3.67268 3.38458 3.8577 3.3324 4.19984 3.30399C4.54997 3.27491 5.00165 3.27437 5.65826 3.27437H8.34949C8.71768 3.27437 9.01616 2.9759 9.01616 2.60771C9.01616 2.23952 8.71768 1.94104 8.34949 1.94104L5.62978 1.94104Z"
+                  fill="currentColor"
+                />
+              </svg>
+              <Text
+                fontFamily="PingFang SC"
+                fontSize="12px"
+                fontStyle="normal"
+                fontWeight="500"
+                lineHeight="16px"
+                letterSpacing="0.5px">
+                {t('channels.edit')}
+              </Text>
+            </MenuItem>
+            <MenuItem
+              display="flex"
+              p="6px 4px"
+              alignItems="center"
+              gap="8px"
+              alignSelf="stretch"
+              borderRadius="4px"
+              color="grayModern.600"
+              _hover={{
+                bg: 'rgba(17, 24, 36, 0.05)',
+                color: 'brightBlue.600'
+              }}
+              onClick={() => handleExportRow(info.row.original)}>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none">
+                <path
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M7.52851 1.52851C7.78886 1.26816 8.21097 1.26816 8.47132 1.52851L11.138 4.19518C11.3983 4.45553 11.3983 4.87764 11.138 5.13799C10.8776 5.39834 10.4555 5.39834 10.1952 5.13799L8.66659 3.60939V9.99992C8.66659 10.3681 8.36811 10.6666 7.99992 10.6666C7.63173 10.6666 7.33325 10.3681 7.33325 9.99992V3.60939L5.80466 5.13799C5.54431 5.39834 5.1222 5.39834 4.86185 5.13799C4.6015 4.87764 4.6015 4.45553 4.86185 4.19518L7.52851 1.52851ZM1.99992 7.33325C2.36811 7.33325 2.66659 7.63173 2.66659 7.99992V10.7999C2.66659 11.371 2.6671 11.7592 2.69162 12.0592C2.7155 12.3515 2.75878 12.501 2.81191 12.6052C2.93974 12.8561 3.14372 13.0601 3.3946 13.1879C3.49887 13.2411 3.64833 13.2843 3.94061 13.3082C4.24067 13.3327 4.62887 13.3333 5.19992 13.3333H10.7999C11.371 13.3333 11.7592 13.3327 12.0592 13.3082C12.3515 13.2843 12.501 13.2411 12.6052 13.1879C12.8561 13.0601 13.0601 12.8561 13.1879 12.6052C13.2411 12.501 13.2843 12.3515 13.3082 12.0592C13.3327 11.7592 13.3333 11.371 13.3333 10.7999V7.99992C13.3333 7.63173 13.6317 7.33325 13.9999 7.33325C14.3681 7.33325 14.6666 7.63173 14.6666 7.99992V10.8275C14.6666 11.3641 14.6666 11.807 14.6371 12.1678C14.6065 12.5425 14.5408 12.887 14.3759 13.2106C14.1203 13.7123 13.7123 14.1203 13.2106 14.3759C12.887 14.5408 12.5425 14.6065 12.1678 14.6371C11.807 14.6666 11.3641 14.6666 10.8275 14.6666H5.17237C4.63573 14.6666 4.19283 14.6666 3.83204 14.6371C3.4573 14.6065 3.11283 14.5408 2.78928 14.3759C2.28751 14.1203 1.87956 13.7123 1.6239 13.2106C1.45904 12.887 1.39333 12.5425 1.36271 12.1678C1.33324 11.807 1.33324 11.3641 1.33325 10.8275L1.33325 7.99992C1.33325 7.63173 1.63173 7.33325 1.99992 7.33325Z"
+                  fill="currentColor"
+                />
+              </svg>
+              <Text
+                fontFamily="PingFang SC"
+                fontSize="12px"
+                fontStyle="normal"
+                fontWeight="500"
+                lineHeight="16px"
+                letterSpacing="0.5px">
+                {t('channels.export')}
+              </Text>
+            </MenuItem>
+
+            <MenuItem
+              display="flex"
+              p="6px 4px"
+              alignItems="center"
+              gap="8px"
+              alignSelf="stretch"
+              borderRadius="4px"
+              color="grayModern.600"
+              _hover={{
+                bg: 'rgba(17, 24, 36, 0.05)',
+                color: '#D92D20'
+              }}
+              onClick={() => deleteChannelMutation.mutate({ id: String(info.row.original.id) })}>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none">
+                <path
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M7.48258 1.18025H8.51761C8.84062 1.18024 9.12229 1.18023 9.35489 1.19923C9.60133 1.21937 9.85079 1.26411 10.0921 1.38704C10.4491 1.56894 10.7393 1.85919 10.9212 2.21619C11.0441 2.45745 11.0889 2.70692 11.109 2.95335C11.125 3.14941 11.1275 3.38033 11.1279 3.64149H13.5379C13.9061 3.64149 14.2045 3.93996 14.2045 4.30815C14.2045 4.67634 13.9061 4.97482 13.5379 4.97482H12.9739V11.2268C12.9739 11.7206 12.9739 12.1312 12.9466 12.4663C12.918 12.8153 12.8565 13.1408 12.7001 13.4479C12.4592 13.9206 12.0748 14.305 11.602 14.5459C11.2949 14.7024 10.9695 14.7639 10.6205 14.7924C10.2853 14.8198 9.87475 14.8198 9.381 14.8197H6.61919C6.12544 14.8198 5.71484 14.8198 5.37973 14.7924C5.03069 14.7639 4.70525 14.7024 4.39817 14.5459C3.9254 14.305 3.54102 13.9206 3.30013 13.4479C3.14366 13.1408 3.08215 12.8153 3.05363 12.4663C3.02625 12.1312 3.02626 11.7206 3.02627 11.2268L3.02627 4.97482H2.46232C2.09413 4.97482 1.79565 4.67634 1.79565 4.30815C1.79565 3.93996 2.09413 3.64149 2.46232 3.64149H4.87226C4.87265 3.38033 4.87516 3.14941 4.89118 2.95335C4.91131 2.70692 4.95605 2.45745 5.07899 2.21619C5.26089 1.85919 5.55113 1.56894 5.90813 1.38704C6.1494 1.26411 6.39886 1.21937 6.64529 1.19923C6.8779 1.18023 7.15957 1.18024 7.48258 1.18025ZM4.3596 4.97482V11.1996C4.3596 11.7275 4.36012 12.0833 4.38254 12.3577C4.40432 12.6243 4.44341 12.7547 4.48814 12.8425C4.60119 13.0644 4.7816 13.2448 5.00349 13.3579C5.09128 13.4026 5.22172 13.4417 5.4883 13.4635C5.76267 13.4859 6.11851 13.4864 6.64642 13.4864H9.35377C9.88168 13.4864 10.2375 13.4859 10.5119 13.4635C10.7785 13.4417 10.9089 13.4026 10.9967 13.3579C11.2186 13.2448 11.399 13.0644 11.5121 12.8425C11.5568 12.7547 11.5959 12.6243 11.6176 12.3577C11.6401 12.0833 11.6406 11.7275 11.6406 11.1996V4.97482H4.3596ZM9.79454 3.64149H6.20564C6.20612 3.38305 6.20849 3.20378 6.22008 3.06193C6.23348 2.89795 6.2558 2.84348 6.267 2.82151C6.32106 2.71539 6.40734 2.62912 6.51345 2.57505C6.53543 2.56386 6.58989 2.54154 6.75387 2.52814C6.92563 2.51411 7.15224 2.51359 7.50785 2.51359H8.49234C8.84795 2.51359 9.07456 2.51411 9.24632 2.52814C9.4103 2.54154 9.46476 2.56386 9.48674 2.57505C9.59285 2.62912 9.67913 2.71539 9.73319 2.82151C9.74439 2.84348 9.76671 2.89795 9.78011 3.06193C9.7917 3.20378 9.79407 3.38305 9.79454 3.64149ZM6.76948 7.02568C7.13767 7.02568 7.43614 7.32416 7.43614 7.69235V10.7689C7.43614 11.1371 7.13767 11.4356 6.76948 11.4356C6.40129 11.4356 6.10281 11.1371 6.10281 10.7689V7.69235C6.10281 7.32416 6.40129 7.02568 6.76948 7.02568ZM9.23071 7.02568C9.5989 7.02568 9.89738 7.32416 9.89738 7.69235V10.7689C9.89738 11.1371 9.5989 11.4356 9.23071 11.4356C8.86252 11.4356 8.56404 11.1371 8.56404 10.7689V7.69235C8.56404 7.32416 8.86252 7.02568 9.23071 7.02568Z"
+                  fill="currentColor"
+                />
+              </svg>
+              <Text
+                fontFamily="PingFang SC"
+                fontSize="12px"
+                fontStyle="normal"
+                fontWeight="500"
+                lineHeight="16px"
+                letterSpacing="0.5px">
+                {t('channels.delete')}
+              </Text>
+            </MenuItem>
+          </MenuList>
+        </Menu>
+      )
+    })
+  ]
+
+  const tableData = useMemo(() => data?.channels || [], [data])
+
+  const table = useReactTable({
+    data: tableData,
+    columns,
+    getCoreRowModel: getCoreRowModel()
+  })
+
+  return (
+    <Box
+      w="full"
+      h="full"
+      display="flex"
+      flexDirection="column"
+      gap="24px"
+      overflow="hidden"
+      id="channel-table-container">
+      <TableContainer w="full" flex="1 0 0" minHeight="0" overflowY="auto">
+        <Table variant="simple" w="full" size="md">
+          <Thead>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <Tr key={headerGroup.id} height="42px" alignSelf="stretch" bg="grayModern.100">
+                {headerGroup.headers.map((header, i) => (
+                  <Th
+                    key={header.id}
+                    border={'none'}
+                    // the first th
+                    borderTopLeftRadius={i === 0 ? '6px' : '0'}
+                    borderBottomLeftRadius={i === 0 ? '6px' : '0'}
+                    // the last th
+                    borderTopRightRadius={i === headerGroup.headers.length - 1 ? '6px' : '0'}
+                    borderBottomRightRadius={i === headerGroup.headers.length - 1 ? '6px' : '0'}>
+                    {flexRender(header.column.columnDef.header, header.getContext())}
+                  </Th>
+                ))}
+              </Tr>
+            ))}
+          </Thead>
+          <Tbody>
+            {isChannelTypeNamesLoading || isChannelsLoading ? (
+              <Tr height="48px" alignSelf="stretch" border="none">
+                <Td
+                  h="300px"
+                  colSpan={table.getAllColumns().length}
+                  textAlign="center"
+                  py={4}
+                  border="none">
+                  <Spinner size="xl" />
+                </Td>
+              </Tr>
+            ) : (
+              table.getRowModel().rows.map((row) => (
+                <Tr
+                  key={row.id}
+                  height="48px"
+                  alignSelf="stretch"
+                  borderBottom="1px solid"
+                  borderColor="grayModern.150">
+                  {row.getVisibleCells().map((cell) => (
+                    <Td key={cell.id}>
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </Td>
+                  ))}
+                </Tr>
+              ))
+            )}
+          </Tbody>
+        </Table>
+      </TableContainer>
+      <SwitchPage
+        m="0"
+        justifyContent={'flex-end'}
+        currentPage={page}
+        totalPage={Math.ceil(total / pageSize)}
+        totalItem={total}
+        pageSize={pageSize}
+        setCurrentPage={(idx: number) => setPage(idx)}
+      />
+      <UpdateChannelModal
+        isOpen={isOpen}
+        onClose={onClose}
+        operationType={operationType}
+        channelInfo={channelInfo}
+      />
+    </Box>
+  )
+}
diff --git a/frontend/providers/aiproxy/app/[lng]/(admin)/dashboard/components/UpdateChannelModal.tsx b/frontend/providers/aiproxy/app/[lng]/(admin)/dashboard/components/UpdateChannelModal.tsx
new file mode 100644
index 000000000000..9ad31ddf8ee3
--- /dev/null
+++ b/frontend/providers/aiproxy/app/[lng]/(admin)/dashboard/components/UpdateChannelModal.tsx
@@ -0,0 +1,833 @@
+'use client'
+import {
+  Button,
+  Flex,
+  Text,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalCloseButton,
+  FormControl,
+  Input,
+  FormErrorMessage,
+  ModalFooter,
+  FormLabel,
+  VStack,
+  Center,
+  Spinner,
+  Badge
+} from '@chakra-ui/react'
+import { useMessage } from '@sealos/ui'
+import { useTranslationClientSide } from '@/app/i18n/client'
+import { useI18n } from '@/providers/i18n/i18nContext'
+import { ChannelInfo, ChannelStatus, ChannelType } from '@/types/admin/channels/channelInfo'
+import { useQueryClient, useMutation, useQuery } from '@tanstack/react-query'
+import { Dispatch, SetStateAction, useEffect } from 'react'
+import {
+  getChannelBuiltInSupportModels,
+  getChannelDefaultModelAndDefaultModeMapping,
+  getChannelTypeNames
+} from '@/api/platform'
+import { FieldErrors, useForm, Controller } from 'react-hook-form'
+import { z } from 'zod'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { MultiSelectCombobox } from '@/components/common/MultiSelectCombobox'
+import { SingleSelectCombobox } from '@/components/common/SingleSelectCombobox'
+import ConstructModeMappingComponent from '@/components/common/ConstructModeMappingComponent'
+import { createChannel, updateChannel } from '@/api/platform'
+import { QueryKey } from '@/types/query-key'
+
+type Model = {
+  name: string
+  isDefault: boolean
+}
+
+export const UpdateChannelModal = function ({
+  isOpen,
+  onClose,
+  operationType,
+  channelInfo
+}: {
+  isOpen: boolean
+  onClose: () => void
+  operationType: 'create' | 'update'
+  channelInfo?: ChannelInfo
+}): JSX.Element {
+  const { lng } = useI18n()
+  const { t } = useTranslationClientSide(lng, 'common')
+  const queryClient = useQueryClient()
+
+  const { message } = useMessage({
+    warningBoxBg: 'var(--Yellow-50, #FFFAEB)',
+    warningIconBg: 'var(--Yellow-500, #F79009)',
+    warningIconFill: 'white',
+
+    successBoxBg: 'var(--Green-50, #EDFBF3)',
+    successIconBg: 'var(--Green-600, #039855)',
+    successIconFill: 'white'
+  })
+
+  const { isLoading: isChannelTypeNamesLoading, data: channelTypeNames } = useQuery({
+    queryKey: [QueryKey.GetChannelTypeNames],
+    queryFn: () => getChannelTypeNames()
+  })
+
+  const { isLoading: isBuiltInSupportModelsLoading, data: builtInSupportModels } = useQuery({
+    queryKey: [QueryKey.GetAllChannelModes],
+    queryFn: () => getChannelBuiltInSupportModels()
+  })
+
+  const { isLoading: isDefaultEnabledModelsLoading, data: defaultEnabledModels } = useQuery({
+    queryKey: [QueryKey.GetDefaultModelAndModeMapping],
+    queryFn: () => getChannelDefaultModelAndDefaultModeMapping()
+  })
+
+  // model type select combobox
+  const handleModelTypeDropdownItemFilter = (dropdownItems: string[], inputValue: string) => {
+    const lowerCasedInput = inputValue.toLowerCase()
+    return dropdownItems.filter(
+      (item) => !inputValue || item.toLowerCase().includes(lowerCasedInput)
+    )
+  }
+
+  const handleModelTypeDropdownItemDisplay = (dropdownItem: string) => {
+    return (
+      <Text
+        color="grayModern.600"
+        fontFamily="PingFang SC"
+        fontSize="12px"
+        fontStyle="normal"
+        fontWeight={400}
+        lineHeight="16px"
+        letterSpacing="0.048px">
+        {dropdownItem}
+      </Text>
+    )
+  }
+
+  // model select combobox
+  const handleModelFilteredDropdownItems = (
+    dropdownItems: Model[],
+    selectedItems: Model[],
+    inputValue: string
+  ) => {
+    const lowerCasedInputValue = inputValue.toLowerCase()
+
+    // First filter out items that are already selected
+    const unselectedItems = dropdownItems.filter(
+      (dropdownItem) =>
+        !selectedItems.some((selectedItem) => selectedItem.name === dropdownItem.name)
+    )
+
+    // Then filter by input value
+    return unselectedItems.filter((item) => item.name.toLowerCase().includes(lowerCasedInputValue))
+  }
+
+  const handleModelDropdownItemDisplay = (dropdownItem: Model) => {
+    if (dropdownItem.isDefault) {
+      return (
+        <Flex alignItems="center" gap="8px">
+          <Text
+            color="grayModern.600"
+            fontFamily="PingFang SC"
+            fontSize="12px"
+            fontWeight={500}
+            lineHeight="16px"
+            letterSpacing="0.5px">
+            {dropdownItem.name}
+          </Text>
+          <Badge
+            display="flex"
+            padding="4px 8px"
+            justifyContent="center"
+            alignItems="center"
+            gap="4px"
+            borderRadius="33px"
+            background="grayModern.100"
+            mixBlendMode="multiply">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="12"
+              height="12"
+              viewBox="0 0 12 12"
+              fill="none">
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M6.74997 0.714878L8.22533 1.56668L8.22345 1.56993C8.24059 1.57694 8.25731 1.58514 8.27351 1.59449C8.63523 1.80333 8.49477 2.44228 8.09298 2.55641C7.64176 2.68458 7.21349 2.86732 6.81576 3.09704C7.88708 4.08166 8.63497 5.4127 8.88183 6.91256C9.29901 6.66528 9.68171 6.36596 10.021 6.02354C10.3136 5.72817 10.9521 5.92322 10.9521 6.33902V7.99316C10.9521 8.52906 10.6662 9.02425 10.2021 9.2922L8.38215 10.3429L8.37557 10.3315C8.0325 10.4206 7.62541 9.98967 7.73357 9.62836C7.85051 9.2377 7.9264 8.82931 7.95623 8.40819C7.33755 8.59803 6.68053 8.7002 5.99963 8.7002C5.30124 8.7002 4.62795 8.59271 3.99541 8.39338C4.02377 8.80912 4.09702 9.21253 4.21034 9.59881C4.31853 9.96756 3.89749 10.4028 3.55054 10.2939L3.54609 10.3015L1.79785 9.2922C1.33375 9.02425 1.04785 8.52906 1.04785 7.99316V6.33971C1.04785 5.92389 1.68618 5.72882 1.97889 6.02416C2.3065 6.3547 2.67457 6.64506 3.07507 6.88719C3.32615 5.39769 4.07163 4.07611 5.1369 3.09704C4.74758 2.87218 4.329 2.69233 3.88826 2.56461C3.4869 2.4483 3.34916 1.81231 3.71105 1.60337C3.71916 1.59869 3.72741 1.59429 3.73577 1.59019L3.7353 1.58937L5.24997 0.714878C5.71407 0.446928 6.28587 0.446929 6.74997 0.714878ZM5.10359 1.95409C5.4076 2.09475 5.69921 2.25766 5.97633 2.44073C6.26144 2.25239 6.56189 2.08538 6.87539 1.94199L6.24997 1.5809C6.09527 1.49159 5.90467 1.49159 5.74997 1.5809L5.10359 1.95409ZM2.04785 7.40181V7.99316C2.04785 8.1718 2.14315 8.33686 2.29785 8.42618L3.03582 8.85224C3.00038 8.57396 2.98212 8.29031 2.98212 8.0024L2.98216 7.9791C2.65411 7.81211 2.34175 7.61875 2.04785 7.40181ZM8.91302 8.88175L9.70209 8.42618C9.85679 8.33686 9.95209 8.1718 9.95209 7.99316V7.40131C9.64413 7.6287 9.31588 7.83019 8.97055 8.00257C8.97054 8.30061 8.95096 8.59407 8.91302 8.88175ZM7.9346 7.36087C7.33089 7.58044 6.67925 7.7002 5.99963 7.7002C5.30321 7.7002 4.63616 7.57444 4.01995 7.34439C4.18895 5.88454 4.91333 4.59396 5.97633 3.68939C7.04334 4.59736 7.76917 5.89426 7.9346 7.36087Z"
+                fill="#667085"
+              />
+              <path
+                d="M8.79009 2.46925C8.65153 2.70844 8.73335 3.01468 8.97274 3.15289L9.70209 3.57399C9.85679 3.6633 9.95209 3.82837 9.95209 4.007V5.01917C9.95209 5.29532 10.1759 5.51917 10.4521 5.51917C10.7282 5.51917 10.9521 5.29532 10.9521 5.01917V4.007C10.9521 3.4711 10.6662 2.97591 10.2021 2.70796L9.47274 2.28687C9.23384 2.14894 8.92837 2.23055 8.79009 2.46925Z"
+                fill="#667085"
+              />
+              <path
+                d="M7.51448 10.2665C7.65255 10.5057 7.57062 10.8115 7.33147 10.9496L6.74997 11.2853C6.28587 11.5532 5.71407 11.5532 5.24997 11.2853L4.66318 10.9465C4.42378 10.8083 4.34197 10.502 4.48053 10.2629C4.61881 10.0242 4.92428 9.94254 5.16318 10.0805L5.74997 10.4193C5.90467 10.5086 6.09527 10.5086 6.24997 10.4193L6.83147 10.0835C7.07062 9.94546 7.37641 10.0274 7.51448 10.2665Z"
+                fill="#667085"
+              />
+              <path
+                d="M1.54785 5.52476C1.27171 5.52476 1.04785 5.3009 1.04785 5.02476V4.007C1.04785 3.4711 1.33375 2.97591 1.79785 2.70796L2.51571 2.29351C2.75485 2.15544 3.06065 2.23737 3.19872 2.47652C3.33679 2.71567 3.25485 3.02146 3.01571 3.15953L2.29785 3.57399C2.14315 3.6633 2.04785 3.82837 2.04785 4.007V5.02476C2.04785 5.3009 1.82399 5.52476 1.54785 5.52476Z"
+                fill="#667085"
+              />
+            </svg>
+            <Text
+              color="grayModern.500"
+              fontFamily="PingFang SC"
+              fontSize="10px"
+              fontStyle="normal"
+              fontWeight={500}
+              lineHeight="14px"
+              letterSpacing="0.2px">
+              {t('channels.modelDefault')}
+            </Text>
+          </Badge>
+        </Flex>
+      )
+    }
+    return (
+      <Text
+        color="grayModern.600"
+        fontFamily="PingFang SC"
+        fontSize="12px"
+        fontWeight={500}
+        lineHeight="16px"
+        letterSpacing="0.5px">
+        {dropdownItem.name}
+      </Text>
+    )
+  }
+
+  const handleModelSelectedItemDisplay = (selectedItem: Model) => {
+    if (selectedItem.isDefault) {
+      return (
+        <Flex alignItems="center" gap="8px">
+          <Text
+            color="grayModern.900"
+            fontFamily="PingFang SC"
+            fontSize="14px"
+            fontStyle="normal"
+            fontWeight={400}
+            lineHeight="20px"
+            letterSpacing="0.25px">
+            {selectedItem.name}
+          </Text>
+          <Badge
+            display="flex"
+            padding="4px 8px"
+            justifyContent="center"
+            alignItems="center"
+            gap="4px"
+            borderRadius="33px"
+            background="grayModern.100"
+            mixBlendMode="multiply">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="12"
+              height="12"
+              viewBox="0 0 12 12"
+              fill="none">
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M6.74997 0.714878L8.22533 1.56668L8.22345 1.56993C8.24059 1.57694 8.25731 1.58514 8.27351 1.59449C8.63523 1.80333 8.49477 2.44228 8.09298 2.55641C7.64176 2.68458 7.21349 2.86732 6.81576 3.09704C7.88708 4.08166 8.63497 5.4127 8.88183 6.91256C9.29901 6.66528 9.68171 6.36596 10.021 6.02354C10.3136 5.72817 10.9521 5.92322 10.9521 6.33902V7.99316C10.9521 8.52906 10.6662 9.02425 10.2021 9.2922L8.38215 10.3429L8.37557 10.3315C8.0325 10.4206 7.62541 9.98967 7.73357 9.62836C7.85051 9.2377 7.9264 8.82931 7.95623 8.40819C7.33755 8.59803 6.68053 8.7002 5.99963 8.7002C5.30124 8.7002 4.62795 8.59271 3.99541 8.39338C4.02377 8.80912 4.09702 9.21253 4.21034 9.59881C4.31853 9.96756 3.89749 10.4028 3.55054 10.2939L3.54609 10.3015L1.79785 9.2922C1.33375 9.02425 1.04785 8.52906 1.04785 7.99316V6.33971C1.04785 5.92389 1.68618 5.72882 1.97889 6.02416C2.3065 6.3547 2.67457 6.64506 3.07507 6.88719C3.32615 5.39769 4.07163 4.07611 5.1369 3.09704C4.74758 2.87218 4.329 2.69233 3.88826 2.56461C3.4869 2.4483 3.34916 1.81231 3.71105 1.60337C3.71916 1.59869 3.72741 1.59429 3.73577 1.59019L3.7353 1.58937L5.24997 0.714878C5.71407 0.446928 6.28587 0.446929 6.74997 0.714878ZM5.10359 1.95409C5.4076 2.09475 5.69921 2.25766 5.97633 2.44073C6.26144 2.25239 6.56189 2.08538 6.87539 1.94199L6.24997 1.5809C6.09527 1.49159 5.90467 1.49159 5.74997 1.5809L5.10359 1.95409ZM2.04785 7.40181V7.99316C2.04785 8.1718 2.14315 8.33686 2.29785 8.42618L3.03582 8.85224C3.00038 8.57396 2.98212 8.29031 2.98212 8.0024L2.98216 7.9791C2.65411 7.81211 2.34175 7.61875 2.04785 7.40181ZM8.91302 8.88175L9.70209 8.42618C9.85679 8.33686 9.95209 8.1718 9.95209 7.99316V7.40131C9.64413 7.6287 9.31588 7.83019 8.97055 8.00257C8.97054 8.30061 8.95096 8.59407 8.91302 8.88175ZM7.9346 7.36087C7.33089 7.58044 6.67925 7.7002 5.99963 7.7002C5.30321 7.7002 4.63616 7.57444 4.01995 7.34439C4.18895 5.88454 4.91333 4.59396 5.97633 3.68939C7.04334 4.59736 7.76917 5.89426 7.9346 7.36087Z"
+                fill="#667085"
+              />
+              <path
+                d="M8.79009 2.46925C8.65153 2.70844 8.73335 3.01468 8.97274 3.15289L9.70209 3.57399C9.85679 3.6633 9.95209 3.82837 9.95209 4.007V5.01917C9.95209 5.29532 10.1759 5.51917 10.4521 5.51917C10.7282 5.51917 10.9521 5.29532 10.9521 5.01917V4.007C10.9521 3.4711 10.6662 2.97591 10.2021 2.70796L9.47274 2.28687C9.23384 2.14894 8.92837 2.23055 8.79009 2.46925Z"
+                fill="#667085"
+              />
+              <path
+                d="M7.51448 10.2665C7.65255 10.5057 7.57062 10.8115 7.33147 10.9496L6.74997 11.2853C6.28587 11.5532 5.71407 11.5532 5.24997 11.2853L4.66318 10.9465C4.42378 10.8083 4.34197 10.502 4.48053 10.2629C4.61881 10.0242 4.92428 9.94254 5.16318 10.0805L5.74997 10.4193C5.90467 10.5086 6.09527 10.5086 6.24997 10.4193L6.83147 10.0835C7.07062 9.94546 7.37641 10.0274 7.51448 10.2665Z"
+                fill="#667085"
+              />
+              <path
+                d="M1.54785 5.52476C1.27171 5.52476 1.04785 5.3009 1.04785 5.02476V4.007C1.04785 3.4711 1.33375 2.97591 1.79785 2.70796L2.51571 2.29351C2.75485 2.15544 3.06065 2.23737 3.19872 2.47652C3.33679 2.71567 3.25485 3.02146 3.01571 3.15953L2.29785 3.57399C2.14315 3.6633 2.04785 3.82837 2.04785 4.007V5.02476C2.04785 5.3009 1.82399 5.52476 1.54785 5.52476Z"
+                fill="#667085"
+              />
+            </svg>
+          </Badge>
+        </Flex>
+      )
+    }
+    return (
+      <Text
+        color="grayModern.900"
+        fontFamily="PingFang SC"
+        fontSize="14px"
+        fontStyle="normal"
+        fontWeight={400}
+        lineHeight="20px"
+        letterSpacing="0.25px">
+        {selectedItem.name}
+      </Text>
+    )
+  }
+
+  const handleSetCustomModel = (
+    selectedItems: Model[],
+    setSelectedItems: Dispatch<SetStateAction<Model[]>>,
+    customModeName: string,
+    setCustomModeName: Dispatch<SetStateAction<string>>
+  ) => {
+    if (customModeName.trim()) {
+      const newModel: Model = {
+        name: customModeName.trim(),
+        isDefault: false
+      }
+
+      const exists = selectedItems.some((item) => item.name === customModeName.trim())
+
+      if (!exists) {
+        setSelectedItems([...selectedItems, newModel])
+        setCustomModeName('')
+      }
+    }
+  }
+
+  // form schema
+  const schema = z.object({
+    id: z.number().optional(),
+    type: z.number(),
+    name: z.string().min(1, { message: t('channels.name_required') }),
+    key: z.string().min(1, { message: t('channels.key_required') }),
+    base_url: z.string(),
+    models: z.array(z.string()).default([]),
+    model_mapping: z.record(z.string(), z.any()).default({})
+  })
+
+  const id = channelInfo?.id
+  type FormData = z.infer<typeof schema>
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    setValue,
+    watch,
+    formState: { errors },
+    control
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      id: id,
+      type: undefined,
+      name: '',
+      key: '',
+      base_url: '',
+      models: [],
+      model_mapping: {}
+    },
+    mode: 'onChange',
+    reValidateMode: 'onChange'
+  })
+
+  useEffect(() => {
+    if (channelInfo) {
+      const { id, type, name, key, base_url, models, model_mapping } = channelInfo
+      reset({ id, type, name, key, base_url, models, model_mapping })
+    }
+  }, [channelInfo])
+
+  const resetModalState = () => {
+    reset()
+  }
+
+  const createChannelMutation = useMutation({
+    mutationFn: createChannel,
+    onSuccess: () => {
+      message({
+        title: t('channels.createSuccess'),
+        status: 'success'
+      })
+    }
+  })
+
+  const updateChannelMutation = useMutation({
+    mutationFn: (data: FormData) =>
+      updateChannel(
+        {
+          type: data.type,
+          name: data.name,
+          key: data.key,
+          base_url: data.base_url,
+          models: data.models,
+          model_mapping: data.model_mapping
+        },
+        data.id!.toString()
+      ),
+    onSuccess: () => {
+      message({
+        title: t('channels.updateSuccess'),
+        status: 'success'
+      })
+    }
+  })
+
+  const onValidate = async (data: FormData) => {
+    try {
+      switch (operationType) {
+        case 'create':
+          await createChannelMutation.mutateAsync({
+            type: data.type,
+            name: data.name,
+            key: data.key,
+            base_url: data.base_url,
+            models: data.models,
+            model_mapping: data.model_mapping
+          })
+          break
+        case 'update':
+          await updateChannelMutation.mutateAsync(data)
+          break
+      }
+      queryClient.invalidateQueries({ queryKey: [QueryKey.GetChannels] })
+      queryClient.invalidateQueries({ queryKey: [QueryKey.GetDefaultModelAndModeMapping] })
+      queryClient.invalidateQueries({ queryKey: [QueryKey.GetChannelTypeNames] })
+      queryClient.invalidateQueries({ queryKey: [QueryKey.GetAllChannelModes] })
+      resetModalState()
+      onClose()
+    } catch (error) {
+      switch (operationType) {
+        case 'create':
+          message({
+            title: t('channels.createFailed'),
+            status: 'error',
+            position: 'top',
+            duration: 2000,
+            isClosable: true,
+            description: error instanceof Error ? error.message : t('channels.createFailed')
+          })
+          break
+        case 'update':
+          message({
+            title: t('channels.updateFailed'),
+            status: 'error',
+            position: 'top',
+            duration: 2000,
+            isClosable: true,
+            description: error instanceof Error ? error.message : t('channels.updateFailed')
+          })
+          break
+      }
+    }
+  }
+
+  const onInvalid = (errors: FieldErrors<FormData>): void => {
+    const firstErrorMessage = Object.values(errors)[0]?.message
+    if (firstErrorMessage) {
+      message({
+        title: firstErrorMessage as string,
+        status: 'error',
+        position: 'top',
+        duration: 2000,
+        isClosable: true
+      })
+    }
+  }
+
+  const onSubmit = handleSubmit(onValidate, onInvalid)
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} isCentered>
+      {isOpen &&
+        (isBuiltInSupportModelsLoading ||
+        isDefaultEnabledModelsLoading ||
+        isChannelTypeNamesLoading ||
+        !builtInSupportModels ||
+        !defaultEnabledModels ||
+        !channelTypeNames ? (
+          <>
+            <ModalOverlay />
+            <ModalContent w="530px" h="768px">
+              <ModalHeader
+                height="48px"
+                padding="10px 20px"
+                justifyContent="center"
+                alignItems="center"
+                flexShrink="0"
+                borderBottom="1px solid grayModern.100"
+                background="grayModern.25"
+                w="full">
+                <Flex alignItems="flex-start" flexShrink={0}>
+                  <Text
+                    color="grayModern.900"
+                    fontFamily="PingFang SC"
+                    fontSize="16px"
+                    fontStyle="normal"
+                    fontWeight={500}
+                    lineHeight="24px"
+                    letterSpacing="0.15px">
+                    {operationType === 'create' ? t('channels.create') : t('channels.edit')}
+                  </Text>
+                </Flex>
+              </ModalHeader>
+              <ModalCloseButton
+                display="flex"
+                width="28px"
+                height="28px"
+                padding="4px"
+                justifyContent="center"
+                alignItems="center"
+                flexShrink="0"
+                borderRadius="4px"
+              />
+              <ModalBody w="full" h="full" m="0">
+                <Center w="full" h="full" alignSelf="center">
+                  <Spinner />
+                </Center>
+              </ModalBody>
+            </ModalContent>
+          </>
+        ) : (
+          <>
+            <ModalOverlay />
+            <ModalContent
+              minW="530px"
+              m="0"
+              p="0"
+              flexDirection="column"
+              justifyContent="center"
+              alignItems="flex-start"
+              borderRadius="10px"
+              background="white"
+              boxShadow="0px 32px 64px -12px rgba(19, 51, 107, 0.20), 0px 0px 1px 0px rgba(19, 51, 107, 0.20)">
+              {/* header */}
+              <ModalHeader
+                height="48px"
+                padding="10px 20px"
+                justifyContent="center"
+                alignItems="center"
+                flexShrink="0"
+                borderBottom="1px solid grayModern.100"
+                background="grayModern.25"
+                w="full">
+                <Flex alignItems="flex-start" flexShrink={0}>
+                  <Text
+                    color="grayModern.900"
+                    fontFamily="PingFang SC"
+                    fontSize="16px"
+                    fontStyle="normal"
+                    fontWeight={500}
+                    lineHeight="24px"
+                    letterSpacing="0.15px">
+                    {operationType === 'create' ? t('channels.create') : t('channels.edit')}
+                  </Text>
+                </Flex>
+              </ModalHeader>
+              <ModalCloseButton
+                display="flex"
+                width="28px"
+                height="28px"
+                padding="4px"
+                justifyContent="center"
+                alignItems="center"
+                flexShrink={0}
+                borderRadius="4px"
+              />
+              {/* body */}
+              <ModalBody w="full" h="full" m="0" p="24px 36px 24px 36px">
+                <VStack
+                  as="form"
+                  h="full"
+                  w="full"
+                  onSubmit={onSubmit}
+                  spacing="24px"
+                  justifyContent="center"
+                  alignItems="center"
+                  align="stretch">
+                  <FormControl isInvalid={!!errors.name} isRequired>
+                    <VStack w="full" alignItems="flex-start" gap="8px">
+                      <FormLabel
+                        color="grayModern.900"
+                        fontFamily="PingFang SC"
+                        fontSize="14px"
+                        fontStyle="normal"
+                        fontWeight={500}
+                        lineHeight="20px"
+                        letterSpacing="0.1px"
+                        display="flex"
+                        alignItems="center"
+                        h="20px"
+                        justifyContent="flex-start"
+                        m={0}>
+                        {t('channelsForm.name')}
+                      </FormLabel>
+
+                      <Input
+                        display="flex"
+                        h="32px"
+                        py="8px"
+                        px="12px"
+                        alignItems="center"
+                        borderRadius="6px"
+                        border="1px solid var(--Gray-Modern-200, #E8EBF0)"
+                        bgColor="grayModern.50"
+                        variant="unstyled"
+                        placeholder={t('channelsFormPlaceholder.name')}
+                        color="var(--light-general-on-surface, var(--Gray-Modern-900, #111824))"
+                        fontFamily="PingFang SC"
+                        fontSize="12px"
+                        fontWeight={400}
+                        lineHeight="16px"
+                        letterSpacing="0.048px"
+                        _placeholder={{
+                          color: 'grayModern.500',
+                          fontFamily: 'PingFang SC',
+                          fontSize: '12px',
+                          fontWeight: 400,
+                          lineHeight: '16px',
+                          letterSpacing: '0.048px'
+                        }}
+                        {...register('name')}
+                      />
+                      {errors.name && <FormErrorMessage>{errors.name.message}</FormErrorMessage>}
+                    </VStack>
+                  </FormControl>
+
+                  <FormControl isInvalid={!!errors.type} isRequired>
+                    <Controller
+                      name="type"
+                      control={control}
+                      render={({ field }) => {
+                        const availableChannels = Object.entries(channelTypeNames)
+                          .filter(([channel]) => channel in builtInSupportModels)
+                          .map(([_, name]) => name)
+
+                        const initSelectedItem = field.value
+                          ? channelTypeNames[String(field.value) as ChannelType]
+                          : undefined
+
+                        return (
+                          <SingleSelectCombobox<string>
+                            dropdownItems={availableChannels}
+                            initSelectedItem={initSelectedItem}
+                            setSelectedItem={(channelName: string) => {
+                              if (channelName) {
+                                const channelType = Object.entries(channelTypeNames).find(
+                                  ([_, name]) => name === channelName
+                                )?.[0]
+
+                                if (channelType) {
+                                  const numericChannel = Number(channelType)
+                                  field.onChange(numericChannel)
+                                  setValue('models', [])
+                                  setValue('model_mapping', {})
+                                }
+                              }
+                            }}
+                            handleDropdownItemFilter={handleModelTypeDropdownItemFilter}
+                            handleDropdownItemDisplay={handleModelTypeDropdownItemDisplay}
+                          />
+                        )
+                      }}
+                    />
+                    {errors.type && <FormErrorMessage>{errors.type.message}</FormErrorMessage>}
+                  </FormControl>
+
+                  <FormControl isInvalid={!!errors.models}>
+                    <Controller
+                      name="models"
+                      control={control}
+                      render={({ field }) => {
+                        const channelType = String(watch('type')) as ChannelType
+
+                        const builtInModes =
+                          builtInSupportModels[channelType]?.map((mode) => mode.model) || []
+                        const defaultModes = defaultEnabledModels.models[channelType] || []
+
+                        const allModes: Model[] = builtInModes.map((modeName) => ({
+                          name: modeName,
+                          isDefault: defaultModes.includes(modeName)
+                        }))
+
+                        const selectedModels: Model[] = field.value.map((modeName) => ({
+                          name: modeName,
+                          isDefault: defaultModes.includes(modeName)
+                        }))
+
+                        return (
+                          <MultiSelectCombobox<Model>
+                            dropdownItems={allModes}
+                            selectedItems={selectedModels}
+                            setSelectedItems={(models) => {
+                              field.onChange((models as Model[]).map((m) => m.name))
+                            }}
+                            handleFilteredDropdownItems={handleModelFilteredDropdownItems}
+                            handleDropdownItemDisplay={handleModelDropdownItemDisplay}
+                            handleSelectedItemDisplay={handleModelSelectedItemDisplay}
+                            handleSetCustomSelectedItem={handleSetCustomModel}
+                          />
+                        )
+                      }}
+                    />
+                    {errors.models && <FormErrorMessage>{errors.models.message}</FormErrorMessage>}
+                  </FormControl>
+
+                  <FormControl isInvalid={!!errors.model_mapping}>
+                    <Controller
+                      name="model_mapping"
+                      control={control}
+                      render={({ field }) => {
+                        const channelType = String(watch('type')) as ChannelType
+
+                        const selectedModels = watch('models')
+                        const defaultModes = defaultEnabledModels.models[channelType] || []
+
+                        const covertedSelectedModels: Model[] = selectedModels.map((modeName) => ({
+                          name: modeName,
+                          isDefault: defaultModes.includes(modeName)
+                        }))
+                        return (
+                          <ConstructModeMappingComponent
+                            mapKeys={covertedSelectedModels}
+                            mapData={field.value}
+                            setMapData={(mapping) => {
+                              field.onChange(mapping)
+                            }}
+                          />
+                        )
+                      }}
+                    />
+                    {errors.model_mapping?.message && (
+                      <FormErrorMessage>{errors.model_mapping.message.toString()}</FormErrorMessage>
+                    )}
+                  </FormControl>
+
+                  <FormControl isInvalid={!!errors.key} isRequired>
+                    <VStack w="full" alignItems="flex-start" gap="8px">
+                      <FormLabel
+                        color="grayModern.900"
+                        fontFamily="PingFang SC"
+                        fontSize="14px"
+                        fontStyle="normal"
+                        fontWeight={500}
+                        lineHeight="20px"
+                        letterSpacing="0.1px"
+                        display="flex"
+                        alignItems="center"
+                        h="20px"
+                        justifyContent="flex-start"
+                        m={0}>
+                        {t('channelsForm.key')}
+                      </FormLabel>
+
+                      <Input
+                        display="flex"
+                        h="32px"
+                        py="8px"
+                        px="12px"
+                        alignItems="center"
+                        borderRadius="6px"
+                        border="1px solid var(--Gray-Modern-200, #E8EBF0)"
+                        bgColor="grayModern.50"
+                        variant="unstyled"
+                        placeholder={t('channelsFormPlaceholder.key')}
+                        color="var(--light-general-on-surface, var(--Gray-Modern-900, #111824))"
+                        fontFamily="PingFang SC"
+                        fontSize="12px"
+                        fontWeight={400}
+                        lineHeight="16px"
+                        letterSpacing="0.048px"
+                        _placeholder={{
+                          color: 'grayModern.500',
+                          fontFamily: 'PingFang SC',
+                          fontSize: '12px',
+                          fontWeight: 400,
+                          lineHeight: '16px',
+                          letterSpacing: '0.048px'
+                        }}
+                        {...register('key')}
+                      />
+                      {errors.key && <FormErrorMessage>{errors.key.message}</FormErrorMessage>}
+                    </VStack>
+                  </FormControl>
+
+                  <FormControl isInvalid={!!errors.base_url} isRequired>
+                    <VStack w="full" alignItems="flex-start" gap="8px">
+                      <FormLabel
+                        color="grayModern.900"
+                        fontFamily="PingFang SC"
+                        fontSize="14px"
+                        fontStyle="normal"
+                        fontWeight={500}
+                        lineHeight="20px"
+                        letterSpacing="0.1px"
+                        display="flex"
+                        alignItems="center"
+                        h="20px"
+                        justifyContent="flex-start"
+                        m={0}>
+                        {t('channelsForm.base_url')}
+                      </FormLabel>
+
+                      <Input
+                        display="flex"
+                        h="32px"
+                        py="8px"
+                        px="12px"
+                        alignItems="center"
+                        borderRadius="6px"
+                        border="1px solid var(--Gray-Modern-200, #E8EBF0)"
+                        bgColor="grayModern.50"
+                        variant="unstyled"
+                        placeholder={t('channelsFormPlaceholder.base_url')}
+                        color="var(--light-general-on-surface, var(--Gray-Modern-900, #111824))"
+                        fontFamily="PingFang SC"
+                        fontSize="12px"
+                        fontWeight={400}
+                        lineHeight="16px"
+                        letterSpacing="0.048px"
+                        _placeholder={{
+                          color: 'grayModern.500',
+                          fontFamily: 'PingFang SC',
+                          fontSize: '12px',
+                          fontWeight: 400,
+                          lineHeight: '16px',
+                          letterSpacing: '0.048px'
+                        }}
+                        {...register('base_url')}
+                      />
+                      {errors.base_url && (
+                        <FormErrorMessage>{errors.base_url.message}</FormErrorMessage>
+                      )}
+                    </VStack>
+                  </FormControl>
+                </VStack>
+              </ModalBody>
+              <ModalFooter
+                w="full"
+                justifyContent="flex-end"
+                alignItems="center"
+                alignSelf="stretch"
+                gap="16px"
+                px="36px"
+                pb="24px"
+                pt="0"
+                m="0">
+                <Button
+                  w="88px"
+                  display="flex"
+                  padding="8px 20px"
+                  justifyContent="center"
+                  alignItems="center"
+                  gap="8px"
+                  borderRadius="6px"
+                  background="grayModern.900"
+                  boxShadow="0px 1px 2px 0px rgba(19, 51, 107, 0.05), 0px 0px 1px 0px rgba(19, 51, 107, 0.08)"
+                  _hover={{ background: 'var(--Gray-Modern-800, #1F2937)' }}
+                  onClick={onSubmit}
+                  isDisabled={createChannelMutation.isLoading || updateChannelMutation.isLoading}
+                  isLoading={createChannelMutation.isLoading || updateChannelMutation.isLoading}>
+                  {t('confirm')}
+                </Button>
+              </ModalFooter>
+            </ModalContent>
+          </>
+        ))}
+    </Modal>
+  )
+}
+
+export default UpdateChannelModal
diff --git a/frontend/providers/aiproxy/app/[lng]/(admin)/dashboard/page.tsx b/frontend/providers/aiproxy/app/[lng]/(admin)/dashboard/page.tsx
index d84c050af4ec..c09c4b2ca100 100644
--- a/frontend/providers/aiproxy/app/[lng]/(admin)/dashboard/page.tsx
+++ b/frontend/providers/aiproxy/app/[lng]/(admin)/dashboard/page.tsx
@@ -1,17 +1,292 @@
 'use client'
-import { Flex } from '@chakra-ui/react'
+import { Button, Flex, Text, useDisclosure, useToast } from '@chakra-ui/react'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { useTranslationClientSide } from '@/app/i18n/client'
+import { useI18n } from '@/providers/i18n/i18nContext'
+import ChannelTable from './components/ChannelTable'
+import UpdateChannelModal from './components/UpdateChannelModal'
+import { useState, useRef } from 'react'
+import { ChannelInfo } from '@/types/admin/channels/channelInfo'
+import { getAllChannels, uploadChannels } from '@/api/platform'
+import { QueryKey } from '@/types/query-key'
+import { downloadJson } from '@/utils/common'
+import { useMessage } from '@sealos/ui'
 
 export default function DashboardPage() {
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const [operationType, setOperationType] = useState<'create' | 'update'>('create')
+  const { lng } = useI18n()
+  const { t } = useTranslationClientSide(lng, 'common')
+  const [exportData, setExportData] = useState<ChannelInfo[]>([])
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const { message } = useMessage({
+    warningBoxBg: 'var(--Yellow-50, #FFFAEB)',
+    warningIconBg: 'var(--Yellow-500, #F79009)',
+    warningIconFill: 'white',
+
+    successBoxBg: 'var(--Green-50, #EDFBF3)',
+    successIconBg: 'var(--Green-600, #039855)',
+    successIconFill: 'white'
+  })
+
+  const queryClient = useQueryClient()
+
+  const {
+    data: allChannels,
+    isFetching: isAllChannelsFetching,
+    refetch
+  } = useQuery({
+    queryKey: [QueryKey.GetAllChannels],
+    queryFn: getAllChannels,
+    refetchOnReconnect: false,
+    enabled: false
+  })
+
+  const uploadMutation = useMutation({
+    mutationFn: uploadChannels
+  })
+
+  const handleExport = async () => {
+    if (exportData.length === 0) {
+      const result = await refetch()
+      const dataToExport = result.data || []
+      downloadJson(dataToExport, 'channels')
+    } else {
+      downloadJson(exportData, 'channels')
+    }
+  }
+
+  const handleImport = () => {
+    fileInputRef.current?.click()
+  }
+
+  const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    if (!file) return
+
+    const formData = new FormData()
+    formData.append('file', file)
+
+    try {
+      await uploadMutation.mutateAsync(formData)
+      message({
+        title: t('dashboard.importSuccess'),
+        status: 'success',
+        duration: 3000,
+        isClosable: true
+      })
+      queryClient.invalidateQueries([QueryKey.GetChannels])
+      queryClient.invalidateQueries([QueryKey.GetChannelTypeNames])
+    } catch (error) {
+      console.error('Import error:', error)
+      message({
+        title: t('dashboard.importError'),
+        status: 'error',
+        duration: 3000,
+        isClosable: true
+      })
+    } finally {
+      if (fileInputRef.current) {
+        fileInputRef.current.value = ''
+      }
+    }
+  }
+
   return (
-    <>
-      <Flex gap="13px" marginBottom="12px">
-        Dashboard
+    <Flex pt="4px" pb="12px" pr="12px" h="full" width="full">
+      <Flex
+        bg="white"
+        gap="16px"
+        pt="24px"
+        pl="32px"
+        pr="32px"
+        pb="18px"
+        flexDirection="column"
+        borderRadius="12px"
+        w="full"
+        flex="1">
+        {/* header */}
+        <Flex w="full" alignSelf="stretch" alignItems="center" justifyContent="space-between">
+          <Text
+            whiteSpace="nowrap"
+            color="black"
+            fontFamily="PingFang SC"
+            fontSize="20px"
+            fontStyle="normal"
+            fontWeight="500"
+            lineHeight="26px"
+            letterSpacing="0.15px">
+            {t('dashboard.title')}
+          </Text>
+
+          <Flex justifyContent="flex-end" alignContent="center" gap="12px">
+            <Button
+              display="flex"
+              padding="8px 14px"
+              justifyContent="center"
+              alignItems="center"
+              gap="6px"
+              borderRadius="6px"
+              bg="#111824"
+              boxShadow="0px 1px 2px 0px rgba(19, 51, 107, 0.05), 0px 0px 1px 0px rgba(19, 51, 107, 0.08)"
+              color="white"
+              fontSize="12px"
+              fontFamily="PingFang SC"
+              fontWeight="500"
+              whiteSpace="nowrap"
+              lineHeight="16px"
+              letterSpacing="0.5px"
+              transition="all 0.2s ease"
+              _hover={{
+                transform: 'scale(1.05)',
+                transition: 'transform 0.2s ease'
+              }}
+              _active={{
+                transform: 'scale(0.92)',
+                animation: 'pulse 0.3s ease'
+              }}
+              sx={{
+                '@keyframes pulse': {
+                  '0%': { transform: 'scale(0.92)' },
+                  '50%': { transform: 'scale(0.96)' },
+                  '100%': { transform: 'scale(0.92)' }
+                }
+              }}
+              onClick={() => {
+                setOperationType('create')
+                onOpen()
+              }}>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none">
+                <path
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M7.99996 2.66675C8.36815 2.66675 8.66663 2.96522 8.66663 3.33341V7.33341H12.6666C13.0348 7.33341 13.3333 7.63189 13.3333 8.00008C13.3333 8.36827 13.0348 8.66675 12.6666 8.66675H8.66663V12.6667C8.66663 13.0349 8.36815 13.3334 7.99996 13.3334C7.63177 13.3334 7.33329 13.0349 7.33329 12.6667V8.66675H3.33329C2.9651 8.66675 2.66663 8.36827 2.66663 8.00008C2.66663 7.63189 2.9651 7.33341 3.33329 7.33341H7.33329V3.33341C7.33329 2.96522 7.63177 2.66675 7.99996 2.66675Z"
+                  fill="white"
+                />
+              </svg>
+              {t('dashboard.create')}
+            </Button>
+            <>
+              <input
+                type="file"
+                ref={fileInputRef}
+                onChange={handleFileChange}
+                accept=".json"
+                style={{ display: 'none' }}
+              />
+              <Button
+                onClick={handleImport}
+                isLoading={uploadMutation.isLoading}
+                display="flex"
+                padding="8px 14px"
+                justifyContent="center"
+                alignItems="center"
+                gap="6px"
+                borderRadius="6px"
+                bg="#111824"
+                boxShadow="0px 1px 2px 0px rgba(19, 51, 107, 0.05), 0px 0px 1px 0px rgba(19, 51, 107, 0.08)"
+                color="white"
+                fontSize="12px"
+                fontFamily="PingFang SC"
+                fontWeight="500"
+                whiteSpace="nowrap"
+                lineHeight="16px"
+                letterSpacing="0.5px"
+                _hover={{
+                  transform: 'scale(1.05)',
+                  transition: 'transform 0.2s ease'
+                }}
+                _active={{
+                  transform: 'scale(0.92)',
+                  animation: 'pulse 0.3s ease'
+                }}
+                sx={{
+                  '@keyframes pulse': {
+                    '0%': { transform: 'scale(0.92)' },
+                    '50%': { transform: 'scale(0.96)' },
+                    '100%': { transform: 'scale(0.92)' }
+                  }
+                }}>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  fill="none">
+                  <path
+                    d="M4.67403 1.54568C4.67403 1.42836 4.57892 1.33325 4.4616 1.33325C2.77074 1.33325 1.40002 2.70397 1.40002 4.39483V11.605C1.40002 13.2959 2.77074 14.6666 4.4616 14.6666H11.6718C13.3626 14.6666 14.7334 13.2959 14.7334 11.605V4.39483C14.7334 2.70397 13.3626 1.33325 11.6718 1.33325H10.1347C9.76646 1.33325 9.46799 1.63173 9.46799 1.99992C9.46799 2.36811 9.76646 2.66659 10.1347 2.66659H11.6718C12.6263 2.66659 13.4 3.44035 13.4 4.39483V11.605C13.4 12.5595 12.6263 13.3333 11.6718 13.3333H4.4616C3.50712 13.3333 2.73336 12.5595 2.73336 11.605V4.39483C2.73336 3.44035 3.50712 2.66659 4.4616 2.66659C4.57892 2.66659 4.67403 2.57148 4.67403 2.45416V1.54568Z"
+                    fill="white"
+                  />
+                  <path
+                    d="M7.44956 4.7593C7.34366 4.01775 7.12184 3.5521 6.74895 3.28889C5.86143 2.66241 5.20264 2.6666 5.10574 2.66722L5.09932 2.66725H4.43265V1.33392H5.09932C5.33405 1.33392 6.3067 1.34467 7.51785 2.1996C8.33657 2.77751 8.64402 3.69217 8.7695 4.5708C8.87184 5.28739 8.86613 6.09283 8.86087 6.83489C8.85974 6.99521 8.85862 7.15259 8.85862 7.30546C8.85862 7.73754 8.84937 8.14339 8.83572 8.50719L9.39676 7.94615C9.65711 7.6858 10.0792 7.6858 10.3396 7.94615C10.5999 8.2065 10.5999 8.6286 10.3396 8.88896L8.58245 10.6461C8.441 10.7875 8.25178 10.8521 8.06671 10.8399C7.88163 10.8521 7.69242 10.7875 7.55096 10.6461L5.79384 8.88896C5.53349 8.6286 5.53349 8.2065 5.79384 7.94615C6.05419 7.6858 6.4763 7.6858 6.73665 7.94615L7.41135 8.62084L7.49316 8.70266C7.51162 8.29469 7.52529 7.81909 7.52529 7.30546C7.52529 7.12915 7.52639 6.95576 7.52746 6.78545C7.53213 6.04759 7.53644 5.36763 7.44956 4.7593Z"
+                    fill="white"
+                  />
+                </svg>
+                {t('dashboard.import')}
+              </Button>
+            </>
+            <Button
+              onClick={handleExport}
+              isLoading={isAllChannelsFetching}
+              display="flex"
+              padding="8px 14px"
+              justifyContent="center"
+              alignItems="center"
+              gap="6px"
+              borderRadius="6px"
+              bg="#111824"
+              boxShadow="0px 1px 2px 0px rgba(19, 51, 107, 0.05), 0px 0px 1px 0px rgba(19, 51, 107, 0.08)"
+              color="white"
+              fontSize="12px"
+              fontFamily="PingFang SC"
+              fontWeight="500"
+              lineHeight="16px"
+              whiteSpace="nowrap"
+              letterSpacing="0.5px"
+              _hover={{
+                transform: 'scale(1.05)',
+                transition: 'transform 0.2s ease'
+              }}
+              _active={{
+                transform: 'scale(0.92)',
+                animation: 'pulse 0.3s ease'
+              }}
+              sx={{
+                '@keyframes pulse': {
+                  '0%': { transform: 'scale(0.92)' },
+                  '50%': { transform: 'scale(0.96)' },
+                  '100%': { transform: 'scale(0.92)' }
+                }
+              }}>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none">
+                <path
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M7.52851 1.52851C7.78886 1.26816 8.21097 1.26816 8.47132 1.52851L11.138 4.19518C11.3983 4.45553 11.3983 4.87764 11.138 5.13799C10.8776 5.39834 10.4555 5.39834 10.1952 5.13799L8.66659 3.60939V9.99992C8.66659 10.3681 8.36811 10.6666 7.99992 10.6666C7.63173 10.6666 7.33325 10.3681 7.33325 9.99992V3.60939L5.80466 5.13799C5.54431 5.39834 5.1222 5.39834 4.86185 5.13799C4.6015 4.87764 4.6015 4.45553 4.86185 4.19518L7.52851 1.52851ZM1.99992 7.33325C2.36811 7.33325 2.66659 7.63173 2.66659 7.99992V10.7999C2.66659 11.371 2.6671 11.7592 2.69162 12.0592C2.7155 12.3515 2.75878 12.501 2.81191 12.6052C2.93974 12.8561 3.14372 13.0601 3.3946 13.1879C3.49887 13.2411 3.64833 13.2843 3.94061 13.3082C4.24067 13.3327 4.62887 13.3333 5.19992 13.3333H10.7999C11.371 13.3333 11.7592 13.3327 12.0592 13.3082C12.3515 13.2843 12.501 13.2411 12.6052 13.1879C12.8561 13.0601 13.0601 12.8561 13.1879 12.6052C13.2411 12.501 13.2843 12.3515 13.3082 12.0592C13.3327 11.7592 13.3333 11.371 13.3333 10.7999V7.99992C13.3333 7.63173 13.6317 7.33325 13.9999 7.33325C14.3681 7.33325 14.6666 7.63173 14.6666 7.99992V10.8275C14.6666 11.3641 14.6666 11.807 14.6371 12.1678C14.6065 12.5425 14.5408 12.887 14.3759 13.2106C14.1203 13.7123 13.7123 14.1203 13.2106 14.3759C12.887 14.5408 12.5425 14.6065 12.1678 14.6371C11.807 14.6666 11.3641 14.6666 10.8275 14.6666H5.17237C4.63573 14.6666 4.19283 14.6666 3.83204 14.6371C3.4573 14.6065 3.11283 14.5408 2.78928 14.3759C2.28751 14.1203 1.87956 13.7123 1.6239 13.2106C1.45904 12.887 1.39333 12.5425 1.36271 12.1678C1.33324 11.807 1.33324 11.3641 1.33325 10.8275L1.33325 7.99992C1.33325 7.63173 1.63173 7.33325 1.99992 7.33325Z"
+                  fill="white"
+                />
+              </svg>
+              {exportData.length > 0 ? t('dashboard.export') : t('dashboard.exportAll')}
+            </Button>
+          </Flex>
+        </Flex>
+        {/* header end */}
+        {/* table */}
+        <ChannelTable exportData={setExportData} />
+        {/* modal */}
+        <UpdateChannelModal isOpen={isOpen} onClose={onClose} operationType={operationType} />
       </Flex>
-      <ChannelList />
-    </>
+    </Flex>
   )
 }
-
-function ChannelList() {
-  return <Flex>ChannelList</Flex>
-}
diff --git a/frontend/providers/aiproxy/app/[lng]/(admin)/global-configs/components/CommonConfig.tsx b/frontend/providers/aiproxy/app/[lng]/(admin)/global-configs/components/CommonConfig.tsx
new file mode 100644
index 000000000000..b80c7ead9877
--- /dev/null
+++ b/frontend/providers/aiproxy/app/[lng]/(admin)/global-configs/components/CommonConfig.tsx
@@ -0,0 +1,166 @@
+'use client'
+import { Button, Flex, Text, useDisclosure } from '@chakra-ui/react'
+import { useTranslationClientSide } from '@/app/i18n/client'
+import { useI18n } from '@/providers/i18n/i18nContext'
+import { useQueryClient, useMutation, useQuery } from '@tanstack/react-query'
+import { Switch } from '@chakra-ui/react'
+import { EditableText } from './EditableText'
+import { getOption, updateOption } from '@/api/platform'
+import { useMessage } from '@sealos/ui'
+import { QueryKey } from '@/types/query-key'
+import { useState } from 'react'
+import { produce } from 'immer'
+
+export enum CommonConfigKey {
+  GlobalApiRateLimitNum = 'GlobalApiRateLimitNum',
+  DisableServe = 'DisableServe',
+  RetryTimes = 'RetryTimes',
+  GroupMaxTokenNum = 'GroupMaxTokenNum'
+}
+
+type CommonConfig = {
+  [CommonConfigKey.GlobalApiRateLimitNum]: string
+  [CommonConfigKey.DisableServe]: string
+  [CommonConfigKey.RetryTimes]: string
+  [CommonConfigKey.GroupMaxTokenNum]: string
+}
+
+const CommonConfig = () => {
+  const { lng } = useI18n()
+  const { t } = useTranslationClientSide(lng, 'common')
+  const queryClient = useQueryClient()
+
+  const [commonConfig, setCommonConfig] = useState<CommonConfig>(() =>
+    produce({} as CommonConfig, (draft) => {
+      draft.GlobalApiRateLimitNum = ''
+      draft.DisableServe = ''
+      draft.RetryTimes = ''
+      draft.GroupMaxTokenNum = ''
+    })
+  )
+
+  const { message } = useMessage({
+    warningBoxBg: 'var(--Yellow-50, #FFFAEB)',
+    warningIconBg: 'var(--Yellow-500, #F79009)',
+    warningIconFill: 'white',
+    successBoxBg: 'var(--Green-50, #EDFBF3)',
+    successIconBg: 'var(--Green-600, #039855)',
+    successIconFill: 'white'
+  })
+
+  const { isLoading: isOptionLoading, data: optionData } = useQuery({
+    queryKey: [QueryKey.GetCommonConfig],
+    queryFn: () => getOption(),
+    onSuccess: (data) => {
+      if (!data) return
+
+      setCommonConfig(
+        produce(commonConfig, (draft) => {
+          draft.GlobalApiRateLimitNum = data.GlobalApiRateLimitNum || ''
+          draft.DisableServe = data.DisableServe || ''
+          draft.RetryTimes = data.RetryTimes || ''
+          draft.GroupMaxTokenNum = data.GroupMaxTokenNum || ''
+        })
+      )
+    }
+  })
+
+  const updateOptionMutation = useMutation({
+    mutationFn: (params: { key: string; value: string }) => updateOption(params),
+    onSuccess: () => {
+      message({
+        title: t('globalConfigs.saveCommonConfigSuccess'),
+        status: 'success'
+      })
+      queryClient.invalidateQueries({ queryKey: [QueryKey.GetCommonConfig] })
+    },
+    onError: () => {
+      message({
+        title: t('globalConfigs.saveCommonConfigFailed'),
+        status: 'error'
+      })
+    }
+  })
+
+  const updateConfigField = (field: CommonConfigKey, value: string) => {
+    setCommonConfig(
+      produce((draft) => {
+        draft[field] = value
+      })
+    )
+    updateOptionMutation.mutate({ key: field, value })
+  }
+
+  const handleDisableServeChange = (checked: boolean) => {
+    const value = checked ? 'true' : 'false'
+    updateConfigField(CommonConfigKey.DisableServe, value)
+  }
+
+  return (
+    /*
+    h = 72px + 20px + 60px = 152px
+    EditableText (24px × 3) = 72px
+    Switch container (20px) = 20px
+    gap (20px × 3) = 60px
+    */
+    <Flex gap="8px" flexDirection="row" w="full">
+      {/* title */}
+      <Flex w="153px" alignItems="flex-start">
+        <Text
+          // whiteSpace="nowrap"
+          color="black"
+          fontFamily="PingFang SC"
+          fontSize="16px"
+          fontStyle="normal"
+          fontWeight="500"
+          lineHeight="24px"
+          letterSpacing="0.15px">
+          {t('globalConfigs.common_config')}
+        </Text>
+      </Flex>
+      {/* -- title end */}
+
+      {/* config */}
+
+      <Flex flexDirection="column" gap="20px" flex="1" minW="0">
+        {/* QPM Limit */}
+        <EditableText
+          label={t('global_configs.qpm_limit')}
+          value={commonConfig.GlobalApiRateLimitNum}
+          onSubmit={(value) => updateConfigField(CommonConfigKey.GlobalApiRateLimitNum, value)}
+          flexProps={{ h: '24px' }}
+        />
+
+        {/* Pause Service */}
+        <Flex alignItems="center" gap="16px" h="20px">
+          <Text flex="1">{t('global_configs.pause_service')}</Text>
+          <Switch
+            size="md"
+            isChecked={commonConfig.DisableServe === 'true'}
+            onChange={(e) => handleDisableServeChange(e.target.checked)}
+          />
+        </Flex>
+
+        {/* Retry Count */}
+        <EditableText
+          label={t('global_configs.retry_count')}
+          value={commonConfig.RetryTimes}
+          onSubmit={(value) => updateConfigField(CommonConfigKey.RetryTimes, value)}
+          flexProps={{ h: '24px' }}
+        />
+
+        {/* Max Token */}
+        <EditableText
+          label={t('global_configs.max_token')}
+          value={commonConfig.GroupMaxTokenNum}
+          onSubmit={(value) => updateConfigField(CommonConfigKey.GroupMaxTokenNum, value)}
+          flexProps={{ h: '24px' }}
+        />
+      </Flex>
+
+      {/* -- config end */}
+    </Flex>
+  )
+}
+
+export default CommonConfig
diff --git a/frontend/providers/aiproxy/app/[lng]/(admin)/global-configs/components/EditableText.tsx b/frontend/providers/aiproxy/app/[lng]/(admin)/global-configs/components/EditableText.tsx
new file mode 100644
index 000000000000..2ce5660629f5
--- /dev/null
+++ b/frontend/providers/aiproxy/app/[lng]/(admin)/global-configs/components/EditableText.tsx
@@ -0,0 +1,185 @@
+'use client'
+import React, { useState } from 'react'
+import {
+  Flex,
+  Text,
+  Button,
+  Input,
+  useDisclosure,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverBody,
+  HStack,
+  FlexProps,
+  Box
+} from '@chakra-ui/react'
+import { CheckIcon, CloseIcon } from '@chakra-ui/icons'
+
+interface EditableTextProps {
+  value: string | number
+  label: string
+  onSubmit: (value: string) => void
+  flexProps?: FlexProps
+}
+
+export const EditableText = ({ value, label, onSubmit, flexProps }: EditableTextProps) => {
+  const [editValue, setEditValue] = useState(String(value))
+  const { isOpen, onOpen, onClose } = useDisclosure()
+
+  const handleSubmit = () => {
+    onSubmit(editValue)
+    onClose()
+  }
+
+  const handleCancel = () => {
+    // 关闭时 恢复到传递来的初始值
+    setEditValue(String(value))
+    onClose()
+  }
+
+  return (
+    <Flex alignItems="center" gap="16px" justifyContent="space-between" {...flexProps}>
+      <Text
+        color="grayModern.600"
+        fontFamily="PingFang SC"
+        fontSize="14px"
+        fontStyle="normal"
+        fontWeight="500"
+        lineHeight="20px"
+        letterSpacing="0.1px">
+        {label}
+      </Text>
+      <Popover isOpen={isOpen} onClose={handleCancel} placement="bottom-end">
+        <PopoverTrigger>
+          <Flex alignItems="center" gap="8px">
+            <Text
+              color="grayModern.600"
+              fontFamily="PingFang SC"
+              fontSize="14px"
+              fontStyle="normal"
+              fontWeight="400"
+              lineHeight="20px"
+              letterSpacing="0.25px">
+              {value}
+            </Text>
+            <Button
+              onClick={onOpen}
+              variant="ghost"
+              size="sm"
+              display="flex"
+              p="4px"
+              alignItems="center"
+              gap="6px"
+              borderRadius="6px">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="17"
+                height="16"
+                viewBox="0 0 17 16"
+                fill="none">
+                <path
+                  d="M2.35532 12.6736C2.34997 12.6822 2.34494 12.691 2.34024 12.7C2.29614 12.7849 2.29614 12.8965 2.29614 13.1195V13.4633C2.29614 13.6864 2.29614 13.7979 2.34024 13.8828C2.3774 13.9544 2.43573 14.0127 2.50727 14.0499C2.59216 14.094 2.70369 14.094 2.92675 14.094H3.26459C3.45553 14.094 3.56475 14.094 3.64549 14.0663C3.65082 14.0648 3.65613 14.0632 3.66142 14.0615C3.79824 14.0182 3.91653 13.8999 4.15312 13.6633L11.6771 6.13933L10.254 4.7162L2.72999 12.2402C2.52747 12.4427 2.41162 12.5586 2.35532 12.6736Z"
+                  fill="#485264"
+                />
+                <path
+                  d="M12.8543 4.96222L11.4311 3.53909L12.758 2.21221C12.7756 2.1946 12.7847 2.18549 12.7924 2.17817C13.171 1.81561 13.7681 1.81561 14.1468 2.17817C14.1544 2.1855 14.1633 2.19435 14.1809 2.21201L14.1815 2.21263C14.1991 2.23014 14.2079 2.23896 14.2152 2.24659C14.5777 2.62526 14.5777 3.2223 14.2152 3.60097C14.2078 3.60866 14.1989 3.61755 14.1811 3.63534L12.8543 4.96222Z"
+                  fill="#485264"
+                />
+                <path
+                  d="M7.19259 13.3011C7.19259 12.8632 7.54756 12.5083 7.98544 12.5083H14.7723C15.2102 12.5083 15.5651 12.8632 15.5651 13.3011C15.5651 13.739 15.2102 14.094 14.7723 14.094H7.98544C7.54756 14.094 7.19259 13.739 7.19259 13.3011Z"
+                  fill="#485264"
+                />
+              </svg>
+            </Button>
+          </Flex>
+        </PopoverTrigger>
+        <PopoverContent w="150px">
+          <PopoverBody>
+            <Flex direction="column" gap="6px">
+              <Input
+                fontFamily="PingFang SC"
+                fontSize="14px"
+                fontStyle="normal"
+                fontWeight="400"
+                lineHeight="20px"
+                letterSpacing="0.25px"
+                value={editValue}
+                onChange={(e) => setEditValue(e.target.value)}
+                minW="0"
+                w="full"
+                h="28px"
+                borderRadius="6px"
+                border="1px solid var(--Gray-Modern-200, #E8EBF0)"
+                bgColor="white"
+                _hover={{ borderColor: 'grayModern.300' }}
+                _focus={{ borderColor: 'grayModern.300' }}
+                _focusVisible={{ borderColor: 'grayModern.300' }}
+                _active={{ borderColor: 'grayModern.300' }}
+                autoFocus
+              />
+              <HStack justifyContent="flex-end" spacing="6px">
+                <Button
+                  h="24px"
+                  w="32px"
+                  justifyContent="center"
+                  alignItems="center"
+                  borderRadius="6px"
+                  bg="grayModern.900"
+                  boxShadow="0px 1px 2px 0px rgba(19, 51, 107, 0.05), 0px 0px 1px 0px rgba(19, 51, 107, 0.08)"
+                  color="white"
+                  transition="all 0.2s ease"
+                  _hover={{
+                    transform: 'scale(1.05)',
+                    transition: 'transform 0.2s ease'
+                  }}
+                  _active={{
+                    transform: 'scale(0.92)',
+                    animation: 'pulse 0.3s ease'
+                  }}
+                  sx={{
+                    '@keyframes pulse': {
+                      '0%': { transform: 'scale(0.92)' },
+                      '50%': { transform: 'scale(0.96)' },
+                      '100%': { transform: 'scale(0.92)' }
+                    }
+                  }}
+                  onClick={handleCancel}>
+                  <CloseIcon />
+                </Button>
+                <Button
+                  h="24px"
+                  w="32px"
+                  justifyContent="center"
+                  alignItems="center"
+                  borderRadius="6px"
+                  bg="grayModern.900"
+                  boxShadow="0px 1px 2px 0px rgba(19, 51, 107, 0.05), 0px 0px 1px 0px rgba(19, 51, 107, 0.08)"
+                  color="white"
+                  transition="all 0.2s ease"
+                  _hover={{
+                    transform: 'scale(1.05)',
+                    transition: 'transform 0.2s ease'
+                  }}
+                  _active={{
+                    transform: 'scale(0.92)',
+                    animation: 'pulse 0.3s ease'
+                  }}
+                  sx={{
+                    '@keyframes pulse': {
+                      '0%': { transform: 'scale(0.92)' },
+                      '50%': { transform: 'scale(0.96)' },
+                      '100%': { transform: 'scale(0.92)' }
+                    }
+                  }}
+                  onClick={handleSubmit}>
+                  <CheckIcon />
+                </Button>
+              </HStack>
+            </Flex>
+          </PopoverBody>
+        </PopoverContent>
+      </Popover>
+    </Flex>
+  )
+}
diff --git a/frontend/providers/aiproxy/app/[lng]/(admin)/global-configs/components/ModelConfig.tsx b/frontend/providers/aiproxy/app/[lng]/(admin)/global-configs/components/ModelConfig.tsx
new file mode 100644
index 000000000000..1d26ca7c6a85
--- /dev/null
+++ b/frontend/providers/aiproxy/app/[lng]/(admin)/global-configs/components/ModelConfig.tsx
@@ -0,0 +1,682 @@
+'use client'
+import { Button, Flex, Text, FormControl, VStack, Skeleton } from '@chakra-ui/react'
+import { useTranslationClientSide } from '@/app/i18n/client'
+import { useI18n } from '@/providers/i18n/i18nContext'
+import { MultiSelectCombobox } from '@/components/common/MultiSelectCombobox'
+import { SingleSelectCombobox } from '@/components/common/SingleSelectCombobox'
+import { useForm, Controller, FieldErrors, FieldErrorsImpl, FieldError } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+import {
+  batchOption,
+  getChannelBuiltInSupportModels,
+  getChannelTypeNames,
+  getOption
+} from '@/api/platform'
+import { SetStateAction, Dispatch, useEffect, useState } from 'react'
+import { useQueryClient, useMutation, useQuery } from '@tanstack/react-query'
+import ConstructMappingComponent from '@/components/common/ConstructMappingComponent'
+import { DefaultChannelModel, DefaultChannelModelMapping } from '@/types/admin/option'
+import { ChannelType } from '@/types/admin/channels/channelInfo'
+import { QueryKey } from '@/types/query-key'
+import { useMessage } from '@sealos/ui'
+import { BatchOptionData } from '@/types/admin/option'
+
+const ModelConfig = () => {
+  const { lng } = useI18n()
+  const { t } = useTranslationClientSide(lng, 'common')
+  const queryClient = useQueryClient()
+
+  const { message } = useMessage({
+    warningBoxBg: 'var(--Yellow-50, #FFFAEB)',
+    warningIconBg: 'var(--Yellow-500, #F79009)',
+    warningIconFill: 'white',
+
+    successBoxBg: 'var(--Green-50, #EDFBF3)',
+    successIconBg: 'var(--Green-600, #039855)',
+    successIconFill: 'white'
+  })
+
+  const [allSupportChannel, setAllSupportChannel] = useState<string[]>([])
+  const [allSupportChannelWithMode, setAllSupportChannelWithMode] = useState<{
+    [key in ChannelType]: string[]
+  }>({})
+
+  const [defaultModel, setDefaultModel] = useState<DefaultChannelModel>({})
+  const [defaultModelMapping, setDefaultModelMapping] = useState<DefaultChannelModelMapping>({})
+
+  const { isLoading: isChannelTypeNamesLoading, data: channelTypeNames } = useQuery({
+    queryKey: [QueryKey.GetChannelTypeNames],
+    queryFn: () => getChannelTypeNames()
+  })
+
+  const { isLoading: isBuiltInSupportModelsLoading, data: builtInSupportModels } = useQuery({
+    queryKey: [QueryKey.GetAllChannelModes],
+    queryFn: () => getChannelBuiltInSupportModels()
+  })
+
+  const { isLoading: isOptionLoading, data: optionData } = useQuery({
+    queryKey: [QueryKey.GetOption],
+    queryFn: () => getOption(),
+    onSuccess: (data) => {
+      if (!data) return
+
+      const defaultModels: DefaultChannelModel = JSON.parse(data.DefaultChannelModels)
+      const defaultModelMappings: DefaultChannelModelMapping = JSON.parse(
+        data.DefaultChannelModelMapping
+      )
+
+      setDefaultModel(defaultModels)
+      setDefaultModelMapping(defaultModelMappings)
+    }
+  })
+
+  useEffect(() => {
+    if (!channelTypeNames || !builtInSupportModels) return
+
+    // 1. 处理 allSupportChannel
+    const supportedChannels = Object.entries(channelTypeNames)
+      .filter(([channel]) => channel in builtInSupportModels)
+      .map(([_, name]) => name)
+
+    setAllSupportChannel(supportedChannels)
+
+    // 2. 处理 allSupportChannelWithMode
+    // 渠道类型可能出现在 channelTypeNames 中，但不在 builtInSupportModels 中，所以需要过滤
+    // 但在 builtInSupportModels 中，则一定在 channelTypeNames 中，所以 以 builtInSupportModels 为主
+    const channelWithModes = Object.entries(channelTypeNames)
+      .filter(([channelType, _]) => channelType in builtInSupportModels)
+      .reduce((acc, [channelType, channelName]) => {
+        const modelInfos = builtInSupportModels[channelType as ChannelType] || []
+        const models = [...new Set(modelInfos.map((info) => info.model))]
+
+        return {
+          ...acc,
+          [channelType]: models
+        }
+      }, {} as { [key in ChannelType]: string[] })
+
+    setAllSupportChannelWithMode(channelWithModes)
+  }, [channelTypeNames, builtInSupportModels])
+
+  // form schema
+  const itemSchema = z.object({
+    type: z.number(),
+    defaultMode: z.array(z.string()),
+    defaultModeMapping: z
+      .record(z.string(), z.string())
+      .refine((mapping) => {
+        // 检查所有值不能为空字符串
+        return Object.values(mapping).every((value) => value.trim() !== '')
+      })
+      .default({})
+  })
+
+  const schema = z.array(itemSchema)
+
+  type ConfigItem = z.infer<typeof itemSchema>
+  type FormData = ConfigItem[]
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    setValue,
+    watch,
+    formState: { errors },
+    control
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+    defaultValues: [],
+    mode: 'onChange',
+    reValidateMode: 'onChange'
+  })
+
+  useEffect(() => {
+    if (!defaultModel || !defaultModelMapping) return
+    // Only proceed if both defaultModel and defaultModelMapping are available
+    if (Object.keys(defaultModel).length === 0) return
+
+    // Transform the data into form format
+    const formData: FormData = Object.entries(defaultModel).map(([channelType, modes]) => {
+      return {
+        type: Number(channelType),
+        defaultMode: modes || [], // Using first mode as default
+        defaultModeMapping: defaultModelMapping[channelType as ChannelType] || {}
+      }
+    })
+
+    // Reset form with the new values
+    reset(formData)
+  }, [defaultModel, defaultModelMapping, reset])
+
+  const handleAddDefaultModel = () => {
+    const newItem = {
+      type: undefined, // Default type value
+      defaultMode: [],
+      defaultModeMapping: {}
+    }
+
+    // Get current form values
+    const currentValues = watch()
+    // Create new array with new item at the beginning
+    const newValues = [newItem, ...Object.values(currentValues)]
+    // Reset form with new values
+    reset(newValues)
+  }
+
+  const formValues = watch()
+
+  const formValuesArray: FormData = Array.isArray(formValues)
+    ? formValues
+    : Object.values(formValues)
+
+  const batchOptionMutation = useMutation({
+    mutationFn: batchOption,
+    onSuccess: () => {
+      message({
+        title: t('globalConfigs.saveDefaultModelSuccess'),
+        status: 'success'
+      })
+    }
+  })
+
+  const transformFormDataToConfig = (formData: FormData): BatchOptionData => {
+    // 初始化两个对象
+    const defaultChannelModelMapping: Record<string, Record<string, string>> = {}
+    const defaultChannelModels: Record<string, string[]> = {}
+
+    // 遍历 FormData
+    formData.forEach((item) => {
+      const type = item.type.toString()
+
+      // 处理 DefaultChannelModelMapping
+      if (Object.keys(item.defaultModeMapping).length > 0) {
+        defaultChannelModelMapping[type] = item.defaultModeMapping
+      }
+
+      // 处理 DefaultChannelModels
+      if (item.defaultMode.length > 0) {
+        defaultChannelModels[type] = item.defaultMode
+      }
+    })
+
+    return {
+      // 转换为 JSON 字符串
+      DefaultChannelModelMapping: JSON.stringify(defaultChannelModelMapping),
+      DefaultChannelModels: JSON.stringify(defaultChannelModels)
+    }
+  }
+
+  const resetForm = () => {
+    reset()
+  }
+
+  type FieldErrorType =
+    | FieldError
+    | FieldErrorsImpl<{
+        type: number
+        defaultMode: string[]
+        defaultModeMapping: Record<string, string>
+      }>
+
+  const getFirstErrorMessage = (errors: FieldErrors<FormData>): string => {
+    // Iterate through top-level errors
+    for (const index in errors) {
+      const fieldError = errors[index] as FieldErrorType
+      if (!fieldError) continue
+
+      // Check if error is an object
+      if (typeof fieldError === 'object') {
+        // If it has a direct message property
+        if ('message' in fieldError && fieldError.message) {
+          return `Item ${Number(index) + 1}: ${fieldError.message}`
+        }
+
+        // Iterate through nested field errors
+        const errorKeys = Object.keys(fieldError) as Array<keyof typeof fieldError>
+        for (const fieldName of errorKeys) {
+          const nestedError = fieldError[fieldName]
+          if (nestedError && typeof nestedError === 'object' && 'message' in nestedError) {
+            // Map field names to their display labels
+            const fieldLabel =
+              {
+                type: 'Type',
+                defaultMode: 'Default Mode',
+                defaultModeMapping: 'Model Mapping'
+              }[fieldName as string] || fieldName
+
+            return `Item ${Number(index) + 1} ${fieldLabel}: ${nestedError.message}`
+          }
+        }
+      }
+    }
+    return 'Form validation failed'
+  }
+
+  const onValidate = async (data: FormData) => {
+    try {
+      const batchOptionData: BatchOptionData = transformFormDataToConfig(data)
+      await batchOptionMutation.mutateAsync(batchOptionData)
+
+      queryClient.invalidateQueries({ queryKey: [QueryKey.GetOption] })
+      queryClient.invalidateQueries({ queryKey: [QueryKey.GetChannelTypeNames] })
+      queryClient.invalidateQueries({ queryKey: [QueryKey.GetAllChannelModes] })
+      resetForm()
+    } catch (error) {
+      message({
+        title: t('globalConfigs.saveDefaultModelFailed'),
+        status: 'error',
+        position: 'top',
+        duration: 2000,
+        isClosable: true,
+        description:
+          error instanceof Error ? error.message : t('globalConfigs.saveDefaultModelFailed')
+      })
+      console.error(error)
+    }
+  }
+
+  const onInvalid = (errors: FieldErrors<FormData>): void => {
+    console.error('errors', errors)
+
+    const errorMessage = getFirstErrorMessage(errors)
+
+    message({
+      title: errorMessage,
+      status: 'error',
+      position: 'top',
+      duration: 2000,
+      isClosable: true
+    })
+  }
+
+  const onSubmit = handleSubmit(onValidate, onInvalid)
+  return (
+    /*
+    顶级 Flex 容器的高度: calc(100vh - 16px - 24px - 12px - 32px - 36px)
+    ModelConfig 的高度: calc(100vh - 16px - 24px - 12px - 32px - 36px)- CommonConfig 的高度(152px) -两个 gap 的高度(36px × 2 = 72px)
+    = calc(100vh - 16px - 24px - 12px - 32px - 36px - 152px - 72px)
+    = calc(100vh - 344px)
+    */
+    <Flex w="full" gap="8px" flexDirection="row" flex="1" h="calc(100vh - 344px)">
+      {/* title */}
+      <Flex w="153px" pt="4px" alignItems="flex-start">
+        <Text
+          whiteSpace="nowrap"
+          color="black"
+          fontFamily="PingFang SC"
+          fontSize="16px"
+          fontStyle="normal"
+          fontWeight="500"
+          lineHeight="24px"
+          letterSpacing="0.15px">
+          {t('globalConfigs.model_config')}
+        </Text>
+      </Flex>
+      {/* -- title end */}
+
+      {/* config */}
+      <Flex h="full" flexDirection="column" gap="12px" flex="1" minW="0" overflow="hidden">
+        {/* add default model */}
+        <Flex justifyContent="space-between" alignItems="center" alignSelf="stretch" gap="16px">
+          <Text
+            whiteSpace="nowrap"
+            color="grayModern.600"
+            fontFamily="PingFang SC"
+            fontSize="14px"
+            fontStyle="normal"
+            fontWeight="500"
+            lineHeight="20px"
+            letterSpacing="0.1px">
+            {t('globalConfigs.defaultModel')}
+          </Text>
+          <Flex justifyContent="flex-end" alignItems="center" gap="15px" minW="0">
+            <Button
+              onClick={handleAddDefaultModel}
+              variant="outline"
+              display="flex"
+              padding="8px 14px"
+              justifyContent="center"
+              alignItems="center"
+              gap="6px"
+              borderRadius="6px"
+              border="1px solid"
+              borderColor="grayModern.250"
+              bg="white"
+              boxShadow="0px 1px 2px 0px rgba(19, 51, 107, 0.05), 0px 0px 1px 0px rgba(19, 51, 107, 0.08)">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="17"
+                height="16"
+                viewBox="0 0 17 16"
+                fill="none">
+                <path
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M8.93068 2.6665C9.29887 2.6665 9.59735 2.96498 9.59735 3.33317V7.33317H13.5974C13.9655 7.33317 14.264 7.63165 14.264 7.99984C14.264 8.36803 13.9655 8.6665 13.5974 8.6665H9.59735V12.6665C9.59735 13.0347 9.29887 13.3332 8.93068 13.3332C8.56249 13.3332 8.26402 13.0347 8.26402 12.6665V8.6665H4.26402C3.89583 8.6665 3.59735 8.36803 3.59735 7.99984C3.59735 7.63165 3.89583 7.33317 4.26402 7.33317H8.26402V3.33317C8.26402 2.96498 8.56249 2.6665 8.93068 2.6665Z"
+                  fill="#485264"
+                />
+              </svg>
+              <Text
+                whiteSpace="nowrap"
+                color="grayModern.600"
+                fontFamily="PingFang SC"
+                fontSize="12px"
+                fontStyle="normal"
+                fontWeight="500"
+                lineHeight="16px"
+                letterSpacing="0.5px">
+                {t('globalConfigs.addDefaultModel')}
+              </Text>
+            </Button>
+            <Button
+              onClick={onSubmit}
+              isDisabled={batchOptionMutation.isLoading}
+              isLoading={batchOptionMutation.isLoading}
+              variant="outline"
+              display="flex"
+              padding="8px 14px"
+              justifyContent="center"
+              alignItems="center"
+              gap="6px"
+              borderRadius="6px"
+              border="1px solid"
+              borderColor="brightBlue.300"
+              bg="white"
+              boxShadow="0px 1px 2px 0px rgba(19, 51, 107, 0.05), 0px 0px 1px 0px rgba(19, 51, 107, 0.08)">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="17"
+                height="16"
+                viewBox="0 0 17 16"
+                fill="none">
+                <path
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M11.2007 2.68532C11.1418 2.67118 11.0716 2.6669 10.7137 2.6669H6.26404V4.2669C6.26404 4.46458 6.26456 4.57275 6.27091 4.65047C6.27116 4.65357 6.27142 4.6565 6.27167 4.65927C6.27444 4.65952 6.27737 4.65978 6.28046 4.66003C6.35818 4.66638 6.46635 4.6669 6.66404 4.6669H11.1974C11.3951 4.6669 11.5032 4.66638 11.5809 4.66003C11.584 4.65978 11.587 4.65952 11.5897 4.65927C11.59 4.6565 11.5902 4.65357 11.5905 4.65047C11.5969 4.57275 11.5974 4.46458 11.5974 4.2669V2.94426C11.4719 2.82137 11.4323 2.78899 11.3934 2.76514C11.3338 2.72858 11.2687 2.70165 11.2007 2.68532ZM12.7354 2.1954L12.6936 2.15366C12.6804 2.14047 12.6673 2.12737 12.6544 2.11437C12.4627 1.92238 12.2938 1.75311 12.0901 1.62828C11.9111 1.51863 11.7161 1.43782 11.512 1.38882C11.2797 1.33305 11.0405 1.33328 10.7693 1.33353C10.7509 1.33355 10.7324 1.33356 10.7137 1.33356L6.10317 1.33356C5.93714 1.33356 5.78007 1.33356 5.63164 1.33443C5.62029 1.33385 5.60886 1.33356 5.59737 1.33356C5.58266 1.33356 5.56806 1.33404 5.55358 1.33498C5.25481 1.33746 4.99222 1.34428 4.76282 1.36303C4.38809 1.39364 4.04362 1.45935 3.72006 1.62421C3.2183 1.87988 2.81035 2.28782 2.55469 2.78959C2.38983 3.11315 2.32412 3.45762 2.2935 3.83235C2.26402 4.19314 2.26403 4.63605 2.26404 5.1727V10.8278C2.26403 11.3644 2.26402 11.8073 2.2935 12.1681C2.32412 12.5428 2.38983 12.8873 2.55469 13.2109C2.81035 13.7126 3.2183 14.1206 3.72006 14.3762C4.04362 14.5411 4.38809 14.6068 4.76282 14.6374C4.99222 14.6562 5.25481 14.663 5.55358 14.6655C5.56806 14.6664 5.58266 14.6669 5.59737 14.6669C5.60887 14.6669 5.62029 14.6666 5.63164 14.666C5.78007 14.6669 5.93713 14.6669 6.10316 14.6669H11.7583C11.9243 14.6669 12.0813 14.6669 12.2298 14.666C12.2411 14.6666 12.2525 14.6669 12.264 14.6669C12.2788 14.6669 12.2934 14.6664 12.3078 14.6655C12.6066 14.663 12.8692 14.6562 13.0986 14.6374C13.4733 14.6068 13.8178 14.5411 14.1413 14.3762C14.6431 14.1206 15.0511 13.7126 15.3067 13.2109C15.4716 12.8873 15.5373 12.5428 15.5679 12.1681C15.5974 11.8073 15.5974 11.3644 15.5974 10.8278V6.21722C15.5974 6.19855 15.5974 6.18004 15.5974 6.16167C15.5977 5.89042 15.5979 5.65125 15.5421 5.41896C15.4931 5.21488 15.4123 5.0198 15.3027 4.84085C15.1778 4.63716 15.0086 4.4682 14.8166 4.27657C14.8036 4.2636 14.7905 4.25052 14.7773 4.23732L12.7354 2.1954C12.7354 2.19546 12.7353 2.19535 12.7354 2.1954ZM12.9307 4.27637V4.28815C12.9307 4.45641 12.9307 4.62028 12.9194 4.75905C12.907 4.91145 12.8776 5.09127 12.7854 5.27222C12.6575 5.5231 12.4536 5.72708 12.2027 5.85491C12.0217 5.9471 11.8419 5.97648 11.6895 5.98893C11.5508 6.00027 11.3869 6.00025 11.2186 6.00023L6.66404 6.00023C6.65694 6.00023 6.64985 6.00023 6.64277 6.00023C6.47452 6.00025 6.31066 6.00027 6.17189 5.98893C6.01949 5.97648 5.83967 5.9471 5.65872 5.85491C5.40784 5.72708 5.20386 5.5231 5.07603 5.27222C4.98383 5.09127 4.95445 4.91145 4.942 4.75905C4.93066 4.62028 4.93068 4.45642 4.9307 4.28816C4.9307 4.28108 4.93071 4.27399 4.93071 4.2669V2.68747C4.91055 2.68886 4.89079 2.69035 4.8714 2.69193C4.57912 2.71581 4.42965 2.7591 4.32538 2.81222C4.0745 2.94005 3.87053 3.14403 3.7427 3.39491C3.68957 3.49918 3.64629 3.64865 3.62241 3.94092C3.59789 4.24098 3.59737 4.62918 3.59737 5.20023V10.8002C3.59737 11.3713 3.59789 11.7595 3.62241 12.0595C3.64629 12.3518 3.68957 12.5013 3.7427 12.6056C3.87053 12.8564 4.0745 13.0604 4.32538 13.1882C4.42965 13.2414 4.57912 13.2846 4.8714 13.3085C4.89079 13.3101 4.91055 13.3116 4.93071 13.313L4.9307 9.7123C4.93068 9.54404 4.93066 9.38018 4.942 9.24141C4.95445 9.08902 4.98383 8.90919 5.07603 8.72824C5.20386 8.47736 5.40784 8.27339 5.65872 8.14556C5.83967 8.05336 6.01949 8.02398 6.17189 8.01153C6.31066 8.00019 6.47452 8.00021 6.64278 8.00023H11.2186C11.3869 8.00021 11.5507 8.00019 11.6895 8.01153C11.8419 8.02398 12.0217 8.05336 12.2027 8.14556C12.4536 8.27339 12.6575 8.47736 12.7854 8.72824C12.8776 8.90919 12.907 9.08902 12.9194 9.24141C12.9307 9.38019 12.9307 9.54405 12.9307 9.71231L12.9307 13.313C12.9509 13.3116 12.9706 13.3101 12.99 13.3085C13.2823 13.2846 13.4318 13.2414 13.536 13.1882C13.7869 13.0604 13.9909 12.8564 14.1187 12.6056C14.1718 12.5013 14.2151 12.3518 14.239 12.0595C14.2635 11.7595 14.264 11.3713 14.264 10.8002V6.21722C14.264 5.85937 14.2598 5.7891 14.2456 5.73022C14.2293 5.6622 14.2023 5.59717 14.1658 5.53752C14.1342 5.48589 14.0875 5.43317 13.8345 5.18013L12.9307 4.27637ZM11.5974 13.3336V9.73356C11.5974 9.53588 11.5969 9.42771 11.5905 9.34999C11.5902 9.34689 11.59 9.34396 11.5897 9.3412C11.587 9.34094 11.584 9.34069 11.5809 9.34043C11.5032 9.33408 11.3951 9.33356 11.1974 9.33356H6.66404C6.46635 9.33356 6.35818 9.33408 6.28046 9.34043C6.27737 9.34069 6.27444 9.34094 6.27167 9.3412C6.27142 9.34396 6.27116 9.34689 6.27091 9.34999C6.26456 9.42771 6.26404 9.53588 6.26404 9.73356V13.3336H11.5974Z"
+                  fill="#0884DD"
+                />
+              </svg>
+              <Text
+                whiteSpace="nowrap"
+                color="brightBlue.600"
+                fontFamily="PingFang SC"
+                fontSize="12px"
+                fontStyle="normal"
+                fontWeight="500"
+                lineHeight="16px"
+                letterSpacing="0.5px">
+                {t('globalConfigs.saveDefaultModel')}
+              </Text>
+            </Button>
+          </Flex>
+        </Flex>
+
+        {/* default model */}
+
+        <Flex
+          w="full"
+          gap="12px"
+          alignSelf="stretch"
+          alignItems="flex-start"
+          flexDirection="column"
+          minH="0"
+          h="full"
+          // bg="red"
+          borderRadius="6px"
+          overflow="hidden"
+          overflowY="auto">
+          {isChannelTypeNamesLoading ||
+          isBuiltInSupportModelsLoading ||
+          isOptionLoading ||
+          formValuesArray?.length === 0 ? (
+            <Skeleton w="full" h="full" />
+          ) : (
+            formValuesArray &&
+            formValuesArray.length > 0 &&
+            channelTypeNames &&
+            formValuesArray.map((value, index) => {
+              return (
+                <Flex
+                  key={`${index}-${value.type}`}
+                  w="full"
+                  padding="24px 36px"
+                  alignSelf="stretch"
+                  borderRadius="4px"
+                  bg="grayModern.100"
+                  position="relative">
+                  <Button
+                    position="absolute"
+                    right="12px"
+                    top="12px"
+                    p="6px 4px"
+                    alignItems="center"
+                    size="sm"
+                    borderRadius="4px"
+                    variant="ghost"
+                    _hover={{
+                      bg: 'rgba(17, 24, 36, 0.05)',
+                      color: '#D92D20'
+                    }}
+                    onClick={() => {
+                      const currentValues = watch()
+                      const newValues = Object.values(currentValues).filter((_, i) => i !== index)
+                      reset(newValues)
+                    }}>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="18"
+                      height="18"
+                      viewBox="0 0 18 18"
+                      fill="none">
+                      <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="M8.41781 1.32788H9.58222C9.9456 1.32787 10.2625 1.32785 10.5242 1.34924C10.8014 1.37189 11.082 1.42222 11.3535 1.56052C11.7551 1.76516 12.0816 2.09169 12.2863 2.49331C12.4246 2.76473 12.4749 3.04538 12.4975 3.32262C12.5156 3.54319 12.5184 3.80297 12.5188 4.09677H15.23C15.6442 4.09677 15.98 4.43256 15.98 4.84677C15.98 5.26098 15.6442 5.59677 15.23 5.59677H14.5956V12.6302C14.5956 13.1857 14.5956 13.6477 14.5648 14.0247C14.5327 14.4173 14.4635 14.7835 14.2875 15.1289C14.0165 15.6608 13.5841 16.0932 13.0522 16.3642C12.7067 16.5402 12.3406 16.6094 11.9479 16.6415C11.5709 16.6723 11.109 16.6723 10.5535 16.6723H7.4465C6.89102 16.6723 6.42911 16.6723 6.0521 16.6415C5.65943 16.6094 5.29331 16.5402 4.94785 16.3642C4.41598 16.0932 3.98355 15.6608 3.71255 15.1289C3.53653 14.7835 3.46733 14.4173 3.43525 14.0247C3.40444 13.6477 3.40445 13.1857 3.40446 12.6303L3.40446 5.59677H2.77002C2.35581 5.59677 2.02002 5.26098 2.02002 4.84677C2.02002 4.43256 2.35581 4.09677 2.77002 4.09677H5.4812C5.48164 3.80297 5.48446 3.54319 5.50248 3.32262C5.52513 3.04538 5.57547 2.76473 5.71377 2.49331C5.9184 2.09169 6.24493 1.76516 6.64655 1.56052C6.91798 1.42222 7.19862 1.37189 7.47586 1.34924C7.73755 1.32785 8.05442 1.32787 8.41781 1.32788ZM4.90446 5.59677V12.5997C4.90446 13.1935 4.90505 13.5939 4.93026 13.9025C4.95477 14.2024 4.99874 14.3492 5.04906 14.4479C5.17625 14.6976 5.37921 14.9005 5.62883 15.0277C5.72759 15.078 5.87434 15.122 6.17425 15.1465C6.48291 15.1717 6.88323 15.1723 7.47713 15.1723H10.5229C11.1168 15.1723 11.5171 15.1717 11.8258 15.1465C12.1257 15.122 12.2724 15.078 12.3712 15.0277C12.6208 14.9005 12.8238 14.6976 12.951 14.4479C13.0013 14.3492 13.0453 14.2024 13.0698 13.9025C13.095 13.5939 13.0956 13.1935 13.0956 12.5997V5.59677H4.90446ZM11.0188 4.09677H6.98126C6.98179 3.80602 6.98446 3.60435 6.9975 3.44477C7.01257 3.26029 7.03768 3.19902 7.05028 3.17429C7.1111 3.05492 7.20816 2.95786 7.32754 2.89703C7.35226 2.88444 7.41353 2.85933 7.59801 2.84425C7.79124 2.82847 8.04618 2.82788 8.44624 2.82788H9.55379C9.95385 2.82788 10.2088 2.82847 10.402 2.84425C10.5865 2.85933 10.6478 2.88444 10.6725 2.89703C10.7919 2.95786 10.8889 3.05492 10.9498 3.17429C10.9623 3.19902 10.9875 3.26029 11.0025 3.44477C11.0156 3.60435 11.0182 3.80602 11.0188 4.09677ZM7.61557 7.90399C8.02978 7.90399 8.36557 8.23977 8.36557 8.65399V12.1151C8.36557 12.5293 8.02978 12.8651 7.61557 12.8651C7.20136 12.8651 6.86557 12.5293 6.86557 12.1151V8.65399C6.86557 8.23977 7.20136 7.90399 7.61557 7.90399ZM10.3845 7.90399C10.7987 7.90399 11.1345 8.23977 11.1345 8.65399V12.1151C11.1345 12.5293 10.7987 12.8651 10.3845 12.8651C9.97024 12.8651 9.63446 12.5293 9.63446 12.1151V8.65399C9.63446 8.23977 9.97024 7.90399 10.3845 7.90399Z"
+                        fill="currentcolor"
+                      />
+                    </svg>
+                  </Button>
+
+                  <VStack
+                    w="full"
+                    spacing="24px"
+                    justifyContent="center"
+                    alignItems="center"
+                    align="stretch">
+                    <FormControl isRequired>
+                      <Controller
+                        name={`${index}.type`}
+                        control={control}
+                        render={({ field }) => {
+                          // Get current form types
+                          const currentFormTypes = Object.values(formValues)
+                            .map((item) => String(item.type))
+                            .filter(
+                              (type): type is ChannelType =>
+                                type !== undefined && type in channelTypeNames
+                            )
+                            .map((type) => channelTypeNames[type])
+
+                          // Filter available types
+                          const availableTypes = allSupportChannel.filter(
+                            (channelType) =>
+                              !currentFormTypes.includes(channelType) ||
+                              // 避免编辑时当前选中值"消失"的问题，即当前选择项也包含
+                              (field.value &&
+                                channelTypeNames[String(field.value) as ChannelType] ===
+                                  channelType)
+                          )
+
+                          const initSelectedItem = field.value
+                            ? channelTypeNames[String(field.value) as ChannelType]
+                            : undefined
+
+                          return (
+                            <SingleSelectCombobox<string>
+                              dropdownItems={availableTypes}
+                              initSelectedItem={initSelectedItem}
+                              setSelectedItem={(channelName: string) => {
+                                if (channelName) {
+                                  const channelType = Object.entries(channelTypeNames).find(
+                                    ([_, name]) => name === channelName
+                                  )?.[0]
+
+                                  if (channelType) {
+                                    const defaultModelField =
+                                      defaultModel[channelType as ChannelType]
+                                    const defaultModelMappingField =
+                                      defaultModelMapping[channelType as ChannelType]
+
+                                    field.onChange(Number(channelType))
+                                    setValue(`${index}.defaultMode`, defaultModelField || [])
+                                    setValue(
+                                      `${index}.defaultModeMapping`,
+                                      defaultModelMappingField || {}
+                                    )
+                                  }
+                                }
+                              }}
+                              handleDropdownItemFilter={(
+                                dropdownItems: string[],
+                                inputValue: string
+                              ) => {
+                                const lowerCasedInput = inputValue.toLowerCase()
+                                return dropdownItems.filter(
+                                  (item) =>
+                                    !inputValue || item.toLowerCase().includes(lowerCasedInput)
+                                )
+                              }}
+                              handleDropdownItemDisplay={(item: string) => (
+                                <Text
+                                  color="grayModern.600"
+                                  fontFamily="PingFang SC"
+                                  fontSize="12px"
+                                  fontStyle="normal"
+                                  fontWeight={400}
+                                  lineHeight="16px"
+                                  letterSpacing="0.048px">
+                                  {item}
+                                </Text>
+                              )}
+                            />
+                          )
+                        }}
+                      />
+                    </FormControl>
+
+                    <FormControl>
+                      <Controller
+                        name={`${index}.defaultMode`}
+                        control={control}
+                        render={({ field }) => {
+                          // Get the current type value from the form
+                          const currentType = watch(`${index}.type`)
+                          const dropdownItems = currentType
+                            ? allSupportChannelWithMode[String(currentType) as ChannelType] || []
+                            : []
+
+                          const handleSetCustomModel = (
+                            selectedItems: string[],
+                            setSelectedItems: Dispatch<SetStateAction<string[]>>,
+                            customModeName: string,
+                            setCustomModeName: Dispatch<SetStateAction<string>>
+                          ) => {
+                            if (customModeName.trim()) {
+                              const exists = field.value.some(
+                                (item) => item === customModeName.trim()
+                              )
+
+                              if (!exists) {
+                                field.onChange([...field.value, customModeName.trim()])
+                                setCustomModeName('')
+                              }
+                            }
+                          }
+
+                          const handleModelFilteredDropdownItems = (
+                            dropdownItems: string[],
+                            selectedItems: string[],
+                            inputValue: string
+                          ) => {
+                            const lowerCasedInputValue = inputValue.toLowerCase()
+
+                            return dropdownItems.filter(
+                              (item) =>
+                                !selectedItems.includes(item) &&
+                                item.toLowerCase().includes(lowerCasedInputValue)
+                            )
+                          }
+
+                          return (
+                            <MultiSelectCombobox<string>
+                              dropdownItems={dropdownItems || []}
+                              selectedItems={field.value || []} // Use field.value for selected items
+                              setSelectedItems={(models) => {
+                                field.onChange(models)
+                              }}
+                              handleFilteredDropdownItems={handleModelFilteredDropdownItems}
+                              handleDropdownItemDisplay={(item) => (
+                                <Text
+                                  color="grayModern.600"
+                                  fontFamily="PingFang SC"
+                                  fontSize="12px"
+                                  fontWeight={500}
+                                  lineHeight="16px"
+                                  letterSpacing="0.5px">
+                                  {item}
+                                </Text>
+                              )}
+                              handleSelectedItemDisplay={(item) => (
+                                <Text
+                                  color="grayModern.900"
+                                  fontFamily="PingFang SC"
+                                  fontSize="14px"
+                                  fontStyle="normal"
+                                  fontWeight={400}
+                                  lineHeight="20px"
+                                  letterSpacing="0.25px">
+                                  {item}
+                                </Text>
+                              )}
+                              handleSetCustomSelectedItem={handleSetCustomModel}
+                            />
+                          )
+                        }}
+                      />
+                    </FormControl>
+
+                    <FormControl>
+                      <Controller
+                        name={`${index}.defaultModeMapping`}
+                        control={control}
+                        render={({ field }) => {
+                          const defaultMode = watch(`${index}.defaultMode`)
+                          const defaultModeMapping = watch(`${index}.defaultModeMapping`)
+
+                          return (
+                            <ConstructMappingComponent
+                              mapKeys={defaultMode}
+                              mapData={defaultModeMapping}
+                              setMapData={(mapping) => {
+                                field.onChange(mapping)
+                              }}
+                            />
+                          )
+                        }}
+                      />
+                    </FormControl>
+                  </VStack>
+                </Flex>
+              )
+            })
+          )}
+        </Flex>
+      </Flex>
+      {/* -- config end */}
+    </Flex>
+  )
+}
+
+export default ModelConfig
diff --git a/frontend/providers/aiproxy/app/[lng]/(admin)/global-configs/page.tsx b/frontend/providers/aiproxy/app/[lng]/(admin)/global-configs/page.tsx
new file mode 100644
index 000000000000..876e2bf812fb
--- /dev/null
+++ b/frontend/providers/aiproxy/app/[lng]/(admin)/global-configs/page.tsx
@@ -0,0 +1,259 @@
+'use client'
+import { Button, Divider, Flex, Text, useDisclosure } from '@chakra-ui/react'
+import { useTranslationClientSide } from '@/app/i18n/client'
+import { useI18n } from '@/providers/i18n/i18nContext'
+import CommonConfig from './components/CommonConfig'
+import ModelConfig from './components/ModelConfig'
+import { getOption, uploadOptions } from '@/api/platform'
+import { QueryKey } from '@/types/query-key'
+import { useMutation, useQueryClient, useQuery } from '@tanstack/react-query'
+import { useMessage } from '@sealos/ui/src/components'
+import { useRef } from 'react'
+import { downloadJson } from '@/utils/common'
+
+export default function GlobalConfigPage() {
+  const { lng } = useI18n()
+  const { t } = useTranslationClientSide(lng, 'common')
+
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const { message } = useMessage({
+    warningBoxBg: 'var(--Yellow-50, #FFFAEB)',
+    warningIconBg: 'var(--Yellow-500, #F79009)',
+    warningIconFill: 'white',
+
+    successBoxBg: 'var(--Green-50, #EDFBF3)',
+    successIconBg: 'var(--Green-600, #039855)',
+    successIconFill: 'white'
+  })
+
+  const queryClient = useQueryClient()
+
+  const {
+    isFetching: isOptionFetching,
+    data: optionData,
+    refetch
+  } = useQuery({
+    queryKey: [QueryKey.GetOption],
+    queryFn: () => getOption(),
+    refetchOnReconnect: false,
+    enabled: false
+  })
+
+  const uploadMutation = useMutation({
+    mutationFn: uploadOptions
+  })
+
+  const handleExport = async () => {
+    const result = await refetch()
+    const dataToExport = result.data || []
+    downloadJson(dataToExport, 'global_configs')
+  }
+
+  const handleImport = () => {
+    fileInputRef.current?.click()
+  }
+
+  const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    if (!file) return
+
+    const formData = new FormData()
+    formData.append('file', file)
+
+    try {
+      await uploadMutation.mutateAsync(formData)
+      message({
+        title: t('dashboard.importSuccess'),
+        status: 'success',
+        duration: 3000,
+        isClosable: true
+      })
+      queryClient.invalidateQueries([QueryKey.GetOption])
+      queryClient.invalidateQueries([QueryKey.GetCommonConfig])
+    } catch (error) {
+      console.error('Import error:', error)
+      message({
+        title: t('dashboard.importError'),
+        status: 'error',
+        duration: 3000,
+        isClosable: true
+      })
+    } finally {
+      if (fileInputRef.current) {
+        fileInputRef.current.value = ''
+      }
+    }
+  }
+
+  return (
+    <Flex pt="4px" pb="12px" pr="12px" pl="0px" h="100vh" width="full">
+      <Flex
+        h="calc(100vh - 16px)"
+        bg="white"
+        gap="36px"
+        pt="24px"
+        pb="12px"
+        px="32px"
+        flexDirection="column"
+        borderRadius="12px"
+        w="full"
+        flex="1">
+        {/* header */}
+        <Flex
+          h="32px"
+          w="full"
+          alignSelf="stretch"
+          alignItems="center"
+          justifyContent="space-between">
+          <Text
+            whiteSpace="nowrap"
+            color="black"
+            fontFamily="PingFang SC"
+            fontSize="20px"
+            fontStyle="normal"
+            fontWeight="500"
+            lineHeight="26px"
+            letterSpacing="0.15px">
+            {t('global_configs.title')}
+          </Text>
+
+          <Flex justifyContent="flex-end" alignContent="center" gap="12px">
+            <>
+              <input
+                type="file"
+                ref={fileInputRef}
+                onChange={handleFileChange}
+                accept=".json"
+                style={{ display: 'none' }}
+              />
+              <Button
+                onClick={handleImport}
+                isLoading={uploadMutation.isLoading}
+                display="flex"
+                padding="8px 14px"
+                justifyContent="center"
+                alignItems="center"
+                gap="6px"
+                borderRadius="6px"
+                bg="#111824"
+                boxShadow="0px 1px 2px 0px rgba(19, 51, 107, 0.05), 0px 0px 1px 0px rgba(19, 51, 107, 0.08)"
+                color="white"
+                fontSize="12px"
+                fontFamily="PingFang SC"
+                fontWeight="500"
+                whiteSpace="nowrap"
+                lineHeight="16px"
+                letterSpacing="0.5px"
+                _hover={{
+                  transform: 'scale(1.05)',
+                  transition: 'transform 0.2s ease'
+                }}
+                _active={{
+                  transform: 'scale(0.92)',
+                  animation: 'pulse 0.3s ease'
+                }}
+                sx={{
+                  '@keyframes pulse': {
+                    '0%': { transform: 'scale(0.92)' },
+                    '50%': { transform: 'scale(0.96)' },
+                    '100%': { transform: 'scale(0.92)' }
+                  }
+                }}>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  fill="none">
+                  <path
+                    d="M4.67403 1.54568C4.67403 1.42836 4.57892 1.33325 4.4616 1.33325C2.77074 1.33325 1.40002 2.70397 1.40002 4.39483V11.605C1.40002 13.2959 2.77074 14.6666 4.4616 14.6666H11.6718C13.3626 14.6666 14.7334 13.2959 14.7334 11.605V4.39483C14.7334 2.70397 13.3626 1.33325 11.6718 1.33325H10.1347C9.76646 1.33325 9.46799 1.63173 9.46799 1.99992C9.46799 2.36811 9.76646 2.66659 10.1347 2.66659H11.6718C12.6263 2.66659 13.4 3.44035 13.4 4.39483V11.605C13.4 12.5595 12.6263 13.3333 11.6718 13.3333H4.4616C3.50712 13.3333 2.73336 12.5595 2.73336 11.605V4.39483C2.73336 3.44035 3.50712 2.66659 4.4616 2.66659C4.57892 2.66659 4.67403 2.57148 4.67403 2.45416V1.54568Z"
+                    fill="white"
+                  />
+                  <path
+                    d="M7.44956 4.7593C7.34366 4.01775 7.12184 3.5521 6.74895 3.28889C5.86143 2.66241 5.20264 2.6666 5.10574 2.66722L5.09932 2.66725H4.43265V1.33392H5.09932C5.33405 1.33392 6.3067 1.34467 7.51785 2.1996C8.33657 2.77751 8.64402 3.69217 8.7695 4.5708C8.87184 5.28739 8.86613 6.09283 8.86087 6.83489C8.85974 6.99521 8.85862 7.15259 8.85862 7.30546C8.85862 7.73754 8.84937 8.14339 8.83572 8.50719L9.39676 7.94615C9.65711 7.6858 10.0792 7.6858 10.3396 7.94615C10.5999 8.2065 10.5999 8.6286 10.3396 8.88896L8.58245 10.6461C8.441 10.7875 8.25178 10.8521 8.06671 10.8399C7.88163 10.8521 7.69242 10.7875 7.55096 10.6461L5.79384 8.88896C5.53349 8.6286 5.53349 8.2065 5.79384 7.94615C6.05419 7.6858 6.4763 7.6858 6.73665 7.94615L7.41135 8.62084L7.49316 8.70266C7.51162 8.29469 7.52529 7.81909 7.52529 7.30546C7.52529 7.12915 7.52639 6.95576 7.52746 6.78545C7.53213 6.04759 7.53644 5.36763 7.44956 4.7593Z"
+                    fill="white"
+                  />
+                </svg>
+                {t('global_configs.import')}
+              </Button>
+            </>
+            <Button
+              onClick={handleExport}
+              isLoading={isOptionFetching}
+              display="flex"
+              padding="8px 14px"
+              justifyContent="center"
+              alignItems="center"
+              gap="6px"
+              borderRadius="6px"
+              bg="#111824"
+              boxShadow="0px 1px 2px 0px rgba(19, 51, 107, 0.05), 0px 0px 1px 0px rgba(19, 51, 107, 0.08)"
+              color="white"
+              fontSize="12px"
+              fontFamily="PingFang SC"
+              fontWeight="500"
+              whiteSpace="nowrap"
+              lineHeight="16px"
+              letterSpacing="0.5px"
+              transition="all 0.2s ease"
+              _hover={{
+                transform: 'scale(1.05)',
+                transition: 'transform 0.2s ease'
+              }}
+              _active={{
+                transform: 'scale(0.92)',
+                animation: 'pulse 0.3s ease'
+              }}
+              sx={{
+                '@keyframes pulse': {
+                  '0%': { transform: 'scale(0.92)' },
+                  '50%': { transform: 'scale(0.96)' },
+                  '100%': { transform: 'scale(0.92)' }
+                }
+              }}>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none">
+                <path
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M7.52851 1.52876C7.78886 1.26841 8.21097 1.26841 8.47132 1.52876L11.138 4.19543C11.3983 4.45577 11.3983 4.87788 11.138 5.13823C10.8776 5.39858 10.4555 5.39858 10.1952 5.13823L8.66659 3.60964V10.0002C8.66659 10.3684 8.36811 10.6668 7.99992 10.6668C7.63173 10.6668 7.33325 10.3684 7.33325 10.0002V3.60964L5.80466 5.13823C5.54431 5.39858 5.1222 5.39858 4.86185 5.13823C4.6015 4.87788 4.6015 4.45577 4.86185 4.19543L7.52851 1.52876ZM1.99992 7.3335C2.36811 7.3335 2.66659 7.63197 2.66659 8.00016V10.8002C2.66659 11.3712 2.6671 11.7594 2.69162 12.0595C2.7155 12.3517 2.75878 12.5012 2.81191 12.6055C2.93974 12.8564 3.14372 13.0603 3.3946 13.1882C3.49887 13.2413 3.64833 13.2846 3.94061 13.3085C4.24067 13.333 4.62887 13.3335 5.19992 13.3335H10.7999C11.371 13.3335 11.7592 13.333 12.0592 13.3085C12.3515 13.2846 12.501 13.2413 12.6052 13.1882C12.8561 13.0603 13.0601 12.8564 13.1879 12.6055C13.2411 12.5012 13.2843 12.3517 13.3082 12.0595C13.3327 11.7594 13.3333 11.3712 13.3333 10.8002V8.00016C13.3333 7.63197 13.6317 7.3335 13.9999 7.3335C14.3681 7.3335 14.6666 7.63197 14.6666 8.00016V10.8277C14.6666 11.3644 14.6666 11.8073 14.6371 12.168C14.6065 12.5428 14.5408 12.8872 14.3759 13.2108C14.1203 13.7126 13.7123 14.1205 13.2106 14.3762C12.887 14.541 12.5425 14.6068 12.1678 14.6374C11.807 14.6668 11.3641 14.6668 10.8275 14.6668H5.17237C4.63573 14.6668 4.19283 14.6668 3.83204 14.6374C3.4573 14.6068 3.11283 14.541 2.78928 14.3762C2.28751 14.1205 1.87956 13.7126 1.6239 13.2108C1.45904 12.8872 1.39333 12.5428 1.36271 12.168C1.33324 11.8073 1.33324 11.3643 1.33325 10.8277L1.33325 8.00016C1.33325 7.63197 1.63173 7.3335 1.99992 7.3335Z"
+                  fill="white"
+                />
+              </svg>
+              {t('global_configs.export')}
+            </Button>
+          </Flex>
+        </Flex>
+        {/* header end */}
+
+        {/* config */}
+        {/*
+        100vh - 16px (父元素上下padding: 4px + 12px)
+        24px (顶部padding: pt="24px")
+        12px (底部padding: pb="12px")
+        32px (header高度)
+        36px (flex gap间距)
+        */}
+        <Flex
+          h="calc(100vh - 16px - 24px - 12px - 32px - 36px)"
+          alignSelf="center"
+          w="full"
+          maxWidth="690px"
+          gap="36px"
+          flexDirection="column"
+          flex="1"
+          overflow="hidden">
+          <CommonConfig />
+          <Divider />
+          <ModelConfig />
+        </Flex>
+        {/* -- config end */}
+      </Flex>
+    </Flex>
+  )
+}
diff --git a/frontend/providers/aiproxy/app/[lng]/(admin)/global-logs/page.tsx b/frontend/providers/aiproxy/app/[lng]/(admin)/global-logs/page.tsx
new file mode 100644
index 000000000000..2c3125575262
--- /dev/null
+++ b/frontend/providers/aiproxy/app/[lng]/(admin)/global-logs/page.tsx
@@ -0,0 +1,436 @@
+'use client'
+
+import { Box, Flex, Text, Button, Icon, Input } from '@chakra-ui/react'
+import { CurrencySymbol, MyTooltip } from '@sealos/ui'
+import { useMemo, useState } from 'react'
+
+import { getGlobalLogs, getEnabledMode } from '@/api/platform'
+import { useTranslationClientSide } from '@/app/i18n/client'
+import SelectDateRange from '@/components/common/SelectDateRange'
+import SwitchPage from '@/components/common/SwitchPage'
+import { BaseTable } from '@/components/table/BaseTable'
+import { useI18n } from '@/providers/i18n/i18nContext'
+import { GlobalLogItem } from '@/types/user/logs'
+import { useQuery } from '@tanstack/react-query'
+import { ColumnDef, getCoreRowModel, useReactTable } from '@tanstack/react-table'
+import { QueryKey } from '@/types/query-key'
+import { SingleSelectComboboxUnstyle } from '@/components/common/SingleSelectComboboxUnStyle'
+import { useBackendStore } from '@/store/backend'
+
+export default function Home(): React.JSX.Element {
+  const { lng } = useI18n()
+  const { t } = useTranslationClientSide(lng, 'common')
+  const { currencySymbol } = useBackendStore()
+
+  const [startTime, setStartTime] = useState(() => {
+    const currentDate = new Date()
+    currentDate.setMonth(currentDate.getMonth() - 1)
+    return currentDate
+  })
+  const [endTime, setEndTime] = useState(new Date())
+  const [groupId, setGroupId] = useState('')
+  const [name, setName] = useState('')
+  const [modelName, setModelName] = useState<string>('')
+  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(10)
+  const [logData, setLogData] = useState<GlobalLogItem[]>([])
+  const [total, setTotal] = useState(0)
+
+  const { data: models = [] } = useQuery([QueryKey.GetEnabledModels], () => getEnabledMode())
+
+  const { isLoading } = useQuery(
+    [QueryKey.GetGlobalLogs, page, pageSize, name, modelName, startTime, endTime, groupId],
+    () =>
+      getGlobalLogs({
+        page,
+        perPage: pageSize,
+        token_name: name,
+        model_name: modelName,
+        start_timestamp: startTime.getTime().toString(),
+        end_timestamp: endTime.getTime().toString(),
+        group_id: groupId
+      }),
+    {
+      onSuccess: (data) => {
+        if (!data?.logs) {
+          setLogData([])
+          setTotal(0)
+          return
+        }
+        setLogData(data?.logs || [])
+        setTotal(data?.total || 0)
+      }
+    }
+  )
+
+  const columns = useMemo<ColumnDef<GlobalLogItem>[]>(() => {
+    return [
+      {
+        header: t('GlobalLogs.groupId'),
+        accessorKey: 'group'
+      },
+      {
+        header: t('GlobalLogs.tokenName'),
+        accessorKey: 'token_name'
+      },
+      {
+        header: t('logs.model'),
+        accessorKey: 'model'
+      },
+      {
+        header: t('GlobalLogs.channel'),
+        accessorKey: 'channel'
+      },
+      {
+        header: t('logs.prompt_tokens'),
+        accessorKey: 'prompt_tokens'
+      },
+      {
+        header: t('logs.completion_tokens'),
+        accessorKey: 'completion_tokens'
+      },
+
+      {
+        header: t('logs.status'),
+        accessorFn: (row) => (row.code === 200 ? t('logs.success') : t('logs.failed')),
+        cell: ({ getValue }) => {
+          const value = getValue() as string
+          return (
+            <Text
+              color={
+                value === t('logs.success')
+                  ? 'var(--Green-600, #039855)'
+                  : 'var(--Red-600, #D92D20)'
+              }
+              fontFamily="PingFang SC"
+              fontSize="12px"
+              fontWeight={500}
+              lineHeight="16px"
+              letterSpacing="0.5px">
+              {value}
+            </Text>
+          )
+        },
+        id: 'status'
+      },
+      {
+        header: t('logs.time'),
+        accessorFn: (row) => new Date(row.created_at).toLocaleString(),
+        id: 'created_at'
+      },
+      {
+        accessorKey: 'used_amount',
+        id: 'used_amount',
+        header: () => {
+          return (
+            <Box position={'relative'}>
+              <MyTooltip placement="bottom-end" label={t('logs.total_price_tip')}>
+                <Flex alignItems={'center'} gap={'4px'}>
+                  <Text
+                    noOfLines={1}
+                    color="grayModern.600"
+                    fontFamily="PingFang SC"
+                    fontSize="12px"
+                    fontWeight={500}
+                    lineHeight="16px"
+                    letterSpacing="0.5px">
+                    {t('logs.total_price')}
+                  </Text>
+                  <CurrencySymbol type={currencySymbol} />
+                </Flex>
+              </MyTooltip>
+            </Box>
+          )
+        }
+      }
+    ]
+  }, [])
+
+  const table = useReactTable({
+    data: logData,
+    columns,
+    getCoreRowModel: getCoreRowModel()
+  })
+
+  return (
+    <Flex
+      pt="4px"
+      pb="12px"
+      pr="12px"
+      h="100vh"
+      width="full"
+      flexDirection="column"
+      overflow="hidden">
+      <Flex
+        bg="white"
+        px="32px"
+        pt="24px"
+        pb="8px"
+        gap="24px"
+        borderRadius="12px"
+        flexDirection="column"
+        h="full"
+        w="full"
+        flex="1">
+        {/* -- header */}
+        <Flex flexDirection="column" gap="16px" alignItems="flex-start">
+          <Flex
+            w="full"
+            h="32px"
+            justifyContent="space-between"
+            alignItems="center"
+            alignSelf="stretch">
+            <Text
+              color="black"
+              fontFamily="PingFang SC"
+              fontSize="20px"
+              fontStyle="normal"
+              fontWeight="500"
+              lineHeight="26px"
+              letterSpacing="0.15px">
+              {t('logs.call_log')}
+            </Text>
+            <Button
+              variant="outline"
+              _hover={{
+                transform: 'scale(1.05)',
+                transition: 'transform 0.2s ease'
+              }}
+              _active={{
+                transform: 'scale(0.92)',
+                animation: 'pulse 0.3s ease'
+              }}
+              sx={{
+                '@keyframes pulse': {
+                  '0%': { transform: 'scale(0.92)' },
+                  '50%': { transform: 'scale(0.96)' },
+                  '100%': { transform: 'scale(0.92)' }
+                }
+              }}
+              display="flex"
+              padding="8px"
+              justifyContent="center"
+              alignItems="center"
+              gap="8px"
+              borderRadius="6px"
+              border="1px solid #DFE2EA"
+              bg="white"
+              boxShadow="0px 1px 2px 0px rgba(19, 51, 107, 0.05), 0px 0px 1px 0px rgba(19, 51, 107, 0.08)"
+              onClick={() => {
+                setName('')
+                setModelName('')
+              }}>
+              <Icon
+                xmlns="http://www.w3.org/2000/svg"
+                width="16px"
+                height="16px"
+                viewBox="0 0 16 16"
+                fill="none">
+                <path
+                  d="M6.4354 14.638C5.1479 14.2762 4.0979 13.5684 3.2854 12.5145C2.4729 11.4606 2.06665 10.2473 2.06665 8.87454C2.06665 8.16346 2.1854 7.48656 2.4229 6.84385C2.6604 6.20113 2.9979 5.61181 3.4354 5.07589C3.5729 4.92619 3.74165 4.84809 3.94165 4.8416C4.14165 4.83512 4.3229 4.91321 4.4854 5.07589C4.6229 5.21311 4.6949 5.38152 4.7014 5.58113C4.7079 5.78073 4.64215 5.96785 4.50415 6.1425C4.20415 6.52923 3.9729 6.95338 3.8104 7.41496C3.6479 7.87653 3.56665 8.36306 3.56665 8.87454C3.56665 9.88501 3.86365 10.7865 4.45765 11.5789C5.05165 12.3713 5.81715 12.9107 6.75415 13.1971C6.91665 13.247 7.0509 13.3406 7.1569 13.4778C7.2629 13.6151 7.31615 13.7648 7.31665 13.9269C7.31665 14.1764 7.22915 14.373 7.05415 14.5167C6.87915 14.6605 6.6729 14.7009 6.4354 14.638ZM9.6979 14.638C9.4604 14.7004 9.25415 14.6567 9.07915 14.507C8.90415 14.3573 8.81665 14.1577 8.81665 13.9082C8.81665 13.7585 8.8699 13.6151 8.9764 13.4778C9.0829 13.3406 9.21715 13.247 9.37915 13.1971C10.3167 12.8977 11.0824 12.3551 11.6764 11.5691C12.2704 10.7832 12.5672 9.88501 12.5667 8.87454C12.5667 7.62703 12.1292 6.56665 11.2542 5.6934C10.3792 4.82015 9.31665 4.38352 8.06665 4.38352H8.0104L8.3104 4.68292C8.4479 4.82015 8.51665 4.9948 8.51665 5.20687C8.51665 5.41895 8.4479 5.5936 8.3104 5.73083C8.1729 5.86805 7.9979 5.93666 7.7854 5.93666C7.5729 5.93666 7.3979 5.86805 7.2604 5.73083L5.6854 4.15897C5.6104 4.08412 5.5574 4.00303 5.5264 3.91571C5.4954 3.82838 5.47965 3.73482 5.47915 3.63502C5.47915 3.53522 5.4949 3.44166 5.5264 3.35433C5.5579 3.26701 5.6109 3.18592 5.6854 3.11107L7.2604 1.53921C7.3979 1.40199 7.5729 1.33337 7.7854 1.33337C7.9979 1.33337 8.1729 1.40199 8.3104 1.53921C8.4479 1.67644 8.51665 1.85109 8.51665 2.06316C8.51665 2.27524 8.4479 2.44989 8.3104 2.58712L8.0104 2.88652H8.06665C9.74165 2.88652 11.1604 3.46661 12.3229 4.62678C13.4854 5.78696 14.0667 7.20288 14.0667 8.87454C14.0667 10.2343 13.6604 11.4444 12.8479 12.5048C12.0354 13.5652 10.9854 14.2762 9.6979 14.638Z"
+                  fill="#485264"
+                />
+              </Icon>
+            </Button>
+          </Flex>
+          <Flex gap="16px" flexDirection="column" alignItems="flex-start" alignSelf="stretch">
+            {/* -- the first row */}
+            <Flex
+              alignItems="flex-start"
+              justifyContent="space-between"
+              sx={{
+                transition: 'gap 0.3s ease',
+                '@media screen and (min-width: 1300px)': {
+                  gap: '160px',
+                  flexWrap: 'nowrap'
+                }
+              }}
+              gap="16px"
+              alignSelf="stretch"
+              flexWrap="wrap">
+              <Flex h="32px" gap="32px" alignItems="center" flex="0 0 auto">
+                <Text
+                  whiteSpace="nowrap"
+                  color="grayModern.900"
+                  fontFamily="PingFang SC"
+                  fontSize="12px"
+                  fontStyle="normal"
+                  fontWeight="500"
+                  lineHeight="16px"
+                  letterSpacing="0.5px">
+                  {t('GlobalLogs.keyName')}
+                </Text>
+                <Input
+                  w="500px"
+                  py="6px"
+                  px="12px"
+                  alignItems="center"
+                  borderRadius="4px"
+                  border="1px solid"
+                  borderColor="grayModern.200"
+                  bgColor="grayModern.50"
+                  _hover={{ borderColor: 'grayModern.300' }}
+                  _focus={{ borderColor: 'grayModern.300' }}
+                  _focusVisible={{ borderColor: 'grayModern.300' }}
+                  _active={{ borderColor: 'grayModern.300' }}
+                  placeholder={t('GlobalLogs.select_token_name')}
+                  _placeholder={{
+                    color: 'grayModern.500',
+                    fontFamily: 'PingFang SC',
+                    fontSize: '12px',
+                    fontWeight: 400,
+                    lineHeight: '16px',
+                    letterSpacing: '0.048px'
+                  }}
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                />
+              </Flex>
+
+              <Flex h="32px" gap="32px" alignItems="center" flex="0 0 auto">
+                <Text
+                  whiteSpace="nowrap"
+                  color="grayModern.900"
+                  fontFamily="PingFang SC"
+                  fontSize="12px"
+                  fontStyle="normal"
+                  fontWeight="500"
+                  lineHeight="16px"
+                  letterSpacing="0.5px">
+                  {t('logs.modal')}
+                </Text>
+
+                <SingleSelectComboboxUnstyle<string>
+                  dropdownItems={['all', ...models.map((item) => item.model)]}
+                  setSelectedItem={(value) => {
+                    if (value === 'all') {
+                      setModelName('')
+                    } else {
+                      setModelName(value)
+                    }
+                  }}
+                  handleDropdownItemFilter={(dropdownItems, inputValue) => {
+                    const lowerCasedInput = inputValue.toLowerCase()
+                    return dropdownItems.filter(
+                      (item) => !inputValue || item.toLowerCase().includes(lowerCasedInput)
+                    )
+                  }}
+                  handleDropdownItemDisplay={(dropdownItem) => {
+                    return (
+                      <Text
+                        color="grayModern.600"
+                        fontFamily="PingFang SC"
+                        fontSize="12px"
+                        fontStyle="normal"
+                        fontWeight={400}
+                        lineHeight="16px"
+                        letterSpacing="0.048px">
+                        {dropdownItem}
+                      </Text>
+                    )
+                  }}
+                  flexProps={{ w: '500px' }}
+                  placeholder={t('GlobalLogs.selectModel')}
+                />
+              </Flex>
+            </Flex>
+
+            {/* -- the first row end */}
+
+            {/* -- the second row */}
+            <Flex
+              alignItems="flex-start"
+              justifyContent="space-between"
+              sx={{
+                transition: 'gap 0.3s ease',
+                '@media screen and (min-width: 1300px)': {
+                  gap: '160px',
+                  flexWrap: 'nowrap'
+                }
+              }}
+              gap="16px"
+              alignSelf="stretch"
+              flexWrap="wrap">
+              <Flex h="32px" gap="32px" alignItems="center" flex="0 0 auto">
+                <Text
+                  whiteSpace="nowrap"
+                  color="grayModern.900"
+                  fontFamily="PingFang SC"
+                  fontSize="12px"
+                  fontStyle="normal"
+                  fontWeight="500"
+                  lineHeight="16px"
+                  letterSpacing="0.5px">
+                  {t('GlobalLogs.groupId')}
+                </Text>
+                <Input
+                  w="500px"
+                  py="6px"
+                  px="12px"
+                  alignItems="center"
+                  borderRadius="4px"
+                  border="1px solid"
+                  borderColor="grayModern.200"
+                  bgColor="grayModern.50"
+                  _hover={{ borderColor: 'grayModern.300' }}
+                  _focus={{ borderColor: 'grayModern.300' }}
+                  _focusVisible={{ borderColor: 'grayModern.300' }}
+                  _active={{ borderColor: 'grayModern.300' }}
+                  placeholder={t('GlobalLogs.selectGroupId')}
+                  _placeholder={{
+                    color: 'grayModern.500',
+                    fontFamily: 'PingFang SC',
+                    fontSize: '12px',
+                    fontWeight: 400,
+                    lineHeight: '16px',
+                    letterSpacing: '0.048px'
+                  }}
+                  value={groupId}
+                  onChange={(e) => setGroupId(e.target.value)}
+                />
+              </Flex>
+
+              <Flex h="32px" gap="32px" alignItems="center" flex="0 0 auto">
+                <Text
+                  whiteSpace="nowrap"
+                  color="grayModern.900"
+                  fontFamily="PingFang SC"
+                  fontSize="12px"
+                  fontStyle="normal"
+                  fontWeight="500"
+                  lineHeight="16px"
+                  letterSpacing="0.5px">
+                  {t('logs.time')}
+                </Text>
+                <SelectDateRange
+                  w="500px"
+                  startTime={startTime}
+                  setStartTime={setStartTime}
+                  endTime={endTime}
+                  setEndTime={setEndTime}
+                />
+              </Flex>
+            </Flex>
+            {/* -- the second row end */}
+          </Flex>
+        </Flex>
+        {/* -- header end */}
+
+        {/* -- table */}
+        <Flex gap="24px" flexDirection="column" flex="1">
+          <BaseTable table={table} isLoading={isLoading} />
+          <SwitchPage
+            m="0"
+            justifyContent={'end'}
+            currentPage={page}
+            totalPage={Math.ceil(total / pageSize)}
+            totalItem={total}
+            pageSize={pageSize}
+            setCurrentPage={(idx: number) => setPage(idx)}
+          />
+        </Flex>
+        {/* -- table end */}
+      </Flex>
+    </Flex>
+  )
+}
diff --git a/frontend/providers/aiproxy/app/[lng]/(admin)/layout.tsx b/frontend/providers/aiproxy/app/[lng]/(admin)/layout.tsx
index 6454303cbdd4..f3c187f8c9e1 100644
--- a/frontend/providers/aiproxy/app/[lng]/(admin)/layout.tsx
+++ b/frontend/providers/aiproxy/app/[lng]/(admin)/layout.tsx
@@ -1,17 +1,17 @@
-import { Flex } from '@chakra-ui/react'
+import { Box, Flex } from '@chakra-ui/react'
 
-export default function AdminLayout({ children }: { children: React.ReactNode }) {
+import SideBar from '@/components/admin/Sidebar'
+
+export default function UserLayout({ children }: { children: React.ReactNode }) {
   return (
-    <Flex
-      height="100vh"
-      width="100vw"
-      padding="4px 12px 12px 12px"
-      justify="center"
-      align="center"
-      bg="white">
-      <Flex borderRadius="12px" h="full" w="full" direction="column" padding="24px 32px 18px 32px">
+    <Flex height="full" width="full" direction="row">
+      <Box w="88px" h="full" minW="88px">
+        <SideBar />
+      </Box>
+      {/* Main Content */}
+      <Box w="full" h="full">
         {children}
-      </Flex>
+      </Box>
     </Flex>
   )
 }
diff --git a/frontend/providers/aiproxy/app/[lng]/(admin)/ns-manager/page.tsx b/frontend/providers/aiproxy/app/[lng]/(admin)/ns-manager/page.tsx
new file mode 100644
index 000000000000..54952dd2dc43
--- /dev/null
+++ b/frontend/providers/aiproxy/app/[lng]/(admin)/ns-manager/page.tsx
@@ -0,0 +1,556 @@
+'use client'
+
+import {
+  Box,
+  Flex,
+  Text,
+  Button,
+  Icon,
+  Input,
+  MenuItem,
+  MenuList,
+  Menu,
+  MenuButton
+} from '@chakra-ui/react'
+import { CurrencySymbol } from '@sealos/ui'
+import { useMemo, useState } from 'react'
+
+import { deleteGroup, getGroups, updateGroupQpm, updateGroupStatus } from '@/api/platform'
+import { useTranslationClientSide } from '@/app/i18n/client'
+import SwitchPage from '@/components/common/SwitchPage'
+import { BaseTable } from '@/components/table/BaseTable'
+import { useI18n } from '@/providers/i18n/i18nContext'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import {
+  ColumnDef,
+  getCoreRowModel,
+  useReactTable,
+  createColumnHelper
+} from '@tanstack/react-table'
+import { QueryKey } from '@/types/query-key'
+import { useBackendStore } from '@/store/backend'
+import { GroupInfo, GroupStatus } from '@/types/admin/group'
+import { useMessage } from '@sealos/ui'
+import { EditableTextNoLable } from '@/components/common/EditableTextNoLable'
+
+export default function Home(): React.JSX.Element {
+  const { lng } = useI18n()
+  const { t } = useTranslationClientSide(lng, 'common')
+  const { currencySymbol } = useBackendStore()
+  const { message } = useMessage({
+    warningBoxBg: 'var(--Yellow-50, #FFFAEB)',
+    warningIconBg: 'var(--Yellow-500, #F79009)',
+    warningIconFill: 'white',
+    successBoxBg: 'var(--Green-50, #EDFBF3)',
+    successIconBg: 'var(--Green-600, #039855)',
+    successIconFill: 'white'
+  })
+
+  const queryClient = useQueryClient()
+
+  const [groupId, setGroupId] = useState('')
+  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(10)
+  const [groupData, setGroupData] = useState<GroupInfo[]>([])
+  const [total, setTotal] = useState(0)
+
+  const { isLoading } = useQuery(
+    [QueryKey.GetGroups, page, pageSize, groupId],
+    () =>
+      getGroups({
+        page,
+        perPage: pageSize,
+        keyword: groupId
+      }),
+    {
+      onSuccess: (data) => {
+        if (!data?.groups) {
+          setGroupData([])
+          setTotal(0)
+          return
+        }
+        setGroupData(data?.groups || [])
+        setTotal(data?.total || 0)
+      }
+    }
+  )
+
+  const deleteGroupMutation = useMutation(({ id }: { id: string }) => deleteGroup(id), {
+    onSuccess() {
+      message({
+        status: 'success',
+        title: t('nsManager.deleteGroupSuccess'),
+        isClosable: true,
+        duration: 2000,
+        position: 'top'
+      })
+      queryClient.invalidateQueries([QueryKey.GetGroups])
+    },
+    onError(err: any) {
+      message({
+        status: 'warning',
+        title: t('nsManager.deleteGroupFailed'),
+        description: err?.message || t('nsManager.deleteGroupFailed'),
+        isClosable: true,
+        position: 'top'
+      })
+    }
+  })
+
+  const updateGroupStatusMutation = useMutation(
+    ({ id, status }: { id: string; status: number }) => updateGroupStatus(id, status),
+    {
+      onSuccess() {
+        message({
+          status: 'success',
+          title: t('nsManager.updateGroupStatusSuccess'),
+          isClosable: true,
+          duration: 2000,
+          position: 'top'
+        })
+        queryClient.invalidateQueries([QueryKey.GetGroups])
+      },
+      onError(err: any) {
+        message({
+          status: 'warning',
+          title: t('nsManager.updateGroupStatusFailed'),
+          description: err?.message || t('nsManager.updateGroupStatusFailed'),
+          isClosable: true,
+          position: 'top'
+        })
+      }
+    }
+  )
+
+  const updateGroupQpmMutation = useMutation(
+    ({ id, qpm }: { id: string; qpm: number }) => updateGroupQpm(id, qpm),
+    {
+      onSuccess() {
+        message({
+          status: 'success',
+          title: t('nsManager.updateGroupQpmSuccess'),
+          isClosable: true,
+          duration: 2000,
+          position: 'top'
+        })
+        queryClient.invalidateQueries([QueryKey.GetGroups])
+      },
+      onError(err: any) {
+        message({
+          status: 'warning',
+          title: t('nsManager.updateGroupQpmFailed'),
+          description: err?.message || t('nsManager.updateGroupQpmFailed'),
+          isClosable: true,
+          position: 'top'
+        })
+      }
+    }
+  )
+
+  // Update the button click handlers in the table actions column:
+  const handleStatusUpdate = (id: string, currentStatus: number) => {
+    const newStatus =
+      currentStatus === GroupStatus.DISABLED ? GroupStatus.ENABLED : GroupStatus.DISABLED
+    updateGroupStatusMutation.mutate({ id, status: newStatus })
+  }
+  const columnHelper = createColumnHelper<GroupInfo>()
+
+  const columns = useMemo<ColumnDef<GroupInfo>[]>(() => {
+    return [
+      {
+        header: t('nsManager.groupId'),
+        accessorKey: 'id'
+      },
+      {
+        header: t('nsManager.qpm'),
+        id: 'qpm',
+        cell: (info) => (
+          <EditableTextNoLable
+            value={info.row.original.qpm}
+            flexProps={{ gap: '2px' }}
+            onSubmit={(value) =>
+              updateGroupQpmMutation.mutate({
+                id: info.row.original.id,
+                qpm: Number(value)
+              })
+            }
+          />
+        )
+      },
+      {
+        header: t('nsManager.created_at'),
+        accessorFn: (row) => new Date(row.created_at).toLocaleString(),
+        id: 'created_at'
+      },
+      {
+        header: t('nsManager.accessed_at'),
+        accessorFn: (row) => {
+          if (row.accessed_at && row.accessed_at < 0) {
+            return t('key.unused')
+          }
+
+          return new Date(row.accessed_at).toLocaleString()
+        },
+        id: 'accessed_at'
+      },
+      {
+        header: t('nsManager.request_count'),
+        accessorKey: 'request_count'
+      },
+      {
+        header: t('nsManager.status'),
+        accessorFn: (row) =>
+          row.status === GroupStatus.ENABLED ? t('nsManager.enabled') : t('nsManager.disabled'),
+        cell: ({ getValue }) => {
+          const value = getValue() as string
+          return (
+            <Text
+              color={
+                value === t('nsManager.enabled')
+                  ? 'var(--Green-600, #039855)'
+                  : 'var(--Red-600, #D92D20)'
+              }
+              fontFamily="PingFang SC"
+              fontSize="12px"
+              fontWeight={500}
+              lineHeight="16px"
+              letterSpacing="0.5px">
+              {value}
+            </Text>
+          )
+        },
+        id: 'status'
+      },
+      {
+        accessorKey: 'used_amount',
+        id: 'used_amount',
+        header: () => {
+          return (
+            <Box position={'relative'}>
+              <Flex alignItems={'center'} gap={'4px'}>
+                <Text
+                  noOfLines={1}
+                  color="grayModern.600"
+                  fontFamily="PingFang SC"
+                  fontSize="12px"
+                  fontWeight={500}
+                  lineHeight="16px"
+                  letterSpacing="0.5px">
+                  {t('nsManager.used_amount')}
+                </Text>
+                <CurrencySymbol type={currencySymbol} />
+              </Flex>
+            </Box>
+          )
+        }
+      },
+      columnHelper.display({
+        id: 'actions',
+        header: () => (
+          <Text
+            color="grayModern.600"
+            fontFamily="PingFang SC"
+            fontSize="12px"
+            fontWeight={500}
+            lineHeight="16px"
+            letterSpacing="0.5px">
+            {t('nsManager.actions')}
+          </Text>
+        ),
+        cell: (info) => (
+          <Menu>
+            <MenuButton
+              display="inline-flex"
+              p="4px"
+              alignItems="center"
+              gap="6px"
+              borderRadius="6px"
+              transition="all 0.2s"
+              _hover={{ bg: 'gray.100' }}>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none">
+                <path
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M6.66663 3.33333C6.66663 2.59695 7.26358 2 7.99996 2C8.73634 2 9.33329 2.59695 9.33329 3.33333C9.33329 4.06971 8.73634 4.66667 7.99996 4.66667C7.26358 4.66667 6.66663 4.06971 6.66663 3.33333ZM6.66663 8C6.66663 7.26362 7.26358 6.66667 7.99996 6.66667C8.73634 6.66667 9.33329 7.26362 9.33329 8C9.33329 8.73638 8.73634 9.33333 7.99996 9.33333C7.26358 9.33333 6.66663 8.73638 6.66663 8ZM6.66663 12.6667C6.66663 11.9303 7.26358 11.3333 7.99996 11.3333C8.73634 11.3333 9.33329 11.9303 9.33329 12.6667C9.33329 13.403 8.73634 14 7.99996 14C7.26358 14 6.66663 13.403 6.66663 12.6667Z"
+                  fill="#485264"
+                />
+              </svg>
+            </MenuButton>
+            <MenuList
+              minW="88px"
+              w="88px"
+              p="6px"
+              gap="2px"
+              alignItems="flex-start"
+              bg="white"
+              borderRadius="6px"
+              boxShadow="0px 4px 10px 0px rgba(19, 51, 107, 0.10), 0px 0px 1px 0px rgba(19, 51, 107, 0.10)">
+              <MenuItem
+                display="flex"
+                p="6px 4px"
+                alignItems="center"
+                gap="8px"
+                alignSelf="stretch"
+                borderRadius="4px"
+                color="grayModern.600"
+                _hover={{
+                  bg: 'rgba(17, 24, 36, 0.05)',
+                  color: info.row.original.status === 1 ? '#D92D20' : 'brightBlue.600'
+                }}
+                onClick={() => handleStatusUpdate(info.row.original.id, info.row.original.status)}>
+                {info.row.original.status === GroupStatus.ENABLED ? (
+                  <>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      fill="none">
+                      <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="M3.63017 4.57294C2.88892 5.5168 2.44686 6.70677 2.44686 8C2.44686 11.0669 4.9331 13.5532 8.00004 13.5532C9.29326 13.5532 10.4832 13.1111 11.4271 12.3699L3.63017 4.57294ZM4.57298 3.63013L12.3699 11.4271C13.1112 10.4832 13.5532 9.29322 13.5532 8C13.5532 4.93306 11.067 2.44681 8.00004 2.44681C6.70682 2.44681 5.51684 2.88887 4.57298 3.63013ZM1.11353 8C1.11353 4.19668 4.19672 1.11348 8.00004 1.11348C11.8034 1.11348 14.8866 4.19668 14.8866 8C14.8866 11.8033 11.8034 14.8865 8.00004 14.8865C4.19672 14.8865 1.11353 11.8033 1.11353 8Z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                    <Text
+                      fontFamily="PingFang SC"
+                      fontSize="12px"
+                      fontStyle="normal"
+                      fontWeight="500"
+                      lineHeight="16px"
+                      letterSpacing="0.5px">
+                      {t('channels.disable')}
+                    </Text>
+                  </>
+                ) : (
+                  <>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      fill="none">
+                      <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="M5.79427 11.5962L10.4323 8.98988C11.1347 8.59516 11.5697 8.34899 11.8659 8.1453C11.9632 8.07842 12.0235 8.03024 12.0586 8.00006C12.0235 7.96988 11.9632 7.92169 11.8659 7.85482C11.5697 7.65113 11.1347 7.40495 10.4323 7.01024L5.79426 4.4039C5.09214 4.00934 4.65523 3.76552 4.3252 3.61737C4.18814 3.55585 4.10581 3.52842 4.06506 3.51662C4.04193 3.52371 4.02176 3.53393 4.00487 3.5458C3.99613 3.58816 3.98409 3.6599 3.97362 3.771C3.94094 4.1177 3.93933 4.60263 3.93933 5.39372L3.93933 10.6064C3.93933 11.3975 3.94094 11.8824 3.97362 12.2291C3.98409 12.3402 3.99613 12.412 4.00487 12.4543C4.02176 12.4662 4.04193 12.4764 4.06506 12.4835C4.10581 12.4717 4.18814 12.4443 4.3252 12.3827C4.65523 12.2346 5.09214 11.9908 5.79427 11.5962ZM13.4344 7.32001C13.2073 6.82372 12.5309 6.44358 11.178 5.68331L6.53993 3.07697C5.18701 2.31669 4.51056 1.93656 3.95547 1.99334C3.4713 2.04287 3.03146 2.29004 2.74531 2.6734C2.41724 3.1129 2.41724 3.87317 2.41724 5.39372L2.41724 10.6064C2.41724 12.1269 2.41724 12.8872 2.74531 13.3267C3.03146 13.7101 3.4713 13.9572 3.95547 14.0068C4.51055 14.0636 5.18702 13.6834 6.53994 12.9231L11.178 10.3168C12.5309 9.55654 13.2073 9.1764 13.4344 8.68011C13.6324 8.24723 13.6324 7.75289 13.4344 7.32001Z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                    <Text
+                      fontFamily="PingFang SC"
+                      fontSize="12px"
+                      fontStyle="normal"
+                      fontWeight="500"
+                      lineHeight="16px"
+                      letterSpacing="0.5px">
+                      {t('channels.enable')}
+                    </Text>
+                  </>
+                )}
+              </MenuItem>
+              <MenuItem
+                display="flex"
+                p="6px 4px"
+                alignItems="center"
+                gap="8px"
+                alignSelf="stretch"
+                borderRadius="4px"
+                color="grayModern.600"
+                _hover={{
+                  bg: 'rgba(17, 24, 36, 0.05)',
+                  color: '#D92D20'
+                }}
+                onClick={() => deleteGroupMutation.mutate({ id: String(info.row.original.id) })}>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  fill="none">
+                  <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M7.48258 1.18025H8.51761C8.84062 1.18024 9.12229 1.18023 9.35489 1.19923C9.60133 1.21937 9.85079 1.26411 10.0921 1.38704C10.4491 1.56894 10.7393 1.85919 10.9212 2.21619C11.0441 2.45745 11.0889 2.70692 11.109 2.95335C11.125 3.14941 11.1275 3.38033 11.1279 3.64149H13.5379C13.9061 3.64149 14.2045 3.93996 14.2045 4.30815C14.2045 4.67634 13.9061 4.97482 13.5379 4.97482H12.9739V11.2268C12.9739 11.7206 12.9739 12.1312 12.9466 12.4663C12.918 12.8153 12.8565 13.1408 12.7001 13.4479C12.4592 13.9206 12.0748 14.305 11.602 14.5459C11.2949 14.7024 10.9695 14.7639 10.6205 14.7924C10.2853 14.8198 9.87475 14.8198 9.381 14.8197H6.61919C6.12544 14.8198 5.71484 14.8198 5.37973 14.7924C5.03069 14.7639 4.70525 14.7024 4.39817 14.5459C3.9254 14.305 3.54102 13.9206 3.30013 13.4479C3.14366 13.1408 3.08215 12.8153 3.05363 12.4663C3.02625 12.1312 3.02626 11.7206 3.02627 11.2268L3.02627 4.97482H2.46232C2.09413 4.97482 1.79565 4.67634 1.79565 4.30815C1.79565 3.93996 2.09413 3.64149 2.46232 3.64149H4.87226C4.87265 3.38033 4.87516 3.14941 4.89118 2.95335C4.91131 2.70692 4.95605 2.45745 5.07899 2.21619C5.26089 1.85919 5.55113 1.56894 5.90813 1.38704C6.1494 1.26411 6.39886 1.21937 6.64529 1.19923C6.8779 1.18023 7.15957 1.18024 7.48258 1.18025ZM4.3596 4.97482V11.1996C4.3596 11.7275 4.36012 12.0833 4.38254 12.3577C4.40432 12.6243 4.44341 12.7547 4.48814 12.8425C4.60119 13.0644 4.7816 13.2448 5.00349 13.3579C5.09128 13.4026 5.22172 13.4417 5.4883 13.4635C5.76267 13.4859 6.11851 13.4864 6.64642 13.4864H9.35377C9.88168 13.4864 10.2375 13.4859 10.5119 13.4635C10.7785 13.4417 10.9089 13.4026 10.9967 13.3579C11.2186 13.2448 11.399 13.0644 11.5121 12.8425C11.5568 12.7547 11.5959 12.6243 11.6176 12.3577C11.6401 12.0833 11.6406 11.7275 11.6406 11.1996V4.97482H4.3596ZM9.79454 3.64149H6.20564C6.20612 3.38305 6.20849 3.20378 6.22008 3.06193C6.23348 2.89795 6.2558 2.84348 6.267 2.82151C6.32106 2.71539 6.40734 2.62912 6.51345 2.57505C6.53543 2.56386 6.58989 2.54154 6.75387 2.52814C6.92563 2.51411 7.15224 2.51359 7.50785 2.51359H8.49234C8.84795 2.51359 9.07456 2.51411 9.24632 2.52814C9.4103 2.54154 9.46476 2.56386 9.48674 2.57505C9.59285 2.62912 9.67913 2.71539 9.73319 2.82151C9.74439 2.84348 9.76671 2.89795 9.78011 3.06193C9.7917 3.20378 9.79407 3.38305 9.79454 3.64149ZM6.76948 7.02568C7.13767 7.02568 7.43614 7.32416 7.43614 7.69235V10.7689C7.43614 11.1371 7.13767 11.4356 6.76948 11.4356C6.40129 11.4356 6.10281 11.1371 6.10281 10.7689V7.69235C6.10281 7.32416 6.40129 7.02568 6.76948 7.02568ZM9.23071 7.02568C9.5989 7.02568 9.89738 7.32416 9.89738 7.69235V10.7689C9.89738 11.1371 9.5989 11.4356 9.23071 11.4356C8.86252 11.4356 8.56404 11.1371 8.56404 10.7689V7.69235C8.56404 7.32416 8.86252 7.02568 9.23071 7.02568Z"
+                    fill="currentColor"
+                  />
+                </svg>
+                <Text
+                  fontFamily="PingFang SC"
+                  fontSize="12px"
+                  fontStyle="normal"
+                  fontWeight="500"
+                  lineHeight="16px"
+                  letterSpacing="0.5px">
+                  {t('channels.delete')}
+                </Text>
+              </MenuItem>
+            </MenuList>
+          </Menu>
+        )
+      })
+    ]
+  }, [])
+
+  const table = useReactTable({
+    data: groupData,
+    columns,
+    getCoreRowModel: getCoreRowModel()
+  })
+
+  return (
+    <Flex
+      pt="4px"
+      pb="12px"
+      pr="12px"
+      h="100vh"
+      width="full"
+      flexDirection="column"
+      overflow="hidden">
+      <Flex
+        bg="white"
+        px="32px"
+        pt="24px"
+        pb="8px"
+        gap="24px"
+        borderRadius="12px"
+        flexDirection="column"
+        h="full"
+        w="full"
+        flex="1">
+        {/* -- header */}
+        <Flex flexDirection="column" gap="16px" alignItems="flex-start">
+          <Flex
+            w="full"
+            h="32px"
+            justifyContent="space-between"
+            alignItems="center"
+            alignSelf="stretch">
+            <Text
+              color="black"
+              fontFamily="PingFang SC"
+              fontSize="20px"
+              fontStyle="normal"
+              fontWeight="500"
+              lineHeight="26px"
+              letterSpacing="0.15px">
+              {t('nsManager.ns_manager')}
+            </Text>
+            <Button
+              variant="outline"
+              _hover={{
+                transform: 'scale(1.05)',
+                transition: 'transform 0.2s ease'
+              }}
+              _active={{
+                transform: 'scale(0.92)',
+                animation: 'pulse 0.3s ease'
+              }}
+              sx={{
+                '@keyframes pulse': {
+                  '0%': { transform: 'scale(0.92)' },
+                  '50%': { transform: 'scale(0.96)' },
+                  '100%': { transform: 'scale(0.92)' }
+                }
+              }}
+              display="flex"
+              padding="8px"
+              justifyContent="center"
+              alignItems="center"
+              gap="8px"
+              borderRadius="6px"
+              border="1px solid #DFE2EA"
+              bg="white"
+              boxShadow="0px 1px 2px 0px rgba(19, 51, 107, 0.05), 0px 0px 1px 0px rgba(19, 51, 107, 0.08)"
+              onClick={() => {
+                setGroupId('')
+              }}>
+              <Icon
+                xmlns="http://www.w3.org/2000/svg"
+                width="16px"
+                height="16px"
+                viewBox="0 0 16 16"
+                fill="none">
+                <path
+                  d="M6.4354 14.638C5.1479 14.2762 4.0979 13.5684 3.2854 12.5145C2.4729 11.4606 2.06665 10.2473 2.06665 8.87454C2.06665 8.16346 2.1854 7.48656 2.4229 6.84385C2.6604 6.20113 2.9979 5.61181 3.4354 5.07589C3.5729 4.92619 3.74165 4.84809 3.94165 4.8416C4.14165 4.83512 4.3229 4.91321 4.4854 5.07589C4.6229 5.21311 4.6949 5.38152 4.7014 5.58113C4.7079 5.78073 4.64215 5.96785 4.50415 6.1425C4.20415 6.52923 3.9729 6.95338 3.8104 7.41496C3.6479 7.87653 3.56665 8.36306 3.56665 8.87454C3.56665 9.88501 3.86365 10.7865 4.45765 11.5789C5.05165 12.3713 5.81715 12.9107 6.75415 13.1971C6.91665 13.247 7.0509 13.3406 7.1569 13.4778C7.2629 13.6151 7.31615 13.7648 7.31665 13.9269C7.31665 14.1764 7.22915 14.373 7.05415 14.5167C6.87915 14.6605 6.6729 14.7009 6.4354 14.638ZM9.6979 14.638C9.4604 14.7004 9.25415 14.6567 9.07915 14.507C8.90415 14.3573 8.81665 14.1577 8.81665 13.9082C8.81665 13.7585 8.8699 13.6151 8.9764 13.4778C9.0829 13.3406 9.21715 13.247 9.37915 13.1971C10.3167 12.8977 11.0824 12.3551 11.6764 11.5691C12.2704 10.7832 12.5672 9.88501 12.5667 8.87454C12.5667 7.62703 12.1292 6.56665 11.2542 5.6934C10.3792 4.82015 9.31665 4.38352 8.06665 4.38352H8.0104L8.3104 4.68292C8.4479 4.82015 8.51665 4.9948 8.51665 5.20687C8.51665 5.41895 8.4479 5.5936 8.3104 5.73083C8.1729 5.86805 7.9979 5.93666 7.7854 5.93666C7.5729 5.93666 7.3979 5.86805 7.2604 5.73083L5.6854 4.15897C5.6104 4.08412 5.5574 4.00303 5.5264 3.91571C5.4954 3.82838 5.47965 3.73482 5.47915 3.63502C5.47915 3.53522 5.4949 3.44166 5.5264 3.35433C5.5579 3.26701 5.6109 3.18592 5.6854 3.11107L7.2604 1.53921C7.3979 1.40199 7.5729 1.33337 7.7854 1.33337C7.9979 1.33337 8.1729 1.40199 8.3104 1.53921C8.4479 1.67644 8.51665 1.85109 8.51665 2.06316C8.51665 2.27524 8.4479 2.44989 8.3104 2.58712L8.0104 2.88652H8.06665C9.74165 2.88652 11.1604 3.46661 12.3229 4.62678C13.4854 5.78696 14.0667 7.20288 14.0667 8.87454C14.0667 10.2343 13.6604 11.4444 12.8479 12.5048C12.0354 13.5652 10.9854 14.2762 9.6979 14.638Z"
+                  fill="#485264"
+                />
+              </Icon>
+            </Button>
+          </Flex>
+          <Flex gap="16px" flexDirection="column" alignItems="flex-start" alignSelf="stretch">
+            {/* -- the first row */}
+            <Flex
+              alignItems="flex-start"
+              justifyContent="space-between"
+              gap="160px"
+              alignSelf="stretch">
+              <Flex h="32px" gap="48px" alignItems="center" flex="1" justifyContent="flex-start">
+                <Text
+                  whiteSpace="nowrap"
+                  color="grayModern.900"
+                  fontFamily="PingFang SC"
+                  fontSize="12px"
+                  fontStyle="normal"
+                  fontWeight="500"
+                  lineHeight="16px"
+                  letterSpacing="0.5px">
+                  {t('nsManager.groupId')}
+                </Text>
+                <Input
+                  w="276px"
+                  py="6px"
+                  px="12px"
+                  alignItems="center"
+                  borderRadius="4px"
+                  border="1px solid"
+                  borderColor="grayModern.200"
+                  bgColor="grayModern.50"
+                  _hover={{ borderColor: 'grayModern.300' }}
+                  _focus={{ borderColor: 'grayModern.300' }}
+                  _focusVisible={{ borderColor: 'grayModern.300' }}
+                  _active={{ borderColor: 'grayModern.300' }}
+                  placeholder={t('nsManager.select_group_id')}
+                  _placeholder={{
+                    color: 'grayModern.500',
+                    fontFamily: 'PingFang SC',
+                    fontSize: '12px',
+                    fontWeight: 400,
+                    lineHeight: '16px',
+                    letterSpacing: '0.048px'
+                  }}
+                  value={groupId}
+                  onChange={(e) => setGroupId(e.target.value)}
+                />
+              </Flex>
+            </Flex>
+
+            {/* -- the first row end */}
+          </Flex>
+        </Flex>
+        {/* -- header end */}
+
+        {/* -- table */}
+        <Flex gap="24px" flexDirection="column" flex="1">
+          <BaseTable table={table} isLoading={isLoading} />
+          <SwitchPage
+            m="0"
+            justifyContent={'end'}
+            currentPage={page}
+            totalPage={Math.ceil(total / pageSize)}
+            totalItem={total}
+            pageSize={pageSize}
+            setCurrentPage={(idx: number) => setPage(idx)}
+          />
+        </Flex>
+        {/* -- table end */}
+      </Flex>
+    </Flex>
+  )
+}
diff --git a/frontend/providers/aiproxy/app/[lng]/(user)/home/components/RequestDataChart.tsx b/frontend/providers/aiproxy/app/[lng]/(user)/home/components/RequestDataChart.tsx
new file mode 100644
index 000000000000..4c6a4c586de4
--- /dev/null
+++ b/frontend/providers/aiproxy/app/[lng]/(user)/home/components/RequestDataChart.tsx
@@ -0,0 +1,435 @@
+import { Box, Flex, Text } from '@chakra-ui/react'
+import { useEffect, useRef } from 'react'
+import * as echarts from 'echarts'
+import { useTranslationClientSide } from '@/app/i18n/client'
+import { useI18n } from '@/providers/i18n/i18nContext'
+import { ChartDataItem } from '@/types/user/dashboard'
+import { useBackendStore } from '@/store/backend'
+
+export default function RequestDataChart({ data }: { data: ChartDataItem[] }): React.JSX.Element {
+  const costChartRef = useRef<HTMLDivElement>(null)
+  const requestChartRef = useRef<HTMLDivElement>(null)
+  const costChartInstance = useRef<echarts.ECharts>()
+  const requestChartInstance = useRef<echarts.ECharts>()
+  const { lng } = useI18n()
+  const { t } = useTranslationClientSide(lng, 'common')
+  const { currencySymbol } = useBackendStore()
+
+  // Add helper function to determine date format
+  const getDateFormat = (timestamps: number[]) => {
+    if (timestamps.length < 2) return 'detailed'
+
+    const timeDiff = timestamps[timestamps.length - 1] - timestamps[0]
+    // If time difference is more than 15 days (1296000 seconds), show daily format
+    return timeDiff > 1296000 ? 'daily' : 'detailed'
+  }
+
+  // 初始化图表
+  useEffect(() => {
+    if (costChartRef.current && requestChartRef.current) {
+      costChartInstance.current = echarts.init(costChartRef.current, undefined, {
+        renderer: 'svg'
+      })
+      requestChartInstance.current = echarts.init(requestChartRef.current, undefined, {
+        renderer: 'svg'
+      })
+    }
+
+    return () => {
+      costChartInstance.current?.dispose()
+      requestChartInstance.current?.dispose()
+      costChartInstance.current = undefined
+      requestChartInstance.current = undefined
+    }
+  }, [])
+
+  // 配置图表选项
+  useEffect(() => {
+    if (!costChartInstance.current || !requestChartInstance.current) return
+
+    const commonTooltipStyle: echarts.EChartsOption['tooltip'] = {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'line',
+        lineStyle: {
+          color: '#219BF4'
+        }
+      },
+      backgroundColor: 'white',
+      borderWidth: 0,
+      padding: [8, 12],
+      textStyle: {
+        color: '#111824',
+        fontSize: 12
+      }
+    }
+
+    const commonXAxis: echarts.EChartsOption['xAxis'] = {
+      type: 'time',
+      // boundaryGap: ['0%', '5%'] as [string, string],
+      boundaryGap: ['0%', '0%'] as [string, string],
+      axisLine: {
+        lineStyle: {
+          color: '#E8EBF0',
+          width: 2
+        }
+      },
+      splitLine: {
+        show: false,
+        lineStyle: {
+          color: '#DFE2EA',
+          type: 'dashed' as const
+        }
+      },
+      axisTick: {
+        show: true,
+        length: 6,
+        lineStyle: {
+          color: '#E8EBF0',
+          width: 2
+        }
+      },
+      axisLabel: {
+        show: true,
+        color: '#667085',
+        formatter: (value: number) => {
+          const date = new Date(value * 1000)
+          const format = getDateFormat(data.map((item) => item.timestamp))
+
+          return date
+            .toLocaleString(lng, {
+              month: '2-digit',
+              day: '2-digit',
+              ...(format === 'detailed' && {
+                hour: '2-digit',
+                minute: '2-digit',
+                hour12: false
+              })
+            })
+            .replace(/\//g, '-')
+        },
+        margin: 14,
+        align: 'left'
+      }
+    }
+
+    // 成本图表配置
+    const costOption: echarts.EChartsOption = {
+      tooltip: {
+        ...commonTooltipStyle,
+        formatter: function (
+          params:
+            | echarts.DefaultLabelFormatterCallbackParams
+            | echarts.DefaultLabelFormatterCallbackParams[]
+        ) {
+          if (!params) return ''
+          const paramArray = Array.isArray(params) ? params : [params]
+          if (paramArray.length === 0) return ''
+
+          const time = new Date((paramArray[0].value as [number, number])[0] * 1000)
+          const timeStr = time.toLocaleString(lng, {
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit'
+          })
+
+          let result = `
+            <div style="font-weight: 500; margin-bottom: 4px; margin-top: 4px; color: #667085; font-size: 12px">${timeStr}</div>
+            <div style="height: 1px; background: #DFE2EA; margin: 8px 0;"></div>
+          `
+
+          const currency =
+            currencySymbol === 'shellCoin'
+              ? `<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none">
+<circle cx="7" cy="7.4854" r="6.74" fill="url(#paint0_linear_802_289)" stroke="url(#paint1_linear_802_289)" stroke-width="0.52"/>
+<circle cx="6.99996" cy="7.48542" r="6.11562" fill="url(#paint2_linear_802_289)"/>
+<path d="M7.00004 13.601C10.3776 13.601 13.1157 10.863 13.1157 7.48541C13.1157 6.09903 12.6543 4.82038 11.8768 3.79462C11.4855 3.73941 11.0856 3.71085 10.679 3.71085C6.28906 3.71085 2.67666 7.0397 2.22829 11.3108C3.34913 12.7072 5.07019 13.601 7.00004 13.601Z" fill="url(#paint3_linear_802_289)"/>
+<circle cx="7.00007" cy="7.48539" r="4.74284" fill="url(#paint4_linear_802_289)"/>
+<path d="M5.0457 7.27105C5.43915 7.84631 6.25318 7.79525 6.25318 7.79525C6.04967 7.59782 5.91739 7.41741 5.90383 6.90342C5.89026 6.38943 5.59856 6.25328 5.59856 6.25328C6.1209 5.9231 5.93435 5.56569 5.91739 5.16743C5.90722 4.91895 6.05307 4.73514 6.16839 4.62962C5.50464 4.7294 4.90487 5.08243 4.49413 5.61512C4.0834 6.14782 3.89338 6.81905 3.96371 7.4889C4.0112 7.35614 4.68277 6.74004 5.0457 7.27105Z" fill="url(#paint5_linear_802_289)"/>
+<path d="M9.86551 6.24649C9.84796 6.19055 9.82642 6.13595 9.80106 6.08311V6.0797C9.68269 5.83801 9.48642 5.64355 9.2441 5.52785C9.00177 5.41215 8.72761 5.382 8.46607 5.4423C8.20453 5.5026 7.97096 5.6498 7.80325 5.86003C7.63554 6.07027 7.54352 6.3312 7.54212 6.6005C7.54214 6.6852 7.55123 6.76965 7.56925 6.85239C7.56933 6.85352 7.56933 6.85466 7.56925 6.85579C7.57603 6.88983 7.58621 6.92387 7.59638 6.95791C7.65692 7.1977 7.6687 7.44727 7.63102 7.69172C7.59334 7.93618 7.50697 8.17051 7.37706 8.38073C7.24716 8.59095 7.07638 8.77275 6.87493 8.91528C6.67348 9.05781 6.44548 9.15815 6.20453 9.21031C5.96359 9.26246 5.71465 9.26537 5.47256 9.21886C5.23047 9.17234 5.0002 9.07735 4.7955 8.93957C4.5908 8.80178 4.41585 8.62402 4.28111 8.41689C4.14636 8.20976 4.05458 7.97751 4.01124 7.734C4.07253 8.15611 4.22146 8.56059 4.4484 8.92127C4.67533 9.28194 4.97521 9.59077 5.32862 9.82776C5.68204 10.0648 6.0811 10.2246 6.49998 10.297C6.91886 10.3694 7.34822 10.3527 7.76027 10.248C8.17231 10.1433 8.55786 9.95296 8.89194 9.68924C9.22603 9.42553 9.50121 9.09435 9.69966 8.71713C9.89812 8.33992 10.0154 7.92508 10.044 7.49949C10.0726 7.07389 10.0118 6.64701 9.86551 6.24649Z" fill="url(#paint6_linear_802_289)"/>
+<path d="M9.36006 7.06679C9.36006 8.55005 8.16191 9.75248 6.68392 9.75248C5.89947 9.75248 5.19385 9.41375 4.70436 8.8741C4.73401 8.8968 4.76445 8.91867 4.7955 8.93957C5.0002 9.07735 5.23047 9.17234 5.47256 9.21886C5.71465 9.26537 5.96359 9.26246 6.20453 9.21031C6.44548 9.15815 6.67348 9.05781 6.87493 8.91528C7.07638 8.77275 7.24716 8.59095 7.37706 8.38073C7.50697 8.17051 7.59334 7.93618 7.63102 7.69172C7.6687 7.44727 7.65692 7.1977 7.59638 6.95791C7.58621 6.92387 7.57603 6.88983 7.56925 6.85579C7.56933 6.85466 7.56933 6.85352 7.56925 6.85239C7.55123 6.76965 7.54214 6.6852 7.54212 6.6005C7.54352 6.3312 7.63554 6.07027 7.80325 5.86003C7.97096 5.6498 8.20453 5.5026 8.46607 5.4423C8.57396 5.41742 8.68394 5.4079 8.79301 5.41347C9.1483 5.86929 9.36006 6.44322 9.36006 7.06679Z" fill="url(#paint7_linear_802_289)"/>
+<g filter="url(#filter0_d_802_289)">
+<path d="M9.47934 2.93023L9.75865 3.43154L10.26 3.71084L9.75865 3.99014L9.47934 4.49146L9.20004 3.99014L8.69873 3.71084L9.20004 3.43154L9.47934 2.93023Z" fill="#F7F7F7"/>
+</g>
+<defs>
+<filter id="filter0_d_802_289" x="4.69873" y="2.93023" width="9.56123" height="9.56123" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+  <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+  <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+  <feOffset dy="4"/>
+  <feGaussianBlur stdDeviation="2"/>
+  <feComposite in2="hardAlpha" operator="out"/>
+  <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+  <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_802_289"/>
+  <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_802_289" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_802_289" x1="3.85" y1="1.1854" x2="10.5" y2="13.7854" gradientUnits="userSpaceOnUse">
+  <stop stop-color="#F0F0F0"/>
+  <stop offset="1" stop-color="#EBEBED"/>
+</linearGradient>
+<linearGradient id="paint1_linear_802_289" x1="11.2" y1="13.0854" x2="2.1" y2="2.2354" gradientUnits="userSpaceOnUse">
+  <stop stop-color="#2B3750"/>
+  <stop offset="1" stop-color="#9AA4B9"/>
+</linearGradient>
+<linearGradient id="paint2_linear_802_289" x1="2.80003" y1="2.9354" x2="10.5" y2="12.7354" gradientUnits="userSpaceOnUse">
+  <stop stop-color="#D6D8DF"/>
+  <stop offset="1" stop-color="#DADCE3"/>
+</linearGradient>
+<linearGradient id="paint3_linear_802_289" x1="11.2" y1="11.6854" x2="4.20003" y2="6.0854" gradientUnits="userSpaceOnUse">
+  <stop stop-color="#ABAFBF"/>
+  <stop offset="1" stop-color="#B7BACC"/>
+</linearGradient>
+<linearGradient id="paint4_linear_802_289" x1="4.9" y1="3.2854" x2="9.8" y2="11.3354" gradientUnits="userSpaceOnUse">
+  <stop stop-color="#9DA1B3"/>
+  <stop offset="1" stop-color="#535A73"/>
+</linearGradient>
+<linearGradient id="paint5_linear_802_289" x1="4.89999" y1="4.68541" x2="9.09999" y2="10.2854" gradientUnits="userSpaceOnUse">
+  <stop stop-color="#FCFCFC"/>
+  <stop offset="1" stop-color="#DDDFE6"/>
+</linearGradient>
+<linearGradient id="paint6_linear_802_289" x1="4.89999" y1="4.68541" x2="9.09999" y2="10.2854" gradientUnits="userSpaceOnUse">
+  <stop stop-color="#FCFCFC"/>
+  <stop offset="1" stop-color="#DDDFE6"/>
+</linearGradient>
+<linearGradient id="paint7_linear_802_289" x1="4.89999" y1="4.68541" x2="9.09999" y2="10.2854" gradientUnits="userSpaceOnUse">
+  <stop stop-color="#FCFCFC"/>
+  <stop offset="1" stop-color="#DDDFE6"/>
+</linearGradient>
+</defs>
+</svg>`
+              : currencySymbol === 'cny'
+              ? '￥'
+              : '$'
+
+          paramArray.forEach((param) => {
+            const value = (param.value as [number, number])[1]
+            const formattedValue = Number(value).toLocaleString(lng, {
+              minimumFractionDigits: 0,
+              maximumFractionDigits: 4
+            })
+            result += `
+              <div style="display: flex; align-items: center; margin: 4px 0; min-width: 150px">
+                <div style="display: flex; align-items: center; flex: 1">
+                  ${param.marker} 
+                  <span style="margin-left: 4px; color: #667085; font-size: 12px">${param.seriesName}</span>
+                  <span style="margin-left: 4px">${currency}</span>
+                </div>
+                <div style="font-weight: 500; color: #667085; font-size: 12px">${formattedValue}</div>
+              </div>
+            `
+          })
+
+          return result
+        }
+      },
+      legend: {
+        show: false,
+        data: [t('dataDashboard.cost')],
+        bottom: 0
+      },
+      grid: {
+        left: 0,
+        right: 0,
+        bottom: 10,
+        top: 10,
+        containLabel: true
+      },
+      xAxis: commonXAxis,
+      yAxis: {
+        type: 'value',
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: '#DFE2EA',
+            type: 'dashed'
+          }
+        },
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: '#667085',
+            width: 2
+          }
+        },
+        axisLabel: {
+          // formatter: '${value}',
+          color: '#667085'
+        }
+      },
+      series: [
+        {
+          name: t('dataDashboard.cost'),
+          type: 'line',
+          smooth: true,
+          showSymbol: false,
+          data: data.map((item) => [item.timestamp, item.used_amount]),
+          itemStyle: {
+            color: '#13C4B9'
+          }
+        }
+      ]
+    }
+
+    // 请求数图表配置
+    const requestOption: echarts.EChartsOption = {
+      tooltip: {
+        ...commonTooltipStyle,
+        formatter: function (params) {
+          if (!params) return ''
+          const paramArray = Array.isArray(params) ? params : [params]
+          if (paramArray.length === 0) return ''
+
+          const time = new Date((paramArray[0].value as [number, number])[0] * 1000)
+          const timeStr = time.toLocaleString(lng, {
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit'
+          })
+
+          let result = `
+            <div style="font-weight: 500; margin-bottom: 4px; margin-top: 4px; color: #667085; font-size: 12px">${timeStr}</div>
+            <div style="height: 1px; background: #DFE2EA; margin: 8px 0;"></div>
+          `
+
+          paramArray.forEach((param) => {
+            const value = (param.value as [number, number])[1]
+            result += `
+              <div style="display: flex; align-items: center; margin: 4px 0; min-width: 150px">
+                <div style="display: flex; align-items: center; flex: 1">
+                  ${param.marker} 
+                  <span style="margin-left: 4px; color: #667085; font-size: 12px">${param.seriesName}</span>
+                </div>
+                <div style="font-weight: 500; color: #667085; font-size: 12px">${value}</div>
+              </div>
+            `
+          })
+
+          return result
+        }
+      },
+      legend: {
+        data: [t('dataDashboard.callCount'), t('dataDashboard.exceptionCount')],
+        bottom: 10
+      },
+      grid: {
+        left: 0,
+        right: 0,
+        bottom: 60,
+        top: 10,
+        containLabel: true
+      },
+      xAxis: commonXAxis,
+      yAxis: {
+        type: 'value',
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: '#DFE2EA',
+            type: 'dashed'
+          }
+        },
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: '#667085',
+            width: 2
+          }
+        },
+        axisLabel: {
+          color: '#667085'
+        }
+      },
+      series: [
+        {
+          name: t('dataDashboard.callCount'),
+          type: 'line',
+          smooth: true,
+          showSymbol: false,
+          data: data.map((item) => [item.timestamp, item.request_count]),
+          itemStyle: {
+            color: '#11B6FC'
+          }
+        },
+        {
+          name: t('dataDashboard.exceptionCount'),
+          type: 'line',
+          smooth: true,
+          showSymbol: false,
+          data: data.map((item) => [item.timestamp, item.exception_count]),
+          itemStyle: {
+            color: '#FDB022'
+          }
+        }
+      ]
+    }
+
+    // 设置图表选项
+    costChartInstance.current.setOption(costOption)
+    requestChartInstance.current.setOption(requestOption)
+
+    // 图表联动
+    costChartInstance.current.group = 'request-data'
+    requestChartInstance.current.group = 'request-data'
+    echarts.connect('request-data')
+  }, [data, t, lng])
+
+  // 处理窗口大小变化
+  useEffect(() => {
+    const handleResize = () => {
+      costChartInstance.current?.resize()
+      requestChartInstance.current?.resize()
+    }
+
+    window.addEventListener('resize', handleResize)
+
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [])
+
+  return (
+    <Box
+      display="flex"
+      flexDirection="column"
+      w="full"
+      h="full"
+      gap="24px"
+      overflowY="auto"
+      overflowX="hidden"
+      sx={{
+        '&::-webkit-scrollbar': {
+          display: 'none'
+        },
+        msOverflowStyle: 'none',
+        scrollbarWidth: 'none'
+      }}>
+      <Flex w="full" flex="4.5" flexDirection="column" gap="24px">
+        <Text
+          color="black"
+          fontFamily="PingFang SC"
+          fontStyle="normal"
+          fontSize="14px"
+          fontWeight="500"
+          lineHeight="20px"
+          letterSpacing="0.1px">
+          {t('dataDashboard.cost')}
+        </Text>
+        <Box ref={costChartRef} w="full" h="full" position="relative" minH="140px" />
+      </Flex>
+      <Flex w="full" flex="5.5" flexDirection="column" gap="24px">
+        <Text
+          color="black"
+          fontFamily="PingFang SC"
+          fontStyle="normal"
+          fontSize="14px"
+          fontWeight="500"
+          lineHeight="20px"
+          letterSpacing="0.1px">
+          {t('dataDashboard.callCount')}
+        </Text>
+        <Box ref={requestChartRef} w="full" h="full" position="relative" minH="160px" />
+      </Flex>
+    </Box>
+  )
+}
diff --git a/frontend/providers/aiproxy/app/[lng]/(user)/home/page.tsx b/frontend/providers/aiproxy/app/[lng]/(user)/home/page.tsx
index e43a476d36ac..f3586b8ee5f7 100644
--- a/frontend/providers/aiproxy/app/[lng]/(user)/home/page.tsx
+++ b/frontend/providers/aiproxy/app/[lng]/(user)/home/page.tsx
@@ -1,41 +1,691 @@
-import { Flex } from '@chakra-ui/react'
+'use client'
 
-import KeyList from '@/components/user/KeyList'
-import ModelList from '@/components/user/ModelList'
+import { Box, Flex, Text, Button, Center } from '@chakra-ui/react'
+import { CurrencySymbol, MySelect } from '@sealos/ui'
+import { useState } from 'react'
 
-export default function Home(): JSX.Element {
-  return (
-    <Flex pt="4px" pb="12px" pr="12px" gap="8px" h="100vh" w="full">
-      <Flex
-        flex={4.95}
-        flexShrink={0}
-        display="inline-flex"
-        p="24px 32px 167px 32px"
-        flexDirection="column"
-        alignItems="flex-start"
-        gap="13px"
-        bg="white"
-        h="full"
-        w="full"
-        borderRadius="12px">
-        <KeyList />
-      </Flex>
+import { getDashboardData } from '@/api/platform'
+import { useTranslationClientSide } from '@/app/i18n/client'
+import { useI18n } from '@/providers/i18n/i18nContext'
+import { UseQueryResult, useQuery } from '@tanstack/react-query'
+import { QueryKey } from '@/types/query-key'
+import { useBackendStore } from '@/store/backend'
+import RequestDataChart from './components/RequestDataChart'
+import { DashboardResponse } from '@/types/user/dashboard'
+
+export default function Home(): React.JSX.Element {
+  const { lng } = useI18n()
+  const { t } = useTranslationClientSide(lng, 'common')
+  const { currencySymbol } = useBackendStore()
+
+  const [tokenName, setTokenName] = useState<string>('')
+  const [model, setModel] = useState<string>('')
+  const [type, setType] = useState<'week' | 'day' | 'two_week' | 'month'>('week') // default is week
+
+  const { data: dashboardData, isLoading }: UseQueryResult<DashboardResponse['data']> = useQuery(
+    [QueryKey.GetDashboardData, type, tokenName, model],
+    () =>
+      getDashboardData({
+        type,
+        ...(tokenName && { token_name: tokenName }),
+        ...(model && { model })
+      })
+  )
 
+  return (
+    <Flex
+      pt="4px"
+      pb="12px"
+      pr="12px"
+      h="100vh"
+      width="full"
+      flexDirection="column"
+      overflow="hidden">
       <Flex
-        flex={1}
         bg="white"
+        px="32px"
+        pt="24px"
+        pb="12px"
+        gap="20px"
         borderRadius="12px"
-        display="inline-flex"
-        p="19px 59px 23px 23px"
         flexDirection="column"
-        justifyContent="flex-start"
-        alignItems="flex-start"
-        gap="22px"
-        minW="260px"
-        w="full"
         h="full"
-        overflow="auto">
-        <ModelList />
+        w="full"
+        flex="1">
+        {/* -- header */}
+        <Flex
+          w="full"
+          justifyContent="space-between"
+          alignItems="center"
+          alignSelf="stretch"
+          gap="24px"
+          flexWrap="wrap">
+          <Flex gap="24px" alignItems="center">
+            <Text
+              color="black"
+              fontFamily="PingFang SC"
+              fontSize="20px"
+              fontStyle="normal"
+              fontWeight="500"
+              lineHeight="26px"
+              letterSpacing="0.15px"
+              whiteSpace="nowrap">
+              {t('dataDashboard.title')}
+            </Text>
+            <Flex gap="12px" alignItems="center">
+              <MySelect
+                w="200px"
+                boxStyle={{
+                  w: '100%'
+                }}
+                height="36px"
+                value={tokenName}
+                list={[
+                  {
+                    value: 'all',
+                    label: 'all'
+                  },
+                  ...(dashboardData?.token_names?.map((token) => ({
+                    value: token,
+                    label: token
+                  })) || [])
+                ]}
+                placeholder={t('dataDashboard.selectToken')}
+                onchange={(token: string) => {
+                  if (token === 'all') {
+                    setTokenName('')
+                  } else {
+                    setTokenName(token)
+                  }
+                }}
+              />
+
+              <MySelect
+                boxStyle={{
+                  w: '100%'
+                }}
+                w="200px"
+                height="36px"
+                placeholder={t('dataDashboard.selectModel')}
+                value={model}
+                list={[
+                  {
+                    value: 'all',
+                    label: 'all'
+                  },
+                  ...(dashboardData?.models?.map((model) => ({
+                    value: model,
+                    label: model
+                  })) || [])
+                ]}
+                onchange={(model: string) => {
+                  if (model === 'all') {
+                    setModel('')
+                  } else {
+                    setModel(model)
+                  }
+                }}
+              />
+            </Flex>
+          </Flex>
+          <Flex
+            gap="4px"
+            alignItems="flex-start"
+            p="3px"
+            borderColor="gray.200"
+            bg="grayModern.50"
+            borderRadius="6px">
+            {[
+              { label: t('dataDashboard.day'), value: 'day' },
+              { label: t('dataDashboard.week'), value: 'week' },
+              { label: t('dataDashboard.twoWeek'), value: 'two_week' },
+              { label: t('dataDashboard.month'), value: 'month' }
+            ].map((item) => (
+              <Button
+                key={item.value}
+                size="sm"
+                variant="ghost"
+                display="flex"
+                px="10px"
+                py="5px"
+                justifyContent="center"
+                alignItems="center"
+                gap="6px"
+                borderRadius="4px"
+                color={type === item.value ? '#0884DD' : 'grayModern.500'}
+                fontFamily="PingFang SC"
+                fontSize="14px"
+                fontWeight="500"
+                lineHeight="20px"
+                fontStyle="normal"
+                letterSpacing="0.1px"
+                bg={type === item.value ? 'white' : 'transparent'}
+                onClick={() => setType(item.value as typeof type)}
+                _hover={{
+                  bg: 'white',
+                  color: '#0884DD',
+                  boxShadow:
+                    '0px 1px 2px 0px rgba(19, 51, 107, 0.10), 0px 0px 1px 0px rgba(19, 51, 107, 0.15)'
+                }}>
+                {item.label}
+              </Button>
+            ))}
+          </Flex>
+        </Flex>
+        {/* -- header end */}
+
+        <Flex
+          w="full"
+          h="full"
+          gap="38px"
+          alignItems="flex-start"
+          justifyContent="center"
+          flexDirection="column"
+          overflowY="auto"
+          overflowX="hidden"
+          sx={{
+            '&::-webkit-scrollbar': {
+              display: 'none'
+            },
+            msOverflowStyle: 'none',
+            scrollbarWidth: 'none'
+          }}>
+          {/* chart 1 */}
+          <Flex
+            w="full"
+            gap="16px"
+            alignItems="center"
+            overflowY="hidden"
+            overflowX="auto"
+            sx={{
+              '&::-webkit-scrollbar': {
+                display: 'none'
+              },
+              msOverflowStyle: 'none',
+              scrollbarWidth: 'none'
+            }}>
+            <Flex
+              flex="1"
+              bg="#EDFAFF"
+              gap="16px"
+              borderRadius="12px"
+              px="20px"
+              py="28px"
+              alignItems="center"
+              alignSelf="stretch">
+              <Box
+                display="flex"
+                alignItems="center"
+                p="8px"
+                borderRadius="999px"
+                bg="white"
+                boxShadow="0px 4px 16px -1px rgba(19, 51, 107, 0.02)">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="25"
+                  viewBox="0 0 24 25"
+                  fill="none">
+                  <path
+                    d="M13.3333 3.66656C13.3333 2.83814 14.0049 2.16656 14.8333 2.16656C15.6618 2.16656 16.3333 2.83814 16.3333 3.66656V20.6666C16.3333 21.495 15.6618 22.1666 14.8333 22.1666C14.0049 22.1666 13.3333 21.495 13.3333 20.6666V3.66656Z"
+                    fill="#219BF4"
+                  />
+                  <path
+                    d="M3.5 9.16656C2.67157 9.16656 2 9.83814 2 10.6666V20.6666C2 21.495 2.67157 22.1666 3.5 22.1666C4.32843 22.1666 5 21.495 5 20.6666V10.6666C5 9.83814 4.32843 9.16656 3.5 9.16656Z"
+                    fill="#219BF4"
+                  />
+                  <path
+                    d="M9.16667 13.1666C8.33824 13.1666 7.66667 13.8381 7.66667 14.6666V20.6666C7.66667 21.495 8.33824 22.1666 9.16667 22.1666C9.99509 22.1666 10.6667 21.495 10.6667 20.6666V14.6666C10.6667 13.8381 9.99509 13.1666 9.16667 13.1666Z"
+                    fill="#219BF4"
+                  />
+                  <path
+                    d="M20.5 8.16656C19.6716 8.16656 19 8.83814 19 9.66656V20.6666C19 21.495 19.6716 22.1666 20.5 22.1666C21.3284 22.1666 22 21.495 22 20.6666V9.66656C22 8.83814 21.3284 8.16656 20.5 8.16656Z"
+                    fill="#219BF4"
+                  />
+                </svg>
+              </Box>
+              <Flex flexDirection="column" alignItems="flex-start">
+                <Text
+                  color="grayModern.600"
+                  fontFamily="PingFang SC"
+                  fontStyle="normal"
+                  fontSize="14px"
+                  fontWeight="400"
+                  lineHeight="20px"
+                  letterSpacing="0.25px">
+                  {t('dataDashboard.callCount')}
+                </Text>
+                <Text
+                  color="grayModern.900"
+                  fontFamily="PingFang SC"
+                  fontStyle="normal"
+                  fontSize="32px"
+                  fontWeight="500"
+                  lineHeight="40px">
+                  {dashboardData?.total_count
+                    ? dashboardData.total_count >= 10000
+                      ? `${Number((dashboardData.total_count / 10000).toFixed(3))}W`
+                      : dashboardData.total_count.toLocaleString()
+                    : 0}
+                </Text>
+              </Flex>
+            </Flex>
+
+            <Flex
+              flex="1"
+              bg="yellow.50"
+              gap="16px"
+              borderRadius="12px"
+              px="20px"
+              py="28px"
+              alignItems="center"
+              alignSelf="stretch">
+              <Box
+                display="flex"
+                alignItems="center"
+                p="8px"
+                borderRadius="999px"
+                bg="white"
+                boxShadow="0px 4px 16px -1px rgba(19, 51, 107, 0.02)">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="25"
+                  viewBox="0 0 24 25"
+                  fill="none">
+                  <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M10.528 2.50103C10.9773 2.24808 11.4842 2.11519 11.9998 2.11519C12.5154 2.11519 13.0223 2.24808 13.4716 2.50103C13.9209 2.75398 14.2974 3.11846 14.5648 3.5593L14.5677 3.56405L23.0376 17.7041L23.0458 17.7179C23.3077 18.1715 23.4463 18.6858 23.4478 19.2097C23.4493 19.7335 23.3135 20.2486 23.0541 20.7037C22.7947 21.1588 22.4207 21.538 21.9692 21.8036C21.5177 22.0693 21.0046 22.2121 20.4808 22.2179L20.4698 22.218L3.51879 22.2179C2.99498 22.2122 2.48182 22.0693 2.03035 21.8036C1.57887 21.538 1.20483 21.1588 0.945426 20.7037C0.686022 20.2486 0.550303 19.7335 0.55177 19.2097C0.553236 18.6858 0.691839 18.1715 0.953786 17.7179L0.961909 17.7041L9.43476 3.5593C9.70217 3.11846 10.0787 2.75398 10.528 2.50103ZM11.9998 4.11519C11.8279 4.11519 11.6589 4.15948 11.5092 4.2438C11.3601 4.32774 11.235 4.44852 11.146 4.59457L2.68246 18.7238C2.59729 18.8736 2.55224 19.0429 2.55176 19.2153C2.55127 19.3899 2.59651 19.5616 2.68298 19.7133C2.76945 19.865 2.89413 19.9914 3.04462 20.0799C3.1938 20.1677 3.36317 20.2152 3.53617 20.2179H20.4634C20.6364 20.2152 20.8058 20.1677 20.9549 20.0799C21.1054 19.9914 21.2301 19.865 21.3166 19.7133C21.403 19.5616 21.4483 19.3899 21.4478 19.2153C21.4473 19.0429 21.4023 18.8736 21.3171 18.7238L12.8548 4.59656C12.8544 4.5959 12.854 4.59523 12.8536 4.59457C12.7645 4.44852 12.6395 4.32774 12.4904 4.2438C12.3406 4.15948 12.1716 4.11519 11.9998 4.11519ZM11.9998 8.21793C12.5521 8.21793 12.9998 8.66565 12.9998 9.21793V13.2179C12.9998 13.7702 12.5521 14.2179 11.9998 14.2179C11.4475 14.2179 10.9998 13.7702 10.9998 13.2179V9.21793C10.9998 8.66565 11.4475 8.21793 11.9998 8.21793ZM10.9998 17.2179C10.9998 16.6656 11.4475 16.2179 11.9998 16.2179H12.0098C12.5621 16.2179 13.0098 16.6656 13.0098 17.2179C13.0098 17.7702 12.5621 18.2179 12.0098 18.2179H11.9998C11.4475 18.2179 10.9998 17.7702 10.9998 17.2179Z"
+                    fill="#F79009"
+                  />
+                </svg>
+              </Box>
+              <Flex flexDirection="column" alignItems="flex-start">
+                <Text
+                  color="grayModern.600"
+                  fontFamily="PingFang SC"
+                  fontStyle="normal"
+                  fontSize="14px"
+                  fontWeight="400"
+                  lineHeight="20px"
+                  letterSpacing="0.25px">
+                  {t('dataDashboard.exceptionCount')}
+                </Text>
+                <Text
+                  color="grayModern.900"
+                  fontFamily="PingFang SC"
+                  fontStyle="normal"
+                  fontSize="32px"
+                  fontWeight="500"
+                  lineHeight="40px">
+                  {dashboardData?.exception_count || 0}
+                </Text>
+              </Flex>
+            </Flex>
+
+            <Flex
+              flex="1"
+              bg="#F0F4FF"
+              gap="16px"
+              borderRadius="12px"
+              px="20px"
+              py="28px"
+              alignItems="center"
+              alignSelf="stretch">
+              <Box
+                display="flex"
+                alignItems="center"
+                p="8px"
+                borderRadius="999px"
+                bg="white"
+                boxShadow="0px 4px 16px -1px rgba(19, 51, 107, 0.02)">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="25"
+                  viewBox="0 0 24 25"
+                  fill="none">
+                  <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M21.1198 3.04655C20.5802 2.5059 19.6272 2.37234 18.907 2.27297L18.6345 2.23878C17.5061 2.11748 16.3664 2.14911 15.2464 2.33281C12.4544 2.78584 9.12289 4.2721 6.54357 8.00539C6.25342 8.03346 5.95718 8.02308 5.65981 8.01265L5.63536 8.0118L5.40029 8.00432C5.00923 7.99363 4.6203 8.00004 4.24633 8.10689C3.54113 8.3099 3.07634 9.03327 2.74298 9.70855L2.58591 10.0398L2.39679 10.4672L2.27925 10.7599C1.99076 11.5164 1.78882 12.4257 2.38717 13.023C2.62061 13.2569 2.92148 13.4342 3.25236 13.5799C3.61968 13.7417 4.02398 13.8644 4.41408 13.9825L4.71005 14.0733C4.82891 14.1093 4.94696 14.1479 5.0641 14.1891L5.07451 14.1927C5.13814 14.2152 5.20151 14.2384 5.2646 14.2624L5.33298 14.2902L5.2475 14.3725C5.23379 14.3862 5.22024 14.4001 5.20684 14.4143L5.19987 14.4218C4.85655 14.789 4.61354 15.3112 4.44186 15.7455C4.39572 15.8614 4.35099 15.9809 4.30772 16.1026C4.16666 16.4996 4.0412 16.9204 3.93327 17.3162L3.83283 17.7008L3.70034 18.2457L3.53579 18.9915L3.4439 19.4521C3.42667 19.5451 3.42182 19.6397 3.42921 19.7334C3.43549 19.813 3.45059 19.8919 3.47444 19.9686C3.52636 20.1358 3.61817 20.2878 3.74195 20.4116C3.86572 20.5354 4.01775 20.6272 4.18492 20.6791C4.26584 20.7043 4.34913 20.7197 4.43305 20.7253C4.52251 20.7313 4.6127 20.7261 4.70151 20.7097L5.04663 20.6423L5.59903 20.5248L6.06062 20.418L6.57028 20.2908L6.83634 20.2203C7.28912 20.0971 7.77381 19.951 8.21895 19.7856C8.28324 19.7617 8.34671 19.7374 8.40915 19.7128C8.46233 19.6916 8.51686 19.6693 8.57227 19.6459C8.98888 19.4702 9.45573 19.2314 9.78108 18.9061C9.85738 18.8296 9.92977 18.7494 9.99798 18.6656C10.06 18.8259 10.1177 18.9851 10.1711 19.1411C10.1942 19.2142 10.2162 19.2876 10.2372 19.3613L10.2375 19.3625C10.2944 19.5624 10.3435 19.7644 10.3848 19.9681L10.435 20.1893C10.4878 20.4193 10.5453 20.6498 10.6198 20.8694C10.7367 21.214 10.8954 21.5319 11.1434 21.7792C11.8197 22.4566 12.8989 22.1083 13.6981 21.7685L14.1255 21.5805L14.4568 21.4234C15.1331 21.09 15.8565 20.6252 16.0595 19.92C16.1898 19.4661 16.1727 19 16.1557 18.5332L16.145 18.2297C16.1407 18.0267 16.1418 17.8237 16.1621 17.6228C19.8943 15.0435 21.3805 11.712 21.8336 8.92001C22.0633 7.50533 22.028 6.2317 21.8934 5.25938L21.8336 4.84695C21.7321 4.20586 21.5622 3.48784 21.1198 3.04655ZM19.8013 5.15594C19.7581 4.88618 19.7138 4.69207 19.6648 4.5524C19.66 4.53861 19.6554 4.52631 19.6512 4.5154C19.6193 4.50301 19.5747 4.48751 19.5149 4.47037C19.284 4.40421 19.0117 4.36259 18.6384 4.311L18.3975 4.28077C17.4587 4.18142 16.5107 4.20851 15.5791 4.36132L15.5756 4.36188C13.2543 4.73856 10.452 5.96464 8.2348 9.17385L7.69202 9.95946L6.74158 10.0514C6.31181 10.093 5.89231 10.078 5.61637 10.068L5.56669 10.0663L5.3398 10.059C5.12707 10.0533 4.99857 10.0578 4.9185 10.0655C4.83218 10.1693 4.72342 10.3422 4.59291 10.605L4.45481 10.8962L4.29107 11.2662L4.19412 11.5078C4.16552 11.5835 4.14151 11.6526 4.12178 11.7156C7.263 12.2049 9.2252 13.4294 10.4536 14.8516L10.455 14.8499L10.4831 14.886C10.7396 15.1865 10.9636 15.4957 11.1593 15.8084C12.1725 17.4268 12.3957 19.1067 12.5098 19.9652L12.5174 20.0228C12.6289 19.9851 12.75 19.9377 12.8827 19.8815L13.271 19.7106L13.561 19.5732C13.8257 19.4419 13.9992 19.3326 14.1028 19.2461C14.1131 19.1428 14.1145 18.9669 14.1014 18.6084L14.1013 18.6055L14.0901 18.2875L14.0898 18.273C14.0849 18.0411 14.0841 17.7408 14.1169 17.4161L14.2123 16.4715L14.9934 15.9317C18.2016 13.7145 19.4279 10.912 19.8045 8.59052C19.998 7.39921 19.9665 6.33498 19.8581 5.54743L19.8013 5.15594ZM8.22458 17.4358C8.24012 17.4229 8.25535 17.4097 8.27024 17.3963C8.45329 17.2133 8.56371 16.9702 8.581 16.712C8.59829 16.4537 8.52128 16.198 8.36427 15.9923L8.27665 15.8919L8.25101 15.8673L8.15057 15.7818C7.98241 15.6573 7.78143 15.5849 7.57252 15.5735C7.36361 15.5621 7.15595 15.6123 6.97524 15.7177L6.85771 15.7968L6.75834 15.8855L6.62478 16.0543C6.46925 16.2792 6.35123 16.5523 6.2559 16.8403L6.25301 16.8491C6.17939 17.0728 6.11935 17.3053 6.06596 17.5309L5.95056 18.031L5.89607 18.2586L6.10015 18.2094L6.54678 18.1068C6.8407 18.0382 7.14987 17.9599 7.43858 17.8557L7.45213 17.8508C7.74341 17.7447 8.0132 17.6119 8.22458 17.4358ZM14.2163 12.1666C15.4389 12.1666 16.43 11.1755 16.43 9.95286C16.43 8.73027 15.4389 7.73916 14.2163 7.73916C12.9937 7.73916 12.0026 8.73027 12.0026 9.95286C12.0026 11.1755 12.9937 12.1666 14.2163 12.1666Z"
+                    fill="#3370FF"
+                  />
+                </svg>
+              </Box>
+              <Flex flexDirection="column" alignItems="flex-start">
+                <Text
+                  color="grayModern.600"
+                  fontFamily="PingFang SC"
+                  fontStyle="normal"
+                  fontSize="14px"
+                  fontWeight="400"
+                  lineHeight="20px"
+                  letterSpacing="0.25px">
+                  {t('dataDashboard.rpm')}
+                </Text>
+                <Text
+                  color="grayModern.900"
+                  fontFamily="PingFang SC"
+                  fontStyle="normal"
+                  fontSize="32px"
+                  fontWeight="500"
+                  lineHeight="40px">
+                  {dashboardData?.rpm || 0}
+                </Text>
+              </Flex>
+            </Flex>
+
+            <Flex
+              flex="1"
+              bg="purple.50"
+              gap="16px"
+              borderRadius="12px"
+              px="20px"
+              py="28px"
+              alignItems="center"
+              alignSelf="stretch">
+              <Box
+                display="flex"
+                alignItems="center"
+                p="8px"
+                borderRadius="999px"
+                bg="white"
+                boxShadow="0px 4px 16px -1px rgba(19, 51, 107, 0.02)">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="25"
+                  viewBox="0 0 24 25"
+                  fill="none">
+                  <path
+                    d="M8.39407 10.6488C9.49864 10.6488 10.3941 9.75332 10.3941 8.64875C10.3941 7.54418 9.49864 6.64875 8.39407 6.64875C7.2895 6.64875 6.39407 7.54418 6.39407 8.64875C6.39407 9.75332 7.2895 10.6488 8.39407 10.6488Z"
+                    fill="#6F5DD7"
+                  />
+                  <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M4.79475 1.80801C3.05296 1.80801 1.64096 3.22001 1.64096 4.96181V10.6545C1.64096 10.7076 1.64309 10.7606 1.64735 10.8132C1.68246 11.7079 2.04236 12.595 2.72593 13.2786L10.891 21.4437C12.3329 22.8856 14.6707 22.8856 16.1126 21.4437L21.2776 16.2787C22.7195 14.8368 22.7195 12.499 21.2776 11.0571L13.1125 2.89201C12.422 2.20152 11.5239 1.84134 10.6201 1.81247C10.5761 1.8095 10.5318 1.80801 10.4874 1.80801H4.79475ZM3.64096 4.96181C3.64096 4.32458 4.15753 3.80801 4.79475 3.80801H10.4863L10.5142 3.81037L10.544 3.8111C10.9642 3.82149 11.3783 3.98619 11.6983 4.30623L19.8634 12.4713C20.5243 13.1322 20.5243 14.2036 19.8634 14.8645L14.6984 20.0295C14.0375 20.6903 12.9661 20.6903 12.3052 20.0295L4.14014 11.8644C3.82269 11.5469 3.65813 11.137 3.64531 10.7204L3.64423 10.6855L3.64096 10.653V4.96181Z"
+                    fill="#6F5DD7"
+                  />
+                </svg>
+              </Box>
+              <Flex flexDirection="column" alignItems="flex-start">
+                <Text
+                  color="grayModern.600"
+                  fontFamily="PingFang SC"
+                  fontStyle="normal"
+                  fontSize="14px"
+                  fontWeight="400"
+                  lineHeight="20px"
+                  letterSpacing="0.25px">
+                  {t('dataDashboard.tpm')}
+                </Text>
+                <Text
+                  color="grayModern.900"
+                  fontFamily="PingFang SC"
+                  fontStyle="normal"
+                  fontSize="32px"
+                  fontWeight="500"
+                  lineHeight="40px">
+                  {dashboardData?.tpm || 0}
+                </Text>
+              </Flex>
+            </Flex>
+
+            <Flex
+              flex="1"
+              bg="teal.50"
+              gap="16px"
+              borderRadius="12px"
+              px="20px"
+              py="28px"
+              alignItems="center"
+              alignSelf="stretch">
+              <Box
+                display="flex"
+                alignItems="center"
+                p="8px"
+                borderRadius="999px"
+                bg="white"
+                boxShadow="0px 4px 16px -1px rgba(19, 51, 107, 0.02)">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="25"
+                  viewBox="0 0 24 25"
+                  fill="none">
+                  <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M11.9999 1.90797L12.0106 1.90809C13.2789 1.92155 14.6236 2.18541 15.6855 2.85917C16.797 3.56441 17.5621 4.70514 17.5621 6.27869C17.5621 6.8024 17.4244 7.28529 17.1979 7.71633C19.7487 9.43884 21.6996 12.34 21.6996 15.6884C21.6996 18.0511 20.5481 19.7896 18.7203 20.8896C16.9485 21.9558 14.5704 22.4139 12.0043 22.4251L11.9956 22.4252C9.42951 22.4139 7.05135 21.9558 5.27958 20.8896C3.4518 19.7896 2.30023 18.0511 2.30023 15.6884C2.30023 12.34 4.25118 9.43884 6.80193 7.71633C6.57551 7.28529 6.43779 6.8024 6.43779 6.27869C6.43779 4.70514 7.20283 3.56441 8.31437 2.85917C9.37627 2.18541 10.721 1.92155 11.9893 1.90809L11.9999 1.90797ZM9.38585 4.54793C8.79548 4.92251 8.43779 5.45482 8.43779 6.27869C8.43779 6.55213 8.56138 6.87345 8.88821 7.21424C9.37754 7.72447 9.27701 8.5898 8.62124 8.94751C6.15875 10.2907 4.30023 12.8555 4.30023 15.6884C4.30023 17.2834 5.02534 18.4024 6.31082 19.1759C7.6515 19.9827 9.62159 20.4142 11.9999 20.4251C14.3783 20.4142 16.3484 19.9827 17.689 19.1759C18.9745 18.4024 19.6996 17.2834 19.6996 15.6884C19.6996 12.8555 17.8411 10.2907 15.3786 8.94751C14.7229 8.5898 14.6223 7.72447 15.1117 7.21424C15.4385 6.87345 15.5621 6.55213 15.5621 6.27869C15.5621 5.45482 15.2044 4.92251 14.614 4.54793C13.9762 4.14323 13.044 3.92061 11.9999 3.90809C10.9559 3.92061 10.0237 4.14323 9.38585 4.54793Z"
+                    fill="#00A9A6"
+                  />
+                  <path
+                    d="M11.6248 10.4908C11.7537 10.1425 12.2462 10.1425 12.3751 10.4908L13.131 12.5335C13.1715 12.6429 13.2578 12.7293 13.3673 12.7698L15.41 13.5257C15.7582 13.6545 15.7582 14.1471 15.41 14.2759L13.3673 15.0318C13.2578 15.0723 13.1715 15.1586 13.131 15.2681L12.3751 17.3108C12.2462 17.6591 11.7537 17.6591 11.6248 17.3108L10.869 15.2681C10.8284 15.1586 10.7421 15.0723 10.6326 15.0318L8.58995 14.2759C8.2417 14.1471 8.2417 13.6545 8.58995 13.5257L10.6326 12.7698C10.7421 12.7293 10.8284 12.6429 10.869 12.5335L11.6248 10.4908Z"
+                    fill="#00A9A6"
+                  />
+                </svg>
+              </Box>
+              <Flex flexDirection="column" alignItems="flex-start">
+                <Flex alignItems="center" justifyContent="center" gap="2px">
+                  <Text
+                    color="grayModern.600"
+                    fontFamily="PingFang SC"
+                    fontStyle="normal"
+                    fontSize="14px"
+                    fontWeight="400"
+                    lineHeight="20px"
+                    letterSpacing="0.25px">
+                    {t('dataDashboard.cost')}
+                  </Text>
+                  {currencySymbol === 'shellCoin' ? (
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="15"
+                      height="15"
+                      viewBox="0 0 15 15"
+                      fill="none">
+                      <circle
+                        cx="7"
+                        cy="7.4854"
+                        r="6.74"
+                        fill="url(#paint0_linear_802_289)"
+                        stroke="url(#paint1_linear_802_289)"
+                        strokeWidth="0.52"
+                      />
+                      <circle
+                        cx="6.99996"
+                        cy="7.48542"
+                        r="6.11562"
+                        fill="url(#paint2_linear_802_289)"
+                      />
+                      <path
+                        d="M7.00004 13.601C10.3776 13.601 13.1157 10.863 13.1157 7.48541C13.1157 6.09903 12.6543 4.82038 11.8768 3.79462C11.4855 3.73941 11.0856 3.71085 10.679 3.71085C6.28906 3.71085 2.67666 7.0397 2.22829 11.3108C3.34913 12.7072 5.07019 13.601 7.00004 13.601Z"
+                        fill="url(#paint3_linear_802_289)"
+                      />
+                      <circle
+                        cx="7.00007"
+                        cy="7.48539"
+                        r="4.74284"
+                        fill="url(#paint4_linear_802_289)"
+                      />
+                      <path
+                        d="M5.0457 7.27105C5.43915 7.84631 6.25318 7.79525 6.25318 7.79525C6.04967 7.59782 5.91739 7.41741 5.90383 6.90342C5.89026 6.38943 5.59856 6.25328 5.59856 6.25328C6.1209 5.9231 5.93435 5.56569 5.91739 5.16743C5.90722 4.91895 6.05307 4.73514 6.16839 4.62962C5.50464 4.7294 4.90487 5.08243 4.49413 5.61512C4.0834 6.14782 3.89338 6.81905 3.96371 7.4889C4.0112 7.35614 4.68277 6.74004 5.0457 7.27105Z"
+                        fill="url(#paint5_linear_802_289)"
+                      />
+                      <path
+                        d="M9.86551 6.24649C9.84796 6.19055 9.82642 6.13595 9.80106 6.08311V6.0797C9.68269 5.83801 9.48642 5.64355 9.2441 5.52785C9.00177 5.41215 8.72761 5.382 8.46607 5.4423C8.20453 5.5026 7.97096 5.6498 7.80325 5.86003C7.63554 6.07027 7.54352 6.3312 7.54212 6.6005C7.54214 6.6852 7.55123 6.76965 7.56925 6.85239C7.56933 6.85352 7.56933 6.85466 7.56925 6.85579C7.57603 6.88983 7.58621 6.92387 7.59638 6.95791C7.65692 7.1977 7.6687 7.44727 7.63102 7.69172C7.59334 7.93618 7.50697 8.17051 7.37706 8.38073C7.24716 8.59095 7.07638 8.77275 6.87493 8.91528C6.67348 9.05781 6.44548 9.15815 6.20453 9.21031C5.96359 9.26246 5.71465 9.26537 5.47256 9.21886C5.23047 9.17234 5.0002 9.07735 4.7955 8.93957C4.5908 8.80178 4.41585 8.62402 4.28111 8.41689C4.14636 8.20976 4.05458 7.97751 4.01124 7.734C4.07253 8.15611 4.22146 8.56059 4.4484 8.92127C4.67533 9.28194 4.97521 9.59077 5.32862 9.82776C5.68204 10.0648 6.0811 10.2246 6.49998 10.297C6.91886 10.3694 7.34822 10.3527 7.76027 10.248C8.17231 10.1433 8.55786 9.95296 8.89194 9.68924C9.22603 9.42553 9.50121 9.09435 9.69966 8.71713C9.89812 8.33992 10.0154 7.92508 10.044 7.49949C10.0726 7.07389 10.0118 6.64701 9.86551 6.24649Z"
+                        fill="url(#paint6_linear_802_289)"
+                      />
+                      <path
+                        d="M9.36006 7.06679C9.36006 8.55005 8.16191 9.75248 6.68392 9.75248C5.89947 9.75248 5.19385 9.41375 4.70436 8.8741C4.73401 8.8968 4.76445 8.91867 4.7955 8.93957C5.0002 9.07735 5.23047 9.17234 5.47256 9.21886C5.71465 9.26537 5.96359 9.26246 6.20453 9.21031C6.44548 9.15815 6.67348 9.05781 6.87493 8.91528C7.07638 8.77275 7.24716 8.59095 7.37706 8.38073C7.50697 8.17051 7.59334 7.93618 7.63102 7.69172C7.6687 7.44727 7.65692 7.1977 7.59638 6.95791C7.58621 6.92387 7.57603 6.88983 7.56925 6.85579C7.56933 6.85466 7.56933 6.85352 7.56925 6.85239C7.55123 6.76965 7.54214 6.6852 7.54212 6.6005C7.54352 6.3312 7.63554 6.07027 7.80325 5.86003C7.97096 5.6498 8.20453 5.5026 8.46607 5.4423C8.57396 5.41742 8.68394 5.4079 8.79301 5.41347C9.1483 5.86929 9.36006 6.44322 9.36006 7.06679Z"
+                        fill="url(#paint7_linear_802_289)"
+                      />
+                      <g filter="url(#filter0_d_802_289)">
+                        <path
+                          d="M9.47934 2.93023L9.75865 3.43154L10.26 3.71084L9.75865 3.99014L9.47934 4.49146L9.20004 3.99014L8.69873 3.71084L9.20004 3.43154L9.47934 2.93023Z"
+                          fill="#F7F7F7"
+                        />
+                      </g>
+                      <defs>
+                        <filter
+                          id="filter0_d_802_289"
+                          x="4.69873"
+                          y="2.93023"
+                          width="9.56123"
+                          height="9.56123"
+                          filterUnits="userSpaceOnUse"
+                          colorInterpolationFilters="sRGB">
+                          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                          <feColorMatrix
+                            in="SourceAlpha"
+                            type="matrix"
+                            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                            result="hardAlpha"
+                          />
+                          <feOffset dy="4" />
+                          <feGaussianBlur stdDeviation="2" />
+                          <feComposite in2="hardAlpha" operator="out" />
+                          <feColorMatrix
+                            type="matrix"
+                            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
+                          />
+                          <feBlend
+                            mode="normal"
+                            in2="BackgroundImageFix"
+                            result="effect1_dropShadow_802_289"
+                          />
+                          <feBlend
+                            mode="normal"
+                            in="SourceGraphic"
+                            in2="effect1_dropShadow_802_289"
+                            result="shape"
+                          />
+                        </filter>
+                        <linearGradient
+                          id="paint0_linear_802_289"
+                          x1="3.85"
+                          y1="1.1854"
+                          x2="10.5"
+                          y2="13.7854"
+                          gradientUnits="userSpaceOnUse">
+                          <stop stopColor="#F0F0F0" />
+                          <stop offset="1" stopColor="#EBEBED" />
+                        </linearGradient>
+                        <linearGradient
+                          id="paint1_linear_802_289"
+                          x1="11.2"
+                          y1="13.0854"
+                          x2="2.1"
+                          y2="2.2354"
+                          gradientUnits="userSpaceOnUse">
+                          <stop stopColor="#2B3750" />
+                          <stop offset="1" stopColor="#9AA4B9" />
+                        </linearGradient>
+                        <linearGradient
+                          id="paint2_linear_802_289"
+                          x1="2.80003"
+                          y1="2.9354"
+                          x2="10.5"
+                          y2="12.7354"
+                          gradientUnits="userSpaceOnUse">
+                          <stop stopColor="#D6D8DF" />
+                          <stop offset="1" stopColor="#DADCE3" />
+                        </linearGradient>
+                        <linearGradient
+                          id="paint3_linear_802_289"
+                          x1="11.2"
+                          y1="11.6854"
+                          x2="4.20003"
+                          y2="6.0854"
+                          gradientUnits="userSpaceOnUse">
+                          <stop stopColor="#ABAFBF" />
+                          <stop offset="1" stopColor="#B7BACC" />
+                        </linearGradient>
+                        <linearGradient
+                          id="paint4_linear_802_289"
+                          x1="4.9"
+                          y1="3.2854"
+                          x2="9.8"
+                          y2="11.3354"
+                          gradientUnits="userSpaceOnUse">
+                          <stop stopColor="#9DA1B3" />
+                          <stop offset="1" stopColor="#535A73" />
+                        </linearGradient>
+                        <linearGradient
+                          id="paint5_linear_802_289"
+                          x1="4.89999"
+                          y1="4.68541"
+                          x2="9.09999"
+                          y2="10.2854"
+                          gradientUnits="userSpaceOnUse">
+                          <stop stopColor="#FCFCFC" />
+                          <stop offset="1" stopColor="#DDDFE6" />
+                        </linearGradient>
+                        <linearGradient
+                          id="paint6_linear_802_289"
+                          x1="4.89999"
+                          y1="4.68541"
+                          x2="9.09999"
+                          y2="10.2854"
+                          gradientUnits="userSpaceOnUse">
+                          <stop stopColor="#FCFCFC" />
+                          <stop offset="1" stopColor="#DDDFE6" />
+                        </linearGradient>
+                        <linearGradient
+                          id="paint7_linear_802_289"
+                          x1="4.89999"
+                          y1="4.68541"
+                          x2="9.09999"
+                          y2="10.2854"
+                          gradientUnits="userSpaceOnUse">
+                          <stop stopColor="#FCFCFC" />
+                          <stop offset="1" stopColor="#DDDFE6" />
+                        </linearGradient>
+                      </defs>
+                    </svg>
+                  ) : currencySymbol === 'cny' ? (
+                    <Text
+                      color="grayModern.600"
+                      fontFamily="PingFang SC"
+                      fontStyle="normal"
+                      fontSize="14px"
+                      fontWeight="400"
+                      lineHeight="20px"
+                      letterSpacing="0.25px">
+                      ￥
+                    </Text>
+                  ) : (
+                    <Text
+                      color="grayModern.600"
+                      fontFamily="PingFang SC"
+                      fontStyle="normal"
+                      fontSize="14px"
+                      fontWeight="400"
+                      lineHeight="20px"
+                      letterSpacing="0.25px">
+                      $
+                    </Text>
+                  )}
+                </Flex>
+                <Text
+                  color="grayModern.900"
+                  fontFamily="PingFang SC"
+                  fontStyle="normal"
+                  fontSize="32px"
+                  fontWeight="500"
+                  lineHeight="40px">
+                  {dashboardData?.used_amount ? Number(dashboardData.used_amount.toFixed(2)) : 0}
+                </Text>
+              </Flex>
+            </Flex>
+          </Flex>
+          {/* chart 1 end */}
+
+          <RequestDataChart data={dashboardData?.chart_data || []} />
+        </Flex>
       </Flex>
     </Flex>
   )
diff --git a/frontend/providers/aiproxy/app/[lng]/(user)/key/page.tsx b/frontend/providers/aiproxy/app/[lng]/(user)/key/page.tsx
new file mode 100644
index 000000000000..882c5a6f5cf7
--- /dev/null
+++ b/frontend/providers/aiproxy/app/[lng]/(user)/key/page.tsx
@@ -0,0 +1,184 @@
+'use client'
+
+import { Button, Flex, Link, Text } from '@chakra-ui/react'
+
+import KeyList from '@/components/user/KeyList'
+import { useBackendStore } from '@/store/backend'
+import { useTranslationClientSide } from '@/app/i18n/client'
+import { useI18n } from '@/providers/i18n/i18nContext'
+import { useSessionStore } from '@/store/session'
+import { MyTooltip } from '@/components/common/MyTooltip'
+export default function Key(): JSX.Element {
+  const { isInvitationActive } = useBackendStore()
+  const { lng } = useI18n()
+  const { t } = useTranslationClientSide(lng, 'common')
+  const { session } = useSessionStore.getState()
+  const { invitationUrl } = useBackendStore()
+  let userInvitationUrl = ''
+  if (isInvitationActive && invitationUrl) {
+    const userId = session?.user.id
+    const baseUrl = new URL(invitationUrl).origin
+    userInvitationUrl = `${baseUrl}/?uid=${userId}`
+  }
+
+  return (
+    <Flex pt="4px" pb="12px" pr="12px" gap="8px" h="full" w="full">
+      {isInvitationActive ? (
+        <Flex
+          flexGrow="1"
+          p="12px 32px 8px 32px"
+          flexDirection="column"
+          alignItems="flex-start"
+          gap="24px"
+          bg="white"
+          h="full"
+          w="full"
+          minW="500px"
+          borderRadius="12px">
+          <Flex
+            p="6px 12px"
+            justifyContent="center"
+            alignItems="center"
+            alignSelf="stretch"
+            borderRadius="6px"
+            bgGradient="linear(90deg, #F0F4FF 4%, #FAF1FF 54%, #F0F4FF 100%)">
+            <Flex gap="20px">
+              <Flex gap="6px" alignItems="center">
+                <Flex>
+                  <Text
+                    color="grayModern.900"
+                    fontFamily="PingFang SC"
+                    fontSize="14px"
+                    fontStyle="normal"
+                    fontWeight={500}
+                    lineHeight="20px"
+                    letterSpacing="0.1px">
+                    🎉{t('keyList.invitationText1')}
+                  </Text>
+                </Flex>
+                <Flex>
+                  <Text
+                    color="grayModern.900"
+                    fontFamily="PingFang SC"
+                    fontSize="14px"
+                    fontStyle="normal"
+                    fontWeight={400}
+                    lineHeight="20px"
+                    letterSpacing="0.25px">
+                    {t('keyList.invitationText2')}
+                  </Text>
+                  <Text
+                    sx={{
+                      background:
+                        'linear-gradient(90deg, #004CFF 0.92%, #FF53D4 40.73%, #004CFF 91.52%)',
+                      backgroundClip: 'text',
+                      WebkitBackgroundClip: 'text',
+                      WebkitTextFillColor: 'transparent'
+                    }}
+                    fontFamily="PingFang SC"
+                    fontSize="14px"
+                    fontStyle="normal"
+                    fontWeight={500}
+                    lineHeight="20px"
+                    letterSpacing="0.1px">
+                    {t('keyList.invitationText3')}
+                  </Text>
+                </Flex>
+                <Flex>
+                  <Text
+                    color="grayModern.900"
+                    fontFamily="PingFang SC"
+                    fontSize="14px"
+                    fontStyle="normal"
+                    fontWeight={500}
+                    lineHeight="20px"
+                    letterSpacing="0.1px">
+                    {t('keyList.invitationText4')}
+                  </Text>
+                  <MyTooltip width="auto" height="auto" label={t('keyList.invitationText5')}>
+                    <Text
+                      color="#487FFF"
+                      fontFamily="PingFang SC"
+                      fontSize="14px"
+                      fontStyle="normal"
+                      fontWeight={500}
+                      lineHeight="20px"
+                      letterSpacing="0.1px"
+                      textDecoration="underline"
+                      textDecorationStyle="solid"
+                      textUnderlineOffset="auto"
+                      cursor="pointer"
+                      onClick={() => {
+                        navigator.clipboard.writeText(userInvitationUrl)
+                      }}>
+                      {userInvitationUrl}
+                    </Text>
+                  </MyTooltip>
+                </Flex>
+              </Flex>
+
+              <Button
+                variant="unstyled"
+                display="flex"
+                w="92px"
+                h="28px"
+                minW="92px"
+                minH="28px"
+                padding="6px 12px"
+                justifyContent="center"
+                alignItems="center"
+                gap="4px"
+                borderRadius="52px"
+                bgGradient="linear(90deg, #1058FF 0%, #838AF1 57.5%, #FF80E6 100%)"
+                color="white"
+                onClick={() => {
+                  window.open(invitationUrl, '_blank')
+                }}>
+                <Text
+                  color="white"
+                  fontFamily="PingFang SC"
+                  fontSize="12px"
+                  fontWeight={500}
+                  lineHeight="16px"
+                  letterSpacing="0.5px">
+                  {t('keyList.invite')}
+                </Text>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="15"
+                  height="14"
+                  viewBox="0 0 15 14"
+                  fill="none">
+                  <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M8.25419 3.08752C8.02638 3.31533 8.02638 3.68467 8.25419 3.91248L10.7584 6.41667H2.83333C2.51117 6.41667 2.25 6.67783 2.25 7C2.25 7.32217 2.51117 7.58333 2.83333 7.58333H10.7584L8.25419 10.0875C8.02638 10.3153 8.02638 10.6847 8.25419 10.9125C8.48199 11.1403 8.85134 11.1403 9.07915 10.9125L12.5791 7.41248C12.807 7.18467 12.807 6.81533 12.5791 6.58752L9.07915 3.08752C8.85134 2.85972 8.48199 2.85972 8.25419 3.08752Z"
+                    fill="white"
+                  />
+                </svg>
+              </Button>
+            </Flex>
+          </Flex>
+
+          <Flex flexDirection="column" alignItems="flex-start" gap="16px" w="full" h="full">
+            <KeyList />
+          </Flex>
+        </Flex>
+      ) : (
+        <Flex
+          flexGrow="1"
+          p="24px 32px 8px 32px"
+          flexDirection="column"
+          alignItems="flex-start"
+          gap="13px"
+          bg="white"
+          h="full"
+          w="full"
+          minW="500px"
+          borderRadius="12px">
+          <KeyList />
+        </Flex>
+      )}
+    </Flex>
+  )
+}
diff --git a/frontend/providers/aiproxy/app/[lng]/(user)/layout.tsx b/frontend/providers/aiproxy/app/[lng]/(user)/layout.tsx
index 62d16d0f4bc6..658bcb8f2802 100644
--- a/frontend/providers/aiproxy/app/[lng]/(user)/layout.tsx
+++ b/frontend/providers/aiproxy/app/[lng]/(user)/layout.tsx
@@ -1,115 +1,15 @@
-'use client'
 import { Box, Flex } from '@chakra-ui/react'
 
 import SideBar from '@/components/user/Sidebar'
 
-import { EVENT_NAME } from 'sealos-desktop-sdk'
-import { createSealosApp, sealosApp } from 'sealos-desktop-sdk/app'
-import { useCallback, useEffect } from 'react'
-import { initAppConfig } from '@/api/platform'
-import { useI18n } from '@/providers/i18n/i18nContext'
-import { useBackendStore } from '@/store/backend'
-import { useTranslationClientSide } from '@/app/i18n/client'
-import { usePathname } from 'next/navigation'
-import { useRouter } from 'next/navigation'
-
 export default function UserLayout({ children }: { children: React.ReactNode }) {
-  const router = useRouter()
-  const pathname = usePathname()
-  const { lng } = useI18n()
-  const { i18n } = useTranslationClientSide(lng)
-  const { setAiproxyBackend, setCurrencySymbol } = useBackendStore()
-
-  const handleI18nChange = useCallback(
-    (data: { currentLanguage: string }) => {
-      const currentLng = i18n.resolvedLanguage // get the latest resolvedLanguage
-      const newLng = data.currentLanguage
-
-      if (currentLng !== newLng) {
-        const currentPath = window.location.pathname
-        const pathWithoutLang = currentPath.split('/').slice(2).join('/')
-        router.push(`/${newLng}/${pathWithoutLang}`)
-      }
-    },
-    [i18n.resolvedLanguage]
-  )
-
-  // init session
-  useEffect(() => {
-    const cleanup = createSealosApp()
-    ;(async () => {
-      try {
-        const newSession = JSON.stringify(await sealosApp.getSession())
-        const oldSession = localStorage.getItem('session')
-        if (newSession && newSession !== oldSession) {
-          localStorage.setItem('session', newSession)
-          window.location.reload()
-        }
-        console.log('aiproxy: app init success')
-      } catch (err) {
-        console.log('aiproxy: app is not running in desktop')
-        if (!process.env.NEXT_PUBLIC_MOCK_USER) {
-          localStorage.removeItem('session')
-        }
-      }
-    })()
-    return () => {
-      if (cleanup && typeof cleanup === 'function') {
-        cleanup()
-      }
-    }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  // init config and language
-  useEffect(() => {
-    const initConfig = async () => {
-      const { aiproxyBackend, currencySymbol } = await initAppConfig()
-      setAiproxyBackend(aiproxyBackend)
-      setCurrencySymbol(currencySymbol)
-    }
-
-    initConfig()
-
-    const initLanguage = async () => {
-      const pathLng = pathname.split('/')[1]
-      try {
-        const lang = await sealosApp.getLanguage()
-        if (pathLng !== lang.lng) {
-          const pathParts = pathname.split('/')
-          pathParts[1] = lang.lng
-          router.push(pathParts.join('/'))
-          router.refresh()
-        }
-      } catch (error) {
-        if (error instanceof Error) {
-          console.debug('Language initialization error:', error.message)
-        } else {
-          console.debug('Unknown language initialization error:', error)
-        }
-      }
-    }
-
-    initLanguage()
-
-    const cleanup = sealosApp?.addAppEventListen(EVENT_NAME.CHANGE_I18N, handleI18nChange)
-
-    return () => {
-      if (cleanup && typeof cleanup === 'function') {
-        cleanup()
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
   return (
-    <Flex height="100vh" width="100vw" direction="row">
-      <Box w="88px" h="100vh">
+    <Flex height="full" width="full" direction="row">
+      <Box w="88px" h="full" minW="88px">
         <SideBar />
       </Box>
       {/* Main Content */}
-      <Box h="100vh" w="full" flex={1}>
+      <Box w="full" h="full" flex="1">
         {children}
       </Box>
     </Flex>
diff --git a/frontend/providers/aiproxy/app/[lng]/(user)/log/components/LogDetailModal.tsx b/frontend/providers/aiproxy/app/[lng]/(user)/log/components/LogDetailModal.tsx
new file mode 100644
index 000000000000..0268dd7ef626
--- /dev/null
+++ b/frontend/providers/aiproxy/app/[lng]/(user)/log/components/LogDetailModal.tsx
@@ -0,0 +1,634 @@
+'use client'
+
+import {
+  Box,
+  Flex,
+  Text,
+  Modal,
+  ModalOverlay,
+  ModalHeader,
+  ModalCloseButton,
+  ModalBody,
+  ModalContent,
+  Grid,
+  Center,
+  Spinner
+} from '@chakra-ui/react'
+import { CurrencySymbol } from '@sealos/ui'
+import { MyTooltip } from '@/components/common/MyTooltip'
+
+import { getUserLogDetail } from '@/api/platform'
+import { useTranslationClientSide } from '@/app/i18n/client'
+import { useI18n } from '@/providers/i18n/i18nContext'
+import { LogItem } from '@/types/user/logs'
+import { useQuery } from '@tanstack/react-query'
+import { QueryKey } from '@/types/query-key'
+import { useBackendStore } from '@/store/backend'
+import { getTranslationWithFallback } from '@/utils/common'
+import ReactJson, { OnCopyProps } from 'react-json-view'
+import { getTimeDiff } from '../tools/handleTime'
+import { useMessage } from '@sealos/ui'
+
+export default function LogDetailModal({
+  isOpen,
+  onClose,
+  rowData
+}: {
+  isOpen: boolean
+  onClose: () => void
+  rowData: LogItem | null
+}): React.JSX.Element {
+  const { lng } = useI18n()
+  const { t } = useTranslationClientSide(lng, 'common')
+  const { currencySymbol } = useBackendStore()
+
+  const { data: logDetail, isLoading } = useQuery({
+    queryKey: [QueryKey.GetUserLogDetail, rowData?.request_detail?.log_id],
+    queryFn: () => {
+      if (!rowData?.request_detail?.log_id) throw new Error('No log ID')
+      return getUserLogDetail(rowData.request_detail.log_id)
+    },
+    enabled: !!rowData?.request_detail?.log_id
+  })
+
+  const isDetailLoading = !!rowData?.request_detail?.log_id && isLoading
+
+  const { message } = useMessage({
+    warningBoxBg: 'var(--Yellow-50, #FFFAEB)',
+    warningIconBg: 'var(--Yellow-500, #F79009)',
+    warningIconFill: 'white',
+    successBoxBg: 'var(--Green-50, #EDFBF3)',
+    successIconBg: 'var(--Green-600, #039855)',
+    successIconFill: 'white'
+  })
+
+  // 定义默认的网格配置
+  const gridConfig = {
+    labelWidth: '153px',
+    rowHeight: '48px',
+    jsonContentHeight: '122px'
+  }
+
+  const renderDetailRow = (
+    leftLabel: string | React.ReactNode,
+    leftValue: string | number | React.ReactNode | undefined,
+    rightLabel?: string | React.ReactNode,
+    rightValue?: string | number | React.ReactNode | undefined,
+    options?: {
+      labelWidth?: string
+      rowHeight?: string
+      isFirst?: boolean
+      isLast?: boolean
+    }
+  ) => {
+    // 辅助函数：渲染标签
+    const renderLabel = (label: string | React.ReactNode) => {
+      if (typeof label === 'string') {
+        return (
+          <Text
+            color="grayModern.800"
+            fontSize="14px"
+            fontWeight={500}
+            lineHeight="20px"
+            letterSpacing="0.1px">
+            {label}
+          </Text>
+        )
+      }
+      return label
+    }
+
+    // 辅助函数：渲染值
+    const renderValue = (value: string | number | React.ReactNode | undefined) => {
+      if (typeof value === 'string' || typeof value === 'number') {
+        return (
+          <Text
+            color="grayModern.600"
+            fontFamily="PingFang SC"
+            fontSize="14px"
+            fontWeight={500}
+            lineHeight="20px"
+            letterSpacing="0.1px">
+            {value}
+          </Text>
+        )
+      }
+      return value
+    }
+    return (
+      <Grid
+        templateColumns={rightLabel ? '1fr 1fr' : '1fr'}
+        gap="0 0"
+        borderLeft="1px solid var(--Gray-Modern-200, #E8EBF0)"
+        borderRight="1px solid var(--Gray-Modern-200, #E8EBF0)"
+        borderTop="1px solid var(--Gray-Modern-200, #E8EBF0)"
+        borderBottom={options?.isLast ? '1px solid var(--Gray-Modern-200, #E8EBF0)' : 'none'}
+        borderRadius={
+          options?.isFirst && options?.isLast
+            ? '8px'
+            : options?.isFirst
+            ? '8px 8px 0 0'
+            : options?.isLast
+            ? '0 0 8px 8px'
+            : '0'
+        }
+        overflow="hidden">
+        <Grid templateColumns={`${options?.labelWidth || '153px'} 1fr`} gap="0 0">
+          <Box
+            bg="grayModern.25"
+            px="18px"
+            py="15px"
+            borderRight="1px solid var(--Gray-Modern-200, #E8EBF0)"
+            h={options?.rowHeight || '48px'}
+            display="flex"
+            alignItems="center">
+            {renderLabel(leftLabel)}
+          </Box>
+          <Box
+            bg="white"
+            p="12px"
+            maxW="100%"
+            h={options?.rowHeight || '48px'}
+            display="flex"
+            alignItems="center"
+            overflowX="auto"
+            sx={{
+              '&::-webkit-scrollbar': {
+                display: 'none'
+              },
+              msOverflowStyle: 'none',
+              scrollbarWidth: 'none'
+            }}>
+            {renderValue(leftValue)}
+          </Box>
+        </Grid>
+        {rightLabel && (
+          <Grid templateColumns={`${options?.labelWidth || '153px'} 1fr`}>
+            <Box
+              bg="grayModern.25"
+              px="18px"
+              py="15px"
+              borderRight="1px solid var(--Gray-Modern-200, #E8EBF0)"
+              borderLeft="1px solid var(--Gray-Modern-200, #E8EBF0)"
+              h={options?.rowHeight || '48px'}
+              display="flex"
+              alignItems="center">
+              {renderLabel(rightLabel)}
+            </Box>
+            <Box
+              bg="white"
+              p="12px"
+              h={options?.rowHeight || '48px'}
+              display="flex"
+              alignItems="center">
+              {renderValue(rightValue)}
+            </Box>
+          </Grid>
+        )}
+      </Grid>
+    )
+  }
+
+  const renderJsonContent = (
+    label: string,
+    content: string | undefined,
+    options?: {
+      labelWidth?: string
+      contentHeight?: string
+      isFirst?: boolean
+      isLast?: boolean
+    }
+  ) => {
+    if (!content) return null
+    const handleCopy = (copy: OnCopyProps) => {
+      if (typeof window === 'undefined') return
+
+      const copyText =
+        typeof copy.src === 'object' ? JSON.stringify(copy.src, null, 2) : String(copy.src)
+
+      navigator.clipboard.writeText(copyText)
+    }
+
+    let parsed = null
+
+    try {
+      parsed = JSON.parse(content)
+    } catch {
+      parsed = content
+    }
+    return (
+      <Grid
+        templateColumns={`${options?.labelWidth || '153px'} 1fr`}
+        borderRadius={
+          options?.isFirst && options?.isLast
+            ? '8px'
+            : options?.isFirst
+            ? '8px 8px 0 0'
+            : options?.isLast
+            ? '0 0 8px 8px'
+            : '0'
+        }
+        borderLeft="1px solid var(--Gray-Modern-200, #E8EBF0)"
+        borderRight="1px solid var(--Gray-Modern-200, #E8EBF0)"
+        borderTop="1px solid var(--Gray-Modern-200, #E8EBF0)"
+        borderBottom={options?.isLast ? '1px solid var(--Gray-Modern-200, #E8EBF0)' : 'none'}
+        overflow="hidden">
+        <Box
+          bg="grayModern.25"
+          px="18px"
+          py="15px"
+          borderRight="1px solid var(--Gray-Modern-200, #E8EBF0)"
+          display="flex"
+          alignItems="center"
+          h="100%"
+          borderTopLeftRadius={options?.isFirst ? '8px' : '0'}
+          borderBottomLeftRadius={options?.isLast ? '8px' : '0'}>
+          <Text
+            color="grayModern.800"
+            fontSize="14px"
+            fontWeight={500}
+            lineHeight="20px"
+            letterSpacing="0.1px">
+            {label}
+          </Text>
+        </Box>
+        <Box
+          bg="white"
+          p="12px"
+          maxH={options?.contentHeight || '122px'}
+          minH={options?.contentHeight || '122px'}
+          overflowY="auto"
+          borderTopRightRadius={options?.isFirst ? '8px' : '0'}
+          borderBottomRightRadius={options?.isLast ? '8px' : '0'}
+          sx={{
+            '&::-webkit-scrollbar': {
+              width: '4px',
+              height: '4px'
+            },
+            '&::-webkit-scrollbar-track': {
+              background: 'grayModern.100',
+              borderRadius: '2px'
+            },
+            '&::-webkit-scrollbar-thumb': {
+              background: 'grayModern.200',
+              borderRadius: '2px'
+            },
+            '&::-webkit-scrollbar-thumb:hover': {
+              background: 'grayModern.300'
+            }
+          }}>
+          {typeof parsed === 'object' ? (
+            <ReactJson
+              src={parsed}
+              theme="rjv-default"
+              name={false}
+              displayDataTypes={false}
+              enableClipboard={handleCopy}
+              collapsed={2}
+              style={{
+                fontSize: '14px',
+                fontFamily: 'Monaco, monospace',
+                backgroundColor: 'transparent',
+                width: '100%',
+                height: '100%'
+              }}
+              iconStyle="circle"
+            />
+          ) : (
+            <Text color="grayModern.600" fontSize="14px" fontWeight={500} lineHeight="20px">
+              {parsed}
+            </Text>
+          )}
+        </Box>
+      </Grid>
+    )
+  }
+
+  return isDetailLoading ? (
+    <Modal isOpen={isOpen} onClose={onClose} isCentered>
+      <ModalOverlay />
+      <ModalContent w="730px" maxW="730px" maxH="806px" flexShrink="0">
+        <ModalHeader
+          height="48px"
+          padding="10px 20px"
+          justifyContent="center"
+          alignItems="center"
+          flexShrink="0"
+          borderBottom="1px solid grayModern.100"
+          background="grayModern.25"
+          w="full">
+          <Flex alignItems="flex-start" flexShrink="0">
+            <Text
+              color="grayModern.900"
+              fontFamily="PingFang SC"
+              fontSize="16px"
+              fontStyle="normal"
+              fontWeight={500}
+              lineHeight="24px"
+              letterSpacing="0.15px">
+              {t('logs.logDetail')}
+            </Text>
+          </Flex>
+        </ModalHeader>
+        <ModalCloseButton
+          display="flex"
+          width="28px"
+          height="28px"
+          padding="4px"
+          justifyContent="center"
+          alignItems="center"
+          flexShrink={0}
+          borderRadius="4px"
+        />
+        <ModalBody>
+          <Center w="full" minH="400px">
+            <Spinner size="xl" />
+          </Center>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  ) : (
+    <Modal isOpen={isOpen} onClose={onClose} isCentered>
+      <ModalOverlay />
+      <ModalContent w="730px" maxW="730px" maxH="806px" flexShrink="0">
+        <ModalHeader
+          height="48px"
+          padding="10px 20px"
+          justifyContent="center"
+          alignItems="center"
+          flexShrink="0"
+          borderBottom="1px solid grayModern.100"
+          background="grayModern.25"
+          w="full">
+          <Flex alignItems="flex-start" flexShrink="0">
+            <Text
+              color="grayModern.900"
+              fontFamily="PingFang SC"
+              fontSize="16px"
+              fontStyle="normal"
+              fontWeight={500}
+              lineHeight="24px"
+              letterSpacing="0.15px">
+              {t('logs.logDetail')}
+            </Text>
+          </Flex>
+        </ModalHeader>
+        <ModalCloseButton
+          display="flex"
+          width="28px"
+          height="28px"
+          padding="4px"
+          justifyContent="center"
+          alignItems="center"
+          flexShrink={0}
+          borderRadius="4px"
+        />
+        <ModalBody
+          py="18px"
+          px="20px"
+          overflowY="auto"
+          sx={{
+            '&::-webkit-scrollbar': {
+              display: 'none'
+            },
+            msOverflowStyle: 'none',
+            scrollbarWidth: 'none'
+          }}>
+          <Flex direction="column" gap="0">
+            {renderDetailRow(
+              t('logs.requestId'),
+              rowData?.request_id,
+              t('logs.status'),
+              <Text
+                color={
+                  rowData?.code === 200 ? 'var(--Green-600, #039855)' : 'var(--Red-600, #D92D20)'
+                }
+                fontFamily="PingFang SC"
+                fontSize="14px"
+                fontWeight={500}
+                lineHeight="20px"
+                letterSpacing="0.5px">
+                {rowData?.code === 200
+                  ? t('logs.success')
+                  : `${t('logs.failed')} (${rowData?.code})`}
+              </Text>,
+              {
+                labelWidth: gridConfig.labelWidth,
+                rowHeight: gridConfig.rowHeight,
+                isFirst: true
+              }
+            )}
+            {renderDetailRow(
+              'Endpoint',
+              rowData?.endpoint,
+              t('logs.mode'),
+              getTranslationWithFallback(
+                `modeType.${String(rowData?.mode)}`,
+                'modeType.0',
+                t as any
+              ),
+              {
+                labelWidth: gridConfig.labelWidth,
+                rowHeight: gridConfig.rowHeight,
+                isFirst: false
+              }
+            )}
+            {renderDetailRow(
+              t('logs.requestTime'),
+              new Date(rowData?.created_at || 0).toLocaleString(),
+              t('logs.totalTime'),
+              getTimeDiff(rowData?.created_at || 0, rowData?.request_at || 0),
+              {
+                labelWidth: gridConfig.labelWidth,
+                rowHeight: gridConfig.rowHeight,
+                isFirst: false
+              }
+            )}
+            {renderDetailRow(
+              t('logs.tokenName'),
+              rowData?.token_name,
+              t('logs.tokenId'),
+              rowData?.token_id,
+              {
+                labelWidth: gridConfig.labelWidth,
+                rowHeight: gridConfig.rowHeight,
+                isFirst: false
+              }
+            )}
+            {renderDetailRow(t('logs.model'), rowData?.model, undefined, undefined, {
+              labelWidth: gridConfig.labelWidth,
+              rowHeight: gridConfig.rowHeight,
+              isFirst: false
+            })}
+
+            {rowData?.content &&
+              renderDetailRow(
+                t('logs.info'),
+                <Flex
+                  w="100%"
+                  overflowX="auto"
+                  sx={{
+                    '&::-webkit-scrollbar': {
+                      display: 'none'
+                    },
+                    msOverflowStyle: 'none',
+                    scrollbarWidth: 'none'
+                  }}>
+                  <Text
+                    color="grayModern.600"
+                    fontFamily="PingFang SC"
+                    fontSize="14px"
+                    fontWeight={500}
+                    lineHeight="20px"
+                    letterSpacing="0.1px"
+                    whiteSpace="nowrap"
+                    cursor="pointer"
+                    onClick={() => {
+                      navigator.clipboard.writeText(rowData.content || '').then(
+                        () => {
+                          message({
+                            status: 'success',
+                            title: t('copySuccess'),
+                            isClosable: true,
+                            duration: 2000,
+                            position: 'top'
+                          })
+                        },
+                        (err) => {
+                          message({
+                            status: 'warning',
+                            title: t('copyFailed'),
+                            description: err?.message || t('copyFailed'),
+                            isClosable: true,
+                            position: 'top'
+                          })
+                        }
+                      )
+                    }}>
+                    {rowData.content}
+                  </Text>
+                </Flex>,
+                undefined,
+                undefined,
+                {
+                  labelWidth: gridConfig.labelWidth,
+                  rowHeight: gridConfig.rowHeight,
+                  isFirst: false
+                }
+              )}
+
+            {logDetail?.request_body &&
+              renderJsonContent(t('logs.requestBody'), logDetail.request_body, {
+                labelWidth: gridConfig.labelWidth,
+                contentHeight: gridConfig.jsonContentHeight,
+                isFirst: false
+              })}
+            {logDetail?.response_body &&
+              renderJsonContent(t('logs.responseBody'), logDetail.response_body, {
+                labelWidth: gridConfig.labelWidth,
+                contentHeight: gridConfig.jsonContentHeight,
+                isLast: false
+              })}
+
+            {renderDetailRow(
+              <Flex alignItems="center" justifyContent="flex-start" flexWrap="wrap">
+                <Text
+                  color="grayModern.800"
+                  fontFamily="PingFang SC"
+                  fontSize="14px"
+                  fontWeight={500}
+                  lineHeight="20px"
+                  mr={'4px'}
+                  letterSpacing="0.5px"
+                  whiteSpace="nowrap">
+                  {t('key.inputPrice')}
+                </Text>
+                <CurrencySymbol type={currencySymbol} />
+                <Text
+                  color="grayModern.500"
+                  fontFamily="PingFang SC"
+                  fontSize="12px"
+                  fontWeight={500}
+                  lineHeight="16px"
+                  letterSpacing="0.5px"
+                  textTransform="lowercase"
+                  whiteSpace="nowrap">
+                  /{t('price.per1kTokens').toLowerCase()}
+                </Text>
+              </Flex>,
+              rowData?.price,
+              <Flex alignItems="center" justifyContent="flex-start" flexWrap="wrap">
+                <Text
+                  color="grayModern.800"
+                  fontFamily="PingFang SC"
+                  fontSize="14px"
+                  fontWeight={500}
+                  lineHeight="20px"
+                  mr="4px"
+                  letterSpacing="0.5px"
+                  whiteSpace="nowrap">
+                  {t('key.outputPrice')}
+                </Text>
+                <CurrencySymbol type={currencySymbol} />
+                <Text
+                  color="grayModern.500"
+                  fontFamily="PingFang SC"
+                  fontSize="12px"
+                  fontWeight={500}
+                  lineHeight="16px"
+                  letterSpacing="0.5px"
+                  textTransform="lowercase"
+                  whiteSpace="nowrap">
+                  /{t('price.per1kTokens').toLowerCase()}
+                </Text>
+              </Flex>,
+              rowData?.completion_price,
+              {
+                labelWidth: gridConfig.labelWidth,
+                rowHeight: gridConfig.rowHeight,
+                isFirst: false
+              }
+            )}
+            {renderDetailRow(
+              t('logs.inputTokens'),
+              rowData?.prompt_tokens,
+              t('logs.outputTokens'),
+              rowData?.completion_tokens,
+              {
+                labelWidth: gridConfig.labelWidth,
+                rowHeight: gridConfig.rowHeight,
+                isFirst: false
+              }
+            )}
+
+            {renderDetailRow(
+              <MyTooltip placement="bottom-end" label={t('logs.total_price_tip')}>
+                <Flex alignItems={'center'} gap={'4px'}>
+                  <Text
+                    noOfLines={1}
+                    color="grayModern.800"
+                    fontFamily="PingFang SC"
+                    fontSize="14px"
+                    fontWeight={500}
+                    lineHeight="20px"
+                    letterSpacing="0.5px">
+                    {t('logs.total_price')}
+                  </Text>
+                  <CurrencySymbol type={currencySymbol} />
+                </Flex>
+              </MyTooltip>,
+              rowData?.used_amount || 0,
+              undefined,
+              undefined,
+              {
+                labelWidth: gridConfig.labelWidth,
+                rowHeight: gridConfig.rowHeight,
+                isLast: true
+              }
+            )}
+          </Flex>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  )
+}
diff --git a/frontend/providers/aiproxy/app/[lng]/(user)/log/page.tsx b/frontend/providers/aiproxy/app/[lng]/(user)/log/page.tsx
new file mode 100644
index 000000000000..737671a09c19
--- /dev/null
+++ b/frontend/providers/aiproxy/app/[lng]/(user)/log/page.tsx
@@ -0,0 +1,662 @@
+'use client'
+
+import {
+  Box,
+  Flex,
+  Text,
+  Button,
+  Icon,
+  useDisclosure,
+  InputGroup,
+  InputRightElement,
+  Input
+} from '@chakra-ui/react'
+import { CurrencySymbol, MySelect, MyTooltip } from '@sealos/ui'
+import { useMemo, useState } from 'react'
+
+import { getTokens, getUserLogs, getEnabledMode } from '@/api/platform'
+import { useTranslationClientSide } from '@/app/i18n/client'
+import SelectDateRange from '@/components/common/SelectDateRange'
+import SwitchPage from '@/components/common/SwitchPage'
+import { BaseTable } from '@/components/table/BaseTable'
+import { useI18n } from '@/providers/i18n/i18nContext'
+import { LogItem } from '@/types/user/logs'
+import { useQuery } from '@tanstack/react-query'
+import { getCoreRowModel, useReactTable, createColumnHelper } from '@tanstack/react-table'
+import { QueryKey } from '@/types/query-key'
+import { useBackendStore } from '@/store/backend'
+import { SingleSelectComboboxUnstyle } from '@/components/common/SingleSelectComboboxUnStyle'
+import { getTimeDiff } from './tools/handleTime'
+import dynamic from 'next/dynamic'
+import { useDebounce } from '@/hooks/useDebounce'
+
+const LogDetailModal = dynamic(
+  () => import('./components/LogDetailModal'),
+  { ssr: false } // 禁用服务端渲染
+)
+
+export default function Logs(): React.JSX.Element {
+  const { lng } = useI18n()
+  const { t } = useTranslationClientSide(lng, 'common')
+  const { currencySymbol } = useBackendStore()
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const [selectedRow, setSelectedRow] = useState<LogItem | null>(null)
+
+  const [startTime, setStartTime] = useState(() => {
+    const currentDate = new Date()
+    currentDate.setDate(currentDate.getDate() - 3)
+    return currentDate
+  })
+  const [endTime, setEndTime] = useState(new Date())
+  const [keyName, setKeyName] = useState('')
+  const [codeType, setCodeType] = useState('all')
+  const [modelName, setModelName] = useState('')
+  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(10)
+  const [inputKeyword, setInputKeyword] = useState('')
+  const debouncedKeyword = useDebounce(inputKeyword, 500) // 500ms 延迟 0.5s
+
+  const { data: logData, isLoading } = useQuery(
+    [
+      QueryKey.GetUserLogs,
+      page,
+      pageSize,
+      keyName,
+      modelName,
+      startTime,
+      endTime,
+      codeType,
+      debouncedKeyword
+    ],
+    () =>
+      getUserLogs({
+        page,
+        perPage: pageSize,
+        token_name: keyName,
+        model_name: modelName,
+        keyword: debouncedKeyword,
+        code_type: codeType as 'all' | 'success' | 'error',
+        start_timestamp: startTime.getTime().toString(),
+        end_timestamp: endTime.getTime().toString()
+      })
+  )
+
+  const columnHelper = createColumnHelper<LogItem>()
+
+  const columns = useMemo(
+    () => [
+      columnHelper.accessor('token_name', {
+        header: () => (
+          <Text
+            color="grayModern.600"
+            fontFamily="PingFang SC"
+            fontSize="12px"
+            fontWeight={500}
+            lineHeight="16px"
+            letterSpacing="0.5px">
+            {t('logs.name')}
+          </Text>
+        ),
+        id: 'token_name'
+      }),
+      columnHelper.accessor('model', {
+        header: () => (
+          <Text
+            color="grayModern.600"
+            fontFamily="PingFang SC"
+            fontSize="12px"
+            fontWeight={500}
+            lineHeight="16px"
+            letterSpacing="0.5px">
+            {t('logs.model')}
+          </Text>
+        ),
+        id: 'model'
+      }),
+      columnHelper.accessor('prompt_tokens', {
+        header: () => (
+          <Text
+            color="grayModern.600"
+            fontFamily="PingFang SC"
+            fontSize="12px"
+            fontWeight={500}
+            lineHeight="16px"
+            letterSpacing="0.5px">
+            {t('logs.prompt_tokens')}
+          </Text>
+        ),
+        id: 'prompt_tokens'
+      }),
+      columnHelper.accessor('completion_tokens', {
+        header: () => (
+          <Text
+            color="grayModern.600"
+            fontFamily="PingFang SC"
+            fontSize="12px"
+            fontWeight={500}
+            lineHeight="16px"
+            letterSpacing="0.5px">
+            {t('logs.completion_tokens')}
+          </Text>
+        ),
+        id: 'completion_tokens'
+      }),
+
+      columnHelper.display({
+        header: () => (
+          <Text
+            color="grayModern.600"
+            fontFamily="PingFang SC"
+            fontSize="12px"
+            fontWeight={500}
+            lineHeight="16px"
+            letterSpacing="0.5px">
+            {t('logs.totalTime')}
+          </Text>
+        ),
+        cell: ({ row }) => (
+          <Text
+            color="grayModern.600"
+            fontFamily="PingFang SC"
+            fontSize="12px"
+            fontWeight={500}
+            lineHeight="16px"
+            letterSpacing="0.5px">
+            {getTimeDiff(row.original.created_at, row.original.request_at)}
+          </Text>
+        ),
+        id: 'total_time'
+      }),
+
+      columnHelper.accessor('code', {
+        header: () => (
+          <Text
+            color="grayModern.600"
+            fontFamily="PingFang SC"
+            fontSize="12px"
+            fontWeight={500}
+            lineHeight="16px"
+            letterSpacing="0.5px">
+            {t('logs.status')}
+          </Text>
+        ),
+        cell: ({ getValue, row }) => {
+          const code = getValue()
+          return (
+            <Flex alignItems="center" gap="4px" w="fit-content">
+              <Text
+                color={code === 200 ? 'var(--Green-600, #039855)' : 'var(--Red-600, #D92D20)'}
+                fontFamily="PingFang SC"
+                fontSize="12px"
+                fontWeight={400}
+                lineHeight="16px"
+                letterSpacing="0.048px">
+                {code !== 200 ? `${t('logs.failed')} (${row.original.code})` : code}
+              </Text>
+              {code !== 200 && (
+                <MyTooltip placement="bottom-end" label={row.original.content}>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="15"
+                    height="14"
+                    viewBox="0 0 15 14"
+                    fill="none">
+                    <path
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      d="M7.79299 2.23698C5.16257 2.23698 3.03019 4.36936 3.03019 6.99978C3.03019 9.6302 5.16257 11.7626 7.79299 11.7626C10.4234 11.7626 12.5558 9.6302 12.5558 6.99978C12.5558 4.36936 10.4234 2.23698 7.79299 2.23698ZM1.86353 6.99978C1.86353 3.72503 4.51824 1.07031 7.79299 1.07031C11.0677 1.07031 13.7225 3.72503 13.7225 6.99978C13.7225 10.2745 11.0677 12.9292 7.79299 12.9292C4.51824 12.9292 1.86353 10.2745 1.86353 6.99978ZM7.92275 4.92235C7.68522 4.8816 7.44093 4.92624 7.23315 5.04835C7.02538 5.17046 6.86752 5.36217 6.78755 5.58952C6.68064 5.89343 6.3476 6.05313 6.04369 5.94622C5.73978 5.83931 5.58008 5.50628 5.68699 5.20236C5.85839 4.71511 6.19671 4.30424 6.64202 4.04253C7.08733 3.78082 7.6109 3.68515 8.11998 3.77247C8.62907 3.85979 9.09083 4.12447 9.42347 4.51962C9.75604 4.91469 9.93809 5.41468 9.9374 5.93109C9.93713 6.77507 9.31182 7.32806 8.87572 7.6188C8.63987 7.77603 8.40817 7.89146 8.23774 7.96721C8.15169 8.00545 8.07917 8.0345 8.0268 8.05445C8.00057 8.06445 7.97925 8.07221 7.96366 8.07775L7.94462 8.08442L7.93848 8.08652L7.93629 8.08726L7.93541 8.08755C7.93524 8.08761 7.93469 8.08779 7.75022 7.53439L7.93469 8.08779C7.62906 8.18967 7.2987 8.02449 7.19683 7.71886C7.09498 7.41333 7.26001 7.08309 7.56545 6.9811L7.57281 6.9785C7.58072 6.97569 7.59385 6.97093 7.61148 6.96422C7.64681 6.95075 7.6996 6.92968 7.76391 6.9011C7.89419 6.84319 8.06346 6.75815 8.22857 6.64807C8.5943 6.40425 8.77073 6.1555 8.77073 5.93055L8.77073 5.92968C8.77109 5.68868 8.68615 5.45533 8.53094 5.27096C8.37573 5.08658 8.16028 4.96309 7.92275 4.92235ZM7.20966 9.67285C7.20966 9.35068 7.47083 9.08951 7.79299 9.08951H7.79834C8.12051 9.08951 8.38167 9.35068 8.38167 9.67285C8.38167 9.99501 8.12051 10.2562 7.79834 10.2562H7.79299C7.47083 10.2562 7.20966 9.99501 7.20966 9.67285Z"
+                      fill="#667085"
+                    />
+                  </svg>
+                </MyTooltip>
+              )}
+            </Flex>
+          )
+        },
+        id: 'status'
+      }),
+
+      columnHelper.accessor('created_at', {
+        header: () => (
+          <Text color="grayModern.600" fontSize="12px" fontWeight={500}>
+            {t('logs.time')}
+          </Text>
+        ),
+        cell: ({ row }) => new Date(row.original.created_at).toLocaleString(),
+        id: 'created_at'
+      }),
+      columnHelper.accessor('used_amount', {
+        header: () => {
+          return (
+            <Box position={'relative'}>
+              <MyTooltip placement="bottom-end" label={t('logs.total_price_tip')}>
+                <Flex alignItems={'center'} gap={'4px'}>
+                  <Text
+                    noOfLines={1}
+                    color="grayModern.900"
+                    fontFamily="PingFang SC"
+                    fontSize="12px"
+                    fontWeight={400}
+                    lineHeight="16px"
+                    letterSpacing="0.048px">
+                    {t('logs.total_price')}
+                  </Text>
+                  <CurrencySymbol type={currencySymbol} />
+                </Flex>
+              </MyTooltip>
+            </Box>
+          )
+        },
+        id: 'used_amount'
+      }),
+
+      columnHelper.display({
+        header: () => (
+          <Text
+            color="grayModern.600"
+            fontFamily="PingFang SC"
+            fontSize="12px"
+            fontWeight={500}
+            lineHeight="16px"
+            letterSpacing="0.5px">
+            {t('logs.actions')}
+          </Text>
+        ),
+        cell: ({ row }) => (
+          <Button
+            onClick={() => {
+              setSelectedRow(row.original)
+              onOpen()
+            }}
+            h="28px"
+            variant="unstyled"
+            display="inline-flex"
+            padding="6px 8px"
+            justifyContent="center"
+            alignItems="center"
+            gap="4px"
+            borderRadius="4px"
+            background="grayModern.150"
+            whiteSpace="nowrap"
+            transition="all 0.2s ease"
+            _hover={{
+              transform: 'scale(1.05)',
+              transition: 'transform 0.2s ease'
+            }}
+            _active={{
+              transform: 'scale(0.92)',
+              animation: 'pulse 0.3s ease'
+            }}
+            sx={{
+              '@keyframes pulse': {
+                '0%': { transform: 'scale(0.92)' },
+                '50%': { transform: 'scale(0.96)' },
+                '100%': { transform: 'scale(0.92)' }
+              }
+            }}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="12"
+              height="12"
+              viewBox="0 0 12 12"
+              fill="none">
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M0.899414 3.04352C0.899414 2.76738 1.13738 2.54352 1.43092 2.54352H10.5696C10.8631 2.54352 11.1011 2.76738 11.1011 3.04352C11.1011 3.31966 10.8631 3.54352 10.5696 3.54352H1.43092C1.13738 3.54352 0.899414 3.31966 0.899414 3.04352ZM0.899414 5.96889C0.899414 5.69274 1.13738 5.46889 1.43092 5.46889H10.5696C10.8631 5.46889 11.1011 5.69274 11.1011 5.96889C11.1011 6.24503 10.8631 6.46889 10.5696 6.46889H1.43092C1.13738 6.46889 0.899414 6.24503 0.899414 5.96889ZM0.899414 8.9565C0.899414 8.68035 1.13738 8.4565 1.43092 8.4565H7.28546C7.579 8.4565 7.81696 8.68035 7.81696 8.9565C7.81696 9.23264 7.579 9.4565 7.28546 9.4565H1.43092C1.13738 9.4565 0.899414 9.23264 0.899414 8.9565Z"
+                fill="#485264"
+              />
+            </svg>
+            <Text
+              color="grayModern.600"
+              fontFamily="PingFang SC"
+              fontStyle="normal"
+              fontSize="11px"
+              fontWeight={500}
+              lineHeight="16px"
+              letterSpacing="0.5px">
+              {t('logs.detail')}
+            </Text>
+          </Button>
+        ),
+        id: 'detail'
+      })
+    ],
+    [t, currencySymbol]
+  )
+
+  const table = useReactTable({
+    data: logData?.logs || [],
+    columns,
+    getCoreRowModel: getCoreRowModel()
+  })
+
+  return (
+    <Flex
+      pt="4px"
+      pb="12px"
+      pr="12px"
+      h="100vh"
+      width="full"
+      flexDirection="column"
+      overflow="hidden">
+      <Flex
+        bg="white"
+        px="32px"
+        pt="24px"
+        pb="8px"
+        gap="24px"
+        borderRadius="12px"
+        flexDirection="column"
+        h="full"
+        w="full"
+        flex="1">
+        {/* -- header */}
+        <Flex flexDirection="column" gap="16px" alignItems="flex-start">
+          <Flex
+            w="full"
+            h="32px"
+            justifyContent="space-between"
+            alignItems="center"
+            alignSelf="stretch">
+            <Text
+              color="black"
+              fontFamily="PingFang SC"
+              fontSize="20px"
+              fontStyle="normal"
+              fontWeight="500"
+              lineHeight="26px"
+              letterSpacing="0.15px">
+              {t('logs.call_log')}
+            </Text>
+            <Flex alignItems="center" gap="24px">
+              <InputGroup w="290px">
+                <Input
+                  py="6px"
+                  px="12px"
+                  h="32px"
+                  alignItems="center"
+                  borderRadius="4px"
+                  border="1px solid"
+                  borderColor="grayModern.200"
+                  bgColor="grayModern.50"
+                  _hover={{ borderColor: 'grayModern.300' }}
+                  _focus={{ borderColor: 'grayModern.300' }}
+                  _focusVisible={{ borderColor: 'grayModern.300' }}
+                  _active={{ borderColor: 'grayModern.300' }}
+                  placeholder={t('logs.searchByContent')}
+                  _placeholder={{
+                    color: 'grayModern.500',
+                    fontFamily: 'PingFang SC',
+                    fontSize: '12px',
+                    fontWeight: 400,
+                    lineHeight: '16px',
+                    letterSpacing: '0.048px'
+                  }}
+                  value={inputKeyword}
+                  onChange={(e) => {
+                    setInputKeyword(e.target.value)
+                  }}
+                />
+                <InputRightElement w="32px" h="32px">
+                  <Box
+                    display="flex"
+                    w="full"
+                    h="full"
+                    p="0px 4px"
+                    justifyContent="center"
+                    alignItems="center"
+                    borderLeft="1px solid"
+                    borderColor="grayModern.200">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      fill="none">
+                      <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="M7.33331 2.66659C4.75598 2.66659 2.66665 4.75592 2.66665 7.33325C2.66665 9.91058 4.75598 11.9999 7.33331 11.9999C8.59061 11.9999 9.73178 11.5027 10.5709 10.6942C10.5885 10.6714 10.6077 10.6494 10.6286 10.6285C10.6495 10.6076 10.6714 10.5884 10.6942 10.5708C11.5028 9.73172 12 8.59055 12 7.33325C12 4.75592 9.91064 2.66659 7.33331 2.66659ZM12.0212 11.0784C12.8423 10.0519 13.3333 8.74993 13.3333 7.33325C13.3333 4.01954 10.647 1.33325 7.33331 1.33325C4.0196 1.33325 1.33331 4.01954 1.33331 7.33325C1.33331 10.647 4.0196 13.3333 7.33331 13.3333C8.74999 13.3333 10.052 12.8423 11.0784 12.0212L13.5286 14.4713C13.7889 14.7317 14.211 14.7317 14.4714 14.4713C14.7317 14.211 14.7317 13.7889 14.4714 13.5285L12.0212 11.0784Z"
+                        fill="#667085"
+                      />
+                    </svg>
+                  </Box>
+                </InputRightElement>
+              </InputGroup>
+              <Button
+                variant="outline"
+                _hover={{
+                  transform: 'scale(1.05)',
+                  transition: 'transform 0.2s ease'
+                }}
+                _active={{
+                  transform: 'scale(0.92)',
+                  animation: 'pulse 0.3s ease'
+                }}
+                sx={{
+                  '@keyframes pulse': {
+                    '0%': { transform: 'scale(0.92)' },
+                    '50%': { transform: 'scale(0.96)' },
+                    '100%': { transform: 'scale(0.92)' }
+                  }
+                }}
+                display="flex"
+                padding="8px"
+                justifyContent="center"
+                alignItems="center"
+                gap="8px"
+                borderRadius="6px"
+                border="1px solid #DFE2EA"
+                bg="white"
+                boxShadow="0px 1px 2px 0px rgba(19, 51, 107, 0.05), 0px 0px 1px 0px rgba(19, 51, 107, 0.08)"
+                onClick={() => {
+                  setKeyName('')
+                  setModelName('')
+                  setCodeType('all')
+                }}>
+                <Icon
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16px"
+                  height="16px"
+                  viewBox="0 0 16 16"
+                  fill="none">
+                  <path
+                    d="M6.4354 14.638C5.1479 14.2762 4.0979 13.5684 3.2854 12.5145C2.4729 11.4606 2.06665 10.2473 2.06665 8.87454C2.06665 8.16346 2.1854 7.48656 2.4229 6.84385C2.6604 6.20113 2.9979 5.61181 3.4354 5.07589C3.5729 4.92619 3.74165 4.84809 3.94165 4.8416C4.14165 4.83512 4.3229 4.91321 4.4854 5.07589C4.6229 5.21311 4.6949 5.38152 4.7014 5.58113C4.7079 5.78073 4.64215 5.96785 4.50415 6.1425C4.20415 6.52923 3.9729 6.95338 3.8104 7.41496C3.6479 7.87653 3.56665 8.36306 3.56665 8.87454C3.56665 9.88501 3.86365 10.7865 4.45765 11.5789C5.05165 12.3713 5.81715 12.9107 6.75415 13.1971C6.91665 13.247 7.0509 13.3406 7.1569 13.4778C7.2629 13.6151 7.31615 13.7648 7.31665 13.9269C7.31665 14.1764 7.22915 14.373 7.05415 14.5167C6.87915 14.6605 6.6729 14.7009 6.4354 14.638ZM9.6979 14.638C9.4604 14.7004 9.25415 14.6567 9.07915 14.507C8.90415 14.3573 8.81665 14.1577 8.81665 13.9082C8.81665 13.7585 8.8699 13.6151 8.9764 13.4778C9.0829 13.3406 9.21715 13.247 9.37915 13.1971C10.3167 12.8977 11.0824 12.3551 11.6764 11.5691C12.2704 10.7832 12.5672 9.88501 12.5667 8.87454C12.5667 7.62703 12.1292 6.56665 11.2542 5.6934C10.3792 4.82015 9.31665 4.38352 8.06665 4.38352H8.0104L8.3104 4.68292C8.4479 4.82015 8.51665 4.9948 8.51665 5.20687C8.51665 5.41895 8.4479 5.5936 8.3104 5.73083C8.1729 5.86805 7.9979 5.93666 7.7854 5.93666C7.5729 5.93666 7.3979 5.86805 7.2604 5.73083L5.6854 4.15897C5.6104 4.08412 5.5574 4.00303 5.5264 3.91571C5.4954 3.82838 5.47965 3.73482 5.47915 3.63502C5.47915 3.53522 5.4949 3.44166 5.5264 3.35433C5.5579 3.26701 5.6109 3.18592 5.6854 3.11107L7.2604 1.53921C7.3979 1.40199 7.5729 1.33337 7.7854 1.33337C7.9979 1.33337 8.1729 1.40199 8.3104 1.53921C8.4479 1.67644 8.51665 1.85109 8.51665 2.06316C8.51665 2.27524 8.4479 2.44989 8.3104 2.58712L8.0104 2.88652H8.06665C9.74165 2.88652 11.1604 3.46661 12.3229 4.62678C13.4854 5.78696 14.0667 7.20288 14.0667 8.87454C14.0667 10.2343 13.6604 11.4444 12.8479 12.5048C12.0354 13.5652 10.9854 14.2762 9.6979 14.638Z"
+                    fill="#485264"
+                  />
+                </Icon>
+              </Button>
+            </Flex>
+          </Flex>
+          <Flex gap="16px" flexDirection="column" alignItems="flex-start" alignSelf="stretch">
+            {/* -- the first row */}
+            <Flex
+              alignItems="center"
+              justifyContent="space-between"
+              alignSelf="stretch"
+              flexWrap="wrap"
+              sx={{
+                transition: 'gap 0.3s ease',
+                gap: '16px',
+                '@media screen and (min-width: 1318px)': {
+                  gap: '24px'
+                }
+              }}>
+              <Flex h="32px" gap="24px" alignItems="center" flex="0 1 auto">
+                <Text
+                  whiteSpace="nowrap"
+                  color="grayModern.900"
+                  fontFamily="PingFang SC"
+                  fontSize="12px"
+                  fontStyle="normal"
+                  fontWeight="500"
+                  lineHeight="16px"
+                  letterSpacing="0.5px">
+                  {t('logs.name')}
+                </Text>
+                <SingleSelectComboboxUnstyle<string>
+                  dropdownItems={['all', ...(logData?.token_names || [])]}
+                  setSelectedItem={(value) => {
+                    if (value === 'all') {
+                      setKeyName('')
+                    } else {
+                      setKeyName(value)
+                    }
+                  }}
+                  handleDropdownItemFilter={(dropdownItems, inputValue) => {
+                    const lowerCasedInput = inputValue.toLowerCase()
+                    return dropdownItems.filter(
+                      (item) => !inputValue || item.toLowerCase().includes(lowerCasedInput)
+                    )
+                  }}
+                  handleDropdownItemDisplay={(dropdownItem) => {
+                    return (
+                      <Text
+                        color="grayModern.600"
+                        fontFamily="PingFang SC"
+                        fontSize="12px"
+                        fontStyle="normal"
+                        fontWeight={400}
+                        lineHeight="16px"
+                        letterSpacing="0.048px">
+                        {dropdownItem}
+                      </Text>
+                    )
+                  }}
+                  flexProps={{ w: '280px' }}
+                  placeholder={t('logs.select_token_name')}
+                />
+              </Flex>
+
+              <Flex h="32px" gap="24px" alignItems="center" flex="0 1 auto">
+                <Text
+                  whiteSpace="nowrap"
+                  color="grayModern.900"
+                  fontFamily="PingFang SC"
+                  fontSize="12px"
+                  fontStyle="normal"
+                  fontWeight="500"
+                  lineHeight="16px"
+                  letterSpacing="0.5px">
+                  {t('logs.modal')}
+                </Text>
+                <SingleSelectComboboxUnstyle<string>
+                  dropdownItems={['all', ...(logData?.models || [])]}
+                  setSelectedItem={(value) => {
+                    if (value === 'all') {
+                      setModelName('')
+                    } else {
+                      setModelName(value)
+                    }
+                  }}
+                  handleDropdownItemFilter={(dropdownItems, inputValue) => {
+                    const lowerCasedInput = inputValue.toLowerCase()
+                    return dropdownItems.filter(
+                      (item) => !inputValue || item.toLowerCase().includes(lowerCasedInput)
+                    )
+                  }}
+                  handleDropdownItemDisplay={(dropdownItem) => {
+                    return (
+                      <Text
+                        color="grayModern.600"
+                        fontFamily="PingFang SC"
+                        fontSize="12px"
+                        fontStyle="normal"
+                        fontWeight={400}
+                        lineHeight="16px"
+                        letterSpacing="0.048px">
+                        {dropdownItem}
+                      </Text>
+                    )
+                  }}
+                  flexProps={{ w: '280px' }}
+                  placeholder={t('logs.select_modal')}
+                />
+              </Flex>
+
+              <Flex h="32px" gap="24px" alignItems="center" flex="0 1 auto">
+                <Text
+                  whiteSpace="nowrap"
+                  color="grayModern.900"
+                  fontFamily="PingFang SC"
+                  fontSize="12px"
+                  fontStyle="normal"
+                  fontWeight="500"
+                  lineHeight="16px"
+                  letterSpacing="0.5px">
+                  {t('logs.status')}
+                </Text>
+                <MySelect
+                  boxStyle={{
+                    w: '100%'
+                  }}
+                  maxW={'120px'}
+                  w={'100%'}
+                  height="32px"
+                  value={codeType}
+                  list={[
+                    {
+                      value: 'all',
+                      label: t('logs.statusOptions.all')
+                    },
+                    {
+                      value: 'success',
+                      label: t('logs.statusOptions.success')
+                    },
+                    {
+                      value: 'error',
+                      label: t('logs.statusOptions.error')
+                    }
+                  ]}
+                  onchange={(val: string) => {
+                    setCodeType(val)
+                  }}
+                />
+              </Flex>
+
+              <Flex h="32px" gap="24px" alignItems="center" flex="0 1 auto">
+                <Text
+                  whiteSpace="nowrap"
+                  color="grayModern.900"
+                  fontFamily="PingFang SC"
+                  fontSize="12px"
+                  fontStyle="normal"
+                  fontWeight="500"
+                  lineHeight="16px"
+                  letterSpacing="0.5px">
+                  {t('logs.time')}
+                </Text>
+                <SelectDateRange
+                  w="280px"
+                  startTime={startTime}
+                  setStartTime={setStartTime}
+                  endTime={endTime}
+                  setEndTime={setEndTime}
+                />
+              </Flex>
+            </Flex>
+            {/* -- the first row end */}
+          </Flex>
+        </Flex>
+        {/* -- header end */}
+
+        {/* -- table */}
+        <Flex gap="24px" flexDirection="column" flex="1">
+          <BaseTable table={table} isLoading={isLoading} />
+          <SwitchPage
+            m="0"
+            justifyContent={'end'}
+            currentPage={page}
+            totalPage={Math.ceil((logData?.total || 0) / pageSize)}
+            totalItem={logData?.total || 0}
+            pageSize={pageSize}
+            setCurrentPage={(idx: number) => setPage(idx)}
+          />
+        </Flex>
+        {/* -- table end */}
+      </Flex>
+      <LogDetailModal isOpen={isOpen} onClose={onClose} rowData={selectedRow} />
+    </Flex>
+  )
+}
diff --git a/frontend/providers/aiproxy/app/[lng]/(user)/log/tools/handleTime.ts b/frontend/providers/aiproxy/app/[lng]/(user)/log/tools/handleTime.ts
new file mode 100644
index 000000000000..0b892c563f3d
--- /dev/null
+++ b/frontend/providers/aiproxy/app/[lng]/(user)/log/tools/handleTime.ts
@@ -0,0 +1,4 @@
+export const getTimeDiff = (createdAt: number, requestAt: number) => {
+  const diff = Number(((createdAt - requestAt) / 1000).toFixed(4)).toString()
+  return `${diff}s`
+}
diff --git a/frontend/providers/aiproxy/app/[lng]/(user)/logs/page.tsx b/frontend/providers/aiproxy/app/[lng]/(user)/logs/page.tsx
deleted file mode 100644
index 7cbb2ef35adc..000000000000
--- a/frontend/providers/aiproxy/app/[lng]/(user)/logs/page.tsx
+++ /dev/null
@@ -1,260 +0,0 @@
-'use client'
-
-import { Box, Flex, Text, Button, Icon } from '@chakra-ui/react'
-import { CurrencySymbol, MySelect, MyTooltip } from '@sealos/ui'
-import { useMemo, useState } from 'react'
-
-import { getKeys, getLogs, getModels } from '@/api/platform'
-import { useTranslationClientSide } from '@/app/i18n/client'
-import SelectDateRange from '@/components/SelectDateRange'
-import SwitchPage from '@/components/SwitchPage'
-import { BaseTable } from '@/components/table/baseTable'
-import { useI18n } from '@/providers/i18n/i18nContext'
-import { LogItem } from '@/types/log'
-import { useQuery } from '@tanstack/react-query'
-import { ColumnDef, getCoreRowModel, useReactTable } from '@tanstack/react-table'
-import { useBackendStore } from '@/store/backend'
-
-const mockStatus = ['all', 'success', 'failed']
-
-export default function Home(): React.JSX.Element {
-  const { lng } = useI18n()
-  const { t } = useTranslationClientSide(lng, 'common')
-
-  const [startTime, setStartTime] = useState(() => {
-    const currentDate = new Date()
-    currentDate.setMonth(currentDate.getMonth() - 1)
-    return currentDate
-  })
-  const [endTime, setEndTime] = useState(new Date())
-  const [name, setName] = useState('')
-  const [modelName, setModelName] = useState('')
-  const [page, setPage] = useState(1)
-  const [pageSize, setPageSize] = useState(10)
-  const [logData, setLogData] = useState<LogItem[]>([])
-  const [total, setTotal] = useState(0)
-  const { currencySymbol } = useBackendStore()
-
-  const { data: models = [] } = useQuery(['getModels'], () => getModels())
-  const { data: tokenData } = useQuery(['getKeys'], () => getKeys({ page: 1, perPage: 100 }))
-
-  const { isLoading } = useQuery(
-    ['getLogs', page, pageSize, name, modelName, startTime, endTime],
-    () =>
-      getLogs({
-        page,
-        perPage: pageSize,
-        token_name: name,
-        model_name: modelName,
-        start_timestamp: startTime.getTime().toString(),
-        end_timestamp: endTime.getTime().toString()
-      }),
-    {
-      onSuccess: (data) => {
-        if (!data.logs) {
-          setLogData([])
-          setTotal(0)
-          return
-        }
-        setLogData(data.logs)
-        setTotal(data.total)
-      }
-    }
-  )
-
-  const columns = useMemo<ColumnDef<LogItem>[]>(() => {
-    return [
-      {
-        header: t('logs.name'),
-        accessorKey: 'token_name'
-      },
-      {
-        header: t('logs.model'),
-        accessorKey: 'model'
-      },
-      {
-        header: t('logs.prompt_tokens'),
-        accessorKey: 'prompt_tokens'
-      },
-      {
-        header: t('logs.completion_tokens'),
-        accessorKey: 'completion_tokens'
-      },
-
-      {
-        header: t('logs.status'),
-        accessorFn: (row) => (row.code === 200 ? t('logs.success') : t('logs.failed')),
-        cell: ({ getValue }) => {
-          const value = getValue() as string
-          return (
-            <Text
-              color={
-                value === t('logs.success')
-                  ? 'var(--Green-600, #039855)'
-                  : 'var(--Red-600, #D92D20)'
-              }
-              fontFamily="PingFang SC"
-              fontSize="12px"
-              fontWeight={500}
-              lineHeight="16px"
-              letterSpacing="0.5px">
-              {value}
-            </Text>
-          )
-        },
-        id: 'status'
-      },
-      {
-        header: t('logs.time'),
-        accessorFn: (row) => new Date(row.created_at).toLocaleString(),
-        id: 'created_at'
-      },
-      {
-        accessorKey: 'used_amount',
-        id: 'used_amount',
-        header: () => {
-          return (
-            <Box position={'relative'}>
-              <MyTooltip placement="bottom-end" label={t('logs.total_price_tip')}>
-                <Flex alignItems={'center'} gap={'4px'}>
-                  {t('logs.total_price')}
-                  <CurrencySymbol type={currencySymbol} />
-                </Flex>
-              </MyTooltip>
-            </Box>
-          )
-        }
-      }
-    ]
-  }, [])
-
-  const table = useReactTable({
-    data: logData,
-    columns,
-    getCoreRowModel: getCoreRowModel()
-  })
-
-  return (
-    <Flex w="full" h="full" flexDirection={'column'} pr={'8px'} pb={'8px'} overflow={'hidden'}>
-      <Flex
-        flexDirection={'column'}
-        flex={1}
-        h={'0'}
-        bg={'white'}
-        borderRadius={'12px'}
-        px={'32px'}
-        pt={'24px'}>
-        <Flex justifyContent={'space-between'} color={'black'} fontSize={'20px'} fontWeight={500}>
-          <Text>{t('logs.call_log')}</Text>
-          <Button
-            border={'1px solid #DFE2EA'}
-            variant={'square'}
-            onClick={() => {
-              setName('')
-              setModelName('')
-            }}>
-            <Icon
-              xmlns="http://www.w3.org/2000/svg"
-              width="16px"
-              height="16px"
-              viewBox="0 0 16 16"
-              fill="none">
-              <path
-                d="M6.4354 14.638C5.1479 14.2762 4.0979 13.5684 3.2854 12.5145C2.4729 11.4606 2.06665 10.2473 2.06665 8.87454C2.06665 8.16346 2.1854 7.48656 2.4229 6.84385C2.6604 6.20113 2.9979 5.61181 3.4354 5.07589C3.5729 4.92619 3.74165 4.84809 3.94165 4.8416C4.14165 4.83512 4.3229 4.91321 4.4854 5.07589C4.6229 5.21311 4.6949 5.38152 4.7014 5.58113C4.7079 5.78073 4.64215 5.96785 4.50415 6.1425C4.20415 6.52923 3.9729 6.95338 3.8104 7.41496C3.6479 7.87653 3.56665 8.36306 3.56665 8.87454C3.56665 9.88501 3.86365 10.7865 4.45765 11.5789C5.05165 12.3713 5.81715 12.9107 6.75415 13.1971C6.91665 13.247 7.0509 13.3406 7.1569 13.4778C7.2629 13.6151 7.31615 13.7648 7.31665 13.9269C7.31665 14.1764 7.22915 14.373 7.05415 14.5167C6.87915 14.6605 6.6729 14.7009 6.4354 14.638ZM9.6979 14.638C9.4604 14.7004 9.25415 14.6567 9.07915 14.507C8.90415 14.3573 8.81665 14.1577 8.81665 13.9082C8.81665 13.7585 8.8699 13.6151 8.9764 13.4778C9.0829 13.3406 9.21715 13.247 9.37915 13.1971C10.3167 12.8977 11.0824 12.3551 11.6764 11.5691C12.2704 10.7832 12.5672 9.88501 12.5667 8.87454C12.5667 7.62703 12.1292 6.56665 11.2542 5.6934C10.3792 4.82015 9.31665 4.38352 8.06665 4.38352H8.0104L8.3104 4.68292C8.4479 4.82015 8.51665 4.9948 8.51665 5.20687C8.51665 5.41895 8.4479 5.5936 8.3104 5.73083C8.1729 5.86805 7.9979 5.93666 7.7854 5.93666C7.5729 5.93666 7.3979 5.86805 7.2604 5.73083L5.6854 4.15897C5.6104 4.08412 5.5574 4.00303 5.5264 3.91571C5.4954 3.82838 5.47965 3.73482 5.47915 3.63502C5.47915 3.53522 5.4949 3.44166 5.5264 3.35433C5.5579 3.26701 5.6109 3.18592 5.6854 3.11107L7.2604 1.53921C7.3979 1.40199 7.5729 1.33337 7.7854 1.33337C7.9979 1.33337 8.1729 1.40199 8.3104 1.53921C8.4479 1.67644 8.51665 1.85109 8.51665 2.06316C8.51665 2.27524 8.4479 2.44989 8.3104 2.58712L8.0104 2.88652H8.06665C9.74165 2.88652 11.1604 3.46661 12.3229 4.62678C13.4854 5.78696 14.0667 7.20288 14.0667 8.87454C14.0667 10.2343 13.6604 11.4444 12.8479 12.5048C12.0354 13.5652 10.9854 14.2762 9.6979 14.638Z"
-                fill="#485264"
-              />
-            </Icon>
-          </Button>
-        </Flex>
-
-        <Flex flexDirection={'column'} mb={'24px'} gap={4} mt={'16px'} flexWrap={'wrap'}>
-          <Flex flex={1} justifyContent={'space-between'} gap={'20px'}>
-            <Flex alignItems={'center'} flex={1}>
-              <Box flexShrink={0} w={'100px'}>
-                {t('logs.name')}
-              </Box>
-              <MySelect
-                boxStyle={{
-                  w: '100%'
-                }}
-                maxW={'500px'}
-                w={'100%'}
-                placeholder={t('logs.select_token_name')}
-                height="32px"
-                value={name}
-                list={[
-                  {
-                    value: 'all',
-                    label: 'all'
-                  },
-                  ...(tokenData?.tokens?.map((item) => ({
-                    value: item.name,
-                    label: item.name
-                  })) || [])
-                ]}
-                onchange={(val: string) => {
-                  if (val === 'all') {
-                    setName('')
-                  } else {
-                    setName(val)
-                  }
-                }}
-              />
-            </Flex>
-
-            <Flex alignItems={'center'} flex={1}>
-              <Box flexShrink={0} w={'100px'}>
-                {t('logs.modal')}
-              </Box>
-              <MySelect
-                placeholder={t('logs.select_modal')}
-                boxStyle={{
-                  w: '100%'
-                }}
-                maxW={'500px'}
-                w={'100%'}
-                height="32px"
-                value={modelName}
-                list={
-                  ['all', ...models].map((item) => ({
-                    value: item,
-                    label: item
-                  })) || []
-                }
-                onchange={(val: string) => {
-                  if (val === 'all') {
-                    setModelName('')
-                  } else {
-                    setModelName(val)
-                  }
-                }}
-              />
-            </Flex>
-          </Flex>
-
-          <Flex alignItems={'center'} maxW={'50%'} pr={'10px'}>
-            <Box flexShrink={0} w={'100px'}>
-              {t('logs.time')}
-            </Box>
-            <SelectDateRange
-              startTime={startTime}
-              setStartTime={setStartTime}
-              endTime={endTime}
-              setEndTime={setEndTime}
-            />
-          </Flex>
-        </Flex>
-
-        <BaseTable table={table} isLoading={isLoading} />
-        <SwitchPage
-          justifyContent={'end'}
-          currentPage={page}
-          totalPage={Math.ceil(total / pageSize)}
-          totalItem={total}
-          pageSize={pageSize}
-          setCurrentPage={(idx: number) => setPage(idx)}
-        />
-      </Flex>
-    </Flex>
-  )
-}
diff --git a/frontend/providers/aiproxy/app/[lng]/(user)/price/page.tsx b/frontend/providers/aiproxy/app/[lng]/(user)/price/page.tsx
index b4e5aa098b61..fd10b773076a 100644
--- a/frontend/providers/aiproxy/app/[lng]/(user)/price/page.tsx
+++ b/frontend/providers/aiproxy/app/[lng]/(user)/price/page.tsx
@@ -11,14 +11,19 @@ import {
   Thead,
   Tr,
   Center,
-  Spinner
+  Spinner,
+  Button,
+  Icon,
+  Input,
+  InputGroup,
+  InputRightElement,
+  Badge
 } from '@chakra-ui/react'
 import { useTranslationClientSide } from '@/app/i18n/client'
 import { useI18n } from '@/providers/i18n/i18nContext'
-import { useQuery } from '@tanstack/react-query'
-import { ModelPrice } from '@/types/backend'
-import { getModelPrices } from '@/api/platform'
-import { useMemo } from 'react'
+import { useQuery, UseQueryResult } from '@tanstack/react-query'
+import { getEnabledMode } from '@/api/platform'
+import { useMemo, useState, useEffect } from 'react'
 import {
   createColumnHelper,
   getCoreRowModel,
@@ -26,46 +31,400 @@ import {
   flexRender
 } from '@tanstack/react-table'
 import { CurrencySymbol } from '@sealos/ui'
-import { ModelIdentifier } from '@/types/front'
-import { MyTooltip } from '@/components/MyTooltip'
+import { MyTooltip } from '@/components/common/MyTooltip'
 import { useMessage } from '@sealos/ui'
-// icons
-import OpenAIIcon from '@/ui/svg/icons/modelist/openai.svg'
-import QwenIcon from '@/ui/svg/icons/modelist/qianwen.svg'
-import ChatglmIcon from '@/ui/svg/icons/modelist/chatglm.svg'
-import DeepseekIcon from '@/ui/svg/icons/modelist/deepseek.svg'
-import MoonshotIcon from '@/ui/svg/icons/modelist/moonshot.svg'
-import SparkdeskIcon from '@/ui/svg/icons/modelist/sparkdesk.svg'
-import AbabIcon from '@/ui/svg/icons/modelist/minimax.svg'
-import DoubaoIcon from '@/ui/svg/icons/modelist/doubao.svg'
-import ErnieIcon from '@/ui/svg/icons/modelist/ernie.svg'
+import { ModelConfig } from '@/types/models/model'
 import Image, { StaticImageData } from 'next/image'
+import { QueryKey } from '@/types/query-key'
+import { getTranslationWithFallback } from '@/utils/common'
 import { useBackendStore } from '@/store/backend'
+import { modelIcons } from '@/ui/icons/mode-icons'
+import { SingleSelectComboboxUnstyle } from '@/components/common/SingleSelectComboboxUnStyle'
+import { useDebounce } from '@/hooks/useDebounce'
 
-function Price() {
+type SortDirection = 'asc' | 'desc' | false
+
+const getModelIcon = (modelOwner: string): StaticImageData => {
+  const icon = modelIcons[modelOwner as keyof typeof modelIcons] || modelIcons['default']
+  return icon
+}
+
+// 在组件外部定义样式配置
+const MODEL_TYPE_STYLES = {
+  1: {
+    background: '#F0FBFF',
+    color: '#0884DD'
+  },
+  2: {
+    background: '#F4F4F7',
+    color: '#383F50'
+  },
+  3: {
+    background: '#EBFAF8',
+    color: '#007E7C'
+  },
+  4: {
+    background: '#FEF3F2',
+    color: '#F04438'
+  },
+  5: {
+    background: '#F0EEFF',
+    color: '#6F5DD7'
+  },
+  6: {
+    background: '#FFFAEB',
+    color: '#DC6803'
+  },
+  7: {
+    background: '#FAF1FF',
+    color: '#9E53C1'
+  },
+  8: {
+    background: '#FFF1F6',
+    color: '#E82F72'
+  },
+  9: {
+    background: '#F0F4FF',
+    color: '#3370FF'
+  },
+  10: {
+    background: '#EDFAFF',
+    color: '#0077A9'
+  },
+  default: {
+    background: '#F4F4F7',
+    color: '#383F50'
+  }
+} as const
+
+// 在组件中使用
+const getTypeStyle = (type: number) => {
+  return MODEL_TYPE_STYLES[type as keyof typeof MODEL_TYPE_STYLES] || MODEL_TYPE_STYLES.default
+}
+
+export default function Price() {
   const { lng } = useI18n()
   const { t } = useTranslationClientSide(lng, 'common')
+
+  const [modelOwner, setModelOwner] = useState<string>('')
+  const [modelType, setModelType] = useState<string>('')
+
+  const [searchInput, setSearchInput] = useState('')
+  const debouncedSearch = useDebounce(searchInput, 500)
+
+  interface FilterParams {
+    owner: string
+    type: string
+    name: string
+  }
+
+  const filterModels = (modelConfigs: ModelConfig[], filterParams: FilterParams): ModelConfig[] => {
+    return modelConfigs.filter((config) => {
+      const ownerMatch =
+        !filterParams.owner ||
+        filterParams.owner === t('price.all') ||
+        getTranslationWithFallback(
+          `modeOwner.${String(config.owner)}`,
+          'modeOwner.unknown',
+          t as any
+        ) === filterParams.owner
+
+      const typeMatch =
+        !filterParams.type ||
+        filterParams.type === t('price.all') ||
+        getTranslationWithFallback(`modeType.${String(config.type)}`, 'modeType.0', t as any) ===
+          filterParams.type
+
+      const nameMatch =
+        !filterParams.name || config.model.toLowerCase().includes(filterParams.name.toLowerCase())
+
+      return ownerMatch && typeMatch && nameMatch
+    })
+  }
+
+  const {
+    isLoading,
+    data: modelConfigs = [] as ModelConfig[],
+    refetch
+  }: UseQueryResult<ModelConfig[]> = useQuery([QueryKey.GetEnabledModels], () => getEnabledMode())
+
+  const filteredModelConfigs = useMemo(() => {
+    return filterModels(modelConfigs, {
+      owner: modelOwner,
+      type: modelType,
+      name: debouncedSearch
+    })
+  }, [modelConfigs, modelOwner, modelType, debouncedSearch])
+
   return (
-    <Box
-      w="full"
-      h="full"
-      display="inline-flex"
-      padding="0px 12px 12px 0px"
-      alignItems="center"
-      bg="white">
-      <Box w="full" h="full" padding="27px 32px 0px 32px">
-        <Flex w="full" h="full" gap="32px" direction="column">
-          <Text
-            color="black"
-            fontFamily="PingFang SC"
-            fontSize="20px"
-            fontWeight={500}
-            lineHeight="26px"
-            letterSpacing="0.15px">
-            {t('price.title')}
-          </Text>
+    <Box w="full" h="full" display="inline-flex" pt="4px" pb="12px" pr="12px" alignItems="center">
+      <Box w="full" h="full" padding="27px 32px 0px 32px" bg="white" borderRadius="12px">
+        <Flex w="full" h="full" gap="20px" direction="column">
+          <Flex
+            direction="column"
+            gap="16px"
+            alignItems="flex-start"
+            justifyContent="center"
+            alignSelf="stretch">
+            {/* row 1 */}
+            <Flex justifyContent="space-between" alignItems="center" alignSelf="stretch">
+              <Text
+                color="black"
+                fontFamily="PingFang SC"
+                fontSize="20px"
+                fontWeight={500}
+                lineHeight="26px"
+                letterSpacing="0.15px">
+                {t('price.title')}
+              </Text>
+              <Button
+                variant="outline"
+                _hover={{
+                  transform: 'scale(1.05)',
+                  transition: 'transform 0.2s ease'
+                }}
+                _active={{
+                  transform: 'scale(0.92)',
+                  animation: 'pulse 0.3s ease'
+                }}
+                sx={{
+                  '@keyframes pulse': {
+                    '0%': { transform: 'scale(0.92)' },
+                    '50%': { transform: 'scale(0.96)' },
+                    '100%': { transform: 'scale(0.92)' }
+                  }
+                }}
+                display="flex"
+                padding="8px"
+                justifyContent="center"
+                alignItems="center"
+                gap="8px"
+                borderRadius="6px"
+                border="1px solid #DFE2EA"
+                bg="white"
+                boxShadow="0px 1px 2px 0px rgba(19, 51, 107, 0.05), 0px 0px 1px 0px rgba(19, 51, 107, 0.08)"
+                onClick={() => {
+                  refetch()
+                }}>
+                <Icon
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16px"
+                  height="16px"
+                  viewBox="0 0 16 16"
+                  fill="none">
+                  <path
+                    d="M6.4354 14.638C5.1479 14.2762 4.0979 13.5684 3.2854 12.5145C2.4729 11.4606 2.06665 10.2473 2.06665 8.87454C2.06665 8.16346 2.1854 7.48656 2.4229 6.84385C2.6604 6.20113 2.9979 5.61181 3.4354 5.07589C3.5729 4.92619 3.74165 4.84809 3.94165 4.8416C4.14165 4.83512 4.3229 4.91321 4.4854 5.07589C4.6229 5.21311 4.6949 5.38152 4.7014 5.58113C4.7079 5.78073 4.64215 5.96785 4.50415 6.1425C4.20415 6.52923 3.9729 6.95338 3.8104 7.41496C3.6479 7.87653 3.56665 8.36306 3.56665 8.87454C3.56665 9.88501 3.86365 10.7865 4.45765 11.5789C5.05165 12.3713 5.81715 12.9107 6.75415 13.1971C6.91665 13.247 7.0509 13.3406 7.1569 13.4778C7.2629 13.6151 7.31615 13.7648 7.31665 13.9269C7.31665 14.1764 7.22915 14.373 7.05415 14.5167C6.87915 14.6605 6.6729 14.7009 6.4354 14.638ZM9.6979 14.638C9.4604 14.7004 9.25415 14.6567 9.07915 14.507C8.90415 14.3573 8.81665 14.1577 8.81665 13.9082C8.81665 13.7585 8.8699 13.6151 8.9764 13.4778C9.0829 13.3406 9.21715 13.247 9.37915 13.1971C10.3167 12.8977 11.0824 12.3551 11.6764 11.5691C12.2704 10.7832 12.5672 9.88501 12.5667 8.87454C12.5667 7.62703 12.1292 6.56665 11.2542 5.6934C10.3792 4.82015 9.31665 4.38352 8.06665 4.38352H8.0104L8.3104 4.68292C8.4479 4.82015 8.51665 4.9948 8.51665 5.20687C8.51665 5.41895 8.4479 5.5936 8.3104 5.73083C8.1729 5.86805 7.9979 5.93666 7.7854 5.93666C7.5729 5.93666 7.3979 5.86805 7.2604 5.73083L5.6854 4.15897C5.6104 4.08412 5.5574 4.00303 5.5264 3.91571C5.4954 3.82838 5.47965 3.73482 5.47915 3.63502C5.47915 3.53522 5.4949 3.44166 5.5264 3.35433C5.5579 3.26701 5.6109 3.18592 5.6854 3.11107L7.2604 1.53921C7.3979 1.40199 7.5729 1.33337 7.7854 1.33337C7.9979 1.33337 8.1729 1.40199 8.3104 1.53921C8.4479 1.67644 8.51665 1.85109 8.51665 2.06316C8.51665 2.27524 8.4479 2.44989 8.3104 2.58712L8.0104 2.88652H8.06665C9.74165 2.88652 11.1604 3.46661 12.3229 4.62678C13.4854 5.78696 14.0667 7.20288 14.0667 8.87454C14.0667 10.2343 13.6604 11.4444 12.8479 12.5048C12.0354 13.5652 10.9854 14.2762 9.6979 14.638Z"
+                    fill="#485264"
+                  />
+                </Icon>
+              </Button>
+            </Flex>
+            {/* row 1 end */}
+
+            {/* row 2 */}
+            <Flex
+              justifyContent="space-between"
+              alignItems="center"
+              alignSelf="stretch"
+              flexWrap="wrap">
+              <Flex gap="48px" alignItems="center" alignSelf="stretch">
+                <Flex h="32px" gap="24px" alignItems="center" flex="0 1 auto">
+                  <Text
+                    whiteSpace="nowrap"
+                    color="grayModern.900"
+                    fontFamily="PingFang SC"
+                    fontSize="12px"
+                    fontStyle="normal"
+                    fontWeight="500"
+                    lineHeight="16px"
+                    letterSpacing="0.5px">
+                    {t('price.modelOwner')}
+                  </Text>
+                  <SingleSelectComboboxUnstyle<{ icon: string; name: string }>
+                    dropdownItems={[
+                      { icon: '', name: t('price.all') },
+                      ...Array.from(
+                        new Map(
+                          modelConfigs.map((config) => [
+                            config.owner,
+                            {
+                              icon: config.owner,
+                              name: getTranslationWithFallback(
+                                `modeOwner.${String(config.owner)}`,
+                                'modeOwner.unknown',
+                                t as any
+                              )
+                            }
+                          ])
+                        ).values()
+                      )
+                    ]}
+                    setSelectedItem={(modelOwner) => {
+                      setModelOwner(modelOwner.name)
+                    }}
+                    handleDropdownItemFilter={(dropdownItems, inputValue) => {
+                      const lowerCasedInput = inputValue.toLowerCase()
+                      return dropdownItems.filter(
+                        (item) => !inputValue || item.name.toLowerCase().includes(lowerCasedInput)
+                      )
+                    }}
+                    handleDropdownItemDisplay={(dropdownItem) => {
+                      const iconSrc = getModelIcon(dropdownItem.icon)
+                      if (dropdownItem.name === t('price.all')) {
+                        return (
+                          <Flex alignItems="center" gap="8px">
+                            <Image src={iconSrc} alt="default" width={20} height={20} />
+                            <Text
+                              color="grayModern.600"
+                              fontFamily="PingFang SC"
+                              fontSize="12px"
+                              fontStyle="normal"
+                              fontWeight={500}
+                              lineHeight="16px"
+                              letterSpacing="0.5px">
+                              {dropdownItem.name}
+                            </Text>
+                          </Flex>
+                        )
+                      }
+                      return (
+                        <Flex alignItems="center" gap="8px">
+                          <Image src={iconSrc} alt={dropdownItem.icon} width={20} height={20} />
+                          <Text
+                            color="grayModern.600"
+                            fontFamily="PingFang SC"
+                            fontSize="12px"
+                            fontStyle="normal"
+                            fontWeight={500}
+                            lineHeight="16px"
+                            letterSpacing="0.5px">
+                            {dropdownItem.name}
+                          </Text>
+                        </Flex>
+                      )
+                    }}
+                    flexProps={{ w: '240px' }}
+                    initSelectedItem={{ icon: '', name: t('price.all') }}
+                    handleInputDisplay={(dropdownItem) => dropdownItem.name}
+                  />
+                </Flex>
+                <Flex h="32px" gap="24px" alignItems="center" flex="0 1 auto">
+                  <Text
+                    whiteSpace="nowrap"
+                    color="grayModern.900"
+                    fontFamily="PingFang SC"
+                    fontSize="12px"
+                    fontStyle="normal"
+                    fontWeight="500"
+                    lineHeight="16px"
+                    letterSpacing="0.5px">
+                    {t('price.modelType')}
+                  </Text>
+                  <SingleSelectComboboxUnstyle<string>
+                    dropdownItems={[
+                      t('price.all'),
+                      ...new Set(
+                        modelConfigs.map((config) =>
+                          getTranslationWithFallback(
+                            `modeType.${String(config.type)}`,
+                            'modeType.0',
+                            t as any
+                          )
+                        )
+                      )
+                    ]}
+                    setSelectedItem={(modelType) => {
+                      setModelType(modelType)
+                    }}
+                    handleDropdownItemFilter={(dropdownItems, inputValue) => {
+                      const lowerCasedInput = inputValue.toLowerCase()
+                      return dropdownItems.filter(
+                        (item) => !inputValue || item.toLowerCase().includes(lowerCasedInput)
+                      )
+                    }}
+                    handleDropdownItemDisplay={(dropdownItem) => {
+                      return (
+                        <Text
+                          color="grayModern.600"
+                          fontFamily="PingFang SC"
+                          fontSize="12px"
+                          fontStyle="normal"
+                          fontWeight={500}
+                          lineHeight="16px"
+                          letterSpacing="0.5px">
+                          {dropdownItem}
+                        </Text>
+                      )
+                    }}
+                    flexProps={{ w: '240px' }}
+                    initSelectedItem={t('price.all')}
+                  />
+                </Flex>
+              </Flex>
+
+              <Flex h="32px" alignItems="center" flex="0 1 auto" pr="6px">
+                <InputGroup w="290px">
+                  <Input
+                    py="6px"
+                    px="12px"
+                    alignItems="center"
+                    borderRadius="4px"
+                    border="1px solid"
+                    borderColor="grayModern.200"
+                    bgColor="grayModern.50"
+                    _hover={{ borderColor: 'grayModern.300' }}
+                    _focus={{ borderColor: 'grayModern.300' }}
+                    _focusVisible={{ borderColor: 'grayModern.300' }}
+                    _active={{ borderColor: 'grayModern.300' }}
+                    placeholder={t('price.modelName')}
+                    _placeholder={{
+                      color: 'grayModern.500',
+                      fontFamily: 'PingFang SC',
+                      fontSize: '12px',
+                      fontWeight: 400,
+                      lineHeight: '16px',
+                      letterSpacing: '0.048px'
+                    }}
+                    value={searchInput}
+                    onChange={(e) => {
+                      setSearchInput(e.target.value)
+                    }}
+                  />
+                  <InputRightElement w="32px" h="32px">
+                    <Box
+                      display="flex"
+                      w="full"
+                      h="full"
+                      p="0px 4px"
+                      justifyContent="center"
+                      alignItems="center"
+                      borderLeft="1px solid"
+                      borderColor="grayModern.200">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        viewBox="0 0 16 16"
+                        fill="none">
+                        <path
+                          fillRule="evenodd"
+                          clipRule="evenodd"
+                          d="M7.33331 2.66659C4.75598 2.66659 2.66665 4.75592 2.66665 7.33325C2.66665 9.91058 4.75598 11.9999 7.33331 11.9999C8.59061 11.9999 9.73178 11.5027 10.5709 10.6942C10.5885 10.6714 10.6077 10.6494 10.6286 10.6285C10.6495 10.6076 10.6714 10.5884 10.6942 10.5708C11.5028 9.73172 12 8.59055 12 7.33325C12 4.75592 9.91064 2.66659 7.33331 2.66659ZM12.0212 11.0784C12.8423 10.0519 13.3333 8.74993 13.3333 7.33325C13.3333 4.01954 10.647 1.33325 7.33331 1.33325C4.0196 1.33325 1.33331 4.01954 1.33331 7.33325C1.33331 10.647 4.0196 13.3333 7.33331 13.3333C8.74999 13.3333 10.052 12.8423 11.0784 12.0212L13.5286 14.4713C13.7889 14.7317 14.211 14.7317 14.4714 14.4713C14.7317 14.211 14.7317 13.7889 14.4714 13.5285L12.0212 11.0784Z"
+                          fill="#667085"
+                        />
+                      </svg>
+                    </Box>
+                  </InputRightElement>
+                </InputGroup>
+              </Flex>
+            </Flex>
+          </Flex>
           <Box flex="1" minHeight="0">
-            <PriceTable />
+            {isLoading ? (
+              <PriceTable modelConfigs={[]} isLoading={isLoading} />
+            ) : (
+              <PriceTable modelConfigs={filteredModelConfigs} isLoading={isLoading} />
+            )}
           </Box>
         </Flex>
       </Box>
@@ -73,142 +432,235 @@ function Price() {
   )
 }
 
-function PriceTable() {
+const ModelComponent = ({ modelConfig }: { modelConfig: ModelConfig }) => {
   const { lng } = useI18n()
   const { t } = useTranslationClientSide(lng, 'common')
-  const { isLoading, data } = useQuery({
-    queryKey: ['getModelPrices'],
-    queryFn: () => getModelPrices(),
-    refetchOnReconnect: true
+  const { message } = useMessage({
+    warningBoxBg: 'var(--Yellow-50, #FFFAEB)',
+    warningIconBg: 'var(--Yellow-500, #F79009)',
+    warningIconFill: 'white',
+    successBoxBg: 'var(--Green-50, #EDFBF3)',
+    successIconBg: 'var(--Green-600, #039855)',
+    successIconFill: 'white'
   })
-  const { currencySymbol } = useBackendStore()
 
-  const modelGroups = {
-    ernie: {
-      icon: ErnieIcon,
-      identifiers: ['ernie']
-    },
-    qwen: {
-      icon: QwenIcon,
-      identifiers: ['qwen']
-    },
-    chatglm: {
-      icon: ChatglmIcon,
-      identifiers: ['chatglm', 'glm']
-    },
-    deepseek: {
-      icon: DeepseekIcon,
-      identifiers: ['deepseek']
-    },
-    moonshot: {
-      icon: MoonshotIcon,
-      identifiers: ['moonshot']
-    },
-    sparkdesk: {
-      icon: SparkdeskIcon,
-      identifiers: ['sparkdesk']
-    },
-    abab: {
-      icon: AbabIcon,
-      identifiers: ['abab']
-    },
-    doubao: {
-      icon: DoubaoIcon,
-      identifiers: ['doubao']
-    }
-  }
+  const iconSrc = getModelIcon(modelConfig.owner)
 
-  const getIdentifier = (modelName: string): ModelIdentifier => {
-    return modelName.toLowerCase().split(/[-._\d]/)[0] as ModelIdentifier
-  }
-
-  const getModelIcon = (modelName: string): StaticImageData => {
-    const identifier = getIdentifier(modelName)
-    const group = Object.values(modelGroups).find((group) => group.identifiers.includes(identifier))
-    return group?.icon || OpenAIIcon
-  }
-
-  const ModelComponent = ({ modelName }: { modelName: string }) => {
-    const { message } = useMessage({
-      warningBoxBg: 'var(--Yellow-50, #FFFAEB)',
-      warningIconBg: 'var(--Yellow-500, #F79009)',
-      warningIconFill: 'white',
-      successBoxBg: 'var(--Green-50, #EDFBF3)',
-      successIconBg: 'var(--Green-600, #039855)',
-      successIconFill: 'white'
-    })
-    const iconSrc = getModelIcon(modelName)
-
-    return (
-      <Flex align="center" gap="12px">
-        <Image src={iconSrc} alt={modelName} width={20} height={20} />
-        <MyTooltip label={t(getIdentifier(modelName))} width="auto" height="auto">
-          <Text
-            color="grayModern.900"
-            fontFamily="PingFang SC"
-            fontSize="12px"
-            fontWeight={500}
-            lineHeight="16px"
-            letterSpacing="0.5px"
-            onClick={() =>
-              navigator.clipboard.writeText(modelName).then(
-                () => {
-                  message({
-                    status: 'success',
-                    title: t('copySuccess'),
-                    isClosable: true,
-                    duration: 2000,
-                    position: 'top'
-                  })
-                },
-                (err) => {
-                  message({
-                    status: 'warning',
-                    title: t('copyFailed'),
-                    description: err?.message || t('copyFailed'),
-                    isClosable: true,
-                    position: 'top'
-                  })
-                }
-              )
-            }
-            cursor="pointer">
-            {modelName}
-          </Text>
-        </MyTooltip>
+  return (
+    <Flex alignItems="center" justifyContent="flex-start" gap="8px" h="42px">
+      <MyTooltip
+        label={getTranslationWithFallback(
+          `modeOwner.${String(modelConfig.owner)}`,
+          'modeOwner.unknown',
+          t as any
+        )}
+        width="auto"
+        height="auto">
+        <Image src={iconSrc} alt={modelConfig.model} width={32} height={32} />
+      </MyTooltip>
+      <Flex gap="4px" alignItems="flex-start" direction="column">
+        <Text
+          color="grayModern.900"
+          fontFamily="PingFang SC"
+          fontSize="14px"
+          fontStyle="normal"
+          fontWeight={500}
+          lineHeight="20px"
+          letterSpacing="0.1px"
+          whiteSpace="nowrap"
+          onClick={() =>
+            navigator.clipboard.writeText(modelConfig.model).then(
+              () => {
+                message({
+                  status: 'success',
+                  title: t('copySuccess'),
+                  isClosable: true,
+                  duration: 2000,
+                  position: 'top'
+                })
+              },
+              (err) => {
+                message({
+                  status: 'warning',
+                  title: t('copyFailed'),
+                  description: err?.message || t('copyFailed'),
+                  isClosable: true,
+                  position: 'top'
+                })
+              }
+            )
+          }
+          cursor="pointer">
+          {modelConfig.model}
+        </Text>
+        <Flex gap="4px" alignItems="center" justifyContent="flex-start">
+          {modelConfig.config?.vision && (
+            <MyTooltip
+              label={
+                <Text
+                  color="grayModern.900"
+                  fontFamily="Inter"
+                  fontSize="12px"
+                  fontWeight={400}
+                  lineHeight="150%">
+                  {t('price.modelVisionLabel')}
+                </Text>
+              }
+              width="auto"
+              height="auto">
+              <Badge
+                display="flex"
+                padding="1px 4px"
+                justifyContent="center"
+                alignItems="center"
+                gap="2px"
+                borderRadius="4px"
+                background="var(--Teal-50, #EBFAF8)">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="14"
+                  height="14"
+                  viewBox="0 0 14 14"
+                  fill="none">
+                  <path
+                    d="M6.9999 5.35705C7.43565 5.35705 7.85355 5.53015 8.16167 5.83827C8.46979 6.14639 8.64289 6.56429 8.64289 7.00004C8.64289 7.43578 8.46979 7.85368 8.16167 8.1618C7.85355 8.46992 7.43565 8.64302 6.9999 8.64302C6.56416 8.64302 6.14626 8.46992 5.83814 8.1618C5.53002 7.85368 5.35692 7.43578 5.35692 7.00004C5.35692 6.56429 5.53002 6.14639 5.83814 5.83827C6.14626 5.53015 6.56416 5.35705 6.9999 5.35705ZM6.9999 2.89258C9.44394 2.89258 11.5695 4.2494 12.6718 6.25045C12.7785 6.44422 12.8319 6.5411 12.8719 6.73711C12.8982 6.86627 12.8982 7.13381 12.8719 7.26297C12.8319 7.45898 12.7785 7.55586 12.6718 7.74962C11.5695 9.75068 9.44394 11.1075 6.9999 11.1075C4.55587 11.1075 2.43032 9.75068 1.32805 7.74962C1.22132 7.55586 1.16795 7.45898 1.12793 7.26297C1.10156 7.13381 1.10156 6.86627 1.12793 6.73711C1.16795 6.5411 1.22132 6.44422 1.32805 6.25045C2.43032 4.2494 4.55587 2.89258 6.9999 2.89258ZM2.70809 6.12392C2.56204 6.31728 2.48901 6.41395 2.4229 6.6637C2.38194 6.81844 2.38194 7.18164 2.4229 7.33638C2.48901 7.58612 2.56204 7.6828 2.70809 7.87616C3.10318 8.3992 3.59235 8.84798 4.15342 9.19794C5.00732 9.73055 5.99352 10.0129 6.9999 10.0129C8.00629 10.0129 8.99249 9.73055 9.84639 9.19794C10.4075 8.84798 10.8966 8.3992 11.2917 7.87616C11.4378 7.6828 11.5108 7.58612 11.5769 7.33638C11.6179 7.18164 11.6179 6.81844 11.5769 6.6637C11.5108 6.41395 11.4378 6.31728 11.2917 6.12392C10.8966 5.60087 10.4075 5.15209 9.84639 4.80213C8.99249 4.26953 8.00629 3.98718 6.9999 3.98718C5.99352 3.98718 5.00732 4.26953 4.15342 4.80213C3.59235 5.15209 3.10318 5.60088 2.70809 6.12392Z"
+                    fill="#00A9A6"
+                  />
+                </svg>
+                <Text
+                  color="#007E7C" // Changed from "#EBFAF8" to "teal.700" for better readability
+                  fontFamily="PingFang SC"
+                  fontStyle="normal"
+                  fontSize="11px"
+                  fontWeight={500}
+                  lineHeight="16px"
+                  letterSpacing="0.5px">
+                  {t('price.modelVision')}
+                </Text>
+              </Badge>
+            </MyTooltip>
+          )}
+          {modelConfig.config?.tool_choice && (
+            <Badge
+              display="flex"
+              padding="1px 4px"
+              justifyContent="center"
+              alignItems="center"
+              gap="2px"
+              borderRadius="4px"
+              background="#F0EEFF">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="14"
+                height="14"
+                viewBox="0 0 14 14"
+                fill="none">
+                <path
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M2.38275 8.52685C1.2703 7.4144 0.919623 5.8231 1.32317 4.38399C1.43455 3.98679 1.60339 3.60118 1.82953 3.24043L3.94506 5.35597L5.19686 5.19681L5.35601 3.94501L3.2406 1.8296C3.60141 1.60351 3.98708 1.43474 4.38434 1.32342C5.82323 0.920248 7.41413 1.27101 8.52636 2.38324C9.65082 3.5077 9.99697 5.1214 9.57262 6.57264L12.1265 8.95704C13.0537 9.82265 13.0787 11.2844 12.1818 12.1813C11.2845 13.0786 9.82197 13.053 8.95657 12.1249L6.57622 9.57192C5.12392 9.99811 3.50826 9.65236 2.38275 8.52685ZM5.39327 2.33236L6.58552 3.52461L6.24026 6.24021L3.52465 6.58547L2.33192 5.39274C2.2883 6.23601 2.5846 7.07879 3.20771 7.70189C4.01259 8.50677 5.1785 8.76623 6.2477 8.45246L6.93854 8.24972L9.80987 11.3293C10.225 11.7745 10.9265 11.7867 11.3569 11.3563C11.7871 10.9261 11.7751 10.225 11.3303 9.80981L8.25115 6.93498L8.45284 6.24521C8.76525 5.1768 8.50554 4.01234 7.70141 3.2082C7.07855 2.58534 6.23621 2.28903 5.39327 2.33236Z"
+                  fill="#6F5DD7"
+                />
+                <path
+                  d="M10.9396 10.1019C11.1708 10.3332 11.1708 10.7081 10.9396 10.9394C10.7083 11.1707 10.3333 11.1707 10.102 10.9394C9.87072 10.7081 9.87072 10.3332 10.102 10.1019C10.3333 9.8706 10.7083 9.8706 10.9396 10.1019Z"
+                  fill="#6F5DD7"
+                />
+              </svg>
+              <Text
+                color="#6F5DD7"
+                fontFamily="PingFang SC"
+                fontStyle="normal"
+                fontSize="11px"
+                fontWeight={500}
+                lineHeight="16px"
+                letterSpacing="0.5px">
+                {t('price.modelToolChoice')}
+              </Text>
+            </Badge>
+          )}
+          {modelConfig.config?.max_context_tokens && (
+            <Badge
+              display="flex"
+              padding="1px 4px"
+              justifyContent="center"
+              alignItems="center"
+              borderRadius="4px"
+              background="#F7F8FA">
+              <Text
+                color="#667085"
+                fontFamily="PingFang SC"
+                fontStyle="normal"
+                fontSize="11px"
+                fontWeight={500}
+                lineHeight="16px"
+                letterSpacing="0.5px">
+                {`${
+                  modelConfig.config.max_context_tokens % 1024 === 0
+                    ? Math.ceil(modelConfig.config.max_context_tokens / 1024)
+                    : Math.ceil(modelConfig.config.max_context_tokens / 1000)
+                }K`}
+              </Text>
+            </Badge>
+          )}
+          {modelConfig.config?.max_output_tokens && (
+            <Badge
+              display="flex"
+              padding="1px 4px"
+              justifyContent="center"
+              alignItems="center"
+              borderRadius="4px"
+              background="#EDFAFF">
+              <Text
+                color="#0077A9"
+                fontFamily="PingFang SC"
+                fontStyle="normal"
+                fontSize="11px"
+                fontWeight={500}
+                lineHeight="16px"
+                letterSpacing="0.5px">
+                {`${Math.ceil(modelConfig.config.max_output_tokens / 1024)}K ${t(
+                  'price.response'
+                )}`}
+              </Text>
+            </Badge>
+          )}
+        </Flex>
       </Flex>
-    )
-  }
-
-  const sortModelsByIdentifier = (models: ModelPrice[]): ModelPrice[] => {
-    const groupedModels = new Map<string, ModelPrice[]>()
+    </Flex>
+  )
+}
 
-    // Group models by identifier
-    models.forEach((model) => {
-      const identifier = getIdentifier(model.name)
-      if (!groupedModels.has(identifier)) {
-        groupedModels.set(identifier, [])
-      }
-      groupedModels.get(identifier)!.push(model)
-    })
+function PriceTable({
+  modelConfigs,
+  isLoading
+}: {
+  modelConfigs: ModelConfig[]
+  isLoading: boolean
+}) {
+  const { lng } = useI18n()
+  const { t } = useTranslationClientSide(lng, 'common')
 
-    // Define order based on modelGroups
-    const orderMap = new Map(Object.keys(modelGroups).map((key, index) => [key, index]))
+  const { currencySymbol } = useBackendStore()
 
-    // Sort based on modelGroups order, unknown models go to the end
-    const sortedEntries = Array.from(groupedModels.entries()).sort((a, b) => {
-      const orderA = orderMap.has(a[0]) ? orderMap.get(a[0])! : Number.MAX_VALUE
-      const orderB = orderMap.has(b[0]) ? orderMap.get(b[0])! : Number.MAX_VALUE
-      return orderA - orderB
-    })
+  const [sortConfig, setSortConfig] = useState({
+    column: '',
+    direction: false as SortDirection
+  })
 
-    return sortedEntries.flatMap(([_, models]) => models)
+  // 处理排序
+  const handleSort = (column: string, direction: SortDirection) => {
+    // 如果点击相同的列并且方向相同，则取消排序
+    if (sortConfig.column === column && sortConfig.direction === direction) {
+      setSortConfig({ column: '', direction: false })
+      return
+    }
+    setSortConfig({ column, direction })
   }
 
-  const columnHelper = createColumnHelper<ModelPrice>()
+  const columnHelper = createColumnHelper<ModelConfig>()
   const columns = [
-    columnHelper.accessor((row) => row.name, {
-      id: 'name',
+    columnHelper.accessor((row) => row.model, {
+      id: 'model',
       header: () => (
         <Text
           color="grayModern.600"
@@ -220,14 +672,108 @@ function PriceTable() {
           {t('key.name')}
         </Text>
       ),
-      cell: (info) => <ModelComponent modelName={info.getValue()} />
+      cell: (info) => <ModelComponent modelConfig={info.row.original} />
+    }),
+    columnHelper.accessor((row) => row.type, {
+      id: 'type',
+      header: () => (
+        <Text
+          color="grayModern.600"
+          fontFamily="PingFang SC"
+          fontSize="12px"
+          fontWeight={500}
+          lineHeight="16px"
+          letterSpacing="0.5px">
+          {t('key.modelType')}
+        </Text>
+      ),
+      cell: (info) => (
+        <Badge
+          display="inline-flex"
+          padding="6px 12px"
+          justifyContent="center"
+          alignItems="center"
+          borderRadius="4px"
+          background={getTypeStyle(info.getValue()).background}>
+          <Text
+            color={getTypeStyle(info.getValue()).color}
+            fontFamily="PingFang SC"
+            fontSize="12px"
+            fontWeight={500}
+            lineHeight="16px"
+            letterSpacing="0.5px">
+            {getTranslationWithFallback(
+              `modeType.${String(info.getValue())}`,
+              'modeType.0',
+              t as any
+            )}
+          </Text>
+        </Badge>
+      )
+    }),
+    columnHelper.accessor((row) => row.rpm, {
+      id: 'rpm',
+      header: () => (
+        <Flex alignItems="center" gap="4px" w="fit-content">
+          <Text
+            color="grayModern.600"
+            fontFamily="PingFang SC"
+            fontSize="12px"
+            fontWeight={500}
+            lineHeight="16px"
+            letterSpacing="0.5px">
+            {t('price.modelRpm')}
+          </Text>
+          <MyTooltip
+            placement="bottom-end"
+            width="auto"
+            height="auto"
+            label={
+              <Text
+                whiteSpace="nowrap"
+                color="grayModern.900"
+                fontFamily="PingFang SC"
+                fontSize="12px"
+                fontWeight={400}
+                lineHeight="16px"
+                letterSpacing="0.5px">
+                {t('price.modelRpmTooltip')}
+              </Text>
+            }>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="15"
+              height="14"
+              viewBox="0 0 15 14"
+              fill="none">
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M7.79299 2.23698C5.16257 2.23698 3.03019 4.36936 3.03019 6.99978C3.03019 9.6302 5.16257 11.7626 7.79299 11.7626C10.4234 11.7626 12.5558 9.6302 12.5558 6.99978C12.5558 4.36936 10.4234 2.23698 7.79299 2.23698ZM1.86353 6.99978C1.86353 3.72503 4.51824 1.07031 7.79299 1.07031C11.0677 1.07031 13.7225 3.72503 13.7225 6.99978C13.7225 10.2745 11.0677 12.9292 7.79299 12.9292C4.51824 12.9292 1.86353 10.2745 1.86353 6.99978ZM7.92275 4.92235C7.68522 4.8816 7.44093 4.92624 7.23315 5.04835C7.02538 5.17046 6.86752 5.36217 6.78755 5.58952C6.68064 5.89343 6.3476 6.05313 6.04369 5.94622C5.73978 5.83931 5.58008 5.50628 5.68699 5.20236C5.85839 4.71511 6.19671 4.30424 6.64202 4.04253C7.08733 3.78082 7.6109 3.68515 8.11998 3.77247C8.62907 3.85979 9.09083 4.12447 9.42347 4.51962C9.75604 4.91469 9.93809 5.41468 9.9374 5.93109C9.93713 6.77507 9.31182 7.32806 8.87572 7.6188C8.63987 7.77603 8.40817 7.89146 8.23774 7.96721C8.15169 8.00545 8.07917 8.0345 8.0268 8.05445C8.00057 8.06445 7.97925 8.07221 7.96366 8.07775L7.94462 8.08442L7.93848 8.08652L7.93629 8.08726L7.93541 8.08755C7.93524 8.08761 7.93469 8.08779 7.75022 7.53439L7.93469 8.08779C7.62906 8.18967 7.2987 8.02449 7.19683 7.71886C7.09498 7.41333 7.26001 7.08309 7.56545 6.9811L7.57281 6.9785C7.58072 6.97569 7.59385 6.97093 7.61148 6.96422C7.64681 6.95075 7.6996 6.92968 7.76391 6.9011C7.89419 6.84319 8.06346 6.75815 8.22857 6.64807C8.5943 6.40425 8.77073 6.1555 8.77073 5.93055L8.77073 5.92968C8.77109 5.68868 8.68615 5.45533 8.53094 5.27096C8.37573 5.08658 8.16028 4.96309 7.92275 4.92235ZM7.20966 9.67285C7.20966 9.35068 7.47083 9.08951 7.79299 9.08951H7.79834C8.12051 9.08951 8.38167 9.35068 8.38167 9.67285C8.38167 9.99501 8.12051 10.2562 7.79834 10.2562H7.79299C7.47083 10.2562 7.20966 9.99501 7.20966 9.67285Z"
+                fill="#667085"
+              />
+            </svg>
+          </MyTooltip>
+        </Flex>
+      ),
+      cell: (info) => (
+        <Text
+          color="grayModern.600"
+          fontFamily="PingFang SC"
+          fontSize="12px"
+          fontWeight={500}
+          lineHeight="16px"
+          letterSpacing="0.5px">
+          {info.getValue()}
+        </Text>
+      )
     }),
-    columnHelper.accessor((row) => row.prompt, {
-      id: 'inputPrice',
+    columnHelper.accessor((row) => row.input_price, {
+      id: 'input_price',
       header: () => {
         return (
-          <Box position={'relative'}>
-            <Flex alignItems={'center'}>
+          <Flex gap="8px">
+            <Flex alignItems="center">
               <Text
                 color="grayModern.600"
                 fontFamily="PingFang SC"
@@ -250,7 +796,86 @@ function PriceTable() {
                 /{t('price.per1kTokens').toLowerCase()}
               </Text>
             </Flex>
-          </Box>
+
+            <Flex direction="column" gap="6px">
+              <MyTooltip
+                placement="bottom-end"
+                width="auto"
+                height="auto"
+                label={
+                  <Text
+                    whiteSpace="nowrap"
+                    color="grayModern.900"
+                    fontFamily="PingFang SC"
+                    fontSize="12px"
+                    fontWeight={400}
+                    lineHeight="16px"
+                    letterSpacing="0.5px">
+                    {t('price.sortUpTooltip')}
+                  </Text>
+                }>
+                <Box
+                  as="button"
+                  onClick={() => handleSort('input_price', 'asc')}
+                  cursor="pointer"
+                  _hover={{ opacity: 0.8 }}>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="6"
+                    height="4"
+                    viewBox="0 0 6 4"
+                    fill="none">
+                    <path
+                      d="M5.15373 4C5.90617 4 6.28299 3.09027 5.75094 2.55822L3.59721 0.404486C3.26738 0.0746584 2.73262 0.0746584 2.40279 0.404486L0.249064 2.55822C-0.28299 3.09027 0.0938324 4 0.84627 4H5.15373Z"
+                      fill={
+                        sortConfig.column === 'input_price' && sortConfig.direction === 'asc'
+                          ? '#219BF4'
+                          : '#8A95A7'
+                      }
+                    />
+                  </svg>
+                </Box>
+              </MyTooltip>
+              <MyTooltip
+                placement="bottom-end"
+                width="auto"
+                height="auto"
+                label={
+                  <Text
+                    whiteSpace="nowrap"
+                    color="grayModern.900"
+                    fontFamily="PingFang SC"
+                    fontSize="12px"
+                    fontWeight={400}
+                    lineHeight="16px"
+                    letterSpacing="0.5px">
+                    {t('price.sortDownTooltip')}
+                  </Text>
+                }>
+                <Box
+                  as="button"
+                  onClick={() => handleSort('input_price', 'desc')}
+                  cursor="pointer"
+                  _hover={{ opacity: 0.8 }}>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="6"
+                    height="4"
+                    viewBox="0 0 6 4"
+                    fill="none">
+                    <path
+                      d="M5.15373 0C5.90617 0 6.28299 0.90973 5.75094 1.44178L3.59721 3.59551C3.26738 3.92534 2.73262 3.92534 2.40279 3.59551L0.249064 1.44178C-0.28299 0.90973 0.0938324 0 0.84627 0H5.15373Z"
+                      fill={
+                        sortConfig.column === 'input_price' && sortConfig.direction === 'desc'
+                          ? '#219BF4'
+                          : '#8A95A7'
+                      }
+                    />
+                  </svg>
+                </Box>
+              </MyTooltip>
+            </Flex>
+          </Flex>
         )
       },
       cell: (info) => (
@@ -265,11 +890,11 @@ function PriceTable() {
         </Text>
       )
     }),
-    columnHelper.accessor((row) => row.completion, {
-      id: 'outputPrice',
+    columnHelper.accessor((row) => row.output_price, {
+      id: 'output_price',
       header: () => (
-        <Box position={'relative'}>
-          <Flex alignItems={'center'}>
+        <Flex gap="8px">
+          <Flex alignItems="center">
             <Text
               color="grayModern.600"
               fontFamily="PingFang SC"
@@ -292,7 +917,85 @@ function PriceTable() {
               /{t('price.per1kTokens').toLowerCase()}
             </Text>
           </Flex>
-        </Box>
+          <Flex direction="column" gap="6px">
+            <MyTooltip
+              placement="bottom-end"
+              width="auto"
+              height="auto"
+              label={
+                <Text
+                  whiteSpace="nowrap"
+                  color="grayModern.900"
+                  fontFamily="PingFang SC"
+                  fontSize="12px"
+                  fontWeight={400}
+                  lineHeight="16px"
+                  letterSpacing="0.5px">
+                  {t('price.sortUpTooltip')}
+                </Text>
+              }>
+              <Box
+                as="button"
+                onClick={() => handleSort('output_price', 'asc')}
+                cursor="pointer"
+                _hover={{ opacity: 0.8 }}>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="6"
+                  height="4"
+                  viewBox="0 0 6 4"
+                  fill="none">
+                  <path
+                    d="M5.15373 4C5.90617 4 6.28299 3.09027 5.75094 2.55822L3.59721 0.404486C3.26738 0.0746584 2.73262 0.0746584 2.40279 0.404486L0.249064 2.55822C-0.28299 3.09027 0.0938324 4 0.84627 4H5.15373Z"
+                    fill={
+                      sortConfig.column === 'output_price' && sortConfig.direction === 'asc'
+                        ? '#219BF4'
+                        : '#8A95A7'
+                    }
+                  />
+                </svg>
+              </Box>
+            </MyTooltip>
+            <MyTooltip
+              placement="bottom-end"
+              width="auto"
+              height="auto"
+              label={
+                <Text
+                  whiteSpace="nowrap"
+                  color="grayModern.900"
+                  fontFamily="PingFang SC"
+                  fontSize="12px"
+                  fontWeight={400}
+                  lineHeight="16px"
+                  letterSpacing="0.5px">
+                  {t('price.sortDownTooltip')}
+                </Text>
+              }>
+              <Box
+                as="button"
+                onClick={() => handleSort('output_price', 'desc')}
+                cursor="pointer"
+                _hover={{ opacity: 0.8 }}>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="6"
+                  height="4"
+                  viewBox="0 0 6 4"
+                  fill="none">
+                  <path
+                    d="M5.15373 0C5.90617 0 6.28299 0.90973 5.75094 1.44178L3.59721 3.59551C3.26738 3.92534 2.73262 3.92534 2.40279 3.59551L0.249064 1.44178C-0.28299 0.90973 0.0938324 0 0.84627 0H5.15373Z"
+                    fill={
+                      sortConfig.column === 'output_price' && sortConfig.direction === 'desc'
+                        ? '#219BF4'
+                        : '#8A95A7'
+                    }
+                  />
+                </svg>
+              </Box>
+            </MyTooltip>
+          </Flex>
+        </Flex>
       ),
       cell: (info) => (
         <Text
@@ -308,20 +1011,35 @@ function PriceTable() {
     })
   ]
 
-  const sortedData = useMemo(() => sortModelsByIdentifier(data || []), [data])
+  const tableData = useMemo(() => {
+    if (!sortConfig.direction || !sortConfig.column) {
+      return modelConfigs
+    }
+
+    return [...modelConfigs].sort((a, b) => {
+      let aValue = a[sortConfig.column as keyof ModelConfig]
+      let bValue = b[sortConfig.column as keyof ModelConfig]
+
+      // 确保数值比较
+      if (typeof aValue === 'string') aValue = parseFloat(aValue as string) || 0
+      if (typeof bValue === 'string') bValue = parseFloat(bValue as string) || 0
+
+      if (sortConfig.direction === 'asc') {
+        return (aValue as number) - (bValue as number)
+      } else {
+        return (bValue as number) - (aValue as number)
+      }
+    })
+  }, [modelConfigs, sortConfig])
 
   const table = useReactTable({
-    data: sortedData,
+    data: tableData,
     columns,
     getCoreRowModel: getCoreRowModel()
   })
 
-  return isLoading ? (
-    <Center>
-      <Spinner size="md" color="grayModern.800" />
-    </Center>
-  ) : (
-    <TableContainer w="full" h="full" maxH="full" overflowY="auto">
+  return (
+    <TableContainer w="full" h="full" flex="1 0 0" minHeight="0" overflowY="auto">
       <Table variant="simple" w="full" size="md">
         <Thead position="sticky" top={0} zIndex={1} bg="white">
           {table.getHeaderGroups().map((headerGroup) => (
@@ -341,22 +1059,35 @@ function PriceTable() {
           ))}
         </Thead>
         <Tbody>
-          {table.getRowModel().rows.map((row) => (
-            <Tr
-              key={row.id}
-              height="48px"
-              alignSelf="stretch"
-              borderBottom="1px solid"
-              borderColor="grayModern.150">
-              {row.getVisibleCells().map((cell) => (
-                <Td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</Td>
-              ))}
+          {isLoading ? (
+            <Tr>
+              <Td
+                colSpan={columns.length}
+                textAlign="center"
+                border="none"
+                height="100%"
+                width="100%">
+                <Center h="200px">
+                  <Spinner size="md" color="grayModern.800" />
+                </Center>
+              </Td>
             </Tr>
-          ))}
+          ) : (
+            table.getRowModel().rows.map((row) => (
+              <Tr
+                key={row.id}
+                height="48px"
+                alignSelf="stretch"
+                borderBottom="1px solid"
+                borderColor="grayModern.150">
+                {row.getVisibleCells().map((cell) => (
+                  <Td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</Td>
+                ))}
+              </Tr>
+            ))
+          )}
         </Tbody>
       </Table>
     </TableContainer>
   )
 }
-
-export default Price
diff --git a/frontend/providers/aiproxy/app/[lng]/globals.css b/frontend/providers/aiproxy/app/[lng]/globals.css
index e6e10f493ddf..c356d55399f5 100644
--- a/frontend/providers/aiproxy/app/[lng]/globals.css
+++ b/frontend/providers/aiproxy/app/[lng]/globals.css
@@ -100,42 +100,39 @@ textarea::placeholder {
   height: 100%;
 }
 
-::-webkit-scrollbar,
 ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-  border-radius: 8px;
+  width: 6px;
+  height: 6px;
+  border-radius: 6px;
 }
-::-webkit-scrollbar-track,
+
 ::-webkit-scrollbar-track {
+  margin: 24px 0;
   background: transparent !important;
-  border-radius: 2px;
+  border-radius: 6px;
 }
-::-webkit-scrollbar-thumb,
+
 ::-webkit-scrollbar-thumb {
-  background: rgba(189, 193, 197, 1) !important;
-  border-radius: 2px;
-}
-::-webkit-scrollbar-thumb:hover,
-::-webkit-scrollbar-thumb:hover {
-  background: rgba(189, 193, 197, 1) !important;
+  min-height: 40px;
+  border-radius: 6px;
+  background: var(--Gray-Modern-200, #e8ebf0) !important;
 }
 
 div {
-  &::-webkit-scrollbar-thumb,
   &::-webkit-scrollbar-thumb {
+    min-height: 40px;
     background: transparent !important;
-    border-radius: 2px;
-    transition: 1s;
+    border-radius: 6px;
+    transition: background 0.3s ease;
   }
+
+  &::-webkit-scrollbar-track {
+    margin: 24px 0;
+  }
+
   &:hover {
-    &::-webkit-scrollbar-thumb,
     &::-webkit-scrollbar-thumb {
-      background: rgba(189, 193, 197, 0.5) !important;
-    }
-    &::-webkit-scrollbar-thumb:hover,
-    &::-webkit-scrollbar-thumb:hover {
-      background: rgba(189, 193, 197, 1) !important;
+      background: var(--Gray-Modern-200, #e8ebf0) !important;
     }
   }
 }
diff --git a/frontend/providers/aiproxy/app/[lng]/layout.tsx b/frontend/providers/aiproxy/app/[lng]/layout.tsx
index 5b861c6a6b42..72d516fc5c12 100644
--- a/frontend/providers/aiproxy/app/[lng]/layout.tsx
+++ b/frontend/providers/aiproxy/app/[lng]/layout.tsx
@@ -5,7 +5,8 @@ import { useTranslationServerSide } from '@/app/i18n/server'
 import { fallbackLng, languages } from '@/app/i18n/settings'
 import ChakraProviders from '@/providers/chakra/providers'
 import { I18nProvider } from '@/providers/i18n/i18nContext'
-import QueryProvider from '@/providers/chakra/QueryProvider'
+import QueryProvider from '@/providers/tanstack-query/QueryProvider'
+import InitializeApp from '@/components/InitializeApp'
 
 import './globals.css'
 import 'react-day-picker/dist/style.css'
@@ -47,7 +48,10 @@ export default async function RootLayout({
       <body>
         <I18nProvider lng={lng}>
           <ChakraProviders>
-            <QueryProvider>{children}</QueryProvider>
+            <QueryProvider>
+              <InitializeApp />
+              {children}
+            </QueryProvider>
           </ChakraProviders>
         </I18nProvider>
       </body>
diff --git a/frontend/providers/aiproxy/app/api/admin/channel/[id]/route.ts b/frontend/providers/aiproxy/app/api/admin/channel/[id]/route.ts
new file mode 100644
index 000000000000..5f30495b079c
--- /dev/null
+++ b/frontend/providers/aiproxy/app/api/admin/channel/[id]/route.ts
@@ -0,0 +1,151 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { ChannelInfo } from '@/types/admin/channels/channelInfo'
+import { parseJwtToken } from '@/utils/backend/auth'
+import { ApiProxyBackendResp, ApiResp } from '@/types/api'
+import { isAdmin } from '@/utils/backend/isAdmin'
+import { CreateChannelRequest } from '@/types/admin/channels/channelInfo'
+
+export const dynamic = 'force-dynamic'
+
+export type GetChannelsResponse = ApiResp<{
+  channels: ChannelInfo[]
+  total: number
+}>
+
+async function updateChannel(channelData: CreateChannelRequest, id: string): Promise<void> {
+  try {
+    const url = new URL(
+      `/api/channel/${id}`,
+      global.AppConfig?.backend.aiproxyInternal || global.AppConfig?.backend.aiproxy
+    )
+
+    const token = global.AppConfig?.auth.aiProxyBackendKey
+    const response = await fetch(url.toString(), {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `${token}`
+      },
+      body: JSON.stringify(channelData),
+      cache: 'no-store'
+    })
+
+    if (!response.ok) {
+      throw new Error(`HTTP error, status code: ${response.status}`)
+    }
+
+    const result: ApiProxyBackendResp = await response.json()
+    if (!result.success) {
+      throw new Error(result.message || 'Failed to create channel')
+    }
+  } catch (error) {
+    console.error('admin channels api: create channel error:## ', error)
+    throw error
+  }
+}
+
+// update channel
+export async function PUT(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+): Promise<NextResponse<ApiResp>> {
+  try {
+    const namespace = await parseJwtToken(request.headers)
+    await isAdmin(namespace)
+
+    if (!params.id) {
+      return NextResponse.json(
+        {
+          code: 400,
+          message: 'Channel id is required',
+          error: 'Bad Request'
+        },
+        { status: 400 }
+      )
+    }
+
+    const channelData: CreateChannelRequest = await request.json()
+    await updateChannel(channelData, params.id)
+
+    return NextResponse.json({
+      code: 200,
+      message: 'Channel created successfully'
+    } satisfies ApiResp)
+  } catch (error) {
+    console.error('admin channels api: create channel error:## ', error)
+    return NextResponse.json(
+      {
+        code: 500,
+        message: error instanceof Error ? error.message : 'server error',
+        error: error instanceof Error ? error.message : 'server error'
+      } satisfies ApiResp,
+      { status: 500 }
+    )
+  }
+}
+
+async function deleteChannel(id: string): Promise<void> {
+  try {
+    const url = new URL(
+      `/api/channel/${id}`,
+      global.AppConfig?.backend.aiproxyInternal || global.AppConfig?.backend.aiproxy
+    )
+    const token = global.AppConfig?.auth.aiProxyBackendKey
+    const response = await fetch(url.toString(), {
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `${token}`
+      },
+      cache: 'no-store'
+    })
+    if (!response.ok) {
+      throw new Error(`HTTP error, status code: ${response.status}`)
+    }
+    const result: ApiProxyBackendResp = await response.json()
+    if (!result.success) {
+      throw new Error(result.message || 'admin channels api:ai proxy backend error')
+    }
+  } catch (error) {
+    console.error('admin channels api: delete channel error:', error)
+    throw error
+  }
+}
+
+// delete channel
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+): Promise<NextResponse<ApiResp>> {
+  try {
+    const namespace = await parseJwtToken(request.headers)
+    await isAdmin(namespace)
+
+    if (!params.id) {
+      return NextResponse.json(
+        {
+          code: 400,
+          message: 'Channel id is required',
+          error: 'Bad Request'
+        },
+        { status: 400 }
+      )
+    }
+
+    await deleteChannel(params.id)
+    return NextResponse.json({
+      code: 200,
+      message: 'Channel deleted successfully'
+    } satisfies ApiResp)
+  } catch (error) {
+    console.error('admin channels api: delete channel error:', error)
+    return NextResponse.json(
+      {
+        code: 500,
+        message: error instanceof Error ? error.message : 'server error',
+        error: error instanceof Error ? error.message : 'server error'
+      } satisfies ApiResp,
+      { status: 500 }
+    )
+  }
+}
diff --git a/frontend/providers/aiproxy/app/api/admin/channel/[id]/status/route.ts b/frontend/providers/aiproxy/app/api/admin/channel/[id]/status/route.ts
new file mode 100644
index 000000000000..55d47d688ecd
--- /dev/null
+++ b/frontend/providers/aiproxy/app/api/admin/channel/[id]/status/route.ts
@@ -0,0 +1,81 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { ChannelInfo } from '@/types/admin/channels/channelInfo'
+import { parseJwtToken } from '@/utils/backend/auth'
+import { ApiProxyBackendResp, ApiResp } from '@/types/api'
+import { isAdmin } from '@/utils/backend/isAdmin'
+import { CreateChannelRequest } from '@/types/admin/channels/channelInfo'
+
+export const dynamic = 'force-dynamic'
+
+// update channel status
+
+async function updateChannelStatus(id: string, status: number): Promise<void> {
+  try {
+    const url = new URL(
+      `/api/channel/${id}/status`,
+      global.AppConfig?.backend.aiproxyInternal || global.AppConfig?.backend.aiproxy
+    )
+
+    const token = global.AppConfig?.auth.aiProxyBackendKey
+    const response = await fetch(url.toString(), {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `${token}`
+      },
+      body: JSON.stringify({ status }),
+      cache: 'no-store'
+    })
+
+    if (!response.ok) {
+      throw new Error(`HTTP error, status code: ${response.status}`)
+    }
+
+    const result: ApiProxyBackendResp = await response.json()
+    if (!result.success) {
+      throw new Error(result.message || 'Failed to update channel status')
+    }
+  } catch (error) {
+    console.error('admin channels api: update channel status error:## ', error)
+    throw error
+  }
+}
+
+export async function POST(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+): Promise<NextResponse<ApiResp>> {
+  try {
+    const namespace = await parseJwtToken(request.headers)
+    await isAdmin(namespace)
+
+    if (!params.id) {
+      return NextResponse.json(
+        {
+          code: 400,
+          message: 'Channel id is required',
+          error: 'Bad Request'
+        },
+        { status: 400 }
+      )
+    }
+
+    const { status }: { status: number } = await request.json()
+    await updateChannelStatus(params.id, status)
+
+    return NextResponse.json({
+      code: 200,
+      message: 'Channel status updated successfully'
+    } satisfies ApiResp)
+  } catch (error) {
+    console.error('admin channels api: update channel status error:## ', error)
+    return NextResponse.json(
+      {
+        code: 500,
+        message: error instanceof Error ? error.message : 'server error',
+        error: error instanceof Error ? error.message : 'server error'
+      } satisfies ApiResp,
+      { status: 500 }
+    )
+  }
+}
diff --git a/frontend/providers/aiproxy/app/api/admin/channel/all/route.ts b/frontend/providers/aiproxy/app/api/admin/channel/all/route.ts
new file mode 100644
index 000000000000..31fdf12323de
--- /dev/null
+++ b/frontend/providers/aiproxy/app/api/admin/channel/all/route.ts
@@ -0,0 +1,64 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { ChannelInfo } from '@/types/admin/channels/channelInfo'
+import { parseJwtToken } from '@/utils/backend/auth'
+import { ApiProxyBackendResp, ApiResp } from '@/types/api'
+import { isAdmin } from '@/utils/backend/isAdmin'
+
+export const dynamic = 'force-dynamic'
+
+type ApiProxyBackendAllChannelResponse = ApiProxyBackendResp<ChannelInfo[]>
+
+export type GetAllChannelResponse = ApiResp<ChannelInfo[]>
+
+async function fetchChannels(): Promise<ChannelInfo[]> {
+  try {
+    const url = new URL(
+      `/api/channels/all`,
+      global.AppConfig?.backend.aiproxyInternal || global.AppConfig?.backend.aiproxy
+    )
+    const token = global.AppConfig?.auth.aiProxyBackendKey
+    const response = await fetch(url.toString(), {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `${token}`
+      },
+      cache: 'no-store'
+    })
+    if (!response.ok) {
+      throw new Error(`HTTP error, status code: ${response.status}`)
+    }
+    const result: ApiProxyBackendAllChannelResponse = await response.json()
+    if (!result.success) {
+      throw new Error(result.message || 'admin channels api:ai proxy backend error')
+    }
+    return result?.data || []
+  } catch (error) {
+    console.error('admin channels api: fetch all channels from ai proxy backend error:', error)
+    throw error
+  }
+}
+
+// get all channels
+export async function GET(request: NextRequest): Promise<NextResponse<GetAllChannelResponse>> {
+  try {
+    const namespace = await parseJwtToken(request.headers)
+    await isAdmin(namespace)
+
+    const channels = await fetchChannels()
+    return NextResponse.json({
+      code: 200,
+      data: channels
+    } satisfies GetAllChannelResponse)
+  } catch (error) {
+    console.error('admin channels api: get all channels error:', error)
+    return NextResponse.json(
+      {
+        code: 500,
+        message: error instanceof Error ? error.message : 'server error',
+        error: error instanceof Error ? error.message : 'server error'
+      } satisfies GetAllChannelResponse,
+      { status: 500 }
+    )
+  }
+}
diff --git a/frontend/providers/aiproxy/app/api/admin/channel/route.ts b/frontend/providers/aiproxy/app/api/admin/channel/route.ts
new file mode 100644
index 000000000000..58c73c638432
--- /dev/null
+++ b/frontend/providers/aiproxy/app/api/admin/channel/route.ts
@@ -0,0 +1,171 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { ChannelInfo } from '@/types/admin/channels/channelInfo'
+import { parseJwtToken } from '@/utils/backend/auth'
+import { ApiProxyBackendResp, ApiResp } from '@/types/api'
+import { isAdmin } from '@/utils/backend/isAdmin'
+import { CreateChannelRequest } from '@/types/admin/channels/channelInfo'
+
+export const dynamic = 'force-dynamic'
+
+type ApiProxyBackendChannelsSearchResponse = ApiProxyBackendResp<{
+  channels: ChannelInfo[]
+  total: number
+}>
+
+export type ChannelQueryParams = {
+  page: number
+  perPage: number
+}
+
+export type GetChannelsResponse = ApiResp<{
+  channels: ChannelInfo[]
+  total: number
+}>
+
+function validateParams(queryParams: ChannelQueryParams): string | null {
+  if (queryParams.page < 1) {
+    return 'Page number must be greater than 0'
+  }
+  if (queryParams.perPage < 1 || queryParams.perPage > 100) {
+    return 'Per page must be between 1 and 100'
+  }
+  return null
+}
+
+async function fetchChannels(
+  queryParams: ChannelQueryParams
+): Promise<{ channels: ChannelInfo[]; total: number }> {
+  try {
+    const url = new URL(
+      `/api/channels/search`,
+      global.AppConfig?.backend.aiproxyInternal || global.AppConfig?.backend.aiproxy
+    )
+    url.searchParams.append('p', queryParams.page.toString())
+    url.searchParams.append('per_page', queryParams.perPage.toString())
+    const token = global.AppConfig?.auth.aiProxyBackendKey
+    const response = await fetch(url.toString(), {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `${token}`
+      },
+      cache: 'no-store'
+    })
+    if (!response.ok) {
+      throw new Error(`HTTP error, status code: ${response.status}`)
+    }
+    const result: ApiProxyBackendChannelsSearchResponse = await response.json()
+    if (!result.success) {
+      throw new Error(result.message || 'admin channels api:ai proxy backend error')
+    }
+    return {
+      channels: result?.data?.channels || [],
+      total: result?.data?.total || 0
+    }
+  } catch (error) {
+    console.error('admin channels api: fetch channels from ai proxy backend error:', error)
+    throw error
+  }
+}
+
+async function createChannel(channelData: CreateChannelRequest): Promise<void> {
+  try {
+    const url = new URL(
+      `/api/channel/`,
+      global.AppConfig?.backend.aiproxyInternal || global.AppConfig?.backend.aiproxy
+    )
+    const token = global.AppConfig?.auth.aiProxyBackendKey
+    const response = await fetch(url.toString(), {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `${token}`
+      },
+      body: JSON.stringify(channelData),
+      cache: 'no-store'
+    })
+
+    if (!response.ok) {
+      throw new Error(`HTTP error, status code: ${response.status}`)
+    }
+
+    const result: ApiProxyBackendResp = await response.json()
+    if (!result.success) {
+      throw new Error(result.message || 'Failed to create channel')
+    }
+  } catch (error) {
+    console.error('admin channels api: create channel error:', error)
+    throw error
+  }
+}
+
+// get channels
+export async function GET(request: NextRequest): Promise<NextResponse<GetChannelsResponse>> {
+  try {
+    const namespace = await parseJwtToken(request.headers)
+    await isAdmin(namespace)
+    const searchParams = request.nextUrl.searchParams
+
+    const queryParams: ChannelQueryParams = {
+      page: parseInt(searchParams.get('page') || '1', 10),
+      perPage: parseInt(searchParams.get('perPage') || '10', 10)
+    }
+
+    const validationError = validateParams(queryParams)
+    if (validationError) {
+      return NextResponse.json(
+        {
+          code: 400,
+          message: validationError,
+          error: validationError
+        },
+        { status: 400 }
+      )
+    }
+
+    const { channels, total } = await fetchChannels(queryParams)
+    return NextResponse.json({
+      code: 200,
+      data: {
+        channels: channels,
+        total: total
+      }
+    } satisfies GetChannelsResponse)
+  } catch (error) {
+    console.error('admin channels api: get channels error:', error)
+    return NextResponse.json(
+      {
+        code: 500,
+        message: error instanceof Error ? error.message : 'server error',
+        error: error instanceof Error ? error.message : 'server error'
+      } satisfies GetChannelsResponse,
+      { status: 500 }
+    )
+  }
+}
+
+// create channel
+export async function POST(request: NextRequest): Promise<NextResponse<ApiResp>> {
+  try {
+    const namespace = await parseJwtToken(request.headers)
+    await isAdmin(namespace)
+
+    const channelData: CreateChannelRequest = await request.json()
+    await createChannel(channelData)
+
+    return NextResponse.json({
+      code: 200,
+      message: 'Channel created successfully'
+    } satisfies ApiResp)
+  } catch (error) {
+    console.error('admin channels api: create channel error:', error)
+    return NextResponse.json(
+      {
+        code: 500,
+        message: error instanceof Error ? error.message : 'server error',
+        error: error instanceof Error ? error.message : 'server error'
+      } satisfies ApiResp,
+      { status: 500 }
+    )
+  }
+}
diff --git a/frontend/providers/aiproxy/app/api/admin/channel/type-name/route.ts b/frontend/providers/aiproxy/app/api/admin/channel/type-name/route.ts
new file mode 100644
index 000000000000..605ec2fb285d
--- /dev/null
+++ b/frontend/providers/aiproxy/app/api/admin/channel/type-name/route.ts
@@ -0,0 +1,69 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { ChannelTypeMapName } from '@/types/admin/channels/channelInfo'
+import { parseJwtToken } from '@/utils/backend/auth'
+import { ApiProxyBackendResp, ApiResp } from '@/types/api'
+import { isAdmin } from '@/utils/backend/isAdmin'
+
+export const dynamic = 'force-dynamic'
+
+type ApiProxyBackendChannelTypeMapNameResponse = ApiProxyBackendResp<ChannelTypeMapName>
+
+export type GetChannelTypeNamesResponse = ApiResp<ChannelTypeMapName>
+
+async function fetchChannelTypeNames(): Promise<ChannelTypeMapName | undefined> {
+  try {
+    const url = new URL(
+      `/api/channels/type_names`,
+      global.AppConfig?.backend.aiproxyInternal || global.AppConfig?.backend.aiproxy
+    )
+    const token = global.AppConfig?.auth.aiProxyBackendKey
+    const response = await fetch(url.toString(), {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `${token}`
+      },
+      cache: 'no-store'
+    })
+    if (!response.ok) {
+      throw new Error(`HTTP error, status code: ${response.status}`)
+    }
+    const result: ApiProxyBackendChannelTypeMapNameResponse = await response.json()
+    if (!result.success) {
+      throw new Error(result.message || 'admin channels api:ai proxy backend error')
+    }
+    return result.data
+  } catch (error) {
+    console.error(
+      'admin channels api: fetch channel type names from ai proxy backend error:',
+      error
+    )
+    throw error
+  }
+}
+
+export async function GET(
+  request: NextRequest
+): Promise<NextResponse<GetChannelTypeNamesResponse>> {
+  try {
+    const namespace = await parseJwtToken(request.headers)
+    await isAdmin(namespace)
+
+    const channelTypeNames = await fetchChannelTypeNames()
+
+    return NextResponse.json({
+      code: 200,
+      data: channelTypeNames
+    } satisfies GetChannelTypeNamesResponse)
+  } catch (error) {
+    console.error('admin channels api: get channel type names error:', error)
+    return NextResponse.json(
+      {
+        code: 500,
+        message: error instanceof Error ? error.message : 'server error',
+        error: error instanceof Error ? error.message : 'server error'
+      } satisfies GetChannelTypeNamesResponse,
+      { status: 500 }
+    )
+  }
+}
diff --git a/frontend/providers/aiproxy/app/api/admin/channel/upload/route.ts b/frontend/providers/aiproxy/app/api/admin/channel/upload/route.ts
new file mode 100644
index 000000000000..6c2a7e0153dd
--- /dev/null
+++ b/frontend/providers/aiproxy/app/api/admin/channel/upload/route.ts
@@ -0,0 +1,89 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { parseJwtToken } from '@/utils/backend/auth'
+import { ApiProxyBackendResp, ApiResp } from '@/types/api'
+import { isAdmin } from '@/utils/backend/isAdmin'
+import { CreateChannelRequest } from '@/types/admin/channels/channelInfo'
+
+export const dynamic = 'force-dynamic'
+
+// 解析文件内容
+async function parseFormData(req: NextRequest): Promise<CreateChannelRequest[]> {
+  try {
+    const formData = await req.formData()
+    const file = formData.get('file')
+
+    if (!file || !(file instanceof File)) {
+      throw new Error('No file uploaded')
+    }
+
+    // 读取文件内容
+    const fileContent = await file.text()
+    const channelData = JSON.parse(fileContent)
+
+    if (!Array.isArray(channelData)) {
+      throw new Error('Invalid file format: expected array of channel data')
+    }
+
+    return channelData
+  } catch (error) {
+    throw error
+  }
+}
+
+// 创建通道
+async function createChannels(channelData: CreateChannelRequest[]): Promise<void> {
+  const url = new URL(
+    '/api/channels/',
+    global.AppConfig?.backend.aiproxyInternal || global.AppConfig?.backend.aiproxy
+  )
+  const token = global.AppConfig?.auth.aiProxyBackendKey
+
+  const response = await fetch(url.toString(), {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `${token}`
+    },
+    body: JSON.stringify(channelData),
+    cache: 'no-store'
+  })
+
+  if (!response.ok) {
+    throw new Error(`HTTP error, status code: ${response.status}`)
+  }
+
+  const result: ApiProxyBackendResp = await response.json()
+  if (!result.success) {
+    throw new Error(result.message || 'Failed to create channels')
+  }
+}
+
+// 处理上传请求
+export async function POST(request: NextRequest): Promise<NextResponse<ApiResp>> {
+  try {
+    // 验证管理员权限
+    const namespace = await parseJwtToken(request.headers)
+    await isAdmin(namespace)
+
+    // 解析上传的文件
+    const channelData = await parseFormData(request)
+
+    // 创建通道
+    await createChannels(channelData)
+
+    return NextResponse.json({
+      code: 200,
+      message: 'Channels created successfully'
+    } satisfies ApiResp)
+  } catch (error) {
+    console.error('admin channels api: create channels error:', error)
+    return NextResponse.json(
+      {
+        code: 500,
+        message: error instanceof Error ? error.message : 'server error',
+        error: error instanceof Error ? error.message : 'server error'
+      } satisfies ApiResp,
+      { status: 500 }
+    )
+  }
+}
diff --git a/frontend/providers/aiproxy/app/api/admin/group/[id]/qpm/route.ts b/frontend/providers/aiproxy/app/api/admin/group/[id]/qpm/route.ts
new file mode 100644
index 000000000000..f5c3ce62e716
--- /dev/null
+++ b/frontend/providers/aiproxy/app/api/admin/group/[id]/qpm/route.ts
@@ -0,0 +1,78 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { parseJwtToken } from '@/utils/backend/auth'
+import { ApiProxyBackendResp, ApiResp } from '@/types/api'
+import { isAdmin } from '@/utils/backend/isAdmin'
+
+export const dynamic = 'force-dynamic'
+
+async function updateGroupQpm(qpm: number, id: string): Promise<void> {
+  try {
+    const url = new URL(
+      `/api/group/${id}/qpm`,
+      global.AppConfig?.backend.aiproxyInternal || global.AppConfig?.backend.aiproxy
+    )
+
+    const token = global.AppConfig?.auth.aiProxyBackendKey
+    const response = await fetch(url.toString(), {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `${token}`
+      },
+      body: JSON.stringify({ qpm: qpm }),
+      cache: 'no-store'
+    })
+
+    if (!response.ok) {
+      throw new Error(`HTTP error, status code: ${response.status}`)
+    }
+
+    const result: ApiProxyBackendResp = await response.json()
+    if (!result.success) {
+      throw new Error(result.message || 'Failed to update group qpm')
+    }
+  } catch (error) {
+    console.error('admin groups api: update group qpm error:## ', error)
+    throw error
+  }
+}
+
+// update group qpm
+export async function POST(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+): Promise<NextResponse<ApiResp>> {
+  try {
+    const namespace = await parseJwtToken(request.headers)
+    await isAdmin(namespace)
+
+    if (!params.id) {
+      return NextResponse.json(
+        {
+          code: 400,
+          message: 'Group id is required',
+          error: 'Bad Request'
+        },
+        { status: 400 }
+      )
+    }
+
+    const { qpm }: { qpm: number } = await request.json()
+    await updateGroupQpm(qpm, params.id)
+
+    return NextResponse.json({
+      code: 200,
+      message: 'Group qpm updated successfully'
+    } satisfies ApiResp)
+  } catch (error) {
+    console.error('admin groups api: update group qpm error:## ', error)
+    return NextResponse.json(
+      {
+        code: 500,
+        message: error instanceof Error ? error.message : 'server error',
+        error: error instanceof Error ? error.message : 'server error'
+      } satisfies ApiResp,
+      { status: 500 }
+    )
+  }
+}
diff --git a/frontend/providers/aiproxy/app/api/delete-key/[id]/route.ts b/frontend/providers/aiproxy/app/api/admin/group/[id]/route.ts
similarity index 61%
rename from frontend/providers/aiproxy/app/api/delete-key/[id]/route.ts
rename to frontend/providers/aiproxy/app/api/admin/group/[id]/route.ts
index 26ed34f6ff20..d197311e8954 100644
--- a/frontend/providers/aiproxy/app/api/delete-key/[id]/route.ts
+++ b/frontend/providers/aiproxy/app/api/admin/group/[id]/route.ts
@@ -1,18 +1,16 @@
+import { ApiProxyBackendResp, ApiResp } from '@/types/api'
+import { parseJwtToken } from '@/utils/backend/auth'
+import { isAdmin } from '@/utils/backend/isAdmin'
 import { NextRequest, NextResponse } from 'next/server'
-import { parseJwtToken } from '@/utils/auth'
 
-export const dynamic = 'force-dynamic'
-interface DeleteTokenResponse {
-  message: string
-  success: boolean
-}
-
-async function deleteToken(group: string, id: string): Promise<void> {
+// delete
+async function deleteGroup(id: string): Promise<void> {
   try {
     const url = new URL(
-      `/api/token/${group}/${id}`,
+      `/api/group/${id}`,
       global.AppConfig?.backend.aiproxyInternal || global.AppConfig?.backend.aiproxy
     )
+
     const token = global.AppConfig?.auth.aiProxyBackendKey
 
     const response = await fetch(url.toString(), {
@@ -28,12 +26,13 @@ async function deleteToken(group: string, id: string): Promise<void> {
       throw new Error(`HTTP error! status: ${response.status}`)
     }
 
-    const result: DeleteTokenResponse = await response.json()
+    const result: ApiProxyBackendResp = await response.json()
+
     if (!result.success) {
-      throw new Error(result.message || 'Failed to delete token')
+      throw new Error(result.message || 'API request failed')
     }
   } catch (error) {
-    console.error('Error deleting token:', error)
+    console.error('Error deleting group:', error)
     throw error
   }
 }
@@ -41,32 +40,30 @@ async function deleteToken(group: string, id: string): Promise<void> {
 export async function DELETE(
   request: NextRequest,
   { params }: { params: { id: string } }
-): Promise<NextResponse> {
+): Promise<NextResponse<ApiResp>> {
   try {
-    // 验证用户权限
-    const userGroup = await parseJwtToken(request.headers)
+    const namespace = await parseJwtToken(request.headers)
+    await isAdmin(namespace)
 
-    // 验证 ID 参数
     if (!params.id) {
       return NextResponse.json(
         {
           code: 400,
-          message: 'Token ID is required',
+          message: 'Group id is required',
           error: 'Bad Request'
         },
         { status: 400 }
       )
     }
 
-    // 删除 Token
-    await deleteToken(userGroup, params.id)
+    await deleteGroup(params.id)
 
     return NextResponse.json({
       code: 200,
-      message: 'Token deleted successfully'
-    })
+      message: 'Group deleted successfully'
+    } satisfies ApiResp)
   } catch (error) {
-    console.error('Token deletion error:', error)
+    console.error('Groups search error:', error)
     return NextResponse.json(
       {
         code: 500,
diff --git a/frontend/providers/aiproxy/app/api/admin/group/[id]/status/route.ts b/frontend/providers/aiproxy/app/api/admin/group/[id]/status/route.ts
new file mode 100644
index 000000000000..1671e00afa82
--- /dev/null
+++ b/frontend/providers/aiproxy/app/api/admin/group/[id]/status/route.ts
@@ -0,0 +1,79 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { parseJwtToken } from '@/utils/backend/auth'
+import { ApiProxyBackendResp, ApiResp } from '@/types/api'
+import { isAdmin } from '@/utils/backend/isAdmin'
+import { GroupStatus } from '@/types/admin/group'
+
+export const dynamic = 'force-dynamic'
+
+async function updateGroup(status: GroupStatus, id: string): Promise<void> {
+  try {
+    const url = new URL(
+      `/api/group/${id}/status`,
+      global.AppConfig?.backend.aiproxyInternal || global.AppConfig?.backend.aiproxy
+    )
+
+    const token = global.AppConfig?.auth.aiProxyBackendKey
+    const response = await fetch(url.toString(), {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `${token}`
+      },
+      body: JSON.stringify({ status: status }),
+      cache: 'no-store'
+    })
+
+    if (!response.ok) {
+      throw new Error(`HTTP error, status code: ${response.status}`)
+    }
+
+    const result: ApiProxyBackendResp = await response.json()
+    if (!result.success) {
+      throw new Error(result.message || 'Failed to update group status')
+    }
+  } catch (error) {
+    console.error('admin groups api: update group status error:## ', error)
+    throw error
+  }
+}
+
+// update group status
+export async function POST(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+): Promise<NextResponse<ApiResp>> {
+  try {
+    const namespace = await parseJwtToken(request.headers)
+    await isAdmin(namespace)
+
+    if (!params.id) {
+      return NextResponse.json(
+        {
+          code: 400,
+          message: 'Group id is required',
+          error: 'Bad Request'
+        },
+        { status: 400 }
+      )
+    }
+
+    const { status }: { status: GroupStatus } = await request.json()
+    await updateGroup(status, params.id)
+
+    return NextResponse.json({
+      code: 200,
+      message: 'Group status updated successfully'
+    } satisfies ApiResp)
+  } catch (error) {
+    console.error('admin groups api: update group status error:## ', error)
+    return NextResponse.json(
+      {
+        code: 500,
+        message: error instanceof Error ? error.message : 'server error',
+        error: error instanceof Error ? error.message : 'server error'
+      } satisfies ApiResp,
+      { status: 500 }
+    )
+  }
+}
diff --git a/frontend/providers/aiproxy/app/api/admin/group/route.ts b/frontend/providers/aiproxy/app/api/admin/group/route.ts
new file mode 100644
index 000000000000..6f3586197a59
--- /dev/null
+++ b/frontend/providers/aiproxy/app/api/admin/group/route.ts
@@ -0,0 +1,125 @@
+import { ApiProxyBackendResp, ApiResp } from '@/types/api'
+import { parseJwtToken } from '@/utils/backend/auth'
+import { isAdmin } from '@/utils/backend/isAdmin'
+import { NextRequest, NextResponse } from 'next/server'
+import { GroupInfo } from '@/types/admin/group'
+
+export const dynamic = 'force-dynamic'
+
+export type ApiProxyBackendGroupSearchResponse = ApiProxyBackendResp<{
+  groups: GroupInfo[]
+  total: number
+}>
+
+export type GroupSearchResponse = ApiResp<{
+  groups: GroupInfo[]
+  total: number
+}>
+
+export interface GroupQueryParams {
+  keyword?: string
+  page: number
+  perPage: number
+}
+
+function validateParams(params: GroupQueryParams): string | null {
+  if (params.page < 1) {
+    return 'Page number must be greater than 0'
+  }
+  if (params.perPage < 1 || params.perPage > 100) {
+    return 'Per page must be between 1 and 100'
+  }
+  return null
+}
+
+async function fetchGroups(
+  params: GroupQueryParams
+): Promise<{ groups: GroupInfo[]; total: number }> {
+  try {
+    const url = new URL(
+      `/api/groups/search`,
+      global.AppConfig?.backend.aiproxyInternal || global.AppConfig?.backend.aiproxy
+    )
+
+    url.searchParams.append('p', params.page.toString())
+    url.searchParams.append('per_page', params.perPage.toString())
+
+    if (params.keyword) {
+      url.searchParams.append('keyword', params.keyword)
+    }
+
+    const token = global.AppConfig?.auth.aiProxyBackendKey
+
+    const response = await fetch(url.toString(), {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `${token}`
+      },
+      cache: 'no-store'
+    })
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    }
+
+    const result: ApiProxyBackendGroupSearchResponse = await response.json()
+    if (!result.success) {
+      throw new Error(result.message || 'API request failed')
+    }
+
+    return {
+      groups: result.data?.groups || [],
+      total: result.data?.total || 0
+    }
+  } catch (error) {
+    console.error('Error fetching groups:', error)
+    throw error
+  }
+}
+
+export async function GET(request: NextRequest): Promise<NextResponse<GroupSearchResponse>> {
+  try {
+    const namespace = await parseJwtToken(request.headers)
+    await isAdmin(namespace)
+    const searchParams = request.nextUrl.searchParams
+
+    const queryParams: GroupQueryParams = {
+      page: parseInt(searchParams.get('page') || '1', 10),
+      perPage: parseInt(searchParams.get('perPage') || '10', 10),
+      keyword: searchParams.get('keyword') || undefined
+    }
+
+    const validationError = validateParams(queryParams)
+    if (validationError) {
+      return NextResponse.json(
+        {
+          code: 400,
+          message: validationError,
+          error: validationError
+        },
+        { status: 400 }
+      )
+    }
+
+    const { groups, total } = await fetchGroups(queryParams)
+
+    return NextResponse.json({
+      code: 200,
+      data: {
+        groups,
+        total
+      }
+    } satisfies GroupSearchResponse)
+  } catch (error) {
+    console.error('Groups search error:', error)
+    return NextResponse.json(
+      {
+        code: 500,
+        message: error instanceof Error ? error.message : 'Internal server error',
+        error: error instanceof Error ? error.message : 'Internal server error'
+      },
+      { status: 500 }
+    )
+  }
+}
diff --git a/frontend/providers/aiproxy/app/api/get-logs/route.ts b/frontend/providers/aiproxy/app/api/admin/log/route.ts
similarity index 73%
rename from frontend/providers/aiproxy/app/api/get-logs/route.ts
rename to frontend/providers/aiproxy/app/api/admin/log/route.ts
index 5f9fd0a93be8..da52fe7275f6 100644
--- a/frontend/providers/aiproxy/app/api/get-logs/route.ts
+++ b/frontend/providers/aiproxy/app/api/admin/log/route.ts
@@ -1,28 +1,32 @@
-import { LogItem } from '@/types/log'
-import { parseJwtToken } from '@/utils/auth'
+import { ApiProxyBackendResp, ApiResp } from '@/types/api'
+import { GlobalLogItem } from '@/types/user/logs'
+import { parseJwtToken } from '@/utils/backend/auth'
+import { isAdmin } from '@/utils/backend/isAdmin'
 import { NextRequest, NextResponse } from 'next/server'
 
 export const dynamic = 'force-dynamic'
-export interface SearchResponse {
-  data: {
-    logs: LogItem[]
-    total: number
-  }
-  message: string
-  success: boolean
-}
+export type ApiProxyBackendGlobalLogSearchResponse = ApiProxyBackendResp<{
+  logs: GlobalLogItem[]
+  total: number
+}>
+
+export type GlobalLogSearchResponse = ApiResp<{
+  logs: GlobalLogItem[]
+  total: number
+}>
 
-export interface QueryParams {
+export interface GlobalLogQueryParams {
   token_name?: string
   model_name?: string
   code?: string
   start_timestamp?: string
   end_timestamp?: string
+  group_id?: string
   page: number
   perPage: number
 }
 
-function validateParams(params: QueryParams): string | null {
+function validateParams(params: GlobalLogQueryParams): string | null {
   if (params.page < 1) {
     return 'Page number must be greater than 0'
   }
@@ -38,12 +42,11 @@ function validateParams(params: QueryParams): string | null {
 }
 
 async function fetchLogs(
-  params: QueryParams,
-  group: string
-): Promise<{ logs: LogItem[]; total: number }> {
+  params: GlobalLogQueryParams
+): Promise<{ logs: GlobalLogItem[]; total: number }> {
   try {
     const url = new URL(
-      `/api/log/${group}/search`,
+      `/api/logs/search`,
       global.AppConfig?.backend.aiproxyInternal || global.AppConfig?.backend.aiproxy
     )
 
@@ -59,6 +62,9 @@ async function fetchLogs(
     if (params.code) {
       url.searchParams.append('code', params.code)
     }
+    if (params.group_id) {
+      url.searchParams.append('group_id', params.group_id)
+    }
     if (params.start_timestamp) {
       url.searchParams.append('start_timestamp', params.start_timestamp)
     }
@@ -81,14 +87,14 @@ async function fetchLogs(
       throw new Error(`HTTP error! status: ${response.status}`)
     }
 
-    const result: SearchResponse = await response.json()
+    const result: ApiProxyBackendGlobalLogSearchResponse = await response.json()
     if (!result.success) {
       throw new Error(result.message || 'API request failed')
     }
 
     return {
-      logs: result.data.logs,
-      total: result.data.total
+      logs: result.data?.logs || [],
+      total: result.data?.total || 0
     }
   } catch (error) {
     console.error('Error fetching logs:', error)
@@ -96,12 +102,13 @@ async function fetchLogs(
   }
 }
 
-export async function GET(request: NextRequest): Promise<NextResponse> {
+export async function GET(request: NextRequest): Promise<NextResponse<GlobalLogSearchResponse>> {
   try {
-    const group = await parseJwtToken(request.headers)
+    const namespace = await parseJwtToken(request.headers)
+    await isAdmin(namespace)
     const searchParams = request.nextUrl.searchParams
 
-    const queryParams: QueryParams = {
+    const queryParams: GlobalLogQueryParams = {
       page: parseInt(searchParams.get('page') || '1', 10),
       perPage: parseInt(searchParams.get('perPage') || '10', 10),
       token_name: searchParams.get('token_name') || undefined,
@@ -123,7 +130,7 @@ export async function GET(request: NextRequest): Promise<NextResponse> {
       )
     }
 
-    const { logs, total } = await fetchLogs(queryParams, group)
+    const { logs, total } = await fetchLogs(queryParams)
 
     return NextResponse.json({
       code: 200,
@@ -131,7 +138,7 @@ export async function GET(request: NextRequest): Promise<NextResponse> {
         logs,
         total
       }
-    })
+    } satisfies GlobalLogSearchResponse)
   } catch (error) {
     console.error('Logs search error:', error)
     return NextResponse.json(
diff --git a/frontend/providers/aiproxy/app/api/admin/option/batch/route.ts b/frontend/providers/aiproxy/app/api/admin/option/batch/route.ts
new file mode 100644
index 000000000000..70210e5402af
--- /dev/null
+++ b/frontend/providers/aiproxy/app/api/admin/option/batch/route.ts
@@ -0,0 +1,87 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { parseJwtToken } from '@/utils/backend/auth'
+import { ApiProxyBackendResp, ApiResp } from '@/types/api'
+import { isAdmin } from '@/utils/backend/isAdmin'
+import { BatchOptionData } from '@/types/admin/option'
+
+export const dynamic = 'force-dynamic'
+
+async function batchOption(batchOptionData: BatchOptionData): Promise<string> {
+  try {
+    const url = new URL(
+      `/api/option/batch`,
+      global.AppConfig?.backend.aiproxyInternal || global.AppConfig?.backend.aiproxy
+    )
+
+    const token = global.AppConfig?.auth.aiProxyBackendKey
+    const response = await fetch(url.toString(), {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `${token}`
+      },
+      body: JSON.stringify(batchOptionData),
+      cache: 'no-store'
+    })
+
+    if (!response.ok) {
+      throw new Error(`HTTP error, status code: ${response.status}`)
+    }
+
+    const result: ApiProxyBackendResp = await response.json()
+    if (!result.success) {
+      throw new Error(result.message || 'Failed to batch option')
+    }
+
+    return result.message
+  } catch (error) {
+    console.error('admin batch options api: update option error:', error)
+    throw error
+  }
+}
+
+function validateBatchOptionData(batchOptionData: BatchOptionData): boolean {
+  if (typeof batchOptionData.DefaultChannelModelMapping !== 'string') {
+    return false
+  }
+  if (typeof batchOptionData.DefaultChannelModels !== 'string') {
+    return false
+  }
+  return true
+}
+
+export async function PUT(request: NextRequest): Promise<NextResponse<ApiResp>> {
+  try {
+    const namespace = await parseJwtToken(request.headers)
+    await isAdmin(namespace)
+
+    const body = await request.json()
+    if (!validateBatchOptionData(body)) {
+      return NextResponse.json(
+        {
+          code: 400,
+          message: 'Invalid request body',
+          error: 'Invalid request body'
+        } satisfies ApiResp,
+        { status: 400 }
+      )
+    }
+
+    await batchOption(body)
+
+    return NextResponse.json({
+      code: 200,
+      message: 'Option batch updated successfully'
+    } satisfies ApiResp)
+  } catch (error) {
+    console.error('admin batch options api: put option error:', error)
+    return NextResponse.json(
+      {
+        code: 500,
+        message: error instanceof Error ? error.message : 'server error',
+        error: error instanceof Error ? error.message : 'server error'
+      } satisfies ApiResp,
+      { status: 500 }
+    )
+  }
+}
diff --git a/frontend/providers/aiproxy/app/api/admin/option/route.ts b/frontend/providers/aiproxy/app/api/admin/option/route.ts
new file mode 100644
index 000000000000..564ce5e72268
--- /dev/null
+++ b/frontend/providers/aiproxy/app/api/admin/option/route.ts
@@ -0,0 +1,149 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { OptionData } from '@/types/admin/option'
+import { parseJwtToken } from '@/utils/backend/auth'
+import { ApiProxyBackendResp, ApiResp } from '@/types/api'
+import { isAdmin } from '@/utils/backend/isAdmin'
+
+export const dynamic = 'force-dynamic'
+
+type ApiProxyBackendOptionResponse = ApiProxyBackendResp<OptionData>
+
+export type GetOptionResponse = ApiResp<OptionData>
+
+async function fetchOptions(): Promise<OptionData | undefined> {
+  try {
+    const url = new URL(
+      `/api/option/`,
+      global.AppConfig?.backend.aiproxyInternal || global.AppConfig?.backend.aiproxy
+    )
+    const token = global.AppConfig?.auth.aiProxyBackendKey
+    const response = await fetch(url.toString(), {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `${token}`
+      },
+      cache: 'no-store'
+    })
+
+    if (!response.ok) {
+      throw new Error(`HTTP error, status code: ${response.status}`)
+    }
+
+    const result: ApiProxyBackendOptionResponse = await response.json()
+
+    if (!result.success) {
+      throw new Error(result.message || 'Failed to fetch options')
+    }
+
+    return result.data
+  } catch (error) {
+    console.error('admin options api: fetch options error:', error)
+    throw error
+  }
+}
+
+export async function GET(request: NextRequest): Promise<NextResponse<GetOptionResponse>> {
+  try {
+    const namespace = await parseJwtToken(request.headers)
+    await isAdmin(namespace)
+
+    const optionData = await fetchOptions()
+
+    return NextResponse.json({
+      code: 200,
+      data: optionData
+    } satisfies GetOptionResponse)
+  } catch (error) {
+    console.error('admin options api: get options error:', error)
+    return NextResponse.json(
+      {
+        code: 500,
+        message: error instanceof Error ? error.message : 'server error',
+        error: error instanceof Error ? error.message : 'server error'
+      } satisfies GetOptionResponse,
+      { status: 500 }
+    )
+  }
+}
+
+async function updateOption(key: string, value: string): Promise<string> {
+  try {
+    const url = new URL(
+      `/api/option`,
+      global.AppConfig?.backend.aiproxyInternal || global.AppConfig?.backend.aiproxy
+    )
+
+    const token = global.AppConfig?.auth.aiProxyBackendKey
+    const response = await fetch(url.toString(), {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `${token}`
+      },
+      body: JSON.stringify({ key, value }),
+      cache: 'no-store'
+    })
+
+    if (!response.ok) {
+      throw new Error(`HTTP error, status code: ${response.status}`)
+    }
+
+    const result: ApiProxyBackendOptionResponse = await response.json()
+    if (!result.success) {
+      throw new Error(result.message || 'Failed to update option')
+    }
+
+    return result.message
+  } catch (error) {
+    console.error('admin options api: update option error:', error)
+    throw error
+  }
+}
+
+export async function PUT(request: NextRequest): Promise<NextResponse<GetOptionResponse>> {
+  try {
+    const namespace = await parseJwtToken(request.headers)
+    await isAdmin(namespace)
+
+    const body = await request.json()
+    if (!body.key || typeof body.key !== 'string') {
+      return NextResponse.json(
+        {
+          code: 400,
+          message: 'Invalid request body: key is required and must be a string',
+          error: 'Invalid request parameters'
+        } satisfies GetOptionResponse,
+        { status: 400 }
+      )
+    }
+
+    if (!body.value || typeof body.value !== 'string') {
+      return NextResponse.json(
+        {
+          code: 400,
+          message: 'Invalid request body: value is required and must be a string',
+          error: 'Invalid request parameters'
+        } satisfies GetOptionResponse,
+        { status: 400 }
+      )
+    }
+
+    await updateOption(body.key, body.value)
+
+    return NextResponse.json({
+      code: 200,
+      message: 'Option updated successfully'
+    } satisfies GetOptionResponse)
+  } catch (error) {
+    console.error('admin options api: put option error:', error)
+    return NextResponse.json(
+      {
+        code: 500,
+        message: error instanceof Error ? error.message : 'server error',
+        error: error instanceof Error ? error.message : 'server error'
+      } satisfies GetOptionResponse,
+      { status: 500 }
+    )
+  }
+}
diff --git a/frontend/providers/aiproxy/app/api/admin/option/upload/route.ts b/frontend/providers/aiproxy/app/api/admin/option/upload/route.ts
new file mode 100644
index 000000000000..799fdc1d8dc1
--- /dev/null
+++ b/frontend/providers/aiproxy/app/api/admin/option/upload/route.ts
@@ -0,0 +1,89 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { parseJwtToken } from '@/utils/backend/auth'
+import { ApiProxyBackendResp, ApiResp } from '@/types/api'
+import { isAdmin } from '@/utils/backend/isAdmin'
+import { OptionData } from '@/types/admin/option'
+
+export const dynamic = 'force-dynamic'
+
+async function parseFormData(req: NextRequest): Promise<OptionData> {
+  try {
+    const formData = await req.formData()
+    const file = formData.get('file')
+
+    if (!file || !(file instanceof File)) {
+      throw new Error('No file uploaded')
+    }
+
+    const fileContent = await file.text()
+    const optionData = JSON.parse(fileContent)
+
+    if (typeof optionData !== 'object' || optionData === null) {
+      throw new Error('Invalid file format: expected option data object')
+    }
+
+    return optionData
+  } catch (error) {
+    throw error
+  }
+}
+
+async function batchOption(batchOptionData: OptionData): Promise<string> {
+  try {
+    const url = new URL(
+      `/api/option/batch`,
+      global.AppConfig?.backend.aiproxyInternal || global.AppConfig?.backend.aiproxy
+    )
+
+    const token = global.AppConfig?.auth.aiProxyBackendKey
+    const response = await fetch(url.toString(), {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `${token}`
+      },
+      body: JSON.stringify(batchOptionData),
+      cache: 'no-store'
+    })
+
+    if (!response.ok) {
+      throw new Error(`HTTP error, status code: ${response.status}`)
+    }
+
+    const result: ApiProxyBackendResp = await response.json()
+    if (!result.success) {
+      throw new Error(result.message || 'Failed to batch option')
+    }
+
+    return result.message
+  } catch (error) {
+    console.error('admin batch options upload api: update option error:', error)
+    throw error
+  }
+}
+
+export async function POST(request: NextRequest): Promise<NextResponse<ApiResp>> {
+  try {
+    const namespace = await parseJwtToken(request.headers)
+    await isAdmin(namespace)
+
+    const optionData = await parseFormData(request)
+
+    await batchOption(optionData)
+
+    return NextResponse.json({
+      code: 200,
+      message: 'Option batch uploaded successfully'
+    } satisfies ApiResp)
+  } catch (error) {
+    console.error('admin batch options upload api: put option error:', error)
+    return NextResponse.json(
+      {
+        code: 500,
+        message: error instanceof Error ? error.message : 'server error',
+        error: error instanceof Error ? error.message : 'server error'
+      } satisfies ApiResp,
+      { status: 500 }
+    )
+  }
+}
diff --git a/frontend/providers/aiproxy/app/api/create-key/route.ts b/frontend/providers/aiproxy/app/api/create-key/route.ts
deleted file mode 100644
index 89161f4457e2..000000000000
--- a/frontend/providers/aiproxy/app/api/create-key/route.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server'
-import { parseJwtToken } from '@/utils/auth'
-
-export const dynamic = 'force-dynamic'
-
-interface CreateTokenRequest {
-  name: string
-}
-
-interface TokenInfo {
-  id: number
-  group: string
-  key: string
-  status: number
-  name: string
-  quota: number
-  used_amount: number
-  request_count: number
-  models: string[] | null
-  subnet: string
-  created_at: number
-  accessed_at: number
-  expired_at: number
-}
-
-interface CreateTokenResponse {
-  data: TokenInfo
-  message: string
-  success: boolean
-}
-
-function validateCreateParams(body: CreateTokenRequest): string | null {
-  if (!body.name) {
-    return 'Name parameter is required'
-  }
-  return null
-}
-
-async function createToken(name: string, group: string): Promise<TokenInfo> {
-  try {
-    const url = new URL(
-      `/api/token/${group}?auto_create_group=true`,
-      global.AppConfig?.backend.aiproxyInternal || global.AppConfig?.backend.aiproxy
-    )
-    const token = global.AppConfig?.auth.aiProxyBackendKey
-    const response = await fetch(url.toString(), {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        Authorization: `${token}`
-      },
-      cache: 'no-store',
-      body: JSON.stringify({
-        name
-      })
-    })
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`)
-    }
-
-    const result: CreateTokenResponse = await response.json()
-    if (!result.success) {
-      throw new Error(result.message || 'Failed to create token')
-    }
-
-    return result.data
-  } catch (error) {
-    console.error('Error creating token:', error)
-    throw error
-  }
-}
-
-export async function POST(request: NextRequest): Promise<NextResponse> {
-  try {
-    const group = await parseJwtToken(request.headers)
-    const body: CreateTokenRequest = await request.json()
-
-    const validationError = validateCreateParams(body)
-    if (validationError) {
-      return NextResponse.json(
-        {
-          code: 400,
-          message: validationError,
-          error: validationError
-        },
-        { status: 400 }
-      )
-    }
-
-    // 创建Token
-    const newToken = await createToken(body.name, group)
-
-    return NextResponse.json({
-      code: 200,
-      data: newToken,
-      message: 'Token created successfully'
-    })
-  } catch (error) {
-    console.error('Token creation error:', error)
-    return NextResponse.json(
-      {
-        code: 500,
-        message: error instanceof Error ? error.message : 'Internal server error',
-        error: error instanceof Error ? error.message : 'Internal server error'
-      },
-      { status: 500 }
-    )
-  }
-}
diff --git a/frontend/providers/aiproxy/app/api/get-keys/route.ts b/frontend/providers/aiproxy/app/api/get-keys/route.ts
deleted file mode 100644
index 13d3ff9c1363..000000000000
--- a/frontend/providers/aiproxy/app/api/get-keys/route.ts
+++ /dev/null
@@ -1,121 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server'
-import { TokenInfo } from '@/types/getKeys'
-
-import { parseJwtToken } from '@/utils/auth'
-
-export const dynamic = 'force-dynamic'
-export interface KeysSearchResponse {
-  data: {
-    tokens: TokenInfo[]
-    total: number
-  }
-  message: string
-  success: boolean
-}
-
-export interface QueryParams {
-  page: number
-  perPage: number
-}
-
-function validateParams(page: number, perPage: number): string | null {
-  if (page < 1) {
-    return 'Page number must be greater than 0'
-  }
-
-  if (perPage < 1 || perPage > 100) {
-    return 'Per page must be between 1 and 100'
-  }
-
-  return null
-}
-
-async function fetchTokens(
-  page: number,
-  perPage: number,
-  group: string
-): Promise<{ tokens: TokenInfo[]; total: number }> {
-  try {
-    const url = new URL(
-      `/api/token/${group}/search`,
-      global.AppConfig?.backend.aiproxyInternal || global.AppConfig?.backend.aiproxy
-    )
-    url.searchParams.append('p', page.toString())
-    url.searchParams.append('per_page', perPage.toString())
-
-    const token = global.AppConfig?.auth.aiProxyBackendKey
-
-    const response = await fetch(url.toString(), {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json',
-        Authorization: `${token}`
-      },
-      cache: 'no-store'
-    })
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`)
-    }
-
-    const result: KeysSearchResponse = await response.json()
-
-    if (!result.success) {
-      throw new Error(result.message || 'API request failed')
-    }
-
-    return {
-      tokens: result.data.tokens.sort((a, b) => a.name.localeCompare(b.name)),
-      total: result.data.total
-    }
-  } catch (error) {
-    console.error('Error fetching tokens:', error)
-    return {
-      tokens: [],
-      total: 0
-    }
-  }
-}
-
-export async function GET(request: NextRequest): Promise<NextResponse> {
-  try {
-    const group = await parseJwtToken(request.headers)
-
-    const searchParams = request.nextUrl.searchParams
-    const page = parseInt(searchParams.get('page') || '1', 10)
-    const perPage = parseInt(searchParams.get('perPage') || '10', 10)
-
-    const validationError = validateParams(page, perPage)
-    if (validationError) {
-      return NextResponse.json(
-        {
-          code: 400,
-          message: validationError,
-          error: validationError
-        },
-        { status: 400 }
-      )
-    }
-
-    const { tokens, total } = await fetchTokens(page, perPage, group)
-
-    return NextResponse.json({
-      code: 200,
-      data: {
-        tokens,
-        total
-      }
-    })
-  } catch (error) {
-    console.error('Token search error:', error)
-
-    return NextResponse.json(
-      {
-        code: 500,
-        message: error instanceof Error ? error.message : 'Internal server error',
-        error: error instanceof Error ? error.message : 'Internal server error'
-      },
-      { status: 500 }
-    )
-  }
-}
diff --git a/frontend/providers/aiproxy/app/api/get-mode-price/route.ts b/frontend/providers/aiproxy/app/api/get-mode-price/route.ts
deleted file mode 100644
index f9b6e0680e55..000000000000
--- a/frontend/providers/aiproxy/app/api/get-mode-price/route.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server'
-import { parseJwtToken } from '@/utils/auth'
-import { ModelPrice } from '@/types/backend'
-
-export const dynamic = 'force-dynamic'
-
-interface PriceResponse {
-  data: Record<
-    string,
-    {
-      prompt: number
-      completion: number
-    }
-  >
-  message: string
-  success: boolean
-}
-
-function transformToList(
-  data: Record<string, { prompt: number; completion: number }>
-): ModelPrice[] {
-  return Object.entries(data).map(([name, prices]) => ({
-    name,
-    prompt: prices.prompt,
-    completion: prices.completion
-  }))
-}
-
-async function fetchModelPrices(): Promise<ModelPrice[]> {
-  try {
-    const url = new URL(
-      `/api/models/enabled/price`,
-      global.AppConfig?.backend.aiproxyInternal || global.AppConfig?.backend.aiproxy
-    )
-    const token = global.AppConfig?.auth.aiProxyBackendKey
-
-    const response = await fetch(url.toString(), {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json',
-        Authorization: `${token}`
-      },
-      cache: 'no-store'
-    })
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`)
-    }
-
-    const result: PriceResponse = await response.json()
-
-    if (!result.success) {
-      throw new Error(result.message || 'get model prices API request failed')
-    }
-
-    return transformToList(result.data)
-  } catch (error) {
-    console.error('Error fetching model prices:', error)
-    return Promise.reject(error)
-  }
-}
-
-export async function GET(request: NextRequest): Promise<NextResponse> {
-  try {
-    await parseJwtToken(request.headers)
-    const modelPrices = await fetchModelPrices()
-
-    return NextResponse.json({
-      code: 200,
-      data: modelPrices
-    })
-  } catch (error) {
-    console.error('get model prices error:', error)
-    return NextResponse.json(
-      {
-        code: 500,
-        message: error instanceof Error ? error.message : 'Internal server error',
-        error: error instanceof Error ? error.message : 'Internal server error'
-      },
-      { status: 500 }
-    )
-  }
-}
diff --git a/frontend/providers/aiproxy/app/api/get-models/route.ts b/frontend/providers/aiproxy/app/api/get-models/route.ts
deleted file mode 100644
index 7f2d205fb489..000000000000
--- a/frontend/providers/aiproxy/app/api/get-models/route.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server'
-
-import { parseJwtToken } from '@/utils/auth'
-
-export const dynamic = 'force-dynamic'
-
-interface SearchResponse {
-  data: string[]
-  message: string
-  success: boolean
-}
-
-async function fetchModels(): Promise<string[]> {
-  try {
-    const url = new URL(
-      `/api/models/enabled`,
-      global.AppConfig?.backend.aiproxyInternal || global.AppConfig?.backend.aiproxy
-    )
-    const token = global.AppConfig?.auth.aiProxyBackendKey
-
-    const response = await fetch(url.toString(), {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json',
-        Authorization: `${token}`
-      },
-      cache: 'no-store'
-    })
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`)
-    }
-
-    const result: SearchResponse = await response.json()
-
-    if (!result.success) {
-      throw new Error(result.message || 'get models API request failed')
-    }
-
-    return result.data.sort((a, b) => a.localeCompare(b))
-  } catch (error) {
-    console.error('Error fetching models:', error)
-    return Promise.reject(error)
-  }
-}
-
-export async function GET(request: NextRequest): Promise<NextResponse> {
-  try {
-    await parseJwtToken(request.headers)
-
-    const models = await fetchModels()
-
-    return NextResponse.json({
-      code: 200,
-      data: models
-    })
-  } catch (error) {
-    console.error('get models error:', error)
-
-    return NextResponse.json(
-      {
-        code: 500,
-        message: error instanceof Error ? error.message : 'Internal server error',
-        error: error instanceof Error ? error.message : 'Internal server error'
-      },
-      { status: 500 }
-    )
-  }
-}
diff --git a/frontend/providers/aiproxy/app/api/init-app-config/route.ts b/frontend/providers/aiproxy/app/api/init-app-config/route.ts
index 359ad4d4ec33..705e9c9f9371 100644
--- a/frontend/providers/aiproxy/app/api/init-app-config/route.ts
+++ b/frontend/providers/aiproxy/app/api/init-app-config/route.ts
@@ -1,9 +1,13 @@
 import { NextResponse } from 'next/server'
 
-import type { AppConfigType } from '@/types/appConfig'
+import type { AppConfigType } from '@/types/app-config'
 
 export const dynamic = 'force-dynamic'
 
+function getAdminNamespaces(): string[] {
+  return process.env.ADMIN_NAMESPACES?.split(',') || []
+}
+
 function getAppConfig(appConfig: AppConfigType): AppConfigType {
   if (process.env.APP_TOKEN_JWT_KEY) {
     appConfig.auth.appTokenJwtKey = process.env.APP_TOKEN_JWT_KEY
@@ -17,30 +21,58 @@ function getAppConfig(appConfig: AppConfigType): AppConfigType {
   if (process.env.AI_PROXY_BACKEND_INTERNAL) {
     appConfig.backend.aiproxyInternal = process.env.AI_PROXY_BACKEND_INTERNAL
   }
+  if (process.env.ADMIN_NAMESPACES) {
+    appConfig.adminNameSpace = getAdminNamespaces()
+  }
   if (process.env.CURRENCY_SYMBOL) {
     appConfig.currencySymbol = process.env.CURRENCY_SYMBOL as 'shellCoin' | 'cny' | 'usd'
   }
+  if (process.env.ACCOUNT_SERVER) {
+    appConfig.backend.accountServer = process.env.ACCOUNT_SERVER
+  }
+  if (process.env.ACCOUNT_SERVER_TOKEN_JWT_KEY) {
+    appConfig.auth.accountServerTokenJwtKey = process.env.ACCOUNT_SERVER_TOKEN_JWT_KEY
+  }
+  if (process.env.DOC_URL) {
+    appConfig.common.docUrl = process.env.DOC_URL
+  }
+  if (process.env.IS_INVITATION_ACTIVE) {
+    appConfig.common.isInvitationActive = process.env.IS_INVITATION_ACTIVE === 'true'
+  }
+  if (process.env.INVITATION_URL) {
+    appConfig.common.invitationUrl = process.env.INVITATION_URL
+  }
+
   return appConfig
 }
 
 function initAppConfig(): AppConfigType {
   // default config
   const DefaultAppConfig: AppConfigType = {
+    common: {
+      docUrl: '',
+      isInvitationActive: false,
+      invitationUrl: ''
+    },
     auth: {
       appTokenJwtKey: '',
-      aiProxyBackendKey: ''
+      aiProxyBackendKey: '',
+      accountServerTokenJwtKey: ''
     },
     backend: {
       aiproxy: '',
-      aiproxyInternal: ''
+      aiproxyInternal: '',
+      accountServer: ''
     },
+    adminNameSpace: [],
     currencySymbol: 'shellCoin'
   }
+
   if (!global.AppConfig) {
     try {
       global.AppConfig = getAppConfig(DefaultAppConfig)
     } catch (error) {
-      console.error('Config initialization error:', error)
+      console.error('init-app-config: Config initialization error:', error)
       global.AppConfig = DefaultAppConfig
     }
   }
@@ -57,7 +89,10 @@ export async function GET(): Promise<NextResponse> {
       message: 'Success',
       data: {
         aiproxyBackend: config.backend.aiproxy,
-        currencySymbol: config.currencySymbol
+        currencySymbol: config.currencySymbol,
+        docUrl: config.common.docUrl,
+        isInvitationActive: config.common.isInvitationActive,
+        invitationUrl: config.common.invitationUrl
       }
     })
   } catch (error) {
diff --git a/frontend/providers/aiproxy/app/api/models/builtin/channel/route.ts b/frontend/providers/aiproxy/app/api/models/builtin/channel/route.ts
new file mode 100644
index 000000000000..b425fe6b76b0
--- /dev/null
+++ b/frontend/providers/aiproxy/app/api/models/builtin/channel/route.ts
@@ -0,0 +1,64 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { parseJwtToken } from '@/utils/backend/auth'
+import { ApiProxyBackendResp, ApiResp } from '@/types/api'
+import { isAdmin } from '@/utils/backend/isAdmin'
+import { ChannelWithMode } from '@/types/models/model'
+
+export const dynamic = 'force-dynamic'
+
+type ApiProxyBackendAllChannelEnabledModeResponse = ApiProxyBackendResp<ChannelWithMode>
+export type GetAllChannelEnabledModelsResponse = ApiResp<ChannelWithMode>
+
+async function fetchAllChannelEnabledModels(): Promise<ChannelWithMode> {
+  try {
+    const url = new URL(
+      '/api/models/builtin/channel',
+      global.AppConfig?.backend.aiproxyInternal || global.AppConfig?.backend.aiproxy
+    )
+    const response = await fetch(url.toString(), {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `${global.AppConfig?.auth.aiProxyBackendKey}`
+      },
+      cache: 'no-store'
+    })
+    if (!response.ok) {
+      throw new Error(`HTTP error, status code: ${response.status}`)
+    }
+    const result: ApiProxyBackendAllChannelEnabledModeResponse = await response.json()
+
+    if (!result.success) {
+      throw new Error(result.message || 'builtin channel api: ai proxy backend error')
+    }
+
+    return result.data || {}
+  } catch (error) {
+    console.error('builtin channel api: fetch enabled models error:', error)
+    throw error
+  }
+}
+
+export async function GET(
+  request: NextRequest
+): Promise<NextResponse<GetAllChannelEnabledModelsResponse>> {
+  try {
+    const namespace = await parseJwtToken(request.headers)
+    await isAdmin(namespace)
+
+    return NextResponse.json({
+      code: 200,
+      data: await fetchAllChannelEnabledModels()
+    } satisfies GetAllChannelEnabledModelsResponse)
+  } catch (error) {
+    console.error('builtin channel api: get enabled models error:', error)
+    return NextResponse.json(
+      {
+        code: 500,
+        message: error instanceof Error ? error.message : 'server error',
+        error: error instanceof Error ? error.message : 'server error'
+      },
+      { status: 500 }
+    )
+  }
+}
diff --git a/frontend/providers/aiproxy/app/api/models/default/route.ts b/frontend/providers/aiproxy/app/api/models/default/route.ts
new file mode 100644
index 000000000000..02eccc49e7fe
--- /dev/null
+++ b/frontend/providers/aiproxy/app/api/models/default/route.ts
@@ -0,0 +1,68 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { parseJwtToken } from '@/utils/backend/auth'
+import { ApiProxyBackendResp, ApiResp } from '@/types/api'
+import { isAdmin } from '@/utils/backend/isAdmin'
+import { ChannelWithDefaultModelAndDefaultModeMapping } from '@/types/models/model'
+
+export const dynamic = 'force-dynamic'
+
+type ApiProxyBackendDefaultModelAndModeMappingResponse =
+  ApiProxyBackendResp<ChannelWithDefaultModelAndDefaultModeMapping>
+export type GetDefaultModelAndModeMappingResponse =
+  ApiResp<ChannelWithDefaultModelAndDefaultModeMapping>
+
+async function fetchDefaultModeAndModeMapping(): Promise<
+  ChannelWithDefaultModelAndDefaultModeMapping | undefined
+> {
+  try {
+    const url = new URL(
+      '/api/models/default',
+      global.AppConfig?.backend.aiproxyInternal || global.AppConfig?.backend.aiproxy
+    )
+    const response = await fetch(url.toString(), {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `${global.AppConfig?.auth.aiProxyBackendKey}`
+      },
+      cache: 'no-store'
+    })
+    if (!response.ok) {
+      throw new Error(`HTTP error, status code: ${response.status}`)
+    }
+    const result: ApiProxyBackendDefaultModelAndModeMappingResponse = await response.json()
+
+    if (!result.success) {
+      throw new Error(result.message || 'default enabled models api: ai proxy backend error')
+    }
+
+    return result?.data
+  } catch (error) {
+    console.error('default enabled models api: fetch enabled models error:', error)
+    throw error
+  }
+}
+
+export async function GET(
+  request: NextRequest
+): Promise<NextResponse<GetDefaultModelAndModeMappingResponse>> {
+  try {
+    const namespace = await parseJwtToken(request.headers)
+    await isAdmin(namespace)
+
+    return NextResponse.json({
+      code: 200,
+      data: await fetchDefaultModeAndModeMapping()
+    })
+  } catch (error) {
+    console.error('default enabled models api: get enabled models error:', error)
+    return NextResponse.json(
+      {
+        code: 500,
+        message: error instanceof Error ? error.message : 'server error',
+        error: error instanceof Error ? error.message : 'server error'
+      },
+      { status: 500 }
+    )
+  }
+}
diff --git a/frontend/providers/aiproxy/app/api/models/enabled/route.ts b/frontend/providers/aiproxy/app/api/models/enabled/route.ts
new file mode 100644
index 000000000000..e2a78a758642
--- /dev/null
+++ b/frontend/providers/aiproxy/app/api/models/enabled/route.ts
@@ -0,0 +1,62 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { parseJwtToken } from '@/utils/backend/auth'
+import { ApiProxyBackendResp, ApiResp } from '@/types/api'
+import { ModelConfig } from '@/types/models/model'
+
+type ApiProxyBackendEnabledModelsResponse = ApiProxyBackendResp<ModelConfig[]>
+export type GetEnabledModelsResponse = ApiResp<ModelConfig[]>
+
+export const dynamic = 'force-dynamic'
+
+async function fetchEnabledModels(namespace: string): Promise<ModelConfig[]> {
+  try {
+    const url = new URL(
+      `/api/dashboard/${namespace}/models`,
+      global.AppConfig?.backend.aiproxyInternal || global.AppConfig?.backend.aiproxy
+    )
+
+    const response = await fetch(url.toString(), {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `${global.AppConfig?.auth.aiProxyBackendKey}`
+      },
+      cache: 'no-store'
+    })
+
+    if (!response.ok) {
+      throw new Error(`HTTP error, status code: ${response.status}`)
+    }
+
+    const result: ApiProxyBackendEnabledModelsResponse = await response.json()
+    if (!result.success) {
+      throw new Error(result.message || 'enabled models api: ai proxy backend error')
+    }
+
+    return result.data || []
+  } catch (error) {
+    console.error('enabled models api: fetch enabled models error:', error)
+    throw error
+  }
+}
+
+export async function GET(request: NextRequest): Promise<NextResponse<GetEnabledModelsResponse>> {
+  try {
+    const group = await parseJwtToken(request.headers)
+
+    return NextResponse.json({
+      code: 200,
+      data: await fetchEnabledModels(group)
+    } satisfies GetEnabledModelsResponse)
+  } catch (error) {
+    console.error('enabled models api: get enabled models error:', error)
+    return NextResponse.json(
+      {
+        code: 500,
+        message: error instanceof Error ? error.message : 'server error',
+        error: error instanceof Error ? error.message : 'server error'
+      },
+      { status: 500 }
+    )
+  }
+}
diff --git a/frontend/providers/aiproxy/app/api/update-key/[id]/route.ts b/frontend/providers/aiproxy/app/api/update-key/[id]/route.ts
deleted file mode 100644
index c0665abd3ff2..000000000000
--- a/frontend/providers/aiproxy/app/api/update-key/[id]/route.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server'
-import { parseJwtToken } from '@/utils/auth'
-
-export const dynamic = 'force-dynamic'
-interface UpdateTokenResponse {
-  message: string
-  success: boolean
-}
-
-interface UpdateTokenBody {
-  status: number
-}
-
-async function updateToken(group: string, id: string, status: number): Promise<void> {
-  try {
-    if (status !== 1 && status !== 2) {
-      throw new Error('Invalid status')
-    }
-    const url = new URL(
-      `/api/token/${group}/${id}/status`,
-      global.AppConfig?.backend.aiproxyInternal || global.AppConfig?.backend.aiproxy
-    )
-    const token = global.AppConfig?.auth.aiProxyBackendKey
-
-    const response = await fetch(url.toString(), {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        Authorization: `${token}`
-      },
-      body: JSON.stringify({ status }),
-      cache: 'no-store'
-    })
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`)
-    }
-
-    const result: UpdateTokenResponse = await response.json()
-    if (!result.success) {
-      throw new Error(result.message || 'Failed to update token')
-    }
-  } catch (error) {
-    console.error('Error updating token:', error)
-    throw error
-  }
-}
-
-export async function POST(
-  request: NextRequest,
-  { params }: { params: { id: string } }
-): Promise<NextResponse> {
-  try {
-    // 验证用户权限
-    const userGroup = await parseJwtToken(request.headers)
-
-    // 验证 ID 参数
-    if (!params.id) {
-      return NextResponse.json(
-        {
-          code: 400,
-          message: 'Token ID is required',
-          error: 'Bad Request'
-        },
-        { status: 400 }
-      )
-    }
-
-    // 获取请求体
-    const body: UpdateTokenBody = await request.json()
-
-    // 验证状态参数
-    if (typeof body.status !== 'number') {
-      return NextResponse.json(
-        {
-          code: 400,
-          message: 'Status must be a number',
-          error: 'Bad Request'
-        },
-        { status: 400 }
-      )
-    }
-
-    // 更新 Token
-    await updateToken(userGroup, params.id, body.status)
-
-    return NextResponse.json({
-      code: 200,
-      message: 'Token updated successfully'
-    })
-  } catch (error) {
-    console.error('Token update error:', error)
-    return NextResponse.json(
-      {
-        code: 500,
-        message: error instanceof Error ? error.message : 'Internal server error',
-        error: error instanceof Error ? error.message : 'Internal server error'
-      },
-      { status: 500 }
-    )
-  }
-}
diff --git a/frontend/providers/aiproxy/app/api/user/dashboard/route.ts b/frontend/providers/aiproxy/app/api/user/dashboard/route.ts
new file mode 100644
index 000000000000..2fbbd104e036
--- /dev/null
+++ b/frontend/providers/aiproxy/app/api/user/dashboard/route.ts
@@ -0,0 +1,129 @@
+import { ApiProxyBackendResp, ApiResp } from '@/types/api'
+import { NextRequest, NextResponse } from 'next/server'
+import { parseJwtToken } from '@/utils/backend/auth'
+import { DashboardData } from '@/types/user/dashboard'
+import { DashboardResponse } from '@/types/user/dashboard'
+
+// 定义API响应数据结构
+export type ApiProxyBackendDashboardResponse = ApiProxyBackendResp<DashboardData>
+
+// 定义查询参数接口
+export interface DashboardQueryParams {
+  type: 'day' | 'week' | 'two_week' | 'month'
+  model?: string
+  token_name?: string
+}
+
+// 验证查询参数
+function validateParams(params: DashboardQueryParams): string | null {
+  if (!params.type) {
+    return 'Type parameter is required'
+  }
+  if (
+    params.type !== 'day' &&
+    params.type !== 'week' &&
+    params.type !== 'two_week' &&
+    params.type !== 'month'
+  ) {
+    return 'Invalid type parameter. Must be one of: day, week, two_week, month'
+  }
+  return null
+}
+
+// 获取仪表盘数据
+async function fetchDashboardData(
+  params: DashboardQueryParams,
+  group: string
+): Promise<DashboardData> {
+  try {
+    const url = new URL(
+      `/api/dashboard/${group}`,
+      global.AppConfig?.backend.aiproxyInternal || global.AppConfig?.backend.aiproxy
+    )
+
+    url.searchParams.append('type', params.type)
+    if (params.model) {
+      url.searchParams.append('model', params.model)
+    }
+
+    if (params.token_name) {
+      url.searchParams.append('token_name', params.token_name)
+    }
+
+    const token = global.AppConfig?.auth.aiProxyBackendKey
+
+    const response = await fetch(url.toString(), {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `${token}`
+      },
+      cache: 'no-store'
+    })
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    }
+
+    const result: ApiProxyBackendDashboardResponse = await response.json()
+    if (!result.success) {
+      throw new Error(result.message || 'API request failed')
+    }
+
+    return {
+      chart_data: result.data?.chart_data || [],
+      token_names: result.data?.token_names || [],
+      models: result.data?.models || [],
+      total_count: result.data?.total_count || 0,
+      exception_count: result.data?.exception_count || 0,
+      used_amount: result.data?.used_amount || 0,
+      rpm: result.data?.rpm || 0,
+      tpm: result.data?.tpm || 0
+    }
+  } catch (error) {
+    console.error('Error fetching dashboard data:', error)
+    throw error
+  }
+}
+
+export async function GET(request: NextRequest): Promise<NextResponse<DashboardResponse>> {
+  try {
+    const group = await parseJwtToken(request.headers)
+    const searchParams = request.nextUrl.searchParams
+
+    const queryParams: DashboardQueryParams = {
+      type: (searchParams.get('type') as 'day' | 'week' | 'two_week' | 'month') || 'week',
+      model: searchParams.get('model') || undefined,
+      token_name: searchParams.get('token_name') || undefined
+    }
+
+    const validationError = validateParams(queryParams)
+    if (validationError) {
+      return NextResponse.json(
+        {
+          code: 400,
+          message: validationError,
+          error: validationError
+        },
+        { status: 400 }
+      )
+    }
+
+    const dashboardData = await fetchDashboardData(queryParams, group)
+
+    return NextResponse.json({
+      code: 200,
+      data: dashboardData
+    } satisfies DashboardResponse)
+  } catch (error) {
+    console.error('Dashboard fetch error:', error)
+    return NextResponse.json(
+      {
+        code: 500,
+        message: error instanceof Error ? error.message : 'Internal server error',
+        error: error instanceof Error ? error.message : 'Internal server error'
+      },
+      { status: 500 }
+    )
+  }
+}
diff --git a/frontend/providers/aiproxy/app/api/user/log/detail/[log_id]/route.ts b/frontend/providers/aiproxy/app/api/user/log/detail/[log_id]/route.ts
new file mode 100644
index 000000000000..a0bb12a9f688
--- /dev/null
+++ b/frontend/providers/aiproxy/app/api/user/log/detail/[log_id]/route.ts
@@ -0,0 +1,85 @@
+import { ApiProxyBackendResp, ApiResp } from '@/types/api'
+import { RequestDetail } from '@/types/user/logs'
+import { parseJwtToken } from '@/utils/backend/auth'
+import { NextRequest, NextResponse } from 'next/server'
+
+export const dynamic = 'force-dynamic'
+export type ApiProxyBackendUserLogDetailResponse = ApiProxyBackendResp<RequestDetail>
+
+export type UserLogDetailResponse = ApiResp<RequestDetail>
+
+export interface UserLogDetailParams {
+  log_id: string
+}
+
+async function fetchLogs(log_id: string, group: string): Promise<RequestDetail | null> {
+  try {
+    const url = new URL(
+      `/api/log/${group}/detail/${log_id}`,
+      global.AppConfig?.backend.aiproxyInternal || global.AppConfig?.backend.aiproxy
+    )
+
+    const token = global.AppConfig?.auth.aiProxyBackendKey
+
+    const response = await fetch(url.toString(), {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `${token}`
+      },
+      cache: 'no-store'
+    })
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    }
+
+    const result: ApiProxyBackendUserLogDetailResponse = await response.json()
+
+    if (!result.success) {
+      throw new Error(result.message || 'Get logs detail API request failed')
+    }
+
+    return result.data || null
+  } catch (error) {
+    console.error('Get logs detail error:', error)
+    throw error
+  }
+}
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { log_id: string } }
+): Promise<NextResponse<UserLogDetailResponse>> {
+  try {
+    const group = await parseJwtToken(request.headers)
+
+    if (!params.log_id) {
+      return NextResponse.json(
+        {
+          code: 400,
+          message: 'Log_id is required',
+          error: 'Bad Request'
+        },
+        { status: 400 }
+      )
+    }
+
+    const detail = await fetchLogs(params.log_id, group)
+
+    return NextResponse.json({
+      code: 200,
+      data: detail || undefined
+    } satisfies UserLogDetailResponse)
+  } catch (error) {
+    console.error('Get logs detail error:', error)
+    return NextResponse.json(
+      {
+        code: 500,
+        message: error instanceof Error ? error.message : 'Internal server error',
+        error: error instanceof Error ? error.message : 'Internal server error'
+      },
+      { status: 500 }
+    )
+  }
+}
diff --git a/frontend/providers/aiproxy/app/api/user/log/route.ts b/frontend/providers/aiproxy/app/api/user/log/route.ts
new file mode 100644
index 000000000000..ce0c1909bec9
--- /dev/null
+++ b/frontend/providers/aiproxy/app/api/user/log/route.ts
@@ -0,0 +1,163 @@
+import { ApiProxyBackendResp, ApiResp } from '@/types/api'
+import { LogItem } from '@/types/user/logs'
+import { parseJwtToken } from '@/utils/backend/auth'
+import { NextRequest, NextResponse } from 'next/server'
+
+export const dynamic = 'force-dynamic'
+export type ApiProxyBackendUserLogSearchResponse = ApiProxyBackendResp<{
+  logs: LogItem[]
+  total: number
+  models: string[]
+  token_names: string[]
+}>
+
+export type UserLogSearchResponse = ApiResp<{
+  logs: LogItem[]
+  total: number
+  models: string[]
+  token_names: string[]
+}>
+
+export interface UserLogQueryParams {
+  token_name?: string
+  model_name?: string
+  keyword?: string
+  start_timestamp?: string
+  end_timestamp?: string
+  code_type?: 'all' | 'success' | 'error' | undefined
+  page: number
+  perPage: number
+}
+
+function validateParams(params: UserLogQueryParams): string | null {
+  if (params.page < 1) {
+    return 'Page number must be greater than 0'
+  }
+  if (params.perPage < 1 || params.perPage > 100) {
+    return 'Per page must be between 1 and 100'
+  }
+  if (params.start_timestamp && params.end_timestamp) {
+    if (parseInt(params.start_timestamp) > parseInt(params.end_timestamp)) {
+      return 'Start timestamp cannot be greater than end timestamp'
+    }
+  }
+  return null
+}
+
+async function fetchLogs(
+  params: UserLogQueryParams,
+  group: string
+): Promise<{ logs: LogItem[]; total: number; models: string[]; token_names: string[] }> {
+  try {
+    const url = new URL(
+      `/api/log/${group}/search`,
+      global.AppConfig?.backend.aiproxyInternal || global.AppConfig?.backend.aiproxy
+    )
+
+    url.searchParams.append('p', params.page.toString())
+    url.searchParams.append('per_page', params.perPage.toString())
+
+    if (params.token_name) {
+      url.searchParams.append('token_name', params.token_name)
+    }
+    if (params.model_name) {
+      url.searchParams.append('model_name', params.model_name)
+    }
+
+    if (params.keyword) {
+      url.searchParams.append('keyword', params.keyword)
+    }
+
+    if (params.code_type) {
+      url.searchParams.append('code_type', params.code_type)
+    }
+    if (params.start_timestamp) {
+      url.searchParams.append('start_timestamp', params.start_timestamp)
+    }
+    if (params.end_timestamp) {
+      url.searchParams.append('end_timestamp', params.end_timestamp)
+    }
+
+    const token = global.AppConfig?.auth.aiProxyBackendKey
+
+    const response = await fetch(url.toString(), {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `${token}`
+      },
+      cache: 'no-store'
+    })
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    }
+
+    const result: ApiProxyBackendUserLogSearchResponse = await response.json()
+    if (!result.success) {
+      throw new Error(result.message || 'API request failed')
+    }
+
+    return {
+      logs: result.data?.logs || [],
+      total: result.data?.total || 0,
+      models: result.data?.models || [],
+      token_names: result.data?.token_names || []
+    }
+  } catch (error) {
+    console.error('Error fetching logs:', error)
+    throw error
+  }
+}
+
+export async function GET(request: NextRequest): Promise<NextResponse<UserLogSearchResponse>> {
+  try {
+    const group = await parseJwtToken(request.headers)
+    const searchParams = request.nextUrl.searchParams
+
+    const queryParams: UserLogQueryParams = {
+      page: parseInt(searchParams.get('page') || '1', 10),
+      perPage: parseInt(searchParams.get('perPage') || '10', 10),
+      token_name: searchParams.get('token_name') || undefined,
+      model_name: searchParams.get('model_name') || undefined,
+      code_type: (searchParams.get('code_type') as 'all' | 'success' | 'error') || undefined,
+      start_timestamp: searchParams.get('start_timestamp') || undefined,
+      end_timestamp: searchParams.get('end_timestamp') || undefined,
+      keyword: searchParams.get('keyword') || undefined
+    }
+
+    const validationError = validateParams(queryParams)
+    if (validationError) {
+      return NextResponse.json(
+        {
+          code: 400,
+          message: validationError,
+          error: validationError
+        },
+        { status: 400 }
+      )
+    }
+
+    const { logs, total, models, token_names } = await fetchLogs(queryParams, group)
+
+    return NextResponse.json({
+      code: 200,
+      data: {
+        logs,
+        total,
+        models,
+        token_names
+      }
+    } satisfies UserLogSearchResponse)
+  } catch (error) {
+    console.error('Logs search error:', error)
+    return NextResponse.json(
+      {
+        code: 500,
+        message: error instanceof Error ? error.message : 'Internal server error',
+        error: error instanceof Error ? error.message : 'Internal server error'
+      },
+      { status: 500 }
+    )
+  }
+}
diff --git a/frontend/providers/aiproxy/app/api/user/token/[id]/route.ts b/frontend/providers/aiproxy/app/api/user/token/[id]/route.ts
new file mode 100644
index 000000000000..b02f58c04738
--- /dev/null
+++ b/frontend/providers/aiproxy/app/api/user/token/[id]/route.ts
@@ -0,0 +1,176 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { checkSealosUserIsRealName, parseJwtToken } from '@/utils/backend/auth'
+import { ApiProxyBackendResp, ApiResp } from '@/types/api'
+
+export const dynamic = 'force-dynamic'
+
+async function deleteToken(group: string, id: string): Promise<void> {
+  try {
+    const url = new URL(
+      `/api/token/${group}/${id}`,
+      global.AppConfig?.backend.aiproxyInternal || global.AppConfig?.backend.aiproxy
+    )
+    const token = global.AppConfig?.auth.aiProxyBackendKey
+
+    const response = await fetch(url.toString(), {
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `${token}`
+      },
+      cache: 'no-store'
+    })
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    }
+
+    const result: ApiProxyBackendResp = await response.json()
+    if (!result.success) {
+      throw new Error(result.message || 'Failed to delete token')
+    }
+  } catch (error) {
+    console.error('Error deleting token:', error)
+    throw error
+  }
+}
+
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+): Promise<NextResponse<ApiResp>> {
+  try {
+    const userGroup = await parseJwtToken(request.headers)
+
+    if (!params.id) {
+      return NextResponse.json(
+        {
+          code: 400,
+          message: 'Token ID is required',
+          error: 'Bad Request'
+        },
+        { status: 400 }
+      )
+    }
+
+    await deleteToken(userGroup, params.id)
+
+    return NextResponse.json({
+      code: 200,
+      message: 'Token deleted successfully'
+    } satisfies ApiResp)
+  } catch (error) {
+    console.error('Token deletion error:', error)
+    return NextResponse.json(
+      {
+        code: 500,
+        message: error instanceof Error ? error.message : 'Internal server error',
+        error: error instanceof Error ? error.message : 'Internal server error'
+      } satisfies ApiResp,
+      { status: 500 }
+    )
+  }
+}
+
+// update token status
+interface UpdateTokenRequestBody {
+  status: number
+}
+
+async function updateToken(group: string, id: string, status: number): Promise<void> {
+  try {
+    if (status !== 1 && status !== 2) {
+      throw new Error('Invalid status')
+    }
+    const url = new URL(
+      `/api/token/${group}/${id}/status`,
+      global.AppConfig?.backend.aiproxyInternal || global.AppConfig?.backend.aiproxy
+    )
+    const token = global.AppConfig?.auth.aiProxyBackendKey
+
+    const response = await fetch(url.toString(), {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `${token}`
+      },
+      body: JSON.stringify({ status }),
+      cache: 'no-store'
+    })
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    }
+
+    const result: ApiProxyBackendResp = await response.json()
+    if (!result.success) {
+      throw new Error(result.message || 'Failed to update token')
+    }
+  } catch (error) {
+    console.error('Error updating token:', error)
+    throw error
+  }
+}
+
+export async function POST(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+): Promise<NextResponse<ApiResp>> {
+  try {
+    const userGroup = await parseJwtToken(request.headers)
+
+    if (!params.id) {
+      return NextResponse.json(
+        {
+          code: 400,
+          message: 'Token ID is required',
+          error: 'Bad Request'
+        },
+        { status: 400 }
+      )
+    }
+
+    const isRealName = await checkSealosUserIsRealName(request.headers)
+
+    if (!isRealName) {
+      return NextResponse.json(
+        {
+          code: 400,
+          message: 'key.userNotRealName',
+          error: 'key.userNotRealName'
+        },
+        { status: 400 }
+      )
+    }
+
+    const updateTokenBody: UpdateTokenRequestBody = await request.json()
+
+    if (typeof updateTokenBody.status !== 'number') {
+      return NextResponse.json(
+        {
+          code: 400,
+          message: 'Status must be a number',
+          error: 'Bad Request'
+        },
+        { status: 400 }
+      )
+    }
+
+    await updateToken(userGroup, params.id, updateTokenBody.status)
+
+    return NextResponse.json({
+      code: 200,
+      message: 'Token updated successfully'
+    } satisfies ApiResp)
+  } catch (error) {
+    console.error('Token update error:', error)
+    return NextResponse.json(
+      {
+        code: 500,
+        message: error instanceof Error ? error.message : 'Internal server error',
+        error: error instanceof Error ? error.message : 'Internal server error'
+      } satisfies ApiResp,
+      { status: 500 }
+    )
+  }
+}
diff --git a/frontend/providers/aiproxy/app/api/user/token/route.ts b/frontend/providers/aiproxy/app/api/user/token/route.ts
new file mode 100644
index 000000000000..10791109f67f
--- /dev/null
+++ b/frontend/providers/aiproxy/app/api/user/token/route.ts
@@ -0,0 +1,224 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { TokenInfo } from '@/types/user/token'
+
+import { checkSealosUserIsRealName, parseJwtToken } from '@/utils/backend/auth'
+import { ApiProxyBackendResp, ApiResp } from '@/types/api'
+
+export const dynamic = 'force-dynamic'
+
+type ApiProxyBackendTokenSearchResponse = ApiProxyBackendResp<{
+  tokens: TokenInfo[]
+  total: number
+}>
+
+export type GetTokensResponse = ApiResp<{
+  tokens: TokenInfo[]
+  total: number
+}>
+
+export interface GetTokensQueryParams {
+  page: number
+  perPage: number
+}
+
+function validateParams(queryParams: GetTokensQueryParams): string | null {
+  if (queryParams.page < 1) {
+    return 'Page number must be greater than 0'
+  }
+
+  if (queryParams.perPage < 1 || queryParams.perPage > 100) {
+    return 'Per page must be between 1 and 100'
+  }
+
+  return null
+}
+
+async function fetchTokens(
+  queryParams: GetTokensQueryParams,
+  group: string
+): Promise<{ tokens: TokenInfo[]; total: number }> {
+  try {
+    const url = new URL(
+      `/api/token/${group}/search`,
+      global.AppConfig?.backend.aiproxyInternal || global.AppConfig?.backend.aiproxy
+    )
+    url.searchParams.append('p', queryParams.page.toString())
+    url.searchParams.append('per_page', queryParams.perPage.toString())
+
+    const token = global.AppConfig?.auth.aiProxyBackendKey
+
+    const response = await fetch(url.toString(), {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `${token}`
+      },
+      cache: 'no-store'
+    })
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    }
+
+    const result: ApiProxyBackendTokenSearchResponse = await response.json()
+
+    if (!result.success) {
+      throw new Error(result.message || 'API request failed')
+    }
+
+    return {
+      tokens: result?.data?.tokens || [],
+      total: result?.data?.total || 0
+    }
+  } catch (error) {
+    console.error('Error fetching tokens:', error)
+    return {
+      tokens: [],
+      total: 0
+    }
+  }
+}
+
+export async function GET(request: NextRequest): Promise<NextResponse<GetTokensResponse>> {
+  try {
+    const group = await parseJwtToken(request.headers)
+
+    const searchParams = request.nextUrl.searchParams
+    const queryParams: GetTokensQueryParams = {
+      page: parseInt(searchParams.get('page') || '1', 10),
+      perPage: parseInt(searchParams.get('perPage') || '10', 10)
+    }
+
+    const validationError = validateParams(queryParams)
+
+    if (validationError) {
+      return NextResponse.json(
+        {
+          code: 400,
+          message: validationError,
+          error: validationError
+        },
+        { status: 400 }
+      )
+    }
+
+    const { tokens, total } = await fetchTokens(queryParams, group)
+
+    return NextResponse.json({
+      code: 200,
+      data: {
+        tokens,
+        total
+      }
+    } satisfies GetTokensResponse)
+  } catch (error) {
+    console.error('Token search error:', error)
+
+    return NextResponse.json(
+      {
+        code: 500,
+        message: error instanceof Error ? error.message : 'Internal server error',
+        error: error instanceof Error ? error.message : 'Internal server error'
+      },
+      { status: 500 }
+    )
+  }
+}
+
+// create token
+
+interface CreateTokenRequest {
+  name: string
+}
+
+function validateCreateParams(body: CreateTokenRequest): string | null {
+  if (!body.name) {
+    return 'Name parameter is required'
+  }
+  return null
+}
+
+async function createToken(name: string, group: string): Promise<TokenInfo | undefined> {
+  try {
+    const url = new URL(
+      `/api/token/${group}?auto_create_group=true`,
+      global.AppConfig?.backend.aiproxyInternal || global.AppConfig?.backend.aiproxy
+    )
+    const token = global.AppConfig?.auth.aiProxyBackendKey
+    const response = await fetch(url.toString(), {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `${token}`
+      },
+      cache: 'no-store',
+      body: JSON.stringify({
+        name
+      })
+    })
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    }
+
+    const result: ApiProxyBackendResp<TokenInfo> = await response.json()
+    if (!result.success) {
+      throw new Error(result.message || 'Failed to create token')
+    }
+
+    return result?.data
+  } catch (error) {
+    console.error('Error creating token:', error)
+    throw error
+  }
+}
+
+export async function POST(request: NextRequest): Promise<NextResponse<ApiResp<TokenInfo>>> {
+  try {
+    const group = await parseJwtToken(request.headers)
+    const body: CreateTokenRequest = await request.json()
+
+    const validationError = validateCreateParams(body)
+    if (validationError) {
+      return NextResponse.json(
+        {
+          code: 400,
+          message: validationError,
+          error: validationError
+        } satisfies ApiResp<TokenInfo>,
+        { status: 400 }
+      )
+    }
+
+    const isRealName = await checkSealosUserIsRealName(request.headers)
+
+    if (!isRealName) {
+      return NextResponse.json(
+        {
+          code: 400,
+          message: 'key.userNotRealName',
+          error: 'key.userNotRealName'
+        },
+        { status: 400 }
+      )
+    }
+    // 创建Token
+    const newToken = await createToken(body.name, group)
+
+    return NextResponse.json({
+      code: 200,
+      data: newToken,
+      message: 'Token created successfully'
+    } satisfies ApiResp<TokenInfo>)
+  } catch (error) {
+    console.error('Token creation error:', error)
+    return NextResponse.json(
+      {
+        code: 500,
+        message: error instanceof Error ? error.message : 'Internal server error',
+        error: error instanceof Error ? error.message : 'Internal server error'
+      } satisfies ApiResp<TokenInfo>,
+      { status: 500 }
+    )
+  }
+}
diff --git a/frontend/providers/aiproxy/app/i18n/locales/en/common.json b/frontend/providers/aiproxy/app/i18n/locales/en/common.json
index e5d2271905a4..3914a94820cb 100644
--- a/frontend/providers/aiproxy/app/i18n/locales/en/common.json
+++ b/frontend/providers/aiproxy/app/i18n/locales/en/common.json
@@ -2,12 +2,23 @@
   "title": "AI proxy",
   "description": "AI proxy",
   "Sidebar": {
-    "Home": "API Keys",
+    "Home": "Dashboard",
     "Logs": "Logs",
-    "Price": "Pricing"
+    "Price": "Models",
+    "Dashboard": "Channels",
+    "GlobalLogs": "Logs",
+    "GlobalConfigs": "Config",
+    "NsManager": "NS Manage",
+    "Keys": "API Keys"
   },
   "keyList": {
-    "title": "API Keys"
+    "title": "API Keys",
+    "invitationText1": "Limited time benefits!!",
+    "invite": "Event details",
+    "invitationText2": "Invite friends to register Sealos,",
+    "invitationText3": "Rebate immediately: 10 yuan balance!",
+    "invitationText4": "Invitation link:",
+    "invitationText5": "Click to copy"
   },
   "key": {
     "key": "API Key",
@@ -15,8 +26,8 @@
     "createdAt": "Creation time",
     "lastUsedAt": "Last use time",
     "status": "State",
-    "namePlaceholder": "Please enter name",
-    "nameRequired": "Please enter key name",
+    "namePlaceholder": "please enter name",
+    "nameRequired": "please enter key name",
     "nameMaxLength": "Key length is illegal",
     "nameOnlyLettersAndNumbers": "key name contains special characters",
     "createSuccess": "Created successfully",
@@ -29,29 +40,53 @@
     "unused": "Not use",
     "inputPrice": "Input price",
     "outputPrice": "Output price",
-    "createName": "Name"
+    "createName": "Name",
+    "modelType": "Type",
+    "requestCount": "Request Count",
+    "usedAmount": "Amount Charged",
+    "userNotRealName": "AI services require real-name authentication."
   },
   "logs": {
     "call_log": "Logs",
-    "name": "Name",
+    "name": "Key Name",
     "status": "State",
     "time": "Time",
     "modal": "Model",
-    "prompt_tokens": "Input",
-    "completion_tokens": "Output",
+    "prompt_tokens": "Input Tokens",
+    "completion_tokens": "Output Tokens",
     "price": "Price",
-    "select_modal": "Please select model",
-    "select_token_name": "Please select name",
+    "select_modal": "please select model",
+    "select_token_name": "please select name",
     "model": "Model",
-    "total_price": "Total amount",
+    "total_price": "Total Charged",
     "total_price_tip": "(Number of input tokens × Input price) + (Number of output tokens × Output price)",
     "success": "Success",
-    "failed": "Failed"
+    "failed": "Failed",
+    "logDetail": "Log details",
+    "actions": "Operation",
+    "detail": "Details",
+    "requestId": "RequestID",
+    "mode": "Type",
+    "requestTime": "Request At",
+    "totalTime": "Duration (s)",
+    "tokenName": "Key name",
+    "tokenId": "Key ID",
+    "info": "Message",
+    "requestBody": "Request Body",
+    "responseBody": "Response Body",
+    "inputTokens": "Input Tokens",
+    "outputTokens": "Output Tokens",
+    "searchByContent": "Enter search keyword",
+    "statusOptions": {
+      "all": "All",
+      "success": "Success",
+      "error": "Error"
+    }
   },
   "Page": "Page",
   "Total": "Total",
   "modelList": {
-    "title": "Supported models"
+    "title": "Supported Models"
   },
   "copy": "Copy",
   "createKey": "New",
@@ -73,19 +108,191 @@
   "copyFailed": "Copy failed",
   "noData": "You don’t have an API Key yet",
   "price": {
-    "title": "Pricing",
-    "per1kTokens": "1k tokens"
-  },
-  "ernie": "Baidu-Ernie",
-  "qwen": "Alibaba-Qwen",
-  "chatglm": "BigModel-Chatglm",
-  "deepseek": "Deepseek",
-  "moonshot": "Moonshot",
-  "sparkdesk": "Sparkdesk",
-  "abab": "Minimax",
-  "doubao": "ByteDance-Doubao",
-  "glm": "Glm",
-  "o": "OpenAI",
-  "gpt": "OpenAI",
-  "createKey2": "Create Key"
+    "all": "All",
+    "title": "Models",
+    "per1kTokens": "1k tokens",
+    "modelOwner": "Series/Manufacturer",
+    "modelType": "Type",
+    "modelName": "Model Name",
+    "modelRpm": "RPM",
+    "modelRpmTooltip": "Each model has its own RPM",
+    "sortUpTooltip": "Click to view in ascending order",
+    "sortDownTooltip": "Click to view in Descending order",
+    "modelVision": "Vision",
+    "modelVisionLabel": "This model supports vision capabilities",
+    "modelToolChoice": "Tool Chocice",
+    "response": "Output"
+  },
+  "createKey2": "Create Key",
+  "dashboard": {
+    "title": "Channels",
+    "create": "New",
+    "import": "Import",
+    "export": "Export",
+    "exportAll": "Export All",
+    "importSuccess": "Import successful",
+    "importError": "Import failed"
+  },
+  "channelStatus": {
+    "autoDisabled": "System disabled"
+  },
+  "channels": {
+    "name": "Name",
+    "type": "Manufacturer",
+    "test": "Test",
+    "disable": "Disable",
+    "enable": "Enable",
+    "edit": "Edit",
+    "export": "Export",
+    "create": "New",
+    "name_required": "The name is illegal",
+    "key_required": "Key is illegal",
+    "modelDefault": "Channel default model",
+    "createFailed": "Failed to create channel",
+    "createSuccess": "Channel created successfully",
+    "updateSuccess": "Update channel successful",
+    "updateFailed": "Update channel failed",
+    "id": "ID",
+    "requestCount": "Request Times",
+    "status": "Status",
+    "action": "Operation",
+    "delete": "Delete"
+  },
+  "channelsForm": {
+    "name": "Custom Name",
+    "type": "Manufacturer",
+    "models": "Model",
+    "model_mapping": "Input Mode & Output Mode",
+    "add": "Add",
+    "key": "Key",
+    "base_url": "Proxy Address"
+  },
+  "channelsFormPlaceholder": {
+    "name": "custom name",
+    "type": "open ai",
+    "model": "enter selection",
+    "modelInput": "enter custom model name",
+    "modelMappingInput": "input model",
+    "modelMappingOutput": "output model",
+    "key": "please enter the channel key",
+    "base_url": "please enter agent"
+  },
+  "common": {
+    "add": "Add"
+  },
+  "global_configs": {
+    "title": "Global configuration",
+    "export": "Export",
+    "import": "Import",
+    "qpm_limit": "Global QPM limits",
+    "pause_service": "Service Pause",
+    "retry_count": "Number of error retries",
+    "max_token": "Maximum number of tokens in the workspace"
+  },
+  "globalConfigs": {
+    "defaultModel": "Default Model",
+    "addDefaultModel": "New",
+    "saveDefaultModel": "Save",
+    "saveDefaultModelFailed": "Failed To Save",
+    "saveDefaultModelSuccess": "Saved successfully",
+    "saveCommonConfigSuccess": "Update successful",
+    "saveCommonConfigFailed": "Update failed",
+    "common_config": "Common Configuration",
+    "model_config": "Model Settings"
+  },
+  "modeType": {
+    "0": "Unknown",
+    "1": "Chat",
+    "2": "Text",
+    "3": "Embed",
+    "4": "Moderate",
+    "5": "Image",
+    "6": "Edit",
+    "7": "TTS",
+    "8": "STT",
+    "9": "Audio",
+    "10": "Rerank"
+  },
+  "modeOwner": {
+    "openai": "OpenAI",
+    "alibaba": "Alibaba",
+    "tencent": "Tencent",
+    "xunfei": "iFlytek",
+    "deepseek": "DeepSeek",
+    "moonshot": "Moonshot AI",
+    "minimax": "MiniMax",
+    "baidu": "Baidu",
+    "google": "Google",
+    "baai": "BAAI",
+    "funaudiollm": "FunAudio LLM",
+    "doubao": "Doubao",
+    "fishaudio": "Fish Audio",
+    "chatglm": "ChatGLM",
+    "stabilityai": "Stability AI",
+    "netease": "NetEase",
+    "ai360": "360 AI",
+    "anthropic": "Anthropic",
+    "meta": "Meta",
+    "baichuan": "Baichuan",
+    "mistral": "Mistral AI",
+    "openchat": "OpenChat",
+    "microsoft": "Microsoft",
+    "defog": "Defog",
+    "nexusflow": "NexusFlow",
+    "cohere": "Cohere",
+    "huggingface": "Hugging Face",
+    "lingyiwanwu": "Lingyi Wanwu",
+    "stepfun": "StepFun",
+    "unknown": "Unknown"
+  },
+  "GlobalLogs": {
+    "selectModel": "model Name",
+    "select_token_name": "token name",
+    "selectGroupId": "workspace",
+    "groupId": "Workspace",
+    "tokenName": "Key Name",
+    "channel": "Channel ID",
+    "keyName": "Key name"
+  },
+  "nsManager": {
+    "groupId": "Workspace",
+    "qpm": "QPM Restrictions",
+    "created_at": "Creation Time",
+    "accessed_at": "Last use time",
+    "used_amount": "Amount used",
+    "status": "State",
+    "enabled": "Enabled",
+    "disabled": "Disabled",
+    "request_count": "Number of uses",
+    "actions": "Operation",
+    "ns_manager": "NS Management",
+    "select_group_id": "fill in the workspace",
+    "updateGroupStatusSuccess": "Update status successful",
+    "updateGroupStatusFailed": "Update status failed",
+    "updateGroupQpmSuccess": "Update QPM successful",
+    "updateGroupQpmFailed": "Update QPM failed",
+    "deleteGroupSuccess": "Delete successfully",
+    "deleteGroupFailed": "Delete failed"
+  },
+  "channel": {
+    "updateSuccess": "Update status successful",
+    "updateFailed": "Update status failed",
+    "deleteSuccess": "Delete successfully",
+    "deleteFailed": "Delete failed"
+  },
+  "dataDashboard": {
+    "title": "Dashboard",
+    "selectToken": "All Keys",
+    "selectModel": "All Models",
+    "day": "Last 24h",
+    "week": "Last 7 days",
+    "twoWeek": "Last 15 days",
+    "month": "Last 30 days",
+    "callCount": "Requests",
+    "exceptionCount": "Exceptions",
+    "rpm": "Current RPM",
+    "tpm": "Current TPM",
+    "cost": "Charges",
+    "requestData": "Call Data"
+  }
 }
diff --git a/frontend/providers/aiproxy/app/i18n/locales/zh/common.json b/frontend/providers/aiproxy/app/i18n/locales/zh/common.json
index 5a6226556e44..a79ad7b4a856 100644
--- a/frontend/providers/aiproxy/app/i18n/locales/zh/common.json
+++ b/frontend/providers/aiproxy/app/i18n/locales/zh/common.json
@@ -2,12 +2,23 @@
   "title": "AI 代理",
   "description": "AI 代理",
   "Sidebar": {
-    "Home": "API Keys",
-    "Logs": "调用日志",
-    "Price": "模型价格"
+    "Home": "仪表盘",
+    "Logs": "日志",
+    "Price": "模型广场",
+    "Dashboard": "AI 渠道",
+    "GlobalLogs": "全局日志",
+    "GlobalConfigs": "全局配置",
+    "NsManager": "NS管理",
+    "Keys": "API Keys"
   },
   "keyList": {
-    "title": "API Keys"
+    "title": "API Keys",
+    "invitationText1": "限时福利!!",
+    "invite": "活动详情",
+    "invitationText2": "邀请好友注册 Sealos，",
+    "invitationText3": "立返 10元 余额！",
+    "invitationText4": "邀请链接：",
+    "invitationText5": "点击复制"
   },
   "key": {
     "key": "API Key",
@@ -29,24 +40,48 @@
     "unused": "未使用",
     "inputPrice": "输入单价",
     "outputPrice": "输出单价",
-    "createName": "名称"
+    "createName": "名称",
+    "modelType": "模型类型",
+    "requestCount": "请求次数",
+    "usedAmount": "消耗金额",
+    "userNotRealName": "Ai 服务需要实名认证。"
   },
   "logs": {
     "call_log": "调用日志",
-    "name": "名称",
+    "name": "Key 名称",
     "modal": "模型",
     "status": "状态",
     "time": "时间",
     "model": "模型",
-    "prompt_tokens": "输入",
-    "completion_tokens": "输出",
+    "prompt_tokens": "输入 Tokens",
+    "completion_tokens": "输出 Tokens",
     "price": "价格",
     "select_modal": "请选择模型",
     "select_token_name": "请选择名称",
     "total_price": "总金额",
     "total_price_tip": "（输入 token 数×输入价格）＋（输出 token 数 × 输出价格）",
     "success": "成功",
-    "failed": "失败"
+    "failed": "失败",
+    "logDetail": "日志详情",
+    "actions": "操作",
+    "detail": "详情",
+    "requestId": "RequestID",
+    "mode": "模型类型",
+    "requestTime": "请求时间",
+    "totalTime": "耗时（s）",
+    "tokenName": "密钥名称",
+    "tokenId": "密钥 ID",
+    "info": "信息",
+    "requestBody": "请求内容",
+    "responseBody": "响应内容",
+    "inputTokens": "输入 Tokens",
+    "outputTokens": "输出 Tokens",
+    "searchByContent": "输入搜索关键词",
+    "statusOptions": {
+      "all": "全部",
+      "success": "成功",
+      "error": "失败"
+    }
   },
   "Page": "页",
   "Total": "总数",
@@ -73,19 +108,191 @@
   "copyFailed": "复制失败",
   "noData": "你还没有 API Key",
   "price": {
-    "title": "模型价格",
-    "per1kTokens": "1k tokens"
-  },
-  "ernie": "百度文心",
-  "qwen": "阿里千问",
-  "chatglm": "智谱",
-  "deepseek": "Deepseek",
-  "moonshot": "月之暗面",
-  "sparkdesk": "讯飞星火",
-  "abab": "Minimax",
-  "doubao": "字节豆包",
-  "glm": "智谱",
-  "o": "OpenAI",
-  "gpt": "OpenAI",
-  "createKey2": "新建 Key"
+    "all": "全部",
+    "title": "模型广场",
+    "per1kTokens": "1k tokens",
+    "modelOwner": "系列/厂商",
+    "modelType": "类型",
+    "modelName": "模型名",
+    "modelRpm": "RPM",
+    "modelRpmTooltip": "每个模型拥有独立的 RPM",
+    "sortUpTooltip": "点击升序",
+    "sortDownTooltip": "点击降序",
+    "modelVision": "视觉",
+    "modelVisionLabel": "该模型支持视觉能力",
+    "modelToolChoice": "工具调用",
+    "response": "输出"
+  },
+  "createKey2": "新建 Key",
+  "dashboard": {
+    "title": "Ai 渠道",
+    "create": "新建",
+    "import": "导入",
+    "export": "导出",
+    "exportAll": "全部导出",
+    "importSuccess": "导入成功",
+    "importError": "导入失败"
+  },
+  "channelStatus": {
+    "autoDisabled": "系统禁用"
+  },
+  "channels": {
+    "name": "名字",
+    "type": "厂商",
+    "test": "测试",
+    "disable": "禁用",
+    "enable": "启用",
+    "edit": "编辑",
+    "export": "导出",
+    "create": "新建",
+    "name_required": "名称不合法",
+    "key_required": "Key 不合法",
+    "modelDefault": "渠道默认模型",
+    "createFailed": "创建渠道失败",
+    "createSuccess": "成功创建渠道",
+    "updateSuccess": "更新渠道成功",
+    "updateFailed": "更新渠道失败",
+    "id": "ID",
+    "requestCount": "调用次数",
+    "status": "状态",
+    "action": "操作",
+    "delete": "删除"
+  },
+  "channelsForm": {
+    "name": "自定义名称",
+    "type": "厂商",
+    "models": "模型",
+    "model_mapping": "输入 & 输出模型",
+    "add": "添加",
+    "key": "密钥",
+    "base_url": "代理"
+  },
+  "channelsFormPlaceholder": {
+    "name": "自定义名称",
+    "type": "Open AI",
+    "model": "输入选择",
+    "modelInput": "输入自定义模型名称",
+    "modelMappingInput": "输入模型",
+    "modelMappingOutput": "输出模型",
+    "key": "请输入渠道对应的鉴权密钥",
+    "base_url": "请输入代理"
+  },
+  "common": {
+    "add": "填入"
+  },
+  "global_configs": {
+    "title": "全局配置",
+    "export": "导出",
+    "import": "导入",
+    "qpm_limit": "全局QPM限制",
+    "pause_service": "暂停服务",
+    "retry_count": "错误重试次数",
+    "max_token": "工作空间最大 token 数"
+  },
+  "globalConfigs": {
+    "defaultModel": "默认模型",
+    "addDefaultModel": "新增模型",
+    "saveDefaultModel": "保存",
+    "saveDefaultModelFailed": "保存失败",
+    "saveDefaultModelSuccess": "保存成功",
+    "saveCommonConfigSuccess": "更新成功",
+    "saveCommonConfigFailed": "更新失败",
+    "common_config": "通用配置",
+    "model_config": "模型设置"
+  },
+  "modeType": {
+    "0": "未知",
+    "1": "聊天补全",
+    "2": "文本补全",
+    "3": "文本嵌入",
+    "4": "内容审核",
+    "5": "图像生成",
+    "6": "文本编辑",
+    "7": "语音合成",
+    "8": "语音转录",
+    "9": "音频翻译",
+    "10": "重排序"
+  },
+  "modeOwner": {
+    "openai": "OpenAI",
+    "alibaba": "阿里",
+    "tencent": "腾讯",
+    "xunfei": "讯飞",
+    "deepseek": "DeepSeek",
+    "moonshot": "月之暗面",
+    "minimax": "MiniMax",
+    "baidu": "百度",
+    "google": "谷歌",
+    "baai": "BAAI",
+    "funaudiollm": "趣音大模型",
+    "doubao": "豆包",
+    "fishaudio": "鱼声科技",
+    "chatglm": "智谱清言",
+    "stabilityai": "Stability AI",
+    "netease": "网易",
+    "ai360": "360智脑",
+    "anthropic": "Anthropic",
+    "meta": "Meta",
+    "baichuan": "百川智能",
+    "mistral": "Mistral AI",
+    "openchat": "OpenChat",
+    "microsoft": "微软",
+    "defog": "Defog",
+    "nexusflow": "NexusFlow",
+    "cohere": "Cohere",
+    "huggingface": "Hugging Face",
+    "lingyiwanwu": "零一万物",
+    "stepfun": "StepFun",
+    "unknown": "未知"
+  },
+  "GlobalLogs": {
+    "selectModel": "模型名称",
+    "select_token_name": "Key 名称",
+    "selectGroupId": "工作空间",
+    "groupId": "工作空间",
+    "tokenName": "Key 名称",
+    "channel": "渠道 ID",
+    "keyName": "Key 名称"
+  },
+  "nsManager": {
+    "groupId": "工作空间",
+    "qpm": "QPM 限制",
+    "created_at": "创建时间",
+    "accessed_at": "最后使用时间",
+    "used_amount": "使用金额",
+    "status": "状态",
+    "enabled": "启用",
+    "disabled": "禁用",
+    "request_count": "使用次数",
+    "actions": "操作",
+    "ns_manager": "NS 管理",
+    "select_group_id": "填入工作空间",
+    "updateGroupStatusSuccess": "更新状态成功",
+    "updateGroupStatusFailed": "更新状态失败",
+    "updateGroupQpmSuccess": "更新 QPM 成功",
+    "updateGroupQpmFailed": "更新 QPM 失败",
+    "deleteGroupSuccess": "删除成功",
+    "deleteGroupFailed": "删除失败"
+  },
+  "channel": {
+    "updateSuccess": "更新状态成功",
+    "updateFailed": "更新状态失败",
+    "deleteSuccess": "删除成功",
+    "deleteFailed": "删除失败"
+  },
+  "dataDashboard": {
+    "title": "仪表盘",
+    "selectToken": "全部密钥",
+    "selectModel": "全部模型",
+    "day": "1天内",
+    "week": "近7天",
+    "twoWeek": "近15天",
+    "month": "近30天",
+    "callCount": "请求数",
+    "exceptionCount": "异常数",
+    "rpm": "当前 RPM",
+    "tpm": "当前 TPM",
+    "cost": "花费",
+    "requestData": "调用数据"
+  }
 }
diff --git a/frontend/providers/aiproxy/components/InitializeApp.tsx b/frontend/providers/aiproxy/components/InitializeApp.tsx
new file mode 100644
index 000000000000..ac707858581e
--- /dev/null
+++ b/frontend/providers/aiproxy/components/InitializeApp.tsx
@@ -0,0 +1,134 @@
+'use client'
+
+import { EVENT_NAME } from 'sealos-desktop-sdk'
+import { createSealosApp, sealosApp } from 'sealos-desktop-sdk/app'
+import { useCallback, useEffect } from 'react'
+import { initAppConfig } from '@/api/platform'
+import { useI18n } from '@/providers/i18n/i18nContext'
+import { useBackendStore } from '@/store/backend'
+import { useTranslationClientSide } from '@/app/i18n/client'
+import { usePathname } from 'next/navigation'
+import { useRouter } from 'next/navigation'
+import { useSessionStore } from '@/store/session'
+
+export default function InitializeApp() {
+  const router = useRouter()
+  const pathname = usePathname()
+  const { lng } = useI18n()
+  const { i18n } = useTranslationClientSide(lng)
+  const {
+    setAiproxyBackend,
+    setCurrencySymbol,
+    setDocUrl,
+    setIsInvitationActive,
+    setInvitationUrl
+  } = useBackendStore()
+
+  const handleI18nChange = useCallback(
+    (data: { currentLanguage: string }) => {
+      const currentLng = i18n.resolvedLanguage // get the latest resolvedLanguage
+      const newLng = data.currentLanguage
+
+      if (currentLng !== newLng) {
+        const currentPath = window.location.pathname
+        const pathWithoutLang = currentPath.split('/').slice(2).join('/')
+        router.push(`/${newLng}/${pathWithoutLang}`)
+      }
+    },
+    [i18n.resolvedLanguage]
+  )
+
+  useEffect(() => {
+    const cleanupApp = createSealosApp()
+    let cleanupEventListener: (() => void) | undefined
+
+    const initApp = async () => {
+      try {
+        await initLanguage()
+
+        await initSession()
+
+        await initConfig()
+
+        cleanupEventListener = sealosApp?.addAppEventListen(
+          EVENT_NAME.CHANGE_I18N,
+          handleI18nChange
+        )
+      } catch (error) {
+        console.error('aiproxy: init app error:', error)
+      }
+    }
+
+    initApp()
+
+    return () => {
+      if (cleanupEventListener && typeof cleanupEventListener === 'function') {
+        cleanupEventListener()
+      }
+      if (cleanupApp && typeof cleanupApp === 'function') {
+        cleanupApp()
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  // init language
+  const initLanguage = async () => {
+    const pathLng = pathname.split('/')[1]
+    try {
+      const lang = await sealosApp.getLanguage()
+      if (pathLng !== lang.lng) {
+        const pathParts = pathname.split('/')
+        pathParts[1] = lang.lng
+        router.push(pathParts.join('/'))
+        router.refresh()
+      }
+      console.info('aiproxy: init language success')
+    } catch (error) {
+      if (error instanceof Error) {
+        console.debug('aiproxy: init language error:', error.message)
+      } else {
+        console.debug('aiproxy: unknown init language error:', error)
+      }
+    }
+  }
+
+  // init session
+  const initSession = async () => {
+    const { setSession } = useSessionStore.getState()
+
+    try {
+      const newSession = await sealosApp.getSession()
+      const currentSession = useSessionStore.getState().session
+      // Compare token from persisted session with new session token
+      if (newSession?.token !== currentSession?.token) {
+        setSession(newSession)
+        window.location.reload()
+      }
+      console.info('aiproxy: init session success')
+    } catch (err) {
+      console.info('aiproxy: app is not running in desktop')
+      if (!process.env.NEXT_PUBLIC_MOCK_USER) {
+        setSession(null)
+      }
+    }
+  }
+
+  // init config
+  const initConfig = async () => {
+    try {
+      const { aiproxyBackend, currencySymbol, docUrl, isInvitationActive, invitationUrl } =
+        await initAppConfig()
+      setAiproxyBackend(aiproxyBackend)
+      setCurrencySymbol(currencySymbol)
+      setDocUrl(docUrl)
+      setIsInvitationActive(isInvitationActive)
+      setInvitationUrl(invitationUrl)
+      console.info('aiproxy: init config success')
+    } catch (error) {
+      console.error('aiproxy: init config error:', error)
+    }
+  }
+
+  return null
+}
diff --git a/frontend/providers/aiproxy/components/MyTooltip/index.tsx b/frontend/providers/aiproxy/components/MyTooltip/index.tsx
deleted file mode 100644
index dd5aefadf64a..000000000000
--- a/frontend/providers/aiproxy/components/MyTooltip/index.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Tooltip, TooltipProps } from '@chakra-ui/react'
-
-export const MyTooltip = ({ children, ...tooltipProps }: TooltipProps) => {
-  return (
-    <Tooltip
-      hasArrow
-      placement="bottom"
-      bg="white"
-      color="grayModern.900"
-      fontSize="12px"
-      padding="8px 12px"
-      borderRadius="8px"
-      display="flex"
-      width="60px"
-      height="34px"
-      justifyContent="center"
-      alignItems="center"
-      flexShrink={0}
-      fontFamily="PingFang SC"
-      fontWeight={400}
-      lineHeight="16px"
-      letterSpacing="0.048px"
-      {...tooltipProps}>
-      {children}
-    </Tooltip>
-  )
-}
diff --git a/frontend/providers/aiproxy/components/admin/Sidebar.tsx b/frontend/providers/aiproxy/components/admin/Sidebar.tsx
new file mode 100644
index 000000000000..40af5a5d297d
--- /dev/null
+++ b/frontend/providers/aiproxy/components/admin/Sidebar.tsx
@@ -0,0 +1,121 @@
+'use client'
+import { Flex, Text } from '@chakra-ui/react'
+import Image, { StaticImageData } from 'next/image'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+
+import { useTranslationClientSide } from '@/app/i18n/client'
+import homeIcon from '@/ui/svg/icons/admin-sidebar/home.svg'
+import homeIcon_a from '@/ui/svg/icons/admin-sidebar/home_a.svg'
+import logsIcon from '@/ui/svg/icons/admin-sidebar/logs.svg'
+import logsIcon_a from '@/ui/svg/icons/admin-sidebar/logs_a.svg'
+import configIcon from '@/ui/svg/icons/admin-sidebar/config.svg'
+import configIcon_a from '@/ui/svg/icons/admin-sidebar/config_a.svg'
+import nsManagerIcon from '@/ui/svg/icons/admin-sidebar/nsManager.svg'
+import nsManagerIcon_a from '@/ui/svg/icons/admin-sidebar/nsManager_a.svg'
+import { useI18n } from '@/providers/i18n/i18nContext'
+
+type Menu = {
+  id: string
+  url: string
+  value: string
+  icon: StaticImageData
+  activeIcon: StaticImageData
+  display: boolean
+}
+
+const SideBar = (): JSX.Element => {
+  const pathname = usePathname()
+  const { lng } = useI18n()
+  const { t } = useTranslationClientSide(lng, 'common')
+
+  const menus: Menu[] = [
+    {
+      id: 'dashboard',
+      url: '/dashboard',
+      value: t('Sidebar.Dashboard'),
+      icon: homeIcon,
+      activeIcon: homeIcon_a,
+      display: true
+    },
+    {
+      id: 'global-logs',
+      url: '/global-logs',
+      value: t('Sidebar.GlobalLogs'),
+      icon: logsIcon,
+      activeIcon: logsIcon_a,
+      display: true
+    },
+    {
+      id: 'global-configs',
+      url: '/global-configs',
+      value: t('Sidebar.GlobalConfigs'),
+      icon: configIcon,
+      activeIcon: configIcon_a,
+      display: true
+    },
+    {
+      id: 'ns-manager',
+      url: '/ns-manager',
+      value: t('Sidebar.NsManager'),
+      icon: nsManagerIcon,
+      activeIcon: nsManagerIcon_a,
+      display: true
+    }
+  ]
+
+  return (
+    <Flex
+      flexDirection="column"
+      py="16px"
+      px="12px"
+      gap="var(--md, 8px)"
+      alignContent="center"
+      flex="1">
+      {menus
+        .filter((menu) => menu.display)
+        .map((menu) => {
+          const fullUrl = `/${lng}${menu.url}`
+          const isActive = pathname === fullUrl
+
+          return (
+            <Link href={fullUrl} key={menu.id} style={{ textDecoration: 'none' }}>
+              <Flex
+                display="flex"
+                w="64px"
+                px="var(--md, 8px)"
+                py="12px"
+                flexDirection="column"
+                justifyContent="center"
+                alignItems="center"
+                gap="var(--xs, 4px)"
+                borderRadius="8px"
+                cursor="pointer"
+                role="group"
+                _hover={{ backgroundColor: '#9699B426' }}>
+                <Image
+                  src={isActive ? menu.activeIcon : menu.icon}
+                  alt={menu.value}
+                  width={24}
+                  height={24}
+                />
+                <Text
+                  color={isActive ? 'grayModern.900' : 'grayModern.500'}
+                  fontFamily="PingFang SC"
+                  fontSize="11px"
+                  fontWeight={500}
+                  lineHeight="16px"
+                  letterSpacing="0.5px"
+                  textAlign="center"
+                  whiteSpace="nowrap">
+                  {menu.value}
+                </Text>
+              </Flex>
+            </Link>
+          )
+        })}
+    </Flex>
+  )
+}
+
+export default SideBar
diff --git a/frontend/providers/aiproxy/components/common/ConstructMappingComponent.tsx b/frontend/providers/aiproxy/components/common/ConstructMappingComponent.tsx
new file mode 100644
index 000000000000..27e61b245560
--- /dev/null
+++ b/frontend/providers/aiproxy/components/common/ConstructMappingComponent.tsx
@@ -0,0 +1,331 @@
+import React, { useState, useEffect, useMemo } from 'react'
+import { VStack, Flex, FormLabel, Input, Button, Text, Box } from '@chakra-ui/react'
+import { useTranslationClientSide } from '@/app/i18n/client'
+import { useI18n } from '@/providers/i18n/i18nContext'
+import { CustomSelect } from './Select'
+type MapKeyValuePair = { key: string; value: string }
+
+// mapKeys determines the available selection options
+export const ConstructMappingComponent = function ({
+  mapKeys,
+  mapData,
+  setMapData
+}: {
+  mapKeys: string[]
+  mapData: Record<string, string>
+  setMapData: (mapping: Record<string, string>) => void
+}) {
+  const { lng } = useI18n()
+  const { t } = useTranslationClientSide(lng, 'common')
+
+  const [mapKeyValuePairs, setMapkeyValuePairs] = useState<Array<MapKeyValuePair>>([])
+
+  // 组件初步渲染时，isInternalUpdate 为 false，可以保证每次重新渲染时，mapData 变化时，mapKeyValuePairs 重新初始化
+  const [isInternalUpdate, setIsInternalUpdate] = useState(false)
+
+  // 初始化并在 mapData 变化时更新 mapKeyValuePairs
+  useEffect(() => {
+    if (!isInternalUpdate) {
+      const entries = Object.entries(mapData)
+      setMapkeyValuePairs(
+        entries.length > 0
+          ? entries.map(([key, value]) => ({ key, value }))
+          : [{ key: '', value: '' }]
+      )
+    }
+    setIsInternalUpdate(false)
+  }, [mapData])
+
+  const handleDropdownItemDisplay = (dropdownItem: string) => {
+    if (dropdownItem === t('channelsFormPlaceholder.modelMappingInput')) {
+      return (
+        <Text
+          color="grayModern.600"
+          fontFamily="PingFang SC"
+          fontSize="12px"
+          fontStyle="normal"
+          fontWeight={400}
+          lineHeight="16px"
+          letterSpacing="0.048px">
+          {t('channelsFormPlaceholder.modelMappingInput')}
+        </Text>
+      )
+    }
+    return (
+      <Text
+        color="grayModern.600"
+        fontFamily="PingFang SC"
+        fontSize="12px"
+        fontStyle="normal"
+        fontWeight={400}
+        lineHeight="16px"
+        letterSpacing="0.048px">
+        {dropdownItem}
+      </Text>
+    )
+  }
+
+  const handleSeletedItemDisplay = (selectedItem: string) => {
+    if (selectedItem === t('channelsFormPlaceholder.modelMappingInput')) {
+      return (
+        <Text
+          color="grayModern.900"
+          fontFamily="PingFang SC"
+          fontSize="12px"
+          fontStyle="normal"
+          fontWeight={400}
+          lineHeight="16px"
+          letterSpacing="0.048px">
+          {t('channelsFormPlaceholder.modelMappingInput')}
+        </Text>
+      )
+    }
+    return (
+      <Box
+        maxWidth="114px"
+        overflowX="auto" // overflowX needed for long text
+        whiteSpace="nowrap" // prevent text from wrapping
+        css={{
+          '&::-webkit-scrollbar': { display: 'none' },
+          msOverflowStyle: 'none',
+          scrollbarWidth: 'none'
+        }}>
+        <Text
+          color="grayModern.900"
+          fontFamily="PingFang SC"
+          fontSize="12px"
+          fontStyle="normal"
+          fontWeight={400}
+          lineHeight="16px"
+          letterSpacing="0.048px">
+          {selectedItem}
+        </Text>
+      </Box>
+    )
+  }
+
+  // Handling mapData and mapKeyValuePairs cleanup when map keys change.
+  useEffect(() => {
+    // 1. Handle mapData cleanup
+    const removedKeysFromMapData = Object.keys(mapData).filter((key) => !mapKeys.includes(key))
+    if (removedKeysFromMapData.length > 0) {
+      const newMapData = { ...mapData }
+      removedKeysFromMapData.forEach((key) => {
+        delete newMapData[key]
+      })
+      setIsInternalUpdate(true)
+      setMapData(newMapData)
+    }
+
+    // 2. Handle mapKeyValuePairs cleanup
+    const removedPairs = mapKeyValuePairs.filter((pair) => pair.key && !mapKeys.includes(pair.key))
+    if (removedPairs.length > 0) {
+      const newMapKeyValuePairs = mapKeyValuePairs.filter(
+        (pair) => !pair.key || mapKeys.includes(pair.key)
+      )
+      setMapkeyValuePairs(newMapKeyValuePairs)
+    }
+  }, [mapKeys])
+
+  // Get the keys that have been selected
+  const getSelectedMapKeys = (currentIndex: number) => {
+    const selected = new Set<string>()
+    mapKeyValuePairs.forEach((mapKeyValuePair, idx) => {
+      if (idx !== currentIndex && mapKeyValuePair.key) {
+        selected.add(mapKeyValuePair.key)
+      }
+    })
+    return selected
+  }
+
+  // Handling adding a new row
+  const handleAddNewMapKeyPair = () => {
+    setMapkeyValuePairs([...mapKeyValuePairs, { key: '', value: '' }])
+  }
+
+  // Handling deleting a row
+  const handleRemoveMapKeyPair = (index: number) => {
+    const mapKeyValuePair = mapKeyValuePairs[index]
+    const newMapData = { ...mapData }
+    if (mapKeyValuePair.key) {
+      delete newMapData[mapKeyValuePair.key]
+    }
+    setIsInternalUpdate(true)
+    setMapData(newMapData)
+
+    const newMapKeyValuePairs = mapKeyValuePairs.filter((_, idx) => idx !== index)
+    setMapkeyValuePairs(newMapKeyValuePairs)
+  }
+
+  // Handling selection/input changes
+  const handleInputChange = (index: number, field: 'key' | 'value', value: string) => {
+    const newMapKeyValuePairs = [...mapKeyValuePairs]
+    const oldValue = newMapKeyValuePairs[index][field]
+    newMapKeyValuePairs[index][field] = value
+
+    // Update the mapping relationship
+    const newMapData = { ...mapData }
+    if (field === 'key') {
+      if (oldValue) delete newMapData[oldValue]
+
+      if (!value) {
+        newMapKeyValuePairs[index].value = ''
+      }
+
+      if (value && newMapKeyValuePairs[index].value) {
+        newMapData[value] = newMapKeyValuePairs[index].value
+      }
+    } else {
+      if (newMapKeyValuePairs[index].key) {
+        newMapData[newMapKeyValuePairs[index].key] = value
+      }
+    }
+
+    setMapkeyValuePairs(newMapKeyValuePairs)
+    setIsInternalUpdate(true)
+    setMapData(newMapData)
+  }
+
+  // Check if there are still keys that can be selected
+  const hasAvailableKeys = useMemo(() => {
+    const usedKeys = new Set(
+      mapKeyValuePairs.map((mapKeyValuePair) => mapKeyValuePair.key).filter(Boolean)
+    )
+    // Ensure mapKeyValuePairs length does not exceed mapKeys length
+    return (
+      mapKeyValuePairs.length < mapKeys.length && mapKeys.some((mapKey) => !usedKeys.has(mapKey))
+    )
+  }, [mapKeys, mapKeyValuePairs])
+
+  return (
+    <VStack w="full" align="stretch" alignItems="flex-start" spacing="8px">
+      <FormLabel
+        color="grayModern.900"
+        fontFamily="PingFang SC"
+        fontSize="14px"
+        fontStyle="normal"
+        fontWeight={500}
+        lineHeight="20px"
+        letterSpacing="0.1px"
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+        h="20px"
+        m={0}>
+        {t('channelsForm.model_mapping')}
+      </FormLabel>
+
+      {mapKeyValuePairs.map((row, index) => (
+        <Flex key={`${index}-${row.key}`} gap="8px" w="full" alignItems="center">
+          <CustomSelect<string>
+            listItems={mapKeys.filter((key) => !getSelectedMapKeys(index).has(key))}
+            initSelectedItem={row.key !== '' && row.key ? row.key : undefined}
+            // when select placeholder, the newSelectedItem is null
+            handleSelectedItemChange={(newSelectedItem) =>
+              handleInputChange(index, 'key', newSelectedItem)
+            }
+            handleDropdownItemDisplay={handleDropdownItemDisplay}
+            handleSelectedItemDisplay={handleSeletedItemDisplay}
+            placeholder={t('channelsFormPlaceholder.modelMappingInput')}
+          />
+
+          <Input
+            flex={1}
+            h="32px"
+            value={row.value}
+            onChange={(e) => handleInputChange(index, 'value', e.target.value)}
+            placeholder={t('channelsFormPlaceholder.modelMappingOutput')}
+            py="8px"
+            px="12px"
+            borderRadius="6px"
+            border="1px solid var(--Gray-Modern-200, #E8EBF0)"
+            bgColor="white"
+            sx={{
+              '&::placeholder': {
+                color: 'grayModern.500',
+                fontFamily: '"PingFang SC"',
+                fontSize: '12px',
+                fontStyle: 'normal',
+                fontWeight: 400,
+                lineHeight: '16px',
+                letterSpacing: '0.048px'
+              }
+            }}
+          />
+
+          <Button
+            h="32px"
+            w="32px"
+            variant="ghost"
+            onClick={() => handleRemoveMapKeyPair(index)}
+            display="flex"
+            p="7px"
+            alignItems="center"
+            gap="6px"
+            borderRadius="6px"
+            _hover={{
+              bg: 'rgba(17, 24, 36, 0.05)',
+              color: '#D92D20'
+            }}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="19"
+              height="18"
+              viewBox="0 0 19 18"
+              fill="none">
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M9.34847 1.32764H10.5129C10.8763 1.32762 11.1931 1.32761 11.4548 1.34899C11.7321 1.37164 12.0127 1.42198 12.2841 1.56028C12.6858 1.76491 13.0123 2.09144 13.2169 2.49306C13.3552 2.76449 13.4056 3.04513 13.4282 3.32237C13.4462 3.54294 13.4491 3.80273 13.4495 4.09652H16.1607C16.5749 4.09652 16.9107 4.43231 16.9107 4.84652C16.9107 5.26074 16.5749 5.59652 16.1607 5.59652H15.5262V12.63C15.5262 13.1855 15.5262 13.6474 15.4954 14.0244C15.4634 14.4171 15.3942 14.7832 15.2181 15.1287C14.9471 15.6606 14.5147 16.093 13.9828 16.364C13.6374 16.54 13.2713 16.6092 12.8786 16.6413C12.5016 16.6721 12.0397 16.6721 11.4842 16.6721H8.37716C7.82169 16.6721 7.35977 16.6721 6.98277 16.6413C6.5901 16.6092 6.22398 16.54 5.87851 16.364C5.34664 16.093 4.91422 15.6606 4.64321 15.1287C4.46719 14.7832 4.39799 14.4171 4.36591 14.0244C4.33511 13.6474 4.33512 13.1855 4.33513 12.63L4.33513 5.59652H3.70068C3.28647 5.59652 2.95068 5.26074 2.95068 4.84652C2.95068 4.43231 3.28647 4.09652 3.70068 4.09652H6.41187C6.4123 3.80273 6.41512 3.54294 6.43314 3.32237C6.4558 3.04513 6.50613 2.76449 6.64443 2.49306C6.84907 2.09144 7.1756 1.76491 7.57722 1.56028C7.84864 1.42198 8.12929 1.37164 8.40653 1.34899C8.66821 1.32761 8.98509 1.32762 9.34847 1.32764ZM5.83513 5.59652V12.5994C5.83513 13.1933 5.83571 13.5936 5.86093 13.9023C5.88543 14.2022 5.9294 14.3489 5.97972 14.4477C6.10692 14.6973 6.30987 14.9003 6.5595 15.0275C6.65826 15.0778 6.80501 15.1218 7.10492 15.1463C7.41358 15.1715 7.81389 15.1721 8.40779 15.1721H11.4536C12.0475 15.1721 12.4478 15.1715 12.7564 15.1463C13.0563 15.1218 13.2031 15.0778 13.3019 15.0275C13.5515 14.9003 13.7544 14.6973 13.8816 14.4477C13.932 14.3489 13.9759 14.2022 14.0004 13.9023C14.0256 13.5936 14.0262 13.1933 14.0262 12.5994V5.59652H5.83513ZM11.9494 4.09652H7.91192C7.91246 3.80578 7.91512 3.60411 7.92816 3.44452C7.94324 3.26004 7.96834 3.19877 7.98094 3.17405C8.04177 3.05467 8.13883 2.95761 8.2582 2.89679C8.28293 2.88419 8.3442 2.85908 8.52868 2.84401C8.72191 2.82822 8.97684 2.82764 9.3769 2.82764H10.4845C10.8845 2.82764 11.1394 2.82822 11.3327 2.84401C11.5172 2.85908 11.5784 2.88419 11.6032 2.89679C11.7225 2.95761 11.8196 3.05467 11.8804 3.17405C11.893 3.19877 11.9181 3.26004 11.9332 3.44452C11.9462 3.60411 11.9489 3.80578 11.9494 4.09652ZM8.54624 7.90374C8.96045 7.90374 9.29624 8.23953 9.29624 8.65374V12.1149C9.29624 12.5291 8.96045 12.8649 8.54624 12.8649C8.13202 12.8649 7.79624 12.5291 7.79624 12.1149V8.65374C7.79624 8.23953 8.13202 7.90374 8.54624 7.90374ZM11.3151 7.90374C11.7293 7.90374 12.0651 8.23953 12.0651 8.65374V12.1149C12.0651 12.5291 11.7293 12.8649 11.3151 12.8649C10.9009 12.8649 10.5651 12.5291 10.5651 12.1149V8.65374C10.5651 8.23953 10.9009 7.90374 11.3151 7.90374Z"
+                fill="currentcolor"
+              />
+            </svg>
+          </Button>
+        </Flex>
+      ))}
+
+      {hasAvailableKeys && (
+        <Button
+          h="32px"
+          variant="unstyled"
+          onClick={handleAddNewMapKeyPair}
+          w="full"
+          display="flex"
+          p="8px 14px"
+          justifyContent="center"
+          alignItems="center"
+          gap="6px"
+          alignSelf="stretch"
+          borderRadius="6px"
+          border="1px solid var(--Gray-Modern-250, #DFE2EA)"
+          bg="white"
+          boxShadow="0px 1px 2px 0px rgba(19, 51, 107, 0.05), 0px 0px 1px 0px rgba(19, 51, 107, 0.08)">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="17"
+            height="16"
+            viewBox="0 0 17 16"
+            fill="none">
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M8.93068 2.6665C9.29887 2.6665 9.59735 2.96498 9.59735 3.33317V7.33317H13.5974C13.9655 7.33317 14.264 7.63165 14.264 7.99984C14.264 8.36803 13.9655 8.6665 13.5974 8.6665H9.59735V12.6665C9.59735 13.0347 9.29887 13.3332 8.93068 13.3332C8.56249 13.3332 8.26402 13.0347 8.26402 12.6665V8.6665H4.26402C3.89583 8.6665 3.59735 8.36803 3.59735 7.99984C3.59735 7.63165 3.89583 7.33317 4.26402 7.33317H8.26402V3.33317C8.26402 2.96498 8.56249 2.6665 8.93068 2.6665Z"
+              fill="#485264"
+            />
+          </svg>
+          <Text
+            color="grayModern.600"
+            fontFamily="PingFang SC"
+            fontSize="12px"
+            fontStyle="normal"
+            fontWeight={500}
+            lineHeight="16px"
+            letterSpacing="0.5px">
+            {t('channelsForm.add')}
+          </Text>
+        </Button>
+      )}
+    </VStack>
+  )
+}
+export default ConstructMappingComponent
diff --git a/frontend/providers/aiproxy/components/common/ConstructModeMappingComponent.tsx b/frontend/providers/aiproxy/components/common/ConstructModeMappingComponent.tsx
new file mode 100644
index 000000000000..76e8138ee0bc
--- /dev/null
+++ b/frontend/providers/aiproxy/components/common/ConstructModeMappingComponent.tsx
@@ -0,0 +1,475 @@
+import React, { useState, useEffect, useMemo } from 'react'
+import { Flex, FormLabel, Input, Button, Text, Box, Badge, VStack } from '@chakra-ui/react'
+import { useTranslationClientSide } from '@/app/i18n/client'
+import { useI18n } from '@/providers/i18n/i18nContext'
+import { CustomSelect } from './Select'
+type MapKeyValuePair = { key: string; value: string }
+
+type Model = {
+  name: string
+  isDefault: boolean
+}
+
+// mapKeys determines the available selection options
+export const ConstructModeMappingComponent = function ({
+  mapKeys,
+  mapData,
+  setMapData
+}: {
+  mapKeys: Model[]
+  mapData: Record<string, string>
+  setMapData: (mapping: Record<string, string>) => void
+}) {
+  const { lng } = useI18n()
+  const { t } = useTranslationClientSide(lng, 'common')
+
+  const [mapKeyValuePairs, setMapkeyValuePairs] = useState<Array<MapKeyValuePair>>([
+    { key: '', value: '' }
+  ])
+
+  const [isInternalUpdate, setIsInternalUpdate] = useState(false)
+
+  useEffect(() => {
+    if (!isInternalUpdate) {
+      const entries = Object.entries(mapData)
+      setMapkeyValuePairs(
+        entries.length > 0
+          ? entries.map(([key, value]) => ({ key, value }))
+          : [{ key: '', value: '' }]
+      )
+    }
+    setIsInternalUpdate(false)
+  }, [mapData])
+
+  const handleDropdownItemDisplay = (dropdownItem: Model | string) => {
+    if (dropdownItem === t('channelsFormPlaceholder.modelMappingInput')) {
+      return (
+        <Text
+          color="grayModern.600"
+          fontFamily="PingFang SC"
+          fontSize="12px"
+          fontStyle="normal"
+          fontWeight={400}
+          lineHeight="16px"
+          letterSpacing="0.048px">
+          {t('channelsFormPlaceholder.modelMappingInput')}
+        </Text>
+      )
+    }
+
+    if ((dropdownItem as Model).isDefault) {
+      return (
+        <Flex alignItems="center" gap="4px">
+          <Text
+            color="grayModern.600"
+            fontFamily="PingFang SC"
+            fontSize="12px"
+            fontStyle="normal"
+            fontWeight={400}
+            lineHeight="16px"
+            letterSpacing="0.048px">
+            {(dropdownItem as Model).name}
+          </Text>
+          <Badge
+            display="flex"
+            padding="4px 8px"
+            justifyContent="center"
+            alignItems="center"
+            gap="4px"
+            borderRadius="33px"
+            background="grayModern.100"
+            mixBlendMode="multiply">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="12"
+              height="12"
+              viewBox="0 0 12 12"
+              fill="none">
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M6.74997 0.714878L8.22533 1.56668L8.22345 1.56993C8.24059 1.57694 8.25731 1.58514 8.27351 1.59449C8.63523 1.80333 8.49477 2.44228 8.09298 2.55641C7.64176 2.68458 7.21349 2.86732 6.81576 3.09704C7.88708 4.08166 8.63497 5.4127 8.88183 6.91256C9.29901 6.66528 9.68171 6.36596 10.021 6.02354C10.3136 5.72817 10.9521 5.92322 10.9521 6.33902V7.99316C10.9521 8.52906 10.6662 9.02425 10.2021 9.2922L8.38215 10.3429L8.37557 10.3315C8.0325 10.4206 7.62541 9.98967 7.73357 9.62836C7.85051 9.2377 7.9264 8.82931 7.95623 8.40819C7.33755 8.59803 6.68053 8.7002 5.99963 8.7002C5.30124 8.7002 4.62795 8.59271 3.99541 8.39338C4.02377 8.80912 4.09702 9.21253 4.21034 9.59881C4.31853 9.96756 3.89749 10.4028 3.55054 10.2939L3.54609 10.3015L1.79785 9.2922C1.33375 9.02425 1.04785 8.52906 1.04785 7.99316V6.33971C1.04785 5.92389 1.68618 5.72882 1.97889 6.02416C2.3065 6.3547 2.67457 6.64506 3.07507 6.88719C3.32615 5.39769 4.07163 4.07611 5.1369 3.09704C4.74758 2.87218 4.329 2.69233 3.88826 2.56461C3.4869 2.4483 3.34916 1.81231 3.71105 1.60337C3.71916 1.59869 3.72741 1.59429 3.73577 1.59019L3.7353 1.58937L5.24997 0.714878C5.71407 0.446928 6.28587 0.446929 6.74997 0.714878ZM5.10359 1.95409C5.4076 2.09475 5.69921 2.25766 5.97633 2.44073C6.26144 2.25239 6.56189 2.08538 6.87539 1.94199L6.24997 1.5809C6.09527 1.49159 5.90467 1.49159 5.74997 1.5809L5.10359 1.95409ZM2.04785 7.40181V7.99316C2.04785 8.1718 2.14315 8.33686 2.29785 8.42618L3.03582 8.85224C3.00038 8.57396 2.98212 8.29031 2.98212 8.0024L2.98216 7.9791C2.65411 7.81211 2.34175 7.61875 2.04785 7.40181ZM8.91302 8.88175L9.70209 8.42618C9.85679 8.33686 9.95209 8.1718 9.95209 7.99316V7.40131C9.64413 7.6287 9.31588 7.83019 8.97055 8.00257C8.97054 8.30061 8.95096 8.59407 8.91302 8.88175ZM7.9346 7.36087C7.33089 7.58044 6.67925 7.7002 5.99963 7.7002C5.30321 7.7002 4.63616 7.57444 4.01995 7.34439C4.18895 5.88454 4.91333 4.59396 5.97633 3.68939C7.04334 4.59736 7.76917 5.89426 7.9346 7.36087Z"
+                fill="#667085"
+              />
+              <path
+                d="M8.79009 2.46925C8.65153 2.70844 8.73335 3.01468 8.97274 3.15289L9.70209 3.57399C9.85679 3.6633 9.95209 3.82837 9.95209 4.007V5.01917C9.95209 5.29532 10.1759 5.51917 10.4521 5.51917C10.7282 5.51917 10.9521 5.29532 10.9521 5.01917V4.007C10.9521 3.4711 10.6662 2.97591 10.2021 2.70796L9.47274 2.28687C9.23384 2.14894 8.92837 2.23055 8.79009 2.46925Z"
+                fill="#667085"
+              />
+              <path
+                d="M7.51448 10.2665C7.65255 10.5057 7.57062 10.8115 7.33147 10.9496L6.74997 11.2853C6.28587 11.5532 5.71407 11.5532 5.24997 11.2853L4.66318 10.9465C4.42378 10.8083 4.34197 10.502 4.48053 10.2629C4.61881 10.0242 4.92428 9.94254 5.16318 10.0805L5.74997 10.4193C5.90467 10.5086 6.09527 10.5086 6.24997 10.4193L6.83147 10.0835C7.07062 9.94546 7.37641 10.0274 7.51448 10.2665Z"
+                fill="#667085"
+              />
+              <path
+                d="M1.54785 5.52476C1.27171 5.52476 1.04785 5.3009 1.04785 5.02476V4.007C1.04785 3.4711 1.33375 2.97591 1.79785 2.70796L2.51571 2.29351C2.75485 2.15544 3.06065 2.23737 3.19872 2.47652C3.33679 2.71567 3.25485 3.02146 3.01571 3.15953L2.29785 3.57399C2.14315 3.6633 2.04785 3.82837 2.04785 4.007V5.02476C2.04785 5.3009 1.82399 5.52476 1.54785 5.52476Z"
+                fill="#667085"
+              />
+            </svg>
+          </Badge>
+        </Flex>
+      )
+    }
+    return (
+      <Text
+        color="grayModern.600"
+        fontFamily="PingFang SC"
+        fontSize="12px"
+        fontStyle="normal"
+        fontWeight={400}
+        lineHeight="16px"
+        letterSpacing="0.048px">
+        {(dropdownItem as Model).name}
+      </Text>
+    )
+  }
+
+  const handleSeletedItemDisplay = (selectedItem: Model | string) => {
+    if (selectedItem === t('channelsFormPlaceholder.modelMappingInput')) {
+      return (
+        <Text
+          color="grayModern.900"
+          fontFamily="PingFang SC"
+          fontSize="12px"
+          fontStyle="normal"
+          fontWeight={400}
+          lineHeight="16px"
+          letterSpacing="0.048px">
+          {t('channelsFormPlaceholder.modelMappingInput')}
+        </Text>
+      )
+    }
+
+    if ((selectedItem as Model).isDefault) {
+      return (
+        <Flex
+          alignItems="center"
+          gap="4px"
+          maxWidth="120px" // overflowX needed width
+          overflow="hidden" // ensure the overflow content is hidden
+        >
+          <Box
+            overflowX="auto" // overflowX needed for long text
+            whiteSpace="nowrap" // prevent text from wrapping
+            css={{
+              '&::-webkit-scrollbar': { display: 'none' },
+              msOverflowStyle: 'none',
+              scrollbarWidth: 'none'
+            }}>
+            <Text
+              color="grayModern.900"
+              fontFamily="PingFang SC"
+              fontSize="12px"
+              fontStyle="normal"
+              fontWeight={400}
+              lineHeight="16px"
+              letterSpacing="0.048px"
+              whiteSpace="nowrap" // prevent text from wrapping
+            >
+              {(selectedItem as Model).name}
+            </Text>
+          </Box>
+          <Badge
+            flexShrink={0}
+            display="flex"
+            padding="4px 8px"
+            justifyContent="center"
+            alignItems="center"
+            gap="4px"
+            borderRadius="33px"
+            background="grayModern.100"
+            mixBlendMode="multiply">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="12"
+              height="12"
+              viewBox="0 0 12 12"
+              fill="none">
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M6.74997 0.714878L8.22533 1.56668L8.22345 1.56993C8.24059 1.57694 8.25731 1.58514 8.27351 1.59449C8.63523 1.80333 8.49477 2.44228 8.09298 2.55641C7.64176 2.68458 7.21349 2.86732 6.81576 3.09704C7.88708 4.08166 8.63497 5.4127 8.88183 6.91256C9.29901 6.66528 9.68171 6.36596 10.021 6.02354C10.3136 5.72817 10.9521 5.92322 10.9521 6.33902V7.99316C10.9521 8.52906 10.6662 9.02425 10.2021 9.2922L8.38215 10.3429L8.37557 10.3315C8.0325 10.4206 7.62541 9.98967 7.73357 9.62836C7.85051 9.2377 7.9264 8.82931 7.95623 8.40819C7.33755 8.59803 6.68053 8.7002 5.99963 8.7002C5.30124 8.7002 4.62795 8.59271 3.99541 8.39338C4.02377 8.80912 4.09702 9.21253 4.21034 9.59881C4.31853 9.96756 3.89749 10.4028 3.55054 10.2939L3.54609 10.3015L1.79785 9.2922C1.33375 9.02425 1.04785 8.52906 1.04785 7.99316V6.33971C1.04785 5.92389 1.68618 5.72882 1.97889 6.02416C2.3065 6.3547 2.67457 6.64506 3.07507 6.88719C3.32615 5.39769 4.07163 4.07611 5.1369 3.09704C4.74758 2.87218 4.329 2.69233 3.88826 2.56461C3.4869 2.4483 3.34916 1.81231 3.71105 1.60337C3.71916 1.59869 3.72741 1.59429 3.73577 1.59019L3.7353 1.58937L5.24997 0.714878C5.71407 0.446928 6.28587 0.446929 6.74997 0.714878ZM5.10359 1.95409C5.4076 2.09475 5.69921 2.25766 5.97633 2.44073C6.26144 2.25239 6.56189 2.08538 6.87539 1.94199L6.24997 1.5809C6.09527 1.49159 5.90467 1.49159 5.74997 1.5809L5.10359 1.95409ZM2.04785 7.40181V7.99316C2.04785 8.1718 2.14315 8.33686 2.29785 8.42618L3.03582 8.85224C3.00038 8.57396 2.98212 8.29031 2.98212 8.0024L2.98216 7.9791C2.65411 7.81211 2.34175 7.61875 2.04785 7.40181ZM8.91302 8.88175L9.70209 8.42618C9.85679 8.33686 9.95209 8.1718 9.95209 7.99316V7.40131C9.64413 7.6287 9.31588 7.83019 8.97055 8.00257C8.97054 8.30061 8.95096 8.59407 8.91302 8.88175ZM7.9346 7.36087C7.33089 7.58044 6.67925 7.7002 5.99963 7.7002C5.30321 7.7002 4.63616 7.57444 4.01995 7.34439C4.18895 5.88454 4.91333 4.59396 5.97633 3.68939C7.04334 4.59736 7.76917 5.89426 7.9346 7.36087Z"
+                fill="#667085"
+              />
+              <path
+                d="M8.79009 2.46925C8.65153 2.70844 8.73335 3.01468 8.97274 3.15289L9.70209 3.57399C9.85679 3.6633 9.95209 3.82837 9.95209 4.007V5.01917C9.95209 5.29532 10.1759 5.51917 10.4521 5.51917C10.7282 5.51917 10.9521 5.29532 10.9521 5.01917V4.007C10.9521 3.4711 10.6662 2.97591 10.2021 2.70796L9.47274 2.28687C9.23384 2.14894 8.92837 2.23055 8.79009 2.46925Z"
+                fill="#667085"
+              />
+              <path
+                d="M7.51448 10.2665C7.65255 10.5057 7.57062 10.8115 7.33147 10.9496L6.74997 11.2853C6.28587 11.5532 5.71407 11.5532 5.24997 11.2853L4.66318 10.9465C4.42378 10.8083 4.34197 10.502 4.48053 10.2629C4.61881 10.0242 4.92428 9.94254 5.16318 10.0805L5.74997 10.4193C5.90467 10.5086 6.09527 10.5086 6.24997 10.4193L6.83147 10.0835C7.07062 9.94546 7.37641 10.0274 7.51448 10.2665Z"
+                fill="#667085"
+              />
+              <path
+                d="M1.54785 5.52476C1.27171 5.52476 1.04785 5.3009 1.04785 5.02476V4.007C1.04785 3.4711 1.33375 2.97591 1.79785 2.70796L2.51571 2.29351C2.75485 2.15544 3.06065 2.23737 3.19872 2.47652C3.33679 2.71567 3.25485 3.02146 3.01571 3.15953L2.29785 3.57399C2.14315 3.6633 2.04785 3.82837 2.04785 4.007V5.02476C2.04785 5.3009 1.82399 5.52476 1.54785 5.52476Z"
+                fill="#667085"
+              />
+            </svg>
+          </Badge>
+        </Flex>
+      )
+    }
+    return (
+      <Box
+        maxWidth="114px"
+        overflowX="auto" // overflowX needed for long text
+        whiteSpace="nowrap" // prevent text from wrapping
+        css={{
+          '&::-webkit-scrollbar': { display: 'none' },
+          msOverflowStyle: 'none',
+          scrollbarWidth: 'none'
+        }}>
+        <Text
+          color="grayModern.900"
+          fontFamily="PingFang SC"
+          fontSize="12px"
+          fontStyle="normal"
+          fontWeight={400}
+          lineHeight="16px"
+          letterSpacing="0.048px">
+          {(selectedItem as Model).name}
+        </Text>
+      </Box>
+    )
+  }
+
+  // Handling mapData and mapKeyValuePairs cleanup when map keys change.
+  useEffect(() => {
+    // 1. Handle mapData cleanup
+    const removedKeys = Object.keys(mapData).filter(
+      (key) => !mapKeys.some((model) => model.name === key)
+    )
+    if (removedKeys.length > 0) {
+      // If there are mappings with removed keys, delete them
+      const newMapData = { ...mapData }
+      removedKeys.forEach((key) => {
+        delete newMapData[key]
+      })
+      setIsInternalUpdate(true)
+      setMapData(newMapData)
+    }
+
+    // 2. Handle mapKeyValuePairs cleanup
+    const removedPairs = mapKeyValuePairs.filter(
+      (pair) => pair.key && !mapKeys.some((model) => model.name === pair.key)
+    )
+    if (removedPairs.length > 0) {
+      const newMapKeyValuePairs = mapKeyValuePairs.filter(
+        (pair) => !pair.key || mapKeys.some((model) => model.name === pair.key)
+      )
+      setMapkeyValuePairs(newMapKeyValuePairs)
+    }
+  }, [mapKeys])
+
+  // Get the keys that have been selected
+  const getSelectedMapKeys = (currentIndex: number) => {
+    const selected = new Set<string>()
+    mapKeyValuePairs.forEach((mapKeyValuePair, idx) => {
+      if (idx !== currentIndex && mapKeyValuePair.key) {
+        selected.add(mapKeyValuePair.key)
+      }
+    })
+    return selected
+  }
+
+  // Handling adding a new row
+  const handleAddNewMapKeyPair = () => {
+    setMapkeyValuePairs([...mapKeyValuePairs, { key: '', value: '' }])
+  }
+
+  // Handling deleting a row
+  const handleRemoveMapKeyPair = (index: number) => {
+    const mapKeyValuePair = mapKeyValuePairs[index]
+    const newMapData = { ...mapData }
+    if (mapKeyValuePair.key) {
+      delete newMapData[mapKeyValuePair.key]
+    }
+    setIsInternalUpdate(true)
+    setMapData(newMapData)
+
+    const newMapKeyValuePairs = mapKeyValuePairs.filter((_, idx) => idx !== index)
+    setMapkeyValuePairs(newMapKeyValuePairs)
+  }
+
+  // Handling selection/input changes
+  const handleInputChange = (index: number, field: 'key' | 'value', value: string) => {
+    const newMapKeyValuePairs = [...mapKeyValuePairs]
+    const oldValue = newMapKeyValuePairs[index][field]
+    newMapKeyValuePairs[index][field] = value
+
+    // Update the mapping relationship
+    const newMapData = { ...mapData }
+    if (field === 'key') {
+      if (oldValue) delete newMapData[oldValue]
+
+      if (!value) {
+        newMapKeyValuePairs[index].value = ''
+      }
+
+      if (value && newMapKeyValuePairs[index].value) {
+        newMapData[value] = newMapKeyValuePairs[index].value
+      }
+    } else {
+      if (newMapKeyValuePairs[index].key) {
+        newMapData[newMapKeyValuePairs[index].key] = value
+      }
+    }
+
+    setMapkeyValuePairs(newMapKeyValuePairs)
+    setIsInternalUpdate(true)
+    setMapData(newMapData)
+  }
+
+  // Check if there are still keys that can be selected
+  const hasAvailableKeys = useMemo(() => {
+    const usedKeys = new Set(
+      mapKeyValuePairs.map((mapKeyValuePair) => mapKeyValuePair.key).filter(Boolean)
+    )
+    return (
+      mapKeyValuePairs.length < mapKeys.length &&
+      mapKeys.some((mapKey) => !usedKeys.has(mapKey.name))
+    )
+  }, [mapKeys, mapKeyValuePairs])
+
+  return (
+    <VStack w="full" align="stretch" alignItems="flex-start" spacing="8px">
+      <FormLabel
+        whiteSpace="nowrap"
+        color="grayModern.900"
+        fontFamily="PingFang SC"
+        fontSize="14px"
+        fontStyle="normal"
+        fontWeight={500}
+        lineHeight="20px"
+        letterSpacing="0.1px"
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+        h="20px"
+        m={0}>
+        {t('channelsForm.model_mapping')}
+      </FormLabel>
+
+      {mapKeyValuePairs.map((row, index) => (
+        <Flex key={`${index}-${row.key}`} gap="8px" w="full" alignItems="center">
+          <Box flex={1}>
+            <CustomSelect<Model>
+              listItems={mapKeys.filter((model) => !getSelectedMapKeys(index).has(model.name))}
+              initSelectedItem={row.key ? mapKeys.find((item) => item.name === row.key) : undefined}
+              // when select placeholder, the newSelectedItem is null
+              handleSelectedItemChange={(newSelectedItem) => {
+                if (newSelectedItem) {
+                  handleInputChange(index, 'key', newSelectedItem.name)
+                } else {
+                  handleInputChange(index, 'key', '')
+                }
+              }}
+              handleDropdownItemDisplay={handleDropdownItemDisplay}
+              handleSelectedItemDisplay={handleSeletedItemDisplay}
+              placeholder={t('channelsFormPlaceholder.modelMappingInput')}
+            />
+          </Box>
+
+          <Box flex="1" flexShrink={0}>
+            <Input
+              w="full"
+              h="32px"
+              value={row.value}
+              onChange={(e) => handleInputChange(index, 'value', e.target.value)}
+              placeholder={t('channelsFormPlaceholder.modelMappingOutput')}
+              py="8px"
+              px="12px"
+              borderRadius="6px"
+              border="1px solid var(--Gray-Modern-200, #E8EBF0)"
+              bgColor="white"
+              _hover={{ borderColor: 'grayModern.300' }}
+              _focus={{ borderColor: 'grayModern.300' }}
+              _focusVisible={{ borderColor: 'grayModern.300' }}
+              _active={{ borderColor: 'grayModern.300' }}
+              sx={{
+                '&::placeholder': {
+                  color: 'grayModern.500',
+                  fontFamily: '"PingFang SC"',
+                  fontSize: '12px',
+                  fontStyle: 'normal',
+                  fontWeight: 400,
+                  lineHeight: '16px',
+                  letterSpacing: '0.048px'
+                }
+              }}
+            />
+          </Box>
+
+          <Button
+            h="32px"
+            w="32px"
+            variant="ghost"
+            onClick={() => handleRemoveMapKeyPair(index)}
+            display="flex"
+            p="7px"
+            alignItems="center"
+            gap="6px"
+            borderRadius="6px"
+            _hover={{
+              bg: 'rgba(17, 24, 36, 0.05)',
+              color: '#D92D20'
+            }}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="19"
+              height="18"
+              viewBox="0 0 19 18"
+              fill="none">
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M9.34847 1.32764H10.5129C10.8763 1.32762 11.1931 1.32761 11.4548 1.34899C11.7321 1.37164 12.0127 1.42198 12.2841 1.56028C12.6858 1.76491 13.0123 2.09144 13.2169 2.49306C13.3552 2.76449 13.4056 3.04513 13.4282 3.32237C13.4462 3.54294 13.4491 3.80273 13.4495 4.09652H16.1607C16.5749 4.09652 16.9107 4.43231 16.9107 4.84652C16.9107 5.26074 16.5749 5.59652 16.1607 5.59652H15.5262V12.63C15.5262 13.1855 15.5262 13.6474 15.4954 14.0244C15.4634 14.4171 15.3942 14.7832 15.2181 15.1287C14.9471 15.6606 14.5147 16.093 13.9828 16.364C13.6374 16.54 13.2713 16.6092 12.8786 16.6413C12.5016 16.6721 12.0397 16.6721 11.4842 16.6721H8.37716C7.82169 16.6721 7.35977 16.6721 6.98277 16.6413C6.5901 16.6092 6.22398 16.54 5.87851 16.364C5.34664 16.093 4.91422 15.6606 4.64321 15.1287C4.46719 14.7832 4.39799 14.4171 4.36591 14.0244C4.33511 13.6474 4.33512 13.1855 4.33513 12.63L4.33513 5.59652H3.70068C3.28647 5.59652 2.95068 5.26074 2.95068 4.84652C2.95068 4.43231 3.28647 4.09652 3.70068 4.09652H6.41187C6.4123 3.80273 6.41512 3.54294 6.43314 3.32237C6.4558 3.04513 6.50613 2.76449 6.64443 2.49306C6.84907 2.09144 7.1756 1.76491 7.57722 1.56028C7.84864 1.42198 8.12929 1.37164 8.40653 1.34899C8.66821 1.32761 8.98509 1.32762 9.34847 1.32764ZM5.83513 5.59652V12.5994C5.83513 13.1933 5.83571 13.5936 5.86093 13.9023C5.88543 14.2022 5.9294 14.3489 5.97972 14.4477C6.10692 14.6973 6.30987 14.9003 6.5595 15.0275C6.65826 15.0778 6.80501 15.1218 7.10492 15.1463C7.41358 15.1715 7.81389 15.1721 8.40779 15.1721H11.4536C12.0475 15.1721 12.4478 15.1715 12.7564 15.1463C13.0563 15.1218 13.2031 15.0778 13.3019 15.0275C13.5515 14.9003 13.7544 14.6973 13.8816 14.4477C13.932 14.3489 13.9759 14.2022 14.0004 13.9023C14.0256 13.5936 14.0262 13.1933 14.0262 12.5994V5.59652H5.83513ZM11.9494 4.09652H7.91192C7.91246 3.80578 7.91512 3.60411 7.92816 3.44452C7.94324 3.26004 7.96834 3.19877 7.98094 3.17405C8.04177 3.05467 8.13883 2.95761 8.2582 2.89679C8.28293 2.88419 8.3442 2.85908 8.52868 2.84401C8.72191 2.82822 8.97684 2.82764 9.3769 2.82764H10.4845C10.8845 2.82764 11.1394 2.82822 11.3327 2.84401C11.5172 2.85908 11.5784 2.88419 11.6032 2.89679C11.7225 2.95761 11.8196 3.05467 11.8804 3.17405C11.893 3.19877 11.9181 3.26004 11.9332 3.44452C11.9462 3.60411 11.9489 3.80578 11.9494 4.09652ZM8.54624 7.90374C8.96045 7.90374 9.29624 8.23953 9.29624 8.65374V12.1149C9.29624 12.5291 8.96045 12.8649 8.54624 12.8649C8.13202 12.8649 7.79624 12.5291 7.79624 12.1149V8.65374C7.79624 8.23953 8.13202 7.90374 8.54624 7.90374ZM11.3151 7.90374C11.7293 7.90374 12.0651 8.23953 12.0651 8.65374V12.1149C12.0651 12.5291 11.7293 12.8649 11.3151 12.8649C10.9009 12.8649 10.5651 12.5291 10.5651 12.1149V8.65374C10.5651 8.23953 10.9009 7.90374 11.3151 7.90374Z"
+                fill="currentcolor"
+              />
+            </svg>
+          </Button>
+        </Flex>
+      ))}
+
+      {hasAvailableKeys && (
+        <Button
+          h="32px"
+          variant="unstyled"
+          onClick={handleAddNewMapKeyPair}
+          w="full"
+          display="flex"
+          p="8px 14px"
+          justifyContent="center"
+          alignItems="center"
+          gap="6px"
+          alignSelf="stretch"
+          borderRadius="6px"
+          border="1px solid var(--Gray-Modern-250, #DFE2EA)"
+          bg="white"
+          boxShadow="0px 1px 2px 0px rgba(19, 51, 107, 0.05), 0px 0px 1px 0px rgba(19, 51, 107, 0.08)">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="17"
+            height="16"
+            viewBox="0 0 17 16"
+            fill="none">
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M8.93068 2.6665C9.29887 2.6665 9.59735 2.96498 9.59735 3.33317V7.33317H13.5974C13.9655 7.33317 14.264 7.63165 14.264 7.99984C14.264 8.36803 13.9655 8.6665 13.5974 8.6665H9.59735V12.6665C9.59735 13.0347 9.29887 13.3332 8.93068 13.3332C8.56249 13.3332 8.26402 13.0347 8.26402 12.6665V8.6665H4.26402C3.89583 8.6665 3.59735 8.36803 3.59735 7.99984C3.59735 7.63165 3.89583 7.33317 4.26402 7.33317H8.26402V3.33317C8.26402 2.96498 8.56249 2.6665 8.93068 2.6665Z"
+              fill="#485264"
+            />
+          </svg>
+          <Text
+            color="grayModern.600"
+            fontFamily="PingFang SC"
+            fontSize="12px"
+            fontStyle="normal"
+            fontWeight={500}
+            lineHeight="16px"
+            letterSpacing="0.5px">
+            {t('channelsForm.add')}
+          </Text>
+        </Button>
+      )}
+    </VStack>
+  )
+}
+export default ConstructModeMappingComponent
diff --git a/frontend/providers/aiproxy/components/common/EditableTextNoLable.tsx b/frontend/providers/aiproxy/components/common/EditableTextNoLable.tsx
new file mode 100644
index 000000000000..0f9df6ff5254
--- /dev/null
+++ b/frontend/providers/aiproxy/components/common/EditableTextNoLable.tsx
@@ -0,0 +1,172 @@
+'use client'
+import React, { useState } from 'react'
+import {
+  Flex,
+  Text,
+  Button,
+  Input,
+  useDisclosure,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverBody,
+  HStack,
+  FlexProps,
+  Box
+} from '@chakra-ui/react'
+import { CheckIcon, CloseIcon } from '@chakra-ui/icons'
+
+interface EditableTextProps {
+  value: string | number
+  onSubmit: (value: string) => void
+  flexProps?: FlexProps
+}
+
+export const EditableTextNoLable = ({ value, onSubmit, flexProps }: EditableTextProps) => {
+  const [editValue, setEditValue] = useState(String(value))
+  const { isOpen, onOpen, onClose } = useDisclosure()
+
+  const handleSubmit = () => {
+    onSubmit(editValue)
+    onClose()
+  }
+
+  const handleCancel = () => {
+    // 关闭时 恢复到传递来的初始值
+    setEditValue(String(value))
+    onClose()
+  }
+
+  return (
+    <Popover isOpen={isOpen} onClose={handleCancel} placement="bottom-end">
+      <PopoverTrigger>
+        <Flex alignItems="center" gap="8px" {...flexProps}>
+          <Text
+            color="grayModern.600"
+            fontFamily="PingFang SC"
+            fontSize="14px"
+            fontStyle="normal"
+            fontWeight="400"
+            lineHeight="20px"
+            letterSpacing="0.25px">
+            {value}
+          </Text>
+          <Button
+            onClick={onOpen}
+            variant="ghost"
+            size="sm"
+            display="flex"
+            p="4px"
+            alignItems="center"
+            gap="6px"
+            borderRadius="6px">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="17"
+              height="16"
+              viewBox="0 0 17 16"
+              fill="none">
+              <path
+                d="M2.35532 12.6736C2.34997 12.6822 2.34494 12.691 2.34024 12.7C2.29614 12.7849 2.29614 12.8965 2.29614 13.1195V13.4633C2.29614 13.6864 2.29614 13.7979 2.34024 13.8828C2.3774 13.9544 2.43573 14.0127 2.50727 14.0499C2.59216 14.094 2.70369 14.094 2.92675 14.094H3.26459C3.45553 14.094 3.56475 14.094 3.64549 14.0663C3.65082 14.0648 3.65613 14.0632 3.66142 14.0615C3.79824 14.0182 3.91653 13.8999 4.15312 13.6633L11.6771 6.13933L10.254 4.7162L2.72999 12.2402C2.52747 12.4427 2.41162 12.5586 2.35532 12.6736Z"
+                fill="#485264"
+              />
+              <path
+                d="M12.8543 4.96222L11.4311 3.53909L12.758 2.21221C12.7756 2.1946 12.7847 2.18549 12.7924 2.17817C13.171 1.81561 13.7681 1.81561 14.1468 2.17817C14.1544 2.1855 14.1633 2.19435 14.1809 2.21201L14.1815 2.21263C14.1991 2.23014 14.2079 2.23896 14.2152 2.24659C14.5777 2.62526 14.5777 3.2223 14.2152 3.60097C14.2078 3.60866 14.1989 3.61755 14.1811 3.63534L12.8543 4.96222Z"
+                fill="#485264"
+              />
+              <path
+                d="M7.19259 13.3011C7.19259 12.8632 7.54756 12.5083 7.98544 12.5083H14.7723C15.2102 12.5083 15.5651 12.8632 15.5651 13.3011C15.5651 13.739 15.2102 14.094 14.7723 14.094H7.98544C7.54756 14.094 7.19259 13.739 7.19259 13.3011Z"
+                fill="#485264"
+              />
+            </svg>
+          </Button>
+        </Flex>
+      </PopoverTrigger>
+      <PopoverContent w="150px">
+        <PopoverBody>
+          <Flex direction="column" gap="6px">
+            <Input
+              fontFamily="PingFang SC"
+              fontSize="14px"
+              fontStyle="normal"
+              fontWeight="400"
+              lineHeight="20px"
+              letterSpacing="0.25px"
+              value={editValue}
+              onChange={(e) => setEditValue(e.target.value)}
+              minW="0"
+              w="full"
+              h="28px"
+              borderRadius="6px"
+              border="1px solid var(--Gray-Modern-200, #E8EBF0)"
+              bgColor="white"
+              _hover={{ borderColor: 'grayModern.300' }}
+              _focus={{ borderColor: 'grayModern.300' }}
+              _focusVisible={{ borderColor: 'grayModern.300' }}
+              _active={{ borderColor: 'grayModern.300' }}
+              autoFocus
+            />
+            <HStack justifyContent="flex-end" spacing="6px">
+              <Button
+                h="24px"
+                w="32px"
+                justifyContent="center"
+                alignItems="center"
+                borderRadius="6px"
+                bg="grayModern.900"
+                boxShadow="0px 1px 2px 0px rgba(19, 51, 107, 0.05), 0px 0px 1px 0px rgba(19, 51, 107, 0.08)"
+                color="white"
+                transition="all 0.2s ease"
+                _hover={{
+                  transform: 'scale(1.05)',
+                  transition: 'transform 0.2s ease'
+                }}
+                _active={{
+                  transform: 'scale(0.92)',
+                  animation: 'pulse 0.3s ease'
+                }}
+                sx={{
+                  '@keyframes pulse': {
+                    '0%': { transform: 'scale(0.92)' },
+                    '50%': { transform: 'scale(0.96)' },
+                    '100%': { transform: 'scale(0.92)' }
+                  }
+                }}
+                onClick={handleCancel}>
+                <CloseIcon />
+              </Button>
+              <Button
+                h="24px"
+                w="32px"
+                justifyContent="center"
+                alignItems="center"
+                borderRadius="6px"
+                bg="grayModern.900"
+                boxShadow="0px 1px 2px 0px rgba(19, 51, 107, 0.05), 0px 0px 1px 0px rgba(19, 51, 107, 0.08)"
+                color="white"
+                transition="all 0.2s ease"
+                _hover={{
+                  transform: 'scale(1.05)',
+                  transition: 'transform 0.2s ease'
+                }}
+                _active={{
+                  transform: 'scale(0.92)',
+                  animation: 'pulse 0.3s ease'
+                }}
+                sx={{
+                  '@keyframes pulse': {
+                    '0%': { transform: 'scale(0.92)' },
+                    '50%': { transform: 'scale(0.96)' },
+                    '100%': { transform: 'scale(0.92)' }
+                  }
+                }}
+                onClick={handleSubmit}>
+                <CheckIcon />
+              </Button>
+            </HStack>
+          </Flex>
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/frontend/providers/aiproxy/components/common/MultiSelectCombobox.tsx b/frontend/providers/aiproxy/components/common/MultiSelectCombobox.tsx
new file mode 100644
index 000000000000..c0b912ae73a6
--- /dev/null
+++ b/frontend/providers/aiproxy/components/common/MultiSelectCombobox.tsx
@@ -0,0 +1,405 @@
+'use client'
+import {
+  Box,
+  Button,
+  Flex,
+  Text,
+  InputGroup,
+  Input,
+  FormLabel,
+  VStack,
+  ListItem,
+  List
+} from '@chakra-ui/react'
+import { useTranslationClientSide } from '@/app/i18n/client'
+import { useI18n } from '@/providers/i18n/i18nContext'
+import { useState, useMemo, Dispatch, SetStateAction, ReactNode } from 'react'
+import { useCombobox, useMultipleSelection } from 'downshift'
+
+export const MultiSelectCombobox = function <T>({
+  dropdownItems,
+  selectedItems,
+  setSelectedItems,
+  handleFilteredDropdownItems,
+  handleDropdownItemDisplay,
+  handleSelectedItemDisplay,
+  handleSetCustomSelectedItem
+}: {
+  dropdownItems: T[]
+  selectedItems: T[]
+  setSelectedItems: Dispatch<SetStateAction<T[]>>
+  handleFilteredDropdownItems: (dropdownItems: T[], selectedItems: T[], inputValue: string) => T[]
+  handleDropdownItemDisplay: (dropdownItem: T) => ReactNode
+  handleSelectedItemDisplay: (selectedItem: T) => ReactNode
+  handleSetCustomSelectedItem?: (
+    selectedItems: T[],
+    setSelectedItems: Dispatch<SetStateAction<T[]>>,
+    customSelectedItemName: string,
+    setCustomSelectedItemName: Dispatch<SetStateAction<string>>
+  ) => void
+}): JSX.Element {
+  const { lng } = useI18n()
+  const { t } = useTranslationClientSide(lng, 'common')
+
+  const [inputValue, setInputValue] = useState<string>('')
+  const [customSelectedItemName, setCustomSelectedItemName] = useState('')
+
+  // Dropdown list excludes already selected options and includes those matching the input.
+  const items = useMemo(
+    () => handleFilteredDropdownItems(dropdownItems, selectedItems, inputValue),
+    [inputValue, selectedItems, dropdownItems, handleFilteredDropdownItems]
+  )
+
+  // 对已经选中的项目 添加处理事件
+  const { getSelectedItemProps, getDropdownProps, removeSelectedItem } = useMultipleSelection({
+    selectedItems,
+    onStateChange({ selectedItems: newSelectedItems, type }) {
+      switch (type) {
+        case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace:
+        case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete:
+        case useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace:
+        case useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem:
+          if (newSelectedItems) {
+            setSelectedItems(newSelectedItems)
+          }
+          break
+        default:
+          break
+      }
+    }
+  })
+  const {
+    isOpen,
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    getInputProps,
+    highlightedIndex,
+    getItemProps,
+    selectedItem
+  } = useCombobox({
+    items,
+    defaultHighlightedIndex: 0, // after selection, highlight the first item.
+    selectedItem: null,
+    inputValue,
+    stateReducer(state, actionAndChanges) {
+      const { changes, type } = actionAndChanges
+
+      switch (type) {
+        case useCombobox.stateChangeTypes.InputKeyDownEnter:
+        case useCombobox.stateChangeTypes.ItemClick:
+          return {
+            ...changes,
+            isOpen: true, // keep the menu open after selection.
+            highlightedIndex: 0 // with the first option highlighted.
+          }
+        default:
+          return changes
+      }
+    },
+    onStateChange({ inputValue: newInputValue, type, selectedItem: newSelectedItem }) {
+      switch (type) {
+        case useCombobox.stateChangeTypes.InputKeyDownEnter:
+        case useCombobox.stateChangeTypes.ItemClick:
+        case useCombobox.stateChangeTypes.InputBlur:
+          if (newSelectedItem) {
+            setSelectedItems([...selectedItems, newSelectedItem])
+            setInputValue('')
+          }
+          break
+
+        case useCombobox.stateChangeTypes.InputChange:
+          setInputValue(newInputValue ?? '')
+
+          break
+        default:
+          break
+      }
+    }
+  })
+
+  return (
+    <Box w="full">
+      <VStack w="full" align="stretch" alignItems="flex-start" spacing="8px">
+        <FormLabel
+          display="flex"
+          m={0}
+          w="full"
+          h={handleSetCustomSelectedItem ? '28px' : '20px'}
+          justifyContent="space-between"
+          alignItems="center"
+          {...getLabelProps()}>
+          <Flex gap="3.5px" alignItems="flex-start">
+            <Text
+              whiteSpace="nowrap"
+              color="grayModern.900"
+              fontFamily="PingFang SC"
+              fontSize="14px"
+              fontStyle="normal"
+              fontWeight={500}
+              lineHeight="20px"
+              letterSpacing="0.1px">
+              {t('channelsForm.models')}
+            </Text>
+            <Text
+              color="red.600"
+              fontFamily="PingFang SC"
+              fontSize="14px"
+              fontStyle="normal"
+              fontWeight={500}
+              lineHeight="20px"
+              letterSpacing="0.1px">
+              *
+            </Text>
+          </Flex>
+          {handleSetCustomSelectedItem && (
+            <InputGroup
+              minW="0"
+              w="270px"
+              h="28px"
+              alignItems="center"
+              gap="8px"
+              display="flex"
+              marginLeft="auto">
+              <Input
+                display="flex"
+                w="220px"
+                h="28px"
+                py="6px"
+                px="12px"
+                alignItems="center"
+                borderRadius="4px"
+                border="1px solid"
+                borderColor="grayModern.200"
+                bgColor="grayModern.50"
+                _hover={{ borderColor: 'grayModern.300' }}
+                _focus={{ borderColor: 'grayModern.300' }}
+                _focusVisible={{ borderColor: 'grayModern.300' }}
+                _active={{ borderColor: 'grayModern.300' }}
+                // _invalid={{ borderColor: 'red.500' }}
+                // _disabled={{ borderColor: 'grayModern.200' }}
+                placeholder={t('channelsFormPlaceholder.modelInput')}
+                _placeholder={{
+                  color: 'grayModern.500',
+                  fontFamily: 'PingFang SC',
+                  fontSize: '12px',
+                  fontWeight: 400,
+                  lineHeight: '16px',
+                  letterSpacing: '0.048px'
+                }}
+                value={customSelectedItemName}
+                onChange={(e) => setCustomSelectedItemName(e.target.value)}
+              />
+              <Button
+                w="50px"
+                h="28px"
+                variant="unstyled"
+                display="flex"
+                padding="6px 12px"
+                justifyContent="center"
+                alignItems="center"
+                gap="2px"
+                borderRadius="4px"
+                border="1px solid"
+                borderColor="grayModern.250"
+                background="white"
+                boxShadow="0px 1px 2px 0px rgba(19, 51, 107, 0.05), 0px 0px 1px 0px rgba(19, 51, 107, 0.08)"
+                onClick={() => {
+                  handleSetCustomSelectedItem(
+                    selectedItems,
+                    setSelectedItems,
+                    customSelectedItemName,
+                    setCustomSelectedItemName
+                  )
+                }}
+                _hover={{
+                  transform: 'scale(1.05)',
+                  transition: 'transform 0.2s ease'
+                }}
+                _active={{
+                  transform: 'scale(0.92)',
+                  animation: 'pulse 0.3s ease'
+                }}
+                sx={{
+                  '@keyframes pulse': {
+                    '0%': { transform: 'scale(0.92)' },
+                    '50%': { transform: 'scale(0.96)' },
+                    '100%': { transform: 'scale(0.92)' }
+                  }
+                }}>
+                <Text
+                  whiteSpace="nowrap"
+                  color="grayModern.600"
+                  fontFamily="PingFang SC"
+                  fontSize="12px"
+                  fontStyle="normal"
+                  fontWeight={500}
+                  lineHeight="16px"
+                  letterSpacing="0.5px">
+                  {t('common.add')}
+                </Text>
+              </Button>
+            </InputGroup>
+          )}
+        </FormLabel>
+
+        <Box
+          w="full"
+          bg="grayModern.50"
+          borderRadius="6px"
+          border="1px solid"
+          borderColor="grayModern.200"
+          p="8px">
+          <Flex wrap="wrap" gap="8px" alignItems="center">
+            {selectedItems.map((selectedItemForRender, index) => (
+              <Box
+                key={`selected-item-${index}`}
+                bg="grayModern.200"
+                borderRadius="6px"
+                px="6px"
+                py="4px"
+                _focus={{ bg: 'red.100' }}
+                {...getSelectedItemProps({
+                  selectedItem: selectedItemForRender,
+                  index: index
+                })}>
+                <Flex alignItems="center" gap="8px">
+                  {handleSelectedItemDisplay(selectedItemForRender)}
+                  <Box
+                    h="16px"
+                    w="16px"
+                    borderRadius="4px"
+                    alignItems="center"
+                    justifyContent="center"
+                    cursor="pointer"
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      removeSelectedItem(selectedItemForRender)
+                    }}>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      fill="none">
+                      <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="M12.2083 3.79145C12.4686 4.0518 12.4686 4.47391 12.2083 4.73426L8.94289 7.99967L12.2083 11.2651C12.4687 11.5255 12.4687 11.9476 12.2083 12.2079C11.948 12.4683 11.5259 12.4683 11.2655 12.2079L8.00008 8.94248L4.73463 12.2079C4.47428 12.4683 4.05217 12.4683 3.79182 12.2079C3.53147 11.9476 3.53147 11.5255 3.79182 11.2651L7.05727 7.99967L3.79186 4.73426C3.53152 4.47391 3.53151 4.0518 3.79186 3.79145C4.05221 3.5311 4.47432 3.5311 4.73467 3.79145L8.00008 7.05686L11.2655 3.79145C11.5258 3.5311 11.9479 3.5311 12.2083 3.79145Z"
+                        fill="#667085"
+                      />
+                    </svg>
+                  </Box>
+                </Flex>
+              </Box>
+            ))}
+
+            <Flex flex={1} gap="4px">
+              <Input
+                variant="unstyled"
+                fontSize="12px"
+                color="grayModern.900"
+                fontFamily="PingFang SC"
+                placeholder={t('channelsFormPlaceholder.model')}
+                fontWeight={400}
+                lineHeight="16px"
+                letterSpacing="0.048px"
+                _placeholder={{
+                  color: 'grayModern.500',
+                  fontFamily: 'PingFang SC',
+                  fontSize: '12px',
+                  fontWeight: 400,
+                  lineHeight: '16px',
+                  letterSpacing: '0.048px'
+                }}
+                {...getInputProps(getDropdownProps({ preventKeyAction: isOpen }))}
+              />
+
+              <Button
+                right={0}
+                h="32px"
+                w="32px"
+                variant="unstyled"
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+                {...getToggleButtonProps()}>
+                {isOpen ? (
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="17"
+                    height="16"
+                    viewBox="0 0 17 16"
+                    fill="none">
+                    <path
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      d="M4.32148 10.4715C4.58183 10.7318 5.00394 10.7318 5.26429 10.4715L8.79289 6.94289L12.3215 10.4715C12.5818 10.7318 13.0039 10.7318 13.2643 10.4715C13.5246 10.2111 13.5246 9.78903 13.2643 9.52868L9.26429 5.52868C9.00394 5.26833 8.58183 5.26833 8.32148 5.52868L4.32148 9.52868C4.06113 9.78903 4.06113 10.2111 4.32148 10.4715Z"
+                      fill="#667085"
+                    />
+                  </svg>
+                ) : (
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="17"
+                    height="16"
+                    viewBox="0 0 17 16"
+                    fill="none">
+                    <path
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      d="M4.32148 5.52851C4.58183 5.26816 5.00394 5.26816 5.26429 5.52851L8.79289 9.05711L12.3215 5.52851C12.5818 5.26816 13.0039 5.26816 13.2643 5.52851C13.5246 5.78886 13.5246 6.21097 13.2643 6.47132L9.26429 10.4713C9.00394 10.7317 8.58183 10.7317 8.32148 10.4713L4.32148 6.47132C4.06113 6.21097 4.06113 5.78886 4.32148 5.52851Z"
+                      fill="#667085"
+                    />
+                  </svg>
+                )}
+              </Button>
+            </Flex>
+          </Flex>
+        </Box>
+      </VStack>
+
+      <List
+        position="absolute"
+        mt="2px"
+        w="full"
+        py="6px"
+        pl="6px"
+        pr="6px"
+        bg="white"
+        alignItems="flex-start"
+        boxShadow="0px 12px 16px -4px rgba(19, 51, 107, 0.20), 0px 0px 1px 0px rgba(19, 51, 107, 0.20)"
+        maxH="60"
+        overflowY="auto"
+        zIndex="10"
+        borderRadius="6px"
+        display={isOpen && items.length ? 'block' : 'none'}
+        {...getMenuProps()}>
+        {isOpen &&
+          items.map((item, index) => (
+            <ListItem
+              key={index}
+              display="flex"
+              padding="8px 4px"
+              alignItems="center"
+              gap="8px"
+              alignSelf="stretch"
+              borderRadius="4px"
+              bg={highlightedIndex === index ? 'rgba(17, 24, 36, 0.05)' : 'transparent'}
+              fontWeight={selectedItem === item ? 'bold' : 'normal'}
+              cursor="pointer"
+              color="grayModern.900"
+              fontFamily="PingFang SC"
+              fontSize="12px"
+              fontStyle="normal"
+              lineHeight="16px"
+              letterSpacing="0.5px"
+              _hover={{ bg: 'rgba(17, 24, 36, 0.05)' }}
+              {...getItemProps({ item, index })}>
+              {handleDropdownItemDisplay(item)}
+            </ListItem>
+          ))}
+      </List>
+    </Box>
+  )
+}
diff --git a/frontend/providers/aiproxy/components/common/MyTooltip.tsx b/frontend/providers/aiproxy/components/common/MyTooltip.tsx
new file mode 100644
index 000000000000..acb61dce0b09
--- /dev/null
+++ b/frontend/providers/aiproxy/components/common/MyTooltip.tsx
@@ -0,0 +1,52 @@
+'use client'
+
+import { Tooltip, TooltipProps } from '@chakra-ui/react'
+
+export const MyTooltip = ({ children, ...tooltipProps }: TooltipProps) => {
+  const tooltipStyles = {
+    hasArrow: true,
+    placement: 'bottom' as const,
+    bg: 'white',
+    color: 'grayModern.900',
+    fontSize: '12px',
+    p: '8px 12px',
+    borderRadius: '8px',
+    display: 'flex',
+    w: '60px',
+    h: '34px',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexShrink: 0,
+    fontFamily: 'PingFang SC',
+    fontWeight: 400,
+    lineHeight: '16px',
+    letterSpacing: '0.048px',
+    boxShadow:
+      '0px 2px 4px 0px rgba(161, 167, 179, 0.25), 0px 0px 1px 0px rgba(121, 141, 159, 0.25)',
+    border: '1px solid #FFF',
+    sx: {
+      // CSS 变量定义
+      '--tooltip-bg': 'white',
+      '--popper-arrow-bg': 'white',
+      '--popper-arrow-shadow-color': 'rgba(161, 167, 179, 0.25)',
+      '--md': '8px',
+
+      // 箭头样式
+      '& [data-popper-arrow]': {
+        '--popper-arrow-shadow-color': 'rgba(161, 167, 179, 0.25)',
+        '&::before': {
+          boxShadow:
+            '0px 2px 4px 0px rgba(161, 167, 179, 0.25), 0px 0px 1px 0px rgba(121, 141, 159, 0.25)',
+          border: '1px solid #FFF',
+          borderRadius: 'var(--md)'
+        }
+      }
+    }
+  }
+
+  return (
+    <Tooltip {...tooltipStyles} {...tooltipProps}>
+      {children}
+    </Tooltip>
+  )
+}
diff --git a/frontend/providers/aiproxy/components/common/Select.tsx b/frontend/providers/aiproxy/components/common/Select.tsx
new file mode 100644
index 000000000000..9f17d6d6c5e8
--- /dev/null
+++ b/frontend/providers/aiproxy/components/common/Select.tsx
@@ -0,0 +1,141 @@
+'use client'
+import { Box, Text, ListItem, List } from '@chakra-ui/react'
+import { useTranslationClientSide } from '@/app/i18n/client'
+import { useI18n } from '@/providers/i18n/i18nContext'
+import { ReactNode } from 'react'
+import { useSelect } from 'downshift'
+
+export const CustomSelect = function <T>({
+  listItems,
+  handleSelectedItemChange,
+  handleDropdownItemDisplay,
+  handleSelectedItemDisplay,
+  placeholder,
+  initSelectedItem
+}: {
+  listItems: T[]
+  handleSelectedItemChange: (selectedItem: T) => void
+  handleDropdownItemDisplay: (dropdownItem: T) => ReactNode
+  handleSelectedItemDisplay: (selectedItem: T) => ReactNode
+  placeholder?: string
+  initSelectedItem?: T
+}) {
+  const { lng } = useI18n()
+  const { t } = useTranslationClientSide(lng, 'common')
+  const items = [placeholder, ...listItems]
+
+  const {
+    isOpen,
+    selectedItem,
+    getToggleButtonProps,
+    getMenuProps,
+    getItemProps,
+    highlightedIndex
+  } = useSelect({
+    items: items,
+    initialSelectedItem: initSelectedItem,
+    onSelectedItemChange: ({ selectedItem: newSelectedItem }) => {
+      if (newSelectedItem === placeholder) {
+        handleSelectedItemChange(undefined as T)
+      } else {
+        handleSelectedItemChange(newSelectedItem as T)
+      }
+    }
+  })
+
+  return (
+    <Box w="full" position="relative" flex={1}>
+      <Box
+        h="32px"
+        w="full"
+        borderRadius="6px"
+        border="1px solid var(--Gray-Modern-200, #E8EBF0)"
+        bgColor="white"
+        color="grayModern.900"
+        display="flex"
+        alignItems="center"
+        {...getToggleButtonProps()}
+        _hover={{ borderColor: 'grayModern.300' }}
+        px="12px">
+        {selectedItem ? (
+          handleSelectedItemDisplay(selectedItem as T)
+        ) : placeholder ? (
+          <Text
+            flex={1}
+            fontFamily="PingFang SC"
+            fontSize="12px"
+            fontWeight={400}
+            lineHeight="16px"
+            letterSpacing="0.048px"
+            color={selectedItem ? 'grayModern.900' : 'grayModern.500'}>
+            {placeholder}
+          </Text>
+        ) : (
+          <Text
+            flex={1}
+            fontFamily="PingFang SC"
+            fontSize="12px"
+            fontWeight={400}
+            lineHeight="16px"
+            letterSpacing="0.048px"
+            color={selectedItem ? 'grayModern.900' : 'grayModern.500'}>
+            Select
+          </Text>
+        )}
+        <Box ml="auto" transform={isOpen ? 'rotate(180deg)' : undefined}>
+          <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+            <path
+              d="M2.5 4.5L6 8L9.5 4.5"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </Box>
+      </Box>
+
+      <List
+        {...getMenuProps()}
+        position="absolute"
+        mt="2px"
+        w="full"
+        py="6px"
+        pl="6px"
+        pr="6px"
+        bg="white"
+        alignItems="flex-start"
+        boxShadow="0px 12px 16px -4px rgba(19, 51, 107, 0.20), 0px 0px 1px 0px rgba(19, 51, 107, 0.20)"
+        maxH="60"
+        overflowY="auto"
+        zIndex="10"
+        borderRadius="6px"
+        display={isOpen && items.length ? 'block' : 'none'}>
+        {isOpen &&
+          items.map((item, index) => (
+            <ListItem
+              {...getItemProps({ item, index })}
+              key={index}
+              display="flex"
+              padding="8px 4px"
+              alignItems="center"
+              gap="8px"
+              alignSelf="stretch"
+              borderRadius="4px"
+              bg={highlightedIndex === index ? 'rgba(17, 24, 36, 0.05)' : 'transparent'}
+              fontWeight={selectedItem === item ? 'bold' : 'normal'}
+              cursor="pointer"
+              color="grayModern.900"
+              fontFamily="PingFang SC"
+              fontSize="12px"
+              fontStyle="normal"
+              lineHeight="16px"
+              letterSpacing="0.5px"
+              _hover={{ bg: 'rgba(17, 24, 36, 0.05)' }}>
+              {handleDropdownItemDisplay(item as T)}
+            </ListItem>
+          ))}
+      </List>
+    </Box>
+  )
+}
diff --git a/frontend/providers/aiproxy/components/SelectDateRange/index.tsx b/frontend/providers/aiproxy/components/common/SelectDateRange.tsx
similarity index 98%
rename from frontend/providers/aiproxy/components/SelectDateRange/index.tsx
rename to frontend/providers/aiproxy/components/common/SelectDateRange.tsx
index 67862c57cf29..05d6e862941f 100644
--- a/frontend/providers/aiproxy/components/SelectDateRange/index.tsx
+++ b/frontend/providers/aiproxy/components/common/SelectDateRange.tsx
@@ -4,6 +4,7 @@ import {
   Box,
   Button,
   Flex,
+  FlexProps,
   Icon,
   Input,
   Popover,
@@ -25,8 +26,9 @@ export default function SelectDateRange({
   startTime,
   setStartTime,
   endTime,
-  setEndTime
-}: SelectDateRangeProps): JSX.Element {
+  setEndTime,
+  ...props
+}: SelectDateRangeProps & FlexProps): JSX.Element {
   const initState = { from: startTime, to: endTime }
 
   const [selectedRange, setSelectedRange] = useState<DateRange | undefined>(initState)
@@ -180,7 +182,8 @@ export default function SelectDateRange({
       boxSizing={'border-box'}
       justify={'space-between'}
       border={'1px solid #DEE0E2'}
-      borderRadius="6px">
+      borderRadius="6px"
+      {...props}>
       <Popover onClose={onClose}>
         <PopoverTrigger>
           <Button display={'flex'} variant={'unstyled'} isDisabled={isDisabled}>
diff --git a/frontend/providers/aiproxy/components/common/SingleSelectCombobox.tsx b/frontend/providers/aiproxy/components/common/SingleSelectCombobox.tsx
new file mode 100644
index 000000000000..1397bacc7805
--- /dev/null
+++ b/frontend/providers/aiproxy/components/common/SingleSelectCombobox.tsx
@@ -0,0 +1,194 @@
+'use client'
+import { Box, Button, InputGroup, Input, FormLabel, VStack, ListItem, List } from '@chakra-ui/react'
+import { useTranslationClientSide } from '@/app/i18n/client'
+import { useI18n } from '@/providers/i18n/i18nContext'
+import { useState, ReactNode, useEffect } from 'react'
+import { useCombobox, UseComboboxReturnValue } from 'downshift'
+
+export const SingleSelectCombobox: <T>(props: {
+  dropdownItems: T[]
+  setSelectedItem: (value: T) => void
+  handleDropdownItemFilter: (dropdownItems: T[], inputValue: string) => T[]
+  handleDropdownItemDisplay: (dropdownItem: T) => ReactNode
+  initSelectedItem?: T
+}) => JSX.Element = function <T>({
+  dropdownItems,
+  setSelectedItem,
+  handleDropdownItemFilter,
+  handleDropdownItemDisplay,
+  initSelectedItem
+}: {
+  dropdownItems: T[]
+  setSelectedItem: (value: T) => void
+  handleDropdownItemFilter: (dropdownItems: T[], inputValue: string) => T[]
+  handleDropdownItemDisplay: (dropdownItem: T) => ReactNode
+  initSelectedItem?: T
+}) {
+  const { lng } = useI18n()
+  const { t } = useTranslationClientSide(lng, 'common')
+  const [getFilteredDropdownItems, setGetFilteredDropdownItems] = useState<T[]>(dropdownItems)
+  useEffect(() => {
+    setGetFilteredDropdownItems(dropdownItems)
+  }, [dropdownItems])
+
+  const {
+    isOpen: isComboboxOpen,
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    getInputProps,
+    highlightedIndex,
+    getItemProps,
+    selectedItem
+  }: UseComboboxReturnValue<T> = useCombobox({
+    items: getFilteredDropdownItems,
+    onInputValueChange: ({ inputValue }) => {
+      setGetFilteredDropdownItems(handleDropdownItemFilter(dropdownItems, inputValue))
+    },
+
+    initialSelectedItem: initSelectedItem || undefined,
+
+    onSelectedItemChange: ({ selectedItem }) => {
+      const selectedDropdownItem = dropdownItems.find((item) => item === selectedItem)
+      if (selectedDropdownItem) {
+        setSelectedItem(selectedDropdownItem)
+      }
+    }
+  })
+  return (
+    <Box w="full">
+      <VStack w="full" align="stretch" alignItems="flex-start" spacing="8px">
+        <FormLabel
+          color="grayModern.900"
+          fontFamily="PingFang SC"
+          fontSize="14px"
+          fontStyle="normal"
+          fontWeight={500}
+          lineHeight="20px"
+          letterSpacing="0.1px"
+          display="flex"
+          alignItems="center"
+          h="20px"
+          justifyContent="flex-start"
+          whiteSpace="nowrap"
+          m={0}
+          {...getLabelProps()}>
+          {t('channelsForm.type')}
+        </FormLabel>
+
+        <InputGroup w="full" alignItems="center">
+          <Input
+            display="flex"
+            h="32px"
+            py="8px"
+            pl="12px"
+            pr="44px" // 32 + 12 for the button
+            alignItems="center"
+            borderRadius="6px"
+            border="1px solid var(--Gray-Modern-200, #E8EBF0)"
+            bgColor="grayModern.50"
+            variant="unstyled"
+            placeholder={t('channelsFormPlaceholder.type')}
+            color="grayModern.900"
+            fontFamily="PingFang SC"
+            fontSize="12px"
+            fontWeight={400}
+            lineHeight="16px"
+            letterSpacing="0.048px"
+            _placeholder={{
+              color: 'grayModern.500',
+              fontFamily: 'PingFang SC',
+              fontSize: '12px',
+              fontWeight: 400,
+              lineHeight: '16px',
+              letterSpacing: '0.048px'
+            }}
+            {...getInputProps()}
+          />
+          <Button
+            position="absolute"
+            right={0}
+            h="32px"
+            w="32px"
+            zIndex={1}
+            variant="unstyled"
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+            {...getToggleButtonProps()}>
+            {isComboboxOpen ? (
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="17"
+                height="16"
+                viewBox="0 0 17 16"
+                fill="none">
+                <path
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M4.32148 10.4715C4.58183 10.7318 5.00394 10.7318 5.26429 10.4715L8.79289 6.94289L12.3215 10.4715C12.5818 10.7318 13.0039 10.7318 13.2643 10.4715C13.5246 10.2111 13.5246 9.78903 13.2643 9.52868L9.26429 5.52868C9.00394 5.26833 8.58183 5.26833 8.32148 5.52868L4.32148 9.52868C4.06113 9.78903 4.06113 10.2111 4.32148 10.4715Z"
+                  fill="#667085"
+                />
+              </svg>
+            ) : (
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="17"
+                height="16"
+                viewBox="0 0 17 16"
+                fill="none">
+                <path
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M4.32148 5.52851C4.58183 5.26816 5.00394 5.26816 5.26429 5.52851L8.79289 9.05711L12.3215 5.52851C12.5818 5.26816 13.0039 5.26816 13.2643 5.52851C13.5246 5.78886 13.5246 6.21097 13.2643 6.47132L9.26429 10.4713C9.00394 10.7317 8.58183 10.7317 8.32148 10.4713L4.32148 6.47132C4.06113 6.21097 4.06113 5.78886 4.32148 5.52851Z"
+                  fill="#667085"
+                />
+              </svg>
+            )}
+          </Button>
+        </InputGroup>
+      </VStack>
+      <List
+        position="absolute"
+        mt="2px"
+        w="full"
+        py="6px"
+        pl="6px"
+        pr="6px"
+        bg="white"
+        alignItems="flex-start"
+        boxShadow="0px 12px 16px -4px rgba(19, 51, 107, 0.20), 0px 0px 1px 0px rgba(19, 51, 107, 0.20)"
+        maxH="60"
+        overflowY="auto"
+        zIndex="10"
+        borderRadius="6px"
+        display={isComboboxOpen && getFilteredDropdownItems.length ? 'block' : 'none'}
+        {...getMenuProps()}>
+        {isComboboxOpen &&
+          getFilteredDropdownItems.map((item, index) => (
+            <ListItem
+              key={index}
+              display="flex"
+              padding="8px 4px"
+              alignItems="center"
+              gap="8px"
+              alignSelf="stretch"
+              borderRadius="4px"
+              bg={highlightedIndex === index ? 'rgba(17, 24, 36, 0.05)' : 'transparent'}
+              fontWeight={selectedItem === item ? 'bold' : 'normal'}
+              cursor="pointer"
+              color="grayModern.900"
+              fontFamily="PingFang SC"
+              fontSize="12px"
+              fontStyle="normal"
+              lineHeight="16px"
+              letterSpacing="0.5px"
+              _hover={{ bg: 'rgba(17, 24, 36, 0.05)' }}
+              {...getItemProps({ item, index })}>
+              {handleDropdownItemDisplay(item)}
+            </ListItem>
+          ))}
+      </List>
+    </Box>
+  )
+}
diff --git a/frontend/providers/aiproxy/components/common/SingleSelectComboboxUnStyle.tsx b/frontend/providers/aiproxy/components/common/SingleSelectComboboxUnStyle.tsx
new file mode 100644
index 000000000000..c742a769dc1a
--- /dev/null
+++ b/frontend/providers/aiproxy/components/common/SingleSelectComboboxUnStyle.tsx
@@ -0,0 +1,193 @@
+'use client'
+import { Button, InputGroup, Input, ListItem, List, Flex, FlexProps, Box } from '@chakra-ui/react'
+import { useTranslationClientSide } from '@/app/i18n/client'
+import { useI18n } from '@/providers/i18n/i18nContext'
+import { useState, ReactNode, useEffect } from 'react'
+import { useCombobox, UseComboboxReturnValue } from 'downshift'
+
+export const SingleSelectComboboxUnstyle: <T>(props: {
+  dropdownItems: T[]
+  setSelectedItem: (value: T) => void
+  handleDropdownItemFilter: (dropdownItems: T[], inputValue: string) => T[]
+  handleDropdownItemDisplay: (dropdownItem: T) => ReactNode
+  handleInputDisplay?: (item: T) => string
+  initSelectedItem?: T
+  flexProps?: FlexProps
+  placeholder?: string
+}) => JSX.Element = function <T>({
+  dropdownItems,
+  setSelectedItem,
+  handleDropdownItemFilter,
+  handleDropdownItemDisplay,
+  handleInputDisplay,
+  initSelectedItem,
+  flexProps,
+  placeholder
+}: {
+  dropdownItems: T[]
+  setSelectedItem: (value: T) => void
+  handleDropdownItemFilter: (dropdownItems: T[], inputValue: string) => T[]
+  handleDropdownItemDisplay: (dropdownItem: T) => ReactNode
+  handleInputDisplay?: (item: T) => string
+  initSelectedItem?: T
+  flexProps?: FlexProps
+  placeholder?: string
+}) {
+  const { lng } = useI18n()
+  const { t } = useTranslationClientSide(lng, 'common')
+  const [getFilteredDropdownItems, setGetFilteredDropdownItems] = useState<T[]>(dropdownItems)
+  useEffect(() => {
+    setGetFilteredDropdownItems(dropdownItems)
+  }, [dropdownItems])
+
+  const {
+    isOpen: isComboboxOpen,
+    getToggleButtonProps,
+    getMenuProps,
+    getInputProps,
+    highlightedIndex,
+    getItemProps,
+    selectedItem
+  }: UseComboboxReturnValue<T> = useCombobox({
+    items: getFilteredDropdownItems,
+    onInputValueChange: ({ inputValue }) => {
+      setGetFilteredDropdownItems(handleDropdownItemFilter(dropdownItems, inputValue))
+    },
+    initialSelectedItem: initSelectedItem || undefined,
+
+    itemToString: (item) => {
+      if (!item) return ''
+      return handleInputDisplay ? handleInputDisplay(item) : String(item)
+    },
+
+    onSelectedItemChange: ({ selectedItem }) => {
+      const selectedDropdownItem = dropdownItems.find((item) => item === selectedItem)
+      if (selectedDropdownItem) {
+        setSelectedItem(selectedDropdownItem)
+      }
+    }
+  })
+
+  return (
+    <Flex flexDirection="column" w="full" {...flexProps} position="relative">
+      <InputGroup w="full" alignItems="center">
+        <Input
+          w="full"
+          display="flex"
+          h="32px"
+          py="8px"
+          pl="12px"
+          pr="44px" // 32 + 12 for the button
+          alignItems="center"
+          borderRadius="6px"
+          border="1px solid var(--Gray-Modern-200, #E8EBF0)"
+          bgColor="grayModern.50"
+          variant="unstyled"
+          placeholder={placeholder}
+          color="grayModern.900"
+          fontFamily="PingFang SC"
+          fontSize="12px"
+          fontWeight={400}
+          lineHeight="16px"
+          letterSpacing="0.048px"
+          _placeholder={{
+            color: 'grayModern.500',
+            fontFamily: 'PingFang SC',
+            fontSize: '12px',
+            fontWeight: 400,
+            lineHeight: '16px',
+            letterSpacing: '0.048px'
+          }}
+          {...getInputProps()}
+        />
+        <Button
+          position="absolute"
+          right={0}
+          h="32px"
+          w="32px"
+          zIndex={1}
+          variant="unstyled"
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+          {...getToggleButtonProps()}>
+          {isComboboxOpen ? (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="17"
+              height="16"
+              viewBox="0 0 17 16"
+              fill="none">
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M4.32148 10.4715C4.58183 10.7318 5.00394 10.7318 5.26429 10.4715L8.79289 6.94289L12.3215 10.4715C12.5818 10.7318 13.0039 10.7318 13.2643 10.4715C13.5246 10.2111 13.5246 9.78903 13.2643 9.52868L9.26429 5.52868C9.00394 5.26833 8.58183 5.26833 8.32148 5.52868L4.32148 9.52868C4.06113 9.78903 4.06113 10.2111 4.32148 10.4715Z"
+                fill="#667085"
+              />
+            </svg>
+          ) : (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="17"
+              height="16"
+              viewBox="0 0 17 16"
+              fill="none">
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M4.32148 5.52851C4.58183 5.26816 5.00394 5.26816 5.26429 5.52851L8.79289 9.05711L12.3215 5.52851C12.5818 5.26816 13.0039 5.26816 13.2643 5.52851C13.5246 5.78886 13.5246 6.21097 13.2643 6.47132L9.26429 10.4713C9.00394 10.7317 8.58183 10.7317 8.32148 10.4713L4.32148 6.47132C4.06113 6.21097 4.06113 5.78886 4.32148 5.52851Z"
+                fill="#667085"
+              />
+            </svg>
+          )}
+        </Button>
+      </InputGroup>
+      <List
+        position="absolute"
+        top="100%" // will display below the flex
+        left="0" // width will equal to the flex
+        right="0"
+        mt="2px"
+        w="full"
+        py="6px"
+        pl="6px"
+        pr="6px"
+        bg="white"
+        boxSizing="border-box"
+        alignItems="flex-start"
+        boxShadow="0px 12px 16px -4px rgba(19, 51, 107, 0.20), 0px 0px 1px 0px rgba(19, 51, 107, 0.20)"
+        maxH="60"
+        minW="0"
+        overflowY="auto"
+        zIndex="10"
+        borderRadius="6px"
+        display={isComboboxOpen && getFilteredDropdownItems.length ? 'block' : 'none'}
+        {...getMenuProps()}>
+        {isComboboxOpen &&
+          getFilteredDropdownItems.map((item, index) => (
+            <ListItem
+              key={index}
+              display="flex"
+              padding="8px 4px"
+              alignItems="center"
+              gap="8px"
+              alignSelf="stretch"
+              borderRadius="4px"
+              bg={highlightedIndex === index ? 'rgba(17, 24, 36, 0.05)' : 'transparent'}
+              fontWeight={selectedItem === item ? 'bold' : 'normal'}
+              cursor="pointer"
+              color="grayModern.900"
+              fontFamily="PingFang SC"
+              fontSize="12px"
+              fontStyle="normal"
+              lineHeight="16px"
+              letterSpacing="0.5px"
+              _hover={{ bg: 'rgba(17, 24, 36, 0.05)' }}
+              {...getItemProps({ item, index })}>
+              {handleDropdownItemDisplay(item)}
+            </ListItem>
+          ))}
+      </List>
+    </Flex>
+  )
+}
diff --git a/frontend/providers/aiproxy/components/SwitchPage.tsx b/frontend/providers/aiproxy/components/common/SwitchPage.tsx
similarity index 100%
rename from frontend/providers/aiproxy/components/SwitchPage.tsx
rename to frontend/providers/aiproxy/components/common/SwitchPage.tsx
diff --git a/frontend/providers/aiproxy/components/table/baseTable.tsx b/frontend/providers/aiproxy/components/table/BaseTable.tsx
similarity index 95%
rename from frontend/providers/aiproxy/components/table/baseTable.tsx
rename to frontend/providers/aiproxy/components/table/BaseTable.tsx
index 21f569a6d953..7e38e398c9cf 100644
--- a/frontend/providers/aiproxy/components/table/baseTable.tsx
+++ b/frontend/providers/aiproxy/components/table/BaseTable.tsx
@@ -16,7 +16,7 @@ export function BaseTable<T extends unknown>({
   isLoading
 }: { table: ReactTable<T>; isLoading: boolean } & TableContainerProps) {
   return (
-    <TableContainer w="full" h="full" overflowY="auto">
+    <TableContainer w="full" h="full" overflowY="auto" flex="1 0 0" minHeight="0">
       <Table variant="simple" fontSize="12px" w="full" size="md">
         <Thead>
           {table.getHeaderGroups().map((headers) => {
@@ -30,6 +30,7 @@ export function BaseTable<T extends unknown>({
                       key={header.id}
                       color="grayModern.600"
                       border="none"
+                      textTransform="none"
                       borderTopLeftRadius={i === 0 ? '6px' : '0'}
                       borderBottomLeftRadius={i === 0 ? '6px' : '0'}
                       borderTopRightRadius={i === headers.headers.length - 1 ? '6px' : '0'}
diff --git a/frontend/providers/aiproxy/components/user/KeyList.tsx b/frontend/providers/aiproxy/components/user/KeyList.tsx
index 09b7b5e9c7d6..c79a6006a038 100644
--- a/frontend/providers/aiproxy/components/user/KeyList.tsx
+++ b/frontend/providers/aiproxy/components/user/KeyList.tsx
@@ -26,8 +26,10 @@ import {
   Input,
   FormErrorMessage,
   useDisclosure,
-  Center
+  Center,
+  Spinner
 } from '@chakra-ui/react'
+import { CurrencySymbol } from '@sealos/ui'
 import {
   Column,
   createColumnHelper,
@@ -36,17 +38,18 @@ import {
   useReactTable
 } from '@tanstack/react-table'
 import { TFunction } from 'i18next'
-import { createKey, deleteKey, getKeys, updateKey } from '@/api/platform'
+import { createToken, deleteToken, getTokens, updateToken } from '@/api/platform'
 
 import { useTranslationClientSide } from '@/app/i18n/client'
 import { useI18n } from '@/providers/i18n/i18nContext'
-import { ChainIcon } from '@/ui/icons/home/Icons'
+import { ChainIcon } from '@/ui/icons/index'
 import { useMessage } from '@sealos/ui'
 import { useQueryClient, useMutation, useQuery } from '@tanstack/react-query'
-import { TokenInfo } from '@/types/getKeys'
-import SwitchPage from '@/components/SwitchPage'
+import { TokenInfo } from '@/types/user/token'
+import SwitchPage from '@/components/common/SwitchPage'
 import { useBackendStore } from '@/store/backend'
-import { MyTooltip } from '@/components/MyTooltip'
+import { MyTooltip } from '@/components/common/MyTooltip'
+import { QueryKey } from '@/types/query-key'
 
 export function KeyList(): JSX.Element {
   const { lng } = useI18n()
@@ -55,6 +58,7 @@ export function KeyList(): JSX.Element {
 
   return (
     <>
+      {/* gap is 13px */}
       <Flex direction="column" alignItems="flex-start" gap="8px" alignSelf="stretch" w="full">
         <Text
           color="var(--Black, #000)"
@@ -68,12 +72,10 @@ export function KeyList(): JSX.Element {
         </Text>
       </Flex>
 
-      <Flex direction="column" alignItems="flex-start" gap="12px" w="full" h="full">
-        {/* table */}
-        <ModelKeyTable t={t} onOpen={onOpen} />
-        {/* modal */}
-        <CreateKeyModal isOpen={isOpen} onClose={onClose} t={t} />
-      </Flex>
+      {/* table */}
+      <ModelKeyTable t={t} onOpen={onOpen} />
+      {/* modal */}
+      <CreateKeyModal isOpen={isOpen} onClose={onClose} t={t} />
     </>
   )
 }
@@ -84,8 +86,11 @@ export enum TableHeaderId {
   CREATED_AT = 'key.createdAt',
   LAST_USED_AT = 'key.lastUsedAt',
   STATUS = 'key.status',
-  ACTIONS = 'key.actions'
+  ACTIONS = 'key.actions',
+  REQUEST_COUNT = 'key.requestCount',
+  USED_AMOUNT = 'key.usedAmount'
 }
+
 enum KeyStatus {
   ENABLED = 1,
   DISABLED = 2,
@@ -94,6 +99,23 @@ enum KeyStatus {
 }
 
 const CustomHeader = ({ column, t }: { column: Column<TokenInfo>; t: TFunction }) => {
+  const { currencySymbol } = useBackendStore()
+  if (column.id === TableHeaderId.USED_AMOUNT) {
+    return (
+      <Flex alignItems={'center'} gap={'4px'}>
+        <Text
+          color="var(--light-general-on-surface-low, var(--Gray-Modern-600, #485264))"
+          fontFamily="PingFang SC"
+          fontSize="12px"
+          fontWeight={500}
+          lineHeight="16px"
+          letterSpacing="0.5px">
+          {t(column.id as TableHeaderId)}
+        </Text>
+        <CurrencySymbol type={currencySymbol} />
+      </Flex>
+    )
+  }
   return (
     <Text
       color="var(--light-general-on-surface-low, var(--Gray-Modern-600, #485264))"
@@ -124,9 +146,18 @@ const ModelKeyTable = ({ t, onOpen }: { t: TFunction; onOpen: () => void }) => {
   })
   const queryClient = useQueryClient()
 
-  const deleteKeyMutation = useMutation((id: number) => deleteKey(id), {
+  const { data, isLoading } = useQuery({
+    queryKey: [QueryKey.GetTokens, page, pageSize],
+    queryFn: () => getTokens({ page, perPage: pageSize }),
+    refetchOnReconnect: true,
+    onSuccess(data) {
+      setTotal(data?.total || 0)
+    }
+  })
+
+  const deleteKeyMutation = useMutation((id: number) => deleteToken(id), {
     onSuccess() {
-      queryClient.invalidateQueries(['getKeys'])
+      queryClient.invalidateQueries([QueryKey.GetTokens])
       message({
         status: 'success',
         title: t('key.deleteSuccess'),
@@ -147,10 +178,10 @@ const ModelKeyTable = ({ t, onOpen }: { t: TFunction; onOpen: () => void }) => {
   })
 
   const updateKeyMutation = useMutation(
-    ({ id, status }: { id: number; status: number }) => updateKey(id, status),
+    ({ id, status }: { id: number; status: number }) => updateToken(id, status),
     {
       onSuccess() {
-        queryClient.invalidateQueries(['getKeys'])
+        queryClient.invalidateQueries([QueryKey.GetTokens])
         message({
           status: 'success',
           title: t('key.updateSuccess'),
@@ -163,7 +194,7 @@ const ModelKeyTable = ({ t, onOpen }: { t: TFunction; onOpen: () => void }) => {
         message({
           status: 'warning',
           title: t('key.updateFailed'),
-          description: err?.message || t('key.updateFailed'),
+          description: err?.message ? t(err.message) : t('key.updateFailed'),
           isClosable: true,
           position: 'top'
         })
@@ -181,15 +212,6 @@ const ModelKeyTable = ({ t, onOpen }: { t: TFunction; onOpen: () => void }) => {
     deleteKeyMutation.mutate(id)
   }
 
-  const { data, isLoading } = useQuery({
-    queryKey: ['getKeys', page, pageSize],
-    queryFn: () => getKeys({ page, perPage: pageSize }),
-    refetchOnReconnect: true,
-    onSuccess(data) {
-      setTotal(data.total)
-    }
-  })
-
   const columnHelper = createColumnHelper<TokenInfo>()
 
   const columns = [
@@ -244,9 +266,7 @@ const ModelKeyTable = ({ t, onOpen }: { t: TFunction; onOpen: () => void }) => {
             )
           }}>
           <MyTooltip label={t('copy')}>
-            {'sk-' +
-              info.getValue().substring(0, 8) +
-              '*'.repeat(Math.max(0, info.getValue().length - 8))}
+            {'sk-' + info.getValue().substring(0, 8) + '*'.repeat(3)}
           </MyTooltip>
         </Text>
       )
@@ -343,6 +363,46 @@ const ModelKeyTable = ({ t, onOpen }: { t: TFunction; onOpen: () => void }) => {
       }
     }),
 
+    columnHelper.accessor((row) => row.request_count, {
+      id: TableHeaderId.REQUEST_COUNT,
+      header: (props) => <CustomHeader column={props.column} t={t} />,
+      cell: (info) => (
+        <Text
+          color="grayModern.900"
+          fontFamily="PingFang SC"
+          fontSize="14px"
+          fontWeight={500}
+          lineHeight="20px"
+          letterSpacing="0.1px">
+          {info.getValue()}
+        </Text>
+      )
+    }),
+
+    columnHelper.accessor((row) => row.used_amount, {
+      id: TableHeaderId.USED_AMOUNT,
+      header: (props) => <CustomHeader column={props.column} t={t} />,
+      cell: (info) => {
+        const value = Number(info.getValue())
+        // 获取小数部分的长度
+        const decimalLength = value.toString().split('.')[1]?.length || 0
+        // 如果小数位超过6位则保留6位，否则保持原样
+        const formattedValue = decimalLength > 6 ? value.toFixed(6) : value
+
+        return (
+          <Text
+            color="grayModern.900"
+            fontFamily="PingFang SC"
+            fontSize="14px"
+            fontWeight={500}
+            lineHeight="20px"
+            letterSpacing="0.1px">
+            {formattedValue}
+          </Text>
+        )
+      }
+    }),
+
     columnHelper.display({
       id: TableHeaderId.ACTIONS,
       header: (props) => <CustomHeader column={props.column} t={t} />,
@@ -354,11 +414,13 @@ const ModelKeyTable = ({ t, onOpen }: { t: TFunction; onOpen: () => void }) => {
           <PopoverTrigger>
             <Box
               cursor="pointer"
+              transition="all 0.2s"
               display="inline-flex"
-              p="var(--xs, 10px)"
+              p="4px"
               alignItems="center"
-              gap="var(--sm, 6px)"
-              borderRadius="var(--sm, 6px)"
+              gap="6px"
+              borderRadius="6px"
+              _hover={{ bg: 'gray.100' }}
               onClick={() => setOpenPopoverId(info.row.original.id)}>
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -397,7 +459,7 @@ const ModelKeyTable = ({ t, onOpen }: { t: TFunction; onOpen: () => void }) => {
                     display="flex"
                     padding="6px 4px"
                     alignItems="center"
-                    gap="2px"
+                    gap="8px"
                     alignSelf="stretch"
                     borderRadius="4px"
                     background="transparent"
@@ -406,26 +468,32 @@ const ModelKeyTable = ({ t, onOpen }: { t: TFunction; onOpen: () => void }) => {
                       background: 'rgba(17, 24, 36, 0.05)',
                       color: 'brightBlue.600'
                     }}
-                    leftIcon={
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="16"
-                        height="16"
-                        viewBox="0 0 16 16"
-                        fill="none">
-                        <path
-                          fillRule="evenodd"
-                          clipRule="evenodd"
-                          d="M5.79427 11.5962L10.4323 8.98982C11.1347 8.5951 11.5697 8.34893 11.8659 8.14524C11.9632 8.07836 12.0235 8.03018 12.0586 8C12.0235 7.96982 11.9632 7.92163 11.8659 7.85476C11.5697 7.65107 11.1347 7.40489 10.4323 7.01018L5.79426 4.40384C5.09214 4.00928 4.65523 3.76546 4.3252 3.61731C4.18814 3.55579 4.10581 3.52836 4.06506 3.51656C4.04193 3.52364 4.02176 3.53387 4.00487 3.54574C3.99613 3.5881 3.98409 3.65984 3.97362 3.77094C3.94094 4.11764 3.93933 4.60257 3.93933 5.39366L3.93933 10.6063C3.93933 11.3974 3.94094 11.8824 3.97362 12.2291C3.98409 12.3402 3.99613 12.4119 4.00487 12.4543C4.02176 12.4661 4.04193 12.4764 4.06506 12.4834C4.10581 12.4716 4.18814 12.4442 4.3252 12.3827C4.65523 12.2345 5.09214 11.9907 5.79427 11.5962ZM13.4344 7.31995C13.2073 6.82366 12.5309 6.44352 11.178 5.68325L6.53993 3.07691C5.18701 2.31663 4.51056 1.9365 3.95547 1.99328C3.4713 2.04281 3.03146 2.28998 2.74531 2.67333C2.41724 3.11284 2.41724 3.87311 2.41724 5.39366L2.41724 10.6063C2.41724 12.1269 2.41724 12.8872 2.74531 13.3267C3.03146 13.71 3.4713 13.9572 3.95547 14.0067C4.51055 14.0635 5.18702 13.6834 6.53994 12.9231L11.178 10.3167C12.5309 9.55647 13.2073 9.17634 13.4344 8.68005C13.6324 8.24717 13.6324 7.75283 13.4344 7.31995Z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                    }
                     onClick={() => {
                       handleStatusUpdate(info.row.original.id, info.row.original.status)
                       setOpenPopoverId(null)
                     }}>
-                    {t('enable')}
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      fill="none">
+                      <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="M5.79427 11.5962L10.4323 8.98982C11.1347 8.5951 11.5697 8.34893 11.8659 8.14524C11.9632 8.07836 12.0235 8.03018 12.0586 8C12.0235 7.96982 11.9632 7.92163 11.8659 7.85476C11.5697 7.65107 11.1347 7.40489 10.4323 7.01018L5.79426 4.40384C5.09214 4.00928 4.65523 3.76546 4.3252 3.61731C4.18814 3.55579 4.10581 3.52836 4.06506 3.51656C4.04193 3.52364 4.02176 3.53387 4.00487 3.54574C3.99613 3.5881 3.98409 3.65984 3.97362 3.77094C3.94094 4.11764 3.93933 4.60257 3.93933 5.39366L3.93933 10.6063C3.93933 11.3974 3.94094 11.8824 3.97362 12.2291C3.98409 12.3402 3.99613 12.4119 4.00487 12.4543C4.02176 12.4661 4.04193 12.4764 4.06506 12.4834C4.10581 12.4716 4.18814 12.4442 4.3252 12.3827C4.65523 12.2345 5.09214 11.9907 5.79427 11.5962ZM13.4344 7.31995C13.2073 6.82366 12.5309 6.44352 11.178 5.68325L6.53993 3.07691C5.18701 2.31663 4.51056 1.9365 3.95547 1.99328C3.4713 2.04281 3.03146 2.28998 2.74531 2.67333C2.41724 3.11284 2.41724 3.87311 2.41724 5.39366L2.41724 10.6063C2.41724 12.1269 2.41724 12.8872 2.74531 13.3267C3.03146 13.71 3.4713 13.9572 3.95547 14.0067C4.51055 14.0635 5.18702 13.6834 6.53994 12.9231L11.178 10.3167C12.5309 9.55647 13.2073 9.17634 13.4344 8.68005C13.6324 8.24717 13.6324 7.75283 13.4344 7.31995Z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                    <Text
+                      fontFamily="PingFang SC"
+                      fontSize="12px"
+                      fontStyle="normal"
+                      fontWeight="500"
+                      lineHeight="16px"
+                      letterSpacing="0.5px">
+                      {t('enable')}
+                    </Text>
                   </Button>
                 ) : (
                   <Button
@@ -435,7 +503,7 @@ const ModelKeyTable = ({ t, onOpen }: { t: TFunction; onOpen: () => void }) => {
                     display="flex"
                     padding="6px 4px"
                     alignItems="center"
-                    gap="2px"
+                    gap="8px"
                     alignSelf="stretch"
                     borderRadius="4px"
                     background="transparent"
@@ -444,26 +512,32 @@ const ModelKeyTable = ({ t, onOpen }: { t: TFunction; onOpen: () => void }) => {
                       background: 'rgba(17, 24, 36, 0.05)',
                       color: 'brightBlue.600'
                     }}
-                    leftIcon={
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="16"
-                        height="16"
-                        viewBox="0 0 16 16"
-                        fill="none">
-                        <path
-                          fillRule="evenodd"
-                          clipRule="evenodd"
-                          d="M3.63017 4.57294C2.88892 5.5168 2.44686 6.70677 2.44686 8C2.44686 11.0669 4.9331 13.5532 8.00004 13.5532C9.29326 13.5532 10.4832 13.1111 11.4271 12.3699L3.63017 4.57294ZM4.57298 3.63013L12.3699 11.4271C13.1112 10.4832 13.5532 9.29322 13.5532 8C13.5532 4.93306 11.067 2.44681 8.00004 2.44681C6.70682 2.44681 5.51684 2.88887 4.57298 3.63013ZM1.11353 8C1.11353 4.19668 4.19672 1.11348 8.00004 1.11348C11.8034 1.11348 14.8866 4.19668 14.8866 8C14.8866 11.8033 11.8034 14.8865 8.00004 14.8865C4.19672 14.8865 1.11353 11.8033 1.11353 8Z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                    }
                     onClick={() => {
                       setOpenPopoverId(null)
                       handleStatusUpdate(info.row.original.id, info.row.original.status)
                     }}>
-                    {t('disable')}
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      fill="none">
+                      <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="M3.63017 4.57294C2.88892 5.5168 2.44686 6.70677 2.44686 8C2.44686 11.0669 4.9331 13.5532 8.00004 13.5532C9.29326 13.5532 10.4832 13.1111 11.4271 12.3699L3.63017 4.57294ZM4.57298 3.63013L12.3699 11.4271C13.1112 10.4832 13.5532 9.29322 13.5532 8C13.5532 4.93306 11.067 2.44681 8.00004 2.44681C6.70682 2.44681 5.51684 2.88887 4.57298 3.63013ZM1.11353 8C1.11353 4.19668 4.19672 1.11348 8.00004 1.11348C11.8034 1.11348 14.8866 4.19668 14.8866 8C14.8866 11.8033 11.8034 14.8865 8.00004 14.8865C4.19672 14.8865 1.11353 11.8033 1.11353 8Z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                    <Text
+                      fontFamily="PingFang SC"
+                      fontSize="12px"
+                      fontStyle="normal"
+                      fontWeight="500"
+                      lineHeight="16px"
+                      letterSpacing="0.5px">
+                      {t('disable')}
+                    </Text>
                   </Button>
                 )}
                 <Button
@@ -473,7 +547,7 @@ const ModelKeyTable = ({ t, onOpen }: { t: TFunction; onOpen: () => void }) => {
                   display="flex"
                   padding="6px 4px"
                   alignItems="center"
-                  gap="2px"
+                  gap="8px"
                   alignSelf="stretch"
                   borderRadius="4px"
                   background="transparent"
@@ -482,26 +556,32 @@ const ModelKeyTable = ({ t, onOpen }: { t: TFunction; onOpen: () => void }) => {
                     background: 'rgba(17, 24, 36, 0.05)',
                     color: '#D92D20'
                   }}
-                  leftIcon={
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="16"
-                      height="16"
-                      viewBox="0 0 16 16"
-                      fill="none">
-                      <path
-                        fillRule="evenodd"
-                        clipRule="evenodd"
-                        d="M7.48258 1.18025H8.51761C8.84062 1.18024 9.12229 1.18023 9.35489 1.19923C9.60133 1.21937 9.85079 1.26411 10.0921 1.38704C10.4491 1.56894 10.7393 1.85919 10.9212 2.21619C11.0441 2.45745 11.0889 2.70692 11.109 2.95335C11.125 3.14941 11.1275 3.38033 11.1279 3.64149H13.5379C13.9061 3.64149 14.2045 3.93996 14.2045 4.30815C14.2045 4.67634 13.9061 4.97482 13.5379 4.97482H12.9739V11.2268C12.9739 11.7206 12.9739 12.1312 12.9466 12.4663C12.918 12.8153 12.8565 13.1408 12.7001 13.4479C12.4592 13.9206 12.0748 14.305 11.602 14.5459C11.2949 14.7024 10.9695 14.7639 10.6205 14.7924C10.2853 14.8198 9.87475 14.8198 9.381 14.8197H6.61919C6.12544 14.8198 5.71484 14.8198 5.37973 14.7924C5.03069 14.7639 4.70525 14.7024 4.39817 14.5459C3.9254 14.305 3.54102 13.9206 3.30013 13.4479C3.14366 13.1408 3.08215 12.8153 3.05363 12.4663C3.02625 12.1312 3.02626 11.7206 3.02627 11.2268L3.02627 4.97482H2.46232C2.09413 4.97482 1.79565 4.67634 1.79565 4.30815C1.79565 3.93996 2.09413 3.64149 2.46232 3.64149H4.87226C4.87265 3.38033 4.87516 3.14941 4.89118 2.95335C4.91131 2.70692 4.95605 2.45745 5.07899 2.21619C5.26089 1.85919 5.55113 1.56894 5.90813 1.38704C6.1494 1.26411 6.39886 1.21937 6.64529 1.19923C6.8779 1.18023 7.15957 1.18024 7.48258 1.18025ZM4.3596 4.97482V11.1996C4.3596 11.7275 4.36012 12.0833 4.38254 12.3577C4.40432 12.6243 4.44341 12.7547 4.48814 12.8425C4.60119 13.0644 4.7816 13.2448 5.00349 13.3579C5.09128 13.4026 5.22172 13.4417 5.4883 13.4635C5.76267 13.4859 6.11851 13.4864 6.64642 13.4864H9.35377C9.88168 13.4864 10.2375 13.4859 10.5119 13.4635C10.7785 13.4417 10.9089 13.4026 10.9967 13.3579C11.2186 13.2448 11.399 13.0644 11.5121 12.8425C11.5568 12.7547 11.5959 12.6243 11.6176 12.3577C11.6401 12.0833 11.6406 11.7275 11.6406 11.1996V4.97482H4.3596ZM9.79454 3.64149H6.20564C6.20612 3.38305 6.20849 3.20378 6.22008 3.06193C6.23348 2.89795 6.2558 2.84348 6.267 2.82151C6.32106 2.71539 6.40734 2.62912 6.51345 2.57505C6.53543 2.56386 6.58989 2.54154 6.75387 2.52814C6.92563 2.51411 7.15224 2.51359 7.50785 2.51359H8.49234C8.84795 2.51359 9.07456 2.51411 9.24632 2.52814C9.4103 2.54154 9.46476 2.56386 9.48674 2.57505C9.59285 2.62912 9.67913 2.71539 9.73319 2.82151C9.74439 2.84348 9.76671 2.89795 9.78011 3.06193C9.7917 3.20378 9.79407 3.38305 9.79454 3.64149ZM6.76948 7.02568C7.13767 7.02568 7.43614 7.32416 7.43614 7.69235V10.7689C7.43614 11.1371 7.13767 11.4356 6.76948 11.4356C6.40129 11.4356 6.10281 11.1371 6.10281 10.7689V7.69235C6.10281 7.32416 6.40129 7.02568 6.76948 7.02568ZM9.23071 7.02568C9.5989 7.02568 9.89738 7.32416 9.89738 7.69235V10.7689C9.89738 11.1371 9.5989 11.4356 9.23071 11.4356C8.86252 11.4356 8.56404 11.1371 8.56404 10.7689V7.69235C8.56404 7.32416 8.86252 7.02568 9.23071 7.02568Z"
-                        fill="currentColor"
-                      />
-                    </svg>
-                  }
                   onClick={() => {
                     handleDelete(info.row.original.id)
                     setOpenPopoverId(null)
                   }}>
-                  {t('delete')}
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="none">
+                    <path
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      d="M7.48258 1.18025H8.51761C8.84062 1.18024 9.12229 1.18023 9.35489 1.19923C9.60133 1.21937 9.85079 1.26411 10.0921 1.38704C10.4491 1.56894 10.7393 1.85919 10.9212 2.21619C11.0441 2.45745 11.0889 2.70692 11.109 2.95335C11.125 3.14941 11.1275 3.38033 11.1279 3.64149H13.5379C13.9061 3.64149 14.2045 3.93996 14.2045 4.30815C14.2045 4.67634 13.9061 4.97482 13.5379 4.97482H12.9739V11.2268C12.9739 11.7206 12.9739 12.1312 12.9466 12.4663C12.918 12.8153 12.8565 13.1408 12.7001 13.4479C12.4592 13.9206 12.0748 14.305 11.602 14.5459C11.2949 14.7024 10.9695 14.7639 10.6205 14.7924C10.2853 14.8198 9.87475 14.8198 9.381 14.8197H6.61919C6.12544 14.8198 5.71484 14.8198 5.37973 14.7924C5.03069 14.7639 4.70525 14.7024 4.39817 14.5459C3.9254 14.305 3.54102 13.9206 3.30013 13.4479C3.14366 13.1408 3.08215 12.8153 3.05363 12.4663C3.02625 12.1312 3.02626 11.7206 3.02627 11.2268L3.02627 4.97482H2.46232C2.09413 4.97482 1.79565 4.67634 1.79565 4.30815C1.79565 3.93996 2.09413 3.64149 2.46232 3.64149H4.87226C4.87265 3.38033 4.87516 3.14941 4.89118 2.95335C4.91131 2.70692 4.95605 2.45745 5.07899 2.21619C5.26089 1.85919 5.55113 1.56894 5.90813 1.38704C6.1494 1.26411 6.39886 1.21937 6.64529 1.19923C6.8779 1.18023 7.15957 1.18024 7.48258 1.18025ZM4.3596 4.97482V11.1996C4.3596 11.7275 4.36012 12.0833 4.38254 12.3577C4.40432 12.6243 4.44341 12.7547 4.48814 12.8425C4.60119 13.0644 4.7816 13.2448 5.00349 13.3579C5.09128 13.4026 5.22172 13.4417 5.4883 13.4635C5.76267 13.4859 6.11851 13.4864 6.64642 13.4864H9.35377C9.88168 13.4864 10.2375 13.4859 10.5119 13.4635C10.7785 13.4417 10.9089 13.4026 10.9967 13.3579C11.2186 13.2448 11.399 13.0644 11.5121 12.8425C11.5568 12.7547 11.5959 12.6243 11.6176 12.3577C11.6401 12.0833 11.6406 11.7275 11.6406 11.1996V4.97482H4.3596ZM9.79454 3.64149H6.20564C6.20612 3.38305 6.20849 3.20378 6.22008 3.06193C6.23348 2.89795 6.2558 2.84348 6.267 2.82151C6.32106 2.71539 6.40734 2.62912 6.51345 2.57505C6.53543 2.56386 6.58989 2.54154 6.75387 2.52814C6.92563 2.51411 7.15224 2.51359 7.50785 2.51359H8.49234C8.84795 2.51359 9.07456 2.51411 9.24632 2.52814C9.4103 2.54154 9.46476 2.56386 9.48674 2.57505C9.59285 2.62912 9.67913 2.71539 9.73319 2.82151C9.74439 2.84348 9.76671 2.89795 9.78011 3.06193C9.7917 3.20378 9.79407 3.38305 9.79454 3.64149ZM6.76948 7.02568C7.13767 7.02568 7.43614 7.32416 7.43614 7.69235V10.7689C7.43614 11.1371 7.13767 11.4356 6.76948 11.4356C6.40129 11.4356 6.10281 11.1371 6.10281 10.7689V7.69235C6.10281 7.32416 6.40129 7.02568 6.76948 7.02568ZM9.23071 7.02568C9.5989 7.02568 9.89738 7.32416 9.89738 7.69235V10.7689C9.89738 11.1371 9.5989 11.4356 9.23071 11.4356C8.86252 11.4356 8.56404 11.1371 8.56404 10.7689V7.69235C8.56404 7.32416 8.86252 7.02568 9.23071 7.02568Z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                  <Text
+                    fontFamily="PingFang SC"
+                    fontSize="12px"
+                    fontStyle="normal"
+                    fontWeight="500"
+                    lineHeight="16px"
+                    letterSpacing="0.5px">
+                    {t('delete')}
+                  </Text>
                 </Button>
               </Flex>
             </PopoverBody>
@@ -525,106 +605,109 @@ const ModelKeyTable = ({ t, onOpen }: { t: TFunction; onOpen: () => void }) => {
 
   return (
     <>
-      {isLoading || data?.tokens.length === 0 ? (
-        <Box w="full" h="full" gap="24px">
-          <Box w="full" h="full" display="flex" justifyContent="center" alignItems="center">
-            <Center>
-              <Flex display="inline-flex" flexDirection="column" alignItems="center" gap="24px">
-                <Flex flexDirection="column" alignItems="center" gap="16px">
-                  <Flex
-                    display="flex"
-                    width="64px"
-                    height="64px"
-                    justifyContent="center"
-                    alignItems="center"
-                    position="relative">
-                    <Box width="64px" height="64px">
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="64"
-                        height="64"
-                        viewBox="0 0 64 64"
-                        fill="none">
-                        <circle
-                          cx="32"
-                          cy="32"
-                          r="31.6"
-                          stroke="#9CA2A8"
-                          stroke-width="0.8"
-                          stroke-dasharray="3.2 3.2"
-                        />
-                      </svg>
-                    </Box>
-                    <Flex
-                      width="38.4px"
-                      height="38.4px"
-                      position="absolute"
-                      left="50%"
-                      top="50%"
-                      transform="translate(-50%, -50%)">
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="40"
-                        height="39"
-                        viewBox="0 0 40 39"
-                        fill="none">
-                        <path
-                          d="M6.95009 33.671L6.91264 33.6702C6.69615 33.6632 5.57087 33.5909 4.8212 32.8881C4.05254 32.1673 3.96079 31.1308 3.95022 30.9301C3.9492 30.9113 3.9487 30.8924 3.94873 30.8735V25.2283C3.93754 24.9957 3.92251 24.2101 4.18574 23.3377C4.43794 22.5011 4.74952 21.9519 4.83875 21.8037L7.67287 16.7898C7.68704 16.7646 7.70202 16.7403 7.71809 16.7166C7.80645 16.5855 8.28149 15.9107 8.93285 15.5055C9.61822 15.0786 10.4478 15.0457 10.6858 15.0457H28.5882C28.6112 15.0457 28.634 15.0463 28.6575 15.0478C28.8355 15.0592 29.7596 15.1372 30.4747 15.5463C31.1576 15.9374 31.7072 16.6208 31.8104 16.7536C31.8314 16.7808 31.851 16.809 31.8694 16.838L35.2354 22.1717C35.2498 22.1952 35.2643 22.2198 35.2775 22.2449C35.342 22.3688 35.6747 23.0233 35.8432 23.6598C36.0096 24.2896 36.0497 24.9856 36.0558 25.1185L36.0567 25.164V30.81C36.0605 31.1085 36.0055 32.133 35.1557 32.8943C34.3509 33.6148 33.2674 33.6706 32.9545 33.6706H6.95009V33.671ZM6.66171 22.9478C6.59978 23.058 6.40716 23.4223 6.24522 23.959C6.07419 24.5264 6.09451 25.0568 6.09723 25.1156C6.09875 25.141 6.09967 25.1665 6.1 25.1919V30.8363L6.10211 30.8519C6.11544 30.9534 6.17738 31.1993 6.28416 31.3102L6.29852 31.3255L6.31545 31.3379C6.46492 31.4481 6.8353 31.5113 6.96466 31.5191L32.9562 31.5195C33.1719 31.517 33.5488 31.4451 33.7196 31.292C33.8724 31.155 33.9067 30.92 33.9067 30.8823L33.9046 30.817V25.197C33.893 24.9777 33.8505 24.5408 33.7625 24.2097C33.6629 23.8315 33.4401 23.3785 33.3964 23.2918L33.3843 23.2706L30.0811 18.0358L30.0708 18.0233C29.9456 17.8726 29.6454 17.5504 29.4057 17.413C29.1981 17.2942 28.7752 17.2181 28.5575 17.1978L28.5349 17.1967H10.6896C10.5226 17.1982 10.2123 17.2424 10.069 17.332C9.86704 17.4578 9.62797 17.7453 9.52966 17.8796L9.52119 17.8912L6.70482 22.8736L6.67439 22.9248L6.6748 22.9235C6.67398 22.926 6.66171 22.9478 6.66171 22.9478ZM19.9 13.4682C19.6148 13.4679 19.3413 13.3545 19.1396 13.1528C18.9379 12.9512 18.8245 12.6777 18.8241 12.3925V6.20461C18.8245 5.91948 18.9379 5.64612 19.1395 5.44448C19.3411 5.24285 19.6144 5.12939 19.8996 5.129C20.1848 5.12928 20.4582 5.24268 20.66 5.44433C20.8617 5.64597 20.9752 5.91939 20.9756 6.20461V12.3925C20.9753 12.6776 20.8619 12.9511 20.6602 13.1527C20.4586 13.3544 20.1852 13.4678 19.9 13.4681V13.4682ZM27.1119 13.4274C26.8267 13.427 26.5533 13.3135 26.3517 13.1118C26.15 12.9101 26.0366 12.6367 26.0363 12.3515C26.0365 12.1048 26.1213 11.8656 26.2766 11.6739L28.7355 8.64132C28.8363 8.51661 28.9638 8.41609 29.1086 8.34716C29.2533 8.27823 29.4117 8.24265 29.5721 8.24303C29.8206 8.24303 30.0547 8.32611 30.2483 8.48318C30.3584 8.5718 30.4499 8.68143 30.5173 8.8057C30.5847 8.92996 30.6267 9.06639 30.6409 9.20704C30.6561 9.34752 30.6432 9.48962 30.603 9.6251C30.5628 9.76057 30.4962 9.88671 30.4069 9.99622L27.948 13.0289C27.8477 13.1535 27.7206 13.2541 27.5761 13.323C27.4317 13.3919 27.2736 13.4275 27.1136 13.4272H27.1119V13.4274ZM12.809 13.3451C12.6474 13.3455 12.4878 13.3093 12.3423 13.2392C12.1967 13.169 12.0689 13.0667 11.9686 12.9401L9.55142 9.90765C9.37386 9.68444 9.29211 9.39991 9.32409 9.11649C9.35608 8.83307 9.49919 8.57391 9.72203 8.39589C9.91185 8.24335 10.1482 8.16052 10.3918 8.16124C10.7215 8.16124 11.0283 8.30897 11.2336 8.5665L13.651 11.5989C13.8286 11.822 13.9105 12.1065 13.8786 12.3899C13.8467 12.6732 13.7036 12.9324 13.4809 13.1105C13.2903 13.262 13.0542 13.3447 12.8107 13.3451H12.809Z"
-                          fill="#7B838B"
-                        />
-                        <path
-                          d="M19.9417 29.2455C17.5452 29.2455 15.463 27.6388 14.8787 25.3389L14.8316 25.1535L5.27874 25.1478C4.99351 25.1472 4.72015 25.0335 4.51855 24.8317C4.31694 24.63 4.20352 24.3565 4.20312 24.0713C4.20357 23.7862 4.31705 23.5129 4.51868 23.3114C4.72032 23.1098 4.99364 22.9964 5.27874 22.9961L15.7979 23.0028C16.083 23.0035 16.3561 23.1172 16.5576 23.3188C16.7591 23.5205 16.8725 23.7938 16.8729 24.0789C16.8729 25.7697 18.2209 27.094 19.9417 27.094C21.6564 27.094 22.9997 25.7697 22.9997 24.0789C23.0003 23.7938 23.1138 23.5205 23.3154 23.3188C23.5169 23.1172 23.7902 23.0036 24.0753 23.0028L34.4971 22.9963C35.0904 22.9963 35.5727 23.4781 35.5731 24.071C35.5735 24.664 35.0913 25.1471 34.4983 25.148L25.0421 25.1537L24.9949 25.3391C24.4113 27.6389 22.3335 29.2455 19.9417 29.2455Z"
-                          fill="#7B838B"
-                        />
-                      </svg>
-                    </Flex>
-                  </Flex>
-                  <Text
-                    color="var(--light-general-on-surface-lowest, var(--Gray-Modern-500, #667085))"
-                    fontFamily="PingFang SC"
-                    fontSize="14px"
-                    fontWeight={500}
-                    lineHeight="20px"
-                    letterSpacing="0.1px">
-                    {t('noData')}
-                  </Text>
-                </Flex>
-
-                <Button
-                  onClick={() => onOpen()}
+      {isLoading ? (
+        <Box w="full" h="full" display="flex" justifyContent="center" alignItems="center">
+          <Center>
+            <Spinner />
+          </Center>
+        </Box>
+      ) : data?.tokens.length === 0 ? (
+        <Box w="full" h="full" display="flex" justifyContent="center" alignItems="center">
+          <Center>
+            <Flex display="inline-flex" flexDirection="column" alignItems="center" gap="24px">
+              <Flex flexDirection="column" alignItems="center" gap="16px">
+                <Flex
                   display="flex"
-                  width="156px"
-                  padding="10px 20px"
+                  width="64px"
+                  height="64px"
                   justifyContent="center"
                   alignItems="center"
-                  gap="1px"
-                  borderRadius="6px"
-                  background="grayModern.900"
-                  boxShadow="0px 1px 2px 0px rgba(19, 51, 107, 0.05), 0px 0px 1px 0px rgba(19, 51, 107, 0.08)"
-                  _hover={{ background: 'grayModern.800' }}
-                  leftIcon={
+                  position="relative">
+                  <Box width="64px" height="64px">
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
-                      width="16"
-                      height="16"
-                      viewBox="0 0 16 16"
+                      width="64"
+                      height="64"
+                      viewBox="0 0 64 64"
+                      fill="none">
+                      <circle
+                        cx="32"
+                        cy="32"
+                        r="31.6"
+                        stroke="#9CA2A8"
+                        strokeWidth="0.8"
+                        strokeDasharray="3.2 3.2"
+                      />
+                    </svg>
+                  </Box>
+                  <Flex
+                    width="38.4px"
+                    height="38.4px"
+                    position="absolute"
+                    left="50%"
+                    top="50%"
+                    transform="translate(-50%, -50%)">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="40"
+                      height="39"
+                      viewBox="0 0 40 39"
                       fill="none">
                       <path
-                        fill-rule="evenodd"
-                        clip-rule="evenodd"
-                        d="M8.00008 2.66667C8.36827 2.66667 8.66675 2.96515 8.66675 3.33334V7.33334H12.6667C13.0349 7.33334 13.3334 7.63181 13.3334 8C13.3334 8.36819 13.0349 8.66667 12.6667 8.66667H8.66675V12.6667C8.66675 13.0349 8.36827 13.3333 8.00008 13.3333C7.63189 13.3333 7.33341 13.0349 7.33341 12.6667V8.66667H3.33341C2.96522 8.66667 2.66675 8.36819 2.66675 8C2.66675 7.63181 2.96522 7.33334 3.33341 7.33334H7.33341V3.33334C7.33341 2.96515 7.63189 2.66667 8.00008 2.66667Z"
-                        fill="white"
+                        d="M6.95009 33.671L6.91264 33.6702C6.69615 33.6632 5.57087 33.5909 4.8212 32.8881C4.05254 32.1673 3.96079 31.1308 3.95022 30.9301C3.9492 30.9113 3.9487 30.8924 3.94873 30.8735V25.2283C3.93754 24.9957 3.92251 24.2101 4.18574 23.3377C4.43794 22.5011 4.74952 21.9519 4.83875 21.8037L7.67287 16.7898C7.68704 16.7646 7.70202 16.7403 7.71809 16.7166C7.80645 16.5855 8.28149 15.9107 8.93285 15.5055C9.61822 15.0786 10.4478 15.0457 10.6858 15.0457H28.5882C28.6112 15.0457 28.634 15.0463 28.6575 15.0478C28.8355 15.0592 29.7596 15.1372 30.4747 15.5463C31.1576 15.9374 31.7072 16.6208 31.8104 16.7536C31.8314 16.7808 31.851 16.809 31.8694 16.838L35.2354 22.1717C35.2498 22.1952 35.2643 22.2198 35.2775 22.2449C35.342 22.3688 35.6747 23.0233 35.8432 23.6598C36.0096 24.2896 36.0497 24.9856 36.0558 25.1185L36.0567 25.164V30.81C36.0605 31.1085 36.0055 32.133 35.1557 32.8943C34.3509 33.6148 33.2674 33.6706 32.9545 33.6706H6.95009V33.671ZM6.66171 22.9478C6.59978 23.058 6.40716 23.4223 6.24522 23.959C6.07419 24.5264 6.09451 25.0568 6.09723 25.1156C6.09875 25.141 6.09967 25.1665 6.1 25.1919V30.8363L6.10211 30.8519C6.11544 30.9534 6.17738 31.1993 6.28416 31.3102L6.29852 31.3255L6.31545 31.3379C6.46492 31.4481 6.8353 31.5113 6.96466 31.5191L32.9562 31.5195C33.1719 31.517 33.5488 31.4451 33.7196 31.292C33.8724 31.155 33.9067 30.92 33.9067 30.8823L33.9046 30.817V25.197C33.893 24.9777 33.8505 24.5408 33.7625 24.2097C33.6629 23.8315 33.4401 23.3785 33.3964 23.2918L33.3843 23.2706L30.0811 18.0358L30.0708 18.0233C29.9456 17.8726 29.6454 17.5504 29.4057 17.413C29.1981 17.2942 28.7752 17.2181 28.5575 17.1978L28.5349 17.1967H10.6896C10.5226 17.1982 10.2123 17.2424 10.069 17.332C9.86704 17.4578 9.62797 17.7453 9.52966 17.8796L9.52119 17.8912L6.70482 22.8736L6.67439 22.9248L6.6748 22.9235C6.67398 22.926 6.66171 22.9478 6.66171 22.9478ZM19.9 13.4682C19.6148 13.4679 19.3413 13.3545 19.1396 13.1528C18.9379 12.9512 18.8245 12.6777 18.8241 12.3925V6.20461C18.8245 5.91948 18.9379 5.64612 19.1395 5.44448C19.3411 5.24285 19.6144 5.12939 19.8996 5.129C20.1848 5.12928 20.4582 5.24268 20.66 5.44433C20.8617 5.64597 20.9752 5.91939 20.9756 6.20461V12.3925C20.9753 12.6776 20.8619 12.9511 20.6602 13.1527C20.4586 13.3544 20.1852 13.4678 19.9 13.4681V13.4682ZM27.1119 13.4274C26.8267 13.427 26.5533 13.3135 26.3517 13.1118C26.15 12.9101 26.0366 12.6367 26.0363 12.3515C26.0365 12.1048 26.1213 11.8656 26.2766 11.6739L28.7355 8.64132C28.8363 8.51661 28.9638 8.41609 29.1086 8.34716C29.2533 8.27823 29.4117 8.24265 29.5721 8.24303C29.8206 8.24303 30.0547 8.32611 30.2483 8.48318C30.3584 8.5718 30.4499 8.68143 30.5173 8.8057C30.5847 8.92996 30.6267 9.06639 30.6409 9.20704C30.6561 9.34752 30.6432 9.48962 30.603 9.6251C30.5628 9.76057 30.4962 9.88671 30.4069 9.99622L27.948 13.0289C27.8477 13.1535 27.7206 13.2541 27.5761 13.323C27.4317 13.3919 27.2736 13.4275 27.1136 13.4272H27.1119V13.4274ZM12.809 13.3451C12.6474 13.3455 12.4878 13.3093 12.3423 13.2392C12.1967 13.169 12.0689 13.0667 11.9686 12.9401L9.55142 9.90765C9.37386 9.68444 9.29211 9.39991 9.32409 9.11649C9.35608 8.83307 9.49919 8.57391 9.72203 8.39589C9.91185 8.24335 10.1482 8.16052 10.3918 8.16124C10.7215 8.16124 11.0283 8.30897 11.2336 8.5665L13.651 11.5989C13.8286 11.822 13.9105 12.1065 13.8786 12.3899C13.8467 12.6732 13.7036 12.9324 13.4809 13.1105C13.2903 13.262 13.0542 13.3447 12.8107 13.3451H12.809Z"
+                        fill="#7B838B"
+                      />
+                      <path
+                        d="M19.9417 29.2455C17.5452 29.2455 15.463 27.6388 14.8787 25.3389L14.8316 25.1535L5.27874 25.1478C4.99351 25.1472 4.72015 25.0335 4.51855 24.8317C4.31694 24.63 4.20352 24.3565 4.20312 24.0713C4.20357 23.7862 4.31705 23.5129 4.51868 23.3114C4.72032 23.1098 4.99364 22.9964 5.27874 22.9961L15.7979 23.0028C16.083 23.0035 16.3561 23.1172 16.5576 23.3188C16.7591 23.5205 16.8725 23.7938 16.8729 24.0789C16.8729 25.7697 18.2209 27.094 19.9417 27.094C21.6564 27.094 22.9997 25.7697 22.9997 24.0789C23.0003 23.7938 23.1138 23.5205 23.3154 23.3188C23.5169 23.1172 23.7902 23.0036 24.0753 23.0028L34.4971 22.9963C35.0904 22.9963 35.5727 23.4781 35.5731 24.071C35.5735 24.664 35.0913 25.1471 34.4983 25.148L25.0421 25.1537L24.9949 25.3391C24.4113 27.6389 22.3335 29.2455 19.9417 29.2455Z"
+                        fill="#7B838B"
                       />
                     </svg>
-                  }>
-                  {t('createKey2')}
-                </Button>
+                  </Flex>
+                </Flex>
+                <Text
+                  color="var(--light-general-on-surface-lowest, var(--Gray-Modern-500, #667085))"
+                  fontFamily="PingFang SC"
+                  fontSize="14px"
+                  fontWeight={500}
+                  lineHeight="20px"
+                  letterSpacing="0.1px">
+                  {t('noData')}
+                </Text>
               </Flex>
-            </Center>
-          </Box>
+
+              <Button
+                onClick={() => onOpen()}
+                display="flex"
+                width="156px"
+                padding="10px 20px"
+                justifyContent="center"
+                alignItems="center"
+                gap="8px"
+                borderRadius="6px"
+                background="grayModern.900"
+                boxShadow="0px 1px 2px 0px rgba(19, 51, 107, 0.05), 0px 0px 1px 0px rgba(19, 51, 107, 0.08)"
+                _hover={{ background: 'grayModern.800' }}>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  fill="none">
+                  <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M8.00008 2.66667C8.36827 2.66667 8.66675 2.96515 8.66675 3.33334V7.33334H12.6667C13.0349 7.33334 13.3334 7.63181 13.3334 8C13.3334 8.36819 13.0349 8.66667 12.6667 8.66667H8.66675V12.6667C8.66675 13.0349 8.36827 13.3333 8.00008 13.3333C7.63189 13.3333 7.33341 13.0349 7.33341 12.6667V8.66667H3.33341C2.96522 8.66667 2.66675 8.36819 2.66675 8C2.66675 7.63181 2.96522 7.33334 3.33341 7.33334H7.33341V3.33334C7.33341 2.96515 7.63189 2.66667 8.00008 2.66667Z"
+                    fill="white"
+                  />
+                </svg>
+                {t('createKey2')}
+              </Button>
+            </Flex>
+          </Center>
         </Box>
       ) : (
-        <>
+        <Flex direction="column" alignItems="flex-start" gap="12px" w="full" h="full">
+          {/* header */}
           <Flex alignItems="center" alignSelf="stretch" justifyContent="space-between">
             <Flex alignItems="center" gap="8px">
               <ChainIcon boxSize={18} color="grayModern.900" />
@@ -634,119 +717,138 @@ const ModelKeyTable = ({ t, onOpen }: { t: TFunction; onOpen: () => void }) => {
                 fontSize="14px"
                 fontWeight={500}
                 lineHeight="20px"
+                whiteSpace="nowrap"
                 letterSpacing="0.1px">
                 API Endpoint:
               </Text>
-              <Text
-                color="var(--light-sealos-secondary-text, var(--Bright-Blue-600, #0884DD))"
-                fontFamily="PingFang SC"
-                fontSize="14px"
-                fontWeight={500}
-                lineHeight="20px"
-                letterSpacing="0.1px"
-                textDecoration="none"
-                _hover={{ textDecoration: 'underline' }}
-                cursor="pointer"
-                onClick={() => {
-                  const endpoint = aiproxyBackend
-                  navigator.clipboard.writeText(endpoint).then(
-                    () => {
-                      message({
-                        status: 'success',
-                        title: t('copySuccess'),
-                        isClosable: true,
-                        duration: 2000,
-                        position: 'top'
-                      })
-                    },
-                    (err) => {
-                      message({
-                        status: 'warning',
-                        title: t('copyFailed'),
-                        description: err?.message || t('copyFailed'),
-                        isClosable: true,
-                        position: 'top'
-                      })
-                    }
-                  )
-                }}>
-                <MyTooltip label={t('copy')}>{aiproxyBackend}</MyTooltip>
-              </Text>
+              <MyTooltip label={t('copy')}>
+                <Text
+                  color="var(--light-sealos-secondary-text, var(--Bright-Blue-600, #0884DD))"
+                  fontFamily="PingFang SC"
+                  fontSize="14px"
+                  fontWeight={500}
+                  lineHeight="20px"
+                  letterSpacing="0.1px"
+                  textDecoration="none"
+                  _hover={{ textDecoration: 'underline' }}
+                  cursor="pointer"
+                  whiteSpace="nowrap"
+                  onClick={() => {
+                    const endpoint = aiproxyBackend
+                    navigator.clipboard.writeText(endpoint).then(
+                      () => {
+                        message({
+                          status: 'success',
+                          title: t('copySuccess'),
+                          isClosable: true,
+                          duration: 2000,
+                          position: 'top'
+                        })
+                      },
+                      (err) => {
+                        message({
+                          status: 'warning',
+                          title: t('copyFailed'),
+                          description: err?.message || t('copyFailed'),
+                          isClosable: true,
+                          position: 'top'
+                        })
+                      }
+                    )
+                  }}>
+                  {aiproxyBackend}
+                </Text>
+              </MyTooltip>
             </Flex>
             <Button
               display="flex"
               padding="8px 14px"
               justifyContent="center"
               alignItems="center"
-              gap="1px"
+              gap="6px"
               borderRadius="6px"
               bg="grayModern.900"
               color="white"
               boxShadow="0px 1px 2px 0px rgba(19, 51, 107, 0.05), 0px 0px 1px 0px rgba(19, 51, 107, 0.08)"
               _hover={{ bg: 'grayModern.800' }}
-              onClick={onOpen}
-              leftIcon={
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="16"
-                  height="16"
-                  viewBox="0 0 16 16"
-                  fill="none">
-                  <path
-                    fill-rule="evenodd"
-                    clip-rule="evenodd"
-                    d="M8.00008 2.66667C8.36827 2.66667 8.66675 2.96515 8.66675 3.33334V7.33334H12.6667C13.0349 7.33334 13.3334 7.63181 13.3334 8C13.3334 8.36819 13.0349 8.66667 12.6667 8.66667H8.66675V12.6667C8.66675 13.0349 8.36827 13.3333 8.00008 13.3333C7.63189 13.3333 7.33341 13.0349 7.33341 12.6667V8.66667H3.33341C2.96522 8.66667 2.66675 8.36819 2.66675 8C2.66675 7.63181 2.96522 7.33334 3.33341 7.33334H7.33341V3.33334C7.33341 2.96515 7.63189 2.66667 8.00008 2.66667Z"
-                    fill="white"
-                  />
-                </svg>
-              }>
+              onClick={onOpen}>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none">
+                <path
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M8.00008 2.66667C8.36827 2.66667 8.66675 2.96515 8.66675 3.33334V7.33334H12.6667C13.0349 7.33334 13.3334 7.63181 13.3334 8C13.3334 8.36819 13.0349 8.66667 12.6667 8.66667H8.66675V12.6667C8.66675 13.0349 8.36827 13.3333 8.00008 13.3333C7.63189 13.3333 7.33341 13.0349 7.33341 12.6667V8.66667H3.33341C2.96522 8.66667 2.66675 8.36819 2.66675 8C2.66675 7.63181 2.96522 7.33334 3.33341 7.33334H7.33341V3.33334C7.33341 2.96515 7.63189 2.66667 8.00008 2.66667Z"
+                  fill="white"
+                />
+              </svg>
               {t('createKey')}
             </Button>
           </Flex>
+          {/* header end */}
 
-          <Box w="full" h="full" gap="24px">
-            <TableContainer w="full" h="full" maxH="full" overflowY="auto">
-              <Table variant="simple" w="full" size="md">
+          {/* table */}
+          <Box w="full" h="full" gap="24px" display="flex" flexDirection="column" overflow="hidden">
+            <TableContainer w="full" flex="1 0 0" overflowY="auto" minHeight="0">
+              <Table variant="simple" size="md" w="full">
                 <Thead>
-                  {table.getHeaderGroups().map((headerGroup) => (
-                    <Tr key={headerGroup.id} height="42px" alignSelf="stretch" bg="grayModern.100">
-                      {headerGroup.headers.map((header, i) => (
-                        <Th
-                          key={header.id}
-                          border={'none'}
-                          // the first th
-                          borderTopLeftRadius={i === 0 ? '6px' : '0'}
-                          borderBottomLeftRadius={i === 0 ? '6px' : '0'}
-                          // the last th
-                          borderTopRightRadius={i === headerGroup.headers.length - 1 ? '6px' : '0'}
-                          borderBottomRightRadius={
-                            i === headerGroup.headers.length - 1 ? '6px' : '0'
-                          }>
-                          {flexRender(header.column.columnDef.header, header.getContext())}
-                        </Th>
-                      ))}
-                    </Tr>
-                  ))}
+                  {table.getHeaderGroups().map((headerGroup) => {
+                    return (
+                      <Tr
+                        key={headerGroup.id}
+                        height="42px"
+                        alignSelf="stretch"
+                        bg="grayModern.100">
+                        {headerGroup.headers.map((header, i) => {
+                          return (
+                            <Th
+                              key={header.id}
+                              border={'none'}
+                              // the first th
+                              borderTopLeftRadius={i === 0 ? '6px' : '0'}
+                              borderBottomLeftRadius={i === 0 ? '6px' : '0'}
+                              // the last th
+                              borderTopRightRadius={
+                                i === headerGroup.headers.length - 1 ? '6px' : '0'
+                              }
+                              borderBottomRightRadius={
+                                i === headerGroup.headers.length - 1 ? '6px' : '0'
+                              }>
+                              {flexRender(header.column.columnDef.header, header.getContext())}
+                            </Th>
+                          )
+                        })}
+                      </Tr>
+                    )
+                  })}
                 </Thead>
                 <Tbody>
-                  {table.getRowModel().rows.map((row) => (
-                    <Tr
-                      key={row.id}
-                      height="48px"
-                      alignSelf="stretch"
-                      borderBottom="1px solid"
-                      borderColor="grayModern.150">
-                      {row.getVisibleCells().map((cell) => (
-                        <Td key={cell.id}>
-                          {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                        </Td>
-                      ))}
-                    </Tr>
-                  ))}
+                  {table.getRowModel().rows.map((row) => {
+                    return (
+                      <Tr
+                        key={row.id}
+                        height="48px"
+                        alignSelf="stretch"
+                        borderBottom="1px solid"
+                        borderColor="grayModern.150">
+                        {row.getVisibleCells().map((cell) => {
+                          return (
+                            <Td key={cell.id}>
+                              {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                            </Td>
+                          )
+                        })}
+                      </Tr>
+                    )
+                  })}
                 </Tbody>
               </Table>
             </TableContainer>
             <SwitchPage
+              m="0"
               justifyContent={'end'}
               currentPage={page}
               totalPage={Math.ceil(total / pageSize)}
@@ -755,7 +857,8 @@ const ModelKeyTable = ({ t, onOpen }: { t: TFunction; onOpen: () => void }) => {
               setCurrentPage={(idx: number) => setPage(idx)}
             />
           </Box>
-        </>
+          {/* table end */}
+        </Flex>
       )}
     </>
   )
@@ -784,11 +887,11 @@ function CreateKeyModal({
     successIconFill: 'white'
   })
 
-  const createKeyMutation = useMutation((name: string) => createKey(name), {
+  const createKeyMutation = useMutation((name: string) => createToken(name), {
     onSuccess(data) {
       createKeyMutation.reset()
       setName('')
-      queryClient.invalidateQueries(['getKeys'])
+      queryClient.invalidateQueries([QueryKey.GetTokens])
       message({
         status: 'success',
         title: t('key.createSuccess'),
@@ -798,11 +901,12 @@ function CreateKeyModal({
       })
       onClose()
     },
-    onError(err: any) {
+    onError(err) {
+      console.error(err)
       message({
         status: 'warning',
         title: t('key.createFailed'),
-        description: err?.response?.data?.message || t('key.createFailed'),
+        description: err instanceof Error ? t(err.message as any) : t('key.createFailed'),
         isClosable: true,
         position: 'top'
       })
diff --git a/frontend/providers/aiproxy/components/user/ModelList.tsx b/frontend/providers/aiproxy/components/user/ModelList.tsx
deleted file mode 100644
index e58eca707394..000000000000
--- a/frontend/providers/aiproxy/components/user/ModelList.tsx
+++ /dev/null
@@ -1,206 +0,0 @@
-'use client'
-import { Badge, Center, Flex, Spinner, Text } from '@chakra-ui/react'
-import { ListIcon } from '@/ui/icons/home/Icons'
-import { useTranslationClientSide } from '@/app/i18n/client'
-import { useI18n } from '@/providers/i18n/i18nContext'
-import Image, { StaticImageData } from 'next/image'
-import { useQuery } from '@tanstack/react-query'
-import { getModels } from '@/api/platform'
-import { useMessage } from '@sealos/ui'
-// icons
-import OpenAIIcon from '@/ui/svg/icons/modelist/openai.svg'
-import QwenIcon from '@/ui/svg/icons/modelist/qianwen.svg'
-import ChatglmIcon from '@/ui/svg/icons/modelist/chatglm.svg'
-import DeepseekIcon from '@/ui/svg/icons/modelist/deepseek.svg'
-import MoonshotIcon from '@/ui/svg/icons/modelist/moonshot.svg'
-import SparkdeskIcon from '@/ui/svg/icons/modelist/sparkdesk.svg'
-import AbabIcon from '@/ui/svg/icons/modelist/minimax.svg'
-import DoubaoIcon from '@/ui/svg/icons/modelist/doubao.svg'
-import ErnieIcon from '@/ui/svg/icons/modelist/ernie.svg'
-import { useMemo } from 'react'
-import { MyTooltip } from '@/components/MyTooltip'
-import { ModelIdentifier } from '@/types/front'
-
-const getIdentifier = (modelName: string): ModelIdentifier => {
-  return modelName.toLowerCase().split(/[-._\d]/)[0] as ModelIdentifier
-}
-
-const sortModels = (models: string[]): string[] => {
-  // group by identifier
-  const groupMap = new Map<string, string[]>()
-
-  // group by identifier
-  models.forEach((model) => {
-    const identifier = getIdentifier(model)
-    // special handle gpt and o1, group them as 'openai'
-    const groupKey = identifier === 'gpt' || identifier === 'o' ? 'openai' : identifier
-    if (!groupMap.has(groupKey)) {
-      groupMap.set(groupKey, [])
-    }
-    groupMap.get(groupKey)?.push(model)
-  })
-
-  // sort by identifier and flatten the result
-  return Array.from(groupMap.entries())
-    .sort((a, b) => a[0].localeCompare(b[0])) // sort by identifier
-    .flatMap(([_, models]) => models.sort()) // flatten and keep the order in each group
-}
-
-const ModelComponent = ({ modelName }: { modelName: string }) => {
-  const modelGroups = {
-    openai: {
-      icon: OpenAIIcon,
-      identifiers: ['gpt', 'o1']
-    },
-    ernie: {
-      icon: ErnieIcon,
-      identifiers: ['ernie']
-    },
-    qwen: {
-      icon: QwenIcon,
-      identifiers: ['qwen']
-    },
-    chatglm: {
-      icon: ChatglmIcon,
-      identifiers: ['chatglm', 'glm']
-    },
-    deepseek: {
-      icon: DeepseekIcon,
-      identifiers: ['deepseek']
-    },
-    moonshot: {
-      icon: MoonshotIcon,
-      identifiers: ['moonshot']
-    },
-    sparkdesk: {
-      icon: SparkdeskIcon,
-      identifiers: ['sparkdesk']
-    },
-    abab: {
-      icon: AbabIcon,
-      identifiers: ['abab']
-    },
-    doubao: {
-      icon: DoubaoIcon,
-      identifiers: ['doubao']
-    }
-  }
-
-  // get model icon
-  const getModelIcon = (modelName: string): StaticImageData => {
-    const identifier = getIdentifier(modelName)
-    const group = Object.values(modelGroups).find((group) => group.identifiers.includes(identifier))
-    return group?.icon || OpenAIIcon
-  }
-
-  const { lng } = useI18n()
-  const { t } = useTranslationClientSide(lng, 'common')
-  const iconSrc = getModelIcon(modelName)
-  const { message } = useMessage({
-    warningBoxBg: 'var(--Yellow-50, #FFFAEB)',
-    warningIconBg: 'var(--Yellow-500, #F79009)',
-    warningIconFill: 'white',
-    successBoxBg: 'var(--Green-50, #EDFBF3)',
-    successIconBg: 'var(--Green-600, #039855)',
-    successIconFill: 'white'
-  })
-
-  return (
-    <Flex align="center" gap="12px">
-      <Image src={iconSrc} alt={modelName} width={20} height={20} />
-      <MyTooltip label={t(getIdentifier(modelName))} width="auto" height="auto">
-        <Text
-          color="grayModern.900"
-          fontFamily="PingFang SC"
-          fontSize="12px"
-          fontWeight={500}
-          lineHeight="16px"
-          letterSpacing="0.5px"
-          onClick={() =>
-            navigator.clipboard.writeText(modelName).then(
-              () => {
-                message({
-                  status: 'success',
-                  title: t('copySuccess'),
-                  isClosable: true,
-                  duration: 2000,
-                  position: 'top'
-                })
-              },
-              (err) => {
-                message({
-                  status: 'warning',
-                  title: t('copyFailed'),
-                  description: err?.message || t('copyFailed'),
-                  isClosable: true,
-                  position: 'top'
-                })
-              }
-            )
-          }
-          cursor="pointer"
-          _hover={{ color: 'blue.500' }}
-          transition="color 0.2s ease">
-          {modelName}
-        </Text>
-      </MyTooltip>
-    </Flex>
-  )
-}
-
-const ModelList: React.FC = () => {
-  const { lng } = useI18n()
-  const { t } = useTranslationClientSide(lng, 'common')
-  const { isLoading, data } = useQuery(['getModels'], () => getModels())
-
-  const sortedData = useMemo(() => sortModels(data || []), [data])
-
-  return (
-    <>
-      <Flex align="center" gap="8px">
-        <ListIcon boxSize={18} color="grayModern.900" />
-        <Flex align="center" gap="4px">
-          <Text
-            color="grayModern.900"
-            fontFamily="PingFang SC"
-            fontSize="14px"
-            fontWeight={500}
-            lineHeight="20px"
-            letterSpacing="0.1px">
-            {t('modelList.title')}
-          </Text>
-          <Badge
-            display="flex"
-            padding="2px 6px"
-            flexDirection="column"
-            justifyContent="center"
-            alignItems="center"
-            gap="10px"
-            borderRadius="20px"
-            bg="grayModern.100">
-            <Text
-              color="grayModern.900"
-              fontFamily="PingFang SC"
-              fontSize="12px"
-              fontWeight={500}
-              lineHeight="16px"
-              letterSpacing="0.5px">
-              {data?.length || 0}
-            </Text>
-          </Badge>
-        </Flex>
-      </Flex>
-      <Flex flexDir="column" align="flex-start" gap="16px">
-        {isLoading ? (
-          <Center>
-            <Spinner size="md" color="grayModern.800" />
-          </Center>
-        ) : (
-          sortedData.map((model) => <ModelComponent key={model} modelName={model} />)
-        )}
-      </Flex>
-    </>
-  )
-}
-
-export default ModelList
diff --git a/frontend/providers/aiproxy/components/user/Sidebar.tsx b/frontend/providers/aiproxy/components/user/Sidebar.tsx
index 8b2b211db30f..698b64cec59c 100644
--- a/frontend/providers/aiproxy/components/user/Sidebar.tsx
+++ b/frontend/providers/aiproxy/components/user/Sidebar.tsx
@@ -11,6 +11,8 @@ import logsIcon from '@/ui/svg/icons/sidebar/logs.svg'
 import logsIcon_a from '@/ui/svg/icons/sidebar/logs_a.svg'
 import priceIcon from '@/ui/svg/icons/sidebar/price.svg'
 import priceIcon_a from '@/ui/svg/icons/sidebar/price_a.svg'
+import keysIcon from '@/ui/svg/icons/sidebar/key.svg'
+import keysIcon_a from '@/ui/svg/icons/sidebar/key_a.svg'
 import { useI18n } from '@/providers/i18n/i18nContext'
 
 type Menu = {
@@ -28,6 +30,14 @@ const SideBar = (): JSX.Element => {
   const { t } = useTranslationClientSide(lng, 'common')
 
   const menus: Menu[] = [
+    {
+      id: 'keys',
+      url: '/key',
+      value: t('Sidebar.Keys'),
+      icon: keysIcon,
+      activeIcon: keysIcon_a,
+      display: true
+    },
     {
       id: 'home',
       url: '/home',
@@ -38,7 +48,7 @@ const SideBar = (): JSX.Element => {
     },
     {
       id: 'logs',
-      url: '/logs',
+      url: '/log',
       value: t('Sidebar.Logs'),
       icon: logsIcon,
       activeIcon: logsIcon_a,
@@ -61,7 +71,7 @@ const SideBar = (): JSX.Element => {
       px="12px"
       gap="var(--md, 8px)"
       alignContent="center"
-      flexShrink={0}>
+      flex="1">
       {menus
         .filter((menu) => menu.display)
         .map((menu) => {
diff --git a/frontend/providers/aiproxy/hooks/useDebounce.ts b/frontend/providers/aiproxy/hooks/useDebounce.ts
new file mode 100644
index 000000000000..aa770c4da03a
--- /dev/null
+++ b/frontend/providers/aiproxy/hooks/useDebounce.ts
@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react'
+
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value)
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value)
+    }, delay)
+
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [value, delay])
+
+  return debouncedValue
+}
diff --git a/frontend/providers/aiproxy/package.json b/frontend/providers/aiproxy/package.json
index d4e321884ec5..33b1952a9b31 100644
--- a/frontend/providers/aiproxy/package.json
+++ b/frontend/providers/aiproxy/package.json
@@ -9,12 +9,15 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.9.0",
     "@sealos/ui": "workspace:*",
     "@tanstack/react-query": "^4.35.3",
     "@tanstack/react-table": "^8.10.7",
     "accept-language": "^3.0.20",
     "axios": "^1.7.7",
     "date-fns": "^2.30.0",
+    "downshift": "^9.0.8",
+    "echarts": "^5.4.3",
     "i18next": "^23.11.5",
     "i18next-browser-languagedetector": "^8.0.0",
     "i18next-http-backend": "^2.6.2",
@@ -26,7 +29,9 @@
     "react-day-picker": "^8.8.2",
     "react-dom": "^18",
     "react-hook-form": "^7.46.2",
+    "react-json-view": "^1.21.3",
     "sealos-desktop-sdk": "workspace:*",
+    "zod": "^3.23.8",
     "zustand": "^4.5.4"
   },
   "devDependencies": {
@@ -42,4 +47,4 @@
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/providers/aiproxy/providers/chakra/QueryProvider.tsx b/frontend/providers/aiproxy/providers/tanstack-query/QueryProvider.tsx
similarity index 100%
rename from frontend/providers/aiproxy/providers/chakra/QueryProvider.tsx
rename to frontend/providers/aiproxy/providers/tanstack-query/QueryProvider.tsx
diff --git a/frontend/providers/aiproxy/store/backend.ts b/frontend/providers/aiproxy/store/backend.ts
index de6bec27dae4..6c92761ebba5 100644
--- a/frontend/providers/aiproxy/store/backend.ts
+++ b/frontend/providers/aiproxy/store/backend.ts
@@ -4,8 +4,14 @@ import { persist } from 'zustand/middleware'
 interface BackendState {
   aiproxyBackend: string
   currencySymbol: 'shellCoin' | 'usd' | 'cny'
+  docUrl: string
+  invitationUrl: string
+  isInvitationActive: boolean
   setAiproxyBackend: (backend: string) => void
   setCurrencySymbol: (symbol: 'shellCoin' | 'usd' | 'cny') => void
+  setDocUrl: (url: string) => void
+  setIsInvitationActive: (active: boolean) => void
+  setInvitationUrl: (url: string) => void
 }
 
 export const useBackendStore = create<BackendState>()(
@@ -13,8 +19,14 @@ export const useBackendStore = create<BackendState>()(
     (set) => ({
       aiproxyBackend: '',
       currencySymbol: 'shellCoin',
+      docUrl: '',
+      invitationUrl: '',
+      isInvitationActive: false,
       setAiproxyBackend: (backend) => set({ aiproxyBackend: backend }),
-      setCurrencySymbol: (symbol) => set({ currencySymbol: symbol })
+      setCurrencySymbol: (symbol) => set({ currencySymbol: symbol }),
+      setDocUrl: (url) => set({ docUrl: url }),
+      setIsInvitationActive: (active) => set({ isInvitationActive: active }),
+      setInvitationUrl: (url) => set({ invitationUrl: url })
     }),
     {
       name: 'aiproxy-backend-storage'
diff --git a/frontend/providers/aiproxy/store/session.ts b/frontend/providers/aiproxy/store/session.ts
new file mode 100644
index 000000000000..90f7d5214614
--- /dev/null
+++ b/frontend/providers/aiproxy/store/session.ts
@@ -0,0 +1,24 @@
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+import { immer } from 'zustand/middleware/immer'
+import { SessionV1 } from 'sealos-desktop-sdk'
+
+interface SessionState {
+  session: SessionV1 | null
+  setSession: (session: SessionV1 | null) => void
+}
+
+export const useSessionStore = create<SessionState>()(
+  persist(
+    immer((set) => ({
+      session: null as SessionV1 | null,
+      setSession: (session) =>
+        set((state) => {
+          state.session = session
+        })
+    })),
+    {
+      name: 'session'
+    }
+  )
+)
diff --git a/frontend/providers/aiproxy/types/admin/channels/channelInfo.ts b/frontend/providers/aiproxy/types/admin/channels/channelInfo.ts
new file mode 100644
index 000000000000..80c08193fba2
--- /dev/null
+++ b/frontend/providers/aiproxy/types/admin/channels/channelInfo.ts
@@ -0,0 +1,43 @@
+export interface ChannelInfo {
+  model_mapping: Record<string, any>
+  config: Record<string, any>
+  other: string
+  key: string
+  name: string
+  base_url: string
+  models: any[]
+  balance: number
+  response_duration: number
+  id: number
+  used_amount: number
+  request_count: number
+  status: number
+  type: number
+  priority: number
+  created_at: number
+  accessed_at: number
+  test_at: number
+  balance_updated_at: number
+}
+
+export type CreateChannelRequest = {
+  type: number
+  name: string
+  key: string
+  base_url: string
+  models: string[]
+  model_mapping: Record<string, string>
+}
+
+export enum ChannelStatus {
+  ChannelStatusUnknown = 0,
+  ChannelStatusEnabled = 1,
+  ChannelStatusDisabled = 2,
+  ChannelStatusAutoDisabled = 3
+}
+
+export type ChannelType = `${number}`
+
+export type ChannelTypeMapName = {
+  [key in ChannelType]: string
+}
diff --git a/frontend/providers/aiproxy/types/admin/group.ts b/frontend/providers/aiproxy/types/admin/group.ts
new file mode 100644
index 000000000000..9eb7845fd8c9
--- /dev/null
+++ b/frontend/providers/aiproxy/types/admin/group.ts
@@ -0,0 +1,20 @@
+export interface GroupInfo {
+  id: string
+  status: number
+  used_amount: number
+  qpm: number
+  request_count: number
+  created_at: number
+  accessed_at: number
+}
+
+export interface GroupQueryParams {
+  keyword?: string
+  page: number
+  perPage: number
+}
+
+export enum GroupStatus {
+  ENABLED = 1,
+  DISABLED = 2
+}
diff --git a/frontend/providers/aiproxy/types/admin/option.ts b/frontend/providers/aiproxy/types/admin/option.ts
new file mode 100644
index 000000000000..bd7ed0de6661
--- /dev/null
+++ b/frontend/providers/aiproxy/types/admin/option.ts
@@ -0,0 +1,34 @@
+import { ChannelType } from './channels/channelInfo'
+
+export interface BatchOptionData {
+  DefaultChannelModelMapping: string
+  DefaultChannelModels: string
+}
+
+export interface OptionData {
+  ApproximateTokenEnabled: string
+  AutomaticDisableChannelEnabled: string
+  AutomaticEnableChannelWhenTestSucceedEnabled: string
+  BillingEnabled: string
+  CompletionPrice: string
+  DefaultChannelModelMapping: string
+  DefaultChannelModels: string
+  DefaultGroupQPM: string
+  DisableServe: string
+  GeminiSafetySetting: string
+  GeminiVersion: string
+  GlobalApiRateLimitNum: string
+  GroupMaxTokenNum: string
+  ModelPrice: string
+  RetryTimes: string
+}
+
+export type DefaultChannelModel = {
+  [key in ChannelType]: string[]
+}
+
+export type DefaultChannelModelMapping = {
+  [key in ChannelType]: {
+    [modelKey: string]: string
+  }
+}
diff --git a/frontend/providers/aiproxy/types/api.d.ts b/frontend/providers/aiproxy/types/api.d.ts
index 71452bae2296..22e8ddff50cc 100644
--- a/frontend/providers/aiproxy/types/api.d.ts
+++ b/frontend/providers/aiproxy/types/api.d.ts
@@ -1,8 +1,23 @@
-export interface ApiResp<T = any> {
+export type ApiResp<T = any> = {
   code: number
+  message?: string
+  error?: string
+  data?: T
+}
+
+export type ApiProxyBackendResp<T = any> = {
+  success: boolean
   message: string
   data?: T
 }
 
-export const isApiResp = (x: unknown): x is ApiResp =>
-  typeof x.code === 'number' && typeof x.message === 'string'
+export const isApiResp = (x: unknown): x is ApiResp => {
+  return (
+    typeof x === 'object' &&
+    x !== null &&
+    'code' in x &&
+    'message' in x &&
+    typeof (x as any).code === 'number' &&
+    typeof (x as any).message === 'string'
+  )
+}
diff --git a/frontend/providers/aiproxy/types/appConfig.d.ts b/frontend/providers/aiproxy/types/app-config.d.ts
similarity index 63%
rename from frontend/providers/aiproxy/types/appConfig.d.ts
rename to frontend/providers/aiproxy/types/app-config.d.ts
index 7ddd60466770..7597536148dc 100644
--- a/frontend/providers/aiproxy/types/appConfig.d.ts
+++ b/frontend/providers/aiproxy/types/app-config.d.ts
@@ -1,12 +1,20 @@
 export type AppConfigType = {
+  common: {
+    docUrl: string
+    isInvitationActive: boolean
+    invitationUrl: string
+  }
   auth: {
     appTokenJwtKey: string
     aiProxyBackendKey: string
+    accountServerTokenJwtKey: string
   }
   backend: {
     aiproxy: string
     aiproxyInternal: string
+    accountServer: string
   }
+  adminNameSpace: string[]
   currencySymbol: 'shellCoin' | 'cny' | 'usd'
 }
 
diff --git a/frontend/providers/aiproxy/types/backend.d.ts b/frontend/providers/aiproxy/types/backend.d.ts
deleted file mode 100644
index d572c684e7cb..000000000000
--- a/frontend/providers/aiproxy/types/backend.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface ModelPrice {
-  name: string
-  prompt: number
-  completion: number
-}
diff --git a/frontend/providers/aiproxy/types/form.d.ts b/frontend/providers/aiproxy/types/form.d.ts
deleted file mode 100644
index 3f5d605bbb5c..000000000000
--- a/frontend/providers/aiproxy/types/form.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export interface LogForm {
-  name: string
-  modelName: string
-  createdAt: Date
-  endedAt: Date
-  page: number
-  pageSize: number
-}
diff --git a/frontend/providers/aiproxy/types/front.d.ts b/frontend/providers/aiproxy/types/front.d.ts
index de83dc1fd21c..e69de29bb2d1 100644
--- a/frontend/providers/aiproxy/types/front.d.ts
+++ b/frontend/providers/aiproxy/types/front.d.ts
@@ -1,12 +0,0 @@
-export type ModelIdentifier =
-  | 'ernie'
-  | 'qwen'
-  | 'chatglm'
-  | 'gpt' // Add these
-  | 'o' // Add these
-  | 'deepseek'
-  | 'moonshot'
-  | 'sparkdesk'
-  | 'abab'
-  | 'glm'
-  | 'doubao'
diff --git a/frontend/providers/aiproxy/types/models/model.ts b/frontend/providers/aiproxy/types/models/model.ts
new file mode 100644
index 000000000000..b8085242fe38
--- /dev/null
+++ b/frontend/providers/aiproxy/types/models/model.ts
@@ -0,0 +1,42 @@
+import { ChannelType } from '@/types/admin/channels/channelInfo'
+
+export interface ModelConfig {
+  config?: ModelConfigDetail
+  created_at: number
+  updated_at: number
+  image_prices: number[] | null
+  model: string
+  owner: string
+  image_batch_size: number
+  type: number
+  input_price: number
+  output_price: number
+  rpm: number
+}
+
+export type ChannelWithMode = {
+  [K in ChannelType]?: ModelConfig[]
+}
+
+export type ChannelDefaultModeMapping = {
+  [K in ChannelType]?: {
+    [modelKey: string]: string
+  }
+}
+
+export type ChannelDefaultModel = {
+  [K in ChannelType]?: string[]
+}
+
+export type ChannelWithDefaultModelAndDefaultModeMapping = {
+  mapping: ChannelDefaultModeMapping
+  models: ChannelDefaultModel
+}
+
+export interface ModelConfigDetail {
+  max_input_tokens?: number
+  max_output_tokens?: number
+  max_context_tokens?: number
+  vision?: boolean
+  tool_choice?: boolean
+}
diff --git a/frontend/providers/aiproxy/types/query-key.ts b/frontend/providers/aiproxy/types/query-key.ts
new file mode 100644
index 000000000000..eff327f6e7c6
--- /dev/null
+++ b/frontend/providers/aiproxy/types/query-key.ts
@@ -0,0 +1,22 @@
+export enum QueryKey {
+  // 共用
+  // common
+  GetTokens = 'getTokens',
+  GetUserLogs = 'getUserLogs',
+  GetEnabledModels = 'getEnabledModels',
+  GetDashboardData = 'getDashboardData',
+  GetUserLogDetail = 'getUserLogDetail',
+
+  // admin
+  GetChannels = 'getChannels',
+  GetAllChannels = 'getAllChannels',
+  GetGlobalLogs = 'getGlobalLogs',
+  GetGroups = 'getGroups',
+  GetChannelTypeNames = 'getChannelTypeNames',
+  GetAllChannelModes = 'getAllChannelModes',
+  GetDefaultModelAndModeMapping = 'getDefaultModelAndModeMapping',
+  GetOption = 'getOption',
+
+  // 组件自己管理
+  GetCommonConfig = 'getCommonConfig'
+}
diff --git a/frontend/providers/aiproxy/types/user/dashboard.ts b/frontend/providers/aiproxy/types/user/dashboard.ts
new file mode 100644
index 000000000000..fcefa76c6d61
--- /dev/null
+++ b/frontend/providers/aiproxy/types/user/dashboard.ts
@@ -0,0 +1,20 @@
+import { ApiResp } from '../api'
+
+export interface ChartDataItem {
+  timestamp: number
+  request_count: number
+  used_amount: number
+  exception_count: number
+}
+export interface DashboardData {
+  chart_data: ChartDataItem[]
+  token_names: string[]
+  models: string[]
+  total_count: number
+  exception_count: number
+  used_amount: number
+  rpm: number
+  tpm: number
+}
+
+export type DashboardResponse = ApiResp<DashboardData>
diff --git a/frontend/providers/aiproxy/types/log.d.ts b/frontend/providers/aiproxy/types/user/logs.ts
similarity index 53%
rename from frontend/providers/aiproxy/types/log.d.ts
rename to frontend/providers/aiproxy/types/user/logs.ts
index 35e53134b775..cef98d63ddd5 100644
--- a/frontend/providers/aiproxy/types/log.d.ts
+++ b/frontend/providers/aiproxy/types/user/logs.ts
@@ -1,8 +1,20 @@
+export interface RequestDetail {
+  request_body?: string
+  response_body?: string
+  id: number
+  log_id: number
+}
+
 export interface LogItem {
+  request_detail?: RequestDetail
+  request_id: string
+  request_at: number
+  id: number
   code: number
   content: string
   group: string
   model: string
+  mode: number
   used_amount: number
   price: number
   completion_price: number
@@ -15,11 +27,4 @@ export interface LogItem {
   created_at: number
 }
 
-export interface LogResponse {
-  data: {
-    logs: LogItem[]
-    total: number
-  }
-  message: string
-  success: boolean
-}
+export interface GlobalLogItem extends LogItem {}
diff --git a/frontend/providers/aiproxy/types/getKeys.d.ts b/frontend/providers/aiproxy/types/user/token.ts
similarity index 100%
rename from frontend/providers/aiproxy/types/getKeys.d.ts
rename to frontend/providers/aiproxy/types/user/token.ts
diff --git a/frontend/providers/aiproxy/ui/icons/home/Icons.tsx b/frontend/providers/aiproxy/ui/icons/home/Icons.tsx
deleted file mode 100644
index 54c78739c00d..000000000000
--- a/frontend/providers/aiproxy/ui/icons/home/Icons.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { Icon, IconProps } from '@chakra-ui/react'
-
-export const ChainIcon = (props: IconProps) => (
-  <Icon viewBox="0 0 18 18" width="18" height="18" fill="none" {...props}>
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M15.065 4.06161C16.3317 5.82297 16.1731 8.29256 14.5891 9.87655L13.6605 10.8051C13.3574 11.1082 12.866 11.1082 12.563 10.8051L7.28603 5.52819C6.98295 5.22511 6.98295 4.73372 7.28603 4.43064L8.2146 3.50206C9.78978 1.92688 12.2407 1.76126 14.0001 3.00518L15.0432 1.96204C15.3361 1.66915 15.811 1.66915 16.1039 1.96204C16.3968 2.25493 16.3968 2.72981 16.1039 3.0227L15.065 4.06161ZM1.89154 15.1228C1.59865 15.4157 1.59865 15.8906 1.89155 16.1835C2.18444 16.4764 2.65931 16.4764 2.9522 16.1835L3.98563 15.1501C5.74633 16.4091 8.20964 16.2481 9.79066 14.6671L10.7192 13.7385C11.0223 13.4354 11.0223 12.944 10.7192 12.641L10.0647 11.9865L10.6237 11.4275C10.9166 11.1346 10.9166 10.6597 10.6237 10.3668C10.3308 10.074 9.85594 10.074 9.56304 10.3668L9.00409 10.9258L7.17634 9.09806L7.73131 8.54309C8.02421 8.2502 8.02421 7.77532 7.73131 7.48243C7.43842 7.18954 6.96355 7.18954 6.67065 7.48243L6.11568 8.0374L5.4423 7.36402C5.13922 7.06094 4.64783 7.06094 4.34475 7.36402L3.41617 8.2926C1.83803 9.87075 1.67475 12.328 2.92634 14.088L1.89154 15.1228ZM4.89352 8.93657L4.47683 9.35326C3.30235 10.5277 3.30235 12.4319 4.47683 13.6064C5.65131 14.7809 7.55552 14.7809 8.73 13.6064L9.14669 13.1897L4.89352 8.93657ZM13.5284 8.81589L13.1117 9.23258L8.85857 4.97941L9.27526 4.56272C10.4497 3.38824 12.3539 3.38824 13.5284 4.56272C14.7029 5.7372 14.7029 7.64141 13.5284 8.81589Z"
-      fill="currentColor"
-    />
-  </Icon>
-)
-
-export const ListIcon = (props: IconProps) => (
-  <Icon viewBox="0 0 18 18" width="18" height="18" {...props}>
-    <path
-      d="M2.01868 6.3782C2.49917 6.3782 2.88868 5.98869 2.88868 5.5082C2.88868 5.02771 2.49917 4.6382 2.01868 4.6382C1.53819 4.6382 1.14868 5.02771 1.14868 5.5082C1.14868 5.98869 1.53819 6.3782 2.01868 6.3782Z"
-      fill="currentColor"
-    />
-    <path
-      d="M5.3911 4.7582C4.97688 4.7582 4.6411 5.09399 4.6411 5.5082C4.6411 5.92241 4.97688 6.2582 5.3911 6.2582H16.1012C16.5154 6.2582 16.8512 5.92241 16.8512 5.5082C16.8512 5.09399 16.5154 4.7582 16.1012 4.7582H5.3911Z"
-      fill="currentColor"
-    />
-    <path
-      d="M4.6411 9C4.6411 8.58579 4.97688 8.25 5.3911 8.25H16.1012C16.5154 8.25 16.8512 8.58579 16.8512 9C16.8512 9.41421 16.5154 9.75 16.1012 9.75H5.3911C4.97688 9.75 4.6411 9.41421 4.6411 9Z"
-      fill="currentColor"
-    />
-    <path
-      d="M2.01868 9.87C2.49917 9.87 2.88868 9.48048 2.88868 9C2.88868 8.51951 2.49917 8.13 2.01868 8.13C1.53819 8.13 1.14868 8.51951 1.14868 9C1.14868 9.48048 1.53819 9.87 2.01868 9.87Z"
-      fill="currentColor"
-    />
-    <path
-      d="M4.6411 12.492C4.6411 12.0778 4.97688 11.742 5.3911 11.742H16.1012C16.5154 11.742 16.8512 12.0778 16.8512 12.492C16.8512 12.9062 16.5154 13.242 16.1012 13.242H5.3911C4.97688 13.242 4.6411 12.9062 4.6411 12.492Z"
-      fill="currentColor"
-    />
-    <path
-      d="M2.01868 13.362C2.49917 13.362 2.88868 12.9725 2.88868 12.492C2.88868 12.0115 2.49917 11.622 2.01868 11.622C1.53819 11.622 1.14868 12.0115 1.14868 12.492C1.14868 12.9725 1.53819 13.362 2.01868 13.362Z"
-      fill="currentColor"
-    />
-  </Icon>
-)
-
-// 使用示例：
-// <ListIcon boxSize={6} color="gray.800" />
diff --git a/frontend/providers/aiproxy/ui/icons/index.tsx b/frontend/providers/aiproxy/ui/icons/index.tsx
index 14c182dd619b..7c01da583b2d 100644
--- a/frontend/providers/aiproxy/ui/icons/index.tsx
+++ b/frontend/providers/aiproxy/ui/icons/index.tsx
@@ -33,3 +33,43 @@ export function RightFirstIcon(props: IconProps) {
     </Icon>
   )
 }
+
+export const ChainIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 18 18" width="18" height="18" fill="none" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M15.065 4.06161C16.3317 5.82297 16.1731 8.29256 14.5891 9.87655L13.6605 10.8051C13.3574 11.1082 12.866 11.1082 12.563 10.8051L7.28603 5.52819C6.98295 5.22511 6.98295 4.73372 7.28603 4.43064L8.2146 3.50206C9.78978 1.92688 12.2407 1.76126 14.0001 3.00518L15.0432 1.96204C15.3361 1.66915 15.811 1.66915 16.1039 1.96204C16.3968 2.25493 16.3968 2.72981 16.1039 3.0227L15.065 4.06161ZM1.89154 15.1228C1.59865 15.4157 1.59865 15.8906 1.89155 16.1835C2.18444 16.4764 2.65931 16.4764 2.9522 16.1835L3.98563 15.1501C5.74633 16.4091 8.20964 16.2481 9.79066 14.6671L10.7192 13.7385C11.0223 13.4354 11.0223 12.944 10.7192 12.641L10.0647 11.9865L10.6237 11.4275C10.9166 11.1346 10.9166 10.6597 10.6237 10.3668C10.3308 10.074 9.85594 10.074 9.56304 10.3668L9.00409 10.9258L7.17634 9.09806L7.73131 8.54309C8.02421 8.2502 8.02421 7.77532 7.73131 7.48243C7.43842 7.18954 6.96355 7.18954 6.67065 7.48243L6.11568 8.0374L5.4423 7.36402C5.13922 7.06094 4.64783 7.06094 4.34475 7.36402L3.41617 8.2926C1.83803 9.87075 1.67475 12.328 2.92634 14.088L1.89154 15.1228ZM4.89352 8.93657L4.47683 9.35326C3.30235 10.5277 3.30235 12.4319 4.47683 13.6064C5.65131 14.7809 7.55552 14.7809 8.73 13.6064L9.14669 13.1897L4.89352 8.93657ZM13.5284 8.81589L13.1117 9.23258L8.85857 4.97941L9.27526 4.56272C10.4497 3.38824 12.3539 3.38824 13.5284 4.56272C14.7029 5.7372 14.7029 7.64141 13.5284 8.81589Z"
+      fill="currentColor"
+    />
+  </Icon>
+)
+
+export const ListIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 18 18" width="18" height="18" {...props}>
+    <path
+      d="M2.01868 6.3782C2.49917 6.3782 2.88868 5.98869 2.88868 5.5082C2.88868 5.02771 2.49917 4.6382 2.01868 4.6382C1.53819 4.6382 1.14868 5.02771 1.14868 5.5082C1.14868 5.98869 1.53819 6.3782 2.01868 6.3782Z"
+      fill="currentColor"
+    />
+    <path
+      d="M5.3911 4.7582C4.97688 4.7582 4.6411 5.09399 4.6411 5.5082C4.6411 5.92241 4.97688 6.2582 5.3911 6.2582H16.1012C16.5154 6.2582 16.8512 5.92241 16.8512 5.5082C16.8512 5.09399 16.5154 4.7582 16.1012 4.7582H5.3911Z"
+      fill="currentColor"
+    />
+    <path
+      d="M4.6411 9C4.6411 8.58579 4.97688 8.25 5.3911 8.25H16.1012C16.5154 8.25 16.8512 8.58579 16.8512 9C16.8512 9.41421 16.5154 9.75 16.1012 9.75H5.3911C4.97688 9.75 4.6411 9.41421 4.6411 9Z"
+      fill="currentColor"
+    />
+    <path
+      d="M2.01868 9.87C2.49917 9.87 2.88868 9.48048 2.88868 9C2.88868 8.51951 2.49917 8.13 2.01868 8.13C1.53819 8.13 1.14868 8.51951 1.14868 9C1.14868 9.48048 1.53819 9.87 2.01868 9.87Z"
+      fill="currentColor"
+    />
+    <path
+      d="M4.6411 12.492C4.6411 12.0778 4.97688 11.742 5.3911 11.742H16.1012C16.5154 11.742 16.8512 12.0778 16.8512 12.492C16.8512 12.9062 16.5154 13.242 16.1012 13.242H5.3911C4.97688 13.242 4.6411 12.9062 4.6411 12.492Z"
+      fill="currentColor"
+    />
+    <path
+      d="M2.01868 13.362C2.49917 13.362 2.88868 12.9725 2.88868 12.492C2.88868 12.0115 2.49917 11.622 2.01868 11.622C1.53819 11.622 1.14868 12.0115 1.14868 12.492C1.14868 12.9725 1.53819 13.362 2.01868 13.362Z"
+      fill="currentColor"
+    />
+  </Icon>
+)
diff --git a/frontend/providers/aiproxy/ui/icons/mode-icons/index.tsx b/frontend/providers/aiproxy/ui/icons/mode-icons/index.tsx
new file mode 100644
index 000000000000..48ff3e4fca72
--- /dev/null
+++ b/frontend/providers/aiproxy/ui/icons/mode-icons/index.tsx
@@ -0,0 +1,66 @@
+import OpenAIIcon from '@/ui/svg/icons/modelist/openai.svg'
+import QwenIcon from '@/ui/svg/icons/modelist/qianwen.svg'
+import ChatglmIcon from '@/ui/svg/icons/modelist/chatglm.svg'
+import DeepseekIcon from '@/ui/svg/icons/modelist/deepseek.svg'
+import MoonshotIcon from '@/ui/svg/icons/modelist/moonshot.svg'
+import SparkdeskIcon from '@/ui/svg/icons/modelist/sparkdesk.svg'
+import DoubaoIcon from '@/ui/svg/icons/modelist/doubao.svg'
+import BaaiIcon from '@/ui/svg/icons/modelist/baai.svg'
+import HunyuanIcon from '@/ui/svg/icons/modelist/hunyuan.svg'
+import MiniMaxIcon from '@/ui/svg/icons/modelist/minimax.svg'
+import BaiduIcon from '@/ui/svg/icons/modelist/baidu.svg'
+import GoogleGeminiIcon from '@/ui/svg/icons/modelist/google.svg'
+import AlibabaIcon from '@/ui/svg/icons/modelist/alibaba.svg'
+import FishAudioIcon from '@/ui/svg/icons/modelist/fishaudio.svg'
+import StabilityAIIcon from '@/ui/svg/icons/modelist/stabilityai.svg'
+import NeteaseIcon from '@/ui/svg/icons/modelist/netease.svg'
+import AI360Icon from '@/ui/svg/icons/modelist/ai360.svg'
+import AnthropicIcon from '@/ui/svg/icons/modelist/anthropic.svg'
+import BaichuanIcon from '@/ui/svg/icons/modelist/baichuan.svg'
+import MetaIcon from '@/ui/svg/icons/modelist/meta.svg'
+import MistralIcon from '@/ui/svg/icons/modelist/mistral.svg'
+import OpenChatIcon from '@/ui/svg/icons/modelist/openchat.svg'
+import DefogIcon from '@/ui/svg/icons/modelist/defog.svg'
+import NexusFlowIcon from '@/ui/svg/icons/modelist/nexusflow.svg'
+import MicrosoftIcon from '@/ui/svg/icons/modelist/microsoft.svg'
+import CohereIcon from '@/ui/svg/icons/modelist/cohere.svg'
+import HuggingFaceIcon from '@/ui/svg/icons/modelist/huggingface.svg'
+import LingyiWanwuIcon from '@/ui/svg/icons/modelist/lingyiwanwu.svg'
+import StepFunIcon from '@/ui/svg/icons/modelist/stepfun.svg'
+import DefaultIcon from '@/ui/svg/icons/modelist/default.svg'
+
+import AbabIcon from '@/ui/svg/icons/modelist/minimax.svg'
+import ErnieIcon from '@/ui/svg/icons/modelist/ernie.svg'
+
+export const modelIcons = {
+  openai: OpenAIIcon,
+  alibaba: QwenIcon,
+  tencent: HunyuanIcon,
+  xunfei: SparkdeskIcon,
+  deepseek: DeepseekIcon,
+  moonshot: MoonshotIcon,
+  minimax: MiniMaxIcon,
+  baidu: BaiduIcon,
+  google: GoogleGeminiIcon,
+  baai: BaaiIcon,
+  funaudiollm: AlibabaIcon,
+  doubao: DoubaoIcon,
+  fishaudio: FishAudioIcon,
+  chatglm: ChatglmIcon,
+  stabilityai: StabilityAIIcon,
+  netease: NeteaseIcon,
+  ai360: AI360Icon,
+  anthropic: AnthropicIcon,
+  meta: MetaIcon,
+  baichuan: BaichuanIcon,
+  mistral: MistralIcon,
+  openchat: OpenChatIcon,
+  microsoft: MicrosoftIcon,
+  defog: DefogIcon,
+  nexusflow: NexusFlowIcon,
+  cohere: CohereIcon,
+  huggingface: HuggingFaceIcon,
+  lingyiwanwu: LingyiWanwuIcon,
+  stepfun: StepFunIcon,
+  default: DefaultIcon
+}
diff --git a/frontend/providers/aiproxy/ui/icons/sidebar/HomeIcon.tsx b/frontend/providers/aiproxy/ui/icons/sidebar/HomeIcon.tsx
deleted file mode 100644
index a2ddb485ae11..000000000000
--- a/frontend/providers/aiproxy/ui/icons/sidebar/HomeIcon.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { createIcon } from '@chakra-ui/react';
-
-export const ConsoleIcon = createIcon({
-  displayName: 'ConsoleIcon',
-  viewBox: '0 0 24 24',
-  path: (
-    <>
-      <path
-        d="M6.90625 11.3066C6.90625 10.6874 7.40824 10.1854 8.02747 10.1854C8.6467 10.1854 9.14868 10.6874 9.14868 11.3066V12.2922C9.14868 12.9114 8.6467 13.4134 8.02747 13.4134C7.40824 13.4134 6.90625 12.9114 6.90625 12.2922V11.3066Z"
-        fill="currentColor"
-      />
-      <path
-        d="M15.9759 10.1854C15.3567 10.1854 14.8547 10.6874 14.8547 11.3066V12.2922C14.8547 12.9114 15.3567 13.4134 15.9759 13.4134C16.5951 13.4134 17.0971 12.9114 17.0971 12.2922V11.3066C17.0971 10.6874 16.5951 10.1854 15.9759 10.1854Z"
-        fill="currentColor"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M7.32871 1.98793C6.71863 2.08998 6.30678 2.66727 6.40883 3.27736L6.85881 5.96762H5.7C3.65655 5.96762 2 7.62417 2 9.66762V14.8457C2 16.8892 3.65655 18.5457 5.7 18.5457H18.3C20.3435 18.5457 22 16.8892 22 14.8457V9.66762C22 7.62417 20.3435 5.96762 18.3 5.96762H17.1346L17.5846 3.27736C17.6866 2.66727 17.2748 2.08998 16.6647 1.98793C16.0546 1.88589 15.4773 2.29774 15.3753 2.90782L14.8635 5.96762H9.12993L8.61814 2.90782C8.51609 2.29774 7.9388 1.88589 7.32871 1.98793ZM5.7 7.96762H18.3C19.2389 7.96762 20 8.72874 20 9.66762V14.8457C20 15.7846 19.2389 16.5457 18.3 16.5457H5.7C4.76112 16.5457 4 15.7846 4 14.8457V9.66762C4 8.72874 4.76112 7.96762 5.7 7.96762Z"
-        fill="currentColor"
-      />
-      <path
-        d="M18.1183 21.0001C18.1183 21.5524 17.6706 22.0001 17.1183 22.0001H6.88692C6.33463 22.0001 5.88692 21.5524 5.88692 21.0001C5.88692 20.4478 6.33463 20.0001 6.88692 20.0001H17.1183C17.6706 20.0001 18.1183 20.4478 18.1183 21.0001Z"
-        fill="currentColor"
-      />
-    </>
-  )
-});
diff --git a/frontend/providers/aiproxy/ui/svg/icons/admin-sidebar/config.svg b/frontend/providers/aiproxy/ui/svg/icons/admin-sidebar/config.svg
new file mode 100644
index 000000000000..1b3f2ee5f1ec
--- /dev/null
+++ b/frontend/providers/aiproxy/ui/svg/icons/admin-sidebar/config.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.03102 3.54451C10.1066 0.869604 13.8934 0.869604 14.969 3.54451C15.0321 3.70141 15.1115 3.97997 15.2205 4.36242C15.2294 4.39369 15.2385 4.42566 15.2478 4.45831C15.2959 4.62656 15.3078 4.66674 15.3176 4.69451C15.5146 5.25121 16.0873 5.58187 16.6679 5.4741C16.6969 5.46872 16.7377 5.459 16.9074 5.41646C16.9403 5.4082 16.9726 5.40011 17.0041 5.3922C17.3898 5.29539 17.6708 5.22489 17.8382 5.20107C20.6925 4.79509 22.5859 8.07455 20.8072 10.3435C20.7028 10.4766 20.5013 10.6846 20.2246 10.9703C20.202 10.9936 20.1789 11.0175 20.1552 11.0419C20.0335 11.1676 20.0047 11.1981 19.9856 11.2205C19.602 11.6694 19.602 12.3307 19.9856 12.7796C20.0047 12.802 20.0335 12.8325 20.1552 12.9582C20.1789 12.9826 20.202 13.0064 20.2246 13.0298C20.5013 13.3155 20.7028 13.5235 20.8072 13.6566C22.5859 15.9255 20.6925 19.205 17.8382 18.799C17.6708 18.7752 17.3898 18.7047 17.004 18.6079C16.9725 18.6 16.9403 18.5919 16.9074 18.5836C16.7377 18.5411 16.6969 18.5314 16.6679 18.526C16.0873 18.4182 15.5146 18.7489 15.3176 19.3056C15.3078 19.3333 15.2959 19.3735 15.2478 19.5418C15.2385 19.5744 15.2294 19.6064 15.2205 19.6377C15.1115 20.0201 15.0321 20.2987 14.969 20.4556C13.8934 23.1305 10.1066 23.1305 9.03102 20.4556C8.96793 20.2987 8.88851 20.0201 8.77948 19.6376C8.77057 19.6064 8.76146 19.5744 8.75214 19.5418C8.70413 19.3735 8.69216 19.3333 8.68233 19.3056C8.48536 18.7489 7.91265 18.4182 7.33204 18.526C7.30308 18.5314 7.26229 18.5411 7.09258 18.5836C7.05962 18.5919 7.02736 18.6 6.9958 18.6079C6.61011 18.7047 6.32919 18.7752 6.16177 18.799C3.30745 19.205 1.41405 15.9255 3.1928 13.6566C3.29713 13.5235 3.49866 13.3155 3.77535 13.0298C3.79798 13.0065 3.82111 12.9826 3.84473 12.9582C3.96643 12.8325 3.99524 12.802 4.01438 12.7796C4.39802 12.3307 4.39802 11.6694 4.01438 11.2205C3.99524 11.1981 3.96643 11.1676 3.84473 11.0419C3.82112 11.0175 3.79799 10.9936 3.77537 10.9703C3.49867 10.6846 3.29714 10.4766 3.1928 10.3435C1.41405 8.07455 3.30745 4.7951 6.16177 5.20107C6.3292 5.22489 6.61015 5.29539 6.99587 5.3922C7.02741 5.40011 7.05965 5.4082 7.09258 5.41646C7.26229 5.459 7.30308 5.46872 7.33204 5.4741C7.91265 5.58187 8.48536 5.25121 8.68233 4.69451C8.69216 4.66674 8.70413 4.62655 8.75214 4.45831C8.76146 4.42567 8.77057 4.39371 8.77948 4.36245C8.88851 3.97999 8.96793 3.70142 9.03102 3.54451ZM13.1134 4.29065C12.71 3.28756 11.29 3.28756 10.8866 4.29065C10.8866 4.29065 10.8868 4.29013 10.8866 4.29065C10.8866 4.29066 10.8825 4.30165 10.8725 4.33228C10.8618 4.36549 10.8478 4.41084 10.8293 4.47287C10.7922 4.59778 10.7434 4.76862 10.6754 5.00717C10.6728 5.01614 10.6703 5.025 10.6678 5.03376C10.6314 5.1614 10.6012 5.2671 10.5678 5.36161C10.0426 6.84615 8.51531 7.7279 6.96703 7.44051C6.86846 7.42221 6.76186 7.39547 6.63312 7.36317C6.62428 7.36095 6.61535 7.35871 6.6063 7.35644C6.36567 7.29612 6.19334 7.25294 6.0666 7.22264C6.00367 7.20759 5.9574 7.19703 5.92324 7.18976C5.89174 7.18305 5.8793 7.18105 5.87931 7.18103C5.87876 7.18095 5.87931 7.18102 5.87931 7.18103C4.80894 7.02879 4.09975 8.2587 4.76678 9.10955C4.76418 9.10623 4.77097 9.11501 4.79579 9.14257C4.81916 9.16851 4.85144 9.2033 4.89594 9.25028C4.98555 9.34489 5.10911 9.47254 5.28167 9.65077C5.28816 9.65748 5.29458 9.66411 5.30092 9.67066C5.39325 9.76599 5.46972 9.84493 5.53484 9.92114C6.55787 11.1183 6.55787 12.8818 5.53484 14.0789C5.46971 14.1552 5.39323 14.2341 5.30088 14.3295C5.29455 14.336 5.28815 14.3426 5.28167 14.3493C5.10911 14.5275 4.98555 14.6552 4.89594 14.7498C4.85144 14.7968 4.81916 14.8316 4.79579 14.8575C4.77423 14.8814 4.76628 14.8912 4.76626 14.8912C4.76592 14.8916 4.76626 14.8912 4.76626 14.8912C4.09923 15.7421 4.80977 16.9712 5.88014 16.8189C5.87597 16.8195 5.88697 16.818 5.92324 16.8103C5.95739 16.8031 6.00366 16.7925 6.0666 16.7774C6.19334 16.7471 6.36567 16.704 6.6063 16.6436L6.63313 16.6369C6.76186 16.6046 6.86847 16.5779 6.96703 16.5596C8.51531 16.2722 10.0426 17.1539 10.5678 18.6385C10.6012 18.733 10.6314 18.8387 10.6678 18.9663L10.6754 18.9929C10.7434 19.2315 10.7922 19.4023 10.8293 19.5272C10.8478 19.5892 10.8618 19.6346 10.8725 19.6678C10.8825 19.6984 10.887 19.7102 10.8869 19.7102C10.8869 19.7102 10.8871 19.7107 10.8869 19.7102C11.2903 20.7133 12.71 20.7125 13.1134 19.7094C13.1118 19.7133 13.116 19.7031 13.1274 19.6678C13.1382 19.6346 13.1522 19.5892 13.1706 19.5272C13.2078 19.4023 13.2565 19.2315 13.3246 18.9929L13.3322 18.9663C13.3686 18.8387 13.3987 18.733 13.4322 18.6385C13.9574 17.1539 15.4847 16.2722 17.033 16.5596C17.1315 16.5779 17.2381 16.6046 17.3669 16.6369C17.3757 16.6391 17.3846 16.6414 17.3937 16.6436C17.6343 16.704 17.8066 16.7471 17.9334 16.7774C17.9963 16.7925 18.0426 16.8031 18.0767 16.8103C18.1082 16.817 18.1207 16.819 18.1207 16.8191C18.1207 16.8191 18.1212 16.8191 18.1207 16.8191C19.191 16.9713 19.9002 15.7414 19.2332 14.8905C19.2332 14.8905 19.2335 14.891 19.2332 14.8905C19.2332 14.8906 19.2257 14.8814 19.2042 14.8575C19.1808 14.8316 19.1485 14.7968 19.104 14.7498C19.0144 14.6552 18.8909 14.5275 18.7183 14.3493L18.699 14.3294C18.6067 14.2341 18.5303 14.1551 18.4651 14.0789C17.4421 12.8818 17.4421 11.1183 18.4651 9.92114C18.5303 9.84493 18.6067 9.76599 18.6991 9.67066L18.7183 9.65077C18.8909 9.47254 19.0144 9.34489 19.104 9.25028C19.1485 9.2033 19.1808 9.16851 19.2042 9.14257C19.2257 9.11864 19.2337 9.10887 19.2337 9.10888C19.2337 9.10889 19.2341 9.10845 19.2337 9.10888C19.9008 8.25803 19.1902 7.0289 18.1198 7.18114C18.124 7.18055 18.113 7.18204 18.0767 7.18976C18.0426 7.19703 17.9963 7.20759 17.9334 7.22264C17.8066 7.25294 17.6343 7.29612 17.3937 7.35644L17.3669 7.36316C17.2381 7.39546 17.1315 7.42221 17.0329 7.44051C15.4847 7.7279 13.9574 6.84615 13.4322 5.36161C13.3988 5.26711 13.3686 5.16143 13.3322 5.03382L13.3246 5.00717C13.2565 4.76862 13.2078 4.59778 13.1706 4.47287C13.1522 4.41085 13.1382 4.36549 13.1274 4.33228C13.1175 4.30165 13.1133 4.29066 13.1134 4.29065C13.1134 4.29065 13.1131 4.29013 13.1134 4.29065Z" fill="#667085"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12 13.8918C13.0448 13.8918 13.8918 13.0448 13.8918 12C13.8918 10.9553 13.0448 10.1083 12 10.1083C10.9552 10.1083 10.1082 10.9553 10.1082 12C10.1082 13.0448 10.9552 13.8918 12 13.8918ZM12 15.8918C14.1494 15.8918 15.8918 14.1494 15.8918 12C15.8918 9.85069 14.1494 8.10828 12 8.10828C9.85063 8.10828 8.10823 9.85069 8.10823 12C8.10823 14.1494 9.85063 15.8918 12 15.8918Z" fill="#667085"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/providers/aiproxy/ui/svg/icons/admin-sidebar/config_a.svg b/frontend/providers/aiproxy/ui/svg/icons/admin-sidebar/config_a.svg
new file mode 100644
index 000000000000..b9c9f721f66d
--- /dev/null
+++ b/frontend/providers/aiproxy/ui/svg/icons/admin-sidebar/config_a.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.03102 3.54451C10.1066 0.869604 13.8934 0.869604 14.969 3.54451C15.0321 3.70141 15.1115 3.97997 15.2205 4.36242C15.2294 4.39369 15.2385 4.42566 15.2478 4.45831C15.2959 4.62656 15.3078 4.66674 15.3176 4.69451C15.5146 5.25121 16.0873 5.58187 16.6679 5.4741C16.6969 5.46872 16.7377 5.459 16.9074 5.41646C16.9403 5.4082 16.9726 5.40011 17.0041 5.3922C17.3898 5.29539 17.6708 5.22489 17.8382 5.20107C20.6925 4.79509 22.5859 8.07455 20.8072 10.3435C20.7028 10.4766 20.5013 10.6846 20.2246 10.9703C20.202 10.9936 20.1789 11.0175 20.1552 11.0419C20.0335 11.1676 20.0047 11.1981 19.9856 11.2205C19.602 11.6694 19.602 12.3307 19.9856 12.7796C20.0047 12.802 20.0335 12.8325 20.1552 12.9582C20.1789 12.9826 20.202 13.0064 20.2246 13.0298C20.5013 13.3155 20.7028 13.5235 20.8072 13.6566C22.5859 15.9255 20.6925 19.205 17.8382 18.799C17.6708 18.7752 17.3898 18.7047 17.004 18.6079C16.9725 18.6 16.9403 18.5919 16.9074 18.5836C16.7377 18.5411 16.6969 18.5314 16.6679 18.526C16.0873 18.4182 15.5146 18.7489 15.3176 19.3056C15.3078 19.3333 15.2959 19.3735 15.2478 19.5418C15.2385 19.5744 15.2294 19.6064 15.2205 19.6377C15.1115 20.0201 15.0321 20.2987 14.969 20.4556C13.8934 23.1305 10.1066 23.1305 9.03102 20.4556C8.96793 20.2987 8.88851 20.0201 8.77948 19.6376C8.77057 19.6064 8.76146 19.5744 8.75214 19.5418C8.70413 19.3735 8.69216 19.3333 8.68233 19.3056C8.48536 18.7489 7.91265 18.4182 7.33204 18.526C7.30308 18.5314 7.26229 18.5411 7.09258 18.5836C7.05962 18.5919 7.02736 18.6 6.9958 18.6079C6.61011 18.7047 6.32919 18.7752 6.16177 18.799C3.30745 19.205 1.41405 15.9255 3.1928 13.6566C3.29713 13.5235 3.49866 13.3155 3.77535 13.0298C3.79798 13.0065 3.82111 12.9826 3.84473 12.9582C3.96643 12.8325 3.99524 12.802 4.01438 12.7796C4.39802 12.3307 4.39802 11.6694 4.01438 11.2205C3.99524 11.1981 3.96643 11.1676 3.84473 11.0419C3.82112 11.0175 3.79799 10.9936 3.77537 10.9703C3.49867 10.6846 3.29714 10.4766 3.1928 10.3435C1.41405 8.07455 3.30745 4.7951 6.16177 5.20107C6.3292 5.22489 6.61015 5.29539 6.99587 5.3922C7.02741 5.40011 7.05965 5.4082 7.09258 5.41646C7.26229 5.459 7.30308 5.46872 7.33204 5.4741C7.91265 5.58187 8.48536 5.25121 8.68233 4.69451C8.69216 4.66674 8.70413 4.62655 8.75214 4.45831C8.76146 4.42567 8.77057 4.39371 8.77948 4.36245C8.88851 3.97999 8.96793 3.70142 9.03102 3.54451ZM13.1134 4.29065C12.71 3.28756 11.29 3.28756 10.8866 4.29065C10.8866 4.29065 10.8868 4.29013 10.8866 4.29065C10.8866 4.29066 10.8825 4.30165 10.8725 4.33228C10.8618 4.36549 10.8478 4.41084 10.8293 4.47287C10.7922 4.59778 10.7434 4.76862 10.6754 5.00717C10.6728 5.01614 10.6703 5.025 10.6678 5.03376C10.6314 5.1614 10.6012 5.2671 10.5678 5.36161C10.0426 6.84615 8.51531 7.7279 6.96703 7.44051C6.86846 7.42221 6.76186 7.39547 6.63312 7.36317C6.62428 7.36095 6.61535 7.35871 6.6063 7.35644C6.36567 7.29612 6.19334 7.25294 6.0666 7.22264C6.00367 7.20759 5.9574 7.19703 5.92324 7.18976C5.89174 7.18305 5.8793 7.18105 5.87931 7.18103C5.87876 7.18095 5.87931 7.18102 5.87931 7.18103C4.80894 7.02879 4.09975 8.2587 4.76678 9.10955C4.76418 9.10623 4.77097 9.11501 4.79579 9.14257C4.81916 9.16851 4.85144 9.2033 4.89594 9.25028C4.98555 9.34489 5.10911 9.47254 5.28167 9.65077C5.28816 9.65748 5.29458 9.66411 5.30092 9.67066C5.39325 9.76599 5.46972 9.84493 5.53484 9.92114C6.55787 11.1183 6.55787 12.8818 5.53484 14.0789C5.46971 14.1552 5.39323 14.2341 5.30088 14.3295C5.29455 14.336 5.28815 14.3426 5.28167 14.3493C5.10911 14.5275 4.98555 14.6552 4.89594 14.7498C4.85144 14.7968 4.81916 14.8316 4.79579 14.8575C4.77423 14.8814 4.76628 14.8912 4.76626 14.8912C4.76592 14.8916 4.76626 14.8912 4.76626 14.8912C4.09923 15.7421 4.80977 16.9712 5.88014 16.8189C5.87597 16.8195 5.88697 16.818 5.92324 16.8103C5.95739 16.8031 6.00366 16.7925 6.0666 16.7774C6.19334 16.7471 6.36567 16.704 6.6063 16.6436L6.63313 16.6369C6.76186 16.6046 6.86847 16.5779 6.96703 16.5596C8.51531 16.2722 10.0426 17.1539 10.5678 18.6385C10.6012 18.733 10.6314 18.8387 10.6678 18.9663L10.6754 18.9929C10.7434 19.2315 10.7922 19.4023 10.8293 19.5272C10.8478 19.5892 10.8618 19.6346 10.8725 19.6678C10.8825 19.6984 10.887 19.7102 10.8869 19.7102C10.8869 19.7102 10.8871 19.7107 10.8869 19.7102C11.2903 20.7133 12.71 20.7125 13.1134 19.7094C13.1118 19.7133 13.116 19.7031 13.1274 19.6678C13.1382 19.6346 13.1522 19.5892 13.1706 19.5272C13.2078 19.4023 13.2565 19.2315 13.3246 18.9929L13.3322 18.9663C13.3686 18.8387 13.3987 18.733 13.4322 18.6385C13.9574 17.1539 15.4847 16.2722 17.033 16.5596C17.1315 16.5779 17.2381 16.6046 17.3669 16.6369C17.3757 16.6391 17.3846 16.6414 17.3937 16.6436C17.6343 16.704 17.8066 16.7471 17.9334 16.7774C17.9963 16.7925 18.0426 16.8031 18.0767 16.8103C18.1082 16.817 18.1207 16.819 18.1207 16.8191C18.1207 16.8191 18.1212 16.8191 18.1207 16.8191C19.191 16.9713 19.9002 15.7414 19.2332 14.8905C19.2332 14.8905 19.2335 14.891 19.2332 14.8905C19.2332 14.8906 19.2257 14.8814 19.2042 14.8575C19.1808 14.8316 19.1485 14.7968 19.104 14.7498C19.0144 14.6552 18.8909 14.5275 18.7183 14.3493L18.699 14.3294C18.6067 14.2341 18.5303 14.1551 18.4651 14.0789C17.4421 12.8818 17.4421 11.1183 18.4651 9.92114C18.5303 9.84493 18.6067 9.76599 18.6991 9.67066L18.7183 9.65077C18.8909 9.47254 19.0144 9.34489 19.104 9.25028C19.1485 9.2033 19.1808 9.16851 19.2042 9.14257C19.2257 9.11864 19.2337 9.10887 19.2337 9.10888C19.2337 9.10889 19.2341 9.10845 19.2337 9.10888C19.9008 8.25803 19.1902 7.0289 18.1198 7.18114C18.124 7.18055 18.113 7.18204 18.0767 7.18976C18.0426 7.19703 17.9963 7.20759 17.9334 7.22264C17.8066 7.25294 17.6343 7.29612 17.3937 7.35644L17.3669 7.36316C17.2381 7.39546 17.1315 7.42221 17.0329 7.44051C15.4847 7.7279 13.9574 6.84615 13.4322 5.36161C13.3988 5.26711 13.3686 5.16143 13.3322 5.03382L13.3246 5.00717C13.2565 4.76862 13.2078 4.59778 13.1706 4.47287C13.1522 4.41085 13.1382 4.36549 13.1274 4.33228C13.1175 4.30165 13.1133 4.29066 13.1134 4.29065C13.1134 4.29065 13.1131 4.29013 13.1134 4.29065Z" fill="#111824"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12 13.8918C13.0448 13.8918 13.8918 13.0448 13.8918 12C13.8918 10.9553 13.0448 10.1083 12 10.1083C10.9552 10.1083 10.1082 10.9553 10.1082 12C10.1082 13.0448 10.9552 13.8918 12 13.8918ZM12 15.8918C14.1494 15.8918 15.8918 14.1494 15.8918 12C15.8918 9.85069 14.1494 8.10828 12 8.10828C9.85063 8.10828 8.10823 9.85069 8.10823 12C8.10823 14.1494 9.85063 15.8918 12 15.8918Z" fill="#111824"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/providers/aiproxy/ui/svg/icons/admin-sidebar/home.svg b/frontend/providers/aiproxy/ui/svg/icons/admin-sidebar/home.svg
new file mode 100644
index 000000000000..9fe618a35f77
--- /dev/null
+++ b/frontend/providers/aiproxy/ui/svg/icons/admin-sidebar/home.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M6.90625 11.3066C6.90625 10.6874 7.40824 10.1854 8.02747 10.1854C8.6467 10.1854 9.14868 10.6874 9.14868 11.3066V12.2922C9.14868 12.9114 8.6467 13.4134 8.02747 13.4134C7.40824 13.4134 6.90625 12.9114 6.90625 12.2922V11.3066Z" fill="#667085"/>
+  <path d="M15.9759 10.1854C15.3567 10.1854 14.8547 10.6874 14.8547 11.3066V12.2922C14.8547 12.9114 15.3567 13.4134 15.9759 13.4134C16.5951 13.4134 17.0971 12.9114 17.0971 12.2922V11.3066C17.0971 10.6874 16.5951 10.1854 15.9759 10.1854Z" fill="#667085"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.32871 1.98793C6.71863 2.08998 6.30678 2.66727 6.40883 3.27736L6.85881 5.96762H5.7C3.65655 5.96762 2 7.62417 2 9.66762V14.8457C2 16.8892 3.65655 18.5457 5.7 18.5457H18.3C20.3435 18.5457 22 16.8892 22 14.8457V9.66762C22 7.62417 20.3435 5.96762 18.3 5.96762H17.1346L17.5846 3.27736C17.6866 2.66727 17.2748 2.08998 16.6647 1.98793C16.0546 1.88589 15.4773 2.29774 15.3753 2.90782L14.8635 5.96762H9.12993L8.61814 2.90782C8.51609 2.29774 7.9388 1.88589 7.32871 1.98793ZM5.7 7.96762H18.3C19.2389 7.96762 20 8.72874 20 9.66762V14.8457C20 15.7846 19.2389 16.5457 18.3 16.5457H5.7C4.76112 16.5457 4 15.7846 4 14.8457V9.66762C4 8.72874 4.76112 7.96762 5.7 7.96762Z" fill="#667085"/>
+  <path d="M18.1183 21.0001C18.1183 21.5524 17.6706 22.0001 17.1183 22.0001H6.88692C6.33463 22.0001 5.88692 21.5524 5.88692 21.0001C5.88692 20.4478 6.33463 20.0001 6.88692 20.0001H17.1183C17.6706 20.0001 18.1183 20.4478 18.1183 21.0001Z" fill="#667085"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/providers/aiproxy/ui/svg/icons/admin-sidebar/home_a.svg b/frontend/providers/aiproxy/ui/svg/icons/admin-sidebar/home_a.svg
new file mode 100644
index 000000000000..3ba408e77868
--- /dev/null
+++ b/frontend/providers/aiproxy/ui/svg/icons/admin-sidebar/home_a.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M6.90625 11.3066C6.90625 10.6874 7.40824 10.1854 8.02747 10.1854C8.6467 10.1854 9.14868 10.6874 9.14868 11.3066V12.2922C9.14868 12.9114 8.6467 13.4134 8.02747 13.4134C7.40824 13.4134 6.90625 12.9114 6.90625 12.2922V11.3066Z" fill="#111824"/>
+  <path d="M15.9759 10.1854C15.3567 10.1854 14.8547 10.6874 14.8547 11.3066V12.2922C14.8547 12.9114 15.3567 13.4134 15.9759 13.4134C16.5951 13.4134 17.0971 12.9114 17.0971 12.2922V11.3066C17.0971 10.6874 16.5951 10.1854 15.9759 10.1854Z" fill="#111824"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.32871 1.98793C6.71863 2.08998 6.30678 2.66727 6.40883 3.27736L6.85881 5.96762H5.7C3.65655 5.96762 2 7.62417 2 9.66762V14.8457C2 16.8892 3.65655 18.5457 5.7 18.5457H18.3C20.3435 18.5457 22 16.8892 22 14.8457V9.66762C22 7.62417 20.3435 5.96762 18.3 5.96762H17.1346L17.5846 3.27736C17.6866 2.66727 17.2748 2.08998 16.6647 1.98793C16.0546 1.88589 15.4773 2.29774 15.3753 2.90782L14.8635 5.96762H9.12993L8.61814 2.90782C8.51609 2.29774 7.9388 1.88589 7.32871 1.98793ZM5.7 7.96762H18.3C19.2389 7.96762 20 8.72874 20 9.66762V14.8457C20 15.7846 19.2389 16.5457 18.3 16.5457H5.7C4.76112 16.5457 4 15.7846 4 14.8457V9.66762C4 8.72874 4.76112 7.96762 5.7 7.96762Z" fill="#111824"/>
+  <path d="M18.1183 21.0001C18.1183 21.5524 17.6706 22.0001 17.1183 22.0001H6.88692C6.33463 22.0001 5.88692 21.5524 5.88692 21.0001C5.88692 20.4478 6.33463 20.0001 6.88692 20.0001H17.1183C17.6706 20.0001 18.1183 20.4478 18.1183 21.0001Z" fill="#111824"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/providers/aiproxy/ui/svg/icons/admin-sidebar/logs.svg b/frontend/providers/aiproxy/ui/svg/icons/admin-sidebar/logs.svg
new file mode 100644
index 000000000000..d40349cbd0a3
--- /dev/null
+++ b/frontend/providers/aiproxy/ui/svg/icons/admin-sidebar/logs.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.9 2.56986C6.9 2.01757 7.34772 1.56985 7.9 1.56985C8.45229 1.56985 8.9 2.01757 8.9 2.56985V4.09052H14.86V2.56986C14.86 2.01757 15.3077 1.56985 15.86 1.56985C16.4123 1.56985 16.86 2.01757 16.86 2.56985V4.09239C18.3929 4.10195 19.2627 4.16045 19.9517 4.51835C20.6457 4.87888 21.2116 5.44478 21.5722 6.13882C22 6.96243 22 8.04446 22 10.2085V15.8821C22 18.0462 22 19.1282 21.5722 19.9518C21.2116 20.6458 20.6457 21.2117 19.9517 21.5723C19.1281 22.0001 18.0461 22.0001 15.882 22.0001H8.118C5.95394 22.0001 4.8719 22.0001 4.0483 21.5723C3.35425 21.2117 2.78836 20.6458 2.42783 19.9518C2 19.1282 2 18.0462 2 15.8821V10.2085C2 8.04446 2 6.96243 2.42783 6.13882C2.78836 5.44478 3.35425 4.87888 4.0483 4.51835C4.70049 4.17956 5.51474 4.10905 6.9 4.09438V2.56986ZM14.86 6.09052V6.99154C14.86 7.54382 15.3077 7.99154 15.86 7.99154C16.4123 7.99154 16.86 7.54382 16.86 6.99154V6.09253C17.4485 6.09627 17.8901 6.10692 18.254 6.13714C18.7721 6.18016 18.951 6.25227 19.0298 6.29318C19.3585 6.46395 19.6266 6.73201 19.7973 7.06077C19.8382 7.13951 19.9104 7.31847 19.9534 7.83652C19.9984 8.37852 20 9.09292 20 10.2085V15.8821C20 16.9977 19.9984 17.7121 19.9534 18.2541C19.9104 18.7721 19.8382 18.9511 19.7973 19.0298C19.6266 19.3586 19.3585 19.6267 19.0298 19.7974C18.951 19.8383 18.7721 19.9105 18.254 19.9535C17.712 19.9985 16.9976 20.0001 15.882 20.0001H8.118C7.0024 20.0001 6.28799 19.9985 5.746 19.9535C5.22794 19.9105 5.04899 19.8383 4.97025 19.7974C4.64149 19.6267 4.37343 19.3586 4.20266 19.0298C4.16175 18.9511 4.08964 18.7721 4.04662 18.2541C4.00161 17.7121 4 16.9977 4 15.8821V10.2085C4 9.09292 4.00161 8.37852 4.04662 7.83652C4.08964 7.31847 4.16175 7.13951 4.20266 7.06077C4.37343 6.73201 4.64149 6.46395 4.97025 6.29318C5.04899 6.25227 5.22794 6.18016 5.746 6.13714C6.05865 6.11118 6.42868 6.09965 6.9 6.09455V6.99154C6.9 7.54382 7.34772 7.99154 7.9 7.99154C8.45229 7.99154 8.9 7.54382 8.9 6.99154V6.09052H14.86ZM17.5011 11C18.0534 11 18.5011 11.4477 18.5011 12C18.5011 12.5523 18.0534 13 17.5011 13H13.6817C13.1294 13 12.6817 12.5523 12.6817 12C12.6817 11.4477 13.1294 11 13.6817 11H17.5011ZM18.5011 16.1223C18.5011 15.57 18.0534 15.1223 17.5011 15.1223H7.9566C7.40432 15.1223 6.9566 15.57 6.9566 16.1223C6.9566 16.6746 7.40432 17.1223 7.9566 17.1223H17.5011C18.0534 17.1223 18.5011 16.6746 18.5011 16.1223Z" fill="#667085"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/providers/aiproxy/ui/svg/icons/admin-sidebar/logs_a.svg b/frontend/providers/aiproxy/ui/svg/icons/admin-sidebar/logs_a.svg
new file mode 100644
index 000000000000..69879256e108
--- /dev/null
+++ b/frontend/providers/aiproxy/ui/svg/icons/admin-sidebar/logs_a.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.9 2.56986C6.9 2.01757 7.34772 1.56985 7.9 1.56985C8.45229 1.56985 8.9 2.01757 8.9 2.56985V4.09052H14.86V2.56986C14.86 2.01757 15.3077 1.56985 15.86 1.56985C16.4123 1.56985 16.86 2.01757 16.86 2.56985V4.09239C18.3929 4.10195 19.2627 4.16045 19.9517 4.51835C20.6457 4.87888 21.2116 5.44478 21.5722 6.13882C22 6.96243 22 8.04446 22 10.2085V15.8821C22 18.0462 22 19.1282 21.5722 19.9518C21.2116 20.6458 20.6457 21.2117 19.9517 21.5723C19.1281 22.0001 18.0461 22.0001 15.882 22.0001H8.118C5.95394 22.0001 4.8719 22.0001 4.0483 21.5723C3.35425 21.2117 2.78836 20.6458 2.42783 19.9518C2 19.1282 2 18.0462 2 15.8821V10.2085C2 8.04446 2 6.96243 2.42783 6.13882C2.78836 5.44478 3.35425 4.87888 4.0483 4.51835C4.70049 4.17956 5.51474 4.10905 6.9 4.09438V2.56986ZM14.86 6.09052V6.99154C14.86 7.54382 15.3077 7.99154 15.86 7.99154C16.4123 7.99154 16.86 7.54382 16.86 6.99154V6.09253C17.4485 6.09627 17.8901 6.10692 18.254 6.13714C18.7721 6.18016 18.951 6.25227 19.0298 6.29318C19.3585 6.46395 19.6266 6.73201 19.7973 7.06077C19.8382 7.13951 19.9104 7.31847 19.9534 7.83652C19.9984 8.37852 20 9.09292 20 10.2085V15.8821C20 16.9977 19.9984 17.7121 19.9534 18.2541C19.9104 18.7721 19.8382 18.9511 19.7973 19.0298C19.6266 19.3586 19.3585 19.6267 19.0298 19.7974C18.951 19.8383 18.7721 19.9105 18.254 19.9535C17.712 19.9985 16.9976 20.0001 15.882 20.0001H8.118C7.0024 20.0001 6.28799 19.9985 5.746 19.9535C5.22794 19.9105 5.04899 19.8383 4.97025 19.7974C4.64149 19.6267 4.37343 19.3586 4.20266 19.0298C4.16175 18.9511 4.08964 18.7721 4.04662 18.2541C4.00161 17.7121 4 16.9977 4 15.8821V10.2085C4 9.09292 4.00161 8.37852 4.04662 7.83652C4.08964 7.31847 4.16175 7.13951 4.20266 7.06077C4.37343 6.73201 4.64149 6.46395 4.97025 6.29318C5.04899 6.25227 5.22794 6.18016 5.746 6.13714C6.05865 6.11118 6.42868 6.09965 6.9 6.09455V6.99154C6.9 7.54382 7.34772 7.99154 7.9 7.99154C8.45229 7.99154 8.9 7.54382 8.9 6.99154V6.09052H14.86ZM17.5011 11C18.0534 11 18.5011 11.4477 18.5011 12C18.5011 12.5523 18.0534 13 17.5011 13H13.6817C13.1294 13 12.6817 12.5523 12.6817 12C12.6817 11.4477 13.1294 11 13.6817 11H17.5011ZM18.5011 16.1223C18.5011 15.57 18.0534 15.1223 17.5011 15.1223H7.9566C7.40432 15.1223 6.9566 15.57 6.9566 16.1223C6.9566 16.6746 7.40432 17.1223 7.9566 17.1223H17.5011C18.0534 17.1223 18.5011 16.6746 18.5011 16.1223Z" fill="#111824"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/providers/aiproxy/ui/svg/icons/admin-sidebar/nsManager.svg b/frontend/providers/aiproxy/ui/svg/icons/admin-sidebar/nsManager.svg
new file mode 100644
index 000000000000..7eca78e78987
--- /dev/null
+++ b/frontend/providers/aiproxy/ui/svg/icons/admin-sidebar/nsManager.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M11.5971 1.18505C11.8629 1.13038 12.1371 1.13038 12.4029 1.18505C12.7102 1.24824 12.9848 1.40207 13.2032 1.52436C13.2235 1.53575 13.2434 1.54687 13.2627 1.55761L20.6627 5.66872C20.6832 5.68009 20.7042 5.6917 20.7258 5.70359C20.957 5.8309 21.2476 5.99097 21.4708 6.23315C21.6637 6.44253 21.8097 6.6907 21.8991 6.96105C22.0024 7.27375 22.0012 7.60553 22.0002 7.8694C22.0001 7.89406 22 7.91813 22 7.94153V16.0586C22 16.082 22.0001 16.1061 22.0002 16.1308C22.0012 16.3946 22.0024 16.7264 21.8991 17.0391C21.8097 17.3095 21.6637 17.5576 21.4708 17.767C21.2476 18.0092 20.957 18.1693 20.7258 18.2966C20.7042 18.3085 20.6832 18.3201 20.6627 18.3314L13.2627 22.4426C13.2434 22.4533 13.2235 22.4644 13.2032 22.4758C12.9848 22.5981 12.7102 22.7519 12.4029 22.8151C12.1371 22.8698 11.8629 22.8698 11.5971 22.8151C11.2898 22.7519 11.0152 22.5981 10.7969 22.4758C10.7765 22.4644 10.7567 22.4533 10.7374 22.4426L3.33735 18.3314C3.3169 18.3201 3.29582 18.3085 3.27422 18.2966C3.04309 18.1693 2.75247 18.0092 2.52929 17.767C2.33634 17.5576 2.19032 17.3095 2.101 17.0391C1.99768 16.7264 1.99889 16.3946 1.99985 16.1308C1.99994 16.1061 2.00003 16.082 2.00003 16.0586V7.94153C2.00003 7.91813 1.99994 7.89406 1.99985 7.8694C1.99889 7.60553 1.99768 7.27375 2.10099 6.96105C2.19032 6.6907 2.33634 6.44253 2.52929 6.23315C2.75247 5.99097 3.04308 5.8309 3.27421 5.7036C3.29581 5.6917 3.3169 5.68009 3.33735 5.66872L10.7374 1.55761C10.7567 1.54687 10.7765 1.53575 10.7969 1.52436C11.0152 1.40207 11.2899 1.24824 11.5971 1.18505ZM12 3.14907C11.9985 3.1498 11.9969 3.15056 11.9952 3.15136C11.9375 3.1792 11.8602 3.22173 11.7086 3.30592L5.05916 7.00008L12 10.8561L18.9409 7.00006L12.2914 3.30592C12.1399 3.22173 12.0625 3.1792 12.0048 3.15136C12.0031 3.15056 12.0016 3.1498 12 3.14907ZM20 8.69955V16.0586C20 16.2416 19.9996 16.3353 19.9955 16.4031C19.9954 16.4051 19.9953 16.407 19.9952 16.4088C19.9936 16.4098 19.992 16.4108 19.9903 16.4119C19.933 16.4484 19.8514 16.4943 19.6914 16.5831L13 20.3006L13 12.5885L20 8.69955ZM11 12.5885L4.00003 8.69959V16.0586C4.00003 16.2416 4.00044 16.3353 4.00453 16.4031C4.00465 16.4051 4.00477 16.407 4.00489 16.4088C4.00643 16.4098 4.00804 16.4108 4.00973 16.4119C4.06702 16.4484 4.14869 16.4943 4.30864 16.5831L11 20.3006L11 12.5885Z" fill="#667085"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/providers/aiproxy/ui/svg/icons/admin-sidebar/nsManager_a.svg b/frontend/providers/aiproxy/ui/svg/icons/admin-sidebar/nsManager_a.svg
new file mode 100644
index 000000000000..c4a775336218
--- /dev/null
+++ b/frontend/providers/aiproxy/ui/svg/icons/admin-sidebar/nsManager_a.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M11.5971 1.18505C11.8629 1.13038 12.1371 1.13038 12.4029 1.18505C12.7102 1.24824 12.9848 1.40207 13.2032 1.52436C13.2235 1.53575 13.2434 1.54687 13.2627 1.55761L20.6627 5.66872C20.6832 5.68009 20.7042 5.6917 20.7258 5.70359C20.957 5.8309 21.2476 5.99097 21.4708 6.23315C21.6637 6.44253 21.8097 6.6907 21.8991 6.96105C22.0024 7.27375 22.0012 7.60553 22.0002 7.8694C22.0001 7.89406 22 7.91813 22 7.94153V16.0586C22 16.082 22.0001 16.1061 22.0002 16.1308C22.0012 16.3946 22.0024 16.7264 21.8991 17.0391C21.8097 17.3095 21.6637 17.5576 21.4708 17.767C21.2476 18.0092 20.957 18.1693 20.7258 18.2966C20.7042 18.3085 20.6832 18.3201 20.6627 18.3314L13.2627 22.4426C13.2434 22.4533 13.2235 22.4644 13.2032 22.4758C12.9848 22.5981 12.7102 22.7519 12.4029 22.8151C12.1371 22.8698 11.8629 22.8698 11.5971 22.8151C11.2898 22.7519 11.0152 22.5981 10.7969 22.4758C10.7765 22.4644 10.7567 22.4533 10.7374 22.4426L3.33735 18.3314C3.3169 18.3201 3.29582 18.3085 3.27422 18.2966C3.04309 18.1693 2.75247 18.0092 2.52929 17.767C2.33634 17.5576 2.19032 17.3095 2.101 17.0391C1.99768 16.7264 1.99889 16.3946 1.99985 16.1308C1.99994 16.1061 2.00003 16.082 2.00003 16.0586V7.94153C2.00003 7.91813 1.99994 7.89406 1.99985 7.8694C1.99889 7.60553 1.99768 7.27375 2.10099 6.96105C2.19032 6.6907 2.33634 6.44253 2.52929 6.23315C2.75247 5.99097 3.04308 5.8309 3.27421 5.7036C3.29581 5.6917 3.3169 5.68009 3.33735 5.66872L10.7374 1.55761C10.7567 1.54687 10.7765 1.53575 10.7969 1.52436C11.0152 1.40207 11.2899 1.24824 11.5971 1.18505ZM12 3.14907C11.9985 3.1498 11.9969 3.15056 11.9952 3.15136C11.9375 3.1792 11.8602 3.22173 11.7086 3.30592L5.05916 7.00008L12 10.8561L18.9409 7.00006L12.2914 3.30592C12.1399 3.22173 12.0625 3.1792 12.0048 3.15136C12.0031 3.15056 12.0016 3.1498 12 3.14907ZM20 8.69955V16.0586C20 16.2416 19.9996 16.3353 19.9955 16.4031C19.9954 16.4051 19.9953 16.407 19.9952 16.4088C19.9936 16.4098 19.992 16.4108 19.9903 16.4119C19.933 16.4484 19.8514 16.4943 19.6914 16.5831L13 20.3006L13 12.5885L20 8.69955ZM11 12.5885L4.00003 8.69959V16.0586C4.00003 16.2416 4.00044 16.3353 4.00453 16.4031C4.00465 16.4051 4.00477 16.407 4.00489 16.4088C4.00643 16.4098 4.00804 16.4108 4.00973 16.4119C4.06702 16.4484 4.14869 16.4943 4.30864 16.5831L11 20.3006L11 12.5885Z" fill="#111824"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/providers/aiproxy/ui/svg/icons/modelist/ai360.svg b/frontend/providers/aiproxy/ui/svg/icons/modelist/ai360.svg
new file mode 100644
index 000000000000..c0bde5157c06
--- /dev/null
+++ b/frontend/providers/aiproxy/ui/svg/icons/modelist/ai360.svg
@@ -0,0 +1,9 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="20" height="20" fill="url(#pattern0_19_401)"/>
+<defs>
+<pattern id="pattern0_19_401" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_19_401" transform="scale(0.0138889)"/>
+</pattern>
+<image id="image0_19_401" width="72" height="72" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAASKADAAQAAAABAAAASAAAAACQMUbvAAAcrElEQVR4Ab1cCbydRXWf+ZZ771uzsy+CYBAFRCqIgJYSCAYpYCGgElDRUiUkoIIU7I8XwVagiAGDFqVUkUaiGAERpCCCRsVCyyJLKHsCYcv2lvvevd8y/f/PzNz7vZe3JtHJ737ffLOcOfOfc86cWV60+nMEY7T6sQrUXJ0VyXfc0z0t6gt2DILK2/PIzNTG7GYys6OK9M5ameksa5Su4dWjleo1Sq3WRq8yyjxnatlTYWvw2trZ5aeLNNUIbQ0qswUf0RbUHb7qMhMqLcAIONNv7NveTCkflXYnR2fr85kqjnbL02yySgFGABIBoGA8dOTwiU4DKBt8TFdCZXLz6tQ76y8qpR9CgTtae6PfrNa6HyXtQLDtIYPiyGz2i+xseeAoLlJademcxKbfajoG+nqPClV0YqD1HHS2U4euKQKRm0yVhjQd6FCFKKktDceUxcmoHNQDAEfwXZa8XoCE/TSvpT/fcELLrxsZWxGoQa01GphI5CQw/WOrSgQm31j7TJqaM4OSfkeDDLsVuVFmIsGQtzzxLWnKAYQPESFtwQL4FhUBH5KTNcBidQtYjkL36TRYsvbYaDmTRfX41toLI78mHDYfoKLUdJlo0k61M0yUXxRkemfYFJGSLDIQHOgQACJnDSnih1cpAYcJCFQ3Bq/4wMkBwFQAVARL4tRAqJeJWYBlQeF3KLZo3Zz4bknbQmlyHAmp8T+6YD2cOlWuTj5Uak0uCXJ9qAAROEnxUgLTIYQnAhJVjYHSMRgkm26fgwErSpaVqmUmj8/fcIx+aUukaeIAeZWC1JRn1L9W0fn50peoAIQHiRmxpow0w1B1Yw7B9JLkpagBEumOihRVj7U9YDkAYSsqMOpNlQfnrf1I9H02owoDK9/jeEwMINdA5Vqzu06TG0tR9gHbhsl0VADCSYuommdiLEkqGm4vfVQ1kSAPkic24pvgBAAHb7FVonqwQtet643PxgxXnyhI4wfISU7blckRppx9P87zHes6rJbCrIwRFosCQ2zQnxoswkuYqd7QrfqVPFc9mNZ7TYtZV6nFfQPlpK1iytOyPNsu6Ag6koF0hxhTP7ozWeSAfbcyl4lkFWc22/kR0UGGkyIWET2z0z8cClin3wdvJSe+Na9tjZqAXRofQE5yOi/rn6dL5gaMTliPAY7JWslKEobrA23uD0vqrqQePNTakbwqjDBzjMCZL1N9u4nzWMsOVC36BJWamVKN6haqBJYX8uclg+8xJcqrG/vXlKZcrQwic7w4m+MEaWyAnOR0fLN+RlBPvldUm4EwegSjfFPH5PpNwwICOyUd3ZsdKoQn7aymmD7UsVtmSp1h9ci4Ep+SJ+YjKtSTpeZQoCy5wfat0ISLNoEyAnQMbF+FMThivCCNDpADRyRH5z/w7cPevJgF0aWtSfyj18/TfT5dsfxJ+DoJozZe/8O7C3sDtCH1pv2ythes27kmMWeomHOk+FvkGcDQODGIKtno8E9vl1DFgoRiL2CGO1xmuDEM98gAFWxOlNbvRJfJIvhRd8bvaD35reN0j/BDKenSWCxsxUCmCZiTrim39u6rSqWLgMlcwcN2tKl23mqNzMImkoT+rEzLA4f0zOpcO5rhHh4gh2rHNbW9gg3Jg3DJ7FJBmwcqYdsckRoCczFnii3zVEfuE3LIB4Pzuab9PD1dBfkVcJtnIJUGGBrjbBPLjQ7UppKUmjvWH1v+iK06/HNTgCjy7DQA6Ex7f6Mq+v2sCof4UdXdevjGr+v1okpueTE82a2cWgBq8h1mV53Xl8AWHuN8AEgHZVv8AardaHZpU5C0/tr6o+OvjCRFmxJbhFFBaKskl4GJ93OlDbi6g3p+qoBDyflLgkNmKEH8Yeah3bCjrv8RnIFXSBBVjnFKk0z1rDRscD4SfU+ZGYnrRZ239B3j6Q+tNViCCnYn3FC7R2wOa7SEp3V/ueVGShUIbb69oXTOxQgvgwXgQDyB30TBdupPtqbdnp6QR/kPEW1tGGARJNkR2HTwWckGSh3zMwAEW6ZXhmn8voZddYX4agLkVYvT7GO996MLB2GK5bBct/GSjjNHEsECrdGjDvxhC/m2h80cJpHl3Ybc9F/WD8hyfCnzNnQ0RY9iq21jgWSR9MBi2+RKLHC/NLSfTYDcyHQu6F2o2s1VZAvG6NW0Tx3Qt7j9dTRqbdMw/I6Z5Gi3X2G2SXT+0SjN9qy16J4w1H+snRXe6WxeYwE8Jj1fwDl73JTLpsd3IXlf12HOt17dRpIkSpENopoa/q46+K3ZpYeLIDUBQtFJF5gpKuh7HNugO4h6TYpOF9UabfR9IyO9HTjhVenxAOKaLNc7FYtCRH/ZlurTes/TbwwaBA4Iw1izpFN7bufGSeU27H8c7CTJgTSa8R4sRUGufrj2mNK8Ih8WXQLAYKqfMyn2iLExDPwf7D6/Qv1WYjMkMsGHA4dbIpkJlhMc9Dot/sDi7L7I/KDIVCM+FjhkhzYR7dCfCerx0RDzX2FWkWUucuEKiCFHkwSjESA9DhwadbtbiYW/+hhVVgbFDRC3McVQUnpMmn+6QaJbLZaCBG88jDYqFiKceVAfduyfmUpghHl0ANxGjDONIJWvzM+UmgQV7bUsNrtw16BAbeSom+FoZNf1xHOwN3UTCnPQuYfAGY7TFgGiWhEcNCvfNNIQEmmT6YFJ1Tkoo8TG4YWTB9FVCE/vbHy/XdyvkvpD9+L2m1luwrOMVMKDHUVoPTx5D1ab7xuKsf/W2LRhvB7q46UqOlu+JvlSzeTP1Wr5c9HipEvSvcrJxzAPet1sE1saoiaKboCqotPc8qAgkB+CRLCsP+T2jbQJvoFBfE00R6vZnbcO7CFePOgFHgCcGMyD7UF9VO8x/96QHknZjAencIRaLdg5ywLMLJxhRPQbxAiMgVvMdylIt0UHI0pOnqkL0I9IQNTqwtK1tX2lkAO9QWBohJLkgFz/4fjrql4/GPWWiRRR07xUyVsnmKPvxew1W2YvFfyEBXJtpodxcCTjDLLannTuwO55mswiuBjQNSYo3Su570ICJtDNCq4uJOQ9aBWeOMCw+As5AYcTI9IZUhNOb29TU90GjqTxkeeBbk1Npd5IGSMiqKIMwFx/nH4MsZMpEXEYHYKzuD2ldm5eUUl9xbrj2plvkwbS5ThaOgtMwrlRpyLx23QeBVZO7SbPv0llw2De2H1N52lbazmhr8rvwgYf1FfT1lipcEw1X3Q+IT2ZmdX3xfheqlVu9MXMrwTpkuqCyvxm2QnEKHGUqtGC3xeC5E29K/ktdvw+AKmrBoE5gFsiYicAzlENGlr/ohHf3IgTc6pLGGZ/Y8k4lQFQBKv4C4JcxCipmE+ybLow7opK2X7tQX5Q9ezy2aI2fqa1xMb39OCQH4JFMPzP8ehsDSYM6rv+Pd6k3Zpn+nBGoraFvdvqLN9TJr3cVKNStIIZ3jZJfCIPNrxIZpBU69r5eR7BSBIQHwbbIabmEGSMWIK9n1NhoB+tnR3/a/3z5cdErRb4epg+2MmLaUrRmYkEW360Ol7KeFR0Ln5gR3G//du6c2H1IJNnD2APuaR18GD3t9pl9T7u9sm0M8jiLznmS0vSj6WJ/gFVhwCFAVZNnF2NXl0KspdTFaxmG6HOpyRZ+E5I0U6+zUiZ3+VaL8dO8itZXfFoWYXl7HmCJmU4CCOB5PmhDZwgmHLwWao/DWHZAfQfw77yofBD0n2RULLMZf89JgO2IDoqktI4bpZk9J/+VN/26cI8MxciLQoxFFAggsQl6tK4HDzW/0bworcNcFIUlwo93dE5eRacj2GGK6I/AJ4OVphVA3hhTAsz1V9eki7t2Ck89y2NzbqhIPGbwR9dc3Lp4g8D6FUNn6MF+lE4+38Kze0AtrfH1LBjBNfNWnbUxMmnHSHrGw2dUJq02ahlxIgzl6Y7x7nZIzPmg1WdHgM1nsbCBAegrI0idVptfiS2rUEUU7oQfEKZt+bpNYh/GQBMyzLzadQibhIQl5CYoAWAfbpvVX0bdJrLFjulU5Ka/Chu8qHsttic761Ojx+nXzQukBqA6ycA0BHQ+hmmmm8XQYx35RDTa4EvtcrxM/KLxrJLZ2QEa4bL6/V8f3hTO2Vy4GcH0XWQXrIuZerkvnOie4VJr4oUf0LnR5Y0se2hdQiPOz0NeQIeTkqEIFQTHpuhpwvB1MeWZmQnwz4tha2j8RUp5kBlafYvWZAdmedmis5MtbwmecYsSS+vn6WXjtwhl0NahMCYp33ZMI53hYcJgBDgSVah2G9Kpu2AL9d8c6TQkZbr+w8dyILfpnlwLG0Heksbn7gfXjYEob6e07a4DLQHpMv9HwLjwSFNKh/CwOfUC6ExTxAYC4ijQ6Bw1GS/+MznNOKgI1vDee2BIMhOglZOhlDR/2zBZYj9tMluKl87cLaUZ1sjBe6BIwRZ8BqkU3qUh2Z7jFQ+1dbRPbnOekeq73Q+3/YK07ahN7kGTU0FOAkcOVbhiFuVsQQkHg2YpbwNBWC8UTW0UemM9L1pWZc7JtX+V9SrC2WciOdXp89olb+H1dhRvgshYjcA77aeH0zbpeT15GoU3AE/LoQtHxprAwNHT5sYaF0Jb/z++udhQhqqVKBaiJrQNE5poLzT0TtTtvmmFgSlhu4X6tioW7Otb83+FrqwHxJTgBNhtDGNDwoypcP+PKPz6HHJ6bLTPNdYyc7155KSuQdjfEffhujZ8pLaZewk0WBZiPhTFhiq1OBAAIgO9O1lX77yWnowNHAWTDm9XgAIabOqyRtJBAvsmhjUPyHUrAsymHDhC3eNoL2yIsXLdAAgPcnm61qaY3uMgeowNDg10CqT0WU2VUHsA96iFnwHYB9vMPSy7PE4Y0wgjDJXpLmeQgD4EzUw6rzSm8n1vrlSbG4XSeDIExAX4PxQGniEDL7VTxvpUYZ1GiACKw4Yn4WuWRvGBMwX75QMTArNAoXYkzY9ag15nCWCjz60jqyThbpDowIGgGA643zbTjNm47Cpz8gHpKfz6vqBaP48D4yku4eAYcwn6Dcxqfr50sPA4UICgfIxzAH+AU+dQyJ0GGRmicyIVBWEMFUz+SZ4fDPIDgEQodj4b0h0YwKVxHE+QNRstGVNOQqiNokv4jANCX5bRIWP2BwIgJMEvl1aY3TS0HnkyKiF5u+YTzBsOff0I4x3SadzJRUSR086V+HHoUsrIXXsWIY7DK8YXGVprMvQKO1JUFGHEBCAgbtakDP8JIS5SiNoKX+I59OShyX9JJu9ydMZ6bSadSBPzA7kdR0AklulSNPlPK8PtSdNOk7FWlaFWHyqlUCQm14pRZ+F+OY3phvcDtKP1meEt8jUbvPgmTpx59v/mtRVlgb0bxqnJvWzoqW1beJ9S7l+N+TnvVO3Ke9J4KSKm406vlWfmZh8HwIgYOBtSvDG+MN0aGKc7pfTsFTSq8Jp5ttSd+hdgAIPjAbliE6zzJjgtAcOn3rdloFBMmG7jQ/z5IiBMZ6NwRqciYHqJ0gU/YYKQCWgBxtgPU4XB21vO6MAtFdJESQaauBb8Gk6yHdtmQIXn4EA8Acnr+fs8tNcYqyei9usTLOqJXTyjuTvISEBgcjhcPENY4OdE+zq8BflkQ7Nm0mmP944YvYNj/CGN2a1iPlG9dLKv4DfoZAAXGUxM5jeWFvJR+HRBWkBkwML9P2YNg8uKbMI93/eh57jXMpUUx3cZ9L4ovpC/bLriMyK2GBZhjE9H5Q4MhnVgfOxCyE2OjMsWHfEnad3I+1lnMtHuMiQqIsxhl7dnQrgGwDqlL5YatL5kBQcAYpXDj2XN1rJemAuXo/z0kOmTf9T93GVZ4Uf6/37dge/nZHm/W2U5Whil7P6EqZF/bxYB6Qh0ODdZR06+d704UCiT4H58ARuaWRxfXKYljcIMKzBkfbMYMSrWj+MPZ5FUSm9GLlhSlUw9masNFDKcli0oGzMBbUuc7dIHzMoLRdTe521lcK4U4yT0Fq1fgOkxJsEHQXhs3oguB33l1bUjHkxnK5e3DirZa1UKfLjaGzyYr8QYE53s1CoDBe/XqYEPS0mmal5tgcLCVNdEhv+QWJkHqPbT2nhqDOQEdshaUzSXOe4xxNeO7C2XDFn1XS+O3YZI6qBlKFkwQoPqPyw0jvW/9zctOGibeNJT7pL4nLvmpes6lm2TzKQzRuo1WdTFk2MuxNZkEQ6/upU3X7l6k/KpXIhKaI7HD+uwRFfGvvy1t18uWymrNaTFvQdgBXOvZCqSbLdcU0b93EdiCOSaWaQCR/cKPjP4d48v0pfit8ZbIjK8e5plvan0+BQzq5F/Z8EaFYisDdUCst/qie1N0ijFJe3QXwP2BjOMBJgX2B0dFhWpVP7PjrpJkkkL1RFqsswkueqjviSP5XoLT/LS1s6Ur/DCcnhWg4L+3vvz1OzD3Cp6ri8z8arKs+LhEwEqBGbLWS4RWkhpRGdvLz/r6v9/bcVQWhkIgJbQ/lv+jIAx7TU/yP78I6fKkju+Ae2SJzAYnDlrD/Nfipbz7G+bt2c0pkRZ6XOs3uwB6L2oaHG1ZIjEH/eHQdZhqyUNCWF3iin/YkCKAtVJ3FgqOUX6w6J+8uTO7PWX60+Qf+69eaey+vhwCWDgCh2JMKM6UOIHT7T8j3ZTaPUeJvn8yf2Zt9y05d/0HpAGIss4FE2ZgsGrZbjJ44ajOUspHxXFpjvssgSXaQ17Yqtw6e1Ozbffo/1dKIPML5SHxi4JNFVVS333opqx7fWg+vrLfmFAKhlEBmA4b7ljVkPNkA/Oq17yv+sZgav7m1uoC3VOt1pmWnZoKsfinNAAlel3lJ9gCQFIKzm7sMR5EbaIQjzhzoWds/s6dIrWYCr9/5Vvcdi4/gQEJJ1G/y8lSYM7+le3PqggOdElOXHDJA66np/tUogfPHjKE1vzWlbEdz16kqckXMxrAiEK4CpvAGSZOHvMh5xvhFn4sEeuqs0rhdvicD1qLanh8W90f5SJ1QrxG/Ch6iN3N7Q6jZmguVt4c8dzfik+T0X9b/U/SQ2DpZixOYDwHn8YR/hUpOlf+icv/G/uKftJMxKEyuOESat66jCw+1npzkT8VdJSlwkYqmQr/JpAgrLlHFihCXDoF973W5s7U2WtyA46UvWpSd6KvVkYKnEcQISyGYWv3TwnxAtw+YwyGew82DpUkjgLjDY6EXhZ9dH8OX1LAC1onNBT5cQpKpZeyWfwz5QiSNf0e108tYLSG31C9a7Qzwd5f83CAiupRCGpmFkH5QM5+BJfKIPq16G1/qiUJ/M6rWk9mzQqcX+UHUbu3ndU9vuweHLH1kI+5o02LMEFOxvADE6foN/LEigsNMHCbsYhv5m2dchSKOdYTnD3nfUpKVTBnZ4W6ueNCM/bLfLGsDG2e2DwChnGjf76S1rrLESeVeSF7Zb8zYL0ETsn/BceFj1UkFPcg7kopNH7+Wo/BO3LKHqwgiTYbvPnOowvx5ShH47aSEoza1O5vifawV/gkAAUR4gze18oPsO2iy7repmqwI/g6IYPZ4iCDMcSSd96WG7/VqX0ssJhIAR5nU4lPLDuqsEdeMy+YuNtdkgohP4oKRj4brNjwbebmr56ewFOtcdp+Z7QoU3eBHEBkmH8LFxSscN2EfGLiA7juIQI/yjjhOYYrDfViVZFnQAElSu/6W+e8W3sh2WSaBYsRF3kiTfPu6kIb9zjwt1mF1GYAhK45fD/QjMCWr/mT+TelsiPY6R/tR8GUcGk+Uz0kveOKXynEiz48kCxFwnRTDCOFlwwYLjv4a+CVITQA+Syg9ScDynfqG6M6QiHVXdhlLkt5Om/KA9L5i2Yef9VJyfGlTjC/ju2LjdgQLOWHZuOLrFNB4/A1w6p2GmP0sjkqf5qnAgvaZYjPGhkiH5HfO774DczEGu2Bi8h5OiIi3mM6Ak1JMnbNq8rMJ4rrgCBH+ijiVBGE5C2Lkx9nQsKyM8OQCUjl+Ycvvq2h+iELdPIlhfrb6w7rTKVXJ2X6DflCDS8yMTqi+ARhWwOBsjQHoQhmvZAw2ltHYJfOyisuRXmOFOERUmU57+cBSGphEclpfRdm92rsD80Crj+l4kfVGtz9auFHBQyST5A+ueLy+W+kPo+441aXO0sSRoXImhRIj6NIpsWqeRJZLmbZeVPuRBnhZ1X93RJcUc/WaVv2DM7Vh2XFX/TNiWXceWdVmtT7uDQ7gxJwMyRGpH66zi1M3ZiQZYJINdt2HUeihCf4r2iTMBpRQmH0c9oZ7fs7hTPPThmLGk/0xPB07lhv7DynV1Nxjy+86f2/iZyr8NVS3PxfAddXraWOnDLxLbQvWxIA1fz1P1QPpZECc81i6pjaBw3sbFnd+VomyHIj9k1JpktkKMasojb2hF63fqf4Xz/btj3Cgh5bQl+0bfp9q/KBMDTcAwYeSOOlXg9TyT1O4TmyIetNgYT2zk+rYxL0ksD8dctlwhTuaesKwXrb+y87dSrNCJYXjcvKQiTTDfuTg5EBv7t/BPSWmUcca/vPesykeFuBOI4RoavYMepMKmGoRj4upmW2ZbdvvEGn8ApZfBvF2+8eo2eyTjOWS7DOOd+bwkUlKKdZDefm19L6wMzoqz/B+4b0mycK5WTNsuPrLhbI4iwaMDRGoOJBjto7EGuQVtcnN/S0Cy0kTbRBUMcD3FmHtwD+hnqqXjJ/IXRWy3GCwAzb2gZh5mOsx2xcCyh6uwclx6aKDyTyU6OKY1T6ahJZk0anF4d/supRPlD1coZUPrF2khPjZArOAIyco9S29FD3l5wM9upDF+lSO9ZmDnfMfRM/UGOLobfvlvgkg9hXObl9Z1tqxBJ0bezgAgbYvVNvUg2a5tTbJbMik+LErTOVim7NWkjBOSWMdZOVjeO6N8ihwKjAMcsjk+gFjSSRL3irCA+zHE9t0AibuKzGUnPUj8HouuLetnOrjvjk4AuYJUkQSSQv2cqps1qj2o4lgS28G6F0vWKvajWnGjsR0nn1jrqorioaPJdwDCnbam1KWM8i+muc9tkkq4BBdCF9AA+r74sqO9x+rI4LreJvHPFvp6FnNvyMLipMnPWmMD5OkSKPJQBJegZ5AAnnASJL6ackav3sucpGOE/Hcw+GgbgEYAqT4QVhbWvhR+R+iMU3KkLB4TA4i1HEiMTlrY/VlAcwV6x51GdpIq471z3/HR2/DQ2FL+i1Q0OmiNOogOCuw2gweGcVxB5Qs5uB9qd0px5eQR0x6f2b2g9EeZypk/wnTOrOHC6MwPV4NpNIQMaIwqh6Por2L3bK5AZJ1DycajqHoTb4swNNWNNCFZ+GfXhoMBqgDM3AETwt9S+uoNM1svFXtTGFQSmUiYONNF6oWGZZYz+UVQu0ObCiOqxxpeqoq1B7dN2fEpPu5rDQbJAjMUJP4BAYYOdwZ+iCPJy9d3dfxJGivwWGx8vHHP0njLb1quIE3M5OIUy5N5kK5ZkDQc3/sqDbB8gp3mbUctHx4YlrBx+3S7SrBHTZVzPg1AzeG69kGdfqb78+sazucWAuOZ3HKAPKUhxo8ntirLToYyHo9e7iHFaMQbYRPAGjmDIpzhcDsTJyAlymHBaBs9oB5XLcHNQUt+W0NiOGBbcflSYHgQW5v/QaDc2ZcQ4R8Jr+jfH77lh+XoSPFWrcFNDt4IGVczHlZsTJtX8PEnSMtDQOrO7ikt+PtS5yNRYniLdgzHb1wtFgptfYA8cTJcdPtdOv82BP9z1066BXer+7KZsBnTAel2kI0yfBl34xaFdbAO36/DKXod+c8BkBeiUL267hutq3wT8uaAMGxlYIQmHv8PDclGXP+2PXUAAAAASUVORK5CYII="/>
+</defs>
+</svg>
diff --git a/frontend/providers/aiproxy/ui/svg/icons/modelist/alibaba.svg b/frontend/providers/aiproxy/ui/svg/icons/modelist/alibaba.svg
new file mode 100644
index 000000000000..67e870a156a2
--- /dev/null
+++ b/frontend/providers/aiproxy/ui/svg/icons/modelist/alibaba.svg
@@ -0,0 +1 @@
+<svg t="1733463650934" class="icon" viewBox="0 0 2048 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13352" width="200" height="200"><path d="M1183.28915187 848.05331375c277.37282531-17.84228063 532.63828219-114.69529781 768-215.99111437-161.36245875 107.97778594-980.15253656 518.77674938-985.66160625 239.34246562 1.06627219-34.47612 15.46094062-72.36430969 44.1791925-113.55794156 25.41280969-40.05627563 61.87930406-80.14809375 98.34579844-123.58089563 56.37023344-65.68234031 195.58978125-218.19474281 243.10995844-312.80859 8.85005531-17.80673812 14.35912594-34.5116625 16.56275531-48.97741594 5.54461312-84.59089219-101.65124062-118.00074-260.77452844-162.53535656l-30.92188031 18.90855188 59.67567563 48.97741593C867.24620469 225.70603438 705.95483187 275.8208075 510.36504969 344.84413156l27.61643906 70.12513875-98.34579844 96.85301813c16.56275437 3.34098469 187.84154062 61.23954094 364.66493906-63.44316938l1.06627219-1.13735718 2.23917-2.2036275c-5.54461312-8.88559781-16.59829687-18.94409437-32.0592375-31.17067782 53.06479125 3.34098469 85.08848531 50.11477219 79.57941563 97.95483188h-23.20918219c1.06627219-16.70492438-3.30544219-32.27249156-7.74824156-44.5346175-137.01592031 102.43317281-297.24102188 115.7971125-433.1551275 67.88596875v120.27545344c-67.42391719 23.35135125-182.33246906 96.85301719-182.33246907 166.97815593 4.40725687 34.5116625 20.97001125 46.7737875 37.56830813 55.65938531 150.2732325 85.72824844 556.94927813-31.17067781 555.81192094-31.17067687C656.23102531 922.62125094 511.46686437 982.75897812 297.07515781 991.64457594c-283.98370969-5.58015562-324.85746-195.94520531-193.35061125-394.09403907 127.06405031-200.38800469 327.06108844-378.52647188 646.40947781-492.08441343C842.97075125 72.05627563 978.88485781 35.34098469 1110.39170656 32c188.94335438 0 372.37763812 56.7612 360.22214063 240.47982188-8.85005531 141.38763375-205.54165125 335.09366906-311.63569125 477.5831175-46.38282094 61.23954094-54.1310625 103.5349875 24.31099593 97.95483187zM1362.35172125 205.62458375c43.46834531 16.70492438 55.87263937 35.64901875 43.46834531 55.65938531 12.4398375-22.2495375 0-41.15808937-43.46834531-55.65938531z" fill="#ff6600" p-id="13353"></path></svg>
\ No newline at end of file
diff --git a/frontend/providers/aiproxy/ui/svg/icons/modelist/anthropic.svg b/frontend/providers/aiproxy/ui/svg/icons/modelist/anthropic.svg
new file mode 100644
index 000000000000..626429dbcb7d
--- /dev/null
+++ b/frontend/providers/aiproxy/ui/svg/icons/modelist/anthropic.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <g clip-path="url(#clip0_19_326)">
+    <path d="M0 10C0 12.6522 1.05357 15.1957 2.92893 17.0711C4.8043 18.9464 7.34784 20 10 20C12.6522 20 15.1957 18.9464 17.0711 17.0711C18.9464 15.1957 20 12.6522 20 10C20 7.34784 18.9464 4.8043 17.0711 2.92893C15.1957 1.05357 12.6522 0 10 0C7.34784 0 4.8043 1.05357 2.92893 2.92893C1.05357 4.8043 0 7.34784 0 10Z" fill="#EADBBE"/>
+    <path d="M12.7626 5.59422H10.8502L14.3376 14.4058H16.25L12.7626 5.59422ZM7.23744 5.59422L3.75 14.4058H5.7001L6.41328 12.5554H10.0618L10.775 14.4058H12.7251L9.23766 5.59422H7.23744ZM7.04414 10.9189L8.23756 7.82218L9.43098 10.9189H7.04414Z" fill="#191919"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_19_326">
+      <rect width="20" height="20" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/frontend/providers/aiproxy/ui/svg/icons/modelist/baai.svg b/frontend/providers/aiproxy/ui/svg/icons/modelist/baai.svg
new file mode 100644
index 000000000000..ec85f45d1509
--- /dev/null
+++ b/frontend/providers/aiproxy/ui/svg/icons/modelist/baai.svg
@@ -0,0 +1 @@
+<svg t="1733132797968" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4274" width="256" height="256"><path d="M380.629333 385.429333L284.650667 626.773333h80.576l57.450666-160.853333 57.344 160.853333h82.56l-95.893333-241.344h-86.058667z m557.866667 240.810667h78.997333V384.896h-78.997333v241.344zM222.72 518.4c-8.682667-10.176-18.624-18.538667-36.970667-22.741333 12.074667-3.946667 17.706667-8.085333 23.936-14.869334 9.386667-10.197333 14.165333-22.464 14.165334-36.736 0-16.96-6.656-31.232-19.818667-42.752C190.933333 389.802667 171.989333 384 147.413333 384H0v52.885333h128.213333s19.925333 0.96 19.626667 19.797334c-0.256 20.416-20.181333 20.202667-20.181333 20.202666H0v53.077334h119.338667c8.597333 0 22.293333-1.792 29.376 3.562666 5.589333 4.245333 7.850667 7.616 7.850666 14.72 0 7.722667-2.773333 13.866667-8.298666 18.432-5.589333 4.544-10.773333 5.653333-28.757334 5.888H0v52.778667h135.893333c5.781333 0 17.578667-1.173333 35.349334-3.349333 13.354667-1.621333 23.317333-4.224 29.930666-7.893334a65.493333 65.493333 0 0 0 25.258667-23.68 63.146667 63.146667 0 0 0 9.216-33.749333c0-15.36-4.330667-28.117333-12.906667-38.272z m526.848-53.866667l57.322667 160.810667h82.56L793.6 384h-86.058667l-95.957333 241.344h80.554667l57.472-160.810667z" fill="#231F20" p-id="4275"></path></svg>
\ No newline at end of file
diff --git a/frontend/providers/aiproxy/ui/svg/icons/modelist/baichuan.svg b/frontend/providers/aiproxy/ui/svg/icons/modelist/baichuan.svg
new file mode 100644
index 000000000000..9c1ef6a9d607
--- /dev/null
+++ b/frontend/providers/aiproxy/ui/svg/icons/modelist/baichuan.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <g clip-path="url(#clip0_19_425)">
+    <path d="M8.51389 9.86351V1.43296C8.51389 1.00851 8.51389 1.0074 8.945 1.00684H12.8889C13.2433 1.00684 13.2567 1.01573 13.2567 1.36462C13.2567 5.10518 13.2556 8.84629 13.2539 12.5891C13.2539 14.4763 13.2639 16.3635 13.2678 18.2502C13.2678 18.6802 13.2678 18.6824 12.815 18.683H8.87111C8.52389 18.683 8.51722 18.6768 8.51722 18.3441V9.8624L8.51389 9.86351ZM0 18.7763C0.179444 18.4207 0.315555 18.1396 0.461111 17.8618C0.921111 16.9685 1.39111 16.0785 1.83944 15.1796C1.915 15.0274 1.92944 14.8374 1.93 14.6646C1.93556 11.5835 1.93556 8.50351 1.93 5.42462C1.92667 5.08684 2.00222 4.7524 2.15 4.44629C2.656 3.38617 3.15361 2.32206 3.64278 1.25407C3.725 1.07462 3.835 0.995733 4.04056 1.00018C4.74167 1.00851 5.44278 1.00296 6.14389 1.00462C6.50444 1.00462 6.51222 1.01184 6.51222 1.36018V11.1841C6.51222 12.3602 6.52167 13.5363 6.50722 14.7124C6.50278 14.9385 6.45167 15.1618 6.35611 15.368C5.88278 16.3957 5.38389 17.413 4.90278 18.438C4.79167 18.6741 4.645 18.7702 4.36056 18.7668C3.07278 18.7557 1.78389 18.7713 0.496666 18.7768L0 18.7763ZM15.2417 12.4257V6.51351C15.2417 6.1224 15.2417 6.11684 15.6517 6.11629C16.9661 6.11407 18.2806 6.11407 19.5961 6.11629C19.98 6.11629 19.9917 6.13296 19.9917 6.50518L20 18.3057C20 18.3902 19.9944 18.4746 19.9911 18.5596C19.9856 18.703 19.9156 18.7696 19.76 18.7696C18.3322 18.7696 16.9044 18.7718 15.4778 18.7763C15.3239 18.7763 15.2489 18.718 15.2528 18.5674V12.4257H15.2417ZM17.6 4.62407C16.9089 4.62407 16.2167 4.61573 15.5256 4.62851C15.3028 4.6324 15.2394 4.55629 15.2406 4.35073C15.2472 3.35351 15.2406 2.35573 15.2406 1.35796C15.2406 1.02573 15.2594 1.00907 15.5933 1.00796C16.9678 1.00518 18.3422 1.00796 19.7172 1.00073C19.9228 1.00073 19.9917 1.06684 19.9906 1.26518C19.9867 2.26351 19.9961 3.26129 19.9978 4.25851C19.9978 4.59573 19.9789 4.61018 19.6211 4.61073H17.5989L17.6006 4.62407H17.6Z" fill="#E06639"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_19_425">
+      <rect width="20" height="20" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/frontend/providers/aiproxy/ui/svg/icons/modelist/baidu.svg b/frontend/providers/aiproxy/ui/svg/icons/modelist/baidu.svg
new file mode 100644
index 000000000000..c64f120991ab
--- /dev/null
+++ b/frontend/providers/aiproxy/ui/svg/icons/modelist/baidu.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <path d="M1.87904 12.428C1.87617 10.2129 1.87329 7.99778 1.87329 5.78268C1.87329 5.49212 2.02288 5.26486 2.27316 5.11815C3.16208 4.59746 4.05099 4.07676 4.94566 3.5647C6.33513 2.76496 7.72748 1.97098 9.11983 1.17412C9.26367 1.09357 9.40463 1.01015 9.53983 0.915213C9.91957 0.653428 10.3022 0.601647 10.7135 0.846171C11.2486 1.16549 11.7866 1.47618 12.3245 1.78687C14.0448 2.78222 15.768 3.7747 17.4883 4.76718C17.681 4.87938 17.8767 4.98582 18.0665 5.10089C18.3427 5.26774 18.4865 5.51226 18.4865 5.83733C18.4865 8.72272 18.4923 11.6081 18.4837 14.4935C18.4837 14.7955 18.3427 15.0516 18.0579 15.2155C17.379 15.6097 16.6799 15.975 16.0154 16.3864C15.0603 16.9761 14.0621 17.4824 13.1099 18.0779C12.5432 18.4318 11.9477 18.7424 11.3694 19.0733C11.1134 19.22 10.8603 19.3696 10.6071 19.522C10.3367 19.686 10.0634 19.6946 9.78723 19.5364C8.68544 18.9007 7.58364 18.2649 6.47897 17.6291C5.27073 16.933 4.0625 16.2397 2.85714 15.5435C2.63851 15.4169 2.42275 15.2932 2.21275 15.1551C1.98836 15.0055 1.87904 14.7812 1.87904 14.5165C1.87617 13.8376 1.88192 13.1587 1.8848 12.4798C1.91644 12.4682 1.91644 12.4481 1.87904 12.428ZM8.84366 8.02367C8.88681 7.98914 8.92996 7.95175 8.97599 7.92298C10.3223 7.14913 11.6686 6.37529 13.0178 5.60144C13.0725 5.5698 13.1444 5.5698 13.1473 5.48062C13.1502 5.38568 13.0667 5.38856 13.015 5.35979C12.221 4.89951 11.4212 4.44499 10.6301 3.97608C10.3022 3.78046 9.98861 3.80922 9.68367 3.98758C8.78612 4.5054 7.89721 5.03472 7.00254 5.55829C6.37828 5.92364 5.74828 6.28323 5.12114 6.6457C4.76155 6.85283 4.58319 7.1405 4.58894 7.57777C4.60621 9.32683 4.60045 11.0759 4.59182 12.825C4.58894 13.2191 4.77306 13.4809 5.08662 13.6679C5.69937 14.0332 6.32075 14.3928 6.945 14.7409C7.15788 14.8588 7.35638 15.0142 7.64406 15.1005V9.87342C7.77063 10.256 8.00653 10.5379 8.36037 10.7451C8.90407 11.0615 9.59449 10.9896 10.0461 10.5408C10.5726 10.0201 10.6071 9.31245 10.2964 8.78025C9.9771 8.22504 9.4449 8.04668 8.84366 8.02367ZM10.4546 16.4152C10.7337 16.3404 10.9609 16.1419 11.2141 15.998C12.0138 15.5435 12.8021 15.066 13.6076 14.6201C14.134 14.3266 14.6403 14.0016 15.184 13.7369C15.512 13.5787 15.7622 13.2968 15.7622 12.8883C15.7651 11.073 15.768 9.26067 15.7651 7.44544C15.7651 7.22681 15.6644 7.17215 15.4947 7.30735C14.9769 7.71298 14.3757 7.98052 13.8118 8.30847C12.7474 8.92984 11.6801 9.54547 10.6129 10.164C10.446 10.2589 10.3827 10.3682 10.3856 10.5638C10.3914 12.4424 10.3885 14.3238 10.3885 16.2023C10.3827 16.2713 10.3597 16.3519 10.4546 16.4152Z" fill="#066AF3"/>
+  <path d="M1.87891 12.428C1.9163 12.4481 1.9163 12.4683 1.87891 12.4884V12.428Z" fill="#4372E0"/>
+  <path d="M7.64396 9.87056C7.53752 9.00465 7.91437 8.42355 8.84356 8.02368C9.44768 8.0467 9.977 8.22505 10.2963 8.77739C10.6041 9.31247 10.5725 10.0173 10.046 10.538C9.59152 10.9867 8.90397 11.0587 8.36027 10.7422C8.00643 10.5351 7.76766 10.2532 7.64396 9.87056Z" fill="#002A9A"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/providers/aiproxy/ui/svg/icons/modelist/cohere.svg b/frontend/providers/aiproxy/ui/svg/icons/modelist/cohere.svg
new file mode 100644
index 000000000000..150bc29de8f0
--- /dev/null
+++ b/frontend/providers/aiproxy/ui/svg/icons/modelist/cohere.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="166" height="58.204" viewBox="0 0 166 58.204">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_1" data-name="Rectangle 1" width="166" height="58.204" fill="#fff"/>
+    </clipPath>
+  </defs>
+  <g id="CH_Logo_RGB_1" data-name="CH_Logo_RGB 1" clip-path="url(#clip-path)">
+    <path id="Path_1" data-name="Path 1" d="M694.663,25.592a11.783,11.783,0,0,0-3.968-8.023,11.921,11.921,0,0,0-8.369-3.19,11.748,11.748,0,0,0-8.983,3.917V1.651A1.458,1.458,0,0,0,671.691,0c-1.1,0-1.591.545-1.591,1.651V37.393a1.44,1.44,0,0,0,1.591,1.651,1.487,1.487,0,0,0,1.651-1.651v-11.8a9.12,9.12,0,0,1,15.4-5.4,8.323,8.323,0,0,1,2.689,6.3V37.393a1.44,1.44,0,0,0,1.651,1.591,1.464,1.464,0,0,0,.64-.069,1.481,1.481,0,0,0,.545-.337,1.376,1.376,0,0,0,.337-.545,1.464,1.464,0,0,0,.069-.64v-11.8Z" transform="translate(-612.164)" fill="#ec1562"/>
+    <path id="Path_2" data-name="Path 2" d="M318.732,178.681a8.753,8.753,0,0,1,.648-3.484,8.61,8.61,0,0,1,1.98-2.94,8.912,8.912,0,0,1,6.476-2.7,9.181,9.181,0,0,1,9.1,9.121,8.983,8.983,0,0,1-9.113,9.121,8.963,8.963,0,0,1-8.447-5.611A9.2,9.2,0,0,1,318.732,178.681Zm-3.234,0a12.341,12.341,0,0,0,3.605,8.776,12.3,12.3,0,0,0,8.758,3.605,11.7,11.7,0,0,0,4.738-.865,11.963,11.963,0,0,0,4-2.689,12.09,12.09,0,0,0,2.715-4.038,11.926,11.926,0,0,0,.891-4.781,12.341,12.341,0,0,0-3.605-8.776,12.23,12.23,0,0,0-4.02-2.68,12.343,12.343,0,0,0-13.47,2.68,12.455,12.455,0,0,0-3.614,8.767Z" transform="translate(-288.221 -151.922)" fill="#039ec3"/>
+    <path id="Path_3" data-name="Path 3" d="M-.029,179.03A12.117,12.117,0,0,0,12.335,191.42a11.743,11.743,0,0,0,9.286-4.288,2.065,2.065,0,0,0,.476-1.1,1.92,1.92,0,0,0-1.712-1.651,1.723,1.723,0,0,0-1.228.657,8.765,8.765,0,0,1-3.069,2.343,8.621,8.621,0,0,1-3.778.787,8.977,8.977,0,0,1-9.1-9.113,8.654,8.654,0,0,1,.657-3.493,8.758,8.758,0,0,1,1.989-2.94,8.874,8.874,0,0,1,6.467-2.7,8.66,8.66,0,0,1,6.657,2.94,1.475,1.475,0,0,0,.51.441,1.541,1.541,0,0,0,.648.173,2.1,2.1,0,0,0,1.133-.579,2.044,2.044,0,0,0,.579-1.133,1.768,1.768,0,0,0-.476-1.1,11.807,11.807,0,0,0-9.035-3.986,11.855,11.855,0,0,0-4.738.908,11.337,11.337,0,0,0-3.994,2.68A11.947,11.947,0,0,0,0,179.03" transform="translate(0.029 -152.272)" fill="#039ec3"/>
+    <path id="Path_4" data-name="Path 4" d="M1020.88,173a9.17,9.17,0,0,1,6.908-.553,8.4,8.4,0,0,1,6.225,7.107h-17.888A8.725,8.725,0,0,1,1020.88,173Zm-6.424,1.738a12.407,12.407,0,0,0-1.772,6.432,12.07,12.07,0,0,0,.9,4.747,12.335,12.335,0,0,0,17.975,5.706,1.614,1.614,0,0,0,.6-.536,1.57,1.57,0,0,0,.259-.752c0-.8-.8-1.833-1.53-1.833a1.952,1.952,0,0,0-1.037.363,9.2,9.2,0,0,1-4.833,1.427,8.416,8.416,0,0,1-8.084-4.963,10.227,10.227,0,0,1-.856-2.507h19.678a1.444,1.444,0,0,0,1.591-1.651,12.327,12.327,0,0,0-2.326-7.332,12.2,12.2,0,0,0-6.234-4.487,12.625,12.625,0,0,0-3.8-.553,11.58,11.58,0,0,0-10.574,5.94" transform="translate(-925.128 -154.203)" fill="#ec1562"/>
+    <path id="Path_5" data-name="Path 5" d="M1585.663,172.907a9.17,9.17,0,0,1,6.908-.553,8.426,8.426,0,0,1,6.234,7.107H1580.9a8.726,8.726,0,0,1,4.755-6.554Zm-6.407,1.738a12.406,12.406,0,0,0-1.772,6.432,12.026,12.026,0,0,0,.9,4.738,11.841,11.841,0,0,0,2.689,3.994,12.129,12.129,0,0,0,8.75,3.614,11.985,11.985,0,0,0,6.536-1.9,1.613,1.613,0,0,0,.6-.536,1.569,1.569,0,0,0,.259-.752c0-.8-.8-1.833-1.53-1.833a1.952,1.952,0,0,0-1.037.363,9.168,9.168,0,0,1-4.824,1.427,8.416,8.416,0,0,1-8.084-4.963,9.878,9.878,0,0,1-.856-2.507h19.687a1.444,1.444,0,0,0,1.591-1.651,12.328,12.328,0,0,0-2.326-7.332,12.2,12.2,0,0,0-6.234-4.487,12.625,12.625,0,0,0-3.8-.553,11.58,11.58,0,0,0-10.574,5.94" transform="translate(-1441.096 -154.111)" fill="#ec1562"/>
+    <path id="Path_6" data-name="Path 6" d="M1385.884,135.82l-8.084-3.908-.225-.112.259,3a12.131,12.131,0,0,0-7.582,4.124,12.255,12.255,0,0,0-2.957,8.118v10.9a1.464,1.464,0,0,0,.069.64,1.482,1.482,0,0,0,.337.545,1.376,1.376,0,0,0,.545.337,1.786,1.786,0,0,0,2.282-1.522v-10.9a9.083,9.083,0,0,1,7.582-9.009l.294,3.381Z" transform="translate(-1249.073 -120.405)" fill="#ec1562"/>
+    <path id="Path_7" data-name="Path 7" d="M781.823,576.2v-9.165h-2.049v3.726h-3.208v-3.726h-2.049V576.2h2.049v-3.467h3.225V576.2Zm-18.934-7.28v-1.9h-7.971v1.9h2.957v7.28h2.066v-7.28Zm-18.217,7.28v-1.945h-4.755v-7.211h-2.032v9.165h6.787Zm-21.909-3.571h-2.239l1.124-2.862Zm3.363,3.571-3.623-9.191H720.94l-3.8,9.191h2l.709-1.712h3.631l.631,1.712Zm-20.577,0v-1.9h-4.513v-1.738h3.692v-1.833h-3.7V568.9h4.366V567h-6.389v9.165Zm-18.736,0v-9.165h-2.049v3.726h-3.208v-3.726H679.5V576.2h2.049v-3.467h3.216V576.2Z" transform="translate(-620.752 -517.978)" fill="#6d6f72"/>
+    <path id="Path_8" data-name="Path 8" d="M1866.292,125.492a2.338,2.338,0,1,1-.692,1.66A2.266,2.266,0,0,1,1866.292,125.492Zm1.66,3.8a2.017,2.017,0,0,0,1.5-.622,2.088,2.088,0,0,0,.623-1.522,2.055,2.055,0,0,0-.623-1.513,2.088,2.088,0,0,0-2.991,0,2.055,2.055,0,0,0-.622,1.513,2.083,2.083,0,0,0,.622,1.513A2.02,2.02,0,0,0,1867.952,129.3Zm.986-2.559a.783.783,0,0,1-.38.718l.493.9h-.648l-.38-.761h-.294v.761h-.6v-2.4h.891a1,1,0,0,1,.666.225A.742.742,0,0,1,1868.937,126.737Zm-1.21-.233v.571h.259a.387.387,0,0,0,.259-.078.239.239,0,0,0,.1-.207c0-.19-.121-.285-.354-.285Z" transform="translate(-1704.303 -114.01)" fill="#6d6f72"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/frontend/providers/aiproxy/ui/svg/icons/modelist/default.svg b/frontend/providers/aiproxy/ui/svg/icons/modelist/default.svg
new file mode 100644
index 000000000000..979bd0cbaf38
--- /dev/null
+++ b/frontend/providers/aiproxy/ui/svg/icons/modelist/default.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M11.2499 1.19138L13.7089 2.61105L13.7057 2.61646C13.7343 2.62815 13.7622 2.64182 13.7892 2.6574C14.392 3.00547 14.1579 4.07039 13.4883 4.26061C12.7362 4.47423 12.0225 4.77879 11.3596 5.16165C13.1451 6.80268 14.3916 9.02108 14.803 11.5208C15.4983 11.1087 16.1362 10.6099 16.7016 10.0392C17.1894 9.54688 18.2535 9.87195 18.2535 10.565V13.3219C18.2535 14.215 17.777 15.0403 17.0035 15.4869L13.9702 17.2382L13.9593 17.2191C13.3875 17.3676 12.709 16.6494 12.8893 16.0472C13.0842 15.3961 13.2106 14.7154 13.2604 14.0136C12.2292 14.33 11.1342 14.5002 9.99937 14.5002C8.83538 14.5002 7.71323 14.3211 6.65899 13.9889C6.70626 14.6818 6.82834 15.3541 7.01722 15.9979C7.19753 16.6125 6.4958 17.3379 5.91755 17.1563L5.91012 17.1692L2.9964 15.4869C2.2229 15.0403 1.7464 14.215 1.7464 13.3219V10.5661C1.7464 9.87307 2.81029 9.54795 3.29814 10.0402C3.84414 10.5911 4.4576 11.075 5.12509 11.4786C5.54356 8.99607 6.78603 6.79343 8.56149 5.16165C7.91262 4.78688 7.21498 4.48713 6.48042 4.27427C5.81148 4.08043 5.58192 3.02043 6.18507 2.6722C6.19859 2.6644 6.21233 2.65707 6.22626 2.65023L6.22548 2.64888L8.74993 1.19138C9.52344 0.744799 10.4764 0.7448 11.2499 1.19138ZM8.50596 3.25674C9.01264 3.49118 9.49866 3.76269 9.96054 4.0678C10.4357 3.7539 10.9365 3.47556 11.459 3.23656L10.4166 2.63476C10.1588 2.4859 9.8411 2.4859 9.58327 2.63476L8.50596 3.25674ZM3.41307 12.3363V13.3219C3.41307 13.6196 3.5719 13.8947 3.82973 14.0435L5.05968 14.7537C5.00062 14.2899 4.97017 13.8171 4.97017 13.3373L4.97024 13.2984C4.4235 13.0201 3.90289 12.6978 3.41307 12.3363ZM14.855 14.8028L16.1701 14.0435C16.428 13.8947 16.5868 13.6196 16.5868 13.3219V12.3354C16.0735 12.7144 15.5264 13.0502 14.9509 13.3375C14.9509 13.8343 14.9182 14.3234 14.855 14.8028ZM13.2243 12.268C12.2181 12.634 11.1321 12.8336 9.99937 12.8336C8.83866 12.8336 7.72691 12.624 6.6999 12.2406C6.98156 9.80749 8.18886 7.65651 9.96054 6.1489C11.7389 7.66218 12.9486 9.82368 13.2243 12.268Z" fill="#0884DD"/>
+  <path d="M14.6501 4.11534C14.4192 4.51399 14.5556 5.02439 14.9545 5.25474L16.1701 5.95656C16.428 6.10542 16.5868 6.38053 16.5868 6.67825V8.36521C16.5868 8.82545 16.9599 9.19854 17.4201 9.19854C17.8804 9.19854 18.2535 8.82545 18.2535 8.36521V6.67825C18.2535 5.78509 17.777 4.95977 17.0035 4.51319L15.7879 3.81137C15.3897 3.58149 14.8806 3.71751 14.6501 4.11534Z" fill="#0884DD"/>
+  <path d="M12.5241 17.1108C12.7542 17.5094 12.6177 18.0191 12.2191 18.2492L11.2499 18.8087C10.4764 19.2553 9.52344 19.2553 8.74993 18.8087L7.77194 18.2441C7.37295 18.0137 7.23659 17.5033 7.46753 17.1047C7.69799 16.7068 8.20711 16.5708 8.60528 16.8007L9.58327 17.3653C9.8411 17.5142 10.1588 17.5142 10.4166 17.3654L11.3858 16.8058C11.7843 16.5757 12.294 16.7122 12.5241 17.1108Z" fill="#0884DD"/>
+  <path d="M2.57973 9.20785C2.1195 9.20785 1.7464 8.83475 1.7464 8.37452V6.67825C1.7464 5.78508 2.2229 4.95977 2.9964 4.51319L4.19282 3.82243C4.5914 3.59231 5.10106 3.72887 5.33118 4.12745C5.5613 4.52603 5.42473 5.03569 5.02616 5.26581L3.82973 5.95656C3.5719 6.10542 3.41307 6.38053 3.41307 6.67825V8.37452C3.41307 8.83475 3.03997 9.20785 2.57973 9.20785Z" fill="#0884DD"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/providers/aiproxy/ui/svg/icons/modelist/defog.svg b/frontend/providers/aiproxy/ui/svg/icons/modelist/defog.svg
new file mode 100644
index 000000000000..0b125ba2d855
--- /dev/null
+++ b/frontend/providers/aiproxy/ui/svg/icons/modelist/defog.svg
@@ -0,0 +1,16 @@
+<svg width="152" height="46" viewBox="0 0 152 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_150_45)">
+<path d="M24.2842 38H2.8335V7H24.7649C27.0326 7 29.0799 7.84439 30.6785 9.44325C32.4293 11.1946 33.3949 13.5831 33.3949 16.171V29.0323C33.3949 35.2127 27.4893 37.5934 24.3683 37.9922L24.2842 38.0039V38ZM5.40966 35.4864H24.1079C24.8771 35.3691 30.8187 34.2902 30.8187 29.0284V16.171C30.8187 14.2711 30.0975 12.4573 28.8355 11.1985C27.7177 10.0805 26.3475 9.51362 24.7649 9.51362H5.40565V35.4864H5.40966Z" fill="#2B59FF"/>
+<path d="M20.8413 30.0445C20.1121 30.0445 19.3869 29.8412 18.6698 29.4385C17.4879 28.7661 16.7787 27.9139 16.1497 27.1634L16.1056 27.1086C15.4406 26.3112 14.8075 25.4941 14.1946 24.7045C13.7578 24.1416 13.3211 23.5786 12.8724 23.0196C12.4157 22.4528 11.9309 21.9641 11.39 21.5263C11.1937 21.366 10.9493 21.2253 10.6568 21.108C10.1881 20.9125 9.90762 20.9204 9.45489 21.1354C8.68164 21.5028 8.22491 21.9993 7.70006 22.5779C7.06703 23.2737 6.49411 23.9852 6.00131 24.6928C5.90115 24.8569 5.60467 25.3573 4.83142 25.4238L4.51091 25.4511L4.23045 25.2948C3.78974 25.0485 3.66153 24.6928 3.62147 24.5012C3.5173 23.9891 3.80577 23.6334 3.90192 23.5161C4.71924 22.3629 5.65676 21.1354 6.94684 20.0252C7.46368 19.5795 8.24494 18.911 9.67525 18.8016C11.358 18.6765 12.3636 19.3098 13.0527 19.8766C14.3548 20.9516 15.2442 22.1244 16.1056 23.262C16.2499 23.4535 16.3941 23.6412 16.5383 23.8327C16.6826 24.0204 16.8228 24.208 16.963 24.3957C17.7162 25.3925 18.4254 26.3346 19.455 27.1595C20.5408 28.0273 21.1378 28.0351 22.2315 27.1829C23.2332 26.405 23.9143 25.502 24.6354 24.5481C24.7756 24.3644 24.9159 24.1767 25.0561 23.993C25.2484 23.7428 25.4327 23.4926 25.621 23.2424C26.5145 22.0462 27.4359 20.807 28.8983 19.7046C29.5033 19.2472 30.3807 18.7351 31.783 18.7899C32.5322 18.8211 33.1051 18.9658 33.6299 19.259C35.1644 20.1073 36.0418 21.2096 36.8151 22.183L37.0154 22.4332C37.388 22.8984 37.7406 23.3636 38.0932 23.8327C38.8504 24.8413 39.5675 25.7912 40.465 26.6982C40.7775 27.0148 41.1781 27.3784 41.7591 27.6481C42.2318 27.867 42.5924 27.867 43.0452 27.6481C43.8104 27.2767 44.3072 26.7959 44.8641 26.147C45.2247 25.7248 45.5612 25.2987 45.9018 24.8687C46.1141 24.6028 46.3265 24.3331 46.5428 24.0673C46.8152 23.6099 47.2279 23.3753 47.7688 23.3636L48.1093 23.3558L48.3858 23.5474C48.6662 23.7428 48.8505 24.0204 48.8986 24.337C48.9747 24.8296 48.6943 25.1775 48.6021 25.2909L48.3297 25.6544C47.4683 26.8115 46.5749 28.0038 45.1526 29.0593C44.4354 29.591 43.586 30.0796 42.2399 30.0249C40.9458 29.9702 40.1685 29.4581 39.5355 28.9811C38.4417 28.1563 37.7125 27.2337 37.0034 26.3424L36.8792 26.1861C36.5346 25.7521 36.2061 25.3143 35.8776 24.8726C35.1885 23.9461 34.5354 23.0743 33.7181 22.2417C33.2854 21.7999 32.8888 21.452 32.3479 21.1706C31.815 20.893 31.5266 20.8852 31.0097 21.1393C29.936 21.6631 29.3631 22.3746 28.698 23.1916L28.4336 23.5161C27.9968 24.0438 27.5802 24.6028 27.1755 25.1384C26.3782 26.2017 25.5529 27.3041 24.4792 28.3439C24.1306 28.684 23.6418 29.118 22.9607 29.4776C22.2516 29.8529 21.5424 30.0405 20.8413 30.0405V30.0445Z" fill="#182547"/>
+<path d="M49.8373 19.8109H45.4181C44.7897 19.8109 44.2803 20.308 44.2803 20.9211V25.233C44.2803 25.8461 44.7897 26.3432 45.4181 26.3432H49.8373C50.4657 26.3432 50.9751 25.8461 50.9751 25.233V20.9211C50.9751 20.308 50.4657 19.8109 49.8373 19.8109Z" fill="#EFF3F9"/>
+<path d="M49.5084 27.3473H45.7423C44.3681 27.3473 43.2502 26.2566 43.2502 24.9157V21.2411C43.2502 19.9002 44.3681 18.8096 45.7423 18.8096H49.5084C50.8826 18.8096 52.0004 19.9002 52.0004 21.2411V24.9157C52.0004 26.2566 50.8826 27.3473 49.5084 27.3473ZM45.7423 20.815C45.5019 20.815 45.3096 21.0065 45.3096 21.2372V24.9118C45.3096 25.1464 45.5059 25.334 45.7423 25.334H49.5084C49.7487 25.334 49.9411 25.1425 49.9411 24.9118V21.2372C49.9411 21.0026 49.7447 20.815 49.5084 20.815H45.7423Z" fill="#2B59FF"/>
+<path d="M6.58457 19.8109H2.16543C1.53702 19.8109 1.02759 20.308 1.02759 20.9211V25.233C1.02759 25.8461 1.53702 26.3432 2.16543 26.3432H6.58457C7.21298 26.3432 7.7224 25.8461 7.7224 25.233V20.9211C7.7224 20.308 7.21298 19.8109 6.58457 19.8109Z" fill="#EFF3F9"/>
+<path d="M6.25811 27.3473H2.49203C1.11781 27.3473 0 26.2566 0 24.9157V21.2411C0 19.9002 1.11781 18.8096 2.49203 18.8096H6.25811C7.63233 18.8096 8.75014 19.9002 8.75014 21.2411V24.9157C8.75014 26.2566 7.63233 27.3473 6.25811 27.3473ZM2.49203 20.815C2.25164 20.815 2.05933 21.0065 2.05933 21.2372V24.9118C2.05933 25.1464 2.25564 25.334 2.49203 25.334H6.25811C6.4985 25.334 6.69081 25.1425 6.69081 24.9118V21.2372C6.69081 21.0026 6.49449 20.815 6.25811 20.815H2.49203Z" fill="#2B59FF"/>
+</g>
+<path d="M61.3821 34V12.6185H68.3849C70.547 12.6185 72.4316 13.0586 74.0388 13.9387C75.646 14.8188 76.8897 16.0625 77.7698 17.6697C78.6499 19.2578 79.09 21.1328 79.09 23.2949C79.09 25.4378 78.6499 27.3129 77.7698 28.9201C76.8897 30.5273 75.646 31.7805 74.0388 32.6798C72.4316 33.5599 70.547 34 68.3849 34H61.3821ZM64.1947 31.417H68.4136C70.0017 31.417 71.3697 31.0822 72.5177 30.4125C73.6848 29.7428 74.5841 28.8053 75.2155 27.5999C75.8469 26.3754 76.1626 24.9404 76.1626 23.2949C76.1626 21.6303 75.8373 20.1953 75.1868 18.9899C74.5554 17.7845 73.6561 16.8565 72.489 16.206C71.341 15.5363 69.9825 15.2015 68.4136 15.2015H64.1947V31.417ZM89.1698 34.3444C87.6774 34.3444 86.3476 33.9904 85.1805 33.2825C84.0133 32.5746 83.0949 31.6083 82.4253 30.3838C81.7556 29.1401 81.4208 27.753 81.4208 26.2223C81.4208 24.6725 81.746 23.2949 82.3966 22.0895C83.0662 20.8841 83.9655 19.937 85.0944 19.2482C86.2424 18.5403 87.5243 18.1863 88.9402 18.1863C90.0882 18.1863 91.1022 18.3968 91.9824 18.8177C92.8816 19.2195 93.6374 19.7744 94.2497 20.4823C94.8811 21.1711 95.3594 21.9651 95.6847 22.8644C96.0291 23.7445 96.2013 24.6629 96.2013 25.6196C96.2013 25.8301 96.1821 26.0692 96.1439 26.3371C96.1247 26.5858 96.096 26.825 96.0578 27.0546H83.3724V24.7586H94.508L93.2452 25.7918C93.4174 24.7969 93.3217 23.9072 92.9582 23.1227C92.5946 22.3382 92.0589 21.7164 91.351 21.2572C90.643 20.798 89.8394 20.5684 88.9402 20.5684C88.0409 20.5684 87.2182 20.798 86.472 21.2572C85.7258 21.7164 85.1422 22.3765 84.7213 23.2375C84.3195 24.0794 84.1568 25.0839 84.2334 26.251C84.1568 27.3799 84.329 28.3748 84.75 29.2358C85.19 30.0777 85.8023 30.7378 86.5868 31.2161C87.3904 31.6753 88.2609 31.9049 89.1985 31.9049C90.2317 31.9049 91.1022 31.6657 91.8102 31.1874C92.5181 30.7091 93.0921 30.0968 93.5322 29.3506L95.7708 30.4986C95.4646 31.2065 94.9863 31.8571 94.3358 32.4502C93.7044 33.0242 92.9486 33.4834 92.0685 33.8278C91.2075 34.1722 90.2412 34.3444 89.1698 34.3444ZM101.03 34V21.085H98.0742V18.5307H101.03V17.4401C101.03 16.3304 101.269 15.3928 101.748 14.6275C102.245 13.8622 102.896 13.2786 103.699 12.8768C104.522 12.475 105.431 12.2741 106.426 12.2741C106.636 12.2741 106.866 12.2932 107.115 12.3315C107.383 12.3506 107.603 12.3793 107.775 12.4176V14.7997C107.622 14.7614 107.44 14.7423 107.229 14.7423C107.019 14.7232 106.856 14.7136 106.742 14.7136C105.861 14.7136 105.134 14.9241 104.56 15.345C104.005 15.7659 103.728 16.4643 103.728 17.4401V18.5307H107.402V21.085H103.728V34H101.03ZM117.133 34.3444C115.641 34.3444 114.292 34 113.086 33.3112C111.881 32.6033 110.924 31.637 110.216 30.4125C109.508 29.188 109.154 27.8008 109.154 26.251C109.154 24.7012 109.499 23.3236 110.188 22.1182C110.896 20.9128 111.852 19.9561 113.058 19.2482C114.263 18.5403 115.621 18.1863 117.133 18.1863C118.625 18.1863 119.974 18.5403 121.18 19.2482C122.385 19.937 123.332 20.8841 124.021 22.0895C124.729 23.2949 125.083 24.6821 125.083 26.251C125.083 27.8199 124.719 29.2167 123.992 30.4412C123.265 31.6466 122.299 32.6033 121.094 33.3112C119.907 34 118.587 34.3444 117.133 34.3444ZM117.133 31.7614C118.09 31.7614 118.951 31.5222 119.716 31.0439C120.5 30.5656 121.113 29.9055 121.553 29.0636C122.012 28.2217 122.242 27.2842 122.242 26.251C122.242 25.1987 122.012 24.2707 121.553 23.4671C121.113 22.6444 120.5 21.9938 119.716 21.5155C118.951 21.018 118.09 20.7693 117.133 20.7693C116.157 20.7693 115.277 21.018 114.493 21.5155C113.727 21.9938 113.115 22.6444 112.656 23.4671C112.197 24.2707 111.967 25.1987 111.967 26.251C111.967 27.2842 112.197 28.2217 112.656 29.0636C113.115 29.9055 113.727 30.5656 114.493 31.0439C115.277 31.5222 116.157 31.7614 117.133 31.7614ZM135.653 40.314C134.562 40.314 133.548 40.1418 132.611 39.7974C131.692 39.453 130.898 38.9747 130.229 38.3624C129.578 37.7693 129.081 37.0709 128.736 36.2673L131.233 35.1193C131.501 35.8464 132.008 36.4586 132.754 36.9561C133.52 37.4727 134.476 37.731 135.624 37.731C136.504 37.731 137.298 37.5588 138.006 37.2144C138.733 36.8891 139.307 36.3917 139.728 35.722C140.149 35.0715 140.36 34.2774 140.36 33.3399V29.8672L140.848 30.3838C140.312 31.4361 139.537 32.2397 138.523 32.7946C137.528 33.3495 136.428 33.6269 135.222 33.6269C133.768 33.6269 132.467 33.2921 131.319 32.6224C130.171 31.9336 129.272 31.0056 128.621 29.8385C127.971 28.6522 127.646 27.3416 127.646 25.9066C127.646 24.4525 127.971 23.1418 128.621 21.9747C129.272 20.8076 130.162 19.8892 131.291 19.2195C132.439 18.5307 133.74 18.1863 135.194 18.1863C136.399 18.1863 137.49 18.4637 138.466 19.0186C139.461 19.5543 140.255 20.3005 140.848 21.2572L140.446 21.9747V18.5307H143.058V33.3399C143.058 34.6792 142.742 35.8751 142.11 36.9274C141.479 37.9797 140.599 38.8025 139.47 39.3956C138.36 40.0079 137.088 40.314 135.653 40.314ZM135.452 31.0439C136.37 31.0439 137.193 30.8143 137.92 30.3551C138.666 29.8959 139.26 29.2836 139.7 28.5183C140.14 27.7338 140.36 26.8633 140.36 25.9066C140.36 24.9691 140.14 24.1081 139.7 23.3236C139.26 22.5391 138.666 21.9173 137.92 21.4581C137.193 20.9989 136.37 20.7693 135.452 20.7693C134.515 20.7693 133.663 20.9989 132.898 21.4581C132.132 21.9173 131.53 22.5391 131.09 23.3236C130.669 24.0889 130.458 24.9499 130.458 25.9066C130.458 26.8633 130.669 27.7338 131.09 28.5183C131.53 29.2836 132.123 29.8959 132.869 30.3551C133.634 30.8143 134.495 31.0439 135.452 31.0439Z" fill="#182547"/>
+<defs>
+<clipPath id="clip0_150_45">
+<rect width="52" height="31" fill="white" transform="translate(0 7)"/>
+</clipPath>
+</defs>
+</svg>
\ No newline at end of file
diff --git a/frontend/providers/aiproxy/ui/svg/icons/modelist/fishaudio.svg b/frontend/providers/aiproxy/ui/svg/icons/modelist/fishaudio.svg
new file mode 100644
index 000000000000..ec44029a9023
--- /dev/null
+++ b/frontend/providers/aiproxy/ui/svg/icons/modelist/fishaudio.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="61.1 180.15 377.8 139.718" class="h-6 dark:invert"><path d="M431.911 245.181c3.842 0 6.989 1.952 6.989 4.337v14.776c0 2.385-3.147 4.337-6.989 4.337-3.846 0-6.99-1.952-6.99-4.337v-14.776c0-2.385 3.144-4.337 6.99-4.337ZM404.135 250.955c3.846 0 6.989 1.952 6.989 4.337v32.528c0 2.385-3.143 4.337-6.989 4.337-3.842 0-6.989-1.952-6.989-4.337v-32.528c0-2.385 3.147-4.337 6.989-4.337ZM376.363 257.688c3.842 0 6.989 1.952 6.989 4.337v36.562c0 2.385-3.147 4.337-6.989 4.337-3.846 0-6.993-1.952-6.993-4.337v-36.562c0-2.386 3.147-4.337 6.993-4.337ZM348.587 263.26c3.846 0 6.989 1.952 6.989 4.337v36.159c0 2.385-3.143 4.337-6.989 4.337-3.842 0-6.989-1.952-6.989-4.337v-36.159c0-2.385 3.147-4.337 6.989-4.337ZM320.811 268.177c3.846 0 6.989 1.952 6.989 4.337v31.318c0 2.385-3.143 4.337-6.989 4.337-3.842 0-6.989-1.952-6.989-4.337v-31.318c0-2.385 3.147-4.337 6.989-4.337ZM293.179 288.148c3.846 0 6.989 1.952 6.989 4.337v9.935c0 2.384-3.147 4.336-6.989 4.336s-6.99-1.951-6.99-4.336v-9.935c0-2.386 3.144-4.337 6.99-4.337Z" style="fill: rgb(177, 179, 180); fill-rule: evenodd;"></path><path d="M431.911 205.441c3.842 0 6.989 1.952 6.989 4.337v24.459c0 2.385-3.147 4.337-6.989 4.337-3.846 0-6.99-1.952-6.99-4.337v-24.459c0-2.385 3.144-4.337 6.99-4.337ZM404.135 189.026c3.846 0 6.989 1.952 6.989 4.337v43.622c0 2.385-3.143 4.337-6.989 4.337-3.842 0-6.989-1.951-6.989-4.337v-43.622c0-2.385 3.147-4.337 6.989-4.337ZM376.363 182.848c3.842 0 6.989 1.953 6.989 4.337v56.937c0 2.384-3.147 4.337-6.989 4.337-3.846 0-6.993-1.952-6.993-4.337v-56.937c0-2.385 3.147-4.337 6.993-4.337ZM348.587 180.15c3.846 0 6.989 1.952 6.989 4.337v66.619c0 2.385-3.143 4.337-6.989 4.337-3.842 0-6.989-1.952-6.989-4.337v-66.619c0-2.385 3.147-4.337 6.989-4.337ZM320.811 181.84c3.846 0 6.989 1.952 6.989 4.337v67.627c0 2.385-3.143 4.337-6.989 4.337-3.842 0-6.989-1.951-6.989-4.337v-67.627c0-2.386 3.147-4.337 6.989-4.337ZM293.179 186.076c3.846 0 6.989 1.952 6.989 4.337v84.37c0 2.385-3.147 4.337-6.989 4.337s-6.99-1.951-6.99-4.337v-84.37c0-2.386 3.144-4.337 6.99-4.337ZM264.829 193.262c3.846 0 6.989 1.953 6.989 4.337v95.667c0 2.385-3.143 4.337-6.989 4.337-3.843 0-6.99-1.951-6.99-4.337v-95.667c0-2.385 3.147-4.337 6.99-4.337ZM237.057 205.441c3.842 0 6.989 1.953 6.989 4.337v92.036c0 2.385-3.147 4.337-6.989 4.337-3.846 0-6.99-1.951-6.99-4.337v-92.036c0-2.385 3.144-4.337 6.99-4.337ZM209.281 221.302c3.846 0 6.989 1.952 6.989 4.337v80.134c0 2.385-3.147 4.337-6.989 4.337s-6.99-1.952-6.99-4.337v-80.134c0-2.386 3.144-4.337 6.99-4.337ZM181.505 232.271c3.846 0 6.993 1.952 6.993 4.336v78.924c0 2.385-3.147 4.337-6.993 4.337-3.842 0-6.989-1.951-6.989-4.337v-78.924c0-2.385 3.147-4.336 6.989-4.336ZM153.873 241.348c3.846 0 6.989 1.953 6.989 4.337v42.009c0 2.384-3.147 4.337-6.989 4.337-3.843 0-6.99-1.952-6.99-4.337v-42.009c0-2.385 3.147-4.337 6.99-4.337ZM125.266 200.398c3.842 0 6.989 1.953 6.989 4.337v58.55c0 2.384-3.147 4.337-6.989 4.337-3.843 0-6.99-1.951-6.99-4.337v-58.55c0-2.385 3.144-4.337 6.99-4.337ZM96.7 204.231c3.842 0 6.989 1.953 6.989 4.337v18.004c0 2.384-3.147 4.337-6.989 4.337s-6.989-1.952-6.989-4.337v-18.004c0-2.385 3.143-4.337 6.989-4.337ZM68.089 201.81c3.846 0 6.99 1.953 6.99 4.337v8.12c0 2.384-3.147 4.336-6.99 4.336-3.842 0-6.989-1.951-6.989-4.336v-8.12c0-2.385 3.143-4.337 6.989-4.337ZM153.873 194.94c3.846 0 6.989 1.953 6.989 4.337v6.102c0 2.384-3.147 4.337-6.989 4.337-3.843 0-6.99-1.952-6.99-4.337v-6.102c0-2.385 3.147-4.337 6.99-4.337Z" style="fill: rgb(0, 0, 0); fill-rule: evenodd;"></path></svg>
\ No newline at end of file
diff --git a/frontend/providers/aiproxy/ui/svg/icons/modelist/google.svg b/frontend/providers/aiproxy/ui/svg/icons/modelist/google.svg
new file mode 100644
index 000000000000..759184e8808f
--- /dev/null
+++ b/frontend/providers/aiproxy/ui/svg/icons/modelist/google.svg
@@ -0,0 +1,9 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="20" height="20" fill="url(#pattern0_19_344)"/>
+<defs>
+<pattern id="pattern0_19_344" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_19_344" transform="scale(0.00444444)"/>
+</pattern>
+<image id="image0_19_344" width="225" height="225" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAYAAAA+s9J6AAAwU0lEQVR4Xu2dfXwc1XnvfzOzsztarV4syZJs2bIRdl2biAIxJiY4IVBIKFDixmnMWxIKgbRJmtxQSNvcOAntTW5pSKAlQBx6AwRCCqQONcR1ggEDwUAAgV+xbNlCRn4RkiVbq/VI83b/mDmr2bPn7M5KK2lHPt/Ph492z5k5kvc5P57nPM85s4Ag1Kzb0LmKbhOEC5luEISLrgOpj9JtgnAhRBhikkOG1N2jz00OGRLdJwgPQoThRtp7ZKQJgBBhiBEiDDHDQ4aiJ606ul0QLoQIQ8yQYSsAGo8ODKt0nyA8CBGGmL7+4TItoWh9/cPldJ8gPAgRhpjjgyO13s8E3ScID0KEIebowPAc72cD3ScID0KEIaZvwDjL+/kndJ8gPAgRhpiDPfq5MxQHB3v0C+g+QXgQIgwpg/26nBw05gJActCYN9ivi1phSBEiDCn9KVMZSlnzLVXBUMqa158yRZkipAgRhhSvLFELwADQKMoU4UWIMKR0Hhj8wJDhKABSQ4ajdB4YFMmZkCJEGFK6DqQ+Wa5KiMZkuVyV0HUg9Wn6GkE4ECIMKTu6Uhe7rxzVfT/0IcOwRHImhAgRhpDkkCH3HjMbDFkCAMWQJfQes2qGR2whwhAiRBhC9uw/Xg6gXrUdA64NLQBz9+w/LravhRAhwhDSeWDwfAAwZMkCoACwKzVZOT44MjfjQkEoECIMIV0HUlfPqlAAQCHnectVCW9t678540JBKBAiDBneIy0+6L317OfIALC331ghHnURPoQIQ8bB/ccqeo6ZCwxZMuCGooCbnLEGe4fn7e8bjvuvF5Q+QoQhY8eB5CXeSwtw0u2mK0p1747eT6QbBaFAiDBkbGsfvM595aTXg6YsA4ASjcl4bX/q79IXC0KBEGGIGOzXpX3vnTjdfSfRtpMB4ND+5Ly+nhTdJyhhhLFCxN7uoRkAZkVjsn89SFDg1gvru3pOVFB9ghJGiDBEvLHt6F+XqxLgig0AYLq7ZshrQy5TlDe2Hf1yulFQ8ggRhoTkkCG9tmPgJnermrtflIFqShJeeGfwBlGqCA9ChCFhz/7jNSPDzlwABiDRoSgAwJQkJeI4lpwym/bsPy4eChwShAhDwts7B67yXmaUJmhMSbLlMkV9Y9vRL9J9gtJEiDAE9PWk5Je3Hv3f7jtHHS1NZEacEccBANmUJLzdlfqzjE5BySJEGAK6ek7UjQw79W5WlB2KAoApSYg4jgLA2J5yPti2va+KvkZQeggRhoAXXj5ynT8rSntAwBWgD2subHXdG33f8jcKShMhwhInOWRIm7cdv9F7qwJAxHaYQgTSYlQB4KldydUiS1r6CBGWOG9s7Z0HoGV0wzY/KeNDgfcUtje29s6n+gQlhhBhibP5td4fVGqjZvL2iWZAhaJpPhCD8j9t/f9EtwtKi2yLCkqGru5kdN97Jy6OxmSLnBnMFYpSyIYi45UjI5d0dSejdKegdBAiLGGe/f2Rq8pVqQJuaMnNinqlCRoFgDEXds1vXzh0Ld0pKB2ECEuYP7x19NtDhgMA6dogC680kdFmKDLg2feRd4ZuP5oyha1LFGGYEmXzlkMtQ4Yzt1zNOEGfFYoSAXLWhYqhyAaAqm1vvz+f7hSUBkKEJcrTmw49Wq5Kirdhm+7OgCPANI0KlEde6n2EbheUBkKEJUjb9r6anmPmMrhrQW4oSsTHCUUJKgDj9T7jQ23b+8Sm7hJEiLAEWb/p4J0AYMij5waB7FCUkM8TAsCiuIzHXjiylm4XTD1ChCVG2/a+qn3vnbgW7pElje4fC6YsqQCsvUeNy7Z1JcVXqJUYQoQlxvpNB+9wv21JyvCCNCQhkycUTWPKkh2xHfUXT3XdSfcJpha2xQRTQld3MvrW3qHPooheEHAL/HDXhtbGLv2GbV1J8Z0VJYQQYQmx7umuf6zUZBWMg7v0epCUJfKtB01ZSt9rypK9KC7j8ecO/it1mWAKESIsEdq291W27Ul+26sLaryMKOCGojkK9LlQTVkyXtyX+qI4a1g65LWaYHJYv+ng3eS1972DaWgvSMjnBYF0KJpBowI89sKRe+l2wdQgRFgCbN5yqHnfeyeuLVclHd5ZQDocpaG9YAGoAIxXjoxc+fTr7y+kOwWTjxBhCfD0pkMPwD01z92knQ9WKOpfD9Jtdapk3bvpyJMZnYIpIdtygkll3YbOD+89MvIxby2ojoai6WRK+lpgNAQdayjqHYVSTVkyDvaPLH5o08GP0tcIJhchwimkqzupbPh9768rNdkw3II6ihWG0uJloJ6aUKx1r/Y+0dWdjNCdgslDiHAKWfd019espFFXrkqWajtFDUWBbCFS7xXTLeDX3f/MwW/6OwSTC9t6ggmnbXtfxeZtx3+gxSNeSYJkRf1CoWqFAeqC+aCEqAIwntqV/M6WfYO1/g7B5CFEOEWs33Twx+TZMXRJgsB6nkwQTFnirgdpTFnCqQkF33jyvc1HUyb7DxFMKGOzsmBcrNvQ+cF39yepkkRueB6wkFCUbvNQTVnSk0dOnPbUlp6P0J2CiYdtQcGE0dWdjDy18dB6S1W8s4KAajs+b5jtrQhBkzIsWF7Qh3pqQjF+9kLPpi37BqvpTsHEIkQ4ydz9s/aHLFWZ5T1R2zs578d9z/FagcgjuCwMRVZOqArqVEn5xpPvvUT3CyYWIcJJZN2GzrP3Hhm5slyVUggYhgJuKBrUC7LCTvo9B/WEqujJIydOe2jTwRV0p2DiECKcJNq398Y2P3/kqUpN1gHE6P6xwFsP0hTwrFJ1XmXEWPdq79Nb9g2KDd6TRDArCsbNPT/veHLAlurLVUmBtz3NkOn1oAtLMEHLE2MIRf1vFe99xf95/N0tIls6OQgRTgL3P7rn810p5+PZ2dBgc3w8oegYUA1F1lXLXnzn4/u+S3cKio8Q4QTzyh+OzNzyau/PZlUoWeUINaDXYq0Jg4aiANuz5kEzFFl/cV/qW0+//v4iulNQXIJbUlAwXd1J5aeP7HsNII8uHD0lYXA+eVowRID5QlH6viDkEbJaHZP1H6zvflM8HGpiyWkFwfh44In99wGYr8UjjGNKrmiCPNyXJo94ioViKLJSHZPj/7Dx8AtifThxTIo1T0buWrvz2+/uT96gxSM6vL2hfNjzmxWGTiYjsqQOqYo+9F7yrDsf3ye+Ym2CECKcAB54rGPV1p3HvlMRk1PgCDBIVjRIGJoPeswxoKkJVX/z8Mg3H9p0cDndKRg/QoRFpm17X+V/v/j+454AmfXAIFvU/PiFyApFTZm9YTsXrHFyoALQP/tC/8tb9g3OpDsF46MgSwhy09WdVO6+v/2VGYrjnpJXZOYZwdGsqN9LZYooaF2QUASPl4XvFIcyIkvqZXFHX/5gV7fYX1pchAiLRF9PSr77Z+2/ArC4IiYDebal+UNRt75XfFOMR5gjsoSIbfublBFZUi5OQL31v7vbxGn84lF8y5+EDPbr0po7d/ymr3f4ioqYnFUP9EOvAwH2LhfWI+5ZsITGavNTYCjqRzVl2SgzrPlXP/7esyJjWhzGbA3BKD97cPeP9JT5cX8ihjfRMwv07D2dJBSlw1HemDQF7BUNBPHS3k/VlGW9zLBWrPmvrnsyLhSMiWBWFXC5a+3Obx/oPvFVT4Bxut8P8YL+J6pFbHtcgmF50fEyQoXHVFgKAJopy6mdR4a/uObJA7fQnYLCECIcB3et3XnL5m3Hv2PIUoYAeR4re5uaA7pGWEhtcCx7RXl/Gw1DeGm8vjiA1Cvtx29f8+SBr1CXCAogmEUEWTzwWMc1W3ceu705ninAQnC9Tbbg6DAUCC4eIP+acCz4PaPvddyU5dTa3cl/W/PkgRvTFwgKIrhlBWnuf3TP9S++3PPzICEoITsUJaHk2AUzUaFoLmgPacqIL1EwuHZ38idrnjxwU0anIBBChAXywGMdn9/yau/9hQgwF7TXKiQULQUiNmDKqPgjFYNrdyfvE0IsnNKwZEi4a+3OW7buPHZ7jSqlDFliCjBf2EiXKGgxsU5NsMak7/PD62ONQ8PyhEFqmKZ7yWC7gYobFyWuuu2KuY9Slwg45P90BQCAB+9485bN247fXuM+H4YpwHyMRYA8eKEoPWYhsAQYFMf9mysWRqXU2t3JX6x58sA19DUCNkKEeRjs16V/u/PtH7/57onbT9WQAhCnxZSPzOvZ4ikEVlaUfk8TxAsCwbwejSkDkhdGS44Tn68pqbW7kz//8sP7viUK+vkRH1AO+npS0k/u3v7IkQHjymhMSXtAngjzTXT6Pr9weF6QNSZLcKbsbuJm9QHscfwQL2jKMiP5kvteLxSFI0mQHAcjigIAqbhhxY8kYi8+sarpgsW1MdN/j2CU3J/uSUxXdzLyk7u3r6MFWCxosbAEyIMViuYSYCHwBEi3EwxFgiO5/xFv6BFPqUqq79jwiut+0fnWln2D4nQ+h/FbbRrStr2v6oG177wJoCUaUzIO5dLezA/L2xiyFOjsIOB6Qxp6TOZ9jDY/9BgseOvBfF7QUNz7iAAdSYKReY/eqVsagN7frZ57SmtzIunvFAgRZvHir/ee+Z/rD76qlCsqLUCAL8J8E919pgy518mY3CzxAewxeYLjtQPscfyMVYCmnE7IpEXohaI0BgC5U7fw9fPqP3HrubXP0BeczOT+lE8yfn7v1i//5/qDb1ZVRRCNKemvLBsrmQX60Ymeb3LnghWK5iKfAMcDIwRlIzkqJAfzNcX+4Us9v1vz5IHrRcJmFPFBAOjqTqoP/2Tng8PHjStNWdJHFDnjyWgEnhcE2JPdfbhv9n201wqalKHvI2251oP0GCzG6gkNJVOEdCiq2nY6XIUjAZJjwZGGO3UrXl4bf/mpTzb+6eLa2In0DScp7E//JOKVPxyZ9fB9u/9QW6E0mbKkA9BGOBOXFhMh30Sn76MFQ4sPYI9J30fgtQPscfzQAiTZ0XwCBNxwFBgNSQmGLI8K0BVfRv+wougx09Y6dSt116VNZ33mtMrdGRecZPCtN81JDhnSuod23fjq6wP3KeUKEhFXgAAwkSLkCYYWImtM7r2cdoA9jh9ahAR/VpQnSGZpQnKgWq7oiBdULSfDIw5HZAAwYqYtA1Aunld209cumvXTmngkQGw7/WBbYJrTvr234pH7d6+P2M5H9YhswF0bKwBfgEBhIgyaFaXFR6DHzBV2stqA7DFYsETIEx2BFl9gEXpecXg0eWMBMA4lDW1WQn3znk80fGx5S8Vx0nmykG2Bac4Lv3t3ycYN3W9EbEczqXOAAF+EtJgIvIk+HhGyxqTvI/DaAfY4NCwRAq4Qc3lBujRBsqKqbWesCwG44ajjXu95QRo9ZtracETGlWfMuPCGM6qeO5m8ItsC05D27b3lTzy278GBzuSnympililLNhjPgimWCAm5QlGWAIHsMen7/PD66DFY5BJgLliekAgvpwgzvSCNAUBusySlqTK67YkV1R9Z3lIxQF80HWFbYZrx4q/3fuj5Zw//FkCF6SZfVFOWsmZDoQIEck92+j5aMIWIcLJCUSC/CElWlNqmlp/cIiToALQ2RcXtrYkLbj239jn6gukG2wrThPbtvfEtG7u+v+Ptgb+tqI5apiyla3+syVuoCHkTPWgoSqCPLamWnTE27z6A38f72/xMhAjTntDn/QD4EzI58WxgRC0bbZaknjNTe+7OZZVXLG+pGKSvnS6wrRByurqT6nO/bL95x9sD/1xRHVWI94OXfOFN3GKJkJAvFB1rbZCQq48eh6YYAgTcNWGWCP21QfeiQkUIAIhatusVLQkrm+N3fe+8mlsW18aM0aunB2xLhJTkkCG9+fLB1s3rD6wbHBhpKauJWQDSa79cYV2hAgTYEz3TCzogHzH9O8cjwlz/DgI9Ds14RQiM1ge5BXqKAKEoyw5EdKoeUXq/96EZH7nolPg70ylxw/60QsiOVw81/eZXnQ++f/jEhRXVUbC8H9nyxZq8DOMDKFyEBPo+/+8MKkCA/bcC/HaAPQ7NiOw+1tB/OiKfAAGATspkrQcZYWjAtSDXBh561LK1NktCU2V01w+XVl36mdMq99MXhRG+JUNC+/be6i0bu77b9W7qb70mA4BsMhIvuTwIbwLQYiLkmuise+jfSQsQYI9J30fgtQPscfzk84K5ShNEhAR/aQLweUVfWaJIIoQeUSwARuWwQULU//jqkvKvn7+w8jh9bZhgWyMEdHUnted+2f7trndTt8RMSxl2DZQRetKw2gC+8VliIrAm+mgoCvg/WtbvDSJC5n05/kcCZI/BIp8IedCnJtLhqCKNFuj9Y4xxLchDj7hC1kzLAmDvgKICwMrG6I++d17N3y+ujY34rw8LbGuUMO3be2uefGjPA+8fPnFhXUKJA7CGI4oN364XeoKS97zJy5sAhYqQQO5jCYYlPoA9HutvBfjtAHscmlREyQhDgcIFCLjvSSY0Y2ua25kRmubzhDwbEIgAKQwA6DChYsS0VjbHf3Jra+Lvw5ZJ5VuzxGjf3jtjy8au/9u3a+BGM+oaZDiiGDHTkocjmRamJyn9noY3AXgiZE10XkIGyPz9hYgQYP/trDYCbxzCWL0gXZYARkPRNN46MGObGri7ZDLg2YDAESEhY+vh6XXRR25tTXxxeUtFKA4Qsy1SIgz261JXe//sl57oeHTgkL5CqlQBd7+hPRxR0h86DT1JWR6JwDN+IQIEaBGOQv/OoCKk7yNtvH8HkD0Gi/GKkOD3gnAkbmkinwcE+Dbw4wtFeYK0ABiaaSm+MPXR1QvK11x0SryjlLOpbItMMV3dyeiOjZ1/2f5a7z9apr3Y83wG3A9aG44oiJkW/D8JuSYqq403AWgxEfJNdPq+sXpB1t8K8NsB9jg0LBHmEyAA0MeW0seVvHszji4Baa9YDBH6RZdDhGnIpnzNtBXv/b6vLoz/zeWLEs8sro1Z1OVTTrZFppAdrx5qeP2lQzf37Rq4ytDtJlWTYUaVdJ2IXEfER1774U1SXjtvAtBiIuSa6PQ99O8sRIRA9v28NgJvHAKrLAGMipCXFfWvBwF3TZiVFfUL0L0oUFKG9/n7ySc6Gn30dxoALM20tQ4TaNLk3tVztHuXNcbuu+iU+OGaeIT99KpJhm/RSWCwX5cOdSerOl47/Bdbnz18k6Hby+LV7hfAKhFZH5Yl5gn3YomQNwFoMflhTfSJCEUL8eYEehwalhcE8ouQd2ICyC3CYnhBIFAomsYnQD8WXEFqmmmjw3344qGbF8S/f3lz7MGGmtiJqdyJw7bKBJIcMqSD+49Vdbx2+K+6dg1cO9Q/coav21Iisg1AHmbU+YBR0bFEmGuCsvp4E4AWEyHfJKfvY/1OIFOMrDF59wH8PtY4NCwRskRHE1iEhIAZUYBvAz+FiBDgChEYFaOimbaqR2Ropg09Iuur52jfWXWK9u+LGsv0yfaQ2VaZADyPV9Hx2uEvtL/W+zk9abYCgKrJgPfBKJHM57oMMyYMkCnC8XhBgD8BaDERck10+h76dwb1ggT6fl4bgTcOgSVAIL8XZJUmsrKiQDr89P/MJ0Le5++niAKk8RI5tgpA8bwjmjS5c1l15I3VC8q/fnpj7NBkeEi2ZcbJYL8uH+pOJo7sHThnX8fxq/t2DawwdLvFEx3gejwDvm1lfngCBLLDTz+sScpqA/gTgBaTH9ZEDxqKAmwh0mMy75P54SmQPQaLfCLkEag0wSKACAG+HQgTKEI/ZKOHrJm2QjxkhwljZWP02eUzo/+xojG6cVFjWRKAU+xMK9syBeKJruzwoaGF+7f2fWlgz/EL9KTZomoyDN1Oe7xcwvPDE2FYs6KAK0B6vyhrTPo+0sb7twHscfzwEjJA4SKkQ9F0mcJPgIQMwLcBIYjoaMYoQj9EkPCHrABQVx7ZPbtM7vloY+z758xUX6iuio40lCnmeEXJtiqDwX5dAiD3p8zI4HuDVX3dyeb9+wdX9u0auDg1YDYBmEU8nffTUCKyBVdwsvczLzwBApkipKEnKHnPm7y8CUCLiZBvovvvo38fS4AAf0z6fl4bgTcOYaxeEAggQtaJiQAi5H3+fgrxgkUQHwsiSAuASkoeJHTFiDnYVBntWj1He6KhTO6YV6W2nd4Y29NQpowUIsz0J5gcMiRnxJL7U6am9+sJY8iI9x0fmSENGeXJo/qSrl0Dn9IHzUbLtGsANPnGIJCkClCA6GiKKcJiCRBgT/TMUNQB+Tjp3xlUhPR9pI337wCyx2CRS4S8tSAA+Ddr5zu2pFpOhlfMF4rybOCnEBECEyZEP35RKt56Er4EDwCk5sTknbPL5CMtici2uQll06xEpLO5TOqtrorqDWWKCXey2ESo0ou/3vvJ5FF9bteugQ8PHNIX6X3WbAAzAKhKufcBj67lCIaqyToAeAkVUsPL/0nlIJ8AgWAJGTJxWX0AfwLwRJhvoucSYVABAuy/lcDrY43jhwiQDkfzJWSAURGyvCCA0SQM9TqfFwT4NiAEER3NJIiQhohS18z0h1uV9pSEEV9DNKI3aXJyWXWk0xPp79OW9TyhBAAjhi339aTixpChHT00VJ88qrd27Rq4Wh80Z1mm3QC2JxxT+OmnWCL0Q/flMn4hIix2QgZg3wvw21lj0OTygkAwERKyCvT++woQYS4bEAoV4SQJ0K2Lwd04TjKrlCe05sTkd2aXyb0ticjbnifc1lwm9XlrSDKGDc8bsi3EYbBfl/tTpjr43mBlX3eyZf/+wU/37Rr4WGrAXAiggl4TAoASSVsq76caRIQsWJOU1QbwJwAtJj+syT4qQsC/tGb93iAiZN4nT2womgu6NJHeKwpKhP6kTDhKE4WSUVsEfGtCAE2a3L16jvZYQ5m8dV6V+tbpjbGdDWWKMaY14Xjo60kpfT0p7fChoeb9W/u+MbDn+AqSHfWRNzvKE2EhAqTf0/AmAE+E+SZ65n1OxuRmiQ9gj8n7u3ntAHscP2MVIID0Wo9Vlsh4rCERYUAvCPBt4CeI8PwUUYTpdZ9m2hlfCFRXHtk3u0w+/NHG2L+cURN5uaEmdtzLjmannQuAbaVx4hXn44fb+8/dteXI94b6R+Ybul2Xq07IEyBQuAh53iOX8QsRYdBQdCJFyBqDZqJEmMa/JvTIJ8JcNiAU4gWLJD7i7dIZUADoMGGtbIy+7NUJ1y1qLBssxMMFhW2lItPXk5L7elJl3o6Zr+hJswXICFstM6pwPSTAFyJvkrLaeROAFpMf1mQvtghz/Y+D1QZkj8GCJcKgAiQhKABwT0wAmYkZhCorSnbMKADUDhM4NQLoEXn36jnak8saY/ee3hh7bzK+5jvbShOMt3c00fHa4Ru7dg1cP9Q/spj0mdH0IypkEA8ZCb5Zm7znTWjeBKDFROBNdN71/t8ZVIBA9r+DwGsH2OPQ+EWYrxzhJ/CxJfeiwAIE+DbwM8EiNOCFmr6EirV6jrZm1SnanYsay05MhLfLBd/Kk0T79t6KjtcOX7P12cN/BWCpd3AXAHQA6nBEUQoVIYtcxueJijXRiRckrwn07w4qQvo+P7w+egwWvF0y+bKigY8tAbxvW8pJLjsAEybAjOSKl1jpuXlB/JuXN8ce905RTNnzadhWniLat/dWbNnY9aOBPcevGJalOq9ZH3YfX5FWJyHD88iTUxsMEoqS2iB57Ycel/W3Enh99BgsWKEoMCpCHv61IF0f5IqwdLOi6VICCTdPr4tuXL2g/CveaftxJVSKBdtSU0xfT0re+fLBc59/9vD9MdNa5DUbnidUAf4EBdh9vAlAi4mQa6Kz7gkiQtaYrL8V4LcD7HFoWCLMJ0AgU4RAZkIm6+xgAbVBgG8DP0GE54cjQgPeksYLN3tWz9HuWXWK9qNS/Oq1bEuVEIP9utT2+pFFL714ZO1AZ3JFRXUU8P7vZsqSDCqRw5u4uYzPEhTAnujFDkWB7HsJvHaAPY4flgCB/CKka4NApgi9DsDxPVMmoBcEctuBoEeUQF6QIT4LgO1ttlY7TGBlY3TT6gXlX77olHh7qXg9FmxrlSBeqPrvXe+mPkfaTPcLXtJhKm/i8oxfiAD90PfRXhBA1lY11pi8vxfg97HGoRmrCOnN2oAnQkYpIoMAIuTZwE8hoSglQh3eqXkAOL0uuv7W1sQ1pej1WOT4ZEuT9u295Vs2dv1wx9sD11RUR+OmLFmmLNkR2+GGqbwJQIuJkG+i0/cVW4S8doA9Dg1LhPkECGSLkA5Fs7apAUVPyBSC7taa0a3bKgB9ZWP0kVtbE18Pi/gI2dYKCX09qchvfrX3O527jn/Tm7SG9zMjgZPL+LSYCKyJHiQhA7gipAUIsMcEsu/ntRF44xBYAgSKKEL/NjWPfF4QyG0HoDAvCMDQIzIRH25eEP/bG86ovHcyanoTAdtiIaJ9e2/if57pvq9927GraysUmNQXwfCMT4vJT66J7t7ngHx0tBdkJWSA7DFZQjNlftEeyB6DRS4R8soSAJDv2FJGSFpkLwgEFqEFwO4woXqZzvtubU3cEpaH/PJgWyyE7Hj1UP2TTx94+GC3fpFPjBpvAvBEmG+i0/exRJhPgABbhAC/HWCPQ8OqD+arDQKjIvR7QeL9MpIwQIYIi7EezCE6ggXA6DDdL3g9pyqy+eutFdd+5rTKA9R1oYRv8ZDywu/ePW3jhu5nAdQnTceIxhSAUWOkxURgTfSgoSiQ7QEB9pisewF+O8Aex08uLwjwRZguuANZCZlcX/RSDAECeUVoaKYl74CiNGly5w+XVl30mdMq99IXhRm21UJOV3cysu7pru/sebX3m0q5gmhMSQGIwQtRaTER8k3yfMeWgnpC+j4/vD56DBYsEbJER0PXBv3HljLwe0AUvzZIhaKj3m/ExM1LKq+74YzKh8O67stFttWmEe3be8v/55nuH7/dmfpcwrataEwxAGhjEWHmPd66zzdRgwoQ4AuN1w6wx6Ep1rct+XfIZHlAoKgi5HhB1/uNOMo5M7X1dy6rvCrs675c8K0+jVi3ofP85zd0Pw0gLpVFMryiH9ZEDxqKFiJCIPt+XhuBNw6B5QWB/CKkM6LAqAjTeOJLP0fGI58I8wkQyBKhf+1n3d6aOP/Wc2tf8l8wHWFbbhrS1Z2M/Prxju8933Hilua4RE5rZKwVWRPdkAHVpj1htmBo8QHs8ej7SNtEZEXzCRDIFCGA0USMd2/WiQkg0FoQKEyEmmkZO6CoGDFxzkxt453LKj8dtu8ZHCvZlpvmrNvQuWzz80deGhy21YqYnAIQB/JP9FwiZAkQYI/JExqvHWCPQzMRx5borWnpnyhubRCA3mFCOzWCYzctTlx+67m1L/qvm+7wLT+Nad/eG//pg3ufOmo4H6uIyToA1VDkrFlVSCjKghYPy+Ox2mjocWhYZQlg1BPyBBn42BKjNFGkUNQNP1Omdmo88tzDH6u5bHlLRYq+brrDt/xJwP2P7rl+y6u99wOAFo/ogFuHIgQRIa9AzxIOS2j5RMgahyZfKMoTIZ0VzblDhvKGRfCERtSy5TZFVW5eEP/CHRfOvJ++4GQh23onGa/84Uj9Tx/ZtwNAnRaPpMNTPxMpQoDfDrDH8cMSICFfWMoTYVZWlCKfFwTyClCPWrbWpqiD/3nejA9+5rTKPfQFJxM5P6mTgQ+d3dDz7VtaZ807JfHooUErDiAFjAovlwDTbZLEDUkJzPsYbcWCCI8nQBp/WMosS/DeM8ghQAuAvmPE0aI1ZRt2rWqsP9kFCAhPmMFda3d+q21P8jYAernqfkFpLhES4dGlCZb3YgluMkJRHnRpIqsswSNAKMoRoT/8vO6OC2c+QF9wssL8tE5Wvnrjkn86/+zaK4/rtmbIEgz3vGJRII/eoNt4AgwCScgUG5KUgeRkvAaCZUUZGFHLVtssafj21sT5QoCZjH0GTGPatvfNuOvBjncA1Edjkg5IGpDtzYIW6On7/PD66DFYsLwgkN8T0rVB2hP6a4OFPsyJ4QXJ+q9n2yW1C1qbEydF7a8Qsj4xAXDmB2r7b/vakjn1VZHNI8OOBjiB0+ZBxAPwxVcs6HIFC/9eUR7+zd1B1oMU+o4RR2tSsXHXqsZmIUA2/E9fgL6elPwva9/5Tc8x8+PRmJwyZSmdOQ3qBQG+4HjtAHscP8QL0vXBfLVBACj42NLYyhKuACujbz1zWf3Z03HjdbFgW0kAAKitj9tr/lfrJS1zyh5VbSedOQWykzG5YK0Hc5FPgH54Ho8nQEOR4Ejuf8QTkvb0+o8IsEB8AkztGHG0c2ZqG565rH6ZEGBu2JYSpEmUq86Xrjz16oYG7f6BfiMtRJYAWeIxZYnp8Vht44UnPBZZoajDOL5EvCAKSsjoO0ac+Mrm+F0PXFR32eLaWNGSW9OV4s+EacyaB9t/3LV94G/kMiVlSqOhKYElQoAtOFYbgTcOYawJmXzHlgCMCtG/UwaBC/SpHSNOfE1z9FO3XTH3v+h+AZv8n6wgzW2f+6MvnX927fX2CSsecZwxJRlyiQ/IL8DxQIegfgxZzhSgIxUalg7uGHHiNy+p/IIQYGFMnMWnKZ//y1P/33lnzfiSfcKqAJAWIks8rFC00PXhROFIUlZZQrXt7Ayo5ATxgqk2S6q4eUnl107mPaBjJe+nK8jmhisX3nP+2bVfAVABX7KGhic4WpiFQIeihWxPY3pBX0E+Iyvq9QUg1aao8ZuXVH7xjgtn3kV3CvKT33ICJp//y1Pvnt+SuE9OmXFDkbOEyPKC+WB503zQ2VH6PYGsB+k1ITPk9Lex+kdJtVlSfE2jfO0dF878Cd0pCEbhVhekue1zf/TXzR+ofly17IzyxVTC84h+8dE7ZLLwecAcoagrwOboVbddMfdhulMQHO4nLAjGDX86+8qmBm2DJ0Sd7qcp1Dv6oUNRAk94QSBFekOW83k9P3qbJcVXNsd/dNsVcx+lOwWFEfhTF/A5mjLl6+/c+VbFsNlqKLJhylLWc04JPBEGCUXHKkJ6h4wjjdYEmWcHc++S0WOmrR2oKnt926dnLZvsb7WdjuS2niAQNfGIff8NC87UEupu1bJVwP36NhqeAMdDPgECo6EogSk6EoL6Q9FsARox09bqyuTXnrms/lwhwOKQ34KCQNTWx63rPjV/6QHIgxHbseAeYJ1yTJmTFS0cK2ba6NStnu9/vPF8sROmeAgRFpHlLRXJH3567vzdKVuL2M4wac/nAYOGorTXo9+zoL0g/T4L/8btUayYaRuduiX/bvXcBa3NiRP+TsH4yG9FQUGc+YHao1+7qPHPD1tIZ0zHe3iXwCs/8NppJGf04b2kOJ+uDXprQACAI9GhqNGpW9rXz6u/XBxHKj5ChBPAZy+cvX5FS/yeMsMKlDENShDPR+MPRXN6Qd9mbcoL6jHT1m5clPjCrefWbvB3CIpDDqsIxsuN/7qtbfCE1WrKks3LmAYNRQFXhMTrBREk72lqkNxvW2ImaJyM0/NGzLLU9+Pam3+4smmpSMRMDPktKRgzX/nMKecdtqD0Go6BIiRqgoadPPznBTM2a5P/MuuEVsyy0HnCPvbUJxvPEwKcOIQIJ5DW5sTQ313etBDus0zHlE3k1QbzQZ4jQ/DXBgFPkNnC82N0nrDV/7ig7k8W18ZEImYCESKcYC5dOnPvipb4P7173NRArQ+DhKJ+xrpZmwgw7QnhqxUSIWauB/VDSUO7cVHiC5cunfkuuUcwMXD/NygoLiu/t7VtYNhurY7JNuB+G1Q+EbLWguQ9EPw5MsCo6NI7ZHyZUADp98OKYsRMWx2OyG9u+vx8sQ6cBNgWFBSdW1ef8tHqmKxE7MLXh4UkY3JBPGHGs2Qy14NWzLQxHJFT93yi4QIhwMlhfFYVBGZ5S8XxlefUndeRtOIAjHxekAWdmOGJkndsKePxhQS/J3Qko1O31CvPmPHny1sqjmVeKJgo2FYUTAifvXD27z/erN0fsR0VeeqHvIQMT3h+8h1bShfo/SGpIxkAtPLa+K4bzqh6NuMGwYSS36KConLVZc1f6TUcRbVsBQWGpX5or5gXL+TMOLI06gXJ35F6+GM1YmP2JCNEOMm0Nif06z5S/2cDw/zTFjz8XpDnEekN2+ldMnQpgnhBXxj6F0trP7W8pWIg4zrBhMO2pGBC+eyFszdY1bFuuFnSLCGyNmsHhd6axqwNEgG6GAC0ec2Vb95wRtVGf4dgchibpQXj5l+umHPGwf4RRbVsZkiaK9zM1cckU3Qu7prQgiOhU7eMO5dVimzoFCFEOEUsb6novWxx4rtwv6I7Z5IGCFYbpL9tifaKWTiSDUC9cVHiyyIbOnWwrSmYFG7409m3ATC80/gWkFmgLxSyFiRZ0XSB3mI4ODcZI0Nyeq88r/5ndLdg8ijc0oKi0dyUsFeeU/fnABRQa8NCQ066NuhIvi94AVWgd3/anbqlrF428xpxSn5qESKcYi5bXr+xr0w95veGueB5yKzCvOw+QS1rv6iXDQWg1lbFdny2tfK36QsEUwLbooJJoyYecb6xou7sgWFbGeF8PTdPeHmR3JCU/OenU7dw+wcrLhPJmKlnjNYVFJNLl87cc9rCyvVRdycNU4i5IJu1CXRCJqM04XnBVbNj/3bp0pmdGRcKpgQhwhJh1Tl1Nw2lzKxdNEG8oCONnh30nxskCRmqVigDMFadU7cm3SiYUvJbWDApnL+w8tBpCyvXRW1HA8MbBk3U0I83THtBF8OQZWVpTeTe8xdWipJEiSBEWELc9JH6aw72j9DNOaFD0Zw4ktypW/qXLmn6B7pLMHUUYkLBBNPanEglGsregmsXI8heUf/6jz4xkU7IuGUJQ7VtZekM9bnFtbGS+PIagQvbsoIp47bLmi7f6sgZa8OgoSgXd3uabMiy9c0LG66luwVTixBhiXH+wsr3Vs2O/QrudrastaEf+sREDmwAytKayEPLWyr66E7B1CJEWIJcfe7M636bHH1vyjJz7UcX6P2habpI75Yl5E7dsq4+d+bN6QsEJQPDtIKpZnlLxeCH6iI9EdvdRWPKQCRHREq2q9EFeS8ragBQaqti+xc1lg1kXiAoBYQIS5RvLa9ZDnddaBMB+r2h/7V/szbg84IA8YLG7R+suFTsjilNhAhLlEuXztynR+QU8YZApjckBXp6dwzBE6Wl2rYyX1MOL18yYw99jaA0ECIsYW44vWolXAFmJWj8x5bSQpSczLUgYBuyjIvnld0hvGDpIkRYwpx9Ru0LXrki48tkyLElQjoU9Y4pES8IR1IB9F55Xv295FpB6SFEWMIsro0Zq2bHNkVsO33ekBZgDmwAWFoTWb+4NlbYNhzBpCJEWOJc8scVn/e/92/WZuE7M4hO3cIlf1zxz/Q1gtJCiLDEWb5kxsGtjnwMbkia3kXDqg2mcSQL7vU9y5fM6KR6BSWGEGGJUxOP2DcuStzhvTX84mPWBl0MALhxUeIHNfFcFUZBKcC0oKC0uGBJ1T0pVYEpQ6E3bPvxHVtSAeiXtFavzbhAUJIIEYaA05vi/XVlcm/EdkPSrBDUX5rwaoN1ZfKeRY1lx/2XCUoTIcIQUBOP2GfVx34JAJLj2N7P0WNL/kfcu88SxVn1sV+L2mA4ECIMCZe0Vq/ZyXkWm2q7X/zpffWZvGfEsS5prf4RfZ2gNBEiDAmLGssG5pfJh0BlSQFfsd5tV+Zryrtis3Z4ECIMCTXxiHNxc/zuiA1IjmP4T9D7HuxrAMDF88p+KULR8CBEGCIuaa2+b6fFOdY0mhU1Lmmtvp3qFZQwQoQhoroqOuS9TO8lJetBeFlRAIcXNZYNkn5B6SNEGCIW18aGV82OPW3Ko99d4VsPkr2ie0WBPlwIEYaMZbO0u9vdg02jx5vcvaLWnhEHzS1Vv0i3C0KBEGHIOHNh5YvzNQXwH29y64TqfE0xLpnj1hMF4UGIMGQ01WmpujK5U/WduIf7XYNKXZm8t6lOI+tGQUgQIgwZNfGIc1Z9bLO3FiRrP1u1bZxVH3tRlCbChxBhCFmQUNZ16hZU27b868GaxvLn6WsFpY8QYQhZeErF80BGZlQBgHNmqhtJgyA8CBGGEK8OeAzeU7q99WHPosayY5lXCsKAEGEIqVAlZ1ZC7VdtO32CYlZC7a9Q3RMUgnAhRBhCVFVxPlwpv+o9T0Y3ZBkfrpRfUlVFJGVCiBBhSFlxZt0dANB5wnV+K86s+0HGBYLQIEQYUhqi6PBeagCMhigO+/sF4UGIMKQ01MQGITnuU9gkp6ehJnaCvkYQDoQIQ0pDmWLWacpuAKjTlPaGMkU84DekCBGGlJp4xJlfJh8AgPll8m6xUya8CBGGmJoKtcP7uY/uE4QHIcIQsyChPAMANY3lJEkjCCFChCGmtkptB4BZichuuk8QHoQIQ0xNjTYAAM1l0ntUlyBECBGGmOqq6PDhIRvVVVGd7hOEByHCENNQppgAjno/BSFFiDDcOI3l8gDdKAgXQoQhR2lICBuGHGHAEBN1HPv6ajxVE49wvqVCEAaECENMolx1ahrLRWY05Px/TgmZBgjc+d8AAAAASUVORK5CYII="/>
+</defs>
+</svg>
diff --git a/frontend/providers/aiproxy/ui/svg/icons/modelist/huggingface.svg b/frontend/providers/aiproxy/ui/svg/icons/modelist/huggingface.svg
new file mode 100644
index 000000000000..43c5d3c0c97a
--- /dev/null
+++ b/frontend/providers/aiproxy/ui/svg/icons/modelist/huggingface.svg
@@ -0,0 +1,37 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="95" height="88" fill="none">
+	<path fill="#FFD21E" d="M47.21 76.5a34.75 34.75 0 1 0 0-69.5 34.75 34.75 0 0 0 0 69.5Z" />
+	<path
+		fill="#FF9D0B"
+		d="M81.96 41.75a34.75 34.75 0 1 0-69.5 0 34.75 34.75 0 0 0 69.5 0Zm-73.5 0a38.75 38.75 0 1 1 77.5 0 38.75 38.75 0 0 1-77.5 0Z"
+	/>
+	<path
+		fill="#3A3B45"
+		d="M58.5 32.3c1.28.44 1.78 3.06 3.07 2.38a5 5 0 1 0-6.76-2.07c.61 1.15 2.55-.72 3.7-.32ZM34.95 32.3c-1.28.44-1.79 3.06-3.07 2.38a5 5 0 1 1 6.76-2.07c-.61 1.15-2.56-.72-3.7-.32Z"
+	/>
+	<path
+		fill="#FF323D"
+		d="M46.96 56.29c9.83 0 13-8.76 13-13.26 0-2.34-1.57-1.6-4.09-.36-2.33 1.15-5.46 2.74-8.9 2.74-7.19 0-13-6.88-13-2.38s3.16 13.26 13 13.26Z"
+	/>
+	<path
+		fill="#3A3B45"
+		fill-rule="evenodd"
+		d="M39.43 54a8.7 8.7 0 0 1 5.3-4.49c.4-.12.81.57 1.24 1.28.4.68.82 1.37 1.24 1.37.45 0 .9-.68 1.33-1.35.45-.7.89-1.38 1.32-1.25a8.61 8.61 0 0 1 5 4.17c3.73-2.94 5.1-7.74 5.1-10.7 0-2.34-1.57-1.6-4.09-.36l-.14.07c-2.31 1.15-5.39 2.67-8.77 2.67s-6.45-1.52-8.77-2.67c-2.6-1.29-4.23-2.1-4.23.29 0 3.05 1.46 8.06 5.47 10.97Z"
+		clip-rule="evenodd"
+	/>
+	<path
+		fill="#FF9D0B"
+		d="M70.71 37a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5ZM24.21 37a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5ZM17.52 48c-1.62 0-3.06.66-4.07 1.87a5.97 5.97 0 0 0-1.33 3.76 7.1 7.1 0 0 0-1.94-.3c-1.55 0-2.95.59-3.94 1.66a5.8 5.8 0 0 0-.8 7 5.3 5.3 0 0 0-1.79 2.82c-.24.9-.48 2.8.8 4.74a5.22 5.22 0 0 0-.37 5.02c1.02 2.32 3.57 4.14 8.52 6.1 3.07 1.22 5.89 2 5.91 2.01a44.33 44.33 0 0 0 10.93 1.6c5.86 0 10.05-1.8 12.46-5.34 3.88-5.69 3.33-10.9-1.7-15.92-2.77-2.78-4.62-6.87-5-7.77-.78-2.66-2.84-5.62-6.25-5.62a5.7 5.7 0 0 0-4.6 2.46c-1-1.26-1.98-2.25-2.86-2.82A7.4 7.4 0 0 0 17.52 48Zm0 4c.51 0 1.14.22 1.82.65 2.14 1.36 6.25 8.43 7.76 11.18.5.92 1.37 1.31 2.14 1.31 1.55 0 2.75-1.53.15-3.48-3.92-2.93-2.55-7.72-.68-8.01.08-.02.17-.02.24-.02 1.7 0 2.45 2.93 2.45 2.93s2.2 5.52 5.98 9.3c3.77 3.77 3.97 6.8 1.22 10.83-1.88 2.75-5.47 3.58-9.16 3.58-3.81 0-7.73-.9-9.92-1.46-.11-.03-13.45-3.8-11.76-7 .28-.54.75-.76 1.34-.76 2.38 0 6.7 3.54 8.57 3.54.41 0 .7-.17.83-.6.79-2.85-12.06-4.05-10.98-8.17.2-.73.71-1.02 1.44-1.02 3.14 0 10.2 5.53 11.68 5.53.11 0 .2-.03.24-.1.74-1.2.33-2.04-4.9-5.2-5.21-3.16-8.88-5.06-6.8-7.33.24-.26.58-.38 1-.38 3.17 0 10.66 6.82 10.66 6.82s2.02 2.1 3.25 2.1c.28 0 .52-.1.68-.38.86-1.46-8.06-8.22-8.56-11.01-.34-1.9.24-2.85 1.31-2.85Z"
+	/>
+	<path
+		fill="#FFD21E"
+		d="M38.6 76.69c2.75-4.04 2.55-7.07-1.22-10.84-3.78-3.77-5.98-9.3-5.98-9.3s-.82-3.2-2.69-2.9c-1.87.3-3.24 5.08.68 8.01 3.91 2.93-.78 4.92-2.29 2.17-1.5-2.75-5.62-9.82-7.76-11.18-2.13-1.35-3.63-.6-3.13 2.2.5 2.79 9.43 9.55 8.56 11-.87 1.47-3.93-1.71-3.93-1.71s-9.57-8.71-11.66-6.44c-2.08 2.27 1.59 4.17 6.8 7.33 5.23 3.16 5.64 4 4.9 5.2-.75 1.2-12.28-8.53-13.36-4.4-1.08 4.11 11.77 5.3 10.98 8.15-.8 2.85-9.06-5.38-10.74-2.18-1.7 3.21 11.65 6.98 11.76 7.01 4.3 1.12 15.25 3.49 19.08-2.12Z"
+	/>
+	<path
+		fill="#FF9D0B"
+		d="M77.4 48c1.62 0 3.07.66 4.07 1.87a5.97 5.97 0 0 1 1.33 3.76 7.1 7.1 0 0 1 1.95-.3c1.55 0 2.95.59 3.94 1.66a5.8 5.8 0 0 1 .8 7 5.3 5.3 0 0 1 1.78 2.82c.24.9.48 2.8-.8 4.74a5.22 5.22 0 0 1 .37 5.02c-1.02 2.32-3.57 4.14-8.51 6.1-3.08 1.22-5.9 2-5.92 2.01a44.33 44.33 0 0 1-10.93 1.6c-5.86 0-10.05-1.8-12.46-5.34-3.88-5.69-3.33-10.9 1.7-15.92 2.78-2.78 4.63-6.87 5.01-7.77.78-2.66 2.83-5.62 6.24-5.62a5.7 5.7 0 0 1 4.6 2.46c1-1.26 1.98-2.25 2.87-2.82A7.4 7.4 0 0 1 77.4 48Zm0 4c-.51 0-1.13.22-1.82.65-2.13 1.36-6.25 8.43-7.76 11.18a2.43 2.43 0 0 1-2.14 1.31c-1.54 0-2.75-1.53-.14-3.48 3.91-2.93 2.54-7.72.67-8.01a1.54 1.54 0 0 0-.24-.02c-1.7 0-2.45 2.93-2.45 2.93s-2.2 5.52-5.97 9.3c-3.78 3.77-3.98 6.8-1.22 10.83 1.87 2.75 5.47 3.58 9.15 3.58 3.82 0 7.73-.9 9.93-1.46.1-.03 13.45-3.8 11.76-7-.29-.54-.75-.76-1.34-.76-2.38 0-6.71 3.54-8.57 3.54-.42 0-.71-.17-.83-.6-.8-2.85 12.05-4.05 10.97-8.17-.19-.73-.7-1.02-1.44-1.02-3.14 0-10.2 5.53-11.68 5.53-.1 0-.19-.03-.23-.1-.74-1.2-.34-2.04 4.88-5.2 5.23-3.16 8.9-5.06 6.8-7.33-.23-.26-.57-.38-.98-.38-3.18 0-10.67 6.82-10.67 6.82s-2.02 2.1-3.24 2.1a.74.74 0 0 1-.68-.38c-.87-1.46 8.05-8.22 8.55-11.01.34-1.9-.24-2.85-1.31-2.85Z"
+	/>
+	<path
+		fill="#FFD21E"
+		d="M56.33 76.69c-2.75-4.04-2.56-7.07 1.22-10.84 3.77-3.77 5.97-9.3 5.97-9.3s.82-3.2 2.7-2.9c1.86.3 3.23 5.08-.68 8.01-3.92 2.93.78 4.92 2.28 2.17 1.51-2.75 5.63-9.82 7.76-11.18 2.13-1.35 3.64-.6 3.13 2.2-.5 2.79-9.42 9.55-8.55 11 .86 1.47 3.92-1.71 3.92-1.71s9.58-8.71 11.66-6.44c2.08 2.27-1.58 4.17-6.8 7.33-5.23 3.16-5.63 4-4.9 5.2.75 1.2 12.28-8.53 13.36-4.4 1.08 4.11-11.76 5.3-10.97 8.15.8 2.85 9.05-5.38 10.74-2.18 1.69 3.21-11.65 6.98-11.76 7.01-4.31 1.12-15.26 3.49-19.08-2.12Z"
+	/>
+</svg>
diff --git a/frontend/providers/aiproxy/ui/svg/icons/modelist/hunyuan.svg b/frontend/providers/aiproxy/ui/svg/icons/modelist/hunyuan.svg
new file mode 100644
index 000000000000..d7e6fc655219
--- /dev/null
+++ b/frontend/providers/aiproxy/ui/svg/icons/modelist/hunyuan.svg
@@ -0,0 +1,13 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_19_417)">
+<path d="M8.69132 19.7708L8.43646 10.1106C7.92262 9.92227 9.99843 7.48009 10.8505 7.6956C13.3489 7.06769 16.0648 3.09118 11.1064 0.142151C-3.89673 0.142151 -2.25275 18.589 8.69132 19.7708Z" fill="#B3DDF2"/>
+<path d="M8.64384 19.7663C4.17343 18.7386 -0.201612 12.4833 5.14972 6.86892C6.37883 5.78554 3.9237 2.58709 1.91253 4.3511C-3.43099 11.7411 3.5968 19.7863 8.64384 19.7663Z" fill="#0055E9"/>
+<path d="M7.92307 10.4705C7.79974 10.5592 7.92307 10.4191 7.92307 10.4705V10.4705ZM7.92307 10.4705V11.2412C7.92307 11.344 7.77919 12.0274 7.71753 12.3203L8.48829 13.9646C8.48829 13.9646 9.00213 14.1187 9.05351 14.1701C9.1049 14.2215 9.35668 14.2575 9.46459 14.2729L10.5436 14.9409L12.3421 14.684L14.6544 13.9646L16.8125 12.1148L17.4805 10.9843L18.0457 8.1068L17.9429 6.77082V5.58898L16.7611 3.43086L16.1445 2.6601L15.0654 1.6838L14.1405 1.11858L13.8836 0.964424L13.5753 0.861657L13.0101 0.656121L11.2116 0.193665C15.1168 1.47826 15.4251 5.43483 14.2947 7.33604C13.1642 9.23725 10.715 10.3348 8.33414 10.1108L7.92307 10.4705Z" fill="#00BCFF"/>
+<path d="M8.95026 19.7715C12.4444 20.6959 20.0974 17.3601 19.9978 10.2141C20.2549 7.02775 17.2808 0.68943 12.4444 0.451111C17.8362 1.54919 19.8961 11.4535 12.9079 13.9137C9.41293 14.7872 8.12863 12.1153 8.38607 10.2141C4.79042 10.3958 2.88305 18.1057 8.95026 19.7715Z" fill="#0055DF"/>
+</g>
+<defs>
+<clipPath id="clip0_19_417">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/frontend/providers/aiproxy/ui/svg/icons/modelist/lingyiwanwu.svg b/frontend/providers/aiproxy/ui/svg/icons/modelist/lingyiwanwu.svg
new file mode 100644
index 000000000000..2b8ad4b4c3a9
--- /dev/null
+++ b/frontend/providers/aiproxy/ui/svg/icons/modelist/lingyiwanwu.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <g clip-path="url(#clip0_19_444)">
+    <path d="M10 20C15.5229 20 20 15.5229 20 10C20 4.47712 15.5229 0 10 0C4.47712 0 0 4.47712 0 10C0 15.5229 4.47712 20 10 20Z" fill="#003425"/>
+    <path d="M15.0705 12.0408C15.0705 11.8535 14.9961 11.6738 14.8636 11.5413C14.7311 11.4088 14.5515 11.3344 14.3641 11.3344C14.1768 11.3344 13.9971 11.4088 13.8646 11.5413C13.7321 11.6738 13.6577 11.8535 13.6577 12.0408V15.6829C13.6577 15.8702 13.7321 16.0499 13.8646 16.1824C13.9971 16.3149 14.1768 16.3893 14.3641 16.3893C14.5515 16.3893 14.7311 16.3149 14.8636 16.1824C14.9961 16.0499 15.0705 15.8702 15.0705 15.6829V12.0408Z" fill="white"/>
+    <path d="M14.067 4.44512C13.9963 4.38501 13.9145 4.33941 13.8262 4.31092C13.7379 4.28243 13.6448 4.27162 13.5524 4.27909C13.4599 4.28656 13.3698 4.31218 13.2872 4.35448C13.2047 4.39677 13.1312 4.45492 13.0711 4.5256L9.12344 9.16752C9.02533 9.28249 8.96687 9.426 8.95672 9.5768C8.95112 9.61248 8.94824 9.6488 8.94824 9.68608V15.6202C8.94824 15.8075 9.02267 15.9872 9.15514 16.1197C9.28762 16.2521 9.46729 16.3266 9.65464 16.3266C9.84199 16.3266 10.0217 16.2521 10.1541 16.1197C10.2866 15.9872 10.361 15.8075 10.361 15.6202V9.8928L14.1474 5.44096C14.2076 5.37029 14.2532 5.28847 14.2816 5.20018C14.3101 5.11189 14.3209 5.01885 14.3135 4.92637C14.306 4.8339 14.2804 4.7438 14.2381 4.66123C14.1958 4.57865 14.1376 4.50522 14.067 4.44512Z" fill="white"/>
+    <path d="M5.33941 4.12558C5.2806 4.05384 5.20823 3.99438 5.12644 3.9506C5.04465 3.90683 4.95504 3.87959 4.86272 3.87045C4.77041 3.8613 4.67719 3.87043 4.58841 3.89731C4.49962 3.92419 4.41699 3.96829 4.34525 4.0271C4.2735 4.08591 4.21405 4.15828 4.17027 4.24007C4.12649 4.32186 4.09926 4.41147 4.09011 4.50379C4.08097 4.5961 4.09009 4.68932 4.11697 4.7781C4.14385 4.86689 4.18796 4.94952 4.24677 5.02126L7.04389 8.43326C7.16266 8.57818 7.33414 8.66997 7.5206 8.68846C7.70705 8.70694 7.89321 8.6506 8.03813 8.53182C8.18304 8.41305 8.27484 8.24157 8.29332 8.05511C8.31181 7.86866 8.25546 7.6825 8.13669 7.53758L5.33925 4.12558H5.33941Z" fill="white"/>
+    <path d="M15.3376 10.1726C15.5666 10.1726 15.7862 10.0817 15.9481 9.91972C16.11 9.7578 16.201 9.53818 16.201 9.30918C16.201 9.08018 16.11 8.86056 15.9481 8.69864C15.7862 8.53671 15.5666 8.44574 15.3376 8.44574C15.1086 8.44574 14.8889 8.53671 14.727 8.69864C14.5651 8.86056 14.4741 9.08018 14.4741 9.30918C14.4741 9.53818 14.5651 9.7578 14.727 9.91972C14.8889 10.0817 15.1086 10.1726 15.3376 10.1726Z" fill="#00FF25"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_19_444">
+      <rect width="20" height="20" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/frontend/providers/aiproxy/ui/svg/icons/modelist/meta.svg b/frontend/providers/aiproxy/ui/svg/icons/modelist/meta.svg
new file mode 100644
index 000000000000..9390c42cb7bb
--- /dev/null
+++ b/frontend/providers/aiproxy/ui/svg/icons/modelist/meta.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
+<path d="M0 0 C4.8846525 2.26787438 7.73212562 5.1153475 10 10 C10.75381535 15.5997712 10.77303575 20.33499991 8.375 25.5 C3.80134327 30.3143755 0.6912538 32.25156236 -6 32.5 C-12.6912538 32.25156236 -15.80134327 30.3143755 -20.375 25.5 C-22.77303575 20.33499991 -22.75381535 15.5997712 -22 10 C-17.52212837 0.3553534 -9.85292056 -1.32635469 0 0 Z M-14 10 C-15.93886856 12.52895899 -16.00575405 13.72955988 -15.9375 16.9375 C-14.7374274 20.85773716 -13.22391981 22.49250682 -10 25 C-7.10293293 26.24677006 -7.10293293 26.24677006 -4 26 C-0.87766323 24.37878668 1.29268021 22.92259103 3.4375 20.125 C4.26138749 17.01253614 3.94249038 15.07880192 3 12 C0.55358796 8.8546131 -1.18391233 7.29518065 -4.9375 5.9375 C-9.06114097 6.02165594 -10.87753996 7.37429497 -14 10 Z " fill="#40BDE8" transform="translate(22,0)"/>
+<path d="M0 0 C9.68731919 -0.62054002 9.68731919 -0.62054002 14.4375 1.625 C17.89977472 4.83393755 20.74549224 7.49186712 21.2421875 12.38671875 C21.24915804 14.6068347 21.17699699 16.78753759 21 19 C20.54625 18.52304687 20.0925 18.04609375 19.625 17.5546875 C18.08049785 15.89871334 18.08049785 15.89871334 16 15.125 C14 14 14 14 12.625 11.5625 C11.16542503 8.77374 11.16542503 8.77374 8.125 7.5625 C4.2101709 5.60508545 2.61655601 3.46308883 0 0 Z " fill="#E292DF" transform="translate(11,0)"/>
+<path d="M0 0 C2.03833424 1.2739589 4.03852126 2.61061923 6 4 C6 4.66 6 5.32 6 6 C4.38344011 6.94763856 2.73048602 7.83362216 1.0625 8.6875 C-2.60933389 10.65616565 -2.60933389 10.65616565 -4.88671875 13.94921875 C-5.20193342 16.06915228 -5.20193342 16.06915228 -5 19 C-5.66 19 -6.32 19 -7 19 C-8.98722286 15.02555429 -8.6777807 10.30919292 -8 6 C-5.92280725 3.05358198 -3.20639579 1.60319789 0 0 Z " fill="#327BE7" transform="translate(10,0)"/>
+<path d="M0 0 C1.875 0.3125 1.875 0.3125 4 1 C6 4 6 4 5.9375 6.3125 C4.65800436 9.98038749 3.29054985 12.87292005 0 15 C-4.31819333 15.66050288 -9.01824879 15.9908756 -13 14 C-13 13.34 -13 12.68 -13 12 C-12.38511719 11.90203125 -11.77023437 11.8040625 -11.13671875 11.703125 C-6.16910209 10.86160783 -6.16910209 10.86160783 -2 8.25 C-0.78539856 5.51714677 -0.33666353 2.96263909 0 0 Z " fill="#3B8DEB" transform="translate(26,15)"/>
+<path d="M0 0 C2.71875 -0.29296875 2.71875 -0.29296875 6 0 C8.34375 2.01171875 8.34375 2.01171875 10.5 4.6875 C13.78467877 8.60577163 16.95517106 11.88859312 21 15 C20.67 16.32 20.34 17.64 20 19 C19.34 18.01 18.68 17.02 18 16 C17.360625 15.71125 16.72125 15.4225 16.0625 15.125 C14 14 14 14 12.625 11.5625 C11.16542503 8.77374 11.16542503 8.77374 8.125 7.5625 C4.2101709 5.60508545 2.61655601 3.46308883 0 0 Z " fill="#A489E2" transform="translate(11,0)"/>
+<path d="M0 0 C4.21042648 2.10521324 6.64097131 4.73144504 9.47265625 8.37890625 C11.16559578 10.17576023 12.74830905 11.02668843 15 12 C15 12.33 15 12.66 15 13 C8.83142002 12.6298852 6.24224897 11.24224897 2 7 C0.24329531 4.28509275 0 3.28565953 0 0 Z " fill="#72F2D0" transform="translate(0,19)"/>
+<path d="M0 0 C0.97744926 3.04095325 1.16271218 4.99632687 0 8 C-1.35629969 10.15412304 -2.43100616 10.86824528 -4.90625 11.44140625 C-10.5125 12.24375 -10.5125 12.24375 -13 11 C-13 10.34 -13 9.68 -13 9 C-12.38511719 8.90203125 -11.77023437 8.8040625 -11.13671875 8.703125 C-6.09506893 7.87403825 -6.09506893 7.87403825 -2 5.0625 C-0.89087006 2.8881755 -0.89087006 2.8881755 0 0 Z " fill="#1789EB" transform="translate(26,18)"/>
+<path d="M0 0 C-0.66 2.31 -1.32 4.62 -2 7 C-1.34 6.67 -0.68 6.34 0 6 C-0.66 9.3 -1.32 12.6 -2 16 C-2.66 16 -3.32 16 -4 16 C-5.29004296 13.41991408 -5.20410224 11.44258426 -5.25 8.5625 C-5.27578125 7.59441406 -5.3015625 6.62632813 -5.328125 5.62890625 C-5 3 -5 3 -3.609375 1.15234375 C-2 0 -2 0 0 0 Z " fill="#2898EE" transform="translate(7,3)"/>
+<path d="M0 0 C1.32 0.33 2.64 0.66 4 1 C4.36923077 6.53846154 4.36923077 6.53846154 2.5 8.875 C1.7575 9.431875 1.7575 9.431875 1 10 C-0.1577506 6.52674819 -0.06866652 3.63932552 0 0 Z " fill="#3274E5" transform="translate(26,15)"/>
+<path d="M0 0 C-1.72862285 4.55727842 -4.81669715 5.90834857 -9 8 C-7.53356282 2.37865749 -7.53356282 2.37865749 -5.0625 0.625 C-3 0 -3 0 0 0 Z " fill="#127CE8" transform="translate(13,3)"/>
+<path d="M0 0 C1 2 1 2 0.5 4.9375 C-0.24846895 8.02952435 -0.24846895 8.02952435 1 11 C-0.65 10.67 -2.3 10.34 -4 10 C-3.34 9.67 -2.68 9.34 -2 9 C-2.04125 7.88625 -2.0825 6.7725 -2.125 5.625 C-2 2 -2 2 0 0 Z " fill="#3AB1F2" transform="translate(7,10)"/>
+<path d="M0 0 C-0.33 0.99 -0.66 1.98 -1 3 C-3.31 2.67 -5.62 2.34 -8 2 C-8 1.34 -8 0.68 -8 0 C-2.25 -1.125 -2.25 -1.125 0 0 Z " fill="#1DA7F0" transform="translate(21,27)"/>
+<path d="M0 0 C2.25 0.125 2.25 0.125 5 1 C7.3125 4.0625 7.3125 4.0625 9 7 C6.62051228 6.82374165 5.29774151 6.30280227 3.62109375 4.59765625 C2.37884514 3.09350908 1.18623944 1.54870149 0 0 Z " fill="#7882E4" transform="translate(11,0)"/>
+<path d="M0 0 C-1.1875 1.5 -1.1875 1.5 -3 3 C-5.6875 3.1875 -5.6875 3.1875 -8 3 C-8.33 2.34 -8.66 1.68 -9 1 C-5.92677456 0.08941469 -3.19902639 -0.08886184 0 0 Z " fill="#35ABF2" transform="translate(25,29)"/>
+<path d="M0 0 C1.5 1.125 1.5 1.125 3 3 C3.1875 6.1875 3.1875 6.1875 3 9 C2.34 9 1.68 9 1 9 C-0.4783226 6.04335481 -0.06032783 3.25770263 0 0 Z " fill="#1DA8F1" transform="translate(2,10)"/>
+<path d="M0 0 C2.97 0.495 2.97 0.495 6 1 C6.33 2.65 6.66 4.3 7 6 C6.5875 5.54625 6.175 5.0925 5.75 4.625 C3.93591905 2.94049626 2.24714373 2.00734029 0 1 C0 0.67 0 0.34 0 0 Z " fill="#9785E2" transform="translate(25,13)"/>
+<path d="M0 0 C0.33 0.66 0.66 1.32 1 2 C-5.75 6 -5.75 6 -8 6 C-7.67 5.01 -7.34 4.02 -7 3 C-3.4375 1.3125 -3.4375 1.3125 0 0 Z " fill="#3A8CEA" transform="translate(15,4)"/>
+</svg>
diff --git a/frontend/providers/aiproxy/ui/svg/icons/modelist/microsoft.svg b/frontend/providers/aiproxy/ui/svg/icons/modelist/microsoft.svg
new file mode 100644
index 000000000000..76115f3cbb1d
--- /dev/null
+++ b/frontend/providers/aiproxy/ui/svg/icons/modelist/microsoft.svg
@@ -0,0 +1,39 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" fill="none">
+  <path fill="url(#a)" d="M85.855 18.313A11.574 11.574 0 0 0 74.75 10h-3.379a11.574 11.574 0 0 0-11.384 9.485L54.2 51.018l1.436-4.913a11.574 11.574 0 0 1 11.11-8.327H86.38l8.235 3.207 7.937-3.207h-2.316a11.574 11.574 0 0 1-11.105-8.313z" />
+  <path fill="url(#b)" d="M36.326 101.64A11.574 11.574 0 0 0 47.445 110h7.176c6.276 0 11.409-5.002 11.57-11.277l.781-30.405-1.634 5.583a11.574 11.574 0 0 1-11.108 8.321H34.432l-7.058-3.829-7.641 3.83h2.278c5.154 0 9.687 3.408 11.119 8.36z" />
+  <path fill="url(#c)" d="M74.248 10H34.15c-11.457 0-18.33 15.142-22.913 30.283-5.43 17.939-12.534 41.93 8.02 41.93H36.57c5.174 0 9.716-3.421 11.138-8.396 3.01-10.531 8.286-28.903 12.43-42.889 2.105-7.107 3.86-13.211 6.551-17.012C68.2 11.785 70.715 10 74.248 10" />
+  <path fill="url(#d)" d="M74.248 10H34.15c-11.457 0-18.33 15.142-22.913 30.283-5.43 17.939-12.534 41.93 8.02 41.93H36.57c5.174 0 9.716-3.421 11.138-8.396 3.01-10.531 8.286-28.903 12.43-42.889 2.105-7.107 3.86-13.211 6.551-17.012C68.2 11.785 70.715 10 74.248 10" />
+  <path fill="url(#e)" d="M46.744 110h40.099c11.456 0 18.33-15.144 22.913-30.288 5.429-17.942 12.533-41.937-8.02-41.937H84.422a11.576 11.576 0 0 0-11.138 8.396c-3.01 10.533-8.286 28.909-12.43 42.897-2.106 7.109-3.86 13.214-6.552 17.016-1.51 2.131-4.025 3.916-7.558 3.916" />
+  <path fill="url(#f)" d="M46.744 110h40.099c11.456 0 18.33-15.144 22.913-30.288 5.429-17.942 12.533-41.937-8.02-41.937H84.422a11.576 11.576 0 0 0-11.138 8.396c-3.01 10.533-8.286 28.909-12.43 42.897-2.106 7.109-3.86 13.214-6.552 17.016-1.51 2.131-4.025 3.916-7.558 3.916" />
+  <defs>
+    <radialGradient id="a" cx="0" cy="0" r="1" gradientTransform="matrix(-27.40125 -33.47302 31.47539 -25.76598 95.512 51.286)" gradientUnits="userSpaceOnUse">
+      <stop offset=".096" stop-color="#00AEFF" />
+      <stop offset=".773" stop-color="#2253CE" />
+      <stop offset="1" stop-color="#0736C4" />
+    </radialGradient>
+    <radialGradient id="b" cx="0" cy="0" r="1" gradientTransform="rotate(51.84 -70.254 70.14)scale(39.9779 38.7796)" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FFB657" />
+      <stop offset=".634" stop-color="#FF5F3D" />
+      <stop offset=".923" stop-color="#C02B3C" />
+    </radialGradient>
+    <radialGradient id="e" cx="0" cy="0" r="1" gradientTransform="matrix(-31.67773 90.58917 -108.5232 -37.949 103.796 30.703)" gradientUnits="userSpaceOnUse">
+      <stop offset=".066" stop-color="#8C48FF" />
+      <stop offset=".5" stop-color="#F2598A" />
+      <stop offset=".896" stop-color="#FFB152" />
+    </radialGradient>
+    <linearGradient id="c" x1="31.75" x2="37.471" y1="18.75" y2="84.938" gradientUnits="userSpaceOnUse">
+      <stop offset=".156" stop-color="#0D91E1" />
+      <stop offset=".487" stop-color="#52B471" />
+      <stop offset=".652" stop-color="#98BD42" />
+      <stop offset=".937" stop-color="#FFC800" />
+    </linearGradient>
+    <linearGradient id="d" x1="36.75" x2="39.874" y1="10" y2="82.213" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#3DCBFF" />
+      <stop offset=".247" stop-color="#0588F7" stop-opacity="0" />
+    </linearGradient>
+    <linearGradient id="f" x1="106.964" x2="106.923" y1="33.365" y2="53.037" gradientUnits="userSpaceOnUse">
+      <stop offset=".058" stop-color="#F8ADFA" />
+      <stop offset=".708" stop-color="#A86EDD" stop-opacity="0" />
+    </linearGradient>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/frontend/providers/aiproxy/ui/svg/icons/modelist/mistral.svg b/frontend/providers/aiproxy/ui/svg/icons/modelist/mistral.svg
new file mode 100644
index 000000000000..1680f52cb89a
--- /dev/null
+++ b/frontend/providers/aiproxy/ui/svg/icons/modelist/mistral.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <path d="M3.84009 3.39999H6.48009V6.03999H3.84009V3.39999ZM14.4001 3.39999H17.0401V6.03999H14.4001V3.39999Z" fill="#FECE00"/>
+  <path d="M3.84009 6.04001H6.48009V8.68001H3.84009V6.04001Z" fill="#FFA301"/>
+  <path d="M3.84009 11.32H6.48009V13.96H3.84009V11.32ZM9.12009 11.32H11.7601V13.96H9.12009V11.32ZM14.4001 11.32H17.0401V13.96H14.4001V11.32Z" fill="#FE4900"/>
+  <path d="M11.76 6.04001H14.4V8.68001H11.76V6.04001Z" fill="#FFA301"/>
+  <path d="M3.84009 8.67999H6.48009V11.32H3.84009V8.67999Z" fill="#FF6F00"/>
+  <path d="M3.84009 13.96H6.48009V16.6H3.84009V13.96ZM14.4001 13.96H17.0401V16.6H14.4001V13.96Z" fill="#FE0107"/>
+  <path d="M11.76 8.67999H14.4V11.32H11.76V8.67999Z" fill="#FF6F00"/>
+  <path d="M6.47998 6.04001H9.11998V8.68001H6.47998V6.04001ZM14.4 6.04001H17.04V8.68001H14.4V6.04001Z" fill="#FFA301"/>
+  <path d="M6.47998 8.67999H9.11998V11.32H6.47998V8.67999ZM14.4 8.67999H17.04V11.32H14.4V8.67999ZM9.11998 8.67999H11.76V11.32H9.11998V8.67999Z" fill="#FF6F00"/>
+  <path d="M2.95996 3.39999H3.83996V16.6H2.95996V3.39999ZM13.52 3.39999H14.4V6.03999H13.52V3.39999ZM10.88 6.03999H11.76V8.67999H10.88V6.03999ZM8.23996 11.32H9.11996V13.96H8.23996V11.32ZM13.52 11.32H14.4V16.6H13.52V11.32Z" fill="#191D1D"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/providers/aiproxy/ui/svg/icons/modelist/netease.svg b/frontend/providers/aiproxy/ui/svg/icons/modelist/netease.svg
new file mode 100644
index 000000000000..b24bd07f50a8
--- /dev/null
+++ b/frontend/providers/aiproxy/ui/svg/icons/modelist/netease.svg
@@ -0,0 +1 @@
+<svg t="1733464388763" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17141" width="200" height="200"><path d="M341.79584 699.65824c-29.97248 9.87648-19.968 29.62432-19.968 29.62432 19.968 79.02208 259.6352-108.64128 269.63456-138.29632 9.96864-29.6192-19.96288-19.74784-19.96288-19.74784-139.75552 118.48704-229.6064 128.41984-229.70368 128.41984zM512 1019.97056C231.44448 1019.97056 4.03456 792.56064 4.03456 512 4.03456 231.44448 231.44448 4.03456 512 4.03456c280.56064 0 507.97056 227.40992 507.97056 507.96544 0 280.56064-227.40992 507.97056-507.97056 507.97056zM490.3168 474.69568c40.73472-2.19136 81.18272-2.22208 81.18272-2.22208 89.87648 9.87648 89.87648-59.27424 89.87648-59.27424V363.8272c0-39.49056-29.97248-88.89344-119.81824-88.89344-89.87648 0-109.84448 9.87136-109.84448 9.87136-39.94112 9.87648-29.97248 29.62432-29.97248 29.62432 9.99936 19.74784 39.936 9.87136 39.936 9.87136 59.90912-19.74272 119.81824-9.87136 119.81824-9.87136 59.904 0 59.904 49.39776 59.904 49.39776v49.37216c0 29.62432-29.96736 29.62432-29.96736 29.62432H421.67808c-29.97248 0-29.97248-29.62432-29.97248-29.62432V344.05376c0-19.74784-19.968-19.74784-19.968-19.74784-19.968 0-19.968 19.74784-19.968 19.74784V432.9472c9.99936 49.39776 69.90848 49.39776 69.90848 49.39776 6.7584-1.68448 15.58528-3.08224 25.5232-4.224-12.63616 14.7968-52.63872 53.59104-125.37344 53.59104 0 0-29.97248 0-29.97248 19.74272 0 0 0 19.74784 29.97248 19.74784 29.65504 0.07168 127.78496-19.38944 168.48896-96.50688z m-136.51456 220.99456l-4.15744 1.37216c1.64352-0.512 3.13856-1.01888 4.15744-1.37216z m187.7248-213.30944s-19.968 0-19.968 19.74272c0 0 0.06656 4.60288 2.28352 9.3696-0.768 0.13312-1.53088 0.3072-2.28352 0.50688-129.81248 118.51264-199.72608 108.6464-199.72608 108.6464-19.968 0-19.968 19.74272-19.968 19.74272 9.99936 79.02208 229.66272-79.02208 239.6672-108.64128a30.06976 30.06976 0 0 0 1.81248-9.84576c10.73152 0.28672 71.68512 3.52256 108.04224 39.46496 39.936 39.49568-9.99936 128.38912-79.87712 138.2912 0 0-29.97248 0-39.94624-19.74272 0 0-19.968-9.87648-19.968 9.87648 0 0 0 59.27424 49.93536 59.27424 49.94048 0 139.82208-39.5008 149.79072-148.16768-0.03584-0.00512-0.03584-118.51776-169.79456-118.51776z m9.96864-88.89344s29.97248 0 29.97248-19.74784c0 0 0-19.74784-29.97248-19.74784H451.64544s-29.97248 0-29.97248 19.74784c0 0 0 19.74784 29.97248 19.74784h99.85024z" fill="#F30B40" p-id="17142"></path></svg>
\ No newline at end of file
diff --git a/frontend/providers/aiproxy/ui/svg/icons/modelist/nexusflow.svg b/frontend/providers/aiproxy/ui/svg/icons/modelist/nexusflow.svg
new file mode 100644
index 000000000000..14bd9e47dfc8
--- /dev/null
+++ b/frontend/providers/aiproxy/ui/svg/icons/modelist/nexusflow.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+<path d="M0 0 C5.28 0 10.56 0 16 0 C16 5.28 16 10.56 16 16 C10.72 16 5.44 16 0 16 C0 10.72 0 5.44 0 0 Z " fill="#5FBFE0" transform="translate(0,0)"/>
+<path d="M0 0 C3.03063487 0.58929011 6.0017825 1.25044562 9 2 C9 5.63 9 9.26 9 13 C4.80825346 11.95206337 3.78407039 11.08236365 1 8 C2.20381448 10.49361571 3.45428722 12.68143083 5 15 C2.33333333 14.33333333 -0.33333333 13.66666667 -3 13 C-3 9.37 -3 5.74 -3 2 C0.48763093 3.74381547 3.03368051 5.52806709 6 8 C6 7.01 6 6.02 6 5 C5.38125 4.731875 4.7625 4.46375 4.125 4.1875 C2 3 2 3 0 0 Z " fill="#030306" transform="translate(5,0)"/>
+<path d="M0 0 C2.31 0 4.62 0 7 0 C7 5.28 7 10.56 7 16 C4.36 16 1.72 16 -1 16 C-1 15.01 -1 14.02 -1 13 C-2.43750191 11.31201173 -2.43750191 11.31201173 -4 10 C-3.67 9.01 -3.34 8.02 -3 7 C-2.236875 7.804375 -1.47375 8.60875 -0.6875 9.4375 C1.79430898 12.16799024 1.79430898 12.16799024 5 13 C5 9.37 5 5.74 5 2 C3.35 1.67 1.7 1.34 0 1 C0 0.67 0 0.34 0 0 Z " fill="#3479CF" transform="translate(9,0)"/>
+<path d="M0 0 C3.03063487 0.58929011 6.0017825 1.25044562 9 2 C9 5.63 9 9.26 9 13 C8.34 11.68 7.68 10.36 7 9 C6.34 8.67 5.68 8.34 5 8 C5.33 7.01 5.66 6.02 6 5 C5.38125 4.731875 4.7625 4.46375 4.125 4.1875 C2 3 2 3 0 0 Z " fill="#0D1D2C" transform="translate(5,0)"/>
+<path d="M0 0 C0.99 0.495 0.99 0.495 2 1 C2.33333333 2.33333333 2.66666667 3.66666667 3 5 C4.54960427 7.76233805 6.24269692 10.36404538 8 13 C5.33333333 12.33333333 2.66666667 11.66666667 0 11 C0 7.37 0 3.74 0 0 Z " fill="#080F17" transform="translate(2,2)"/>
+<path d="M0 0 C1.14926266 0.95421808 2.29430541 1.91352045 3.4375 2.875 C4.07558594 3.40867187 4.71367187 3.94234375 5.37109375 4.4921875 C7 6 7 6 8 8 C4.21479387 7.45925627 2.40822445 5.92427254 0 3 C0 2.01 0 1.02 0 0 Z " fill="#327DDB" transform="translate(5,7)"/>
+</svg>
diff --git a/frontend/providers/aiproxy/ui/svg/icons/modelist/openchat.svg b/frontend/providers/aiproxy/ui/svg/icons/modelist/openchat.svg
new file mode 100644
index 000000000000..f19c346008d2
--- /dev/null
+++ b/frontend/providers/aiproxy/ui/svg/icons/modelist/openchat.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="988" height="1002">
+<path d="M0 0 C326.04 0 652.08 0 988 0 C988 330.66 988 661.32 988 1002 C661.96 1002 335.92 1002 0 1002 C0 671.34 0 340.68 0 0 Z " fill="#000000" transform="translate(0,0)"/>
+<path d="M0 0 C1.02170632 -0.00679667 1.02170632 -0.00679667 2.06405318 -0.01373065 C4.3455564 -0.02638703 6.62682128 -0.02475351 8.90835571 -0.02310181 C10.54451301 -0.02908629 12.18066748 -0.03589165 13.81681824 -0.04345703 C18.26107246 -0.06113229 22.70524968 -0.06581305 27.14953566 -0.0670886 C30.85977417 -0.0689877 34.56999474 -0.07634535 38.28022635 -0.08343279 C47.03404564 -0.09972009 55.78782379 -0.10460143 64.54165649 -0.10317993 C73.57124022 -0.10197833 82.60058499 -0.12308304 91.63010824 -0.15466726 C99.38309617 -0.18081977 107.13600602 -0.19154766 114.88903773 -0.19026911 C119.51929473 -0.18975918 124.14933939 -0.19545938 128.77955246 -0.21662521 C133.13479427 -0.23599042 137.48962078 -0.23614397 141.84487724 -0.22159195 C143.44202341 -0.21950062 145.03919544 -0.2242241 146.63629723 -0.23631287 C148.81962373 -0.25176665 151.00151845 -0.24245838 153.18481445 -0.22705078 C154.40560385 -0.22814032 155.62639324 -0.22922985 156.88417625 -0.2303524 C163.60218248 0.7723043 167.32148075 5.14445796 171.21939087 10.26742554 C172.65307651 13.13479683 172.34414547 15.58850267 172.34536743 18.79330444 C172.34816963 19.79859192 172.34816963 19.79859192 172.35102844 20.82418823 C172.35503594 22.28214762 172.3571076 23.74011331 172.35749054 25.19807816 C172.36090717 28.30431297 172.38227714 31.4103387 172.40272141 34.51650047 C172.44070881 40.29987602 172.47201318 46.08303211 172.46987915 51.86654663 C172.46908914 55.88919897 172.49258247 59.91109066 172.53176117 63.93354416 C172.54218353 65.46199493 172.54377301 66.99053391 172.53610992 68.51900101 C172.41346577 80.32878861 172.41346577 80.32878861 178.21939087 90.26742554 C182.45324417 94.12770355 186.17435254 94.39298704 191.76699829 94.40927124 C192.4275824 94.41274567 193.0881665 94.41622009 193.76876831 94.4197998 C195.20269621 94.42714699 196.6366354 94.4324979 198.07057762 94.43609047 C200.34564221 94.44327239 202.62049317 94.45895342 204.89549255 94.47743225 C211.36386109 94.52980825 217.83211384 94.57782947 224.3006897 94.59335327 C228.25958621 94.60347616 232.21794618 94.63291114 236.17663002 94.67467308 C237.67995443 94.68692973 239.18335482 94.69211414 240.68672752 94.68987465 C257.56358286 94.67092718 257.56358286 94.67092718 264.05923462 101.08383179 C264.42146118 101.66004272 264.78368774 102.23625366 265.15689087 102.82992554 C265.53716431 103.4087146 265.91743774 103.98750366 266.30923462 104.58383179 C267.9794106 107.67329894 268.34618395 110.23491189 268.35640526 113.67473888 C268.36401707 115.03482249 268.36401707 115.03482249 268.37178266 116.42238253 C268.37228042 117.41983361 268.37277817 118.41728468 268.37329102 119.44496155 C268.37767327 120.50360391 268.38205552 121.56224627 268.38657057 122.6529687 C268.39997847 126.21805959 268.40614191 129.78312575 268.41226196 133.34823608 C268.42016133 135.89724337 268.42843018 138.44624954 268.43704224 140.99525452 C268.46101495 148.65743266 268.4761926 156.31960959 268.4891023 163.9818134 C268.4928146 166.14611611 268.4967878 168.31041817 268.50085497 170.47472024 C268.52609176 183.91603822 268.54814389 197.35735722 268.56058311 210.79869366 C268.56351279 213.91188752 268.56647446 217.02508136 268.56948853 220.13827515 C268.57023458 220.91204 268.57098063 221.68580485 268.57174928 222.48301712 C268.58440151 235.01608609 268.61762308 247.54901314 268.65929036 260.08201578 C268.70172287 272.95073155 268.72527966 285.81937469 268.73050368 298.68816024 C268.7339163 305.91298403 268.74565373 313.13758603 268.77860641 320.36234093 C268.80955751 327.15937418 268.81501643 333.95595348 268.80322266 340.75306892 C268.80300151 343.24757706 268.81134035 345.74210288 268.8288765 348.23654938 C268.85152128 351.64315704 268.84329318 355.04835676 268.82739258 358.45497131 C268.84127467 359.44126878 268.85515675 360.42756625 268.86945951 361.44375151 C268.77920558 369.29586308 266.09746731 373.62186205 261.34439087 379.64242554 C256.65546084 383.22807792 250.9978567 383.51666504 245.27774048 383.52279663 C244.29579964 383.52822731 244.29579964 383.52822731 243.29402161 383.5337677 C241.88581157 383.54061199 240.4775753 383.54317656 239.06934929 383.54182053 C236.83643297 383.54084766 234.60398801 383.55388459 232.37113953 383.57080078 C226.02754265 383.61685593 219.68399909 383.64168505 213.34024048 383.64828491 C209.44809099 383.65330861 205.55644115 383.67759267 201.66446114 383.7136116 C200.18738369 383.72338147 198.71023732 383.72575692 197.23313713 383.72043991 C195.16543192 383.71334195 193.09921168 383.7307012 191.03164673 383.75326538 C189.85807114 383.75611542 188.68449554 383.75896545 187.47535706 383.76190186 C182.83256653 384.48274489 179.90993985 386.64680414 176.56085205 389.85736084 C171.87144167 396.54446563 172.54541593 404.11235393 172.61782837 411.93148804 C172.61232018 413.45268893 172.60418836 414.97388236 172.59356689 416.49505615 C172.57077913 420.48114091 172.57486425 424.46667511 172.58737183 428.45278931 C172.60574367 434.8383621 172.59563489 441.22361521 172.56151199 447.60911179 C172.55543352 449.83056068 172.56863121 452.05131115 172.58349609 454.27270508 C172.58054691 455.6415525 172.57689152 457.01039865 172.57241821 458.37924194 C172.57838516 460.16172836 172.57838516 460.16172836 172.58447266 461.98022461 C171.99154917 467.318915 169.86669152 471.20569628 165.71939087 474.57992554 C165.13157837 475.07105835 164.54376587 475.56219116 163.93814087 476.06820679 C160.30769441 478.60126829 156.8941586 478.40161441 152.61045837 478.42132568 C151.93566993 478.42570794 151.26088149 478.43009019 150.56564492 478.43460524 C148.2995893 478.44798296 146.03357257 478.45416979 143.76748657 478.46029663 C142.14457524 478.46819847 140.52166566 478.47646747 138.89875793 478.4850769 C133.56424638 478.51128954 128.22972701 478.52660467 122.89517212 478.54086304 C121.05813276 478.5462232 119.22109345 478.55160071 117.38405418 478.55699539 C109.74149537 478.57862379 102.09893867 478.59735982 94.456357 478.60861778 C83.50759524 478.62485249 72.5591886 478.65801907 61.61056072 478.71501863 C53.91022657 478.75373872 46.20998732 478.77325297 38.50955838 478.77853835 C33.91156372 478.78218922 29.3139479 478.79418216 24.71605873 478.82664108 C20.38786813 478.85675792 16.06028488 478.86302083 11.7320118 478.85125732 C10.14697758 478.85103688 8.56191489 478.85931754 6.9769783 478.87691116 C-8.76980561 479.04213655 -8.76980561 479.04213655 -14.78060913 473.26742554 C-19.40633919 467.57421931 -19.90095045 462.8175633 -19.92245483 455.66049194 C-19.93300652 453.68286362 -19.93300652 453.68286362 -19.94377136 451.6652832 C-19.94558725 450.96545948 -19.94740314 450.26563576 -19.94927406 449.54460526 C-19.95648172 447.34106385 -19.97217932 445.13773973 -19.99061584 442.93426514 C-20.04288796 436.67165071 -20.0910464 430.40915979 -20.10653687 424.14633179 C-20.11664948 420.30831892 -20.14605077 416.47086109 -20.18785667 412.63306808 C-20.20011972 411.17636701 -20.20529654 409.71958743 -20.20305824 408.26283646 C-19.95895373 397.49570164 -19.95895373 397.49570164 -24.78060913 388.26742554 C-30.70037785 383.17184332 -37.4013192 383.70801191 -44.86952019 383.75100517 C-47.09482696 383.76373014 -49.3189104 383.75226036 -51.54417419 383.73497009 C-55.4685803 383.70835381 -59.3926826 383.70267098 -63.31716919 383.70407104 C-69.59354844 383.7063048 -75.86955113 383.69195585 -82.14578438 383.64848518 C-84.32609909 383.63871798 -86.50581001 383.64732644 -88.68611145 383.65718079 C-104.10914877 383.63506092 -104.10914877 383.63506092 -109.28633118 378.88630676 C-112.90904407 374.7685728 -115.02907723 371.18338183 -115.03508472 365.700243 C-115.04091692 364.78332935 -115.04674911 363.86641571 -115.05275804 362.92171681 C-115.04897871 361.91803244 -115.04519939 360.91434807 -115.04130554 359.88024902 C-115.04513109 358.811174 -115.04895664 357.74209898 -115.05289811 356.64062774 C-115.06324457 353.04628815 -115.05923278 349.45210781 -115.05526733 345.85775757 C-115.05961291 343.28565319 -115.06479553 340.71355012 -115.070755 338.14144897 C-115.08351294 331.87277661 -115.08529431 325.60414706 -115.08295474 319.3354639 C-115.08117252 314.24025838 -115.08291917 309.14506587 -115.08717918 304.04986191 C-115.08777437 303.32499156 -115.08836956 302.60012121 -115.08898279 301.8532851 C-115.09019453 300.38075162 -115.09140866 298.90821814 -115.09262516 297.43568467 C-115.10350507 283.62179476 -115.10133617 269.80792926 -115.09524032 255.99403797 C-115.09007166 243.35625566 -115.10132442 230.71855044 -115.12033854 218.08078338 C-115.13971038 205.10581809 -115.14797403 192.13088927 -115.14421529 179.15590942 C-115.14230213 171.87087269 -115.14480186 164.58590156 -115.15892982 157.30087662 C-115.1720802 150.45055737 -115.16959245 143.60039503 -115.15651894 136.75007629 C-115.15414701 134.23377811 -115.15690976 131.71746915 -115.16514206 129.20118332 C-115.17555889 125.77013111 -115.16754907 122.33960242 -115.15483093 118.90856934 C-115.16220522 117.90934641 -115.1695795 116.91012348 -115.17717725 115.88062108 C-115.13581813 110.58842303 -114.78851118 106.81987716 -111.78060913 102.26742554 C-106.13342496 96.86577112 -101.85577246 95.02038183 -94.0977478 95.01205444 C-93.12106392 95.00662376 -93.12106392 95.00662376 -92.12464905 95.00108337 C-90.71749962 94.99421625 -89.31032372 94.99167888 -87.90315819 94.99303055 C-85.66985139 94.99400051 -83.43701973 94.98099775 -81.20378113 94.96405029 C-74.85662514 94.91792606 -68.50951888 94.89318855 -62.16220093 94.88656616 C-58.27234898 94.88153039 -54.38299406 94.85717705 -50.49331093 94.82123947 C-49.01788642 94.81148931 -47.54239313 94.80908325 -46.06694603 94.81441116 C-34.68827413 95.12544569 -34.68827413 95.12544569 -24.78060913 90.26742554 C-19.62178071 84.42592355 -20.22136643 77.61702493 -20.26418877 70.17851448 C-20.27691374 67.95320771 -20.26544396 65.72912427 -20.24815369 63.50386047 C-20.2215374 59.57945437 -20.21585457 55.65535207 -20.21725464 51.73086548 C-20.2194884 45.45448623 -20.20513945 39.17848354 -20.16166878 32.90225029 C-20.15190157 30.72193558 -20.16051003 28.54222466 -20.17036438 26.36192322 C-20.14824451 10.9388859 -20.14824451 10.9388859 -15.39949036 5.76170349 C-10.32907951 1.30084154 -6.68515087 0.01836549 0 0 Z " fill="#FEFEFE" transform="translate(416.7806091308594,299.7325744628906)"/>
+<path d="M0 0 C0.67141045 -0.00367669 1.34282091 -0.00735338 2.03457713 -0.01114148 C4.28915207 -0.02217318 6.54368092 -0.02602127 8.79827881 -0.02983093 C10.41296027 -0.03609597 12.02764029 -0.04274281 13.64231873 -0.04974365 C18.94917802 -0.07078151 24.2560376 -0.08114571 29.56292725 -0.09111023 C31.39008347 -0.09515787 33.21723954 -0.0992748 35.04439545 -0.10346031 C43.62848548 -0.1225113 52.21256691 -0.13674258 60.79667401 -0.14507228 C70.70426354 -0.15484506 80.61162967 -0.181166 90.51914048 -0.22157317 C98.17784764 -0.25173644 105.83649078 -0.26654135 113.49525619 -0.26985329 C118.06912505 -0.27220354 122.64275524 -0.28116055 127.21656036 -0.30631447 C131.52088672 -0.32960394 135.8248174 -0.33382499 140.12919044 -0.32355309 C141.70657226 -0.32305783 143.2839736 -0.32937542 144.8612957 -0.34310913 C160.38668331 -0.47069478 160.38668331 -0.47069478 167.16448975 5.74482727 C170.28274576 9.77705487 171.54577257 12.53848454 171.55373001 17.59130573 C171.55757116 18.50622833 171.5614123 19.42115092 171.56536984 20.36379844 C171.56450336 21.37039565 171.56363688 22.37699286 171.56274414 23.41409302 C171.56571526 24.48231362 171.56868639 25.55053421 171.57174754 26.65112513 C171.58045392 30.24852912 171.58194443 33.8458999 171.58343506 37.4433136 C171.58806184 40.01526969 171.5930863 42.58722509 171.59848022 45.15917969 C171.61206561 52.15917992 171.61808856 59.15917443 171.62249088 66.15918565 C171.6252529 70.5294108 171.62949018 74.89963375 171.63399506 79.26985741 C171.64618789 91.36802564 171.65648724 103.4661921 171.65987015 115.56436634 C171.6601995 116.72596546 171.6601995 116.72596546 171.6605355 117.91103123 C171.66075378 118.68729054 171.66097205 119.46354986 171.66119695 120.26333219 C171.66164041 121.83634683 171.66208698 123.40936146 171.66253662 124.9823761 C171.66286877 126.15278215 171.66286877 126.15278215 171.66320762 127.34683277 C171.66715597 139.99114103 171.68461104 152.63539167 171.70789614 165.27967767 C171.73160568 178.25912635 171.74407181 191.23854611 171.74523807 204.2180168 C171.74615504 211.50642801 171.75191299 218.79476414 171.77005768 226.08315468 C171.78706172 232.93755538 171.78871426 239.79181129 171.77991867 246.64622688 C171.77914606 249.16414013 171.78352033 251.68206091 171.79337692 254.19995499 C171.80603033 257.63324084 171.80025521 261.06601622 171.78979492 264.4992981 C171.80187953 265.99915566 171.80187953 265.99915566 171.81420827 267.52931339 C171.77638237 272.82590085 171.42844831 276.58854677 168.42230225 281.14717102 C162.66267393 286.7788076 157.59073269 288.39393746 149.64242554 288.40786743 C148.98549158 288.41169298 148.32855763 288.41551853 147.65171659 288.41946 C145.46399692 288.42972789 143.27654276 288.4258098 141.08880615 288.42182922 C139.5147121 288.42617917 137.94062017 288.43136326 136.36653137 288.43731689 C132.09993273 288.45068837 127.83342278 288.45128758 123.56680727 288.4487536 C120.00080702 288.44768254 116.4348246 288.45257075 112.86882818 288.45735902 C104.45337102 288.468448 96.03795849 288.46889516 87.62249756 288.46284485 C78.95081184 288.45680601 70.27928841 288.46911516 61.60763037 288.49041492 C54.15350774 288.50804857 46.69943669 288.51402946 39.24529397 288.51077718 C34.79724932 288.50896684 30.34932042 288.51157542 25.90129471 288.52549171 C21.7167897 288.53809402 17.53253707 288.53610333 13.34803581 288.52308083 C11.81623562 288.52072064 10.28441753 288.52342967 8.75263786 288.53170395 C-8.11748032 288.61622903 -8.11748032 288.61622903 -15.39019775 282.95967102 C-20.5927012 276.27073801 -21.01590185 269.64785593 -20.96537781 261.48898315 C-20.97076335 260.43902489 -20.97614888 259.38906663 -20.98169762 258.30729145 C-20.99596494 254.80140495 -20.9888763 251.29589667 -20.98175049 247.78999329 C-20.98745466 245.27142534 -20.9944191 242.75285999 -21.00254822 240.23429871 C-21.0186269 234.11085487 -21.02058141 227.98754989 -21.01533531 221.86409134 C-21.01128792 216.885325 -21.01274392 211.90658893 -21.01808357 206.92782402 C-21.01883199 206.21823861 -21.01958042 205.50865319 -21.02035152 204.77756519 C-21.02188305 203.33588004 -21.0234214 201.89419489 -21.02496649 200.45250975 C-21.03868252 186.94418759 -21.03326007 173.43592341 -21.02178127 159.92760258 C-21.01184894 147.57983482 -21.02479112 135.23221691 -21.04871546 122.88447226 C-21.07311979 110.19299067 -21.08271112 97.50157884 -21.07606274 84.81007427 C-21.07257359 77.68986238 -21.07478247 70.56976572 -21.09231377 63.44957161 C-21.10859505 56.75426115 -21.10383347 50.05928233 -21.08500862 43.36396408 C-21.08132124 40.90858833 -21.08443547 38.4531914 -21.09489441 35.99783516 C-21.10809502 32.64234115 -21.09656377 29.28779595 -21.0789032 25.93234253 C-21.0885082 24.96404135 -21.09811321 23.99574017 -21.10800928 22.99809653 C-21.04036243 16.73802932 -19.99708032 11.48797815 -16.57769775 6.14717102 C-11.50633868 1.30662481 -6.85300454 0.02430571 0 0 Z " fill="#000000" transform="translate(417.57769775390625,394.8528289794922)"/>
+</svg>
diff --git a/frontend/providers/aiproxy/ui/svg/icons/modelist/stabilityai.svg b/frontend/providers/aiproxy/ui/svg/icons/modelist/stabilityai.svg
new file mode 100644
index 000000000000..5c87e29fc9be
--- /dev/null
+++ b/frontend/providers/aiproxy/ui/svg/icons/modelist/stabilityai.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="301" height="301">
+<path d="M0 0 C99.33 0 198.66 0 301 0 C301 99.33 301 198.66 301 301 C201.67 301 102.34 301 0 301 C0 201.67 0 102.34 0 0 Z " fill="#D7DADE" transform="translate(0,0)"/>
+<path d="M0 0 C12.54 0 25.08 0 38 0 C38.20054405 18.97592335 38.20054405 18.97592335 38.24414062 27.078125 C38.27400544 32.60213294 38.3092966 38.12572565 38.37719727 43.64941406 C38.43161055 48.10389626 38.46144011 52.55793307 38.47438622 57.01272202 C38.48360945 58.71039718 38.50162076 60.40804856 38.52865028 62.1055336 C38.56506643 64.48771669 38.5699404 66.86807066 38.56762695 69.25048828 C38.58560333 69.94892349 38.60357971 70.6473587 38.62210083 71.36695862 C38.56318674 76.99098787 36.66855813 79.07574529 33 83 C31.50594355 87.48216934 31.13101043 91.72250601 32.82421875 96.16015625 C34.10880845 98.71500938 35.46451465 101.19771115 37.05270386 103.57720947 C38.46851484 107.1982666 38.26069664 110.79296241 38.22705078 114.62402344 C38.22729185 115.5066901 38.22753292 116.38935677 38.2277813 117.2987709 C38.22629 120.15240858 38.21106562 123.00578413 38.1953125 125.859375 C38.1923715 127.62255731 38.19033141 129.38574137 38.18920898 131.14892578 C38.1787283 137.68264384 38.15080585 144.2163245 38.125 150.75 C38.08375 165.3525 38.0425 179.955 38 195 C7.64 195 -22.72 195 -54 195 C-54 166.62 -54 138.24 -54 109 C-45.09 108.67 -36.18 108.34 -27 108 C-16.36819927 105.69644318 -5.98266825 101.80070045 0.5 92.5625 C1.36740407 91.06083804 2.20394123 89.54067157 3 88 C3.61875 86.845 4.2375 85.69 4.875 84.5 C7.42731129 76.91948264 7.75986816 65.51945026 4.25 58.25 C3.5075 57.1775 2.765 56.105 2 55 C1.46375 54.13375 0.9275 53.2675 0.375 52.375 C-8.78912743 43.21087257 -22.12542113 39.70147874 -34.3125 36.5 C-41.61944699 34.57608025 -47.50884412 32.49115588 -53 27 C-53.62887111 23.92215964 -53.61265907 21.07927775 -53 18 C-49.02591299 13.65623047 -44.85568739 11.32103152 -39.01171875 10.6640625 C-24.82537775 10.49736049 -13.11088969 13.59890074 -1 21 C-0.67 14.07 -0.34 7.14 0 0 Z " fill="#EFF3FE" transform="translate(159,103)"/>
+<path d="M0 0 C24.09 0 48.18 0 73 0 C73 0.66 73 1.32 73 2 C74.07507813 2.41765625 74.07507813 2.41765625 75.171875 2.84375 C78.82098936 4.33565311 82.34456551 6.06067675 85.890625 7.78125 C89.88725938 9.43999883 89.88725938 9.43999883 98 11 C98 40.04 98 69.08 98 99 C85.00625 99.103125 72.0125 99.20625 58.625 99.3125 C52.49671631 99.38078003 52.49671631 99.38078003 46.24462891 99.45043945 C41.21166992 99.47302246 41.21166992 99.47302246 38.84701538 99.47721863 C37.21405197 99.48483947 35.58111469 99.50230555 33.94833374 99.52787781 C15.43464287 99.80305289 15.43464287 99.80305289 8 94 C1.98034556 87.5763403 -0.31283813 81.81868567 -0.22705078 72.99682617 C-0.22734283 72.20605682 -0.22763489 71.41528748 -0.22793579 70.60055542 C-0.2265472 67.99791325 -0.21100829 65.39556065 -0.1953125 62.79296875 C-0.19158069 60.9840765 -0.18873451 59.17518223 -0.18673706 57.36628723 C-0.1791138 52.61351913 -0.15947654 47.86087395 -0.1373291 43.1081543 C-0.11323832 37.40126333 -0.10408346 31.69433117 -0.09242249 25.98740387 C-0.07305139 17.32485051 -0.03471971 8.66256669 0 0 Z " fill="#EFF3FE" transform="translate(4,199)"/>
+<path d="M0 0 C1.29461655 0.00222061 2.58923309 0.00444122 3.92308044 0.00672913 C4.99131546 0.00651009 4.99131546 0.00651009 6.08113098 0.00628662 C8.4457143 0.00698581 10.81021979 0.01477846 13.17478943 0.02259827 C14.81003781 0.02446243 16.44528675 0.02588634 18.08053589 0.02688599 C22.39273103 0.03071134 26.7048927 0.04054177 31.01707458 0.05158997 C35.41404263 0.06180371 39.81101607 0.06638353 44.20799255 0.07142639 C52.84147149 0.08216402 61.47492317 0.09924065 70.10838318 0.12025452 C70.22458826 10.50851487 70.31325582 20.89661884 70.36744404 31.28539848 C70.39346094 36.11014249 70.42871329 40.93443955 70.48558044 45.75892639 C70.5401839 50.42090835 70.5698631 55.08246229 70.58276939 59.74473953 C70.59195869 61.51725623 70.60990282 63.28975133 70.63703346 65.0620842 C70.91016101 83.65554984 70.91016101 83.65554984 65.10838318 91.12025452 C58.40058059 97.58835865 51.42307349 99.44184988 42.15354919 99.3473053 C40.99255785 99.3476669 40.99255785 99.3476669 39.80811214 99.34803581 C37.32605042 99.34655423 34.84429675 99.33137511 32.36228943 99.31556702 C30.82058354 99.31262299 29.27887565 99.31058477 27.73716736 99.3094635 C22.04837529 99.29901784 16.35962614 99.27109529 10.67088318 99.24525452 C-2.05474182 99.20400452 -14.78036682 99.16275452 -27.89161682 99.12025452 C-27.89161682 70.08025452 -27.89161682 41.04025452 -27.89161682 11.12025452 C-24.26161682 11.12025452 -20.63161682 11.12025452 -16.89161682 11.12025452 C-11.60753749 8.47821485 -7.85384856 5.44268914 -3.89161682 1.12025452 C-2.89161682 0.12025452 -2.89161682 0.12025452 0 0 Z " fill="#EFF3FE" transform="translate(227.89161682128906,198.87974548339844)"/>
+<path d="M0 0 C12.87 -0.061875 25.74 -0.12375 39 -0.1875 C43.05152344 -0.21481201 47.10304688 -0.24212402 51.27734375 -0.27026367 C56.25585938 -0.28381348 56.25585938 -0.28381348 58.5925293 -0.28633118 C60.21136962 -0.2909134 61.83020023 -0.30141348 63.44897461 -0.31672668 C65.91277633 -0.33885211 68.37595681 -0.34171255 70.83984375 -0.34057617 C71.9068174 -0.35676766 71.9068174 -0.35676766 72.99534607 -0.37328625 C79.87209507 -0.33114452 86.51038351 1.63048305 91.62763977 6.40664673 C99.18956357 15.18627744 98.66375371 25.12406715 98.48828125 36.0390625 C98.48091469 37.57770887 98.47582314 39.11636784 98.47302246 40.6550293 C98.44698322 46.31187933 98.37717692 51.96845978 98.3125 57.625 C98.209375 70.28875 98.10625 82.9525 98 96 C65.66 96 33.32 96 0 96 C0 64.32 0 32.64 0 0 Z " fill="#EFF3FE" transform="translate(200,4)"/>
+<path d="M0 0 C1.77931722 0.00934107 3.55864742 0.01645106 5.33798218 0.0214386 C9.99070583 0.04040675 14.64263234 0.08941777 19.29504395 0.1449585 C24.05465923 0.19637252 28.81440501 0.21899966 33.57421875 0.24414062 C42.89097266 0.29754799 52.20713844 0.38273514 61.5234375 0.48828125 C61.80174069 11.97091732 62.01482226 23.45274897 62.14518356 34.93807316 C62.20776036 40.27169635 62.29258815 45.60300941 62.42871094 50.93530273 C62.55931454 56.08374545 62.63088714 61.2299704 62.66196442 66.37994194 C62.68410196 68.34222788 62.72733851 70.30439504 62.79219818 72.26573372 C63.26408988 87.12977688 63.26408988 87.12977688 59.47467041 92.26426697 C50.75828942 98.35943689 39.69798875 97.37775411 29.5390625 97.171875 C27.62809069 97.15879379 25.71709514 97.14884157 23.80609131 97.14186096 C18.81442657 97.11533357 13.82422335 97.04674681 8.83312988 96.96893311 C3.72489179 96.89688993 -1.38358611 96.8652623 -6.4921875 96.83007812 C-16.4876158 96.75535812 -26.48196688 96.63613398 -36.4765625 96.48828125 C-36.54622277 86.58693933 -36.59945499 76.68565618 -36.63199902 66.78411865 C-36.64762237 62.1859061 -36.66879952 57.58786182 -36.70288086 52.98974609 C-36.73559348 48.54825192 -36.75344054 44.10691912 -36.76119423 39.66531372 C-36.76671644 37.97491925 -36.77749984 36.28453312 -36.79375267 34.59420776 C-36.81568568 32.21756236 -36.81852289 29.84157486 -36.81713867 27.46484375 C-36.8279245 26.77359909 -36.83871033 26.08235443 -36.849823 25.37016296 C-36.80715647 18.55336476 -34.80158366 11.92561555 -30.06820679 6.86064148 C-21.09410446 -0.87708059 -11.1466799 -0.17283099 0 0 Z " fill="#EFF3FE" transform="translate(40.4765625,3.51171875)"/>
+<path d="M0 0 C32.34 0 64.68 0 98 0 C98 30.69 98 61.38 98 93 C73.91 93 49.82 93 25 93 C23.515 87.555 23.515 87.555 22 82 C19.92153757 77.70077766 19.92153757 77.70077766 16 76 C14.700625 75.443125 14.700625 75.443125 13.375 74.875 C8.96776874 73.58172974 8.96776874 73.58172974 0 74 C0 49.58 0 25.16 0 0 Z " fill="#EFF3FE" transform="translate(200,103)"/>
+<path d="M0 0 C26.73 0 53.46 0 81 0 C79.45911979 3.85220054 77.81891359 7.38282504 75.90234375 11.03515625 C72.98272658 17.39259104 72.99891616 25.1044781 74.71875 31.796875 C78.7205628 42.44686068 85.47162111 47.36664143 95.56298828 52.00195312 C101.11979307 54.27767121 106.91654359 55.89513619 112.70263672 57.47827148 C129.7592267 62.22212633 129.7592267 62.22212633 134 69 C134.4933086 72.77752753 134.11181867 76.54095721 131.76171875 79.625 C124.00107341 86.36292463 115.01315837 85.64399342 105.3515625 85.1953125 C94.60643431 84.30285999 83.19572243 78.98434544 75 72 C75 71.34 75 70.68 75 70 C74.34 70 73.68 70 73 70 C73 77.59 73 85.18 73 93 C48.91 93 24.82 93 0 93 C0 62.31 0 31.62 0 0 Z " fill="#EFF3FE" transform="translate(4,103)"/>
+<path d="M0 0 C30.36 0 60.72 0 92 0 C92 31.68 92 63.36 92 96 C54 96 54 96 44 91 C29.92751335 85.49406072 14.75617252 85.89197535 0 88 C0 58.96 0 29.92 0 0 Z " fill="#EFF3FE" transform="translate(105,4)"/>
+<path d="M0 0 C0 8.58 0 17.16 0 26 C-3.3103125 24.3603125 -3.3103125 24.3603125 -6.6875 22.6875 C-18.03114493 17.31107208 -32.11796781 12.82522948 -44.58984375 16.83203125 C-47.45003374 18.21299097 -49.753016 19.753016 -52 22 C-52.56108065 25.05936607 -52.50453657 27.93439191 -52 31 C-47.43748502 36.8211398 -38.06234866 38.42424738 -31.22265625 40.375 C-13.11493783 45.55523473 -13.11493783 45.55523473 -5 51 C-4.1028125 51.59748047 -4.1028125 51.59748047 -3.1875 52.20703125 C1.75279592 55.89990245 5.06956665 61.20869994 7 67 C7.94189986 79.36579953 6.7166448 88.64758311 -0.125 99.3125 C-13.90104822 112.19011029 -28.64660383 113.86801082 -46.7265625 113.37890625 C-59.9399779 112.7518489 -70.49449061 108.16790194 -82 102 C-82 92.76 -82 83.52 -82 74 C-81.34 74 -80.68 74 -80 74 C-80 74.66 -80 75.32 -80 76 C-79.24976562 76.37125 -79.24976562 76.37125 -78.484375 76.75 C-76.44434801 77.77642867 -74.41669696 78.82152553 -72.390625 79.875 C-71.01053016 80.58355444 -69.63031844 81.29188125 -68.25 82 C-67.57195312 82.35578125 -66.89390625 82.7115625 -66.1953125 83.078125 C-58.35562087 87.0724926 -51.26543961 88.36093027 -42.5 88.375 C-41.29537109 88.41173828 -41.29537109 88.41173828 -40.06640625 88.44921875 C-34.25730402 88.47746398 -29.84055286 87.28570861 -25 84 C-22.68076398 81.24590722 -22.08926705 79.53560233 -21.5 76 C-22.02004272 72.87974365 -22.70029603 71.29617603 -25.09765625 69.2109375 C-30.98004693 65.4664999 -37.98151306 63.59109494 -44.6171875 61.59765625 C-72.32742884 53.27146955 -72.32742884 53.27146955 -79.23828125 40.7578125 C-83.09929579 32.45198741 -83.22942762 24.08860221 -80.5625 15.375 C-77.1034168 6.94652967 -70.69484093 -0.01944393 -62.46484375 -3.97265625 C-61.65144531 -4.31167969 -60.83804688 -4.65070313 -60 -5 C-59.11441406 -5.39058594 -58.22882813 -5.78117187 -57.31640625 -6.18359375 C-38.61724091 -13.21097838 -16.96122751 -9.69213001 0 0 Z " fill="#926BFE" transform="translate(159,99)"/>
+<path d="M0 0 C4.65332141 2.49900594 7.4651554 5.4477331 10.375 9.8125 C11.06072317 15.33815296 11.12317537 20.26072887 8.6875 25.3125 C4.4071505 29.93990487 0.48799389 33.4533084 -5.875 34.1875 C-11.70898192 33.60410181 -15.90690782 31.57580513 -20 27.375 C-23.23919927 22.26703192 -24.36828531 17.89065565 -23.625 11.8125 C-21.77580845 6.37370134 -18.24913162 3.03888275 -13.625 -0.1875 C-8.7438251 -1.8145583 -4.88094987 -1.59893185 0 0 Z " fill="#E80404" transform="translate(213.625,177.1875)"/>
+<path d="M0 0 C8.25 0 16.5 0 25 0 C25 0.33 25 0.66 25 1 C23.824375 1.2475 22.64875 1.495 21.4375 1.75 C14.11589461 3.61274059 9.41551773 6.74468322 5 13 C3.05484059 16.9597888 1.66131062 20.63534993 1 25 C0.67 25 0.34 25 0 25 C0 16.75 0 8.5 0 0 Z " fill="#000000" transform="translate(0,0)"/>
+<path d="M0 0 C8.25 0 16.5 0 25 0 C25 6.6 25 13.2 25 20 C23.92621773 18.3893266 22.86445188 16.76837917 21.88671875 15.09765625 C17.80950622 8.17834768 13.64116276 4.81516523 6 2 C4.01178687 1.60235737 2.01267638 1.24544834 0 1 C0 0.67 0 0.34 0 0 Z " fill="#000000" transform="translate(276,0)"/>
+<path d="M0 0 C0.33 0 0.66 0 1 0 C1.226875 1.155 1.45375 2.31 1.6875 3.5 C3.41763428 10.37180095 6.98008838 16.13005682 13 20 C15.30625442 21.11220203 17.61247887 22.06371721 20 23 C20 23.33 20 23.66 20 24 C13.4 24 6.8 24 0 24 C0 16.08 0 8.16 0 0 Z " fill="#000000" transform="translate(0,277)"/>
+<path d="M0 0 C0.33 0 0.66 0 1 0 C1 6.27 1 12.54 1 19 C-5.27 19 -11.54 19 -18 19 C-16.32949879 17.88633253 -14.64472804 16.79109477 -12.9140625 15.7734375 C-6.29403368 11.72911955 -2.46461148 7.39383444 0 0 Z " fill="#000000" transform="translate(300,282)"/>
+<path d="M0 0 C10.23 0 20.46 0 31 0 C31.495 1.485 31.495 1.485 32 3 C21.11 3 10.22 3 -1 3 C-0.67 2.01 -0.34 1.02 0 0 Z " fill="#D8D9DF" transform="translate(159,196)"/>
+<path d="M0 0 C1.32 0.33 2.64 0.66 4 1 C3.67 10.57 3.34 20.14 3 30 C2.01 29.67 1.02 29.34 0 29 C0 19.43 0 9.86 0 0 Z " fill="#D6D9DE" transform="translate(102,157)"/>
+</svg>
diff --git a/frontend/providers/aiproxy/ui/svg/icons/modelist/stepfun.svg b/frontend/providers/aiproxy/ui/svg/icons/modelist/stepfun.svg
new file mode 100644
index 000000000000..ec0eed0dbd17
--- /dev/null
+++ b/frontend/providers/aiproxy/ui/svg/icons/modelist/stepfun.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="52" height="52">
+<path d="M0 0 C11.22 0 22.44 0 34 0 C34 3.63 34 7.26 34 11 C26.41 11 18.82 11 11 11 C11 19.91 11 28.82 11 38 C3.41 38 -4.18 38 -12 38 C-12 34.37 -12 30.74 -12 27 C-8.04 27 -4.08 27 0 27 C0 18.09 0 9.18 0 0 Z " fill="#0083FF" transform="translate(12,7)"/>
+<path d="M0 0 C7.92 0 15.84 0 24 0 C24 0.99 24 1.98 24 3 C19.71 3 15.42 3 11 3 C11 9.93 11 16.86 11 24 C7.37 24 3.74 24 0 24 C0 16.08 0 8.16 0 0 Z " fill="#006DFF" transform="translate(28,28)"/>
+<path d="M0 0 C0.99 0 1.98 0 3 0 C3 7.92 3 15.84 3 24 C2.01 24 1.02 24 0 24 C0 16.08 0 8.16 0 0 Z " fill="#0094FF" transform="translate(5,4)"/>
+<path d="M0 0 C0.99 0 1.98 0 3 0 C3 0.66 3 1.32 3 2 C3.66 2 4.32 2 5 2 C5 2.99 5 3.98 5 5 C4.34 5 3.68 5 3 5 C3 6.32 3 7.64 3 9 C2.01 9 1.02 9 0 9 C0 7.68 0 6.36 0 5 C-1.32 5 -2.64 5 -4 5 C-4 4.01 -4 3.02 -4 2 C-2.68 2 -1.36 2 0 2 C0 1.34 0 0.68 0 0 Z " fill="#0081FF" transform="translate(47,0)"/>
+</svg>
diff --git a/frontend/providers/aiproxy/ui/svg/icons/sidebar/home.svg b/frontend/providers/aiproxy/ui/svg/icons/sidebar/home.svg
index 9fe618a35f77..3eb17800823a 100644
--- a/frontend/providers/aiproxy/ui/svg/icons/sidebar/home.svg
+++ b/frontend/providers/aiproxy/ui/svg/icons/sidebar/home.svg
@@ -1,6 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-  <path d="M6.90625 11.3066C6.90625 10.6874 7.40824 10.1854 8.02747 10.1854C8.6467 10.1854 9.14868 10.6874 9.14868 11.3066V12.2922C9.14868 12.9114 8.6467 13.4134 8.02747 13.4134C7.40824 13.4134 6.90625 12.9114 6.90625 12.2922V11.3066Z" fill="#667085"/>
-  <path d="M15.9759 10.1854C15.3567 10.1854 14.8547 10.6874 14.8547 11.3066V12.2922C14.8547 12.9114 15.3567 13.4134 15.9759 13.4134C16.5951 13.4134 17.0971 12.9114 17.0971 12.2922V11.3066C17.0971 10.6874 16.5951 10.1854 15.9759 10.1854Z" fill="#667085"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.32871 1.98793C6.71863 2.08998 6.30678 2.66727 6.40883 3.27736L6.85881 5.96762H5.7C3.65655 5.96762 2 7.62417 2 9.66762V14.8457C2 16.8892 3.65655 18.5457 5.7 18.5457H18.3C20.3435 18.5457 22 16.8892 22 14.8457V9.66762C22 7.62417 20.3435 5.96762 18.3 5.96762H17.1346L17.5846 3.27736C17.6866 2.66727 17.2748 2.08998 16.6647 1.98793C16.0546 1.88589 15.4773 2.29774 15.3753 2.90782L14.8635 5.96762H9.12993L8.61814 2.90782C8.51609 2.29774 7.9388 1.88589 7.32871 1.98793ZM5.7 7.96762H18.3C19.2389 7.96762 20 8.72874 20 9.66762V14.8457C20 15.7846 19.2389 16.5457 18.3 16.5457H5.7C4.76112 16.5457 4 15.7846 4 14.8457V9.66762C4 8.72874 4.76112 7.96762 5.7 7.96762Z" fill="#667085"/>
-  <path d="M18.1183 21.0001C18.1183 21.5524 17.6706 22.0001 17.1183 22.0001H6.88692C6.33463 22.0001 5.88692 21.5524 5.88692 21.0001C5.88692 20.4478 6.33463 20.0001 6.88692 20.0001H17.1183C17.6706 20.0001 18.1183 20.4478 18.1183 21.0001Z" fill="#667085"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.7587 2H16.2413C17.0463 1.99999 17.7106 1.99998 18.2518 2.04419C18.8139 2.09012 19.3306 2.18868 19.816 2.43597C20.5686 2.81947 21.1805 3.43139 21.564 4.18404C21.8113 4.66937 21.9099 5.18608 21.9558 5.74817C22 6.28936 22 6.95372 22 7.75868V16.2413C22 17.0463 22 17.7106 21.9558 18.2518C21.9099 18.8139 21.8113 19.3306 21.564 19.816C21.1805 20.5686 20.5686 21.1805 19.816 21.564C19.3306 21.8113 18.8139 21.9099 18.2518 21.9558C17.7106 22 17.0463 22 16.2413 22H7.75868C6.95372 22 6.28936 22 5.74817 21.9558C5.18608 21.9099 4.66937 21.8113 4.18404 21.564C3.43139 21.1805 2.81947 20.5686 2.43597 19.816C2.18868 19.3306 2.09012 18.8139 2.04419 18.2518C1.99998 17.7106 1.99999 17.0463 2 16.2413V7.7587C1.99999 6.95373 1.99998 6.28937 2.04419 5.74817C2.09012 5.18608 2.18868 4.66937 2.43597 4.18404C2.81947 3.43139 3.43139 2.81947 4.18404 2.43597C4.66937 2.18868 5.18608 2.09012 5.74817 2.04419C6.28937 1.99998 6.95373 1.99999 7.7587 2ZM5.91104 4.03755C5.47262 4.07337 5.24842 4.1383 5.09202 4.21799C4.7157 4.40973 4.40973 4.7157 4.21799 5.09202C4.1383 5.24842 4.07337 5.47262 4.03755 5.91104C4.00078 6.36113 4 6.94342 4 7.8V16.2C4 17.0566 4.00078 17.6389 4.03755 18.089C4.07337 18.5274 4.1383 18.7516 4.21799 18.908C4.40973 19.2843 4.7157 19.5903 5.09202 19.782C5.24842 19.8617 5.47262 19.9266 5.91104 19.9624C6.36113 19.9992 6.94342 20 7.8 20H16.2C17.0566 20 17.6389 19.9992 18.089 19.9624C18.5274 19.9266 18.7516 19.8617 18.908 19.782C19.2843 19.5903 19.5903 19.2843 19.782 18.908C19.8617 18.7516 19.9266 18.5274 19.9624 18.089C19.9992 17.6389 20 17.0566 20 16.2V7.8C20 6.94342 19.9992 6.36113 19.9624 5.91104C19.9266 5.47262 19.8617 5.24842 19.782 5.09202C19.5903 4.7157 19.2843 4.40973 18.908 4.21799C18.7516 4.1383 18.5274 4.07337 18.089 4.03755C17.6389 4.00078 17.0566 4 16.2 4H7.8C6.94342 4 6.36113 4.00078 5.91104 4.03755ZM12 6C12.5523 6 13 6.44772 13 7V17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17V7C11 6.44772 11.4477 6 12 6ZM16 10C16.5523 10 17 10.4477 17 11V17C17 17.5523 16.5523 18 16 18C15.4477 18 15 17.5523 15 17V11C15 10.4477 15.4477 10 16 10ZM8 12C8.55229 12 9 12.4477 9 13V17C9 17.5523 8.55229 18 8 18C7.44772 18 7 17.5523 7 17V13C7 12.4477 7.44772 12 8 12Z" fill="#667085"/>
 </svg>
\ No newline at end of file
diff --git a/frontend/providers/aiproxy/ui/svg/icons/sidebar/home_a.svg b/frontend/providers/aiproxy/ui/svg/icons/sidebar/home_a.svg
index 3ba408e77868..dfe212417eca 100644
--- a/frontend/providers/aiproxy/ui/svg/icons/sidebar/home_a.svg
+++ b/frontend/providers/aiproxy/ui/svg/icons/sidebar/home_a.svg
@@ -1,6 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-  <path d="M6.90625 11.3066C6.90625 10.6874 7.40824 10.1854 8.02747 10.1854C8.6467 10.1854 9.14868 10.6874 9.14868 11.3066V12.2922C9.14868 12.9114 8.6467 13.4134 8.02747 13.4134C7.40824 13.4134 6.90625 12.9114 6.90625 12.2922V11.3066Z" fill="#111824"/>
-  <path d="M15.9759 10.1854C15.3567 10.1854 14.8547 10.6874 14.8547 11.3066V12.2922C14.8547 12.9114 15.3567 13.4134 15.9759 13.4134C16.5951 13.4134 17.0971 12.9114 17.0971 12.2922V11.3066C17.0971 10.6874 16.5951 10.1854 15.9759 10.1854Z" fill="#111824"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.32871 1.98793C6.71863 2.08998 6.30678 2.66727 6.40883 3.27736L6.85881 5.96762H5.7C3.65655 5.96762 2 7.62417 2 9.66762V14.8457C2 16.8892 3.65655 18.5457 5.7 18.5457H18.3C20.3435 18.5457 22 16.8892 22 14.8457V9.66762C22 7.62417 20.3435 5.96762 18.3 5.96762H17.1346L17.5846 3.27736C17.6866 2.66727 17.2748 2.08998 16.6647 1.98793C16.0546 1.88589 15.4773 2.29774 15.3753 2.90782L14.8635 5.96762H9.12993L8.61814 2.90782C8.51609 2.29774 7.9388 1.88589 7.32871 1.98793ZM5.7 7.96762H18.3C19.2389 7.96762 20 8.72874 20 9.66762V14.8457C20 15.7846 19.2389 16.5457 18.3 16.5457H5.7C4.76112 16.5457 4 15.7846 4 14.8457V9.66762C4 8.72874 4.76112 7.96762 5.7 7.96762Z" fill="#111824"/>
-  <path d="M18.1183 21.0001C18.1183 21.5524 17.6706 22.0001 17.1183 22.0001H6.88692C6.33463 22.0001 5.88692 21.5524 5.88692 21.0001C5.88692 20.4478 6.33463 20.0001 6.88692 20.0001H17.1183C17.6706 20.0001 18.1183 20.4478 18.1183 21.0001Z" fill="#111824"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.7587 2H16.2413C17.0463 1.99999 17.7106 1.99998 18.2518 2.04419C18.8139 2.09012 19.3306 2.18868 19.816 2.43597C20.5686 2.81947 21.1805 3.43139 21.564 4.18404C21.8113 4.66937 21.9099 5.18608 21.9558 5.74817C22 6.28936 22 6.95372 22 7.75868V16.2413C22 17.0463 22 17.7106 21.9558 18.2518C21.9099 18.8139 21.8113 19.3306 21.564 19.816C21.1805 20.5686 20.5686 21.1805 19.816 21.564C19.3306 21.8113 18.8139 21.9099 18.2518 21.9558C17.7106 22 17.0463 22 16.2413 22H7.75868C6.95372 22 6.28936 22 5.74817 21.9558C5.18608 21.9099 4.66937 21.8113 4.18404 21.564C3.43139 21.1805 2.81947 20.5686 2.43597 19.816C2.18868 19.3306 2.09012 18.8139 2.04419 18.2518C1.99998 17.7106 1.99999 17.0463 2 16.2413V7.7587C1.99999 6.95373 1.99998 6.28937 2.04419 5.74817C2.09012 5.18608 2.18868 4.66937 2.43597 4.18404C2.81947 3.43139 3.43139 2.81947 4.18404 2.43597C4.66937 2.18868 5.18608 2.09012 5.74817 2.04419C6.28937 1.99998 6.95373 1.99999 7.7587 2ZM5.91104 4.03755C5.47262 4.07337 5.24842 4.1383 5.09202 4.21799C4.7157 4.40973 4.40973 4.7157 4.21799 5.09202C4.1383 5.24842 4.07337 5.47262 4.03755 5.91104C4.00078 6.36113 4 6.94342 4 7.8V16.2C4 17.0566 4.00078 17.6389 4.03755 18.089C4.07337 18.5274 4.1383 18.7516 4.21799 18.908C4.40973 19.2843 4.7157 19.5903 5.09202 19.782C5.24842 19.8617 5.47262 19.9266 5.91104 19.9624C6.36113 19.9992 6.94342 20 7.8 20H16.2C17.0566 20 17.6389 19.9992 18.089 19.9624C18.5274 19.9266 18.7516 19.8617 18.908 19.782C19.2843 19.5903 19.5903 19.2843 19.782 18.908C19.8617 18.7516 19.9266 18.5274 19.9624 18.089C19.9992 17.6389 20 17.0566 20 16.2V7.8C20 6.94342 19.9992 6.36113 19.9624 5.91104C19.9266 5.47262 19.8617 5.24842 19.782 5.09202C19.5903 4.7157 19.2843 4.40973 18.908 4.21799C18.7516 4.1383 18.5274 4.07337 18.089 4.03755C17.6389 4.00078 17.0566 4 16.2 4H7.8C6.94342 4 6.36113 4.00078 5.91104 4.03755ZM12 6C12.5523 6 13 6.44772 13 7V17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17V7C11 6.44772 11.4477 6 12 6ZM16 10C16.5523 10 17 10.4477 17 11V17C17 17.5523 16.5523 18 16 18C15.4477 18 15 17.5523 15 17V11C15 10.4477 15.4477 10 16 10ZM8 12C8.55229 12 9 12.4477 9 13V17C9 17.5523 8.55229 18 8 18C7.44772 18 7 17.5523 7 17V13C7 12.4477 7.44772 12 8 12Z" fill="#111824"/>
 </svg>
\ No newline at end of file
diff --git a/frontend/providers/aiproxy/ui/svg/icons/sidebar/key.svg b/frontend/providers/aiproxy/ui/svg/icons/sidebar/key.svg
new file mode 100644
index 000000000000..9fe618a35f77
--- /dev/null
+++ b/frontend/providers/aiproxy/ui/svg/icons/sidebar/key.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M6.90625 11.3066C6.90625 10.6874 7.40824 10.1854 8.02747 10.1854C8.6467 10.1854 9.14868 10.6874 9.14868 11.3066V12.2922C9.14868 12.9114 8.6467 13.4134 8.02747 13.4134C7.40824 13.4134 6.90625 12.9114 6.90625 12.2922V11.3066Z" fill="#667085"/>
+  <path d="M15.9759 10.1854C15.3567 10.1854 14.8547 10.6874 14.8547 11.3066V12.2922C14.8547 12.9114 15.3567 13.4134 15.9759 13.4134C16.5951 13.4134 17.0971 12.9114 17.0971 12.2922V11.3066C17.0971 10.6874 16.5951 10.1854 15.9759 10.1854Z" fill="#667085"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.32871 1.98793C6.71863 2.08998 6.30678 2.66727 6.40883 3.27736L6.85881 5.96762H5.7C3.65655 5.96762 2 7.62417 2 9.66762V14.8457C2 16.8892 3.65655 18.5457 5.7 18.5457H18.3C20.3435 18.5457 22 16.8892 22 14.8457V9.66762C22 7.62417 20.3435 5.96762 18.3 5.96762H17.1346L17.5846 3.27736C17.6866 2.66727 17.2748 2.08998 16.6647 1.98793C16.0546 1.88589 15.4773 2.29774 15.3753 2.90782L14.8635 5.96762H9.12993L8.61814 2.90782C8.51609 2.29774 7.9388 1.88589 7.32871 1.98793ZM5.7 7.96762H18.3C19.2389 7.96762 20 8.72874 20 9.66762V14.8457C20 15.7846 19.2389 16.5457 18.3 16.5457H5.7C4.76112 16.5457 4 15.7846 4 14.8457V9.66762C4 8.72874 4.76112 7.96762 5.7 7.96762Z" fill="#667085"/>
+  <path d="M18.1183 21.0001C18.1183 21.5524 17.6706 22.0001 17.1183 22.0001H6.88692C6.33463 22.0001 5.88692 21.5524 5.88692 21.0001C5.88692 20.4478 6.33463 20.0001 6.88692 20.0001H17.1183C17.6706 20.0001 18.1183 20.4478 18.1183 21.0001Z" fill="#667085"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/providers/aiproxy/ui/svg/icons/sidebar/key_a.svg b/frontend/providers/aiproxy/ui/svg/icons/sidebar/key_a.svg
new file mode 100644
index 000000000000..3ba408e77868
--- /dev/null
+++ b/frontend/providers/aiproxy/ui/svg/icons/sidebar/key_a.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M6.90625 11.3066C6.90625 10.6874 7.40824 10.1854 8.02747 10.1854C8.6467 10.1854 9.14868 10.6874 9.14868 11.3066V12.2922C9.14868 12.9114 8.6467 13.4134 8.02747 13.4134C7.40824 13.4134 6.90625 12.9114 6.90625 12.2922V11.3066Z" fill="#111824"/>
+  <path d="M15.9759 10.1854C15.3567 10.1854 14.8547 10.6874 14.8547 11.3066V12.2922C14.8547 12.9114 15.3567 13.4134 15.9759 13.4134C16.5951 13.4134 17.0971 12.9114 17.0971 12.2922V11.3066C17.0971 10.6874 16.5951 10.1854 15.9759 10.1854Z" fill="#111824"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.32871 1.98793C6.71863 2.08998 6.30678 2.66727 6.40883 3.27736L6.85881 5.96762H5.7C3.65655 5.96762 2 7.62417 2 9.66762V14.8457C2 16.8892 3.65655 18.5457 5.7 18.5457H18.3C20.3435 18.5457 22 16.8892 22 14.8457V9.66762C22 7.62417 20.3435 5.96762 18.3 5.96762H17.1346L17.5846 3.27736C17.6866 2.66727 17.2748 2.08998 16.6647 1.98793C16.0546 1.88589 15.4773 2.29774 15.3753 2.90782L14.8635 5.96762H9.12993L8.61814 2.90782C8.51609 2.29774 7.9388 1.88589 7.32871 1.98793ZM5.7 7.96762H18.3C19.2389 7.96762 20 8.72874 20 9.66762V14.8457C20 15.7846 19.2389 16.5457 18.3 16.5457H5.7C4.76112 16.5457 4 15.7846 4 14.8457V9.66762C4 8.72874 4.76112 7.96762 5.7 7.96762Z" fill="#111824"/>
+  <path d="M18.1183 21.0001C18.1183 21.5524 17.6706 22.0001 17.1183 22.0001H6.88692C6.33463 22.0001 5.88692 21.5524 5.88692 21.0001C5.88692 20.4478 6.33463 20.0001 6.88692 20.0001H17.1183C17.6706 20.0001 18.1183 20.4478 18.1183 21.0001Z" fill="#111824"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/providers/aiproxy/ui/svg/icons/sidebar/price.svg b/frontend/providers/aiproxy/ui/svg/icons/sidebar/price.svg
index 4a014d509e78..f782e2a12e31 100644
--- a/frontend/providers/aiproxy/ui/svg/icons/sidebar/price.svg
+++ b/frontend/providers/aiproxy/ui/svg/icons/sidebar/price.svg
@@ -1,4 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M12 1.74146L12.0106 1.74157C13.279 1.75503 14.6237 2.0189 15.6856 2.69265C16.7971 3.39789 17.5621 4.53862 17.5621 6.11217C17.5621 6.63589 17.4244 7.11877 17.198 7.54981C19.7487 9.27232 21.6997 12.1734 21.6997 15.5219C21.6997 17.8845 20.5481 19.6231 18.7203 20.7231C16.9486 21.7893 14.5704 22.2473 12.0044 22.2586L11.9956 22.2586C9.42957 22.2474 7.05141 21.7893 5.27964 20.7231C3.45186 19.6231 2.30029 17.8845 2.30029 15.5219C2.30029 12.1734 4.25124 9.27232 6.80199 7.54981C6.57557 7.11877 6.43785 6.63589 6.43785 6.11217C6.43785 4.53862 7.2029 3.39789 8.31443 2.69265C9.37633 2.0189 10.721 1.75503 11.9894 1.74157L12 1.74146ZM9.38591 4.38141C8.79554 4.75599 8.43785 5.2883 8.43785 6.11217C8.43785 6.38561 8.56144 6.70693 8.88827 7.04772C9.3776 7.55795 9.27707 8.42328 8.6213 8.78099C6.15881 10.1242 4.30029 12.689 4.30029 15.5219C4.30029 17.1169 5.0254 18.2358 6.31088 19.0094C7.65156 19.8162 9.62165 20.2476 12 20.2586C14.3783 20.2476 16.3484 19.8162 17.6891 19.0094C18.9746 18.2358 19.6997 17.1169 19.6997 15.5219C19.6997 12.689 17.8412 10.1242 15.3787 8.78099C14.7229 8.42328 14.6224 7.55795 15.1117 7.04772C15.4386 6.70693 15.5621 6.38561 15.5621 6.11217C15.5621 5.2883 15.2045 4.75599 14.6141 4.38141C13.9762 3.97671 13.044 3.75409 12 3.74158C10.956 3.75409 10.0238 3.97671 9.38591 4.38141Z" fill="#667085"/>
-  <path d="M11.6249 10.3243C11.7538 9.976 12.2463 9.976 12.3752 10.3243L13.131 12.3669C13.1715 12.4764 13.2579 12.5628 13.3674 12.6033L15.4101 13.3591C15.7583 13.488 15.7583 13.9806 15.4101 14.1094L13.3674 14.8653C13.2579 14.9058 13.1715 14.9921 13.131 15.1016L12.3752 17.1443C12.2463 17.4925 11.7538 17.4925 11.6249 17.1443L10.869 15.1016C10.8285 14.9921 10.7422 14.9058 10.6327 14.8653L8.59001 14.1094C8.24176 13.9806 8.24176 13.488 8.59001 13.3591L10.6327 12.6033C10.7422 12.5628 10.8285 12.4764 10.869 12.3669L11.6249 10.3243Z" fill="#667085"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M13.4999 1.42951L16.4507 3.13311L16.4469 3.13961C16.4812 3.15364 16.5146 3.17004 16.547 3.18874C17.2705 3.60642 16.9895 4.88432 16.186 5.11258C15.2835 5.36892 14.427 5.7344 13.6315 6.19384C15.7742 8.16307 17.2699 10.8252 17.7637 13.8249C18.598 13.3303 19.3634 12.7317 20.042 12.0468C20.6273 11.4561 21.9042 11.8462 21.9042 12.6778V15.9861C21.9042 17.0579 21.3324 18.0483 20.4042 18.5842L16.7643 20.6856L16.7511 20.6628C16.065 20.841 15.2508 19.9791 15.4671 19.2565C15.701 18.4752 15.8528 17.6584 15.9125 16.8161C14.6751 17.1958 13.3611 17.4002 11.9993 17.4002C10.6025 17.4002 9.2559 17.1852 7.99082 16.7865C8.04754 17.618 8.19403 18.4248 8.42068 19.1974C8.63706 19.9349 7.79498 20.8053 7.10108 20.5875L7.09217 20.6028L3.5957 18.5842C2.6675 18.0483 2.0957 17.0579 2.0957 15.9861V12.6792C2.0957 11.8475 3.37237 11.4574 3.95779 12.0481C4.61299 12.7092 5.34914 13.2899 6.15014 13.7741C6.65229 10.7951 8.14326 8.15197 10.2738 6.19384C9.49517 5.74411 8.658 5.38441 7.77652 5.12898C6.9738 4.89636 6.69833 3.62437 7.42211 3.2065C7.43833 3.19713 7.45482 3.18834 7.47154 3.18013L7.4706 3.1785L10.4999 1.42951C11.4281 0.893613 12.5717 0.893614 13.4999 1.42951ZM10.2072 3.90794C10.8152 4.18926 11.3984 4.51508 11.9527 4.88121C12.5229 4.50453 13.1238 4.17052 13.7508 3.88373L12.4999 3.16156C12.1905 2.98293 11.8093 2.98293 11.4999 3.16156L10.2072 3.90794ZM4.0957 14.8034V15.9861C4.0957 16.3433 4.2863 16.6735 4.5957 16.8521L6.07165 17.7042C6.00077 17.1477 5.96423 16.5804 5.96423 16.0046L5.96431 15.958C5.30823 15.624 4.68349 15.2373 4.0957 14.8034ZM17.826 17.7632L19.4042 16.8521C19.7136 16.6735 19.9042 16.3433 19.9042 15.9861V14.8024C19.2883 15.2572 18.6318 15.6601 17.9411 16.0049C17.9411 16.601 17.9019 17.1879 17.826 17.7632ZM15.8692 14.7215C14.6618 15.1606 13.3585 15.4002 11.9993 15.4002C10.6064 15.4002 9.27232 15.1486 8.0399 14.6885C8.37789 11.7688 9.82665 9.18767 11.9527 7.37853C14.0867 9.19447 15.5383 11.7883 15.8692 14.7215Z" fill="#667085"/>
+  <path d="M17.5802 4.93826C17.3031 5.41664 17.4667 6.02912 17.9455 6.30555L19.4042 7.14773C19.7136 7.32636 19.9042 7.65649 19.9042 8.01375V10.0381C19.9042 10.5904 20.3519 11.0381 20.9042 11.0381C21.4565 11.0381 21.9042 10.5904 21.9042 10.0381V8.01375C21.9042 6.94196 21.3324 5.95158 20.4042 5.41568L18.9455 4.57349C18.4677 4.29764 17.8567 4.46086 17.5802 4.93826Z" fill="#667085"/>
+  <path d="M15.029 20.5328C15.3051 21.0111 15.1412 21.6227 14.6629 21.8989L13.4999 22.5703C12.5717 23.1062 11.4281 23.1062 10.4999 22.5703L9.32635 21.8928C8.84757 21.6163 8.68393 21.0038 8.96106 20.5255C9.23761 20.0481 9.84855 19.8848 10.3264 20.1607L11.4999 20.8383C11.8093 21.0169 12.1905 21.0169 12.4999 20.8383L13.6629 20.1668C14.1412 19.8907 14.7528 20.0546 15.029 20.5328Z" fill="#667085"/>
+  <path d="M3.0957 11.0493C2.54342 11.0493 2.0957 10.6016 2.0957 10.0493V8.01375C2.0957 6.94195 2.6675 5.95158 3.5957 5.41568L5.03141 4.58677C5.5097 4.31063 6.12129 4.4745 6.39744 4.9528C6.67358 5.43109 6.5097 6.04268 6.03141 6.31882L4.5957 7.14773C4.2863 7.32636 4.0957 7.65649 4.0957 8.01375V10.0493C4.0957 10.6016 3.64799 11.0493 3.0957 11.0493Z" fill="#667085"/>
 </svg>
\ No newline at end of file
diff --git a/frontend/providers/aiproxy/ui/svg/icons/sidebar/price_a.svg b/frontend/providers/aiproxy/ui/svg/icons/sidebar/price_a.svg
index 439cb2df3f9d..2b83d4c9ba46 100644
--- a/frontend/providers/aiproxy/ui/svg/icons/sidebar/price_a.svg
+++ b/frontend/providers/aiproxy/ui/svg/icons/sidebar/price_a.svg
@@ -1,4 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M12 1.74146L12.0106 1.74157C13.279 1.75503 14.6237 2.0189 15.6856 2.69265C16.7971 3.39789 17.5621 4.53862 17.5621 6.11217C17.5621 6.63589 17.4244 7.11877 17.198 7.54981C19.7487 9.27232 21.6997 12.1734 21.6997 15.5219C21.6997 17.8845 20.5481 19.6231 18.7203 20.7231C16.9486 21.7893 14.5704 22.2473 12.0044 22.2586L11.9956 22.2586C9.42957 22.2474 7.05141 21.7893 5.27964 20.7231C3.45186 19.6231 2.30029 17.8845 2.30029 15.5219C2.30029 12.1734 4.25124 9.27232 6.80199 7.54981C6.57557 7.11877 6.43785 6.63589 6.43785 6.11217C6.43785 4.53862 7.2029 3.39789 8.31443 2.69265C9.37633 2.0189 10.721 1.75503 11.9894 1.74157L12 1.74146ZM9.38591 4.38141C8.79554 4.75599 8.43785 5.2883 8.43785 6.11217C8.43785 6.38561 8.56144 6.70693 8.88827 7.04772C9.3776 7.55795 9.27707 8.42328 8.6213 8.78099C6.15881 10.1242 4.30029 12.689 4.30029 15.5219C4.30029 17.1169 5.0254 18.2358 6.31088 19.0094C7.65156 19.8162 9.62165 20.2476 12 20.2586C14.3783 20.2476 16.3484 19.8162 17.6891 19.0094C18.9746 18.2358 19.6997 17.1169 19.6997 15.5219C19.6997 12.689 17.8412 10.1242 15.3787 8.78099C14.7229 8.42328 14.6224 7.55795 15.1117 7.04772C15.4386 6.70693 15.5621 6.38561 15.5621 6.11217C15.5621 5.2883 15.2045 4.75599 14.6141 4.38141C13.9762 3.97671 13.044 3.75409 12 3.74158C10.956 3.75409 10.0238 3.97671 9.38591 4.38141Z" fill="#111824"/>
-  <path d="M11.6249 10.3243C11.7538 9.976 12.2463 9.976 12.3752 10.3243L13.131 12.3669C13.1715 12.4764 13.2579 12.5628 13.3674 12.6033L15.4101 13.3591C15.7583 13.488 15.7583 13.9806 15.4101 14.1094L13.3674 14.8653C13.2579 14.9058 13.1715 14.9921 13.131 15.1016L12.3752 17.1443C12.2463 17.4925 11.7538 17.4925 11.6249 17.1443L10.869 15.1016C10.8285 14.9921 10.7422 14.9058 10.6327 14.8653L8.59001 14.1094C8.24176 13.9806 8.24176 13.488 8.59001 13.3591L10.6327 12.6033C10.7422 12.5628 10.8285 12.4764 10.869 12.3669L11.6249 10.3243Z" fill="#111824"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M13.4999 1.42951L16.4507 3.13311L16.4469 3.13961C16.4812 3.15364 16.5146 3.17004 16.547 3.18874C17.2705 3.60642 16.9895 4.88432 16.186 5.11258C15.2835 5.36892 14.427 5.7344 13.6315 6.19384C15.7742 8.16307 17.2699 10.8252 17.7637 13.8249C18.598 13.3303 19.3634 12.7317 20.042 12.0468C20.6273 11.4561 21.9042 11.8462 21.9042 12.6778V15.9861C21.9042 17.0579 21.3324 18.0483 20.4042 18.5842L16.7643 20.6856L16.7511 20.6628C16.065 20.841 15.2508 19.9791 15.4671 19.2565C15.701 18.4752 15.8528 17.6584 15.9125 16.8161C14.6751 17.1958 13.3611 17.4002 11.9993 17.4002C10.6025 17.4002 9.2559 17.1852 7.99082 16.7865C8.04754 17.618 8.19403 18.4248 8.42068 19.1974C8.63706 19.9349 7.79498 20.8053 7.10108 20.5875L7.09217 20.6028L3.5957 18.5842C2.6675 18.0483 2.0957 17.0579 2.0957 15.9861V12.6792C2.0957 11.8475 3.37237 11.4574 3.95779 12.0481C4.61299 12.7092 5.34914 13.2899 6.15014 13.7741C6.65229 10.7951 8.14326 8.15197 10.2738 6.19384C9.49517 5.74411 8.658 5.38441 7.77652 5.12898C6.9738 4.89636 6.69833 3.62437 7.42211 3.2065C7.43833 3.19713 7.45482 3.18834 7.47154 3.18013L7.4706 3.1785L10.4999 1.42951C11.4281 0.893613 12.5717 0.893614 13.4999 1.42951ZM10.2072 3.90794C10.8152 4.18926 11.3984 4.51508 11.9527 4.88121C12.5229 4.50453 13.1238 4.17052 13.7508 3.88373L12.4999 3.16156C12.1905 2.98293 11.8093 2.98293 11.4999 3.16156L10.2072 3.90794ZM4.0957 14.8034V15.9861C4.0957 16.3433 4.2863 16.6735 4.5957 16.8521L6.07165 17.7042C6.00077 17.1477 5.96423 16.5804 5.96423 16.0046L5.96431 15.958C5.30823 15.624 4.68349 15.2373 4.0957 14.8034ZM17.826 17.7632L19.4042 16.8521C19.7136 16.6735 19.9042 16.3433 19.9042 15.9861V14.8024C19.2883 15.2572 18.6318 15.6601 17.9411 16.0049C17.9411 16.601 17.9019 17.1879 17.826 17.7632ZM15.8692 14.7215C14.6618 15.1606 13.3585 15.4002 11.9993 15.4002C10.6064 15.4002 9.27232 15.1486 8.0399 14.6885C8.37789 11.7688 9.82665 9.18767 11.9527 7.37853C14.0867 9.19447 15.5383 11.7883 15.8692 14.7215Z" fill="#111824"/>
+  <path d="M17.5802 4.93826C17.3031 5.41664 17.4667 6.02912 17.9455 6.30555L19.4042 7.14773C19.7136 7.32636 19.9042 7.65649 19.9042 8.01375V10.0381C19.9042 10.5904 20.3519 11.0381 20.9042 11.0381C21.4565 11.0381 21.9042 10.5904 21.9042 10.0381V8.01375C21.9042 6.94196 21.3324 5.95158 20.4042 5.41568L18.9455 4.57349C18.4677 4.29764 17.8567 4.46086 17.5802 4.93826Z" fill="#111824"/>
+  <path d="M15.029 20.5328C15.3051 21.0111 15.1412 21.6227 14.6629 21.8989L13.4999 22.5703C12.5717 23.1062 11.4281 23.1062 10.4999 22.5703L9.32635 21.8928C8.84757 21.6163 8.68393 21.0038 8.96106 20.5255C9.23761 20.0481 9.84855 19.8848 10.3264 20.1607L11.4999 20.8383C11.8093 21.0169 12.1905 21.0169 12.4999 20.8383L13.6629 20.1668C14.1412 19.8907 14.7528 20.0546 15.029 20.5328Z" fill="#111824"/>
+  <path d="M3.0957 11.0493C2.54342 11.0493 2.0957 10.6016 2.0957 10.0493V8.01375C2.0957 6.94195 2.6675 5.95158 3.5957 5.41568L5.03141 4.58677C5.5097 4.31063 6.12129 4.4745 6.39744 4.9528C6.67358 5.43109 6.5097 6.04268 6.03141 6.31882L4.5957 7.14773C4.2863 7.32636 4.0957 7.65649 4.0957 8.01375V10.0493C4.0957 10.6016 3.64799 11.0493 3.0957 11.0493Z" fill="#111824"/>
 </svg>
\ No newline at end of file
diff --git a/frontend/providers/aiproxy/utils/auth.ts b/frontend/providers/aiproxy/utils/auth.ts
deleted file mode 100644
index 59e9e2c0584d..000000000000
--- a/frontend/providers/aiproxy/utils/auth.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import jwt from 'jsonwebtoken'
-
-// Token payload 类型定义
-interface AppTokenPayload {
-  workspaceUid: string
-  workspaceId: string
-  regionUid: string
-  userCrUid: string
-  userCrName: string
-  userId: string
-  userUid: string
-  iat: number
-  exp: number
-}
-
-export async function parseJwtToken(headers: Headers): Promise<string> {
-  try {
-    const token = headers.get('authorization')
-    if (!token) {
-      return Promise.reject('Token is missing')
-    }
-
-    const decoded = jwt.verify(
-      token,
-      global.AppConfig?.auth.appTokenJwtKey || ''
-    ) as AppTokenPayload
-    const now = Math.floor(Date.now() / 1000)
-    if (decoded.exp && decoded.exp < now) {
-      return Promise.reject('Token expired')
-    }
-    if (!decoded.workspaceId) {
-      return Promise.reject('Invalid token')
-    }
-    return decoded.workspaceId
-  } catch (error) {
-    console.error('Token parsing error:', error)
-    return Promise.reject('Invalid token')
-  }
-}
diff --git a/frontend/providers/aiproxy/utils/backend/auth.ts b/frontend/providers/aiproxy/utils/backend/auth.ts
new file mode 100644
index 000000000000..a5280fd26ebe
--- /dev/null
+++ b/frontend/providers/aiproxy/utils/backend/auth.ts
@@ -0,0 +1,115 @@
+import jwt from 'jsonwebtoken'
+
+// Token payload
+interface AppTokenPayload {
+  workspaceUid: string
+  workspaceId: string
+  regionUid: string
+  userCrUid: string
+  userCrName: string
+  userId: string
+  userUid: string
+  iat: number
+  exp: number
+}
+
+type RealNameInfoResponse = {
+  data: {
+    userID: string
+    isRealName: boolean
+  }
+  error?: string
+  message: string
+}
+
+export async function parseJwtToken(headers: Headers): Promise<string> {
+  try {
+    const token = headers.get('authorization')
+    if (!token) {
+      return Promise.reject('Auth: Token is missing')
+    }
+
+    const decoded = jwt.verify(
+      token,
+      global.AppConfig?.auth.appTokenJwtKey || ''
+    ) as AppTokenPayload
+    const now = Math.floor(Date.now() / 1000)
+    if (decoded.exp && decoded.exp < now) {
+      return Promise.reject('Auth: Token expired')
+    }
+    if (!decoded.workspaceId) {
+      return Promise.reject('Auth: Invalid token')
+    }
+    return decoded.workspaceId
+  } catch (error) {
+    console.error('Auth: Token parsing error:', error)
+    return Promise.reject('Auth: Invalid token')
+  }
+}
+
+export async function checkSealosUserIsRealName(headers: Headers): Promise<boolean> {
+  if (!global.AppConfig?.backend.accountServer) {
+    console.warn('CheckSealosUserIsRealName: Account server is not set')
+    return true
+  }
+
+  if (!global.AppConfig?.auth.accountServerTokenJwtKey) {
+    console.warn('CheckSealosUserIsRealName: Account server token jwt key is not set')
+    return true
+  }
+
+  try {
+    const token = headers.get('authorization')
+    if (!token) {
+      console.error('CheckSealosUserIsRealName: Token is missing')
+      return false
+    }
+
+    const decoded = jwt.verify(
+      token,
+      global.AppConfig?.auth.appTokenJwtKey || ''
+    ) as AppTokenPayload
+    const now = Math.floor(Date.now() / 1000)
+    if (decoded.exp && decoded.exp < now) {
+      console.error('CheckSealosUserIsRealName: Token expired')
+      return false
+    }
+
+    if (!decoded.userUid && !decoded.userId) {
+      console.error('CheckSealosUserIsRealName: User uid or user id is missing, token is invalid')
+      return false
+    }
+
+    const accountServerToken = jwt.sign(
+      {
+        userUid: decoded.userUid,
+        userId: decoded.userId
+      },
+      global.AppConfig?.auth.accountServerTokenJwtKey,
+      { expiresIn: '5d' }
+    )
+
+    const response = await fetch(
+      `${global.AppConfig?.backend.accountServer}/account/v1alpha1/real-name-info`,
+      {
+        method: 'POST',
+        headers: {
+          Authorization: `Bearer ${accountServerToken}`,
+          'Content-Type': 'application/json',
+          'Accept-Encoding': 'gzip,deflate,compress'
+        },
+        cache: 'no-store'
+      }
+    )
+    const result: RealNameInfoResponse = await response.json()
+    if (result.error) {
+      console.error(result.error)
+      return false
+    }
+
+    return result.data.isRealName
+  } catch (error) {
+    console.error('CheckSealosUserIsRealName: ', error)
+    return false
+  }
+}
diff --git a/frontend/providers/aiproxy/utils/backend/isAdmin.ts b/frontend/providers/aiproxy/utils/backend/isAdmin.ts
new file mode 100644
index 000000000000..0a3a054fd7fc
--- /dev/null
+++ b/frontend/providers/aiproxy/utils/backend/isAdmin.ts
@@ -0,0 +1,14 @@
+export async function isAdmin(namespace: string): Promise<string> {
+  if (!namespace) {
+    return Promise.reject('Admin: Invalid namespace')
+  }
+  try {
+    if (global.AppConfig?.adminNameSpace.includes(namespace)) {
+      return namespace
+    }
+    return Promise.reject('Admin: Invalid namespace')
+  } catch (error) {
+    console.error('Admin: check namespace error:', error)
+    return Promise.reject('Admin: Invalid namespace')
+  }
+}
diff --git a/frontend/providers/aiproxy/utils/common.ts b/frontend/providers/aiproxy/utils/common.ts
new file mode 100644
index 000000000000..25743fc85663
--- /dev/null
+++ b/frontend/providers/aiproxy/utils/common.ts
@@ -0,0 +1,36 @@
+// 根据枚举值获取枚举键
+export const getEnumKeyByValue = <T extends { [key: string]: string }>(
+  enumObj: T,
+  value: string
+): keyof T | undefined => {
+  const keys = Object.keys(enumObj) as Array<keyof T>
+  return keys.find((key) => enumObj[key] === value)
+}
+
+/**
+ * 获取翻译，如果翻译不存在则返回指定的默认翻译
+ * @param key - 翻译键
+ * @param defaultKey - 默认翻译键
+ * @param t - i18n 翻译函数
+ */
+export const getTranslationWithFallback = (
+  key: string,
+  defaultKey: string,
+  t: (key: string) => string
+): string => {
+  const translated = t(key)
+  return translated === key ? t(defaultKey) : translated
+}
+
+// 下载 JSON 文件
+export const downloadJson = <T>(data: T, filename: string): void => {
+  const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })
+  const url = URL.createObjectURL(blob)
+  const link = document.createElement('a')
+  link.href = url
+  link.download = `${filename}_${new Date().toISOString()}.json`
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+  URL.revokeObjectURL(url)
+}
diff --git a/frontend/providers/aiproxy/utils/frontend/request.ts b/frontend/providers/aiproxy/utils/frontend/request.ts
new file mode 100644
index 000000000000..2b7561b5a1bc
--- /dev/null
+++ b/frontend/providers/aiproxy/utils/frontend/request.ts
@@ -0,0 +1,151 @@
+import { ApiResp } from '@/types/api'
+import axios, { InternalAxiosRequestConfig, AxiosResponse, AxiosRequestConfig } from 'axios'
+import { getAppToken } from './user'
+
+const request = axios.create({
+  baseURL: '/',
+  withCredentials: true,
+  timeout: 60000
+})
+
+// request interceptor
+request.interceptors.request.use(
+  (config: InternalAxiosRequestConfig) => {
+    // auto append service prefix
+    if (config.url && !config.url.startsWith('/api/')) {
+      config.url = `/api${config.url}`
+    }
+
+    // ensure headers exists
+    config.headers = config.headers || {}
+
+    // append user session to Authorization header
+    const appToken = getAppToken()
+    if (appToken) {
+      config.headers['Authorization'] = appToken
+    }
+
+    // set default Content-Type
+    if (!config.headers['Content-Type']) {
+      config.headers['Content-Type'] = 'application/json'
+    }
+
+    // 如果是 FormData，删除 Content-Type，让浏览器自动设置
+    if (config.data instanceof FormData) {
+      delete config.headers['Content-Type']
+    }
+
+    return config
+  },
+  (error: any) => {
+    // handle request interceptor error
+    console.error('Request Interceptor Error:', error)
+    error.data = {
+      msg: 'An error occurred while making the request. Please try again later.'
+    }
+    return Promise.reject(error) // use reject to catch error in subsequent process
+  }
+)
+
+request.interceptors.response.use(
+  (response: AxiosResponse) => {
+    // only process status code 200
+    const { data } = response.data
+    return data
+  },
+  (error: any) => {
+    if (axios.isCancel(error)) {
+      return Promise.reject(new Error(`cancel request: ${error.message || error}`))
+    }
+
+    const apiResponse = error?.response?.data as ApiResp
+    if (apiResponse?.error || apiResponse?.message) {
+      error.message = apiResponse.error || apiResponse.message
+    } else {
+      error.message = 'An unknown error occurred. Please try again later.'
+    }
+
+    return Promise.reject(error)
+  }
+)
+
+/**
+ * GET request
+ * @param url - request url
+ * @param data - request params (will be converted to query string)
+ * @param config - axios config
+ * @returns Promise<T>
+ */
+export function GET<T = any>(
+  url: string,
+  data?: { [key: string]: any },
+  config?: AxiosRequestConfig
+): Promise<T> {
+  return request.get(url, {
+    params: data,
+    ...config
+  })
+}
+
+/**
+ * POST request
+ * @param url - request url
+ * @param data - request body data
+ * @param config - axios config
+ * @returns Promise<T>
+ */
+export function POST<T = any>(
+  url: string,
+  data?: { [key: string]: any },
+  config?: AxiosRequestConfig
+): Promise<T> {
+  return request.post(url, data, config)
+}
+
+/**
+ * DELETE request
+ * @param url - request url
+ * @param data - request params (will be converted to query string)
+ * @param config - axios config
+ * @returns Promise<T>
+ */
+export function DELETE<T = any>(
+  url: string,
+  data?: { [key: string]: any },
+  config?: AxiosRequestConfig
+): Promise<T> {
+  return request.delete(url, {
+    params: data,
+    ...config
+  })
+}
+
+/**
+ * PATCH request
+ * @param url - request url
+ * @param data - request body data
+ * @param config - axios config
+ * @returns Promise<T>
+ */
+export function PATCH<T = any>(
+  url: string,
+  data?: { [key: string]: any },
+  config?: AxiosRequestConfig
+): Promise<T> {
+  return request.patch(url, data, config)
+}
+
+/**
+ * PUT request
+ * @param url - request url
+ * @param data - request body data
+ * @param config - axios config
+ * @returns Promise<T>
+ */
+export function PUT<T = any>(
+  url: string,
+  data?: { [key: string]: any },
+  config?: AxiosRequestConfig
+): Promise<T> {
+  return request.put(url, data, config)
+}
diff --git a/frontend/providers/aiproxy/utils/frontend/user.ts b/frontend/providers/aiproxy/utils/frontend/user.ts
new file mode 100644
index 000000000000..d95f55d156ed
--- /dev/null
+++ b/frontend/providers/aiproxy/utils/frontend/user.ts
@@ -0,0 +1,15 @@
+import { useSessionStore } from '@/store/session'
+
+export const getAppToken = () => {
+  let token = process.env.NODE_ENV === 'development' ? process.env.NEXT_PUBLIC_MOCK_USER || '' : ''
+
+  if (!token) {
+    // 从 store 获取 token
+    const { session } = useSessionStore.getState()
+    if (session?.token) {
+      token = session.token
+    }
+  }
+
+  return token
+}
diff --git a/frontend/providers/aiproxy/utils/request.ts b/frontend/providers/aiproxy/utils/request.ts
deleted file mode 100644
index f559b7e801bd..000000000000
--- a/frontend/providers/aiproxy/utils/request.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-import { ApiResp } from '@/types/api'
-import axios, {
-  InternalAxiosRequestConfig,
-  AxiosHeaders,
-  AxiosResponse,
-  AxiosRequestConfig
-} from 'axios'
-import { getUserSession } from './user'
-
-const request = axios.create({
-  baseURL: '/',
-  withCredentials: true,
-  timeout: 60000
-})
-
-// request interceptor
-request.interceptors.request.use(
-  (config: InternalAxiosRequestConfig) => {
-    // auto append service prefix
-    if (config.url && !config.url?.startsWith('/api/')) {
-      config.url = '' + config.url
-    }
-    let _headers: AxiosHeaders = config.headers
-
-    //获取token，并将其添加至请求头中
-    _headers['Authorization'] = getUserSession()
-
-    if (!config.headers || config.headers['Content-Type'] === '') {
-      _headers['Content-Type'] = 'application/json'
-    }
-
-    config.headers = _headers
-    return config
-  },
-  (error: any) => {
-    error.data = {}
-    error.data.msg = '服务器异常，请联系管理员！'
-    return Promise.resolve(error)
-  }
-)
-
-// response interceptor
-request.interceptors.response.use(
-  (response: AxiosResponse) => {
-    const { status, data } = response
-    if (status < 200 || status >= 300) {
-      return Promise.reject(status + ', ' + typeof data === 'string' ? data : String(data))
-    }
-
-    const apiResp = data as ApiResp
-    if (apiResp.code < 200 || apiResp.code >= 400) {
-      return Promise.reject(apiResp.code + ':' + apiResp.message)
-    }
-
-    response.data = apiResp.data
-    return response.data
-  },
-  (error: any) => {
-    if (axios.isCancel(error)) {
-      return Promise.reject('cancel request' + String(error))
-    } else {
-      error.errMessage = '请求超时或服务器异常，请检查网络或联系管理员！'
-    }
-    return Promise.reject(error)
-  }
-)
-
-export function GET<T = any>(
-  url: string,
-  data?: { [key: string]: any },
-  config?: AxiosRequestConfig
-): Promise<T> {
-  return request.get(url, {
-    params: data,
-    ...config
-  })
-}
-
-export function POST<T = any>(
-  url: string,
-  data?: { [key: string]: any },
-  config?: AxiosRequestConfig
-): Promise<T> {
-  return request.post(url, data, config)
-}
-
-export function DELETE<T = any>(
-  url: string,
-  data?: { [key: string]: any },
-  config?: AxiosRequestConfig
-): Promise<T> {
-  return request.delete(url, {
-    params: data,
-    ...config
-  })
-}
diff --git a/frontend/providers/aiproxy/utils/user.ts b/frontend/providers/aiproxy/utils/user.ts
deleted file mode 100644
index c60c02883dcc..000000000000
--- a/frontend/providers/aiproxy/utils/user.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export const getUserSession = () => {
-  let token: string =
-    process.env.NODE_ENV === 'development' ? process.env.NEXT_PUBLIC_MOCK_USER || '' : ''
-
-  try {
-    const store = localStorage.getItem('session')
-    if (!token && store) {
-      token = JSON.parse(store)?.token
-    }
-  } catch (err) {
-    err
-  }
-  return token
-}
diff --git a/frontend/providers/applaunchpad/data/config.yaml b/frontend/providers/applaunchpad/data/config.yaml
index 998a3f0d05e7..c9174559f93d 100644
--- a/frontend/providers/applaunchpad/data/config.yaml
+++ b/frontend/providers/applaunchpad/data/config.yaml
@@ -19,6 +19,8 @@ launchpad:
       url: http://launchpad-monitor.sealos.svc.cluster.local:8428
     billing:
       url: "http://account-service.account-system.svc:2333"
+    log:
+      url: "http://service-vlogs.sealos.svc.cluster.local:8428"
   appResourceFormSliderConfig:
     default:
       cpu: [100, 200, 500, 1000, 2000, 3000, 4000, 8000]
diff --git a/frontend/providers/applaunchpad/package.json b/frontend/providers/applaunchpad/package.json
index 761f2dcabe99..553a4f24d5a0 100644
--- a/frontend/providers/applaunchpad/package.json
+++ b/frontend/providers/applaunchpad/package.json
@@ -23,9 +23,11 @@
     "@sealos/driver": "workspace:^",
     "@sealos/ui": "workspace:^",
     "@tanstack/react-query": "^4.35.3",
+    "@tanstack/react-table": "^8.10.7",
     "ansi_up": "^5.2.1",
     "axios": "^1.5.1",
     "base64-stream": "^1.0.0",
+    "date-fns": "^2.30.0",
     "dayjs": "^1.11.10",
     "decimal.js": "^10.4.3",
     "dns": "^0.2.2",
@@ -45,6 +47,7 @@
     "nprogress": "^0.2.0",
     "prettier": "^2.8.8",
     "react": "18.2.0",
+    "react-day-picker": "^8.8.2",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.46.2",
     "react-i18next": "^14.1.2",
diff --git a/frontend/providers/applaunchpad/public/locales/en/common.json b/frontend/providers/applaunchpad/public/locales/en/common.json
index 0b7147775e8f..dc5a9fdd5113 100644
--- a/frontend/providers/applaunchpad/public/locales/en/common.json
+++ b/frontend/providers/applaunchpad/public/locales/en/common.json
@@ -51,8 +51,8 @@
   "ConfigMap Path Conflict": "ConfigMap Path Conflict",
   "ConfigMap Tip": "ConfigMap",
   "Configurable number of instances or automatic horizontal scaling": "Configurable replica count and auto horizontal scaling",
-  "Configuration File": "Configmap",
-  "Confirm": "Yes",
+  "Configuration File": "Configmaps",
+  "Confirm": "Confirm",
   "Confirm deletion": "Yes",
   "Confirm Deploy Application?": "Are you sure you want to deploy the application?",
   "Confirm to restart this application?": "Are you sure you want to update the application?",
@@ -86,7 +86,7 @@
   "Edit Env Variable": "Edit Environment Variables",
   "Edit Environment Variables": "Edit Environment Variables",
   "Env Placeholder": "one per line, key and value separated by colon or equals sign, e.g.:\nmongoUrl=127.0.0.1:8000\nredisUrl:127.0.0.0:8001\n-env1 =test",
-  "Environment Variables": "Environment",
+  "Environment Variables": "Environment Variables",
   "Export": "Export",
   "Export Domain": "Assigned Domain",
   "file": "File",
@@ -163,7 +163,7 @@
   "please enter app name": "please enter: {{appName}}",
   "Pod": "Pod",
   "Pod Name": "Pod Name",
-  "Pods List": "Pods List",
+  "Pods List": "Pod List",
   "Port": "Port",
   "private": "private",
   "Private": "Private",
@@ -197,7 +197,7 @@
   "Stateless": "Stateless",
   "Status": "Status",
   "storage": "Storage",
-  "Storage": "Storage",
+  "Storage": "Mounted Volumes",
   "Storage path can not empty": "Storage mount path is required",
   "Storage Range": "Storage Range",
   "Storage Value can not empty": "Storage size is required",
@@ -257,7 +257,7 @@
   "total_price_tip": "The estimated cost does not include port fees and traffic fees, and is subject to actual usage.",
   "nodeports": "NodePorts",
   "streaming_logs": "Streaming logs",
-  "within_5_minutes": "Within 5 minutes",
+  "within_5_minute": "Within 5 minute",
   "within_1_hour": "Within 1 hour",
   "within_1_day": "Within 1 day",
   "terminated_logs": "Terminated logs",
@@ -276,5 +276,46 @@
     "add_configmap": "Add Configmaps",
     "storage_path_placeholder": "For Example: /data"
   },
-  "guide_deploy_button": "Complete creation"
-}
\ No newline at end of file
+  "guide_deploy_button": "Complete creation",
+  "filter": "Filter",
+  "start": "Start",
+  "end": "End",
+  "time_zone": "Time Zone",
+  "recently": "Last",
+  "minute": "minutes",
+  "day": "days",
+  "hour": "hours",
+  "time": "Range",
+  "log_number": "Log Number",
+  "close": "Off",
+  "normal_filter": "Normal",
+  "advanced_filter": "Advance",
+  "json_mode": "JSON Mode",
+  "only_stderr": "Stderr Only",
+  "keyword": "Keywords",
+  "search": "Search",
+  "equal": "equal",
+  "greater_than": "Greater than",
+  "less_than": "Less than",
+  "field_name": "Select Field",
+  "value": "Enter Value",
+  "logNumber": "Log Counts",
+  "overview": "Overview",
+  "monitor": "Monitors",
+  "logs": "Logs",
+  "application_source": "Source",
+  "contains": "contains",
+  "not_contains": "not contains",
+  "visible": "Visable",
+  "hidden": "Hidden",
+  "export_log": "Export",
+  "no_data_available": "No data available",
+  "all": "All",
+  "hour-singular": "hour",
+  "not_equal": "not",
+  "field_settings": "Field Setting",
+  "selected": "Selected",
+  "please_select": "Please Select",
+  "refetching_success": "Refresh Successful",
+  "refresh": "refresh"
+}
diff --git a/frontend/providers/applaunchpad/public/locales/zh/common.json b/frontend/providers/applaunchpad/public/locales/zh/common.json
index da5b88f3929c..107bf9a5b46f 100644
--- a/frontend/providers/applaunchpad/public/locales/zh/common.json
+++ b/frontend/providers/applaunchpad/public/locales/zh/common.json
@@ -30,7 +30,7 @@
   "Auto scaling": "弹性伸缩",
   "Balance": "余额",
   "Basic Config": "基础配置",
-  "Basic Information": "基本信息",
+  "Basic Information": "基础信息",
   "Can help you deploy any Docker image": "丰富的镜像仓库，支持任意 Docker 镜像",
   "Can not change storage path": "不允许修改挂载路径",
   "Cancel": "取消",
@@ -162,8 +162,8 @@
   "Please enter": "请输入",
   "please enter app name": "请输入：{{appName}}",
   "Pod": "实例",
-  "Pod Name": "实例名",
-  "Pods List": "实例列表",
+  "Pod Name": "Pod 名称",
+  "Pods List": "Pod 列表",
   "Port": "端口",
   "private": "私有",
   "Private": "私有",
@@ -257,7 +257,7 @@
   "total_price_tip": "预估费用不包括端口费用和流量费用,以实际使用为准",
   "nodeports": "外网端口",
   "streaming_logs": "实时日志",
-  "within_5_minutes": "五分钟内",
+  "within_5_minute": "五分钟内",
   "within_1_hour": "一小时内",
   "within_1_day": "一天内",
   "terminated_logs": "中断前",
@@ -277,5 +277,45 @@
     "add_configmap": "新增配置文件",
     "storage_path_placeholder": "如：/data"
   },
-  "guide_deploy_button": "完成创建"
-}
\ No newline at end of file
+  "guide_deploy_button": "完成创建",
+  "filter": "筛选",
+  "start": "开始",
+  "end": "结束",
+  "time_zone": "时区",
+  "recently": "最近",
+  "minute": "分钟",
+  "hour": "小时",
+  "day": "天",
+  "time": "时间",
+  "log_number": "日志数",
+  "close": "关闭",
+  "normal_filter": "普通筛选",
+  "advanced_filter": "高级筛选",
+  "json_mode": "JSON模式",
+  "only_stderr": "只看 Stderr",
+  "keyword": "关键词",
+  "search": "查询",
+  "field_name": "字段名",
+  "equal": "等于",
+  "value": "值",
+  "logNumber": "日志数量",
+  "overview": "概览",
+  "monitor": "监控",
+  "logs": "日志",
+  "application_source": "来源",
+  "contains": "包含",
+  "not_contains": "不包含",
+  "visible": "可见",
+  "hidden": "隐藏",
+  "piece": "个",
+  "export_log": "导出日志",
+  "no_data_available": "暂无数据",
+  "all": "全部",
+  "hour-singular": "小时",
+  "not_equal": "不等于",
+  "field_settings": "字段设置",
+  "selected": "已选中",
+  "please_select": "请选择",
+  "refetching_success": "刷新成功",
+  "refresh": "刷新"
+}
diff --git a/frontend/providers/applaunchpad/src/api/app.ts b/frontend/providers/applaunchpad/src/api/app.ts
index b18c98e2d7cd..102464981652 100644
--- a/frontend/providers/applaunchpad/src/api/app.ts
+++ b/frontend/providers/applaunchpad/src/api/app.ts
@@ -9,6 +9,8 @@ import {
 } from '@/utils/adapt';
 import type { AppPatchPropsType, PodDetailType } from '@/types/app';
 import { MonitorDataResult, MonitorQueryKey } from '@/types/monitor';
+import { LogQueryPayload } from '@/pages/api/log/queryLogs';
+import { PodListQueryPayload } from '@/pages/api/log/queryPodList';
 
 export const postDeployApp = (yamlList: string[]) => POST('/api/applyApp', { yamlList });
 
@@ -58,4 +60,11 @@ export const getAppMonitorData = (payload: {
   queryName: string;
   queryKey: keyof MonitorQueryKey;
   step: string;
+  start?: number;
+  end?: number;
 }) => GET<MonitorDataResult[]>(`/api/monitor/getMonitorData`, payload);
+
+export const getAppLogs = (payload: LogQueryPayload) => POST<string>('/api/log/queryLogs', payload);
+
+export const getLogPodList = (payload: PodListQueryPayload) =>
+  POST<string[]>('/api/log/queryPodList', payload);
diff --git a/frontend/providers/applaunchpad/src/components/AdvancedSelect/index.tsx b/frontend/providers/applaunchpad/src/components/AdvancedSelect/index.tsx
new file mode 100644
index 000000000000..e90f931ad73b
--- /dev/null
+++ b/frontend/providers/applaunchpad/src/components/AdvancedSelect/index.tsx
@@ -0,0 +1,267 @@
+'use client';
+
+import {
+  Menu,
+  Box,
+  MenuList,
+  MenuItem,
+  Button,
+  useDisclosure,
+  useOutsideClick,
+  MenuButton,
+  Flex,
+  Checkbox
+} from '@chakra-ui/react';
+import { useTranslation } from 'next-i18next';
+import { ChevronDownIcon } from '@chakra-ui/icons';
+import React, { useRef, forwardRef, useMemo } from 'react';
+import type { BoxProps, ButtonProps } from '@chakra-ui/react';
+
+export interface ListItem {
+  label: string | React.ReactNode;
+  value: string;
+  checked: boolean;
+}
+
+interface Props extends ButtonProps {
+  width?: string;
+  height?: string;
+  value?: string;
+  placeholder?: string;
+  list: ListItem[];
+  onchange?: (val: string) => void;
+  onCheckboxChange?: (list: ListItem[]) => void;
+  isInvalid?: boolean;
+  boxStyle?: BoxProps;
+  checkBoxMode?: boolean;
+}
+
+const AdvancedSelect = (
+  {
+    placeholder,
+    leftIcon,
+    value,
+    width = 'auto',
+    height = '30px',
+    list,
+    onchange,
+    onCheckboxChange,
+    isInvalid,
+    boxStyle,
+    checkBoxMode = false,
+    ...props
+  }: Props,
+  selectRef: any
+) => {
+  const { t } = useTranslation();
+
+  const ref = useRef<HTMLButtonElement>(null);
+  const SelectRef = useRef<HTMLDivElement>(null);
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  useOutsideClick({
+    ref: SelectRef,
+    handler: () => {
+      onClose();
+    }
+  });
+
+  const displayText = useMemo(() => {
+    const selectedCount = checkBoxMode ? list.filter((item) => item.checked).length : 0;
+    const activeMenu = list.find((item) => item.value === value);
+
+    if (!checkBoxMode) {
+      return activeMenu ? activeMenu.label : placeholder;
+    }
+    if (selectedCount === 0) {
+      return placeholder;
+    }
+    if (selectedCount === list.length) {
+      return t('all');
+    }
+    return `${t('selected')} ${selectedCount}`;
+  }, [checkBoxMode, list, t, value, placeholder]);
+
+  return (
+    <Menu
+      autoSelect={false}
+      isOpen={isOpen}
+      onOpen={onOpen}
+      onClose={onClose}
+      closeOnSelect={false}
+    >
+      <Box ref={SelectRef} position={'relative'} {...boxStyle}>
+        <MenuButton
+          as={Button}
+          leftIcon={leftIcon}
+          rightIcon={<ChevronDownIcon />}
+          width={width}
+          height={height}
+          ref={ref}
+          display={'flex'}
+          alignItems={'center'}
+          justifyContent={'center'}
+          border={'1px solid #E8EBF0'}
+          borderRadius={'md'}
+          fontSize={'12px'}
+          fontWeight={'400'}
+          color={'grayModern.900'}
+          variant={'outline'}
+          _hover={{
+            borderColor: 'brightBlue.300',
+            bg: 'grayModern.50'
+          }}
+          _active={{
+            transform: ''
+          }}
+          boxShadow={'none'}
+          {...(isOpen
+            ? {
+                // boxShadow: '0px 0px 0px 2.4px rgba(33, 155, 244, 0.15)',
+                borderColor: 'brightBlue.500',
+                bg: '#FFF'
+              }
+            : {
+                bg: '#F7F8FA',
+                borderColor: isInvalid ? 'red' : ''
+              })}
+          onClick={() => {
+            isOpen ? onClose() : onOpen();
+          }}
+          {...props}
+        >
+          <Flex
+            justifyContent={'flex-start'}
+            width="100%"
+            alignItems={'center'}
+            {...(placeholder ? { color: 'grayModern.500' } : {})}
+          >
+            {displayText}
+          </Flex>
+        </MenuButton>
+
+        <MenuList
+          minW={(() => {
+            const w = ref.current?.clientWidth;
+            if (w) {
+              return `${w}px !important`;
+            }
+            return Array.isArray(width)
+              ? width.map((item) => `${item} !important`)
+              : `${width} !important`;
+          })()}
+          p={'6px'}
+          borderRadius={'base'}
+          border={'1px solid #E8EBF0'}
+          boxShadow={
+            '0px 4px 10px 0px rgba(19, 51, 107, 0.10), 0px 0px 1px 0px rgba(19, 51, 107, 0.10)'
+          }
+          zIndex={99}
+          overflow={'overlay'}
+          maxH={'300px'}
+        >
+          {checkBoxMode && (
+            <MenuItem
+              borderRadius={'4px'}
+              _hover={{
+                bg: 'rgba(17, 24, 36, 0.05)',
+                color: 'brightBlue.600'
+              }}
+              p={'6px'}
+              w={'100%'}
+            >
+              <Checkbox
+                w={'100%'}
+                isChecked={list.every((item) => item.checked)}
+                onChange={() => {
+                  if (onCheckboxChange) {
+                    const newList = list.map((item) => ({
+                      ...item,
+                      checked: !list.every((item) => item.checked)
+                    }));
+                    onCheckboxChange(newList);
+                  }
+                }}
+                sx={{
+                  'span.chakra-checkbox__control[data-checked]': {
+                    background: '#f0f4ff',
+                    border: '1px solid #219bf4 ',
+                    boxShadow: '0px 0px 0px 2.4px rgba(33, 155, 244, 0.15)',
+                    color: '#219bf4',
+                    borderRadius: '4px'
+                  },
+                  'span.chakra-checkbox__control': {
+                    background: 'white',
+                    border: '1px solid #E8EBF0',
+                    borderRadius: '4px'
+                  }
+                }}
+              >
+                {t('all')}
+              </Checkbox>
+            </MenuItem>
+          )}
+
+          {list.map((item, index) => (
+            <MenuItem
+              key={item.value + index}
+              {...(!checkBoxMode && value === item.value
+                ? {
+                    color: 'brightBlue.600'
+                  }
+                : {})}
+              borderRadius={'4px'}
+              _hover={{
+                bg: 'rgba(17, 24, 36, 0.05)',
+                color: 'brightBlue.600'
+              }}
+              p={'6px'}
+              onClick={() => {
+                if (onchange && value !== item.value) {
+                  onchange(item.value);
+                }
+              }}
+            >
+              {checkBoxMode ? (
+                <Checkbox
+                  isChecked={item.checked}
+                  key={item.value}
+                  onChange={() => {
+                    if (onCheckboxChange) {
+                      const newList = list.map((listItem) =>
+                        listItem.value === item.value
+                          ? { ...listItem, checked: !listItem.checked }
+                          : listItem
+                      );
+                      onCheckboxChange(newList);
+                    }
+                  }}
+                  sx={{
+                    'span.chakra-checkbox__control[data-checked]': {
+                      background: '#f0f4ff ',
+                      border: '1px solid #219bf4 ',
+                      boxShadow: '0px 0px 0px 2.4px rgba(33, 155, 244, 0.15)',
+                      color: '#219bf4',
+                      borderRadius: '4px'
+                    },
+                    'span.chakra-checkbox__control': {
+                      background: 'white',
+                      border: '1px solid #E8EBF0',
+                      borderRadius: '4px'
+                    }
+                  }}
+                >
+                  {item.label}
+                </Checkbox>
+              ) : (
+                <Box>{item.label}</Box>
+              )}
+            </MenuItem>
+          ))}
+        </MenuList>
+      </Box>
+    </Menu>
+  );
+};
+
+export default forwardRef(AdvancedSelect);
diff --git a/frontend/providers/applaunchpad/src/components/BaseTable/SwitchPage.tsx b/frontend/providers/applaunchpad/src/components/BaseTable/SwitchPage.tsx
new file mode 100644
index 000000000000..fe1c44dd4e20
--- /dev/null
+++ b/frontend/providers/applaunchpad/src/components/BaseTable/SwitchPage.tsx
@@ -0,0 +1,158 @@
+import { Button, ButtonProps, Flex, FlexProps, Text } from '@chakra-ui/react';
+import { useTranslation } from 'next-i18next';
+
+import { Icon, IconProps } from '@chakra-ui/react';
+
+export function ToLeftIcon(props: IconProps) {
+  return (
+    <Icon
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="12px"
+      height="12px"
+      viewBox="0 0 12 12"
+      fill="none"
+    >
+      <path
+        d="M5.414 5.99999L7.889 8.47499L7.182 9.18199L4 5.99999L7.182 2.81799L7.889 3.52499L5.414 5.99999Z"
+        fill="#111824"
+      />
+    </Icon>
+  );
+}
+
+export function RightFirstIcon(props: IconProps) {
+  return (
+    <Icon
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="12px"
+      height="12px"
+      viewBox="0 0 12 12"
+      fill="none"
+    >
+      <path
+        d="M2.79492 3.705L5.08992 6L2.79492 8.295L3.49992 9L6.49992 6L3.49992 3L2.79492 3.705ZM7.99992 3H8.99992V9H7.99992V3Z"
+        fill="#111824"
+      />
+    </Icon>
+  );
+}
+
+export function SwitchPage({
+  totalPage,
+  totalItem,
+  pageSize,
+  currentPage,
+  setCurrentPage,
+  isPreviousData,
+  ...props
+}: {
+  currentPage: number;
+  totalPage: number;
+  totalItem: number;
+  pageSize: number;
+  isPreviousData?: boolean;
+  setCurrentPage: (idx: number) => void;
+} & FlexProps) {
+  const { t } = useTranslation();
+  const switchStyle: ButtonProps = {
+    width: '24px',
+    height: '24px',
+    minW: '0',
+    background: 'grayModern.250',
+    flexGrow: '0',
+    borderRadius: 'full',
+    // variant:'unstyled',
+    _hover: {
+      background: 'grayModern.150',
+      minW: '0'
+    },
+    _disabled: {
+      borderRadius: 'full',
+      background: 'grayModern.150',
+      cursor: 'not-allowed',
+      minW: '0'
+    }
+  };
+  return (
+    <Flex minW="370px" h="32px" align={'center'} mb={'12px'} mr={'12px'} fontSize="14px" {...props}>
+      <Text fontSize="14px" color={'grayModern.500'}>
+        {t('Total')}:
+      </Text>
+      <Flex mr="25px" color={'grayModern.500'}>
+        {totalItem}
+      </Flex>
+      <Flex gap={'8px'}>
+        <Button
+          {...switchStyle}
+          isDisabled={currentPage === 1}
+          bg={currentPage !== 1 ? 'grayModern.250' : 'grayModern.150'}
+          p="0"
+          minW="0"
+          boxSize="24px"
+          onClick={(e) => {
+            e.preventDefault();
+            setCurrentPage(1);
+          }}
+        >
+          <RightFirstIcon transform={'rotate(-180deg)'} />
+        </Button>
+        <Button
+          {...switchStyle}
+          isDisabled={currentPage === 1}
+          bg={currentPage !== 1 ? 'grayModern.250' : 'grayModern.150'}
+          p="0"
+          minW="0"
+          boxSize="24px"
+          onClick={(e) => {
+            e.preventDefault();
+            setCurrentPage(currentPage - 1);
+          }}
+        >
+          <ToLeftIcon />
+        </Button>
+        <Text color={'grayModern.500'}>{currentPage}</Text>
+        <Text color={'grayModern.500'}>/</Text>
+        <Text color={'grayModern.900'}>{totalPage}</Text>
+        <Button
+          {...switchStyle}
+          isDisabled={isPreviousData || currentPage >= totalPage}
+          bg={currentPage !== totalPage ? 'grayModern.250' : 'grayModern.150'}
+          boxSize="24px"
+          p="0"
+          minW="0"
+          borderRadius={'50%'}
+          onClick={(e) => {
+            e.preventDefault();
+            setCurrentPage(currentPage + 1);
+          }}
+        >
+          <ToLeftIcon transform={'rotate(180deg)'} />
+        </Button>
+        <Button
+          {...switchStyle}
+          isDisabled={isPreviousData || currentPage >= totalPage}
+          bg={currentPage !== totalPage ? 'grayModern.250' : 'grayModern.150'}
+          boxSize="24px"
+          p="0"
+          minW="0"
+          borderRadius={'50%'}
+          mr={'10px'}
+          onClick={(e) => {
+            e.preventDefault();
+            setCurrentPage(totalPage);
+          }}
+        >
+          <RightFirstIcon />
+        </Button>
+      </Flex>
+      <Text fontSize="12px" fontWeight="500" color={'grayModern.900'}>
+        {pageSize}
+      </Text>
+      <Text fontSize="12px" fontWeight="500" color={'grayModern.500'}>
+        /{t('Page')}
+      </Text>
+    </Flex>
+  );
+}
diff --git a/frontend/providers/applaunchpad/src/components/BaseTable/index.tsx b/frontend/providers/applaunchpad/src/components/BaseTable/index.tsx
new file mode 100644
index 000000000000..fc867a16879b
--- /dev/null
+++ b/frontend/providers/applaunchpad/src/components/BaseTable/index.tsx
@@ -0,0 +1,120 @@
+import {
+  HTMLChakraProps,
+  Spinner,
+  Table,
+  TableContainer,
+  TableContainerProps,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr
+} from '@chakra-ui/react';
+import { Column, Table as ReactTable, flexRender } from '@tanstack/react-table';
+import { CSSProperties } from 'react';
+
+const getCommonPinningStyles = <T,>(column: Column<T, unknown>): CSSProperties => {
+  const isPinned = column.getIsPinned();
+
+  return {
+    position: isPinned ? 'sticky' : 'relative',
+    left: isPinned === 'left' ? 0 : undefined,
+    right: isPinned === 'right' ? 0 : undefined,
+    zIndex: isPinned ? 10 : 0
+  };
+};
+
+export function BaseTable<T extends unknown>({
+  table,
+  isLoading,
+  tdStyle,
+  isHeaderFixed = false,
+  ...props
+}: {
+  table: ReactTable<T>;
+  isLoading: boolean;
+  tdStyle?: HTMLChakraProps<'td'>;
+  isHeaderFixed?: boolean;
+} & TableContainerProps) {
+  return (
+    <TableContainer {...props} position={'relative'}>
+      <Table variant="unstyled" width={'full'}>
+        <Thead
+          position={isHeaderFixed ? 'sticky' : 'relative'}
+          top={0}
+          zIndex={isHeaderFixed ? 2 : 0}
+        >
+          {table.getHeaderGroups().map((headers) => {
+            return (
+              <Tr key={headers.id}>
+                {headers.headers.map((header, i) => {
+                  return (
+                    <Th
+                      fontSize={'12px'}
+                      py="13px"
+                      px={'24px'}
+                      key={header.id}
+                      bg={'grayModern.100'}
+                      color={'grayModern.600'}
+                      border={'none'}
+                      _first={{
+                        borderLeftRadius: '6px'
+                      }}
+                      _last={{
+                        borderRightRadius: '6px'
+                      }}
+                      {...(getCommonPinningStyles(header.column) as HTMLChakraProps<'th'>)}
+                    >
+                      {flexRender(header.column.columnDef.header, header.getContext())}
+                    </Th>
+                  );
+                })}
+              </Tr>
+            );
+          })}
+        </Thead>
+        <Tbody>
+          {isLoading ? (
+            <Tr>
+              <Td h={'300px'} colSpan={table.getAllColumns().length} textAlign="center" py={4}>
+                <Spinner size="xl" />
+              </Td>
+            </Tr>
+          ) : (
+            table.getRowModel().rows.map((item, index) => {
+              return (
+                <Tr key={item.id} fontSize={'12px'}>
+                  {item.getAllCells().map((cell, i) => {
+                    const isPinned = cell.column.getIsPinned();
+                    return (
+                      <Td
+                        key={cell.id}
+                        p={'10px 24px'}
+                        bg={
+                          // @ts-ignore
+                          cell.column.columnDef.meta?.isError?.(item.original)
+                            ? '#FFFAEB'
+                            : isPinned
+                            ? 'white'
+                            : ''
+                        }
+                        borderBottom={'1px solid'}
+                        borderBottomColor={
+                          index !== table.getRowModel().rows.length - 1 ? '#F0F1F6' : 'transparent'
+                        }
+                        {...(getCommonPinningStyles(cell.column) as HTMLChakraProps<'td'>)}
+                        {...tdStyle}
+                      >
+                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      </Td>
+                    );
+                  })}
+                </Tr>
+              );
+            })
+          )}
+        </Tbody>
+      </Table>
+    </TableContainer>
+  );
+}
diff --git a/frontend/providers/applaunchpad/src/components/DatePicker/index.tsx b/frontend/providers/applaunchpad/src/components/DatePicker/index.tsx
new file mode 100644
index 000000000000..746c60dcc6c9
--- /dev/null
+++ b/frontend/providers/applaunchpad/src/components/DatePicker/index.tsx
@@ -0,0 +1,485 @@
+'use client';
+
+import {
+  Button,
+  ButtonGroup,
+  Divider,
+  Flex,
+  FlexProps,
+  Input,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Text,
+  useDisclosure
+} from '@chakra-ui/react';
+import { endOfDay, format, isAfter, isBefore, isMatch, isValid, parse, startOfDay } from 'date-fns';
+import { enUS, zhCN } from 'date-fns/locale';
+import { useTranslation } from 'next-i18next';
+import { ChangeEventHandler, useMemo, useState } from 'react';
+import { DateRange, DayPicker, SelectRangeEventHandler } from 'react-day-picker';
+import useDateTimeStore from '@/store/date';
+import { formatTimeRange, parseTimeRange } from '@/utils/timeRange';
+import { MySelect } from '@sealos/ui';
+import MyIcon from '../Icon';
+
+interface DatePickerProps extends FlexProps {
+  isDisabled?: boolean;
+}
+
+interface RecentDate {
+  label: string;
+  value: DateRange;
+  compareValue: string;
+}
+
+const DatePicker = ({ isDisabled = false, ...props }: DatePickerProps) => {
+  const { t, i18n } = useTranslation();
+  const currentLang = i18n.language;
+  const { isOpen, onClose, onOpen } = useDisclosure();
+
+  const { startDateTime, endDateTime, setStartDateTime, setEndDateTime, timeZone, setTimeZone } =
+    useDateTimeStore();
+
+  const initState = {
+    from: startDateTime,
+    to: endDateTime
+  };
+
+  const recentDateList = useMemo(
+    () => [
+      {
+        label: `${t('recently')} 5 ${t('minute')}`,
+        value: getDateRange('5m'),
+        compareValue: '5m'
+      },
+      {
+        label: `${t('recently')} 15 ${t('minute')}`,
+        value: getDateRange('15m'),
+        compareValue: '15m'
+      },
+      {
+        label: `${t('recently')} 30 ${t('minute')}`,
+        value: getDateRange('30m'),
+        compareValue: '30m'
+      },
+      {
+        label: `${t('recently')} 1 ${t('hour-singular')}`,
+        value: getDateRange('1h'),
+        compareValue: '1h'
+      },
+      {
+        label: `${t('recently')} 3 ${t('hour')}`,
+        value: getDateRange('3h'),
+        compareValue: '3h'
+      },
+      {
+        label: `${t('recently')} 6 ${t('hour')}`,
+        value: getDateRange('6h'),
+        compareValue: '6h'
+      },
+      {
+        label: `${t('recently')} 24 ${t('hour')}`,
+        value: getDateRange('24h'),
+        compareValue: '24h'
+      },
+      {
+        label: `${t('recently')} 2 ${t('day')}`,
+        value: getDateRange('2d'),
+        compareValue: '2d'
+      },
+      {
+        label: `${t('recently')} 3 ${t('day')}`,
+        value: getDateRange('3d'),
+        compareValue: '3d'
+      },
+      {
+        label: `${t('recently')} 7 ${t('day')}`,
+        value: getDateRange('7d'),
+        compareValue: '7d'
+      }
+    ],
+    [t]
+  );
+
+  const defaultRecentDate = useMemo(() => {
+    const currentTimeRange = formatTimeRange(startDateTime, endDateTime);
+    return (
+      recentDateList.find((item) => item.compareValue === currentTimeRange) ||
+      recentDateList.find((item) => item.compareValue === '30m') ||
+      recentDateList[0]
+    );
+  }, [startDateTime, endDateTime, recentDateList]);
+
+  const [inputState, setInputState] = useState<0 | 1>(0);
+  const [recentDate, setRecentDate] = useState<RecentDate>(defaultRecentDate);
+
+  const [fromDateString, setFromDateString] = useState<string>(format(initState.from, 'y-MM-dd'));
+  const [toDateString, setToDateString] = useState<string>(format(initState.to, 'y-MM-dd'));
+  const [fromTimeString, setFromTimeString] = useState<string>(format(initState.from, 'HH:mm:ss'));
+  const [toTimeString, setToTimeString] = useState<string>(format(initState.to, 'HH:mm:ss'));
+
+  const [fromDateError, setFromDateError] = useState<string | null>(null);
+  const [toDateError, setToDateError] = useState<string | null>(null);
+  const [fromTimeError, setFromTimeError] = useState<string | null>(null);
+  const [toTimeError, setToTimeError] = useState<string | null>(null);
+  const [fromDateShake, setFromDateShake] = useState(false);
+  const [toDateShake, setToDateShake] = useState(false);
+  const [fromTimeShake, setFromTimeShake] = useState(false);
+  const [toTimeShake, setToTimeShake] = useState(false);
+
+  const [selectedRange, setSelectedRange] = useState<DateRange | undefined>(initState);
+
+  const onSubmit = () => {
+    if (fromDateError || fromTimeError || toDateError || toTimeError) {
+      if (fromDateError) setFromDateShake(true);
+      if (toDateError) setToDateShake(true);
+      if (fromTimeError) setFromTimeShake(true);
+      if (toTimeError) setToTimeShake(true);
+      setTimeout(() => {
+        setFromDateShake(false);
+        setToDateShake(false);
+        setFromTimeShake(false);
+        setToTimeShake(false);
+      }, 300);
+
+      return;
+    }
+    selectedRange?.from && setStartDateTime(selectedRange.from);
+    selectedRange?.to && setEndDateTime(selectedRange.to);
+    onClose();
+  };
+
+  const handleFromChange = (value: string, type: 'date' | 'time') => {
+    let newDateTimeString;
+
+    if (type === 'date') {
+      setFromDateString(value);
+      if (!isMatch(value, 'y-MM-dd')) {
+        setFromDateError('Invalid date format');
+        return;
+      }
+      setFromDateError(null);
+      newDateTimeString = `${value} ${fromTimeString}`;
+    } else {
+      setFromTimeString(value);
+      if (!isMatch(value, 'HH:mm:ss')) {
+        setFromTimeError('Invalid time format');
+        return;
+      }
+      setFromTimeError(null);
+      newDateTimeString = `${fromDateString} ${value}`;
+    }
+
+    console.log(newDateTimeString);
+
+    const date = parse(newDateTimeString, 'y-MM-dd HH:mm:ss', new Date());
+
+    if (!isValid(date)) {
+      return setSelectedRange({ from: undefined, to: selectedRange?.to });
+    }
+
+    if (selectedRange?.to) {
+      if (isAfter(date, selectedRange.to)) {
+        setSelectedRange({ from: selectedRange.to, to: date });
+      } else {
+        setSelectedRange({ from: date, to: selectedRange?.to });
+      }
+    } else {
+      setSelectedRange({ from: date, to: date });
+    }
+  };
+
+  const handleToChange = (value: string, type: 'date' | 'time') => {
+    let newDateTimeString;
+
+    if (type === 'date') {
+      setToDateString(value);
+      if (!isMatch(value, 'y-MM-dd')) {
+        setToDateError('Invalid date format');
+        return;
+      }
+      setToDateError(null);
+      newDateTimeString = `${value} ${toTimeString}`;
+    } else {
+      setToTimeString(value);
+      if (!isMatch(value, 'HH:mm:ss')) {
+        setToTimeError('Invalid time format');
+        return;
+      }
+      setToTimeError(null);
+      newDateTimeString = `${toDateString} ${value}`;
+    }
+
+    const date = parse(newDateTimeString, 'y-MM-dd HH:mm:ss', new Date());
+
+    if (!isValid(date)) {
+      return setSelectedRange({ from: selectedRange?.from, to: undefined });
+    }
+    if (selectedRange?.from) {
+      if (isBefore(date, selectedRange.from)) {
+        setSelectedRange({ from: date, to: selectedRange.from });
+      } else {
+        setSelectedRange({ from: selectedRange?.from, to: date });
+      }
+    } else {
+      setSelectedRange({ from: date, to: date });
+    }
+  };
+
+  const handleRangeSelect: SelectRangeEventHandler = (range: DateRange | undefined) => {
+    if (range) {
+      let { from, to } = range;
+      if (inputState === 0) {
+        // from
+        if (from === selectedRange?.from) {
+          // when 'to' is changed
+          from = to;
+        } else {
+          to = from;
+        }
+        setInputState(1);
+      } else {
+        setInputState(0);
+      }
+      setSelectedRange({
+        from,
+        to
+      });
+      if (from) {
+        setFromDateString(format(startOfDay(from), 'y-MM-dd'));
+        setFromTimeString(format(startOfDay(from), 'HH:mm:ss'));
+      } else {
+        setFromDateString(format(new Date(), 'y-MM-dd'));
+        setFromTimeString(format(new Date(), 'HH:mm:ss'));
+      }
+      if (to) {
+        setToDateString(format(endOfDay(to), 'y-MM-dd'));
+        setToTimeString(format(endOfDay(to), 'HH:mm:ss'));
+      } else {
+        setToDateString(format(from ? from : new Date(), 'y-MM-dd'));
+        setToTimeString(format(from ? from : new Date(), 'HH:mm:ss'));
+      }
+    } else {
+      // default is cancel
+      if (fromDateString && fromTimeString && selectedRange?.from) {
+        setToDateString(fromDateString);
+        setToTimeString(fromTimeString);
+        setSelectedRange({
+          ...selectedRange,
+          to: selectedRange.from
+        });
+        setInputState(1);
+      }
+    }
+  };
+
+  const handleRecentDateClick = (item: RecentDate) => {
+    setFromDateError(null);
+    setFromTimeError(null);
+    setToDateError(null);
+    setToTimeError(null);
+
+    setRecentDate(item);
+    setSelectedRange(item.value);
+    if (item.value.from) {
+      setFromDateString(format(item.value.from, 'y-MM-dd'));
+      setFromTimeString(format(item.value.from, 'HH:mm:ss'));
+    }
+    if (item.value.to) {
+      setToDateString(format(item.value.to, 'y-MM-dd'));
+      setToTimeString(format(item.value.to, 'HH:mm:ss'));
+    }
+  };
+
+  return (
+    <Flex
+      h={'32px'}
+      bg="grayModern.50"
+      gap={'10px'}
+      align={'center'}
+      px={'10px'}
+      justify={'space-between'}
+      border={'1px solid'}
+      borderColor={'grayModern.200'}
+      borderRadius="6px"
+      color={'grayModern.900'}
+      fontSize={'12px'}
+      {...props}
+    >
+      <Popover isOpen={isOpen} onClose={onClose}>
+        <PopoverTrigger>
+          <Flex cursor={'pointer'} alignItems={'center'} gap={'4px'} onClick={onOpen}>
+            <Text>{format(startDateTime, 'y-MM-dd HH:mm:ss')}</Text>
+            <MyIcon name="to" />
+            <Text>{format(endDateTime, 'y-MM-dd HH:mm:ss')}</Text>
+            <Button variant={'unstyled'} isDisabled={isDisabled} minW={'fit-content'}>
+              <MyIcon name="calendar" />
+            </Button>
+          </Flex>
+        </PopoverTrigger>
+        <PopoverContent zIndex={99} w={'fit-content'} borderRadius={'12px'}>
+          <Flex w={'402px'} height={'382px'}>
+            <Flex w={'242px'} flexDir={'column'}>
+              <DayPicker
+                mode="range"
+                selected={selectedRange}
+                onSelect={handleRangeSelect}
+                locale={currentLang === 'zh' ? zhCN : enUS}
+                weekStartsOn={0}
+              />
+              <Divider />
+              <Flex flexDir={'column'} gap={'5px'} px={'16px'} pt={'8px'}>
+                <Text fontSize={'12px'} color={'grayModern.600'} ml={'3px'} mb={'4px'}>
+                  {t('start')}
+                </Text>
+                <Flex w={'100%'} justify={'center'} gap={'4px'}>
+                  <DatePickerInput
+                    value={fromDateString}
+                    onChange={(e) => handleFromChange(e.target.value, 'date')}
+                    error={!!fromDateError}
+                    showError={fromDateShake}
+                  />
+                  <DatePickerInput
+                    value={fromTimeString}
+                    onChange={(e) => handleFromChange(e.target.value, 'time')}
+                    error={!!fromTimeError}
+                    showError={fromTimeShake}
+                  />
+                </Flex>
+              </Flex>
+
+              <Flex flexDir={'column'} gap={'5px'} px={'16px'} pt={'8px'} pb={'12px'}>
+                <Text fontSize={'12px'} color={'grayModern.600'} ml={'3px'} mb={'4px'}>
+                  {t('end')}
+                </Text>
+                <Flex w={'100%'} justify={'center'} gap={'4px'}>
+                  <DatePickerInput
+                    value={toDateString}
+                    onChange={(e) => handleToChange(e.target.value, 'date')}
+                    error={!!toDateError}
+                    showError={toDateShake}
+                  />
+                  <DatePickerInput
+                    value={toTimeString}
+                    onChange={(e) => handleToChange(e.target.value, 'time')}
+                    error={!!toTimeError}
+                    showError={toTimeShake}
+                  />
+                </Flex>
+              </Flex>
+            </Flex>
+            <Divider orientation="vertical" flexShrink={0} />
+            <Flex flex={1}>
+              <Flex flexDir={'column'} gap={'4px'} p={'12px 8px'} w={'100%'}>
+                {recentDateList.map((item) => (
+                  <Button
+                    height={'32px'}
+                    key={JSON.stringify(item.value)}
+                    variant={'ghost'}
+                    color={'grayModern.900'}
+                    fontSize={'12px'}
+                    fontWeight={'400'}
+                    justifyContent={'flex-start'}
+                    {...(recentDate.compareValue === item.compareValue && {
+                      bg: 'brightBlue.50',
+                      color: 'brightBlue.600'
+                    })}
+                    _hover={{
+                      bg: 'rgba(17, 24, 36, 0.05)'
+                    }}
+                    onClick={() => handleRecentDateClick(item)}
+                  >
+                    {item.label}
+                  </Button>
+                ))}
+              </Flex>
+            </Flex>
+          </Flex>
+          <Divider />
+          <Flex justify={'space-between'} pl={'12px'} alignItems={'center'} py={'8px'}>
+            <MySelect
+              height="32px"
+              width={'fit-content'}
+              border={'none'}
+              boxShadow={'none'}
+              backgroundColor={'transparent'}
+              color={'grayModern.600'}
+              value={timeZone}
+              list={[
+                { value: 'local', label: 'Local (Asia/Shanghai)' },
+                { value: 'utc', label: 'UTC' }
+              ]}
+              onchange={(val: any) => setTimeZone(val)}
+            />
+            <ButtonGroup variant="outline" spacing="2" px={'10px'}>
+              <Button
+                border={'1px solid'}
+                borderColor={'grayModern.250'}
+                borderRadius={'6px'}
+                onClick={() => {
+                  setRecentDate(defaultRecentDate);
+                  handleRecentDateClick(defaultRecentDate);
+                }}
+              >
+                <MyIcon name="refresh" color={'grayModern.500'} />
+              </Button>
+              <Button
+                border={'1px solid'}
+                borderColor={'grayModern.250'}
+                borderRadius={'6px'}
+                onClick={() => onClose()}
+              >
+                {t('Cancel')}
+              </Button>
+              <Button onClick={() => onSubmit()} variant={'solid'}>
+                {t('Confirm')}
+              </Button>
+            </ButtonGroup>
+          </Flex>
+        </PopoverContent>
+      </Popover>
+    </Flex>
+  );
+};
+
+interface DatePickerInputProps {
+  value: string;
+  onChange: ChangeEventHandler<HTMLInputElement> | undefined;
+  error: boolean;
+  showError: boolean;
+}
+
+const DatePickerInput = ({ value, onChange, error, showError }: DatePickerInputProps) => {
+  return (
+    <Input
+      backgroundColor={'white'}
+      w={'50%'}
+      {...(error && {
+        borderColor: 'red.500',
+        _hover: { borderColor: 'red.500' }
+      })}
+      {...(showError && {
+        borderColor: 'red.500',
+        _hover: { borderColor: 'red.500' },
+        animation: 'shake 0.3s'
+      })}
+      sx={{
+        '@keyframes shake': {
+          '0%, 100%': { transform: 'translateX(0)' },
+          '25%': { transform: 'translateX(-4px)' },
+          '75%': { transform: 'translateX(4px)' }
+        }
+      }}
+      value={value}
+      onChange={onChange}
+    />
+  );
+};
+
+const getDateRange = (value: string): DateRange => {
+  const { startTime: from, endTime: to } = parseTimeRange(value);
+  return { from, to };
+};
+
+export default DatePicker;
diff --git a/frontend/providers/applaunchpad/src/components/Icon/icons/arrowLeft.svg b/frontend/providers/applaunchpad/src/components/Icon/icons/arrowLeft.svg
index 9e246b287599..045c63cbce5f 100644
--- a/frontend/providers/applaunchpad/src/components/Icon/icons/arrowLeft.svg
+++ b/frontend/providers/applaunchpad/src/components/Icon/icons/arrowLeft.svg
@@ -1,10 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" fill="none">
-  <g clip-path="url(#clip0_5971_6943)">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M7.70711 5.29289C8.09763 5.68342 8.09763 6.31658 7.70711 6.70711L2.41421 12L7.70711 17.2929C8.09763 17.6834 8.09763 18.3166 7.70711 18.7071C7.31658 19.0976 6.68342 19.0976 6.29289 18.7071L0.292893 12.7071C-0.0976315 12.3166 -0.0976315 11.6834 0.292893 11.2929L6.29289 5.29289C6.68342 4.90237 7.31658 4.90237 7.70711 5.29289Z" fill="#485264"/>
-  </g>
-  <defs>
-    <clipPath id="clip0_5971_6943">
-      <rect width="24" height="24" fill="white"/>
-    </clipPath>
-  </defs>
+<svg xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 20 20" fill="currentColor">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M13.0893 4.41083C13.4147 4.73626 13.4147 5.2639 13.0893 5.58934L8.67852 10.0001L13.0893 14.4108C13.4147 14.7363 13.4147 15.2639 13.0893 15.5893C12.7638 15.9148 12.2362 15.9148 11.9108 15.5893L6.91075 10.5893C6.58532 10.2639 6.58532 9.73626 6.91075 9.41083L11.9108 4.41083C12.2362 4.08539 12.7638 4.08539 13.0893 4.41083Z" fill="#485264"/>
 </svg>
\ No newline at end of file
diff --git a/frontend/providers/applaunchpad/src/components/Icon/icons/arrowRight.svg b/frontend/providers/applaunchpad/src/components/Icon/icons/arrowRight.svg
new file mode 100644
index 000000000000..80e943436d2d
--- /dev/null
+++ b/frontend/providers/applaunchpad/src/components/Icon/icons/arrowRight.svg
@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.29289 5.29289C7.90237 5.68342 7.90237 6.31658 8.29289 6.70711L13.5858 12L8.29289 17.2929C7.90237 17.6834 7.90237 18.3166 8.29289 18.7071C8.68342 19.0976 9.31658 19.0976 9.70711 18.7071L15.7071 12.7071C16.0976 12.3166 16.0976 11.6834 15.7071 11.2929L9.70711 5.29289C9.31658 4.90237 8.68342 4.90237 8.29289 5.29289Z" fill="currentColor"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/providers/applaunchpad/src/components/Icon/icons/calendar.svg b/frontend/providers/applaunchpad/src/components/Icon/icons/calendar.svg
new file mode 100644
index 000000000000..f864a731f268
--- /dev/null
+++ b/frontend/providers/applaunchpad/src/components/Icon/icons/calendar.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path fill-rule="evenodd" clip-rule="evenodd" d="M4.60004 1.71324C4.60004 1.34505 4.89852 1.04657 5.26671 1.04657C5.6349 1.04657 5.93338 1.34505 5.93338 1.71324V2.72702H9.90671V1.71324C9.90671 1.34505 10.2052 1.04657 10.5734 1.04657C10.9416 1.04657 11.24 1.34505 11.24 1.71324V2.72826C12.262 2.73463 12.8418 2.77363 13.3012 3.01223C13.7639 3.25259 14.1411 3.62985 14.3815 4.09255C14.6667 4.64162 14.6667 5.36297 14.6667 6.80568V10.5881C14.6667 12.0308 14.6667 12.7521 14.3815 13.3012C14.1411 13.7639 13.7639 14.1412 13.3012 14.3815C12.7521 14.6667 12.0308 14.6667 10.588 14.6667H5.41204C3.96933 14.6667 3.24798 14.6667 2.69891 14.3815C2.23621 14.1412 1.85894 13.7639 1.61859 13.3012C1.33337 12.7521 1.33337 12.0308 1.33337 10.5881V6.80568C1.33337 5.36297 1.33337 4.64162 1.61859 4.09255C1.85894 3.62985 2.23621 3.25259 2.69891 3.01223C3.1337 2.78638 3.67653 2.73937 4.60004 2.72959V1.71324ZM9.90671 4.06035V4.66102C9.90671 5.02921 10.2052 5.32769 10.5734 5.32769C10.9416 5.32769 11.24 5.02921 11.24 4.66102V4.06168C11.6324 4.06418 11.9268 4.07128 12.1694 4.09143C12.5147 4.12011 12.634 4.16818 12.6865 4.19545C12.9057 4.3093 13.0844 4.48801 13.1983 4.70718C13.2255 4.75968 13.2736 4.87898 13.3023 5.22435C13.3323 5.58568 13.3334 6.06195 13.3334 6.80568V10.5881C13.3334 11.3318 13.3323 11.8081 13.3023 12.1694C13.2736 12.5148 13.2255 12.6341 13.1983 12.6866C13.0844 12.9057 12.9057 13.0844 12.6865 13.1983C12.634 13.2256 12.5147 13.2736 12.1694 13.3023C11.808 13.3323 11.3318 13.3334 10.588 13.3334H5.41204C4.66831 13.3334 4.19204 13.3323 3.83071 13.3023C3.48534 13.2736 3.36604 13.2256 3.31354 13.1983C3.09437 13.0844 2.91566 12.9057 2.80181 12.6866C2.77454 12.6341 2.72647 12.5148 2.69779 12.1694C2.66778 11.8081 2.66671 11.3318 2.66671 10.5881V6.80568C2.66671 6.06195 2.66778 5.58568 2.69779 5.22435C2.72647 4.87898 2.77454 4.75968 2.80181 4.70718C2.91566 4.48801 3.09437 4.3093 3.31354 4.19545C3.36604 4.16818 3.48534 4.12011 3.83071 4.09143C4.03914 4.07412 4.28583 4.06644 4.60004 4.06304V4.66102C4.60004 5.02921 4.89852 5.32769 5.26671 5.32769C5.6349 5.32769 5.93338 5.02921 5.93338 4.66102V4.06035H9.90671ZM11.6674 7.33333C12.0356 7.33333 12.3341 7.63181 12.3341 8C12.3341 8.36819 12.0356 8.66667 11.6674 8.66667H9.12117C8.75297 8.66667 8.4545 8.36819 8.4545 8C8.4545 7.63181 8.75298 7.33333 9.12117 7.33333H11.6674ZM12.3341 10.7482C12.3341 10.38 12.0356 10.0815 11.6674 10.0815H5.30444C4.93625 10.0815 4.63778 10.38 4.63778 10.7482C4.63778 11.1164 4.93625 11.4148 5.30444 11.4148H11.6674C12.0356 11.4148 12.3341 11.1164 12.3341 10.7482Z" fill="#667085"/>
+	</svg>
diff --git a/frontend/providers/applaunchpad/src/components/Icon/icons/chart.svg b/frontend/providers/applaunchpad/src/components/Icon/icons/chart.svg
new file mode 100644
index 000000000000..c6902b1966cf
--- /dev/null
+++ b/frontend/providers/applaunchpad/src/components/Icon/icons/chart.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 16 10" fill="currentColor">
+  <line y1="5" x2="16" y2="5" stroke="currentColor" stroke-width="2"/>
+  <rect x="4.00879" y="1" width="8" height="8" rx="4" fill="white" stroke="currentColor" stroke-width="2"/>
+</svg>
diff --git a/frontend/providers/applaunchpad/src/components/Icon/icons/configMap.svg b/frontend/providers/applaunchpad/src/components/Icon/icons/configMap.svg
index f027353e49b0..88d5f534019e 100644
--- a/frontend/providers/applaunchpad/src/components/Icon/icons/configMap.svg
+++ b/frontend/providers/applaunchpad/src/components/Icon/icons/configMap.svg
@@ -1 +1,11 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="27" height="31" fill="none" viewBox="0 0 27 31"><path fill="#999FAA" d="M2.81462 0.76062C1.33462 0.76062 0.147949 1.94729 0.147949 3.42729V24.7606C0.147949 25.4679 0.428901 26.1461 0.928998 26.6462C1.42909 27.1463 2.10737 27.4273 2.81462 27.4273H11.7213C11.1262 26.1777 10.8165 24.8114 10.8146 23.4273C10.8146 20.9519 11.7979 18.578 13.5483 16.8276C15.2986 15.0773 17.6726 14.094 20.1479 14.094C20.5944 14.0976 21.04 14.1332 21.4813 14.2006V8.76062L13.4813 0.76062H2.81462ZM12.1479 2.76062L19.4813 10.094H12.1479V2.76062ZM18.8146 16.7606C18.7331 16.7591 18.6537 16.7863 18.5903 16.8375C18.5269 16.8887 18.4836 16.9606 18.4679 17.0406L18.2146 18.8006C17.8146 18.974 17.4279 19.1873 17.0813 19.4273L15.4279 18.7606C15.2813 18.7606 15.1079 18.7606 15.0146 18.934L13.6813 21.2406C13.6013 21.3873 13.6279 21.5606 13.7613 21.6673L15.1746 22.7606C15.1214 23.2035 15.1214 23.6511 15.1746 24.094L13.7613 25.1873C13.7014 25.2387 13.6608 25.309 13.6462 25.3865C13.6317 25.4641 13.6441 25.5444 13.6813 25.614L15.0146 27.9206C15.0946 28.094 15.268 28.094 15.4279 28.094L17.0813 27.4273C17.4279 27.6673 17.8013 27.894 18.2146 28.054L18.4679 29.814C18.4946 29.974 18.628 30.094 18.8146 30.094H21.4813C21.628 30.094 21.7746 29.974 21.8013 29.814L22.0546 28.054C22.4546 27.8806 22.8146 27.6673 23.1746 27.4273L24.8146 28.094C24.9879 28.094 25.1613 28.094 25.2546 27.9206L26.5879 25.614C26.6252 25.5444 26.6375 25.4641 26.623 25.3865C26.6085 25.309 26.5679 25.2387 26.5079 25.1873L25.0813 24.094C25.108 23.8673 25.1346 23.654 25.1346 23.4273C25.1346 23.2006 25.1213 22.9873 25.0813 22.7606L26.4946 21.6673C26.5545 21.6159 26.5951 21.5456 26.6097 21.468C26.6242 21.3904 26.6118 21.3102 26.5746 21.2406L25.2413 18.934C25.1613 18.7606 24.9879 18.7606 24.8146 18.7606L23.1746 19.4273C22.8146 19.1873 22.4546 18.9606 22.0413 18.8006L21.7879 17.0406C21.7795 16.9647 21.7438 16.8944 21.6874 16.8429C21.6309 16.7913 21.5577 16.7621 21.4813 16.7606H18.8146ZM20.1479 21.4273C21.2546 21.4273 22.1479 22.3206 22.1479 23.4273C22.1479 24.534 21.2546 25.4273 20.1479 25.4273C19.028 25.4273 18.1479 24.534 18.1479 23.4273C18.1479 22.3206 19.0413 21.4273 20.1479 21.4273Z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+  <g clip-path="url(#clip0_623_2152)">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M16.1453 3.2781L19.0532 6.00879C19.7719 6.68371 20.1313 7.02116 20.3871 7.42234C20.6045 7.76328 20.7661 8.13673 20.8658 8.52861C20.9831 8.98973 20.9831 9.48269 20.9831 10.4686V14.6201C20.2553 14.2695 19.4393 14.073 18.5773 14.073C15.5121 14.073 13.0273 16.5578 13.0273 19.6229C13.0273 20.6264 13.2937 21.5678 13.7596 22.3801H9.1349C6.97084 22.3801 5.88881 22.3801 5.0652 21.9522C4.37116 21.5917 3.80526 21.0258 3.44474 20.3318C3.01691 19.5082 3.01691 18.4261 3.01691 16.2621V7.73793C3.01691 5.57387 3.01691 4.49184 3.44474 3.66823C3.80526 2.97419 4.37116 2.40829 5.0652 2.04776C5.88881 1.61993 6.97084 1.61993 9.13491 1.61993H11.9573C12.8617 1.61993 13.3139 1.61993 13.7412 1.71997C14.1045 1.80503 14.4533 1.94313 14.7764 2.12983C15.1564 2.34943 15.486 2.65899 16.1453 3.2781ZM14.3329 4.65261C13.7396 4.08381 13.443 3.7994 13.1884 3.7891C12.9862 3.78091 12.7911 3.86416 12.6571 4.01578C12.4883 4.20668 12.4883 4.61761 12.4883 5.43949V6.37785C12.4883 7.58007 12.4883 8.18118 12.7223 8.64036C12.9281 9.04427 13.2565 9.37266 13.6604 9.57847C14.1196 9.81243 14.7207 9.81243 15.9229 9.81243H17.0023C17.8675 9.81243 18.3001 9.81243 18.4925 9.63783C18.6451 9.4993 18.7259 9.29844 18.7116 9.09279C18.6935 8.8336 18.3813 8.53421 17.7568 7.93543L14.3329 4.65261Z" fill="#667085"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M17.6293 16.208C17.9176 15.0877 19.5088 15.0877 19.7971 16.208C19.9533 16.8151 20.5776 17.1755 21.1814 17.0073C22.2958 16.6968 23.0914 18.0748 22.2653 18.8847C21.8177 19.3235 21.8177 20.0443 22.2653 20.4831C23.0914 21.293 22.2958 22.671 21.1814 22.3605C20.5776 22.1923 19.9533 22.5527 19.7971 23.1597C19.5088 24.2801 17.9176 24.2801 17.6293 23.1597C17.4731 22.5527 16.8488 22.1923 16.245 22.3605C15.1305 22.671 14.3349 21.293 15.1611 20.4831C15.6087 20.0443 15.6087 19.3235 15.1611 18.8847C14.3349 18.0748 15.1305 16.6968 16.245 17.0073C16.8488 17.1755 17.4731 16.8151 17.6293 16.208ZM20.1095 19.6839C20.1095 20.455 19.4843 21.0802 18.7132 21.0802C17.942 21.0802 17.3169 20.455 17.3169 19.6839C17.3169 18.9127 17.942 18.2876 18.7132 18.2876C19.4843 18.2876 20.1095 18.9127 20.1095 19.6839Z" fill="#667085"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_623_2152">
+      <rect width="24" height="24" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/frontend/providers/applaunchpad/src/components/Icon/icons/container.svg b/frontend/providers/applaunchpad/src/components/Icon/icons/container.svg
new file mode 100644
index 000000000000..c15441ffd1cf
--- /dev/null
+++ b/frontend/providers/applaunchpad/src/components/Icon/icons/container.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon/line/cube">
+<path id="Icon (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M7.73144 0.790031C7.90865 0.753584 8.09143 0.753584 8.26865 0.790031C8.47349 0.832161 8.65659 0.934713 8.80215 1.01624C8.8157 1.02383 8.82893 1.03124 8.84183 1.03841L13.7752 3.77915C13.7888 3.78672 13.8028 3.79446 13.8172 3.8024C13.9713 3.88727 14.1651 3.99398 14.3139 4.15543C14.4425 4.29502 14.5398 4.46046 14.5994 4.6407C14.6683 4.84917 14.6675 5.07035 14.6668 5.24627C14.6668 5.26271 14.6667 5.27875 14.6667 5.29435V10.7058C14.6667 10.7214 14.6668 10.7374 14.6668 10.7538C14.6675 10.9298 14.6683 11.1509 14.5994 11.3594C14.5398 11.5396 14.4425 11.7051 14.3139 11.8447C14.1651 12.0061 13.9713 12.1128 13.8173 12.1977C13.8029 12.2056 13.7888 12.2134 13.7752 12.221L8.84182 14.9617C8.82893 14.9689 8.8157 14.9763 8.80214 14.9839C8.65658 15.0654 8.47349 15.168 8.26865 15.2101C8.09143 15.2465 7.90865 15.2465 7.73144 15.2101C7.52659 15.1679 7.3435 15.0654 7.19793 14.9839C7.18438 14.9763 7.17115 14.9689 7.15826 14.9617L2.22493 12.221C2.21129 12.2134 2.19724 12.2056 2.18284 12.1977C2.02875 12.1128 1.83501 12.0061 1.68622 11.8447C1.55759 11.7051 1.46024 11.5397 1.40069 11.3594C1.33181 11.1509 1.33262 10.9298 1.33326 10.7538C1.33332 10.7374 1.33338 10.7214 1.33338 10.7058V5.29435C1.33338 5.27875 1.33332 5.26271 1.33326 5.24627C1.33262 5.07035 1.33181 4.84917 1.40069 4.6407C1.46024 4.46046 1.55759 4.29502 1.68622 4.15543C1.835 3.99398 2.02875 3.88727 2.18283 3.8024C2.19724 3.79447 2.21129 3.78673 2.22493 3.77915L7.15826 1.03841C7.17115 1.03124 7.18438 1.02383 7.19794 1.01624C7.3435 0.934713 7.52659 0.832162 7.73144 0.790031ZM8.00004 2.09938C7.99903 2.09987 7.99796 2.10037 7.99686 2.10091C7.95838 2.11946 7.90681 2.14782 7.80579 2.20395L3.3728 4.66672L8.00002 7.2374L12.6273 4.66671L8.1943 2.20395C8.09327 2.14782 8.0417 2.11946 8.00323 2.10091C8.00212 2.10037 8.00106 2.09987 8.00004 2.09938ZM13.3334 5.7997V10.7058C13.3334 10.8277 13.3331 10.8902 13.3304 10.9354C13.3303 10.9367 13.3302 10.938 13.3301 10.9392C13.3291 10.9399 13.328 10.9406 13.3269 10.9413C13.2887 10.9656 13.2343 10.9962 13.1276 11.0554L8.66671 13.5337L8.66669 8.3923L13.3334 5.7997ZM7.33336 8.39231L2.66671 5.79973V10.7058C2.66671 10.8277 2.66699 10.8902 2.66971 10.9354C2.66979 10.9367 2.66987 10.938 2.66995 10.9392C2.67098 10.9399 2.67205 10.9406 2.67318 10.9413C2.71137 10.9656 2.76582 10.9962 2.87245 11.0554L7.33337 13.5337L7.33336 8.39231Z" fill="#667085"/>
+</g>
+</svg>
diff --git a/frontend/providers/applaunchpad/src/components/Icon/icons/copy.svg b/frontend/providers/applaunchpad/src/components/Icon/icons/copy.svg
index bfd38df8edea..adc04ee6850f 100644
--- a/frontend/providers/applaunchpad/src/components/Icon/icons/copy.svg
+++ b/frontend/providers/applaunchpad/src/components/Icon/icons/copy.svg
@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 17"><path fill-rule="evenodd" d="M6.49996 0.166626C6.05793 0.166626 5.63401 0.342221 5.32145 0.654781C5.00889 0.967342 4.83329 1.39127 4.83329 1.83329V3.49996H6.49996V1.83329H15.6666V11H14V12.6666H15.6666C16.1087 12.6666 16.5326 12.491 16.8451 12.1785C17.1577 11.8659 17.3333 11.442 17.3333 11V1.83329C17.3333 1.39127 17.1577 0.967342 16.8451 0.654781C16.5326 0.342221 16.1087 0.166626 15.6666 0.166626H6.49996ZM2.33329 4.33329C1.89127 4.33329 1.46734 4.50889 1.15478 4.82145C0.842221 5.13401 0.666626 5.55793 0.666626 5.99996V15.1666C0.666626 15.6087 0.842221 16.0326 1.15478 16.3451C1.46734 16.6577 1.89127 16.8333 2.33329 16.8333H11.5C11.942 16.8333 12.3659 16.6577 12.6785 16.3451C12.991 16.0326 13.1666 15.6087 13.1666 15.1666V5.99996C13.1666 5.55793 12.991 5.13401 12.6785 4.82145C12.3659 4.50889 11.942 4.33329 11.5 4.33329H2.33329ZM2.33329 5.99996H11.5V15.1666H2.33329V5.99996Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg"    viewBox="0 0 16 16" fill="currentColor">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.27413 2.63007C3.13074 2.63007 2.99322 2.68703 2.89183 2.78842C2.79044 2.88982 2.73348 3.02733 2.73348 3.17072V8.60365C2.73348 8.74704 2.79044 8.88456 2.89183 8.98595C2.99322 9.08734 3.13074 9.14431 3.27413 9.14431H3.87779C4.24598 9.14431 4.54446 9.44278 4.54446 9.81097C4.54446 10.1792 4.24598 10.4776 3.87779 10.4776H3.27413C2.77712 10.4776 2.30046 10.2802 1.94902 9.92876C1.59758 9.57732 1.40015 9.10067 1.40015 8.60365V3.17072C1.40015 2.67371 1.59758 2.19706 1.94902 1.84562C2.30046 1.49417 2.77712 1.29674 3.27413 1.29674H8.70706C9.20407 1.29674 9.68073 1.49417 10.0322 1.84562C10.3836 2.19706 10.581 2.67371 10.581 3.17072V3.77438C10.581 4.14257 10.2826 4.44105 9.91438 4.44105C9.54619 4.44105 9.24771 4.14257 9.24771 3.77438V3.17072C9.24771 3.02733 9.19075 2.88982 9.08936 2.78842C8.98797 2.68703 8.85045 2.63007 8.70706 2.63007H3.27413ZM7.49974 6.85569C7.20115 6.85569 6.95909 7.09774 6.95909 7.39634V12.8293C6.95909 13.1279 7.20115 13.3699 7.49974 13.3699H12.9327C13.2313 13.3699 13.4733 13.1279 13.4733 12.8293V7.39634C13.4733 7.09774 13.2313 6.85569 12.9327 6.85569H7.49974ZM5.62576 7.39634C5.62576 6.36136 6.46477 5.52235 7.49974 5.52235H12.9327C13.9676 5.52235 14.8067 6.36136 14.8067 7.39634V12.8293C14.8067 13.8642 13.9676 14.7033 12.9327 14.7033H7.49974C6.46477 14.7033 5.62576 13.8642 5.62576 12.8293V7.39634Z" fill="currentColor"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/providers/applaunchpad/src/components/Icon/icons/emptyChart.svg b/frontend/providers/applaunchpad/src/components/Icon/icons/emptyChart.svg
new file mode 100644
index 000000000000..af039d00acee
--- /dev/null
+++ b/frontend/providers/applaunchpad/src/components/Icon/icons/emptyChart.svg
@@ -0,0 +1,10 @@
+<svg width="279" height="81" viewBox="0 0 279 81" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M36.8463 19.9578C17.375 19.9578 0 28.641 0 28.641V80.5H278V8.91518C278 8.91518 268.965 2.81172 254.677 0.835213C228.925 -2.72733 225.331 23.2809 202.708 23.2809C186.091 23.281 184.944 7.02985 162.787 5.54853C140.631 4.06721 130.636 41.3864 94.919 40.9657C68.1625 40.6506 51.8933 19.9578 36.8463 19.9578Z" fill="url(#paint0_linear_1518_3722)"/>
+<path d="M0.492432 28.6916C0.492432 28.6916 17.4023 20.0784 36.8716 20.0784C53.0753 20.0784 68.1846 40.7581 94.9383 41.0731C130.652 41.4935 140.645 4.19778 162.799 5.67816C184.953 7.15855 186.101 23.3994 202.716 23.3994C225.337 23.3994 228.931 -2.59249 254.68 0.967815C268.966 2.94308 278 9.0427 278 9.0427" stroke="#111824" stroke-linecap="round"/>
+<defs>
+<linearGradient id="paint0_linear_1518_3722" x1="139.115" y1="18.2193" x2="138.975" y2="80.4999" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F3F3F4"/>
+<stop offset="1" stop-color="#F3F3F4" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/frontend/providers/applaunchpad/src/components/Icon/icons/export.svg b/frontend/providers/applaunchpad/src/components/Icon/icons/export.svg
new file mode 100644
index 000000000000..6fbd16dbd6a4
--- /dev/null
+++ b/frontend/providers/applaunchpad/src/components/Icon/icons/export.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon/line/export">
+<path id="Icon (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M7.52851 1.52876C7.78886 1.26841 8.21097 1.26841 8.47132 1.52876L11.138 4.19543C11.3983 4.45577 11.3983 4.87788 11.138 5.13823C10.8776 5.39858 10.4555 5.39858 10.1952 5.13823L8.66659 3.60964V10.0002C8.66659 10.3684 8.36811 10.6668 7.99992 10.6668C7.63173 10.6668 7.33325 10.3684 7.33325 10.0002V3.60964L5.80466 5.13823C5.54431 5.39858 5.1222 5.39858 4.86185 5.13823C4.6015 4.87788 4.6015 4.45577 4.86185 4.19543L7.52851 1.52876ZM1.99992 7.3335C2.36811 7.3335 2.66659 7.63197 2.66659 8.00016V10.8002C2.66659 11.3712 2.6671 11.7594 2.69162 12.0595C2.7155 12.3517 2.75878 12.5012 2.81191 12.6055C2.93974 12.8564 3.14372 13.0603 3.3946 13.1882C3.49887 13.2413 3.64833 13.2846 3.94061 13.3085C4.24067 13.333 4.62887 13.3335 5.19992 13.3335H10.7999C11.371 13.3335 11.7592 13.333 12.0592 13.3085C12.3515 13.2846 12.501 13.2413 12.6052 13.1882C12.8561 13.0603 13.0601 12.8564 13.1879 12.6055C13.2411 12.5012 13.2843 12.3517 13.3082 12.0595C13.3327 11.7594 13.3333 11.3712 13.3333 10.8002V8.00016C13.3333 7.63197 13.6317 7.3335 13.9999 7.3335C14.3681 7.3335 14.6666 7.63197 14.6666 8.00016V10.8277C14.6666 11.3644 14.6666 11.8073 14.6371 12.168C14.6065 12.5428 14.5408 12.8872 14.3759 13.2108C14.1203 13.7126 13.7123 14.1205 13.2106 14.3762C12.887 14.541 12.5425 14.6068 12.1678 14.6374C11.807 14.6668 11.3641 14.6668 10.8275 14.6668H5.17237C4.63573 14.6668 4.19283 14.6668 3.83204 14.6374C3.4573 14.6068 3.11283 14.541 2.78928 14.3762C2.28751 14.1205 1.87956 13.7126 1.6239 13.2108C1.45904 12.8872 1.39333 12.5428 1.36271 12.168C1.33324 11.8073 1.33324 11.3643 1.33325 10.8277L1.33325 8.00016C1.33325 7.63197 1.63173 7.3335 1.99992 7.3335Z" fill="currentColor"/>
+</g>
+</svg>
diff --git a/frontend/providers/applaunchpad/src/components/Icon/icons/log.svg b/frontend/providers/applaunchpad/src/components/Icon/icons/log.svg
index 798a41665ebb..5257fb78e837 100644
--- a/frontend/providers/applaunchpad/src/components/Icon/icons/log.svg
+++ b/frontend/providers/applaunchpad/src/components/Icon/icons/log.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 18 18" fill="none">
+<svg xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 18 18" fill="currentColor">
   <path fill-rule="evenodd" clip-rule="evenodd" d="M5.175 1.92749C5.175 1.51328 5.51079 1.17749 5.925 1.17749C6.33921 1.17749 6.675 1.51328 6.675 1.92749V3.06799H11.145V1.92749C11.145 1.51328 11.4808 1.17749 11.895 1.17749C12.3092 1.17749 12.645 1.51328 12.645 1.92749V3.06939C13.7947 3.07656 14.447 3.12044 14.9638 3.38886C15.4843 3.65926 15.9087 4.08368 16.1791 4.60421C16.5 5.22192 16.5 6.03344 16.5 7.65649V11.9117C16.5 13.5347 16.5 14.3462 16.1791 14.9639C15.9087 15.4845 15.4843 15.9089 14.9638 16.1793C14.3461 16.5002 13.5345 16.5002 11.9115 16.5002H6.0885C4.46545 16.5002 3.65393 16.5002 3.03622 16.1793C2.51569 15.9089 2.09127 15.4845 1.82087 14.9639C1.5 14.3462 1.5 13.5347 1.5 11.9117V7.65649C1.5 6.03344 1.5 5.22192 1.82087 4.60421C2.09127 4.08368 2.51569 3.65926 3.03622 3.38886C3.52537 3.13477 4.13605 3.08189 5.175 3.07088V1.92749ZM11.145 4.56799V5.24375C11.145 5.65797 11.4808 5.99375 11.895 5.99375C12.3092 5.99375 12.645 5.65796 12.645 5.24375V4.56949C13.0864 4.5723 13.4176 4.58029 13.6905 4.60295C14.079 4.63522 14.2133 4.6893 14.2723 4.71998C14.5189 4.84807 14.7199 5.04911 14.848 5.29568C14.8787 5.35474 14.9328 5.48895 14.965 5.87749C14.9988 6.28399 15 6.81979 15 7.65649V11.9117C15 12.7484 14.9988 13.2842 14.965 13.6907C14.9328 14.0792 14.8787 14.2134 14.848 14.2725C14.7199 14.5191 14.5189 14.7201 14.2723 14.8482C14.2133 14.8789 14.079 14.9329 13.6905 14.9652C13.284 14.999 12.7482 15.0002 11.9115 15.0002H6.0885C5.2518 15.0002 4.71599 14.999 4.3095 14.9652C3.92096 14.9329 3.78674 14.8789 3.72768 14.8482C3.48112 14.7201 3.28007 14.5191 3.15199 14.2725C3.12131 14.2134 3.06723 14.0792 3.03496 13.6907C3.00121 13.2842 3 12.7484 3 11.9117V7.65649C3 6.81979 3.00121 6.28399 3.03496 5.87749C3.06723 5.48895 3.12131 5.35474 3.15199 5.29568C3.28007 5.04911 3.48112 4.84807 3.72768 4.71998C3.78674 4.6893 3.92096 4.63522 4.3095 4.60295C4.54399 4.58348 4.82151 4.57484 5.175 4.57101V5.24375C5.175 5.65797 5.51079 5.99375 5.925 5.99375C6.33921 5.99375 6.675 5.65796 6.675 5.24375V4.56799H11.145ZM13.1258 8.2501C13.54 8.2501 13.8758 8.58589 13.8758 9.0001C13.8758 9.41431 13.54 9.7501 13.1258 9.7501H10.2613C9.84705 9.7501 9.51126 9.41431 9.51126 9.0001C9.51126 8.58589 9.84705 8.2501 10.2613 8.2501H13.1258ZM13.8758 12.0918C13.8758 11.6776 13.54 11.3418 13.1258 11.3418H5.96745C5.55324 11.3418 5.21745 11.6776 5.21745 12.0918C5.21745 12.506 5.55324 12.8418 5.96745 12.8418H13.1258C13.54 12.8418 13.8758 12.506 13.8758 12.0918Z" fill="currentColor"/>
 </svg>
\ No newline at end of file
diff --git a/frontend/providers/applaunchpad/src/components/Icon/icons/monitor.svg b/frontend/providers/applaunchpad/src/components/Icon/icons/monitor.svg
new file mode 100644
index 000000000000..c81668789e4b
--- /dev/null
+++ b/frontend/providers/applaunchpad/src/components/Icon/icons/monitor.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+  <path d="M3.55009 3.75589C3.55009 3.20361 3.10237 2.75589 2.55009 2.75589C1.9978 2.75589 1.55009 3.20361 1.55009 3.75589L1.55008 18.677C1.55005 18.9285 1.55001 19.1761 1.56805 19.3864C1.588 19.619 1.63533 19.8942 1.78278 20.1698C1.98604 20.5497 2.30534 20.8497 2.68681 21.0348C2.95918 21.167 3.22965 21.2093 3.46286 21.2275C3.67733 21.2442 3.93174 21.2441 4.1986 21.2441L21.45 21.2441C22.0022 21.2441 22.45 20.7964 22.45 20.2441C22.45 19.6918 22.0022 19.2441 21.45 19.2441H4.23007C3.92033 19.2441 3.74531 19.2434 3.61802 19.2335C3.59428 19.2317 3.57582 19.2297 3.56187 19.2279L3.56073 19.2154C3.55094 19.1013 3.55009 18.9415 3.55009 18.6441V3.75589Z" fill="currentColor"/>
+  <path d="M20.3024 6.61259C19.9072 6.24223 19.2865 6.26244 18.9161 6.65773L15.1741 10.6516L12.1112 9.06122L12.0746 9.04183C11.9435 8.97177 11.671 8.82625 11.3674 8.7989C11.1126 8.77594 10.8563 8.81982 10.6236 8.92621C10.3464 9.05296 10.1379 9.28078 10.0375 9.39049L10.0094 9.42097L6.16576 13.5233C5.79541 13.9186 5.81562 14.5393 6.2109 14.9096C6.60619 15.28 7.22687 15.2598 7.59722 14.8645L11.3392 10.8706L14.4021 12.461L14.4387 12.4804C14.5699 12.5504 14.8423 12.696 15.1459 12.7233C15.4007 12.7463 15.6571 12.7024 15.8897 12.596C16.167 12.4692 16.3755 12.2414 16.4759 12.1317L16.504 12.1012L20.3476 7.99891C20.7179 7.60362 20.6977 6.98295 20.3024 6.61259Z" fill="currentColor"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/providers/applaunchpad/src/components/Icon/icons/refresh.svg b/frontend/providers/applaunchpad/src/components/Icon/icons/refresh.svg
new file mode 100644
index 000000000000..302e566a1f57
--- /dev/null
+++ b/frontend/providers/applaunchpad/src/components/Icon/icons/refresh.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon/line/refresh">
+<path id="Vector" d="M6.43552 14.6379C5.14802 14.2761 4.09802 13.5683 3.28552 12.5144C2.47302 11.4605 2.06677 10.2472 2.06677 8.87441C2.06677 8.16334 2.18552 7.48644 2.42302 6.84373C2.66052 6.20101 2.99802 5.61169 3.43552 5.07576C3.57302 4.92606 3.74177 4.84797 3.94177 4.84148C4.14177 4.835 4.32302 4.91309 4.48552 5.07576C4.62302 5.21299 4.69502 5.3814 4.70152 5.581C4.70802 5.7806 4.64227 5.96773 4.50427 6.14238C4.20427 6.52911 3.97302 6.95326 3.81052 7.41483C3.64802 7.87641 3.56677 8.36294 3.56677 8.87441C3.56677 9.88489 3.86377 10.7863 4.45777 11.5788C5.05177 12.3712 5.81727 12.9106 6.75427 13.197C6.91677 13.2469 7.05102 13.3405 7.15702 13.4777C7.26302 13.6149 7.31627 13.7646 7.31677 13.9268C7.31677 14.1763 7.22927 14.3729 7.05427 14.5166C6.87927 14.6603 6.67302 14.7008 6.43552 14.6379ZM9.69802 14.6379C9.46052 14.7003 9.25427 14.6566 9.07927 14.5069C8.90427 14.3572 8.81677 14.1576 8.81677 13.9081C8.81677 13.7584 8.87002 13.6149 8.97652 13.4777C9.08302 13.3405 9.21727 13.2469 9.37927 13.197C10.3168 12.8976 11.0825 12.3549 11.6765 11.569C12.2705 10.7831 12.5673 9.88489 12.5668 8.87441C12.5668 7.62691 12.1293 6.56653 11.2543 5.69328C10.3793 4.82003 9.31677 4.3834 8.06677 4.3834H8.01052L8.31052 4.6828C8.44802 4.82003 8.51677 4.99468 8.51677 5.20675C8.51677 5.41883 8.44802 5.59348 8.31052 5.7307C8.17302 5.86793 7.99802 5.93654 7.78552 5.93654C7.57302 5.93654 7.39802 5.86793 7.26052 5.7307L5.68552 4.15885C5.61052 4.084 5.55752 4.00291 5.52652 3.91559C5.49552 3.82826 5.47977 3.7347 5.47927 3.6349C5.47927 3.5351 5.49502 3.44153 5.52652 3.35421C5.55802 3.26688 5.61102 3.1858 5.68552 3.11095L7.26052 1.53909C7.39802 1.40186 7.57302 1.33325 7.78552 1.33325C7.99802 1.33325 8.17302 1.40186 8.31052 1.53909C8.44802 1.67632 8.51677 1.85097 8.51677 2.06304C8.51677 2.27512 8.44802 2.44977 8.31052 2.58699L8.01052 2.88639H8.06677C9.74177 2.88639 11.1605 3.46648 12.323 4.62666C13.4855 5.78684 14.0668 7.20276 14.0668 8.87441C14.0668 10.2342 13.6605 11.4443 12.848 12.5047C12.0355 13.565 10.9855 14.2761 9.69802 14.6379Z" fill="currentColor"/>
+</g>
+</svg>
diff --git a/frontend/providers/applaunchpad/src/components/Icon/icons/store.svg b/frontend/providers/applaunchpad/src/components/Icon/icons/store.svg
index 7e43075a539f..d212d3c1169b 100644
--- a/frontend/providers/applaunchpad/src/components/Icon/icons/store.svg
+++ b/frontend/providers/applaunchpad/src/components/Icon/icons/store.svg
@@ -1 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="33" height="33" fill="none" viewBox="0 0 33 33"><g clip-path="url(#clip0_638_2892)"><path fill="#999FAA" d="M28.2457 7.58728C28.1364 7.21966 27.9111 6.89725 27.6035 6.66816C27.2959 6.43907 26.9225 6.3156 26.539 6.31616H7.0901C6.70047 6.31587 6.32153 6.44359 6.01157 6.67967C5.70161 6.91576 5.47779 7.24713 5.37454 7.62283L2.8501 17.8717H30.779L28.2457 7.58728Z"/><path fill="#999FAA" d="M2.59229 19.6497V25.8719C2.59229 26.3434 2.77959 26.7956 3.11298 27.129C3.44638 27.4624 3.89857 27.6497 4.37006 27.6497H29.259C29.7304 27.6497 30.1826 27.4624 30.516 27.129C30.8494 26.7956 31.0367 26.3434 31.0367 25.8719V19.6497H2.59229ZM27.4812 24.0941H23.9256V22.3163H27.4812V24.0941Z"/></g><defs><clipPath id="clip0_638_2892"><rect width="32" height="32" fill="#fff" transform="translate(0.814453 0.0939941)"/></clipPath></defs></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" fill="none">
+  <path d="M5.23911 3.76461C4.87213 4.12955 4.63246 4.63018 4.1531 5.63145L1.58294 11H22.6039L19.9649 5.57522C19.4783 4.57508 19.235 4.07494 18.8649 3.71191C18.5512 3.40423 18.1738 3.16921 17.7594 3.02344C17.2703 2.85145 16.7142 2.85371 15.6019 2.85824L8.48993 2.88716C7.37984 2.89168 6.82479 2.89393 6.33787 3.06933C5.92519 3.21797 5.55013 3.45531 5.23911 3.76461Z" fill="#667085"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M1.1001 13.7658C1.1001 13.4761 1.1001 13.2232 1.1038 13H23.0964C23.1001 13.2232 23.1001 13.4761 23.1001 13.7658V14.882C23.1001 17.0461 23.1001 18.1281 22.6723 18.9517C22.3118 19.6458 21.7459 20.2117 21.0518 20.5722C20.2282 21 19.1462 21 16.9821 21H7.21809C5.05403 21 3.972 21 3.1484 20.5722C2.45435 20.2117 1.88845 19.6458 1.52793 18.9517C1.1001 18.1281 1.1001 17.0461 1.1001 14.882V13.7658ZM6.07268 14.9978C5.52039 14.9978 5.07268 15.4455 5.07268 15.9978C5.07268 16.5501 5.52039 16.9978 6.07268 16.9978H10.1003C10.6526 16.9978 11.1003 16.5501 11.1003 15.9978C11.1003 15.4455 10.6525 14.9978 10.1003 14.9978H6.07268Z" fill="#667085"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/providers/applaunchpad/src/components/Icon/icons/to.svg b/frontend/providers/applaunchpad/src/components/Icon/icons/to.svg
new file mode 100644
index 000000000000..af8c21bdf833
--- /dev/null
+++ b/frontend/providers/applaunchpad/src/components/Icon/icons/to.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path d="M1.33752 8.53113C1.33752 8.16294 1.636 7.86446 2.00419 7.86446H14.0011C14.3692 7.86446 14.6677 8.16294 14.6677 8.53113C14.6677 8.89932 14.3692 9.1978 14.0011 9.1978H2.00419C1.636 9.1978 1.33752 8.89932 1.33752 8.53113Z" fill="#667085"/>
+	<path d="M10.0592 5.50039C10.2834 5.20832 10.7019 5.1533 10.994 5.3775L14.4093 7.99914C14.7014 8.22333 14.7564 8.64184 14.5322 8.9339C14.308 9.22597 13.8895 9.28099 13.5974 9.05679L10.1821 6.43515C9.89006 6.21096 9.83504 5.79245 10.0592 5.50039Z" fill="#667085"/>
+	</svg>
diff --git a/frontend/providers/applaunchpad/src/components/Icon/index.tsx b/frontend/providers/applaunchpad/src/components/Icon/index.tsx
index bf1f410e152f..b4e2ceb9fe05 100644
--- a/frontend/providers/applaunchpad/src/components/Icon/index.tsx
+++ b/frontend/providers/applaunchpad/src/components/Icon/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import type { IconProps } from '@chakra-ui/react';
 import { Icon } from '@chakra-ui/react';
 
-const map = {
+export const IconMap = {
   more: require('./icons/more.svg').default,
   store: require('./icons/store.svg').default,
   configMap: require('./icons/configMap.svg').default,
@@ -51,20 +51,35 @@ const map = {
   upload: require('./icons/upload.svg').default,
   search: require('./icons/search.svg').default,
   pods: require('./icons/pods.svg').default,
+  monitor: require('./icons/monitor.svg').default,
   hardDrive: require('./icons/hardDrive.svg').default,
-  download: require('./icons/download.svg').default
+  download: require('./icons/download.svg').default,
+  calendar: require('./icons/calendar.svg').default,
+  to: require('./icons/to.svg').default,
+  refresh: require('./icons/refresh.svg').default,
+  container: require('./icons/container.svg').default,
+  arrowRight: require('./icons/arrowRight.svg').default,
+  chart: require('./icons/chart.svg').default,
+  export: require('./icons/export.svg').default
 };
 
-export type IconType = keyof typeof map;
+export type IconType = keyof typeof IconMap;
 
 const MyIcon = ({
   name,
   w = 'auto',
   h = 'auto',
   ...props
-}: { name: keyof typeof map } & IconProps) => {
-  return map[name] ? (
-    <Icon as={map[name]} verticalAlign={'text-top'} fill={'currentColor'} w={w} h={h} {...props} />
+}: { name: keyof typeof IconMap } & IconProps) => {
+  return IconMap[name] ? (
+    <Icon
+      as={IconMap[name]}
+      verticalAlign={'text-top'}
+      fill={'currentColor'}
+      w={w}
+      h={h}
+      {...props}
+    />
   ) : null;
 };
 
diff --git a/frontend/providers/applaunchpad/src/components/LangSelect/index.tsx b/frontend/providers/applaunchpad/src/components/LangSelect/index.tsx
index d848a87309f5..3e1401a1d1a8 100644
--- a/frontend/providers/applaunchpad/src/components/LangSelect/index.tsx
+++ b/frontend/providers/applaunchpad/src/components/LangSelect/index.tsx
@@ -1,6 +1,6 @@
 import { setLangStore } from '@/utils/cookieUtils';
 import { Menu, MenuButton, MenuButtonProps, MenuItem, MenuList, Text } from '@chakra-ui/react';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 const langIcon = (
   <svg
diff --git a/frontend/providers/applaunchpad/src/components/LogBarChart/index.tsx b/frontend/providers/applaunchpad/src/components/LogBarChart/index.tsx
new file mode 100644
index 000000000000..a2b7c079532c
--- /dev/null
+++ b/frontend/providers/applaunchpad/src/components/LogBarChart/index.tsx
@@ -0,0 +1,250 @@
+import dayjs from 'dayjs';
+import * as echarts from 'echarts';
+import React, { useEffect, useMemo, useRef } from 'react';
+
+import { useGlobalStore } from '@/store/global';
+import { MonitorDataResult } from '@/types/monitor';
+
+const map = {
+  blue: {
+    backgroundColor: {
+      type: 'linear',
+      x: 0,
+      y: 0,
+      x2: 0,
+      y2: 1,
+      colorStops: [
+        {
+          offset: 0,
+          color: 'rgba(3, 190, 232, 0.42)' // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: 'rgba(0, 182, 240, 0)'
+        }
+      ],
+      global: false // 缺省为 false
+    },
+    lineColor: '#85CCFF'
+  },
+  deepBlue: {
+    backgroundColor: {
+      type: 'linear',
+      x: 0,
+      y: 0,
+      x2: 0,
+      y2: 1,
+      colorStops: [
+        {
+          offset: 0,
+          color: 'rgba(47, 112, 237, 0.42)' // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: 'rgba(94, 159, 235, 0)'
+        }
+      ],
+      global: false
+    },
+    lineColor: '#3293EC'
+  },
+  purple: {
+    backgroundColor: {
+      type: 'linear',
+      x: 0,
+      y: 0,
+      x2: 0,
+      y2: 1,
+      colorStops: [
+        {
+          offset: 0,
+          color: 'rgba(211, 190, 255, 0.42)' // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: 'rgba(52, 60, 255, 0)'
+        }
+      ],
+      global: false // 缺省为 false
+    },
+    lineColor: '#8172D8'
+  },
+  green: {
+    backgroundColor: {
+      type: 'linear',
+      x: 0,
+      y: 0,
+      x2: 0,
+      y2: 1,
+      colorStops: [
+        {
+          offset: 0,
+          color: 'rgba(4, 209, 148, 0.42)' // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: 'rgba(19, 217, 181, 0)'
+        }
+      ],
+      global: false // 缺省为 false
+    },
+    lineColor: '#00A9A6',
+    max: 100
+  }
+};
+
+const LogBarChart = ({
+  type,
+  data,
+  isShowLabel = false,
+  visible = true
+}: {
+  type: 'blue' | 'deepBlue' | 'green' | 'purple';
+  data?: MonitorDataResult;
+  isShowLabel?: boolean;
+  visible?: boolean;
+}) => {
+  const { screenWidth } = useGlobalStore();
+  const xData = useMemo(
+    () =>
+      data?.xData?.map((time) => dayjs(time * 1000).format('MM-DD HH:mm')) || new Array(30).fill(0),
+    [data?.xData]
+  );
+  const yData = data?.yData || new Array(30).fill('');
+
+  const Dom = useRef<HTMLDivElement>(null);
+  const myChart = useRef<echarts.ECharts>();
+  const resizeObserver = useRef<ResizeObserver>();
+
+  const optionStyle = useMemo(
+    () => ({
+      areaStyle: {
+        color: map[type].backgroundColor
+      },
+      lineStyle: {
+        width: '1',
+        color: map[type].lineColor
+      },
+      itemStyle: {
+        width: 1.5,
+        color: map[type].lineColor
+      }
+    }),
+    [type]
+  );
+
+  const option = useRef({
+    xAxis: {
+      type: 'category',
+      data: xData,
+      boundaryGap: true,
+      axisLine: {
+        lineStyle: {
+          color: '#E8EBF0'
+        }
+      },
+      axisLabel: {
+        color: '#667085'
+      }
+    },
+    yAxis: {
+      type: 'value',
+      splitNumber: 3,
+      splitLine: {
+        lineStyle: {
+          type: 'dashed',
+          color: '#E4E7EC'
+        }
+      }
+    },
+    series: [
+      {
+        data: yData,
+        type: 'bar',
+        animationDuration: 300,
+        barWidth: '90%',
+        ...optionStyle
+      }
+    ],
+    grid: {
+      left: 0,
+      right: 0,
+      bottom: 0,
+      top: 5,
+      containLabel: true
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'line'
+      },
+      formatter: (params: any[]) => {
+        const axisValue = params[0]?.axisValue;
+        return `${axisValue} ${params[0]?.value || 0}`;
+      }
+    }
+  });
+
+  // init chart
+  useEffect(() => {
+    if (!Dom.current || myChart?.current?.getOption() || !visible) return;
+    myChart.current = echarts.init(Dom.current);
+    myChart.current && myChart.current.setOption(option.current);
+  }, [Dom, visible]);
+
+  // data changed, update
+  useEffect(() => {
+    if (!myChart.current || !myChart?.current?.getOption() || !visible) return;
+    option.current.xAxis.data = xData;
+    option.current.series[0].data = yData;
+    myChart.current.setOption(option.current);
+  }, [xData, yData, visible]);
+
+  // type changed, update
+  useEffect(() => {
+    if (!myChart.current || !myChart?.current?.getOption()) return;
+    option.current.series[0] = {
+      ...option.current.series[0],
+      ...optionStyle
+    };
+    myChart.current.setOption(option.current);
+  }, [optionStyle]);
+
+  // resize chart
+  useEffect(() => {
+    if (!myChart.current || !myChart.current.getOption()) return;
+    myChart.current.resize();
+  }, [screenWidth]);
+
+  useEffect(() => {
+    if (!Dom.current || !visible) return;
+
+    resizeObserver.current = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry?.contentRect && myChart.current) {
+        if (entry.contentRect.width > 0 && entry.contentRect.height > 0) {
+          myChart.current.resize();
+        }
+      }
+    });
+
+    resizeObserver.current.observe(Dom.current);
+
+    return () => {
+      resizeObserver.current?.disconnect();
+    };
+  }, [visible]);
+
+  useEffect(() => {
+    return () => {
+      if (myChart.current) {
+        myChart.current.dispose();
+      }
+      resizeObserver.current?.disconnect();
+    };
+  }, []);
+
+  return <div ref={Dom} style={{ width: '100%', height: '140px' }} />;
+};
+
+export default LogBarChart;
diff --git a/frontend/providers/applaunchpad/src/components/Monitor/Header.tsx b/frontend/providers/applaunchpad/src/components/Monitor/Header.tsx
new file mode 100644
index 000000000000..97ae5ea38cf3
--- /dev/null
+++ b/frontend/providers/applaunchpad/src/components/Monitor/Header.tsx
@@ -0,0 +1,158 @@
+import MyIcon from '@/components/Icon';
+import {
+  Box,
+  Button,
+  ButtonGroup,
+  Flex,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Text
+} from '@chakra-ui/react';
+import { useTranslation } from 'next-i18next';
+import AdvancedSelect, { ListItem } from '../AdvancedSelect';
+import DynamicTime from './Time';
+
+import { REFRESH_INTERVAL_OPTIONS } from '@/constants/monitor';
+import useDateTimeStore from '@/store/date';
+import { ChevronDownIcon } from '@chakra-ui/icons';
+import dynamic from 'next/dynamic';
+import { MyTooltip } from '@sealos/ui';
+const DatePicker = dynamic(() => import('@/components/DatePicker'), { ssr: false });
+
+export default function Header({
+  podList,
+  setPodList,
+  refetchData
+}: {
+  podList: ListItem[];
+  setPodList: (val: ListItem[]) => void;
+  refetchData: () => void;
+}) {
+  const { t } = useTranslation();
+  const { refreshInterval, setRefreshInterval } = useDateTimeStore();
+
+  return (
+    <Flex alignItems={'center'}>
+      <MyIcon name="monitor" width={'24px'} height={'24px'} color={'grayModern.900'} />
+      <Text ml={'9px'} fontSize={'16px'} fontWeight={'bold'} color={'grayModern.900'}>
+        {t('monitor')}
+      </Text>
+      <Flex
+        minW={'110px'}
+        flexShrink={0}
+        ml={'12px'}
+        fontSize={'12px'}
+        color={'grayModern.600'}
+        fontWeight={'400'}
+        alignItems={'center'}
+      >
+        ({t('Update Time')} &ensp;
+        <DynamicTime />)
+      </Flex>
+
+      <Flex alignItems={'center'} gap={'12px'} ml={'auto'}>
+        <AdvancedSelect
+          minW={'200px'}
+          height="32px"
+          checkBoxMode
+          leftIcon={<MyIcon name="pods" w={'16px'} h={'16px'} color={'grayModern.500'} />}
+          width={'fit-content'}
+          value={'hello-sql-postgresql-0'}
+          list={podList}
+          onCheckboxChange={(val) => {
+            setPodList(val);
+          }}
+          placeholder={t('please_select')}
+        />
+      </Flex>
+      <Flex alignItems={'center'} ml={'12px'}>
+        <DatePicker />
+      </Flex>
+      <ButtonGroup isAttached variant={'outline'} size={'sm'} ml={'12px'}>
+        <Button
+          height="32px"
+          bg={'grayModern.50'}
+          _hover={{
+            bg: 'grayModern.50'
+          }}
+          onClick={() => {
+            refetchData();
+          }}
+        >
+          <MyTooltip label={t('refresh')} hasArrow>
+            <Box position={'relative'}>
+              <MyIcon
+                name="refresh"
+                w={'16px'}
+                h={'16px'}
+                color={'grayModern.500'}
+                _hover={{
+                  color: 'brightBlue.500'
+                }}
+              />
+            </Box>
+          </MyTooltip>
+        </Button>
+        <Menu>
+          <MenuButton
+            as={Button}
+            height="32px"
+            bg={'grayModern.50'}
+            _hover={{
+              bg: 'grayModern.50',
+              '& div': {
+                color: 'brightBlue.500'
+              },
+              '& svg': {
+                color: 'brightBlue.500'
+              }
+            }}
+          >
+            <Flex alignItems={'center'}>
+              {refreshInterval === 0 ? null : (
+                <Text mr={'4px'}>{`${refreshInterval / 1000}s`}</Text>
+              )}
+              <ChevronDownIcon w={'16px'} h={'16px'} color={'grayModern.500'} />
+            </Flex>
+          </MenuButton>
+          <MenuList
+            p={'6px'}
+            borderRadius={'base'}
+            border={'1px solid #E8EBF0'}
+            boxShadow={
+              '0px 4px 10px 0px rgba(19, 51, 107, 0.10), 0px 0px 1px 0px rgba(19, 51, 107, 0.10)'
+            }
+            zIndex={99}
+            overflow={'overlay'}
+            maxH={'300px'}
+          >
+            {REFRESH_INTERVAL_OPTIONS.map((item) => (
+              <MenuItem
+                key={item.value}
+                value={item.value}
+                onClick={() => {
+                  setRefreshInterval(item.value);
+                }}
+                {...(refreshInterval === item.value
+                  ? {
+                      color: 'brightBlue.600'
+                    }
+                  : {})}
+                borderRadius={'4px'}
+                _hover={{
+                  bg: 'rgba(17, 24, 36, 0.05)',
+                  color: 'brightBlue.600'
+                }}
+                p={'6px'}
+              >
+                {item.label}
+              </MenuItem>
+            ))}
+          </MenuList>
+        </Menu>
+      </ButtonGroup>
+    </Flex>
+  );
+}
diff --git a/frontend/providers/applaunchpad/src/components/Monitor/Time.tsx b/frontend/providers/applaunchpad/src/components/Monitor/Time.tsx
new file mode 100644
index 000000000000..f9fee040c006
--- /dev/null
+++ b/frontend/providers/applaunchpad/src/components/Monitor/Time.tsx
@@ -0,0 +1,18 @@
+import { useState, useEffect } from 'react';
+import dayjs from 'dayjs';
+import { Box } from '@chakra-ui/react';
+
+export default function DynamicTime() {
+  const [time, setTime] = useState('--:--:--');
+
+  useEffect(() => {
+    setTime(dayjs().format('HH:mm:ss'));
+    const timer = setInterval(() => {
+      setTime(dayjs().format('HH:mm:ss'));
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, []);
+
+  return <Box>{time}</Box>;
+}
diff --git a/frontend/providers/applaunchpad/src/components/MonitorChart/index.module.css b/frontend/providers/applaunchpad/src/components/MonitorChart/index.module.css
new file mode 100644
index 000000000000..24a191906a60
--- /dev/null
+++ b/frontend/providers/applaunchpad/src/components/MonitorChart/index.module.css
@@ -0,0 +1,58 @@
+.tooltip {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+  border: 1px solid #e8ebf0;
+  box-shadow: 0px 24px 48px -12px rgba(19, 51, 107, 0.2), 0px 0px 1px 0px rgba(19, 51, 107, 0.2);
+}
+
+.tooltipHeader {
+  font-size: 12px;
+  font-weight: 500;
+  color: #111824;
+  margin-bottom: 12px;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 12px;
+}
+
+.tooltipItem {
+  display: flex;
+  align-items: center;
+}
+
+.tooltipItem:not(:last-child) {
+  margin-bottom: 12px;
+}
+
+.tooltipDot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 8px;
+}
+
+.tooltipName {
+  color: #333;
+  margin-right: 12px;
+}
+
+.tooltipValue {
+  font-weight: 500;
+  margin-right: 12px;
+}
+
+.tooltipButton {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: auto;
+  background: #f4f4f7;
+  color: #485264;
+  border: none;
+  padding: 6px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 500;
+}
diff --git a/frontend/providers/applaunchpad/src/components/MonitorChart/index.tsx b/frontend/providers/applaunchpad/src/components/MonitorChart/index.tsx
new file mode 100644
index 000000000000..da851edfba4b
--- /dev/null
+++ b/frontend/providers/applaunchpad/src/components/MonitorChart/index.tsx
@@ -0,0 +1,250 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import * as echarts from 'echarts';
+import { useGlobalStore } from '@/store/global';
+import dayjs from 'dayjs';
+import { LineStyleMap } from '@/constants/monitor';
+import { Flex, FlexProps, Text } from '@chakra-ui/react';
+import MyIcon from '../Icon';
+import { useTranslation } from 'next-i18next';
+import styles from './index.module.css';
+
+type MonitorChart = FlexProps & {
+  data: {
+    xData: string[];
+    yData: {
+      name: string;
+      type: string;
+      data: number[];
+      lineStyleType?: string;
+    }[];
+  };
+  type?: 'blue' | 'deepBlue' | 'green' | 'purple';
+  title: string;
+  yAxisLabelFormatter?: (value: number) => string;
+  yDataFormatter?: (values: number[]) => number[];
+  unit?: string;
+  isShowLegend?: boolean;
+};
+
+const MonitorChart = ({
+  type,
+  data,
+  title,
+  yAxisLabelFormatter,
+  yDataFormatter,
+  unit,
+  isShowLegend = true,
+  ...props
+}: MonitorChart) => {
+  const { screenWidth } = useGlobalStore();
+  const chartDom = useRef<HTMLDivElement>(null);
+  const myChart = useRef<echarts.ECharts>();
+  const { t } = useTranslation();
+
+  const option = useMemo(
+    () => ({
+      tooltip: {
+        trigger: 'axis',
+        enterable: true,
+        extraCssText: `
+          box-shadow: none; 
+          padding: 0; 
+          background-color: transparent; 
+          border: none;
+        `,
+        formatter: (params: any) => {
+          let axisValue = params[0]?.axisValue;
+          return `
+            <div class="${styles.tooltip}">
+              <div class="${styles.tooltipHeader}">${axisValue}</div>
+              ${params
+                .map(
+                  (item: any) => `
+                    <div class="${styles.tooltipItem}">
+                      <span class="${styles.tooltipDot}" style="background: ${item.color}"></span>
+                      <span class="${styles.tooltipName}">${item.seriesName}</span>
+                      <span class="${styles.tooltipValue}">${item.value}${unit || ''}</span>
+                      <button class="${styles.tooltipButton}" onclick="(() => {
+                        const currentUrl = window.location.href;
+                        const urlParams = currentUrl.split('?')[1] || '';
+                        const baseUrl = window.location.pathname.replace('/monitor', '/logs');
+                        const separator = urlParams ? '?' : '';
+                        window.location.href = baseUrl + separator + urlParams + (urlParams ? '&' : '?') + 'pod=${
+                          item.seriesName
+                        }';
+                      })()">${t('logs')}
+                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
+                          <path fill-rule="evenodd" clip-rule="evenodd" d="M6.64645 2.64645C6.45118 2.84171 6.45118 3.15829 6.64645 3.35355L8.79289 5.5H2C1.72386 5.5 1.5 5.72386 1.5 6C1.5 6.27614 1.72386 6.5 2 6.5H8.79289L6.64645 8.64645C6.45118 8.84171 6.45118 9.15829 6.64645 9.35355C6.84171 9.54882 7.15829 9.54882 7.35355 9.35355L10.3536 6.35355C10.5488 6.15829 10.5488 5.84171 10.3536 5.64645L7.35355 2.64645C7.15829 2.45118 6.84171 2.45118 6.64645 2.64645Z" fill="#667085"/>
+                        </svg>
+                      </button>
+                    </div>
+                  `
+                )
+                .join('')}
+            </div>
+          `;
+        },
+
+        // @ts-ignore
+        position: (point, params, dom, rect, size) => {
+          let xPos = point[0];
+          let yPos = point[1] + 10;
+          let chartWidth = size.viewSize[0];
+          let chartHeight = size.viewSize[1];
+          let tooltipWidth = dom.offsetWidth;
+          let tooltipHeight = dom.offsetHeight;
+
+          if (xPos + tooltipWidth > chartWidth) {
+            xPos = xPos - tooltipWidth;
+          }
+
+          if (xPos < 0) {
+            xPos = 0;
+          }
+
+          return [xPos, yPos];
+        }
+      },
+      grid: {
+        left: '4px',
+        bottom: '4px',
+        top: '10px',
+        right: '20px',
+        containLabel: true
+      },
+      xAxis: {
+        show: true,
+        type: 'category',
+        offset: 4,
+        boundaryGap: false,
+        axisLabel: {
+          interval: (index: number, value: string) => {
+            const total = data?.xData?.length || 0;
+            if (index === 0 || index === total - 1) return false;
+            return index % Math.floor(total / 6) === 0;
+          },
+          textStyle: {
+            color: '#667085'
+          },
+          hideOverlap: true
+        },
+        axisTick: {
+          show: false
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#E4E7EC',
+            type: 'solid'
+          }
+        },
+        data: data?.xData?.map((time) => dayjs(parseFloat(time) * 1000).format('MM-DD HH:mm'))
+      },
+      yAxis: {
+        type: 'value',
+        splitNumber: 2,
+        max: 100,
+        min: 0,
+        boundaryGap: false,
+        axisLabel: {
+          formatter: yAxisLabelFormatter
+        },
+        axisLine: {
+          show: false
+        },
+        splitLine: {
+          lineStyle: {
+            type: 'dashed',
+            color: '#E4E7EC'
+          }
+        }
+      },
+      series: data?.yData?.map((item, index) => {
+        return {
+          name: item.name,
+          data: item.data,
+          type: 'line',
+          smooth: true,
+          showSymbol: false,
+          animationDuration: 300,
+          animationEasingUpdate: 'linear',
+          areaStyle: {
+            color: LineStyleMap[index % LineStyleMap.length].backgroundColor
+          },
+          lineStyle: {
+            width: '1',
+            color: LineStyleMap[index % LineStyleMap.length].lineColor,
+            type: item?.lineStyleType || 'solid'
+          },
+          itemStyle: {
+            width: 1.5,
+            color: LineStyleMap[index % LineStyleMap.length].lineColor
+          },
+          emphasis: {
+            // highlight
+            disabled: true
+          }
+        };
+      })
+    }),
+    [data?.xData, data?.yData]
+  );
+
+  useEffect(() => {
+    if (!chartDom.current) return;
+
+    if (!myChart.current) {
+      myChart.current = echarts.init(chartDom.current);
+    } else {
+      myChart.current.dispose();
+      myChart.current = echarts.init(chartDom.current);
+    }
+
+    myChart.current.setOption(option);
+  }, [data, option]);
+
+  useEffect(() => {
+    return () => {
+      if (myChart.current) {
+        myChart.current.dispose();
+      }
+    };
+  }, []);
+
+  // resize chart
+  useEffect(() => {
+    if (!myChart.current || !myChart.current.getOption()) return;
+    myChart.current.resize();
+  }, [screenWidth]);
+
+  return (
+    <Flex position={'relative'} height={'100%'} gap={'25px'}>
+      <Flex ref={chartDom} flex={'1 1 80%'} />
+      {isShowLegend && (
+        <Flex
+          justifyContent={'center'}
+          alignContent={'center'}
+          flexDirection={'column'}
+          flex={'1 0 20%'}
+          gap={'12px'}
+        >
+          {data?.yData?.map((item, index) => (
+            <Flex key={item?.name + index} alignItems={'center'} w={'fit-content'}>
+              <MyIcon
+                width={'16px'}
+                name="chart"
+                color={LineStyleMap[index % LineStyleMap.length].lineColor}
+                mr="6px"
+              />
+              <Text fontSize={'11px'} color={'grayModern.900'} fontWeight={500}>
+                {item?.name}
+              </Text>
+            </Flex>
+          ))}
+        </Flex>
+      )}
+    </Flex>
+  );
+};
+
+export default MonitorChart;
diff --git a/frontend/providers/applaunchpad/src/components/PodLineChart/index.tsx b/frontend/providers/applaunchpad/src/components/PodLineChart/index.tsx
index f1de5f0bdb83..17c295603f2c 100644
--- a/frontend/providers/applaunchpad/src/components/PodLineChart/index.tsx
+++ b/frontend/providers/applaunchpad/src/components/PodLineChart/index.tsx
@@ -150,6 +150,9 @@ const PodLineChart = ({
       min: 0,
       axisLabel: {
         show: isShowLabel
+      },
+      splitLine: {
+        show: false
       }
     },
     grid: {
diff --git a/frontend/providers/applaunchpad/src/components/app/detail/index/AdvancedInfo.tsx b/frontend/providers/applaunchpad/src/components/app/detail/index/AdvancedInfo.tsx
new file mode 100644
index 000000000000..cfabf6fea917
--- /dev/null
+++ b/frontend/providers/applaunchpad/src/components/app/detail/index/AdvancedInfo.tsx
@@ -0,0 +1,314 @@
+import MyIcon from '@/components/Icon';
+import { MOCK_APP_DETAIL } from '@/mock/apps';
+import type { AppDetailType } from '@/types/app';
+import { useCopyData } from '@/utils/tools';
+import {
+  Accordion,
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  Box,
+  Center,
+  Divider,
+  Flex,
+  Text,
+  useTheme
+} from '@chakra-ui/react';
+import { MyTooltip } from '@sealos/ui';
+import { useTranslation } from 'next-i18next';
+import dynamic from 'next/dynamic';
+import React, { useState } from 'react';
+import styles from '@/components/app/detail/index/index.module.scss';
+
+const ConfigMapDetailModal = dynamic(() => import('./ConfigMapDetailModal'));
+
+const AdvancedInfo = ({ app = MOCK_APP_DETAIL }: { app: AppDetailType }) => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const { copyData } = useCopyData();
+  const [detailConfigMap, setDetailConfigMap] = useState<{
+    mountPath: string;
+    value: string;
+  }>();
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  return (
+    <Box px={'32px'}>
+      <Accordion allowToggle onChange={(expandedIndex) => setIsExpanded(expandedIndex === 0)}>
+        <AccordionItem border={'none'}>
+          <AccordionButton
+            display={'flex'}
+            height={'52px'}
+            textAlign={'left'}
+            py={4}
+            px={'0px'}
+            _hover={{ backgroundColor: 'transparent' }}
+          >
+            <Box color={'grayModern.900'} fontSize={'14px'} fontWeight={'bold'}>
+              {t('Advanced Configuration')}
+            </Box>
+
+            <Flex
+              ml={'20px'}
+              alignItems={'center'}
+              fontSize={'12px'}
+              fontWeight={400}
+              color={'grayModern.600'}
+            >
+              <Text>
+                {t('Command')}: {app.runCMD || 'Not Configured'}
+              </Text>
+              <Divider
+                orientation="vertical"
+                h={'12px'}
+                mx={'16px'}
+                borderColor={'grayModern.300'}
+              />
+              <Text>
+                {t('Environment Variables')}: {app.envs?.length}
+              </Text>
+              <Divider
+                orientation="vertical"
+                h={'12px'}
+                mx={'16px'}
+                borderColor={'grayModern.300'}
+              />
+              <Text>ConfigMaps: {app.configMapList?.length}</Text>
+              <Divider
+                orientation="vertical"
+                h={'12px'}
+                mx={'16px'}
+                borderColor={'grayModern.300'}
+              />
+              <Text>
+                {t('Storage')}: {app.storeList?.length}
+              </Text>
+            </Flex>
+
+            <Box ml={'auto'}>
+              <AccordionIcon />
+            </Box>
+          </AccordionButton>
+          <AccordionPanel>
+            <Flex mt={'8px'} gap={'16px'}>
+              <Box flex={'1 0 0'} width={'0px'}>
+                <Box fontSize={'12px'} fontWeight={400} color={'grayModern.600'}>
+                  <Text>{t('Command')}</Text>
+                  <Box
+                    borderRadius={'4px'}
+                    border={'1px solid #F4F4F7'}
+                    bg={'grayModern.25'}
+                    p={'12px'}
+                    mt={'8px'}
+                  >
+                    {[
+                      { label: 'Command', value: app.runCMD || 'Not Configured' },
+                      { label: 'Parameters', value: app.cmdParam || 'Not Configured' }
+                    ].map((item) => (
+                      <Flex
+                        key={item.label}
+                        _notFirst={{
+                          mt: '12px'
+                        }}
+                      >
+                        <Box flex={'0 0 80px'} w={0}>
+                          {t(item.label)}
+                        </Box>
+                        <Box color={'grayModern.900'}>{item.value}</Box>
+                      </Flex>
+                    ))}
+                  </Box>
+                </Box>
+                <Box mt={'16px'} fontSize={'12px'} fontWeight={400} color={'grayModern.600'}>
+                  <Text>{t('Environment Variables')}</Text>
+                  <Box
+                    borderRadius={'4px'}
+                    border={'1px solid #F4F4F7'}
+                    bg={'grayModern.25'}
+                    p={'12px'}
+                    mt={'8px'}
+                  >
+                    {app.envs?.length > 0 ? (
+                      <Flex
+                        flexDirection={'column'}
+                        border={theme.borders.base}
+                        bg={'#fff'}
+                        borderRadius={'md'}
+                      >
+                        {app.envs.map((env, index) => {
+                          const valText = env.value
+                            ? env.value
+                            : env.valueFrom
+                            ? 'value from | ***'
+                            : '';
+                          return (
+                            <Flex
+                              key={env.key}
+                              gap={'24px'}
+                              px="10px"
+                              py="8px"
+                              borderBottom={'1px solid'}
+                              borderBottomColor={
+                                index !== app.envs.length - 1 ? 'grayModern.150' : 'transparent'
+                              }
+                            >
+                              <Box flex={1} maxW={'40%'} overflowWrap={'break-word'}>
+                                {env.key}
+                              </Box>
+                              <MyTooltip label={valText}>
+                                <Box
+                                  flex={1}
+                                  className={styles.textEllipsis}
+                                  style={{
+                                    userSelect: 'auto',
+                                    cursor: 'pointer'
+                                  }}
+                                  onClick={() => copyData(valText)}
+                                >
+                                  {valText}
+                                </Box>
+                              </MyTooltip>
+                            </Flex>
+                          );
+                        })}
+                      </Flex>
+                    ) : (
+                      <Center
+                        w={'100%'}
+                        h={'32px'}
+                        color={'grayModern.600'}
+                        fontSize={'12px'}
+                        borderRadius={'4px'}
+                      >
+                        <Box>{t('no_data_available')}</Box>
+                      </Center>
+                    )}
+                  </Box>
+                </Box>
+              </Box>
+              <Box flex={'1 0 0'}>
+                <Box fontSize={'12px'} fontWeight={400} color={'grayModern.600'}>
+                  <Text>{t('Configuration File')}</Text>
+                  <Box
+                    borderRadius={'4px'}
+                    border={'1px solid #F4F4F7'}
+                    bg={'grayModern.25'}
+                    p={'12px'}
+                    mt={'8px'}
+                  >
+                    {app.configMapList?.length > 0 ? (
+                      <Box
+                        borderRadius={'md'}
+                        overflow={'hidden'}
+                        bg={'#FFF'}
+                        border={theme.borders.base}
+                      >
+                        {app.configMapList.map((item) => (
+                          <Flex
+                            key={item.mountPath}
+                            alignItems={'center'}
+                            px={'14px'}
+                            py={'8px'}
+                            cursor={'pointer'}
+                            _notLast={{
+                              borderBottom: theme.borders.base
+                            }}
+                          >
+                            <MyIcon name={'configMap'} width={'24px'} height={'24px'} />
+                            <Box ml={4} flex={'1 0 0'} w={'0px'}>
+                              <Box fontWeight={'bold'} color={'grayModern.900'}>
+                                {item.mountPath}
+                              </Box>
+                              <Box
+                                className={styles.textEllipsis}
+                                color={'grayModern.600'}
+                                fontSize={'sm'}
+                              >
+                                {item.value}
+                              </Box>
+                            </Box>
+                          </Flex>
+                        ))}
+                      </Box>
+                    ) : (
+                      <Center
+                        w={'100%'}
+                        h={'32px'}
+                        color={'grayModern.600'}
+                        fontSize={'12px'}
+                        borderRadius={'4px'}
+                      >
+                        <Box>{t('no_data_available')}</Box>
+                      </Center>
+                    )}
+                  </Box>
+                </Box>
+                <Box mt={'16px'} fontSize={'12px'} fontWeight={400} color={'grayModern.600'}>
+                  <Text>{t('Storage')}</Text>
+                  <Box
+                    borderRadius={'4px'}
+                    border={'1px solid #F4F4F7'}
+                    bg={'grayModern.25'}
+                    p={'12px'}
+                    mt={'8px'}
+                  >
+                    {app.storeList?.length > 0 ? (
+                      <Box
+                        borderRadius={'md'}
+                        overflow={'hidden'}
+                        bg={'#FFF'}
+                        border={theme.borders.base}
+                      >
+                        {app.storeList.map((item) => (
+                          <Flex
+                            key={item.path}
+                            alignItems={'center'}
+                            px={'14px'}
+                            py={'8px'}
+                            _notLast={{
+                              borderBottom: theme.borders.base
+                            }}
+                          >
+                            <MyIcon name={'store'} width={'24px'} height={'24px'} />
+                            <Box ml={4} flex={'1 0 0'} w={'0px'}>
+                              <Box color={'grayModern.900'} fontWeight={'bold'}>
+                                {item.path}
+                              </Box>
+                              <Box
+                                className={styles.textEllipsis}
+                                color={'grayModern.600'}
+                                fontSize={'sm'}
+                              >
+                                {item.value} Gi
+                              </Box>
+                            </Box>
+                          </Flex>
+                        ))}
+                      </Box>
+                    ) : (
+                      <Center
+                        w={'100%'}
+                        h={'32px'}
+                        color={'grayModern.600'}
+                        fontSize={'12px'}
+                        borderRadius={'4px'}
+                      >
+                        <Box>{t('no_data_available')}</Box>
+                      </Center>
+                    )}
+                  </Box>
+                </Box>
+              </Box>
+            </Flex>
+          </AccordionPanel>
+        </AccordionItem>
+      </Accordion>
+      {detailConfigMap && (
+        <ConfigMapDetailModal {...detailConfigMap} onClose={() => setDetailConfigMap(undefined)} />
+      )}
+    </Box>
+  );
+};
+
+export default React.memo(AdvancedInfo);
diff --git a/frontend/providers/applaunchpad/src/components/app/detail/index/AppBaseInfo.tsx b/frontend/providers/applaunchpad/src/components/app/detail/index/AppBaseInfo.tsx
new file mode 100644
index 000000000000..f7f86921d9a1
--- /dev/null
+++ b/frontend/providers/applaunchpad/src/components/app/detail/index/AppBaseInfo.tsx
@@ -0,0 +1,224 @@
+import GPUItem from '@/components/GPUItem';
+import MyIcon from '@/components/Icon';
+import { MOCK_APP_DETAIL } from '@/mock/apps';
+import { useUserStore } from '@/store/user';
+import type { AppDetailType } from '@/types/app';
+import { printMemory, useCopyData } from '@/utils/tools';
+import {
+  Accordion,
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  Box,
+  Divider,
+  Flex,
+  Tag,
+  Text,
+  useTheme
+} from '@chakra-ui/react';
+import { MyTooltip } from '@sealos/ui';
+import { useTranslation } from 'next-i18next';
+import dynamic from 'next/dynamic';
+import React, { useMemo, useState } from 'react';
+import { sealosApp } from 'sealos-desktop-sdk/app';
+
+const ConfigMapDetailModal = dynamic(() => import('./ConfigMapDetailModal'));
+
+const AppBaseInfo = ({ app = MOCK_APP_DETAIL }: { app: AppDetailType }) => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const { copyData } = useCopyData();
+  const { userSourcePrice } = useUserStore();
+  const [detailConfigMap, setDetailConfigMap] = useState<{
+    mountPath: string;
+    value: string;
+  }>();
+
+  const appInfoTable = useMemo<
+    {
+      name: string;
+      iconName: string;
+      items: {
+        label: string;
+        value?: string;
+        copy?: string;
+        render?: React.ReactNode;
+      }[];
+    }[]
+  >(
+    () => [
+      {
+        name: 'Basic Information',
+        iconName: 'formInfo',
+        items: [
+          { label: 'Creation Time', value: app.createTime },
+          {
+            label: `${t('Image Name')} ${app.secret.use ? '(Private)' : ''}`,
+            value: app.imageName
+          },
+          { label: 'Limit CPU', value: `${app.cpu / 1000} Core` },
+          {
+            label: 'Limit Memory',
+            value: printMemory(app.memory)
+          },
+          ...(userSourcePrice?.gpu
+            ? [
+                {
+                  label: 'GPU',
+                  render: <GPUItem gpu={app.gpu} />
+                }
+              ]
+            : [])
+        ]
+      },
+      {
+        name: 'Deployment Mode',
+        iconName: 'deployMode',
+        items: app.hpa.use
+          ? [
+              {
+                label: `${app.hpa.target} ${t('target_value')}`,
+                value: `${app.hpa.value}${app.hpa.target === 'gpu' ? '' : '%'}`
+              },
+              {
+                label: 'Number of Instances',
+                value: `${app.hpa.minReplicas} ~ ${app.hpa.maxReplicas}`
+              }
+            ]
+          : [{ label: `Number of Instances`, value: `${app.replicas}` }]
+      }
+    ],
+    [app]
+  );
+
+  const appTags = useMemo(
+    () => [
+      ...(app.networks.find((item) => item.openPublicDomain) ? ['Public Access'] : []),
+      ...(app.hpa.use ? ['Auto scaling'] : ['Fixed instance']),
+      ...(app.storeList.length > 0 ? ['Stateful'] : ['Stateless'])
+    ],
+    [app]
+  );
+
+  const persistentVolumes = useMemo(() => {
+    return app.volumes
+      .filter((item) => 'persistentVolumeClaim' in item)
+      .reduce(
+        (
+          acc: {
+            path: string;
+            name: string;
+          }[],
+          volume
+        ) => {
+          const mount = app.volumeMounts.find((m) => m.name === volume.name);
+          if (mount) {
+            acc.push({
+              path: mount.mountPath,
+              name: volume.name
+            });
+          }
+          return acc;
+        },
+        []
+      );
+  }, [app.volumes, app.volumeMounts]);
+
+  return (
+    <Box px={'32px'} py={'24px'} position={'relative'}>
+      {appInfoTable.map((info, index) => (
+        <Box key={info.name}>
+          <Flex
+            alignItems={'center'}
+            color={'grayModern.900'}
+            fontSize={'14px'}
+            fontWeight={'bold'}
+          >
+            {t(info.name)}
+          </Flex>
+          <Box mt={'14px'}>
+            {app?.source?.hasSource && index === 0 && (
+              <Box fontSize={'12px'}>
+                <Flex
+                  flexWrap={'wrap'}
+                  cursor={'pointer'}
+                  onClick={() => {
+                    if (!app?.source?.sourceName) return;
+                    if (app.source.sourceType === 'app_store') {
+                      sealosApp.runEvents('openDesktopApp', {
+                        appKey: 'system-template',
+                        pathname: '/instance',
+                        query: { instanceName: app.source.sourceName }
+                      });
+                    }
+                    if (app.source.sourceType === 'sealaf') {
+                      sealosApp.runEvents('openDesktopApp', {
+                        appKey: 'system-sealaf',
+                        pathname: '/',
+                        query: { instanceName: app.source.sourceName }
+                      });
+                    }
+                  }}
+                >
+                  <Text flex={'0 0 110px'} w={0} color={'grayModern.600'}>
+                    {t('application_source')}
+                  </Text>
+                  <Flex alignItems={'center'}>
+                    <Text color={'grayModern.900'}>{t(app.source?.sourceType)}</Text>
+                    <Divider
+                      orientation="vertical"
+                      h={'12px'}
+                      mx={'8px'}
+                      borderColor={'grayModern.300'}
+                    />
+                    <Box color={'grayModern.600'}>{t('Manage all resources')}</Box>
+                    <MyIcon name="upperRight" width={'14px'} color={'grayModern.600'} />
+                  </Flex>
+                </Flex>
+              </Box>
+            )}
+            {info.items.map((item, i) => (
+              <Flex
+                key={item.label || i}
+                flexWrap={'wrap'}
+                _notFirst={{
+                  mt: '12px'
+                }}
+              >
+                <Box flex={'0 0 110px'} w={0} color={'grayModern.600'} fontSize={'12px'}>
+                  {t(item.label)}
+                </Box>
+                <Box
+                  fontSize={'12px'}
+                  color={'grayModern.900'}
+                  flex={'1 0 0'}
+                  textOverflow={'ellipsis'}
+                  overflow={'hidden'}
+                  whiteSpace={'nowrap'}
+                >
+                  <MyTooltip label={item.value}>
+                    <Box
+                      as="span"
+                      cursor={!!item.copy ? 'pointer' : 'default'}
+                      onClick={() => item.value && !!item.copy && copyData(item.copy)}
+                    >
+                      {item.render ? item.render : item.value}
+                    </Box>
+                  </MyTooltip>
+                </Box>
+              </Flex>
+            ))}
+          </Box>
+          {index !== appInfoTable.length - 1 && <Divider my={'16px'} />}
+        </Box>
+      ))}
+
+      {detailConfigMap && (
+        <ConfigMapDetailModal {...detailConfigMap} onClose={() => setDetailConfigMap(undefined)} />
+      )}
+    </Box>
+  );
+};
+
+export default React.memo(AppBaseInfo);
diff --git a/frontend/providers/applaunchpad/src/pages/app/detail/components/AppMainInfo.tsx b/frontend/providers/applaunchpad/src/components/app/detail/index/AppMainInfo.tsx
similarity index 75%
rename from frontend/providers/applaunchpad/src/pages/app/detail/components/AppMainInfo.tsx
rename to frontend/providers/applaunchpad/src/components/app/detail/index/AppMainInfo.tsx
index 53efbbae50b1..aa9a95778c88 100644
--- a/frontend/providers/applaunchpad/src/pages/app/detail/components/AppMainInfo.tsx
+++ b/frontend/providers/applaunchpad/src/components/app/detail/index/AppMainInfo.tsx
@@ -8,7 +8,7 @@ import { DOMAIN_PORT } from '@/store/static';
 import type { AppDetailType } from '@/types/app';
 import { useCopyData } from '@/utils/tools';
 import { getUserNamespace } from '@/utils/user';
-import { Box, Button, Center, Flex, Grid, useDisclosure } from '@chakra-ui/react';
+import { Box, Button, Center, Flex, Grid, Text, useDisclosure } from '@chakra-ui/react';
 import dayjs from 'dayjs';
 import { useTranslation } from 'next-i18next';
 import { useMemo } from 'react';
@@ -35,41 +35,29 @@ const AppMainInfo = ({ app = MOCK_APP_DETAIL }: { app: AppDetailType }) => {
   );
 
   return (
-    <Box px={6} py={6} position={'relative'}>
+    <Box p={'24px'} position={'relative'}>
       <>
-        <Flex alignItems={'center'} fontSize={'12px'} fontWeight={'bold'}>
-          <MyIcon name={'listen'} w={'14px'} color={'grayModern.600'} />
-          <Box ml={'12px'} color={'grayModern.600'}>
-            {t('Real-time Monitoring')}
-          </Box>
-          <Box ml={2} color={'grayModern.500'}>
-            ({t('Update Time')}&ensp;
-            {dayjs().format('HH:mm')})
+        <Flex alignItems={'center'} fontSize={'14px'} fontWeight={'bold'}>
+          <Box color={'grayModern.900'}>{t('Real-time Monitoring')}</Box>
+          <Box ml={'8px'} color={'grayModern.600'}>
+            ({t('Update Time')}&ensp;{dayjs().format('HH:mm')})
           </Box>
         </Flex>
         <Grid
           w={'100%'}
           templateColumns={'1fr 1fr'}
           gap={3}
-          mt={2}
-          p={'16px'}
-          backgroundColor={'grayModern.50'}
-          borderRadius={'md'}
+          mt={'12px'}
+          px={'16px'}
+          py={'12px'}
+          backgroundColor={'#FBFBFC'}
+          borderRadius={'6px'}
           fontSize={'12px'}
           color={'grayModern.600'}
           fontWeight={'bold'}
           position={'relative'}
           className="driver-detail-monitor"
         >
-          <Button
-            variant={'square'}
-            position={'absolute'}
-            right={'12px'}
-            top={'8px'}
-            onClick={onOpen}
-          >
-            <MyIcon name="enlarge" width={'16px'} fill={'#667085'} />
-          </Button>
           <Box>
             <Box mb={'4px'}>CPU&ensp;({app.usedCpu.yData[app.usedCpu.yData.length - 1]}%)</Box>
             <Box h={'60px'}>
@@ -85,17 +73,11 @@ const AppMainInfo = ({ app = MOCK_APP_DETAIL }: { app: AppDetailType }) => {
             </Box>
           </Box>
         </Grid>
-        <Flex
-          mt={3}
-          alignItems={'center'}
-          fontSize={'12px'}
-          color={'grayModern.600'}
-          fontWeight={'bold'}
-        >
-          <MyIcon name={'network'} w={'14px'} />
-          <Box ml={'12px'}>
-            {t('Network Configuration')}({networks.length})
-          </Box>
+        <Flex mt={3} alignItems={'center'} fontSize={'14px'} fontWeight={'bold'}>
+          <Text color={'grayModern.900'}>{t('Network Configuration')}</Text>
+          <Text ml={'8px'} color={'grayModern.600'}>
+            ({networks.length})
+          </Text>
         </Flex>
         <Flex mt={'12px'} className="driver-detail-network">
           <table className={'table-cross'}>
@@ -117,6 +99,7 @@ const AppMainInfo = ({ app = MOCK_APP_DETAIL }: { app: AppDetailType }) => {
                       <Flex>
                         <MyTooltip label={t('Copy')} placement={'bottom-start'}>
                           <Box
+                            fontSize={'12px'}
                             cursor={'pointer'}
                             _hover={{ textDecoration: 'underline' }}
                             onClick={() => copyData(network.inline)}
@@ -133,6 +116,7 @@ const AppMainInfo = ({ app = MOCK_APP_DETAIL }: { app: AppDetailType }) => {
                           placement={'bottom-start'}
                         >
                           <Box
+                            fontSize={'12px'}
                             className={'textEllipsis'}
                             {...(network.public
                               ? {
@@ -146,17 +130,23 @@ const AppMainInfo = ({ app = MOCK_APP_DETAIL }: { app: AppDetailType }) => {
                           </Box>
                         </MyTooltip>
                         {!!network.public && (
-                          <MyIcon
-                            cursor={'pointer'}
-                            mr={2}
-                            name={'copy'}
-                            w={'14px'}
-                            color={'grayModern.500'}
+                          <Center
+                            flexShrink={0}
+                            w={'24px'}
+                            h={'24px'}
+                            borderRadius={'6px'}
                             _hover={{
-                              color: 'hover.iconBlue'
+                              bg: 'rgba(17, 24, 36, 0.05)'
                             }}
-                            onClick={() => copyData(network.public)}
-                          />
+                            cursor={'pointer'}
+                          >
+                            <MyIcon
+                              name={'copy'}
+                              w={'16px'}
+                              color={'#667085'}
+                              onClick={() => copyData(network.public)}
+                            />
+                          </Center>
                         )}
                       </Flex>
                     </th>
diff --git a/frontend/providers/applaunchpad/src/pages/app/detail/components/ConfigMapDetailModal.tsx b/frontend/providers/applaunchpad/src/components/app/detail/index/ConfigMapDetailModal.tsx
similarity index 100%
rename from frontend/providers/applaunchpad/src/pages/app/detail/components/ConfigMapDetailModal.tsx
rename to frontend/providers/applaunchpad/src/components/app/detail/index/ConfigMapDetailModal.tsx
diff --git a/frontend/providers/applaunchpad/src/pages/app/detail/components/DelModal.tsx b/frontend/providers/applaunchpad/src/components/app/detail/index/DelModal.tsx
similarity index 100%
rename from frontend/providers/applaunchpad/src/pages/app/detail/components/DelModal.tsx
rename to frontend/providers/applaunchpad/src/components/app/detail/index/DelModal.tsx
diff --git a/frontend/providers/applaunchpad/src/pages/app/detail/components/Header.tsx b/frontend/providers/applaunchpad/src/components/app/detail/index/Header.tsx
similarity index 85%
rename from frontend/providers/applaunchpad/src/pages/app/detail/components/Header.tsx
rename to frontend/providers/applaunchpad/src/components/app/detail/index/Header.tsx
index a2b9910268ab..cb529906062c 100644
--- a/frontend/providers/applaunchpad/src/pages/app/detail/components/Header.tsx
+++ b/frontend/providers/applaunchpad/src/components/app/detail/index/Header.tsx
@@ -112,19 +112,20 @@ const Header = ({
   }, [appName, refetch, toast]);
 
   return (
-    <Flex h={'86px'} alignItems={'center'}>
+    <Flex h={'32px'} my={'14px'} alignItems={'center'}>
       <Center cursor={'pointer'} onClick={() => router.replace('/apps')}>
         <MyIcon name="arrowLeft" w={'24px'} />
       </Center>
-      <Box ml={'4px'} mr={3} fontWeight={'bold'} color={'grayModern.900'} fontSize={'2xl'}>
+      <Box ml={'4px'} mr={3} fontWeight={'bold'} color={'grayModern.900'} fontSize={'18px'}>
         {appName}
       </Box>
       <AppStatusTag status={appStatus} isPause={isPause} showBorder={false} />
-      {!isLargeScreen && (
+      {/* {!isLargeScreen && (
         <Box mx={4}>
           <Button
-            width={'96px'}
-            height={'40px'}
+            minW={'75px'}
+            fontSize={'12px'}
+            height={'32px'}
             leftIcon={<MyIcon name="detail" w="16px" h="16px" />}
             variant={'outline'}
             onClick={() => setShowSlider(true)}
@@ -132,17 +133,18 @@ const Header = ({
             {t('Details')}
           </Button>
         </Box>
-      )}
+      )} */}
       <Box flex={1} />
 
       {/* btns */}
       {isPause ? (
         <Button
-          width={'96px'}
+          minW={'75px'}
+          fontSize={'12px'}
           variant={'outline'}
-          mr={5}
-          h={'40px'}
-          leftIcon={<MyIcon name="continue" w={'20px'} fill={'#485264'} />}
+          mr={'12px'}
+          h={'32px'}
+          leftIcon={<MyIcon name="continue" w={'16px'} fill={'#485264'} />}
           isLoading={loading}
           onClick={handleStartApp}
         >
@@ -150,11 +152,12 @@ const Header = ({
         </Button>
       ) : (
         <Button
-          width={'96px'}
+          minW={'75px'}
+          fontSize={'12px'}
           variant={'outline'}
-          mr={5}
-          h={'40px'}
-          leftIcon={<MyIcon name="pause" w={'20px'} fill={'#485264'} />}
+          mr={'12px'}
+          h={'32px'}
+          leftIcon={<MyIcon name="pause" w={'16px'} fill={'#485264'} />}
           isLoading={loading}
           onClick={onOpenPause(handlePauseApp)}
         >
@@ -165,11 +168,12 @@ const Header = ({
         <Button
           className="driver-detail-update-button"
           _focusVisible={{ boxShadow: '' }}
-          mr={5}
-          h={'40px'}
-          width={'96px'}
+          mr={'12px'}
+          h={'32px'}
+          minW={'75px'}
+          fontSize={'12px'}
           variant={'outline'}
-          leftIcon={<MyIcon name={'change'} w={'20px'} fill={'#485264'} />}
+          leftIcon={<MyIcon name={'change'} w={'16px'} fill={'#485264'} />}
           isLoading={loading}
           onClick={() => {
             if (source?.hasSource && source?.sourceType === 'sealaf') {
@@ -186,11 +190,12 @@ const Header = ({
 
       {!isPause && (
         <Button
-          mr={5}
-          h={'40px'}
-          width={'96px'}
+          mr={'12px'}
+          h={'32px'}
+          minW={'75px'}
+          fontSize={'12px'}
           variant={'outline'}
-          leftIcon={<MyIcon name="restart" w={'20px'} fill={'#485264'} />}
+          leftIcon={<MyIcon name="restart" w={'16px'} fill={'#485264'} />}
           onClick={openRestartConfirm(handleRestartApp)}
           isLoading={loading}
         >
@@ -198,10 +203,11 @@ const Header = ({
         </Button>
       )}
       <Button
-        h={'40px'}
-        width={'96px'}
+        h={'32px'}
+        minW={'75px'}
+        fontSize={'12px'}
         variant={'outline'}
-        leftIcon={<MyIcon name="delete" w={'20px'} fill={'#485264'} />}
+        leftIcon={<MyIcon name="delete" w={'16px'} fill={'#485264'} />}
         _hover={{
           color: '#FF324A'
         }}
diff --git a/frontend/providers/applaunchpad/src/pages/app/detail/components/LogsModal.tsx b/frontend/providers/applaunchpad/src/components/app/detail/index/LogsModal.tsx
similarity index 99%
rename from frontend/providers/applaunchpad/src/pages/app/detail/components/LogsModal.tsx
rename to frontend/providers/applaunchpad/src/components/app/detail/index/LogsModal.tsx
index 206e4042425c..3593965ebe0c 100644
--- a/frontend/providers/applaunchpad/src/pages/app/detail/components/LogsModal.tsx
+++ b/frontend/providers/applaunchpad/src/components/app/detail/index/LogsModal.tsx
@@ -14,7 +14,7 @@ import {
 } from '@chakra-ui/react';
 import { useLoading } from '@/hooks/useLoading';
 import { downLoadBold } from '@/utils/tools';
-import styles from '../index.module.scss';
+import styles from '@/components/app/detail/index/index.module.scss';
 import { SealosMenu } from '@sealos/ui';
 import Empty from './empty';
 import { ChevronDownIcon } from '@chakra-ui/icons';
diff --git a/frontend/providers/applaunchpad/src/pages/app/detail/components/MonitorModal.tsx b/frontend/providers/applaunchpad/src/components/app/detail/index/MonitorModal.tsx
similarity index 100%
rename from frontend/providers/applaunchpad/src/pages/app/detail/components/MonitorModal.tsx
rename to frontend/providers/applaunchpad/src/components/app/detail/index/MonitorModal.tsx
diff --git a/frontend/providers/applaunchpad/src/pages/app/detail/components/PodDetailModal.tsx b/frontend/providers/applaunchpad/src/components/app/detail/index/PodDetailModal.tsx
similarity index 99%
rename from frontend/providers/applaunchpad/src/pages/app/detail/components/PodDetailModal.tsx
rename to frontend/providers/applaunchpad/src/components/app/detail/index/PodDetailModal.tsx
index b544e3ed6962..af0c0b521e9a 100644
--- a/frontend/providers/applaunchpad/src/pages/app/detail/components/PodDetailModal.tsx
+++ b/frontend/providers/applaunchpad/src/components/app/detail/index/PodDetailModal.tsx
@@ -28,7 +28,7 @@ import { SealosMenu } from '@sealos/ui';
 
 import { MyTooltip } from '@sealos/ui';
 
-import styles from '../index.module.scss';
+import styles from '@/components/app/detail/index/index.module.scss';
 import { useTranslation } from 'next-i18next';
 import { SHOW_EVENT_ANALYZE } from '@/store/static';
 
diff --git a/frontend/providers/applaunchpad/src/pages/app/detail/components/PodFileModal.tsx b/frontend/providers/applaunchpad/src/components/app/detail/index/PodFileModal.tsx
similarity index 99%
rename from frontend/providers/applaunchpad/src/pages/app/detail/components/PodFileModal.tsx
rename to frontend/providers/applaunchpad/src/components/app/detail/index/PodFileModal.tsx
index c36b73de09f0..8f33e4847779 100644
--- a/frontend/providers/applaunchpad/src/pages/app/detail/components/PodFileModal.tsx
+++ b/frontend/providers/applaunchpad/src/components/app/detail/index/PodFileModal.tsx
@@ -48,7 +48,7 @@ import { MyTooltip, SealosMenu, useMessage } from '@sealos/ui';
 import { useQuery } from '@tanstack/react-query';
 import { useTranslation } from 'next-i18next';
 import { MouseEvent, useMemo, useState } from 'react';
-import styles from '../index.module.scss';
+import styles from '@/components/app/detail/index/index.module.scss';
 
 type HandleType = 'delete' | 'rename' | 'mkdir-file' | 'mkdir' | 'download';
 
diff --git a/frontend/providers/applaunchpad/src/pages/app/detail/components/Pods.tsx b/frontend/providers/applaunchpad/src/components/app/detail/index/Pods.tsx
similarity index 91%
rename from frontend/providers/applaunchpad/src/pages/app/detail/components/Pods.tsx
rename to frontend/providers/applaunchpad/src/components/app/detail/index/Pods.tsx
index 2e3e8c55c909..a60406916cb3 100644
--- a/frontend/providers/applaunchpad/src/pages/app/detail/components/Pods.tsx
+++ b/frontend/providers/applaunchpad/src/components/app/detail/index/Pods.tsx
@@ -34,15 +34,7 @@ const LogsModal = dynamic(() => import('./LogsModal'));
 const DetailModel = dynamic(() => import('./PodDetailModal'));
 const PodFileModal = dynamic(() => import('./PodFileModal'));
 
-const Pods = ({
-  pods = [],
-  loading,
-  appName
-}: {
-  pods: PodDetailType[];
-  loading: boolean;
-  appName: string;
-}) => {
+const Pods = ({ pods = [], appName }: { pods: PodDetailType[]; appName: string }) => {
   const { t } = useTranslation();
   const { toast } = useToast();
   const [logsPodIndex, setLogsPodIndex] = useState<number>();
@@ -88,7 +80,7 @@ const Pods = ({
       key: 'podName',
       render: (_: PodDetailType, i: number) => (
         <Box fontSize={'12px'} color={'grayModern.900'} fontWeight={500}>
-          {appName}-{i + 1}
+          {_?.podName}
         </Box>
       )
     },
@@ -247,17 +239,17 @@ const Pods = ({
   ];
 
   return (
-    <Box h={'100%'} py={5} position={'relative'}>
-      <Flex px={6} alignItems={'center'} fontSize={'12px'} fontWeight={'bold'}>
-        <MyIcon name="podList" w={'14px'} fill={'grayModern.600'} />
-        <Box ml={3} flex={1} color={'grayModern.600'}>
+    <Box h={'100%'} py={'20px'} px={'32px'} position={'relative'}>
+      <Flex>
+        <Box fontSize={'14px'} fontWeight={'bold'} color={'grayModern.900'}>
           {t('Pods List')}
         </Box>
-        <Box color={'grayModern.500'}>
-          {pods.length} {t('Items')}
-        </Box>
+        <Text ml={'8px'} fontSize={'14px'} fontWeight={'bold'} color={'grayModern.500'}>
+          ({pods.length})
+        </Text>
       </Flex>
-      <TableContainer mt={5} overflow={'auto'}>
+
+      <TableContainer mt={'12px'} overflow={'auto'}>
         <Table variant={'simple'} backgroundColor={'white'}>
           <Thead backgroundColor={'grayModern.50'}>
             <Tr>
@@ -269,6 +261,12 @@ const Pods = ({
                   fontSize={'12px'}
                   fontWeight={'500'}
                   color={'grayModern.600'}
+                  _first={{
+                    borderLeftRadius: '6px'
+                  }}
+                  _last={{
+                    borderRightRadius: '6px'
+                  }}
                 >
                   {t(item.title)}
                 </Th>
@@ -279,7 +277,7 @@ const Pods = ({
             {pods.map((app, i) => (
               <Tr key={app.podName}>
                 {columns.map((col) => (
-                  <Td key={col.key}>
+                  <Td key={col.key} border={'none'}>
                     {col.render
                       ? col.render(app, i)
                       : col.dataIndex
@@ -293,7 +291,6 @@ const Pods = ({
         </Table>
       </TableContainer>
 
-      <Loading loading={loading} fixed={false} />
       {logsPodIndex !== undefined && (
         <LogsModal
           appName={appName}
@@ -301,10 +298,10 @@ const Pods = ({
           pods={pods
             .filter((pod) => pod.status.value === PodStatusEnum.running)
             .map((item, i) => ({
-              alias: `${appName}-${i + 1}`,
+              alias: item.podName,
               podName: item.podName
             }))}
-          podAlias={`${appName}-${logsPodIndex + 1}`}
+          podAlias={pods[logsPodIndex]?.podName || ''}
           setLogsPodName={(name: string) =>
             setLogsPodIndex(pods.findIndex((item) => item.podName === name))
           }
@@ -314,9 +311,9 @@ const Pods = ({
       {detailPodIndex !== undefined && (
         <DetailModel
           pod={pods[detailPodIndex]}
-          podAlias={`${appName}-${detailPodIndex + 1}`}
+          podAlias={pods[detailPodIndex]?.podName || ''}
           pods={pods.map((item, i) => ({
-            alias: `${appName}-${i + 1}`,
+            alias: item.podName,
             podName: item.podName
           }))}
           setPodDetail={(e: string) =>
@@ -331,9 +328,9 @@ const Pods = ({
           isOpen={isOpenPodFile}
           onClose={onClosePodFile}
           pod={pods[detailFilePodIndex]}
-          podAlias={`${appName}-${detailFilePodIndex + 1}`}
+          podAlias={pods[detailFilePodIndex]?.podName || ''}
           pods={pods.map((item, i) => ({
-            alias: `${appName}-${i + 1}`,
+            alias: item.podName,
             podName: item.podName
           }))}
           setPodDetail={(e: string) =>
diff --git a/frontend/providers/applaunchpad/src/pages/app/detail/components/UpdateModal.tsx b/frontend/providers/applaunchpad/src/components/app/detail/index/UpdateModal.tsx
similarity index 100%
rename from frontend/providers/applaunchpad/src/pages/app/detail/components/UpdateModal.tsx
rename to frontend/providers/applaunchpad/src/components/app/detail/index/UpdateModal.tsx
diff --git a/frontend/providers/applaunchpad/src/pages/app/detail/components/empty.module.scss b/frontend/providers/applaunchpad/src/components/app/detail/index/empty.module.scss
similarity index 100%
rename from frontend/providers/applaunchpad/src/pages/app/detail/components/empty.module.scss
rename to frontend/providers/applaunchpad/src/components/app/detail/index/empty.module.scss
diff --git a/frontend/providers/applaunchpad/src/pages/app/detail/components/empty.tsx b/frontend/providers/applaunchpad/src/components/app/detail/index/empty.tsx
similarity index 100%
rename from frontend/providers/applaunchpad/src/pages/app/detail/components/empty.tsx
rename to frontend/providers/applaunchpad/src/components/app/detail/index/empty.tsx
diff --git a/frontend/providers/applaunchpad/src/pages/app/detail/index.module.scss b/frontend/providers/applaunchpad/src/components/app/detail/index/index.module.scss
similarity index 100%
rename from frontend/providers/applaunchpad/src/pages/app/detail/index.module.scss
rename to frontend/providers/applaunchpad/src/components/app/detail/index/index.module.scss
diff --git a/frontend/providers/applaunchpad/src/components/app/detail/logs/Filter.tsx b/frontend/providers/applaunchpad/src/components/app/detail/logs/Filter.tsx
new file mode 100644
index 000000000000..6c7e28a3befe
--- /dev/null
+++ b/frontend/providers/applaunchpad/src/components/app/detail/logs/Filter.tsx
@@ -0,0 +1,228 @@
+import MyIcon from '@/components/Icon';
+import { JsonFilterItem, LogsFormData } from '@/pages/app/detail/logs';
+import { Button, ButtonProps, Center, Flex, Input, Switch, Text } from '@chakra-ui/react';
+import { MySelect } from '@sealos/ui';
+import { useTranslation } from 'next-i18next';
+import { useState } from 'react';
+import { UseFormReturn, useFieldArray } from 'react-hook-form';
+
+export const Filter = ({
+  formHook,
+  refetchData
+}: {
+  formHook: UseFormReturn<LogsFormData>;
+  refetchData: () => void;
+}) => {
+  const { t } = useTranslation();
+  const [activeId, setActiveId] = useState('normal_filter');
+  const [inputKeyword, setInputKeyword] = useState(formHook.watch('keyword'));
+
+  const isJsonMode = formHook.watch('isJsonMode');
+  const isOnlyStderr = formHook.watch('isOnlyStderr');
+  const filterKeys = formHook.watch('filterKeys');
+
+  const { fields, append, remove } = useFieldArray({
+    control: formHook.control,
+    name: 'jsonFilters'
+  });
+
+  return (
+    <Flex py={'12px'} px={'10px'} w={'100%'} flexDir={'column'}>
+      {/* tab */}
+      {/* <Box w={'fit-content'} mb={'18px'}>
+        <Tabs
+          size={'sm'}
+          list={[
+            { id: 'normal_filter', label: t('normal_filter') },
+            { id: 'advanced_filter', label: t('advanced_filter') }
+          ]}
+          activeId={activeId}
+          onChange={setActiveId}
+        />
+      </Box> */}
+      {/* operator button */}
+      <Flex gap={'18px'}>
+        <Flex
+          alignItems={'center'}
+          gap={'12px'}
+          bg={isJsonMode ? 'grayModern.50' : 'white'}
+          borderRadius={'8px 8px 0px 0px'}
+          p={'12px'}
+        >
+          <Text fontSize={'12px'} fontWeight={'500'} lineHeight={'16px'} color={'grayModern.900'}>
+            {t('json_mode')}
+          </Text>
+          <Switch
+            isChecked={isJsonMode}
+            onChange={() => {
+              formHook.setValue('isJsonMode', !isJsonMode);
+              formHook.setValue('jsonFilters', []);
+            }}
+          />
+        </Flex>
+        <Flex alignItems={'center'} gap={'12px'}>
+          <Text fontSize={'12px'} fontWeight={'500'} lineHeight={'16px'} color={'grayModern.900'}>
+            {t('only_stderr')}
+          </Text>
+          <Switch
+            isChecked={isOnlyStderr}
+            onChange={() => formHook.setValue('isOnlyStderr', !isOnlyStderr)}
+          />
+        </Flex>
+        <Flex alignItems={'center'} gap={'12px'}>
+          <Input
+            placeholder={t('keyword')}
+            value={inputKeyword}
+            onChange={(e) => setInputKeyword(e.target.value)}
+          />
+          <Button
+            size={'sm'}
+            leftIcon={<MyIcon name={'search'} color={'white'} w={'16px'} h={'16px'} />}
+            onClick={() => {
+              formHook.setValue('keyword', inputKeyword);
+              refetchData();
+            }}
+          >
+            {t('search')}
+          </Button>
+        </Flex>
+      </Flex>
+
+      {/* json mode */}
+      {isJsonMode && (
+        <Flex
+          w={'100%'}
+          bg={'grayModern.50'}
+          minH={'40px'}
+          p={'12px'}
+          gap={'12px'}
+          flexWrap={'wrap'}
+          borderRadius={'0px 8px 8px 8px'}
+        >
+          {filterKeys.length > 0 || fields.length > 0 ? (
+            <AppendJSONFormItemButton
+              onClick={() =>
+                append({
+                  key: '',
+                  value: '',
+                  mode: '='
+                })
+              }
+            />
+          ) : (
+            <Center flex={1}>
+              <Text
+                fontSize={'12px'}
+                fontWeight={'400'}
+                lineHeight={'16px'}
+                color={'grayModern.500'}
+                py={'4px'}
+              >
+                {t('no_data_available')}
+              </Text>
+            </Center>
+          )}
+
+          {fields.map((field, index) => (
+            <Flex key={field.id} w={'fit-content'} gap={'2px'}>
+              <MySelect
+                height="32px"
+                minW={'160px'}
+                bg={'white'}
+                color={'grayModern.600'}
+                placeholder={t('field_name')}
+                value={formHook.watch(`jsonFilters.${index}.key`)}
+                list={formHook.watch('filterKeys')}
+                onchange={(val: string) => formHook.setValue(`jsonFilters.${index}.key`, val)}
+              />
+              <MySelect
+                height="32px"
+                minW={'60px'}
+                bg={'white'}
+                color={'grayModern.600'}
+                value={formHook.watch(`jsonFilters.${index}.mode`)}
+                list={
+                  [
+                    { value: '=', label: t('equal') },
+                    { value: '!=', label: t('not_equal') },
+                    { value: '~', label: t('contains') },
+                    { value: '!~', label: t('not_contains') }
+                  ] as { value: JsonFilterItem['mode']; label: string }[]
+                }
+                onchange={(val: string) =>
+                  formHook.setValue(`jsonFilters.${index}.mode`, val as JsonFilterItem['mode'])
+                }
+              />
+              <Input
+                maxW={'160px'}
+                placeholder={t('value')}
+                bg={'white'}
+                value={formHook.watch(`jsonFilters.${index}.value`)}
+                onChange={(e) => formHook.setValue(`jsonFilters.${index}.value`, e.target.value)}
+                border={'1px solid #E8EBF0'}
+                boxShadow={
+                  '0px 1px 2px 0px rgba(19, 51, 107, 0.05),0px 0px 1px 0px rgba(19, 51, 107, 0.08)'
+                }
+              />
+              <Button
+                variant={'outline'}
+                h={'32px'}
+                w={'32px'}
+                _hover={{
+                  bg: 'grayModern.50'
+                }}
+                onClick={() => remove(index)}
+              >
+                <MyIcon
+                  name={'delete'}
+                  color={'grayModern.600'}
+                  w={'16px'}
+                  h={'16px'}
+                  _hover={{
+                    color: 'red.600'
+                  }}
+                />
+              </Button>
+              {index === fields.length - 1 && (
+                <AppendJSONFormItemButton
+                  onClick={() =>
+                    append({
+                      key: '',
+                      value: '',
+                      mode: '='
+                    })
+                  }
+                />
+              )}
+            </Flex>
+          ))}
+        </Flex>
+      )}
+    </Flex>
+  );
+};
+
+const AppendJSONFormItemButton = (props: ButtonProps) => {
+  const { t } = useTranslation();
+  return (
+    <Button
+      variant={'outline'}
+      h={'32px'}
+      w={'32px'}
+      _hover={{
+        bg: 'grayModern.50'
+      }}
+      {...props}
+    >
+      <MyIcon
+        name={'plus'}
+        color={'grayModern.600'}
+        w={'16px'}
+        h={'16px'}
+        _hover={{
+          color: 'brightBlue.500'
+        }}
+      />
+    </Button>
+  );
+};
diff --git a/frontend/providers/applaunchpad/src/components/app/detail/logs/Header.tsx b/frontend/providers/applaunchpad/src/components/app/detail/logs/Header.tsx
new file mode 100644
index 000000000000..00867deb7c0b
--- /dev/null
+++ b/frontend/providers/applaunchpad/src/components/app/detail/logs/Header.tsx
@@ -0,0 +1,204 @@
+import { ChevronDownIcon } from '@chakra-ui/icons';
+import {
+  Box,
+  Button,
+  ButtonGroup,
+  Flex,
+  Grid,
+  Input,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Text,
+  useMediaQuery
+} from '@chakra-ui/react';
+import { useTranslation } from 'next-i18next';
+import dynamic from 'next/dynamic';
+
+import AdvancedSelect from '@/components/AdvancedSelect';
+import MyIcon from '@/components/Icon';
+import { REFRESH_INTERVAL_OPTIONS } from '@/constants/monitor';
+import { LogsFormData } from '@/pages/app/detail/logs';
+import useDateTimeStore from '@/store/date';
+import { UseFormReturn } from 'react-hook-form';
+import { MyTooltip } from '@sealos/ui';
+
+const DatePicker = dynamic(() => import('@/components/DatePicker'), { ssr: false });
+
+export const Header = ({
+  formHook,
+  refetchData
+}: {
+  formHook: UseFormReturn<LogsFormData>;
+  refetchData: () => void;
+}) => {
+  const { t } = useTranslation();
+  const { refreshInterval, setRefreshInterval } = useDateTimeStore();
+  const [isLargerThan1440] = useMediaQuery('(min-width: 1440px)');
+
+  return (
+    <Flex
+      flexWrap={isLargerThan1440 ? 'nowrap' : 'wrap'}
+      gap={'32px'}
+      rowGap={'12px'}
+      py={'12px'}
+      px={'20px'}
+      alignItems={'center'}
+      w={'100%'}
+    >
+      <Flex gap={'32px'}>
+        <Flex alignItems={'center'} gap={'12px'}>
+          <Text fontSize={'12px'} fontWeight={'400'} lineHeight={'16px'} color={'grayModern.900'}>
+            {t('time')}
+          </Text>
+          <DatePicker />
+        </Flex>
+        <Flex alignItems={'center'} gap={'12px'}>
+          <Text fontSize={'12px'} fontWeight={'400'} lineHeight={'16px'} color={'grayModern.900'}>
+            Pods
+          </Text>
+          <AdvancedSelect
+            placeholder={t('please_select')}
+            height="32px"
+            minW={'200px'}
+            checkBoxMode
+            leftIcon={<MyIcon name="pods" w={'16px'} h={'16px'} color={'grayModern.500'} />}
+            width={'fit-content'}
+            value={'hello-sql-postgresql-0'}
+            onCheckboxChange={(val) => {
+              formHook.setValue('pods', val);
+            }}
+            list={formHook.watch('pods')}
+          />
+        </Flex>
+      </Flex>
+      <Flex gap={'32px'}>
+        <Flex alignItems={'center'} gap={'12px'}>
+          <Text fontSize={'12px'} fontWeight={'400'} lineHeight={'16px'} color={'grayModern.900'}>
+            Containers
+          </Text>
+          <AdvancedSelect
+            minW={isLargerThan1440 ? '200px' : '270px'}
+            placeholder={t('please_select')}
+            height="32px"
+            checkBoxMode
+            leftIcon={<MyIcon name="container" w={'16px'} h={'16px'} color={'grayModern.500'} />}
+            value={'hello-sql-postgresql-0'}
+            list={formHook.watch('containers')}
+            onCheckboxChange={(val) => {
+              formHook.setValue('containers', val);
+            }}
+          />
+        </Flex>
+        <Flex alignItems={'center'} gap={'12px'}>
+          <Text fontSize={'12px'} fontWeight={'400'} lineHeight={'16px'} color={'grayModern.900'}>
+            {t('log_number')}
+          </Text>
+          <Input
+            height="32px"
+            width={'fit-content'}
+            value={formHook.watch('limit')}
+            onChange={(e) => {
+              const val = Number(e.target.value);
+              if (isNaN(val)) {
+                formHook.setValue('limit', 1);
+              } else if (val > 500) {
+                formHook.setValue('limit', 500);
+              } else if (val < 1) {
+                formHook.setValue('limit', 1);
+              } else {
+                formHook.setValue('limit', val);
+              }
+            }}
+          />
+          <ButtonGroup isAttached variant={'outline'} size={'sm'}>
+            <Button
+              height="32px"
+              bg={'grayModern.50'}
+              _hover={{
+                bg: 'grayModern.50'
+              }}
+              onClick={() => {
+                refetchData();
+              }}
+              position={'relative'}
+            >
+              <MyTooltip label={t('refresh')} hasArrow>
+                <Box position={'relative'}>
+                  <MyIcon
+                    name="refresh"
+                    w={'16px'}
+                    h={'16px'}
+                    color={'grayModern.500'}
+                    _hover={{
+                      color: 'brightBlue.500'
+                    }}
+                  />
+                </Box>
+              </MyTooltip>
+            </Button>
+
+            <Menu>
+              <MenuButton
+                as={Button}
+                height="32px"
+                bg={'grayModern.50'}
+                _hover={{
+                  bg: 'grayModern.50',
+                  '& div': {
+                    color: 'brightBlue.500'
+                  },
+                  '& svg': {
+                    color: 'brightBlue.500'
+                  }
+                }}
+              >
+                <Flex alignItems={'center'}>
+                  {refreshInterval === 0 ? null : (
+                    <Text mr={'4px'}>{`${refreshInterval / 1000}s`}</Text>
+                  )}
+                  <ChevronDownIcon w={'16px'} h={'16px'} color={'grayModern.500'} />
+                </Flex>
+              </MenuButton>
+              <MenuList
+                p={'6px'}
+                borderRadius={'base'}
+                border={'1px solid #E8EBF0'}
+                boxShadow={
+                  '0px 4px 10px 0px rgba(19, 51, 107, 0.10), 0px 0px 1px 0px rgba(19, 51, 107, 0.10)'
+                }
+                zIndex={99}
+                overflow={'overlay'}
+                maxH={'300px'}
+              >
+                {REFRESH_INTERVAL_OPTIONS.map((item) => (
+                  <MenuItem
+                    key={item.value}
+                    value={item.value}
+                    onClick={() => {
+                      setRefreshInterval(item.value);
+                    }}
+                    {...(refreshInterval === item.value
+                      ? {
+                          color: 'brightBlue.600'
+                        }
+                      : {})}
+                    borderRadius={'4px'}
+                    _hover={{
+                      bg: 'rgba(17, 24, 36, 0.05)',
+                      color: 'brightBlue.600'
+                    }}
+                    p={'6px'}
+                  >
+                    {item.label}
+                  </MenuItem>
+                ))}
+              </MenuList>
+            </Menu>
+          </ButtonGroup>
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+};
diff --git a/frontend/providers/applaunchpad/src/components/app/detail/logs/LogCounts.tsx b/frontend/providers/applaunchpad/src/components/app/detail/logs/LogCounts.tsx
new file mode 100644
index 000000000000..5a963906da8d
--- /dev/null
+++ b/frontend/providers/applaunchpad/src/components/app/detail/logs/LogCounts.tsx
@@ -0,0 +1,85 @@
+import MyIcon from '@/components/Icon';
+import LogBarChart from '@/components/LogBarChart';
+import { Box, Button, Center, Collapse, Flex, Spinner, Text } from '@chakra-ui/react';
+import { useTranslation } from 'next-i18next';
+import { useState } from 'react';
+import EmptyChart from '@/components/Icon/icons/emptyChart.svg';
+
+export const LogCounts = ({
+  logCountsData,
+  isLogCountsLoading
+}: {
+  logCountsData: { logs_total: string; _time: string }[];
+  isLogCountsLoading?: boolean;
+}) => {
+  const { t } = useTranslation();
+  const [onOpenChart, setOnOpenChart] = useState(true);
+
+  const processChartData = (rawData: Array<{ _time: string; logs_total: string }>) => {
+    const sortedData = [...rawData].sort(
+      (a, b) => new Date(a._time).getTime() - new Date(b._time).getTime()
+    );
+    const xData = sortedData.map((item) => Math.floor(new Date(item._time).getTime() / 1000));
+    const yData = sortedData.map((item) => item.logs_total);
+
+    return {
+      xData,
+      yData
+    };
+  };
+
+  return (
+    <Flex flexDir={'column'}>
+      <Box>
+        <Button
+          px={'0px'}
+          onClick={() => setOnOpenChart(!onOpenChart)}
+          bg={'transparent'}
+          border={'none'}
+          boxShadow={'none'}
+          color={'grayModern.900'}
+          fontWeight={500}
+          fontSize={'14px'}
+          lineHeight={'20px'}
+          mb={onOpenChart ? '12px' : '0px'}
+          leftIcon={
+            <MyIcon
+              name="arrowRight"
+              color={'grayModern.500'}
+              w={'16px'}
+              transform={onOpenChart ? 'rotate(90deg)' : 'rotate(0)'}
+              transition="transform 0.2s ease"
+            />
+          }
+          _hover={{
+            color: 'brightBlue.600',
+            '& svg': {
+              color: 'brightBlue.600'
+            }
+          }}
+        >
+          {t('logNumber')}
+        </Button>
+      </Box>
+      {/* charts */}
+      <Collapse in={onOpenChart} animateOpacity>
+        <Box position={'relative'} h={'100%'} w={'100%'}>
+          {isLogCountsLoading ? (
+            <Center height={'140px'} w={'100%'}>
+              <Spinner size="xl" />
+            </Center>
+          ) : logCountsData.length > 0 ? (
+            <LogBarChart type="blue" data={processChartData(logCountsData)} visible={onOpenChart} />
+          ) : (
+            <Center height={'140px'} w={'100%'} flexDirection={'column'} gap={'12px'}>
+              <EmptyChart />
+              <Text fontSize={'12px'} fontWeight={500} color={'grayModern.500'}>
+                {t('no_data_available')}
+              </Text>
+            </Center>
+          )}
+        </Box>
+      </Collapse>
+    </Flex>
+  );
+};
diff --git a/frontend/providers/applaunchpad/src/components/app/detail/logs/LogTable.tsx b/frontend/providers/applaunchpad/src/components/app/detail/logs/LogTable.tsx
new file mode 100644
index 000000000000..500196eb0f56
--- /dev/null
+++ b/frontend/providers/applaunchpad/src/components/app/detail/logs/LogTable.tsx
@@ -0,0 +1,305 @@
+import { BaseTable } from '@/components/BaseTable/index';
+import {
+  Box,
+  Button,
+  Checkbox,
+  CheckboxGroup,
+  Collapse,
+  Divider,
+  Flex,
+  Text
+} from '@chakra-ui/react';
+import {
+  ColumnDef,
+  getCoreRowModel,
+  getFilteredRowModel,
+  useReactTable
+} from '@tanstack/react-table';
+import { get } from 'lodash';
+import { useTranslation } from 'next-i18next';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import MyIcon from '@/components/Icon';
+import { formatTime } from '@/utils/tools';
+import { LogsFormData } from '@/pages/app/detail/logs';
+import { UseFormReturn } from 'react-hook-form';
+import { useLogStore } from '@/store/logStore';
+
+interface FieldItem {
+  value: string;
+  label: string;
+  checked: boolean;
+  accessorKey: string;
+}
+
+interface LogData {
+  stream: string;
+  [key: string]: any;
+}
+
+export const LogTable = ({
+  data,
+  isLoading,
+  formHook
+}: {
+  data: any[];
+  isLoading: boolean;
+  formHook: UseFormReturn<LogsFormData>;
+}) => {
+  const { t, i18n } = useTranslation();
+  const lang = i18n.language;
+
+  const [onOpenField, setOnOpenField] = useState(false);
+  const [hiddenFieldCount, setHiddenFieldCount] = useState(0);
+  const [visibleFieldCount, setVisibleFieldCount] = useState(0);
+  const isJsonMode = formHook.watch('isJsonMode');
+  const { exportLogs } = useLogStore();
+
+  const generateFieldList = useCallback((data: any[], prevFieldList: FieldItem[] = []) => {
+    if (!data.length) return [];
+
+    const uniqueKeys = new Set<string>();
+    data.forEach((item) => {
+      Object.keys(item).forEach((key) => {
+        uniqueKeys.add(key);
+      });
+    });
+
+    const prevFieldStates = prevFieldList.reduce((acc, field) => {
+      acc[field.value] = field.checked;
+      return acc;
+    }, {} as Record<string, boolean>);
+
+    return Array.from(uniqueKeys).map((key) => ({
+      value: key,
+      label: key,
+      checked: key in prevFieldStates ? prevFieldStates[key] : true,
+      accessorKey: key
+    }));
+  }, []);
+
+  const [fieldList, setFieldList] = useState<FieldItem[]>([]);
+
+  useEffect(() => {
+    setFieldList((prevFieldList) => generateFieldList(data, prevFieldList));
+    const excludeFields = ['_time', '_msg', 'container', 'pod', 'stream'];
+    formHook.setValue(
+      'filterKeys',
+      generateFieldList(data)
+        .filter((field) => !excludeFields.includes(field.value))
+        .map((field) => ({ value: field.value, label: field.label }))
+    );
+  }, [data, generateFieldList, formHook]);
+
+  useEffect(() => {
+    const visibleCount = fieldList.filter((field) => field.checked).length;
+    setVisibleFieldCount(visibleCount);
+    setHiddenFieldCount(fieldList.length - visibleCount);
+  }, [fieldList]);
+
+  const columns = useMemo<Array<ColumnDef<any>>>(() => {
+    return fieldList
+      .filter((field) => field.checked)
+      .map((field) => ({
+        accessorKey: field.accessorKey,
+        header: () => {
+          if (field.label === '_time' || field.label === '_msg') {
+            return field.label.substring(1);
+          }
+          return field.label;
+        },
+        cell: ({ row }) => {
+          let value = get(row.original, field.accessorKey, '');
+
+          if (field.accessorKey === '_time') {
+            value = formatTime(value, 'YYYY-MM-DD HH:mm:ss');
+          }
+
+          return (
+            <Text
+              color={row.original.stream === 'stderr' ? '#B42318' : 'grayModern.600'}
+              fontSize={'12px'}
+              fontWeight={400}
+              lineHeight={'16px'}
+              {...(field.accessorKey === '_msg' && {
+                maxW: '600px',
+                whiteSpace: 'pre-wrap',
+                wordBreak: 'break-word'
+              })}
+            >
+              {value?.toString() || ''}
+            </Text>
+          );
+        },
+        meta: {
+          isError: (row: any) => row.stream === 'stderr'
+        }
+      }));
+  }, [fieldList]);
+
+  const table = useReactTable({
+    data: data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel()
+  });
+
+  return (
+    <Flex flexDir={'column'} w={'100%'} h={'100%'}>
+      <Flex alignItems={'center'} gap={4} justifyContent={'space-between'}>
+        <Flex alignItems={'center'} gap={4}>
+          <Text
+            bg={'transparent'}
+            border={'none'}
+            boxShadow={'none'}
+            color={'grayModern.900'}
+            fontWeight={500}
+            fontSize={'14px'}
+            lineHeight={'20px'}
+          >
+            {t('Log')}
+          </Text>
+          {isJsonMode && (
+            <Flex
+              alignItems={'center'}
+              bg={'grayModern.50'}
+              borderRadius={'8px'}
+              {...(onOpenField && {
+                borderRadius: '8px 8px 0 0'
+              })}
+              px={4}
+            >
+              <Button
+                p={0}
+                onClick={() => setOnOpenField(!onOpenField)}
+                bg={'transparent'}
+                border={'none'}
+                boxShadow={'none'}
+                color={'grayModern.900'}
+                fontWeight={400}
+                fontSize={'12px'}
+                lineHeight={'16px'}
+                mr={4}
+                leftIcon={
+                  <MyIcon
+                    name="arrowRight"
+                    color={'grayModern.500'}
+                    w={'16px'}
+                    transform={onOpenField ? 'rotate(90deg)' : 'rotate(0)'}
+                    transition="transform 0.2s ease"
+                  />
+                }
+                _hover={{
+                  color: 'brightBlue.600',
+                  '& svg': {
+                    color: 'brightBlue.600'
+                  }
+                }}
+              >
+                {t('field_settings')}
+              </Button>
+              <Flex alignItems={'center'} gap={2} mr={2}>
+                <Text fontSize={'12px'} lineHeight={'16px'} color={'grayModern.500'}>
+                  {t('visible')}:
+                </Text>
+                <Text fontSize={'12px'} lineHeight={'16px'} color={'grayModern.500'}>
+                  {visibleFieldCount} {lang === 'zh' ? t('piece') : ''}
+                </Text>
+              </Flex>
+              <Box h={'12px'} mr={2}>
+                <Divider orientation="vertical" color={'grayModern.300'} borderWidth={'1px'} />
+              </Box>
+              <Flex alignItems={'center'} gap={2}>
+                <Text fontSize={'12px'} lineHeight={'16px'} color={'grayModern.500'}>
+                  {t('hidden')}:
+                </Text>
+                <Text fontSize={'12px'} lineHeight={'16px'} color={'grayModern.500'}>
+                  {hiddenFieldCount} {lang === 'zh' ? t('piece') : ''}
+                </Text>
+              </Flex>
+            </Flex>
+          )}
+        </Flex>
+        <Button
+          minW={'75px'}
+          fontSize={'12px'}
+          variant={'outline'}
+          h={'28px'}
+          leftIcon={<MyIcon name="export" />}
+          onClick={() => exportLogs()}
+        >
+          {t('export_log')}
+        </Button>
+      </Flex>
+
+      {isJsonMode && (
+        <Collapse in={onOpenField} animateOpacity style={{ flexShrink: 0 }}>
+          <Flex
+            p={4}
+            position={'relative'}
+            h={'100%'}
+            w={'100%'}
+            bg={'grayModern.50'}
+            borderRadius={'8px'}
+            gap={'12px'}
+            flexWrap={'wrap'}
+          >
+            <CheckboxGroup colorScheme="brightBlue">
+              {fieldList.map((item) => (
+                <Checkbox
+                  isChecked={item.checked}
+                  key={item.value}
+                  onChange={() =>
+                    setFieldList(
+                      fieldList.map((field) =>
+                        field.value === item.value ? { ...field, checked: !field.checked } : field
+                      )
+                    )
+                  }
+                  sx={{
+                    'span.chakra-checkbox__control[data-checked]': {
+                      background: '#f0f4ff ',
+                      border: '1px solid #219bf4 ',
+                      boxShadow: '0px 0px 0px 2.4px rgba(33, 155, 244, 0.15)',
+                      color: '#219bf4',
+                      borderRadius: '4px'
+                    }
+                  }}
+                >
+                  {item.label}
+                </Checkbox>
+              ))}
+            </CheckboxGroup>
+          </Flex>
+        </Collapse>
+      )}
+
+      {data.length > 0 ? (
+        <BaseTable
+          height={'100%'}
+          mt={'12px'}
+          table={table}
+          isLoading={isLoading}
+          overflowY={'auto'}
+          isHeaderFixed={true}
+          tdStyle={{
+            p: '10px 24px',
+            borderBottom: 'none'
+          }}
+        />
+      ) : (
+        <Flex
+          justifyContent={'center'}
+          alignItems={'center'}
+          flexDirection={'column'}
+          height={'240px'}
+        >
+          <MyIcon name={'noEvents'} color={'transparent'} width={'36px'} height={'36px'} />
+          <Box fontSize={'14px'} fontWeight={500} color={'grayModern.500'} pt={'8px'}>
+            {t('no_data_available')}
+          </Box>
+        </Flex>
+      )}
+    </Flex>
+  );
+};
diff --git a/frontend/providers/applaunchpad/src/pages/apps/components/appList.tsx b/frontend/providers/applaunchpad/src/components/apps/appList.tsx
similarity index 98%
rename from frontend/providers/applaunchpad/src/pages/apps/components/appList.tsx
rename to frontend/providers/applaunchpad/src/components/apps/appList.tsx
index 7acda1631c36..8688e35ada65 100644
--- a/frontend/providers/applaunchpad/src/pages/apps/components/appList.tsx
+++ b/frontend/providers/applaunchpad/src/components/apps/appList.tsx
@@ -26,9 +26,9 @@ import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
 import React, { useCallback, useMemo, useState } from 'react';
 import type { ThemeType } from '@sealos/ui';
-import UpdateModal from '@/pages/app/detail/components/UpdateModal';
+import UpdateModal from '@/components/app/detail/index/UpdateModal';
 
-const DelModal = dynamic(() => import('@/pages/app/detail/components/DelModal'));
+const DelModal = dynamic(() => import('@/components/app/detail/index/DelModal'));
 
 const AppList = ({
   apps = [],
diff --git a/frontend/providers/applaunchpad/src/pages/apps/components/empty.module.scss b/frontend/providers/applaunchpad/src/components/apps/empty.module.scss
similarity index 100%
rename from frontend/providers/applaunchpad/src/pages/apps/components/empty.module.scss
rename to frontend/providers/applaunchpad/src/components/apps/empty.module.scss
diff --git a/frontend/providers/applaunchpad/src/pages/apps/components/empty.tsx b/frontend/providers/applaunchpad/src/components/apps/empty.tsx
similarity index 100%
rename from frontend/providers/applaunchpad/src/pages/apps/components/empty.tsx
rename to frontend/providers/applaunchpad/src/components/apps/empty.tsx
diff --git a/frontend/providers/applaunchpad/src/components/layouts/DetailLayout.tsx b/frontend/providers/applaunchpad/src/components/layouts/DetailLayout.tsx
new file mode 100644
index 000000000000..5bf271955fd1
--- /dev/null
+++ b/frontend/providers/applaunchpad/src/components/layouts/DetailLayout.tsx
@@ -0,0 +1,77 @@
+import Sidebar, { ROUTES } from '@/components/layouts/Sidebar';
+import { useToast } from '@/hooks/useToast';
+import { MOCK_APP_DETAIL } from '@/mock/apps';
+import Header from '@/components/app/detail/index/Header';
+import { useAppStore } from '@/store/app';
+import { useGlobalStore } from '@/store/global';
+import { Flex } from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
+import React, { useMemo, useState } from 'react';
+import { useRouter } from 'next/router';
+
+interface DetailLayoutProps {
+  children: React.ReactNode;
+  appName: string;
+}
+
+export default function DetailLayout({ children, appName }: DetailLayoutProps) {
+  const { toast } = useToast();
+  const router = useRouter();
+  const { screenWidth } = useGlobalStore();
+  const isLargeScreen = useMemo(() => screenWidth > 1280, [screenWidth]);
+
+  const {
+    appDetail = MOCK_APP_DETAIL,
+    setAppDetail,
+    intervalLoadPods,
+    loadDetailMonitorData
+  } = useAppStore();
+
+  const [showSlider, setShowSlider] = useState(false);
+
+  const { refetch } = useQuery(['setAppDetail'], () => setAppDetail(appName), {
+    onError(err) {
+      toast({
+        title: String(err),
+        status: 'error'
+      });
+    }
+  });
+
+  useQuery(
+    ['app-detail-pod'],
+    () => {
+      if (appDetail?.isPause) return null;
+      return intervalLoadPods(appName, true);
+    },
+    {
+      refetchOnMount: true,
+      refetchInterval: router.pathname === ROUTES.OVERVIEW ? 3000 : 5000,
+      staleTime: router.pathname === ROUTES.OVERVIEW ? 3000 : 5000
+    }
+  );
+
+  return (
+    <Flex
+      flexDirection={'column'}
+      height={'100vh'}
+      backgroundColor={'grayModern.100'}
+      px={'16px'}
+      pb={4}
+    >
+      <Header
+        source={appDetail.source}
+        appName={appName}
+        appStatus={appDetail?.status}
+        isPause={appDetail?.isPause}
+        refetch={refetch}
+        setShowSlider={setShowSlider}
+        isLargeScreen={isLargeScreen}
+      />
+      <Flex position={'relative'} flex={'1 0 0'} h={0} gap={'6px'}>
+        <Sidebar />
+        {children}
+      </Flex>
+    </Flex>
+  );
+}
diff --git a/frontend/providers/applaunchpad/src/components/layouts/Sidebar.tsx b/frontend/providers/applaunchpad/src/components/layouts/Sidebar.tsx
new file mode 100644
index 000000000000..e0e855658271
--- /dev/null
+++ b/frontend/providers/applaunchpad/src/components/layouts/Sidebar.tsx
@@ -0,0 +1,91 @@
+import { Center, Text, Stack } from '@chakra-ui/react';
+import MyIcon from '../Icon';
+import { useTranslation } from 'next-i18next';
+import { useRouter } from 'next/router';
+
+export const ROUTES = {
+  OVERVIEW: '/app/detail',
+  MONITOR: '/app/detail/monitor',
+  LOGS: '/app/detail/logs'
+} as const;
+
+export default function Sidebar() {
+  const { t } = useTranslation();
+  const router = useRouter();
+
+  const siderbarMap = [
+    {
+      label: t('overview'),
+      icon: (
+        <MyIcon
+          name="pods"
+          w={'24px'}
+          h={'24px'}
+          color={router.pathname === ROUTES.OVERVIEW ? 'grayModern.900' : 'grayModern.500'}
+        />
+      ),
+      path: ROUTES.OVERVIEW
+    },
+    {
+      label: t('monitor'),
+      icon: (
+        <MyIcon
+          name="monitor"
+          w={'24px'}
+          h={'24px'}
+          color={router.pathname === ROUTES.MONITOR ? 'grayModern.900' : 'grayModern.500'}
+        />
+      ),
+      path: ROUTES.MONITOR
+    },
+    {
+      label: t('Log'),
+      icon: (
+        <MyIcon
+          name="log"
+          w={'24px'}
+          h={'24px'}
+          color={router.pathname === ROUTES.LOGS ? 'grayModern.900' : 'grayModern.500'}
+        />
+      ),
+      path: ROUTES.LOGS
+    }
+  ];
+
+  return (
+    <Stack
+      w={'76px'}
+      py={'12px'}
+      px={'8px'}
+      flexShrink={0}
+      spacing={'8px'}
+      borderRadius={'8px'}
+      bg={'white'}
+    >
+      {siderbarMap.map((item) => (
+        <Center
+          key={item.path}
+          gap={'4px'}
+          flexDirection={'column'}
+          bg={router.pathname === item.path ? 'rgba(150, 153, 180, 0.15)' : 'transparent'}
+          color={'grayModern.900'}
+          borderRadius={'md'}
+          h={'60px'}
+          cursor={'pointer'}
+          onClick={() => {
+            console.log(router.query);
+            router.push({
+              pathname: item.path,
+              query: { ...router.query }
+            });
+          }}
+        >
+          {item.icon}
+          <Text fontSize={'11px'} fontWeight={'bold'}>
+            {item.label}
+          </Text>
+        </Center>
+      ))}
+    </Stack>
+  );
+}
diff --git a/frontend/providers/applaunchpad/src/constants/editApp.ts b/frontend/providers/applaunchpad/src/constants/editApp.ts
index 9b19828fbfcd..6cf0e2a19157 100644
--- a/frontend/providers/applaunchpad/src/constants/editApp.ts
+++ b/frontend/providers/applaunchpad/src/constants/editApp.ts
@@ -23,6 +23,7 @@ export const editModeMap = (isEdit: boolean) => {
 };
 
 export const defaultEditVal: AppEditType = {
+  kind: 'deployment',
   appName: 'hello-world',
   imageName: 'nginx',
   runCMD: '',
@@ -58,6 +59,8 @@ export const defaultEditVal: AppEditType = {
     serverAddress: 'docker.io'
   },
   storeList: [],
+  volumes: [],
+  volumeMounts: [],
   gpu: {
     manufacturers: 'nvidia',
     type: '',
diff --git a/frontend/providers/applaunchpad/src/constants/monitor.ts b/frontend/providers/applaunchpad/src/constants/monitor.ts
index 713e057f8b57..30faa0e1ccfa 100644
--- a/frontend/providers/applaunchpad/src/constants/monitor.ts
+++ b/frontend/providers/applaunchpad/src/constants/monitor.ts
@@ -1,36 +1,42 @@
 export const LineStyleMap = [
   {
-    backgroundColor: '#EBF5FB',
-    lineColor: '#5EBDF2'
+    backgroundColor: 'rgba(209, 244, 255, 0.3)',
+    lineColor: '#11B6FC'
   },
   {
-    backgroundColor: 'rgba(241, 240, 249, 1)',
-    lineColor: 'rgba(154, 142, 224, 1)'
+    backgroundColor: 'rgba(255, 221, 252, 0.3)',
+    lineColor: '#8774EE'
   },
   {
-    backgroundColor: 'rgba(237, 247, 247, 1)',
-    lineColor: 'rgba(108, 211, 204, 1)'
+    backgroundColor: 'rgba(254, 206, 255, 0.3)',
+    lineColor: '#C172E7'
   },
-
   {
-    backgroundColor: 'rgba(250, 239, 244, 1)',
-    lineColor: 'rgba(241, 130, 170, 1)'
+    backgroundColor: 'rgba(199, 255, 248, 0.3)',
+    lineColor: '#13C4B9'
   },
   {
-    backgroundColor: 'rgba(108, 211, 204, 0.1)',
-    lineColor: 'rgba(108, 211, 204, 1)'
+    backgroundColor: 'rgba(255, 224, 235, 0.3)',
+    lineColor: '#FF81AE'
   },
   {
-    backgroundColor: 'rgba(250, 239, 244, 1)',
-    lineColor: 'rgba(252, 150, 99, 1)'
+    backgroundColor: 'rgba(255, 238, 231, 0.3)',
+    lineColor: '#FB6514'
   },
-
   {
-    backgroundColor: 'rgba(251, 235, 238, 1)',
-    lineColor: 'rgba(255, 91, 110, 1)'
+    backgroundColor: 'rgba(255, 224, 224, 0.05)',
+    lineColor: '#F04438'
   },
   {
-    backgroundColor: 'rgba(249, 248, 234, 1)',
-    lineColor: 'rgba(236, 218, 70, 1)'
+    backgroundColor: 'rgba(241, 255, 185, 0.3)',
+    lineColor: '#E7D435'
   }
 ];
+
+export const REFRESH_INTERVAL_OPTIONS = [
+  { value: 0, label: 'close' },
+  { value: 1000, label: '1s' },
+  { value: 2000, label: '2s' },
+  { value: 5000, label: '5s' },
+  { value: 10000, label: '10s' }
+];
diff --git a/frontend/providers/applaunchpad/src/constants/theme.ts b/frontend/providers/applaunchpad/src/constants/theme.ts
index 482ab43103ee..c48ece760177 100644
--- a/frontend/providers/applaunchpad/src/constants/theme.ts
+++ b/frontend/providers/applaunchpad/src/constants/theme.ts
@@ -23,7 +23,8 @@ export const theme = extendTheme(sealosTheme, {
       'html, body': {
         fontSize: 'md',
         height: '100%',
-        overflow: 'overlay',
+        backgroundColor: '#F4F4F7',
+        overflowX: 'auto',
         fontWeight: 400,
         minWidth: '1024px'
       }
diff --git a/frontend/providers/applaunchpad/src/hooks/useConfirm.tsx b/frontend/providers/applaunchpad/src/hooks/useConfirm.tsx
index 02174ab4b4cb..18ddc98f0104 100644
--- a/frontend/providers/applaunchpad/src/hooks/useConfirm.tsx
+++ b/frontend/providers/applaunchpad/src/hooks/useConfirm.tsx
@@ -31,7 +31,12 @@ export const useConfirm = ({ title = 'Warning', content }: { title?: string; con
     ),
     ConfirmChild: useCallback(
       () => (
-        <AlertDialog isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose}>
+        <AlertDialog
+          isOpen={isOpen}
+          leastDestructiveRef={cancelRef}
+          onClose={onClose}
+          closeOnOverlayClick={false}
+        >
           <AlertDialogOverlay>
             <AlertDialogContent>
               <AlertDialogHeader fontSize="lg" fontWeight="bold">
diff --git a/frontend/providers/applaunchpad/src/hooks/useRequest.tsx b/frontend/providers/applaunchpad/src/hooks/useRequest.tsx
index b491a1abf384..ca2a33d354e6 100644
--- a/frontend/providers/applaunchpad/src/hooks/useRequest.tsx
+++ b/frontend/providers/applaunchpad/src/hooks/useRequest.tsx
@@ -2,7 +2,7 @@ import { useToast } from '@/hooks/useToast';
 import { useMutation } from '@tanstack/react-query';
 import type { UseMutationOptions } from '@tanstack/react-query';
 import { getErrText } from '@/utils/tools';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 interface Props extends UseMutationOptions<any, any, any, any> {
   successToast?: string | null;
diff --git a/frontend/providers/applaunchpad/src/mock/apps.ts b/frontend/providers/applaunchpad/src/mock/apps.ts
index f6809b3a7449..af76efe453a2 100644
--- a/frontend/providers/applaunchpad/src/mock/apps.ts
+++ b/frontend/providers/applaunchpad/src/mock/apps.ts
@@ -238,6 +238,9 @@ export const MOCK_PODS: PodDetailType[] = [
 ];
 
 export const MOCK_APP_DETAIL: AppDetailType = {
+  kind: 'deployment',
+  volumes: [],
+  volumeMounts: [],
   crYamlList: [],
   id: '4bd50c41-149e-4da5-89d5-0308b9dd75c6',
   createTime: '2022/1/22',
diff --git a/frontend/providers/applaunchpad/src/pages/_app.tsx b/frontend/providers/applaunchpad/src/pages/_app.tsx
index 3f4e5f253145..61db547f2d47 100644
--- a/frontend/providers/applaunchpad/src/pages/_app.tsx
+++ b/frontend/providers/applaunchpad/src/pages/_app.tsx
@@ -12,15 +12,14 @@ import { appWithTranslation, useTranslation } from 'next-i18next';
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
 import Router, { useRouter } from 'next/router';
-import NProgress from 'nprogress'; //nprogress module
+import NProgress from 'nprogress';
 import { useEffect, useState } from 'react';
 import { EVENT_NAME } from 'sealos-desktop-sdk';
 import { createSealosApp, sealosApp } from 'sealos-desktop-sdk/app';
+import 'react-day-picker/dist/style.css';
 import '@/styles/reset.scss';
 import 'nprogress/nprogress.css';
 import '@sealos/driver/src/driver.css';
-import { AppEditSyncedFields } from '@/types/app';
-import Script from 'next/script';
 
 //Binding events.
 Router.events.on('routeChangeStart', () => NProgress.start());
diff --git a/frontend/providers/applaunchpad/src/pages/api/log/queryLogs.ts b/frontend/providers/applaunchpad/src/pages/api/log/queryLogs.ts
new file mode 100644
index 000000000000..2f96f174c983
--- /dev/null
+++ b/frontend/providers/applaunchpad/src/pages/api/log/queryLogs.ts
@@ -0,0 +1,108 @@
+import { JsonFilterItem } from '@/pages/app/detail/logs';
+import { authSession } from '@/services/backend/auth';
+import { getK8s } from '@/services/backend/kubernetes';
+import { jsonRes } from '@/services/backend/response';
+import { ApiResp } from '@/services/kubernet';
+
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+export interface LogQueryPayload {
+  app?: string;
+  time?: string;
+  namespace?: string;
+  limit?: string;
+  jsonMode?: string;
+  stderrMode?: string;
+  numberMode?: string;
+  numberLevel?: string;
+  pod?: string[];
+  container?: string[];
+  keyword?: string;
+  jsonQuery?: JsonFilterItem[];
+  exportMode?: boolean;
+}
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse<ApiResp>) {
+  const logUrl = global.AppConfig.launchpad.components.log.url;
+
+  if (!logUrl) {
+    return jsonRes(res, {
+      code: 400,
+      error: 'logUrl is not set'
+    });
+  }
+
+  if (req.method !== 'POST') {
+    return jsonRes(res, {
+      code: 405,
+      error: 'Method not allowed'
+    });
+  }
+
+  try {
+    const kubeconfig = await authSession(req.headers);
+    const { namespace } = await getK8s({
+      kubeconfig: kubeconfig
+    });
+
+    if (!req.body.app) {
+      return jsonRes(res, {
+        code: 400,
+        error: 'app is required'
+      });
+    }
+
+    const {
+      time = '30d',
+      app = '',
+      limit = '10',
+      jsonMode = 'true',
+      stderrMode = 'false',
+      numberMode = 'false',
+      numberLevel = '',
+      pod = [],
+      container = [],
+      keyword = '',
+      jsonQuery = [],
+      exportMode = false
+    } = req.body as LogQueryPayload;
+
+    const params: LogQueryPayload = {
+      time: time,
+      namespace: namespace,
+      app: app,
+      limit: limit,
+      jsonMode: jsonMode,
+      stderrMode: stderrMode,
+      numberMode: numberMode,
+      ...(numberLevel && { numberLevel: numberLevel }),
+      pod: Array.isArray(pod) ? pod : [],
+      container: Array.isArray(container) ? container : [],
+      keyword: keyword,
+      jsonQuery: Array.isArray(jsonQuery) ? jsonQuery : []
+    };
+
+    console.log(params, 'params');
+    const result = await fetch(logUrl + '/queryLogsByParams', {
+      method: 'POST',
+      body: JSON.stringify(params),
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: encodeURIComponent(kubeconfig)
+      }
+    });
+    console.log('fetch /queryLogsByParams: ', result.status);
+    const data = await result.text();
+
+    jsonRes(res, {
+      code: 200,
+      data: data
+    });
+  } catch (error) {
+    console.log(error, 'error');
+    jsonRes(res, {
+      code: 500,
+      error: error
+    });
+  }
+}
diff --git a/frontend/providers/applaunchpad/src/pages/api/log/queryPodList.ts b/frontend/providers/applaunchpad/src/pages/api/log/queryPodList.ts
new file mode 100644
index 000000000000..554c9308233a
--- /dev/null
+++ b/frontend/providers/applaunchpad/src/pages/api/log/queryPodList.ts
@@ -0,0 +1,84 @@
+import { JsonFilterItem } from '@/pages/app/detail/logs';
+import { authSession } from '@/services/backend/auth';
+import { getK8s } from '@/services/backend/kubernetes';
+import { jsonRes } from '@/services/backend/response';
+import { ApiResp } from '@/services/kubernet';
+
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+export interface PodListQueryPayload {
+  app?: string;
+  time?: string;
+  namespace?: string;
+  podQuery?: string;
+}
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse<ApiResp>) {
+  const logUrl = global.AppConfig.launchpad.components.log.url;
+
+  if (!logUrl) {
+    return jsonRes(res, {
+      code: 400,
+      error: 'logUrl is not set'
+    });
+  }
+
+  if (req.method !== 'POST') {
+    return jsonRes(res, {
+      code: 405,
+      error: 'Method not allowed'
+    });
+  }
+
+  try {
+    const kubeconfig = await authSession(req.headers);
+    const { namespace } = await getK8s({
+      kubeconfig: kubeconfig
+    });
+
+    if (!req.body.app) {
+      return jsonRes(res, {
+        code: 400,
+        error: 'app is required'
+      });
+    }
+
+    const { time = '30d', app = '', podQuery = 'true' } = req.body as PodListQueryPayload;
+
+    const params: PodListQueryPayload = {
+      time: time,
+      namespace: namespace,
+      app: app,
+      podQuery: podQuery
+    };
+
+    console.log(params, 'params');
+    const result = await fetch(logUrl + '/queryPodList', {
+      method: 'POST',
+      body: JSON.stringify(params),
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: encodeURIComponent(kubeconfig)
+      }
+    });
+    console.log('fetch /queryPodList: ', result.status);
+    if (result.status !== 200) {
+      return jsonRes(res, {
+        data: []
+      });
+    }
+
+    const data = await result.json();
+
+    jsonRes(res, {
+      code: 200,
+      data: data
+    });
+  } catch (error) {
+    console.log(error, 'error');
+    jsonRes(res, {
+      code: 500,
+      error: error
+    });
+  }
+}
diff --git a/frontend/providers/applaunchpad/src/pages/api/monitor/getMonitorData.ts b/frontend/providers/applaunchpad/src/pages/api/monitor/getMonitorData.ts
index c7c2be4405ee..f1f90746ef74 100644
--- a/frontend/providers/applaunchpad/src/pages/api/monitor/getMonitorData.ts
+++ b/frontend/providers/applaunchpad/src/pages/api/monitor/getMonitorData.ts
@@ -87,15 +87,15 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
     const { queryName, queryKey, start, end, step = '1m' } = req.query;
 
     // One hour of monitoring data
-    const endTime = Date.now();
-    const startTime = endTime - 60 * 60 * 1000;
+    const endTime = end ? Number(end) : Date.now();
+    const startTime = start ? Number(start) : endTime - 60 * 60 * 1000;
 
     const params = {
       type: queryKey,
       launchPadName: queryName,
       namespace: namespace,
-      start: startTime / 1000,
-      end: endTime / 1000,
+      start: Math.floor(startTime / 1000),
+      end: Math.floor(endTime / 1000),
       step: step
     };
 
@@ -106,7 +106,6 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
       },
       kubeconfig
     ).then((res) => {
-      // console.log(res.data.result, res.data.result[0].values.length, 'AdapterChartData');
       // @ts-ignore
       return AdapterChartData[queryKey]
         ? // @ts-ignore
diff --git a/frontend/providers/applaunchpad/src/pages/api/pauseApp.ts b/frontend/providers/applaunchpad/src/pages/api/pauseApp.ts
index dc90275d7cfd..b7fc2aeafb2d 100644
--- a/frontend/providers/applaunchpad/src/pages/api/pauseApp.ts
+++ b/frontend/providers/applaunchpad/src/pages/api/pauseApp.ts
@@ -3,7 +3,8 @@ import { ApiResp } from '@/services/kubernet';
 import { authSession } from '@/services/backend/auth';
 import { getK8s } from '@/services/backend/kubernetes';
 import { jsonRes } from '@/services/backend/response';
-import { pauseKey } from '@/constants/app';
+import { appDeployKey, pauseKey } from '@/constants/app';
+import { PatchUtils } from '@kubernetes/client-node';
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse<ApiResp>) {
   try {
@@ -11,7 +12,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
     if (!appName) {
       throw new Error('appName is empty');
     }
-    const { apiClient, k8sAutoscaling, getDeployApp, namespace } = await getK8s({
+    const { apiClient, k8sAutoscaling, getDeployApp, namespace, k8sNetworkingApp } = await getK8s({
       kubeconfig: await authSession(req.headers)
     });
 
@@ -47,6 +48,57 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
       }
     }
 
+    // handle ingress
+    try {
+      const { body: ingress } = await k8sNetworkingApp.listNamespacedIngress(
+        namespace,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        `${appDeployKey}=${appName}`
+      );
+      if (ingress?.items?.length > 0) {
+        for (const ingressItem of ingress.items) {
+          if (ingressItem?.metadata?.name) {
+            const patchData: Record<string, any> = {};
+            if (ingressItem.metadata?.annotations?.['kubernetes.io/ingress.class'] === 'nginx') {
+              patchData.metadata = {
+                annotations: {
+                  'kubernetes.io/ingress.class': 'pause'
+                }
+              };
+            }
+            if (ingressItem.spec?.ingressClassName === 'nginx') {
+              patchData.spec = {
+                ingressClassName: 'pause'
+              };
+            }
+
+            if (Object.keys(patchData).length > 0) {
+              requestQueue.push(
+                k8sNetworkingApp.patchNamespacedIngress(
+                  ingressItem.metadata.name,
+                  namespace,
+                  patchData,
+                  undefined,
+                  undefined,
+                  undefined,
+                  undefined,
+                  undefined,
+                  { headers: { 'Content-type': PatchUtils.PATCH_FORMAT_JSON_MERGE_PATCH } }
+                )
+              );
+            }
+          }
+        }
+      }
+    } catch (error: any) {
+      if (error?.statusCode !== 404) {
+        return Promise.reject('无法读取到ingress');
+      }
+    }
+
     // replace source file
     app.metadata.annotations[pauseKey] = JSON.stringify(restartAnnotations);
     app.spec.replicas = 0;
diff --git a/frontend/providers/applaunchpad/src/pages/api/platform/getInitData.ts b/frontend/providers/applaunchpad/src/pages/api/platform/getInitData.ts
index 0162c5488ff1..e2a052b81929 100644
--- a/frontend/providers/applaunchpad/src/pages/api/platform/getInitData.ts
+++ b/frontend/providers/applaunchpad/src/pages/api/platform/getInitData.ts
@@ -51,6 +51,9 @@ export const defaultAppConfig: AppConfigType = {
       },
       billing: {
         url: 'http://account-service.account-system.svc:2333'
+      },
+      log: {
+        url: 'http://localhost:8080'
       }
     },
     appResourceFormSliderConfig: {
diff --git a/frontend/providers/applaunchpad/src/pages/api/startApp.ts b/frontend/providers/applaunchpad/src/pages/api/startApp.ts
index 6784371ee8e7..9c1c18bcd010 100644
--- a/frontend/providers/applaunchpad/src/pages/api/startApp.ts
+++ b/frontend/providers/applaunchpad/src/pages/api/startApp.ts
@@ -3,9 +3,10 @@ import { ApiResp } from '@/services/kubernet';
 import { authSession } from '@/services/backend/auth';
 import { getK8s } from '@/services/backend/kubernetes';
 import { jsonRes } from '@/services/backend/response';
-import { pauseKey, minReplicasKey, maxReplicasKey } from '@/constants/app';
+import { pauseKey, minReplicasKey, maxReplicasKey, appDeployKey } from '@/constants/app';
 import { json2HPA } from '@/utils/deployYaml2Json';
 import { AppEditType } from '@/types/app';
+import { PatchUtils } from '@kubernetes/client-node';
 
 /* start app. */
 export default async function handler(req: NextApiRequest, res: NextApiResponse<ApiResp>) {
@@ -14,7 +15,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
     if (!appName) {
       throw new Error('appName is empty');
     }
-    const { apiClient, getDeployApp, applyYamlList } = await getK8s({
+    const { apiClient, getDeployApp, applyYamlList, namespace, k8sNetworkingApp } = await getK8s({
       kubeconfig: await authSession(req.headers)
     });
 
@@ -60,6 +61,57 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
       requestQueue.push(applyYamlList([hpaYaml], 'create'));
     }
 
+    // handle ingress
+    try {
+      const { body: ingress } = await k8sNetworkingApp.listNamespacedIngress(
+        namespace,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        `${appDeployKey}=${appName}`
+      );
+      if (ingress?.items?.length > 0) {
+        for (const ingressItem of ingress.items) {
+          if (ingressItem?.metadata?.name) {
+            const patchData: Record<string, any> = {};
+            if (ingressItem.metadata?.annotations?.['kubernetes.io/ingress.class'] === 'pause') {
+              patchData.metadata = {
+                annotations: {
+                  'kubernetes.io/ingress.class': 'nginx'
+                }
+              };
+            }
+            if (ingressItem.spec?.ingressClassName === 'pause') {
+              patchData.spec = {
+                ingressClassName: 'nginx'
+              };
+            }
+
+            if (Object.keys(patchData).length > 0) {
+              requestQueue.push(
+                k8sNetworkingApp.patchNamespacedIngress(
+                  ingressItem.metadata.name,
+                  namespace,
+                  patchData,
+                  undefined,
+                  undefined,
+                  undefined,
+                  undefined,
+                  undefined,
+                  { headers: { 'Content-type': PatchUtils.PATCH_FORMAT_JSON_MERGE_PATCH } }
+                )
+              );
+            }
+          }
+        }
+      }
+    } catch (error: any) {
+      if (error?.statusCode !== 404) {
+        return Promise.reject('无法读取到ingress');
+      }
+    }
+
     await Promise.all(requestQueue);
 
     jsonRes(res);
diff --git a/frontend/providers/applaunchpad/src/pages/app/detail/components/AppBaseInfo.tsx b/frontend/providers/applaunchpad/src/pages/app/detail/components/AppBaseInfo.tsx
deleted file mode 100644
index d5ad98246bba..000000000000
--- a/frontend/providers/applaunchpad/src/pages/app/detail/components/AppBaseInfo.tsx
+++ /dev/null
@@ -1,429 +0,0 @@
-import GPUItem from '@/components/GPUItem';
-import MyIcon from '@/components/Icon';
-import { MOCK_APP_DETAIL } from '@/mock/apps';
-import { useUserStore } from '@/store/user';
-import type { AppDetailType } from '@/types/app';
-import { printMemory, useCopyData } from '@/utils/tools';
-import {
-  Accordion,
-  AccordionButton,
-  AccordionIcon,
-  AccordionItem,
-  AccordionPanel,
-  Box,
-  Flex,
-  Tag,
-  useTheme
-} from '@chakra-ui/react';
-import { MyTooltip } from '@sealos/ui';
-import { useTranslation } from 'next-i18next';
-import dynamic from 'next/dynamic';
-import React, { useMemo, useState } from 'react';
-import { sealosApp } from 'sealos-desktop-sdk/app';
-import styles from '../index.module.scss';
-
-const ConfigMapDetailModal = dynamic(() => import('./ConfigMapDetailModal'));
-
-const AppBaseInfo = ({ app = MOCK_APP_DETAIL }: { app: AppDetailType }) => {
-  const { t } = useTranslation();
-  const theme = useTheme();
-  const { copyData } = useCopyData();
-  const { userSourcePrice } = useUserStore();
-  const [detailConfigMap, setDetailConfigMap] = useState<{
-    mountPath: string;
-    value: string;
-  }>();
-
-  const appInfoTable = useMemo<
-    {
-      name: string;
-      iconName: string;
-      items: {
-        label: string;
-        value?: string;
-        copy?: string;
-        render?: React.ReactNode;
-      }[];
-    }[]
-  >(
-    () => [
-      {
-        name: 'Basic Information',
-        iconName: 'formInfo',
-        items: [
-          { label: 'Creation Time', value: app.createTime },
-          {
-            label: `${t('Image Name')} ${app.secret.use ? '(Private)' : ''}`,
-            value: app.imageName
-          },
-          { label: 'Limit CPU', value: `${app.cpu / 1000} Core` },
-          {
-            label: 'Limit Memory',
-            value: printMemory(app.memory)
-          },
-          ...(userSourcePrice?.gpu
-            ? [
-                {
-                  label: 'GPU',
-                  render: <GPUItem gpu={app.gpu} />
-                }
-              ]
-            : [])
-        ]
-      },
-      {
-        name: 'Deployment Mode',
-        iconName: 'deployMode',
-        items: app.hpa.use
-          ? [
-              { label: `${app.hpa.target} ${t('target_value')}`, value: `${app.hpa.value}%` },
-              {
-                label: 'Number of Instances',
-                value: `${app.hpa.minReplicas} ~ ${app.hpa.maxReplicas}`
-              }
-            ]
-          : [{ label: `Number of Instances`, value: `${app.replicas}` }]
-      }
-    ],
-    [app]
-  );
-
-  const appTags = useMemo(
-    () => [
-      ...(app.networks.find((item) => item.openPublicDomain) ? ['Public Access'] : []),
-      ...(app.hpa.use ? ['Auto scaling'] : ['Fixed instance']),
-      ...(app.storeList.length > 0 ? ['Stateful'] : ['Stateless'])
-    ],
-    [app]
-  );
-
-  return (
-    <Box px={6} py={7} position={'relative'}>
-      {app?.source?.hasSource && (
-        <Box fontSize={'base'} mb={'12px'}>
-          <Flex alignItems={'center'} gap={'8px'} color={'grayModern.600'} fontWeight={'bold'}>
-            <MyIcon w={'16px'} name={'target'}></MyIcon>
-            <Box>{t('Application Source')}</Box>
-          </Flex>
-          <Box mt={'12px'} p={'16px'} backgroundColor={'grayModern.50'} borderRadius={'lg'}>
-            <Flex
-              flexWrap={'wrap'}
-              _notFirst={{
-                mt: 4
-              }}
-              cursor={'pointer'}
-              onClick={() => {
-                if (!app?.source?.sourceName) return;
-                if (app.source.sourceType === 'app_store') {
-                  sealosApp.runEvents('openDesktopApp', {
-                    appKey: 'system-template',
-                    pathname: '/instance',
-                    query: { instanceName: app.source.sourceName }
-                  });
-                }
-                if (app.source.sourceType === 'sealaf') {
-                  sealosApp.runEvents('openDesktopApp', {
-                    appKey: 'system-sealaf',
-                    pathname: '/',
-                    query: { instanceName: app.source.sourceName }
-                  });
-                }
-              }}
-            >
-              <Box flex={'0 0 110px'} w={0} color={'grayModern.900'}>
-                {t(app.source?.sourceType)}
-              </Box>
-              <Box color={'grayModern.600'}>{t('Manage all resources')}</Box>
-              <MyIcon name="upperRight" width={'14px'} color={'grayModern.600'} />
-            </Flex>
-          </Box>
-        </Box>
-      )}
-
-      <>
-        <Flex alignItems={'center'} color={'grayModern.600'} fontSize={'base'} fontWeight={'bold'}>
-          <MyIcon w={'16px'} name={'appType'}></MyIcon>
-          <Box ml={2}>{t('Application Type')}</Box>
-        </Flex>
-        <Flex mt={5} gap={'8px'}>
-          {appTags.map((tag) => (
-            <Tag
-              key={tag}
-              borderRadius={'33px'}
-              backgroundColor={'grayModern.100'}
-              px={'12px'}
-              py={'6px'}
-            >
-              {t(tag)}
-            </Tag>
-          ))}
-        </Flex>
-      </>
-      {appInfoTable.map((info) => (
-        <Box
-          _notFirst={{
-            mt: 6
-          }}
-          key={info.name}
-        >
-          <Flex
-            alignItems={'center'}
-            color={'grayModern.600'}
-            fontSize={'base'}
-            fontWeight={'bold'}
-          >
-            <MyIcon w={'16px'} name={info.iconName as any}></MyIcon>
-            <Box ml={2}>{t(info.name)}</Box>
-          </Flex>
-          <Box mt={3} p={4} backgroundColor={'grayModern.50'} borderRadius={'md'}>
-            {info.items.map((item, i) => (
-              <Flex
-                key={item.label || i}
-                flexWrap={'wrap'}
-                _notFirst={{
-                  mt: 4
-                }}
-              >
-                <Box flex={'0 0 110px'} w={0} color={'grayModern.900'} fontSize={'12px'}>
-                  {t(item.label)}
-                </Box>
-                <Box
-                  fontSize={'12px'}
-                  color={'grayModern.600'}
-                  flex={'1 0 0'}
-                  textOverflow={'ellipsis'}
-                  overflow={'hidden'}
-                  whiteSpace={'nowrap'}
-                >
-                  <MyTooltip label={item.value}>
-                    <Box
-                      as="span"
-                      cursor={!!item.copy ? 'pointer' : 'default'}
-                      onClick={() => item.value && !!item.copy && copyData(item.copy)}
-                    >
-                      {item.render ? item.render : item.value}
-                    </Box>
-                  </MyTooltip>
-                </Box>
-              </Flex>
-            ))}
-          </Box>
-        </Box>
-      ))}
-      <Box mt={6}>
-        <Flex alignItems={'center'} color={'grayModern.600'} fontSize={'base'} fontWeight={'bold'}>
-          <MyIcon w={'16px'} name={'settings'}></MyIcon>
-          <Box ml={2}>{t('Advanced Configuration')}</Box>
-        </Flex>
-        <Box
-          mt={2}
-          pt={4}
-          backgroundColor={'grayModern.50'}
-          borderRadius={'md'}
-          fontSize={'12px'}
-          color={'grayModern.600'}
-          fontWeight={'bold'}
-        >
-          {[
-            { label: 'Command', value: app.runCMD || 'Not Configured' },
-            { label: 'Parameters', value: app.cmdParam || 'Not Configured' }
-          ].map((item) => (
-            <Flex
-              key={item.label}
-              _notFirst={{
-                mt: 4
-              }}
-              px={4}
-            >
-              <Box flex={'0 0 80px'} w={0}>
-                {t(item.label)}
-              </Box>
-            </Flex>
-          ))}
-          {/* env */}
-          <Accordion allowToggle defaultIndex={0} mt={4}>
-            <AccordionItem borderBottom={0} borderColor={'#EFF0F1'}>
-              <AccordionButton
-                py={4}
-                display={'flex'}
-                textAlign={'left'}
-                _hover={{ backgroundColor: 'transparent' }}
-                fontSize={'12px'}
-                color={'grayModern.600'}
-                fontWeight={'bold'}
-              >
-                <Box flex={1}>{t('Environment Variables')}</Box>
-                <AccordionIcon />
-              </AccordionButton>
-              <AccordionPanel pt={0} pb={app.envs.length === 0 ? 0 : 3}>
-                {app.envs?.length > 0 && (
-                  <Flex
-                    flexDirection={'column'}
-                    border={theme.borders.base}
-                    bg={'#fff'}
-                    borderRadius={'md'}
-                  >
-                    {app.envs.map((env, index) => {
-                      const valText = env.value
-                        ? env.value
-                        : env.valueFrom
-                        ? 'value from | ***'
-                        : '';
-                      return (
-                        <Flex
-                          key={env.key}
-                          gap={'24px'}
-                          px="10px"
-                          py="8px"
-                          borderBottom={'1px solid'}
-                          borderBottomColor={
-                            index !== app.envs.length - 1 ? 'grayModern.150' : 'transparent'
-                          }
-                        >
-                          <Box flex={1} maxW={'40%'} overflowWrap={'break-word'}>
-                            {env.key}
-                          </Box>
-                          <MyTooltip label={valText}>
-                            <Box
-                              flex={1}
-                              className={styles.textEllipsis}
-                              style={{
-                                userSelect: 'auto',
-                                cursor: 'pointer'
-                              }}
-                              onClick={() => copyData(valText)}
-                            >
-                              {valText}
-                            </Box>
-                          </MyTooltip>
-                        </Flex>
-                      );
-                    })}
-                  </Flex>
-                )}
-              </AccordionPanel>
-            </AccordionItem>
-          </Accordion>
-          {/* configMap */}
-          <Accordion allowToggle defaultIndex={0}>
-            <AccordionItem borderBottom={0} borderColor={'#EFF0F1'}>
-              <AccordionButton
-                display={'flex'}
-                textAlign={'left'}
-                py={4}
-                _hover={{ backgroundColor: 'transparent' }}
-                fontSize={'12px'}
-                color={'grayModern.600'}
-                fontWeight={'bold'}
-              >
-                <Box flex={1}>{t('Configuration File')}</Box>
-                <AccordionIcon />
-              </AccordionButton>
-              <AccordionPanel py={0}>
-                <Box
-                  borderRadius={'md'}
-                  overflow={'hidden'}
-                  bg={'#FFF'}
-                  {...(app.configMapList.length > 0
-                    ? {
-                        mb: 3,
-                        border: theme.borders.base
-                      }
-                    : {})}
-                >
-                  {app.configMapList.map((item) => (
-                    <Flex
-                      key={item.mountPath}
-                      alignItems={'center'}
-                      px={4}
-                      py={2}
-                      cursor={'pointer'}
-                      onClick={() => setDetailConfigMap(item)}
-                      _notLast={{
-                        borderBottom: theme.borders.base
-                      }}
-                    >
-                      <MyIcon name={'configMap'} />
-                      <Box ml={4} flex={'1 0 0'} w={0}>
-                        <Box color={'grayModern.900'}>{item.mountPath}</Box>
-                        <Box
-                          className={styles.textEllipsis}
-                          color={'grayModern.900'}
-                          fontSize={'sm'}
-                        >
-                          {item.value}
-                        </Box>
-                      </Box>
-                    </Flex>
-                  ))}
-                </Box>
-              </AccordionPanel>
-            </AccordionItem>
-          </Accordion>
-          {/* store */}
-          <Accordion allowToggle defaultIndex={0}>
-            <AccordionItem borderBottom={0} borderColor={'#EFF0F1'}>
-              <AccordionButton
-                display={'flex'}
-                textAlign={'left'}
-                py={4}
-                _hover={{ backgroundColor: 'transparent' }}
-                fontSize={'12px'}
-                color={'grayModern.600'}
-                fontWeight={'bold'}
-              >
-                <Box flex={1}>{t('Storage')}</Box>
-                <AccordionIcon />
-              </AccordionButton>
-              <AccordionPanel py={0}>
-                <Box
-                  borderRadius={'md'}
-                  overflow={'hidden'}
-                  bg={'#FFF'}
-                  {...(app.storeList.length > 0
-                    ? {
-                        mb: 4,
-                        border: theme.borders.base
-                      }
-                    : {})}
-                >
-                  {app.storeList.map((item) => (
-                    <Flex
-                      key={item.path}
-                      alignItems={'center'}
-                      px={4}
-                      py={1}
-                      _notLast={{
-                        borderBottom: theme.borders.base
-                      }}
-                    >
-                      <MyIcon name={'store'} />
-                      <Box ml={4} flex={'1 0 0'} w={0}>
-                        <Box color={'grayModern.900'} fontWeight={'bold'}>
-                          {item.path}
-                        </Box>
-                        <Box
-                          className={styles.textEllipsis}
-                          color={'grayModern.900'}
-                          fontSize={'sm'}
-                        >
-                          {item.value} Gi
-                        </Box>
-                      </Box>
-                    </Flex>
-                  ))}
-                </Box>
-              </AccordionPanel>
-            </AccordionItem>
-          </Accordion>
-        </Box>
-      </Box>
-
-      {detailConfigMap && (
-        <ConfigMapDetailModal {...detailConfigMap} onClose={() => setDetailConfigMap(undefined)} />
-      )}
-    </Box>
-  );
-};
-
-export default React.memo(AppBaseInfo);
diff --git a/frontend/providers/applaunchpad/src/pages/app/detail/index.tsx b/frontend/providers/applaunchpad/src/pages/app/detail/index.tsx
index c9432e8e565e..5842914996b3 100644
--- a/frontend/providers/applaunchpad/src/pages/app/detail/index.tsx
+++ b/frontend/providers/applaunchpad/src/pages/app/detail/index.tsx
@@ -8,12 +8,15 @@ import { serviceSideProps } from '@/utils/i18n';
 import { Box, Flex, useTheme } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import dynamic from 'next/dynamic';
-import React, { useMemo, useState } from 'react';
-import AppBaseInfo from './components/AppBaseInfo';
-import Header from './components/Header';
-import Pods from './components/Pods';
+import React, { useMemo } from 'react';
+import AppBaseInfo from '@/components/app/detail/index/AppBaseInfo';
+import Pods from '@/components/app/detail/index/Pods';
+import DetailLayout from '@/components/layouts/DetailLayout';
+import AdvancedInfo from '@/components/app/detail/index/AdvancedInfo';
 
-const AppMainInfo = dynamic(() => import('./components/AppMainInfo'), { ssr: false });
+const AppMainInfo = dynamic(() => import('@/components/app/detail/index/AppMainInfo'), {
+  ssr: false
+});
 
 const AppDetail = ({ appName }: { appName: string }) => {
   const { startGuide } = useDetailDriver();
@@ -30,9 +33,6 @@ const AppDetail = ({ appName }: { appName: string }) => {
     loadDetailMonitorData
   } = useAppStore();
 
-  const [podsLoaded, setPodsLoaded] = useState(false);
-  const [showSlider, setShowSlider] = useState(false);
-
   const { refetch, isSuccess } = useQuery(['setAppDetail'], () => setAppDetail(appName), {
     onError(err) {
       toast({
@@ -42,21 +42,6 @@ const AppDetail = ({ appName }: { appName: string }) => {
     }
   });
 
-  useQuery(
-    ['app-detail-pod'],
-    () => {
-      if (appDetail?.isPause) return null;
-      return intervalLoadPods(appName, true);
-    },
-    {
-      refetchOnMount: true,
-      refetchInterval: 3000,
-      onSettled() {
-        setPodsLoaded(true);
-      }
-    }
-  );
-
   useQuery(
     ['loadDetailMonitorData', appName, appDetail?.isPause],
     () => {
@@ -70,82 +55,31 @@ const AppDetail = ({ appName }: { appName: string }) => {
   );
 
   return (
-    <Flex
-      flexDirection={'column'}
-      height={'100vh'}
-      backgroundColor={'grayModern.100'}
-      px={'32px'}
-      pb={4}
-    >
-      <Box>
-        <Header
-          source={appDetail.source}
-          appName={appName}
-          appStatus={appDetail?.status}
-          isPause={appDetail?.isPause}
-          refetch={refetch}
-          setShowSlider={setShowSlider}
-          isLargeScreen={isLargeScreen}
-        />
-      </Box>
-      <Flex position={'relative'} flex={'1 0 0'} h={0}>
-        <Box
-          h={'100%'}
-          flex={'0 0 410px'}
-          w={'410px'}
-          mr={4}
-          overflow={'overlay'}
-          zIndex={1}
-          transition={'0.4s'}
-          bg={'white'}
-          border={theme.borders.base}
-          borderRadius={'lg'}
-          {...(isLargeScreen
-            ? {}
-            : {
-                position: 'absolute',
-                left: 0,
-                boxShadow: '7px 4px 12px rgba(165, 172, 185, 0.25)',
-                transform: `translateX(${showSlider ? '0' : '-500'}px)`
-              })}
-        >
-          {appDetail ? <AppBaseInfo app={appDetail} /> : <Loading loading={true} fixed={false} />}
-        </Box>
-        <Flex flexDirection={'column'} minH={'100%'} flex={'1 0 0'} w={0} overflow={'overlay'}>
-          <Box
-            mb={4}
-            bg={'white'}
-            border={theme.borders.base}
-            borderRadius={'lg'}
-            flexShrink={0}
-            minH={'257px'}
-          >
-            {appDetail ? <AppMainInfo app={appDetail} /> : <Loading loading={true} fixed={false} />}
+    <DetailLayout appName={appName} key={'detail'}>
+      <Flex
+        flexDirection={'column'}
+        minH={'100%'}
+        flex={'1 0 0'}
+        w={0}
+        overflowY={'auto'}
+        overflowX={'hidden'}
+      >
+        <Flex mb={'6px'} borderRadius={'lg'} flexShrink={0} minH={'257px'} gap={'6px'}>
+          <Box flexShrink={0} w="408px" bg={'white'} borderRadius={'8px'}>
+            <AppBaseInfo app={appDetail} />
           </Box>
-          <Box
-            bg={'white'}
-            border={theme.borders.base}
-            borderRadius={'lg'}
-            h={0}
-            flex={1}
-            minH={'300px'}
-          >
-            <Pods pods={appDetailPods} appName={appName} loading={!podsLoaded} />
+          <Box flex="1" bg={'white'} borderRadius={'8px'}>
+            {appDetail ? <AppMainInfo app={appDetail} /> : <Loading loading={true} fixed={false} />}
           </Box>
         </Flex>
+        <Box bg={'white'} borderRadius={'8px'} mb={'6px'}>
+          <AdvancedInfo app={appDetail} />
+        </Box>
+        <Box bg={'white'} borderRadius={'lg'} flex={1}>
+          <Pods pods={appDetailPods} appName={appName} />
+        </Box>
       </Flex>
-      {/* mask */}
-      {!isLargeScreen && showSlider && (
-        <Box
-          position={'fixed'}
-          top={0}
-          left={0}
-          right={0}
-          bottom={0}
-          onClick={() => setShowSlider(false)}
-        />
-      )}
-    </Flex>
+    </DetailLayout>
   );
 };
 
diff --git a/frontend/providers/applaunchpad/src/pages/app/detail/logs.tsx b/frontend/providers/applaunchpad/src/pages/app/detail/logs.tsx
new file mode 100644
index 000000000000..853fa7c6344f
--- /dev/null
+++ b/frontend/providers/applaunchpad/src/pages/app/detail/logs.tsx
@@ -0,0 +1,263 @@
+import { useTranslation } from 'next-i18next';
+import { useQuery } from '@tanstack/react-query';
+import { Box, useTheme, Flex, Divider } from '@chakra-ui/react';
+import { useAppStore } from '@/store/app';
+import { serviceSideProps } from '@/utils/i18n';
+import DetailLayout from '@/components/layouts/DetailLayout';
+import { Header } from '@/components/app/detail/logs/Header';
+import { Filter } from '@/components/app/detail/logs/Filter';
+import { LogTable } from '@/components/app/detail/logs/LogTable';
+import { LogCounts } from '@/components/app/detail/logs/LogCounts';
+import { useEffect, useMemo, useState } from 'react';
+import { ListItem } from '@/components/AdvancedSelect';
+import useDateTimeStore from '@/store/date';
+import { getAppLogs, getLogPodList } from '@/api/app';
+import { useForm } from 'react-hook-form';
+import { formatTimeRange } from '@/utils/timeRange';
+import { downLoadBold } from '@/utils/tools';
+import { useLogStore } from '@/store/logStore';
+import { useRouter } from 'next/router';
+import { useMessage } from '@sealos/ui';
+
+export interface JsonFilterItem {
+  key: string;
+  value: string;
+  mode: '=' | '!=' | '~' | '!~';
+}
+
+export interface LogsFormData {
+  pods: ListItem[];
+  containers: ListItem[];
+  limit: number;
+  keyword: string;
+  isJsonMode: boolean;
+  isOnlyStderr: boolean;
+  jsonFilters: JsonFilterItem[];
+  refreshInterval: number;
+  filterKeys: {
+    value: string;
+    label: string;
+  }[];
+}
+
+export default function LogsPage({ appName }: { appName: string }) {
+  const theme = useTheme();
+  const router = useRouter();
+  const { message } = useMessage();
+  const { t } = useTranslation();
+  const { appDetail, appDetailPods } = useAppStore();
+
+  const { refreshInterval, setRefreshInterval, startDateTime, endDateTime } = useDateTimeStore();
+  const { setLogs, exportLogs, parsedLogs, logCounts, setLogCounts } = useLogStore();
+
+  const formHook = useForm<LogsFormData>({
+    defaultValues: {
+      pods: [],
+      containers: [],
+      limit: 100,
+      keyword: '',
+      isJsonMode: false,
+      isOnlyStderr: false,
+      jsonFilters: [],
+      refreshInterval: 0
+    }
+  });
+
+  const selectedPods = formHook.watch('pods').filter((pod) => pod.checked);
+  const selectedContainers = formHook.watch('containers').filter((container) => container.checked);
+  const jsonFilters = formHook
+    .watch('jsonFilters')
+    .filter((item) => item.key && item.key.trim() !== '');
+  const timeRange = formatTimeRange(startDateTime, endDateTime);
+
+  const { isLoading, refetch: refetchLogsData } = useQuery(
+    [
+      'logs-data',
+      appName,
+      timeRange,
+      formHook.watch('isOnlyStderr'),
+      formHook.watch('limit'),
+      formHook.watch('isJsonMode'),
+      formHook.watch('keyword'),
+      selectedPods,
+      selectedContainers
+    ],
+    () =>
+      getAppLogs({
+        time: timeRange,
+        app: appName,
+        stderrMode: formHook.watch('isOnlyStderr').toString(),
+        limit: formHook.watch('limit').toString(),
+        jsonMode: formHook.watch('isJsonMode').toString(),
+        keyword: formHook.watch('keyword'),
+        pod:
+          selectedPods.length === formHook.watch('pods').length
+            ? []
+            : selectedPods.map((pod) => pod.value),
+        container:
+          selectedContainers.length === formHook.watch('containers').length
+            ? []
+            : selectedContainers.map((container) => container.value),
+        jsonQuery: jsonFilters
+      }),
+    {
+      retry: 1,
+      staleTime: 3000,
+      cacheTime: 3000,
+      refetchInterval: refreshInterval,
+      onError: (error: any) => {
+        console.log(error, 'error');
+        setRefreshInterval(0);
+      },
+      onSuccess: (data) => {
+        setLogs(data);
+      }
+    }
+  );
+
+  // log counts
+  const { refetch: refetchLogCountsData, isLoading: isLogCountsLoading } = useQuery(
+    [
+      'log-counts-data',
+      appName,
+      timeRange,
+      formHook.watch('isOnlyStderr'),
+      selectedPods,
+      selectedContainers,
+      formHook.watch('isJsonMode'),
+      formHook.watch('keyword')
+    ],
+    () =>
+      getAppLogs({
+        app: appName,
+        numberMode: 'true',
+        numberLevel: timeRange.slice(-1),
+        jsonMode: formHook.watch('isJsonMode').toString(),
+        time: timeRange,
+        stderrMode: formHook.watch('isOnlyStderr').toString(),
+        pod:
+          selectedPods.length === formHook.watch('pods').length
+            ? []
+            : selectedPods.map((pod) => pod.value),
+        container:
+          selectedContainers.length === formHook.watch('containers').length
+            ? []
+            : selectedContainers.map((container) => container.value),
+        jsonQuery: jsonFilters,
+        keyword: formHook.watch('keyword')
+      }),
+    {
+      refetchInterval: refreshInterval,
+      staleTime: 3000,
+      cacheTime: 3000,
+      onSuccess: (data) => {
+        setLogCounts(data);
+      }
+    }
+  );
+
+  const { refetch: refetchPodListData, isLoading: isPodListLoading } = useQuery(
+    ['log-pod-list-data', appName, timeRange, appDetailPods?.length],
+    () =>
+      getLogPodList({
+        app: appName,
+        time: timeRange
+      }),
+    {
+      staleTime: 3000,
+      cacheTime: 3000,
+      onSuccess: (data) => {
+        console.log('isInitialized', appDetailPods);
+
+        if (appDetailPods?.length > 0) {
+          const podList = Array.isArray(data) ? data : [];
+          const urlPodName = router.query.pod as string;
+
+          const podNamesSet = new Set([
+            ...podList,
+            ...appDetailPods
+              .map((pod) => pod.metadata?.name)
+              .filter((name): name is string => !!name)
+          ]);
+
+          const allPods: ListItem[] = Array.from(podNamesSet).map((podName) => ({
+            value: podName,
+            label: podName,
+            checked: urlPodName ? podName === urlPodName : true
+          }));
+
+          formHook.setValue('pods', allPods);
+
+          const containers = appDetailPods
+            .flatMap((pod) => pod.spec?.containers || [])
+            .map((container) => ({
+              value: container.name,
+              label: container.name,
+              checked: true
+            }))
+            .filter((item, index, self) => index === self.findIndex((t) => t.value === item.value));
+          formHook.setValue('containers', containers);
+        }
+      }
+    }
+  );
+
+  const refetchData = () => {
+    message({
+      title: t('refetching_success')
+    });
+    refetchLogsData();
+    refetchLogCountsData();
+    refetchPodListData();
+  };
+
+  return (
+    <DetailLayout appName={appName}>
+      <Flex flexDirection={'column'} flex={1} borderRadius="lg" overflowY={'auto'}>
+        <Flex
+          mb={'6px'}
+          bg={'white'}
+          flexDir={'column'}
+          border={theme.borders.base}
+          borderRadius={'lg'}
+        >
+          <Header formHook={formHook} refetchData={refetchData} />
+          <Divider />
+          <Filter formHook={formHook} refetchData={refetchData} />
+        </Flex>
+        <Box
+          mb={'6px'}
+          p={'20px 20px'}
+          bg={'white'}
+          border={theme.borders.base}
+          borderRadius={'lg'}
+          flexShrink={0}
+        >
+          <LogCounts logCountsData={logCounts || []} isLogCountsLoading={isLogCountsLoading} />
+        </Box>
+        <Box
+          bg={'white'}
+          p={'20px'}
+          border={theme.borders.base}
+          borderRadius={'lg'}
+          flex={1}
+          height={'0px'}
+          minH={parsedLogs?.length > 0 ? '400px' : '200px'}
+        >
+          <LogTable data={parsedLogs || []} isLoading={isLoading} formHook={formHook} />
+        </Box>
+      </Flex>
+    </DetailLayout>
+  );
+}
+
+export async function getServerSideProps(content: any) {
+  const appName = content?.query?.name || '';
+
+  return {
+    props: {
+      appName,
+      ...(await serviceSideProps(content))
+    }
+  };
+}
diff --git a/frontend/providers/applaunchpad/src/pages/app/detail/monitor.tsx b/frontend/providers/applaunchpad/src/pages/app/detail/monitor.tsx
new file mode 100644
index 000000000000..b58847850ed2
--- /dev/null
+++ b/frontend/providers/applaunchpad/src/pages/app/detail/monitor.tsx
@@ -0,0 +1,234 @@
+import DetailLayout from '@/components/layouts/DetailLayout';
+import { useToast } from '@/hooks/useToast';
+import { useAppStore } from '@/store/app';
+import { serviceSideProps } from '@/utils/i18n';
+import { Box, Center, Skeleton, SkeletonText, Stack, Text } from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import Header from '@/components/Monitor/Header';
+import MonitorChart from '@/components/MonitorChart';
+import { useEffect, useMemo, useState } from 'react';
+import { ListItem } from '@/components/AdvancedSelect';
+import useDateTimeStore from '@/store/date';
+import { getAppMonitorData } from '@/api/app';
+import EmptyChart from '@/components/Icon/icons/emptyChart.svg';
+
+export default function MonitorPage({ appName }: { appName: string }) {
+  const { toast } = useToast();
+  const { appDetail, appDetailPods } = useAppStore();
+  const { t } = useTranslation();
+  const { startDateTime, endDateTime } = useDateTimeStore();
+  const [podList, setPodList] = useState<ListItem[]>([]);
+  const { refreshInterval } = useDateTimeStore();
+
+  useEffect(() => {
+    if (appDetailPods?.length > 0 && podList.length === 0) {
+      setPodList(
+        appDetailPods.map((pod) => ({
+          value: pod.podName,
+          label: pod.podName,
+          checked: true
+        }))
+      );
+    }
+  }, [appDetailPods, podList]);
+
+  const {
+    data: memoryData,
+    isLoading,
+    refetch: refetchMemoryData
+  } = useQuery(
+    ['monitor-data-memory', appName, appDetailPods?.[0]?.podName, startDateTime, endDateTime],
+    () =>
+      getAppMonitorData({
+        queryKey: 'memory',
+        queryName: appDetailPods?.[0]?.podName || appName,
+        step: '2m',
+        start: startDateTime.getTime(),
+        end: endDateTime.getTime()
+      }),
+    {
+      refetchInterval: refreshInterval,
+      enabled: !!appDetailPods?.[0]?.podName
+    }
+  );
+
+  const memoryLatestAvg = useMemo(() => {
+    if (!memoryData?.length) return 0;
+
+    const sum = memoryData.reduce((acc, pod) => {
+      const lastValue = Number(pod.yData[pod.yData.length - 1]);
+      return acc + lastValue;
+    }, 0);
+
+    return (sum / memoryData.length).toFixed(2);
+  }, [memoryData]);
+
+  const { data: cpuData, refetch: refetchCpuData } = useQuery(
+    ['monitor-data-cpu', appName, appDetailPods?.[0]?.podName, startDateTime, endDateTime],
+    () =>
+      getAppMonitorData({
+        queryKey: 'cpu',
+        queryName: appDetailPods?.[0]?.podName || appName,
+        step: '2m',
+        start: startDateTime.getTime(),
+        end: endDateTime.getTime()
+      }),
+    {
+      refetchInterval: refreshInterval,
+      enabled: !!appDetailPods?.[0]?.podName
+    }
+  );
+
+  const cpuLatestAvg = useMemo(() => {
+    if (!cpuData?.length) return 0;
+
+    const sum = cpuData.reduce((acc, pod) => {
+      const lastValue = Number(pod.yData[pod.yData.length - 1]);
+      return acc + lastValue;
+    }, 0);
+
+    return (sum / cpuData.length).toFixed(2);
+  }, [cpuData]);
+
+  const memoryChartData = useMemo(() => {
+    const selectedPods = podList.filter((pod) => pod.checked);
+
+    const filteredData = memoryData?.filter((item) =>
+      selectedPods.some((pod) => pod.value === item.name)
+    );
+
+    if (filteredData?.length === 0) {
+      return {
+        xData: [] as string[],
+        yData: [] as { name: string; type: string; data: number[] }[]
+      };
+    }
+
+    const xData = filteredData?.[0]?.xData.map(String) || [];
+    const yData =
+      filteredData?.map((item) => ({
+        name: item.name || 'unknown',
+        type: 'line',
+        data: item.yData.map(Number)
+      })) || [];
+
+    return {
+      xData,
+      yData
+    };
+  }, [memoryData, podList]);
+
+  const cpuChartData = useMemo(() => {
+    const selectedPods = podList.filter((pod) => pod.checked);
+    const filteredData = cpuData?.filter((item) =>
+      selectedPods.some((pod) => pod.value === item.name)
+    );
+
+    if (filteredData?.length === 0) {
+      return {
+        xData: [] as string[],
+        yData: [] as { name: string; type: string; data: number[] }[]
+      };
+    }
+
+    const xData = filteredData?.[0]?.xData.map(String) || [];
+    const yData =
+      filteredData?.map((item) => ({
+        name: item.name || 'unknown',
+        type: 'line',
+        data: item.yData.map(Number)
+      })) || [];
+
+    return {
+      xData,
+      yData
+    };
+  }, [cpuData, podList]);
+
+  const refetchData = () => {
+    refetchCpuData();
+    refetchMemoryData();
+  };
+
+  return (
+    <DetailLayout appName={appName} key={'monitor'}>
+      <Box
+        minH={'100%'}
+        flex={'1 0 0'}
+        bg="white"
+        borderRadius="8px"
+        py={'16px'}
+        px={'24px'}
+        overflow={'auto'}
+      >
+        <Header podList={podList} setPodList={setPodList} refetchData={refetchData} />
+        {!isLoading ? (
+          <>
+            <Box mt={'20px'} fontSize={'14px'} fontWeight={'bold'} color={'#000000'}>
+              CPU: {cpuLatestAvg}%
+            </Box>
+            <Box mt={'24px'} height={'242px'} position={'relative'}>
+              {cpuChartData?.yData?.length > 0 ? (
+                <MonitorChart data={cpuChartData} title={'chartTitle'} unit="%" />
+              ) : (
+                <Center height={'100%'} flexDirection={'column'} gap={'12px'}>
+                  <EmptyChart />
+                  <Text fontSize={'12px'} fontWeight={500} color={'grayModern.500'}>
+                    {t('no_data_available')}
+                  </Text>
+                </Center>
+              )}
+            </Box>
+            <Box mt={'20px'} fontSize={'14px'} fontWeight={'bold'} color={'#000000'}>
+              Memory: {memoryLatestAvg}%
+            </Box>
+            <Box mt={'24px'} height={'200px'} position={'relative'}>
+              {memoryChartData?.yData?.length > 0 ? (
+                <MonitorChart data={memoryChartData} title={'chartTitle'} unit="%" />
+              ) : (
+                <Center height={'100%'} flexDirection={'column'} gap={'12px'}>
+                  <EmptyChart />
+                  <Text fontSize={'12px'} fontWeight={500} color={'grayModern.500'}>
+                    {t('no_data_available')}
+                  </Text>
+                </Center>
+              )}
+            </Box>
+          </>
+        ) : (
+          <Stack flex={1} bg={'white'} borderRadius={'8px'} py={'16px'}>
+            <Skeleton
+              startColor="white"
+              endColor="grayModern.200"
+              fadeDuration={0.6}
+              width={'200px'}
+              height={'40px'}
+            />
+            <Skeleton startColor="white" endColor="grayModern.200" fadeDuration={0.6} p={'20px'} />
+            <SkeletonText
+              startColor="white"
+              endColor="grayModern.200"
+              fadeDuration={0.6}
+              mt="4"
+              noOfLines={4}
+              spacing="4"
+              skeletonHeight="20px"
+            />
+          </Stack>
+        )}
+      </Box>
+    </DetailLayout>
+  );
+}
+
+export async function getServerSideProps(content: any) {
+  const appName = content?.query?.name || '';
+
+  return {
+    props: {
+      appName,
+      ...(await serviceSideProps(content))
+    }
+  };
+}
diff --git a/frontend/providers/applaunchpad/src/pages/app/edit/components/ConfigmapModal.tsx b/frontend/providers/applaunchpad/src/pages/app/edit/components/ConfigmapModal.tsx
index c5ede83d5bfe..62a68556299a 100644
--- a/frontend/providers/applaunchpad/src/pages/app/edit/components/ConfigmapModal.tsx
+++ b/frontend/providers/applaunchpad/src/pages/app/edit/components/ConfigmapModal.tsx
@@ -94,6 +94,7 @@ const ConfigmapModal = ({
                 {t('file value')}{' '}
               </Box>
               <Textarea
+                whiteSpace={'pre-wrap'}
                 rows={10}
                 resize={'both'}
                 {...register('value', {
diff --git a/frontend/providers/applaunchpad/src/pages/app/edit/components/CustomAccessModal.tsx b/frontend/providers/applaunchpad/src/pages/app/edit/components/CustomAccessModal.tsx
index 86dfeafb451a..30fd00a1dd4f 100644
--- a/frontend/providers/applaunchpad/src/pages/app/edit/components/CustomAccessModal.tsx
+++ b/frontend/providers/applaunchpad/src/pages/app/edit/components/CustomAccessModal.tsx
@@ -14,7 +14,7 @@ import {
   ModalContent,
   ModalHeader
 } from '@chakra-ui/react';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import { Tip } from '@sealos/ui';
 import { InfoOutlineIcon } from '@chakra-ui/icons';
 import { useRequest } from '@/hooks/useRequest';
diff --git a/frontend/providers/applaunchpad/src/pages/app/edit/components/EditEnvs.tsx b/frontend/providers/applaunchpad/src/pages/app/edit/components/EditEnvs.tsx
index 5529ed0cec09..1e09234a2dc2 100644
--- a/frontend/providers/applaunchpad/src/pages/app/edit/components/EditEnvs.tsx
+++ b/frontend/providers/applaunchpad/src/pages/app/edit/components/EditEnvs.tsx
@@ -77,13 +77,13 @@ const EditEnvs = ({
             {t('Environment Variables')}
           </Box>
           <Textarea
+            whiteSpace={'pre-wrap'}
             h={'350px'}
             maxH={'100%'}
             value={inputVal}
             resize={'both'}
             placeholder={t('Env Placeholder') || ''}
             overflowX={'auto'}
-            whiteSpace={inputVal === '' ? 'pre-wrap' : 'nowrap'}
             onChange={(e) => setInputVal(e.target.value)}
           />
         </ModalBody>
diff --git a/frontend/providers/applaunchpad/src/pages/app/edit/components/Form.tsx b/frontend/providers/applaunchpad/src/pages/app/edit/components/Form.tsx
index 2a414493d230..ac33d401b71c 100644
--- a/frontend/providers/applaunchpad/src/pages/app/edit/components/Form.tsx
+++ b/frontend/providers/applaunchpad/src/pages/app/edit/components/Form.tsx
@@ -84,6 +84,7 @@ const Form = ({
     control,
     setValue,
     getValues,
+    watch,
     formState: { errors }
   } = formHook;
 
@@ -281,13 +282,17 @@ const Form = ({
     const cpuList = formSliderListConfig[key].cpu;
     const memoryList = formSliderListConfig[key].memory;
 
-    const sortedCpuList =
-      cpu !== undefined ? [...new Set([...cpuList, cpu])].sort((a, b) => a - b) : cpuList;
+    const sortedCpuList = !!gpuType
+      ? cpuList
+      : cpu !== undefined
+      ? [...new Set([...cpuList, cpu])].sort((a, b) => a - b)
+      : cpuList;
 
-    const sortedMemoryList =
-      memory !== undefined
-        ? [...new Set([...memoryList, memory])].sort((a, b) => a - b)
-        : memoryList;
+    const sortedMemoryList = !!gpuType
+      ? memoryList
+      : memory !== undefined
+      ? [...new Set([...memoryList, memory])].sort((a, b) => a - b)
+      : memoryList;
 
     return {
       cpu: sliderNumber2MarkList({
@@ -304,7 +309,31 @@ const Form = ({
   }, [formSliderListConfig, getValues]);
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const SliderList = useMemo(() => countSliderList(), [already]);
+  const SliderList = useMemo(() => countSliderList(), [already, refresh]);
+
+  const persistentVolumes = useMemo(() => {
+    return getValues('volumes')
+      .filter((item) => 'persistentVolumeClaim' in item)
+      .reduce(
+        (
+          acc: {
+            path: string;
+            name: string;
+          }[],
+          volume
+        ) => {
+          const mount = getValues('volumeMounts').find((m) => m.name === volume.name);
+          if (mount) {
+            acc.push({
+              path: mount.mountPath,
+              name: volume.name
+            });
+          }
+          return acc;
+        },
+        []
+      );
+  }, [getValues, refresh]);
 
   return (
     <>
@@ -406,7 +435,7 @@ const Form = ({
           pr={`${pxVal}px`}
           height={'100%'}
           position={'relative'}
-          overflowY={'scroll'}
+          // overflowY={'scroll'}
         >
           {/* base info */}
           <Box id={'baseInfo'} {...boxStyles}>
@@ -600,7 +629,7 @@ const Form = ({
                             }
                           })}
                         />
-                        <Box>%</Box>
+                        <Box>{getValues('hpa.target') === 'gpu' ? '' : '%'}</Box>
                         <Tip
                           ml={4}
                           icon={<InfoOutlineIcon />}
@@ -675,6 +704,9 @@ const Form = ({
                         const inventory = countGpuInventory(type);
                         if (type === '' || (selected && inventory > 0)) {
                           setValue('gpu.type', type);
+                          const sliderList = countSliderList();
+                          setValue('cpu', sliderList.cpu[1].value);
+                          setValue('memory', sliderList.memory[1].value);
                         }
                       }}
                     />
@@ -1076,8 +1108,8 @@ const Form = ({
                             onClick={() => setConfigEdit(item)}
                             bg={'grayModern.25'}
                           >
-                            <MyIcon name={'configMap'} />
-                            <Box ml={4} flex={'1 0 0'} w={0}>
+                            <MyIcon name={'configMap'} w={'20px'} />
+                            <Box ml={4} flex={'1 0 0'} w={'0px'}>
                               <Box color={'myGray.900'} fontWeight={'bold'}>
                                 {item.mountPath}
                               </Box>
@@ -1148,8 +1180,8 @@ const Form = ({
                             bg={'grayModern.25'}
                             onClick={() => setStoreEdit(item)}
                           >
-                            <MyIcon name={'store'} />
-                            <Box ml={4} flex={'1 0 0'} w={0}>
+                            <MyIcon name={'store'} w={'20px'} />
+                            <Box ml={4} flex={'1 0 0'} w={'0px'}>
                               <Box color={'myGray.900'} fontWeight={'bold'}>
                                 {item.path}
                               </Box>
@@ -1187,6 +1219,31 @@ const Form = ({
                           />
                         </Flex>
                       ))}
+                      {persistentVolumes.map((item) => (
+                        <Flex key={item.path} _notLast={{ mb: 5 }} alignItems={'center'}>
+                          <Flex
+                            alignItems={'center'}
+                            px={4}
+                            py={1}
+                            border={theme.borders.base}
+                            flex={'0 0 320px'}
+                            w={0}
+                            borderRadius={'md'}
+                            cursor={'not-allowed'}
+                            bg={'grayModern.25'}
+                          >
+                            <MyIcon name={'store'} w={'20px'} />
+                            <Box ml={4} flex={'1 0 0'} w={'0px'}>
+                              <Box color={'myGray.900'} fontWeight={'bold'}>
+                                {item.path}
+                              </Box>
+                            </Box>
+                            <Box fontSize={'12px'} color={'grayModern.600'}>
+                              {t('shared')}
+                            </Box>
+                          </Flex>
+                        </Flex>
+                      ))}
                     </Box>
                   </Box>
                 </AccordionPanel>
diff --git a/frontend/providers/applaunchpad/src/pages/app/edit/index.tsx b/frontend/providers/applaunchpad/src/pages/app/edit/index.tsx
index e23a0a94b97d..73f6b41f6efd 100644
--- a/frontend/providers/applaunchpad/src/pages/app/edit/index.tsx
+++ b/frontend/providers/applaunchpad/src/pages/app/edit/index.tsx
@@ -47,9 +47,9 @@ export const formData2Yamls = (
     filename: 'service.yaml',
     value: json2Service(data)
   },
-  !!data.storeList?.length
+  data.kind === 'statefulset' || data.storeList?.length > 0
     ? {
-        filename: 'statefulSet.yaml',
+        filename: 'statefulset.yaml',
         value: json2DeployCr(data, 'statefulset')
       }
     : {
@@ -113,6 +113,7 @@ const EditApp = ({ appName, tabType }: { appName?: string; tabType: string }) =>
     amount: 0,
     manufacturers: ''
   });
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const { openConfirm, ConfirmChild } = useConfirm({
     content: applyMessage
   });
@@ -169,7 +170,7 @@ const EditApp = ({ appName, tabType }: { appName?: string; tabType: string }) =>
           await putApp({
             patch,
             appName,
-            stateFulSetYaml: yamlList.find((item) => item.filename === 'statefulSet.yaml')?.value
+            stateFulSetYaml: yamlList.find((item) => item.filename === 'statefulset.yaml')?.value
           });
         } else {
           await postDeployApp(parsedNewYamlList);
@@ -328,6 +329,7 @@ const EditApp = ({ appName, tabType }: { appName?: string; tabType: string }) =>
         h={'100%'}
         minWidth={'1024px'}
         backgroundColor={'grayModern.100'}
+        overflowY={'auto'}
       >
         <Header
           appName={formHook.getValues('appName')}
@@ -335,7 +337,9 @@ const EditApp = ({ appName, tabType }: { appName?: string; tabType: string }) =>
           yamlList={yamlList}
           applyBtnText={applyBtnText}
           applyCb={() => {
+            if (isSubmitting) return;
             closeGuide();
+            setIsSubmitting(true);
             formHook.handleSubmit(async (data) => {
               const parseYamls = formData2Yamls(data);
               setYamlList(parseYamls);
@@ -390,7 +394,10 @@ const EditApp = ({ appName, tabType }: { appName?: string; tabType: string }) =>
                 }
               }
 
-              openConfirm(() => submitSuccess(parseYamls))();
+              openConfirm(
+                () => submitSuccess(parseYamls),
+                () => setIsSubmitting(false)
+              )();
             }, submitError)();
           }}
         />
diff --git a/frontend/providers/applaunchpad/src/pages/apps/index.tsx b/frontend/providers/applaunchpad/src/pages/apps.tsx
similarity index 97%
rename from frontend/providers/applaunchpad/src/pages/apps/index.tsx
rename to frontend/providers/applaunchpad/src/pages/apps.tsx
index 1fa79452138e..5621a7336f43 100644
--- a/frontend/providers/applaunchpad/src/pages/apps/index.tsx
+++ b/frontend/providers/applaunchpad/src/pages/apps.tsx
@@ -5,10 +5,9 @@ import { serviceSideProps } from '@/utils/i18n';
 import { useQuery } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import { useCallback, useEffect, useRef, useState } from 'react';
-
 import { RequestController, isElementInViewport } from '@/utils/tools';
-import AppList from './components/appList';
-import Empty from './components/empty';
+import AppList from '@/components/apps/appList';
+import Empty from '@/components/apps/empty';
 
 const Home = () => {
   const router = useRouter();
diff --git a/frontend/providers/applaunchpad/src/pages/apps/index.module.scss b/frontend/providers/applaunchpad/src/pages/apps/index.module.scss
deleted file mode 100644
index e69de29bb2d1..000000000000
diff --git a/frontend/providers/applaunchpad/src/pages/icons.tsx b/frontend/providers/applaunchpad/src/pages/icons.tsx
new file mode 100644
index 000000000000..af28bbfecc25
--- /dev/null
+++ b/frontend/providers/applaunchpad/src/pages/icons.tsx
@@ -0,0 +1,51 @@
+import MyIcon, { IconMap } from '@/components/Icon';
+import { useCopyData } from '@/utils/tools';
+import { Box, SimpleGrid } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+
+export default function IconsPage() {
+  const router = useRouter();
+  const iconNames = Object.keys(IconMap) as Array<keyof typeof IconMap>;
+  const { copyData } = useCopyData();
+
+  const copyIconName = (iconName: string) => {
+    const iconCode = `<MyIcon name="${iconName}" w={'16px'} h={'16px'} />`;
+    copyData(iconCode);
+  };
+
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'production') {
+      router.replace('/apps');
+    }
+  }, [router]);
+
+  return (
+    <Box p={6}>
+      <SimpleGrid columns={[2, 4, 6]} spacing={4}>
+        {iconNames.map((iconName) => (
+          <Box
+            key={iconName}
+            p={4}
+            border="1px"
+            borderColor="grayModern.200"
+            borderRadius="md"
+            cursor="pointer"
+            onClick={() => copyIconName(iconName)}
+            display="flex"
+            flexDirection="column"
+            alignItems="center"
+            _hover={{ bg: 'grayModern.50' }}
+          >
+            <Box mb={2}>
+              <MyIcon name={iconName} w={'32px'} h={'32px'} />
+            </Box>
+            <Box fontSize="14px" color="grayModern.600" textAlign="center" wordBreak="break-all">
+              {iconName}
+            </Box>
+          </Box>
+        ))}
+      </SimpleGrid>
+    </Box>
+  );
+}
diff --git a/frontend/providers/applaunchpad/src/services/logFetch.ts b/frontend/providers/applaunchpad/src/services/logFetch.ts
new file mode 100644
index 000000000000..712dae82ebeb
--- /dev/null
+++ b/frontend/providers/applaunchpad/src/services/logFetch.ts
@@ -0,0 +1,26 @@
+import { AxiosRequestConfig } from 'axios';
+
+export const logFetch = async (props: AxiosRequestConfig, kubeconfig: string) => {
+  const { url, params } = props;
+  const queryString = typeof params === 'object' ? new URLSearchParams(params).toString() : params;
+  const requestOptions = {
+    method: 'GET',
+    headers: {
+      Authorization: encodeURIComponent(kubeconfig)
+    }
+  };
+  const doMain =
+    global.AppConfig.launchpad.components.monitor.url ||
+    'http://launchpad-monitor.sealos.svc.cluster.local:8428';
+
+  try {
+    const response = await fetch(`${doMain}${url}?${queryString}`, requestOptions);
+
+    if (!response.ok) {
+      throw new Error(`Error monitorFetch ${response.status}`);
+    }
+    return await response.json();
+  } catch (error) {
+    throw error;
+  }
+};
diff --git a/frontend/providers/applaunchpad/src/store/date.ts b/frontend/providers/applaunchpad/src/store/date.ts
new file mode 100644
index 000000000000..36681c2e59e9
--- /dev/null
+++ b/frontend/providers/applaunchpad/src/store/date.ts
@@ -0,0 +1,29 @@
+import { subDays, subMinutes } from 'date-fns';
+import { create } from 'zustand';
+import { immer } from 'zustand/middleware/immer';
+
+type DateTimeState = {
+  startDateTime: Date;
+  endDateTime: Date;
+  timeZone: 'local' | 'utc';
+  refreshInterval: number;
+  setStartDateTime: (time: Date) => void;
+  setEndDateTime: (time: Date) => void;
+  setTimeZone: (timeZone: 'local' | 'utc') => void;
+  setRefreshInterval: (val: number) => void;
+};
+
+const useDateTimeStore = create<DateTimeState>()(
+  immer((set, get) => ({
+    startDateTime: subMinutes(new Date(), 30),
+    endDateTime: new Date(),
+    timeZone: 'local',
+    refreshInterval: 0,
+    setStartDateTime: (datetime) => set({ startDateTime: datetime }),
+    setEndDateTime: (datetime) => set({ endDateTime: datetime }),
+    setTimeZone: (timeZone) => set({ timeZone }),
+    setRefreshInterval: (val) => set({ refreshInterval: val })
+  }))
+);
+
+export default useDateTimeStore;
diff --git a/frontend/providers/applaunchpad/src/store/logStore.ts b/frontend/providers/applaunchpad/src/store/logStore.ts
new file mode 100644
index 000000000000..7327b4fcd962
--- /dev/null
+++ b/frontend/providers/applaunchpad/src/store/logStore.ts
@@ -0,0 +1,72 @@
+import { create } from 'zustand';
+import { immer } from 'zustand/middleware/immer';
+import { devtools } from 'zustand/middleware';
+
+interface LogState {
+  rawLogs: string;
+  parsedLogs: {
+    container: string;
+    pod: string;
+    logs_total: string;
+    _msg: string;
+    _time: string;
+    stream: 'stderr' | 'stdout';
+  }[];
+  logCounts: { logs_total: string; _time: string }[];
+  setLogs: (data: string) => void;
+  exportLogs: () => void;
+  setLogCounts: (data: string) => void;
+}
+
+export const useLogStore = create<LogState>()(
+  devtools(
+    immer((set, get) => ({
+      rawLogs: '',
+      parsedLogs: [],
+      logCounts: [],
+      setLogs: (data: string) =>
+        set((state) => {
+          if (!data) {
+            state.rawLogs = '';
+            state.parsedLogs = [];
+            return;
+          }
+          state.rawLogs = data;
+          const logLines = data.split('\n').filter((line) => line.trim());
+          state.parsedLogs = logLines.map((line) => {
+            try {
+              return JSON.parse(line);
+            } catch (e) {
+              return { raw: line, parseError: true };
+            }
+          });
+        }),
+      setLogCounts: (data: string) =>
+        set((state) => {
+          if (!data) {
+            state.logCounts = [];
+            return;
+          }
+          const logLines = data.split('\n').filter((line) => line.trim());
+
+          state.logCounts = logLines.map((line) => {
+            try {
+              return JSON.parse(line);
+            } catch (e) {
+              return { raw: line, parseError: true };
+            }
+          });
+        }),
+      exportLogs: () => {
+        const { rawLogs } = get();
+        const blob = new Blob([rawLogs], { type: 'text/plain' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `logs-${new Date().toISOString()}.txt`;
+        a.click();
+        URL.revokeObjectURL(url);
+      }
+    }))
+  )
+);
diff --git a/frontend/providers/applaunchpad/src/styles/global.scss b/frontend/providers/applaunchpad/src/styles/global.scss
index af9808bd3ecb..bd7270d51c7c 100644
--- a/frontend/providers/applaunchpad/src/styles/global.scss
+++ b/frontend/providers/applaunchpad/src/styles/global.scss
@@ -1,24 +1,38 @@
 .table-cross {
-  border-radius: 6px;
   overflow: hidden;
   table-layout: fixed;
   width: 100%;
 
   th {
-    border: 1px solid transparent;
     text-align: left;
     padding: 8px 16px;
     user-select: all;
     font-weight: 500;
     color: #485264;
+    line-height: 16px;
+    &:first-child {
+      border-radius: 4px 0 0 4px;
+    }
+    &:last-child {
+      border-radius: 0 4px 4px 0;
+    }
   }
 
   thead tr {
-    background: #f4f4f7;
+    background: #f7f8fa;
+  }
+
+  tbody tr:nth-child(even) {
+    background: #fbfbfc;
   }
 
-  tbody tr:nth-child(odd) {
-    background: #fafafc;
+  tbody tr {
+    &:first-child {
+      border-radius: 4px 0 0 4px;
+    }
+    &:last-child {
+      border-radius: 0 4px 4px 0;
+    }
   }
 }
 
@@ -33,3 +47,33 @@
   max-width: 600px;
   border: 1px solid #94b5ff;
 }
+
+// date picker
+div.rdp {
+  --rdp-cell-size: 30px;
+  --rdp-accent-color: black;
+  --rdp-background-color: #f4f6f8;
+  --rdp-outline: 2px solid var(--rdp-accent-color);
+  --rdp-outline-selected: 2px solid rgba(0, 0, 0, 0.75);
+  margin: 12px 16px 8px 16px;
+}
+
+button.rdp-button_reset.rdp-button.rdp-day {
+  border-radius: 6px;
+}
+
+button.rdp-day_today {
+  background-color: #dbf3ff;
+  color: #0884dd;
+}
+
+button.rdp-button.rdp-day.rdp-day_range_middle {
+  border-radius: 0px;
+  background-color: #f4f4f7;
+  color: #111824;
+}
+
+button.rdp-button.rdp-day.rdp-day_range_end {
+  background-color: #111824;
+  color: white;
+}
diff --git a/frontend/providers/applaunchpad/src/types/app.d.ts b/frontend/providers/applaunchpad/src/types/app.d.ts
index 737a09ec384f..cbdd42666ca2 100644
--- a/frontend/providers/applaunchpad/src/types/app.d.ts
+++ b/frontend/providers/applaunchpad/src/types/app.d.ts
@@ -9,7 +9,9 @@ import type {
   V1HorizontalPodAutoscaler,
   V1Pod,
   SinglePodMetrics,
-  V1StatefulSet
+  V1StatefulSet,
+  V1Volume,
+  V1VolumeMount
 } from '@kubernetes/client-node';
 import { MonitorDataResult } from './monitor';
 
@@ -108,6 +110,9 @@ export interface AppEditType {
     value: number;
   }[];
   labels: { [key: string]: string };
+  volumes: V1Volume[];
+  volumeMounts: V1VolumeMount[];
+  kind: 'deployment' | 'statefulset';
 }
 
 export type AppEditSyncedFields = Pick<
diff --git a/frontend/providers/applaunchpad/src/types/index.d.ts b/frontend/providers/applaunchpad/src/types/index.d.ts
index 51cbc29e43ce..2e4b4a74578f 100644
--- a/frontend/providers/applaunchpad/src/types/index.d.ts
+++ b/frontend/providers/applaunchpad/src/types/index.d.ts
@@ -53,6 +53,9 @@ export type AppConfigType = {
       billing: {
         url: string;
       };
+      log: {
+        url: string;
+      };
     };
     appResourceFormSliderConfig: FormSliderListType;
     fileManger: FileMangerType;
diff --git a/frontend/providers/applaunchpad/src/types/monitor.d.ts b/frontend/providers/applaunchpad/src/types/monitor.d.ts
index 658b991ccf59..2ea2ac1eae27 100644
--- a/frontend/providers/applaunchpad/src/types/monitor.d.ts
+++ b/frontend/providers/applaunchpad/src/types/monitor.d.ts
@@ -42,7 +42,7 @@ export type MonitorQueryKey = {
 };
 
 export type MonitorDataResult = {
-  name: string;
+  name?: string;
   xData: number[];
   yData: string[];
 };
diff --git a/frontend/providers/applaunchpad/src/utils/adapt.ts b/frontend/providers/applaunchpad/src/utils/adapt.ts
index 24e3e83d52f9..8de20127fa6d 100644
--- a/frontend/providers/applaunchpad/src/utils/adapt.ts
+++ b/frontend/providers/applaunchpad/src/utils/adapt.ts
@@ -250,6 +250,19 @@ export const adaptAppDetail = async (configs: DeployKindsType[]): Promise<AppDet
   );
   const gpuNodeSelector = useGpu ? appDeploy?.spec?.template?.spec?.nodeSelector : null;
 
+  const getFilteredVolumeMounts = () => {
+    const volumeMounts = appDeploy?.spec?.template?.spec?.containers?.[0]?.volumeMounts || [];
+    const configMapKeys = Object.keys(deployKindsMap.ConfigMap?.data || {});
+    const storeNames =
+      deployKindsMap.StatefulSet?.spec?.volumeClaimTemplates?.map(
+        (template) => template.metadata?.name
+      ) || [];
+
+    return volumeMounts.filter(
+      (mount) => !configMapKeys.includes(mount.name) && !storeNames.includes(mount.name)
+    );
+  };
+
   return {
     labels: appDeploy?.metadata?.labels || {},
     crYamlList: configs,
@@ -373,6 +386,10 @@ export const adaptAppDetail = async (configs: DeployKindsType[]): Promise<AppDet
           value: Number(item.metadata?.annotations?.value || 0)
         }))
       : [],
+    volumeMounts: getFilteredVolumeMounts(),
+    // keep original non-configMap type volumes
+    volumes: appDeploy?.spec?.template?.spec?.volumes?.filter((volume) => !volume.configMap) || [],
+    kind: appDeploy?.kind?.toLowerCase() as 'deployment' | 'statefulset',
     source: getAppSource(appDeploy)
   };
 };
@@ -393,7 +410,10 @@ export const adaptEditAppData = (app: AppDetailType): AppEditType => {
     'secret',
     'storeList',
     'gpu',
-    'labels'
+    'labels',
+    'kind',
+    'volumes',
+    'volumeMounts'
   ];
 
   const res: Record<string, any> = {};
@@ -413,7 +433,7 @@ export const sliderNumber2MarkList = ({
   type: 'cpu' | 'memory';
   gpuAmount?: number;
 }) => {
-  const newVal = val.map((item) => item * gpuAmount);
+  const newVal = val.map((item) => item);
 
   return newVal.map((item) => ({
     label: type === 'memory' ? (item >= 1024 ? `${item / 1024} G` : `${item} M`) : `${item / 1000}`,
diff --git a/frontend/providers/applaunchpad/src/utils/deployYaml2Json.ts b/frontend/providers/applaunchpad/src/utils/deployYaml2Json.ts
index a669acb0cffb..bc790bf38170 100644
--- a/frontend/providers/applaunchpad/src/utils/deployYaml2Json.ts
+++ b/frontend/providers/applaunchpad/src/utils/deployYaml2Json.ts
@@ -167,11 +167,11 @@ export const json2DeployCr = (data: AppEditType, type: 'deployment' | 'statefuls
             containers: [
               {
                 ...commonContainer,
-                volumeMounts: [...configMapVolumeMounts]
+                volumeMounts: [...(data?.volumeMounts || []), ...configMapVolumeMounts]
               }
             ],
             ...gpuMap,
-            volumes: [...configMapVolumes]
+            volumes: [...(data?.volumes || []), ...configMapVolumes]
           }
         }
       }
@@ -200,6 +200,7 @@ export const json2DeployCr = (data: AppEditType, type: 'deployment' | 'statefuls
               {
                 ...commonContainer,
                 volumeMounts: [
+                  ...(data?.volumeMounts || []),
                   ...configMapVolumeMounts,
                   ...data.storeList.map((item) => ({
                     name: item.name,
@@ -209,7 +210,7 @@ export const json2DeployCr = (data: AppEditType, type: 'deployment' | 'statefuls
               }
             ],
             ...gpuMap,
-            volumes: [...configMapVolumes]
+            volumes: [...(data?.volumes || []), ...configMapVolumes]
           }
         },
         volumeClaimTemplates: storageTemplates
diff --git a/frontend/providers/applaunchpad/src/utils/timeRange.ts b/frontend/providers/applaunchpad/src/utils/timeRange.ts
new file mode 100644
index 000000000000..c94a4d7dd39a
--- /dev/null
+++ b/frontend/providers/applaunchpad/src/utils/timeRange.ts
@@ -0,0 +1,73 @@
+import { subHours, subDays, subMinutes, subMonths } from 'date-fns';
+
+type TimeUnit = 'h' | 'm' | 'd' | 'M';
+
+interface TimeRange {
+  startTime: Date;
+  endTime: Date;
+}
+
+/**
+ * Parse time range string
+ * @param range Time range string, e.g. "1h", "7d", "30m", "1M"
+ * @param endTime End time, defaults to current time
+ * @returns Object containing start and end time
+ */
+export function parseTimeRange(range: string, endTime: Date = new Date()): TimeRange {
+  const match = range.match(/^(\d+)([hmdM])$/i);
+  if (!match) {
+    throw new Error('Invalid time range format. Supported formats: 1h, 7d, 30m, 1M');
+  }
+
+  const value = parseInt(match[1], 10);
+  const unit = match[2].toLowerCase() as TimeUnit;
+
+  let startTime: Date;
+  switch (unit) {
+    case 'h':
+      startTime = subHours(endTime, value);
+      break;
+    case 'm':
+      startTime = subMinutes(endTime, value);
+      break;
+    case 'd':
+      startTime = subDays(endTime, value);
+      break;
+    case 'M':
+      startTime = subMonths(endTime, value);
+      break;
+    default:
+      throw new Error('Unsupported time unit');
+  }
+
+  return {
+    startTime,
+    endTime
+  };
+}
+
+/**
+ * Convert time range to string format
+ * @param startTime Start time
+ * @param endTime End time
+ * @returns Time range string, e.g. "1h", "7d"
+ */
+export function formatTimeRange(startTime: Date, endTime: Date): string {
+  const diffMs = endTime.getTime() - startTime.getTime();
+  const diffMinutes = Math.round(diffMs / (1000 * 60));
+  const diffHours = Math.round(diffMs / (1000 * 60 * 60));
+  const diffDays = Math.round(diffMs / (1000 * 60 * 60 * 24));
+  const diffMonths = Math.round(diffMs / (1000 * 60 * 60 * 24 * 30));
+
+  if (diffMinutes < 60) {
+    return `${diffMinutes}m`;
+  } else if (diffHours < 24) {
+    return `${diffHours}h`;
+  } else if (diffDays === 1) {
+    return '24h';
+  } else if (diffDays < 30) {
+    return `${diffDays}d`;
+  } else {
+    return `${diffMonths}M`;
+  }
+}
diff --git a/frontend/providers/cronjob/src/api/app.ts b/frontend/providers/cronjob/src/api/app.ts
index fcbd000013aa..2b9b003eec4f 100644
--- a/frontend/providers/cronjob/src/api/app.ts
+++ b/frontend/providers/cronjob/src/api/app.ts
@@ -1,9 +1,9 @@
 import { GET } from '@/services/request';
+import { AppListItemType } from '@/types/app';
 import { adaptAppListItem, adaptServiceAccountList } from '@/utils/adapt';
 import { V1Deployment, V1ServiceAccount } from '@kubernetes/client-node';
 
-export const getMyApps = () =>
-  GET<V1Deployment[]>('/api/launchpad/getApps').then((res) => res.map(adaptAppListItem));
+export const getMyApps = () => GET<AppListItemType[]>('/api/launchpad/getApps');
 
 export const getMyServiceAccount = () =>
   GET<V1ServiceAccount[]>('/api/launchpad/getServiceAccount').then((res) =>
diff --git a/frontend/providers/cronjob/src/constants/job.ts b/frontend/providers/cronjob/src/constants/job.ts
index ed1f6bdff034..39ce6c3184ca 100644
--- a/frontend/providers/cronjob/src/constants/job.ts
+++ b/frontend/providers/cronjob/src/constants/job.ts
@@ -163,6 +163,7 @@ export const DefaultJobEditValue: CronJobEditType = {
   launchpadName: '',
   launchpadId: '',
   serviceAccountName: '',
+  launchpadKind: 'Deployment',
   status: CronJobStatusMap['Running'],
   isPause: false,
   creatTime: '',
diff --git a/frontend/providers/cronjob/src/pages/api/launchpad/getApps.ts b/frontend/providers/cronjob/src/pages/api/launchpad/getApps.ts
index 099e0c92c515..6dbbc80d85b8 100644
--- a/frontend/providers/cronjob/src/pages/api/launchpad/getApps.ts
+++ b/frontend/providers/cronjob/src/pages/api/launchpad/getApps.ts
@@ -3,6 +3,7 @@ import { ApiResp } from '@/services/kubernet';
 import { authSession } from '@/services/backend/auth';
 import { getK8s } from '@/services/backend/kubernetes';
 import { jsonRes } from '@/services/backend/response';
+import { adaptAppListItem } from '@/utils/adapt';
 
 export const appDeployKey = 'cloud.sealos.io/app-deploy-manager';
 
@@ -33,11 +34,17 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
 
     const apps = response
       .filter((item) => item.status === 'fulfilled')
-      .map((item: any) => item?.value?.body?.items)
+      .map((item: any, index) => {
+        const items = item?.value?.body?.items || [];
+        return items.map((app: any) => ({
+          ...app,
+          kind: index === 0 ? 'Deployment' : 'StatefulSet'
+        }));
+      })
       .filter((item) => item)
       .flat();
 
-    jsonRes(res, { data: apps });
+    jsonRes(res, { data: apps.map(adaptAppListItem) });
   } catch (err: any) {
     jsonRes(res, {
       code: 500,
diff --git a/frontend/providers/cronjob/src/pages/job/detail/components/AppMainInfo.tsx b/frontend/providers/cronjob/src/pages/job/detail/components/AppMainInfo.tsx
index b1194e07f51f..d89555525c6a 100644
--- a/frontend/providers/cronjob/src/pages/job/detail/components/AppMainInfo.tsx
+++ b/frontend/providers/cronjob/src/pages/job/detail/components/AppMainInfo.tsx
@@ -94,6 +94,8 @@ export default function AppBaseInfo({
                       ? '#33BABB'
                       : jobItem.status === 'failed'
                       ? '#FF8492'
+                      : jobItem.status === 'active'
+                      ? '#33BABB'
                       : '#FF8492'
                 }}
               >
diff --git a/frontend/providers/cronjob/src/pages/job/edit/components/Form.tsx b/frontend/providers/cronjob/src/pages/job/edit/components/Form.tsx
index 125d36d382c9..49409055d28e 100644
--- a/frontend/providers/cronjob/src/pages/job/edit/components/Form.tsx
+++ b/frontend/providers/cronjob/src/pages/job/edit/components/Form.tsx
@@ -436,6 +436,7 @@ const Form = ({ formHook }: { formHook: UseFormReturn<CronJobEditType, any> }) =
                             setValue('replicas', launchpad.replicas);
                             setValue('cpu', launchpad.cpu);
                             setValue('memory', launchpad.memory);
+                            setValue('launchpadKind', launchpad.kind);
                           }}
                         />
                       )}
diff --git a/frontend/providers/cronjob/src/types/app.d.ts b/frontend/providers/cronjob/src/types/app.d.ts
index 4e8ee24c00cf..f654e979c344 100644
--- a/frontend/providers/cronjob/src/types/app.d.ts
+++ b/frontend/providers/cronjob/src/types/app.d.ts
@@ -6,4 +6,5 @@ export interface AppListItemType {
   cpu: number;
   memory: number;
   replicas: number;
+  kind: string;
 }
diff --git a/frontend/providers/cronjob/src/types/job.d.ts b/frontend/providers/cronjob/src/types/job.d.ts
index 81272b1b364a..701053cadbaf 100644
--- a/frontend/providers/cronjob/src/types/job.d.ts
+++ b/frontend/providers/cronjob/src/types/job.d.ts
@@ -60,6 +60,7 @@ export type CronJobEditType = {
   launchpadName: string;
   launchpadId: string;
   serviceAccountName: string;
+  launchpadKind: string;
 } & CronJobDetailType;
 
 export type CronJobDetailType = {
@@ -115,4 +116,5 @@ export type CronJobAnnotations = {
   launchpadName: string;
   launchpadId: string;
   replicas: string;
+  launchpadKind: string;
 };
diff --git a/frontend/providers/cronjob/src/utils/adapt.ts b/frontend/providers/cronjob/src/utils/adapt.ts
index 3469f3055e28..865a5385786d 100644
--- a/frontend/providers/cronjob/src/utils/adapt.ts
+++ b/frontend/providers/cronjob/src/utils/adapt.ts
@@ -15,7 +15,8 @@ import {
   V1Deployment,
   V1Job,
   V1Pod,
-  V1ServiceAccount
+  V1ServiceAccount,
+  V1StatefulSet
 } from '@kubernetes/client-node';
 import dayjs from 'dayjs';
 import cronstrue from 'cronstrue';
@@ -56,8 +57,16 @@ export const adaptCronJobDetail = async (job: V1CronJob): Promise<CronJobEditTyp
     .next()
     .toString();
   const status_str = job.spec?.suspend ? StatusEnum.Stopped : StatusEnum.Running;
-  const { cpu, enableNumberCopies, enableResources, launchpadId, launchpadName, memory, replicas } =
-    job.metadata?.annotations as CronJobAnnotations;
+  const {
+    cpu,
+    enableNumberCopies,
+    enableResources,
+    launchpadId,
+    launchpadName,
+    memory,
+    replicas,
+    launchpadKind
+  } = job.metadata?.annotations as CronJobAnnotations;
 
   const getUrl = (): string => {
     const commands = job.spec?.jobTemplate?.spec?.template?.spec?.containers?.[0]?.args;
@@ -101,6 +110,7 @@ export const adaptCronJobDetail = async (job: V1CronJob): Promise<CronJobEditTyp
     memory: memoryFormatToMi(memory || '0'),
     launchpadName: launchpadName || '',
     launchpadId: launchpadId || '',
+    launchpadKind: launchpadKind || '',
     serviceAccountName: 'userns',
     // detail page
     status: CronJobStatusMap[status_str]
@@ -130,7 +140,7 @@ export const sliderNumber2MarkList = ({
   }));
 };
 
-export const adaptAppListItem = (app: V1Deployment): AppListItemType => {
+export const adaptAppListItem = (app: V1Deployment | V1StatefulSet): AppListItemType => {
   return {
     id: app.metadata?.uid || ``,
     name: app.metadata?.name || 'app name',
@@ -140,7 +150,8 @@ export const adaptAppListItem = (app: V1Deployment): AppListItemType => {
     memory: memoryFormatToMi(
       app.spec?.template?.spec?.containers?.[0]?.resources?.limits?.memory || '0'
     ),
-    replicas: app.spec?.replicas || 0
+    replicas: app.spec?.replicas || 0,
+    kind: app.kind || ''
   };
 };
 
diff --git a/frontend/providers/cronjob/src/utils/json2Yaml.ts b/frontend/providers/cronjob/src/utils/json2Yaml.ts
index 191c8b4c4007..a8d085c31727 100644
--- a/frontend/providers/cronjob/src/utils/json2Yaml.ts
+++ b/frontend/providers/cronjob/src/utils/json2Yaml.ts
@@ -33,6 +33,7 @@ export const json2CronJob = (data: CronJobEditType) => {
   if (data.jobType === 'url') {
     data.imageName = 'curlimages/curl';
     data.cmdParam = `["/bin/sh", "-c", "curl ${data.url}"]`;
+    data.runCMD = '';
   }
 
   if (data.jobType === 'launchpad') {
@@ -56,7 +57,7 @@ export const json2CronJob = (data: CronJobEditType) => {
         command += ` && curl -k -X POST -H "Authorization: $(cat ~/.kube/config | jq -sRr @uri)" -d "appName=${data.launchpadName}&replica=${data.replicas}" https://${applaunchpadUrl}/api/v1alpha/updateReplica`;
       }
       if (data.enableResources) {
-        command += ` && kubectl set resources deployment ${data.launchpadName} --limits=cpu=${resources.limits.cpu},memory=${resources.limits.memory} --requests=cpu=${resources.requests.cpu},memory=${resources.requests.memory}`;
+        command += ` && kubectl set resources ${data.launchpadKind} ${data.launchpadName} --limits=cpu=${resources.limits.cpu},memory=${resources.limits.memory} --requests=cpu=${resources.requests.cpu},memory=${resources.requests.memory}`;
       }
 
       return command.replace(/\n/g, '') || '';
@@ -70,7 +71,8 @@ export const json2CronJob = (data: CronJobEditType) => {
       memory: `${str2Num(data.memory)}Mi`,
       launchpadName: data.launchpadName,
       launchpadId: data.launchpadId,
-      replicas: `${data.replicas}`
+      replicas: `${data.replicas}`,
+      launchpadKind: data.launchpadKind
     };
   }
 
diff --git a/frontend/providers/dbprovider/public/locales/en/common.json b/frontend/providers/dbprovider/public/locales/en/common.json
index 68ace4114aa7..e3215760850f 100644
--- a/frontend/providers/dbprovider/public/locales/en/common.json
+++ b/frontend/providers/dbprovider/public/locales/en/common.json
@@ -145,7 +145,7 @@
   "db_name": "DataBase Name",
   "db_table": "DataBase Table",
   "dbconfig": {
-    "change_history": "Modification History",
+    "change_history": "Operation History",
     "commit": "submit",
     "confirm_updates": "Please confirm the parameters you modified:",
     "get_config_err": "Failed to obtain configuration file",
@@ -330,5 +330,12 @@
   "within_1_hour": "Within 1 hour",
   "within_5_minutes": "Within 5 minutes",
   "yaml_file": "YAML",
-  "you_have_successfully_deployed_database": "You have successfully deployed and created a database!"
+  "you_have_successfully_deployed_database": "You have successfully deployed and created a database!",
+  "change_log": "History",
+  "VerticalScaling": "Vertical Scaling",
+  "VerticalScalingCPU": "Vertical Scaling (CPU)",
+  "VerticalScalingMemory": "Vertical Scaling (Memory)",
+  "HorizontalScaling": "Horizontal Scaling (Instance)",
+  "VolumeExpansion": "Volume Expansion (Disk)",
+  "Stop": "Stop"
 }
\ No newline at end of file
diff --git a/frontend/providers/dbprovider/public/locales/zh/common.json b/frontend/providers/dbprovider/public/locales/zh/common.json
index 84c99ede990b..de1eddc60601 100644
--- a/frontend/providers/dbprovider/public/locales/zh/common.json
+++ b/frontend/providers/dbprovider/public/locales/zh/common.json
@@ -145,7 +145,7 @@
   "db_name": "数据库名字",
   "db_table": "数据库表",
   "dbconfig": {
-    "change_history": "修改历史",
+    "change_history": "变更历史",
     "commit": "提交",
     "confirm_updates": "请确认您修改的参数：",
     "get_config_err": "获取配置文件失败",
@@ -331,5 +331,12 @@
   "within_1_hour": "一小时内",
   "within_5_minutes": "五分钟内",
   "yaml_file": "YAML 文件",
-  "you_have_successfully_deployed_database": "您已成功部署创建一个数据库！"
-}
+  "you_have_successfully_deployed_database": "您已成功部署创建一个数据库！",
+  "change_log": "变更历史",
+  "VerticalScaling": "纵向扩展",
+  "VerticalScalingCPU": "纵向扩展（CPU）",
+  "VerticalScalingMemory": "纵向扩展（内存）",
+  "HorizontalScaling": "横向扩展（实例数）",
+  "VolumeExpansion": "卷扩展（磁盘）",
+  "Stop": "停止"
+}
\ No newline at end of file
diff --git a/frontend/providers/dbprovider/src/api/db.ts b/frontend/providers/dbprovider/src/api/db.ts
index 78ac1414dd8e..267c05ec700b 100644
--- a/frontend/providers/dbprovider/src/api/db.ts
+++ b/frontend/providers/dbprovider/src/api/db.ts
@@ -12,7 +12,7 @@ import type {
 import { LogTypeEnum } from '@/constants/log';
 import { MonitorChartDataResult } from '@/types/monitor';
 import { adaptDBDetail, adaptDBListItem, adaptEvents, adaptPod } from '@/utils/adapt';
-import { json2Restart } from '@/utils/json2Yaml';
+import { json2BasicOps } from '@/utils/json2Yaml';
 import { TFile } from '@/utils/kubeFileSystem';
 import { LogResult } from '@/utils/logParsers/LogParser';
 import { V1Service, V1StatefulSet } from '@kubernetes/client-node';
@@ -62,7 +62,7 @@ export const restartPodByName = (podName: string) => GET(`/api/pod/restartPod?po
 
 /* db operation */
 export const restartDB = (data: { dbName: string; dbType: DBType }) => {
-  const yaml = json2Restart(data);
+  const yaml = json2BasicOps({ ...data, type: 'Restart' });
   return applyYamlList([yaml], 'update');
 };
 
@@ -106,6 +106,12 @@ export const getOpsRequest = ({
     dbType
   });
 
+export const getOperationLog = ({ name, dbType }: { name: string; dbType: DBType }) =>
+  GET<OpsRequestItemType[]>(`/api/opsrequest/operationlog`, {
+    name,
+    dbType
+  });
+
 export const getLogFiles = ({
   podName,
   dbType,
diff --git a/frontend/providers/dbprovider/src/components/Icon/icons/restore.svg b/frontend/providers/dbprovider/src/components/Icon/icons/restore.svg
index 2e89f43b6662..b37a437444a8 100644
--- a/frontend/providers/dbprovider/src/components/Icon/icons/restore.svg
+++ b/frontend/providers/dbprovider/src/components/Icon/icons/restore.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8.66663 2C7.07533 2 5.5492 2.63214 4.42399 3.75736C3.29877 4.88258 2.66663 6.4087 2.66663 8H0.666626L3.25996 10.5933L3.30663 10.6867L5.99996 8H3.99996C3.99996 5.42 6.08663 3.33333 8.66663 3.33333C11.2466 3.33333 13.3333 5.42 13.3333 8C13.3333 10.58 11.2466 12.6667 8.66663 12.6667C7.37996 12.6667 6.21329 12.14 5.37329 11.2933L4.42663 12.24C4.98224 12.7987 5.64295 13.2418 6.37067 13.5439C7.09839 13.846 7.87871 14.001 8.66663 14C10.2579 14 11.784 13.3679 12.9093 12.2426C14.0345 11.1174 14.6666 9.5913 14.6666 8C14.6666 6.4087 14.0345 4.88258 12.9093 3.75736C11.784 2.63214 10.2579 2 8.66663 2ZM7.99996 5.33333V8.66667L10.8533 10.36L11.3333 9.55333L8.99996 8.16667V5.33333H7.99996Z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" ><path d="M8.66663 2C7.07533 2 5.5492 2.63214 4.42399 3.75736C3.29877 4.88258 2.66663 6.4087 2.66663 8H0.666626L3.25996 10.5933L3.30663 10.6867L5.99996 8H3.99996C3.99996 5.42 6.08663 3.33333 8.66663 3.33333C11.2466 3.33333 13.3333 5.42 13.3333 8C13.3333 10.58 11.2466 12.6667 8.66663 12.6667C7.37996 12.6667 6.21329 12.14 5.37329 11.2933L4.42663 12.24C4.98224 12.7987 5.64295 13.2418 6.37067 13.5439C7.09839 13.846 7.87871 14.001 8.66663 14C10.2579 14 11.784 13.3679 12.9093 12.2426C14.0345 11.1174 14.6666 9.5913 14.6666 8C14.6666 6.4087 14.0345 4.88258 12.9093 3.75736C11.784 2.63214 10.2579 2 8.66663 2ZM7.99996 5.33333V8.66667L10.8533 10.36L11.3333 9.55333L8.99996 8.16667V5.33333H7.99996Z"/></svg>
\ No newline at end of file
diff --git a/frontend/providers/dbprovider/src/pages/_app.tsx b/frontend/providers/dbprovider/src/pages/_app.tsx
index 248b5efc3b4d..c2ff79ecc5f9 100644
--- a/frontend/providers/dbprovider/src/pages/_app.tsx
+++ b/frontend/providers/dbprovider/src/pages/_app.tsx
@@ -146,7 +146,7 @@ function App({ Component, pageProps }: AppProps) {
           try {
             if (e.data?.type === 'InternalAppCall' && e.data?.name) {
               router.push({
-                pathname: '/db/detail',
+                pathname: '/redirect',
                 query: {
                   name: e.data.name
                 }
diff --git a/frontend/providers/dbprovider/src/pages/api/createDB.ts b/frontend/providers/dbprovider/src/pages/api/createDB.ts
index 343c45f18512..7fa85cf4ed80 100644
--- a/frontend/providers/dbprovider/src/pages/api/createDB.ts
+++ b/frontend/providers/dbprovider/src/pages/api/createDB.ts
@@ -4,7 +4,7 @@ import { jsonRes } from '@/services/backend/response';
 import { ApiResp } from '@/services/kubernet';
 import { KbPgClusterType } from '@/types/cluster';
 import { BackupItemType, DBEditType } from '@/types/db';
-import { json2Account, json2ClusterOps, json2CreateCluster } from '@/utils/json2Yaml';
+import { json2Account, json2ResourceOps, json2CreateCluster } from '@/utils/json2Yaml';
 import type { NextApiRequest, NextApiResponse } from 'next';
 import { updateBackupPolicyApi } from './backup/updatePolicy';
 import { BackupSupportedDBTypeList } from '@/constants/db';
@@ -38,17 +38,17 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
       const opsRequests = [];
 
       if (cpu !== dbForm.cpu || memory !== dbForm.memory) {
-        const verticalScalingYaml = json2ClusterOps(dbForm, 'VerticalScaling');
+        const verticalScalingYaml = json2ResourceOps(dbForm, 'VerticalScaling');
         opsRequests.push(verticalScalingYaml);
       }
 
       if (replicas !== dbForm.replicas) {
-        const horizontalScalingYaml = json2ClusterOps(dbForm, 'HorizontalScaling');
+        const horizontalScalingYaml = json2ResourceOps(dbForm, 'HorizontalScaling');
         opsRequests.push(horizontalScalingYaml);
       }
 
       if (dbForm.storage > storage) {
-        const volumeExpansionYaml = json2ClusterOps(dbForm, 'VolumeExpansion');
+        const volumeExpansionYaml = json2ResourceOps(dbForm, 'VolumeExpansion');
         opsRequests.push(volumeExpansionYaml);
       }
 
@@ -97,7 +97,9 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
     }
 
     const account = json2Account(dbForm);
-    const cluster = json2CreateCluster(dbForm, backupInfo);
+    const cluster = json2CreateCluster(dbForm, backupInfo, {
+      storageClassName: process.env.STORAGE_CLASSNAME
+    });
     await applyYamlList([account, cluster], 'create');
     const { body } = (await k8sCustomObjects.getNamespacedCustomObject(
       'apps.kubeblocks.io',
diff --git a/frontend/providers/dbprovider/src/pages/api/delDBByName.ts b/frontend/providers/dbprovider/src/pages/api/delDBByName.ts
index 073b98fb40e7..e3b05e301124 100644
--- a/frontend/providers/dbprovider/src/pages/api/delDBByName.ts
+++ b/frontend/providers/dbprovider/src/pages/api/delDBByName.ts
@@ -39,11 +39,11 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
       console.log(error);
     }
 
-    // get backup and delete
-    const backups = await getBackupListByDBName({ dbName: name, req });
-    await Promise.all(
-      backups.map((item) => delBackupByName({ backupName: item.metadata.name, req }))
-    );
+    // Backup strategy has been migrated, no need to delete manually
+    // const backups = await getBackupListByDBName({ dbName: name, req });
+    // await Promise.all(
+    //   backups.map((item) => delBackupByName({ backupName: item.metadata.name, req }))
+    // );
 
     // del service
     await k8sCore.deleteNamespacedService(`${name}-export`, namespace).catch((err) => {
diff --git a/frontend/providers/dbprovider/src/pages/api/getDBByName.ts b/frontend/providers/dbprovider/src/pages/api/getDBByName.ts
index 42efd3891831..72fbcd25737d 100644
--- a/frontend/providers/dbprovider/src/pages/api/getDBByName.ts
+++ b/frontend/providers/dbprovider/src/pages/api/getDBByName.ts
@@ -3,6 +3,7 @@ import { ApiResp } from '@/services/kubernet';
 import { authSession } from '@/services/backend/auth';
 import { getK8s } from '@/services/backend/kubernetes';
 import { jsonRes } from '@/services/backend/response';
+import { KbPgClusterType } from '@/types/cluster';
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse<ApiResp>) {
   try {
@@ -29,13 +30,15 @@ export async function getCluster(req: NextApiRequest, name: string) {
     kubeconfig: await authSession(req)
   });
 
-  const { body } = await k8sCustomObjects.getNamespacedCustomObject(
+  const { body } = (await k8sCustomObjects.getNamespacedCustomObject(
     'apps.kubeblocks.io',
     'v1alpha1',
     namespace,
     'clusters',
     name
-  );
+  )) as {
+    body: KbPgClusterType;
+  };
 
   return body;
 }
diff --git a/frontend/providers/dbprovider/src/pages/api/opsrequest/operationlog.ts b/frontend/providers/dbprovider/src/pages/api/opsrequest/operationlog.ts
new file mode 100644
index 000000000000..bbab32af4dd0
--- /dev/null
+++ b/frontend/providers/dbprovider/src/pages/api/opsrequest/operationlog.ts
@@ -0,0 +1,137 @@
+import { crLabelKey, DBReconfigStatusMap } from '@/constants/db';
+import { authSession } from '@/services/backend/auth';
+import { getK8s } from '@/services/backend/kubernetes';
+import { jsonRes } from '@/services/backend/response';
+import { ApiResp } from '@/services/kubernet';
+import { KubeBlockOpsRequestType } from '@/types/cluster';
+import { DBType, OpsRequestItemType } from '@/types/db';
+import { cpuFormatToC, memoryFormatToGi } from '@/utils/tools';
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse<ApiResp>) {
+  try {
+    const { name } = req.query as {
+      name: string;
+    };
+
+    const { k8sCustomObjects, namespace } = await getK8s({
+      kubeconfig: await authSession(req)
+    });
+
+    let labelSelector = `app.kubernetes.io/instance=${name},${crLabelKey}=${name}`;
+
+    const opsrequestsList = (await k8sCustomObjects.listNamespacedCustomObject(
+      'apps.kubeblocks.io',
+      'v1alpha1',
+      namespace,
+      'opsrequests',
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      labelSelector
+    )) as {
+      body: {
+        items: KubeBlockOpsRequestType[];
+      };
+    };
+
+    const opsrequests = opsrequestsList.body.items
+      .map((item) => {
+        const simpleTypes = ['Start', 'Stop', 'Restart'];
+
+        const configurations = (() => {
+          if (simpleTypes.includes(item.spec.type)) {
+            return [{ parameterName: item.spec.type, newValue: '-', oldValue: '-' }];
+          }
+
+          if (item.spec.type === 'VerticalScaling') {
+            const componentName = item.spec?.verticalScaling?.[0]?.componentName!;
+            const oldConfig = item.status?.lastConfiguration?.components?.[componentName];
+            const newConfig = item.spec?.verticalScaling?.[0];
+
+            const changedConfigs = [];
+
+            if (oldConfig?.limits?.cpu !== newConfig?.limits?.cpu) {
+              changedConfigs.push({
+                parameterName: item.spec.type + 'CPU',
+                newValue: cpuFormatToC(newConfig?.limits?.cpu) || '-',
+                oldValue: cpuFormatToC(oldConfig?.limits?.cpu) || '-'
+              });
+            }
+
+            if (oldConfig?.limits?.memory !== newConfig?.limits?.memory) {
+              changedConfigs.push({
+                parameterName: item.spec.type + 'Memory',
+                newValue: memoryFormatToGi(newConfig?.limits?.memory) || '-',
+                oldValue: memoryFormatToGi(oldConfig?.limits?.memory) || '-'
+              });
+            }
+
+            return changedConfigs;
+          }
+
+          if (item.spec.type === 'HorizontalScaling') {
+            const componentName = item.spec?.horizontalScaling?.[0]?.componentName!;
+            const oldReplicas =
+              item.status?.lastConfiguration?.components?.[componentName]?.replicas;
+            const newReplicas = item.spec?.horizontalScaling?.[0]?.replicas;
+
+            return [
+              {
+                parameterName: 'HorizontalScaling',
+                newValue: String(newReplicas || '-'),
+                oldValue: String(oldReplicas || '-')
+              }
+            ];
+          }
+
+          if (item.spec.type === 'VolumeExpansion') {
+            const componentName = item.spec?.volumeExpansion?.[0]?.componentName!;
+            const oldStorage =
+              item.status?.lastConfiguration?.components?.[componentName]?.volumeClaimTemplates?.[0]
+                ?.storage;
+            const newStorage = item.spec?.volumeExpansion?.[0]?.volumeClaimTemplates?.[0]?.storage;
+
+            return [
+              {
+                parameterName: 'VolumeExpansion',
+                newValue: String(newStorage || '-'),
+                oldValue: String(oldStorage || '-')
+              }
+            ];
+          }
+
+          return [
+            {
+              parameterName: item.spec.type,
+              newValue: '-',
+              oldValue: '-'
+            }
+          ];
+        })();
+
+        return {
+          id: item.metadata.uid,
+          name: item.metadata.name,
+          status:
+            item.status?.phase && DBReconfigStatusMap[item.status.phase]
+              ? DBReconfigStatusMap[item.status.phase]
+              : DBReconfigStatusMap.Creating,
+          startTime: new Date(item.metadata.creationTimestamp),
+          namespace: item.metadata.namespace,
+          configurations
+        };
+      })
+      .filter((item) => item.configurations.length > 0) as OpsRequestItemType[];
+
+    jsonRes(res, {
+      data: opsrequests
+    });
+  } catch (err: any) {
+    jsonRes(res, {
+      code: 500,
+      error: err
+    });
+  }
+}
diff --git a/frontend/providers/dbprovider/src/pages/api/pauseDBByName.ts b/frontend/providers/dbprovider/src/pages/api/pauseDBByName.ts
index 602e14de0f3f..feb4b5b9b55c 100644
--- a/frontend/providers/dbprovider/src/pages/api/pauseDBByName.ts
+++ b/frontend/providers/dbprovider/src/pages/api/pauseDBByName.ts
@@ -3,9 +3,10 @@ import { getK8s } from '@/services/backend/kubernetes';
 import { jsonRes } from '@/services/backend/response';
 import { ApiResp } from '@/services/kubernet';
 import { KbPgClusterType } from '@/types/cluster';
-import { json2StartOrStop } from '@/utils/json2Yaml';
+import { json2BasicOps } from '@/utils/json2Yaml';
 import { PatchUtils } from '@kubernetes/client-node';
 import type { NextApiRequest, NextApiResponse } from 'next';
+import { getCluster } from './getDBByName';
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse<ApiResp>) {
   try {
@@ -24,20 +25,12 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
       kubeconfig: await authSession(req)
     });
 
-    const { yaml, yamlObj } = json2StartOrStop({
+    const yaml = json2BasicOps({
       dbName,
       type: 'Stop'
     });
 
-    const { body } = (await k8sCustomObjects.getNamespacedCustomObject(
-      'apps.kubeblocks.io',
-      'v1alpha1',
-      namespace,
-      'clusters',
-      dbName
-    )) as {
-      body: KbPgClusterType;
-    };
+    const body = await getCluster(req, dbName);
 
     if (body.spec.backup?.enabled === true) {
       const patch = [
diff --git a/frontend/providers/dbprovider/src/pages/api/platform/getVersion.ts b/frontend/providers/dbprovider/src/pages/api/platform/getVersion.ts
index cb2794da76c7..826b8e1143b9 100644
--- a/frontend/providers/dbprovider/src/pages/api/platform/getVersion.ts
+++ b/frontend/providers/dbprovider/src/pages/api/platform/getVersion.ts
@@ -46,7 +46,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         item?.metadata?.name &&
         !DBVersionMap[db].find((db) => db.id === item.metadata.name)
       ) {
-        DBVersionMap[db].push({
+        DBVersionMap[db].unshift({
           id: item.metadata.name,
           label: item.metadata.name
         });
diff --git a/frontend/providers/dbprovider/src/pages/api/startDBByName.ts b/frontend/providers/dbprovider/src/pages/api/startDBByName.ts
index ec8859284eb7..0f545fc73498 100644
--- a/frontend/providers/dbprovider/src/pages/api/startDBByName.ts
+++ b/frontend/providers/dbprovider/src/pages/api/startDBByName.ts
@@ -3,9 +3,10 @@ import { getK8s } from '@/services/backend/kubernetes';
 import { jsonRes } from '@/services/backend/response';
 import { ApiResp } from '@/services/kubernet';
 import { KbPgClusterType } from '@/types/cluster';
-import { json2StartOrStop } from '@/utils/json2Yaml';
+import { json2BasicOps } from '@/utils/json2Yaml';
 import { PatchUtils } from '@kubernetes/client-node';
 import type { NextApiRequest, NextApiResponse } from 'next';
+import { getCluster } from './getDBByName';
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse<ApiResp>) {
   try {
@@ -24,22 +25,12 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
       kubeconfig: await authSession(req)
     });
 
-    const { yaml, yamlObj } = json2StartOrStop({
+    const yaml = json2BasicOps({
       dbName,
       type: 'Start'
     });
 
-    const { body } = (await k8sCustomObjects.getNamespacedCustomObject(
-      'apps.kubeblocks.io',
-      'v1alpha1',
-      namespace,
-      'clusters',
-      dbName
-    )) as {
-      body: KbPgClusterType;
-    };
-
-    console.log(yamlObj, body.spec.backup, body.spec.backup?.enabled === false, 'yaml');
+    const body = await getCluster(req, dbName);
 
     if (body.spec.backup?.enabled === false) {
       const patch = [
diff --git a/frontend/providers/dbprovider/src/pages/db/detail/components/AppBaseInfo.tsx b/frontend/providers/dbprovider/src/pages/db/detail/components/AppBaseInfo.tsx
index d62d61936b85..15e877838901 100644
--- a/frontend/providers/dbprovider/src/pages/db/detail/components/AppBaseInfo.tsx
+++ b/frontend/providers/dbprovider/src/pages/db/detail/components/AppBaseInfo.tsx
@@ -139,7 +139,7 @@ const AppBaseInfo = ({ db = defaultDBDetail }: { db: DBDetailType }) => {
   const externalNetWork = useMemo(() => {
     const host = `${SystemEnv?.domain}`;
     const port = service?.spec?.ports?.[0]?.nodePort?.toString() || '';
-    let connection = `${DBTypeSecretMap[db.dbType].connectKey}://${secret?.username}:${
+    let connection = `${DBTypeSecretMap[db.dbType]?.connectKey}://${secret?.username}:${
       secret?.password
     }@${host}:${port}`;
 
diff --git a/frontend/providers/dbprovider/src/pages/db/detail/components/OperationLog.tsx b/frontend/providers/dbprovider/src/pages/db/detail/components/OperationLog.tsx
new file mode 100644
index 000000000000..ac8c29815610
--- /dev/null
+++ b/frontend/providers/dbprovider/src/pages/db/detail/components/OperationLog.tsx
@@ -0,0 +1,172 @@
+import { getOperationLog } from '@/api/db';
+import MyIcon from '@/components/Icon';
+import { DBDetailType, OpsRequestItemType } from '@/types/db';
+import { I18nCommonKey } from '@/types/i18next';
+import {
+  Box,
+  Divider,
+  Flex,
+  Table,
+  TableContainer,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr
+} from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
+import dayjs from 'dayjs';
+import { useTranslation } from 'next-i18next';
+import { Fragment } from 'react';
+
+export default function OperationLog({ db }: { db?: DBDetailType }) {
+  const { t } = useTranslation();
+
+  const { data: operationList = [], isSuccess } = useQuery(
+    ['getOperationLog', db?.dbName, db?.dbType],
+    async () => {
+      if (!db?.dbName || !db?.dbType) return [];
+      const operationList = await getOperationLog({
+        name: db.dbName,
+        dbType: db.dbType
+      });
+      operationList.sort(
+        (a, b) => new Date(b.startTime).getTime() - new Date(a.startTime).getTime()
+      );
+      return operationList;
+    },
+    {
+      enabled: !!db?.dbName,
+      refetchInterval: 5000
+    }
+  );
+
+  const historyColumns: {
+    title: I18nCommonKey;
+    dataIndex?: keyof OpsRequestItemType;
+    key: string;
+    render?: (item: OpsRequestItemType, configIndex: number) => React.ReactNode | string;
+  }[] = [
+    {
+      title: 'dbconfig.modify_time',
+      key: 'creation_time',
+      render: (item, configIndex) => (
+        <Box>{configIndex === 0 ? dayjs(item.startTime).format('YYYY-MM-DD HH:mm') : ''}</Box>
+      )
+    },
+    {
+      title: 'name',
+      key: 'name',
+      render: (item, configIndex) => (
+        <Box>{t(item.configurations[configIndex].parameterName as I18nCommonKey)}</Box>
+      )
+    },
+    {
+      title: 'dbconfig.original_value',
+      key: 'original_value',
+      render: (item, configIndex) => (
+        <Box color={'grayModern.600'}>{item.configurations[configIndex].oldValue}</Box>
+      )
+    },
+    {
+      title: 'dbconfig.modified_value',
+      key: 'modified_value',
+      render: (item, configIndex) => (
+        <Box color={'grayModern.600'}>{item.configurations[configIndex].newValue}</Box>
+      )
+    },
+    {
+      title: 'status',
+      key: 'status',
+      render: (item, configIndex) => (
+        <Flex color={item.status.color} alignItems={'center'}>
+          {configIndex === 0 ? t(item.status.label) : ''}
+        </Flex>
+      )
+    }
+  ];
+
+  if (isSuccess && operationList?.length === 0) {
+    return (
+      <Flex
+        h={'100%'}
+        justifyContent={'center'}
+        alignItems={'center'}
+        flexDirection={'column'}
+        flex={1}
+      >
+        <MyIcon name={'noEvents'} color={'transparent'} width={'36px'} height={'36px'} />
+        <Box pt={'8px'}>{t('no_data_available')}</Box>
+      </Flex>
+    );
+  }
+
+  return (
+    <Flex flexDirection={'column'} h={'full'} w={'full'} position={'relative'}>
+      <Flex justifyContent={'space-between'} alignItems={'center'} mb={'16px'}>
+        <Box
+          pb={'6px'}
+          pt={'4px'}
+          borderBottom={'2px solid'}
+          fontSize={'16px'}
+          fontWeight={500}
+          color={'grayModern.900'}
+        >
+          {t('change_log')}
+        </Box>
+      </Flex>
+
+      <TableContainer h={'100%'} overflowY={'auto'} position={'relative'}>
+        <Table variant={'unstyled'} backgroundColor={'white'}>
+          <Thead position="sticky" top={0} zIndex={1}>
+            <Tr>
+              {historyColumns.map((item) => (
+                <Th
+                  fontSize={'12px'}
+                  py={4}
+                  key={item.key}
+                  border={'none'}
+                  backgroundColor={'grayModern.50'}
+                  fontWeight={'500'}
+                  color={'grayModern.600'}
+                >
+                  {t(item.title)}
+                </Th>
+              ))}
+            </Tr>
+          </Thead>
+          <Tbody>
+            {operationList?.map((app, appIndex) => {
+              return (
+                <Fragment key={app.id}>
+                  {app.configurations?.map((item, configIndex) => {
+                    return (
+                      <Tr key={item.parameterName + configIndex}>
+                        {historyColumns.map((col) => (
+                          <Td key={col.key} h={'48px'}>
+                            {col.render
+                              ? col.render(app, configIndex)
+                              : col.dataIndex
+                              ? `${app[col.dataIndex]}`
+                              : '-'}
+                          </Td>
+                        ))}
+                      </Tr>
+                    );
+                  })}
+                  {appIndex < operationList.length - 1 && (
+                    <Tr>
+                      <Td colSpan={historyColumns.length} p={0}>
+                        <Divider my={'2px'} bg="grayModern.200" />
+                      </Td>
+                    </Tr>
+                  )}
+                </Fragment>
+              );
+            })}
+          </Tbody>
+        </Table>
+      </TableContainer>
+    </Flex>
+  );
+}
diff --git a/frontend/providers/dbprovider/src/pages/db/detail/index.tsx b/frontend/providers/dbprovider/src/pages/db/detail/index.tsx
index d5fad474f155..3bc9aae959cb 100644
--- a/frontend/providers/dbprovider/src/pages/db/detail/index.tsx
+++ b/frontend/providers/dbprovider/src/pages/db/detail/index.tsx
@@ -22,7 +22,7 @@ import ErrorLog from '@/pages/db/detail/components/ErrorLog';
 import MyIcon from '@/components/Icon';
 import { BackupSupportedDBTypeList } from '@/constants/db';
 import DataImport from './components/DataImport';
-import { getDBByName } from '@/api/db';
+import OperationLog from './components/OperationLog';
 
 enum TabEnum {
   pod = 'pod',
@@ -33,7 +33,8 @@ enum TabEnum {
   Reconfigure = 'reconfigure',
   DataImport = 'dataImport',
   ErrorLog = 'errorLog',
-  Overview = 'overview'
+  Overview = 'overview',
+  OperationLog = 'operationLog'
 }
 
 const AppDetail = ({
@@ -65,12 +66,16 @@ const AppDetail = ({
         value: TabEnum.Overview,
         icon: <MyIcon name="overview" w={'16px'} h={'16px'} />
       },
-
       {
         label: 'monitor_list',
         value: TabEnum.monitor,
         icon: <MyIcon name="monitor" w={'16px'} h={'16px'} />
       },
+      {
+        label: 'change_log',
+        value: TabEnum.OperationLog,
+        icon: <MyIcon name="restore" w={'16px'} h={'16px'} />
+      },
       ...(PublicNetMigration
         ? [
             {
@@ -233,6 +238,8 @@ const AppDetail = ({
             )}
 
             {listType === TabEnum.ErrorLog && <ErrorLog ref={ReconfigureTableRef} db={dbDetail} />}
+
+            {listType === TabEnum.OperationLog && <OperationLog db={dbDetail} />}
           </Box>
         )}
       </Flex>
@@ -255,17 +262,10 @@ const AppDetail = ({
 export default AppDetail;
 
 export async function getServerSideProps(context: any) {
-  let dbType = context.query?.dbType || '';
-
+  const dbType = context.query?.dbType || '';
   const dbName = context.query?.name || '';
   const listType = context.query?.listType || TabEnum.Overview;
 
-  if (!dbType) {
-    const baseURL = `http://${process.env.HOSTNAME || 'localhost'}:${process.env.PORT || 3000}`;
-    const db = await getDBByName(dbName, { baseURL });
-    dbType = db.dbType;
-  }
-
   return {
     props: { ...(await serviceSideProps(context)), dbName, listType, dbType }
   };
diff --git a/frontend/providers/dbprovider/src/pages/dbs/components/dbList.tsx b/frontend/providers/dbprovider/src/pages/dbs/components/dbList.tsx
index 5c9128ef9c38..a7033b2c71ae 100644
--- a/frontend/providers/dbprovider/src/pages/dbs/components/dbList.tsx
+++ b/frontend/providers/dbprovider/src/pages/dbs/components/dbList.tsx
@@ -170,7 +170,8 @@ const DBList = ({
       },
       {
         accessorKey: 'storage',
-        header: () => t('storage')
+        header: () => t('storage'),
+        cell: ({ row }) => <>{row.original.storage}Gi</>
       },
       {
         id: 'actions',
diff --git a/frontend/providers/dbprovider/src/pages/redirect.tsx b/frontend/providers/dbprovider/src/pages/redirect.tsx
new file mode 100644
index 000000000000..fd375a35d9af
--- /dev/null
+++ b/frontend/providers/dbprovider/src/pages/redirect.tsx
@@ -0,0 +1,37 @@
+import { getDBByName } from '@/api/db';
+import { useGlobalStore } from '@/store/global';
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+
+const RedirectPage = () => {
+  const router = useRouter();
+  const { setLastRoute } = useGlobalStore();
+
+  useEffect(() => {
+    const handleRedirect = (name?: string) => {
+      if (name) {
+        getDBByName(name)
+          .then((app) => {
+            router.replace({
+              pathname: '/db/detail',
+              query: { name: app.dbName, dbType: app.dbType }
+            });
+          })
+          .catch((err) => {
+            router.replace('/dbs');
+          });
+      } else {
+        router.replace('/dbs');
+      }
+    };
+
+    if (router.isReady) {
+      const { name } = router.query as { name?: string };
+      handleRedirect(name);
+    }
+  }, [router, router.isReady, router.query]);
+
+  return null;
+};
+
+export default RedirectPage;
diff --git a/frontend/providers/dbprovider/src/store/static.ts b/frontend/providers/dbprovider/src/store/static.ts
index af5614034f7b..20ebd88d92d1 100644
--- a/frontend/providers/dbprovider/src/store/static.ts
+++ b/frontend/providers/dbprovider/src/store/static.ts
@@ -16,7 +16,10 @@ let retryGetPrice = 3;
 let retryVersion = 3;
 let retryGetEnv = 3;
 export let DBVersionMap: DBVersionMapType = {
-  [DBTypeEnum.postgresql]: [{ id: 'postgresql-14.8.0', label: 'postgresql-14.8.0' }],
+  [DBTypeEnum.postgresql]: [
+    { id: 'postgresql-12.14.0', label: 'postgresql-12.14.0' },
+    { id: 'postgresql-14.8.0', label: 'postgresql-14.8.0' }
+  ],
   [DBTypeEnum.mongodb]: [{ id: 'mongodb-5.0', label: 'mongodb-5.0' }],
   [DBTypeEnum.mysql]: [{ id: 'ac-mysql-8.0.30', label: 'ac-mysql-8.0.30' }],
   [DBTypeEnum.redis]: [{ id: 'redis-7.0.6', label: 'redis-7.0.6' }],
diff --git a/frontend/providers/dbprovider/src/types/cluster.d.ts b/frontend/providers/dbprovider/src/types/cluster.d.ts
index 3ca22bead0d2..b6115f94cc14 100644
--- a/frontend/providers/dbprovider/src/types/cluster.d.ts
+++ b/frontend/providers/dbprovider/src/types/cluster.d.ts
@@ -149,8 +149,47 @@ export type KubeBlockOpsRequestType = {
     };
     ttlSecondsBeforeAbort: number;
     type: string;
+    verticalScaling?: {
+      componentName: string;
+      limits: {
+        cpu: string;
+        memory: string;
+      };
+      requests: {
+        cpu: string;
+        memory: string;
+      };
+    }[];
+    horizontalScaling?: {
+      componentName: string;
+      replicas: number;
+    }[];
+    volumeExpansion?: {
+      componentName: string;
+      volumeClaimTemplates: {
+        storage: string;
+      }[];
+    }[];
   };
   status: {
+    lastConfiguration: {
+      components: {
+        [key: string]: {
+          limits: {
+            cpu: string;
+            memory: string;
+          };
+          requests: {
+            cpu: string;
+            memory: string;
+          };
+          replicas: number;
+          volumeClaimTemplates: {
+            storage: string;
+          }[];
+        };
+      };
+    };
     clusterGeneration: number;
     completionTimestamp: string;
     conditions: {
diff --git a/frontend/providers/dbprovider/src/utils/adapt.ts b/frontend/providers/dbprovider/src/utils/adapt.ts
index 5a5e5397f629..eaaf3417f87b 100644
--- a/frontend/providers/dbprovider/src/utils/adapt.ts
+++ b/frontend/providers/dbprovider/src/utils/adapt.ts
@@ -62,6 +62,17 @@ export const getDBSource = (
 };
 
 export const adaptDBListItem = (db: KbPgClusterType): DBListItemType => {
+  let cpu = 0;
+  let memory = 0;
+  let storage = 0;
+  db.spec?.componentSpecs.forEach((comp) => {
+    cpu += cpuFormatToM(comp?.resources?.limits?.cpu || '0');
+    memory += memoryFormatToMi(comp?.resources?.limits?.memory || '0');
+    storage += storageFormatToNum(
+      comp?.volumeClaimTemplates?.[0]?.spec?.resources?.requests?.storage || '0'
+    );
+  });
+
   // compute store amount
   return {
     id: db.metadata?.uid || ``,
@@ -72,11 +83,9 @@ export const adaptDBListItem = (db: KbPgClusterType): DBListItemType => {
         ? dbStatusMap[db?.status?.phase]
         : dbStatusMap.UnKnow,
     createTime: dayjs(db.metadata?.creationTimestamp).format('YYYY/MM/DD HH:mm'),
-    cpu: cpuFormatToM(db.spec?.componentSpecs?.[0]?.resources?.limits?.cpu),
-    memory: cpuFormatToM(db.spec?.componentSpecs?.[0]?.resources?.limits?.memory),
-    storage:
-      db.spec?.componentSpecs?.[0]?.volumeClaimTemplates?.[0]?.spec?.resources?.requests?.storage ||
-      '-',
+    cpu,
+    memory,
+    storage: storage.toString() || '-',
     conditions: db?.status?.conditions || [],
     isDiskSpaceOverflow: false,
     labels: db.metadata.labels || {},
@@ -85,6 +94,17 @@ export const adaptDBListItem = (db: KbPgClusterType): DBListItemType => {
 };
 
 export const adaptDBDetail = (db: KbPgClusterType): DBDetailType => {
+  let cpu = 0;
+  let memory = 0;
+  let storage = 0;
+  db.spec?.componentSpecs.forEach((comp) => {
+    cpu += cpuFormatToM(comp?.resources?.limits?.cpu || '0');
+    memory += memoryFormatToMi(comp?.resources?.limits?.memory || '0');
+    storage += storageFormatToNum(
+      comp?.volumeClaimTemplates?.[0]?.spec?.resources?.requests?.storage || '0'
+    );
+  });
+
   return {
     id: db.metadata?.uid || ``,
     createTime: dayjs(db.metadata?.creationTimestamp).format('YYYY/MM/DD HH:mm'),
@@ -96,11 +116,9 @@ export const adaptDBDetail = (db: KbPgClusterType): DBDetailType => {
     dbVersion: db?.metadata?.labels['clusterversion.kubeblocks.io/name'] || '',
     dbName: db.metadata?.name || 'db name',
     replicas: db.spec?.componentSpecs?.[0]?.replicas || 1,
-    cpu: cpuFormatToM(db.spec?.componentSpecs?.[0]?.resources.limits.cpu),
-    memory: memoryFormatToMi(db.spec?.componentSpecs?.[0]?.resources.limits.memory),
-    storage: storageFormatToNum(
-      db.spec?.componentSpecs?.[0]?.volumeClaimTemplates?.[0]?.spec?.resources?.requests?.storage
-    ),
+    cpu,
+    memory,
+    storage,
     conditions: db?.status?.conditions || [],
     isDiskSpaceOverflow: false,
     labels: db.metadata.labels || {},
diff --git a/frontend/providers/dbprovider/src/utils/json2Yaml.ts b/frontend/providers/dbprovider/src/utils/json2Yaml.ts
index 6c581cd14918..ef2e5f561ac1 100644
--- a/frontend/providers/dbprovider/src/utils/json2Yaml.ts
+++ b/frontend/providers/dbprovider/src/utils/json2Yaml.ts
@@ -29,7 +29,13 @@ const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz', 5);
  * @param backupInfo Optional backup data for database restoration.
  * @returns Generated YAML configuration.
  */
-export const json2CreateCluster = (data: DBEditType, backupInfo?: BackupItemType) => {
+export const json2CreateCluster = (
+  data: DBEditType,
+  backupInfo?: BackupItemType,
+  options?: {
+    storageClassName?: string;
+  }
+) => {
   const resources = {
     limits: {
       cpu: `${str2Num(Math.floor(data.cpu))}m`,
@@ -65,7 +71,10 @@ export const json2CreateCluster = (data: DBEditType, backupInfo?: BackupItemType
     name: data.dbName
   };
 
-  const storageClassName = StorageClassName ? { storageClassName: StorageClassName } : {};
+  const storageClassName =
+    options?.storageClassName || StorageClassName
+      ? { storageClassName: options?.storageClassName || StorageClassName }
+      : {};
 
   const redisHA = RedisHAConfig(data.replicas > 1);
 
@@ -854,6 +863,9 @@ export const json2Upgrade = ({ dbName, dbVersion }: DBEditType) => {
   return yaml.dump(template);
 };
 
+/**
+ * @deprecated
+ */
 export const json2StartOrStop = ({ dbName, type }: { dbName: string; type: 'Start' | 'Stop' }) => {
   const nameType = type.toLocaleLowerCase();
 
@@ -877,6 +889,9 @@ export const json2StartOrStop = ({ dbName, type }: { dbName: string; type: 'Star
   };
 };
 
+/**
+ * @deprecated
+ */
 export const json2Restart = ({ dbName, dbType }: { dbName: string; dbType: DBType }) => {
   const template = {
     apiVersion: 'apps.kubeblocks.io/v1alpha1',
@@ -1176,7 +1191,7 @@ export const json2Reconfigure = (
   return yaml.dump(template);
 };
 
-export const json2ClusterOps = (
+export const json2ResourceOps = (
   data: DBEditType,
   type: 'VerticalScaling' | 'HorizontalScaling' | 'VolumeExpansion'
 ) => {
@@ -1184,8 +1199,9 @@ export const json2ClusterOps = (
     data.dbType === 'apecloud-mysql' ? 'mysql' : data.dbType === 'kafka' ? 'broker' : data.dbType;
 
   const getOpsName = () => {
-    const timeStr = dayjs().format('YYYYMMDDHHmmss');
-    return `ops-${type.toLowerCase()}-${timeStr}`;
+    const timeStr = dayjs().format('YYYYMMDDHHmm');
+    const randomStr = nanoid(4);
+    return `ops-${type.toLowerCase()}-${timeStr}-${randomStr}`;
   };
 
   const baseTemplate = {
@@ -1252,3 +1268,34 @@ export const json2ClusterOps = (
 
   return yaml.dump(template);
 };
+
+export const json2BasicOps = (data: {
+  dbName: string;
+  dbType?: DBType;
+  type: 'Start' | 'Stop' | 'Restart';
+}) => {
+  const componentName =
+    data.dbType === 'apecloud-mysql' ? 'mysql' : data.dbType === 'kafka' ? 'broker' : data.dbType;
+
+  const template = {
+    apiVersion: 'apps.kubeblocks.io/v1alpha1',
+    kind: 'OpsRequest',
+    metadata: {
+      name: `ops-${data.type.toLowerCase()}-${dayjs().format('YYYYMMDDHHmmss')}`,
+      labels: {
+        [crLabelKey]: data.dbName
+      }
+    },
+    spec: {
+      clusterRef: data.dbName,
+      type: data.type,
+      ...(data.type === 'Restart'
+        ? {
+            restart: [{ componentName }]
+          }
+        : {})
+    }
+  };
+
+  return yaml.dump(template);
+};
diff --git a/frontend/providers/dbprovider/src/utils/tools.ts b/frontend/providers/dbprovider/src/utils/tools.ts
index 1fdf71486050..2447d12866c4 100644
--- a/frontend/providers/dbprovider/src/utils/tools.ts
+++ b/frontend/providers/dbprovider/src/utils/tools.ts
@@ -95,6 +95,30 @@ export const strToBase64 = (str: string) => {
   return '';
 };
 
+/**
+ * Format CPU value to standard C format
+ * @param cpu CPU value, like "500m", "1", "2"
+ * @returns Standardized CPU value with C suffix, like "0.5C", "1C", "2C"
+ */
+export const cpuFormatToC = (cpu: string | number = '0'): string => {
+  if (!cpu || cpu === '0') {
+    return '0C';
+  }
+
+  let value: number;
+  const cpuStr = cpu.toString();
+
+  if (/m$/i.test(cpuStr)) {
+    // Handle values with 'm' suffix, like "500m"
+    value = parseFloat(cpuStr) / 1000;
+  } else {
+    // Handle values without unit, like "1", "2"
+    value = parseFloat(cpuStr);
+  }
+
+  return `${value.toFixed(1)}C`;
+};
+
 /**
  * cpu format
  */
@@ -143,6 +167,39 @@ export const memoryFormatToMi = (memory = '0') => {
   return Number(value.toFixed(2));
 };
 
+/**
+ * Format memory value to standard Gi format
+ * @param memory Memory value, like "512Mi", "1Gi", "2048Mi"
+ * @returns Standardized memory value with Gi suffix, like "0.5Gi", "1Gi", "2Gi"
+ */
+export const memoryFormatToGi = (memory: string | number = '0'): string => {
+  if (!memory || memory === '0') {
+    return '0Gi';
+  }
+
+  let value: number;
+  const memoryStr = memory.toString();
+
+  if (/Mi$/i.test(memoryStr)) {
+    // Convert Mi to Gi
+    value = parseFloat(memoryStr) / 1024;
+  } else if (/Gi$/i.test(memoryStr)) {
+    // Already in Gi
+    value = parseFloat(memoryStr);
+  } else if (/Ti$/i.test(memoryStr)) {
+    // Convert Ti to Gi
+    value = parseFloat(memoryStr) * 1024;
+  } else if (/Ki$/i.test(memoryStr)) {
+    // Convert Ki to Gi
+    value = parseFloat(memoryStr) / 1024 / 1024;
+  } else {
+    // Assume the value is in bytes and convert to Gi
+    value = parseFloat(memoryStr) / 1024 / 1024 / 1024;
+  }
+
+  return `${value.toFixed(1)}Gi`;
+};
+
 /**
  * storage format
  */
diff --git a/frontend/providers/devbox/.env.template b/frontend/providers/devbox/.env.template
index 3dd1c90bc8ad..156ba6ef0662 100644
--- a/frontend/providers/devbox/.env.template
+++ b/frontend/providers/devbox/.env.template
@@ -8,4 +8,4 @@ NODE_TLS_REJECT_UNAUTHORIZED=
 ROOT_RUNTIME_NAMESPACE=
 DATABASE_URL=
 RETAG_SVC_URL=
-PRIVACY_URL=
\ No newline at end of file
+PRIVACY_URL=
diff --git a/frontend/providers/devbox/.eslintrc.json b/frontend/providers/devbox/.eslintrc.json
index bffb357a7122..86921703f8ea 100644
--- a/frontend/providers/devbox/.eslintrc.json
+++ b/frontend/providers/devbox/.eslintrc.json
@@ -1,3 +1,18 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next/core-web-vitals",
+  "rules": {
+    // Consistently import navigation APIs from `@/i18n`
+    "no-restricted-imports": [
+      "error",
+      {
+        "name": "next/link",
+        "message": "Please import from `@/i18n` instead."
+      },
+      {
+        "name": "next/navigation",
+        "importNames": ["redirect", "permanentRedirect", "useRouter", "usePathname"],
+        "message": "Please import from `@/i18n` instead."
+      }
+    ]
+  }
 }
diff --git a/frontend/providers/devbox/.prettierignore b/frontend/providers/devbox/.prettierignore
index ab9a493f2ce6..67703d8812c4 100644
--- a/frontend/providers/devbox/.prettierignore
+++ b/frontend/providers/devbox/.prettierignore
@@ -2,3 +2,4 @@ dist
 .vscode
 **/.DS_Store
 node_modules
+.next
\ No newline at end of file
diff --git a/frontend/providers/devbox/.prettierrc.js b/frontend/providers/devbox/.prettierrc.js
new file mode 100644
index 000000000000..8bc336a3674e
--- /dev/null
+++ b/frontend/providers/devbox/.prettierrc.js
@@ -0,0 +1,20 @@
+module.exports = {
+  printWidth: 100,
+  tabWidth: 2,
+  useTabs: false,
+  semi: true,
+  singleQuote: true,
+  quoteProps: 'as-needed',
+  jsxSingleQuote: false,
+  trailingComma: 'none',
+  bracketSpacing: true,
+  jsxBracketSameLine: false,
+  arrowParens: 'always',
+  rangeStart: 0,
+  rangeEnd: Infinity,
+  requirePragma: false,
+  insertPragma: false,
+  proseWrap: 'preserve',
+  htmlWhitespaceSensitivity: 'css',
+  endOfLine: 'lf'
+};
diff --git a/frontend/providers/devbox/.prettierrc.json b/frontend/providers/devbox/.prettierrc.json
deleted file mode 100644
index c3bc434d271c..000000000000
--- a/frontend/providers/devbox/.prettierrc.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "printWidth": 100,
-  "tabWidth": 2,
-  "useTabs": false,
-  "semi": false,
-  "singleQuote": true,
-  "quoteProps": "as-needed",
-  "trailingComma": "none",
-  "bracketSpacing": true,
-  "jsxBracketSameLine": true,
-  "bracketSameLine": true,
-  "arrowParens": "always",
-  "requirePragma": false,
-  "insertPragma": false,
-  "proseWrap": "preserve",
-  "htmlWhitespaceSensitivity": "ignore",
-  "endOfLine": "auto"
-}
diff --git a/frontend/providers/devbox/api/devbox.ts b/frontend/providers/devbox/api/devbox.ts
index 9f94747da1e7..2a8d8fddb4e5 100644
--- a/frontend/providers/devbox/api/devbox.ts
+++ b/frontend/providers/devbox/api/devbox.ts
@@ -1,75 +1,80 @@
-import { V1Deployment, V1Pod, V1StatefulSet } from '@kubernetes/client-node'
+import { V1Deployment, V1Pod, V1StatefulSet } from '@kubernetes/client-node';
 
-import { DELETE, GET, POST } from '@/services/request'
-import { GetDevboxByNameReturn } from '@/types/adapt'
+import { DELETE, GET, POST } from '@/services/request';
+import { GetDevboxByNameReturn } from '@/types/adapt';
 import {
   DevboxEditTypeV2,
   DevboxListItemTypeV2,
   DevboxPatchPropsType,
   DevboxVersionListItemType
-} from '@/types/devbox'
-import { KBDevboxReleaseType, KBDevboxTypeV2 } from '@/types/k8s'
-import { MonitorDataResult, MonitorQueryKey } from '@/types/monitor'
+} from '@/types/devbox';
+import { KBDevboxReleaseType, KBDevboxTypeV2 } from '@/types/k8s';
 import {
   adaptAppListItem,
   adaptDevboxDetailV2,
   adaptDevboxListItemV2,
   adaptDevboxVersionListItem,
   adaptPod
-} from '@/utils/adapt'
+} from '@/utils/adapt';
+import { MonitorDataResult, MonitorQueryKey } from '@/types/monitor';
+import { AxiosProgressEvent } from 'axios';
 
 export const getMyDevboxList = () =>
-  GET<[KBDevboxTypeV2, {
-    templateRepository: {
-      iconId: string | null;
-    };
-    uid: string;
-  }][]>('/api/getDevboxList').then((data): DevboxListItemTypeV2[] =>
+  GET<
+    [
+      KBDevboxTypeV2,
+      {
+        templateRepository: {
+          iconId: string | null;
+        };
+        uid: string;
+      }
+    ][]
+  >('/api/getDevboxList').then((data): DevboxListItemTypeV2[] =>
     data.map(adaptDevboxListItemV2).sort((a, b) => {
-      return new Date(b.createTime).getTime() - new Date(a.createTime).getTime()
+      return new Date(b.createTime).getTime() - new Date(a.createTime).getTime();
     })
-  )
+  );
 export const getDevboxByName = (devboxName: string) =>
-  GET<GetDevboxByNameReturn>('/api/getDevboxByName', { devboxName }).then(adaptDevboxDetailV2)
+  GET<GetDevboxByNameReturn>('/api/getDevboxByName', { devboxName }).then(adaptDevboxDetailV2);
 
 export const applyYamlList = (yamlList: string[], type: 'create' | 'replace' | 'update') =>
-  POST('/api/applyYamlList', { yamlList, type })
+  POST('/api/applyYamlList', { yamlList, type });
 
-export const createDevbox = (payload: {
-  devboxForm: DevboxEditTypeV2
-}) => POST(`/api/createDevbox`, payload)
+export const createDevbox = (payload: { devboxForm: DevboxEditTypeV2 }) =>
+  POST(`/api/createDevbox`, payload);
 
 export const updateDevbox = (payload: { patch: DevboxPatchPropsType; devboxName: string }) =>
-  POST(`/api/updateDevbox`, payload)
+  POST(`/api/updateDevbox`, payload);
 
-export const delDevbox = (devboxName: string) => DELETE('/api/delDevbox', { devboxName })
+export const delDevbox = (devboxName: string) => DELETE('/api/delDevbox', { devboxName });
 
-export const restartDevbox = (data: { devboxName: string }) => POST('/api/restartDevbox', data)
+export const restartDevbox = (data: { devboxName: string }) => POST('/api/restartDevbox', data);
 
-export const startDevbox = (data: { devboxName: string }) => POST('/api/startDevbox', data)
+export const startDevbox = (data: { devboxName: string }) => POST('/api/startDevbox', data);
 
-export const pauseDevbox = (data: { devboxName: string }) => POST('/api/pauseDevbox', data)
+export const pauseDevbox = (data: { devboxName: string }) => POST('/api/pauseDevbox', data);
 
 export const getDevboxVersionList = (devboxName: string, devboxUid: string) =>
   GET<KBDevboxReleaseType[]>('/api/getDevboxVersionList', { devboxName, devboxUid }).then(
     (data): DevboxVersionListItemType[] =>
       data.map(adaptDevboxVersionListItem).sort((a, b) => {
-        return new Date(b.createTime).getTime() - new Date(a.createTime).getTime()
+        return new Date(b.createTime).getTime() - new Date(a.createTime).getTime();
       })
-  )
+  );
 
 export const releaseDevbox = (data: {
-  devboxName: string
-  tag: string
-  releaseDes: string
-  devboxUid: string
-}) => POST('/api/releaseDevbox', data)
+  devboxName: string;
+  tag: string;
+  releaseDes: string;
+  devboxUid: string;
+}) => POST('/api/releaseDevbox', data);
 
 export const editDevboxVersion = (data: { name: string; releaseDes: string }) =>
-  POST('/api/editDevboxVersion', data)
+  POST('/api/editDevboxVersion', data);
 
 export const delDevboxVersionByName = (versionName: string) =>
-  DELETE('/api/delDevboxVersionByName', { versionName })
+  DELETE('/api/delDevboxVersionByName', { versionName });
 
 export const getSSHConnectionInfo = (data: { devboxName: string }) =>
   GET<{
@@ -80,18 +85,32 @@ export const getSSHConnectionInfo = (data: { devboxName: string }) =>
     workingDir: string;
     releaseCommand: string;
     releaseArgs: string;
-}>('/api/getSSHConnectionInfo', data)
+  }>('/api/getSSHConnectionInfo', data);
 
 export const getDevboxPodsByDevboxName = (name: string) =>
-  GET<V1Pod[]>('/api/getDevboxPodsByDevboxName', { name }).then((item) => item.map(adaptPod))
+  GET<V1Pod[]>('/api/getDevboxPodsByDevboxName', { name }).then((item) => item.map(adaptPod));
 
 export const getDevboxMonitorData = (payload: {
-  queryName: string
-  queryKey: keyof MonitorQueryKey
-  step: string
-}) => GET<MonitorDataResult[]>(`/api/monitor/getMonitorData`, payload)
+  queryName: string;
+  queryKey: keyof MonitorQueryKey;
+  step: string;
+}) => GET<MonitorDataResult[]>(`/api/monitor/getMonitorData`, payload);
 
 export const getAppsByDevboxId = (devboxId: string) =>
   GET<V1Deployment & V1StatefulSet[]>('/api/getAppsByDevboxId', { devboxId }).then((res) =>
     res.map(adaptAppListItem)
-  )
+  );
+
+export const execCommandInDevboxPod = (data: {
+  devboxName: string;
+  command: string;
+  idePath: string;
+  onDownloadProgress: (progressEvent: AxiosProgressEvent) => void;
+  signal: AbortSignal;
+}) =>
+  POST('/api/execCommandInDevboxPod', data, {
+    // responseType: 'stream',
+    timeout: 0,
+    onDownloadProgress: data.onDownloadProgress,
+    signal: data.signal
+  });
diff --git a/frontend/providers/devbox/api/platform.ts b/frontend/providers/devbox/api/platform.ts
index 684763129e74..47ac9c08e172 100644
--- a/frontend/providers/devbox/api/platform.ts
+++ b/frontend/providers/devbox/api/platform.ts
@@ -1,16 +1,27 @@
-import { GET, POST } from '@/services/request'
-import type { UserQuotaItemType } from '@/types/user'
-import type { Env } from '@/types/static'
-export const getAppEnv = () => GET<Env>('/api/getEnv')
+import { GET, POST } from '@/services/request';
+import type { UserQuotaItemType, UserTask } from '@/types/user';
+import type { Env } from '@/types/static';
+import { getDesktopSessionFromSessionStorage, getSessionFromSessionStorage } from '@/utils/user';
+export const getAppEnv = () => GET<Env>('/api/getEnv');
 
 export const getUserQuota = () =>
   GET<{
-    quota: UserQuotaItemType[]
-  }>('/api/platform/getQuota')
+    quota: UserQuotaItemType[];
+  }>('/api/platform/getQuota');
 
-export const getRuntime = () => GET('/api/platform/getRuntime')
+export const getRuntime = () => GET('/api/platform/getRuntime');
 
-export const getResourcePrice = () => GET('/api/platform/resourcePrice')
+export const getResourcePrice = () => GET('/api/platform/resourcePrice');
 
 export const postAuthCname = (data: { publicDomain: string; customDomain: string }) =>
-  POST('/api/platform/authCname', data)
+  POST('/api/platform/authCname', data);
+
+export const getUserTasks = () =>
+  POST<{ needGuide: boolean; task: UserTask }>('/api/guide/getTasks', {
+    desktopToAppToken: getDesktopSessionFromSessionStorage()?.token
+  });
+
+export const checkUserTask = () =>
+  POST('/api/guide/checkTask', {
+    desktopToAppToken: getDesktopSessionFromSessionStorage()?.token
+  });
diff --git a/frontend/providers/devbox/api/template.ts b/frontend/providers/devbox/api/template.ts
index 454568a3fc2a..055e070455c8 100644
--- a/frontend/providers/devbox/api/template.ts
+++ b/frontend/providers/devbox/api/template.ts
@@ -1,29 +1,38 @@
-import { Tag, TemplateRepositoryKind } from "@/prisma/generated/client";
-import { DELETE, GET, POST } from "@/services/request";
-import { CreateTemplateRepositoryType, UpdateTemplateRepositoryType, UpdateTemplateType } from "@/utils/vaildate";
+import { Tag, TemplateRepositoryKind } from '@/prisma/generated/client';
+import { DELETE, GET, POST } from '@/services/request';
+import {
+  CreateTemplateRepositoryType,
+  UpdateTemplateRepositoryType,
+  UpdateTemplateType
+} from '@/utils/vaildate';
 
-export const listOfficialTemplateRepository = () => GET<{
-  templateRepositoryList: {
-    uid: string;
-    name: string;
-    kind: TemplateRepositoryKind;
-    iconId: string;
-    description: string | null;
-  }[]
-}>(`/api/templateRepository/listOfficial`)
-export const listTemplateRepository = (page: {
-  page: number,
-  pageSize: number,
-}, tags?: string[], search?: string) => {
-  const searchParams = new URLSearchParams()
+export const listOfficialTemplateRepository = () =>
+  GET<{
+    templateRepositoryList: {
+      uid: string;
+      name: string;
+      kind: TemplateRepositoryKind;
+      iconId: string;
+      description: string | null;
+    }[];
+  }>(`/api/templateRepository/listOfficial`);
+export const listTemplateRepository = (
+  page: {
+    page: number;
+    pageSize: number;
+  },
+  tags?: string[],
+  search?: string
+) => {
+  const searchParams = new URLSearchParams();
   if (tags && tags.length > 0) {
     tags.forEach((tag) => {
-      searchParams.append('tags', tag)
-    })
+      searchParams.append('tags', tag);
+    });
   }
-  searchParams.append('page', page.page.toString())
-  searchParams.append('pageSize', page.pageSize.toString())
-  if (search) searchParams.append('search', search)
+  searchParams.append('page', page.page.toString());
+  searchParams.append('pageSize', page.pageSize.toString());
+  if (search) searchParams.append('search', search);
   return GET<{
     templateRepositoryList: {
       uid: string;
@@ -37,30 +46,29 @@ export const listTemplateRepository = (page: {
       templateRepositoryTags: {
         tag: Tag;
       }[];
-    }[],
+    }[];
     page: {
-      page: number,
-      pageSize: number,
-      totalItems: number,
-      totalPage: number,
-    }
-  }>(`/api/templateRepository/list?${searchParams.toString()}`)
-
-}
+      page: number;
+      pageSize: number;
+      totalItems: number;
+      totalPage: number;
+    };
+  }>(`/api/templateRepository/list?${searchParams.toString()}`);
+};
 export const listPrivateTemplateRepository = ({
   search,
   page,
-  pageSize,
+  pageSize
 }: {
-  search?: string,
-  page?: number,
-  pageSize?: number,
+  search?: string;
+  page?: number;
+  pageSize?: number;
 } = {}) => {
-  const searchParams = new URLSearchParams()
+  const searchParams = new URLSearchParams();
 
-  if (search) searchParams.append('search', search)
-  if (page) searchParams.append('page', page.toString())
-  if (pageSize) searchParams.append('pageSize', pageSize.toString())
+  if (search) searchParams.append('search', search);
+  if (page) searchParams.append('page', page.toString());
+  if (pageSize) searchParams.append('pageSize', pageSize.toString());
   return GET<{
     templateRepositoryList: {
       uid: string;
@@ -75,58 +83,67 @@ export const listPrivateTemplateRepository = ({
       templateRepositoryTags: {
         tag: Tag;
       }[];
-    }[],
+    }[];
     page: {
-      page: number,
-      pageSize: number,
-      totalItems: number,
-      totalPage: number,
-    }
-  }>(`/api/templateRepository/listPrivate?${searchParams.toString()}`)
-}
+      page: number;
+      pageSize: number;
+      totalItems: number;
+      totalPage: number;
+    };
+  }>(`/api/templateRepository/listPrivate?${searchParams.toString()}`);
+};
 
-export const getTemplateRepository = (uid: string) => GET<{
-  templateRepository: {
-    templates: {
+export const getTemplateRepository = (uid: string) =>
+  GET<{
+    templateRepository: {
+      templates: {
+        name: string;
+        uid: string;
+      }[];
+      uid: string;
+      isPublic: true;
+      name: string;
+      description: string | null;
+      iconId: string | null;
+      templateRepositoryTags: {
+        tag: Tag;
+      }[];
+    };
+  }>(`/api/templateRepository/get?uid=${uid}`);
+export const getTemplateConfig = (uid: string) =>
+  GET<{
+    template: {
       name: string;
       uid: string;
+      config: string;
+    };
+  }>(`/api/templateRepository/template/getConfig?uid=${uid}`);
+export const listTemplate = (templateRepositoryUid: string) =>
+  GET<{
+    templateList: {
+      uid: string;
+      name: string;
+      config: string;
+      image: string;
+      createAt: Date;
+      updateAt: Date;
     }[];
-    uid: string;
-    isPublic: true;
-    name: string;
-    description: string | null;
-    iconId: string | null;
-    templateRepositoryTags: {
-      tag: Tag;
-    }[];
-  }
-}>(`/api/templateRepository/get?uid=${uid}`)
-export const getTemplateConfig = (uid: string) => GET<{
-  template: {
-    name: string;
-    uid: string;
-    config: string;
-  }
-}>(`/api/templateRepository/template/getConfig?uid=${uid}`)
-export const listTemplate = (templateRepositoryUid: string) => GET<{
-  templateList: {
-    uid: string;
-    name: string;
-    config: string;
-    image: string;
-    createAt: Date;
-    updateAt: Date;
-  }[]
-}>(`/api/templateRepository/template/list?templateRepositoryUid=${templateRepositoryUid}`)
-export const listTag = () => GET<{
-  tagList: Tag[]
-}>(`/api/templateRepository/tag/list`)
+  }>(`/api/templateRepository/template/list?templateRepositoryUid=${templateRepositoryUid}`);
+export const listTag = () =>
+  GET<{
+    tagList: Tag[];
+  }>(`/api/templateRepository/tag/list`);
 
-export const createTemplateReposistory = (data: CreateTemplateRepositoryType) => POST(`/api/templateRepository/withTemplate/create`, data)
-export const initUser = () => POST<string>(`/api/auth/init`)
+export const createTemplateReposistory = (data: CreateTemplateRepositoryType) =>
+  POST(`/api/templateRepository/withTemplate/create`, data);
+export const initUser = () => POST<string>(`/api/auth/init`);
 
-export const deleteTemplateRepository = (templateRepositoryUid: string) => DELETE(`/api/templateRepository/delete?templateRepositoryUid=${templateRepositoryUid}`)
+export const deleteTemplateRepository = (templateRepositoryUid: string) =>
+  DELETE(`/api/templateRepository/delete?templateRepositoryUid=${templateRepositoryUid}`);
 
-export const updateTemplateReposistory = (data: UpdateTemplateRepositoryType) => POST(`/api/templateRepository/update`, data)
-export const updateTemplate = (data: UpdateTemplateType) => POST(`/api/templateRepository/withTemplate/update`, data)
-export const deleteTemplate = (templateUid: string) => DELETE(`/api/templateRepository/template/delete?uid=${templateUid}`)
\ No newline at end of file
+export const updateTemplateReposistory = (data: UpdateTemplateRepositoryType) =>
+  POST(`/api/templateRepository/update`, data);
+export const updateTemplate = (data: UpdateTemplateType) =>
+  POST(`/api/templateRepository/withTemplate/update`, data);
+export const deleteTemplate = (templateUid: string) =>
+  DELETE(`/api/templateRepository/template/delete?uid=${templateUid}`);
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/(home)/components/DevboxHeader.tsx b/frontend/providers/devbox/app/[lang]/(platform)/(home)/components/DevboxHeader.tsx
index 46ad42d60116..7c5fec29e08f 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/(home)/components/DevboxHeader.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/(home)/components/DevboxHeader.tsx
@@ -1,90 +1,94 @@
-import MyIcon from "@/components/Icon";
-import { TemplateState } from "@/constants/template";
-import { usePathname, useRouter } from "@/i18n";
-import { useTemplateStore } from "@/stores/template";
-import { Box, Button, Center, Flex, Text, useTheme } from "@chakra-ui/react";
-import { useTranslations } from "next-intl";
-import { useEffect } from "react";
+import MyIcon from '@/components/Icon';
+import { TemplateState } from '@/constants/template';
+import { usePathname, useRouter } from '@/i18n';
+import { useTemplateStore } from '@/stores/template';
+import { Box, Button, Center, Flex, Text, useTheme } from '@chakra-ui/react';
+import { useTranslations } from 'next-intl';
+import { useEffect } from 'react';
 
 export default function DevboxHeader({ listLength }: { listLength: number }) {
-  const { openTemplateModal, config, updateTemplateModalConfig } = useTemplateStore()
-  const theme = useTheme()
-  const router = useRouter()
-  const t = useTranslations()
-  const pathname = usePathname()
-  const lastRoute = '/?openTemplate=publicTemplate'
+  const { openTemplateModal, config, updateTemplateModalConfig } = useTemplateStore();
+  const theme = useTheme();
+  const router = useRouter();
+  const t = useTranslations();
+  const pathname = usePathname();
+  const lastRoute = '/?openTemplate=publicTemplate';
   useEffect(() => {
-    const refreshLastRoute = '/'
+    const refreshLastRoute = '/';
     if (config.lastRoute.includes('openTemplate')) {
       openTemplateModal({
         ...config,
-        lastRoute: refreshLastRoute 
-      })
+        lastRoute: refreshLastRoute
+      });
     } else {
       updateTemplateModalConfig({
         ...config,
-        lastRoute: refreshLastRoute 
-      })
+        lastRoute: refreshLastRoute
+      });
     }
-  }, [])
-  return <Flex h={'90px'} alignItems={'center'}>
-    <Center
-      mr={'16px'}
-      width={'46px'}
-      bg={'#FFF'}
-      height={'46px'}
-      border={theme.borders.base}
-      borderRadius={'md'}>
-      <MyIcon name="logo" w={'30px'} h={'30px'} />
-    </Center>
-    <Box fontSize={'xl'} color={'grayModern.900'} fontWeight={'bold'}>
-      {t('devbox_list')}
-    </Box>
-    <Box ml={'8px'} fontSize={'md'} fontWeight={'bold'} color={'grayModern.500'}>
-      ( {listLength} )
-    </Box>
-    <Flex
-      alignItems="center"
-      justifyContent="center"
-      height="18px"
-      borderRadius="6px"
-      gap="4px"
-      mr={'20px'}
-      ml={'auto'}
-      cursor="pointer"
-      onClick={() => {
-        // setLastRoute(pathname)
-        openTemplateModal({
-          'templateState': TemplateState.publicTemplate,
-          lastRoute,
-        })
-      }}
-    >
-      <MyIcon
-        name={'templateTitle'}
-        width="18px"
+  }, []);
+  return (
+    <Flex h={'90px'} alignItems={'center'}>
+      <Center
+        mr={'16px'}
+        width={'46px'}
+        bg={'#FFF'}
+        height={'46px'}
+        border={theme.borders.base}
+        borderRadius={'md'}
+      >
+        <MyIcon name="logo" w={'30px'} h={'30px'} />
+      </Center>
+      <Box fontSize={'xl'} color={'grayModern.900'} fontWeight={'bold'}>
+        {t('devbox_list')}
+      </Box>
+      <Box ml={'8px'} fontSize={'md'} fontWeight={'bold'} color={'grayModern.500'}>
+        ( {listLength} )
+      </Box>
+      <Flex
+        alignItems="center"
+        justifyContent="center"
         height="18px"
-        color='brightBlue.600'
-        fill={"currentColor"}
-      />
-      <Text
-        fontFamily="PingFang SC"
-        fontSize="12px"
-        fontWeight="500"
-        lineHeight="16px"
-        letterSpacing="0.5px"
-        color='brightBlue.600'
+        borderRadius="6px"
+        gap="4px"
+        mr={'20px'}
+        ml={'auto'}
+        cursor="pointer"
+        onClick={() => {
+          // setLastRoute(pathname)
+          openTemplateModal({
+            templateState: TemplateState.publicTemplate,
+            lastRoute
+          });
+        }}
+      >
+        <MyIcon
+          name={'templateTitle'}
+          width="18px"
+          height="18px"
+          color="brightBlue.600"
+          fill={'currentColor'}
+        />
+        <Text
+          fontFamily="PingFang SC"
+          fontSize="12px"
+          fontWeight="500"
+          lineHeight="16px"
+          letterSpacing="0.5px"
+          color="brightBlue.600"
+        >
+          {t('scan_templates')}
+        </Text>
+      </Flex>
+      <Button
+        minW={'156px'}
+        h={'40px'}
+        variant={'solid'}
+        leftIcon={<MyIcon name={'plus'} w={'20px'} fill={'#ffffff'} />}
+        onClick={() => router.push('/devbox/create')}
       >
-        {t("scan_templates")}
-      </Text>
+        {t('create_devbox')}
+      </Button>
     </Flex>
-    <Button
-      minW={'156px'}
-      h={'40px'}
-      variant={'solid'}
-      leftIcon={<MyIcon name={'plus'} w={'20px'} fill={'#ffffff'} />}
-      onClick={() => router.push('/devbox/create')}>
-      {t('create_devbox')}
-    </Button>
-  </Flex>;
-}
\ No newline at end of file
+  );
+}
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/(home)/components/DevboxList.tsx b/frontend/providers/devbox/app/[lang]/(platform)/(home)/components/DevboxList.tsx
index 2a588dd53587..cc97d2010bed 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/(home)/components/DevboxList.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/(home)/components/DevboxList.tsx
@@ -1,114 +1,114 @@
-import { Box, Button, Flex, Image, MenuButton, Text } from '@chakra-ui/react'
-import { MyTable, SealosMenu, useMessage } from '@sealos/ui'
-import { useTranslations } from 'next-intl'
-import dynamic from 'next/dynamic'
-import { useCallback, useState } from 'react'
-import { sealosApp } from 'sealos-desktop-sdk/app'
+import { Box, Button, Flex, Image, MenuButton, Text } from '@chakra-ui/react';
+import { SealosMenu, useMessage } from '@sealos/ui';
+import { useTranslations } from 'next-intl';
+import dynamic from 'next/dynamic';
+import { useCallback, useState } from 'react';
+import { sealosApp } from 'sealos-desktop-sdk/app';
 
-import { pauseDevbox, restartDevbox, startDevbox } from '@/api/devbox'
-import { useRouter } from '@/i18n'
-import { useGlobalStore } from '@/stores/global'
-import { DevboxListItemTypeV2 } from '@/types/devbox'
+import { pauseDevbox, restartDevbox, startDevbox } from '@/api/devbox';
+import { useRouter } from '@/i18n';
+import { useGlobalStore } from '@/stores/global';
+import { DevboxListItemTypeV2 } from '@/types/devbox';
 
-import DevboxStatusTag from '@/components/DevboxStatusTag'
-import MyIcon from '@/components/Icon'
-import IDEButton from '@/components/IDEButton'
-import ReleaseModal from '@/components/modals/releaseModal'
-import PodLineChart from '@/components/PodLineChart'
+import MyIcon from '@/components/Icon';
+import IDEButton from '@/components/IDEButton';
+import PodLineChart from '@/components/PodLineChart';
+import { AdvancedTable } from '@/components/AdvancedTable';
+import DevboxStatusTag from '@/components/DevboxStatusTag';
+import ReleaseModal from '@/components/modals/ReleaseModal';
 
-const DelModal = dynamic(() => import('@/components/modals/DelModal'))
+const DelModal = dynamic(() => import('@/components/modals/DelModal'));
 
 const DevboxList = ({
   devboxList = [],
   refetchDevboxList
 }: {
-  devboxList: DevboxListItemTypeV2[]
-  refetchDevboxList: () => void
+  devboxList: DevboxListItemTypeV2[];
+  refetchDevboxList: () => void;
 }) => {
-
-  const router = useRouter()
-  const t = useTranslations()
-  const { message: toast } = useMessage()
+  const router = useRouter();
+  const t = useTranslations();
+  const { message: toast } = useMessage();
 
   // TODO: Unified Loading Behavior
-  const { setLoading } = useGlobalStore()
+  const { setLoading } = useGlobalStore();
 
-  const [onOpenRelease, setOnOpenRelease] = useState(false)
-  const [delDevbox, setDelDevbox] = useState<DevboxListItemTypeV2 | null>(null)
+  const [onOpenRelease, setOnOpenRelease] = useState(false);
+  const [delDevbox, setDelDevbox] = useState<DevboxListItemTypeV2 | null>(null);
   const [currentDevboxListItem, setCurrentDevboxListItem] = useState<DevboxListItemTypeV2 | null>(
     null
-  )
+  );
 
   const handleOpenRelease = (devbox: DevboxListItemTypeV2) => {
-    setCurrentDevboxListItem(devbox)
-    setOnOpenRelease(true)
-  }
+    setCurrentDevboxListItem(devbox);
+    setOnOpenRelease(true);
+  };
   const handlePauseDevbox = useCallback(
     async (devbox: DevboxListItemTypeV2) => {
       try {
-        setLoading(true)
-        await pauseDevbox({ devboxName: devbox.name })
+        setLoading(true);
+        await pauseDevbox({ devboxName: devbox.name });
         toast({
           title: t('pause_success'),
           status: 'success'
-        })
+        });
       } catch (error: any) {
         toast({
           title: typeof error === 'string' ? error : error.message || t('pause_error'),
           status: 'error'
-        })
-        console.error(error)
+        });
+        console.error(error);
       }
-      refetchDevboxList()
-      setLoading(false)
+      refetchDevboxList();
+      setLoading(false);
     },
     [refetchDevboxList, setLoading, t, toast]
-  )
+  );
   const handleRestartDevbox = useCallback(
     async (devbox: DevboxListItemTypeV2) => {
       try {
-        setLoading(true)
-        await restartDevbox({ devboxName: devbox.name })
+        setLoading(true);
+        await restartDevbox({ devboxName: devbox.name });
         toast({
           title: t('restart_success'),
           status: 'success'
-        })
+        });
       } catch (error: any) {
         toast({
           title: typeof error === 'string' ? error : error.message || t('restart_error'),
           status: 'error'
-        })
-        console.error(error, '==')
+        });
+        console.error(error, '==');
       }
-      refetchDevboxList()
-      setLoading(false)
+      refetchDevboxList();
+      setLoading(false);
     },
     [refetchDevboxList, setLoading, t, toast]
-  )
+  );
   const handleStartDevbox = useCallback(
     async (devbox: DevboxListItemTypeV2) => {
       try {
-        setLoading(true)
-        await startDevbox({ devboxName: devbox.name })
+        setLoading(true);
+        await startDevbox({ devboxName: devbox.name });
         toast({
           title: t('start_success'),
           status: 'success'
-        })
+        });
       } catch (error: any) {
         toast({
           title: typeof error === 'string' ? error : error.message || t('start_error'),
           status: 'error'
-        })
-        console.error(error, '==')
+        });
+        console.error(error, '==');
       }
-      refetchDevboxList()
-      setLoading(false)
+      refetchDevboxList();
+      setLoading(false);
     },
     [refetchDevboxList, setLoading, t, toast]
-  )
+  );
   const handleGoToTerminal = useCallback(
     async (devbox: DevboxListItemTypeV2) => {
-      const defaultCommand = `kubectl exec -it $(kubectl get po -l app.kubernetes.io/name=${devbox.name} -oname) -- sh -c "clear; (bash || ash || sh)"`
+      const defaultCommand = `kubectl exec -it $(kubectl get po -l app.kubernetes.io/name=${devbox.name} -oname) -- sh -c "clear; (bash || ash || sh)"`;
       try {
         sealosApp.runEvents('openDesktopApp', {
           appKey: 'system-terminal',
@@ -116,170 +116,174 @@ const DevboxList = ({
             defaultCommand
           },
           messageData: { type: 'new terminal', command: defaultCommand }
-        })
+        });
       } catch (error: any) {
         toast({
           title: typeof error === 'string' ? error : error.message || t('jump_terminal_error'),
           status: 'error'
-        })
-        console.error(error)
+        });
+        console.error(error);
       }
     },
     [t, toast]
-  )
+  );
   const columns: {
-    title: string
-    dataIndex?: keyof DevboxListItemTypeV2
-    key: string
-    render?: (item: DevboxListItemTypeV2) => JSX.Element
+    title: string;
+    dataIndex?: keyof DevboxListItemTypeV2;
+    key: string;
+    render?: (item: DevboxListItemTypeV2) => JSX.Element;
   }[] = [
-      {
-        title: t('name'),
-        key: 'name',
-        render: (item) => {
-          return (
-            <Flex alignItems={'center'} gap={'6px'} ml={4} mr={1}>
-              <Image
-                width={'20px'}
-                height={'20px'}
-                alt={item.id}
-                src={`/images/${item.template.templateRepository.iconId}.svg`}
-              />
-              <Box color={'grayModern.900'} fontSize={'md'}>
-                {item.name}
-              </Box>
-            </Flex>
-          )
-        }
-      },
-      {
-        title: t('status'),
-        key: 'status',
-        render: (item) => <DevboxStatusTag status={item.status} h={'27px'} />
-      },
-      {
-        title: t('create_time'),
-        dataIndex: 'createTime',
-        key: 'createTime',
-        render: (item) => {
-          return <Text color={'grayModern.600'}>{item.createTime}</Text>
-        }
-      },
-      {
-        title: t('cpu'),
-        key: 'cpu',
-        render: (item) => (
-          <Box h={'35px'} w={['120px', '130px', '140px']}>
-            <Box h={'35px'} w={['120px', '130px', '140px']} position={'relative'}>
-              <PodLineChart type="blue" data={item.usedCpu} />
-              <Text
-                color={'#0077A9'}
-                fontSize={'sm'}
-                fontWeight={'bold'}
-                position={'absolute'}
-                right={'4px'}
-                bottom={'0px'}
-                pointerEvents={'none'}
-                textShadow="1px 1px 0 #FFF, -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF">
-                {item?.usedCpu?.yData[item?.usedCpu?.yData?.length - 1]}%
-              </Text>
+    {
+      title: t('name'),
+      key: 'name',
+      render: (item) => {
+        return (
+          <Flex alignItems={'center'} gap={'6px'} ml={4} mr={1}>
+            <Image
+              width={'20px'}
+              height={'20px'}
+              alt={item.id}
+              src={`/images/${item.template.templateRepository.iconId}.svg`}
+            />
+            <Box color={'grayModern.900'} fontSize={'md'}>
+              {item.name}
             </Box>
+          </Flex>
+        );
+      }
+    },
+    {
+      title: t('status'),
+      key: 'status',
+      render: (item) => <DevboxStatusTag status={item.status} h={'27px'} />
+    },
+    {
+      title: t('create_time'),
+      dataIndex: 'createTime',
+      key: 'createTime',
+      render: (item) => {
+        return <Text color={'grayModern.600'}>{item.createTime}</Text>;
+      }
+    },
+    {
+      title: t('cpu'),
+      key: 'cpu',
+      render: (item) => (
+        <Box h={'35px'} w={['120px', '130px', '140px']}>
+          <Box h={'35px'} w={['120px', '130px', '140px']} position={'relative'}>
+            <PodLineChart type="blue" data={item.usedCpu} />
+            <Text
+              color={'#0077A9'}
+              fontSize={'sm'}
+              fontWeight={'bold'}
+              position={'absolute'}
+              right={'4px'}
+              bottom={'0px'}
+              pointerEvents={'none'}
+              textShadow="1px 1px 0 #FFF, -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF"
+            >
+              {item?.usedCpu?.yData[item?.usedCpu?.yData?.length - 1]}%
+            </Text>
           </Box>
-        )
-      },
-      {
-        title: t('memory'),
-        key: 'storage',
-        render: (item) => (
-          <Box h={'35px'} w={['120px', '130px', '140px']}>
-            <Box h={'35px'} w={['120px', '130px', '140px']} position={'relative'}>
-              <PodLineChart type="purple" data={item.usedMemory} />
-              <Text
-                color={'#6F5DD7'}
-                fontSize={'sm'}
-                fontWeight={'bold'}
-                position={'absolute'}
-                right={'4px'}
-                bottom={'0px'}
-                pointerEvents={'none'}
-                textShadow="1px 1px 0 #FFF, -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF">
-                {item?.usedMemory?.yData[item?.usedMemory?.yData?.length - 1]}%
-              </Text>
-            </Box>
+        </Box>
+      )
+    },
+    {
+      title: t('memory'),
+      key: 'storage',
+      render: (item) => (
+        <Box h={'35px'} w={['120px', '130px', '140px']}>
+          <Box h={'35px'} w={['120px', '130px', '140px']} position={'relative'}>
+            <PodLineChart type="purple" data={item.usedMemory} />
+            <Text
+              color={'#6F5DD7'}
+              fontSize={'sm'}
+              fontWeight={'bold'}
+              position={'absolute'}
+              right={'4px'}
+              bottom={'0px'}
+              pointerEvents={'none'}
+              textShadow="1px 1px 0 #FFF, -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF"
+            >
+              {item?.usedMemory?.yData[item?.usedMemory?.yData?.length - 1]}%
+            </Text>
           </Box>
-        )
-      },
-      {
-        title: t('control'),
-        key: 'control',
-        render: (item) => (
-          <Flex>
-            <IDEButton
-              devboxName={item.name}
-              sshPort={item.sshPort}
-              status={item.status}
-              mr={'8px'}
-            />
-            <Button
-              mr={'8px'}
-              size={'sm'}
-              boxSize={'32px'}
-              fontSize={'base'}
-              bg={'grayModern.150'}
-              color={'grayModern.900'}
-              _hover={{
-                color: 'brightBlue.600'
-              }}
-              minW={'unset'}
-              // leftIcon={<MyIcon name={'detail'} w={'16px'} />}
-              onClick={() => {
-                router.push(`/devbox/detail/${item.name}`)
-              }}>
-              {/* {t('detail')} */}
-              <MyIcon name={'detail'} w={'16px'} />
-            </Button>
-            <SealosMenu
-              width={100}
-              Button={
-                <MenuButton as={Button} variant={'square'} boxSize={'32px'}>
-                  <MyIcon name={'more'} />
-                </MenuButton>
-              }
-              menuList={[
-                {
-                  child: (
-                    <>
-                      <MyIcon name={'version'} w={'16px'} />
-                      <Box ml={2}>{t('publish')}</Box>
-                    </>
-                  ),
-                  onClick: () => handleOpenRelease(item)
-                },
-                {
-                  child: (
-                    <>
-                      <MyIcon name={'terminal'} w={'16px'} />
-                      <Box ml={2}>{t('terminal')}</Box>
-                    </>
-                  ),
-                  onClick: () => handleGoToTerminal(item),
-                  menuItemStyle: {
-                    borderBottomLeftRadius: '0px',
-                    borderBottomRightRadius: '0px',
-                    borderBottom: '1px solid #F0F1F6'
-                  }
-                },
-                {
-                  child: (
-                    <>
-                      <MyIcon name={'change'} w={'16px'} />
-                      <Box ml={2}>{t('update')}</Box>
-                    </>
-                  ),
-                  onClick: () => router.push(`/devbox/create?name=${item.name}`)
-                },
-                ...(item.status.value === 'Stopped'
-                  ? [
+        </Box>
+      )
+    },
+    {
+      title: t('control'),
+      key: 'control',
+      render: (item) => (
+        <Flex>
+          <IDEButton
+            devboxName={item.name}
+            sshPort={item.sshPort}
+            status={item.status}
+            mr={'8px'}
+            runtimeType={item.template.templateRepository.iconId as string}
+          />
+          <Button
+            mr={'8px'}
+            size={'sm'}
+            boxSize={'32px'}
+            fontSize={'base'}
+            bg={'grayModern.150'}
+            color={'grayModern.900'}
+            _hover={{
+              color: 'brightBlue.600'
+            }}
+            minW={'unset'}
+            // leftIcon={<MyIcon name={'detail'} w={'16px'} />}
+            onClick={() => {
+              router.push(`/devbox/detail/${item.name}`);
+            }}
+          >
+            {/* {t('detail')} */}
+            <MyIcon name={'detail'} w={'16px'} />
+          </Button>
+          <SealosMenu
+            width={100}
+            Button={
+              <MenuButton as={Button} variant={'square'} boxSize={'32px'}>
+                <MyIcon name={'more'} />
+              </MenuButton>
+            }
+            menuList={[
+              {
+                child: (
+                  <>
+                    <MyIcon name={'version'} w={'16px'} />
+                    <Box ml={2}>{t('publish')}</Box>
+                  </>
+                ),
+                onClick: () => handleOpenRelease(item)
+              },
+              {
+                child: (
+                  <>
+                    <MyIcon name={'terminal'} w={'16px'} />
+                    <Box ml={2}>{t('terminal')}</Box>
+                  </>
+                ),
+                onClick: () => handleGoToTerminal(item),
+                menuItemStyle: {
+                  borderBottomLeftRadius: '0px',
+                  borderBottomRightRadius: '0px',
+                  borderBottom: '1px solid #F0F1F6'
+                }
+              },
+              {
+                child: (
+                  <>
+                    <MyIcon name={'change'} w={'16px'} />
+                    <Box ml={2}>{t('update')}</Box>
+                  </>
+                ),
+                onClick: () => router.push(`/devbox/create?name=${item.name}`)
+              },
+              ...(item.status.value === 'Stopped'
+                ? [
                     {
                       child: (
                         <>
@@ -290,10 +294,10 @@ const DevboxList = ({
                       onClick: () => handleStartDevbox(item)
                     }
                   ]
-                  : []),
-                // maybe Error or other status,all can restart
-                ...(item.status.value !== 'Stopped'
-                  ? [
+                : []),
+              // maybe Error or other status,all can restart
+              ...(item.status.value !== 'Stopped'
+                ? [
                     {
                       child: (
                         <>
@@ -304,9 +308,9 @@ const DevboxList = ({
                       onClick: () => handleRestartDevbox(item)
                     }
                   ]
-                  : []),
-                ...(item.status.value === 'Running'
-                  ? [
+                : []),
+              ...(item.status.value === 'Running'
+                ? [
                     {
                       child: (
                         <>
@@ -317,31 +321,31 @@ const DevboxList = ({
                       onClick: () => handlePauseDevbox(item)
                     }
                   ]
-                  : []),
-                {
-                  child: (
-                    <>
-                      <MyIcon name={'delete'} w={'16px'} />
-                      <Box ml={2}>{t('delete')}</Box>
-                    </>
-                  ),
-                  menuItemStyle: {
-                    _hover: {
-                      color: 'red.600',
-                      bg: 'rgba(17, 24, 36, 0.05)'
-                    }
-                  },
-                  onClick: () => setDelDevbox(item)
-                }
-              ]}
-            />
-          </Flex>
-        )
-      }
-    ]
+                : []),
+              {
+                child: (
+                  <>
+                    <MyIcon name={'delete'} w={'16px'} />
+                    <Box ml={2}>{t('delete')}</Box>
+                  </>
+                ),
+                menuItemStyle: {
+                  _hover: {
+                    color: 'red.600',
+                    bg: 'rgba(17, 24, 36, 0.05)'
+                  }
+                },
+                onClick: () => setDelDevbox(item)
+              }
+            ]}
+          />
+        </Flex>
+      )
+    }
+  ];
   return (
     <>
-      <MyTable columns={columns} data={devboxList} itemClass="devboxListItem" />
+      <AdvancedTable columns={columns} data={devboxList} itemClass="devboxListItem" />
       {!!delDevbox && (
         <DelModal
           devbox={delDevbox}
@@ -353,17 +357,17 @@ const DevboxList = ({
       {!!onOpenRelease && !!currentDevboxListItem && (
         <ReleaseModal
           onSuccess={() => {
-            router.push(`/devbox/detail/${currentDevboxListItem?.name}`)
+            router.push(`/devbox/detail/${currentDevboxListItem?.name}`);
           }}
           onClose={() => {
-            setOnOpenRelease(false)
-            setCurrentDevboxListItem(null)
+            setOnOpenRelease(false);
+            setCurrentDevboxListItem(null);
           }}
           devbox={currentDevboxListItem}
         />
       )}
     </>
-  )
-}
+  );
+};
 
-export default DevboxList
+export default DevboxList;
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/(home)/components/DevboxListContainer.tsx b/frontend/providers/devbox/app/[lang]/(platform)/(home)/components/DevboxListContainer.tsx
index de65b83c3a52..70fe24fe209a 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/(home)/components/DevboxListContainer.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/(home)/components/DevboxListContainer.tsx
@@ -1,113 +1,148 @@
 // components/DevboxListContainer.tsx
-'use client'
-import { useDevboxStore } from '@/stores/devbox'
-import { useTemplateStore } from '@/stores/template'
-import { DevboxListItemTypeV2 } from '@/types/devbox'
-import { isElementInViewport } from '@/utils/tools'
-import { Flex, FlexProps } from '@chakra-ui/react'
-import { useQuery, useQueryClient } from '@tanstack/react-query'
-import { useRouter } from 'next/navigation'
-import { useCallback, useEffect, useRef } from 'react'
-import DevboxHeader from './DevboxHeader'
-import DevboxList from './DevboxList'
-import Empty from './Empty'
+'use client';
+import { useDevboxStore } from '@/stores/devbox';
+import { useTemplateStore } from '@/stores/template';
+import { DevboxListItemTypeV2 } from '@/types/devbox';
+import { isElementInViewport } from '@/utils/tools';
+import { Flex, FlexProps } from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
+import { useRouter } from '@/i18n';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import DevboxHeader from './DevboxHeader';
+import DevboxList from './DevboxList';
+import Empty from './Empty';
+import useListDriver from '@/hooks/useListDriver';
 
 function useDevboxList() {
-  const queryClient = useQueryClient()
-  const router = useRouter()
-  const { devboxList, setDevboxList, loadAvgMonitorData, intervalLoadPods } = useDevboxStore()
-  const { isOpen: templateIsOpen } = useTemplateStore()
-  const list = useRef<DevboxListItemTypeV2[]>(devboxList)
-
-  const { isLoading, refetch: refetchDevboxList } = useQuery(
-    ['devboxListQuery'],
-    setDevboxList,
-    {
-      onSettled(res) {
-        if (!res) return
-        // refreshList(res)
-        list.current = res
-      },
-      refetchInterval: !templateIsOpen ? 3000 : false,
-      staleTime: 3000,
-      enabled:!templateIsOpen,
-    }
-  )
+  const router = useRouter();
+  const [refresh, setFresh] = useState(false);
+  const { isOpen: templateIsOpen } = useTemplateStore();
+  const { devboxList, setDevboxList, loadAvgMonitorData, intervalLoadPods } = useDevboxStore();
+  const list = useRef<DevboxListItemTypeV2[]>(devboxList);
+
+  const { isLoading, refetch: refetchDevboxList } = useQuery(['devboxListQuery'], setDevboxList, {
+    onSettled(res) {
+      if (!res) return;
+      refreshList(res);
+    },
+    enabled: !templateIsOpen
+  });
+
+  const refreshList = useCallback(
+    (res = devboxList) => {
+      list.current = res;
+      setFresh((state) => !state);
+      return null;
+    },
+    [devboxList]
+  );
+
   const getViewportDevboxes = (minCount = 3) => {
-    const doms = document.querySelectorAll('.devboxListItem')
+    const doms = document.querySelectorAll('.devboxListItem');
     const viewportDomIds = Array.from(doms)
       .filter(isElementInViewport)
-      .map(item => item.getAttribute('data-id'))
+      .map((item) => item.getAttribute('data-id'));
 
     return viewportDomIds.length < minCount
       ? devboxList
-      : devboxList.filter((devbox) => viewportDomIds.includes(devbox.id))
-  }
+      : devboxList.filter((devbox) => viewportDomIds.includes(devbox.id));
+  };
+
   useQuery(
     ['intervalLoadPods', devboxList.length],
     () => {
-
-      const viewportDevboxList = getViewportDevboxes()
+      const viewportDevboxList = getViewportDevboxes();
       return viewportDevboxList
         .filter((devbox) => devbox.status.value !== 'Stopped')
-        .map((devbox) => intervalLoadPods(devbox.name, false))
+        .map((devbox) => intervalLoadPods(devbox.name, false));
     },
     {
       refetchOnMount: true,
       refetchInterval: !templateIsOpen ? 3000 : false,
-      staleTime: 3000,
-      enabled: !isLoading &&!templateIsOpen,
+      enabled: !isLoading && !templateIsOpen,
+      onSettled() {
+        refreshList();
+      }
     }
-  )
+  );
 
   useQuery(
+    ['refresh'],
+    () => {
+      refreshList();
+      return null;
+    },
+    {
+      refetchInterval: 3000
+    }
+  );
+
+  const { refetch: refetchAvgMonitorData } = useQuery(
     ['loadAvgMonitorData', devboxList.length],
     () => {
-      const viewportDevboxList = getViewportDevboxes()
+      const viewportDevboxList = getViewportDevboxes();
       return viewportDevboxList
         .filter((devbox) => devbox.status.value === 'Running')
-        .map((devbox) => loadAvgMonitorData(devbox.name))
+        .map((devbox) => loadAvgMonitorData(devbox.name));
     },
     {
+      refetchOnMount: true,
       refetchInterval: !templateIsOpen ? 2 * 60 * 1000 : false,
-      staleTime: 2 * 60 * 1000,
-      enabled:!isLoading &&!templateIsOpen,
+      enabled: !isLoading && !templateIsOpen,
+      onSettled() {
+        refreshList();
+      }
     }
-  )
+  );
+
   // 路由预加载
   useEffect(() => {
-    router.prefetch('/devbox/detail')
-    router.prefetch('/devbox/create')
-  }, [router])
+    router.prefetch('/devbox/detail');
+    router.prefetch('/devbox/create');
+  }, [router]);
 
   return {
     list: list.current,
     isLoading,
-    refetchList: useCallback(() => {
-      queryClient.invalidateQueries(['devboxListQuery'])
-    }, [queryClient])
-  }
+    refetchList: () => {
+      refetchDevboxList();
+
+      // retry 3 times to fetch monitor data,because refetchDevboxList and then refetchAvgMonitorData immediately will cause monitor data be covered (devboxList refetch 3s once).
+      // And monitor 2min to refetch normally,but there we retry 3 times once.
+      const retryFetch = async (retryCount = 3, delay = 10 * 1000) => {
+        console.log('retry');
+        await refetchAvgMonitorData();
+
+        if (retryCount > 0) {
+          await new Promise((resolve) => setTimeout(resolve, delay));
+          await retryFetch(retryCount - 1, delay);
+        }
+      };
+
+      retryFetch();
+    }
+  };
 }
 
 export default function DevboxListContainer({ ...props }: FlexProps) {
-  const { list, isLoading, refetchList } = useDevboxList()
+  const { list, isLoading, refetchList } = useDevboxList();
+  const { handleUserGuide } = useListDriver();
+
+  useEffect(() => {
+    if (list.length > 0) {
+      handleUserGuide();
+    }
+  }, [list.length]);
+
   return (
-    <Flex flexDir={'column'}
-      backgroundColor={'grayModern.100'}
-      px={'32px'}
-      h="100vh"
-      {...props}
-    >
+    <Flex flexDir={'column'} backgroundColor={'grayModern.100'} px={'32px'} h="100vh" {...props}>
       <DevboxHeader listLength={list.length} />
       {list.length === 0 && !isLoading ? (
         <Empty />
       ) : (
-        <DevboxList
-          devboxList={list}
-          refetchDevboxList={refetchList}
-        />
+        <DevboxList devboxList={list} refetchDevboxList={refetchList} />
       )}
       {/* <Loading loading={isLoading} /> */}
     </Flex>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/(home)/components/Empty.tsx b/frontend/providers/devbox/app/[lang]/(platform)/(home)/components/Empty.tsx
index b322cf15d3b6..63bac28b38dc 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/(home)/components/Empty.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/(home)/components/Empty.tsx
@@ -1,13 +1,12 @@
-import { Box, Flex } from '@chakra-ui/react'
-import { useTranslations } from 'next-intl'
-
-import MyIcon from '@/components/Icon'
-import { useRouter } from '@/i18n'
+import { Box, Flex } from '@chakra-ui/react';
+import { useTranslations } from 'next-intl';
 
+import MyIcon from '@/components/Icon';
+import { useRouter } from '@/i18n';
 
 const Empty = () => {
-  const router = useRouter()
-  const t = useTranslations()
+  const router = useRouter();
+  const t = useTranslations();
   return (
     <Flex
       // className={styles.empty}
@@ -16,11 +15,12 @@ const Empty = () => {
       flexDirection="column"
       alignItems="center"
       justifyContent="center"
-      bg={'#F3F4F5'}>
+      bg={'#F3F4F5'}
+    >
       <MyIcon name={'noEvents'} color={'transparent'} width={'80px'} height={'80px'} />
       <Box py={8}>{t('devbox_empty')}</Box>
     </Flex>
-  )
-}
+  );
+};
 
-export default Empty
+export default Empty;
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/(home)/page.tsx b/frontend/providers/devbox/app/[lang]/(platform)/(home)/page.tsx
index 12608f29ce22..6cbab8cb7d06 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/(home)/page.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/(home)/page.tsx
@@ -1,5 +1,5 @@
-import DevboxListContainer from "./components/DevboxListContainer"
+import DevboxListContainer from './components/DevboxListContainer';
 
-export default function EmptyPage() {
-  return <DevboxListContainer />
+export default async function EmptyPage() {
+  return <DevboxListContainer />;
 }
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/Header.tsx b/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/Header.tsx
index d58728a90e84..c47fb4a7270e 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/Header.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/Header.tsx
@@ -1,16 +1,16 @@
-import { Box, Button, Flex } from '@chakra-ui/react'
-import dayjs from 'dayjs'
-import JSZip from 'jszip'
-import { useTranslations } from 'next-intl'
-import { useCallback } from 'react'
+import { Box, Button, Flex } from '@chakra-ui/react';
+import dayjs from 'dayjs';
+import JSZip from 'jszip';
+import { useTranslations } from 'next-intl';
+import { useCallback } from 'react';
 
-import MyIcon from '@/components/Icon'
-import { useRouter } from '@/i18n'
-import { useEnvStore } from '@/stores/env'
-import { useGlobalStore } from '@/stores/global'
-import { useTemplateStore } from '@/stores/template'
-import type { YamlItemType } from '@/types/index'
-import { downLoadBlob } from '@/utils/tools'
+import MyIcon from '@/components/Icon';
+import { useRouter } from '@/i18n';
+import { useEnvStore } from '@/stores/env';
+import { useGlobalStore } from '@/stores/global';
+import { useTemplateStore } from '@/stores/template';
+import type { YamlItemType } from '@/types/index';
+import { downLoadBlob } from '@/utils/tools';
 
 const Header = ({
   title,
@@ -18,33 +18,37 @@ const Header = ({
   applyCb,
   applyBtnText
 }: {
-  yamlList: YamlItemType[]
-  applyCb: () => void
-  title: string
-  applyBtnText: string
+  yamlList: YamlItemType[];
+  applyCb: () => void;
+  title: string;
+  applyBtnText: string;
 }) => {
-  const router = useRouter()
-  const { lastRoute } = useGlobalStore()
-  const t = useTranslations()
-  const { config } = useTemplateStore()
-  const { env } = useEnvStore()
+  const router = useRouter();
+  const { lastRoute } = useGlobalStore();
+  const t = useTranslations();
+  const { config } = useTemplateStore();
+  const { env } = useEnvStore();
   const handleExportYaml = useCallback(async () => {
-    const zip = new JSZip()
+    const zip = new JSZip();
     yamlList.forEach((item) => {
-      zip.file(item.filename, item.value)
-    })
-    const res = await zip.generateAsync({ type: 'blob' })
-    downLoadBlob(res, 'application/zip', `yaml${dayjs().format('YYYYMMDDHHmmss')}.zip`)
-  }, [yamlList])
+      zip.file(item.filename, item.value);
+    });
+    const res = await zip.generateAsync({ type: 'blob' });
+    downLoadBlob(res, 'application/zip', `yaml${dayjs().format('YYYYMMDDHHmmss')}.zip`);
+  }, [yamlList]);
   return (
     <Flex w={'100%'} px={10} h={'86px'} alignItems={'center'}>
-      <Flex alignItems={'center'} cursor={'pointer'} onClick={() => {
-        if (config.lastRoute) {
-          router.replace(lastRoute)
-        } else {
-          router.replace(lastRoute)
+      <Flex
+        alignItems={'center'}
+        cursor={'pointer'}
+        onClick={() => {
+          if (config.lastRoute) {
+            router.replace(lastRoute);
+          } else {
+            router.replace(lastRoute);
+          }
         }}
-      }>
+      >
         <MyIcon name="arrowLeft" width={'24px'} height={'24px'} />
         <Box fontWeight={'bold'} color={'grayModern.900'} fontSize={'2xl'}>
           {t(title)}
@@ -58,7 +62,7 @@ const Header = ({
         {t(applyBtnText)}
       </Button>
     </Flex>
-  )
-}
+  );
+};
 
-export default Header
+export default Header;
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/Yaml.tsx b/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/Yaml.tsx
index 059147e1500d..94f1de458d6e 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/Yaml.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/Yaml.tsx
@@ -1,27 +1,28 @@
-import { useState } from 'react'
-import { Tabs } from '@sealos/ui'
-import { useTranslations } from 'next-intl'
-import { useSearchParams } from 'next/navigation'
-import { Box, Center, Flex, Grid, useTheme } from '@chakra-ui/react'
+import { useState } from 'react';
+import { Tabs } from '@sealos/ui';
+import { useTranslations } from 'next-intl';
+import { useSearchParams } from 'next/navigation';
+import { Box, Center, Flex, Grid, useTheme } from '@chakra-ui/react';
 
-import { useRouter } from '@/i18n'
-import MyIcon from '@/components/Icon'
-import { obj2Query } from '@/utils/tools'
-import type { YamlItemType } from '@/types'
-import { useCopyData } from '@/utils/tools'
-import YamlCode from '@/components/YamlCode/index'
+import Code from '@/components/Code';
+import MyIcon from '@/components/Icon';
 
-import styles from './index.module.scss'
+import { useRouter } from '@/i18n';
+import { obj2Query } from '@/utils/tools';
+import type { YamlItemType } from '@/types';
+import { useCopyData } from '@/utils/tools';
+
+import styles from './index.module.scss';
 
 const Yaml = ({ yamlList = [], pxVal }: { yamlList: YamlItemType[]; pxVal: number }) => {
-  const theme = useTheme()
-  const router = useRouter()
-  const t = useTranslations()
-  const { copyData } = useCopyData()
-  const searchParams = useSearchParams()
-  const [selectedIndex, setSelectedIndex] = useState(0)
+  const theme = useTheme();
+  const router = useRouter();
+  const t = useTranslations();
+  const { copyData } = useCopyData();
+  const searchParams = useSearchParams();
+  const [selectedIndex, setSelectedIndex] = useState(0);
 
-  const devboxName = searchParams.get('name') as string
+  const devboxName = searchParams.get('name') as string;
 
   return (
     <Grid
@@ -29,7 +30,8 @@ const Yaml = ({ yamlList = [], pxVal }: { yamlList: YamlItemType[]; pxVal: numbe
       templateColumns={'220px 1fr'}
       gridGap={5}
       alignItems={'start'}
-      px={`${pxVal}px`}>
+      px={`${pxVal}px`}
+    >
       <Box>
         <Tabs
           list={[
@@ -53,7 +55,8 @@ const Yaml = ({ yamlList = [], pxVal }: { yamlList: YamlItemType[]; pxVal: numbe
           overflow={'hidden'}
           bg={'white'}
           p="4px"
-          border={theme.borders.base}>
+          border={theme.borders.base}
+        >
           {yamlList.map((file, index) => (
             <Flex
               key={file.filename}
@@ -76,14 +79,16 @@ const Yaml = ({ yamlList = [], pxVal }: { yamlList: YamlItemType[]; pxVal: numbe
                     borderColor: 'myGray.200',
                     backgroundColor: 'transparent'
                   })}
-              onClick={() => setSelectedIndex(index)}>
+              onClick={() => setSelectedIndex(index)}
+            >
               <Box
                 w={'2px'}
                 h={'24px'}
                 justifySelf={'start'}
                 bg={'grayModern.900'}
                 borderRadius={'12px'}
-                opacity={selectedIndex === index ? 1 : 0}></Box>
+                opacity={selectedIndex === index ? 1 : 0}
+              ></Box>
               <Box ml="18px">{file.filename}</Box>
             </Flex>
           ))}
@@ -97,7 +102,8 @@ const Yaml = ({ yamlList = [], pxVal }: { yamlList: YamlItemType[]; pxVal: numbe
           overflow={'hidden'}
           border={theme.borders.base}
           borderRadius={'md'}
-          position={'relative'}>
+          position={'relative'}
+        >
           <Flex px={8} py={4} bg={'grayModern.50'}>
             <Box flex={1} fontSize={'xl'} color={'grayModern.900'} fontWeight={'bold'}>
               {yamlList[selectedIndex].filename}
@@ -106,17 +112,18 @@ const Yaml = ({ yamlList = [], pxVal }: { yamlList: YamlItemType[]; pxVal: numbe
               cursor={'pointer'}
               color={'grayModern.600'}
               _hover={{ color: '#219BF4' }}
-              onClick={() => copyData(yamlList[selectedIndex].value)}>
+              onClick={() => copyData(yamlList[selectedIndex].value)}
+            >
               <MyIcon name="copy" w={'16px'} />
             </Center>
           </Flex>
           <Box flex={1} h={0} overflow={'auto'} bg={'#ffffff'} p={4}>
-            <YamlCode className={styles.code} content={yamlList[selectedIndex].value} />
+            <Code className={styles.code} content={yamlList[selectedIndex].value} language="yaml" />
           </Box>
         </Flex>
       )}
     </Grid>
-  )
-}
+  );
+};
 
-export default Yaml
+export default Yaml;
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/BasicConfiguration/CpuSelector.tsx b/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/BasicConfiguration/CpuSelector.tsx
index fa527cb89c25..4617ba56f175 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/BasicConfiguration/CpuSelector.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/BasicConfiguration/CpuSelector.tsx
@@ -1,28 +1,30 @@
-import { CpuSlideMarkList } from "@/constants/devbox"
-import { DevboxEditTypeV2 } from "@/types/devbox"
-import { Box, Flex, FlexProps } from "@chakra-ui/react"
-import { MySlider } from "@sealos/ui"
-import { useTranslations } from "next-intl"
-import { useFormContext } from "react-hook-form"
-import Label from "../Label"
+import { CpuSlideMarkList } from '@/constants/devbox';
+import { DevboxEditTypeV2 } from '@/types/devbox';
+import { Box, Flex, FlexProps } from '@chakra-ui/react';
+import { MySlider } from '@sealos/ui';
+import { useTranslations } from 'next-intl';
+import { useFormContext } from 'react-hook-form';
+import Label from '../Label';
 
 export default function CpuSelector(props: FlexProps) {
-  const t = useTranslations()
-  const { watch, setValue } = useFormContext<DevboxEditTypeV2>()
-  return <Flex mb={10} pr={3} alignItems={'flex-start'} {...props}>
-    <Label w={100}>{t('cpu')}</Label>
-    <MySlider
-      markList={CpuSlideMarkList}
-      activeVal={watch('cpu')}
-      setVal={(e) => {
-        setValue('cpu', CpuSlideMarkList[e].value)
-      }}
-      max={CpuSlideMarkList.length - 1}
-      min={0}
-      step={1}
-    />
-    <Box ml={5} transform={'translateY(10px)'} color={'grayModern.600'}>
-      {t('core')}
-    </Box>
-  </Flex>
-}
\ No newline at end of file
+  const t = useTranslations();
+  const { watch, setValue } = useFormContext<DevboxEditTypeV2>();
+  return (
+    <Flex mb={10} pr={3} alignItems={'flex-start'} {...props}>
+      <Label w={100}>{t('cpu')}</Label>
+      <MySlider
+        markList={CpuSlideMarkList}
+        activeVal={watch('cpu')}
+        setVal={(e) => {
+          setValue('cpu', CpuSlideMarkList[e].value);
+        }}
+        max={CpuSlideMarkList.length - 1}
+        min={0}
+        step={1}
+      />
+      <Box ml={5} transform={'translateY(10px)'} color={'grayModern.600'}>
+        {t('core')}
+      </Box>
+    </Flex>
+  );
+}
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/BasicConfiguration/DevboxNameInput.tsx b/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/BasicConfiguration/DevboxNameInput.tsx
index a4b7084dc810..902313b6a2b4 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/BasicConfiguration/DevboxNameInput.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/BasicConfiguration/DevboxNameInput.tsx
@@ -1,56 +1,58 @@
-import { DevboxEditTypeV2 } from "@/types/devbox"
-import { nanoid } from "@/utils/tools"
-import { devboxNameSchema } from "@/utils/vaildate"
-import { Flex, FormControl, FormControlProps, Input } from "@chakra-ui/react"
-import { useTranslations } from "next-intl"
-import { useFieldArray, useFormContext } from "react-hook-form"
-import Label from "../Label"
+import { DevboxEditTypeV2 } from '@/types/devbox';
+import { nanoid } from '@/utils/tools';
+import { devboxNameSchema } from '@/utils/vaildate';
+import { Flex, FormControl, FormControlProps, Input } from '@chakra-ui/react';
+import { useTranslations } from 'next-intl';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+import Label from '../Label';
 
-export default function DevboxNameInput({isEdit, ...props}: {isEdit: boolean} & FormControlProps) {
-  const t = useTranslations()
+export default function DevboxNameInput({
+  isEdit,
+  ...props
+}: { isEdit: boolean } & FormControlProps) {
+  const t = useTranslations();
   const {
     register,
     setValue,
     formState: { errors },
     control
-  } = useFormContext<DevboxEditTypeV2>()
-  const {
-    fields: networks,
-    update: updateNetworks
-  } = useFieldArray({
+  } = useFormContext<DevboxEditTypeV2>();
+  const { fields: networks, update: updateNetworks } = useFieldArray({
     control,
     name: 'networks'
-  })
-  return <FormControl mb={7} isInvalid={!!errors.name} minW={'500px'} {...props}>
-    <Flex alignItems={'center'}>
-      <Label w={100}>{t('devbox_name')}</Label>
-      <Input
-        disabled={isEdit}
-        autoFocus={true}
-        w={'300px'}
-        placeholder={t('enter_devbox_name')}
-        {...register('name', {
-          required: t('devbox_name_required'),
-          maxLength: {
-            value: 63,
-            message: t('devbox_name_max_length')
-          },
-          validate: {
-            pattern: (value) =>
-            devboxNameSchema.safeParse(value).success || t('devbox_name_invalid')
-          }
-        })}
-        onBlur={(e) => {
-          const lowercaseValue = e.target.value.toLowerCase()
-          setValue('name', lowercaseValue)
-          networks.forEach((network, i) => {
-            updateNetworks(i, {
-              ...network,
-              networkName: `${lowercaseValue}-${nanoid()}`
-            })
-          })
-        }}
-      />
-    </Flex>
-  </FormControl>
-}
\ No newline at end of file
+  });
+  return (
+    <FormControl mb={7} isInvalid={!!errors.name} minW={'500px'} {...props}>
+      <Flex alignItems={'center'}>
+        <Label w={100}>{t('devbox_name')}</Label>
+        <Input
+          disabled={isEdit}
+          autoFocus={true}
+          w={'300px'}
+          placeholder={t('enter_devbox_name')}
+          {...register('name', {
+            required: t('devbox_name_required'),
+            maxLength: {
+              value: 63,
+              message: t('devbox_name_max_length')
+            },
+            validate: {
+              pattern: (value) =>
+                devboxNameSchema.safeParse(value).success || t('devbox_name_invalid')
+            }
+          })}
+          onBlur={(e) => {
+            const lowercaseValue = e.target.value.toLowerCase();
+            setValue('name', lowercaseValue);
+            networks.forEach((network, i) => {
+              updateNetworks(i, {
+                ...network,
+                networkName: `${lowercaseValue}-${nanoid()}`
+              });
+            });
+          }}
+        />
+      </Flex>
+    </FormControl>
+  );
+}
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/BasicConfiguration/MemorySelector.tsx b/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/BasicConfiguration/MemorySelector.tsx
index 3af3ced30372..7adb6893caf0 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/BasicConfiguration/MemorySelector.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/BasicConfiguration/MemorySelector.tsx
@@ -1,25 +1,27 @@
-import { MemorySlideMarkList } from "@/constants/devbox"
-import { DevboxEditTypeV2 } from "@/types/devbox"
-import { Flex, FlexProps } from "@chakra-ui/react"
-import { MySlider } from "@sealos/ui"
-import { useTranslations } from "next-intl"
-import { useFormContext } from "react-hook-form"
-import Label from "../Label"
+import { MemorySlideMarkList } from '@/constants/devbox';
+import { DevboxEditTypeV2 } from '@/types/devbox';
+import { Flex, FlexProps } from '@chakra-ui/react';
+import { MySlider } from '@sealos/ui';
+import { useTranslations } from 'next-intl';
+import { useFormContext } from 'react-hook-form';
+import Label from '../Label';
 
 export default function MemorySelector(props: FlexProps) {
-  const t = useTranslations()
-  const { watch, setValue } = useFormContext<DevboxEditTypeV2>()
-  return <Flex mb={'50px'} pr={3} alignItems={'center'} {...props}>
-    <Label w={100}>{t('memory')}</Label>
-    <MySlider
-      markList={MemorySlideMarkList}
-      activeVal={watch('memory')}
-      setVal={(e) => {
-        setValue('memory', MemorySlideMarkList[e].value)
-      }}
-      max={MemorySlideMarkList.length - 1}
-      min={0}
-      step={1}
-    />
-  </Flex>
-}
\ No newline at end of file
+  const t = useTranslations();
+  const { watch, setValue } = useFormContext<DevboxEditTypeV2>();
+  return (
+    <Flex mb={'50px'} pr={3} alignItems={'center'} {...props}>
+      <Label w={100}>{t('memory')}</Label>
+      <MySlider
+        markList={MemorySlideMarkList}
+        activeVal={watch('memory')}
+        setVal={(e) => {
+          setValue('memory', MemorySlideMarkList[e].value);
+        }}
+        max={MemorySlideMarkList.length - 1}
+        min={0}
+        step={1}
+      />
+    </Flex>
+  );
+}
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/BasicConfiguration/TemplateRepositoryListNav.tsx b/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/BasicConfiguration/TemplateRepositoryListNav.tsx
index b301d0bdb72d..15e576760ef9 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/BasicConfiguration/TemplateRepositoryListNav.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/BasicConfiguration/TemplateRepositoryListNav.tsx
@@ -1,14 +1,14 @@
-import MyIcon from "@/components/Icon";
-import { TemplateState } from "@/constants/template";
-import { useTemplateStore } from "@/stores/template";
-import { Box, Flex, Text } from "@chakra-ui/react";
-import { useTranslations } from "next-intl";
-import { usePathname } from "next/navigation";
+import MyIcon from '@/components/Icon';
+import { TemplateState } from '@/constants/template';
+import { useTemplateStore } from '@/stores/template';
+import { Box, Flex, Text } from '@chakra-ui/react';
+import { useTranslations } from 'next-intl';
+import { usePathname } from '@/i18n';
 
 const TemplateRepositoryListNav = () => {
-  const t = useTranslations()
-  const { openTemplateModal, config, isOpen } = useTemplateStore()
-  const lastRoute = usePathname()
+  const t = useTranslations();
+  const { openTemplateModal, config, isOpen } = useTemplateStore();
+  const lastRoute = usePathname();
   return (
     <Flex
       // margin="0 auto"
@@ -27,9 +27,9 @@ const TemplateRepositoryListNav = () => {
         cursor="pointer"
         onClick={() => {
           openTemplateModal({
-            'templateState': TemplateState.publicTemplate,
+            templateState: TemplateState.publicTemplate,
             lastRoute
-          })
+          });
         }}
       >
         <MyIcon
@@ -37,7 +37,7 @@ const TemplateRepositoryListNav = () => {
           width="18px"
           height="18px"
           color="#0884DD"
-          fill={"#0884DD"}
+          fill={'#0884DD'}
         />
         <Text
           fontFamily="PingFang SC"
@@ -47,17 +47,12 @@ const TemplateRepositoryListNav = () => {
           letterSpacing="0.5px"
           color="#485264"
         >
-          {t("all_templates")}
+          {t('all_templates')}
         </Text>
       </Flex>
 
       {/* Divider */}
-      <Box
-        width="12px"
-        height="0"
-        border="1px solid #DFE2EA"
-        transform="rotate(90deg)"
-      />
+      <Box width="12px" height="0" border="1px solid #DFE2EA" transform="rotate(90deg)" />
 
       {/* My Templates Tab */}
       <Flex
@@ -69,17 +64,12 @@ const TemplateRepositoryListNav = () => {
         cursor="pointer"
         onClick={() => {
           openTemplateModal({
-            'templateState': TemplateState.privateTemplate,
+            templateState: TemplateState.privateTemplate,
             lastRoute
-          })
+          });
         }}
       >
-        <MyIcon
-          name={"user"}
-          width="18px"
-          height="18px"
-          color="#0884DD"
-        />
+        <MyIcon name={'user'} width="18px" height="18px" color="#0884DD" />
         <Text
           fontFamily="PingFang SC"
           fontSize="12px"
@@ -88,11 +78,11 @@ const TemplateRepositoryListNav = () => {
           letterSpacing="0.5px"
           color="#485264"
         >
-          {t("my_templates")}
+          {t('my_templates')}
         </Text>
       </Flex>
     </Flex>
   );
 };
 
-export default TemplateRepositoryListNav;
\ No newline at end of file
+export default TemplateRepositoryListNav;
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/BasicConfiguration/TemplateRepositorySelector/TemplateReposistoryItem.tsx b/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/BasicConfiguration/TemplateRepositorySelector/TemplateReposistoryItem.tsx
index 05ef402d9c66..b68d71f3f563 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/BasicConfiguration/TemplateRepositorySelector/TemplateReposistoryItem.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/BasicConfiguration/TemplateRepositorySelector/TemplateReposistoryItem.tsx
@@ -1,68 +1,71 @@
-import { useDevboxStore } from "@/stores/devbox";
-import { DevboxEditTypeV2 } from "@/types/devbox";
-import { Center, Img, Text } from "@chakra-ui/react";
-import { useMessage } from "@sealos/ui";
-import { useTranslations } from "next-intl";
-import { useFormContext } from "react-hook-form";
+import { useDevboxStore } from '@/stores/devbox';
+import { DevboxEditTypeV2 } from '@/types/devbox';
+import { Center, Img, Text } from '@chakra-ui/react';
+import { useMessage } from '@sealos/ui';
+import { useTranslations } from 'next-intl';
+import { useFormContext } from 'react-hook-form';
 
-export default function TemplateRepositoryItem({ item, isEdit }: { item: { uid: string, iconId: string, name: string }; isEdit: boolean}) {
-  const { message: toast } = useMessage()
-  const t = useTranslations()
-  const { getValues, setValue, watch } = useFormContext<DevboxEditTypeV2>()
-  const { startedTemplate, setStartedTemplate } = useDevboxStore()
-  return <Center
-    key={item.uid}
-    flexDirection={'column'}
-    w={'110px'}
-    height={'80px'}
-    border={'1px solid'}
-    borderRadius={'6px'}
-    cursor={'pointer'}
-    fontWeight={'bold'}
-    color={'grayModern.900'}
-    opacity={isEdit ? 0.5 : 1}
-    {...(watch('templateRepositoryUid') === item.uid
-      ? {
-        bg: '#F9FDFE',
-        borderColor: 'brightBlue.500',
-        boxShadow: '0px 0px 0px 2.4px rgba(33, 155, 244, 0.15)'
-      }
-      : {
-        bg: '#F7F8FA',
-        borderColor: 'grayModern.200',
-        _hover: {
-          borderColor: '#85ccff'
+export default function TemplateRepositoryItem({
+  item,
+  isEdit
+}: {
+  item: { uid: string; iconId: string; name: string };
+  isEdit: boolean;
+}) {
+  const { message: toast } = useMessage();
+  const t = useTranslations();
+  const { getValues, setValue, watch } = useFormContext<DevboxEditTypeV2>();
+  const { startedTemplate, setStartedTemplate } = useDevboxStore();
+  return (
+    <Center
+      key={item.uid}
+      flexDirection={'column'}
+      w={'110px'}
+      height={'80px'}
+      border={'1px solid'}
+      borderRadius={'6px'}
+      cursor={'pointer'}
+      fontWeight={'bold'}
+      color={'grayModern.900'}
+      opacity={isEdit ? 0.5 : 1}
+      {...(watch('templateRepositoryUid') === item.uid
+        ? {
+            bg: '#F9FDFE',
+            borderColor: 'brightBlue.500',
+            boxShadow: '0px 0px 0px 2.4px rgba(33, 155, 244, 0.15)'
+          }
+        : {
+            bg: '#F7F8FA',
+            borderColor: 'grayModern.200',
+            _hover: {
+              borderColor: '#85ccff'
+            }
+          })}
+      onClick={() => {
+        if (isEdit) return;
+        const devboxName = getValues('name');
+        if (!devboxName) {
+          toast({
+            title: t('Please enter the devbox name first'),
+            status: 'warning'
+          });
+          return;
         }
-      })}
-    onClick={() =>{
-      if (isEdit) return
-      const devboxName = getValues('name')
-      if (!devboxName) {
-        toast({
-          title: t('Please enter the devbox name first'),
-          status: 'warning'
-        })
-        return
-      }
-      if (startedTemplate && startedTemplate.uid !== item.uid) {
-        setStartedTemplate(undefined)
-      } 
-      setValue('templateRepositoryUid', item.uid)
-    }}
-  >
-    <Img
-      width={'32px'}
-      height={'32px'}
-      alt={item.uid}
-      src={`/images/${item.iconId || 'custom'}.svg`}
-    />
-    <Text
-      mt={'4px'}
-      textAlign={'center'}
-      noOfLines={1}
-      width={'90px'}
+        if (startedTemplate && startedTemplate.uid !== item.uid) {
+          setStartedTemplate(undefined);
+        }
+        setValue('templateRepositoryUid', item.uid);
+      }}
     >
-      {item.name}
-    </Text>
-  </Center>
-}
\ No newline at end of file
+      <Img
+        width={'32px'}
+        height={'32px'}
+        alt={item.uid}
+        src={`/images/${item.iconId || 'custom'}.svg`}
+      />
+      <Text mt={'4px'} textAlign={'center'} noOfLines={1} width={'90px'}>
+        {item.name}
+      </Text>
+    </Center>
+  );
+}
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/BasicConfiguration/TemplateRepositorySelector/index.tsx b/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/BasicConfiguration/TemplateRepositorySelector/index.tsx
index b0e7ebaa2125..b9ffef419254 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/BasicConfiguration/TemplateRepositorySelector/index.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/BasicConfiguration/TemplateRepositorySelector/index.tsx
@@ -1,120 +1,186 @@
-import { getTemplateRepository, listOfficialTemplateRepository } from '@/api/template'
-import { TemplateRepositoryKind } from '@/prisma/generated/client'
-import { useDevboxStore } from '@/stores/devbox'
-import { DevboxEditTypeV2 } from '@/types/devbox'
-import { TemplateRepository } from '@/types/template'
-import { Box, Flex, VStack } from '@chakra-ui/react'
-import { useQuery } from '@tanstack/react-query'
-import { useTranslations } from 'next-intl'
-import { useEffect, useMemo } from 'react'
-import { useFormContext } from 'react-hook-form'
-import Label from '../../Label'
-import TemplateRepositoryListNav from '../TemplateRepositoryListNav'
-import TemplateRepositoryItem from './TemplateReposistoryItem'
+import { getTemplateRepository, listOfficialTemplateRepository } from '@/api/template';
+import useDriver from '@/hooks/useDriver';
+import { TemplateRepositoryKind } from '@/prisma/generated/client';
+import { useDevboxStore } from '@/stores/devbox';
+import { DevboxEditTypeV2 } from '@/types/devbox';
+import { TemplateRepository } from '@/types/template';
+import { Box, Flex, VStack } from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
+import { useEffect, useMemo } from 'react';
+import { useFormContext } from 'react-hook-form';
+import Label from '../../Label';
+import TemplateRepositoryListNav from '../TemplateRepositoryListNav';
+import TemplateRepositoryItem from './TemplateReposistoryItem';
+import { useSearchParams } from 'next/navigation';
 
 interface TemplateRepositorySelectorProps {
-  isEdit: boolean
+  isEdit: boolean;
 }
 
-export default function TemplateRepositorySelector({
-  isEdit,
-}: TemplateRepositorySelectorProps) {
-  const { startedTemplate, setStartedTemplate } = useDevboxStore()
-  const { setValue, getValues, watch } = useFormContext<DevboxEditTypeV2>()
-  const t = useTranslations()
-  const templateRepositoryQuery = useQuery(['list-official-template-repository'], listOfficialTemplateRepository, {
-    staleTime: Infinity,
-    cacheTime: 1000 * 60 * 30
-  })
-  const curTemplateRepositoryUid = watch('templateRepositoryUid')
-  const curTemplateRepositoryDetail = useQuery(['get-template-repository', curTemplateRepositoryUid], () => {
-    return getTemplateRepository(curTemplateRepositoryUid)
-  }, {
-    enabled: !!isEdit && !!curTemplateRepositoryUid,
-  })
+export default function TemplateRepositorySelector({ isEdit }: TemplateRepositorySelectorProps) {
+  const { startedTemplate, setStartedTemplate } = useDevboxStore();
+  const { setValue, getValues, watch } = useFormContext<DevboxEditTypeV2>();
+  const t = useTranslations();
+  const { handleUserGuide } = useDriver();
+  const searchParams = useSearchParams();
+  const templateRepositoryQuery = useQuery(
+    ['list-official-template-repository'],
+    listOfficialTemplateRepository,
+    {
+      onSuccess(res) {
+        console.log('res', res);
+        handleUserGuide();
+      },
+      staleTime: Infinity,
+      cacheTime: 1000 * 60 * 30
+    }
+  );
+  const curTemplateRepositoryUid = watch('templateRepositoryUid');
+  const curTemplateRepositoryDetail = useQuery(
+    ['get-template-repository', curTemplateRepositoryUid],
+    () => {
+      return getTemplateRepository(curTemplateRepositoryUid);
+    },
+    {
+      enabled: !!isEdit && !!curTemplateRepositoryUid
+    }
+  );
 
-  const templateData = useMemo(() => templateRepositoryQuery.data?.templateRepositoryList || [], [templateRepositoryQuery.data])
+  const templateData = useMemo(
+    () => templateRepositoryQuery.data?.templateRepositoryList || [],
+    [templateRepositoryQuery.data]
+  );
 
   const categorizedData = useMemo(() => {
-    return templateData.reduce((acc, item) => {
-      acc[item.kind] = [...(acc[item.kind] || []), item]
-      return acc
-    }, {
-      'LANGUAGE': [],
-      'FRAMEWORK': [],
-      'OS': [],
-      'CUSTOM': []
-    } as Record<TemplateRepositoryKind, TemplateRepository[]>)
-  }, [templateData])
+    return templateData.reduce(
+      (acc, item) => {
+        acc[item.kind] = [...(acc[item.kind] || []), item];
+        return acc;
+      },
+      {
+        LANGUAGE: [],
+        FRAMEWORK: [],
+        OS: [],
+        CUSTOM: []
+      } as Record<TemplateRepositoryKind, TemplateRepository[]>
+    );
+  }, [templateData]);
   useEffect(() => {
     if (!startedTemplate || isEdit) {
-      return
+      return;
     }
-    const templateUid = startedTemplate.uid
-    if (templateData.findIndex((item) => {
-      return item.uid === templateUid
-    }) > -1) {
-      setStartedTemplate(undefined)
+    const templateUid = startedTemplate.uid;
+    if (
+      templateData.findIndex((item) => {
+        return item.uid === templateUid;
+      }) > -1
+    ) {
+      setStartedTemplate(undefined);
     }
-    setValue('templateRepositoryUid', templateUid)
-  }, [startedTemplate, isEdit])
+    setValue('templateRepositoryUid', templateUid);
+  }, [startedTemplate, isEdit]);
 
   useEffect(() => {
     if (startedTemplate || isEdit) {
-      return
+      return;
     }
-    if (!(templateRepositoryQuery.isSuccess
-      && templateData.length > 0
-      && templateRepositoryQuery.isFetched)) return
-    const curTemplateRepositoryUid = getValues('templateRepositoryUid')
+    if (
+      !(
+        templateRepositoryQuery.isSuccess &&
+        templateData.length > 0 &&
+        templateRepositoryQuery.isFetched
+      )
+    )
+      return;
+    const curTemplateRepositoryUid = getValues('templateRepositoryUid');
     const curTemplateRepository = templateData.find((item) => {
-      return item.uid === curTemplateRepositoryUid
-    })
+      return item.uid === curTemplateRepositoryUid;
+    });
     if (!curTemplateRepository) {
-      const defaultTemplateRepositoryUid = templateData[0].uid
-      setValue('templateRepositoryUid', defaultTemplateRepositoryUid)
+      const runtime = searchParams.get('runtime');
+      if (!runtime) {
+        setValue('templateRepositoryUid', templateData[0].uid);
+        return;
+      } else {
+        const runtimeTemplate = templateData.find((item) => item.iconId === runtime);
+        if (runtimeTemplate) {
+          setValue('templateRepositoryUid', runtimeTemplate.uid);
+        } else {
+          setValue('templateRepositoryUid', templateData[0].uid);
+        }
+      }
     }
-  }, [templateRepositoryQuery.isSuccess, startedTemplate, templateData, templateRepositoryQuery.isFetched, isEdit])
+  }, [
+    templateRepositoryQuery.isSuccess,
+    startedTemplate,
+    templateData,
+    templateRepositoryQuery.isFetched,
+    isEdit
+  ]);
 
   useEffect(() => {
-    if (!isEdit || !templateRepositoryQuery.isSuccess || !templateData ||  !curTemplateRepositoryDetail.isSuccess || !curTemplateRepositoryDetail.data) {
-      return
+    if (
+      !isEdit ||
+      !templateRepositoryQuery.isSuccess ||
+      !templateData ||
+      !curTemplateRepositoryDetail.isSuccess ||
+      !curTemplateRepositoryDetail.data
+    ) {
+      return;
     }
-    const templateRepository = curTemplateRepositoryDetail.data.templateRepository
+    const templateRepository = curTemplateRepositoryDetail.data.templateRepository;
     // setStartedTemplate(templateRepository)
-    setValue('templateRepositoryUid', templateRepository.uid)
+    setValue('templateRepositoryUid', templateRepository.uid);
 
-    if (templateData.findIndex((item) => {
-      return item.uid === templateRepository.uid
-    }) === -1) {
-      setStartedTemplate(templateRepository)
+    if (
+      templateData.findIndex((item) => {
+        return item.uid === templateRepository.uid;
+      }) === -1
+    ) {
+      setStartedTemplate(templateRepository);
     }
-  }, [curTemplateRepositoryDetail.isSuccess, curTemplateRepositoryDetail.data, curTemplateRepositoryDetail.isFetched, isEdit, templateData, templateRepositoryQuery.isSuccess])
+  }, [
+    curTemplateRepositoryDetail.isSuccess,
+    curTemplateRepositoryDetail.data,
+    curTemplateRepositoryDetail.isFetched,
+    isEdit,
+    templateData,
+    templateRepositoryQuery.isSuccess
+  ]);
   return (
     <VStack alignItems={'center'} mb={7} gap={'24px'}>
-      <Flex w='full' justify={'space-between'}>
-        <Label w={100} alignSelf={'flex-start'}>
-          {t('runtime_environment')}
-        </Label>
-        <TemplateRepositoryListNav />
-      </Flex>
-      {!!startedTemplate && <Flex gap={'10px'} px={'14px'} width={'full'}>
-        <Box width={'85px'}>{t('current')}</Box>
-        <Flex flexWrap={'wrap'} gap={'12px'} flex={1}>
-          <TemplateRepositoryItem item={{
-            uid: startedTemplate.uid,
-            iconId: startedTemplate.iconId || '',
-            name: startedTemplate.name,
-          }} isEdit={isEdit} />
+      <Flex className="guide-runtimes" gap={'24px'} flexDir={'column'} w={'full'}>
+        <Flex w="full" justify={'space-between'}>
+          <Label w={100} alignSelf={'flex-start'}>
+            {t('runtime_environment')}
+          </Label>
+          <TemplateRepositoryListNav />
         </Flex>
-      </Flex>}
-      <Flex gap={'10px'} px={'14px'} width={'full'}>
-        {/* Language */}
-        {categorizedData['LANGUAGE'].length !== 0 && <Box width={'85px'}>{t('language')}</Box>}
-        <Flex flexWrap={'wrap'} gap={'12px'} flex={1}>
-          {categorizedData['LANGUAGE']?.map((item) => (
-            <TemplateRepositoryItem key={item.uid} item={item} isEdit={isEdit} />
-          ))}
+
+        {!!startedTemplate && (
+          <Flex gap={'10px'} px={'14px'} width={'full'}>
+            <Box width={'85px'}>{t('current')}</Box>
+            <Flex flexWrap={'wrap'} gap={'12px'} flex={1}>
+              <TemplateRepositoryItem
+                item={{
+                  uid: startedTemplate.uid,
+                  iconId: startedTemplate.iconId || '',
+                  name: startedTemplate.name
+                }}
+                isEdit={isEdit}
+              />
+            </Flex>
+          </Flex>
+        )}
+        <Flex gap={'10px'} px={'14px'} width={'full'}>
+          {/* Language */}
+          {categorizedData['LANGUAGE'].length !== 0 && <Box width={'85px'}>{t('language')}</Box>}
+          <Flex flexWrap={'wrap'} gap={'12px'} flex={1}>
+            {categorizedData['LANGUAGE']?.map((item) => (
+              <TemplateRepositoryItem key={item.uid} item={item} isEdit={isEdit} />
+            ))}
+          </Flex>
         </Flex>
       </Flex>
       <Flex gap={'10px'} px={'14px'} width={'full'}>
@@ -136,6 +202,5 @@ export default function TemplateRepositorySelector({
         </Flex>
       </Flex>
     </VStack>
-  )
+  );
 }
-
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/BasicConfiguration/TemplateSelector/index.tsx b/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/BasicConfiguration/TemplateSelector/index.tsx
index 1ac11c76f91d..bc78d9a31d6f 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/BasicConfiguration/TemplateSelector/index.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/BasicConfiguration/TemplateSelector/index.tsx
@@ -1,36 +1,38 @@
 // RuntimeVersionSelector.tsx
-import { listTemplate } from '@/api/template'
-import { useEnvStore } from '@/stores/env'
-import { DevboxEditTypeV2 } from '@/types/devbox'
-import { nanoid } from '@/utils/tools'
-import { Flex, Input } from '@chakra-ui/react'
-import { MySelect, useMessage } from '@sealos/ui'
-import { useQuery } from '@tanstack/react-query'
-import { useTranslations } from 'next-intl'
-import { useEffect } from 'react'
-import { useController, useFormContext } from 'react-hook-form'
-import { z } from 'zod'
-import Label from '../../Label'
+import { listTemplate } from '@/api/template';
+import { useEnvStore } from '@/stores/env';
+import { DevboxEditTypeV2 } from '@/types/devbox';
+import { nanoid } from '@/utils/tools';
+import { Flex, Input } from '@chakra-ui/react';
+import { MySelect, useMessage } from '@sealos/ui';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
+import { useEffect } from 'react';
+import { useController, useFormContext } from 'react-hook-form';
+import { z } from 'zod';
+import Label from '../../Label';
 
 interface TemplateSelectorProps {
-  isEdit: boolean
+  isEdit: boolean;
 }
 
-export default function TemplateSelector({
-  isEdit,
-}: TemplateSelectorProps) {
-  const { getValues, setValue, watch, control } = useFormContext<DevboxEditTypeV2>()
-  const { env } = useEnvStore()
-  const { message: toast } = useMessage()
-  const templateRepositoryUid = watch('templateRepositoryUid')
-  const isVaildTemplateRepositoryUid = z.string().uuid().safeParse(templateRepositoryUid).success
-  const templateListQuery = useQuery(['templateList', templateRepositoryUid], () => listTemplate(templateRepositoryUid), {
-    enabled: isVaildTemplateRepositoryUid,
-  })
-  const templateList = (templateListQuery.data?.templateList || [])
-  const t = useTranslations()
+export default function TemplateSelector({ isEdit }: TemplateSelectorProps) {
+  const { getValues, setValue, watch, control } = useFormContext<DevboxEditTypeV2>();
+  const { env } = useEnvStore();
+  const { message: toast } = useMessage();
+  const templateRepositoryUid = watch('templateRepositoryUid');
+  const isVaildTemplateRepositoryUid = z.string().uuid().safeParse(templateRepositoryUid).success;
+  const templateListQuery = useQuery(
+    ['templateList', templateRepositoryUid],
+    () => listTemplate(templateRepositoryUid),
+    {
+      enabled: isVaildTemplateRepositoryUid
+    }
+  );
+  const templateList = templateListQuery.data?.templateList || [];
+  const t = useTranslations();
   // const defaultTemplateUid = watch('templateUid')
-  const menuList = templateList.map(v => ({ label: v.name, value: v.uid }))
+  const menuList = templateList.map((v) => ({ label: v.name, value: v.uid }));
   // const defaultTemplate = defaultTemplateUid ? templateList.find(t => t.uid === defaultTemplateUid) : templateList[0]
 
   const { field } = useController({
@@ -39,54 +41,50 @@ export default function TemplateSelector({
     rules: {
       required: t('This runtime field is required')
     }
-  })
+  });
   const afterUpdateTemplate = (uid: string) => {
-    const template = templateList.find(v => v.uid === uid)!
-    setValue(
-      'templateConfig',
-      template.config as string
-    )
-    setValue(
-      'image',
-      template.image
-    )
-
-  }
+    const template = templateList.find((v) => v.uid === uid)!;
+    setValue('templateConfig', template.config as string);
+    setValue('image', template.image);
+  };
   const resetNetwork = () => {
-    const devboxName = getValues('name')
-    const config = getValues('templateConfig')
-    const parsedConfig =
-      JSON.parse(config as string) as { appPorts: [{ port: number, name: string, protocol: string }] }
+    const devboxName = getValues('name');
+    const config = getValues('templateConfig');
+    const parsedConfig = JSON.parse(config as string) as {
+      appPorts: [{ port: number; name: string; protocol: string }];
+    };
     setValue(
       'networks',
       parsedConfig.appPorts.map(
-        ({ port }) => ({
-          networkName: `${devboxName}-${nanoid()}`,
-          portName: nanoid(),
-          port: port,
-          protocol: 'HTTP',
-          openPublicDomain: true,
-          publicDomain: `${nanoid()}.${env.ingressDomain}`,
-          customDomain: ''
-        } as const)
+        ({ port }) =>
+          ({
+            networkName: `${devboxName}-${nanoid()}`,
+            portName: nanoid(),
+            port: port,
+            protocol: 'HTTP',
+            openPublicDomain: true,
+            publicDomain: `${nanoid()}.${env.ingressDomain}`,
+            customDomain: ''
+          } as const)
       )
-    )
-  }
+    );
+  };
   useEffect(() => {
-    if (!templateListQuery.isSuccess || !templateList.length || !templateListQuery.isFetched) return
+    if (!templateListQuery.isSuccess || !templateList.length || !templateListQuery.isFetched)
+      return;
 
-    const curTemplate = templateList.find(t => t.uid === field.value)
-    const isExist = !!curTemplate
+    const curTemplate = templateList.find((t) => t.uid === field.value);
+    const isExist = !!curTemplate;
     if (!isExist) {
-      const defaultTemplate = templateList[0]
-      setValue('templateUid', defaultTemplate.uid)
-      afterUpdateTemplate(defaultTemplate.uid)
-      resetNetwork()
+      const defaultTemplate = templateList[0];
+      setValue('templateUid', defaultTemplate.uid);
+      afterUpdateTemplate(defaultTemplate.uid);
+      resetNetwork();
     } else {
-      setValue('templateUid', curTemplate.uid)
-      afterUpdateTemplate(curTemplate.uid)
+      setValue('templateUid', curTemplate.uid);
+      afterUpdateTemplate(curTemplate.uid);
     }
-  }, [templateListQuery.isSuccess, templateList, templateListQuery.isFetched, isEdit])
+  }, [templateListQuery.isSuccess, templateList, templateListQuery.isFetched, isEdit]);
   return (
     <Flex alignItems={'center'} mb={7}>
       <Label w={100}>{t('version')}</Label>
@@ -94,7 +92,7 @@ export default function TemplateSelector({
         <Input
           opacity={0.5}
           width={'200px'}
-          defaultValue={templateList.find(t => t.uid === field.value)?.name}
+          defaultValue={templateList.find((t) => t.uid === field.value)?.name}
           disabled
         />
       ) : (
@@ -108,21 +106,21 @@ export default function TemplateSelector({
           name={field.name}
           onchange={(val) => {
             // if (isEdit) return
-            const devboxName = getValues('name')
+            const devboxName = getValues('name');
             if (!devboxName) {
               toast({
                 title: t('Please enter the devbox name first'),
                 status: 'warning'
-              })
-              return
+              });
+              return;
             }
-            const oldTemplateUid = getValues('templateUid')
-            field.onChange(val)
-            afterUpdateTemplate(val)
-            if(oldTemplateUid !== val) resetNetwork()
+            const oldTemplateUid = getValues('templateUid');
+            field.onChange(val);
+            afterUpdateTemplate(val);
+            if (oldTemplateUid !== val) resetNetwork();
           }}
         />
       )}
     </Flex>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/BasicConfiguration/index.tsx b/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/BasicConfiguration/index.tsx
index 6c5c712c3bbf..4303c6e26008 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/BasicConfiguration/index.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/BasicConfiguration/index.tsx
@@ -1,31 +1,36 @@
-import MyIcon from "@/components/Icon"
-import { Box, BoxProps } from "@chakra-ui/react"
-import { useTranslations } from "next-intl"
-import ConfigurationHeader from "../ConfigurationHeader"
-import CpuSelector from "./CpuSelector"
-import DevboxNameInput from "./DevboxNameInput"
-import MemorySelector from "./MemorySelector"
-import TemplateRepositorySelector from "./TemplateRepositorySelector"
-import TemplateSelector from "./TemplateSelector"
+import MyIcon from '@/components/Icon';
+import { Box, BoxProps } from '@chakra-ui/react';
+import { useTranslations } from 'next-intl';
+import ConfigurationHeader from '../ConfigurationHeader';
+import CpuSelector from './CpuSelector';
+import DevboxNameInput from './DevboxNameInput';
+import MemorySelector from './MemorySelector';
+import TemplateRepositorySelector from './TemplateRepositorySelector';
+import TemplateSelector from './TemplateSelector';
 
 export default function BasicConfiguration({ isEdit, ...props }: BoxProps & { isEdit: boolean }) {
-  const t = useTranslations()
-  return <Box {...props}>
-    <ConfigurationHeader>
-      <MyIcon name={'formInfo'} mr={5} w={'20px'} color={'grayModern.600'} />
-      {t('basic_configuration')}
-    </ConfigurationHeader>
-    <Box px={'42px'} py={'24px'}>
-      {/* Devbox Name */}
-      <DevboxNameInput isEdit={isEdit} />
-      {/* Template Repository */}
-      <TemplateRepositorySelector isEdit={isEdit} />
-      {/* Runtime Version */}
-      <TemplateSelector isEdit={isEdit} />
-      {/* CPU */}
-      <CpuSelector />
-      {/* Memory */}
-      <MemorySelector />
+  const t = useTranslations();
+  return (
+    <Box {...props}>
+      <ConfigurationHeader>
+        <MyIcon name={'formInfo'} mr={5} w={'20px'} color={'grayModern.600'} />
+        {t('basic_configuration')}
+      </ConfigurationHeader>
+      <Box px={'42px'} py={'24px'}>
+        {/* Devbox Name */}
+        <DevboxNameInput isEdit={isEdit} />
+        {/* Template Repository */}
+        <TemplateRepositorySelector isEdit={isEdit} />
+        {/* Runtime Version */}
+        <TemplateSelector isEdit={isEdit} />
+
+        <Box className="guide-custom-resources" pb={'2px'}>
+          {/* CPU */}
+          <CpuSelector />
+          {/* Memory */}
+          <MemorySelector />
+        </Box>
+      </Box>
     </Box>
-  </Box>
-}
\ No newline at end of file
+  );
+}
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/ConfigurationHeader.tsx b/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/ConfigurationHeader.tsx
index d38d46c5e1bd..7782c5c1ec31 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/ConfigurationHeader.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/ConfigurationHeader.tsx
@@ -1,5 +1,5 @@
-import { Box, BoxProps } from "@chakra-ui/react";
-import { ReactNode } from "react";
+import { Box, BoxProps } from '@chakra-ui/react';
+import { ReactNode } from 'react';
 
 export default function ConfigurationHeader({ children }: { children: ReactNode }) {
   const headerStyles: BoxProps = {
@@ -12,8 +12,6 @@ export default function ConfigurationHeader({ children }: { children: ReactNode
     display: 'flex',
     alignItems: 'center',
     backgroundColor: 'grayModern.50'
-  }
-  return <Box {...headerStyles}>
-    {children}
-  </Box>
-}
\ No newline at end of file
+  };
+  return <Box {...headerStyles}>{children}</Box>;
+}
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/Label.tsx b/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/Label.tsx
index 1804caecf39a..ee8f45d9f9b1 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/Label.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/Label.tsx
@@ -1,20 +1,21 @@
-import { Box, BoxProps } from "@chakra-ui/react"
+import { Box, BoxProps } from '@chakra-ui/react';
 
 const Label = ({
   children,
   w = 'auto',
   ...props
 }: {
-  children: string
-  w?: number | 'auto'
+  children: string;
+  w?: number | 'auto';
 } & BoxProps) => (
   <Box
     flex={`0 0 ${w === 'auto' ? 'auto' : `${w}px`}`}
     color={'grayModern.900'}
     fontWeight={'bold'}
     userSelect={'none'}
-    {...props}>
+    {...props}
+  >
     {children}
   </Box>
-)
-export default Label
\ No newline at end of file
+);
+export default Label;
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/NetworkConfiguration/index.tsx b/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/NetworkConfiguration/index.tsx
index 72e699922eb3..daa936cb3133 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/NetworkConfiguration/index.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/NetworkConfiguration/index.tsx
@@ -1,43 +1,51 @@
-import MyIcon from "@/components/Icon"
-import { ProtocolList } from "@/constants/devbox"
-import { useEnvStore } from "@/stores/env"
-import { DevboxEditTypeV2 } from "@/types/devbox"
-import { nanoid } from "@/utils/tools"
-import { Box, BoxProps, Button, ButtonProps, Flex, IconButton, Input, Switch, useTheme } from "@chakra-ui/react"
-import { MySelect, useMessage } from "@sealos/ui"
-import { useTranslations } from "next-intl"
-import dynamic from "next/dynamic"
-import { useState } from "react"
-import { useFieldArray, useFormContext } from "react-hook-form"
-import ConfigurationHeader from "../ConfigurationHeader"
+import MyIcon from '@/components/Icon';
+import { ProtocolList } from '@/constants/devbox';
+import { useEnvStore } from '@/stores/env';
+import { DevboxEditTypeV2 } from '@/types/devbox';
+import { nanoid } from '@/utils/tools';
+import {
+  Box,
+  BoxProps,
+  Button,
+  ButtonProps,
+  Flex,
+  IconButton,
+  Input,
+  Switch,
+  useTheme
+} from '@chakra-ui/react';
+import { MySelect, useMessage } from '@sealos/ui';
+import { useTranslations } from 'next-intl';
+import dynamic from 'next/dynamic';
+import { useState } from 'react';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+import ConfigurationHeader from '../ConfigurationHeader';
 // const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz', 12)
 
 export type CustomAccessModalParams = {
-  publicDomain: string
-  customDomain: string
-}
+  publicDomain: string;
+  customDomain: string;
+};
 
-const CustomAccessModal = dynamic(() => import('@/components/modals/CustomAccessModal'))
+const CustomAccessModal = dynamic(() => import('@/components/modals/CustomAccessModal'));
 const AppendNetworksButton = (props: ButtonProps) => {
-  const t = useTranslations()
-  return (<Button
-    w={'100px'}
-    variant={'outline'}
-    leftIcon={<MyIcon name="plus" w={'18px'} fill={'#485264'} />}
-    {...props}
-  >
-    {t('Add Port')}
-  </Button>)
-}
+  const t = useTranslations();
+  return (
+    <Button
+      w={'100px'}
+      variant={'outline'}
+      leftIcon={<MyIcon name="plus" w={'18px'} fill={'#485264'} />}
+      {...props}
+    >
+      {t('Add Port')}
+    </Button>
+  );
+};
 export default function NetworkConfiguration({ isEdit, ...props }: BoxProps & { isEdit: boolean }) {
-  const {
-    register,
-    getValues,
-    control
-  } = useFormContext<DevboxEditTypeV2>()
-  const theme = useTheme()
-  const [customAccessModalData, setCustomAccessModalData] = useState<CustomAccessModalParams>()
-  const { env } = useEnvStore()
+  const { register, getValues, control } = useFormContext<DevboxEditTypeV2>();
+  const theme = useTheme();
+  const [customAccessModalData, setCustomAccessModalData] = useState<CustomAccessModalParams>();
+  const { env } = useEnvStore();
   const {
     fields: networks,
     update: updateNetworks,
@@ -46,9 +54,9 @@ export default function NetworkConfiguration({ isEdit, ...props }: BoxProps & {
   } = useFieldArray({
     control,
     name: 'networks'
-  })
-  const t = useTranslations()
-  const { message: toast } = useMessage()
+  });
+  const t = useTranslations();
+  const { message: toast } = useMessage();
   const appendNetworks = () => {
     _appendNetworks({
       networkName: '',
@@ -58,184 +66,189 @@ export default function NetworkConfiguration({ isEdit, ...props }: BoxProps & {
       openPublicDomain: false,
       publicDomain: '',
       customDomain: ''
-    })
-  }
+    });
+  };
   // const networks = watch('networks')
-  return <><Box id={'baseInfo'} {...props}>
-    <ConfigurationHeader>
-      <MyIcon name={'network'} mr={'12px'} w={'24px'} color={'grayModern.900'} />
-      {t('Network Configuration')}
-    </ConfigurationHeader>
-    <Box px={'42px'} py={'24px'} userSelect={'none'}>
-      {networks.length === 0 && (
-        <AppendNetworksButton onClick={() => appendNetworks()} />
-      )}
-      {networks.map((network, i) => (
-        <Flex
-          alignItems={'flex-start'}
-          key={network.id}
-          _notLast={{ pb: 6, borderBottom: theme.borders.base }}
-          _notFirst={{ pt: 6 }}>
-          <Box>
-            <Box mb={'10px'} h={'20px'} fontSize={'base'} color={'grayModern.900'}>
-              {t('Container Port')}
-            </Box>
-            <Input
-              h={'32px'}
-              type={'number'}
-              w={'110px'}
-              bg={'grayModern.50'}
-              {...register(`networks.${i}.port`, {
-                valueAsNumber: true,
-                min: {
-                  value: 1,
-                  message: t('The minimum exposed port is 1')
-                },
-                max: {
-                  value: 65535,
-                  message: t('The maximum number of exposed ports is 65535')
-                },
-                validate: {
-                  repeatPort: (value) => {
-                    const ports = getValues('networks').map((network, index) => ({
-                      port: network.port,
-                      index
-                    }));
-                    // 排除当前正在编辑的端口
-                    const isDuplicate = ports.some(
-                      (item) => item.port === value && item.index !== i
-                    );
-                    return !isDuplicate || t('The port number cannot be repeated');
-                  }
-                }
-              })}
-            />
-            {i === networks.length - 1 && networks.length < 5 && (
-              <Box mt={3}>
-                <AppendNetworksButton onClick={() => appendNetworks()} />
+  return (
+    <>
+      <Box id={'baseInfo'} {...props}>
+        <ConfigurationHeader>
+          <MyIcon name={'network'} mr={'12px'} w={'24px'} color={'grayModern.900'} />
+          {t('Network Configuration')}
+        </ConfigurationHeader>
+        <Box px={'42px'} py={'24px'} userSelect={'none'}>
+          {networks.length === 0 && <AppendNetworksButton onClick={() => appendNetworks()} />}
+          {networks.map((network, i) => (
+            <Flex
+              className="guide-network-configuration"
+              alignItems={'flex-start'}
+              key={network.id}
+              _notLast={{ pb: 6, borderBottom: theme.borders.base }}
+              _notFirst={{ pt: 6 }}
+            >
+              <Box>
+                <Box mb={'10px'} h={'20px'} fontSize={'base'} color={'grayModern.900'}>
+                  {t('Container Port')}
+                </Box>
+                <Input
+                  h={'32px'}
+                  type={'number'}
+                  w={'110px'}
+                  bg={'grayModern.50'}
+                  {...register(`networks.${i}.port`, {
+                    valueAsNumber: true,
+                    min: {
+                      value: 1,
+                      message: t('The minimum exposed port is 1')
+                    },
+                    max: {
+                      value: 65535,
+                      message: t('The maximum number of exposed ports is 65535')
+                    },
+                    validate: {
+                      repeatPort: (value) => {
+                        const ports = getValues('networks').map((network, index) => ({
+                          port: network.port,
+                          index
+                        }));
+                        // 排除当前正在编辑的端口
+                        const isDuplicate = ports.some(
+                          (item) => item.port === value && item.index !== i
+                        );
+                        return !isDuplicate || t('The port number cannot be repeated');
+                      }
+                    }
+                  })}
+                />
+                {i === networks.length - 1 && networks.length < 5 && (
+                  <Box mt={3}>
+                    <AppendNetworksButton onClick={() => appendNetworks()} />
+                  </Box>
+                )}
               </Box>
-            )}
-          </Box>
-          <Box mx={7}>
-            <Box mb={'8px'}
-              h={'20px'} fontSize={'base'} color={'grayModern.900'}>
-              {t('Open Public Access')}
-            </Box>
-            <Flex alignItems={'center'} h={'35px'}>
-              <Switch
-                className="driver-deploy-network-switch"
-                size={'lg'}
-                id={`openPublicDomain-${i}`}
-                isChecked={!!network.openPublicDomain}
-                onChange={(e) => {
-                  const devboxName = getValues('name')
-                  if (!devboxName) {
-                    toast({
-                      title: t('Please enter the devbox name first'),
-                      status: 'warning'
-                    })
-                    return
-                  }
-                  updateNetworks(i, {
-                    ...getValues('networks')[i],
-                    networkName: network.networkName || `${devboxName}-${nanoid()}`,
-                    protocol: network.protocol || 'HTTP',
-                    openPublicDomain: e.target.checked,
-                    publicDomain: network.publicDomain || `${nanoid()}.${env.ingressDomain}`
-                  })
-                }}
-              />
-            </Flex>
-          </Box>
-          {network.openPublicDomain && (
-            <>
-              <Box flex={'1 0 0'}>
-                <Box mb={'8px'} h={'20px'}></Box>
+              <Box mx={7}>
+                <Box mb={'8px'} h={'20px'} fontSize={'base'} color={'grayModern.900'}>
+                  {t('Open Public Access')}
+                </Box>
                 <Flex alignItems={'center'} h={'35px'}>
-                  <MySelect
-                    width={'100px'}
-                    height={'32px'}
-                    borderTopRightRadius={0}
-                    borderBottomRightRadius={0}
-                    value={network.protocol}
-                    // border={theme.borders.base}
-                    list={ProtocolList}
-                    onchange={(val: any) => {
+                  <Switch
+                    className="driver-deploy-network-switch"
+                    size={'lg'}
+                    id={`openPublicDomain-${i}`}
+                    isChecked={!!network.openPublicDomain}
+                    onChange={(e) => {
+                      const devboxName = getValues('name');
+                      if (!devboxName) {
+                        toast({
+                          title: t('Please enter the devbox name first'),
+                          status: 'warning'
+                        });
+                        return;
+                      }
                       updateNetworks(i, {
                         ...getValues('networks')[i],
-                        protocol: val
-                      })
+                        networkName: network.networkName || `${devboxName}-${nanoid()}`,
+                        protocol: network.protocol || 'HTTP',
+                        openPublicDomain: e.target.checked,
+                        publicDomain: network.publicDomain || `${nanoid()}.${env.ingressDomain}`
+                      });
                     }}
                   />
-                  <Flex
-                    maxW={'350px'}
-                    flex={'1 0 0'}
-                    alignItems={'center'}
-                    h={'32px'}
-                    bg={'grayModern.50'}
-                    px={2}
-                    border={theme.borders.base}
-                    borderLeft={0}
-                    borderTopRightRadius={'md'}
-                    borderBottomRightRadius={'md'}>
-                    <Box flex={1} userSelect={'all'} className="textEllipsis">
-                      {network.customDomain ? network.customDomain : network.publicDomain!}
-                    </Box>
-                    <Box
-                      fontSize={'11px'}
-                      color={'brightBlue.600'}
-                      cursor={'pointer'}
-                      whiteSpace={'nowrap'}
-                      onClick={() =>
-                        setCustomAccessModalData({
-                          publicDomain: network.publicDomain!,
-                          customDomain: network.customDomain!
-                        })
-                      }>
-                      {t('Custom Domain')}
-                    </Box>
-                  </Flex>
                 </Flex>
               </Box>
-            </>
-          )}
-          {networks.length >= 1 && (
-            <Box ml={3}>
-              <Box mb={'8px'} h={'20px'}></Box>
-              <IconButton
-                height={'32px'}
-                width={'32px'}
-                aria-label={'button'}
-                variant={'outline'}
-                bg={'#FFF'}
-                _hover={{
-                  color: 'red.600',
-                  bg: 'rgba(17, 24, 36, 0.05)'
-                }}
-                icon={<MyIcon name={'delete'} w={'16px'} fill={'#485264'} />}
-                onClick={() => removeNetworks(i)}
-              />
-            </Box>
-          )}
-        </Flex>
-      ))}
-    </Box>
-  </Box>
-    {!!customAccessModalData && (
-      <CustomAccessModal
-        {...customAccessModalData}
-        onClose={() => setCustomAccessModalData(undefined)}
-        onSuccess={(e) => {
-          const i = networks.findIndex(
-            (item) => item.publicDomain === customAccessModalData.publicDomain
-          )
-          if (i === -1) return
-          updateNetworks(i, {
-            ...networks[i],
-            customDomain: e
-          })
-          setCustomAccessModalData(undefined)
-        }}
-      />
-    )}</>
-}
\ No newline at end of file
+              {network.openPublicDomain && (
+                <>
+                  <Box flex={'1 0 0'}>
+                    <Box mb={'8px'} h={'20px'}></Box>
+                    <Flex alignItems={'center'} h={'35px'}>
+                      <MySelect
+                        width={'100px'}
+                        height={'32px'}
+                        borderTopRightRadius={0}
+                        borderBottomRightRadius={0}
+                        value={network.protocol}
+                        // border={theme.borders.base}
+                        list={ProtocolList}
+                        onchange={(val: any) => {
+                          updateNetworks(i, {
+                            ...getValues('networks')[i],
+                            protocol: val
+                          });
+                        }}
+                      />
+                      <Flex
+                        maxW={'350px'}
+                        flex={'1 0 0'}
+                        alignItems={'center'}
+                        h={'32px'}
+                        bg={'grayModern.50'}
+                        px={2}
+                        border={theme.borders.base}
+                        borderLeft={0}
+                        borderTopRightRadius={'md'}
+                        borderBottomRightRadius={'md'}
+                      >
+                        <Box flex={1} userSelect={'all'} className="textEllipsis">
+                          {network.customDomain ? network.customDomain : network.publicDomain!}
+                        </Box>
+                        <Box
+                          fontSize={'11px'}
+                          color={'brightBlue.600'}
+                          cursor={'pointer'}
+                          whiteSpace={'nowrap'}
+                          onClick={() =>
+                            setCustomAccessModalData({
+                              publicDomain: network.publicDomain!,
+                              customDomain: network.customDomain!
+                            })
+                          }
+                        >
+                          {t('Custom Domain')}
+                        </Box>
+                      </Flex>
+                    </Flex>
+                  </Box>
+                </>
+              )}
+              {networks.length >= 1 && (
+                <Box ml={3}>
+                  <Box mb={'8px'} h={'20px'}></Box>
+                  <IconButton
+                    height={'32px'}
+                    width={'32px'}
+                    aria-label={'button'}
+                    variant={'outline'}
+                    bg={'#FFF'}
+                    _hover={{
+                      color: 'red.600',
+                      bg: 'rgba(17, 24, 36, 0.05)'
+                    }}
+                    icon={<MyIcon name={'delete'} w={'16px'} fill={'#485264'} />}
+                    onClick={() => removeNetworks(i)}
+                  />
+                </Box>
+              )}
+            </Flex>
+          ))}
+        </Box>
+      </Box>
+      {!!customAccessModalData && (
+        <CustomAccessModal
+          {...customAccessModalData}
+          onClose={() => setCustomAccessModalData(undefined)}
+          onSuccess={(e) => {
+            const i = networks.findIndex(
+              (item) => item.publicDomain === customAccessModalData.publicDomain
+            );
+            if (i === -1) return;
+            updateNetworks(i, {
+              ...networks[i],
+              customDomain: e
+            });
+            setCustomAccessModalData(undefined);
+          }}
+        />
+      )}
+    </>
+  );
+}
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/index.tsx b/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/index.tsx
index edfcd924487e..29cc60b31c2d 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/index.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/form/index.tsx
@@ -1,42 +1,29 @@
-'use client'
+'use client';
 
-import {
-  Box,
-  Flex,
-  Grid,
-  useTheme
-} from '@chakra-ui/react'
-import { Tabs } from '@sealos/ui'
-import { throttle } from 'lodash'
-import { useTranslations } from 'next-intl'
-import { useEffect, useState } from 'react'
-import { useFormContext } from 'react-hook-form'
+import { Box, Flex, Grid, useTheme } from '@chakra-ui/react';
+import { Tabs } from '@sealos/ui';
+import { throttle } from 'lodash';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
 
-import MyIcon from '@/components/Icon'
-import PriceBox from '@/components/PriceBox'
-import QuotaBox from '@/components/QuotaBox'
-import { useRouter } from '@/i18n'
+import MyIcon from '@/components/Icon';
+import PriceBox from '@/components/PriceBox';
+import QuotaBox from '@/components/QuotaBox';
+import { useRouter } from '@/i18n';
 
-import { useDevboxStore } from '@/stores/devbox'
+import { useDevboxStore } from '@/stores/devbox';
 
-import type { DevboxEditTypeV2 } from '@/types/devbox'
-import { obj2Query } from '@/utils/tools'
-import BasicConfiguration from './BasicConfiguration'
-import NetworkConfiguration from './NetworkConfiguration'
+import type { DevboxEditTypeV2 } from '@/types/devbox';
+import { obj2Query } from '@/utils/tools';
+import BasicConfiguration from './BasicConfiguration';
+import NetworkConfiguration from './NetworkConfiguration';
 
-const Form = ({
-  pxVal,
-  isEdit
-}: {
-  pxVal: number
-  isEdit: boolean
-}) => {
-  const theme = useTheme()
-  const router = useRouter()
-  const t = useTranslations()
-  const {
-    watch
-  } = useFormContext<DevboxEditTypeV2>()
+const Form = ({ pxVal, isEdit }: { pxVal: number; isEdit: boolean }) => {
+  const theme = useTheme();
+  const router = useRouter();
+  const t = useTranslations();
+  const { watch } = useFormContext<DevboxEditTypeV2>();
   const navList: { id: string; label: string; icon: string }[] = [
     {
       id: 'baseInfo',
@@ -48,141 +35,145 @@ const Form = ({
       label: t('Network Configuration'),
       icon: 'network'
     }
-  ]
-  const [activeNav, setActiveNav] = useState(navList[0].id)
-  const { devboxList } = useDevboxStore()
+  ];
+  const [activeNav, setActiveNav] = useState(navList[0].id);
+  const { devboxList } = useDevboxStore();
 
   // listen scroll and set activeNav
   useEffect(() => {
     const scrollFn = throttle((e: Event) => {
-      if (!e.target) return
+      if (!e.target) return;
       const doms = navList.map((item) => ({
         dom: document.getElementById(item.id),
         id: item.id
-      }))
+      }));
 
-      const dom = e.target as HTMLDivElement
-      const scrollTop = dom.scrollTop
+      const dom = e.target as HTMLDivElement;
+      const scrollTop = dom.scrollTop;
       for (let i = doms.length - 1; i >= 0; i--) {
-        const offsetTop = doms[i].dom?.offsetTop || 0
+        const offsetTop = doms[i].dom?.offsetTop || 0;
 
         if (scrollTop + 500 >= offsetTop) {
-          setActiveNav(doms[i].id)
-          break
+          setActiveNav(doms[i].id);
+          break;
         }
       }
-    }, 200)
-    document.getElementById('form-container')?.addEventListener('scroll', scrollFn)
+    }, 200);
+    document.getElementById('form-container')?.addEventListener('scroll', scrollFn);
     return () => {
-      document.getElementById('form-container')?.removeEventListener('scroll', scrollFn)
-    }
+      document.getElementById('form-container')?.removeEventListener('scroll', scrollFn);
+    };
     // eslint-disable-next-line
-  }, [])
-
+  }, []);
 
   const boxStyles = {
     border: theme.borders.base,
     borderRadius: 'lg',
     mb: 4,
     bg: 'white'
-  }
+  };
 
   return (
-      <Grid
-        height={'100%'}
-        templateColumns={'220px 1fr'}
-        gridGap={5}
-        alignItems={'start'}
-        pl={`${pxVal}px`}>
-        {/* left sidebar */}
-        <Box>
-          <Tabs
-            list={[
-              { id: 'form', label: t('config_form') },
-              { id: 'yaml', label: t('yaml_file') }
+    <Grid
+      height={'100%'}
+      templateColumns={'220px 1fr'}
+      gridGap={5}
+      alignItems={'start'}
+      pl={`${pxVal}px`}
+    >
+      {/* left sidebar */}
+      <Box>
+        <Tabs
+          list={[
+            { id: 'form', label: t('config_form') },
+            { id: 'yaml', label: t('yaml_file') }
+          ]}
+          activeId={'form'}
+          onChange={() =>
+            router.replace(
+              `/devbox/create?${obj2Query({
+                type: 'yaml'
+              })}`
+            )
+          }
+        />
+        <Box
+          mt={3}
+          borderRadius={'md'}
+          overflow={'hidden'}
+          backgroundColor={'white'}
+          border={theme.borders.base}
+          p={'4px'}
+        >
+          {navList.map((item) => (
+            <Box
+              key={item.id}
+              onClick={() => {
+                setActiveNav(item.id);
+                window.location.hash = item.id;
+              }}
+            >
+              <Flex
+                borderRadius={'base'}
+                cursor={'pointer'}
+                gap={'8px'}
+                alignItems={'center'}
+                h={'40px'}
+                _hover={{
+                  backgroundColor: 'grayModern.100'
+                }}
+                color="grayModern.900"
+                backgroundColor={activeNav === item.id ? 'grayModern.100' : 'transparent'}
+              >
+                <Box
+                  w={'2px'}
+                  h={'24px'}
+                  justifySelf={'start'}
+                  bg={'grayModern.900'}
+                  borderRadius={'12px'}
+                  opacity={activeNav === item.id ? 1 : 0}
+                />
+                <MyIcon
+                  name={item.icon as any}
+                  w={'20px'}
+                  h={'20px'}
+                  color={activeNav === item.id ? 'myGray.400' : 'grayModern.600'}
+                />
+                <Box>{item.label}</Box>
+              </Flex>
+            </Box>
+          ))}
+        </Box>
+        <Box mt={3} overflow={'hidden'}>
+          <QuotaBox />
+        </Box>
+        <Box mt={3} overflow={'hidden'}>
+          <PriceBox
+            components={[
+              {
+                cpu: watch('cpu'),
+                memory: watch('memory'),
+                nodeports: devboxList.length
+              }
             ]}
-            activeId={'form'}
-            onChange={() =>
-              router.replace(
-                `/devbox/create?${obj2Query({
-                  type: 'yaml'
-                })}`
-              )
-            }
           />
-          <Box
-            mt={3}
-            borderRadius={'md'}
-            overflow={'hidden'}
-            backgroundColor={'white'}
-            border={theme.borders.base}
-            p={'4px'}>
-            {navList.map((item) => (
-              <Box
-                key={item.id}
-                onClick={() => {
-                  setActiveNav(item.id)
-                  window.location.hash = item.id
-                }}>
-                <Flex
-                  borderRadius={'base'}
-                  cursor={'pointer'}
-                  gap={'8px'}
-                  alignItems={'center'}
-                  h={'40px'}
-                  _hover={{
-                    backgroundColor: 'grayModern.100'
-                  }}
-                  color="grayModern.900"
-                  backgroundColor={activeNav === item.id ? 'grayModern.100' : 'transparent'}>
-                  <Box
-                    w={'2px'}
-                    h={'24px'}
-                    justifySelf={'start'}
-                    bg={'grayModern.900'}
-                    borderRadius={'12px'}
-                    opacity={activeNav === item.id ? 1 : 0}
-                  />
-                  <MyIcon
-                    name={item.icon as any}
-                    w={'20px'}
-                    h={'20px'}
-                    color={activeNav === item.id ? 'myGray.400' : 'grayModern.600'}
-                  />
-                  <Box>{item.label}</Box>
-                </Flex>
-              </Box>
-            ))}
-          </Box>
-          <Box mt={3} overflow={'hidden'}>
-            <QuotaBox />
-          </Box>
-          <Box mt={3} overflow={'hidden'}>
-            <PriceBox
-              components={[
-                {
-                  cpu: watch('cpu'),
-                  memory: watch('memory'),
-                  nodeports: devboxList.length
-                }
-              ]}
-            />
-          </Box>
-        </Box>
-        {/* right content */}
-        <Box
-          id={'form-container'}
-          pr={`${pxVal}px`}
-          height={'100%'}
-          position={'relative'}
-          overflowY={'scroll'}>
-          {/* base info */}
-          <BasicConfiguration isEdit={isEdit} id={'baseInfo'} {...boxStyles}/>
-          {/* network */}
-          <NetworkConfiguration isEdit={isEdit} id={'network'} {...boxStyles}/>
         </Box>
-      </Grid>
-  )
-}
+      </Box>
+      {/* right content */}
+      <Box
+        id={'form-container'}
+        pr={`${pxVal}px`}
+        height={'100%'}
+        position={'relative'}
+        overflowY={'scroll'}
+      >
+        {/* base info */}
+        <BasicConfiguration isEdit={isEdit} id={'baseInfo'} {...boxStyles} />
+        {/* network */}
+        <NetworkConfiguration isEdit={isEdit} id={'network'} {...boxStyles} />
+      </Box>
+    </Grid>
+  );
+};
 
-export default Form
+export default Form;
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/page.tsx b/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/page.tsx
index e0c6940625b0..fe04ea827da7 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/page.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/devbox/create/page.tsx
@@ -1,288 +1,290 @@
-'use client'
+'use client';
 
-import { useRouter } from '@/i18n'
-import { Box, Flex } from '@chakra-ui/react'
-import { useMessage } from '@sealos/ui'
-import { useQuery } from '@tanstack/react-query'
-import { useTranslations } from 'next-intl'
-import dynamic from 'next/dynamic'
-import { useSearchParams } from 'next/navigation'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { FormProvider, useForm } from 'react-hook-form'
+import { useRouter } from '@/i18n';
+import { Box, Flex } from '@chakra-ui/react';
+import { useMessage } from '@sealos/ui';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
+import dynamic from 'next/dynamic';
+import { useSearchParams } from 'next/navigation';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
 
-import Form from './components/form'
-import Header from './components/Header'
-import Yaml from './components/Yaml'
+import Form from './components/form';
+import Header from './components/Header';
+import Yaml from './components/Yaml';
 
-import type { YamlItemType } from '@/types'
-import type { DevboxEditType, DevboxEditTypeV2, DevboxKindsType } from '@/types/devbox'
+import type { YamlItemType } from '@/types';
+import type { DevboxEditType, DevboxEditTypeV2, DevboxKindsType } from '@/types/devbox';
 
-import { useConfirm } from '@/hooks/useConfirm'
-import { useLoading } from '@/hooks/useLoading'
+import { useConfirm } from '@/hooks/useConfirm';
+import { useLoading } from '@/hooks/useLoading';
 
-import { useDevboxStore } from '@/stores/devbox'
-import { useEnvStore } from '@/stores/env'
-import { useGlobalStore } from '@/stores/global'
-import { useIDEStore } from '@/stores/ide'
-import { useUserStore } from '@/stores/user'
+import { useDevboxStore } from '@/stores/devbox';
+import { useEnvStore } from '@/stores/env';
+import { useGlobalStore } from '@/stores/global';
+import { useIDEStore } from '@/stores/ide';
+import { useUserStore } from '@/stores/user';
 
-import { createDevbox, updateDevbox } from '@/api/devbox'
-import { defaultDevboxEditValueV2, editModeMap } from '@/constants/devbox'
-import { useTemplateStore } from '@/stores/template'
-import { generateYamlList } from '@/utils/json2Yaml'
-import { patchYamlList } from '@/utils/tools'
-import { debounce } from 'lodash'
+import { createDevbox, updateDevbox } from '@/api/devbox';
+import { defaultDevboxEditValueV2, editModeMap } from '@/constants/devbox';
+import { useTemplateStore } from '@/stores/template';
+import { generateYamlList } from '@/utils/json2Yaml';
+import { patchYamlList } from '@/utils/tools';
+import { debounce } from 'lodash';
 
-const ErrorModal = dynamic(() => import('@/components/modals/ErrorModal'))
+const ErrorModal = dynamic(() => import('@/components/modals/ErrorModal'));
 const DevboxCreatePage = () => {
-  const {env } = useEnvStore()
-  const generateDefaultYamlList = () => generateYamlList(defaultDevboxEditValueV2, env)
-  const router = useRouter()
-  const t = useTranslations()
-  const searchParams = useSearchParams()
-  const { message: toast } = useMessage()
-  const { addDevboxIDE } = useIDEStore()
-  const { checkQuotaAllow } = useUserStore()
-  const { setDevboxDetail, devboxList } = useDevboxStore()
+  const { env } = useEnvStore();
+  const generateDefaultYamlList = () => generateYamlList(defaultDevboxEditValueV2, env);
+  const router = useRouter();
+  const t = useTranslations();
+  const searchParams = useSearchParams();
+  const { message: toast } = useMessage();
+  const { addDevboxIDE } = useIDEStore();
+  const { checkQuotaAllow } = useUserStore();
+  const { setDevboxDetail, devboxList } = useDevboxStore();
 
-  const crOldYamls = useRef<DevboxKindsType[]>([])
-  const formOldYamls = useRef<YamlItemType[]>([])
-  const oldDevboxEditData = useRef<DevboxEditTypeV2>()
+  const crOldYamls = useRef<DevboxKindsType[]>([]);
+  const formOldYamls = useRef<YamlItemType[]>([]);
+  const oldDevboxEditData = useRef<DevboxEditTypeV2>();
 
-  const { Loading, setIsLoading } = useLoading()
-  const [errorMessage, setErrorMessage] = useState('')
-  const [yamlList, setYamlList] = useState<YamlItemType[]>([])
+  const { Loading, setIsLoading } = useLoading();
+  const [errorMessage, setErrorMessage] = useState('');
+  const [yamlList, setYamlList] = useState<YamlItemType[]>([]);
 
-  const tabType = searchParams.get('type') || 'form'
-  const devboxName = searchParams.get('name') || ''
+  const tabType = searchParams.get('type') || 'form';
+  const devboxName = searchParams.get('name') || '';
 
   // NOTE: need to explain why this is needed
   // fix a bug: searchParams will disappear when go into this page
-  const [captureDevboxName, setCaptureDevboxName] = useState('')
-  const { updateTemplateModalConfig, config: templateConfig } = useTemplateStore()
+  const [captureDevboxName, setCaptureDevboxName] = useState('');
+  const { updateTemplateModalConfig, config: templateConfig } = useTemplateStore();
   useEffect(() => {
-    const name = searchParams.get('name')
+    const name = searchParams.get('name');
     if (name) {
-      setCaptureDevboxName(name)
-      router.replace(`/devbox/create?name=${captureDevboxName}`, undefined)
+      setCaptureDevboxName(name);
+      router.replace(`/devbox/create?name=${captureDevboxName}`, undefined);
     }
-  }, [searchParams, router, captureDevboxName])
+  }, [searchParams, router, captureDevboxName]);
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const isEdit = useMemo(() => !!devboxName, [])
+  const isEdit = useMemo(() => !!devboxName, []);
 
-  const { title, applyBtnText, applyMessage, applySuccess, applyError } = editModeMap(isEdit)
+  const { title, applyBtnText, applyMessage, applySuccess, applyError } = editModeMap(isEdit);
 
   const { openConfirm, ConfirmChild } = useConfirm({
     content: applyMessage
-  })
+  });
 
   // compute container width
-  const { screenWidth, lastRoute } = useGlobalStore()
+  const { screenWidth, lastRoute } = useGlobalStore();
 
   const pxVal = useMemo(() => {
-    const val = Math.floor((screenWidth - 1050) / 2)
+    const val = Math.floor((screenWidth - 1050) / 2);
     if (val < 20) {
-      return 20
+      return 20;
     }
-    return val
-  }, [screenWidth])
+    return val;
+  }, [screenWidth]);
 
   const formHook = useForm<DevboxEditTypeV2>({
     defaultValues: defaultDevboxEditValueV2
-  })
+  });
 
   // updateyamlList every time yamlList change
   const debouncedUpdateYaml = useMemo(
-    () => 
+    () =>
       debounce((data: DevboxEditTypeV2, env) => {
         try {
-          const newYamlList = generateYamlList(data, env)
-          setYamlList(newYamlList)
+          const newYamlList = generateYamlList(data, env);
+          setYamlList(newYamlList);
         } catch (error) {
-          console.error('Failed to generate yaml:', error)
+          console.error('Failed to generate yaml:', error);
         }
       }, 300),
     []
-  )
+  );
 
   // 监听表单变化
   useEffect(() => {
     const subscription = formHook.watch((value) => {
       if (value) {
-        debouncedUpdateYaml(value as DevboxEditTypeV2, env)
+        debouncedUpdateYaml(value as DevboxEditTypeV2, env);
       }
-    })
+    });
     return () => {
-      subscription.unsubscribe()
-      debouncedUpdateYaml.cancel()
-    }
-  }, [formHook, debouncedUpdateYaml, env])
-
+      subscription.unsubscribe();
+      debouncedUpdateYaml.cancel();
+    };
+  }, [formHook, debouncedUpdateYaml, env]);
 
   useQuery(
     ['initDevboxCreateData'],
     () => {
       if (!devboxName) {
-        setYamlList(generateDefaultYamlList())
-        return null
+        setYamlList(generateDefaultYamlList());
+        return null;
       }
-      setIsLoading(true)
-      return setDevboxDetail(devboxName, env.sealosDomain)
+      setIsLoading(true);
+      return setDevboxDetail(devboxName, env.sealosDomain);
     },
     {
       onSuccess(res) {
         if (!res) {
-          return
+          return;
         }
-        oldDevboxEditData.current = res
-        formOldYamls.current = generateYamlList(res, env)
-        crOldYamls.current = generateYamlList(res, env) as DevboxKindsType[]
-        formHook.reset(res)
+        oldDevboxEditData.current = res;
+        formOldYamls.current = generateYamlList(res, env);
+        crOldYamls.current = generateYamlList(res, env) as DevboxKindsType[];
+        formHook.reset(res);
       },
       onError(err) {
         toast({
           title: String(err),
           status: 'error'
-        })
+        });
       },
       onSettled() {
-        setIsLoading(false)
+        setIsLoading(false);
       }
     }
-  )
+  );
   const submitSuccess = async (formData: DevboxEditTypeV2) => {
-    setIsLoading(true)
+    setIsLoading(true);
     try {
       // quote check
       const quoteCheckRes = checkQuotaAllow(
         { ...formData, nodeports: devboxList.length + 1 } as DevboxEditTypeV2 & {
-          nodeports: number
+          nodeports: number;
         },
         {
           ...oldDevboxEditData.current,
           nodeports: devboxList.length
         } as DevboxEditType & {
-          nodeports: number
+          nodeports: number;
         }
-      )
+      );
       if (quoteCheckRes) {
-        setIsLoading(false)
+        setIsLoading(false);
         return toast({
           status: 'warning',
           title: t(quoteCheckRes),
           duration: 5000,
           isClosable: true
-        })
+        });
       }
       // update
       if (isEdit) {
-        const yamlList = generateYamlList(formData, env)
-        setYamlList(yamlList)
-        const parsedNewYamlList = yamlList.map((item) => item.value)
-        const parsedOldYamlList = formOldYamls.current.map((item) => item.value)
+        const yamlList = generateYamlList(formData, env);
+        setYamlList(yamlList);
+        const parsedNewYamlList = yamlList.map((item) => item.value);
+        const parsedOldYamlList = formOldYamls.current.map((item) => item.value);
         const areYamlListsEqual =
           new Set(parsedNewYamlList).size === new Set(parsedOldYamlList).size &&
-          [...new Set(parsedNewYamlList)].every((item) => new Set(parsedOldYamlList).has(item))
+          [...new Set(parsedNewYamlList)].every((item) => new Set(parsedOldYamlList).has(item));
         if (areYamlListsEqual) {
-          setIsLoading(false)
+          setIsLoading(false);
           return toast({
             status: 'info',
             title: t('No changes detected'),
             duration: 5000,
             isClosable: true
-          })
+          });
         }
-        if(!parsedNewYamlList) {
-          // prevent empty yamlList 
-          return setErrorMessage(t('submit_form_error'))
+        if (!parsedNewYamlList) {
+          // prevent empty yamlList
+          return setErrorMessage(t('submit_form_error'));
         }
         const patch = patchYamlList({
           parsedOldYamlList: parsedOldYamlList,
           parsedNewYamlList: parsedNewYamlList,
           originalYamlList: crOldYamls.current
-        })
+        });
         await updateDevbox({
           patch,
           devboxName: formData.name
-        })
+        });
       } else {
-        await createDevbox({ devboxForm: formData })
+        await createDevbox({ devboxForm: formData });
       }
-      addDevboxIDE('vscode', formData.name)
+      addDevboxIDE('vscode', formData.name);
       toast({
         title: t(applySuccess),
         status: 'success'
-      })
+      });
       updateTemplateModalConfig({
         ...templateConfig,
         lastRoute
-      })
-      router.push(lastRoute)
+      });
+      router.push(lastRoute);
     } catch (error) {
-      console.log('error', error)
+      console.log('error', error);
       if (error instanceof String && error.includes('402')) {
-        setErrorMessage(t('outstanding_tips'))
-      }
-      else
-        setErrorMessage(JSON.stringify(error))
+        setErrorMessage(t('outstanding_tips'));
+      } else setErrorMessage(JSON.stringify(error));
     }
-    setIsLoading(false)
-  }
+    setIsLoading(false);
+  };
 
   const submitError = useCallback(() => {
     // deep search message
     const deepSearch = (obj: any): string => {
       if (!obj || typeof obj !== 'object') {
-        return t('submit_form_error')
+        return t('submit_form_error');
       }
       if (!!obj.message) {
-        return obj.message
+        return obj.message;
       }
-      return deepSearch(Object.values(obj)[0])
-    }
+      return deepSearch(Object.values(obj)[0]);
+    };
     toast({
       title: deepSearch(formHook.formState.errors),
       status: 'error',
       position: 'top',
       duration: 3000,
       isClosable: true
-    })
-  }, [formHook.formState.errors, toast, t])
+    });
+  }, [formHook.formState.errors, toast, t]);
 
-  return (<>
-    <FormProvider {...formHook} >
-      <Flex
-        flexDirection={'column'}
-        alignItems={'center'}
-        h={'100vh'}
-        minWidth={'1024px'}
-        backgroundColor={'grayModern.100'}>
-        <Header
-          yamlList={yamlList}
-          title={title}
-          applyBtnText={applyBtnText}
-          applyCb={() =>
-            formHook.handleSubmit((data) => openConfirm(() => submitSuccess(data))(), submitError)()
-          }
-        />
-        <Box flex={'1 0 0'} h={0} w={'100%'} pb={4}>
-          {tabType === 'form' ? (
-            <Form pxVal={pxVal} isEdit={isEdit} />
-          ) : (
-            <Yaml yamlList={yamlList} pxVal={pxVal} />
-          )}
-        </Box>
-      </Flex>
-    </FormProvider>
-    <ConfirmChild />
-    <Loading />
+  return (
+    <>
+      <FormProvider {...formHook}>
+        <Flex
+          flexDirection={'column'}
+          alignItems={'center'}
+          h={'100vh'}
+          minWidth={'1024px'}
+          backgroundColor={'grayModern.100'}
+        >
+          <Header
+            yamlList={yamlList}
+            title={title}
+            applyBtnText={applyBtnText}
+            applyCb={() =>
+              formHook.handleSubmit(
+                (data) => openConfirm(() => submitSuccess(data))(),
+                submitError
+              )()
+            }
+          />
+          <Box flex={'1 0 0'} h={0} w={'100%'} pb={4}>
+            {tabType === 'form' ? (
+              <Form pxVal={pxVal} isEdit={isEdit} />
+            ) : (
+              <Yaml yamlList={yamlList} pxVal={pxVal} />
+            )}
+          </Box>
+        </Flex>
+      </FormProvider>
+      <ConfirmChild />
+      <Loading />
 
-    {!!errorMessage && (
-      <ErrorModal title={applyError} content={errorMessage} onClose={() => setErrorMessage('')} />
-    )}
-  </>
-  )
-}
+      {!!errorMessage && (
+        <ErrorModal title={applyError} content={errorMessage} onClose={() => setErrorMessage('')} />
+      )}
+    </>
+  );
+};
 
-export default DevboxCreatePage
+export default DevboxCreatePage;
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/devbox/detail/[name]/components/BasicInfo.tsx b/frontend/providers/devbox/app/[lang]/(platform)/devbox/detail/[name]/components/BasicInfo.tsx
index c24a87559238..2afc0b480b48 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/devbox/detail/[name]/components/BasicInfo.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/devbox/detail/[name]/components/BasicInfo.tsx
@@ -1,58 +1,74 @@
-import { Box, Flex, Image, Spinner, Text, Tooltip } from '@chakra-ui/react'
-import { useMessage } from '@sealos/ui'
-import { useTranslations } from 'next-intl'
-import { useCallback, useState } from 'react'
+import { useMessage } from '@sealos/ui';
+import { useTranslations } from 'next-intl';
+import React, { useCallback, useState } from 'react';
+import { Box, Text, Flex, Image, Spinner, Tooltip, Button } from '@chakra-ui/react';
 
-import MyIcon from '@/components/Icon'
+import MyIcon from '@/components/Icon';
+import { useEnvStore } from '@/stores/env';
+import { useDevboxStore } from '@/stores/devbox';
+import { getTemplateConfig } from '@/api/template';
+import { getSSHConnectionInfo } from '@/api/devbox';
+import { JetBrainsGuideData } from '@/components/IDEButton';
+import { downLoadBlob, parseTemplateConfig } from '@/utils/tools';
+import SshConnectModal from '@/components/modals/SshConnectModal';
 
-import { DevboxDetailType } from '@/types/devbox'
+const BasicInfo = () => {
+  const t = useTranslations();
+  const { message: toast } = useMessage();
 
-import { useDevboxStore } from '@/stores/devbox'
-import { useEnvStore } from '@/stores/env'
+  const { env } = useEnvStore();
+  const { devboxDetail } = useDevboxStore();
 
-const BasicInfo = () => {
-  const t = useTranslations()
-  const { message: toast } = useMessage()
+  const [loading, setLoading] = useState(false);
+  const [onOpenSsHConnect, setOnOpenSsHConnect] = useState(false);
+  const [sshConfigData, setSshConfigData] = useState<JetBrainsGuideData | null>(null);
+
+  const handleOneClickConfig = useCallback(async () => {
+    const { base64PrivateKey, userName, token } = await getSSHConnectionInfo({
+      devboxName: devboxDetail?.name as string
+    });
+
+    const result = await getTemplateConfig(devboxDetail?.templateUid as string);
+    const config = parseTemplateConfig(result.template.config);
+    console.log('config', config);
+
+    const sshPrivateKey = Buffer.from(base64PrivateKey, 'base64').toString('utf-8');
+
+    if (!devboxDetail?.sshPort) return;
+
+    setSshConfigData({
+      devboxName: devboxDetail?.name,
+      runtimeType: devboxDetail?.templateRepositoryName,
+      privateKey: sshPrivateKey,
+      userName,
+      token,
+      workingDir: config.workingDir,
+      host: env.sealosDomain,
+      port: devboxDetail?.sshPort.toString(),
+      configHost: `${env.sealosDomain}_${env.namespace}_${devboxDetail?.name}`
+    });
 
-  const { env } = useEnvStore()
-  const { devboxDetail } = useDevboxStore()
-  // const { getRuntimeDetailLabel } = useRuntimeStore()
+    setOnOpenSsHConnect(true);
+  }, [
+    devboxDetail?.name,
+    devboxDetail?.templateUid,
+    devboxDetail?.sshPort,
+    devboxDetail?.templateRepositoryName,
+    env.sealosDomain,
+    env.namespace
+  ]);
 
-  const [loading, setLoading] = useState(false)
-  
   const handleCopySSHCommand = useCallback(() => {
-    const sshCommand = `ssh -i yourPrivateKeyPath ${devboxDetail?.sshConfig?.sshUser}@${env.sealosDomain} -p ${devboxDetail?.sshPort}`
+    const sshCommand = `ssh -i yourPrivateKeyPath ${devboxDetail?.sshConfig?.sshUser}@${env.sealosDomain} -p ${devboxDetail?.sshPort}`;
     navigator.clipboard.writeText(sshCommand).then(() => {
       toast({
         title: t('copy_success'),
         status: 'success',
         duration: 2000,
         isClosable: true
-      })
-    })
-  }, [devboxDetail?.sshConfig?.sshUser, devboxDetail?.sshPort, env.sealosDomain, toast, t])
-
-  const handleDownloadConfig = useCallback(
-    async (config: DevboxDetailType['sshConfig']) => {
-      setLoading(true)
-
-      const privateKey = config?.sshPrivateKey as string
-
-      const blob = new Blob([privateKey], { type: 'application/octet-stream' })
-      const url = window.URL.createObjectURL(blob)
-      const a = document.createElement('a')
-      a.style.display = 'none'
-      a.href = url
-      a.download = devboxDetail?.name || ''
-      document.body.appendChild(a)
-      a.click()
-      window.URL.revokeObjectURL(url)
-      document.body.removeChild(a)
-
-      setLoading(false)
-    },
-    [devboxDetail?.name]
-  )
+      });
+    });
+  }, [devboxDetail?.sshConfig?.sshUser, devboxDetail?.sshPort, env.sealosDomain, toast, t]);
 
   return (
     <Flex borderRadius="lg" bg={'white'} p={4} flexDirection={'column'} h={'100%'}>
@@ -75,7 +91,7 @@ const BasicInfo = () => {
               width={'20px'}
               height={'20px'}
               onError={(e) => {
-                e.currentTarget.src = '/images/custom.svg'
+                e.currentTarget.src = '/images/custom.svg';
               }}
               alt={devboxDetail?.iconId}
               src={`/images/${devboxDetail?.iconId}.svg`}
@@ -89,7 +105,8 @@ const BasicInfo = () => {
           <Flex width={'60%'} color={'grayModern.600'}>
             <Text
               fontSize={'12px'}
-              w={'full'}>{`${env.registryAddr}/${env.namespace}/${devboxDetail?.name}`}</Text>
+              w={'full'}
+            >{`${env.registryAddr}/${env.namespace}/${devboxDetail?.name}`}</Text>
           </Flex>
         </Flex>
         <Flex>
@@ -105,14 +122,10 @@ const BasicInfo = () => {
             {t('start_runtime')}
           </Text>
           <Flex width={'60%'} color={'grayModern.600'}>
-            <Text 
-            fontSize={'12px'}
-            w={'full'}
-            textOverflow={'ellipsis'}
-            >
+            <Text fontSize={'12px'} w={'full'} textOverflow={'ellipsis'}>
               {
-              // getRuntimeDetailLabel(devboxDetail?., devboxDetail?.runtimeVersion)
-              `${devboxDetail?.templateRepositoryName}-${devboxDetail?.templateName}`
+                // getRuntimeDetailLabel(devboxDetail?., devboxDetail?.runtimeVersion)
+                `${devboxDetail?.templateRepositoryName}-${devboxDetail?.templateName}`
               }
             </Text>
           </Flex>
@@ -143,19 +156,35 @@ const BasicInfo = () => {
         </Flex>
       </Flex>
       {/* ssh config */}
-      <Flex mb={3} mt={4}>
-        <MyIcon
-          name="link"
-          w={'15px'}
-          h={'15px'}
-          mr={'4px'}
+      <Flex mb={3} mt={4} alignItems={'center'} justify={'space-between'}>
+        <Flex>
+          <MyIcon
+            name="link"
+            w={'15px'}
+            h={'15px'}
+            mr={'4px'}
+            color={'grayModern.600'}
+            mt={'1px'}
+            ml={'1px'}
+          />
+          <Box color={'grayModern.600'} fontSize={'base'} fontWeight={'bold'}>
+            {t('ssh_config')}
+          </Box>
+        </Flex>
+        <Button
+          size={'sm'}
+          leftIcon={<MyIcon name="settings" w={'16px'} />}
+          bg={'white'}
           color={'grayModern.600'}
-          mt={'1px'}
-          ml={'1px'}
-        />
-        <Box color={'grayModern.600'} fontSize={'base'} fontWeight={'bold'}>
-          {t('ssh_config')}
-        </Box>
+          border={'1px solid'}
+          borderColor={'grayModern.200'}
+          _hover={{
+            color: 'brightBlue.600'
+          }}
+          onClick={() => handleOneClickConfig()}
+        >
+          {t('one_click_config')}
+        </Button>
       </Flex>
       <Flex bg={'grayModern.50'} p={4} borderRadius={'lg'} gap={4} flexDirection={'column'}>
         <Flex>
@@ -173,13 +202,15 @@ const BasicInfo = () => {
               fontSize={'12px'}
               fontWeight={400}
               py={2}
-              borderRadius={'md'}>
+              borderRadius={'md'}
+            >
               <Text
                 cursor="pointer"
                 fontSize={'12px'}
                 _hover={{ color: 'blue.500' }}
                 onClick={handleCopySSHCommand}
-                w={'full'}>
+                w={'full'}
+              >
                 {`ssh -i yourPrivateKeyPath ${devboxDetail?.sshConfig?.sshUser}@${env.sealosDomain} -p ${devboxDetail?.sshPort}`}
               </Text>
             </Tooltip>
@@ -201,19 +232,28 @@ const BasicInfo = () => {
                 fontSize={'12px'}
                 fontWeight={400}
                 py={2}
-                borderRadius={'md'}>
+                borderRadius={'md'}
+              >
                 <Flex
                   p={1}
                   borderRadius={'6px'}
                   _hover={{
                     bg: 'rgba(17, 24, 36, 0.05)'
-                  }}>
+                  }}
+                >
                   <MyIcon
                     cursor={'pointer'}
                     name="download"
+                    color={'grayModern.600'}
                     w={'16px'}
                     h={'16px'}
-                    onClick={() => handleDownloadConfig(devboxDetail?.sshConfig)}
+                    onClick={() =>
+                      downLoadBlob(
+                        devboxDetail?.sshConfig?.sshPrivateKey as string,
+                        'application/octet-stream',
+                        `${devboxDetail?.name}`
+                      )
+                    }
                   />
                 </Flex>
               </Tooltip>
@@ -258,14 +298,16 @@ const BasicInfo = () => {
               fontSize={'12px'}
               fontWeight={400}
               py={2}
-              borderRadius={'md'}>
+              borderRadius={'md'}
+            >
               <Flex
                 ml={3}
                 p={1}
                 borderRadius={'6px'}
                 _hover={{
                   bg: 'rgba(17, 24, 36, 0.05)'
-                }}>
+                }}
+              >
                 <MyIcon
                   cursor={'pointer'}
                   name="maximize"
@@ -279,8 +321,19 @@ const BasicInfo = () => {
           </Flex>
         </Flex>
       </Flex>
+      {onOpenSsHConnect && sshConfigData && (
+        <SshConnectModal
+          jetbrainsGuideData={sshConfigData}
+          onSuccess={() => {
+            setOnOpenSsHConnect(false);
+          }}
+          onClose={() => {
+            setOnOpenSsHConnect(false);
+          }}
+        />
+      )}
     </Flex>
-  )
-}
+  );
+};
 
-export default BasicInfo
+export default BasicInfo;
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/devbox/detail/[name]/components/Header.tsx b/frontend/providers/devbox/app/[lang]/(platform)/devbox/detail/[name]/components/Header.tsx
index ec53313842d1..894dd535a973 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/devbox/detail/[name]/components/Header.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/devbox/detail/[name]/components/Header.tsx
@@ -1,113 +1,113 @@
-import { Box, Button, Flex } from '@chakra-ui/react'
-import { useMessage } from '@sealos/ui'
-import { useTranslations } from 'next-intl'
-import { Dispatch, useCallback, useMemo, useState } from 'react'
+import { Box, Button, Flex } from '@chakra-ui/react';
+import { useMessage } from '@sealos/ui';
+import { useTranslations } from 'next-intl';
+import { Dispatch, useCallback, useMemo, useState } from 'react';
 
-import { pauseDevbox, restartDevbox, startDevbox } from '@/api/devbox'
-import { useRouter } from '@/i18n'
-import { useDevboxStore } from '@/stores/devbox'
-import { useGlobalStore } from '@/stores/global'
+import { pauseDevbox, restartDevbox, startDevbox } from '@/api/devbox';
+import { useRouter } from '@/i18n';
+import { useDevboxStore } from '@/stores/devbox';
+import { useGlobalStore } from '@/stores/global';
 
-import { DevboxDetailTypeV2 } from '@/types/devbox'
+import { DevboxDetailTypeV2 } from '@/types/devbox';
 
-import DevboxStatusTag from '@/components/DevboxStatusTag'
-import MyIcon from '@/components/Icon'
-import IDEButton from '@/components/IDEButton'
-import DelModal from '@/components/modals/DelModal'
-import { sealosApp } from 'sealos-desktop-sdk/app'
-import { useQuery } from '@tanstack/react-query'
+import DevboxStatusTag from '@/components/DevboxStatusTag';
+import MyIcon from '@/components/Icon';
+import IDEButton from '@/components/IDEButton';
+import DelModal from '@/components/modals/DelModal';
+import { sealosApp } from 'sealos-desktop-sdk/app';
+import { useQuery } from '@tanstack/react-query';
 
 const Header = ({
   refetchDevboxDetail,
   setShowSlider,
   isLargeScreen = true
 }: {
-  refetchDevboxDetail: () => void
-  setShowSlider: Dispatch<boolean>
-  isLargeScreen: boolean
+  refetchDevboxDetail: () => void;
+  setShowSlider: Dispatch<boolean>;
+  isLargeScreen: boolean;
 }) => {
-  const router = useRouter()
-  const t = useTranslations()
-  const { message: toast } = useMessage()
+  const router = useRouter();
+  const t = useTranslations();
+  const { message: toast } = useMessage();
 
-  const { devboxDetail, setDevboxList } = useDevboxStore()
-  const { screenWidth, setLoading } = useGlobalStore()
+  const { devboxDetail, setDevboxList } = useDevboxStore();
+  const { screenWidth, setLoading } = useGlobalStore();
 
-  const [delDevbox, setDelDevbox] = useState<DevboxDetailTypeV2 | null>(null)
-  const isBigButton = useMemo(() => screenWidth > 1000, [screenWidth])
+  const [delDevbox, setDelDevbox] = useState<DevboxDetailTypeV2 | null>(null);
+  const isBigButton = useMemo(() => screenWidth > 1000, [screenWidth]);
 
   const { refetch: refetchDevboxList } = useQuery(['devboxListQuery'], setDevboxList, {
     onSettled(res) {
-      if (!res) return
+      if (!res) return;
     }
-  })
+  });
 
   const handlePauseDevbox = useCallback(
     async (devbox: DevboxDetailTypeV2) => {
       try {
-        setLoading(true)
-        await pauseDevbox({ devboxName: devbox.name })
+        setLoading(true);
+        await pauseDevbox({ devboxName: devbox.name });
         toast({
           title: t('pause_success'),
           status: 'success'
-        })
+        });
       } catch (error: any) {
         toast({
           title: typeof error === 'string' ? error : error.message || t('pause_error'),
           status: 'error'
-        })
-        console.error(error)
+        });
+        console.error(error);
       }
-      refetchDevboxDetail()
-      setLoading(false)
+      refetchDevboxDetail();
+      setLoading(false);
     },
     [refetchDevboxDetail, setLoading, t, toast]
-  )
+  );
   const handleRestartDevbox = useCallback(
     async (devbox: DevboxDetailTypeV2) => {
       try {
-        setLoading(true)
-        await restartDevbox({ devboxName: devbox.name })
+        setLoading(true);
+        await restartDevbox({ devboxName: devbox.name });
         toast({
           title: t('restart_success'),
           status: 'success'
-        })
+        });
       } catch (error: any) {
         toast({
           title: typeof error === 'string' ? error : error.message || t('restart_error'),
           status: 'error'
-        })
-        console.error(error, '==')
+        });
+        console.error(error, '==');
       }
-      refetchDevboxDetail()
-      setLoading(false)
+      refetchDevboxDetail();
+      setLoading(false);
     },
     [setLoading, t, toast, refetchDevboxDetail]
-  )
+  );
   const handleStartDevbox = useCallback(
     async (devbox: DevboxDetailTypeV2) => {
       try {
-        setLoading(true)
-        await startDevbox({ devboxName: devbox.name })
+        setLoading(true);
+        await startDevbox({ devboxName: devbox.name });
         toast({
           title: t('start_success'),
           status: 'success'
-        })
+        });
       } catch (error: any) {
         toast({
           title: typeof error === 'string' ? error : error.message || t('start_error'),
           status: 'error'
-        })
-        console.error(error, '==')
+        });
+        console.error(error, '==');
       }
-      refetchDevboxDetail()
-      setLoading(false)
+      refetchDevboxDetail();
+      setLoading(false);
     },
     [setLoading, t, toast, refetchDevboxDetail]
-  )
+  );
   const handleGoToTerminal = useCallback(
     async (devbox: DevboxDetailTypeV2) => {
-      const defaultCommand = `kubectl exec -it $(kubectl get po -l app.kubernetes.io/name=${devbox.name} -oname) -- sh -c "clear; (bash || ash || sh)"`
+      const defaultCommand = `kubectl exec -it $(kubectl get po -l app.kubernetes.io/name=${devbox.name} -oname) -- sh -c "clear; (bash || ash || sh)"`;
       try {
         sealosApp.runEvents('openDesktopApp', {
           appKey: 'system-terminal',
@@ -115,18 +115,18 @@ const Header = ({
             defaultCommand
           },
           messageData: { type: 'new terminal', command: defaultCommand }
-        })
+        });
       } catch (error: any) {
         toast({
           title: typeof error === 'string' ? error : error.message || t('jump_terminal_error'),
           status: 'error'
-        })
-        console.error(error)
+        });
+        console.error(error);
       }
     },
     [t, toast]
-  )
-  if (!devboxDetail) return null
+  );
+  if (!devboxDetail) return null;
   return (
     <Flex justify="space-between" align="center" pl={4} pt={2} flexWrap={'wrap'} gap={5}>
       {/* left back button and title */}
@@ -144,7 +144,7 @@ const Header = ({
         </Box>
         {/* detail button */}
         <Flex alignItems={'center'}>
-          <DevboxStatusTag status={devboxDetail.status } h={'27px'} />
+          <DevboxStatusTag status={devboxDetail.status} h={'27px'} />
           {!isLargeScreen && (
             <Box ml={4}>
               <Button
@@ -157,7 +157,8 @@ const Header = ({
                 _hover={{
                   color: 'brightBlue.600'
                 }}
-                onClick={() => setShowSlider(true)}>
+                onClick={() => setShowSlider(true)}
+              >
                 {t('detail')}
               </Button>
             </Box>
@@ -168,6 +169,7 @@ const Header = ({
       <Flex gap={5}>
         <Box>
           <IDEButton
+            runtimeType={devboxDetail.iconId}
             devboxName={devboxDetail.name}
             sshPort={devboxDetail.sshPort as number}
             status={devboxDetail.status}
@@ -200,11 +202,13 @@ const Header = ({
           }}
           borderWidth={1}
           leftIcon={isBigButton ? <MyIcon name={'terminal'} w={'16px'} /> : undefined}
-          onClick={() => handleGoToTerminal(devboxDetail)}>
+          onClick={() => handleGoToTerminal(devboxDetail)}
+        >
           {isBigButton ? t('terminal') : <MyIcon name={'terminal'} w={'16px'} />}
         </Button>
         {devboxDetail.status.value === 'Running' && (
           <Button
+            className="guide-close-button"
             h={'40px'}
             fontSize={'14px'}
             bg={'white'}
@@ -214,7 +218,8 @@ const Header = ({
             }}
             borderWidth={1}
             leftIcon={isBigButton ? <MyIcon name={'shutdown'} w={'16px'} /> : undefined}
-            onClick={() => handlePauseDevbox(devboxDetail)}>
+            onClick={() => handlePauseDevbox(devboxDetail)}
+          >
             {isBigButton ? t('pause') : <MyIcon name={'shutdown'} w={'16px'} />}
           </Button>
         )}
@@ -229,7 +234,8 @@ const Header = ({
             }}
             borderWidth={1}
             leftIcon={isBigButton ? <MyIcon name={'start'} w={'16px'} /> : undefined}
-            onClick={() => handleStartDevbox(devboxDetail)}>
+            onClick={() => handleStartDevbox(devboxDetail)}
+          >
             {isBigButton ? t('start') : <MyIcon name={'start'} w={'16px'} />}
           </Button>
         )}
@@ -243,7 +249,8 @@ const Header = ({
           }}
           borderWidth={1}
           leftIcon={isBigButton ? <MyIcon name={'change'} w={'16px'} /> : undefined}
-          onClick={() => router.push(`/devbox/create?name=${devboxDetail.name}`)}>
+          onClick={() => router.push(`/devbox/create?name=${devboxDetail.name}`)}
+        >
           {!isBigButton ? <MyIcon name={'change'} w={'16px'} /> : t('update')}
         </Button>
         {devboxDetail.status.value !== 'Stopped' && (
@@ -257,7 +264,8 @@ const Header = ({
             }}
             borderWidth={1}
             leftIcon={isBigButton ? <MyIcon name={'restart'} w={'16px'} /> : undefined}
-            onClick={() => handleRestartDevbox(devboxDetail)}>
+            onClick={() => handleRestartDevbox(devboxDetail)}
+          >
             {isBigButton ? t('restart') : <MyIcon name={'restart'} w={'16px'} />}
           </Button>
         )}
@@ -271,7 +279,8 @@ const Header = ({
           }}
           borderWidth={1}
           leftIcon={isBigButton ? <MyIcon name={'delete'} w={'16px'} /> : undefined}
-          onClick={() => setDelDevbox(devboxDetail)}>
+          onClick={() => setDelDevbox(devboxDetail)}
+        >
           {isBigButton ? t('delete') : <MyIcon name={'delete'} w={'16px'} />}
         </Button>
       </Flex>
@@ -280,14 +289,14 @@ const Header = ({
           devbox={delDevbox}
           onClose={() => setDelDevbox(null)}
           onSuccess={() => {
-            setDelDevbox(null)
-            router.push('/')
+            setDelDevbox(null);
+            router.push('/');
           }}
           refetchDevboxList={refetchDevboxList}
         />
       )}
     </Flex>
-  )
-}
+  );
+};
 
-export default Header
+export default Header;
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/devbox/detail/[name]/components/MainBody.tsx b/frontend/providers/devbox/app/[lang]/(platform)/devbox/detail/[name]/components/MainBody.tsx
index 9a2b2bd10029..0884643b036f 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/devbox/detail/[name]/components/MainBody.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/devbox/detail/[name]/components/MainBody.tsx
@@ -1,33 +1,33 @@
-import { Box, Button, Flex, Text, Tooltip, useDisclosure } from '@chakra-ui/react'
-import dayjs from 'dayjs'
-import { useTranslations } from 'next-intl'
-import dynamic from 'next/dynamic'
+import { Box, Button, Flex, Text, Tooltip, useDisclosure } from '@chakra-ui/react';
+import dayjs from 'dayjs';
+import { useTranslations } from 'next-intl';
+import dynamic from 'next/dynamic';
 
-import MyIcon from '@/components/Icon'
-import MyTable from '@/components/MyTable'
-import PodLineChart from '@/components/PodLineChart'
+import MyIcon from '@/components/Icon';
+import MyTable from '@/components/MyTable';
+import PodLineChart from '@/components/PodLineChart';
 
-import { NetworkType } from '@/types/devbox'
-import { useCopyData } from '@/utils/tools'
+import { NetworkType } from '@/types/devbox';
+import { useCopyData } from '@/utils/tools';
 
-import { useDevboxStore } from '@/stores/devbox'
-import { useEnvStore } from '@/stores/env'
+import { useDevboxStore } from '@/stores/devbox';
+import { useEnvStore } from '@/stores/env';
 
-const MonitorModal = dynamic(() => import('@/components/modals/MonitorModal'))
+const MonitorModal = dynamic(() => import('@/components/modals/MonitorModal'));
 
 const MainBody = () => {
-  const t = useTranslations()
-  const { copyData } = useCopyData()
-  const { devboxDetail } = useDevboxStore()
-  const { env } = useEnvStore()
-  const { isOpen, onOpen, onClose } = useDisclosure()
+  const t = useTranslations();
+  const { copyData } = useCopyData();
+  const { devboxDetail } = useDevboxStore();
+  const { env } = useEnvStore();
+  const { isOpen, onOpen, onClose } = useDisclosure();
 
   const networkColumn: {
-    title: string
-    dataIndex?: keyof NetworkType
-    key: string
-    render?: (item: NetworkType) => JSX.Element
-    width?: string
+    title: string;
+    dataIndex?: keyof NetworkType;
+    key: string;
+    render?: (item: NetworkType) => JSX.Element;
+    width?: string;
   }[] = [
     {
       title: t('port'),
@@ -37,7 +37,7 @@ const MainBody = () => {
           <Text pl={4} color={'grayModern.600'}>
             {item.port}
           </Text>
-        )
+        );
       },
       width: '0.5fr'
     },
@@ -54,7 +54,8 @@ const MainBody = () => {
             fontSize={'12px'}
             fontWeight={400}
             py={2}
-            borderRadius={'md'}>
+            borderRadius={'md'}
+          >
             <Text
               cursor="pointer"
               _hover={{
@@ -65,9 +66,10 @@ const MainBody = () => {
                 copyData(
                   `http://${devboxDetail?.name}.${env.namespace}.svc.cluster.local:${item.port}`
                 )
-              }>{`http://${devboxDetail?.name}.${env.namespace}.svc.cluster.local:${item.port}`}</Text>
+              }
+            >{`http://${devboxDetail?.name}.${env.namespace}.svc.cluster.local:${item.port}`}</Text>
           </Tooltip>
-        )
+        );
       }
     },
     {
@@ -75,7 +77,7 @@ const MainBody = () => {
       key: 'externalAddress',
       render: (item: NetworkType) => {
         if (item.openPublicDomain) {
-          const address = item.customDomain || item.publicDomain
+          const address = item.customDomain || item.publicDomain;
           return (
             <Tooltip
               label={t('open_link')}
@@ -85,21 +87,24 @@ const MainBody = () => {
               fontSize={'12px'}
               fontWeight={400}
               py={2}
-              borderRadius={'md'}>
+              borderRadius={'md'}
+            >
               <Text
+                className="guide-network-address"
                 cursor="pointer"
                 color={'grayModern.600'}
                 _hover={{ textDecoration: 'underline' }}
-                onClick={() => window.open(`https://${address}`, '_blank')}>
+                onClick={() => window.open(`https://${address}`, '_blank')}
+              >
                 https://{address}
               </Text>
             </Tooltip>
-          )
+          );
         }
-        return <Text>-</Text>
+        return <Text>-</Text>;
       }
     }
-  ]
+  ];
   return (
     <Box bg={'white'} borderRadius="lg" pl={6} pt={2} pr={6} pb={6} h={'full'} borderWidth={1}>
       {/* monitor */}
@@ -131,11 +136,12 @@ const MainBody = () => {
               position={'absolute'}
               right={'2px'}
               top={'-6px'}
-              onClick={onOpen}>
+              onClick={onOpen}
+            >
               <MyIcon name="maximize" width={'16px'} fill={'#667085'} />
             </Button>
             <Box color={'grayModern.600'} fontWeight={'bold'} mb={2} fontSize={'12px'}>
-              {t('memory')}{' '}
+              {t('memory')}
               {devboxDetail?.usedMemory?.yData[devboxDetail?.usedMemory?.yData?.length - 1]}%
             </Box>
             <Box h={'60px'}>
@@ -168,7 +174,7 @@ const MainBody = () => {
       </Box>
       <MonitorModal isOpen={isOpen} onClose={onClose} />
     </Box>
-  )
-}
+  );
+};
 
-export default MainBody
+export default MainBody;
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/devbox/detail/[name]/components/Version.tsx b/frontend/providers/devbox/app/[lang]/(platform)/devbox/detail/[name]/components/Version.tsx
index 1695f78ba020..8dfbea00b2f4 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/devbox/detail/[name]/components/Version.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/devbox/detail/[name]/components/Version.tsx
@@ -1,60 +1,64 @@
-import { Box, Button, Flex, MenuButton, Text, useDisclosure } from '@chakra-ui/react'
-import { SealosMenu, useMessage } from '@sealos/ui'
-import { useQuery } from '@tanstack/react-query'
-import { customAlphabet } from 'nanoid'
-import { useTranslations } from 'next-intl'
-import { useCallback, useState } from 'react'
-import { sealosApp } from 'sealos-desktop-sdk/app'
+'use client';
 
-import { delDevboxVersionByName, getAppsByDevboxId } from '@/api/devbox'
-import DevboxStatusTag from '@/components/DevboxStatusTag'
-import MyIcon from '@/components/Icon'
-import EditVersionDesModal from '@/components/modals/EditVersionDesModal'
-import ReleaseModal from '@/components/modals/releaseModal'
-import MyTable from '@/components/MyTable'
-import { devboxIdKey, DevboxReleaseStatusEnum } from '@/constants/devbox'
-import { DevboxVersionListItemType } from '@/types/devbox'
+import { Box, Button, Flex, MenuButton, Text, useDisclosure } from '@chakra-ui/react';
+import { SealosMenu, useMessage } from '@sealos/ui';
+import { useQuery } from '@tanstack/react-query';
+import { customAlphabet } from 'nanoid';
+import { useTranslations } from 'next-intl';
+import { useCallback, useEffect, useState } from 'react';
+import { sealosApp } from 'sealos-desktop-sdk/app';
 
-import { useConfirm } from '@/hooks/useConfirm'
-import { useLoading } from '@/hooks/useLoading'
+import { delDevboxVersionByName, getAppsByDevboxId } from '@/api/devbox';
+import DevboxStatusTag from '@/components/DevboxStatusTag';
+import EditVersionDesModal from '@/components/modals/EditVersionDesModal';
+import ReleaseModal from '@/components/modals/ReleaseModal';
+import MyTable from '@/components/MyTable';
+import { devboxIdKey, DevboxReleaseStatusEnum } from '@/constants/devbox';
+import { DevboxVersionListItemType } from '@/types/devbox';
 
-import { getTemplateConfig, listPrivateTemplateRepository } from '@/api/template'
-import CreateTemplateModal from '@/app/[lang]/(platform)/template/updateTemplate/CreateTemplateModal'
-import SelectTemplateModal from '@/app/[lang]/(platform)/template/updateTemplate/SelectActionModal'
-import UpdateTemplateRepositoryModal from '@/app/[lang]/(platform)/template/updateTemplate/UpdateTemplateRepositoryModal'
-import AppSelectModal from '@/components/modals/AppSelectModal'
-import { useDevboxStore } from '@/stores/devbox'
-import { useEnvStore } from '@/stores/env'
-import { AppListItemType } from '@/types/app'
-import { parseTemplateConfig } from '@/utils/tools'
+import { useConfirm } from '@/hooks/useConfirm';
+import { useLoading } from '@/hooks/useLoading';
 
-const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz', 6)
+import { getTemplateConfig, listPrivateTemplateRepository } from '@/api/template';
+import CreateTemplateModal from '@/app/[lang]/(platform)/template/updateTemplate/CreateTemplateModal';
+import SelectTemplateModal from '@/app/[lang]/(platform)/template/updateTemplate/SelectActionModal';
+import UpdateTemplateRepositoryModal from '@/app/[lang]/(platform)/template/updateTemplate/UpdateTemplateRepositoryModal';
+import AppSelectModal from '@/components/modals/AppSelectModal';
+import useReleaseDriver from '@/hooks/useReleaseDriver';
+import { useDevboxStore } from '@/stores/devbox';
+import { useEnvStore } from '@/stores/env';
+import { AppListItemType } from '@/types/app';
+import { parseTemplateConfig } from '@/utils/tools';
+import MyIcon from '@/components/Icon';
+
+const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz', 6);
 
 const Version = () => {
-  const t = useTranslations()
-  const { message: toast } = useMessage()
-  const { Loading, setIsLoading } = useLoading()
-  const { isOpen: isOpenEdit, onOpen: onOpenEdit, onClose: onCloseEdit } = useDisclosure()
+  const { startReleaseGuide } = useReleaseDriver();
+  const t = useTranslations();
+  const { message: toast } = useMessage();
+  const { Loading, setIsLoading } = useLoading();
+  const { isOpen: isOpenEdit, onOpen: onOpenEdit, onClose: onCloseEdit } = useDisclosure();
 
-  const { env } = useEnvStore()
-  const { devboxDetail: devbox, devboxVersionList, setDevboxVersionList } = useDevboxStore()
+  const { env } = useEnvStore();
+  const { devboxDetail: devbox, devboxVersionList, setDevboxVersionList } = useDevboxStore();
 
-  const [initialized, setInitialized] = useState(false)
-  const [onOpenRelease, setOnOpenRelease] = useState(false)
-  const [onOpenSelectApp, setOnOpenSelectApp] = useState(false)
-  const [apps, setApps] = useState<AppListItemType[]>([])
-  const [deployData, setDeployData] = useState<any>(null)
-  const [currentVersion, setCurrentVersion] = useState<DevboxVersionListItemType | null>(null)
+  const [initialized, setInitialized] = useState(false);
+  const [onOpenRelease, setOnOpenRelease] = useState(false);
+  const [onOpenSelectApp, setOnOpenSelectApp] = useState(false);
+  const [apps, setApps] = useState<AppListItemType[]>([]);
+  const [deployData, setDeployData] = useState<any>(null);
+  const [currentVersion, setCurrentVersion] = useState<DevboxVersionListItemType | null>(null);
   const [updateTemplateRepo, setUpdateTemplateRepo] = useState<
     | null
     | Awaited<ReturnType<typeof listPrivateTemplateRepository>>['templateRepositoryList'][number]
-  >(null)
-  const createTemplateModalHandler = useDisclosure()
-  const selectTemplalteModalHandler = useDisclosure()
-  const updateTemplateModalHandler = useDisclosure()
+  >(null);
+  const createTemplateModalHandler = useDisclosure();
+  const selectTemplalteModalHandler = useDisclosure();
+  const updateTemplateModalHandler = useDisclosure();
   const { openConfirm, ConfirmChild } = useConfirm({
     content: 'delete_version_confirm_info'
-  })
+  });
   const { refetch } = useQuery(
     ['initDevboxVersionList'],
     () => setDevboxVersionList(devbox!.name, devbox!.id),
@@ -68,40 +72,46 @@ const Version = () => {
           ? 3000
           : false,
       onSettled() {
-        setInitialized(true)
+        setInitialized(true);
       },
       enabled: !!devbox
     }
-  )
+  );
+
+  useEffect(() => {
+    if (devboxVersionList?.length && devboxVersionList.length > 0) {
+      startReleaseGuide();
+    }
+  }, [devboxVersionList.length]);
+
   const listPrivateTemplateRepositoryQuery = useQuery(
     ['template-repository-list', 'template-repository-private'],
     () => {
       return listPrivateTemplateRepository({
         page: 1,
         pageSize: 100
-      })
+      });
     }
-  )
+  );
   const templateRepositoryList =
-    listPrivateTemplateRepositoryQuery.data?.templateRepositoryList || []
+    listPrivateTemplateRepositoryQuery.data?.templateRepositoryList || [];
   const handleDeploy = useCallback(
     async (version: DevboxVersionListItemType) => {
-      // const { releaseCommand, releaseArgs } = await getSSHRuntimeInfo(devbox.runtimeVersion)
-      if (!devbox) return
-      const result = await getTemplateConfig(devbox.templateUid)
-      const config = parseTemplateConfig(result.template.config)
-      const releaseArgs = config.releaseArgs.join(' ')
-      const releaseCommand = config.releaseCommand.join(' ')
-      const { cpu, memory, networks, name } = devbox
+      if (!devbox) return;
+      const result = await getTemplateConfig(devbox.templateUid);
+      const config = parseTemplateConfig(result.template.config);
+      const releaseArgs = config.releaseArgs.join(' ');
+      const releaseCommand = config.releaseCommand.join(' ');
+      const { cpu, memory, networks, name } = devbox;
       const newNetworks = networks.map((network) => {
         return {
           port: network.port,
           protocol: network.protocol,
           openPublicDomain: network.openPublicDomain,
           domain: env.ingressDomain
-        }
-      })
-      const imageName = `${env.registryAddr}/${env.namespace}/${devbox.name}:${version.tag}`
+        };
+      });
+      const imageName = `${env.registryAddr}/${env.namespace}/${devbox.name}:${version.tag}`;
 
       const transformData = {
         appName: `${name}-release-${nanoid()}`,
@@ -124,13 +134,13 @@ const Version = () => {
         labels: {
           [devboxIdKey]: devbox.id
         }
-      }
-      setDeployData(transformData)
-      const apps = await getAppsByDevboxId(devbox.id)
+      };
+      setDeployData(transformData);
+      const apps = await getAppsByDevboxId(devbox.id);
 
       // when: there is no app,create a new app
       if (apps.length === 0) {
-        const tempFormDataStr = encodeURIComponent(JSON.stringify(transformData))
+        const tempFormDataStr = encodeURIComponent(JSON.stringify(transformData));
         sealosApp.runEvents('openDesktopApp', {
           appKey: 'system-applaunchpad',
           pathname: '/redirect',
@@ -139,55 +149,55 @@ const Version = () => {
             type: 'InternalAppCall',
             formData: tempFormDataStr
           }
-        })
+        });
       }
 
       // when: there have apps,show the app select modal
       if (apps.length >= 1) {
-        setApps(apps)
-        setOnOpenSelectApp(true)
+        setApps(apps);
+        setOnOpenSelectApp(true);
       }
     },
     [devbox, env.ingressDomain, env.namespace, env.registryAddr]
-  )
+  );
   const handleDelDevboxVersion = useCallback(
     async (versionName: string) => {
       try {
-        setIsLoading(true)
-        await delDevboxVersionByName(versionName)
+        setIsLoading(true);
+        await delDevboxVersionByName(versionName);
         toast({
           title: t('delete_successful'),
           status: 'success'
-        })
-        let retryCount = 0
-        const maxRetries = 3
-        const retryInterval = 3000
+        });
+        let retryCount = 0;
+        const maxRetries = 3;
+        const retryInterval = 3000;
 
         const retry = async () => {
           if (retryCount < maxRetries) {
-            await new Promise((resolve) => setTimeout(resolve, retryInterval))
-            await refetch()
-            retryCount++
+            await new Promise((resolve) => setTimeout(resolve, retryInterval));
+            await refetch();
+            retryCount++;
           }
-        }
-        retry()
+        };
+        retry();
       } catch (error: any) {
         toast({
           title: typeof error === 'string' ? error : error.message || t('delete_failed'),
           status: 'error'
-        })
-        console.error(error)
+        });
+        console.error(error);
       }
-      setIsLoading(false)
+      setIsLoading(false);
     },
     [setIsLoading, toast, t, refetch]
-  )
+  );
 
   const columns: {
-    title: string
-    dataIndex?: keyof DevboxVersionListItemType
-    key: string
-    render?: (item: DevboxVersionListItemType) => JSX.Element
+    title: string;
+    dataIndex?: keyof DevboxVersionListItemType;
+    key: string;
+    render?: (item: DevboxVersionListItemType) => JSX.Element;
   }[] = [
     {
       title: t('version_number'),
@@ -210,7 +220,7 @@ const Version = () => {
       dataIndex: 'createTime',
       key: 'createTime',
       render: (item: DevboxVersionListItemType) => {
-        return <Text color={'grayModern.600'}>{item.createTime}</Text>
+        return <Text color={'grayModern.600'}>{item.createTime}</Text>;
       }
     },
     {
@@ -230,6 +240,7 @@ const Version = () => {
       render: (item: DevboxVersionListItemType) => (
         <Flex alignItems={'center'}>
           <Button
+            className="guide-online-button"
             mr={5}
             height={'27px'}
             w={'60px'}
@@ -242,13 +253,20 @@ const Version = () => {
               color: 'brightBlue.600'
             }}
             isDisabled={item.status.value !== DevboxReleaseStatusEnum.Success}
-            onClick={() => handleDeploy(item)}>
+            onClick={() => handleDeploy(item)}
+          >
             {t('deploy')}
           </Button>
           <SealosMenu
             width={100}
             Button={
-              <MenuButton as={Button} variant={'square'} boxSize={'32px'} data-group>
+              <MenuButton
+                as={Button}
+                variant={'square'}
+                boxSize={'32px'}
+                data-group
+                isDisabled={item?.status?.value !== 'Success'}
+              >
                 <MyIcon
                   name={'more'}
                   color={'grayModern.600'}
@@ -268,8 +286,8 @@ const Version = () => {
                   </>
                 ),
                 onClick: () => {
-                  setCurrentVersion(item)
-                  onOpenEdit()
+                  setCurrentVersion(item);
+                  onOpenEdit();
                 }
               },
               {
@@ -280,13 +298,13 @@ const Version = () => {
                   </>
                 ),
                 onClick: () => {
-                  setCurrentVersion(item)
+                  setCurrentVersion(item);
                   // onOpenEdit()
                   // openTemplateModal({templateState: })
                   if (templateRepositoryList.length > 0) {
-                    selectTemplalteModalHandler.onOpen()
+                    selectTemplalteModalHandler.onOpen();
                   } else {
-                    createTemplateModalHandler.onOpen()
+                    createTemplateModalHandler.onOpen();
                   }
                 }
               },
@@ -310,7 +328,7 @@ const Version = () => {
         </Flex>
       )
     }
-  ]
+  ];
   return (
     <Box
       borderWidth={1}
@@ -320,7 +338,8 @@ const Version = () => {
       pr={6}
       bg={'white'}
       h={'full'}
-      position={'relative'}>
+      position={'relative'}
+    >
       <Flex alignItems="center" justifyContent={'space-between'} mb={5}>
         <Flex alignItems={'center'}>
           <MyIcon name="list" w={'15px'} h={'15px'} mr={'5px'} color={'grayModern.600'} />
@@ -329,6 +348,7 @@ const Version = () => {
           </Text>
         </Flex>
         <Button
+          className="guide-release-button"
           onClick={() => setOnOpenRelease(true)}
           bg={'white'}
           color={'grayModern.600'}
@@ -337,7 +357,8 @@ const Version = () => {
           leftIcon={<MyIcon name="version" />}
           _hover={{
             color: 'brightBlue.600'
-          }}>
+          }}
+        >
           {t('release_version')}
         </Button>
       </Flex>
@@ -348,7 +369,8 @@ const Version = () => {
           alignItems={'center'}
           mt={10}
           flexDirection={'column'}
-          gap={4}>
+          gap={4}
+        >
           <MyIcon name="empty" w={'40px'} h={'40px'} color={'white'} />
           <Box textAlign={'center'} color={'grayModern.600'}>
             {t('no_versions')}
@@ -374,7 +396,7 @@ const Version = () => {
         <ReleaseModal
           onSuccess={refetch}
           onClose={() => {
-            setOnOpenRelease(false)
+            setOnOpenRelease(false);
           }}
           devbox={{ ...devbox, sshPort: devbox.sshPort || 0 }}
         />
@@ -398,9 +420,9 @@ const Version = () => {
         <SelectTemplateModal
           onOpenCreate={createTemplateModalHandler.onOpen}
           onOpenUdate={(uid) => {
-            const repo = templateRepositoryList.find((item) => item.uid === uid)
-            setUpdateTemplateRepo(repo || null)
-            updateTemplateModalHandler.onOpen()
+            const repo = templateRepositoryList.find((item) => item.uid === uid);
+            setUpdateTemplateRepo(repo || null);
+            updateTemplateModalHandler.onOpen();
           }}
           templateRepositoryList={templateRepositoryList}
           isOpen={selectTemplalteModalHandler.isOpen}
@@ -416,7 +438,7 @@ const Version = () => {
         />
       )}
     </Box>
-  )
-}
+  );
+};
 
-export default Version
+export default Version;
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/devbox/detail/[name]/page.tsx b/frontend/providers/devbox/app/[lang]/(platform)/devbox/detail/[name]/page.tsx
index 7f64bf8a4bdd..90eaad9f2081 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/devbox/detail/[name]/page.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/devbox/detail/[name]/page.tsx
@@ -1,69 +1,74 @@
-'use client'
+'use client';
 
-import { Box, Flex } from '@chakra-ui/react'
-import { useQuery } from '@tanstack/react-query'
-import { useMemo, useState } from 'react'
+import { Box, Flex } from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
+import { useMemo, useState } from 'react';
 
-import { useLoading } from '@/hooks/useLoading'
-import BasicInfo from './components/BasicInfo'
-import Header from './components/Header'
-import MainBody from './components/MainBody'
-import Version from './components/Version'
+import { useLoading } from '@/hooks/useLoading';
+import BasicInfo from './components/BasicInfo';
+import Header from './components/Header';
+import MainBody from './components/MainBody';
+import Version from './components/Version';
 
-import { useDevboxStore } from '@/stores/devbox'
-import { useEnvStore } from '@/stores/env'
-import { useGlobalStore } from '@/stores/global'
+import { useDevboxStore } from '@/stores/devbox';
+import { useEnvStore } from '@/stores/env';
+import { useGlobalStore } from '@/stores/global';
+import useDetailDriver from '@/hooks/useDetailDriver';
 
 const DevboxDetailPage = ({ params }: { params: { name: string } }) => {
-  const devboxName = params.name
-  const { Loading } = useLoading()
+  const devboxName = params.name;
+  const { Loading } = useLoading();
+  const { handleUserGuide } = useDetailDriver();
 
-  const { env } = useEnvStore()
-  const { screenWidth } = useGlobalStore()
+  const { env } = useEnvStore();
+  const { screenWidth } = useGlobalStore();
   const { devboxDetail, setDevboxDetail, loadDetailMonitorData, intervalLoadPods } =
-    useDevboxStore()
+    useDevboxStore();
 
-  const [showSlider, setShowSlider] = useState(false)
-  const [initialized, setInitialized] = useState(false)
-  const isLargeScreen = useMemo(() => screenWidth > 1280, [screenWidth])
+  const [showSlider, setShowSlider] = useState(false);
+  const [initialized, setInitialized] = useState(false);
+  const isLargeScreen = useMemo(() => screenWidth > 1280, [screenWidth]);
 
   const { refetch, data } = useQuery(
-    ['initDevboxDetail',],
+    ['initDevboxDetail'],
     () => setDevboxDetail(devboxName, env.sealosDomain),
     {
       onSettled() {
-        setInitialized(true)
+        setInitialized(true);
+      },
+      onSuccess: () => {
+        handleUserGuide();
       }
     }
-  )
+  );
   useQuery(
     ['devbox-detail-pod'],
     () => {
-      if (devboxDetail?.isPause) return null
-      return intervalLoadPods(devboxName, true)
+      if (devboxDetail?.isPause) return null;
+      return intervalLoadPods(devboxName, true);
     },
     {
       enabled: !devboxDetail?.isPause,
       refetchOnMount: true,
       refetchInterval: 3000
     }
-  )
+  );
 
   useQuery(
     ['loadDetailMonitorData', devboxName, devboxDetail?.isPause],
     () => {
-      if (devboxDetail?.isPause) return null
-      return loadDetailMonitorData(devboxName)
+      if (devboxDetail?.isPause) return null;
+      return loadDetailMonitorData(devboxName);
     },
     {
       refetchOnMount: true,
-      refetchInterval: 2 * 60 * 1000,
+      refetchInterval: 2 * 60 * 1000
     }
-  )
+  );
   return (
-      <Flex p={5} h={'100vh'} px={'32px'} flexDirection={'column'}>
-        <Loading loading={!initialized} />
-        {devboxDetail && initialized && (
+    <Flex p={5} h={'100vh'} px={'32px'} flexDirection={'column'}>
+      <Loading loading={!initialized} />
+      {devboxDetail && initialized && (
         <>
           <Box mb={6}>
             <Header
@@ -87,11 +92,12 @@ const DevboxDetailPage = ({ params }: { params: { name: string } }) => {
               {...(isLargeScreen
                 ? {}
                 : {
-                  position: 'absolute',
-                  left: 0,
-                  boxShadow: '7px 4px 12px rgba(165, 172, 185, 0.25)',
-                  transform: `translateX(${showSlider ? '0' : '-500'}px)`
-                })}>
+                    position: 'absolute',
+                    left: 0,
+                    boxShadow: '7px 4px 12px rgba(165, 172, 185, 0.25)',
+                    transform: `translateX(${showSlider ? '0' : '-500'}px)`
+                  })}
+            >
               <BasicInfo />
             </Box>
             <Flex
@@ -106,7 +112,8 @@ const DevboxDetailPage = ({ params }: { params: { name: string } }) => {
                 },
                 msOverflowStyle: 'none', // IE and Edge
                 scrollbarWidth: 'none' // Firefox
-              }}>
+              }}
+            >
               <Box mb={4} bg={'white'} borderRadius={'lg'} flexShrink={0} minH={'257px'}>
                 <MainBody />
               </Box>
@@ -127,9 +134,9 @@ const DevboxDetailPage = ({ params }: { params: { name: string } }) => {
             />
           )}
         </>
-        )}
-      </Flex>
-  )
-}
+      )}
+    </Flex>
+  );
+};
 
-export default DevboxDetailPage
+export default DevboxDetailPage;
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/layout.tsx b/frontend/providers/devbox/app/[lang]/(platform)/layout.tsx
index cbac0a74a991..a45ed63ebd19 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/layout.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/layout.tsx
@@ -1,147 +1,146 @@
-'use client'
+'use client';
 
-import { usePathname, useRouter } from '@/i18n'
-import throttle from 'lodash/throttle'
-import { useSearchParams } from 'next/navigation'
-import { useEffect, useState } from 'react'
-import { EVENT_NAME } from 'sealos-desktop-sdk'
-import { createSealosApp, sealosApp } from 'sealos-desktop-sdk/app'
+import { usePathname, useRouter } from '@/i18n';
+import throttle from 'lodash/throttle';
+import { useSearchParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { EVENT_NAME } from 'sealos-desktop-sdk';
+import { createSealosApp, sealosApp } from 'sealos-desktop-sdk/app';
 
 // import { useConfirm } from '@/hooks/useConfirm'
-import { useLoading } from '@/hooks/useLoading'
+import { useLoading } from '@/hooks/useLoading';
 
-import { useEnvStore } from '@/stores/env'
-import { useGlobalStore } from '@/stores/global'
-import { usePriceStore } from '@/stores/price'
+import { useEnvStore } from '@/stores/env';
+import { useGlobalStore } from '@/stores/global';
+import { usePriceStore } from '@/stores/price';
 
-import { initUser } from '@/api/template'
-import ChakraProvider from '@/components/providers/MyChakraProvider'
-import RouteHandlerProvider from '@/components/providers/MyRouteHandlerProvider'
-import { useConfirm } from '@/hooks/useConfirm'
-import { getLangStore, setLangStore } from '@/utils/cookie'
-import { cleanSession, setSessionToSessionStorage } from '@/utils/user'
-import { useQueryClient } from '@tanstack/react-query'
-import TemplateModal from './template/TemplateModal'
+import { initUser } from '@/api/template';
+import ChakraProvider from '@/components/providers/MyChakraProvider';
+import RouteHandlerProvider from '@/components/providers/MyRouteHandlerProvider';
+import { useConfirm } from '@/hooks/useConfirm';
+import { getLangStore, setLangStore } from '@/utils/cookie';
+import { cleanSession, setSessionToSessionStorage } from '@/utils/user';
+import { useQueryClient } from '@tanstack/react-query';
+import TemplateModal from './template/TemplateModal';
 
 export default function PlatformLayout({ children }: { children: React.ReactNode }) {
-  const router = useRouter()
-  const pathname = usePathname()
-  const { Loading } = useLoading()
-  const { setEnv, env } = useEnvStore()
-  const searchParams = useSearchParams()
-  const { setSourcePrice } = usePriceStore()
-  const [refresh, setRefresh] = useState(false)
-  const { setScreenWidth, loading, setLastRoute } = useGlobalStore()
+  const router = useRouter();
+  const pathname = usePathname();
+  const { Loading } = useLoading();
+  const { setEnv, env } = useEnvStore();
+  const searchParams = useSearchParams();
+  const { setSourcePrice } = usePriceStore();
+  const [refresh, setRefresh] = useState(false);
+  const { setScreenWidth, loading, setLastRoute } = useGlobalStore();
   const { openConfirm, ConfirmChild } = useConfirm({
     title: 'jump_prompt',
     content: 'not_allow_standalone_use'
-  })
-  const queryClient = useQueryClient()
-  const [init, setInit] = useState(false)
+  });
+  const queryClient = useQueryClient();
+  const [init, setInit] = useState(false);
   // init session
   useEffect(() => {
-    const response = createSealosApp()
-      ; (async () => {
-        try {
-          
-          const newSession = JSON.stringify(await sealosApp.getSession())
-          const oldSession = sessionStorage.getItem('session')
-          if(newSession && newSession !== oldSession) {
-            sessionStorage.setItem('session', newSession)
-            return window.location.reload()
-          }
-          // init user 
-          console.log('devbox: app init success')
-          const token = (await initUser())
-          if (!!token) {
-            setSessionToSessionStorage(token)
-            setInit(true)
-          }
-          queryClient.clear()
-        } catch (err) {
-          console.log('devbox: app is not running in desktop')
-          if (!process.env.NEXT_PUBLIC_MOCK_USER) {
-            cleanSession()
-            openConfirm(() => {
-              window.open(`https://${env.sealosDomain}`, '_self')
-            })()
-          }
+    const response = createSealosApp();
+    (async () => {
+      try {
+        const newSession = JSON.stringify(await sealosApp.getSession());
+        const oldSession = sessionStorage.getItem('session');
+        if (newSession && newSession !== oldSession) {
+          sessionStorage.setItem('session', newSession);
+          return window.location.reload();
         }
-      })()
-    return response
+        // init user
+        console.log('devbox: app init success');
+        const token = await initUser();
+        if (!!token) {
+          setSessionToSessionStorage(token);
+          setInit(true);
+        }
+        queryClient.clear();
+      } catch (err) {
+        console.log('devbox: app is not running in desktop');
+        if (!process.env.NEXT_PUBLIC_MOCK_USER) {
+          cleanSession();
+          openConfirm(() => {
+            window.open(`https://${env.sealosDomain}`, '_self');
+          })();
+        }
+      }
+    })();
+    return response;
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, []);
 
   useEffect(() => {
-    if (!init) return
-    setSourcePrice()
+    if (!init) return;
+    setSourcePrice();
     // setRuntime()
-    setEnv()
+    setEnv();
     const changeI18n = async (data: any) => {
-      const lastLang = getLangStore()
-      const newLang = data.currentLanguage
+      const lastLang = getLangStore();
+      const newLang = data.currentLanguage;
       if (lastLang !== newLang) {
-        router.push(pathname, { locale: newLang })
-        setLangStore(newLang)
-        setRefresh((state) => !state)
+        router.push(pathname, { locale: newLang });
+        setLangStore(newLang);
+        setRefresh((state) => !state);
       }
-    }
-
-      ; (async () => {
-        try {
-          const lang = await sealosApp.getLanguage()
-          changeI18n({
-            currentLanguage: lang.lng
-          })
-        } catch (error) {
-          changeI18n({
-            currentLanguage: 'zh'
-          })
-        }
-      })()
+    };
+
+    (async () => {
+      try {
+        const lang = await sealosApp.getLanguage();
+        changeI18n({
+          currentLanguage: lang.lng
+        });
+      } catch (error) {
+        changeI18n({
+          currentLanguage: 'en'
+        });
+      }
+    })();
 
-    return sealosApp?.addAppEventListen(EVENT_NAME.CHANGE_I18N, changeI18n)
+    return sealosApp?.addAppEventListen(EVENT_NAME.CHANGE_I18N, changeI18n);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [init])
+  }, [init]);
 
   // add resize event
   useEffect(() => {
     const resize = throttle((e: Event) => {
-      const documentWidth = document.documentElement.clientWidth || document.body.clientWidth
-      setScreenWidth(documentWidth)
-    }, 200)
-    window.addEventListener('resize', resize)
-    const documentWidth = document.documentElement.clientWidth || document.body.clientWidth
-    setScreenWidth(documentWidth)
+      const documentWidth = document.documentElement.clientWidth || document.body.clientWidth;
+      setScreenWidth(documentWidth);
+    }, 200);
+    window.addEventListener('resize', resize);
+    const documentWidth = document.documentElement.clientWidth || document.body.clientWidth;
+    setScreenWidth(documentWidth);
 
     return () => {
-      window.removeEventListener('resize', resize)
-    }
-  }, [setScreenWidth])
+      window.removeEventListener('resize', resize);
+    };
+  }, [setScreenWidth]);
 
   // record route
   useEffect(() => {
     return () => {
-      setLastRoute(pathname)
-    }
+      setLastRoute(pathname);
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pathname])
+  }, [pathname]);
 
   useEffect(() => {
-    const lang = getLangStore() || 'zh'
-    router.push(pathname, { locale: lang })
+    const lang = getLangStore() || 'zh';
+    router.push(pathname, { locale: lang });
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [refresh, pathname])
+  }, [refresh, pathname]);
 
   useEffect(() => {
-    const page = searchParams.get('page')
-    const runtime = searchParams.get('runtime')
+    const page = searchParams.get('page');
+    const runtime = searchParams.get('runtime');
 
-    const path = `${page ? `/devbox/${page}` : ''}${runtime ? `?runtime=${runtime}` : ''}`
+    const path = `${page ? `/devbox/${page}` : ''}${runtime ? `?runtime=${runtime}` : ''}`;
 
-    router.push(path)
-  }, [router, searchParams])
+    router.push(path);
+  }, [router, searchParams]);
 
   return (
     <ChakraProvider>
@@ -152,5 +151,5 @@ export default function PlatformLayout({ children }: { children: React.ReactNode
         <TemplateModal />
       </RouteHandlerProvider>
     </ChakraProvider>
-  )
+  );
 }
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/template/TagCheckbox.tsx b/frontend/providers/devbox/app/[lang]/(platform)/template/TagCheckbox.tsx
index b9e182097b98..fe22f46f08a4 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/template/TagCheckbox.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/template/TagCheckbox.tsx
@@ -2,16 +2,10 @@ import { CheckIcon } from '@chakra-ui/icons';
 import { Box, chakra, CheckboxProps, useCheckbox } from '@chakra-ui/react';
 
 export const TagCheckbox = (props: CheckboxProps) => {
-  const { state, getCheckboxProps, getInputProps, getLabelProps, htmlProps } = 
-    useCheckbox(props);
+  const { state, getCheckboxProps, getInputProps, getLabelProps, htmlProps } = useCheckbox(props);
 
   return (
-    <chakra.label
-      display="flex"
-      alignItems="center"
-      gridColumnGap="8px"
-      {...htmlProps}
-    >
+    <chakra.label display="flex" alignItems="center" gridColumnGap="8px" {...htmlProps}>
       <input {...getInputProps()} hidden />
       <Box
         {...getCheckboxProps()}
@@ -24,24 +18,18 @@ export const TagCheckbox = (props: CheckboxProps) => {
         borderRadius="4px"
         border="1px solid"
         cursor={'pointer'}
-        {
-          ...state.isChecked ?  {
-            bg: "blue.50",
-            borderColor: "brightBlue.500",
-            boxShadow: "0px 0px 0px 2.4px rgba(33, 155, 244, 0.15)"
-          }: {
-            borderColor: "grayModern.300",
-          }
-        }
+        {...(state.isChecked
+          ? {
+              bg: 'blue.50',
+              borderColor: 'brightBlue.500',
+              boxShadow: '0px 0px 0px 2.4px rgba(33, 155, 244, 0.15)'
+            }
+          : {
+              borderColor: 'grayModern.300'
+            })}
         transition="all 0.2s"
       >
-        {state.isChecked && (
-          <CheckIcon
-            w="12px"
-            h="12px"
-            color="#219BF4"
-          />
-        )}
+        {state.isChecked && <CheckIcon w="12px" h="12px" color="#219BF4" />}
       </Box>
       <Box {...getLabelProps()}>{props.children}</Box>
     </chakra.label>
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/template/TemplateModal/PrivatePanel.tsx b/frontend/providers/devbox/app/[lang]/(platform)/template/TemplateModal/PrivatePanel.tsx
index f5aacfce7826..2952f548d019 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/template/TemplateModal/PrivatePanel.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/template/TemplateModal/PrivatePanel.tsx
@@ -1,117 +1,129 @@
-import { listPrivateTemplateRepository } from "@/api/template";
-import MyIcon from "@/components/Icon";
-import SwitchPage from "@/components/SwitchPage";
-import { Box, Flex, Grid, TabPanel, Text } from "@chakra-ui/react";
-import { useQuery } from "@tanstack/react-query";
-import { useTranslations } from "next-intl";
-import { useEffect, useState } from "react";
-import TemplateCard from "./TemplateCard";
+import { listPrivateTemplateRepository } from '@/api/template';
+import MyIcon from '@/components/Icon';
+import SwitchPage from '@/components/SwitchPage';
+import { Box, Flex, Grid, TabPanel, Text } from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import TemplateCard from './TemplateCard';
 
-export default function PrivatePanel({
-  search, }: {
-    search: string,
-  }) {
+export default function PrivatePanel({ search }: { search: string }) {
   const [pageQueryBody, setPageQueryBody] = useState({
     page: 1,
     pageSize: 30,
     totalItems: 0,
-    totalPage: 0,
-  })
+    totalPage: 0
+  });
 
   // reset query
   useEffect(() => {
-    if (!search) return
-    setPageQueryBody(prev => ({
+    if (!search) return;
+    setPageQueryBody((prev) => ({
       ...prev,
       page: 1,
       totalItems: 0,
-      totalPage: 0,
-    }))
-  }, [search])
+      totalPage: 0
+    }));
+  }, [search]);
   // reset query
   const queryBody = {
     page: pageQueryBody.page,
     pageSize: pageQueryBody.pageSize,
-    search,
-  }
+    search
+  };
   const listPrivateTemplateReposistory = useQuery(
     ['template-repository-list', 'template-repository-private', queryBody],
     () => {
-      return listPrivateTemplateRepository(queryBody)
+      return listPrivateTemplateRepository(queryBody);
     }
-  )
+  );
 
   useEffect(() => {
-    if (listPrivateTemplateReposistory.isFetched && listPrivateTemplateReposistory.isSuccess && listPrivateTemplateReposistory.data) {
-      const data = listPrivateTemplateReposistory.data.page
-      setPageQueryBody(prev => ({
+    if (
+      listPrivateTemplateReposistory.isFetched &&
+      listPrivateTemplateReposistory.isSuccess &&
+      listPrivateTemplateReposistory.data
+    ) {
+      const data = listPrivateTemplateReposistory.data.page;
+      setPageQueryBody((prev) => ({
         ...prev,
         totalItems: data.totalItems || 0,
         totalPage: data.totalPage || 0,
         page: data.page || 1
-      }))
+      }));
     }
-  }, [listPrivateTemplateReposistory.data, listPrivateTemplateReposistory.isFetched, listPrivateTemplateReposistory.isSuccess])
+  }, [
+    listPrivateTemplateReposistory.data,
+    listPrivateTemplateReposistory.isFetched,
+    listPrivateTemplateReposistory.isSuccess
+  ]);
 
-  const t = useTranslations()
-  const privateTempalteReposistoryList = listPrivateTemplateReposistory.data?.templateRepositoryList || []
-  return <TabPanel p={0} height={'full'}>
-    <Flex flex="1" direction={'column'} h={'full'}>
-      <Text
-        color={'grayModern.600'}
-        mb="16px"
-        fontSize='18px'
-        fontWeight={500}>
-        {t('my_templates')}
-      </Text>
-      <Box h={'0'} flex={1} overflow={'auto'} position={'relative'} >
-        <Grid templateColumns="repeat(auto-fill, minmax(clamp(210px, 300px, 438px), 1fr));"
-          gap="20px"
-          position={'absolute'} inset={0} gridAutoRows={'max-content'}>
-          {privateTempalteReposistoryList.map((tr) => (
-            <TemplateCard key={tr.uid}
-              isPublic={tr.isPublic}
-              isDisabled={tr.templates.length === 0}
-              iconId={tr.iconId || ''}
-              templateRepositoryName={tr.name}
-              templateRepositoryDescription={tr.description}
-              templateRepositoryUid={tr.uid}
-              inPublicStore={false}
-              tags={tr.templateRepositoryTags.map(t => t.tag)} />
-          ))}
-        </Grid>
-        {privateTempalteReposistoryList.length === 0 && <Flex
-          justifyContent={'center'}
-          flex={1}
-          alignItems={'center'}
-          flexDirection={'column'}
-          gap={4}
-          h='full'
+  const t = useTranslations();
+  const privateTempalteReposistoryList =
+    listPrivateTemplateReposistory.data?.templateRepositoryList || [];
+  return (
+    <TabPanel p={0} height={'full'}>
+      <Flex flex="1" direction={'column'} h={'full'}>
+        <Text color={'grayModern.600'} mb="16px" fontSize="18px" fontWeight={500}>
+          {t('my_templates')}
+        </Text>
+        <Box h={'0'} flex={1} overflow={'auto'} position={'relative'}>
+          <Grid
+            templateColumns="repeat(auto-fill, minmax(clamp(210px, 300px, 438px), 1fr));"
+            gap="20px"
+            position={'absolute'}
+            inset={0}
+            gridAutoRows={'max-content'}
           >
-          <MyIcon name="empty" w={'40px'} h={'40px'} color={'white'} />
-          <Box textAlign={'center'} color={'grayModern.600'}>
-            {t('no_template_repository_versions')}
-          </Box>
-        </Flex>}
-      </Box>
-      <Flex>
-        <SwitchPage
-          ml={'auto'}
-          mr={'0'}
-          pageSize={pageQueryBody.page}
-          totalPage={pageQueryBody.totalPage}
-          totalItem={pageQueryBody.totalItems}
-          currentPage={pageQueryBody.page}
-          setCurrentPage={(currentPage) => {
-            setPageQueryBody(page => {
-              return {
-                ...page,
-                page: currentPage,
-              }
-            })
-          }}
-        />
+            {privateTempalteReposistoryList.map((tr) => (
+              <TemplateCard
+                key={tr.uid}
+                isPublic={tr.isPublic}
+                isDisabled={tr.templates.length === 0}
+                iconId={tr.iconId || ''}
+                templateRepositoryName={tr.name}
+                templateRepositoryDescription={tr.description}
+                templateRepositoryUid={tr.uid}
+                inPublicStore={false}
+                tags={tr.templateRepositoryTags.map((t) => t.tag)}
+              />
+            ))}
+          </Grid>
+          {privateTempalteReposistoryList.length === 0 && (
+            <Flex
+              justifyContent={'center'}
+              flex={1}
+              alignItems={'center'}
+              flexDirection={'column'}
+              gap={4}
+              h="full"
+            >
+              <MyIcon name="empty" w={'40px'} h={'40px'} color={'white'} />
+              <Box textAlign={'center'} color={'grayModern.600'}>
+                {t('no_template_repository_versions')}
+              </Box>
+            </Flex>
+          )}
+        </Box>
+        <Flex>
+          <SwitchPage
+            ml={'auto'}
+            mr={'0'}
+            pageSize={pageQueryBody.page}
+            totalPage={pageQueryBody.totalPage}
+            totalItem={pageQueryBody.totalItems}
+            currentPage={pageQueryBody.page}
+            setCurrentPage={(currentPage) => {
+              setPageQueryBody((page) => {
+                return {
+                  ...page,
+                  page: currentPage
+                };
+              });
+            }}
+          />
+        </Flex>
       </Flex>
-    </Flex>
-  </TabPanel>
-}
\ No newline at end of file
+    </TabPanel>
+  );
+}
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/template/TemplateModal/PromptModal.tsx b/frontend/providers/devbox/app/[lang]/(platform)/template/TemplateModal/PromptModal.tsx
index aa76acb2d505..b15a5bb483d8 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/template/TemplateModal/PromptModal.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/template/TemplateModal/PromptModal.tsx
@@ -1,39 +1,66 @@
-import MyIcon from "@/components/Icon"
-import { Button, ButtonGroup, Flex, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, ModalProps, Text } from "@chakra-ui/react"
-import { useTranslations } from "next-intl"
+import MyIcon from '@/components/Icon';
+import {
+  Button,
+  ButtonGroup,
+  Flex,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  ModalProps,
+  Text
+} from '@chakra-ui/react';
+import { useTranslations } from 'next-intl';
 
-const OverviewTemplateVersionModal = ({ onSubmit, version, template, ...props }: Omit<ModalProps, 'children'> & { onSubmit: () => void, version: string, template: string }) => {
-  const t = useTranslations()
+const OverviewTemplateVersionModal = ({
+  onSubmit,
+  version,
+  template,
+  ...props
+}: Omit<ModalProps, 'children'> & { onSubmit: () => void; version: string; template: string }) => {
+  const t = useTranslations();
   return (
     <Modal lockFocusAcrossFrames={false} {...props} onClose={props.onClose}>
       <ModalOverlay />
-      <ModalContent maxW={'400px'} margin={'auto'} >
+      <ModalContent maxW={'400px'} margin={'auto'}>
         <ModalHeader>
           <Flex gap={'10px'}>
-            <MyIcon name='warning' boxSize={'20px'} />
+            <MyIcon name="warning" boxSize={'20px'} />
             <Text fontSize={'16px'}>{t('prompt')}</Text>
           </Flex>
         </ModalHeader>
         <ModalBody px={'36px'} py={'24px'}>
           <ModalCloseButton />
           {t.rich('overview_template_version_prompt', {
-            version: <Text display={'inline'}  fontWeight={'600'}>{version}</Text> as any,
-            name:  <Text display={'inline'} fontWeight={'600'}>{template}</Text> as any
+            version: (
+              <Text display={'inline'} fontWeight={'600'}>
+                {version}
+              </Text>
+            ) as any,
+            name: (
+              <Text display={'inline'} fontWeight={'600'}>
+                {template}
+              </Text>
+            ) as any
           })}
         </ModalBody>
         <ModalFooter pb={'24px'}>
           <ButtonGroup variant={'solid'}>
-            <Button variant={'outline'}
+            <Button
+              variant={'outline'}
               onClick={() => {
-                props.onClose()
+                props.onClose();
               }}
             >
               {t('cancel')}
             </Button>
             <Button
               onClick={() => {
-                onSubmit()
-                props.onClose()
+                onSubmit();
+                props.onClose();
               }}
             >
               {t('continue')}
@@ -42,6 +69,6 @@ const OverviewTemplateVersionModal = ({ onSubmit, version, template, ...props }:
         </ModalFooter>
       </ModalContent>
     </Modal>
-  )
-}
-export default OverviewTemplateVersionModal
\ No newline at end of file
+  );
+};
+export default OverviewTemplateVersionModal;
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/template/TemplateModal/PublicPanel.tsx b/frontend/providers/devbox/app/[lang]/(platform)/template/TemplateModal/PublicPanel.tsx
index dd92a6e73e2e..fda255ad280f 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/template/TemplateModal/PublicPanel.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/template/TemplateModal/PublicPanel.tsx
@@ -1,249 +1,247 @@
-import { listTag, listTemplateRepository } from "@/api/template";
-import SwitchPage from "@/components/SwitchPage";
-import { Tag, TagType } from "@/prisma/generated/client";
-import { createTagSelectorStore } from "@/stores/tagSelector";
-import { getLangStore } from "@/utils/cookie";
-import { Box, Divider, Flex, FlexProps, Grid, Heading, TabPanel, Text } from "@chakra-ui/react";
-import { useQuery } from "@tanstack/react-query";
-import { useTranslations } from "next-intl";
-import { createContext, useContext, useEffect, useState } from "react";
-import { useStore } from "zustand";
-import { TagCheckbox } from "../TagCheckbox";
-import TemplateCard from "./TemplateCard";
-const TagSelectorStoreCtx = createContext<ReturnType<typeof createTagSelectorStore> | null>(null)
+import { listTag, listTemplateRepository } from '@/api/template';
+import SwitchPage from '@/components/SwitchPage';
+import { Tag, TagType } from '@/prisma/generated/client';
+import { createTagSelectorStore } from '@/stores/tagSelector';
+import { getLangStore } from '@/utils/cookie';
+import { Box, Divider, Flex, FlexProps, Grid, Heading, TabPanel, Text } from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
+import { createContext, useContext, useEffect, useState } from 'react';
+import { useStore } from 'zustand';
+import { TagCheckbox } from '../TagCheckbox';
+import TemplateCard from './TemplateCard';
+const TagSelectorStoreCtx = createContext<ReturnType<typeof createTagSelectorStore> | null>(null);
 const TagItem = ({ tag, ...props }: { tag: Tag } & FlexProps) => {
-  const store = useContext(TagSelectorStoreCtx)
-  if (!store) throw new Error('TagSelectorStoreCtx is null')
-  const { selectedTagList, setSelectedTag } = useStore(store,)
-  const lastLang = getLangStore()
-  return !tag ? null : <Flex
-    align="center"
-    gap="8px"
-    h={'36px'}
-    {...props}
-  >
-    <TagCheckbox
-      ml={tag.type !== TagType.OFFICIAL_CONTENT ? '10px' : '0'}
-      defaultChecked={tag.type === TagType.OFFICIAL_CONTENT}
-      isChecked={selectedTagList.has(tag.uid)}
-      onChange={(e) => {
-        const selected = e.target.checked
-        setSelectedTag(tag.uid, selected)
-      }}
-    ></TagCheckbox>
-    <Text fontWeight={500} fontSize={'14px'} color={'grayModern.600'}>
-      {
-        tag[lastLang === 'zh' ? 'zhName' : 'enName'] || tag.name
-      }
-    </Text>
-  </Flex>
-}
-const TagList = ({ tags, title }: { tags: Tag[], title: string }) => {
-  const t = useTranslations()
-  return <Box>
-    <Text color={'grayModern.600'} mb={'12px'}
-      fontWeight={'500'}
-    >{title}</Text>
-    <Flex direction="column" gap="4px" >{
-      tags.map((tag, index) => (
-        <TagItem
-          borderRadius={'6px'}
-          key={tag.uid}
-          tag={tag}
-          bgColor={'grayModern.25'}
-        >
-        </TagItem>))}
+  const store = useContext(TagSelectorStoreCtx);
+  if (!store) throw new Error('TagSelectorStoreCtx is null');
+  const { selectedTagList, setSelectedTag } = useStore(store);
+  const lastLang = getLangStore();
+  return !tag ? null : (
+    <Flex align="center" gap="8px" h={'36px'} {...props}>
+      <TagCheckbox
+        ml={tag.type !== TagType.OFFICIAL_CONTENT ? '10px' : '0'}
+        defaultChecked={tag.type === TagType.OFFICIAL_CONTENT}
+        isChecked={selectedTagList.has(tag.uid)}
+        onChange={(e) => {
+          const selected = e.target.checked;
+          setSelectedTag(tag.uid, selected);
+        }}
+      ></TagCheckbox>
+      <Text fontWeight={500} fontSize={'14px'} color={'grayModern.600'}>
+        {tag[lastLang === 'zh' ? 'zhName' : 'enName'] || tag.name}
+      </Text>
     </Flex>
-  </Box>
-}
-const PublicPanel = ({
-  search, }: {
-    search: string,
-  }) => {
-  const [tagSelectorStore] = useState(createTagSelectorStore())
-  return <TagSelectorStoreCtx.Provider value={tagSelectorStore}>
-    <_PublicPanel
-      search={search}
-    />
-  </TagSelectorStoreCtx.Provider>
-}
-function _PublicPanel({
-  search, }: {
-    search: string,
-  }) {
-  const tagsQuery = useQuery(
-    ['template-repository-tags'],
-    listTag,
+  );
+};
+const TagList = ({ tags, title }: { tags: Tag[]; title: string }) => {
+  const t = useTranslations();
+  return (
+    <Box>
+      <Text color={'grayModern.600'} mb={'12px'} fontWeight={'500'}>
+        {title}
+      </Text>
+      <Flex direction="column" gap="4px">
+        {tags.map((tag, index) => (
+          <TagItem borderRadius={'6px'} key={tag.uid} tag={tag} bgColor={'grayModern.25'}></TagItem>
+        ))}
+      </Flex>
+    </Box>
+  );
+};
+const PublicPanel = ({ search }: { search: string }) => {
+  const [tagSelectorStore] = useState(createTagSelectorStore());
+  return (
+    <TagSelectorStoreCtx.Provider value={tagSelectorStore}>
+      <_PublicPanel search={search} />
+    </TagSelectorStoreCtx.Provider>
+  );
+};
+function _PublicPanel({ search }: { search: string }) {
+  const tagsQuery = useQuery(['template-repository-tags'], listTag, {
+    staleTime: Infinity,
+    cacheTime: Infinity
+  });
+  let tags = (tagsQuery.data?.tagList || []).sort((a, b) =>
+    a.name === 'official' ? -1 : b.name === 'official' ? 1 : 0
+  );
+  let tagListCollection = tags.reduce(
+    (acc, tag) => {
+      if (!acc[tag.type]) {
+        acc[tag.type] = [];
+      }
+      acc[tag.type].push(tag);
+      return acc;
+    },
     {
-      staleTime: Infinity,
-      cacheTime: Infinity,
-    }
-  )
-  let tags = (tagsQuery.data?.tagList || []).sort((a, b) => a.name === 'official' ? -1 : b.name === 'official' ? 1 : 0)
-  let tagListCollection = tags.reduce((acc, tag) => {
-    if (!acc[tag.type]) {
-      acc[tag.type] = [];
-    }
-    acc[tag.type].push(tag);
-    return acc;
-  }, {
-    [TagType.OFFICIAL_CONTENT]: [],
-    [TagType.USE_CASE]: [],
-    [TagType.PROGRAMMING_LANGUAGE]: []
-  } as Record<TagType, Tag[]>
+      [TagType.OFFICIAL_CONTENT]: [],
+      [TagType.USE_CASE]: [],
+      [TagType.PROGRAMMING_LANGUAGE]: []
+    } as Record<TagType, Tag[]>
   );
-  const store = useContext(TagSelectorStoreCtx)
-  if (!store) throw new Error('TagSelectorStoreCtx is null')
-  const state = useStore(store)
-
+  const store = useContext(TagSelectorStoreCtx);
+  if (!store) throw new Error('TagSelectorStoreCtx is null');
+  const state = useStore(store);
 
   const [pageQueryBody, setPageQueryBody] = useState({
     page: 1,
     pageSize: 30,
     totalItems: 0,
-    totalPage: 0,
-  })
+    totalPage: 0
+  });
 
   // reset query
   useEffect(() => {
-    if (!search) return
-    setPageQueryBody(prev => ({
+    if (!search) return;
+    setPageQueryBody((prev) => ({
       ...prev,
       page: 1,
       totalItems: 0,
-      totalPage: 0,
-    }))
-  }, [search])
+      totalPage: 0
+    }));
+  }, [search]);
   // reset query
   useEffect(() => {
-    setPageQueryBody(prev => ({
+    setPageQueryBody((prev) => ({
       ...prev,
       page: 1,
       totalItems: 0,
-      totalPage: 0,
-    }))
-  }, [state.selectedTagList])
+      totalPage: 0
+    }));
+  }, [state.selectedTagList]);
   const queryBody = {
     page: pageQueryBody.page,
     pageSize: pageQueryBody.pageSize,
     search,
-    tags: state.getSelectedTagList(),
-  }
+    tags: state.getSelectedTagList()
+  };
   const listTemplateReposistory = useQuery(
     ['template-repository-list', 'template-repository-public', queryBody],
     () => {
-      return listTemplateRepository({
-        page: queryBody.page,
-        pageSize: queryBody.pageSize,
-      }, queryBody.tags, queryBody.search)
-    },
-  )
+      return listTemplateRepository(
+        {
+          page: queryBody.page,
+          pageSize: queryBody.pageSize
+        },
+        queryBody.tags,
+        queryBody.search
+      );
+    }
+  );
 
   useEffect(() => {
     if (listTemplateReposistory.isSuccess && listTemplateReposistory.data) {
-      const data = listTemplateReposistory.data.page
-      setPageQueryBody(prev => ({
+      const data = listTemplateReposistory.data.page;
+      setPageQueryBody((prev) => ({
         ...prev,
         totalItems: data.totalItems || 0,
         totalPage: data.totalPage || 0,
         page: data.page || 1
-      }))
+      }));
     }
-  }, [listTemplateReposistory.data])  // 添加依赖项
+  }, [listTemplateReposistory.data]); // 添加依赖项
+
+  const tempalteReposistoryList = listTemplateReposistory.data?.templateRepositoryList || [];
+  const t = useTranslations();
+  return (
+    <TabPanel p={0} height={'full'}>
+      <Flex gap="8px" height={'full'}>
+        {/* Left Sidebar */}
+        <Flex w="150px" direction={'column'} height={'full'}>
+          <Heading fontSize={'16px'} fontWeight={500} color={'grayModern.900'} mb="2">
+            {t('tags')}
+          </Heading>
+          <Flex direction={'column'} flex={1} position={'relative'}>
+            <Flex
+              direction={'column'}
+              position={'absolute'}
+              inset={0}
+              overflow={'auto'}
+              pr={'4px'}
+              sx={{
+                '&::-webkit-scrollbar': {
+                  width: '6px'
+                },
+                scrollbarWidth: '6px'
+              }}
+            >
+              <Flex direction="column" gap="2px">
+                {/* <TagList tags={tagListCollection[TagType.OFFICIAL_CONTENT]} /> */}
+                <TagItem tag={tagListCollection[TagType.OFFICIAL_CONTENT][0]} />
+                <Divider color={'grayModern.150'} mt={'11px'} mb="12px"></Divider>
+                <TagList tags={tagListCollection[TagType.USE_CASE]} title={t('use_case')} />
+                <Divider color={'grayModern.150'} my={'12px'}></Divider>
+                <TagList
+                  tags={tagListCollection[TagType.PROGRAMMING_LANGUAGE]}
+                  title={t('programming_language')}
+                />
+              </Flex>
+            </Flex>
+          </Flex>
+        </Flex>
 
-  const tempalteReposistoryList = listTemplateReposistory.data?.templateRepositoryList || []
-  const t = useTranslations()
-  return <TabPanel p={0} height={'full'}>
-    <Flex gap="8px" height={'full'}>
-      {/* Left Sidebar */}
-      <Flex w="150px" direction={'column'} height={'full'}>
-        <Heading fontSize={'16px'} fontWeight={500} color={'grayModern.900'} mb="2">
-          {t('tags')}
-        </Heading>
-        <Flex direction={'column'} flex={1} position={'relative'}>
-          <Flex direction={'column'} position={'absolute'} inset={0} overflow={'auto'}
+        {/* Right Content */}
+        <Flex flex="1" flexDir={'column'}>
+          <Text color={'grayModern.600'} mb="16px" fontSize="18px" fontWeight={500}>
+            {t('all_templates')}
+          </Text>
+          <Box
+            width={'full'}
+            flex={1}
+            h={'400px'}
+            overflow={'auto'}
+            position={'relative'}
             pr={'4px'}
             sx={{
               '&::-webkit-scrollbar': {
-                width: '6px',
+                width: '6px'
               },
-              scrollbarWidth: '6px',
+              scrollbarWidth: '6px'
             }}
-
           >
-            <Flex direction="column" gap="2px" >
-              {/* <TagList tags={tagListCollection[TagType.OFFICIAL_CONTENT]} /> */}
-              <TagItem
-                tag={tagListCollection[TagType.OFFICIAL_CONTENT][0]}
-              />
-              <Divider color={'grayModern.150'} mt={'11px'} mb='12px'></Divider>
-              <TagList tags={tagListCollection[TagType.USE_CASE]} title={t('use_case')} />
-              <Divider color={'grayModern.150'} my={'12px'}></Divider>
-              <TagList tags={tagListCollection[TagType.PROGRAMMING_LANGUAGE]} title={t('programming_language')} />
-            </Flex>
-
+            <Grid
+              templateColumns="repeat(auto-fill, minmax(clamp(210px, 300px, 440px), 1fr));"
+              inset={0}
+              gap="20px"
+              position={'absolute'}
+              gridAutoRows={'max-content'}
+            >
+              {tempalteReposistoryList.map((tr) => {
+                return (
+                  <TemplateCard
+                    key={tr.uid}
+                    iconId={tr.iconId || ''}
+                    templateRepositoryName={tr.name}
+                    templateRepositoryDescription={tr.description}
+                    templateRepositoryUid={tr.uid}
+                    tags={tr.templateRepositoryTags.map((t) => t.tag)}
+                    isPublic
+                  />
+                );
+              })}
+            </Grid>
+          </Box>
+          <Flex>
+            <SwitchPage
+              ml={'auto'}
+              mr={'0'}
+              mt={'8px'}
+              pageSize={pageQueryBody.pageSize}
+              totalPage={pageQueryBody.totalPage}
+              totalItem={pageQueryBody.totalItems}
+              currentPage={pageQueryBody.page}
+              setCurrentPage={(currentPage) => {
+                setPageQueryBody((page) => {
+                  return {
+                    ...page,
+                    page: currentPage
+                  };
+                });
+              }}
+            />
           </Flex>
         </Flex>
       </Flex>
-
-      {/* Right Content */}
-      <Flex flex="1" flexDir={'column'}>
-        <Text
-          color={'grayModern.600'} mb="16px"
-          fontSize='18px'
-          fontWeight={500}
-        >
-          {t('all_templates')}
-        </Text>
-        <Box width={'full'} flex={1} h={'400px'} overflow={'auto'}
-          position={'relative'}
-          pr={'4px'}
-          sx={{
-            '&::-webkit-scrollbar': {
-              width: '6px',
-            },
-            scrollbarWidth: '6px',
-          }}
-        >
-          <Grid templateColumns="repeat(auto-fill, minmax(clamp(210px, 300px, 440px), 1fr));"
-            inset={0}
-            gap="20px"
-            position={'absolute'}
-            gridAutoRows={'max-content'}
-          >
-            {tempalteReposistoryList.map((tr) => {
-              return <TemplateCard key={tr.uid}
-                iconId={tr.iconId || ''}
-                templateRepositoryName={tr.name}
-                templateRepositoryDescription={tr.description}
-                templateRepositoryUid={tr.uid}
-                tags={tr.templateRepositoryTags.map(t => t.tag)}
-                isPublic
-              />
-            })}
-          </Grid>
-        </Box>
-        <Flex>
-          <SwitchPage
-            ml={'auto'}
-            mr={'0'}
-            mt={'8px'}
-            pageSize={pageQueryBody.pageSize}
-            totalPage={pageQueryBody.totalPage}
-            totalItem={pageQueryBody.totalItems}
-            currentPage={pageQueryBody.page}
-            setCurrentPage={(currentPage) => {
-              setPageQueryBody(page => {
-                return {
-                  ...page,
-                  page: currentPage,
-                }
-              })
-            }}
-          />
-        </Flex>
-      </Flex>
-    </Flex>
-  </TabPanel>;
+    </TabPanel>
+  );
 }
-export default PublicPanel
\ No newline at end of file
+export default PublicPanel;
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/template/TemplateModal/TemplateCard.tsx b/frontend/providers/devbox/app/[lang]/(platform)/template/TemplateModal/TemplateCard.tsx
index 176e505ba03a..343d06d97ff1 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/template/TemplateModal/TemplateCard.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/template/TemplateModal/TemplateCard.tsx
@@ -3,50 +3,70 @@ import { useRouter } from '@/i18n';
 import { type Tag as TTag } from '@/prisma/generated/client';
 import { useDevboxStore } from '@/stores/devbox';
 import { useTemplateStore } from '@/stores/template';
-import { Box, BoxProps, Button, Flex, Img, MenuButton, Tag, Text, useDisclosure } from '@chakra-ui/react';
+import {
+  Box,
+  BoxProps,
+  Button,
+  Flex,
+  Img,
+  MenuButton,
+  Tag,
+  Text,
+  useDisclosure
+} from '@chakra-ui/react';
 import { MyTooltip, SealosMenu } from '@sealos/ui';
 import { useLocale, useTranslations } from 'next-intl';
 import DeleteTemplateReposistoryModal from '../updateTemplate/DeleteTemplateReposistoryModal';
 import EditTemplateModal from '../updateTemplate/EditTemplateModal';
 import EditTemplateRepositoryModal from '../updateTemplate/EditTemplateReposistoryModal';
-const TemplateCard = ({ isPublic, iconId, templateRepositoryName, templateRepositoryDescription
-  , templateRepositoryUid,
+const TemplateCard = ({
+  isPublic,
+  iconId,
+  templateRepositoryName,
+  templateRepositoryDescription,
+  templateRepositoryUid,
   isDisabled = false,
   inPublicStore = true,
   tags,
   ...props
 }: {
-  isPublic?: boolean
-  iconId: string,
-  isDisabled?: boolean,
-  inPublicStore?: boolean,
-  templateRepositoryName: string,
-  templateRepositoryDescription: string | null
-  templateRepositoryUid: string,
-  tags: TTag[]
+  isPublic?: boolean;
+  iconId: string;
+  isDisabled?: boolean;
+  inPublicStore?: boolean;
+  templateRepositoryName: string;
+  templateRepositoryDescription: string | null;
+  templateRepositoryUid: string;
+  tags: TTag[];
 } & BoxProps) => {
-  const t = useTranslations()
-  const { closeTemplateModal, config, updateTemplateModalConfig } = useTemplateStore()
-  const editTemplateHandle = useDisclosure()
-  const editTemplateRepositoryHandle = useDisclosure()
-  const deleteTemplateHandle = useDisclosure()
-  const { setStartedTemplate } = useDevboxStore()
-  const router = useRouter()
-  const description = templateRepositoryDescription ? templateRepositoryDescription : t('no_description')
-  const lastLang = useLocale()
+  const t = useTranslations();
+  const { closeTemplateModal, config, updateTemplateModalConfig } = useTemplateStore();
+  const editTemplateHandle = useDisclosure();
+  const editTemplateRepositoryHandle = useDisclosure();
+  const deleteTemplateHandle = useDisclosure();
+  const { setStartedTemplate } = useDevboxStore();
+  const router = useRouter();
+  const description = templateRepositoryDescription
+    ? templateRepositoryDescription
+    : t('no_description');
+  const lastLang = useLocale();
   return (
     <>
       <Box
         position="relative"
         width={'full'}
-        _before={isDisabled ? {
-          content: "''",
-          position: 'absolute',
-          inset: 0,
-          background: '#fff',
-          opacity: 0.3,
-          'pointer-events': 'none'
-        } : {}}
+        _before={
+          isDisabled
+            ? {
+                content: "''",
+                position: 'absolute',
+                inset: 0,
+                background: '#fff',
+                opacity: 0.3,
+                'pointer-events': 'none'
+              }
+            : {}
+        }
         display="flex"
         maxW={'440px'}
         flexDirection="column"
@@ -64,17 +84,11 @@ const TemplateCard = ({ isPublic, iconId, templateRepositoryName, templateReposi
         pt={'16px'}
         pb={'12px'}
       >
-        <Box
-          w="full"
-          height={'44px'}
-        >
+        <Box w="full" height={'44px'}>
           <Flex justifyContent="space-between" alignItems="center" gap="12px" height={'full'}>
             <Flex alignItems="center" gap="12px" flex="1" height={'full'} width={'0'}>
               {/* Python Logo */}
-              <Img
-                boxSize={'32px'}
-                src={`/images/${iconId}.svg`}
-              />
+              <Img boxSize={'32px'} src={`/images/${iconId}.svg`} />
 
               {/* Title and Description */}
               <Flex direction="column" gap="3px" flex={1} width={0}>
@@ -91,49 +105,51 @@ const TemplateCard = ({ isPublic, iconId, templateRepositoryName, templateReposi
                   >
                     {templateRepositoryName}
                   </Text>
-                  {inPublicStore ?
-                    (tags.findIndex(tag => tag.name === 'official') !== -1 ?
-                      <MyTooltip label={t('tags_enum.official')} shouldWrapChildren={true} placement='bottom' offset={[0, 15]}>
-                        <MyIcon name='official' boxSize={'20px'} position={'relative'} />
-                      </MyTooltip>
-                      : <></>)
-                    :
-                    (isPublic ?
-                      <Tag
-                        size="sm"
-                        bg='green.50'
-                        color='green.600'
-                        border="1px solid"
-                        borderColor={'green.200'}
-                        borderRadius="33px"
-                        px="8px"
-                        minW={'max-content'}
-                        fontSize="10px"
-                      >
-                        {t('public')}
-                      </Tag> :
-                      <Tag
-                        size="sm"
-                        bg='adora.50'
-                        color='adora.600'
-                        border="1px solid"
-                        borderColor={'adora.200'}
-                        borderRadius="33px"
-                        px="8px"
-                        minW={'max-content'}
-                        fontSize="10px"
+                  {inPublicStore ? (
+                    tags.findIndex((tag) => tag.name === 'official') !== -1 ? (
+                      <MyTooltip
+                        label={t('tags_enum.official')}
+                        shouldWrapChildren={true}
+                        placement="bottom"
+                        offset={[0, 15]}
                       >
-                        {t('private')}
-                      </Tag>)
-                  }
+                        <MyIcon name="official" boxSize={'20px'} position={'relative'} />
+                      </MyTooltip>
+                    ) : (
+                      <></>
+                    )
+                  ) : isPublic ? (
+                    <Tag
+                      size="sm"
+                      bg="green.50"
+                      color="green.600"
+                      border="1px solid"
+                      borderColor={'green.200'}
+                      borderRadius="33px"
+                      px="8px"
+                      minW={'max-content'}
+                      fontSize="10px"
+                    >
+                      {t('public')}
+                    </Tag>
+                  ) : (
+                    <Tag
+                      size="sm"
+                      bg="adora.50"
+                      color="adora.600"
+                      border="1px solid"
+                      borderColor={'adora.200'}
+                      borderRadius="33px"
+                      px="8px"
+                      minW={'max-content'}
+                      fontSize="10px"
+                    >
+                      {t('private')}
+                    </Tag>
+                  )}
                 </Flex>
-                <Flex
-                  width={'full'}
-                >
-                  <MyTooltip label={description}
-                    placement='bottom'
-                    offset={[0, 15]}
-                  >
+                <Flex width={'full'}>
+                  <MyTooltip label={description} placement="bottom" offset={[0, 15]}>
                     <Text
                       fontSize="12px"
                       color="#667085"
@@ -150,13 +166,11 @@ const TemplateCard = ({ isPublic, iconId, templateRepositoryName, templateReposi
                     </Text>
                   </MyTooltip>
                 </Flex>
-
               </Flex>
             </Flex>
 
             {/* Buttons */}
-            <Flex alignItems="center" gap="2px"
-            >
+            <Flex alignItems="center" gap="2px">
               <Button
                 size="sm"
                 bg="#0884DD"
@@ -173,16 +187,16 @@ const TemplateCard = ({ isPublic, iconId, templateRepositoryName, templateReposi
                     uid: templateRepositoryUid,
                     name: templateRepositoryName,
                     iconId
-                  })
-                  closeTemplateModal()
-                  router.push(`/devbox/create?templateRepository${templateRepositoryUid}`)
+                  });
+                  closeTemplateModal();
+                  router.push(`/devbox/create?templateRepository${templateRepositoryUid}`);
                 }}
                 isDisabled={isDisabled}
                 _hover={{ bg: '#0773c4' }}
               >
                 {t('start_devbox')}
               </Button>
-              {!inPublicStore &&
+              {!inPublicStore && (
                 <SealosMenu
                   width={100}
                   Button={
@@ -217,28 +231,32 @@ const TemplateCard = ({ isPublic, iconId, templateRepositoryName, templateReposi
                         </>
                       ),
                       onClick: deleteTemplateHandle.onOpen
-                    },
+                    }
                   ]}
                 />
-              }
+              )}
             </Flex>
           </Flex>
         </Box>
         {/* Tags */}
         <Flex gap="4px" wrap={'wrap'} minH={'22px'}>
-          {tags.filter(tag => tag.name !== 'official').map(tag => <Tag
-            px={'8px'}
-            py={'4px'}
-            key={tag.uid}
-            bg='grayModern.150'
-            color='brightBlue.600'
-            borderRadius="33px"
-            fontSize="10px"
-          >
-            {tag[lastLang === 'zh' ? 'zhName' : 'enName'] || tag.name}
-          </Tag>)}
+          {tags
+            .filter((tag) => tag.name !== 'official')
+            .map((tag) => (
+              <Tag
+                px={'8px'}
+                py={'4px'}
+                key={tag.uid}
+                bg="grayModern.150"
+                color="brightBlue.600"
+                borderRadius="33px"
+                fontSize="10px"
+              >
+                {tag[lastLang === 'zh' ? 'zhName' : 'enName'] || tag.name}
+              </Tag>
+            ))}
         </Flex>
-      </Box >
+      </Box>
       <EditTemplateModal
         isOpen={editTemplateHandle.isOpen}
         templateRepositoryName={templateRepositoryName}
@@ -260,4 +278,4 @@ const TemplateCard = ({ isPublic, iconId, templateRepositoryName, templateReposi
   );
 };
 
-export default TemplateCard;
\ No newline at end of file
+export default TemplateCard;
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/template/TemplateModal/index.tsx b/frontend/providers/devbox/app/[lang]/(platform)/template/TemplateModal/index.tsx
index f015206102ea..83d6b313c532 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/template/TemplateModal/index.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/template/TemplateModal/index.tsx
@@ -1,9 +1,9 @@
-"use client"
+'use client';
 
-import MyIcon from '@/components/Icon'
-import { TemplateState } from '@/constants/template'
-import { usePathname } from '@/i18n'
-import { useTemplateStore } from '@/stores/template'
+import MyIcon from '@/components/Icon';
+import { TemplateState } from '@/constants/template';
+import { usePathname } from '@/i18n';
+import { useTemplateStore } from '@/stores/template';
 import {
   calc,
   Input,
@@ -20,57 +20,69 @@ import {
   TabPanels,
   Tabs,
   Text
-} from '@chakra-ui/react'
-import { SearchIcon } from '@sealos/ui'
-import { debounce } from 'lodash'
-import { useTranslations } from 'next-intl'
-import { useCallback, useState } from 'react'
-import PrivatePanel from './PrivatePanel'
-import PublicPanel from './PublicPanel'
-
+} from '@chakra-ui/react';
+import { SearchIcon } from '@sealos/ui';
+import { debounce } from 'lodash';
+import { useTranslations } from 'next-intl';
+import { useCallback, useState } from 'react';
+import PrivatePanel from './PrivatePanel';
+import PublicPanel from './PublicPanel';
 
 const TemplateModal = () => {
-  const t = useTranslations()
-  const { isOpen, config, closeTemplateModal, openTemplateModal, updateTemplateModalConfig } = useTemplateStore()
-  const [search, setsearch] = useState('')
+  const t = useTranslations();
+  const { isOpen, config, closeTemplateModal, openTemplateModal, updateTemplateModalConfig } =
+    useTemplateStore();
+  const [search, setsearch] = useState('');
   const updateSearchVal = useCallback(
     debounce((val: string) => {
-      setsearch(val)
+      setsearch(val);
     }, 500),
     []
-  )
-  const lastRoute = usePathname()
+  );
+  const lastRoute = usePathname();
   return (
-    <Modal isOpen={isOpen} onClose={() => {
-      closeTemplateModal()
-      updateTemplateModalConfig({
-        templateState: TemplateState.publicTemplate,
-        lastRoute
-      })
-    }} lockFocusAcrossFrames={false}>
+    <Modal
+      isOpen={isOpen}
+      onClose={() => {
+        closeTemplateModal();
+        updateTemplateModalConfig({
+          templateState: TemplateState.publicTemplate,
+          lastRoute
+        });
+      }}
+      lockFocusAcrossFrames={false}
+    >
       <ModalOverlay />
-      <ModalContent h={calc('100%').subtract(calc('24px').multiply(2).toString()).toString()} maxW={'full'} margin={'24px'}>
+      <ModalContent
+        h={calc('100%').subtract(calc('24px').multiply(2).toString()).toString()}
+        maxW={'full'}
+        margin={'24px'}
+      >
         <ModalHeader>{t('devbox_template')}</ModalHeader>
         <ModalBody pb={'16px'}>
           <ModalCloseButton />
           {/* <Box left="0" top="12" h={'full'}> */}
-          <Tabs variant="soft-rounded" colorScheme="blue"
+          <Tabs
+            variant="soft-rounded"
+            colorScheme="blue"
             isLazy
-            
             h={'full'}
             display={'flex'}
             flexDirection={'column'}
             index={config.templateState === TemplateState.publicTemplate ? 0 : 1}
             onChange={(idx) => {
-              if (idx === 0) openTemplateModal({
-                templateState: TemplateState.publicTemplate,
-                lastRoute
-              })
-              else openTemplateModal({
-                templateState: TemplateState.privateTemplate,
-                lastRoute
-              })
-            }}>
+              if (idx === 0)
+                openTemplateModal({
+                  templateState: TemplateState.publicTemplate,
+                  lastRoute
+                });
+              else
+                openTemplateModal({
+                  templateState: TemplateState.privateTemplate,
+                  lastRoute
+                });
+            }}
+          >
             {/* TabList must be direct child of Tabs */}
             <TabList gap={'12px'}>
               <Tab
@@ -82,16 +94,11 @@ const TemplateModal = () => {
                 borderRadius="6px"
                 color="grayModern.500"
                 _selected={{
-                  bg: "grayModern.100",
-                  color: "brightBlue.600",
+                  bg: 'grayModern.100',
+                  color: 'brightBlue.600'
                 }}
               >
-                <MyIcon
-                  width="20px"
-                  height="20px"
-                  color="currentColor"
-                  name="templateTitle"
-                />
+                <MyIcon width="20px" height="20px" color="currentColor" name="templateTitle" />
                 <Text
                   fontSize="14px"
                   fontWeight="500"
@@ -111,15 +118,11 @@ const TemplateModal = () => {
                 borderRadius="6px"
                 color="grayModern.500"
                 _selected={{
-                  bg: "grayModern.100",
-                  color: "brightBlue.600",
+                  bg: 'grayModern.100',
+                  color: 'brightBlue.600'
                 }}
               >
-                <MyIcon
-                  width="20px"
-                  height="20px"
-                  color="currentColor"
-                  name={'user'} />
+                <MyIcon width="20px" height="20px" color="currentColor" name={'user'} />
                 <Text
                   fontSize="14px"
                   fontWeight="500"
@@ -132,7 +135,7 @@ const TemplateModal = () => {
               </Tab>
               <InputGroup w="230px" marginLeft={'auto'} mr={0}>
                 <InputLeftElement>
-                  <SearchIcon boxSize={'16px'} color='grayModern.600' fill={'currentcolor'} />
+                  <SearchIcon boxSize={'16px'} color="grayModern.600" fill={'currentcolor'} />
                 </InputLeftElement>
                 <Input
                   h="32px"
@@ -143,7 +146,7 @@ const TemplateModal = () => {
                   rounded="md"
                   placeholder={t('template_search')}
                   onChange={(e) => {
-                    updateSearchVal(e.target.value)
+                    updateSearchVal(e.target.value);
                   }}
                 />
               </InputGroup>
@@ -159,7 +162,7 @@ const TemplateModal = () => {
         </ModalBody>
       </ModalContent>
     </Modal>
-  )
-}
+  );
+};
 
-export default TemplateModal
\ No newline at end of file
+export default TemplateModal;
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/CreateTemplateModal.tsx b/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/CreateTemplateModal.tsx
index 9ed10002b9f6..4a67bd8e6017 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/CreateTemplateModal.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/CreateTemplateModal.tsx
@@ -30,7 +30,7 @@ import TemplateRepositoryIsPublicField from './components/TemplateRepositoryIsPu
 import TemplateRepositoryNameField from './components/TemplateRepositoryNameField';
 import TemplateRepositoryTagField from './components/TemplateRepositoryTagField';
 const tagSchema = z.object({
-  value: z.string(),
+  value: z.string()
 });
 
 // 定义表单数据类型和验证规则
@@ -47,14 +47,17 @@ const CreateTemplateModal: FC<CreateTemplateModalProps> = ({
   // onSubmit
   devboxReleaseName
 }) => {
-  const t = useTranslations()
+  const t = useTranslations();
   const formSchema = z.object({
     name: z.string().min(1, t('input_template_name_placeholder')).pipe(templateNameSchema),
     version: z.string().min(1, t('input_template_version_placeholder')).pipe(versionSchema),
     isPublic: z.boolean().default(false),
     agreeTerms: z.boolean().refine((val) => val === true, t('privacy_and_security_agreement_tips')),
-    tags: z.array(tagSchema).min(1, t('select_at_least_1_tag')).max(3, t('select_lest_than_3_tags')),
-    description: z.string(),
+    tags: z
+      .array(tagSchema)
+      .min(1, t('select_at_least_1_tag'))
+      .max(3, t('select_lest_than_3_tags')),
+    description: z.string()
   });
 
   type FormData = z.infer<typeof formSchema>;
@@ -66,7 +69,7 @@ const CreateTemplateModal: FC<CreateTemplateModalProps> = ({
       isPublic: false,
       agreeTerms: false,
       tags: [],
-      description: '',
+      description: ''
     },
     mode: 'onSubmit'
   });
@@ -74,44 +77,44 @@ const CreateTemplateModal: FC<CreateTemplateModalProps> = ({
     control,
     handleSubmit,
     formState: { errors, isSubmitting },
-    reset,
-  } = methods
-  const { openTemplateModal, config } = useTemplateStore()
-  const queryClient = useQueryClient()
+    reset
+  } = methods;
+  const { openTemplateModal, config } = useTemplateStore();
+  const queryClient = useQueryClient();
   const mutation = useMutation({
     mutationFn: createTemplateReposistory
     // return await createTemplate(data)
-  })
-  const { message: toast } = useMessage()
-  const lastRoute = usePathname()
+  });
+  const { message: toast } = useMessage();
+  const lastRoute = usePathname();
   const onSubmitHandler: SubmitHandler<FormData> = async (_data) => {
     try {
-      const result = formSchema.safeParse(_data)
+      const result = formSchema.safeParse(_data);
       if (!result.success) {
         // const title = result.error.errors[0]
-        const error = result.error.errors[0]
-        if(error.path[0] === 'name' && error.code === 'invalid_string') {
+        const error = result.error.errors[0];
+        if (error.path[0] === 'name' && error.code === 'invalid_string') {
           toast({
             title: t('invalide_template_name'),
-            status: 'error',
+            status: 'error'
           });
           return;
         }
-        if(error.path[0] === 'version' && error.code === 'invalid_string') {
+        if (error.path[0] === 'version' && error.code === 'invalid_string') {
           toast({
             title: t('invalide_template_version'),
-            status: 'error',
+            status: 'error'
           });
           return;
         }
-        const title = error.message
+        const title = error.message;
         toast({
           title,
-          status: 'error',
+          status: 'error'
         });
         return;
       }
-      const data = result.data
+      const data = result.data;
       await mutation.mutateAsync({
         templateRepositoryName: data.name,
         version: data.version,
@@ -120,40 +123,34 @@ const CreateTemplateModal: FC<CreateTemplateModalProps> = ({
         tagUidList: data.tags.map((tag) => tag.value),
         devboxReleaseName
       });
-      queryClient.invalidateQueries(['template-repository-list'])
-      queryClient.invalidateQueries(['template-repository-detail'])
+      queryClient.invalidateQueries(['template-repository-list']);
+      queryClient.invalidateQueries(['template-repository-detail']);
       reset();
       onClose();
       openTemplateModal({
         templateState: TemplateState.privateTemplate,
         lastRoute
-      })
+      });
       toast({
         title: t('create_template_success'),
-        status: 'success',
+        status: 'success'
       });
     } catch (error) {
-      
-      if(error == '409:templateRepository name already exists') {
+      if (error == '409:templateRepository name already exists') {
         return toast({
           title: t('template_repository_name_already_exists'),
-          status: 'error',
+          status: 'error'
         });
       }
       toast({
         title: error as string,
-        status: 'error',
+        status: 'error'
       });
     }
   };
 
   return (
-    <Modal
-      isOpen={isOpen}
-      onClose={onClose}
-      size="md"
-      onCloseComplete={() => reset()}
-    >
+    <Modal isOpen={isOpen} onClose={onClose} size="md" onCloseComplete={() => reset()}>
       <ModalOverlay />
       <ModalContent maxW="562px" margin={'auto'}>
         <FormProvider {...methods}>
@@ -170,14 +167,16 @@ const CreateTemplateModal: FC<CreateTemplateModalProps> = ({
                 {/* 版本号 */}
 
                 <Flex align={'center'}>
-                  <MyFormLabel width="108px" m='0' fontSize="14px" isRequired>{t('version')}</MyFormLabel>
+                  <MyFormLabel width="108px" m="0" fontSize="14px" isRequired>
+                    {t('version')}
+                  </MyFormLabel>
                   <Controller
                     name="version"
                     control={control}
-                    render={({ field,}) => (
+                    render={({ field }) => (
                       <Input
                         {...field}
-                        placeholder={t("input_template_version_placeholder")}
+                        placeholder={t('input_template_version_placeholder')}
                         bg="grayModern.50"
                         borderColor="grayModern.200"
                         size="sm"
@@ -187,7 +186,6 @@ const CreateTemplateModal: FC<CreateTemplateModalProps> = ({
                   />
                 </Flex>
 
-
                 {/* 公开 */}
                 {/* <Flex > */}
                 <TemplateRepositoryIsPublicField />
@@ -195,13 +193,11 @@ const CreateTemplateModal: FC<CreateTemplateModalProps> = ({
                 {/* 标签 */}
                 <TemplateRepositoryTagField />
 
-
                 {/* 简介 */}
                 <TemplateRepositoryDescriptionField />
               </VStack>
-
             </ModalBody>
-            <ModalFooter px={'52px'} pb={'32px'} >
+            <ModalFooter px={'52px'} pb={'32px'}>
               {/* 按钮组 */}
               <ButtonGroup spacing={'10px'}>
                 <Button
@@ -233,4 +229,4 @@ const CreateTemplateModal: FC<CreateTemplateModalProps> = ({
   );
 };
 
-export default CreateTemplateModal
\ No newline at end of file
+export default CreateTemplateModal;
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/DeleteTemplateReposistoryModal.tsx b/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/DeleteTemplateReposistoryModal.tsx
index ff8fc9c6ab4b..e33ef695a1bc 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/DeleteTemplateReposistoryModal.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/DeleteTemplateReposistoryModal.tsx
@@ -1,5 +1,5 @@
-import { deleteTemplateRepository } from '@/api/template'
-import MyIcon from '@/components/Icon'
+import { deleteTemplateRepository } from '@/api/template';
+import MyIcon from '@/components/Icon';
 import {
   Button,
   ButtonGroup,
@@ -13,64 +13,74 @@ import {
   ModalOverlay,
   ModalProps,
   Text
-} from '@chakra-ui/react'
-import { useMutation, useQueryClient } from '@tanstack/react-query'
-import { useTranslations } from 'next-intl'
+} from '@chakra-ui/react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
 
-const DeleteTemplateReposistoryModal = ({ uid, templateRepositoryName, ...props }: Omit<ModalProps, 'children'> & {
-  templateRepositoryName: string
-  uid: string
+const DeleteTemplateReposistoryModal = ({
+  uid,
+  templateRepositoryName,
+  ...props
+}: Omit<ModalProps, 'children'> & {
+  templateRepositoryName: string;
+  uid: string;
 }) => {
-  const t = useTranslations()
+  const t = useTranslations();
   const mutation = useMutation({
     mutationFn: (uid: string) => {
-      return deleteTemplateRepository(uid)
+      return deleteTemplateRepository(uid);
     },
     onSuccess: () => {
-      queryClient.invalidateQueries(['template-repository-list'])
-      queryClient.invalidateQueries(['template-repository-detail'])
+      queryClient.invalidateQueries(['template-repository-list']);
+      queryClient.invalidateQueries(['template-repository-detail']);
     }
-  })
-  const queryClient = useQueryClient()
+  });
+  const queryClient = useQueryClient();
   return (
     <Modal lockFocusAcrossFrames={false} {...props} onClose={props.onClose}>
       <ModalOverlay />
       <ModalContent maxW={'400px'} width={'400px'} margin={'auto'}>
         <ModalHeader>
           <Flex gap={'10px'}>
-            <MyIcon name='warning' boxSize={'20px'} />
+            <MyIcon name="warning" boxSize={'20px'} />
             <Text fontSize={'16px'}>{t('prompt')}</Text>
           </Flex>
         </ModalHeader>
         <ModalBody px={'36px'} py={'24px'}>
           <ModalCloseButton />
           {t.rich('delete_template_prompt', {
-            name: <Text display={'inline'} fontWeight={600}>{templateRepositoryName}</Text> as any
+            name: (
+              <Text display={'inline'} fontWeight={600}>
+                {templateRepositoryName}
+              </Text>
+            ) as any
           })}
         </ModalBody>
         <ModalFooter pb={'24px'}>
-          <ButtonGroup gap={'12px'} >
+          <ButtonGroup gap={'12px'}>
             <Button
               variant={'outline'}
               onClick={() => {
-                props.onClose()
-              }}>
+                props.onClose();
+              }}
+            >
               {t('cancel')}
             </Button>
             <Button
               variant={'solid'}
               onClick={async () => {
-                await mutation.mutateAsync(uid)
-                await queryClient.invalidateQueries(['template-repository-private'])
-                props.onClose()
-              }}>
+                await mutation.mutateAsync(uid);
+                await queryClient.invalidateQueries(['template-repository-private']);
+                props.onClose();
+              }}
+            >
               {t('delete')}
             </Button>
           </ButtonGroup>
         </ModalFooter>
       </ModalContent>
     </Modal>
-  )
-}
+  );
+};
 
-export default DeleteTemplateReposistoryModal
\ No newline at end of file
+export default DeleteTemplateReposistoryModal;
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/EditTemplateModal.tsx b/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/EditTemplateModal.tsx
index 7638112cb03e..92b12a4201d2 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/EditTemplateModal.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/EditTemplateModal.tsx
@@ -21,11 +21,11 @@ import { FC, useState } from 'react';
 import { z } from 'zod';
 import DeleteTemplateVersionModal from '../updateTemplateVersion/DeleteTemplateVersionModal';
 const tagSchema = z.object({
-  value: z.string().min(1),
+  value: z.string().min(1)
 });
 const versionSchema = z.object({
   name: z.string(),
-  uid: z.string(),
+  uid: z.string()
 });
 type VersionType = z.infer<typeof versionSchema>;
 interface CreateTemplateModalProps {
@@ -42,18 +42,14 @@ const EditTemplateModal: FC<CreateTemplateModalProps> = ({
   uid,
   templateRepositoryName
 }) => {
-  const t = useTranslations()
-  const DeleteTemplateVersionHandle = useDisclosure()
-  const [deletedTemplateVersion, setDeletedTemplateVersion] = useState<VersionType | null>()
-  const templateRepositoryQuery = useQuery(
-    ['templateList', uid],
-    () => listTemplate(uid),
-    {
-      enabled: isOpen
-    }
-  )
+  const t = useTranslations();
+  const DeleteTemplateVersionHandle = useDisclosure();
+  const [deletedTemplateVersion, setDeletedTemplateVersion] = useState<VersionType | null>();
+  const templateRepositoryQuery = useQuery(['templateList', uid], () => listTemplate(uid), {
+    enabled: isOpen
+  });
   const columns: {
-    title: string
+    title: string;
     dataIndex?: keyof {
       uid: string;
       name: string;
@@ -61,132 +57,137 @@ const EditTemplateModal: FC<CreateTemplateModalProps> = ({
       image: string;
       createAt: Date;
       updateAt: Date;
-    }
-    minWidth?: string
-    key: string
+    };
+    minWidth?: string;
+    key: string;
     render?: (item: {
       uid: string;
       name: string;
       config: string;
       image: string;
-      createAt: Date;
-      updateAt: Date;
-    }) => JSX.Element
+      createdAt: Date;
+      updatedAt: Date;
+    }) => JSX.Element;
   }[] = [
-      {
-        title: t('version'),
-        key: 'name',
-        render: (item) => {
-          return (
-            <Flex alignItems={'center'} ml={'14.5px'}>
-              <Text color={'grayModern.900'}
-                maxW={'100px'}
-                textOverflow={'ellipsis'}
-                whiteSpace={'nowrap'}
-              >{item.name}</Text>
-            </Flex>
-          )
-        }
-      },
-      {
-        title: t('creation_time'),
-        dataIndex: 'createAt',
-        key: 'createAt',
-        render: (item) => {
-          return <Text color={'grayModern.600'}>{dayjs().format('YYYY-MM-DD mm:ss')}</Text>
-        }
-      }, {
-        title: t('update_time'),
-        dataIndex: 'createAt',
-        key: 'createAt',
-        render: (item) => {
-          return <Text color={'grayModern.600'}>{dayjs().format('YYYY-MM-DD mm:ss')}</Text>
-        }
-      },
-      {
-        title: t('control'),
-        key: 'control',
-        minWidth: 'unset',
-        render: (item) => (
-          // <Flex>
-          <IconButton
-            aria-label='delete'
-            size={'sm'}
-            variant={'square'}
-            boxSize={'24px'}
-            color={'grayModern.500'}
-            _hover={{
-              color: 'red.600',
-              bg: 'grayModern.150',
-            }}
-            icon={<MyIcon name='delete' boxSize={'16px'} />}
-            minW={'unset'}
-            onClick={() => {
-              setDeletedTemplateVersion({
-                name: item.name,
-                uid: item.uid,
-              })
-              DeleteTemplateVersionHandle.onOpen()
-            }}
-          />
-          // </Flex>
-        )
+    {
+      title: t('version'),
+      key: 'name',
+      render: (item) => {
+        return (
+          <Flex alignItems={'center'} ml={'14.5px'}>
+            <Text
+              color={'grayModern.900'}
+              maxW={'100px'}
+              textOverflow={'ellipsis'}
+              whiteSpace={'nowrap'}
+            >
+              {item.name}
+            </Text>
+          </Flex>
+        );
       }
-    ]
-  // const mock = [
-  //   {
-  //     "uid": "741bc275-107a-43a7-ac01-2d26a0f64297",
-  //     "name": "v1",
-  //     "config": "{\"appPorts\":[{\"name\":\"devbox-app-port\",\"port\":8080,\"protocol\":\"TCP\",\"targetPort\":0}],\"ports\":[{\"containerPort\":22,\"name\":\"devbox-ssh-port\",\"protocol\":\"TCP\"}],\"releaseArgs\":[\"/home/devbox/project/entrypoint.sh\"],\"releaseCommand\":[\"/bin/bash\",\"-c\"],\"user\":\"devbox\",\"workingDir\":\"/home/devbox/project\"}",
-  //     "image": "sealos.hub:5000/vfwsepe/devbox4:v1",
-  //     "createdAt": "2024-12-13T08:29:26.171Z",
-  //     "updatedAt": "2024-12-13T08:29:26.171Z"
-  //   },
-  // ]
-  const templateList =
-    templateRepositoryQuery.data?.templateList || []
-  return (<>
-    <Modal
-      isOpen={isOpen}
-      onClose={onClose}
-      size="md"
-    >
-      <ModalOverlay />
-      <ModalContent maxW="658px" margin={'auto'} minH={'476px'} maxH={'90vh'}>
-        <ModalHeader>
-          <Text>{t('version_manage')}</Text>
-        </ModalHeader>
-        <ModalBody py={'32px'} px={'56px'} >
-          <ModalCloseButton />
-          <Flex flexDirection={'column'} h={'full'}>
-
-            <Flex h={'364px'} flex={'auto'} overflow={'auto'} flexDirection={'column'}>
-              <MyTable needRadius columns={columns} data={templateList} gridTemplateColumns={'120px 180px 180px auto'} />
-              {templateList.length === 0 && <Flex
-                justifyContent={'center'}
-                flex={1}
-                alignItems={'center'}
-                mt={10}
-                flexDirection={'column'}
-                gap={4}>
-                <MyIcon name="empty" w={'40px'} h={'40px'} color={'white'} />
-                <Box textAlign={'center'} color={'grayModern.600'}>
-                  {t('no_template_versions')}
-                </Box>
-              </Flex>}
+    },
+    {
+      title: t('creation_time'),
+      dataIndex: 'createAt',
+      key: 'createAt',
+      render: (item) => {
+        return (
+          <Text color={'grayModern.600'}>{dayjs(item.createdAt).format('YYYY-MM-DD HH:mm')}</Text>
+        );
+      }
+    },
+    {
+      title: t('update_time'),
+      dataIndex: 'updateAt',
+      key: 'updateAt',
+      render: (item) => {
+        return (
+          <Text color={'grayModern.600'}>{dayjs(item.updatedAt).format('YYYY-MM-DD HH:mm')}</Text>
+        );
+      }
+    },
+    {
+      title: t('control'),
+      key: 'control',
+      minWidth: 'unset',
+      render: (item) => (
+        // <Flex>
+        <IconButton
+          aria-label="delete"
+          size={'sm'}
+          variant={'square'}
+          boxSize={'24px'}
+          color={'grayModern.500'}
+          _hover={{
+            color: 'red.600',
+            bg: 'grayModern.150'
+          }}
+          icon={<MyIcon name="delete" boxSize={'16px'} />}
+          minW={'unset'}
+          onClick={() => {
+            setDeletedTemplateVersion({
+              name: item.name,
+              uid: item.uid
+            });
+            DeleteTemplateVersionHandle.onOpen();
+          }}
+        />
+        // </Flex>
+      )
+    }
+  ];
+  const templateList = templateRepositoryQuery.data?.templateList || [];
+  return (
+    <>
+      <Modal isOpen={isOpen} onClose={onClose} size="md">
+        <ModalOverlay />
+        <ModalContent maxW="658px" margin={'auto'} minH={'476px'} maxH={'90vh'}>
+          <ModalHeader>
+            <Text>{t('version_manage')}</Text>
+          </ModalHeader>
+          <ModalBody py={'32px'} px={'56px'}>
+            <ModalCloseButton />
+            <Flex flexDirection={'column'} h={'full'}>
+              <Flex h={'364px'} flex={'auto'} overflow={'auto'} flexDirection={'column'}>
+                <MyTable
+                  needRadius
+                  columns={columns}
+                  data={templateList}
+                  gridTemplateColumns={'120px 180px 180px auto'}
+                />
+                {templateList.length === 0 && (
+                  <Flex
+                    justifyContent={'center'}
+                    flex={1}
+                    alignItems={'center'}
+                    mt={10}
+                    flexDirection={'column'}
+                    gap={4}
+                  >
+                    <MyIcon name="empty" w={'40px'} h={'40px'} color={'white'} />
+                    <Box textAlign={'center'} color={'grayModern.600'}>
+                      {t('no_template_versions')}
+                    </Box>
+                  </Flex>
+                )}
+              </Flex>
             </Flex>
-          </Flex>
-        </ModalBody>
-      </ModalContent>
-    </Modal>
-    {!!deletedTemplateVersion && <DeleteTemplateVersionModal
-      isLasted={templateList.length <= 1}
-      version={deletedTemplateVersion.name}
-      template={templateRepositoryName}
-      isOpen={DeleteTemplateVersionHandle.isOpen} onClose={DeleteTemplateVersionHandle.onClose}
-      uid={deletedTemplateVersion.uid} />}
-  </>
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+      {!!deletedTemplateVersion && (
+        <DeleteTemplateVersionModal
+          isLasted={templateList.length <= 1}
+          version={deletedTemplateVersion.name}
+          template={templateRepositoryName}
+          isOpen={DeleteTemplateVersionHandle.isOpen}
+          onClose={DeleteTemplateVersionHandle.onClose}
+          uid={deletedTemplateVersion.uid}
+        />
+      )}
+    </>
   );
 };
 
-export default EditTemplateModal
\ No newline at end of file
+export default EditTemplateModal;
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/EditTemplateReposistoryModal.tsx b/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/EditTemplateReposistoryModal.tsx
index dcef3b9da3ed..94a95e06ebd8 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/EditTemplateReposistoryModal.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/EditTemplateReposistoryModal.tsx
@@ -25,7 +25,7 @@ import TemplateRepositoryIsPublicField from './components/TemplateRepositoryIsPu
 import TemplateRepositoryNameField from './components/TemplateRepositoryNameField';
 import TemplateRepositoryTagField from './components/TemplateRepositoryTagField';
 const tagSchema = z.object({
-  value: z.string().min(1),
+  value: z.string().min(1)
 });
 const versionSchema = z.object({
   name: z.string(),
@@ -40,18 +40,17 @@ interface CreateTemplateModalProps {
   uid: string;
 }
 
-const EditTemplateRepositoryModal: FC<CreateTemplateModalProps> = ({
-  isOpen,
-  onClose,
-  uid
-}) => {
-  const t = useTranslations()
+const EditTemplateRepositoryModal: FC<CreateTemplateModalProps> = ({ isOpen, onClose, uid }) => {
+  const t = useTranslations();
   const formSchema = z.object({
     name: z.string().min(1, t('input_template_name_placeholder')),
     isPublic: z.boolean().default(false),
     agreeTerms: z.boolean().refine((val) => val === true, t('privacy_and_security_agreement_tips')),
-    tags: z.array(tagSchema).min(1, t('select_at_least_1_tag')).max(3, t('select_lest_than_3_tags')),
-    description: z.string(),
+    tags: z
+      .array(tagSchema)
+      .min(1, t('select_at_least_1_tag'))
+      .max(3, t('select_lest_than_3_tags')),
+    description: z.string()
   });
   type FormData = z.infer<typeof formSchema>;
   const methods = useForm<FormData>({
@@ -60,66 +59,66 @@ const EditTemplateRepositoryModal: FC<CreateTemplateModalProps> = ({
       isPublic: false,
       agreeTerms: false,
       tags: [],
-      description: '',
-    },
+      description: ''
+    }
   });
   const {
     control,
     handleSubmit,
     formState: { errors, isSubmitting },
     reset,
-    setValue,
-  } = methods
+    setValue
+  } = methods;
 
-  const DeleteTemplateVersionHandle = useDisclosure()
-  const [deletedTemplateVersion, setDeletedTemplateVersion] = useState<VersionType | null>()
+  const DeleteTemplateVersionHandle = useDisclosure();
+  const [deletedTemplateVersion, setDeletedTemplateVersion] = useState<VersionType | null>();
   const templateRepositoryQuery = useQuery(
     ['template-repository-detail', uid],
     () => getTemplateRepository(uid),
     {
       enabled: isOpen
     }
-  )
-  const updateMutation = useMutation(
-    updateTemplateReposistory,
-    {
-      onSuccess() {
-        queryClient.invalidateQueries(['template-repository-list'])
-        queryClient.invalidateQueries(['template-repository-detail'])
-      }
+  );
+  const updateMutation = useMutation(updateTemplateReposistory, {
+    onSuccess() {
+      queryClient.invalidateQueries(['template-repository-list']);
+      queryClient.invalidateQueries(['template-repository-detail']);
     }
-  )
-  const templateRepository = templateRepositoryQuery.data?.templateRepository
-  const [publicIsDisabled, setPublicIsDisabled] = useState(false)
+  });
+  const templateRepository = templateRepositoryQuery.data?.templateRepository;
+  const [publicIsDisabled, setPublicIsDisabled] = useState(false);
   useEffect(() => {
     if (isOpen && templateRepository && templateRepositoryQuery.isSuccess) {
-      setValue('tags', templateRepository.templateRepositoryTags.map(({ tag }) => ({
-        value: tag.uid,
-      })))
+      setValue(
+        'tags',
+        templateRepository.templateRepositoryTags.map(({ tag }) => ({
+          value: tag.uid
+        }))
+      );
 
-      setValue('name', templateRepository.name)
-      setValue('description', templateRepository.description || '')
-      setValue('isPublic', templateRepository.isPublic)
+      setValue('name', templateRepository.name);
+      setValue('description', templateRepository.description || '');
+      setValue('isPublic', templateRepository.isPublic);
       if (templateRepository.isPublic) {
-        setPublicIsDisabled(true)
-        setValue('agreeTerms', true)
+        setPublicIsDisabled(true);
+        setValue('agreeTerms', true);
       }
     }
-  }, [templateRepository, isOpen])
-  const { message: toast } = useMessage()
-  const queryClient = useQueryClient()
+  }, [templateRepository, isOpen]);
+  const { message: toast } = useMessage();
+  const queryClient = useQueryClient();
   const onSubmitHandler = async (_data: FormData) => {
     try {
-      const result = formSchema.safeParse(_data)
+      const result = formSchema.safeParse(_data);
       if (!result.success) {
-        const error = result.error.errors[0]
+        const error = result.error.errors[0];
         toast({
           title: error.message,
-          status: 'error',
+          status: 'error'
         });
         return;
       }
-      const data = result.data
+      const data = result.data;
       await updateMutation.mutateAsync({
         uid,
         templateRepositoryName: data.name,
@@ -127,84 +126,78 @@ const EditTemplateRepositoryModal: FC<CreateTemplateModalProps> = ({
         description: data.description,
         tagUidList: data.tags.map(({ value }) => value)
       });
-      queryClient.invalidateQueries(['template-repository-list'])
+      queryClient.invalidateQueries(['template-repository-list']);
       reset();
       onClose();
       toast({
         title: t('template_ssaved_successfully'),
-        status: 'success',
+        status: 'success'
       });
     } catch (error) {
       toast({
         title: error as string,
-        status: 'error',
+        status: 'error'
       });
     }
   };
-  return (<>
-    <Modal
-      isOpen={isOpen}
-      onClose={onClose}
-      size="md"
-      onCloseComplete={() => reset()}
-    >
-      <ModalOverlay />
-      <ModalContent maxW="562px" margin={'auto'}>
-        <FormProvider {...methods}>
-          <form onSubmit={handleSubmit(onSubmitHandler)}>
-            <ModalHeader>
-              <Text>{t('edit_template')}</Text>
-            </ModalHeader>
-            <ModalBody pt={'32px'} pb={'24px'} px={'52px'} >
-              <ModalCloseButton />
-
-              <VStack spacing={6} align="stretch">
-                {/* 名称 */}
-                <TemplateRepositoryNameField isDisabled />
-
-                {/* 公开 */}
-                <TemplateRepositoryIsPublicField isDisabled={publicIsDisabled} />
+  return (
+    <>
+      <Modal isOpen={isOpen} onClose={onClose} size="md" onCloseComplete={() => reset()}>
+        <ModalOverlay />
+        <ModalContent maxW="562px" margin={'auto'}>
+          <FormProvider {...methods}>
+            <form onSubmit={handleSubmit(onSubmitHandler)}>
+              <ModalHeader>
+                <Text>{t('edit_template')}</Text>
+              </ModalHeader>
+              <ModalBody pt={'32px'} pb={'24px'} px={'52px'}>
+                <ModalCloseButton />
 
-                {/* 标签 */}
-                <TemplateRepositoryTagField />
+                <VStack spacing={6} align="stretch">
+                  {/* 名称 */}
+                  <TemplateRepositoryNameField isDisabled />
 
-                {/* 简介 */}
-                <TemplateRepositoryDescriptionField />
-              </VStack>
+                  {/* 公开 */}
+                  <TemplateRepositoryIsPublicField isDisabled={publicIsDisabled} />
 
-            </ModalBody>
-            <ModalFooter px={'52px'} pb={'32px'}>
-              {/* 按钮组 */}
-              <ButtonGroup variant={'outline'}>
-                <Button
-                  px={'29.5px'}
-                  py={'8px'}
-                  onClick={() => {
-                    reset();
-                    onClose();
-                  }}
-                >
-                  {t('cancel')}
-                </Button>
-                <Button
-                  type="submit"
-                  px={'29.5px'}
-                  py={'8px'}
-                  variant={'solid'}
-                  // _hover={{ bg: 'grayModern.800' }}
-                  isLoading={isSubmitting}
-                >
-                  {t('save_template')}
-                </Button>
-              </ButtonGroup>
-            </ModalFooter>
-          </form>
-        </FormProvider>
+                  {/* 标签 */}
+                  <TemplateRepositoryTagField />
 
-      </ModalContent>
-    </Modal>
-  </>
+                  {/* 简介 */}
+                  <TemplateRepositoryDescriptionField />
+                </VStack>
+              </ModalBody>
+              <ModalFooter px={'52px'} pb={'32px'}>
+                {/* 按钮组 */}
+                <ButtonGroup variant={'outline'}>
+                  <Button
+                    px={'29.5px'}
+                    py={'8px'}
+                    onClick={() => {
+                      reset();
+                      onClose();
+                    }}
+                  >
+                    {t('cancel')}
+                  </Button>
+                  <Button
+                    type="submit"
+                    px={'29.5px'}
+                    py={'8px'}
+                    variant={'solid'}
+                    // _hover={{ bg: 'grayModern.800' }}
+                    isLoading={isSubmitting}
+                  >
+                    {t('save_template')}
+                  </Button>
+                </ButtonGroup>
+              </ModalFooter>
+            </form>
+          </FormProvider>
+        </ModalContent>
+      </Modal>
+    </>
   );
 };
 
-export default EditTemplateRepositoryModal
\ No newline at end of file
+export default EditTemplateRepositoryModal;
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/SelectActionModal/TemplateDropdown.tsx b/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/SelectActionModal/TemplateDropdown.tsx
index 34c6518c38d8..7ab584287e75 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/SelectActionModal/TemplateDropdown.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/SelectActionModal/TemplateDropdown.tsx
@@ -1,13 +1,34 @@
-import MyIcon from "@/components/Icon";
-import { ChevronDownIcon } from "@chakra-ui/icons";
-import { Box, Button, ButtonProps, HStack, Img, Popover, PopoverBody, PopoverContent, PopoverTrigger, Text, useDisclosure, VStack } from "@chakra-ui/react";
+import MyIcon from '@/components/Icon';
+import { ChevronDownIcon } from '@chakra-ui/icons';
+import {
+  Box,
+  Button,
+  ButtonProps,
+  HStack,
+  Img,
+  Popover,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+  Text,
+  useDisclosure,
+  VStack
+} from '@chakra-ui/react';
 
-const TemplateButton = ({ isActive = false, icon, title, description, onClick, isInMenu = false, ...props }: ButtonProps & {
+const TemplateButton = ({
+  isActive = false,
+  icon,
+  title,
+  description,
+  onClick,
+  isInMenu = false,
+  ...props
+}: ButtonProps & {
   icon: React.ReactNode;
   title: string;
   isActive?: boolean;
-  isInMenu?: boolean
-  description: string
+  isInMenu?: boolean;
+  description: string;
 }) => {
   return (
     <Button
@@ -16,21 +37,15 @@ const TemplateButton = ({ isActive = false, icon, title, description, onClick, i
       h="74px"
       bg="#F7F8FA"
       border="1px solid"
-      borderColor={isActive ? "#219BF4" : "#E8EBF0"}
+      borderColor={isActive ? '#219BF4' : '#E8EBF0'}
       borderRadius="8px"
       position="relative"
       cursor="pointer"
-      boxShadow={isActive ? "0px 0px 0px 2.4px rgba(33, 155, 244, 0.15)" : "none"}
+      boxShadow={isActive ? '0px 0px 0px 2.4px rgba(33, 155, 244, 0.15)' : 'none'}
       onClick={onClick}
       {...props}
     >
-      <HStack
-        spacing="12px"
-        position="absolute"
-        left="16px"
-        top="50%"
-        transform="translateY(-50%)"
-      >
+      <HStack spacing="12px" position="absolute" left="16px" top="50%" transform="translateY(-50%)">
         <Box w="32px" h="32px">
           {icon}
         </Box>
@@ -40,7 +55,7 @@ const TemplateButton = ({ isActive = false, icon, title, description, onClick, i
             fontWeight="500"
             lineHeight="24px"
             letterSpacing="0.15px"
-            color={isActive ? "#0884DD" : "#111824"}
+            color={isActive ? '#0884DD' : '#111824'}
             overflow={'hidden'}
             textOverflow={'ellipsis'}
             whiteSpace={'nowrap'}
@@ -53,7 +68,7 @@ const TemplateButton = ({ isActive = false, icon, title, description, onClick, i
             fontSize="12px"
             lineHeight="16px"
             letterSpacing="0.004em"
-            color={isActive ? "#0884DD" : "#667085"}
+            color={isActive ? '#0884DD' : '#667085'}
             overflow={'hidden'}
             width={'auto'}
             textOverflow={'ellipsis'}
@@ -73,12 +88,11 @@ const TemplateButton = ({ isActive = false, icon, title, description, onClick, i
           w="20px"
           h="20px"
           color="#667085"
-          
         />
       )}
       {isActive && (
         <MyIcon
-          name='checkTemplate'
+          name="checkTemplate"
           position="absolute"
           right="16px"
           top="50%"
@@ -91,34 +105,38 @@ const TemplateButton = ({ isActive = false, icon, title, description, onClick, i
   );
 };
 type TRepositoryItem = {
-  iconId: string | null,
-  name: string,
-  description: string | null,
-  uid: string
-}
+  iconId: string | null;
+  name: string;
+  description: string | null;
+  uid: string;
+};
 export default function TemplateDropdown({
   templateRepositoryList,
   selectedTemplateRepoUid,
   setSelectedTemplateRepoUid
 }: {
-  templateRepositoryList: TRepositoryItem[],
-  selectedTemplateRepoUid: string | null,
-  setSelectedTemplateRepoUid: (uid: string) => void
+  templateRepositoryList: TRepositoryItem[];
+  selectedTemplateRepoUid: string | null;
+  setSelectedTemplateRepoUid: (uid: string) => void;
 }) {
-  const selectedTemplateRepository = templateRepositoryList.find(t => t.uid === selectedTemplateRepoUid);
-  const {
-    isOpen, onOpen, onClose } = useDisclosure()
+  const selectedTemplateRepository = templateRepositoryList.find(
+    (t) => t.uid === selectedTemplateRepoUid
+  );
+  const { isOpen, onOpen, onClose } = useDisclosure();
   return (
-    <Popover placement="bottom-start" isOpen={isOpen} onClose={() => isOpen && onClose()} onOpen={() => !isOpen && onOpen()}>
+    <Popover
+      placement="bottom-start"
+      isOpen={isOpen}
+      onClose={() => isOpen && onClose()}
+      onOpen={() => !isOpen && onOpen()}
+    >
       <PopoverTrigger>
         <Box width={'400px'}>
           <TemplateButton
             userSelect={'none'}
             isActive={false}
             width={'400px'}
-            icon={<Img
-              src={`/images/${selectedTemplateRepository?.iconId || ''}.svg`}
-            />}
+            icon={<Img src={`/images/${selectedTemplateRepository?.iconId || ''}.svg`} />}
             title={selectedTemplateRepository?.name || ''}
             description={selectedTemplateRepository?.description || ''}
           />
@@ -133,9 +151,7 @@ export default function TemplateDropdown({
                 key={uid}
                 width={'full'}
                 isActive={selectedTemplateRepoUid === uid}
-                icon={<Img
-                  src={`/images/${iconId}.svg`}
-                />}
+                icon={<Img src={`/images/${iconId}.svg`} />}
                 isInMenu
                 title={name}
                 description={description || ''}
@@ -145,7 +161,6 @@ export default function TemplateDropdown({
           </VStack>
         </PopoverBody>
       </PopoverContent>
-
     </Popover>
   );
-};
\ No newline at end of file
+}
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/SelectActionModal/index.tsx b/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/SelectActionModal/index.tsx
index de780917b1b7..fe21716f729b 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/SelectActionModal/index.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/SelectActionModal/index.tsx
@@ -13,10 +13,9 @@ import { useTranslations } from 'next-intl';
 
 import MyIcon from '@/components/Icon';
 import { useMessage } from '@sealos/ui';
-import { useState } from "react";
+import { useState } from 'react';
 import TemplateDropdown from './TemplateDropdown';
 
-
 const SelectTemplateModal = ({
   isOpen,
   onClose,
@@ -26,20 +25,23 @@ const SelectTemplateModal = ({
 }: {
   isOpen: boolean;
   onClose: () => void;
-  templateRepositoryList: { iconId: string | null, name: string, description: null | string, uid: string }[]
+  templateRepositoryList: {
+    iconId: string | null;
+    name: string;
+    description: null | string;
+    uid: string;
+  }[];
   onSubmit?: (data: FormData) => void;
   onOpenCreate: () => void;
   onOpenUdate: (templateRepoUid: string) => void;
 }) => {
-  const { message } = useMessage()
-  const t = useTranslations()
-  const [selectedTemplateRepoUid, setSelectedTemplateRepoUid] = useState(templateRepositoryList?.[0]?.uid);
+  const { message } = useMessage();
+  const t = useTranslations();
+  const [selectedTemplateRepoUid, setSelectedTemplateRepoUid] = useState(
+    templateRepositoryList?.[0]?.uid
+  );
   return (
-    <Modal
-      isOpen={isOpen}
-      onClose={onClose}
-      size="md"
-    >
+    <Modal isOpen={isOpen} onClose={onClose} size="md">
       <ModalOverlay />
       <ModalContent maxW="504px" margin={'auto'}>
         <ModalHeader>
@@ -47,31 +49,42 @@ const SelectTemplateModal = ({
         </ModalHeader>
         <ModalBody pt={'32px'} px={'52px'} pb={'24px'}>
           <ModalCloseButton />
-          <Text mb={'10px'} color={'grayModern.900'} fontWeight={500}>{t("select_template_tips")}</Text>
+          <Text mb={'10px'} color={'grayModern.900'} fontWeight={500}>
+            {t('select_template_tips')}
+          </Text>
           <TemplateDropdown
             templateRepositoryList={templateRepositoryList || []}
             selectedTemplateRepoUid={selectedTemplateRepoUid}
-            setSelectedTemplateRepoUid={setSelectedTemplateRepoUid} />
+            setSelectedTemplateRepoUid={setSelectedTemplateRepoUid}
+          />
         </ModalBody>
         <ModalFooter gap={'16px'} px={'52px'}>
-          <Button variant={'unstyled'} color={'brightBlue.600'} display={'flex'} onClick={() => {
-            onOpenCreate()
-            onClose()
-          }}>
-            <MyIcon name='plus' boxSize={'20px'} />
+          <Button
+            variant={'unstyled'}
+            color={'brightBlue.600'}
+            display={'flex'}
+            onClick={() => {
+              onOpenCreate();
+              onClose();
+            }}
+          >
+            <MyIcon name="plus" boxSize={'20px'} />
             <Text> {t('create_template')}</Text>
           </Button>
-          <Button variant={'solid'} onClick={() => {
-            if (!selectedTemplateRepoUid) {
-              return message({
-                title: t("select_template_tips"),
-                status: 'error'
-              })
-            }
+          <Button
+            variant={'solid'}
+            onClick={() => {
+              if (!selectedTemplateRepoUid) {
+                return message({
+                  title: t('select_template_tips'),
+                  status: 'error'
+                });
+              }
 
-            onOpenUdate(selectedTemplateRepoUid)
-            onClose()
-          }}>
+              onOpenUdate(selectedTemplateRepoUid);
+              onClose();
+            }}
+          >
             {t('confirm')}
           </Button>
         </ModalFooter>
@@ -80,4 +93,4 @@ const SelectTemplateModal = ({
   );
 };
 
-export default SelectTemplateModal
\ No newline at end of file
+export default SelectTemplateModal;
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/UpdateTemplateRepositoryModal.tsx b/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/UpdateTemplateRepositoryModal.tsx
index 5bb60056ea6f..24061c60ec68 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/UpdateTemplateRepositoryModal.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/UpdateTemplateRepositoryModal.tsx
@@ -35,11 +35,10 @@ import TemplateRepositoryDescriptionField from './components/TemplateRepositoryD
 import TemplateRepositoryNameField from './components/TemplateRepositoryNameField';
 import TemplateRepositoryTagField from './components/TemplateRepositoryTagField';
 
-
 interface CreateTemplateModalProps {
   isOpen: boolean;
   onClose: () => void;
-  devboxReleaseName: string
+  devboxReleaseName: string;
   templateRepository: {
     uid: string;
     name: string;
@@ -59,147 +58,150 @@ interface CreateTemplateModalProps {
   };
 }
 
-
-const VersionSelect = ({ templateList }: { templateList: { uid: string, name: string }[] }) => {
-  const {
-    watch,
-    setValue,
-  } = useFormContext<any>();
-  const [inputValue, setInputValue] = useState("")
+const VersionSelect = ({ templateList }: { templateList: { uid: string; name: string }[] }) => {
+  const { watch, setValue } = useFormContext<any>();
+  const [inputValue, setInputValue] = useState('');
 
   const handleVersionSelect = (version: string) => {
-    setInputValue(version)
-    setValue('version', inputValue)
-    handler.onClose()
-  }
-  const handler = useDisclosure()
+    setInputValue(version);
+    setValue('version', inputValue);
+    handler.onClose();
+  };
+  const handler = useDisclosure();
 
   const handleCreateVersion = () => {
     // 处理创建新版本的逻辑
-    setValue('version', inputValue)
-    handler.onClose()
-  }
-  const t = useTranslations()
-  return (<>
-    <Popover placement="bottom-start" isOpen={handler.isOpen} onOpen={handler.onOpen} onClose={handler.onClose}>
-      <PopoverTrigger >
-        <Flex
-          width={'350px'}
-          bgColor={'grayModern.50'}
-          border={'1px solid'}
-          borderColor={'grayModern.200'}
-          borderRadius={'6px'}
-          py={'8px'}
-          px={'12px'}
-          justify={'space-between'}
-        >
-          <Text fontSize={'12px'} width={400}>{watch('version')}</Text>
-          <MyIcon name='chevronDown' boxSize={'16px'} color={'grayModern.500'} />
-        </Flex>
-      </PopoverTrigger>
-      <PopoverContent
+    setValue('version', inputValue);
+    handler.onClose();
+  };
+  const t = useTranslations();
+  return (
+    <>
+      <Popover
+        placement="bottom-start"
+        isOpen={handler.isOpen}
+        onOpen={handler.onOpen}
+        onClose={handler.onClose}
       >
-        <PopoverBody p="6px"
-          width="280px"
-          boxShadow="box-shadow: 0px 0px 1px 0px #13336B1A,box-shadow: 0px 4px 10px 0px #13336B1A"
-          border="none"
-          borderRadius="6px">
-          <Input
-            width="full"
-            height="32px"
-            value={inputValue}
-            onChange={e => {
-              setInputValue(e.target.value)
-            }}
-            // border="1px solid #219BF4"
-            // boxShadow="0px 0px 0px 2.4px rgba(51, 112, 255, 0.15)"
-            borderRadius="4px"
-            fontSize="12px"
-            placeholder={t('search_or_add_version')}
-            _focus={{
-              border: "1px solid #219BF4",
-              boxShadow: "0px 0px 0px 2.4px rgba(51, 112, 255, 0.15)",
-            }}
-          />
-          <VStack spacing="0" align="stretch" mt={'4px'}>
-            {/* 已有版本列表 */}
-            {templateList
-              .filter(v => v.name.toLowerCase().includes(inputValue.toLowerCase()))
-              .map((v) => (
-                <Box
-                  key={v.uid}
+        <PopoverTrigger>
+          <Flex
+            width={'350px'}
+            bgColor={'grayModern.50'}
+            border={'1px solid'}
+            borderColor={'grayModern.200'}
+            borderRadius={'6px'}
+            py={'8px'}
+            px={'12px'}
+            justify={'space-between'}
+          >
+            <Text fontSize={'12px'} width={400}>
+              {watch('version')}
+            </Text>
+            <MyIcon name="chevronDown" boxSize={'16px'} color={'grayModern.500'} />
+          </Flex>
+        </PopoverTrigger>
+        <PopoverContent>
+          <PopoverBody
+            p="6px"
+            width="280px"
+            boxShadow="box-shadow: 0px 0px 1px 0px #13336B1A,box-shadow: 0px 4px 10px 0px #13336B1A"
+            border="none"
+            borderRadius="6px"
+          >
+            <Input
+              width="full"
+              height="32px"
+              value={inputValue}
+              onChange={(e) => {
+                setInputValue(e.target.value);
+              }}
+              // border="1px solid #219BF4"
+              // boxShadow="0px 0px 0px 2.4px rgba(51, 112, 255, 0.15)"
+              borderRadius="4px"
+              fontSize="12px"
+              placeholder={t('search_or_add_version')}
+              _focus={{
+                border: '1px solid #219BF4',
+                boxShadow: '0px 0px 0px 2.4px rgba(51, 112, 255, 0.15)'
+              }}
+            />
+            <VStack spacing="0" align="stretch" mt={'4px'}>
+              {/* 已有版本列表 */}
+              {templateList
+                .filter((v) => v.name.toLowerCase().includes(inputValue.toLowerCase()))
+                .map((v) => (
+                  <Box
+                    key={v.uid}
+                    p="8px 12px"
+                    borderRadius={'4px'}
+                    fontSize="12px"
+                    cursor="pointer"
+                    _hover={{ bg: 'rgba(17, 24, 36, 0.05)' }}
+                    onClick={() => handleVersionSelect(v.name)}
+                  >
+                    {v.name}
+                  </Box>
+                ))}
+
+              {/* 创建新版本选项 */}
+              {inputValue && !templateList.find((v) => v.name === inputValue) && (
+                <HStack
                   p="8px 12px"
-                  borderRadius={'4px'}
-                  fontSize="12px"
+                  spacing="8px"
                   cursor="pointer"
-                  _hover={{ bg: "rgba(17, 24, 36, 0.05)" }}
-                  onClick={() => handleVersionSelect(v.name)}
+                  _hover={{ bg: 'rgba(17, 24, 36, 0.05)' }}
+                  onClick={handleCreateVersion}
                 >
-                  {v.name}
-                </Box>
-              ))}
-
-            {/* 创建新版本选项 */}
-            {inputValue && !templateList.find(v => v.name === inputValue) && (
-              <HStack
-                p="8px 12px"
-                spacing="8px"
-                cursor="pointer"
-                _hover={{ bg: "rgba(17, 24, 36, 0.05)" }}
-                onClick={handleCreateVersion}
-              >
-                <AddIcon w="16px" h="16px" color="#667085" />
-                <Text
-                  fontSize="12px"
-                  lineHeight="16px"
-                  letterSpacing="0.004em"
-                  color="#111824"
-                >
-                  {t('create_template_version', {
-                    version: inputValue,
-                  })}
-                </Text>
-              </HStack>
-            )}
-          </VStack>
-        </PopoverBody>
-      </PopoverContent>
-    </Popover>
-  </>
-  )
-}
+                  <AddIcon w="16px" h="16px" color="#667085" />
+                  <Text fontSize="12px" lineHeight="16px" letterSpacing="0.004em" color="#111824">
+                    {t('create_template_version', {
+                      version: inputValue
+                    })}
+                  </Text>
+                </HStack>
+              )}
+            </VStack>
+          </PopoverBody>
+        </PopoverContent>
+      </Popover>
+    </>
+  );
+};
 const UpdateTemplateRepositoryModal: FC<CreateTemplateModalProps> = ({
   isOpen,
   onClose,
   templateRepository,
   devboxReleaseName
 }) => {
-  const t = useTranslations()
+  const t = useTranslations();
   const tagSchema = z.object({
-    value: z.string(),
+    value: z.string()
   });
   const formSchema = z.object({
     name: z.string().min(1, t('input_template_name_placeholder')),
     version: z.string().min(1, t('input_template_version_placeholder')).pipe(versionSchema),
-    tags: z.array(tagSchema).min(1, t('select_at_least_1_tag')).max(3, t('select_lest_than_3_tags')),
-    description: z.string(),
+    tags: z
+      .array(tagSchema)
+      .min(1, t('select_at_least_1_tag'))
+      .max(3, t('select_lest_than_3_tags')),
+    description: z.string()
   });
-  const queryClient = useQueryClient()
+  const queryClient = useQueryClient();
   type FormData = z.infer<typeof formSchema>;
   const mutation = useMutation(updateTemplate, {
     onSuccess() {
-      queryClient.invalidateQueries(['template-repository-list'])
-      queryClient.invalidateQueries(['template-repository-detail'])
+      queryClient.invalidateQueries(['template-repository-list']);
+      queryClient.invalidateQueries(['template-repository-detail']);
     }
-  })
+  });
   const methods = useForm<FormData>({
     defaultValues: {
       name: '',
       version: '',
       // agreeTerms: false,
       tags: [],
-      description: '',
-    },
+      description: ''
+    }
   });
   const {
     handleSubmit,
@@ -207,141 +209,143 @@ const UpdateTemplateRepositoryModal: FC<CreateTemplateModalProps> = ({
     reset,
     setValue,
     watch
-  } = methods
+  } = methods;
   useEffect(() => {
     if (templateRepository && isOpen) {
-      setValue('tags', templateRepository.templateRepositoryTags.map(({ tag }) => ({
-        value: tag.uid,
-      })))
-      setValue('version', templateRepository.templates[0]?.name || '')
-      setValue('name', templateRepository.name)
-      setValue('description', templateRepository.description || '')
+      setValue(
+        'tags',
+        templateRepository.templateRepositoryTags.map(({ tag }) => ({
+          value: tag.uid
+        }))
+      );
+      setValue('version', templateRepository.templates[0]?.name || '');
+      setValue('name', templateRepository.name);
+      setValue('description', templateRepository.description || '');
     }
-  }, [templateRepository, isOpen])
-  const { message: toast } = useMessage()
-  const overviewHandler = useDisclosure()
+  }, [templateRepository, isOpen]);
+  const { message: toast } = useMessage();
+  const overviewHandler = useDisclosure();
   const submit = async (_data: FormData) => {
     try {
-      const result = formSchema.safeParse(_data)
+      const result = formSchema.safeParse(_data);
       if (!result.success) {
-        const error = result.error.errors[0]
-        if(error.path[0] === 'version' && error.code === 'invalid_string') {
+        const error = result.error.errors[0];
+        if (error.path[0] === 'version' && error.code === 'invalid_string') {
           toast({
             title: t('invalide_template_version'),
-            status: 'error',
+            status: 'error'
           });
           return;
         }
         toast({
           title: error.message,
-          status: 'error',
+          status: 'error'
         });
         return;
       }
-      const data = result.data
+      const data = result.data;
       await mutation.mutateAsync({
         templateRepositoryUid: templateRepository?.uid || '',
         version: data.version,
         devboxReleaseName,
         description: data.description,
-        tagUidList: data.tags.map(({ value }) => value),
-      })
+        tagUidList: data.tags.map(({ value }) => value)
+      });
 
-      queryClient.invalidateQueries(['template-repository-list'])
+      queryClient.invalidateQueries(['template-repository-list']);
       reset();
       onClose();
       toast({
         title: t('update_template_success'),
-        status: 'success',
+        status: 'success'
       });
     } catch (error) {
       toast({
         title: error as string,
-        status: 'error',
+        status: 'error'
       });
     }
   };
   const onSubmitHandler = (data: FormData) => {
-    if (templateRepository.templates.findIndex(d => data.version === d.name) > -1) {
-      overviewHandler.onOpen()
-      return
+    if (templateRepository.templates.findIndex((d) => data.version === d.name) > -1) {
+      overviewHandler.onOpen();
+      return;
     }
-    return submit(data)
+    return submit(data);
   };
 
-  return (<>
-    <Modal
-      isOpen={isOpen}
-      onClose={onClose}
-      size="md"
-      onCloseComplete={() => reset()}
-    >
-      <ModalOverlay />
-      <ModalContent maxW="562px" margin={'auto'}>
-        <FormProvider {...methods}>
-          <form onSubmit={handleSubmit(onSubmitHandler)}>
-            <ModalHeader>
-              <Text>{t('update_template')}</Text>
-            </ModalHeader>
-            <ModalBody pt={'32px'} pb={'24px'} px={'52px'}>
-              <ModalCloseButton />
-              <VStack spacing={6} align="stretch">
-                {/* 名称 */}
-                <TemplateRepositoryNameField isDisabled/>
+  return (
+    <>
+      <Modal isOpen={isOpen} onClose={onClose} size="md" onCloseComplete={() => reset()}>
+        <ModalOverlay />
+        <ModalContent maxW="562px" margin={'auto'}>
+          <FormProvider {...methods}>
+            <form onSubmit={handleSubmit(onSubmitHandler)}>
+              <ModalHeader>
+                <Text>{t('update_template')}</Text>
+              </ModalHeader>
+              <ModalBody pt={'32px'} pb={'24px'} px={'52px'}>
+                <ModalCloseButton />
+                <VStack spacing={6} align="stretch">
+                  {/* 名称 */}
+                  <TemplateRepositoryNameField isDisabled />
 
-                {/* 版本号 */}
-                <Flex justify={'space-between'} align={'center'}>
-                  <MyFormLabel width="108px" m='0' fontSize="14px" isRequired>{t('version')}</MyFormLabel>
-                  <VStack>
-                    <VersionSelect
-                      templateList={templateRepository.templates}
-                    />
-                  </VStack>
-                </Flex>
+                  {/* 版本号 */}
+                  <Flex justify={'space-between'} align={'center'}>
+                    <MyFormLabel width="108px" m="0" fontSize="14px" isRequired>
+                      {t('version')}
+                    </MyFormLabel>
+                    <VStack>
+                      <VersionSelect templateList={templateRepository.templates} />
+                    </VStack>
+                  </Flex>
 
-                {/* 标签 */}
-                <TemplateRepositoryTagField  />
-
-                {/* 简介 */}
-                <TemplateRepositoryDescriptionField />
-
-              </VStack>
-
-            </ModalBody>
-            <ModalFooter px={'52px'} pb={'32px'}>
-              {/* 按钮组 */}
-              <ButtonGroup variant={'outline'}>
-                <Button
-                  px={'29.5px'}
-                  py={'8px'}
-                  onClick={() => {
-                    reset();
-                    onClose();
-                  }}
-                >
-                  {t('cancel')}
-                </Button>
-                <Button
-                  type="submit"
-                  px={'29.5px'}
-                  py={'8px'}
-                  variant={'solid'}
-                  isLoading={isSubmitting}
-                >
-                  {t('save_template')}
-                </Button>
-              </ButtonGroup>
-            </ModalFooter>
-          </form>
-        </FormProvider>
+                  {/* 标签 */}
+                  <TemplateRepositoryTagField />
 
-      </ModalContent>
-    </Modal>
-    <OverviewTemplateVersionModal isOpen={overviewHandler.isOpen} onClose={overviewHandler.onClose} onSubmit={() => {
-      submit(methods.getValues())
-    }} version={watch('version')} template={templateRepository.name} />
-  </>
+                  {/* 简介 */}
+                  <TemplateRepositoryDescriptionField />
+                </VStack>
+              </ModalBody>
+              <ModalFooter px={'52px'} pb={'32px'}>
+                {/* 按钮组 */}
+                <ButtonGroup variant={'outline'}>
+                  <Button
+                    px={'29.5px'}
+                    py={'8px'}
+                    onClick={() => {
+                      reset();
+                      onClose();
+                    }}
+                  >
+                    {t('cancel')}
+                  </Button>
+                  <Button
+                    type="submit"
+                    px={'29.5px'}
+                    py={'8px'}
+                    variant={'solid'}
+                    isLoading={isSubmitting}
+                  >
+                    {t('save_template')}
+                  </Button>
+                </ButtonGroup>
+              </ModalFooter>
+            </form>
+          </FormProvider>
+        </ModalContent>
+      </Modal>
+      <OverviewTemplateVersionModal
+        isOpen={overviewHandler.isOpen}
+        onClose={overviewHandler.onClose}
+        onSubmit={() => {
+          submit(methods.getValues());
+        }}
+        version={watch('version')}
+        template={templateRepository.name}
+      />
+    </>
   );
 };
 
-export default UpdateTemplateRepositoryModal
\ No newline at end of file
+export default UpdateTemplateRepositoryModal;
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/components/TemplateRepositoryDescriptionField.tsx b/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/components/TemplateRepositoryDescriptionField.tsx
index a9f978b66afd..f62470da5309 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/components/TemplateRepositoryDescriptionField.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/components/TemplateRepositoryDescriptionField.tsx
@@ -1,19 +1,22 @@
-import MyFormLabel from "@/components/MyFormControl";
-import { Flex, Textarea } from "@chakra-ui/react";
-import { useTranslations } from "next-intl";
-import { Controller, useFormContext } from "react-hook-form";
+import MyFormLabel from '@/components/MyFormControl';
+import { Flex, Textarea } from '@chakra-ui/react';
+import { useTranslations } from 'next-intl';
+import { Controller, useFormContext } from 'react-hook-form';
 export default function TemplateRepositoryDescriptionField() {
   const { control } = useFormContext<{ description: string }>();
-  const t = useTranslations()
-  return  <Flex align={'center'}>
-      <MyFormLabel width="108px" m='0' fontSize="14px">{t('template_description')}</MyFormLabel>
+  const t = useTranslations();
+  return (
+    <Flex align={'center'}>
+      <MyFormLabel width="108px" m="0" fontSize="14px">
+        {t('template_description')}
+      </MyFormLabel>
       <Controller
         name="description"
         control={control}
         render={({ field }) => (
           <Textarea
             {...field}
-            placeholder={t("template_description_placeholder")}
+            placeholder={t('template_description_placeholder')}
             bg="grayModern.50"
             borderColor="grayModern.200"
             color={'grayModern.500'}
@@ -25,4 +28,5 @@ export default function TemplateRepositoryDescriptionField() {
         )}
       />
     </Flex>
-}
\ No newline at end of file
+  );
+}
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/components/TemplateRepositoryIsPublicField.tsx b/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/components/TemplateRepositoryIsPublicField.tsx
index b74c6ab1dbc0..a43750e9c7f2 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/components/TemplateRepositoryIsPublicField.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/components/TemplateRepositoryIsPublicField.tsx
@@ -1,60 +1,84 @@
-import MyFormLabel from "@/components/MyFormControl";
-import { useEnvStore } from "@/stores/env";
-import { Alert, Flex, FormControl, Link, Switch, Text, VStack } from "@chakra-ui/react";
-import { InfoCircleIcon } from "@sealos/ui";
-import { useTranslations } from "next-intl";
-import { Controller, useFormContext } from "react-hook-form";
-import { TagCheckbox } from "../../TagCheckbox";
+import MyFormLabel from '@/components/MyFormControl';
+import { useEnvStore } from '@/stores/env';
+import { Alert, Flex, FormControl, Link, Switch, Text, VStack } from '@chakra-ui/react';
+import { InfoCircleIcon } from '@sealos/ui';
+import { useTranslations } from 'next-intl';
+import { Controller, useFormContext } from 'react-hook-form';
+import { TagCheckbox } from '../../TagCheckbox';
 
-export default function TemplateRepositoryIsPublicField({ isDisabled = false }: { isDisabled?: boolean }) {
+export default function TemplateRepositoryIsPublicField({
+  isDisabled = false
+}: {
+  isDisabled?: boolean;
+}) {
   const { control } = useFormContext();
-  const t = useTranslations()
-  const {env} = useEnvStore()
-  return <Flex>
-    <MyFormLabel isRequired width="108px" m='0' fontSize="14px" >{t('public')}</MyFormLabel>
-    <VStack align="start" spacing={'12px'} flex={1}>
-      <Controller
-        name="isPublic"
-        control={control}
-        render={({ field: { value, onChange } }) => (
-          <Switch
-            isChecked={value}
-            onChange={onChange}
-            size="md"
-            colorScheme="blackAlpha"
-            isDisabled={isDisabled}
-          />
-        )}
-      />
-      {<Alert status="info" borderRadius="md" py={'6px'} px={'12px'} color={'brightBlue.600'} bgColor={'brightBlue.50'} >
-        <InfoCircleIcon fill={'currentcolor'} mr={'4px'} boxSize={'14px'} />
-        <Text fontSize="12px" fontWeight={500}>
-          {t('set_template_to_public_tips')}
-        </Text>
-      </Alert>}
-      {!isDisabled && <FormControl>
+  const t = useTranslations();
+  const { env } = useEnvStore();
+  return (
+    <Flex>
+      <MyFormLabel isRequired width="108px" m="0" fontSize="14px">
+        {t('public')}
+      </MyFormLabel>
+      <VStack align="start" spacing={'12px'} flex={1}>
         <Controller
-          name="agreeTerms"
+          name="isPublic"
           control={control}
-          render={({ field: { value, onChange, onBlur } }) => (
-            <TagCheckbox
-              // value={value}
-              name='agreeTerms'
+          render={({ field: { value, onChange } }) => (
+            <Switch
               isChecked={value}
               onChange={onChange}
-              onBlur={onBlur}
-              size="sm"
-            >
-              <Text fontSize="12px" color="grayModern.600" fontWeight={500}>
-                {t('have_read_and_agree_to_the ')}<Link color={'brightBlue.600'} textDecoration={'underline'} 
-                href={env.privacyUrl}
-                target={'_blank'}
-                >{t('privacy_and_security_agreement')}</Link>
-              </Text>
-            </TagCheckbox>
+              size="md"
+              colorScheme="blackAlpha"
+              isDisabled={isDisabled}
+            />
           )}
         />
-      </FormControl>}
-    </VStack>
-  </Flex>
-}
\ No newline at end of file
+        {
+          <Alert
+            status="info"
+            borderRadius="md"
+            py={'6px'}
+            px={'12px'}
+            color={'brightBlue.600'}
+            bgColor={'brightBlue.50'}
+          >
+            <InfoCircleIcon fill={'currentcolor'} mr={'4px'} boxSize={'14px'} />
+            <Text fontSize="12px" fontWeight={500}>
+              {t('set_template_to_public_tips')}
+            </Text>
+          </Alert>
+        }
+        {!isDisabled && (
+          <FormControl>
+            <Controller
+              name="agreeTerms"
+              control={control}
+              render={({ field: { value, onChange, onBlur } }) => (
+                <TagCheckbox
+                  // value={value}
+                  name="agreeTerms"
+                  isChecked={value}
+                  onChange={onChange}
+                  onBlur={onBlur}
+                  size="sm"
+                >
+                  <Text fontSize="12px" color="grayModern.600" fontWeight={500}>
+                    {t('have_read_and_agree_to_the ')}
+                    <Link
+                      color={'brightBlue.600'}
+                      textDecoration={'underline'}
+                      href={env.privacyUrl}
+                      target={'_blank'}
+                    >
+                      {t('privacy_and_security_agreement')}
+                    </Link>
+                  </Text>
+                </TagCheckbox>
+              )}
+            />
+          </FormControl>
+        )}
+      </VStack>
+    </Flex>
+  );
+}
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/components/TemplateRepositoryNameField.tsx b/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/components/TemplateRepositoryNameField.tsx
index 3b8edd5eefe9..e0e60feeef8e 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/components/TemplateRepositoryNameField.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/components/TemplateRepositoryNameField.tsx
@@ -1,22 +1,29 @@
-import MyFormLabel from "@/components/MyFormControl";
-import { Flex, Input } from "@chakra-ui/react";
-import { useTranslations } from "next-intl";
-import { useFormContext } from "react-hook-form";
+import MyFormLabel from '@/components/MyFormControl';
+import { Flex, Input } from '@chakra-ui/react';
+import { useTranslations } from 'next-intl';
+import { useFormContext } from 'react-hook-form';
 
-export default function TemplateRepositoryNameField({ isDisabled = false }: { isDisabled?: boolean }) {
+export default function TemplateRepositoryNameField({
+  isDisabled = false
+}: {
+  isDisabled?: boolean;
+}) {
   const ctx = useFormContext<{ name: string }>();
-  const t = useTranslations()
-  return <Flex justify={'space-between'} align={'center'}>
-    <MyFormLabel isRequired width="108px" m='0' fontSize="14px">{t('name')}</MyFormLabel>
-    <Input
-      {...ctx.register('name')}
-      placeholder={t("input_template_name_placeholder")}
-      bg="grayModern.50"
-      borderColor="grayModern.200"
-      size="sm"
-      isDisabled={isDisabled}
-      width={'350px'}
-    />
-
-  </Flex>
-}
\ No newline at end of file
+  const t = useTranslations();
+  return (
+    <Flex justify={'space-between'} align={'center'}>
+      <MyFormLabel isRequired width="108px" m="0" fontSize="14px">
+        {t('name')}
+      </MyFormLabel>
+      <Input
+        {...ctx.register('name')}
+        placeholder={t('input_template_name_placeholder')}
+        bg="grayModern.50"
+        borderColor="grayModern.200"
+        size="sm"
+        isDisabled={isDisabled}
+        width={'350px'}
+      />
+    </Flex>
+  );
+}
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/components/TemplateRepositoryTagField.tsx b/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/components/TemplateRepositoryTagField.tsx
index 238e46d97a93..e70d24177086 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/components/TemplateRepositoryTagField.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplate/components/TemplateRepositoryTagField.tsx
@@ -1,106 +1,116 @@
-import { listTag } from "@/api/template";
-import MyFormLabel from "@/components/MyFormControl";
-import { Tag, TagType } from "@/prisma/generated/client";
-import { createTagSelectorStore } from "@/stores/tagSelector";
-import { Alert, Box, Divider, Flex, Text } from "@chakra-ui/react";
-import { InfoCircleIcon } from "@sealos/ui";
-import { useQuery } from "@tanstack/react-query";
-import { useLocale, useTranslations } from "next-intl";
-import { createContext, useRef } from "react";
-import { useFieldArray, useFormContext } from "react-hook-form";
-import { TagCheckbox } from "../../TagCheckbox";
+import { listTag } from '@/api/template';
+import MyFormLabel from '@/components/MyFormControl';
+import { Tag, TagType } from '@/prisma/generated/client';
+import { createTagSelectorStore } from '@/stores/tagSelector';
+import { Alert, Box, Divider, Flex, Text } from '@chakra-ui/react';
+import { InfoCircleIcon } from '@sealos/ui';
+import { useQuery } from '@tanstack/react-query';
+import { useLocale, useTranslations } from 'next-intl';
+import { createContext, useRef } from 'react';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+import { TagCheckbox } from '../../TagCheckbox';
 
-const TagSelectorStoreCtx = createContext<ReturnType<typeof createTagSelectorStore> | null>(null)
+const TagSelectorStoreCtx = createContext<ReturnType<typeof createTagSelectorStore> | null>(null);
 
-const TagList = ({ tags, title }: { tags: Tag[], title: string }) => {
-  const locale = useLocale()
+const TagList = ({ tags, title }: { tags: Tag[]; title: string }) => {
+  const locale = useLocale();
   const { control } = useFormContext<{ tags: Array<{ value: string }> }>();
   const { fields, append, remove } = useFieldArray({
     control,
-    name: 'tags',
+    name: 'tags'
   });
-  const containTag = (tagUid: string)=> fields.findIndex(t=>t.value===tagUid) > -1
+  const containTag = (tagUid: string) => fields.findIndex((t) => t.value === tagUid) > -1;
   const handleTagClick = (tag: Tag, isChecked: boolean) => {
-    const index = fields.findIndex(t => t.value === tag.uid);
-    if(!isChecked) {
-      if(index === -1){
-        return
+    const index = fields.findIndex((t) => t.value === tag.uid);
+    if (!isChecked) {
+      if (index === -1) {
+        return;
       }
       remove(index);
     } else {
-      if(index > -1){
-        return
+      if (index > -1) {
+        return;
       }
       append({ value: tag.uid });
     }
-
   };
-  return <Box>
-    <Text fontSize="12px" fontWeight={500} color={'grayModern.600'} mb={'4px'}>{title}</Text>
-    <Flex gap={'8px'} wrap="wrap" width={'350px'}>
-      {tags.map((tag) => (
-        <Flex
-          key={tag.uid}
-          px={'8px'}
-          py={'4px'}
-          bg="grayModern.50"
-          borderRadius="full"
-        >
-          <TagCheckbox
-            name={`tag-${tag.uid}`}
-            isChecked={containTag(tag.uid)}
-            onChange={(e) => handleTagClick(tag, e.target.checked)}
-          >
-            <Text color={'grayModern.900'}>{tag[locale === 'zh' ? 'zhName' : 'enName'] || tag.name}</Text>
-          </TagCheckbox>
-        </Flex>
-      ))}
-    </Flex>
-  </Box>
-}
+  return (
+    <Box>
+      <Text fontSize="12px" fontWeight={500} color={'grayModern.600'} mb={'4px'}>
+        {title}
+      </Text>
+      <Flex gap={'8px'} wrap="wrap" width={'350px'}>
+        {tags.map((tag) => (
+          <Flex key={tag.uid} px={'8px'} py={'4px'} bg="grayModern.50" borderRadius="full">
+            <TagCheckbox
+              name={`tag-${tag.uid}`}
+              isChecked={containTag(tag.uid)}
+              onChange={(e) => handleTagClick(tag, e.target.checked)}
+            >
+              <Text color={'grayModern.900'}>
+                {tag[locale === 'zh' ? 'zhName' : 'enName'] || tag.name}
+              </Text>
+            </TagCheckbox>
+          </Flex>
+        ))}
+      </Flex>
+    </Box>
+  );
+};
 export default function TemplateRepositoryTagField() {
-  const tagsQuery = useQuery(
-    ['template-repository-tags'],
-    listTag,
-    {
-      staleTime: Infinity,
-      cacheTime: Infinity,
-    }
-  )
+  const tagsQuery = useQuery(['template-repository-tags'], listTag, {
+    staleTime: Infinity,
+    cacheTime: Infinity
+  });
   const tagList = (tagsQuery.data?.tagList || []).filter((tag) => tag.name !== 'official');
-  let tagListCollection = tagList.reduce((acc, tag) => {
-    if (!acc[tag.type]) {
-      acc[tag.type] = [];
-    }
-    acc[tag.type].push(tag);
-    return acc;
-  }, {
-    [TagType.OFFICIAL_CONTENT]: [],
-    [TagType.USE_CASE]: [],
-    [TagType.PROGRAMMING_LANGUAGE]: []
-  } as Record<TagType, Tag[]>
+  let tagListCollection = tagList.reduce(
+    (acc, tag) => {
+      if (!acc[tag.type]) {
+        acc[tag.type] = [];
+      }
+      acc[tag.type].push(tag);
+      return acc;
+    },
+    {
+      [TagType.OFFICIAL_CONTENT]: [],
+      [TagType.USE_CASE]: [],
+      [TagType.PROGRAMMING_LANGUAGE]: []
+    } as Record<TagType, Tag[]>
   );
-  const tagSelectorStore = useRef(createTagSelectorStore()).current
+  const tagSelectorStore = useRef(createTagSelectorStore()).current;
 
-  const t = useTranslations()
-  return <Flex align={'center'}>
-    <MyFormLabel isRequired width="108px" m='0' fontSize="14px" alignSelf={'flex-start'}>{t('tags')}</MyFormLabel>
-
-    <Box width={'350px'}>
-      <Box mb={'12px'}>
-        <TagSelectorStoreCtx.Provider value={tagSelectorStore} >
-          <TagList tags={tagListCollection[TagType.USE_CASE]} title={t('use_case')} />
-          <Divider my={'12px'} color={'grayModern.150'} />
-          <TagList tags={tagListCollection[TagType.PROGRAMMING_LANGUAGE]} title={t('programming_language')} />
-        </TagSelectorStoreCtx.Provider>
+  const t = useTranslations();
+  return (
+    <Flex align={'center'}>
+      <MyFormLabel isRequired width="108px" m="0" fontSize="14px" alignSelf={'flex-start'}>
+        {t('tags')}
+      </MyFormLabel>
 
+      <Box width={'350px'}>
+        <Box mb={'12px'}>
+          <TagSelectorStoreCtx.Provider value={tagSelectorStore}>
+            <TagList tags={tagListCollection[TagType.USE_CASE]} title={t('use_case')} />
+            <Divider my={'12px'} color={'grayModern.150'} />
+            <TagList
+              tags={tagListCollection[TagType.PROGRAMMING_LANGUAGE]}
+              title={t('programming_language')}
+            />
+          </TagSelectorStoreCtx.Provider>
+        </Box>
+        <Alert
+          status="info"
+          borderRadius="md"
+          py={'6px'}
+          px={'12px'}
+          color={'brightBlue.600'}
+          bgColor={'brightBlue.50'}
+        >
+          <InfoCircleIcon fill={'currentcolor'} mr={'4px'} boxSize={'14px'} />
+          <Text fontSize="12px" fontWeight={500}>
+            {t('select_tag_tips')}
+          </Text>
+        </Alert>
       </Box>
-      <Alert status="info" borderRadius="md" py={'6px'} px={'12px'} color={'brightBlue.600'} bgColor={'brightBlue.50'}>
-        <InfoCircleIcon fill={'currentcolor'} mr={'4px'} boxSize={'14px'} />
-        <Text fontSize="12px" fontWeight={500}>
-          {t('select_tag_tips')}
-        </Text>
-      </Alert>
-    </Box>
-  </Flex>
-}
\ No newline at end of file
+    </Flex>
+  );
+}
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplateVersion/DeleteTemplateVersionModal.tsx b/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplateVersion/DeleteTemplateVersionModal.tsx
index ffccefe58d86..9150bcef3989 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplateVersion/DeleteTemplateVersionModal.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplateVersion/DeleteTemplateVersionModal.tsx
@@ -1,72 +1,96 @@
-import { deleteTemplate } from "@/api/template"
-import MyIcon from "@/components/Icon"
-import { Button, ButtonGroup, Flex, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, ModalProps, Text } from "@chakra-ui/react"
-import { useMessage } from "@sealos/ui"
-import { useMutation, useQueryClient } from "@tanstack/react-query"
-import { useTranslations } from "next-intl"
+import { deleteTemplate } from '@/api/template';
+import MyIcon from '@/components/Icon';
+import {
+  Button,
+  ButtonGroup,
+  Flex,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  ModalProps,
+  Text
+} from '@chakra-ui/react';
+import { useMessage } from '@sealos/ui';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
 
-const DeleteTemplateVersionModal = ({ uid, version, template, isLasted, ...props }: Omit<ModalProps, 'children'> & {
-  uid: string,
-  version: string, template: string, isLasted: boolean
+const DeleteTemplateVersionModal = ({
+  uid,
+  version,
+  template,
+  isLasted,
+  ...props
+}: Omit<ModalProps, 'children'> & {
+  uid: string;
+  version: string;
+  template: string;
+  isLasted: boolean;
 }) => {
-  const t = useTranslations()
-  const { message } = useMessage()
-  const queryClient = useQueryClient()
+  const t = useTranslations();
+  const { message } = useMessage();
+  const queryClient = useQueryClient();
   const deleteVersion = useMutation(deleteTemplate, {
     onSuccess: () => {
-      queryClient.invalidateQueries(['templateList'])
-      queryClient.invalidateQueries(['template-repository-list'])
+      queryClient.invalidateQueries(['templateList']);
+      queryClient.invalidateQueries(['template-repository-list']);
       message({
         title: t('delete_template_version_success'),
         status: 'success'
-      }
-      )
+      });
     },
     onError: (error) => {
       message({
         title: error as string,
         status: 'error'
-      }
-      )
+      });
     }
-  })
+  });
   return (
     <Modal lockFocusAcrossFrames={false} {...props} onClose={props.onClose}>
       <ModalOverlay />
-      <ModalContent maxW={'400px'} margin={'auto'} >
+      <ModalContent maxW={'400px'} margin={'auto'}>
         <ModalHeader>
           <Flex gap={'10px'}>
-            <MyIcon name='warning' boxSize={'20px'} />
+            <MyIcon name="warning" boxSize={'20px'} />
             <Text fontSize={'16px'}>{t('prompt')}</Text>
           </Flex>
         </ModalHeader>
-        <ModalBody px={'36px'} py={'24px'} >
+        <ModalBody px={'36px'} py={'24px'}>
           <ModalCloseButton />
           {t.rich('delete_template_version_prompt', {
-            version: <Text display={'inline'} fontWeight={'600'}>{version}</Text> as any,
-            name: <Text display={'inline'} fontWeight={'600'}>{template}</Text> as any
-          })
-          }
-          {
-            isLasted && <Text mt={'12px'}>{t('delete_lasted_template_version_prompt')}</Text>
-          }
+            version: (
+              <Text display={'inline'} fontWeight={'600'}>
+                {version}
+              </Text>
+            ) as any,
+            name: (
+              <Text display={'inline'} fontWeight={'600'}>
+                {template}
+              </Text>
+            ) as any
+          })}
+          {isLasted && <Text mt={'12px'}>{t('delete_lasted_template_version_prompt')}</Text>}
         </ModalBody>
         <ModalFooter pb={'24px'}>
           <ButtonGroup variant={'outline'}>
             <Button
               onClick={() => {
-                props.onClose()
+                props.onClose();
               }}
             >
               {t('cancel')}
             </Button>
             <Button
               onClick={async () => {
-                await deleteVersion.mutateAsync(uid)
-                props.onClose()
+                await deleteVersion.mutateAsync(uid);
+                props.onClose();
               }}
               _hover={{
-                color: 'red.600',
+                color: 'red.600'
               }}
             >
               {t('delete')}
@@ -75,6 +99,6 @@ const DeleteTemplateVersionModal = ({ uid, version, template, isLasted, ...props
         </ModalFooter>
       </ModalContent>
     </Modal>
-  )
-}
-export default DeleteTemplateVersionModal
\ No newline at end of file
+  );
+};
+export default DeleteTemplateVersionModal;
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplateVersion/OverviewTemplateVersionModal.tsx b/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplateVersion/OverviewTemplateVersionModal.tsx
index 3845561ed4b0..f4718b10bff1 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplateVersion/OverviewTemplateVersionModal.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/template/updateTemplateVersion/OverviewTemplateVersionModal.tsx
@@ -1,39 +1,66 @@
-import MyIcon from "@/components/Icon"
-import { Button, ButtonGroup, Flex, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, ModalProps, Text } from "@chakra-ui/react"
-import { useTranslations } from "next-intl"
+import MyIcon from '@/components/Icon';
+import {
+  Button,
+  ButtonGroup,
+  Flex,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  ModalProps,
+  Text
+} from '@chakra-ui/react';
+import { useTranslations } from 'next-intl';
 
-const OverviewTemplateVersionModal = ({ onSubmit, version, template, ...props }: Omit<ModalProps, 'children'> & { onSubmit: () => void, version: string, template: string }) => {
-  const t = useTranslations()
+const OverviewTemplateVersionModal = ({
+  onSubmit,
+  version,
+  template,
+  ...props
+}: Omit<ModalProps, 'children'> & { onSubmit: () => void; version: string; template: string }) => {
+  const t = useTranslations();
   return (
     <Modal lockFocusAcrossFrames={false} {...props} onClose={props.onClose}>
       <ModalOverlay />
-      <ModalContent maxW={'400px'} margin={'auto'} >
+      <ModalContent maxW={'400px'} margin={'auto'}>
         <ModalHeader>
           <Flex gap={'10px'}>
-            <MyIcon name='warning' boxSize={'20px'} />
+            <MyIcon name="warning" boxSize={'20px'} />
             <Text fontSize={'16px'}>{t('prompt')}</Text>
           </Flex>
         </ModalHeader>
         <ModalBody px={'36px'} py={'24px'}>
           <ModalCloseButton />
           {t.rich('overview_template_version_prompt', {
-            version: <Text display={'inline'}  fontWeight={'600'}>{version}</Text> as any,
-            name:  <Text display={'inline'} fontWeight={'600'}>{template}</Text> as any
+            version: (
+              <Text display={'inline'} fontWeight={'600'}>
+                {version}
+              </Text>
+            ) as any,
+            name: (
+              <Text display={'inline'} fontWeight={'600'}>
+                {template}
+              </Text>
+            ) as any
           })}
         </ModalBody>
         <ModalFooter pb={'24px'}>
           <ButtonGroup variant={'solid'}>
-            <Button variant={'outline'}
+            <Button
+              variant={'outline'}
               onClick={() => {
-                props.onClose()
+                props.onClose();
               }}
             >
               {t('cancel')}
             </Button>
             <Button
               onClick={() => {
-                onSubmit()
-                props.onClose()
+                onSubmit();
+                props.onClose();
               }}
             >
               {t('confirm')}
@@ -42,6 +69,6 @@ const OverviewTemplateVersionModal = ({ onSubmit, version, template, ...props }:
         </ModalFooter>
       </ModalContent>
     </Modal>
-  )
-}
-export default OverviewTemplateVersionModal
\ No newline at end of file
+  );
+};
+export default OverviewTemplateVersionModal;
diff --git a/frontend/providers/devbox/app/[lang]/default.tsx b/frontend/providers/devbox/app/[lang]/default.tsx
index b722986794d5..6ddf1b76fa5c 100644
--- a/frontend/providers/devbox/app/[lang]/default.tsx
+++ b/frontend/providers/devbox/app/[lang]/default.tsx
@@ -1,3 +1,3 @@
 export default function Default() {
   return null;
-}
\ No newline at end of file
+}
diff --git a/frontend/providers/devbox/app/[lang]/globals.css b/frontend/providers/devbox/app/[lang]/globals.css
index 2e0812804a1f..697e79e4a256 100644
--- a/frontend/providers/devbox/app/[lang]/globals.css
+++ b/frontend/providers/devbox/app/[lang]/globals.css
@@ -147,3 +147,9 @@ div {
 .hover-container:hover .hover-button {
   display: block;
 }
+
+#driver-popover-content {
+  padding: 14px;
+  max-width: 600px;
+  border: 1px solid #94b5ff;
+}
diff --git a/frontend/providers/devbox/app/[lang]/layout.tsx b/frontend/providers/devbox/app/[lang]/layout.tsx
index 9f64c7228dee..5af5cc4f10a2 100644
--- a/frontend/providers/devbox/app/[lang]/layout.tsx
+++ b/frontend/providers/devbox/app/[lang]/layout.tsx
@@ -1,12 +1,13 @@
-import type { Metadata, Viewport } from 'next'
-import { Inter } from 'next/font/google'
+import type { Metadata, Viewport } from 'next';
+import { Inter } from 'next/font/google';
 
-import IntlProvider from '@/components/providers/MyIntlProvider'
-import QueryProvider from '@/components/providers/MyQueryProvider'
-import { enableMapSet } from 'immer'
-import './globals.css'
+import IntlProvider from '@/components/providers/MyIntlProvider';
+import QueryProvider from '@/components/providers/MyQueryProvider';
+import { enableMapSet } from 'immer';
+import './globals.css';
+import '@sealos/driver/src/driver.css';
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
   title: 'Sealos Devbox',
@@ -17,32 +18,29 @@ export const metadata: Metadata = {
       href: '/logo.svg'
     }
   ]
-}
+};
 
 export const viewport: Viewport = {
   width: 'device-width',
   initialScale: 1
-}
-enableMapSet()
+};
+enableMapSet();
 export default function RootLayout({
   children,
 
   params: { lang },
   ...props
 }: Readonly<{
-  children: React.ReactNode,
-  params: { lang: string }
+  children: React.ReactNode;
+  params: { lang: string };
 }>) {
-
   return (
     <html lang={lang}>
       <body className={inter.className}>
-          <IntlProvider>
-            <QueryProvider>
-              {children}
-            </QueryProvider>
-          </IntlProvider>
+        <IntlProvider>
+          <QueryProvider>{children}</QueryProvider>
+        </IntlProvider>
       </body>
     </html>
-  )
+  );
 }
diff --git a/frontend/providers/devbox/app/api/auth/init/route.ts b/frontend/providers/devbox/app/api/auth/init/route.ts
index 5eac0ea5e069..b78c2d91c362 100644
--- a/frontend/providers/devbox/app/api/auth/init/route.ts
+++ b/frontend/providers/devbox/app/api/auth/init/route.ts
@@ -1,9 +1,10 @@
-import { authSessionWithDesktopJWT, generateDevboxToken } from "@/services/backend/auth"
-import { jsonRes } from "@/services/backend/response"
-import { devboxDB } from "@/services/db/init"
-import { makeOrganizationName } from "@/utils/user"
+import { authSessionWithDesktopJWT, generateDevboxToken } from '@/services/backend/auth';
+import { jsonRes } from '@/services/backend/response';
+import { devboxDB } from '@/services/db/init';
+import { getRegionUid } from '@/utils/env';
+import { makeOrganizationName } from '@/utils/user';
 
-import { NextRequest } from "next/server"
+import { NextRequest } from 'next/server';
 
 const findOrCreateUser = async (regionUid: string, namespaceId: string) => {
   return await devboxDB.$transaction(async (tx) => {
@@ -28,11 +29,11 @@ const findOrCreateUser = async (regionUid: string, namespaceId: string) => {
             }
           }
         }
-      })
+      });
       if (user && user.userOrganizations.length > 0) {
-        return user
+        return user;
       }
-      const organizationName = makeOrganizationName()
+      const organizationName = makeOrganizationName();
 
       if (!user) {
         const user = await tx.user.create({
@@ -44,7 +45,7 @@ const findOrCreateUser = async (regionUid: string, namespaceId: string) => {
                 organization: {
                   create: {
                     name: organizationName,
-                    id: organizationName,
+                    id: organizationName
                   }
                 }
               }
@@ -62,8 +63,8 @@ const findOrCreateUser = async (regionUid: string, namespaceId: string) => {
               }
             }
           }
-        })
-        return user
+        });
+        return user;
       }
       if (!user.userOrganizations.length) {
         const user = await tx.user.update({
@@ -80,7 +81,7 @@ const findOrCreateUser = async (regionUid: string, namespaceId: string) => {
                 organization: {
                   create: {
                     name: organizationName,
-                    id: organizationName,
+                    id: organizationName
                   }
                 }
               }
@@ -98,46 +99,46 @@ const findOrCreateUser = async (regionUid: string, namespaceId: string) => {
               }
             }
           }
-        })
-        return user
+        });
+        return user;
       }
-      throw new Error('Failed to find or create user')
+      throw new Error('Failed to find or create user');
     } catch (error) {
-      console.error('Error in findOrCreateUser transaction:', error)
-      throw new Error('Failed to find or create user')
+      console.error('Error in findOrCreateUser transaction:', error);
+      throw new Error('Failed to find or create user');
     }
-  })
-}
+  });
+};
 export async function POST(req: NextRequest) {
-  const regionUid = process.env.REGION_UID
+  const regionUid = getRegionUid();
   if (!regionUid) {
-    console.log("REGIONUID is not set")
+    console.log('REGION_UID is not set');
     return jsonRes({
-      code: 500,
-    })
+      code: 500
+    });
   }
   try {
-    const headerList = req.headers
-    const { payload } = await authSessionWithDesktopJWT(headerList)
-    const user = await findOrCreateUser(regionUid, payload.workspaceId)
+    const headerList = req.headers;
+    const { payload } = await authSessionWithDesktopJWT(headerList);
+    const user = await findOrCreateUser(regionUid, payload.workspaceId);
     if (!user) {
       return jsonRes({
         code: 500,
         error: 'Failed to find or create user'
-      })
+      });
     }
     return jsonRes({
       data: generateDevboxToken({
-        userUid:user.uid,
+        userUid: user.uid,
         organizationUid: user.userOrganizations[0].organization.uid,
         regionUid,
-        workspaceId: payload.workspaceId,
-      }),
-    })
+        workspaceId: payload.workspaceId
+      })
+    });
   } catch (err: any) {
     return jsonRes({
       code: 500,
       error: err
-    })
+    });
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/providers/devbox/app/api/createDevbox/route.ts b/frontend/providers/devbox/app/api/createDevbox/route.ts
index a28e5c95d536..1c1c3b3b092b 100644
--- a/frontend/providers/devbox/app/api/createDevbox/route.ts
+++ b/frontend/providers/devbox/app/api/createDevbox/route.ts
@@ -1,71 +1,73 @@
-import { NextRequest } from 'next/server'
+import { NextRequest } from 'next/server';
 
-import { authSession } from '@/services/backend/auth'
-import { getK8s } from '@/services/backend/kubernetes'
-import { jsonRes } from '@/services/backend/response'
-import { devboxDB } from '@/services/db/init'
-import { DevboxEditTypeV2 } from '@/types/devbox'
-import { KBDevboxTypeV2 } from '@/types/k8s'
-import { json2DevboxV2, json2Ingress, json2Service } from '@/utils/json2Yaml'
+import { authSession } from '@/services/backend/auth';
+import { getK8s } from '@/services/backend/kubernetes';
+import { jsonRes } from '@/services/backend/response';
+import { devboxDB } from '@/services/db/init';
+import { DevboxEditTypeV2 } from '@/types/devbox';
+import { KBDevboxTypeV2 } from '@/types/k8s';
+import { json2DevboxV2, json2Ingress, json2Service } from '@/utils/json2Yaml';
 
-export const dynamic = 'force-dynamic'
+export const dynamic = 'force-dynamic';
 
 export async function POST(req: NextRequest) {
   try {
     // NOTE： runtimeNamespaceMap will be too big？
     const { devboxForm } = (await req.json()) as {
-      devboxForm: DevboxEditTypeV2
+      devboxForm: DevboxEditTypeV2;
       // runtimeNamespaceMap: runtimeNamespaceMapType
-    }
+    };
 
-    const headerList = req.headers
+    const headerList = req.headers;
 
     const { applyYamlList, k8sCustomObjects, namespace } = await getK8s({
       kubeconfig: await authSession(headerList)
-    })
+    });
     const { body: devboxListBody } = (await k8sCustomObjects.listNamespacedCustomObject(
       'devbox.sealos.io',
       'v1alpha1',
       namespace,
-      'devboxes',
-    )) as { body: {
-      items: KBDevboxTypeV2[]
-    } }
-    if(!!devboxListBody && devboxListBody.items.length > 0 && devboxListBody.items.find((item) => item.metadata.name === devboxForm.name)) {
+      'devboxes'
+    )) as {
+      body: {
+        items: KBDevboxTypeV2[];
+      };
+    };
+    if (
+      !!devboxListBody &&
+      devboxListBody.items.length > 0 &&
+      devboxListBody.items.find((item) => item.metadata.name === devboxForm.name)
+    ) {
       return jsonRes({
         code: 409,
         error: 'Devbox already exists'
-      })
+      });
     }
     const template = await devboxDB.template.findUnique({
       where: {
         uid: devboxForm.templateUid,
-        isDeleted: false,
-      },
-    })
+        isDeleted: false
+      }
+    });
     if (!template) {
       return jsonRes({
         code: 404,
         error: 'Template not found'
-      })
+      });
     }
-    const { INGRESS_SECRET, DEVBOX_AFFINITY_ENABLE, SQUASH_ENABLE } = process.env
-    const devbox = json2DevboxV2(
-      devboxForm,
-      DEVBOX_AFFINITY_ENABLE,
-      SQUASH_ENABLE
-    )
-    const service = json2Service(devboxForm)
-    const ingress = json2Ingress(devboxForm, INGRESS_SECRET as string)
-    await applyYamlList([devbox, service, ingress], 'create')
+    const { INGRESS_SECRET, DEVBOX_AFFINITY_ENABLE, SQUASH_ENABLE } = process.env;
+    const devbox = json2DevboxV2(devboxForm, DEVBOX_AFFINITY_ENABLE, SQUASH_ENABLE);
+    const service = json2Service(devboxForm);
+    const ingress = json2Ingress(devboxForm, INGRESS_SECRET as string);
+    await applyYamlList([devbox, service, ingress], 'create');
 
     return jsonRes({
       data: 'success create devbox'
-    })
+    });
   } catch (err: any) {
     return jsonRes({
       code: 500,
       error: err
-    })
+    });
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/providers/devbox/app/api/delDevbox/route.ts b/frontend/providers/devbox/app/api/delDevbox/route.ts
index 4045ba672e5b..5158f9623cb3 100644
--- a/frontend/providers/devbox/app/api/delDevbox/route.ts
+++ b/frontend/providers/devbox/app/api/delDevbox/route.ts
@@ -1,21 +1,21 @@
-import { NextRequest } from 'next/server'
+import { NextRequest } from 'next/server';
 
-import { devboxKey } from '@/constants/devbox'
-import { jsonRes } from '@/services/backend/response'
-import { authSession } from '@/services/backend/auth'
-import { getK8s } from '@/services/backend/kubernetes'
+import { devboxKey } from '@/constants/devbox';
+import { jsonRes } from '@/services/backend/response';
+import { authSession } from '@/services/backend/auth';
+import { getK8s } from '@/services/backend/kubernetes';
 
-export const dynamic = 'force-dynamic'
+export const dynamic = 'force-dynamic';
 
 export async function DELETE(req: NextRequest) {
   try {
-    const { searchParams } = req.nextUrl
-    const devboxName = searchParams.get('devboxName') as string
-    const headerList = req.headers
+    const { searchParams } = req.nextUrl;
+    const devboxName = searchParams.get('devboxName') as string;
+    const headerList = req.headers;
 
     const { k8sCustomObjects, k8sCore, namespace } = await getK8s({
       kubeconfig: await authSession(headerList)
-    })
+    });
 
     await k8sCustomObjects.deleteNamespacedCustomObject(
       'devbox.sealos.io',
@@ -23,7 +23,7 @@ export async function DELETE(req: NextRequest) {
       namespace,
       'devboxes',
       devboxName
-    )
+    );
 
     const ingressResponse = (await k8sCustomObjects.listNamespacedCustomObject(
       'networking.k8s.io',
@@ -37,18 +37,18 @@ export async function DELETE(req: NextRequest) {
       `${devboxKey}=${devboxName}`
     )) as {
       body: {
-        items: any[]
-      }
-    }
+        items: any[];
+      };
+    };
 
-    const ingressList = ingressResponse.body.items
+    const ingressList = ingressResponse.body.items;
 
     // delete service and ingress at the same time
     if (ingressList.length > 0) {
-      const deleteServicePromise = k8sCore.deleteNamespacedService(devboxName, namespace)
+      const deleteServicePromise = k8sCore.deleteNamespacedService(devboxName, namespace);
 
       const deletePromises = ingressList.map(async (ingress: any) => {
-        const networkName = ingress.metadata.name
+        const networkName = ingress.metadata.name;
 
         const safeDelete = async (group: string, version: string, plural: string, name: string) => {
           try {
@@ -58,30 +58,30 @@ export async function DELETE(req: NextRequest) {
               namespace,
               plural,
               name
-            )
+            );
           } catch (err) {
-            console.warn('Failed to delete an item, ignoring:', plural, name, err)
+            console.warn('Failed to delete an item, ignoring:', plural, name, err);
           }
-        }
+        };
 
         return Promise.all([
           safeDelete('networking.k8s.io', 'v1', 'ingresses', networkName),
           // this two muse have customDomain
           safeDelete('cert-manager.io', 'v1', 'issuers', networkName),
           safeDelete('cert-manager.io', 'v1', 'certificates', networkName)
-        ])
-      })
+        ]);
+      });
 
-      await Promise.all([deleteServicePromise, ...deletePromises])
+      await Promise.all([deleteServicePromise, ...deletePromises]);
     }
 
     return jsonRes({
       data: 'success delete devbox'
-    })
+    });
   } catch (err: any) {
     return jsonRes({
       code: 500,
       error: err
-    })
+    });
   }
 }
diff --git a/frontend/providers/devbox/app/api/delDevboxVersionByName/route.ts b/frontend/providers/devbox/app/api/delDevboxVersionByName/route.ts
index 836d5a12af8e..44d159e71046 100644
--- a/frontend/providers/devbox/app/api/delDevboxVersionByName/route.ts
+++ b/frontend/providers/devbox/app/api/delDevboxVersionByName/route.ts
@@ -1,21 +1,21 @@
-import { NextRequest } from 'next/server'
+import { NextRequest } from 'next/server';
 
-import { ApiResp } from '@/services/kubernet'
-import { jsonRes } from '@/services/backend/response'
-import { authSession } from '@/services/backend/auth'
-import { getK8s } from '@/services/backend/kubernetes'
+import { ApiResp } from '@/services/kubernet';
+import { jsonRes } from '@/services/backend/response';
+import { authSession } from '@/services/backend/auth';
+import { getK8s } from '@/services/backend/kubernetes';
 
-export const dynamic = 'force-dynamic'
+export const dynamic = 'force-dynamic';
 
 export async function DELETE(req: NextRequest) {
   try {
-    const { searchParams } = req.nextUrl
-    const versionName = searchParams.get('versionName') as string
-    const headerList = req.headers
+    const { searchParams } = req.nextUrl;
+    const versionName = searchParams.get('versionName') as string;
+    const headerList = req.headers;
 
     const { k8sCustomObjects, namespace } = await getK8s({
       kubeconfig: await authSession(headerList)
-    })
+    });
 
     await k8sCustomObjects.deleteNamespacedCustomObject(
       'devbox.sealos.io',
@@ -23,15 +23,15 @@ export async function DELETE(req: NextRequest) {
       namespace,
       'devboxreleases',
       versionName
-    )
+    );
 
     return jsonRes({
       data: 'success delete devbox version'
-    })
+    });
   } catch (err: any) {
     return jsonRes<ApiResp>({
       code: 500,
       error: err
-    })
+    });
   }
 }
diff --git a/frontend/providers/devbox/app/api/editDevboxVersion/route.ts b/frontend/providers/devbox/app/api/editDevboxVersion/route.ts
index f591fe566334..d6389adc2af9 100644
--- a/frontend/providers/devbox/app/api/editDevboxVersion/route.ts
+++ b/frontend/providers/devbox/app/api/editDevboxVersion/route.ts
@@ -1,19 +1,19 @@
-import { NextRequest } from 'next/server'
+import { NextRequest } from 'next/server';
 
-import { jsonRes } from '@/services/backend/response'
-import { authSession } from '@/services/backend/auth'
-import { getK8s } from '@/services/backend/kubernetes'
+import { jsonRes } from '@/services/backend/response';
+import { authSession } from '@/services/backend/auth';
+import { getK8s } from '@/services/backend/kubernetes';
 
-export const dynamic = 'force-dynamic'
+export const dynamic = 'force-dynamic';
 
 export async function POST(req: NextRequest) {
   try {
-    const { name, releaseDes } = (await req.json()) as { name: string; releaseDes: string }
-    const headerList = req.headers
+    const { name, releaseDes } = (await req.json()) as { name: string; releaseDes: string };
+    const headerList = req.headers;
 
     const { k8sCustomObjects, namespace } = await getK8s({
       kubeconfig: await authSession(headerList)
-    })
+    });
 
     await k8sCustomObjects.patchNamespacedCustomObject(
       'devbox.sealos.io',
@@ -30,15 +30,15 @@ export async function POST(req: NextRequest) {
           'Content-Type': 'application/merge-patch+json'
         }
       }
-    )
+    );
 
     return jsonRes({
       data: 'success edit devbox version description'
-    })
+    });
   } catch (err: any) {
     return jsonRes({
       code: 500,
       error: err
-    })
+    });
   }
 }
diff --git a/frontend/providers/devbox/app/api/execCommandInDevboxPod/route.ts b/frontend/providers/devbox/app/api/execCommandInDevboxPod/route.ts
new file mode 100644
index 000000000000..8e9756e9d11d
--- /dev/null
+++ b/frontend/providers/devbox/app/api/execCommandInDevboxPod/route.ts
@@ -0,0 +1,195 @@
+import { NextRequest } from 'next/server';
+import { PassThrough, Readable, Writable } from 'stream';
+
+import { authSession } from '@/services/backend/auth';
+import { getK8s } from '@/services/backend/kubernetes';
+import { jsonRes } from '@/services/backend/response';
+import { NextApiResponse } from 'next';
+
+export const dynamic = 'force-dynamic';
+
+async function execCommand(
+  k8sExec: any,
+  namespace: string,
+  podName: string,
+  containerName: string,
+  command: string[],
+  stdin: Readable | null = null,
+  stdout: Writable | null = null,
+  stderr: Writable | null = null
+) {
+  return new Promise<string>(async (resolve, reject) => {
+    let chunks = Buffer.alloc(0);
+
+    if (!stdout) {
+      stdout = new PassThrough();
+    }
+
+    const free = () => {
+      stderr?.removeAllListeners();
+      stdout?.removeAllListeners();
+      stdin?.removeAllListeners();
+    };
+
+    stdout.on('end', () => {
+      free();
+      console.log('stdout end');
+      resolve('success');
+    });
+
+    stdout.on('error', (error) => {
+      free();
+      reject(error);
+    });
+
+    if (!stderr) {
+      stderr = new PassThrough();
+    }
+
+    stderr.on('data', (chunk) => {
+      stdout?.write(chunk);
+    });
+    stderr.on('end', () => {
+      console.log('stderr end');
+      resolve('success');
+    });
+
+    const WebSocket = await k8sExec.exec(
+      namespace,
+      podName,
+      containerName,
+      command,
+      stdout,
+      stderr,
+      stdin,
+      false
+    );
+
+    WebSocket.on('close', () => {
+      resolve('success upload, close web socket');
+    });
+    WebSocket.on('error', (error: any) => {
+      console.error('WebSocket error:', error);
+      reject(error);
+    });
+
+    if (stdin) {
+      stdin.on('end', () => {
+        free();
+      });
+    }
+  });
+}
+
+export async function POST(req: NextRequest) {
+  try {
+    const { devboxName, command, idePath } = (await req.json()) as {
+      devboxName: string;
+      command: string;
+      idePath: string;
+    };
+
+    const headerList = req.headers;
+
+    const { namespace, k8sCore, k8sExec } = await getK8s({
+      kubeconfig: await authSession(headerList)
+    });
+
+    // get pods
+    const {
+      body: { items: pods }
+    } = await k8sCore.listNamespacedPod(
+      namespace,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      `app.kubernetes.io/name=${devboxName}`
+    );
+
+    const podName = pods[0].metadata?.name;
+    const containerName = pods[0].spec?.containers[0].name;
+
+    if (!podName || !containerName) {
+      return jsonRes({
+        code: 500,
+        error: 'Pod or container not found'
+      });
+    }
+
+    const processStream = new PassThrough();
+    const { readable, writable } = new TransformStream();
+    const writer = writable.getWriter();
+    let isStreamClosed = false;
+
+    const execPromise = execCommand(
+      k8sExec,
+      namespace,
+      podName,
+      containerName,
+      ['/bin/sh', '-c', command],
+      null,
+      processStream,
+      null
+    );
+
+    processStream.on('data', (chunk) => writer.write(chunk));
+    processStream.on('end', async () => {
+      console.log('processStream end');
+      if (!isStreamClosed) {
+        isStreamClosed = true;
+        await writer.close();
+      }
+      return jsonRes({
+        code: 200,
+        data: 'success'
+      });
+    });
+
+    processStream.on('error', async (error) => {
+      console.error('Process stream error:', error);
+      if (!isStreamClosed) {
+        isStreamClosed = true;
+        await writer.close();
+      }
+    });
+
+    execPromise.finally(async () => {
+      processStream.end();
+      processStream.destroy();
+      if (!isStreamClosed) {
+        isStreamClosed = true;
+        await writer.close();
+      }
+      console.log('execPromise end');
+    });
+
+    req.signal.addEventListener('abort', async () => {
+      console.log('Connection aborted by client');
+      processStream.destroy();
+      if (!isStreamClosed) {
+        isStreamClosed = true;
+        await writer.close();
+      }
+      execCommand(k8sExec, namespace, podName, containerName, [
+        '/bin/sh',
+        '-c',
+        `rm -rf ${idePath}`
+      ]);
+    });
+
+    return new Response(readable, {
+      headers: {
+        'Content-Type': 'text/event-stream;charset=utf-8',
+        'Access-Control-Allow-Origin': '*',
+        'X-Accel-Buffering': 'no',
+        'Cache-Control': 'no-cache, no-transform'
+      }
+    });
+  } catch (err: any) {
+    return jsonRes({
+      code: 500,
+      error: err
+    });
+  }
+}
diff --git a/frontend/providers/devbox/app/api/getAppsByDevboxId/route.ts b/frontend/providers/devbox/app/api/getAppsByDevboxId/route.ts
index de3650a24bac..91f2013c2c05 100644
--- a/frontend/providers/devbox/app/api/getAppsByDevboxId/route.ts
+++ b/frontend/providers/devbox/app/api/getAppsByDevboxId/route.ts
@@ -1,31 +1,31 @@
-import type { NextRequest } from 'next/server'
+import type { NextRequest } from 'next/server';
 
-import { devboxIdKey } from '@/constants/devbox'
-import { authSession } from '@/services/backend/auth'
-import { getK8s } from '@/services/backend/kubernetes'
-import { jsonRes } from '@/services/backend/response'
+import { devboxIdKey } from '@/constants/devbox';
+import { authSession } from '@/services/backend/auth';
+import { getK8s } from '@/services/backend/kubernetes';
+import { jsonRes } from '@/services/backend/response';
 
-export const dynamic = 'force-dynamic'
+export const dynamic = 'force-dynamic';
 
 export async function GET(req: NextRequest) {
   try {
-    const apps = await getApps(req)
-    return jsonRes({ data: apps })
+    const apps = await getApps(req);
+    return jsonRes({ data: apps });
   } catch (err: any) {
     return jsonRes({
       code: 500,
       error: err
-    })
+    });
   }
 }
 
 async function getApps(req: NextRequest) {
-  const { searchParams } = req.nextUrl
-  const devboxId = searchParams.get('devboxId') as string
+  const { searchParams } = req.nextUrl;
+  const devboxId = searchParams.get('devboxId') as string;
 
   const { k8sApp, namespace } = await getK8s({
     kubeconfig: await authSession(req.headers)
-  })
+  });
 
   const response = await Promise.allSettled([
     k8sApp.listNamespacedDeployment(
@@ -44,11 +44,11 @@ async function getApps(req: NextRequest) {
       undefined,
       `${devboxIdKey}=${devboxId}`
     )
-  ])
+  ]);
   const apps = response
     .filter((item) => item.status === 'fulfilled')
     .map((item: any) => item?.value?.body?.items)
     .filter((item) => item)
-    .flat()
-  return apps
+    .flat();
+  return apps;
 }
diff --git a/frontend/providers/devbox/app/api/getDevboxByName/route.ts b/frontend/providers/devbox/app/api/getDevboxByName/route.ts
index dc5fc7f7855d..f3aa20c34123 100644
--- a/frontend/providers/devbox/app/api/getDevboxByName/route.ts
+++ b/frontend/providers/devbox/app/api/getDevboxByName/route.ts
@@ -1,33 +1,33 @@
-import { devboxKey, ingressProtocolKey, publicDomainKey } from '@/constants/devbox'
-import { authSession } from '@/services/backend/auth'
-import { getK8s } from '@/services/backend/kubernetes'
-import { jsonRes } from '@/services/backend/response'
-import { devboxDB } from '@/services/db/init'
-import { ProtocolType } from '@/types/devbox'
-import { PortInfos } from '@/types/ingress'
-import { KBDevboxTypeV2 } from '@/types/k8s'
-import { NextRequest } from 'next/server'
+import { devboxKey, ingressProtocolKey, publicDomainKey } from '@/constants/devbox';
+import { authSession } from '@/services/backend/auth';
+import { getK8s } from '@/services/backend/kubernetes';
+import { jsonRes } from '@/services/backend/response';
+import { devboxDB } from '@/services/db/init';
+import { ProtocolType } from '@/types/devbox';
+import { PortInfos } from '@/types/ingress';
+import { KBDevboxTypeV2 } from '@/types/k8s';
+import { NextRequest } from 'next/server';
 
-export const dynamic = 'force-dynamic'
+export const dynamic = 'force-dynamic';
 
 export async function GET(req: NextRequest) {
   try {
-    const headerList = req.headers
-    const { ROOT_RUNTIME_NAMESPACE } = process.env
+    const headerList = req.headers;
+    const { ROOT_RUNTIME_NAMESPACE } = process.env;
 
-    const { searchParams } = req.nextUrl
-    const devboxName = searchParams.get('devboxName') as string
+    const { searchParams } = req.nextUrl;
+    const devboxName = searchParams.get('devboxName') as string;
 
     if (!devboxName) {
       return jsonRes({
         code: 400,
         error: 'devboxName is required'
-      })
+      });
     }
 
     const { k8sCustomObjects, namespace, k8sCore, k8sNetworkingApp } = await getK8s({
       kubeconfig: await authSession(headerList)
-    })
+    });
 
     const { body: devboxBody } = (await k8sCustomObjects.getNamespacedCustomObject(
       'devbox.sealos.io',
@@ -35,10 +35,10 @@ export async function GET(req: NextRequest) {
       namespace,
       'devboxes',
       devboxName
-    )) as { body: KBDevboxTypeV2 }
+    )) as { body: KBDevboxTypeV2 };
     const template = await devboxDB.template.findUnique({
       where: {
-        uid: devboxBody.spec.templateID,
+        uid: devboxBody.spec.templateID
       },
       select: {
         templateRepository: {
@@ -46,39 +46,34 @@ export async function GET(req: NextRequest) {
             uid: true,
             iconId: true,
             name: true,
-            kind: true,
+            kind: true
           }
         },
         uid: true,
         image: true,
-        name: true,
+        name: true
       }
-    })
+    });
     if (!template) {
       return jsonRes({
         code: 500,
         error: 'template not found'
-      })
+      });
     }
-    const label = `${devboxKey}=${devboxName}`
+    const label = `${devboxKey}=${devboxName}`;
     // get ingresses and service
     const [ingressesResponse, serviceResponse] = await Promise.all([
-      k8sNetworkingApp.listNamespacedIngress(
-        namespace,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        label
-      ).catch(() => null),
+      k8sNetworkingApp
+        .listNamespacedIngress(namespace, undefined, undefined, undefined, undefined, label)
+        .catch(() => null),
       k8sCore.readNamespacedService(devboxName, namespace, undefined).catch(() => null)
-    ])
-    const ingresses = ingressesResponse?.body.items || []
-    const service = serviceResponse?.body
+    ]);
+    const ingresses = ingressesResponse?.body.items || [];
+    const service = serviceResponse?.body;
 
     const ingressList = ingresses.map((item) => {
-      const defaultDomain = item.metadata?.labels?.[publicDomainKey]
-      const tlsHost = item.spec?.tls?.[0]?.hosts?.[0]
+      const defaultDomain = item.metadata?.labels?.[publicDomainKey];
+      const tlsHost = item.spec?.tls?.[0]?.hosts?.[0];
       return {
         networkName: item.metadata?.name,
         port: item.spec?.rules?.[0]?.http?.paths?.[0]?.backend?.service?.port?.number,
@@ -86,11 +81,12 @@ export async function GET(req: NextRequest) {
         openPublicDomain: !!defaultDomain,
         publicDomain: defaultDomain === tlsHost ? tlsHost : defaultDomain,
         customDomain: defaultDomain === tlsHost ? '' : tlsHost
-      }
-    })
+      };
+    });
 
-    const portInfos: PortInfos = service?.spec?.ports?.map((svcport) => {
-      const ingressInfo = ingressList.find((ingress) => ingress.port === svcport.port)
+    const portInfos: PortInfos =
+      service?.spec?.ports?.map((svcport) => {
+        const ingressInfo = ingressList.find((ingress) => ingress.port === svcport.port);
         return {
           portName: svcport.name!,
           port: svcport.port,
@@ -99,18 +95,14 @@ export async function GET(req: NextRequest) {
           openPublicDomain: !!ingressInfo?.openPublicDomain,
           publicDomain: ingressInfo?.publicDomain,
           customDomain: ingressInfo?.customDomain
-        }
-    }) || []
-    const resp = [
-      devboxBody,
-      portInfos,
-      template
-    ] as const
-    return jsonRes({ data: resp })
+        };
+      }) || [];
+    const resp = [devboxBody, portInfos, template] as const;
+    return jsonRes({ data: resp });
   } catch (err: any) {
     return jsonRes({
       code: 500,
       error: err
-    })
+    });
   }
 }
diff --git a/frontend/providers/devbox/app/api/getDevboxList/route.ts b/frontend/providers/devbox/app/api/getDevboxList/route.ts
index dbc61cb421f9..cb79a4bbd2ea 100644
--- a/frontend/providers/devbox/app/api/getDevboxList/route.ts
+++ b/frontend/providers/devbox/app/api/getDevboxList/route.ts
@@ -1,58 +1,59 @@
-import { NextRequest } from 'next/server'
+import { NextRequest } from 'next/server';
 
-import { authSession } from '@/services/backend/auth'
-import { getK8s } from '@/services/backend/kubernetes'
-import { jsonRes } from '@/services/backend/response'
-import { devboxDB } from '@/services/db/init'
-import { KBDevboxTypeV2 } from '@/types/k8s'
+import { authSession } from '@/services/backend/auth';
+import { getK8s } from '@/services/backend/kubernetes';
+import { jsonRes } from '@/services/backend/response';
+import { devboxDB } from '@/services/db/init';
+import { KBDevboxTypeV2 } from '@/types/k8s';
 
-export const dynamic = 'force-dynamic'
+export const dynamic = 'force-dynamic';
 export async function GET(req: NextRequest) {
   try {
-    const headerList = req.headers
-    const { ROOT_RUNTIME_NAMESPACE } = process.env
+    const headerList = req.headers;
+    const { ROOT_RUNTIME_NAMESPACE } = process.env;
 
     const { k8sCustomObjects, namespace } = await getK8s({
       kubeconfig: await authSession(headerList)
-    })
+    });
 
-    const devboxResponse = await 
-      k8sCustomObjects.listNamespacedCustomObject(
-        'devbox.sealos.io',
-        'v1alpha1',
-        namespace,
-        'devboxes'
-      )
+    const devboxResponse = await k8sCustomObjects.listNamespacedCustomObject(
+      'devbox.sealos.io',
+      'v1alpha1',
+      namespace,
+      'devboxes'
+    );
 
-    const devboxBody = devboxResponse.body as { items: KBDevboxTypeV2[] }
-    const uidList = devboxBody.items.map((item) => item.spec.templateID)
+    const devboxBody = devboxResponse.body as { items: KBDevboxTypeV2[] };
+    const uidList = devboxBody.items.map((item) => item.spec.templateID);
     const templateResultList = await devboxDB.template.findMany({
       where: {
         uid: {
           in: uidList
-        },
+        }
       },
       select: {
         uid: true,
         templateRepository: {
           select: {
-            iconId: true,
+            iconId: true
           }
         }
       }
-    })
+    });
     // match template with devbox
     const resp = devboxBody.items.flatMap((item) => {
-      const templateItem = templateResultList.find((templateResult) => templateResult.uid === item.spec.templateID)
-      if(!templateItem) return []
-      return [[item, templateItem] as const]
-    })
+      const templateItem = templateResultList.find(
+        (templateResult) => templateResult.uid === item.spec.templateID
+      );
+      if (!templateItem) return [];
+      return [[item, templateItem] as const];
+    });
 
-    return jsonRes({ data: resp })
+    return jsonRes({ data: resp });
   } catch (err: any) {
     return jsonRes({
       code: 500,
       error: err
-    })
+    });
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/providers/devbox/app/api/getDevboxPodsByDevboxName/route.ts b/frontend/providers/devbox/app/api/getDevboxPodsByDevboxName/route.ts
index 8ee28c0475a3..dd4d0c221903 100644
--- a/frontend/providers/devbox/app/api/getDevboxPodsByDevboxName/route.ts
+++ b/frontend/providers/devbox/app/api/getDevboxPodsByDevboxName/route.ts
@@ -1,21 +1,21 @@
-import { NextRequest } from 'next/server'
+import { NextRequest } from 'next/server';
 
-import { authSession } from '@/services/backend/auth'
-import { getK8s } from '@/services/backend/kubernetes'
-import { jsonRes } from '@/services/backend/response'
+import { authSession } from '@/services/backend/auth';
+import { getK8s } from '@/services/backend/kubernetes';
+import { jsonRes } from '@/services/backend/response';
 
-export const dynamic = 'force-dynamic'
+export const dynamic = 'force-dynamic';
 
 export async function GET(req: NextRequest) {
   try {
-    const { searchParams } = req.nextUrl
-    const devboxName = searchParams.get('name') as string
+    const { searchParams } = req.nextUrl;
+    const devboxName = searchParams.get('name') as string;
 
-    const headerList = req.headers
+    const headerList = req.headers;
 
     const { namespace, k8sCore } = await getK8s({
       kubeconfig: await authSession(headerList)
-    })
+    });
 
     // get pods
     const {
@@ -27,15 +27,15 @@ export async function GET(req: NextRequest) {
       undefined,
       undefined,
       `app.kubernetes.io/name=${devboxName}`
-    )
+    );
 
     return jsonRes({
       data: pods
-    })
+    });
   } catch (err: any) {
     return jsonRes({
       code: 500,
       error: err
-    })
+    });
   }
 }
diff --git a/frontend/providers/devbox/app/api/getDevboxVersionList/route.ts b/frontend/providers/devbox/app/api/getDevboxVersionList/route.ts
index b4bb37ce7cca..37452d8693d9 100644
--- a/frontend/providers/devbox/app/api/getDevboxVersionList/route.ts
+++ b/frontend/providers/devbox/app/api/getDevboxVersionList/route.ts
@@ -1,43 +1,43 @@
-import { NextRequest } from 'next/server'
+import { NextRequest } from 'next/server';
 
-import { KBDevboxReleaseType } from '@/types/k8s'
-import { authSession } from '@/services/backend/auth'
-import { getK8s } from '@/services/backend/kubernetes'
-import { jsonRes } from '@/services/backend/response'
+import { KBDevboxReleaseType } from '@/types/k8s';
+import { authSession } from '@/services/backend/auth';
+import { getK8s } from '@/services/backend/kubernetes';
+import { jsonRes } from '@/services/backend/response';
 
-export const dynamic = 'force-dynamic'
+export const dynamic = 'force-dynamic';
 
 export async function GET(req: NextRequest) {
   try {
-    const { searchParams } = req.nextUrl
-    const devboxName = searchParams.get('devboxName')
-    const devboxUid = searchParams.get('devboxUid')
-    const headerList = req.headers
+    const { searchParams } = req.nextUrl;
+    const devboxName = searchParams.get('devboxName');
+    const devboxUid = searchParams.get('devboxUid');
+    const headerList = req.headers;
 
     const { k8sCustomObjects, namespace } = await getK8s({
       kubeconfig: await authSession(headerList)
-    })
+    });
 
     const { body: releaseBody } = (await k8sCustomObjects.listNamespacedCustomObject(
       'devbox.sealos.io',
       'v1alpha1',
       namespace,
       'devboxreleases'
-    )) as { body: { items: KBDevboxReleaseType[] } }
+    )) as { body: { items: KBDevboxReleaseType[] } };
 
     const matchingDevboxVersions = releaseBody.items.filter((item: any) => {
       return (
         item.spec &&
         item.spec.devboxName === devboxName &&
         item.metadata.ownerReferences[0].uid === devboxUid
-      )
-    })
+      );
+    });
 
-    return jsonRes({ data: matchingDevboxVersions })
+    return jsonRes({ data: matchingDevboxVersions });
   } catch (err: any) {
     return jsonRes({
       code: 500,
       error: err
-    })
+    });
   }
 }
diff --git a/frontend/providers/devbox/app/api/getEnv/route.ts b/frontend/providers/devbox/app/api/getEnv/route.ts
index 5dbf5d7ffb9c..9bf5fa973644 100644
--- a/frontend/providers/devbox/app/api/getEnv/route.ts
+++ b/frontend/providers/devbox/app/api/getEnv/route.ts
@@ -1,20 +1,20 @@
-import { NextRequest } from 'next/server'
+import { NextRequest } from 'next/server';
 
-import { authSession } from '@/services/backend/auth'
-import { getK8s } from '@/services/backend/kubernetes'
-import { jsonRes } from '@/services/backend/response'
-import { defaultEnv } from '@/stores/env'
-import type { Env } from '@/types/static'
+import { authSession } from '@/services/backend/auth';
+import { getK8s } from '@/services/backend/kubernetes';
+import { jsonRes } from '@/services/backend/response';
+import { defaultEnv } from '@/stores/env';
+import type { Env } from '@/types/static';
 
-export const dynamic = 'force-dynamic'
+export const dynamic = 'force-dynamic';
 
 export async function GET(req: NextRequest) {
   try {
-    const headerList = req.headers
+    const headerList = req.headers;
 
     const { namespace } = await getK8s({
       kubeconfig: await authSession(headerList)
-    })
+    });
 
     return jsonRes<Env>({
       data: {
@@ -32,11 +32,11 @@ export async function GET(req: NextRequest) {
           | 'cny'
           | 'usd'
       }
-    })
+    });
   } catch (err: any) {
     return jsonRes({
       code: 500,
       error: err
-    })
+    });
   }
 }
diff --git a/frontend/providers/devbox/app/api/getSSHConnectionInfo/route.ts b/frontend/providers/devbox/app/api/getSSHConnectionInfo/route.ts
index c672fd5004c5..04005c2f80d8 100644
--- a/frontend/providers/devbox/app/api/getSSHConnectionInfo/route.ts
+++ b/frontend/providers/devbox/app/api/getSSHConnectionInfo/route.ts
@@ -1,61 +1,64 @@
-import { NextRequest } from 'next/server'
+import { NextRequest } from 'next/server';
 
-import { authSession, generateAccessToken } from '@/services/backend/auth'
-import { getK8s } from '@/services/backend/kubernetes'
-import { jsonRes } from '@/services/backend/response'
-import { devboxDB } from '@/services/db/init'
-import { KBDevboxTypeV2 } from '@/types/k8s'
-import { parseTemplateConfig } from '@/utils/tools'
+import { authSession, generateAccessToken } from '@/services/backend/auth';
+import { getK8s } from '@/services/backend/kubernetes';
+import { jsonRes } from '@/services/backend/response';
+import { devboxDB } from '@/services/db/init';
+import { KBDevboxTypeV2 } from '@/types/k8s';
+import { parseTemplateConfig } from '@/utils/tools';
 
-export const dynamic = 'force-dynamic'
+export const dynamic = 'force-dynamic';
 
 export async function GET(req: NextRequest) {
   try {
-    const { searchParams } = req.nextUrl
-    const devboxName = searchParams.get('devboxName') as string
-    // const runtimeName = searchParams.get('runtimeName') as string
+    const { searchParams } = req.nextUrl;
+    const devboxName = searchParams.get('devboxName') as string;
 
-    const headerList = req.headers
-
-    const { ROOT_RUNTIME_NAMESPACE } = process.env
+    const headerList = req.headers;
 
     const { k8sCore, namespace, k8sCustomObjects } = await getK8s({
       kubeconfig: await authSession(headerList)
-    })
+    });
 
-    const response = await k8sCore.readNamespacedSecret(devboxName, namespace)
+    const response = await k8sCore.readNamespacedSecret(devboxName, namespace);
 
-    const base64PublicKey = response.body.data?.['SEALOS_DEVBOX_PUBLIC_KEY'] as string
-    const base64PrivateKey = response.body.data?.['SEALOS_DEVBOX_PRIVATE_KEY'] as string
+    const base64PublicKey = response.body.data?.['SEALOS_DEVBOX_PUBLIC_KEY'] as string;
+    const base64PrivateKey = response.body.data?.['SEALOS_DEVBOX_PRIVATE_KEY'] as string;
 
     const jwtSecret = Buffer.from(
       response.body.data?.['SEALOS_DEVBOX_JWT_SECRET'] as string,
       'base64'
-    ).toString('utf-8')
-    const token = generateAccessToken({ namespace, devboxName }, jwtSecret)
+    ).toString('utf-8');
+    const token = generateAccessToken({ namespace, devboxName }, jwtSecret);
     const { body: devboxBody } = (await k8sCustomObjects.getNamespacedCustomObject(
       'devbox.sealos.io',
       'v1alpha1',
       namespace,
       'devboxes',
       devboxName
-    )) as { body: KBDevboxTypeV2 }
+    )) as { body: KBDevboxTypeV2 };
     const template = await devboxDB.template.findUnique({
       where: {
         uid: devboxBody.spec.templateID
       }
-    })
-    if (!template) throw new Error(`Template ${devboxBody.spec.templateID} is not found`)
-      const config = parseTemplateConfig(template.config)
-    return jsonRes({ data: { base64PublicKey, base64PrivateKey, token, 
-      userName: config.user,
-      workingDir: config.workingDir,
-      releaseCommand: config.releaseCommand.join(' '),
-      releaseArgs: config.releaseArgs.join(' ') } })
+    });
+    if (!template) throw new Error(`Template ${devboxBody.spec.templateID} is not found`);
+    const config = parseTemplateConfig(template.config);
+    return jsonRes({
+      data: {
+        base64PublicKey,
+        base64PrivateKey,
+        token,
+        userName: config.user,
+        workingDir: config.workingDir,
+        releaseCommand: config.releaseCommand.join(' '),
+        releaseArgs: config.releaseArgs.join(' ')
+      }
+    });
   } catch (err: any) {
     return jsonRes({
       code: 500,
       error: err
-    })
+    });
   }
 }
diff --git a/frontend/providers/devbox/app/api/getSSHRuntimeInfo/route.ts b/frontend/providers/devbox/app/api/getSSHRuntimeInfo/route.ts
deleted file mode 100644
index 02ff17760f03..000000000000
--- a/frontend/providers/devbox/app/api/getSSHRuntimeInfo/route.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { NextRequest } from 'next/server'
-
-import { authSession } from '@/services/backend/auth'
-import { getK8s } from '@/services/backend/kubernetes'
-import { jsonRes } from '@/services/backend/response'
-import { defaultEnv } from '@/stores/env'
-import { KBRuntimeType } from '@/types/k8s'
-
-export const dynamic = 'force-dynamic'
-
-export async function GET(req: NextRequest) {
-  try {
-    const { searchParams } = req.nextUrl
-    const runtimeName = searchParams.get('runtimeName') as string
-    const headerList = req.headers
-    const { ROOT_RUNTIME_NAMESPACE } = process.env
-
-    const { k8sCustomObjects } = await getK8s({
-      kubeconfig: await authSession(headerList)
-    })
-
-    const { body: runtime } = (await k8sCustomObjects.getNamespacedCustomObject(
-      'devbox.sealos.io',
-      'v1alpha1',
-      ROOT_RUNTIME_NAMESPACE || defaultEnv.rootRuntimeNamespace,
-      'runtimes',
-      runtimeName
-    )) as { body: KBRuntimeType }
-
-    const data = {
-      workingDir: runtime.spec.config.workingDir,
-      releaseCommand: runtime.spec.config.releaseCommand.join(' '),
-      releaseArgs: runtime.spec.config.releaseArgs.join(' ')
-    }
-
-    return jsonRes({ data })
-  } catch (err: any) {
-    return jsonRes({
-      code: 500,
-      error: err
-    })
-  }
-}
diff --git a/frontend/providers/devbox/app/api/guide/checkTask/route.ts b/frontend/providers/devbox/app/api/guide/checkTask/route.ts
new file mode 100644
index 000000000000..f0e3530a5255
--- /dev/null
+++ b/frontend/providers/devbox/app/api/guide/checkTask/route.ts
@@ -0,0 +1,44 @@
+import { jsonRes } from '@/services/backend/response';
+import { NextRequest } from 'next/server';
+
+export const dynamic = 'force-dynamic';
+
+export async function POST(req: NextRequest) {
+  try {
+    if (process.env.GUIDE_ENABLED !== 'true') return jsonRes({ data: null });
+
+    const data = (await req.json()) as {
+      desktopToAppToken: string;
+    };
+    if (!data.desktopToAppToken) {
+      return jsonRes({ code: 401, message: 'token is valid' });
+    }
+
+    const domain = process.env.SEALOS_DOMAIN;
+
+    const response = await fetch(`https://${domain}/api/account/checkTask`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: data.desktopToAppToken
+      }
+    });
+
+    const result: {
+      code: number;
+      data: any;
+      message: string;
+    } = await response.json();
+
+    if (result.code !== 200) {
+      return jsonRes({ code: result.code, message: 'desktop api is err' });
+    } else {
+      return jsonRes({ data: result.data });
+    }
+  } catch (err: any) {
+    return jsonRes({
+      code: 500,
+      error: err
+    });
+  }
+}
diff --git a/frontend/providers/devbox/app/api/guide/getBonus/route.ts b/frontend/providers/devbox/app/api/guide/getBonus/route.ts
new file mode 100644
index 000000000000..837673afc185
--- /dev/null
+++ b/frontend/providers/devbox/app/api/guide/getBonus/route.ts
@@ -0,0 +1,48 @@
+import { jsonRes } from '@/services/backend/response';
+import { NextRequest } from 'next/server';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET(req: NextRequest) {
+  try {
+    const data = (await req.json()) as {
+      desktopToAppToken: string;
+    };
+    if (!data.desktopToAppToken) {
+      return jsonRes({ code: 401, message: '令牌无效' });
+    }
+
+    const url = '';
+
+    const response = await fetch(`${url}/account/v1alpha1/recharge-discount`, {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${data.desktopToAppToken}`
+      }
+    });
+
+    const result: {
+      discount: {
+        firstRechargeDiscount: Record<string, string>;
+      };
+    } = await response.json();
+
+    const rechargeOptions = Object.entries(result.discount.firstRechargeDiscount).map(
+      ([amount, rate]) => ({
+        amount: Number(amount),
+        gift: Math.floor((Number(amount) * Number(rate)) / 100)
+      })
+    );
+
+    return jsonRes({
+      code: 200,
+      data: rechargeOptions
+    });
+  } catch (err: any) {
+    console.log(err);
+    return jsonRes({
+      code: 500,
+      error: err
+    });
+  }
+}
diff --git a/frontend/providers/devbox/app/api/guide/getTasks/route.ts b/frontend/providers/devbox/app/api/guide/getTasks/route.ts
new file mode 100644
index 000000000000..e1d51060961a
--- /dev/null
+++ b/frontend/providers/devbox/app/api/guide/getTasks/route.ts
@@ -0,0 +1,61 @@
+import { jsonRes } from '@/services/backend/response';
+import { UserTask } from '@/types/user';
+import { NextRequest } from 'next/server';
+
+export const dynamic = 'force-dynamic';
+
+export async function POST(req: NextRequest) {
+  try {
+    if (process.env.GUIDE_ENABLED !== 'true') {
+      return jsonRes({
+        data: {
+          needGuide: false
+        }
+      });
+    }
+    const data = (await req.json()) as {
+      desktopToAppToken: string;
+    };
+
+    if (!data.desktopToAppToken) {
+      return jsonRes({ code: 401, message: 'token is valid' });
+    }
+
+    const domain = process.env.SEALOS_DOMAIN;
+
+    const response = await fetch(`https://${domain}/api/account/getTasks`, {
+      method: 'GET',
+      headers: {
+        Authorization: data.desktopToAppToken
+      }
+    });
+
+    const result: {
+      code: number;
+      data: UserTask[];
+      message: string;
+    } = await response.json();
+
+    console.log('result', result);
+
+    if (result.code !== 200) {
+      return jsonRes({
+        code: 500,
+        message: 'desktop api is err'
+      });
+    }
+
+    const launchpadTask = result.data.find((task) => task.taskType === 'DEVBOX');
+    const needGuide = launchpadTask ? !launchpadTask.isCompleted : false;
+
+    return jsonRes({
+      code: 200,
+      data: { needGuide, task: launchpadTask }
+    });
+  } catch (err: any) {
+    return jsonRes({
+      code: 500,
+      error: err
+    });
+  }
+}
diff --git a/frontend/providers/devbox/app/api/monitor/getMonitorData/route.ts b/frontend/providers/devbox/app/api/monitor/getMonitorData/route.ts
index 6dbb29d3fbd2..6f114c23b310 100644
--- a/frontend/providers/devbox/app/api/monitor/getMonitorData/route.ts
+++ b/frontend/providers/devbox/app/api/monitor/getMonitorData/route.ts
@@ -1,10 +1,10 @@
-import { NextRequest } from 'next/server'
+import { NextRequest } from 'next/server';
 
-import { authSession } from '@/services/backend/auth'
-import { getK8s } from '@/services/backend/kubernetes'
-import { jsonRes } from '@/services/backend/response'
-import { monitorFetch } from '@/services/monitorFetch'
-import { MonitorDataResult, MonitorQueryKey, MonitorServiceResult } from '@/types/monitor'
+import { authSession } from '@/services/backend/auth';
+import { getK8s } from '@/services/backend/kubernetes';
+import { jsonRes } from '@/services/backend/response';
+import { monitorFetch } from '@/services/monitorFetch';
+import { MonitorDataResult, MonitorQueryKey, MonitorServiceResult } from '@/types/monitor';
 
 const AdapterChartData: Record<
   keyof MonitorQueryKey,
@@ -12,92 +12,92 @@ const AdapterChartData: Record<
 > = {
   disk: (data: MonitorServiceResult) => {
     const newDataArray = data.data.result.map((item) => {
-      let name = item.metric.pod
-      let xData = item.values.map((value) => value[0])
-      let yData = item.values.map((value) => (parseFloat(value[1]) * 100).toFixed(2))
+      let name = item.metric.pod;
+      let xData = item.values.map((value) => value[0]);
+      let yData = item.values.map((value) => (parseFloat(value[1]) * 100).toFixed(2));
       return {
         name: name,
         xData: xData,
         yData: yData
-      }
-    })
-    return newDataArray
+      };
+    });
+    return newDataArray;
   },
   cpu: (data: MonitorServiceResult) => {
     const newDataArray = data.data.result.map((item) => {
-      let name = item.metric.pod
-      let xData = item.values.map((value) => value[0])
-      let yData = item.values.map((value) => (parseFloat(value[1]) * 100).toFixed(2))
+      let name = item.metric.pod;
+      let xData = item.values.map((value) => value[0]);
+      let yData = item.values.map((value) => (parseFloat(value[1]) * 100).toFixed(2));
       return {
         name: name,
         xData: xData,
         yData: yData
-      }
-    })
-    return newDataArray
+      };
+    });
+    return newDataArray;
   },
   memory: (data: MonitorServiceResult) => {
     const newDataArray = data.data.result.map((item) => {
-      let name = item.metric.pod
-      let xData = item.values.map((value) => value[0])
-      let yData = item.values.map((value) => (parseFloat(value[1]) * 100).toFixed(2))
+      let name = item.metric.pod;
+      let xData = item.values.map((value) => value[0]);
+      let yData = item.values.map((value) => (parseFloat(value[1]) * 100).toFixed(2));
       return {
         name: name,
         xData: xData,
         yData: yData
-      }
-    })
-    return newDataArray
+      };
+    });
+    return newDataArray;
   },
   average_cpu: (data: MonitorServiceResult) => {
     const newDataArray = data.data.result.map((item) => {
-      let name = item.metric.pod
-      let xData = item.values.map((value) => value[0])
-      let yData = item.values.map((value) => parseFloat(value[1]).toFixed(2))
+      let name = item.metric.pod;
+      let xData = item.values.map((value) => value[0]);
+      let yData = item.values.map((value) => parseFloat(value[1]).toFixed(2));
       return {
         name: name,
         xData: xData,
         yData: yData
-      }
-    })
-    return newDataArray
+      };
+    });
+    return newDataArray;
   },
   average_memory: (data: MonitorServiceResult) => {
     const newDataArray = data.data.result.map((item) => {
-      let name = item.metric.pod
-      let xData = item.values.map((value) => value[0])
-      let yData = item.values.map((value) => parseFloat(value[1]).toFixed(2))
+      let name = item.metric.pod;
+      let xData = item.values.map((value) => value[0]);
+      let yData = item.values.map((value) => parseFloat(value[1]).toFixed(2));
       return {
         name: name,
         xData: xData,
         yData: yData
-      }
-    })
-    return newDataArray
+      };
+    });
+    return newDataArray;
   }
-}
+};
 
-export const dynamic = 'force-dynamic'
+export const dynamic = 'force-dynamic';
 
 export async function GET(req: NextRequest) {
   try {
-    const headerList = req.headers
-    const { searchParams } = req.nextUrl
-    const queryName = searchParams.get('queryName') as string
-    const queryKey = searchParams.get('queryKey') as keyof MonitorQueryKey
-    const start = searchParams.get('start') as string
-    const end = searchParams.get('end') as string
-    const step = searchParams.get('step') as string | '1m'
+    const headerList = req.headers;
+    const { searchParams } = req.nextUrl;
+    const queryName = searchParams.get('queryName') as string;
+    const queryKey = searchParams.get('queryKey') as keyof MonitorQueryKey;
+    const start = searchParams.get('start') as string;
+    const end = searchParams.get('end') as string;
+    const step = searchParams.get('step') as string | '1m';
 
-    const kubeconfig = await authSession(headerList)
+    const kubeconfig = await authSession(headerList);
 
     const { namespace } = await getK8s({
       kubeconfig: kubeconfig
-    })
+    });
 
     // One hour of monitoring data
-    const endTime = Date.now()
-    const startTime = endTime - 60 * 60 * 1000
+    const endTime = Date.now();
+    const startTime = endTime - 60 * 60 * 1000;
 
     const params = {
       type: queryKey,
@@ -106,7 +106,7 @@ export async function GET(req: NextRequest) {
       start: startTime / 1000,
       end: endTime / 1000,
       step: step
-    }
+    };
 
     const result: MonitorDataResult = await monitorFetch(
       {
@@ -119,17 +119,17 @@ export async function GET(req: NextRequest) {
       return AdapterChartData[queryKey]
         ? // @ts-ignore
           AdapterChartData[queryKey](res as MonitorDataResult)
-        : res
-    })
+        : res;
+    });
 
     return jsonRes({
       code: 200,
       data: result
-    })
+    });
   } catch (error) {
     return jsonRes({
       code: 500,
       error: error
-    })
+    });
   }
 }
diff --git a/frontend/providers/devbox/app/api/pauseDevbox/route.ts b/frontend/providers/devbox/app/api/pauseDevbox/route.ts
index baf8134ac797..062f6039bc81 100644
--- a/frontend/providers/devbox/app/api/pauseDevbox/route.ts
+++ b/frontend/providers/devbox/app/api/pauseDevbox/route.ts
@@ -1,20 +1,77 @@
-import { NextRequest } from 'next/server'
+import { NextRequest } from 'next/server';
 
-import { jsonRes } from '@/services/backend/response'
-import { authSession } from '@/services/backend/auth'
-import { getK8s } from '@/services/backend/kubernetes'
+import { jsonRes } from '@/services/backend/response';
+import { authSession } from '@/services/backend/auth';
+import { getK8s } from '@/services/backend/kubernetes';
+import { devboxKey } from '@/constants/devbox';
 
-export const dynamic = 'force-dynamic'
+export const dynamic = 'force-dynamic';
 
 export async function POST(req: NextRequest) {
   try {
-    const { devboxName } = (await req.json()) as { devboxName: string }
+    const { devboxName } = (await req.json()) as { devboxName: string };
 
-    const headerList = req.headers
+    const headerList = req.headers;
 
-    const { k8sCustomObjects, namespace } = await getK8s({
+    const { k8sCustomObjects, namespace, k8sNetworkingApp } = await getK8s({
       kubeconfig: await authSession(headerList)
-    })
+    });
+
+    // get ingress and modify ingress annotations
+    const ingressesResponse = await k8sNetworkingApp.listNamespacedIngress(
+      namespace,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      `${devboxKey}=${devboxName}`
+    );
+    const ingresses: any = (ingressesResponse.body as { items: any[] }).items;
+
+    ingresses.forEach(async (ingress: any) => {
+      const annotationsIngressClass =
+        ingress.metadata?.annotations?.['kubernetes.io/ingress.class'];
+      const specIngressClass = ingress.spec?.ingressClassName;
+
+      if (
+        (annotationsIngressClass && annotationsIngressClass === 'nginx') ||
+        (specIngressClass && specIngressClass === 'nginx')
+      ) {
+        if (annotationsIngressClass) {
+          await k8sNetworkingApp.patchNamespacedIngress(
+            ingress.metadata.name,
+            namespace,
+            { metadata: { annotations: { 'kubernetes.io/ingress.class': 'pause' } } },
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            {
+              headers: {
+                'Content-Type': 'application/merge-patch+json'
+              }
+            }
+          );
+        } else if (specIngressClass) {
+          await k8sNetworkingApp.patchNamespacedIngress(
+            ingress.metadata.name,
+            namespace,
+            { spec: { ingressClassName: 'pause' } },
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            {
+              headers: {
+                'Content-Type': 'application/merge-patch+json'
+              }
+            }
+          );
+        }
+      }
+    });
 
     await k8sCustomObjects.patchNamespacedCustomObject(
       'devbox.sealos.io',
@@ -31,15 +88,15 @@ export async function POST(req: NextRequest) {
           'Content-Type': 'application/merge-patch+json'
         }
       }
-    )
+    );
 
     return jsonRes({
       data: 'success pause devbox'
-    })
+    });
   } catch (err: any) {
     return jsonRes({
       code: 500,
       error: err
-    })
+    });
   }
 }
diff --git a/frontend/providers/devbox/app/api/platform/authCname/route.ts b/frontend/providers/devbox/app/api/platform/authCname/route.ts
index 0bf5539ef495..1a3071136222 100644
--- a/frontend/providers/devbox/app/api/platform/authCname/route.ts
+++ b/frontend/providers/devbox/app/api/platform/authCname/route.ts
@@ -1,37 +1,37 @@
-import dns from 'dns'
-import { NextRequest } from 'next/server'
+import dns from 'dns';
+import { NextRequest } from 'next/server';
 
-import { jsonRes } from '@/services/backend/response'
+import { jsonRes } from '@/services/backend/response';
 
-export const dynamic = 'force-dynamic'
+export const dynamic = 'force-dynamic';
 
 export async function POST(req: NextRequest) {
   try {
     const { publicDomain, customDomain } = (await req.json()) as {
-      publicDomain: string
-      customDomain: string
-    }
+      publicDomain: string;
+      customDomain: string;
+    };
     const cnameError = await new Promise<NodeJS.ErrnoException | string | null>((resolve) => {
       dns.resolveCname(customDomain, (err, address) => {
-        if (err) return resolve(err)
+        if (err) return resolve(err);
 
         if (address[0] !== publicDomain)
-          return resolve("Cname auth error: customDomain's cname is not equal to publicDomain")
-        resolve(null)
-      })
-    })
-    if(!!cnameError) {
+          return resolve("Cname auth error: customDomain's cname is not equal to publicDomain");
+        resolve(null);
+      });
+    });
+    if (!!cnameError) {
       return jsonRes({
         code: 409,
         error: cnameError
-      })
+      });
     } else {
-      return jsonRes({})
+      return jsonRes({});
     }
   } catch (error) {
     return jsonRes({
       code: 500,
       error
-    })
+    });
   }
 }
diff --git a/frontend/providers/devbox/app/api/platform/getQuota/route.ts b/frontend/providers/devbox/app/api/platform/getQuota/route.ts
index eedfd8e6c31f..a5aa0c407934 100644
--- a/frontend/providers/devbox/app/api/platform/getQuota/route.ts
+++ b/frontend/providers/devbox/app/api/platform/getQuota/route.ts
@@ -1,28 +1,28 @@
-import type { NextRequest } from 'next/server'
+import type { NextRequest } from 'next/server';
 
-import { getK8s } from '@/services/backend/kubernetes'
-import { jsonRes } from '@/services/backend/response'
-import { authSession } from '@/services/backend/auth'
+import { getK8s } from '@/services/backend/kubernetes';
+import { jsonRes } from '@/services/backend/response';
+import { authSession } from '@/services/backend/auth';
 
-export const dynamic = 'force-dynamic'
+export const dynamic = 'force-dynamic';
 
 export async function GET(req: NextRequest) {
   try {
-    const headerList = req.headers
+    const headerList = req.headers;
 
     const { getUserQuota } = await getK8s({
       kubeconfig: await authSession(headerList)
-    })
+    });
 
-    const quota = await getUserQuota()
+    const quota = await getUserQuota();
 
     return jsonRes({
       data: {
         quota
       }
-    })
+    });
   } catch (error) {
-    console.log(error)
-    return jsonRes({ code: 500, message: 'get price error' })
+    console.log(error);
+    return jsonRes({ code: 500, message: 'get price error' });
   }
 }
diff --git a/frontend/providers/devbox/app/api/platform/getRuntime/route.ts b/frontend/providers/devbox/app/api/platform/getRuntime/route.ts
index a5f77c5c8903..4d59e3fcbb68 100644
--- a/frontend/providers/devbox/app/api/platform/getRuntime/route.ts
+++ b/frontend/providers/devbox/app/api/platform/getRuntime/route.ts
@@ -1,165 +1,165 @@
-import { NextRequest } from 'next/server'
+import { NextRequest } from 'next/server';
 
-import { authSession } from '@/services/backend/auth'
-import { getK8s } from '@/services/backend/kubernetes'
-import { jsonRes } from '@/services/backend/response'
-import { defaultEnv } from '@/stores/env'
-import { runtimeNamespaceMapType, ValueType, VersionMapType } from '@/types/devbox'
-import { KBRuntimeClassType, KBRuntimeType } from '@/types/k8s'
+import { authSession } from '@/services/backend/auth';
+import { getK8s } from '@/services/backend/kubernetes';
+import { jsonRes } from '@/services/backend/response';
+import { defaultEnv } from '@/stores/env';
+import { runtimeNamespaceMapType, ValueType, VersionMapType } from '@/types/devbox';
+import { KBRuntimeClassType, KBRuntimeType } from '@/types/k8s';
 
-export const dynamic = 'force-dynamic'
+export const dynamic = 'force-dynamic';
 
 export async function GET(req: NextRequest) {
   try {
-    const languageTypeList: ValueType[] = []
-    const frameworkTypeList: ValueType[] = []
-    const osTypeList: ValueType[] = []
-    const languageVersionMap: VersionMapType = {}
-    const frameworkVersionMap: VersionMapType = {}
-    const osVersionMap: VersionMapType = {}
-    const runtimeNamespaceMap: runtimeNamespaceMapType = {}
+    const languageTypeList: ValueType[] = [];
+    const frameworkTypeList: ValueType[] = [];
+    const osTypeList: ValueType[] = [];
+    const languageVersionMap: VersionMapType = {};
+    const frameworkVersionMap: VersionMapType = {};
+    const osVersionMap: VersionMapType = {};
+    const runtimeNamespaceMap: runtimeNamespaceMapType = {};
 
-    const { ROOT_RUNTIME_NAMESPACE } = process.env
+    const { ROOT_RUNTIME_NAMESPACE } = process.env;
 
-    const headerList = req.headers
+    const headerList = req.headers;
 
     const { k8sCustomObjects } = await getK8s({
       kubeconfig: await authSession(headerList)
-    })
+    });
 
     const { body: runtimeClasses } = (await k8sCustomObjects.listNamespacedCustomObject(
       'devbox.sealos.io',
       'v1alpha1',
       ROOT_RUNTIME_NAMESPACE || defaultEnv.rootRuntimeNamespace,
       'runtimeclasses'
-    )) as { body: { items: KBRuntimeClassType[] } }
+    )) as { body: { items: KBRuntimeClassType[] } };
     const { body: _runtimes } = (await k8sCustomObjects.listNamespacedCustomObject(
       'devbox.sealos.io',
       'v1alpha1',
       ROOT_RUNTIME_NAMESPACE || defaultEnv.rootRuntimeNamespace,
       'runtimes'
-    )) as { body: { items: KBRuntimeType[] } }
+    )) as { body: { items: KBRuntimeType[] } };
+
+    let runtimes = _runtimes?.items?.filter((item) => item.spec.state === 'active');
 
-    let runtimes = _runtimes?.items?.filter((item) => item.spec.state === 'active')
-    
     // runtimeClasses
-    const languageList = runtimeClasses?.items.filter((item: any) => item.spec.kind === 'Language')
+    const languageList = runtimeClasses?.items.filter((item: any) => item.spec.kind === 'Language');
     languageTypeList.push(
       ...languageList.map((item: any) => {
         return {
           id: item.metadata.name,
           label: item.spec.title
-        }
+        };
       })
-    )
+    );
     const frameworkList = runtimeClasses?.items.filter(
       (item: any) => item.spec.kind === 'Framework'
-    )
+    );
     frameworkTypeList.push(
       ...frameworkList.map((item: any) => {
         return {
           id: item.metadata.name,
           label: item.spec.title
-        }
+        };
       })
-    )
-    const osList = runtimeClasses?.items.filter((item: any) => item.spec.kind === 'OS')
+    );
+    const osList = runtimeClasses?.items.filter((item: any) => item.spec.kind === 'OS');
     osTypeList.push(
       ...osList.map((item: any) => {
         return {
           id: item.metadata.name,
           label: item.spec.title
-        }
+        };
       })
-    )
+    );
 
     // runtimeVersions and runtimeNamespaceMap
     languageList.forEach((item: any) => {
-      const language = item.metadata.name
-      const versions = runtimes.filter((runtime: any) => runtime.spec.classRef === language)
+      const language = item.metadata.name;
+      const versions = runtimes.filter((runtime: any) => runtime.spec.classRef === language);
       const defaultVersion = versions.find(
         (v: any) => v.metadata.annotations?.['devbox.sealos.io/defaultVersion'] === 'true'
-      )
+      );
       const otherVersions = versions.filter(
         (v: any) => v.metadata.annotations?.['devbox.sealos.io/defaultVersion'] !== 'true'
-      )
-      const sortedVersions = defaultVersion ? [defaultVersion, ...otherVersions] : versions
+      );
+      const sortedVersions = defaultVersion ? [defaultVersion, ...otherVersions] : versions;
 
       sortedVersions.forEach((version: any) => {
-        runtimeNamespaceMap[version.metadata.name] = item.metadata.namespace
-      })
+        runtimeNamespaceMap[version.metadata.name] = item.metadata.namespace;
+      });
 
       languageVersionMap[language] = sortedVersions.map((version: any) => ({
         id: version.metadata.name,
         label: version.spec.version,
         defaultPorts: version.spec.config.appPorts.map((item: any) => item.port)
-      }))
+      }));
       if (languageVersionMap[language].length === 0) {
-        delete languageVersionMap[language]
-        const index = languageTypeList.findIndex((item) => item.id === language)
+        delete languageVersionMap[language];
+        const index = languageTypeList.findIndex((item) => item.id === language);
         if (index !== -1) {
-          languageTypeList.splice(index, 1)
+          languageTypeList.splice(index, 1);
         }
       }
-    })
+    });
 
     frameworkList.forEach((item: any) => {
-      const framework = item.metadata.name
-      const versions = runtimes.filter((runtime: any) => runtime.spec.classRef === framework)
+      const framework = item.metadata.name;
+      const versions = runtimes.filter((runtime: any) => runtime.spec.classRef === framework);
       const defaultVersion = versions.find(
         (v: any) => v.metadata.annotations?.['devbox.sealos.io/defaultVersion'] === 'true'
-      )
+      );
       const otherVersions = versions.filter(
         (v: any) => v.metadata.annotations?.['devbox.sealos.io/defaultVersion'] !== 'true'
-      )
-      const sortedVersions = defaultVersion ? [defaultVersion, ...otherVersions] : versions
+      );
+      const sortedVersions = defaultVersion ? [defaultVersion, ...otherVersions] : versions;
 
       sortedVersions.forEach((version: any) => {
-        runtimeNamespaceMap[version.metadata.name] = item.metadata.namespace
-      })
+        runtimeNamespaceMap[version.metadata.name] = item.metadata.namespace;
+      });
 
       frameworkVersionMap[framework] = sortedVersions.map((version: any) => ({
         id: version.metadata.name,
         label: version.spec.version,
         defaultPorts: version.spec.config.appPorts.map((item: any) => item.port)
-      }))
+      }));
       if (frameworkVersionMap[framework].length === 0) {
-        delete frameworkVersionMap[framework]
-        const index = frameworkTypeList.findIndex((item) => item.id === framework)
+        delete frameworkVersionMap[framework];
+        const index = frameworkTypeList.findIndex((item) => item.id === framework);
         if (index !== -1) {
-          frameworkTypeList.splice(index, 1)
+          frameworkTypeList.splice(index, 1);
         }
       }
-    })
+    });
 
     osList.forEach((item: any) => {
-      const os = item.metadata.name
-      const versions = runtimes.filter((runtime: any) => runtime.spec.classRef === os)
+      const os = item.metadata.name;
+      const versions = runtimes.filter((runtime: any) => runtime.spec.classRef === os);
       const defaultVersion = versions.find(
         (v: any) => v.metadata.annotations?.['devbox.sealos.io/defaultVersion'] === 'true'
-      )
+      );
       const otherVersions = versions.filter(
         (v: any) => v.metadata.annotations?.['devbox.sealos.io/defaultVersion'] !== 'true'
-      )
-      const sortedVersions = defaultVersion ? [defaultVersion, ...otherVersions] : versions
+      );
+      const sortedVersions = defaultVersion ? [defaultVersion, ...otherVersions] : versions;
 
       sortedVersions.forEach((version: any) => {
-        runtimeNamespaceMap[version.metadata.name] = item.metadata.namespace
-      })
+        runtimeNamespaceMap[version.metadata.name] = item.metadata.namespace;
+      });
 
       osVersionMap[os] = sortedVersions.map((version: any) => ({
         id: version.metadata.name,
         label: version.spec.version,
         defaultPorts: version.spec.config.appPorts.map((item: any) => item.port)
-      }))
+      }));
       if (osVersionMap[os].length === 0) {
-        delete osVersionMap[os]
-        const index = osTypeList.findIndex((item) => item.id === os)
+        delete osVersionMap[os];
+        const index = osTypeList.findIndex((item) => item.id === os);
         if (index !== -1) {
-          osTypeList.splice(index, 1)
+          osTypeList.splice(index, 1);
         }
       }
-    })
+    });
 
     return jsonRes({
       data: {
@@ -171,11 +171,11 @@ export async function GET(req: NextRequest) {
         osTypeList,
         runtimeNamespaceMap
       }
-    })
+    });
   } catch (error) {
     return jsonRes({
       code: 500,
       error: error
-    })
+    });
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/providers/devbox/app/api/platform/resourcePrice/route.ts b/frontend/providers/devbox/app/api/platform/resourcePrice/route.ts
index b0268eac3feb..26b1b646bd4c 100644
--- a/frontend/providers/devbox/app/api/platform/resourcePrice/route.ts
+++ b/frontend/providers/devbox/app/api/platform/resourcePrice/route.ts
@@ -1,19 +1,19 @@
-import { NextRequest } from 'next/server'
+import { NextRequest } from 'next/server';
 
-import { jsonRes } from '@/services/backend/response'
-import { userPriceType } from '@/types/user'
+import { jsonRes } from '@/services/backend/response';
+import { userPriceType } from '@/types/user';
 
-export const dynamic = 'force-dynamic'
+export const dynamic = 'force-dynamic';
 
 type ResourcePriceType = {
   data: {
     properties: {
-      name: string
-      unit_price: number
-      unit: string
-    }[]
-  }
-}
+      name: string;
+      unit_price: number;
+      unit: string;
+    }[];
+  };
+};
 
 type ResourceType =
   | 'cpu'
@@ -25,54 +25,54 @@ type ResourceType =
   | 'infra-cpu'
   | 'infra-memory'
   | 'infra-disk'
-  | 'services.nodeports'
+  | 'services.nodeports';
 
-const PRICE_SCALE = 1000000
+const PRICE_SCALE = 1000000;
 
 const valuationMap: Record<string, number> = {
   cpu: 1000,
   memory: 1024,
   storage: 1024,
   ['services.nodeports']: 1000
-}
+};
 
 export async function GET(req: NextRequest) {
   try {
-    const { ACCOUNT_URL, SEALOS_DOMAIN } = process.env
-    const baseUrl = ACCOUNT_URL ? ACCOUNT_URL : `https://account-api.${SEALOS_DOMAIN}`
+    const { ACCOUNT_URL, SEALOS_DOMAIN } = process.env;
+    const baseUrl = ACCOUNT_URL ? ACCOUNT_URL : `https://account-api.${SEALOS_DOMAIN}`;
     const getResourcePrice = async () => {
       try {
         const res = await fetch(`${baseUrl}/account/v1alpha1/properties`, {
           method: 'POST'
-        })
+        });
 
-        const data: ResourcePriceType = await res.clone().json()
+        const data: ResourcePriceType = await res.clone().json();
 
-        return data.data.properties
+        return data.data.properties;
       } catch (error) {
-        console.log(error)
+        console.log(error);
       }
-    }
+    };
 
-    const resp = (await getResourcePrice()) as ResourcePriceType['data']['properties']
+    const resp = (await getResourcePrice()) as ResourcePriceType['data']['properties'];
 
     const data: userPriceType = {
       cpu: countSourcePrice(resp, 'cpu'),
       memory: countSourcePrice(resp, 'memory'),
       nodeports: countSourcePrice(resp, 'services.nodeports')
-    }
+    };
 
     return jsonRes({
       data
-    })
+    });
   } catch (error) {
-    return jsonRes({ code: 500, message: 'get price error' })
+    return jsonRes({ code: 500, message: 'get price error' });
   }
 }
 
 function countSourcePrice(rawData: ResourcePriceType['data']['properties'], type: ResourceType) {
-  const rawPrice = rawData.find((item) => item.name === type)?.unit_price || 1
-  const sourceScale = rawPrice * (valuationMap[type] || 1)
-  const unitScale = sourceScale / PRICE_SCALE
-  return unitScale
+  const rawPrice = rawData.find((item) => item.name === type)?.unit_price || 1;
+  const sourceScale = rawPrice * (valuationMap[type] || 1);
+  const unitScale = sourceScale / PRICE_SCALE;
+  return unitScale;
 }
diff --git a/frontend/providers/devbox/app/api/releaseDevbox/route.ts b/frontend/providers/devbox/app/api/releaseDevbox/route.ts
index 12c052d3933e..4369d339922f 100644
--- a/frontend/providers/devbox/app/api/releaseDevbox/route.ts
+++ b/frontend/providers/devbox/app/api/releaseDevbox/route.ts
@@ -1,57 +1,57 @@
-import { NextRequest } from 'next/server'
+import { NextRequest } from 'next/server';
 
-import { authSession } from '@/services/backend/auth'
-import { getK8s } from '@/services/backend/kubernetes'
-import { jsonRes } from '@/services/backend/response'
-import { KBDevboxReleaseType } from '@/types/k8s'
-import { json2DevboxRelease } from '@/utils/json2Yaml'
+import { authSession } from '@/services/backend/auth';
+import { getK8s } from '@/services/backend/kubernetes';
+import { jsonRes } from '@/services/backend/response';
+import { KBDevboxReleaseType } from '@/types/k8s';
+import { json2DevboxRelease } from '@/utils/json2Yaml';
 
-export const dynamic = 'force-dynamic'
+export const dynamic = 'force-dynamic';
 
 export async function POST(req: NextRequest) {
   try {
     const releaseForm = (await req.json()) as {
-      devboxName: string
-      tag: string
-      releaseDes: string
-      devboxUid: string
-    }
-    const headerList = req.headers
+      devboxName: string;
+      tag: string;
+      releaseDes: string;
+      devboxUid: string;
+    };
+    const headerList = req.headers;
 
     const { applyYamlList, namespace, k8sCustomObjects } = await getK8s({
       kubeconfig: await authSession(headerList)
-    })
+    });
     const { body: releaseBody } = (await k8sCustomObjects.listNamespacedCustomObject(
       'devbox.sealos.io',
       'v1alpha1',
       namespace,
       'devboxreleases'
-    )) as { body: { items: KBDevboxReleaseType[] } }
-    if(
+    )) as { body: { items: KBDevboxReleaseType[] } };
+    if (
       releaseBody.items.some((item: any) => {
         return (
           item.spec &&
           item.spec.devboxName === releaseForm.devboxName &&
           item.metadata.ownerReferences[0].uid === releaseForm.devboxUid &&
           item.spec.newTag === releaseForm.tag
-        )
+        );
       })
-    ){
+    ) {
       return jsonRes({
         code: 409,
         error: 'devbox release already exists'
-      })
+      });
     }
-    const devbox = json2DevboxRelease(releaseForm)
-    await applyYamlList([devbox], 'create')
+    const devbox = json2DevboxRelease(releaseForm);
+    await applyYamlList([devbox], 'create');
 
     return jsonRes({
       data: 'success create devbox release'
-    })
+    });
   } catch (err: any) {
     return jsonRes({
       code: 500,
       error: err
-    })
+    });
   }
 }
diff --git a/frontend/providers/devbox/app/api/restartDevbox/route.ts b/frontend/providers/devbox/app/api/restartDevbox/route.ts
index 41da009504f7..966177fd1c29 100644
--- a/frontend/providers/devbox/app/api/restartDevbox/route.ts
+++ b/frontend/providers/devbox/app/api/restartDevbox/route.ts
@@ -1,19 +1,20 @@
-import { NextRequest } from 'next/server'
+import { NextRequest } from 'next/server';
 
-import { jsonRes } from '@/services/backend/response'
-import { authSession } from '@/services/backend/auth'
-import { getK8s } from '@/services/backend/kubernetes'
+import { jsonRes } from '@/services/backend/response';
+import { authSession } from '@/services/backend/auth';
+import { getK8s } from '@/services/backend/kubernetes';
+import { devboxKey } from '@/constants/devbox';
 
-export const dynamic = 'force-dynamic'
+export const dynamic = 'force-dynamic';
 
 export async function POST(req: NextRequest) {
   try {
-    const { devboxName } = (await req.json()) as { devboxName: string }
-    const headerList = req.headers
+    const { devboxName } = (await req.json()) as { devboxName: string };
+    const headerList = req.headers;
 
-    const { k8sCustomObjects, namespace, k8sCore } = await getK8s({
+    const { k8sCustomObjects, namespace, k8sCore, k8sNetworkingApp } = await getK8s({
       kubeconfig: await authSession(headerList)
-    })
+    });
 
     // restart = stopped + running
 
@@ -33,11 +34,12 @@ export async function POST(req: NextRequest) {
           'Content-Type': 'application/merge-patch+json'
         }
       }
-    )
+    );
+
     // 2.get devbox pod and ensure the devbox pod is deleted,when the devbox pod is deleted,the devbox will be restarted
-    let pods
-    const maxRetries = 10
-    let retries = 0
+    let pods;
+    const maxRetries = 10;
+    let retries = 0;
 
     do {
       const {
@@ -49,22 +51,78 @@ export async function POST(req: NextRequest) {
         undefined,
         undefined,
         `app.kubernetes.io/name=${devboxName}`
-      )
-      pods = items
+      );
+      pods = items;
 
       if (pods.length > 0) {
-        await new Promise((resolve) => setTimeout(resolve, 3000))
+        await new Promise((resolve) => setTimeout(resolve, 3000));
       }
 
-      retries++
-    } while (pods.length > 0 && retries < maxRetries)
+      retries++;
+    } while (pods.length > 0 && retries < maxRetries);
 
     if (retries === maxRetries) {
-      throw new Error('Max retries reached while waiting for devbox pod to be deleted')
+      throw new Error('Max retries reached while waiting for devbox pod to be deleted');
     }
-    console.log('devbox pod is deleted')
+    console.log('devbox pod is deleted');
 
     // 3. running
+    // get ingress and modify ingress annotations
+    const ingressesResponse = await k8sNetworkingApp.listNamespacedIngress(
+      namespace,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      `${devboxKey}=${devboxName}`
+    );
+    const ingresses: any = (ingressesResponse.body as { items: any[] }).items;
+
+    ingresses.forEach(async (ingress: any) => {
+      const annotationsIngressClass =
+        ingress.metadata?.annotations?.['kubernetes.io/ingress.class'];
+      const specIngressClass = ingress.spec?.ingressClassName;
+
+      if (
+        (annotationsIngressClass && annotationsIngressClass === 'pause') ||
+        (specIngressClass && specIngressClass === 'pause')
+      ) {
+        if (annotationsIngressClass) {
+          await k8sNetworkingApp.patchNamespacedIngress(
+            ingress.metadata.name,
+            namespace,
+            { metadata: { annotations: { 'kubernetes.io/ingress.class': 'nginx' } } },
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            {
+              headers: {
+                'Content-Type': 'application/merge-patch+json'
+              }
+            }
+          );
+        } else if (specIngressClass) {
+          await k8sNetworkingApp.patchNamespacedIngress(
+            ingress.metadata.name,
+            namespace,
+            { spec: { ingressClassName: 'nginx' } },
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            {
+              headers: {
+                'Content-Type': 'application/merge-patch+json'
+              }
+            }
+          );
+        }
+      }
+    });
+
     await k8sCustomObjects.patchNamespacedCustomObject(
       'devbox.sealos.io',
       'v1alpha1',
@@ -80,15 +138,15 @@ export async function POST(req: NextRequest) {
           'Content-Type': 'application/merge-patch+json'
         }
       }
-    )
+    );
 
     return jsonRes({
       data: 'success pause devbox'
-    })
+    });
   } catch (err: any) {
     return jsonRes({
       code: 500,
       error: err
-    })
+    });
   }
 }
diff --git a/frontend/providers/devbox/app/api/startDevbox/route.ts b/frontend/providers/devbox/app/api/startDevbox/route.ts
index 636cfa0630d0..91b43bea6d15 100644
--- a/frontend/providers/devbox/app/api/startDevbox/route.ts
+++ b/frontend/providers/devbox/app/api/startDevbox/route.ts
@@ -1,20 +1,77 @@
-import { NextRequest } from 'next/server'
+import { NextRequest } from 'next/server';
 
-import { authSession } from '@/services/backend/auth'
-import { getK8s } from '@/services/backend/kubernetes'
-import { jsonRes } from '@/services/backend/response'
+import { authSession } from '@/services/backend/auth';
+import { getK8s } from '@/services/backend/kubernetes';
+import { jsonRes } from '@/services/backend/response';
+import { devboxKey } from '@/constants/devbox';
 
-export const dynamic = 'force-dynamic'
+export const dynamic = 'force-dynamic';
 
 export async function POST(req: NextRequest) {
   try {
-    const { devboxName } = (await req.json()) as { devboxName: string }
+    const { devboxName } = (await req.json()) as { devboxName: string };
 
-    const headerList = req.headers
+    const headerList = req.headers;
 
-    const { k8sCustomObjects, namespace } = await getK8s({
+    const { k8sCustomObjects, namespace, k8sNetworkingApp } = await getK8s({
       kubeconfig: await authSession(headerList)
-    })
+    });
+
+    // get ingress and modify ingress annotations
+    const ingressesResponse = await k8sNetworkingApp.listNamespacedIngress(
+      namespace,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      `${devboxKey}=${devboxName}`
+    );
+    const ingresses: any = (ingressesResponse.body as { items: any[] }).items;
+
+    ingresses.forEach(async (ingress: any) => {
+      const annotationsIngressClass =
+        ingress.metadata?.annotations?.['kubernetes.io/ingress.class'];
+      const specIngressClass = ingress.spec?.ingressClassName;
+
+      if (
+        (annotationsIngressClass && annotationsIngressClass === 'pause') ||
+        (specIngressClass && specIngressClass === 'pause')
+      ) {
+        if (annotationsIngressClass) {
+          await k8sNetworkingApp.patchNamespacedIngress(
+            ingress.metadata.name,
+            namespace,
+            { metadata: { annotations: { 'kubernetes.io/ingress.class': 'nginx' } } },
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            {
+              headers: {
+                'Content-Type': 'application/merge-patch+json'
+              }
+            }
+          );
+        } else if (specIngressClass) {
+          await k8sNetworkingApp.patchNamespacedIngress(
+            ingress.metadata.name,
+            namespace,
+            { spec: { ingressClassName: 'nginx' } },
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            {
+              headers: {
+                'Content-Type': 'application/merge-patch+json'
+              }
+            }
+          );
+        }
+      }
+    });
 
     await k8sCustomObjects.patchNamespacedCustomObject(
       'devbox.sealos.io',
@@ -31,15 +88,15 @@ export async function POST(req: NextRequest) {
           'Content-Type': 'application/merge-patch+json'
         }
       }
-    )
+    );
 
     return jsonRes({
       data: 'success start devbox'
-    })
+    });
   } catch (err: any) {
     return jsonRes({
       code: 500,
       error: err
-    })
+    });
   }
 }
diff --git a/frontend/providers/devbox/app/api/templateRepository/delete/route.ts b/frontend/providers/devbox/app/api/templateRepository/delete/route.ts
index 7af91eafdb36..fc5d5df97eec 100644
--- a/frontend/providers/devbox/app/api/templateRepository/delete/route.ts
+++ b/frontend/providers/devbox/app/api/templateRepository/delete/route.ts
@@ -1,33 +1,36 @@
-import { authSessionWithJWT } from '@/services/backend/auth'
-import { jsonRes } from '@/services/backend/response'
-import { devboxDB } from '@/services/db/init'
-import { NextRequest } from 'next/server'
-import { z } from 'zod'
+import { authSessionWithJWT } from '@/services/backend/auth';
+import { jsonRes } from '@/services/backend/response';
+import { devboxDB } from '@/services/db/init';
+import { getRegionUid } from '@/utils/env';
+import { NextRequest } from 'next/server';
+import { z } from 'zod';
 
-export const dynamic = 'force-dynamic'
+export const dynamic = 'force-dynamic';
 
 export async function DELETE(req: NextRequest) {
   try {
-    const headerList = req.headers
-    const { searchParams } = req.nextUrl
-    const idRaw = searchParams.get('templateRepositoryUid') as string
+    const headerList = req.headers;
+    const { searchParams } = req.nextUrl;
+    const idRaw = searchParams.get('templateRepositoryUid') as string;
 
-    const result = z.string().uuid().safeParse(idRaw)
-    if(!result.success) {
+    const result = z.string().uuid().safeParse(idRaw);
+    if (!result.success) {
       return jsonRes({
         code: 400,
         error: 'Invalid template id'
-      })
+      });
     }
-    const uid = result.data
-    const {payload} = await authSessionWithJWT(headerList)
+    const uid = result.data;
+    const { payload } = await authSessionWithJWT(headerList);
 
-    const deletedAt = new Date()
+    const deletedAt = new Date();
+    const regionUid = getRegionUid();
     await devboxDB.templateRepository.update({
       where: {
         uid,
         organizationUid: payload.organizationUid,
         isDeleted: false,
+        regionUid
       },
       data: {
         deletedAt,
@@ -36,7 +39,7 @@ export async function DELETE(req: NextRequest) {
           updateMany: {
             where: {
               templateRepositoryUid: uid,
-              isDeleted: false,
+              isDeleted: false
             },
             data: {
               deletedAt,
@@ -45,16 +48,16 @@ export async function DELETE(req: NextRequest) {
           }
         }
       }
-    })
+    });
     return jsonRes({
       data: {
         isDeleted: true
       }
-    })
+    });
   } catch (err: any) {
     return jsonRes({
       code: 500,
       error: err
-    })
+    });
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/providers/devbox/app/api/templateRepository/get/route.ts b/frontend/providers/devbox/app/api/templateRepository/get/route.ts
index e0d83c03205b..bd79db8d4cf4 100644
--- a/frontend/providers/devbox/app/api/templateRepository/get/route.ts
+++ b/frontend/providers/devbox/app/api/templateRepository/get/route.ts
@@ -1,37 +1,40 @@
-import { authSessionWithJWT } from '@/services/backend/auth'
-import { jsonRes } from '@/services/backend/response'
-import { devboxDB } from '@/services/db/init'
-import { NextRequest } from 'next/server'
-import { z } from 'zod'
+import { authSessionWithJWT } from '@/services/backend/auth';
+import { jsonRes } from '@/services/backend/response';
+import { devboxDB } from '@/services/db/init';
+import { getRegionUid } from '@/utils/env';
+import { NextRequest } from 'next/server';
+import { z } from 'zod';
 
-export const dynamic = 'force-dynamic'
+export const dynamic = 'force-dynamic';
 
 export async function GET(req: NextRequest) {
   try {
-    const headerList = req.headers
-    const { payload } = await authSessionWithJWT(headerList)
-    const _uid = req.nextUrl.searchParams.get('uid')
-    const uidResult = z.string().uuid().safeParse(_uid)
+    const headerList = req.headers;
+    const { payload } = await authSessionWithJWT(headerList);
+    const _uid = req.nextUrl.searchParams.get('uid');
+    const uidResult = z.string().uuid().safeParse(_uid);
     if (!uidResult.success) {
       return jsonRes({
         code: 400,
         error: 'Invalid uid'
-      })
+      });
     }
-    const uid = uidResult.data
+    const uid = uidResult.data;
+    const regionUid = getRegionUid();
     const templateRepository = await devboxDB.templateRepository.findUnique({
       where: {
         uid,
-        isDeleted: false
+        isDeleted: false,
+        regionUid
       },
       select: {
         templates: {
           where: {
-            isDeleted: false,
+            isDeleted: false
           },
           select: {
             name: true,
-            uid: true,
+            uid: true
           }
         },
         name: true,
@@ -49,29 +52,30 @@ export async function GET(req: NextRequest) {
         templateRepositoryTags: {
           select: {
             tag: true
-          },
-        },
+          }
+        }
       }
-    })
-    if (!templateRepository ||
-      (!templateRepository.isPublic 
-        && templateRepository.organization.isDeleted === false 
-        && templateRepository.organization.uid !== payload.organizationUid)
+    });
+    if (
+      !templateRepository ||
+      (!templateRepository.isPublic &&
+        templateRepository.organization.isDeleted === false &&
+        templateRepository.organization.uid !== payload.organizationUid)
     ) {
       return jsonRes({
         code: 404,
         error: 'Template not found'
-      })
+      });
     }
     return jsonRes({
       data: {
         templateRepository
       }
-    })
+    });
   } catch (err: any) {
     return jsonRes({
       code: 500,
       error: err
-    })
+    });
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/providers/devbox/app/api/templateRepository/list/route.ts b/frontend/providers/devbox/app/api/templateRepository/list/route.ts
index 3dcd8c999c3d..341edb196846 100644
--- a/frontend/providers/devbox/app/api/templateRepository/list/route.ts
+++ b/frontend/providers/devbox/app/api/templateRepository/list/route.ts
@@ -1,83 +1,84 @@
-import { Prisma } from '@/prisma/generated/client'
-import { jsonRes } from '@/services/backend/response'
-import { devboxDB } from '@/services/db/init'
-import { NextRequest } from 'next/server'
-import { z } from 'zod'
-export const dynamic = 'force-dynamic'
+import { Prisma } from '@/prisma/generated/client';
+import { jsonRes } from '@/services/backend/response';
+import { devboxDB } from '@/services/db/init';
+import { getRegionUid } from '@/utils/env';
+import { NextRequest } from 'next/server';
+import { z } from 'zod';
+export const dynamic = 'force-dynamic';
 export async function GET(req: NextRequest) {
   try {
-    const searchParams = req.nextUrl.searchParams
-    const tags = searchParams.getAll('tags') || []
-    const search = searchParams.get('search') || ''
-    const page = z.number().int().positive().safeParse(Number(searchParams.get('page'))).data || 1
-    const pageSize = z.number().int().min(1).safeParse(Number(searchParams.get('pageSize'))).data || 30
-    const dbquery: Prisma.TemplateRepositoryWhereInput = {
-
-      ...(tags && tags.length > 0
-        ? {
-          AND: tags.map((tag) => ({
-            templateRepositoryTags: {
-              some: {
-                tagUid: tag
-              }
-            }
-          }))
-        }
-        : {}),
-      ...(search && search.length > 0
-        ? {
-          name: {
-            contains: search
-          }
-        }
-        : {})
-    }
-    const [templateRepositoryList, totalItems] = await devboxDB.$transaction(async tx => {
-      const validRepoIds = await tx.template.findMany({
-        where: {
-          isDeleted: false,
-        },
-        select: {
-          templateRepositoryUid: true
-        },
-        distinct: ['templateRepositoryUid']
-      })
-
+    const searchParams = req.nextUrl.searchParams;
+    const tags = searchParams.getAll('tags') || [];
+    const search = searchParams.get('search') || '';
+    const page =
+      z
+        .number()
+        .int()
+        .positive()
+        .safeParse(Number(searchParams.get('page'))).data || 1;
+    const pageSize =
+      z
+        .number()
+        .int()
+        .min(1)
+        .safeParse(Number(searchParams.get('pageSize'))).data || 30;
+    const [templateRepositoryList, totalItems] = await devboxDB.$transaction(async (tx) => {
+      const regionUid = getRegionUid();
       const where: Prisma.TemplateRepositoryWhereInput = {
-        uid: {
-          in: validRepoIds.map(r => r.templateRepositoryUid)
+        templates: {
+          some: {
+            isDeleted: false
+          }
         },
         isPublic: true,
         isDeleted: false,
-        ...dbquery
-      }
+        regionUid,
+        ...(tags && tags.length > 0
+          ? {
+              AND: tags.map((tag) => ({
+                templateRepositoryTags: {
+                  some: {
+                    tagUid: tag
+                  }
+                }
+              }))
+            }
+          : {}),
+        ...(search && search.length > 0
+          ? {
+              name: {
+                contains: search
+              }
+            }
+          : {})
+      };
       const [templateRepositoryList, totalItems] = await Promise.all([
         tx.templateRepository.findMany({
           where,
           select: {
             organization: {
               select: {
-                name: true,
+                name: true
               }
             },
             templateRepositoryTags: {
               select: {
-                tag: true,
-              },
+                tag: true
+              }
             },
             templates: {
               where: {
-                isDeleted: false,
+                isDeleted: false
               },
               select: {
                 name: true,
-                uid: true,
+                uid: true
               }
             },
             name: true,
             uid: true,
             description: true,
-            iconId: true,
+            iconId: true
           },
           skip: (page - 1) * pageSize,
           take: pageSize,
@@ -88,11 +89,11 @@ export async function GET(req: NextRequest) {
           ]
         }),
         tx.templateRepository.count({
-          where: dbquery,
+          where
         })
-      ])
-      return [templateRepositoryList, totalItems]
-    })
+      ]);
+      return [templateRepositoryList, totalItems];
+    });
 
     return jsonRes({
       data: {
@@ -104,17 +105,17 @@ export async function GET(req: NextRequest) {
           totalPage: Math.ceil(totalItems / pageSize)
         }
       }
-    })
+    });
   } catch (err: any) {
     if (err instanceof z.ZodError) {
       return jsonRes({
         code: 400,
         error: err.message
-      })
+      });
     }
     return jsonRes({
       code: 500,
       error: err
-    })
+    });
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/providers/devbox/app/api/templateRepository/listOfficial/route.ts b/frontend/providers/devbox/app/api/templateRepository/listOfficial/route.ts
index 9318d393e3ea..0c96ee5da538 100644
--- a/frontend/providers/devbox/app/api/templateRepository/listOfficial/route.ts
+++ b/frontend/providers/devbox/app/api/templateRepository/listOfficial/route.ts
@@ -1,7 +1,8 @@
-import { jsonRes } from '@/services/backend/response'
-import { devboxDB } from '@/services/db/init'
-import { NextRequest } from 'next/server'
-export const dynamic = 'force-dynamic'
+import { jsonRes } from '@/services/backend/response';
+import { devboxDB } from '@/services/db/init';
+import { getRegionUid } from '@/utils/env';
+import { NextRequest } from 'next/server';
+export const dynamic = 'force-dynamic';
 
 export const GET = async function GET(req: NextRequest) {
   try {
@@ -9,31 +10,33 @@ export const GET = async function GET(req: NextRequest) {
       where: {
         id: 'labring'
       }
-    })
-    if(!organization) throw Error('organization not found')
+    });
+    if (!organization) throw Error('organization not found');
+    const regionUid = getRegionUid();
     const templateRepositoryList = await devboxDB.templateRepository.findMany({
       where: {
         isPublic: true,
         isDeleted: false,
-        organizationUid: organization.uid
+        organizationUid: organization.uid,
+        regionUid
       },
       select: {
         kind: true,
         iconId: true,
         name: true,
         uid: true,
-        description: true,
-      },
-    })
+        description: true
+      }
+    });
     return jsonRes({
       data: {
         templateRepositoryList
       }
-    })
+    });
   } catch (err: any) {
     return jsonRes({
       code: 500,
       error: err
-    })
+    });
   }
-}
\ No newline at end of file
+};
diff --git a/frontend/providers/devbox/app/api/templateRepository/listPrivate/route.ts b/frontend/providers/devbox/app/api/templateRepository/listPrivate/route.ts
index 014ce4911fcf..62a43fe2fcf9 100644
--- a/frontend/providers/devbox/app/api/templateRepository/listPrivate/route.ts
+++ b/frontend/providers/devbox/app/api/templateRepository/listPrivate/route.ts
@@ -1,61 +1,73 @@
-import { Prisma } from '@/prisma/generated/client'
-import { authSessionWithJWT } from '@/services/backend/auth'
-import { jsonRes } from '@/services/backend/response'
-import { devboxDB } from '@/services/db/init'
-import { NextRequest } from 'next/server'
-import { z } from 'zod'
-export const dynamic = 'force-dynamic'
+import { Prisma } from '@/prisma/generated/client';
+import { authSessionWithJWT } from '@/services/backend/auth';
+import { jsonRes } from '@/services/backend/response';
+import { devboxDB } from '@/services/db/init';
+import { NextRequest } from 'next/server';
+import { z } from 'zod';
+export const dynamic = 'force-dynamic';
 export async function GET(req: NextRequest) {
   try {
-    const headerList = req.headers
-    const searchParams = req.nextUrl.searchParams
-    const { payload } = await authSessionWithJWT(headerList)
+    const headerList = req.headers;
+    const searchParams = req.nextUrl.searchParams;
+    const { payload } = await authSessionWithJWT(headerList);
 
-    const search = searchParams.get('search') || ''
-    const page = z.number().int().positive().safeParse(Number(searchParams.get('page'))).data || 1
-    const pageSize = z.number().int().min(1).safeParse(Number(searchParams.get('pageSize'))).data  || 30
+    const search = searchParams.get('search') || '';
+    const page =
+      z
+        .number()
+        .int()
+        .positive()
+        .safeParse(Number(searchParams.get('page'))).data || 1;
+    const pageSize =
+      z
+        .number()
+        .int()
+        .min(1)
+        .safeParse(Number(searchParams.get('pageSize'))).data || 30;
 
-    const queryWhereInput:Prisma.TemplateRepositoryWhereInput= {
+    const queryWhereInput: Prisma.TemplateRepositoryWhereInput = {
       isDeleted: false,
       organizationUid: payload.organizationUid,
-      ...(search ? {
-        name: {
-          contains: search,
-        }
-      } : {})
-    }
+      ...(search
+        ? {
+            name: {
+              contains: search
+            }
+          }
+        : {})
+    };
     const templateRepositoryList = await devboxDB.templateRepository.findMany({
       where: queryWhereInput,
       select: {
         templateRepositoryTags: {
           select: {
-            tag: true,
-          },
+            tag: true
+          }
         },
         templates: {
           where: {
-            isDeleted: false,
+            isDeleted: false
           },
           select: {
             name: true,
-            uid: true,
+            uid: true
           }
         },
         name: true,
         uid: true,
         isPublic: true,
         description: true,
-        iconId: true,
+        iconId: true
       },
       skip: (page - 1) * pageSize,
       take: pageSize,
       orderBy: {
         createdAt: 'desc'
       }
-    })
+    });
     const totalItems = await devboxDB.templateRepository.count({
       where: queryWhereInput
-    })
+    });
 
     return jsonRes({
       data: {
@@ -67,11 +79,11 @@ export async function GET(req: NextRequest) {
           totalPage: Math.ceil(totalItems / pageSize)
         }
       }
-    })
+    });
   } catch (err: any) {
     return jsonRes({
       code: 500,
       error: err
-    })
+    });
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/providers/devbox/app/api/templateRepository/tag/list/route.ts b/frontend/providers/devbox/app/api/templateRepository/tag/list/route.ts
index b41600fe8111..030f4c1bbd58 100644
--- a/frontend/providers/devbox/app/api/templateRepository/tag/list/route.ts
+++ b/frontend/providers/devbox/app/api/templateRepository/tag/list/route.ts
@@ -1,23 +1,22 @@
-import { jsonRes } from '@/services/backend/response'
-import { devboxDB } from '@/services/db/init'
-import { NextRequest } from 'next/server'
-export const dynamic = 'force-dynamic'
+import { jsonRes } from '@/services/backend/response';
+import { devboxDB } from '@/services/db/init';
+import { NextRequest } from 'next/server';
+export const dynamic = 'force-dynamic';
 export async function GET(req: NextRequest) {
   try {
     const tagList = await devboxDB.tag.findMany({
-      where: {
-      },
-    })
+      where: {}
+    });
 
     return jsonRes({
       data: {
         tagList
       }
-    })
+    });
   } catch (err: any) {
     return jsonRes({
       code: 500,
       error: err
-    })
+    });
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/providers/devbox/app/api/templateRepository/template/delete/route.ts b/frontend/providers/devbox/app/api/templateRepository/template/delete/route.ts
index 9360bab7d6c7..973e14ba6de0 100644
--- a/frontend/providers/devbox/app/api/templateRepository/template/delete/route.ts
+++ b/frontend/providers/devbox/app/api/templateRepository/template/delete/route.ts
@@ -1,29 +1,29 @@
-import { authSessionWithJWT } from '@/services/backend/auth'
-import { jsonRes } from '@/services/backend/response'
-import { devboxDB } from '@/services/db/init'
-import { NextRequest } from 'next/server'
-import { z } from 'zod'
+import { authSessionWithJWT } from '@/services/backend/auth';
+import { jsonRes } from '@/services/backend/response';
+import { devboxDB } from '@/services/db/init';
+import { NextRequest } from 'next/server';
+import { z } from 'zod';
 
-export const dynamic = 'force-dynamic'
+export const dynamic = 'force-dynamic';
 
 export async function DELETE(req: NextRequest) {
   try {
-    const headerList = req.headers
-    const { searchParams } = req.nextUrl
-    const idRaw = searchParams.get('uid') as string
-    const result = z.string().uuid().safeParse(idRaw)
-    const { payload } = await authSessionWithJWT(headerList)
+    const headerList = req.headers;
+    const { searchParams } = req.nextUrl;
+    const idRaw = searchParams.get('uid') as string;
+    const result = z.string().uuid().safeParse(idRaw);
+    const { payload } = await authSessionWithJWT(headerList);
     if (!result.success) {
       return jsonRes({
         code: 400,
         error: 'Invalid versionUid'
-      })
+      });
     }
-    const uid = result.data
+    const uid = result.data;
     const template = await devboxDB.template.findUnique({
       where: {
         uid,
-        isDeleted: false,
+        isDeleted: false
       },
       select: {
         templateRepository: {
@@ -37,35 +37,39 @@ export async function DELETE(req: NextRequest) {
           }
         }
       }
-    })
-    if (!template ||
-      !(template.templateRepository.organization.uid === payload.organizationUid
-         && template.templateRepository.organization.isDeleted === false)) {
+    });
+    if (
+      !template ||
+      !(
+        template.templateRepository.organization.uid === payload.organizationUid &&
+        template.templateRepository.organization.isDeleted === false
+      )
+    ) {
       return jsonRes({
         code: 404,
         error: 'template not found'
-      })
+      });
     }
-    const deletedAt = new Date()
+    const deletedAt = new Date();
     await devboxDB.template.update({
       where: {
         uid,
-        isDeleted: false,
+        isDeleted: false
       },
       data: {
         deletedAt,
-        isDeleted: null,
+        isDeleted: null
       }
-    })
+    });
     return jsonRes({
       data: {
         isDeleted: true
       }
-    })
+    });
   } catch (err: any) {
     return jsonRes({
       code: 500,
       error: err
-    })
+    });
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/providers/devbox/app/api/templateRepository/template/getConfig/route.ts b/frontend/providers/devbox/app/api/templateRepository/template/getConfig/route.ts
index 732bcf8949f5..e25b1aa9f8ca 100644
--- a/frontend/providers/devbox/app/api/templateRepository/template/getConfig/route.ts
+++ b/frontend/providers/devbox/app/api/templateRepository/template/getConfig/route.ts
@@ -1,24 +1,25 @@
-import { authSessionWithJWT } from '@/services/backend/auth'
-import { jsonRes } from '@/services/backend/response'
-import { devboxDB } from '@/services/db/init'
-import { NextRequest } from 'next/server'
+import { authSessionWithJWT } from '@/services/backend/auth';
+import { jsonRes } from '@/services/backend/response';
+import { devboxDB } from '@/services/db/init';
+import { getRegionUid } from '@/utils/env';
+import { NextRequest } from 'next/server';
 
-export const dynamic = 'force-dynamic'
+export const dynamic = 'force-dynamic';
 
 export async function GET(req: NextRequest) {
   try {
-    const headerList = req.headers
-    const searchParams = req.nextUrl.searchParams
-    const uid = searchParams.get('uid')
-    const { payload } = await authSessionWithJWT(headerList)
-    if (!uid) return jsonRes({
-      code: 400,
-      error: 'templateUid is required'
-    })
+    const headerList = req.headers;
+    const searchParams = req.nextUrl.searchParams;
+    const uid = searchParams.get('uid');
+    const { payload } = await authSessionWithJWT(headerList);
+    if (!uid)
+      return jsonRes({
+        code: 400,
+        error: 'templateUid is required'
+      });
     const template = await devboxDB.template.findUnique({
       where: {
-        uid,
-        isDeleted: false,
+        uid
       },
       select: {
         config: true,
@@ -32,21 +33,27 @@ export async function GET(req: NextRequest) {
                 isDeleted: true
               }
             },
+            regionUid: true,
             isDeleted: true,
-            isPublic: true,
+            isPublic: true
           }
-        }
+        },
+        isDeleted: true
       }
-    })
-    if (!template ||
-      !(template.templateRepository.organization.uid === payload.organizationUid
-        || template.templateRepository.isPublic === true
-      )
+    });
+    const regionUid = getRegionUid();
+    if (
+      !template ||
+      !(
+        template.templateRepository.organization.uid === payload.organizationUid ||
+        template.templateRepository.isPublic === true
+      ) ||
+      template.templateRepository.regionUid !== regionUid
     ) {
       return jsonRes({
         code: 404,
         error: 'Template is not found'
-      })
+      });
     }
     return jsonRes({
       data: {
@@ -56,11 +63,11 @@ export async function GET(req: NextRequest) {
           name: template.name
         }
       }
-    })
+    });
   } catch (err: any) {
     return jsonRes({
       code: 500,
       error: err
-    })
+    });
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/providers/devbox/app/api/templateRepository/template/list/route.ts b/frontend/providers/devbox/app/api/templateRepository/template/list/route.ts
index 7c8026b88a76..a76b50cc0d4b 100644
--- a/frontend/providers/devbox/app/api/templateRepository/template/list/route.ts
+++ b/frontend/providers/devbox/app/api/templateRepository/template/list/route.ts
@@ -1,29 +1,32 @@
-import { authSessionWithJWT } from '@/services/backend/auth'
-import { jsonRes } from '@/services/backend/response'
-import { devboxDB } from '@/services/db/init'
-import { NextRequest } from 'next/server'
+import { authSessionWithJWT } from '@/services/backend/auth';
+import { jsonRes } from '@/services/backend/response';
+import { devboxDB } from '@/services/db/init';
+import { getRegionUid } from '@/utils/env';
+import { NextRequest } from 'next/server';
 
-export const dynamic = 'force-dynamic'
+export const dynamic = 'force-dynamic';
 
 export async function GET(req: NextRequest) {
   try {
-    const headerList = req.headers
-    const searchParams = req.nextUrl.searchParams
-    const uid = searchParams.get('templateRepositoryUid')
-    const { payload } = await authSessionWithJWT(headerList)
-    if (!uid) return jsonRes({
-      code: 400,
-      error: 'templateRepositoryUid is required'
-    })
+    const headerList = req.headers;
+    const searchParams = req.nextUrl.searchParams;
+    const uid = searchParams.get('templateRepositoryUid');
+    const { payload } = await authSessionWithJWT(headerList);
+    if (!uid)
+      return jsonRes({
+        code: 400,
+        error: 'templateRepositoryUid is required'
+      });
     const templateRepository = await devboxDB.templateRepository.findUnique({
       where: {
         uid,
-        isDeleted: false
+        isDeleted: false,
+        regionUid: getRegionUid()
       },
       select: {
         name: true,
         uid: true,
-        organization:{
+        organization: {
           select: {
             uid: true,
             isDeleted: true
@@ -32,7 +35,7 @@ export async function GET(req: NextRequest) {
         isPublic: true,
         templates: {
           where: {
-            isDeleted: false,
+            isDeleted: false
           },
           select: {
             uid: true,
@@ -40,32 +43,42 @@ export async function GET(req: NextRequest) {
             config: true,
             image: true,
             createdAt: true,
-            updatedAt: true,
+            updatedAt: true
           }
         }
       }
-    })
-    if (templateRepository &&
+    });
+
+    if (!templateRepository) {
+      return jsonRes({
+        data: {
+          templateList: []
+        }
+      });
+    }
+    const templateList = templateRepository.templates;
+    if (
       !(
-         (templateRepository.organization.isDeleted === false 
-         && templateRepository.organization.uid === payload.organizationUid)
-        || templateRepository.isPublic === true
-      )) {
+        (templateRepository.organization.isDeleted === false &&
+          templateRepository.organization.uid === payload.organizationUid) ||
+        templateRepository.isPublic === true
+      )
+    ) {
       return jsonRes({
-        code: 404,
-        error: 'Template is not found'
-      })
+        data: {
+          templateList
+        }
+      });
     }
-    const templateList = templateRepository?.templates || []
     return jsonRes({
       data: {
         templateList
       }
-    })
+    });
   } catch (err: any) {
     return jsonRes({
       code: 500,
       error: err
-    })
+    });
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/providers/devbox/app/api/templateRepository/update/route.ts b/frontend/providers/devbox/app/api/templateRepository/update/route.ts
index fe2a2d5d5432..8571215b1473 100644
--- a/frontend/providers/devbox/app/api/templateRepository/update/route.ts
+++ b/frontend/providers/devbox/app/api/templateRepository/update/route.ts
@@ -1,23 +1,24 @@
-import { TagType } from "@/prisma/generated/client"
-import { authSessionWithJWT } from "@/services/backend/auth"
-import { jsonRes } from "@/services/backend/response"
-import { devboxDB } from "@/services/db/init"
-import { updateTemplateRepositorySchema } from "@/utils/vaildate"
-import { NextRequest } from "next/server"
-import { z } from "zod"
+import { TagType } from '@/prisma/generated/client';
+import { authSessionWithJWT } from '@/services/backend/auth';
+import { jsonRes } from '@/services/backend/response';
+import { devboxDB } from '@/services/db/init';
+import { getRegionUid } from '@/utils/env';
+import { updateTemplateRepositorySchema } from '@/utils/vaildate';
+import { NextRequest } from 'next/server';
+import { z } from 'zod';
 export async function POST(req: NextRequest) {
   try {
-    const headerList = req.headers
-    const queryRaw = await req.json()
-    const imageHub = process.env.REGISTRY_ADDR
+    const headerList = req.headers;
+    const queryRaw = await req.json();
+    const imageHub = process.env.REGISTRY_ADDR;
     if (!imageHub) {
-      console.log("IMAGE_HUB is not set")
+      console.log('IMAGE_HUB is not set');
       return jsonRes({
-        code: 500,
-      })
+        code: 500
+      });
     }
-    const query = updateTemplateRepositorySchema.parse(queryRaw)
-    const { payload} = await authSessionWithJWT(headerList)
+    const query = updateTemplateRepositorySchema.parse(queryRaw);
+    const { payload } = await authSessionWithJWT(headerList);
     const templateRepository = await devboxDB.templateRepository.findUnique({
       where: {
         uid: query.uid,
@@ -36,91 +37,91 @@ export async function POST(req: NextRequest) {
           },
           select: {
             uid: true,
-            name: true,
+            name: true
           }
         }
       }
-    })
+    });
     if (!templateRepository) {
       return jsonRes({
         code: 404,
         error: 'template repository not found'
-      })
+      });
     }
     const officialTagList = await devboxDB.tag.findMany({
       where: {
-        type: TagType.OFFICIAL_CONTENT,
+        type: TagType.OFFICIAL_CONTENT
       },
       select: {
         uid: true
       }
-    })
-    const originalTaglist = templateRepository.templateRepositoryTags
+    });
+    const originalTaglist = templateRepository.templateRepositoryTags;
     const deletedTagList = originalTaglist
       .filter((item) => !query.tagUidList.includes(item.tagUid))
-      .map((item) => item.tagUid)
-    const createdTagList = query.tagUidList
-      .filter((item) =>
-        !originalTaglist.some((tag) => tag.tagUid === item)
-        && !officialTagList.some((tag) => tag.uid === item)
-      )
+      .map((item) => item.tagUid);
+    const createdTagList = query.tagUidList.filter(
+      (item) =>
+        !originalTaglist.some((tag) => tag.tagUid === item) &&
+        !officialTagList.some((tag) => tag.uid === item)
+    );
     const isExist = await devboxDB.templateRepository.findUnique({
       where: {
-        isDeleted_name: {
+        isDeleted_regionUid_name: {
+          regionUid: getRegionUid(),
           name: query.templateRepositoryName,
-          isDeleted: false,
+          isDeleted: false
         }
       }
-    })
+    });
     if (isExist && isExist.uid !== query.uid) {
       return jsonRes({
         code: 409,
         error: 'template repository name already exists'
-      })
+      });
     }
-    await devboxDB.$transaction(async tx => {
+    await devboxDB.$transaction(async (tx) => {
       await tx.templateRepository.update({
         where: {
           organizationUid: payload.organizationUid,
-          uid: query.uid,
+          uid: query.uid
         },
         data: {
           description: query.description,
           name: query.templateRepositoryName,
           isPublic: query.isPublic
         }
-      })
+      });
       await tx.templateRepositoryTag.deleteMany({
         where: {
           templateRepositoryUid: query.uid,
           tagUid: {
             in: deletedTagList
           }
-        },
-      })
+        }
+      });
       await tx.templateRepositoryTag.createMany({
         data: createdTagList.map((tagUid) => ({
           tagUid,
           templateRepositoryUid: query.uid
         }))
-      })
-    })
+      });
+    });
     return jsonRes({
       data: {
-        success: true,
+        success: true
       }
-    })
+    });
   } catch (err: any) {
-
     if (err instanceof z.ZodError) {
       return jsonRes({
         code: 400,
         error: err.message
-      })
+      });
     }
     return jsonRes({
       code: 500,
       error: err
-    })
+    });
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/providers/devbox/app/api/templateRepository/withTemplate/create/route.ts b/frontend/providers/devbox/app/api/templateRepository/withTemplate/create/route.ts
index 7e611f4675b3..c285510702b7 100644
--- a/frontend/providers/devbox/app/api/templateRepository/withTemplate/create/route.ts
+++ b/frontend/providers/devbox/app/api/templateRepository/withTemplate/create/route.ts
@@ -1,31 +1,32 @@
-import { TagType, TemplateRepositoryKind } from "@/prisma/generated/client"
-import { authSessionWithJWT } from "@/services/backend/auth"
-import { getK8s } from "@/services/backend/kubernetes"
-import { jsonRes } from "@/services/backend/response"
-import { devboxDB } from "@/services/db/init"
-import { ERROR_ENUM } from "@/services/error"
-import { retagSvcClient } from "@/services/retag"
-import { KBDevboxReleaseType, KBDevboxTypeV2 } from "@/types/k8s"
-import { createTemplateRepositorySchema } from "@/utils/vaildate"
-import { NextRequest } from "next/server"
-import { z } from "zod"
+import { TagType, TemplateRepositoryKind } from '@/prisma/generated/client';
+import { authSessionWithJWT } from '@/services/backend/auth';
+import { getK8s } from '@/services/backend/kubernetes';
+import { jsonRes } from '@/services/backend/response';
+import { devboxDB } from '@/services/db/init';
+import { ERROR_ENUM } from '@/services/error';
+import { retagSvcClient } from '@/services/retag';
+import { KBDevboxReleaseType, KBDevboxTypeV2 } from '@/types/k8s';
+import { getRegionUid } from '@/utils/env';
+import { createTemplateRepositorySchema } from '@/utils/vaildate';
+import { NextRequest } from 'next/server';
+import { z } from 'zod';
 // 不带 templateRepositoryUid 就是 create
 export async function POST(req: NextRequest) {
   try {
-    const headerList = req.headers
-    const queryRaw = await req.json()
-    const imageHub = process.env.REGISTRY_ADDR
+    const headerList = req.headers;
+    const queryRaw = await req.json();
+    const imageHub = process.env.REGISTRY_ADDR;
     if (!imageHub) {
-      console.log("IMAGE_HUB is not set")
+      console.log('IMAGE_HUB is not set');
       return jsonRes({
-        code: 500,
-      })
+        code: 500
+      });
     }
-    const query = createTemplateRepositorySchema.parse(queryRaw)
-    const { kubeConfig, payload, token } = await authSessionWithJWT(headerList)
+    const query = createTemplateRepositorySchema.parse(queryRaw);
+    const { kubeConfig, payload, token } = await authSessionWithJWT(headerList);
     const { namespace, k8sCustomObjects } = await getK8s({
       kubeconfig: kubeConfig
-    })
+    });
     // get devbox release cr !todo
     const { body: releaseBody } = (await k8sCustomObjects.getNamespacedCustomObject(
       'devbox.sealos.io',
@@ -33,13 +34,15 @@ export async function POST(req: NextRequest) {
       namespace,
       'devboxreleases',
       query.devboxReleaseName
-    )) as { body: KBDevboxReleaseType }
-    const devboxName = releaseBody.metadata.ownerReferences.find((item) => item.apiVersion === 'devbox.sealos.io/v1alpha1')?.name
+    )) as { body: KBDevboxReleaseType };
+    const devboxName = releaseBody.metadata.ownerReferences.find(
+      (item) => item.apiVersion === 'devbox.sealos.io/v1alpha1'
+    )?.name;
     if (!devboxName) {
       return jsonRes({
         code: 409,
         error: 'devboxName not found'
-      })
+      });
     }
     const { body: devboxBody } = (await k8sCustomObjects.getNamespacedCustomObject(
       'devbox.sealos.io',
@@ -47,61 +50,62 @@ export async function POST(req: NextRequest) {
       namespace,
       'devboxes',
       devboxName
-    )) as { body: KBDevboxTypeV2 }
+    )) as { body: KBDevboxTypeV2 };
 
-    const devboxReleaseImage = releaseBody.status.originalImage
+    const devboxReleaseImage = releaseBody.status.originalImage;
     if (!devboxReleaseImage) {
       return jsonRes({
         code: 409,
         error: 'devboxReleaseImage not found'
-      })
+      });
     }
     const isExist = await devboxDB.templateRepository.findUnique({
       where: {
-        isDeleted_name: {
+        isDeleted_regionUid_name: {
+          regionUid: getRegionUid(),
           name: query.templateRepositoryName,
           isDeleted: false
-        },
+        }
       },
       select: {
-        uid: true,
+        uid: true
       }
-    })
+    });
     if (isExist) {
       return jsonRes({
         code: 409,
         error: 'templateRepository name already exists'
-      })
+      });
     }
     const organization = await devboxDB.organization.findUnique({
       where: {
         uid: payload.organizationUid,
         isDeleted: false
-      },
-    })
+      }
+    });
     if (!organization) {
-      throw Error(ERROR_ENUM.unAuthorization)
+      throw Error(ERROR_ENUM.unAuthorization);
     }
-    const targetImage = `${imageHub}/${organization.id}/${query.templateRepositoryName}:${query.version}`
-    const originalImage = `${imageHub}/${devboxReleaseImage}`
+    const targetImage = `${imageHub}/${organization.id}/${query.templateRepositoryName}:${query.version}`;
+    const originalImage = `${imageHub}/${devboxReleaseImage}`;
     const retagbody = {
       original: originalImage,
-      target: targetImage,
-    }
+      target: targetImage
+    };
     const retagResult = await retagSvcClient.post('/tag', retagbody, {
       headers: {
-        'Authorization': token
+        Authorization: token
       }
-    })
+    });
     if (retagResult.status !== 200) {
-      console.log('retagResult', retagResult)
-      throw Error('retag failed')
+      console.log('retagResult', retagResult);
+      throw Error('retag failed');
     }
     // invoke retag service !todo
     // suported deleted because devbox instance of deleted template
     const origionalTemplate = await devboxDB.template.findUnique({
       where: {
-        uid: devboxBody.spec.templateID,
+        uid: devboxBody.spec.templateID
       },
       select: {
         templateRepository: {
@@ -110,7 +114,7 @@ export async function POST(req: NextRequest) {
           }
         }
       }
-    })
+    });
     const officialTagList = await devboxDB.tag.findMany({
       where: {
         type: TagType.OFFICIAL_CONTENT
@@ -118,15 +122,14 @@ export async function POST(req: NextRequest) {
       select: {
         uid: true
       }
-    })
+    });
     const result = await devboxDB.templateRepository.create({
       data: {
         description: query.description,
         templateRepositoryTags: {
           createMany: {
-            data: query
-              .tagUidList
-              .filter(item => !officialTagList.some(tag => tag.uid === item))
+            data: query.tagUidList
+              .filter((item) => !officialTagList.some((tag) => tag.uid === item))
               .map((uid) => ({ tagUid: uid }))
           }
         },
@@ -136,9 +139,10 @@ export async function POST(req: NextRequest) {
             image: targetImage,
             name: query.version,
             devboxReleaseImage,
-            parentUid: devboxBody.spec.templateID,
+            parentUid: devboxBody.spec.templateID
           }
         },
+        regionUid: getRegionUid(),
         organizationUid: payload.organizationUid,
         iconId: origionalTemplate?.templateRepository.iconId,
         kind: TemplateRepositoryKind.CUSTOM,
@@ -148,26 +152,25 @@ export async function POST(req: NextRequest) {
     });
     return jsonRes({
       data: {
-        success: true,
+        success: true
       }
-    })
+    });
   } catch (err: any) {
-
     if (err instanceof z.ZodError) {
       return jsonRes({
         code: 400,
         error: err.message
-      })
+      });
     }
     if (err instanceof Error && err.message === 'Runtime not found') {
       return jsonRes({
         code: 404,
         error: err.message
-      })
+      });
     }
     return jsonRes({
       code: 500,
       error: err
-    })
+    });
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/providers/devbox/app/api/templateRepository/withTemplate/update/route.ts b/frontend/providers/devbox/app/api/templateRepository/withTemplate/update/route.ts
index 44c00157fc55..b5ff7fc776bd 100644
--- a/frontend/providers/devbox/app/api/templateRepository/withTemplate/update/route.ts
+++ b/frontend/providers/devbox/app/api/templateRepository/withTemplate/update/route.ts
@@ -1,34 +1,34 @@
-import { TagType } from '@/prisma/generated/client'
-import { authSessionWithJWT } from '@/services/backend/auth'
-import { getK8s } from '@/services/backend/kubernetes'
-import { jsonRes } from '@/services/backend/response'
-import { devboxDB } from '@/services/db/init'
-import { ERROR_ENUM } from '@/services/error'
-import { retagSvcClient } from '@/services/retag'
-import { KBDevboxReleaseType, KBDevboxTypeV2 } from '@/types/k8s'
-import { updateTemplateSchema } from '@/utils/vaildate'
-import { NextRequest } from 'next/server'
-import { z } from 'zod'
-
-export const dynamic = 'force-dynamic'
+import { TagType } from '@/prisma/generated/client';
+import { authSessionWithJWT } from '@/services/backend/auth';
+import { getK8s } from '@/services/backend/kubernetes';
+import { jsonRes } from '@/services/backend/response';
+import { devboxDB } from '@/services/db/init';
+import { ERROR_ENUM } from '@/services/error';
+import { retagSvcClient } from '@/services/retag';
+import { KBDevboxReleaseType, KBDevboxTypeV2 } from '@/types/k8s';
+import { getRegionUid } from '@/utils/env';
+import { updateTemplateSchema } from '@/utils/vaildate';
+import { NextRequest } from 'next/server';
+import { z } from 'zod';
 
+export const dynamic = 'force-dynamic';
 
 export async function POST(req: NextRequest) {
   try {
-    const headerList = req.headers
-    const queryRaw = await req.json()
-    const imageHub = process.env.REGISTRY_ADDR
+    const headerList = req.headers;
+    const queryRaw = await req.json();
+    const imageHub = process.env.REGISTRY_ADDR;
     if (!imageHub) {
-      console.log("REGISTRY_ADDR is not set")
+      console.log('REGISTRY_ADDR is not set');
       return jsonRes({
-        code: 500,
-      })
+        code: 500
+      });
     }
-    const query = updateTemplateSchema.parse(queryRaw)
-    const { kubeConfig, payload, token } = await authSessionWithJWT(headerList)
+    const query = updateTemplateSchema.parse(queryRaw);
+    const { kubeConfig, payload, token } = await authSessionWithJWT(headerList);
     const { namespace, k8sCustomObjects } = await getK8s({
       kubeconfig: kubeConfig
-    })
+    });
     // get devbox release cr !todo
     const { body: releaseBody } = (await k8sCustomObjects.getNamespacedCustomObject(
       'devbox.sealos.io',
@@ -36,13 +36,15 @@ export async function POST(req: NextRequest) {
       namespace,
       'devboxreleases',
       query.devboxReleaseName
-    )) as { body: KBDevboxReleaseType }
-    const devboxName = releaseBody.metadata.ownerReferences.find((item) => item.apiVersion === 'devbox.sealos.io/v1alpha1')?.name
+    )) as { body: KBDevboxReleaseType };
+    const devboxName = releaseBody.metadata.ownerReferences.find(
+      (item) => item.apiVersion === 'devbox.sealos.io/v1alpha1'
+    )?.name;
     if (!devboxName) {
       return jsonRes({
         code: 409,
         error: 'devboxName not found'
-      })
+      });
     }
     const { body: devboxBody } = (await k8sCustomObjects.getNamespacedCustomObject(
       'devbox.sealos.io',
@@ -50,31 +52,33 @@ export async function POST(req: NextRequest) {
       namespace,
       'devboxes',
       devboxName
-    )) as { body: KBDevboxTypeV2 }
-    const devboxReleaseImage = releaseBody.status.originalImage
+    )) as { body: KBDevboxTypeV2 };
+    const devboxReleaseImage = releaseBody.status.originalImage;
     if (!devboxReleaseImage) {
       return jsonRes({
         code: 409,
         error: 'devboxReleaseImage not found'
-      })
+      });
     }
     const organization = await devboxDB.organization.findUnique({
       where: {
         uid: payload.organizationUid,
-        isDeleted: false,
+        isDeleted: false
       },
       select: {
         uid: true,
         id: true
       }
-    })
+    });
     if (!organization) {
-      throw Error(ERROR_ENUM.unAuthorization)
+      throw Error(ERROR_ENUM.unAuthorization);
     }
     const templateRepository = await devboxDB.templateRepository.findUnique({
       where: {
+        isDeleted: false,
         uid: query.templateRepositoryUid,
-        organizationUid: payload.organizationUid,
+        regionUid: getRegionUid(),
+        organizationUid: payload.organizationUid
       },
       select: {
         uid: true,
@@ -86,82 +90,87 @@ export async function POST(req: NextRequest) {
         },
         templates: true
       }
-    })
+    });
     if (!templateRepository) {
       return jsonRes({
         code: 409,
         error: 'templateRepository not found'
-      })
+      });
     }
-    const tagretImage = `${imageHub}/${organization.id}/${templateRepository.name}:${query.version}`
-    const originalImage = `${imageHub}/${devboxReleaseImage}`
+    const tagretImage = `${imageHub}/${organization.id}/${templateRepository.name}:${query.version}`;
+    const originalImage = `${imageHub}/${devboxReleaseImage}`;
     const retagbody = {
       original: originalImage,
-      target: tagretImage,
-    }
+      target: tagretImage
+    };
     const retagResult = await retagSvcClient.post('/tag', retagbody, {
       headers: {
-        'Authorization': token
+        Authorization: token
       }
-    })
+    });
     if (retagResult.status !== 200) {
-      throw Error('retag failed')
+      throw Error('retag failed');
     }
     const officialTagList = await devboxDB.tag.findMany({
       where: {
         type: TagType.OFFICIAL_CONTENT
       },
-      select:{
+      select: {
         uid: true
       }
-    })
-    const originalTaglist = templateRepository.templateRepositoryTags
+    });
+    const originalTaglist = templateRepository.templateRepositoryTags;
     const deletedTagList = originalTaglist
       .filter((item) => !query.tagUidList.includes(item.tagUid))
-      .map((item) => item.tagUid)
-    const createdTagList = query.tagUidList
-      .filter((item) => !originalTaglist.some((tag) => tag.tagUid === item) &&
-        !officialTagList.some((tag) => tag.uid === item))
-    const origionalTemplate = templateRepository
-      .templates.find((item) => item.name === query.version && item.isDeleted === false)
+      .map((item) => item.tagUid);
+    const createdTagList = query.tagUidList.filter(
+      (item) =>
+        !originalTaglist.some((tag) => tag.tagUid === item) &&
+        !officialTagList.some((tag) => tag.uid === item)
+    );
+    const origionalTemplate = templateRepository.templates.find(
+      (item) => item.name === query.version && item.isDeleted === false
+    );
 
-    // invoke retag service 
-    const result = await devboxDB.$transaction(async tx => {
+    // invoke retag service
+    const result = await devboxDB.$transaction(async (tx) => {
       await tx.templateRepository.update({
         where: {
           organizationUid: organization.uid,
-          uid: templateRepository.uid,
+          regionUid: getRegionUid(),
+          uid: templateRepository.uid
         },
         data: {
-          description: query.description,
+          description: query.description
         }
-      })
+      });
       await tx.templateRepositoryTag.deleteMany({
         where: {
           templateRepositoryUid: query.templateRepositoryUid,
           tagUid: {
             in: deletedTagList
           }
-        },
-      })
+        }
+      });
       await tx.templateRepositoryTag.createMany({
         data: createdTagList.map((tagUid) => ({
           tagUid,
-          templateRepositoryUid: query.templateRepositoryUid,
+          templateRepositoryUid: query.templateRepositoryUid
         }))
-      })
-      const createTemplate = () => tx.template.create({
-        data: {
-          name: query.version,
-          image: tagretImage,
-          devboxReleaseImage: originalImage,
-          config: JSON.stringify(devboxBody.spec.config),
-          templateRepositoryUid: query.templateRepositoryUid,
-          parentUid: origionalTemplate?.uid
-        }
-      })
+      });
+      const createTemplate = () =>
+        tx.template.create({
+          data: {
+            name: query.version,
+            image: tagretImage,
+            devboxReleaseImage: originalImage,
+            config: JSON.stringify(devboxBody.spec.config),
+            templateRepositoryUid: query.templateRepositoryUid,
+            parentUid: origionalTemplate?.uid
+          }
+        });
       if (!origionalTemplate) {
-        await createTemplate()
+        await createTemplate();
       } else {
         await tx.template.update({
           where: {
@@ -172,32 +181,31 @@ export async function POST(req: NextRequest) {
             deletedAt: new Date(),
             isDeleted: null
           }
-        })
-        await createTemplate()
+        });
+        await createTemplate();
       }
-    })
+    });
     return jsonRes({
       data: {
-        success: true,
+        success: true
       }
-    })
+    });
   } catch (err: any) {
-
     if (err instanceof z.ZodError) {
       return jsonRes({
         code: 400,
         error: err.message
-      })
+      });
     }
     if (err instanceof Error && err.message === 'Runtime not found') {
       return jsonRes({
         code: 404,
         error: err.message
-      })
+      });
     }
     return jsonRes({
       code: 500,
       error: err
-    })
+    });
   }
 }
diff --git a/frontend/providers/devbox/app/api/updateDevbox/route.ts b/frontend/providers/devbox/app/api/updateDevbox/route.ts
index 647c144e0b15..b5178bbccc33 100644
--- a/frontend/providers/devbox/app/api/updateDevbox/route.ts
+++ b/frontend/providers/devbox/app/api/updateDevbox/route.ts
@@ -1,45 +1,45 @@
-import { NextRequest } from 'next/server'
-import { infoLog } from 'sealos-desktop-sdk'
-import { PatchUtils } from '@kubernetes/client-node'
+import { NextRequest } from 'next/server';
+import { infoLog } from 'sealos-desktop-sdk';
+import { PatchUtils } from '@kubernetes/client-node';
 
-import { YamlKindEnum } from '@/constants/devbox'
-import { jsonRes } from '@/services/backend/response'
-import { authSession } from '@/services/backend/auth'
-import { getK8s } from '@/services/backend/kubernetes'
-import type { DevboxPatchPropsType } from '@/types/devbox'
+import { YamlKindEnum } from '@/constants/devbox';
+import { jsonRes } from '@/services/backend/response';
+import { authSession } from '@/services/backend/auth';
+import { getK8s } from '@/services/backend/kubernetes';
+import type { DevboxPatchPropsType } from '@/types/devbox';
 
-export const dynamic = 'force-dynamic'
+export const dynamic = 'force-dynamic';
 
 export async function POST(req: NextRequest) {
   try {
     const { patch, devboxName } = (await req.json()) as {
-      patch: DevboxPatchPropsType
-      devboxName: string
-    }
+      patch: DevboxPatchPropsType;
+      devboxName: string;
+    };
     if (!patch || patch.length === 0 || !devboxName) {
       return jsonRes({
         code: 500,
         error: 'params error'
-      })
+      });
     }
 
-    const headerList = req.headers
+    const headerList = req.headers;
 
     const { applyYamlList, k8sCore, k8sNetworkingApp, k8sCustomObjects, namespace } = await getK8s({
       kubeconfig: await authSession(headerList)
-    })
+    });
 
     const crMap: Record<
       `${YamlKindEnum}`,
       {
-        patch: (jsonPatch: Object) => Promise<any>
-        delete: (name: string) => Promise<any>
+        patch: (jsonPatch: Object) => Promise<any>;
+        delete: (name: string) => Promise<any>;
       }
     > = {
       [YamlKindEnum.Devbox]: {
         patch: (jsonPatch: Object) => {
           // @ts-ignore
-          const name = jsonPatch?.metadata?.name
+          const name = jsonPatch?.metadata?.name;
           return k8sCustomObjects.patchNamespacedCustomObject(
             'devbox.sealos.io',
             'v1alpha1',
@@ -51,7 +51,7 @@ export async function POST(req: NextRequest) {
             undefined,
             undefined,
             { headers: { 'Content-type': PatchUtils.PATCH_FORMAT_JSON_MERGE_PATCH } }
-          )
+          );
         },
         delete: (name) =>
           k8sCustomObjects.deleteNamespacedCustomObject(
@@ -85,7 +85,7 @@ export async function POST(req: NextRequest) {
       [YamlKindEnum.Issuer]: {
         patch: (jsonPatch: Object) => {
           // @ts-ignore
-          const name = jsonPatch?.metadata?.name
+          const name = jsonPatch?.metadata?.name;
           return k8sCustomObjects.patchNamespacedCustomObject(
             'cert-manager.io',
             'v1',
@@ -97,7 +97,7 @@ export async function POST(req: NextRequest) {
             undefined,
             undefined,
             { headers: { 'Content-type': PatchUtils.PATCH_FORMAT_JSON_MERGE_PATCH } }
-          )
+          );
         },
         delete: (name) =>
           k8sCustomObjects.deleteNamespacedCustomObject(
@@ -111,7 +111,7 @@ export async function POST(req: NextRequest) {
       [YamlKindEnum.Certificate]: {
         patch: (jsonPatch: Object) => {
           // @ts-ignore
-          const name = jsonPatch?.metadata?.name
+          const name = jsonPatch?.metadata?.name;
           return k8sCustomObjects.patchNamespacedCustomObject(
             'cert-manager.io',
             'v1',
@@ -123,7 +123,7 @@ export async function POST(req: NextRequest) {
             undefined,
             undefined,
             { headers: { 'Content-type': PatchUtils.PATCH_FORMAT_JSON_MERGE_PATCH } }
-          )
+          );
         },
         delete: (name) =>
           k8sCustomObjects.deleteNamespacedCustomObject(
@@ -134,51 +134,51 @@ export async function POST(req: NextRequest) {
             name
           )
       }
-    }
+    };
 
     // patch
     await Promise.all(
       patch.map((item) => {
-        const cr = crMap[item.kind]
+        const cr = crMap[item.kind];
         if (!cr || item.type !== 'patch' || !item.value?.metadata) {
-          return
+          return;
         }
-        infoLog('patch cr', { kind: item.kind, name: item.value?.metadata?.name })
-        return cr.patch(item.value)
+        infoLog('patch cr', { kind: item.kind, name: item.value?.metadata?.name });
+        return cr.patch(item.value);
       })
-    )
+    );
 
     // create
     const createYamlList = patch
       .map((item) => {
-        const cr = crMap[item.kind]
+        const cr = crMap[item.kind];
         if (!cr || item.type !== 'create') {
-          return
+          return;
         }
-        return item.value
+        return item.value;
       })
-      .filter((item) => item)
-    await applyYamlList(createYamlList as string[], 'create')
+      .filter((item) => item);
+    await applyYamlList(createYamlList as string[], 'create');
 
     // delete
     await Promise.all(
       patch.map((item) => {
-        const cr = crMap[item.kind]
+        const cr = crMap[item.kind];
         if (!cr || item.type !== 'delete' || !item?.name) {
-          return
+          return;
         }
-        infoLog('delete cr', { kind: item.kind, name: item?.name })
-        return cr.delete(item.name)
+        infoLog('delete cr', { kind: item.kind, name: item?.name });
+        return cr.delete(item.name);
       })
-    )
+    );
 
     return jsonRes({
       data: 'success update devbox'
-    })
+    });
   } catch (err: any) {
     return jsonRes({
       code: 500,
       error: err
-    })
+    });
   }
 }
diff --git a/frontend/providers/devbox/app/api/v1/getDBSecretList/route.ts b/frontend/providers/devbox/app/api/v1/getDBSecretList/route.ts
index 04fa4bad6e53..8159222c307f 100644
--- a/frontend/providers/devbox/app/api/v1/getDBSecretList/route.ts
+++ b/frontend/providers/devbox/app/api/v1/getDBSecretList/route.ts
@@ -1,26 +1,26 @@
-import { getPayloadWithoutVerification, verifyToken } from '@/services/backend/auth'
-import { getK8s } from '@/services/backend/kubernetes'
-import { jsonRes } from '@/services/backend/response'
-import type { DBType } from '@/types/db'
-import { DBTypeEnum } from '@/constants/db'
-import { NextRequest } from 'next/server'
-import { KbPgClusterType } from '@/types/cluster'
-import { adaptDBListItem } from '@/utils/adapt'
+import { getPayloadWithoutVerification, verifyToken } from '@/services/backend/auth';
+import { getK8s } from '@/services/backend/kubernetes';
+import { jsonRes } from '@/services/backend/response';
+import type { DBType } from '@/types/db';
+import { DBTypeEnum } from '@/constants/db';
+import { NextRequest } from 'next/server';
+import { KbPgClusterType } from '@/types/cluster';
+import { adaptDBListItem } from '@/utils/adapt';
 
 export type SecretResponse = {
-  username: string
-  password: string
-  host: string
-  port: string
-  connection: string
-}
+  username: string;
+  password: string;
+  host: string;
+  port: string;
+  connection: string;
+};
 
 const base = {
   passwordKey: 'password',
   usernameKey: 'username',
   portKey: 'port',
   hostKey: 'host'
-}
+};
 
 const dbTypeMap = {
   [DBTypeEnum.postgresql]: {
@@ -63,7 +63,7 @@ const dbTypeMap = {
     hostKey: 'host',
     connectKey: 'milvus'
   }
-}
+};
 
 const buildConnectionInfo = (
   dbType: DBType,
@@ -76,56 +76,56 @@ const buildConnectionInfo = (
   if (dbTypeMap[dbType].connectKey === 'milvus') {
     return {
       connection: `${host}:${port}`
-    }
+    };
   } else if (dbTypeMap[dbType].connectKey === 'kafka') {
-    const kafkaHost = port.split(':')[0].replace('-server', '-broker')
-    const kafkaPort = port.split(':')[1]
-    const host = kafkaHost + '.' + namespace + '.svc'
+    const kafkaHost = port.split(':')[0].replace('-server', '-broker');
+    const kafkaPort = port.split(':')[1];
+    const host = kafkaHost + '.' + namespace + '.svc';
 
     return {
       host,
       port: kafkaPort,
       connection: `${host}:${kafkaPort}`
-    }
+    };
   } else {
     return {
       connection: `${dbTypeMap[dbType].connectKey}://${username}:${password}@${host}:${port}`
-    }
+    };
   }
-}
+};
 
-export const dynamic = 'force-dynamic'
+export const dynamic = 'force-dynamic';
 
 export async function GET(req: NextRequest) {
   try {
-    const { payload, token } = getPayloadWithoutVerification(req.headers)
+    const { payload, token } = getPayloadWithoutVerification(req.headers);
     if (!payload || !token) {
       return jsonRes({
         code: 401,
         error: 'Unauthorized'
-      })
+      });
     }
-    const devboxName = payload.devboxName
-    const namespace = payload.namespace
+    const devboxName = payload.devboxName;
+    const namespace = payload.namespace;
 
     const { k8sCore, k8sCustomObjects } = await getK8s({
       kubeconfig:
         process.env.NODE_ENV === 'development' ? process.env.NEXT_PUBLIC_MOCK_USER || '' : '',
       useDefaultConfig: process.env.NODE_ENV !== 'development'
-    })
+    });
 
-    const response = await k8sCore.readNamespacedSecret(devboxName, namespace)
+    const response = await k8sCore.readNamespacedSecret(devboxName, namespace);
 
     const jwtSecret = Buffer.from(
       response.body.data?.['SEALOS_DEVBOX_JWT_SECRET'] as string,
       'base64'
-    ).toString('utf-8')
+    ).toString('utf-8');
 
     if (!verifyToken(token, jwtSecret)) {
       return jsonRes({
         code: 401,
         error: 'Unauthorized'
-      })
+      });
     }
 
     const clustersResult = await k8sCustomObjects.listNamespacedCustomObject(
@@ -133,48 +133,48 @@ export async function GET(req: NextRequest) {
       'v1alpha1',
       namespace,
       'clusters'
-    )
+    );
     const clusters = (clustersResult.body as { items: KbPgClusterType[] }).items.map(
       adaptDBListItem
-    )
+    );
 
     const dbList = clusters.map(async (cluster) => {
-      const dbName = cluster.name
-      const dbType = cluster.dbType
-      const secretName = dbName + '-conn-credential'
+      const dbName = cluster.name;
+      const dbType = cluster.dbType;
+      const secretName = dbName + '-conn-credential';
 
-      const secret = await k8sCore.readNamespacedSecret(secretName, namespace)
+      const secret = await k8sCore.readNamespacedSecret(secretName, namespace);
 
       if (!secret.body?.data) {
         return jsonRes({
           code: 500,
           message: 'secret is empty'
-        })
+        });
       }
 
       const username = Buffer.from(
         secret.body.data[dbTypeMap[dbType].usernameKey] || '',
         'base64'
-      ).toString('utf-8')
+      ).toString('utf-8');
 
       const password = Buffer.from(
         secret.body.data[dbTypeMap[dbType].passwordKey] || '',
         'base64'
-      ).toString('utf-8')
+      ).toString('utf-8');
 
       const hostKey = Buffer.from(
         secret.body.data[dbTypeMap[dbType].hostKey] || '',
         'base64'
-      ).toString('utf-8')
+      ).toString('utf-8');
 
-      const host = hostKey.includes('.svc') ? hostKey : hostKey + `.${namespace}.svc`
+      const host = hostKey.includes('.svc') ? hostKey : hostKey + `.${namespace}.svc`;
 
       const port = Buffer.from(
         secret.body.data[dbTypeMap[dbType].portKey] || '',
         'base64'
-      ).toString('utf-8')
+      ).toString('utf-8');
 
-      const connectionInfo = buildConnectionInfo(dbType, username, password, host, port, namespace)
+      const connectionInfo = buildConnectionInfo(dbType, username, password, host, port, namespace);
 
       const data = {
         dbName,
@@ -184,24 +184,22 @@ export async function GET(req: NextRequest) {
         host,
         port,
         ...connectionInfo
-      }
-
-      return data
-    })
+      };
 
-    const dbListResult = await Promise.all(dbList)
+      return data;
+    });
 
-    console.log('dbListResult', dbListResult)
+    const dbListResult = await Promise.all(dbList);
 
     return jsonRes({
       data: {
         dbList: dbListResult
       }
-    })
+    });
   } catch (err: any) {
     return jsonRes({
       code: 500,
       error: err
-    })
+    });
   }
 }
diff --git a/frontend/providers/devbox/app/api/v1/getDevboxDetail/route.ts b/frontend/providers/devbox/app/api/v1/getDevboxDetail/route.ts
index 90ee4298bc51..2e0ae59f02d6 100644
--- a/frontend/providers/devbox/app/api/v1/getDevboxDetail/route.ts
+++ b/frontend/providers/devbox/app/api/v1/getDevboxDetail/route.ts
@@ -1,71 +1,71 @@
-import { NextRequest } from 'next/server'
+import { NextRequest } from 'next/server';
 
-import { devboxStatusMap } from '@/constants/devbox'
-import { getPayloadWithoutVerification, verifyToken } from '@/services/backend/auth'
-import { getK8s } from '@/services/backend/kubernetes'
-import { jsonRes } from '@/services/backend/response'
-import { KBDevboxTypeV2 } from '@/types/k8s'
+import { devboxStatusMap } from '@/constants/devbox';
+import { getPayloadWithoutVerification, verifyToken } from '@/services/backend/auth';
+import { getK8s } from '@/services/backend/kubernetes';
+import { jsonRes } from '@/services/backend/response';
+import { KBDevboxTypeV2 } from '@/types/k8s';
 
-export const dynamic = 'force-dynamic'
+export const dynamic = 'force-dynamic';
 
 export async function GET(req: NextRequest) {
   try {
-    const { payload, token } = getPayloadWithoutVerification(req.headers)
+    const { payload, token } = getPayloadWithoutVerification(req.headers);
     if (!payload || !token) {
       return jsonRes({
         code: 401,
         error: 'Unauthorized'
-      })
+      });
     }
-    const devboxName = payload.devboxName
-    const namespace = payload.namespace
+    const devboxName = payload.devboxName;
+    const namespace = payload.namespace;
 
     const { k8sCore, k8sCustomObjects } = await getK8s({
       kubeconfig:
         process.env.NODE_ENV === 'development' ? process.env.NEXT_PUBLIC_MOCK_USER || '' : '',
       useDefaultConfig: process.env.NODE_ENV !== 'development'
-    })
+    });
 
-    const response = await k8sCore.readNamespacedSecret(devboxName, namespace)
+    const response = await k8sCore.readNamespacedSecret(devboxName, namespace);
 
     const jwtSecret = Buffer.from(
       response.body.data?.['SEALOS_DEVBOX_JWT_SECRET'] as string,
       'base64'
-    ).toString('utf-8')
+    ).toString('utf-8');
 
     if (!verifyToken(token, jwtSecret)) {
       return jsonRes({
         code: 401,
         error: 'Unauthorized'
-      })
+      });
     }
 
-    const { body } = await k8sCustomObjects.getNamespacedCustomObject(
+    const { body } = (await k8sCustomObjects.getNamespacedCustomObject(
       'devbox.sealos.io',
       'v1alpha1',
       namespace,
       'devboxes',
       devboxName
-    ) as {
-      body: KBDevboxTypeV2
-    }
+    )) as {
+      body: KBDevboxTypeV2;
+    };
 
     const devbox = {
       status:
-        body.status.phase && devboxStatusMap[body.status.phase]
+        body.status?.phase && devboxStatusMap[body.status.phase]
           ? devboxStatusMap[body.status.phase]
-          : devboxStatusMap.Error,
-    }
+          : devboxStatusMap.Error
+    };
 
     return jsonRes({
       data: {
         devbox
       }
-    })
+    });
   } catch (err: any) {
     return jsonRes({
       code: 500,
       error: err?.body || err
-    })
+    });
   }
 }
diff --git a/frontend/providers/devbox/app/api/v1/getNetworkList/route.ts b/frontend/providers/devbox/app/api/v1/getNetworkList/route.ts
index 92ee9a5fb53e..d1f266c8ea3c 100644
--- a/frontend/providers/devbox/app/api/v1/getNetworkList/route.ts
+++ b/frontend/providers/devbox/app/api/v1/getNetworkList/route.ts
@@ -1,43 +1,43 @@
-import { NextRequest } from 'next/server'
+import { NextRequest } from 'next/server';
 
-import { devboxKey } from '@/constants/devbox'
-import { getPayloadWithoutVerification, verifyToken } from '@/services/backend/auth'
-import { getK8s } from '@/services/backend/kubernetes'
-import { jsonRes } from '@/services/backend/response'
-import { adaptIngressListItem } from '@/utils/adapt'
+import { devboxKey } from '@/constants/devbox';
+import { getPayloadWithoutVerification, verifyToken } from '@/services/backend/auth';
+import { getK8s } from '@/services/backend/kubernetes';
+import { jsonRes } from '@/services/backend/response';
+import { adaptIngressListItem } from '@/utils/adapt';
 
-export const dynamic = 'force-dynamic'
+export const dynamic = 'force-dynamic';
 
 export async function GET(req: NextRequest) {
   try {
-    const { payload, token } = getPayloadWithoutVerification(req.headers)
+    const { payload, token } = getPayloadWithoutVerification(req.headers);
     if (!payload || !token) {
       return jsonRes({
         code: 401,
         error: 'Unauthorized'
-      })
+      });
     }
-    const devboxName = payload.devboxName
-    const namespace = payload.namespace
+    const devboxName = payload.devboxName;
+    const namespace = payload.namespace;
 
     const { k8sCore, k8sNetworkingApp } = await getK8s({
       kubeconfig:
         process.env.NODE_ENV === 'development' ? process.env.NEXT_PUBLIC_MOCK_USER || '' : '',
       useDefaultConfig: process.env.NODE_ENV !== 'development'
-    })
+    });
 
-    const response = await k8sCore.readNamespacedSecret(devboxName, namespace)
+    const response = await k8sCore.readNamespacedSecret(devboxName, namespace);
 
     const jwtSecret = Buffer.from(
       response.body.data?.['SEALOS_DEVBOX_JWT_SECRET'] as string,
       'base64'
-    ).toString('utf-8')
+    ).toString('utf-8');
 
     if (!verifyToken(token, jwtSecret)) {
       return jsonRes({
         code: 401,
         error: 'Unauthorized'
-      })
+      });
     }
 
     const ingressesResult = await k8sNetworkingApp.listNamespacedIngress(
@@ -47,19 +47,19 @@ export async function GET(req: NextRequest) {
       undefined,
       undefined,
       `${devboxKey}=${devboxName}`
-    )
+    );
 
-    const networks = ingressesResult.body.items.map(adaptIngressListItem)
+    const networks = ingressesResult.body.items.map(adaptIngressListItem);
 
     return jsonRes({
       data: {
         networks
       }
-    })
+    });
   } catch (err: any) {
     return jsonRes({
       code: 500,
       error: err?.body || err
-    })
+    });
   }
 }
diff --git a/frontend/providers/devbox/components/AdvancedTable.tsx b/frontend/providers/devbox/components/AdvancedTable.tsx
new file mode 100644
index 000000000000..d5d3cb5db3dd
--- /dev/null
+++ b/frontend/providers/devbox/components/AdvancedTable.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import { Box, BoxProps, Grid, Flex } from '@chakra-ui/react';
+
+interface Props extends BoxProps {
+  columns: {
+    title: string;
+    dataIndex?: string;
+    key: string;
+    render?: (item: any) => JSX.Element;
+  }[];
+  data: any[];
+  itemClass?: string;
+}
+
+export const AdvancedTable = ({ columns, data, itemClass = '' }: Props) => {
+  return (
+    <>
+      <Grid
+        templateColumns={`repeat(${columns.length},1fr)`}
+        overflowX={'auto'}
+        borderRadius={'md'}
+        mb={2}
+        fontSize={'base'}
+        color={'grayModern.600'}
+        fontWeight={'bold'}
+      >
+        {columns.map((item, i) => (
+          <Box
+            px={3}
+            py={3}
+            bg={'white'}
+            key={item.key}
+            whiteSpace={'nowrap'}
+            _first={{
+              pl: 7
+            }}
+          >
+            {item.title}
+          </Box>
+        ))}
+      </Grid>
+      {data.map((item: any, index1) => (
+        <Grid
+          templateColumns={`repeat(${columns.length},1fr)`}
+          overflowX={'auto'}
+          minH={'70px'}
+          key={index1}
+          bg={'white'}
+          _hover={{
+            bg: '#FBFBFC'
+          }}
+          borderTopRadius={index1 === 0 ? 'md' : '0px'}
+          borderBottomRadius={index1 === data.length - 1 ? 'md' : '0px'}
+          borderBottom={'1px solid'}
+          borderBottomColor={index1 !== data.length - 1 ? 'grayModern.150' : 'transparent'}
+        >
+          {columns.map((col, index2) => (
+            <Flex
+              className={index2 === 0 ? itemClass : ''}
+              data-id={item.id}
+              key={col.key}
+              alignItems={'center'}
+              px={3}
+              py={4}
+              fontSize={'base'}
+              fontWeight={'bold'}
+              color={'grayModern.900'}
+            >
+              {col.render ? col.render(item) : col.dataIndex ? `${item[col.dataIndex]}` : ''}
+            </Flex>
+          ))}
+        </Grid>
+      ))}
+    </>
+  );
+};
diff --git a/frontend/providers/devbox/components/Code.tsx b/frontend/providers/devbox/components/Code.tsx
new file mode 100644
index 000000000000..e82029b1ef02
--- /dev/null
+++ b/frontend/providers/devbox/components/Code.tsx
@@ -0,0 +1,56 @@
+import { useMemo } from 'react';
+import { Box } from '@chakra-ui/react';
+import ReactMarkdown from 'react-markdown';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+
+import { codeTheme } from '@/constants/hljs';
+
+type TMarkDown = {
+  content: string;
+  language: string;
+  [key: string]: any;
+};
+
+const Code = ({ content, language, ...props }: TMarkDown) => {
+  const code = useMemo(() => '```' + language + '\n' + content + '```', [content, language]);
+
+  return (
+    <Box
+      sx={{
+        height: '100%',
+        '& div': {
+          overflow: 'auto !important'
+        }
+      }}
+    >
+      <ReactMarkdown
+        {...props}
+        // eslint-disable-next-line react/no-children-prop
+        children={code}
+        components={{
+          code({ node, inline, className, children, ...props }) {
+            const match = /language-(\w+)/.exec(className || '');
+            return !inline && match ? (
+              <SyntaxHighlighter
+                // eslint-disable-next-line react/no-children-prop
+                children={String(children).replace(/\n$/, '')}
+                showLineNumbers={true}
+                // @ts-ignore nextline
+                style={codeTheme}
+                language={match[1]}
+                PreTag="div"
+                {...props}
+              />
+            ) : (
+              <code className={className} {...props}>
+                {children}
+              </code>
+            );
+          }
+        }}
+      />
+    </Box>
+  );
+};
+
+export default Code;
diff --git a/frontend/providers/devbox/components/DevboxStatusTag.tsx b/frontend/providers/devbox/components/DevboxStatusTag.tsx
index f0ef48e6de53..b50652c685db 100644
--- a/frontend/providers/devbox/components/DevboxStatusTag.tsx
+++ b/frontend/providers/devbox/components/DevboxStatusTag.tsx
@@ -1,8 +1,8 @@
-import React from 'react'
-import { useTranslations } from 'next-intl'
-import { Flex, Box } from '@chakra-ui/react'
+import React from 'react';
+import { useTranslations } from 'next-intl';
+import { Flex, Box } from '@chakra-ui/react';
 
-import type { DevboxReleaseStatusMapType, DevboxStatusMapType } from '@/types/devbox'
+import type { DevboxReleaseStatusMapType, DevboxStatusMapType } from '@/types/devbox';
 
 const DevboxStatusTag = ({
   status,
@@ -10,18 +10,19 @@ const DevboxStatusTag = ({
   thinMode = false,
   ...props
 }: {
-  status: DevboxStatusMapType | DevboxReleaseStatusMapType
-  showBorder?: boolean
-  size?: 'sm' | 'md' | 'lg'
-  thinMode?: boolean
-  w?: string
-  h?: string
+  status: DevboxStatusMapType | DevboxReleaseStatusMapType;
+  showBorder?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  thinMode?: boolean;
+  w?: string;
+  h?: string;
 }) => {
-  const label = status?.label
-  const t = useTranslations()
+  const label = status?.label;
+  const t = useTranslations();
 
   return (
     <Flex
+      className="guide-status-tag"
       color={status.color}
       backgroundColor={thinMode ? 'transparent' : status.backgroundColor}
       border={showBorder ? '1px solid' : 'none'}
@@ -34,18 +35,20 @@ const DevboxStatusTag = ({
       alignItems={'center'}
       minW={'60px'}
       whiteSpace={'nowrap'}
-      {...props}>
+      {...props}
+    >
       <Box
         w={'6px'}
         h={'6px'}
         borderRadius={'10px'}
         backgroundColor={status.dotColor}
-        display={thinMode ? 'none' : 'block'}></Box>
+        display={thinMode ? 'none' : 'block'}
+      ></Box>
       <Box ml={thinMode ? 0 : 2} flex={1}>
         {t(label)}
       </Box>
     </Flex>
-  )
-}
+  );
+};
 
-export default DevboxStatusTag
+export default DevboxStatusTag;
diff --git a/frontend/providers/devbox/components/IDEButton.tsx b/frontend/providers/devbox/components/IDEButton.tsx
index 74be2f5da87a..aba7bbee7948 100644
--- a/frontend/providers/devbox/components/IDEButton.tsx
+++ b/frontend/providers/devbox/components/IDEButton.tsx
@@ -10,28 +10,43 @@ import {
   MenuItem,
   MenuList,
   Tooltip
-} from '@chakra-ui/react'
-import { useMessage } from '@sealos/ui'
-import { useTranslations } from 'next-intl'
-import { useCallback, useState } from 'react'
+} from '@chakra-ui/react';
+import { useMessage } from '@sealos/ui';
+import { useTranslations } from 'next-intl';
+import { useCallback, useState } from 'react';
 
-import { getSSHConnectionInfo } from '@/api/devbox'
-import { useEnvStore } from '@/stores/env'
-import { IDEType, useIDEStore } from '@/stores/ide'
-import { DevboxStatusMapType } from '@/types/devbox'
-import MyIcon from './Icon'
+import MyIcon from './Icon';
+import { useEnvStore } from '@/stores/env';
+import { IDEType, useIDEStore } from '@/stores/ide';
+import { DevboxStatusMapType } from '@/types/devbox';
+import { getSSHConnectionInfo } from '@/api/devbox';
+import JetBrainsGuideModal from './modals/JetbrainsGuideModal';
 
 interface Props {
-  devboxName: string
-  sshPort: number
-  status: DevboxStatusMapType
-  isBigButton?: boolean
-  leftButtonProps?: ButtonProps
-  rightButtonProps?: ButtonProps
+  devboxName: string;
+  runtimeType: string;
+  sshPort: number;
+  status: DevboxStatusMapType;
+  isBigButton?: boolean;
+  leftButtonProps?: ButtonProps;
+  rightButtonProps?: ButtonProps;
+}
+
+export interface JetBrainsGuideData {
+  devboxName: string;
+  runtimeType: string;
+  privateKey: string;
+  userName: string;
+  token: string;
+  workingDir: string;
+  host: string;
+  port: string;
+  configHost: string;
 }
 
 const IDEButton = ({
   devboxName,
+  runtimeType,
   sshPort,
   status,
   isBigButton = true,
@@ -39,64 +54,88 @@ const IDEButton = ({
   rightButtonProps = {},
   ...props
 }: Props & FlexProps) => {
-  const t = useTranslations()
+  const t = useTranslations();
+
+  const { env } = useEnvStore();
+  const { message: toast } = useMessage();
+  const { getDevboxIDEByDevboxName, updateDevboxIDE } = useIDEStore();
 
-  const { env } = useEnvStore()
-  const { message: toast } = useMessage()
-  const [loading, setLoading] = useState(false)
-  const { getDevboxIDEByDevboxName, updateDevboxIDE } = useIDEStore()
-  const currentIDE = getDevboxIDEByDevboxName(devboxName) as IDEType
+  const [loading, setLoading] = useState(false);
+  const [jetbrainsGuideData, setJetBrainsGuideData] = useState<JetBrainsGuideData>();
+  const [onOpenJetbrainsModal, setOnOpenJetbrainsModal] = useState(false);
+  const currentIDE = getDevboxIDEByDevboxName(devboxName) as IDEType;
 
   const handleGotoIDE = useCallback(
     async (currentIDE: IDEType = 'cursor') => {
-      setLoading(true)
+      setLoading(true);
 
-      toast({
-        title: t('opening_ide'),
-        status: 'info'
-      })
+      if (currentIDE !== 'jetbrains') {
+        toast({
+          title: t('opening_ide'),
+          status: 'info'
+        });
+      }
 
       try {
         const { base64PrivateKey, userName, workingDir, token } = await getSSHConnectionInfo({
           devboxName
-        })
+        });
+        const sshPrivateKey = Buffer.from(base64PrivateKey, 'base64').toString('utf-8');
+
+        setJetBrainsGuideData({
+          devboxName,
+          runtimeType,
+          privateKey: sshPrivateKey,
+          userName,
+          token,
+          workingDir,
+          host: env.sealosDomain,
+          port: sshPort.toString(),
+          configHost: `${env.sealosDomain}_${env.namespace}_${devboxName}`
+        });
+
+        if (currentIDE === 'jetbrains') {
+          setOnOpenJetbrainsModal(true);
+          return;
+        }
 
-        const idePrefix = ideObj[currentIDE].prefix
+        const idePrefix = ideObj[currentIDE].prefix;
         const fullUri = `${idePrefix}labring.devbox-aio?sshDomain=${encodeURIComponent(
           `${userName}@${env.sealosDomain}`
         )}&sshPort=${encodeURIComponent(sshPort)}&base64PrivateKey=${encodeURIComponent(
           base64PrivateKey
         )}&sshHostLabel=${encodeURIComponent(
           `${env.sealosDomain}_${env.namespace}_${devboxName}`
-        )}&workingDir=${encodeURIComponent(workingDir)}&token=${encodeURIComponent(token)}`
-        window.location.href = fullUri
+        )}&workingDir=${encodeURIComponent(workingDir)}&token=${encodeURIComponent(token)}`;
+        window.location.href = fullUri;
       } catch (error: any) {
-        console.error(error, '==')
+        console.error(error, '==');
       } finally {
-        setLoading(false)
+        setLoading(false);
       }
     },
-    [devboxName, env.namespace, env.sealosDomain, setLoading, sshPort, toast, t]
-  )
+    [toast, t, devboxName, runtimeType, env.sealosDomain, env.namespace, sshPort]
+  );
 
   return (
-    <Flex {...props}>
+    <Flex className="guide-ide-button" {...props}>
       <Tooltip label={t('ide_tooltip')} hasArrow bg={'#FFFFFF'} color={'grayModern.900'}>
         <Button
           height={'32px'}
-          width={'90px'}
+          width={'100px'}
           fontSize={'base'}
           bg={'grayModern.150'}
           color={'grayModern.900'}
           _hover={{
             color: 'brightBlue.600',
-            bg:"#1118240D"
+            bg: '#1118240D'
           }}
           borderRightWidth={0}
           borderRightRadius={0}
           onClick={() => handleGotoIDE(currentIDE)}
           isDisabled={status.value !== 'Running' || loading}
-          {...leftButtonProps}>
+          {...leftButtonProps}
+        >
           {isBigButton ? (
             <Flex alignItems={'center'} w={'100%'} justifyContent={'center'}>
               <MyIcon name={currentIDE} w={'25%'} />
@@ -117,7 +156,6 @@ const IDEButton = ({
           _hover={{
             color: 'brightBlue.600'
           }}
-          
           p={2}
           borderLeftRadius={0}
           borderLeftWidth={0}
@@ -144,14 +182,15 @@ const IDEButton = ({
           fontWeight={500}
           fontSize={'12px'}
           defaultValue={currentIDE}
-          px={1}>
+          px={1}
+        >
           {menuItems.map((item) => (
             <MenuItem
               key={item.value}
               value={item.value}
               onClick={() => {
-                updateDevboxIDE(item.value as IDEType, devboxName)
-                handleGotoIDE(item.value as IDEType)
+                updateDevboxIDE(item.value as IDEType, devboxName);
+                handleGotoIDE(item.value as IDEType);
               }}
               icon={<MyIcon name={item.value as IDEType} w={'16px'} />}
               _hover={{
@@ -161,7 +200,8 @@ const IDEButton = ({
               _focus={{
                 bg: '#1118240D',
                 borderRadius: 4
-              }}>
+              }}
+            >
               <Flex justifyContent="space-between" alignItems="center" width="100%">
                 {item?.menuLabel}
                 {currentIDE === item.value && <MyIcon name="check" w={'16px'} />}
@@ -170,9 +210,16 @@ const IDEButton = ({
           ))}
         </MenuList>
       </Menu>
+      {!!onOpenJetbrainsModal && !!jetbrainsGuideData && (
+        <JetBrainsGuideModal
+          onSuccess={() => {}}
+          onClose={() => setOnOpenJetbrainsModal(false)}
+          jetbrainsGuideData={jetbrainsGuideData}
+        />
+      )}
     </Flex>
-  )
-}
+  );
+};
 
 export const ideObj = {
   vscode: {
@@ -206,9 +253,27 @@ export const ideObj = {
     prefix: 'windsurf://',
     value: 'windsurf',
     sortId: 3
+  },
+  trae: {
+    label: 'Trae',
+    menuLabel: 'Trae',
+    icon: 'trae',
+    prefix: 'trae://',
+    value: 'trae',
+    sortId: 4
+  },
+  jetbrains: {
+    label: 'JetBrains',
+    icon: 'jetbrains',
+    menuLabel: 'JetBrains',
+    prefix: '-',
+    value: 'jetbrains',
+    sortId: 4
   }
-} as const
+} as const;
 
-const menuItems = Object.values(ideObj).sort((a,b)=>a.sortId - b.sortId).map(({ value, menuLabel }) => ({ value, menuLabel }))
+const menuItems = Object.values(ideObj)
+  .sort((a, b) => a.sortId - b.sortId)
+  .map(({ value, menuLabel }) => ({ value, menuLabel }));
 
-export default IDEButton
+export default IDEButton;
diff --git a/frontend/providers/devbox/components/Icon/icons/arrowDown.svg b/frontend/providers/devbox/components/Icon/icons/arrowDown.svg
index 029c097a2413..6e052f6eb7ca 100644
--- a/frontend/providers/devbox/components/Icon/icons/arrowDown.svg
+++ b/frontend/providers/devbox/components/Icon/icons/arrowDown.svg
@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 12 12" fill="none">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M2.64645 4.14718C2.84171 3.95192 3.15829 3.95192 3.35355 4.14718L6 6.79363L8.64645 4.14718C8.84171 3.95192 9.15829 3.95192 9.35355 4.14718C9.54882 4.34244 9.54882 4.65902 9.35355 4.85429L6.35355 7.85429C6.15829 8.04955 5.84171 8.04955 5.64645 7.85429L2.64645 4.85429C2.45118 4.65902 2.45118 4.34244 2.64645 4.14718Z" fill="#667085"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M2.64645 4.14718C2.84171 3.95192 3.15829 3.95192 3.35355 4.14718L6 6.79363L8.64645 4.14718C8.84171 3.95192 9.15829 3.95192 9.35355 4.14718C9.54882 4.34244 9.54882 4.65902 9.35355 4.85429L6.35355 7.85429C6.15829 8.04955 5.84171 8.04955 5.64645 7.85429L2.64645 4.85429C2.45118 4.65902 2.45118 4.34244 2.64645 4.14718Z" fill="currentColor"/>
 </svg>
\ No newline at end of file
diff --git a/frontend/providers/devbox/components/Icon/icons/arrowRight.svg b/frontend/providers/devbox/components/Icon/icons/arrowRight.svg
new file mode 100644
index 000000000000..b300c856d795
--- /dev/null
+++ b/frontend/providers/devbox/components/Icon/icons/arrowRight.svg
@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.29289 5.29289C7.90237 5.68342 7.90237 6.31658 8.29289 6.70711L13.5858 12L8.29289 17.2929C7.90237 17.6834 7.90237 18.3166 8.29289 18.7071C8.68342 19.0976 9.31658 19.0976 9.70711 18.7071L15.7071 12.7071C16.0976 12.3166 16.0976 11.6834 15.7071 11.2929L9.70711 5.29289C9.31658 4.90237 8.68342 4.90237 8.29289 5.29289Z" fill="currentColor"/>
+</svg>
diff --git a/frontend/providers/devbox/components/Icon/icons/download.svg b/frontend/providers/devbox/components/Icon/icons/download.svg
index a2e40123a896..03a409f65bb6 100644
--- a/frontend/providers/devbox/components/Icon/icons/download.svg
+++ b/frontend/providers/devbox/components/Icon/icons/download.svg
@@ -1,3 +1,3 @@
 <svg  viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1791 10.1803C17.1791 12.2588 15.5274 13.9515 13.465 14.0176V14.0196H13.1634C12.7492 14.0196 12.4134 13.6838 12.4134 13.2696C12.4134 12.8554 12.7492 12.5196 13.1634 12.5196H13.3525C14.6386 12.5128 15.6791 11.468 15.6791 10.1803C15.6791 9.0852 14.9252 8.16246 13.9062 7.90962L13.045 7.69598L12.8175 6.83844C12.3693 5.14897 10.8279 3.90576 9 3.90576C7.1721 3.90576 5.63074 5.14897 5.18249 6.83844L4.95496 7.69598L4.09386 7.90962C3.07478 8.16246 2.32092 9.0852 2.32092 10.1803C2.32092 11.4723 3.36828 12.5196 4.66026 12.5196L4.66409 12.5196L4.87712 12.5196C5.29133 12.5196 5.62712 12.8554 5.62712 13.2696C5.62712 13.6838 5.29133 14.0196 4.87712 14.0196H4.66026H4.57712V14.0187C2.4951 13.9745 0.820923 12.2729 0.820923 10.1803C0.820923 8.37972 2.06039 6.86866 3.73265 6.45376C4.35099 4.12325 6.47493 2.40576 9 2.40576C11.5251 2.40576 13.649 4.12325 14.2674 6.45376C15.9396 6.86866 17.1791 8.37972 17.1791 10.1803ZM8.99999 8.21269C8.58578 8.21269 8.24999 8.54848 8.24999 8.96269V13.3239L7.83764 12.9115C7.59165 12.6655 7.19281 12.6655 6.94682 12.9115C6.70083 13.1575 6.70083 13.5563 6.94682 13.8023L8.44361 15.2991C8.46052 15.3178 8.47836 15.3357 8.49705 15.3526L8.55359 15.4091C8.80013 15.6556 9.19985 15.6556 9.44639 15.4091L9.50294 15.3526C9.52163 15.3356 9.53946 15.3178 9.55636 15.2991L11.0522 13.8033C11.2987 13.5568 11.2987 13.1571 11.0522 12.9105C10.8056 12.664 10.4059 12.664 10.1594 12.9105L9.74999 13.3199V8.96269C9.74999 8.54847 9.4142 8.21269 8.99999 8.21269Z" fill="#667085"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1791 10.1803C17.1791 12.2588 15.5274 13.9515 13.465 14.0176V14.0196H13.1634C12.7492 14.0196 12.4134 13.6838 12.4134 13.2696C12.4134 12.8554 12.7492 12.5196 13.1634 12.5196H13.3525C14.6386 12.5128 15.6791 11.468 15.6791 10.1803C15.6791 9.0852 14.9252 8.16246 13.9062 7.90962L13.045 7.69598L12.8175 6.83844C12.3693 5.14897 10.8279 3.90576 9 3.90576C7.1721 3.90576 5.63074 5.14897 5.18249 6.83844L4.95496 7.69598L4.09386 7.90962C3.07478 8.16246 2.32092 9.0852 2.32092 10.1803C2.32092 11.4723 3.36828 12.5196 4.66026 12.5196L4.66409 12.5196L4.87712 12.5196C5.29133 12.5196 5.62712 12.8554 5.62712 13.2696C5.62712 13.6838 5.29133 14.0196 4.87712 14.0196H4.66026H4.57712V14.0187C2.4951 13.9745 0.820923 12.2729 0.820923 10.1803C0.820923 8.37972 2.06039 6.86866 3.73265 6.45376C4.35099 4.12325 6.47493 2.40576 9 2.40576C11.5251 2.40576 13.649 4.12325 14.2674 6.45376C15.9396 6.86866 17.1791 8.37972 17.1791 10.1803ZM8.99999 8.21269C8.58578 8.21269 8.24999 8.54848 8.24999 8.96269V13.3239L7.83764 12.9115C7.59165 12.6655 7.19281 12.6655 6.94682 12.9115C6.70083 13.1575 6.70083 13.5563 6.94682 13.8023L8.44361 15.2991C8.46052 15.3178 8.47836 15.3357 8.49705 15.3526L8.55359 15.4091C8.80013 15.6556 9.19985 15.6556 9.44639 15.4091L9.50294 15.3526C9.52163 15.3356 9.53946 15.3178 9.55636 15.2991L11.0522 13.8033C11.2987 13.5568 11.2987 13.1571 11.0522 12.9105C10.8056 12.664 10.4059 12.664 10.1594 12.9105L9.74999 13.3199V8.96269C9.74999 8.54847 9.4142 8.21269 8.99999 8.21269Z" fill="currentColor"/>
 </svg>
diff --git a/frontend/providers/devbox/components/Icon/icons/fileConfig.svg b/frontend/providers/devbox/components/Icon/icons/fileConfig.svg
new file mode 100644
index 000000000000..7cb7e16782c2
--- /dev/null
+++ b/frontend/providers/devbox/components/Icon/icons/fileConfig.svg
@@ -0,0 +1,13 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon/solid/file-config" clip-path="url(#clip0_5517_9713)">
+<g id="Union">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.1453 3.2781L19.0531 6.00879C19.7719 6.68371 20.1312 7.02116 20.387 7.42234C20.6045 7.76328 20.7661 8.13673 20.8658 8.52861C20.9831 8.98973 20.9831 9.48269 20.9831 10.4686V14.6201C20.2553 14.2695 19.4392 14.073 18.5772 14.073C15.5121 14.073 13.0273 16.5578 13.0273 19.6229C13.0273 20.6264 13.2936 21.5678 13.7595 22.3801H9.13484C6.97078 22.3801 5.88875 22.3801 5.06514 21.9522C4.3711 21.5917 3.8052 21.0258 3.44467 20.3318C3.01685 19.5082 3.01685 18.4261 3.01685 16.2621V7.73793C3.01685 5.57387 3.01685 4.49184 3.44467 3.66823C3.8052 2.97419 4.3711 2.40829 5.06514 2.04776C5.88875 1.61993 6.97078 1.61993 9.13485 1.61993H11.9572C12.8616 1.61993 13.3138 1.61993 13.7411 1.71997C14.1045 1.80503 14.4533 1.94313 14.7763 2.12983C15.1563 2.34943 15.486 2.65899 16.1453 3.2781ZM14.3328 4.65261C13.7396 4.08381 13.443 3.7994 13.1884 3.7891C12.9862 3.78091 12.791 3.86416 12.657 4.01578C12.4882 4.20668 12.4882 4.61761 12.4882 5.43949V6.37785C12.4882 7.58007 12.4882 8.18118 12.7222 8.64036C12.928 9.04427 13.2564 9.37266 13.6603 9.57847C14.1195 9.81243 14.7206 9.81243 15.9228 9.81243H17.0022C17.8674 9.81243 18.3 9.81243 18.4924 9.63783C18.6451 9.4993 18.7258 9.29844 18.7115 9.09279C18.6935 8.8336 18.3812 8.53421 17.7567 7.93543L14.3328 4.65261Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.6292 16.208C17.9175 15.0877 19.5087 15.0877 19.797 16.208C19.9532 16.8151 20.5775 17.1755 21.1813 17.0073C22.2958 16.6968 23.0914 18.0748 22.2652 18.8847C21.8176 19.3235 21.8176 20.0443 22.2652 20.4831C23.0914 21.293 22.2958 22.671 21.1813 22.3605C20.5775 22.1923 19.9532 22.5527 19.797 23.1597C19.5087 24.2801 17.9175 24.2801 17.6292 23.1597C17.473 22.5527 16.8487 22.1923 16.2449 22.3605C15.1305 22.671 14.3349 21.293 15.161 20.4831C15.6086 20.0443 15.6086 19.3235 15.161 18.8847C14.3349 18.0748 15.1305 16.6968 16.2449 17.0073C16.8487 17.1755 17.473 16.8151 17.6292 16.208ZM20.1094 19.6839C20.1094 20.455 19.4843 21.0802 18.7131 21.0802C17.9419 21.0802 17.3168 20.455 17.3168 19.6839C17.3168 18.9127 17.9419 18.2876 18.7131 18.2876C19.4843 18.2876 20.1094 18.9127 20.1094 19.6839Z" fill="currentColor"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_5517_9713">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/frontend/providers/devbox/components/Icon/icons/gift.svg b/frontend/providers/devbox/components/Icon/icons/gift.svg
new file mode 100644
index 000000000000..865d6307dbb8
--- /dev/null
+++ b/frontend/providers/devbox/components/Icon/icons/gift.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.74968 2.4987C6.41816 2.4987 6.10021 2.63039 5.86579 2.86481C5.63137 3.09924 5.49968 3.41718 5.49968 3.7487C5.49968 4.08022 5.63137 4.39816 5.86579 4.63258C6.10021 4.867 6.41816 4.9987 6.74968 4.9987H9.37803C9.2763 4.73254 9.14752 4.43988 8.98825 4.1503C8.46411 3.19732 7.74459 2.4987 6.74968 2.4987ZM9.66634 6.66536V10.832H2.99968V8.4987C2.99968 8.01824 3.00032 7.70801 3.01962 7.47189C3.03811 7.24551 3.06951 7.16158 3.0905 7.12037C3.1704 6.96357 3.29788 6.83609 3.45468 6.75619C3.49589 6.7352 3.57982 6.7038 3.80621 6.6853C4.04232 6.66601 4.35255 6.66537 4.83301 6.66537L9.66634 6.66536ZM4.11661 5.00325C3.93164 4.61502 3.83301 4.18694 3.83301 3.7487C3.83301 2.97515 4.1403 2.23328 4.68728 1.6863C5.23426 1.13932 5.97613 0.832031 6.74968 0.832031C8.67143 0.832031 9.82691 2.21674 10.4486 3.3471C10.4659 3.37861 10.483 3.4101 10.4997 3.44154C10.5164 3.4101 10.5334 3.37861 10.5507 3.3471C11.1724 2.21674 12.3279 0.832031 14.2497 0.832031C15.0232 0.832031 15.7651 1.13932 16.3121 1.6863C16.8591 2.23328 17.1663 2.97515 17.1663 3.7487C17.1663 4.18694 17.0677 4.61502 16.8827 5.00325C17.0438 5.00678 17.1927 5.01305 17.3289 5.02417C17.6583 5.05109 17.986 5.11052 18.3013 5.27118C18.7717 5.51087 19.1542 5.89332 19.3939 6.36372C19.5545 6.67904 19.614 7.00672 19.6409 7.33618C19.6664 7.64832 19.6664 8.02728 19.6663 8.46656V15.6975C19.6664 16.1368 19.6664 16.5157 19.6409 16.8279C19.614 17.1573 19.5545 17.485 19.3939 17.8003C19.1542 18.2707 18.7717 18.6532 18.3013 18.8929C17.986 19.0535 17.6583 19.113 17.3289 19.1399C17.0167 19.1654 16.6378 19.1654 16.1985 19.1654H10.5008C10.5005 19.1654 10.5001 19.1654 10.4997 19.1654C10.4993 19.1654 10.4989 19.1654 10.4985 19.1654H4.80087C4.36159 19.1654 3.98262 19.1654 3.67049 19.1399C3.34103 19.113 3.01335 19.0535 2.69803 18.8929C2.22763 18.6532 1.84518 18.2707 1.60549 17.8003C1.44483 17.485 1.3854 17.1573 1.35848 16.8279C1.33298 16.5157 1.33299 16.1368 1.33301 15.6975L1.33301 11.6658C1.33301 11.6657 1.33301 11.666 1.33301 11.6658C1.33301 11.6657 1.33301 11.665 1.33301 11.6649L1.33301 8.46658C1.33299 8.02729 1.33298 7.64832 1.35848 7.33617C1.3854 7.00672 1.44483 6.67904 1.60549 6.36372C1.84518 5.89332 2.22763 5.51087 2.69803 5.27118C3.01335 5.11052 3.34103 5.05109 3.67049 5.02417C3.80666 5.01305 3.95554 5.00678 4.11661 5.00325ZM2.99968 12.4987V15.6654C2.99968 16.1458 3.00032 16.4561 3.01962 16.6922C3.03811 16.9186 3.06951 17.0025 3.0905 17.0437C3.1704 17.2005 3.29788 17.328 3.45468 17.4079C3.49589 17.4289 3.57982 17.4603 3.80621 17.4788C4.04232 17.498 4.35255 17.4987 4.83301 17.4987H9.66634V12.4987H2.99968ZM11.333 12.4987V17.4987H16.1663C16.6468 17.4987 16.957 17.4981 17.1931 17.4788C17.4195 17.4603 17.5035 17.4289 17.5447 17.4079C17.7015 17.328 17.829 17.2005 17.9088 17.0437C17.9298 17.0025 17.9612 16.9186 17.9797 16.6922C17.999 16.4561 17.9997 16.1458 17.9997 15.6654V12.4987H11.333ZM17.9997 10.832V8.4987C17.9997 8.01824 17.999 7.70801 17.9797 7.4719C17.9612 7.24551 17.9298 7.16158 17.9088 7.12037C17.829 6.96357 17.7015 6.83609 17.5447 6.75619C17.5035 6.7352 17.4195 6.7038 17.1931 6.68531C16.957 6.66601 16.6468 6.66537 16.1663 6.66537L11.333 6.66536V10.832H17.9997ZM11.6213 4.9987C11.7231 4.73254 11.8518 4.43988 12.0111 4.1503C12.5352 3.19732 13.2548 2.4987 14.2497 2.4987C14.5812 2.4987 14.8991 2.63039 15.1336 2.86481C15.368 3.09924 15.4997 3.41718 15.4997 3.7487C15.4997 4.08022 15.368 4.39816 15.1336 4.63258C14.8991 4.867 14.5812 4.9987 14.2497 4.9987H11.6213Z" fill="url(#paint0_linear_787_31074)"/>
+  <defs>
+    <linearGradient id="paint0_linear_787_31074" x1="10.4997" y1="1.42727" x2="10.4997" y2="18.5701" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#69AEFF"/>
+      <stop offset="0.432292" stop-color="#6096FF"/>
+      <stop offset="1" stop-color="#6C7FFF"/>
+    </linearGradient>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/frontend/providers/devbox/components/Icon/icons/infoCircle.svg b/frontend/providers/devbox/components/Icon/icons/infoCircle.svg
index 6cf4fd514654..453a5d4513d4 100644
--- a/frontend/providers/devbox/components/Icon/icons/infoCircle.svg
+++ b/frontend/providers/devbox/components/Icon/icons/infoCircle.svg
@@ -1,4 +1,4 @@
 
 <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.21879 1.33301C6.90025 1.33301 5.61132 1.724 4.51499 2.45654C3.41866 3.18909 2.56418 4.23028 2.0596 5.44845C1.55501 6.66663 1.42299 8.00707 1.68023 9.30028C1.93746 10.5935 2.5724 11.7814 3.50475 12.7137C4.4371 13.6461 5.62499 14.281 6.91819 14.5382C8.2114 14.7955 9.55184 14.6635 10.77 14.1589C11.9882 13.6543 13.0294 12.7998 13.7619 11.7035C14.4945 10.6071 14.8855 9.31822 14.8855 7.99967C14.8835 6.23216 14.1805 4.5376 12.9307 3.28777C11.6809 2.03795 9.98631 1.33495 8.21879 1.33301ZM8.21879 13.333C7.16396 13.333 6.13281 13.0202 5.25575 12.4342C4.37869 11.8481 3.6951 11.0152 3.29144 10.0407C2.88777 9.06611 2.78215 7.99376 2.98794 6.95919C3.19373 5.92463 3.70168 4.97432 4.44756 4.22844C5.19344 3.48256 6.14375 2.97461 7.17831 2.76882C8.21288 2.56303 9.28523 2.66865 10.2598 3.07232C11.2343 3.47598 12.0673 4.15957 12.6533 5.03663C13.2393 5.91369 13.5521 6.94484 13.5521 7.99967C13.5504 9.41362 12.9879 10.7691 11.9881 11.769C10.9883 12.7688 9.63274 13.3312 8.21879 13.333ZM8.21879 7.66634C8.04198 7.66634 7.87241 7.73658 7.74739 7.8616C7.62237 7.98663 7.55213 8.1562 7.55213 8.33301V10.333C7.55213 10.5098 7.62237 10.6794 7.74739 10.8044C7.87241 10.9294 8.04198 10.9997 8.21879 10.9997C8.39561 10.9997 8.56517 10.9294 8.6902 10.8044C8.81522 10.6794 8.88546 10.5098 8.88546 10.333V8.33301C8.88546 8.1562 8.81522 7.98663 8.6902 7.8616C8.56517 7.73658 8.39561 7.66634 8.21879 7.66634ZM8.21879 4.99967C8.05398 4.99967 7.89286 5.04855 7.75582 5.14012C7.61878 5.23168 7.51197 5.36183 7.44889 5.5141C7.38582 5.66638 7.36932 5.83393 7.40147 5.99558C7.43363 6.15723 7.51299 6.30572 7.62954 6.42226C7.74608 6.53881 7.89457 6.61817 8.05622 6.65033C8.21787 6.68248 8.38543 6.66598 8.5377 6.60291C8.68997 6.53983 8.82012 6.43302 8.91169 6.29598C9.00325 6.15894 9.05213 5.99783 9.05213 5.83301C9.05213 5.61199 8.96433 5.40003 8.80805 5.24375C8.65177 5.08747 8.43981 4.99967 8.21879 4.99967Z" fill="#48A7EC"/>
+<path d="M8.21879 1.33301C6.90025 1.33301 5.61132 1.724 4.51499 2.45654C3.41866 3.18909 2.56418 4.23028 2.0596 5.44845C1.55501 6.66663 1.42299 8.00707 1.68023 9.30028C1.93746 10.5935 2.5724 11.7814 3.50475 12.7137C4.4371 13.6461 5.62499 14.281 6.91819 14.5382C8.2114 14.7955 9.55184 14.6635 10.77 14.1589C11.9882 13.6543 13.0294 12.7998 13.7619 11.7035C14.4945 10.6071 14.8855 9.31822 14.8855 7.99967C14.8835 6.23216 14.1805 4.5376 12.9307 3.28777C11.6809 2.03795 9.98631 1.33495 8.21879 1.33301ZM8.21879 13.333C7.16396 13.333 6.13281 13.0202 5.25575 12.4342C4.37869 11.8481 3.6951 11.0152 3.29144 10.0407C2.88777 9.06611 2.78215 7.99376 2.98794 6.95919C3.19373 5.92463 3.70168 4.97432 4.44756 4.22844C5.19344 3.48256 6.14375 2.97461 7.17831 2.76882C8.21288 2.56303 9.28523 2.66865 10.2598 3.07232C11.2343 3.47598 12.0673 4.15957 12.6533 5.03663C13.2393 5.91369 13.5521 6.94484 13.5521 7.99967C13.5504 9.41362 12.9879 10.7691 11.9881 11.769C10.9883 12.7688 9.63274 13.3312 8.21879 13.333ZM8.21879 7.66634C8.04198 7.66634 7.87241 7.73658 7.74739 7.8616C7.62237 7.98663 7.55213 8.1562 7.55213 8.33301V10.333C7.55213 10.5098 7.62237 10.6794 7.74739 10.8044C7.87241 10.9294 8.04198 10.9997 8.21879 10.9997C8.39561 10.9997 8.56517 10.9294 8.6902 10.8044C8.81522 10.6794 8.88546 10.5098 8.88546 10.333V8.33301C8.88546 8.1562 8.81522 7.98663 8.6902 7.8616C8.56517 7.73658 8.39561 7.66634 8.21879 7.66634ZM8.21879 4.99967C8.05398 4.99967 7.89286 5.04855 7.75582 5.14012C7.61878 5.23168 7.51197 5.36183 7.44889 5.5141C7.38582 5.66638 7.36932 5.83393 7.40147 5.99558C7.43363 6.15723 7.51299 6.30572 7.62954 6.42226C7.74608 6.53881 7.89457 6.61817 8.05622 6.65033C8.21787 6.68248 8.38543 6.66598 8.5377 6.60291C8.68997 6.53983 8.82012 6.43302 8.91169 6.29598C9.00325 6.15894 9.05213 5.99783 9.05213 5.83301C9.05213 5.61199 8.96433 5.40003 8.80805 5.24375C8.65177 5.08747 8.43981 4.99967 8.21879 4.99967Z" fill="currentColor"/>
 </svg>
diff --git a/frontend/providers/devbox/components/Icon/icons/jetbrains.svg b/frontend/providers/devbox/components/Icon/icons/jetbrains.svg
new file mode 100644
index 000000000000..73bd7592aea7
--- /dev/null
+++ b/frontend/providers/devbox/components/Icon/icons/jetbrains.svg
@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="__WEBTEAM_UI_SITE_HEADER_LOGO_ID__0" x1="1" x2="62.75" y1="63" y2="1.25" gradientUnits="userSpaceOnUse"><stop stop-color="#FF9419"></stop><stop offset="0.43" stop-color="#FF021D"></stop><stop offset="0.99" stop-color="#E600FF"></stop></linearGradient></defs><path fill="url(#__WEBTEAM_UI_SITE_HEADER_LOGO_ID__0)" d="M22.14 0H59c2.76 0 5 2.24 5 5v36.86c0 2.65-1.055 5.195-2.93 7.07L48.93 61.07A10.003 10.003 0 0 1 41.86 64H5c-2.76 0-5-2.24-5-5V22.14c0-2.65 1.055-5.195 2.93-7.07L15.07 2.93A10.003 10.003 0 0 1 22.14 0Z"></path><path fill="#000" d="M52 12H6v46h46V12Z"></path><g fill="#fff" class="jetbrains-simple_svg__letters-to-show-hovered"><path d="M11.92 21.49a.87.87 0 0 0 .1-.42V16h1.635v5.19c0 .43-.09.815-.275 1.145-.185.33-.45.585-.785.77-.34.185-.725.275-1.16.275H10v-1.505h1.22c.16 0 .3-.035.42-.1s.215-.16.28-.285ZM10 51h16v3H10v-3Zm6.595-30.63h3.475v-1.38h-3.475v-1.565h3.835V16h-5.425v7.38h5.53v-1.42h-3.94v-1.59Zm6.725-2.905h-2.19V16h6v1.465h-2.18v5.915h-1.63v-5.915Z"></path><path fill-rule="evenodd" d="M14.935 29.295a2.155 2.155 0 0 0-.4-.16 1.612 1.612 0 0 0 .94-.71 1.64 1.64 0 0 0 .23-.87c0-.375-.1-.71-.305-1.005a2.016 2.016 0 0 0-.86-.69c-.37-.165-.79-.25-1.26-.25H10v7.38h3.345c.495 0 .94-.085 1.325-.26.39-.175.69-.415.905-.725.215-.31.32-.66.32-1.06 0-.365-.085-.69-.255-.98a1.75 1.75 0 0 0-.705-.67Zm-3.35-2.445h1.45c.2 0 .38.035.53.11a.81.81 0 0 1 .36.31c.085.135.13.29.13.47s-.045.35-.13.49-.205.245-.36.32c-.155.075-.33.115-.53.115h-1.45V26.85Zm2.5 4.47a.91.91 0 0 1-.395.325c-.17.075-.365.115-.59.115h-1.515v-1.895H13.1c.22 0 .41.04.585.12.17.08.305.195.4.34.095.145.14.315.14.505s-.045.35-.14.49Zm8.375-2.14c-.225.355-.54.635-.95.83l-.005-.005c-.08.035-.16.07-.245.1l1.685 2.885H21.08l-1.495-2.69H18.52v2.69h-1.635v-7.38h3.23c.535 0 1.005.095 1.41.29.405.195.72.465.94.82.22.355.33.75.33 1.22s-.11.885-.335 1.24Zm-2.465-2.24h-1.47v2.045h1.47c.23 0 .425-.04.595-.125.17-.08.3-.2.39-.355.09-.155.135-.34.135-.545 0-.205-.045-.385-.135-.54a.897.897 0 0 0-.39-.355 1.305 1.305 0 0 0-.595-.125Zm5.745-1.325-2.635 7.38h1.66l.52-1.63h2.735l.56 1.63h1.63l-2.7-7.38h-1.77Zm-.085 4.515.85-2.605.1-.475.1.475.905 2.605h-1.955Z" clip-rule="evenodd"></path><path d="M30.95 25.615h1.685v7.38H30.95v-7.38Zm7.835 4.99-3.175-4.99h-1.59v7.38h1.49V28l3.16 4.995h1.61v-7.38h-1.495v4.99Zm7.28-1.595c.285.205.51.46.67.77h-.005c.16.31.24.645.24 1.01 0 .445-.12.845-.355 1.2s-.565.63-.99.83c-.425.2-.915.3-1.46.3-.545 0-1.03-.1-1.45-.295a2.378 2.378 0 0 1-.995-.82 2.169 2.169 0 0 1-.37-1.22h1.635c0 .19.055.36.155.505.1.145.24.255.425.335.18.08.395.12.62.12.225 0 .425-.035.59-.105a.91.91 0 0 0 .39-.3c.095-.13.14-.28.14-.445 0-.2-.065-.375-.19-.51s-.295-.23-.515-.285l-1.33-.275a2.436 2.436 0 0 1-.915-.395c-.26-.19-.465-.43-.61-.715a2.085 2.085 0 0 1-.215-.96c0-.44.11-.83.335-1.175.22-.345.535-.61.935-.805.4-.195.85-.29 1.37-.29.52 0 .98.095 1.38.28.405.185.72.445.945.775.225.33.345.71.355 1.14h-1.635c0-.16-.045-.3-.13-.425s-.205-.22-.36-.29c-.155-.07-.34-.105-.54-.105s-.375.035-.53.1a.822.822 0 0 0-.355.275.69.69 0 0 0-.125.415c0 .175.06.32.175.44.115.12.275.2.47.245l1.255.26c.37.07.7.21.99.415Z"></path></g></svg>
\ No newline at end of file
diff --git a/frontend/providers/devbox/components/Icon/icons/jetbrains/clion.svg b/frontend/providers/devbox/components/Icon/icons/jetbrains/clion.svg
new file mode 100644
index 000000000000..7805eb6e95be
--- /dev/null
+++ b/frontend/providers/devbox/components/Icon/icons/jetbrains/clion.svg
@@ -0,0 +1,22 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4568_12009)">
+<path d="M32 29.9389V12.8749C32 12.4694 31.8805 12.0729 31.6564 11.735C31.4323 11.397 31.1135 11.1327 30.74 10.9749L12.0285 3.07639C11.7695 2.96686 11.4907 2.91155 11.2095 2.91389L2.045 2.98889C1.50099 2.99337 0.980792 3.21267 0.597747 3.59899C0.214702 3.98531 -0.000150328 4.50736 7.89162e-08 5.05139V13.8839C7.89162e-08 14.2869 0.118 14.6804 0.339 15.0174L10.8935 31.0719C11.0812 31.3575 11.337 31.592 11.6379 31.7543C11.9387 31.9165 12.2752 32.0014 12.617 32.0014H29.9375C30.4845 32.0014 31.0091 31.7841 31.3959 31.3973C31.7827 31.0105 32 30.4859 32 29.9389Z" fill="url(#paint0_linear_4568_12009)"/>
+<path d="M29 7.494V2.0625C29 1.51549 28.7827 0.990886 28.3959 0.604092C28.0091 0.217298 27.4845 0 26.9375 0L20.6545 0C20.5545 0 20.4545 0.007 20.3555 0.022L1.7635 2.746C1.27356 2.81778 0.825807 3.06343 0.502025 3.43807C0.178244 3.81271 5.08847e-05 4.29133 0 4.7865L0 12.4855C-7.96014e-09 12.7564 0.0533647 13.0246 0.157046 13.2749C0.260728 13.5252 0.412695 13.7526 0.604269 13.9441C0.795843 14.1356 1.02327 14.2875 1.27356 14.3911C1.52385 14.4948 1.79211 14.5481 2.063 14.548L11.3155 14.5455C11.5281 14.5454 11.7394 14.5126 11.942 14.448L27.565 9.458C27.9814 9.32492 28.3448 9.06298 28.6027 8.70998C28.8607 8.35699 28.9998 7.93118 29 7.494Z" fill="url(#paint1_linear_4568_12009)"/>
+<path d="M29 8.22641V2.09691C29 1.82334 28.9455 1.55251 28.8398 1.3002C28.7341 1.04788 28.5793 0.81911 28.3843 0.627211C28.1893 0.435313 27.9581 0.284118 27.7042 0.182431C27.4502 0.0807437 27.1785 0.0305955 26.905 0.0349062L21.5015 0.00390625C20.9115 0.0134062 20.234 0.394406 19.8495 0.842906L3.4965 19.9219C3.17635 20.2958 3.00027 20.7717 3 21.2639V26.9389C3 27.4859 3.2173 28.0105 3.60409 28.3973C3.99089 28.7841 4.51549 29.0014 5.0625 29.0014H10.564C11.159 29.0014 11.7245 28.7444 12.116 28.2969L28.49 9.58491C28.819 9.20882 29.0002 8.72607 29 8.22641Z" fill="#FF2D90"/>
+<path d="M26 6H6V26H26V6Z" fill="black"/>
+<path d="M16.5 21.9999H8.5V23.4999H16.5V21.9999ZM10.3735 15.6209C9.79779 15.2903 9.32338 14.8086 9.0015 14.2279C8.669 13.6364 8.503 12.9764 8.503 12.2474C8.503 11.5184 8.669 10.8584 9.0015 10.2674C9.32337 9.68664 9.79777 9.2048 10.3735 8.87394C10.9555 8.53644 11.606 8.36694 12.324 8.36694C12.9315 8.36694 13.489 8.47944 13.9965 8.70444C14.4869 8.91676 14.9209 9.2407 15.264 9.65044C15.6003 10.0538 15.8329 10.5332 15.9415 11.0469H14.409C14.3117 10.7797 14.1592 10.5359 13.9615 10.3314C13.7598 10.1236 13.5158 9.96163 13.246 9.85644C12.9557 9.74365 12.6465 9.6873 12.335 9.69044C11.8915 9.69044 11.4915 9.80144 11.134 10.0229C10.7763 10.2451 10.4863 10.5611 10.2955 10.9364C10.0935 11.3244 9.9925 11.7609 9.9925 12.2464C9.9925 12.7329 10.0935 13.1694 10.2955 13.5569C10.4861 13.9326 10.7762 14.2487 11.134 14.4709C11.4915 14.6924 11.8915 14.8029 12.335 14.8029C12.6465 14.8063 12.9557 14.7499 13.246 14.6369C13.5135 14.5331 13.7558 14.3731 13.9563 14.1679C14.1569 13.9626 14.3113 13.7168 14.409 13.4469H15.9415C15.8328 13.9605 15.6002 14.4398 15.264 14.8429C14.9209 15.2527 14.4869 15.5766 13.9965 15.7889C13.489 16.0139 12.9315 16.1264 12.324 16.1264C11.606 16.1264 10.956 15.9579 10.3735 15.6199V15.6209ZM18.665 8.49594V14.6809H22.2235V15.9989H17.207V8.49594H18.665Z" fill="white"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_4568_12009" x1="2.0335" y1="2.16339" x2="31.332" y2="31.4614" gradientUnits="userSpaceOnUse">
+<stop offset="0.29" stop-color="#009AE5"/>
+<stop offset="0.7" stop-color="#00D980"/>
+</linearGradient>
+<linearGradient id="paint1_linear_4568_12009" x1="28.1645" y1="-0.195499" x2="1.437" y2="12.1965" gradientUnits="userSpaceOnUse">
+<stop offset="0.3" stop-color="#FF2D90"/>
+<stop offset="0.54" stop-color="#009AE5"/>
+</linearGradient>
+<clipPath id="clip0_4568_12009">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/frontend/providers/devbox/components/Icon/icons/jetbrains/goland.svg b/frontend/providers/devbox/components/Icon/icons/jetbrains/goland.svg
new file mode 100644
index 000000000000..d5a262821f18
--- /dev/null
+++ b/frontend/providers/devbox/components/Icon/icons/jetbrains/goland.svg
@@ -0,0 +1,22 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4568_11992)">
+<path d="M23.775 29H29.9045C30.1781 29 30.4489 28.9455 30.7012 28.8398C30.9535 28.7341 31.1823 28.5793 31.3742 28.3843C31.5661 28.1893 31.7173 27.9581 31.819 27.7042C31.9207 27.4502 31.9708 27.1785 31.9665 26.905L31.8785 21.383C31.8738 21.0911 31.8072 20.8035 31.6831 20.5392C31.559 20.2749 31.3802 20.04 31.1585 19.85L12.0795 3.4965C11.7056 3.17608 11.2294 2.99998 10.737 3H5.0625C4.51549 3 3.99089 3.2173 3.60409 3.60409C3.2173 3.99089 3 4.51549 3 5.0625V10.564C3 11.159 3.257 11.7245 3.7045 12.116L22.417 28.49C22.7929 28.8189 23.2755 29.0001 23.775 29Z" fill="#00D886"/>
+<path d="M24.5065 29H29.9375C30.4845 29 31.0091 28.7827 31.3959 28.3959C31.7827 28.0091 32 27.4845 32 26.9375V20.6545C32 20.5545 31.993 20.4545 31.978 20.3555L29.254 1.7635C29.1823 1.27352 28.9367 0.825704 28.5621 0.501904C28.1874 0.178103 27.7087 -5.28643e-05 27.2135 1.17667e-08H19.5145C19.2436 3.80652e-09 18.9754 0.0533647 18.7251 0.157046C18.4749 0.260728 18.2475 0.412695 18.0559 0.604269C17.8644 0.795843 17.7125 1.02327 17.6089 1.27356C17.5053 1.52385 17.452 1.79211 17.452 2.063L17.4545 11.3155C17.4545 11.528 17.4875 11.7395 17.552 11.942L22.5415 27.565C22.6747 27.9816 22.9367 28.3451 23.2899 28.603C23.6431 28.861 24.0692 29 24.5065 29Z" fill="url(#paint0_linear_4568_11992)"/>
+<path d="M2.0625 32H19.126C19.5315 32 19.928 31.8805 20.2659 31.6564C20.6038 31.4323 20.8682 31.1135 21.026 30.74L28.925 12.0285C29.0345 11.7695 29.09 11.4905 29.087 11.2095L29.012 2.045C29.0075 1.50107 28.7883 0.980954 28.4021 0.597923C28.0159 0.214892 27.4939 -1.84852e-05 26.95 1.19253e-09H18.117C17.7144 0.000125624 17.3205 0.117959 16.984 0.339L0.93 10.8935C0.644296 11.0812 0.409727 11.337 0.247391 11.6378C0.0850555 11.9387 4.31658e-05 12.2752 0 12.617L0 29.9375C0 30.4845 0.217298 31.0091 0.604092 31.3959C0.990886 31.7827 1.51549 32 2.0625 32Z" fill="url(#paint1_linear_4568_11992)"/>
+<path d="M26 6H6V26H26V6Z" fill="black"/>
+<path d="M9.87403 15.6209C9.29849 15.2902 8.82425 14.8086 8.50253 14.2279C8.17003 13.6364 8.00403 12.9764 8.00403 12.2474C8.00403 11.5184 8.17003 10.8584 8.50253 10.2674C8.83503 9.67644 9.29253 9.21144 9.87403 8.87394C10.4565 8.53644 11.1065 8.36694 11.825 8.36694C12.4075 8.36694 12.944 8.47094 13.436 8.67794C13.9101 8.87325 14.3347 9.17164 14.679 9.55144C15.0142 9.92207 15.2574 10.3664 15.389 10.8484H13.824C13.7118 10.6152 13.5545 10.4065 13.361 10.2344C13.166 10.0614 12.9385 9.92744 12.6775 9.83294C12.4165 9.73844 12.136 9.69094 11.836 9.69094C11.3925 9.69094 10.9925 9.80144 10.635 10.0229C10.2773 10.2453 9.98729 10.5614 9.79653 10.9369C9.59453 11.3244 9.49353 11.7614 9.49353 12.2469C9.49353 12.7324 9.59453 13.1699 9.79653 13.5574C9.98718 13.9331 10.2772 14.2492 10.635 14.4714C10.9925 14.6929 11.3925 14.8034 11.836 14.8034C12.2465 14.8034 12.619 14.7264 12.9535 14.5729C13.2875 14.4194 13.5525 14.2064 13.749 13.9349C13.9441 13.6681 14.0544 13.3488 14.0655 13.0184L14.0705 13.1734H12.3075V12.0214H15.486V12.6114C15.486 13.2719 15.326 13.8699 15.006 14.4039C14.6897 14.935 14.2361 15.3711 13.693 15.6664C13.1375 15.9734 12.515 16.1269 11.825 16.1269C11.135 16.1269 10.4565 15.9584 9.87403 15.6204V15.6209ZM18.1355 15.6209C17.5583 15.2904 17.0821 14.8088 16.758 14.2279C16.424 13.6364 16.257 12.9764 16.257 12.2474C16.257 11.5184 16.4235 10.8584 16.758 10.2674C17.0819 9.68629 17.5582 9.20449 18.1355 8.87394C18.7195 8.53644 19.3725 8.36694 20.0945 8.36694C20.816 8.36694 21.4635 8.53594 22.048 8.87344C22.6248 9.20372 23.1002 9.68565 23.4225 10.2669C23.7545 10.8584 23.921 11.5184 23.921 12.2474C23.921 12.9764 23.7545 13.6364 23.4225 14.2274C23.0905 14.8184 22.632 15.2839 22.0475 15.6214C21.4635 15.9589 20.8125 16.1279 20.0945 16.1279C19.376 16.1279 18.7195 15.9584 18.1355 15.6209ZM21.2895 14.5064C21.6435 14.2834 21.9205 13.9739 22.1205 13.5794C22.3205 13.1844 22.4205 12.7404 22.4205 12.2474C22.4205 11.7544 22.3205 11.3104 22.1205 10.9154C21.9341 10.5358 21.6466 10.2151 21.2895 9.98844C20.936 9.76544 20.5375 9.65344 20.0945 9.65344C19.652 9.65344 19.252 9.76494 18.897 9.98844C18.5386 10.2149 18.2493 10.5356 18.061 10.9154C17.859 11.3104 17.758 11.7544 17.758 12.2474C17.758 12.7404 17.859 13.1844 18.061 13.5794C18.263 13.9744 18.5415 14.2834 18.897 14.5064C19.252 14.7299 19.652 14.8414 20.0945 14.8414C20.538 14.8414 20.936 14.7299 21.2895 14.5064ZM16.5 21.9999H8.50003V23.4999H16.5V21.9999Z" fill="white"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_4568_11992" x1="32.1955" y1="28.1645" x2="19.8035" y2="1.437" gradientUnits="userSpaceOnUse">
+<stop offset="0.24" stop-color="#00D886"/>
+<stop offset="0.51" stop-color="#007DFE"/>
+</linearGradient>
+<linearGradient id="paint1_linear_4568_11992" x1="29.838" y1="2.0335" x2="0.539999" y2="31.3315" gradientUnits="userSpaceOnUse">
+<stop offset="0.27" stop-color="#007DFE"/>
+<stop offset="0.7" stop-color="#D249FC"/>
+</linearGradient>
+<clipPath id="clip0_4568_11992">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/frontend/providers/devbox/components/Icon/icons/jetbrains/intellij.svg b/frontend/providers/devbox/components/Icon/icons/jetbrains/intellij.svg
new file mode 100644
index 000000000000..8d687b78ae33
--- /dev/null
+++ b/frontend/providers/devbox/components/Icon/icons/jetbrains/intellij.svg
@@ -0,0 +1,22 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4568_11968)">
+<path d="M8.22496 3H2.09546C1.82189 3.00003 1.55107 3.05449 1.29875 3.16019C1.04643 3.2659 0.817663 3.42075 0.625764 3.61572C0.433866 3.81069 0.282671 4.04188 0.180984 4.29585C0.0792966 4.54981 0.0291485 4.82147 0.0334592 5.095L0.121459 10.617C0.126129 10.9089 0.192725 11.1965 0.316845 11.4608C0.440965 11.7251 0.619778 11.96 0.841459 12.15L19.921 28.5035C20.2945 28.8235 20.771 29 21.263 29H26.938C27.4849 28.9999 28.0094 28.7825 28.396 28.3957C28.7827 28.009 29 27.4844 29 26.9375V21.436C29 20.841 28.743 20.2755 28.295 19.8835L9.58346 3.5105C9.20747 3.1813 8.7247 2.99988 8.22496 3Z" fill="#FF8100"/>
+<path d="M7.494 3H2.0625C1.51549 3 0.990886 3.2173 0.604092 3.60409C0.217298 3.99089 0 4.51549 0 5.0625L0 11.3455C0 11.4455 0.007 11.5455 0.022 11.6445L2.746 30.237C2.81789 30.7268 3.06359 31.1745 3.43822 31.4982C3.81285 31.8218 4.29141 32 4.7865 32H12.4855C12.7564 32 13.0247 31.9466 13.275 31.8429C13.5253 31.7392 13.7527 31.5872 13.9443 31.3956C14.1358 31.2039 14.2877 30.9764 14.3913 30.7261C14.4949 30.4757 14.5481 30.2074 14.548 29.9365L14.545 20.685C14.545 20.472 14.512 20.2605 14.4475 20.058L9.4575 4.4355C9.32453 4.01905 9.06271 3.65561 8.7098 3.39761C8.3569 3.1396 7.93116 3.00037 7.494 3Z" fill="url(#paint0_linear_4568_11968)"/>
+<path d="M29.938 1.67961e-10H12.874C12.4685 -5.17355e-06 12.0721 0.119515 11.7341 0.343618C11.3962 0.567721 11.1318 0.886464 10.974 1.26L3.07553 19.9715C2.966 20.2305 2.9107 20.5093 2.91303 20.7905L2.98803 29.955C2.99265 30.499 3.21198 31.0191 3.59828 31.4021C3.98457 31.7851 4.50654 32 5.05053 32H13.8835C14.2865 32 14.68 31.882 15.0165 31.661L31.0715 21.1065C31.357 20.9187 31.5913 20.6628 31.7534 20.362C31.9155 20.0611 32.0002 19.7247 32 19.383V2.0625C32 1.51558 31.7828 0.991048 31.3961 0.604269C31.0094 0.21749 30.485 0.000132587 29.938 1.67961e-10Z" fill="url(#paint1_linear_4568_11968)"/>
+<path d="M26 6H6V26H26V6Z" fill="black"/>
+<path d="M16.5 22.0001H8.5V23.5001H16.5V22.0001ZM8.5 14.6916H9.99V9.80409H8.5V8.49609H12.9215V9.80409H11.4315V14.6916H12.9215V16.0001H8.5V14.6921V14.6916ZM13.8215 14.6491H14.8985C15.101 14.6528 15.3012 14.6048 15.48 14.5096C15.65 14.4166 15.781 14.2856 15.874 14.1156C15.967 13.9456 16.0135 13.7521 16.0135 13.5341V8.49609H17.4765V13.6361C17.4765 14.0861 17.373 14.4906 17.1655 14.8496C16.9626 15.2043 16.6659 15.4963 16.308 15.6936C15.944 15.8976 15.535 15.9991 15.081 15.9991H13.8215V14.6491Z" fill="white"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_4568_11968" x1="-0.1955" y1="3.8355" x2="12.196" y2="30.563" gradientUnits="userSpaceOnUse">
+<stop offset="0.1" stop-color="#FC801D"/>
+<stop offset="0.59" stop-color="#FE2857"/>
+</linearGradient>
+<linearGradient id="paint1_linear_4568_11968" x1="2.16253" y1="29.966" x2="31.4605" y2="0.668002" gradientUnits="userSpaceOnUse">
+<stop offset="0.21" stop-color="#FE2857"/>
+<stop offset="0.7" stop-color="#007EFF"/>
+</linearGradient>
+<clipPath id="clip0_4568_11968">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/frontend/providers/devbox/components/Icon/icons/jetbrains/phpstorm.svg b/frontend/providers/devbox/components/Icon/icons/jetbrains/phpstorm.svg
new file mode 100644
index 000000000000..25a81f14913d
--- /dev/null
+++ b/frontend/providers/devbox/components/Icon/icons/jetbrains/phpstorm.svg
@@ -0,0 +1,22 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4573_12561)">
+<path d="M29 8.22301V2.09351C29 1.81994 28.9455 1.54911 28.8398 1.2968C28.7341 1.04448 28.5793 0.81571 28.3843 0.623811C28.1893 0.431913 27.9581 0.280718 27.7042 0.179031C27.4502 0.0773435 27.1785 0.0271954 26.905 0.0315061L21.3825 0.119506C21.0906 0.124308 20.8031 0.191017 20.5389 0.315221C20.2747 0.439426 20.0399 0.618296 19.85 0.840006L3.4965 19.9185C3.17624 20.2925 3.00015 20.7686 3 21.261V26.936C3.00013 27.4829 3.21749 28.0074 3.60427 28.3941C3.99105 28.7808 4.51558 28.998 5.0625 28.998H10.564C11.159 28.998 11.7245 28.741 12.116 28.2935L28.49 9.58101C28.8189 9.20505 29.0001 8.7225 29 8.22301Z" fill="#D249FC"/>
+<path d="M29 7.494V2.0625C29 1.51549 28.7827 0.990886 28.3959 0.604092C28.0091 0.217298 27.4845 0 26.9375 0L20.6545 0C20.5545 0 20.4545 0.007 20.3555 0.022L1.7635 2.746C1.27356 2.81778 0.825807 3.06343 0.502025 3.43807C0.178244 3.81271 5.08847e-05 4.29133 0 4.7865L0 12.4855C-7.96014e-09 12.7564 0.0533647 13.0246 0.157046 13.2749C0.260728 13.5252 0.412695 13.7526 0.604269 13.9441C0.795843 14.1356 1.02327 14.2875 1.27356 14.3911C1.52385 14.4948 1.79211 14.5481 2.063 14.548L11.3155 14.5455C11.5281 14.5454 11.7394 14.5126 11.942 14.448L27.565 9.458C27.9814 9.32492 28.3448 9.06298 28.6027 8.70998C28.8607 8.35699 28.9998 7.93118 29 7.494Z" fill="url(#paint0_linear_4573_12561)"/>
+<path d="M32 29.9389V12.8749C32 12.4694 31.8805 12.0729 31.6564 11.735C31.4323 11.397 31.1135 11.1327 30.74 10.9749L12.0285 3.07639C11.7695 2.96686 11.4907 2.91155 11.2095 2.91389L2.045 2.98889C1.50099 2.99337 0.980792 3.21267 0.597747 3.59899C0.214702 3.98531 -0.000150328 4.50736 7.89162e-08 5.05139V13.8839C7.89162e-08 14.2869 0.118 14.6804 0.339 15.0174L10.8935 31.0719C11.0812 31.3575 11.337 31.592 11.6379 31.7543C11.9387 31.9165 12.2752 32.0014 12.617 32.0014H29.9375C30.4845 32.0014 31.0091 31.7841 31.3959 31.3973C31.7827 31.0105 32 30.4859 32 29.9389Z" fill="url(#paint1_linear_4573_12561)"/>
+<path d="M26 6H6V26H26V6Z" fill="black"/>
+<path d="M16.5 21.9999H8.49997V23.4999H16.5V21.9999ZM8.49647 8.49594H11.7175C12.246 8.49594 12.7095 8.59244 13.1075 8.78544C13.5065 8.97844 13.8135 9.24994 14.03 9.60044C14.246 9.95044 14.354 10.3554 14.354 10.8164C14.354 11.2774 14.244 11.6959 14.0245 12.0494C13.8045 12.4034 13.493 12.6774 13.0895 12.8724C12.6855 13.0674 12.214 13.1644 11.6745 13.1644H9.95947V15.9999H8.49597V8.49644L8.49647 8.49594ZM12.2665 11.8109C12.451 11.7199 12.5925 11.5894 12.6925 11.4199C12.7925 11.2499 12.8425 11.0509 12.8425 10.8224C12.8425 10.5939 12.7925 10.4014 12.6925 10.2354C12.5925 10.0689 12.4505 9.94044 12.2665 9.84944C12.0825 9.75844 11.8675 9.71294 11.621 9.71294H9.95947V11.9479H11.621C11.8675 11.9479 12.0825 11.9019 12.2665 11.8109ZM16.286 15.8319C15.866 15.6354 15.5375 15.3604 15.3 15.0069C15.0625 14.6529 14.94 14.2459 14.9325 13.7849H16.401C16.401 14.0029 16.458 14.1939 16.5725 14.3584C16.687 14.5229 16.846 14.6514 17.0495 14.7444C17.253 14.8369 17.487 14.8834 17.7515 14.8834C18.0165 14.8834 18.2275 14.8419 18.419 14.7579C18.61 14.6739 18.758 14.5569 18.864 14.4069C18.97 14.2569 19.0215 14.0854 19.0215 13.8924C19.0215 13.6529 18.949 13.4549 18.8045 13.2974C18.6595 13.1404 18.4605 13.0314 18.207 12.9704L16.8835 12.6754C16.526 12.5974 16.215 12.4624 15.9505 12.2709C15.6918 12.0864 15.4807 11.843 15.3345 11.5609C15.188 11.2789 15.1145 10.9609 15.1145 10.6069C15.1145 10.1784 15.2255 9.79344 15.447 9.45194C15.6685 9.11094 15.9775 8.84444 16.374 8.65344C16.771 8.46244 17.221 8.36694 17.725 8.36694C18.229 8.36694 18.6915 8.45994 19.0915 8.64594C19.4915 8.83194 19.8035 9.08994 20.0265 9.42044C20.25 9.75044 20.3635 10.1304 20.367 10.5589H18.904C18.904 10.3769 18.856 10.2134 18.759 10.0689C18.6572 9.91963 18.515 9.80239 18.349 9.73094C18.1573 9.64782 17.9499 9.6069 17.741 9.61094C17.512 9.61094 17.311 9.64894 17.138 9.72594C16.9759 9.79365 16.8357 9.90493 16.733 10.0474C16.6355 10.1883 16.5849 10.3562 16.5885 10.5274C16.5885 10.7344 16.6555 10.9059 16.7895 11.0414C16.9235 11.1774 17.1065 11.2734 17.339 11.3309L18.6145 11.6094C18.9825 11.6844 19.3105 11.8269 19.598 12.0354C19.8791 12.237 20.1094 12.5013 20.2705 12.8074C20.431 13.1129 20.5115 13.4464 20.5115 13.8069C20.5115 14.2499 20.3945 14.6474 20.161 14.9994C19.9265 15.3509 19.599 15.6269 19.1775 15.8274C18.756 16.0274 18.2735 16.1274 17.73 16.1274C17.187 16.1274 16.705 16.0289 16.286 15.8324V15.8319Z" fill="white"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_4573_12561" x1="28.1645" y1="-0.195499" x2="1.437" y2="12.196" gradientUnits="userSpaceOnUse">
+<stop offset="0.16" stop-color="#D249FC"/>
+<stop offset="0.55" stop-color="#FF2D90"/>
+</linearGradient>
+<linearGradient id="paint1_linear_4573_12561" x1="2.0335" y1="2.16289" x2="31.332" y2="31.4614" gradientUnits="userSpaceOnUse">
+<stop offset="0.3" stop-color="#FF2D90"/>
+<stop offset="0.7" stop-color="#7256FF"/>
+</linearGradient>
+<clipPath id="clip0_4573_12561">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/frontend/providers/devbox/components/Icon/icons/jetbrains/pycharm.svg b/frontend/providers/devbox/components/Icon/icons/jetbrains/pycharm.svg
new file mode 100644
index 000000000000..941ef59d4717
--- /dev/null
+++ b/frontend/providers/devbox/components/Icon/icons/jetbrains/pycharm.svg
@@ -0,0 +1,22 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4568_11976)">
+<path d="M3 23.775V29.9045C3.00003 30.1781 3.05449 30.4489 3.16019 30.7012C3.2659 30.9535 3.42075 31.1823 3.61572 31.3742C3.81068 31.5661 4.04188 31.7173 4.29585 31.819C4.54981 31.9207 4.82147 31.9708 5.095 31.9665L10.617 31.8785C10.9089 31.8738 11.1965 31.8072 11.4608 31.6831C11.7251 31.559 11.96 31.3802 12.15 31.1585L28.5035 12.0795C28.8235 11.7055 29 11.2295 29 10.737V5.0625C29 4.79165 28.9467 4.52345 28.843 4.27322C28.7394 4.02298 28.5874 3.79561 28.3959 3.60409C28.2044 3.41257 27.977 3.26065 27.7268 3.157C27.4765 3.05335 27.2084 3 26.9375 3H21.436C20.841 3 20.2755 3.257 19.8835 3.7045L3.5105 22.417C3.18141 22.7929 3 23.2754 3 23.775Z" fill="#00D886"/>
+<path d="M3 24.5074V29.9384C3 30.4854 3.2173 31.01 3.60409 31.3968C3.99089 31.7836 4.51549 32.0009 5.0625 32.0009H11.3455C11.4455 32.0009 11.5455 31.9939 11.6445 31.9789L30.237 29.2549C30.7268 29.183 31.1745 28.9373 31.4982 28.5627C31.8218 28.188 32 27.7095 32 27.2144V19.5149C32 19.244 31.9466 18.9757 31.8429 18.7254C31.7392 18.4751 31.5872 18.2477 31.3956 18.0561C31.2039 17.8646 30.9764 17.7127 30.7261 17.6091C30.4757 17.5055 30.2074 17.4523 29.9365 17.4524L20.6845 17.4549C20.4715 17.4549 20.26 17.4879 20.0575 17.5524L4.4355 22.5424C4.01881 22.6754 3.65519 22.9375 3.39717 23.2907C3.13914 23.6439 3.00005 24.07 3 24.5074Z" fill="url(#paint0_linear_4568_11976)"/>
+<path d="M0 2.0625V19.126C0 19.9555 0.4965 20.7035 1.26 21.026L19.9715 28.925C20.2305 29.0345 20.509 29.09 20.7905 29.087L29.955 29.012C30.4989 29.0074 31.0189 28.7881 31.4019 28.4019C31.7849 28.0157 31.9999 27.4939 32 26.95V18.117C32 17.714 31.882 17.3205 31.661 16.9835L21.1065 0.93C20.9188 0.644296 20.663 0.409727 20.3622 0.247391C20.0613 0.0850555 19.7248 4.31658e-05 19.383 0L2.0625 0C1.51549 0 0.990886 0.217298 0.604092 0.604092C0.217298 0.990886 0 1.51549 0 2.0625Z" fill="url(#paint1_linear_4568_11976)"/>
+<path d="M26 6H6V26H26V6Z" fill="black"/>
+<path d="M16.5 21.9999H8.49997V23.4999H16.5V21.9999ZM8.49647 8.49594H11.7175C12.246 8.49594 12.7095 8.59244 13.1075 8.78544C13.5065 8.97844 13.8135 9.24994 14.03 9.60044C14.246 9.95044 14.354 10.3554 14.354 10.8164C14.354 11.2774 14.244 11.6959 14.0245 12.0494C13.8045 12.4034 13.493 12.6774 13.0895 12.8724C12.6855 13.0674 12.214 13.1644 11.6745 13.1644H9.95947V15.9999H8.49597V8.49644L8.49647 8.49594ZM12.2665 11.8109C12.451 11.7199 12.5925 11.5894 12.6925 11.4199C12.7925 11.2499 12.8425 11.0509 12.8425 10.8224C12.8425 10.5939 12.7925 10.4014 12.6925 10.2354C12.5925 10.0689 12.4505 9.94044 12.2665 9.84944C12.0825 9.75844 11.8675 9.71294 11.621 9.71294H9.95897V11.9479H11.621C11.8675 11.9479 12.0825 11.9019 12.2665 11.8109ZM16.8565 15.6209C16.2808 15.2903 15.8063 14.8086 15.4845 14.2279C15.1525 13.6364 14.9865 12.9764 14.9865 12.2474C14.9865 11.5184 15.1525 10.8584 15.4845 10.2674C15.8063 9.68664 16.2807 9.2048 16.8565 8.87394C17.439 8.53644 18.0895 8.36694 18.8075 8.36694C19.415 8.36694 19.9725 8.47944 20.4795 8.70444C20.9699 8.91676 21.4039 9.2407 21.747 9.65044C22.0834 10.0537 22.3162 10.5331 22.425 11.0469H20.892C20.7947 10.7797 20.6422 10.5359 20.4445 10.3314C20.2429 10.1237 19.9991 9.9617 19.7295 9.85644C19.439 9.74359 19.1296 9.68725 18.818 9.69044C18.3745 9.69044 17.9745 9.80144 17.617 10.0229C17.2593 10.2452 16.9693 10.5611 16.7785 10.9364C16.5765 11.3244 16.4755 11.7609 16.4755 12.2464C16.4755 12.7329 16.5765 13.1694 16.7785 13.5569C16.9691 13.9325 17.2592 14.2487 17.617 14.4709C17.9745 14.6924 18.3745 14.8029 18.818 14.8029C19.1295 14.8063 19.4387 14.7499 19.729 14.6369C19.9965 14.5331 20.2387 14.3731 20.4393 14.1679C20.6399 13.9626 20.7943 13.7168 20.892 13.4469H22.425C22.3161 13.9606 22.0833 14.4398 21.747 14.8429C21.4039 15.2527 20.9699 15.5766 20.4795 15.7889C19.972 16.0139 19.415 16.1264 18.8075 16.1264C18.0895 16.1264 17.439 15.9579 16.8565 15.6199V15.6209Z" fill="white"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_4568_11976" x1="3.8355" y1="32.1964" x2="30.563" y2="19.8044" gradientUnits="userSpaceOnUse">
+<stop offset="0.1" stop-color="#00D886"/>
+<stop offset="0.59" stop-color="#F0EB18"/>
+</linearGradient>
+<linearGradient id="paint1_linear_4568_11976" x1="29.9665" y1="29.838" x2="0.668499" y2="0.540001" gradientUnits="userSpaceOnUse">
+<stop offset="0.3" stop-color="#F0EB18"/>
+<stop offset="0.7" stop-color="#00C4F4"/>
+</linearGradient>
+<clipPath id="clip0_4568_11976">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/frontend/providers/devbox/components/Icon/icons/jetbrains/rider.svg b/frontend/providers/devbox/components/Icon/icons/jetbrains/rider.svg
new file mode 100644
index 000000000000..9bd0196bc42e
--- /dev/null
+++ b/frontend/providers/devbox/components/Icon/icons/jetbrains/rider.svg
@@ -0,0 +1,22 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4573_12570)">
+<path d="M23.775 29H29.904C30.1776 29 30.4484 28.9455 30.7007 28.8398C30.953 28.7341 31.1818 28.5793 31.3737 28.3843C31.5656 28.1893 31.7168 27.9581 31.8185 27.7042C31.9202 27.4502 31.9703 27.1785 31.966 26.905L31.878 21.383C31.8734 21.0911 31.8068 20.8034 31.6827 20.5392C31.5585 20.2749 31.3797 20.04 31.158 19.85L12.079 3.4965C11.7052 3.1762 11.2292 3.0001 10.737 3H5.0625C4.51549 3 3.99089 3.2173 3.60409 3.60409C3.2173 3.99089 3 4.51549 3 5.0625V10.564C3 11.159 3.257 11.7245 3.7045 12.116L22.417 28.49C22.793 28.8189 23.2755 29.0001 23.775 29Z" fill="#007DFE"/>
+<path d="M24.5065 29H29.9375C30.4845 29 31.0091 28.7827 31.3959 28.3959C31.7827 28.0091 32 27.4845 32 26.9375V20.6545C32 20.5545 31.993 20.4545 31.978 20.3555L29.254 1.7635C29.1822 1.27356 28.9366 0.825807 28.562 0.502025C28.1873 0.178244 27.7087 5.08847e-05 27.2135 0L19.5145 0C19.2436 -7.96014e-09 18.9754 0.0533647 18.7251 0.157046C18.4749 0.260728 18.2475 0.412695 18.0559 0.604269C17.8644 0.795843 17.7125 1.02327 17.6089 1.27356C17.5053 1.52385 17.452 1.79211 17.452 2.063L17.4545 11.3155C17.4545 11.528 17.4875 11.7395 17.552 11.942L22.5415 27.565C22.6747 27.9816 22.9367 28.3451 23.2899 28.603C23.6431 28.861 24.0692 29 24.5065 29Z" fill="url(#paint0_linear_4573_12570)"/>
+<path d="M2.0625 32H19.126C19.5315 32 19.928 31.8805 20.2659 31.6564C20.6038 31.4323 20.8682 31.1135 21.026 30.74L28.925 12.0285C29.0345 11.7695 29.09 11.4905 29.087 11.2095L29.012 2.045C29.0075 1.50107 28.7883 0.980954 28.4021 0.597923C28.0159 0.214892 27.4939 -1.84852e-05 26.95 1.19253e-09H18.117C17.7144 0.000125624 17.3205 0.117959 16.984 0.339L0.93 10.8935C0.644296 11.0812 0.409727 11.337 0.247391 11.6378C0.0850555 11.9387 4.31658e-05 12.2752 0 12.617L0 29.9375C0 30.4845 0.217298 31.0091 0.604092 31.3959C0.990886 31.7827 1.51549 32 2.0625 32Z" fill="url(#paint1_linear_4573_12570)"/>
+<path d="M26 6H6V26H26V6Z" fill="black"/>
+<path d="M16.5 22.0001H8.49997V23.5001H16.5V22.0001ZM8.49597 8.49609H11.717C12.242 8.49609 12.705 8.59259 13.105 8.78559C13.505 8.97859 13.8135 9.25009 14.03 9.60059C14.246 9.95059 14.354 10.3556 14.354 10.8166C14.354 11.2776 14.244 11.6916 14.024 12.0466C13.8045 12.4026 13.4915 12.6776 13.0865 12.8721C12.681 13.0671 12.21 13.1641 11.674 13.1641H9.95897V15.9991H8.49597V8.49609ZM12.266 11.8111C12.4505 11.7196 12.5925 11.5891 12.6925 11.4196C12.7925 11.2496 12.8425 11.0526 12.8425 10.8276C12.8425 10.6026 12.7925 10.4016 12.6925 10.2351C12.5925 10.0691 12.45 9.94009 12.2665 9.84909C12.0825 9.75809 11.867 9.71259 11.6205 9.71259H9.95897V11.9476H11.6205C11.867 11.9476 12.0825 11.9026 12.2665 11.8111H12.266ZM10.951 12.6926H12.548L14.515 16.0001H12.8375L10.951 12.6926ZM15.8065 8.49609H18.663C19.374 8.49609 20.011 8.65659 20.574 8.97859C21.1297 9.29309 21.5869 9.75603 21.8945 10.3156C22.2125 10.8856 22.3715 11.5291 22.3715 12.2476C22.3715 12.9661 22.2125 13.6101 21.895 14.1801C21.5871 14.7396 21.1297 15.2025 20.574 15.5171C20.0115 15.8386 19.374 15.9991 18.663 15.9991H15.8065V8.49609ZM19.8205 14.4341C20.1565 14.2341 20.4155 13.9476 20.598 13.5741C20.78 13.2006 20.8715 12.7591 20.8715 12.2476C20.8715 11.7361 20.78 11.2941 20.598 10.9211C20.4155 10.5476 20.1565 10.2611 19.8205 10.0606C19.4845 9.86059 19.0935 9.76059 18.647 9.76059H17.2695V14.7341H18.647C19.0935 14.7341 19.4845 14.6341 19.8205 14.4341Z" fill="white"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_4573_12570" x1="32.1955" y1="28.1645" x2="19.8035" y2="1.437" gradientUnits="userSpaceOnUse">
+<stop offset="0.21" stop-color="#007DFE"/>
+<stop offset="0.55" stop-color="#FFB700"/>
+</linearGradient>
+<linearGradient id="paint1_linear_4573_12570" x1="29.838" y1="2.0335" x2="0.539999" y2="31.3315" gradientUnits="userSpaceOnUse">
+<stop offset="0.23" stop-color="#FFB700"/>
+<stop offset="0.73" stop-color="#FF0A67"/>
+</linearGradient>
+<clipPath id="clip0_4573_12570">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/frontend/providers/devbox/components/Icon/icons/jetbrains/rubymine.svg b/frontend/providers/devbox/components/Icon/icons/jetbrains/rubymine.svg
new file mode 100644
index 000000000000..8a856db18492
--- /dev/null
+++ b/frontend/providers/devbox/components/Icon/icons/jetbrains/rubymine.svg
@@ -0,0 +1,22 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4568_12034)">
+<path d="M29.9375 1.67961e-10H12.874C12.4685 -5.17355e-06 12.0721 0.119515 11.7341 0.343618C11.3962 0.567721 11.1318 0.886464 10.974 1.26L3.07554 19.971C2.96594 20.2302 2.91063 20.5091 2.91304 20.7905L2.98804 29.9545C2.99252 30.4986 3.2118 31.0188 3.59811 31.4019C3.98442 31.7851 4.50646 32 5.05054 32H13.8835C14.2862 32.0002 14.6801 31.8823 15.0165 31.661L31.071 21.107C31.3567 20.9192 31.5912 20.6633 31.7533 20.3624C31.9155 20.0614 32.0003 19.7249 32 19.383V2.0625C32 1.51549 31.7827 0.990886 31.3959 0.604092C31.0092 0.217298 30.4845 1.67962e-10 29.9375 1.67961e-10Z" fill="url(#paint0_linear_4568_12034)"/>
+<path d="M7.4935 3H2.063C1.79211 2.99993 1.52385 3.05323 1.27356 3.15685C1.02327 3.26048 0.795843 3.41239 0.604269 3.60392C0.412695 3.79544 0.260728 4.02283 0.157046 4.2731C0.0533647 4.52337 -7.96014e-09 4.79161 0 5.0625L0 11.3455C0 11.4455 0.007 11.5455 0.022 11.6445L2.746 30.2365C2.81777 30.7263 3.06335 31.174 3.43788 31.4978C3.81242 31.8216 4.29092 31.9998 4.786 32H12.485C12.7559 32 13.0241 31.9466 13.2744 31.843C13.5247 31.7393 13.7521 31.5873 13.9436 31.3957C14.1351 31.2042 14.287 30.9767 14.3906 30.7264C14.4943 30.4761 14.5476 30.2079 14.5475 29.937L14.5455 20.685C14.5455 20.472 14.512 20.26 14.4475 20.058L9.458 4.435C9.32489 4.01848 9.06288 3.65504 8.70978 3.39711C8.35669 3.13919 7.93077 3.00013 7.4935 3Z" fill="url(#paint1_linear_4568_12034)"/>
+<path d="M8.225 3H2.095C1.82143 3.00003 1.55061 3.05449 1.29829 3.16019C1.04597 3.2659 0.817204 3.42075 0.625305 3.61572C0.433406 3.81069 0.282212 4.04188 0.180525 4.29585C0.0788374 4.54981 0.0286893 4.82147 0.033 5.095L0 10.5C0.0095 11.0905 0.393 11.7655 0.8415 12.15L19.9205 28.503C20.2945 28.8235 20.7705 28.9995 21.2625 28.9995H26.9375C27.4845 28.9995 28.0091 28.7822 28.3959 28.3954C28.7827 28.0086 29 27.484 29 26.937V21.4355C29 20.841 28.743 20.2755 28.295 19.8835L9.5835 3.5105C9.20751 3.1813 8.72474 2.99988 8.225 3Z" fill="#FF8100"/>
+<path d="M26 6H6V26H26V6Z" fill="black"/>
+<path d="M16.5 22.0001H8.5V23.5001H16.5V22.0001ZM8.506 8.49609H11.727C12.252 8.49609 12.7145 8.59259 13.115 8.78559C13.515 8.97859 13.823 9.25009 14.0395 9.60059C14.2555 9.95059 14.3635 10.3556 14.3635 10.8166C14.3635 11.2776 14.2535 11.6916 14.0335 12.0466C13.8145 12.4026 13.5015 12.6776 13.096 12.8721C12.6905 13.0671 12.22 13.1641 11.684 13.1641H9.969V15.9991H8.506V8.49609ZM12.276 11.8111C12.46 11.7196 12.602 11.5891 12.702 11.4196C12.802 11.2496 12.852 11.0526 12.852 10.8276C12.852 10.6026 12.802 10.4016 12.702 10.2351C12.602 10.0691 12.46 9.94009 12.276 9.84909C12.092 9.75809 11.877 9.71259 11.63 9.71259H9.9685V11.9476H11.63C11.877 11.9476 12.092 11.9026 12.276 11.8111ZM10.9605 12.6926H12.5575L14.525 16.0001H12.8475L10.961 12.6931L10.9605 12.6926ZM15.8165 8.49609H17.853L19.3965 13.4211L19.525 14.0646L19.6375 13.4216L21.1275 8.49659H23.1965V15.9991H21.7495V10.6451L21.771 10.2541L20.024 15.9991H18.9625L17.237 10.2916L17.2585 10.6451V15.9991H15.817V8.49609H15.8165Z" fill="white"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_4568_12034" x1="2.16254" y1="29.966" x2="31.4605" y2="0.668499" gradientUnits="userSpaceOnUse">
+<stop offset="0.29" stop-color="#FF2358"/>
+<stop offset="0.75" stop-color="#7256FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_4568_12034" x1="-0.1955" y1="3.8355" x2="12.1965" y2="30.5625" gradientUnits="userSpaceOnUse">
+<stop offset="0.29" stop-color="#FF8100"/>
+<stop offset="0.56" stop-color="#FF2358"/>
+</linearGradient>
+<clipPath id="clip0_4568_12034">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/frontend/providers/devbox/components/Icon/icons/jetbrains/rustover.svg b/frontend/providers/devbox/components/Icon/icons/jetbrains/rustover.svg
new file mode 100644
index 000000000000..a16161580ad9
--- /dev/null
+++ b/frontend/providers/devbox/components/Icon/icons/jetbrains/rustover.svg
@@ -0,0 +1,22 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4573_12579)">
+<path d="M3 23.775V29.904C3.00003 30.1776 3.05449 30.4484 3.16019 30.7007C3.2659 30.953 3.42075 31.1818 3.61572 31.3737C3.81068 31.5656 4.04188 31.7168 4.29585 31.8185C4.54981 31.9202 4.82147 31.9703 5.095 31.966L10.617 31.878C10.9089 31.8734 11.1966 31.8068 11.4608 31.6827C11.7251 31.5585 11.96 31.3797 12.15 31.158L28.5035 12.079C28.8235 11.7055 29 11.229 29 10.737V5.0625C29 4.79165 28.9467 4.52345 28.843 4.27322C28.7394 4.02298 28.5874 3.79561 28.3959 3.60409C28.2044 3.41257 27.977 3.26065 27.7268 3.157C27.4765 3.05335 27.2084 3 26.9375 3H21.436C20.841 3 20.2755 3.257 19.8835 3.7045L3.5105 22.4165C3.18134 22.7925 2.99993 23.2753 3 23.775Z" fill="#00D886"/>
+<path d="M3 24.5074V29.9384C3 30.4854 3.2173 31.01 3.60409 31.3968C3.99089 31.7836 4.51549 32.0009 5.0625 32.0009H11.3455C11.4455 32.0009 11.5455 31.9939 11.6445 31.9789L30.237 29.2549C30.7268 29.183 31.1745 28.9373 31.4982 28.5627C31.8218 28.188 32 27.7095 32 27.2144V19.5149C32 19.244 31.9466 18.9757 31.8429 18.7254C31.7392 18.4751 31.5872 18.2477 31.3956 18.0561C31.2039 17.8646 30.9764 17.7127 30.7261 17.6091C30.4757 17.5055 30.2074 17.4523 29.9365 17.4524L20.6845 17.4549C20.4715 17.4549 20.26 17.4879 20.0575 17.5524L4.4355 22.5424C4.01881 22.6754 3.65519 22.9375 3.39717 23.2907C3.13914 23.6439 3.00005 24.07 3 24.5074Z" fill="url(#paint0_linear_4573_12579)"/>
+<path d="M0 2.0625V19.126C0 19.9555 0.4965 20.7035 1.26 21.026L19.9715 28.925C20.2305 29.0345 20.509 29.09 20.7905 29.087L29.955 29.012C30.4989 29.0074 31.0189 28.7881 31.4019 28.4019C31.7849 28.0157 31.9999 27.4939 32 26.95V18.117C32 17.714 31.882 17.3205 31.661 16.9835L21.1065 0.93C20.9188 0.644296 20.663 0.409727 20.3622 0.247391C20.0613 0.0850555 19.7248 4.31658e-05 19.383 0L2.0625 0C1.51549 0 0.990886 0.217298 0.604092 0.604092C0.217298 0.990886 0 1.51549 0 2.0625Z" fill="url(#paint1_linear_4573_12579)"/>
+<path d="M26 6H6V26H26V6Z" fill="black"/>
+<path d="M16.5 22.0001H8.49997V23.5001H16.5V22.0001ZM8.49597 8.49609H11.717C12.242 8.49609 12.705 8.59259 13.105 8.78559C13.505 8.97859 13.8135 9.25009 14.03 9.60059C14.246 9.95059 14.354 10.3556 14.354 10.8166C14.354 11.2776 14.244 11.6916 14.024 12.0466C13.8045 12.4026 13.4915 12.6776 13.0865 12.8721C12.681 13.0671 12.21 13.1641 11.674 13.1641H9.95897V15.9991H8.49597V8.49609ZM12.266 11.8111C12.4505 11.7196 12.5925 11.5891 12.6925 11.4196C12.7925 11.2496 12.8425 11.0526 12.8425 10.8276C12.8425 10.6026 12.7925 10.4016 12.6925 10.2351C12.5925 10.0691 12.45 9.94009 12.2665 9.84909C12.0825 9.75809 11.867 9.71259 11.6205 9.71259H9.95897V11.9476H11.6205C11.867 11.9476 12.0825 11.9026 12.2665 11.8111H12.266ZM10.951 12.6926H12.548L14.515 16.0001H12.8375L10.951 12.6926ZM15.8065 8.49609H19.0275C19.5525 8.49609 20.0155 8.59259 20.4155 8.78559C20.8155 8.97859 21.124 9.25009 21.3405 9.60059C21.5565 9.95059 21.6645 10.3556 21.6645 10.8166C21.6645 11.2776 21.5545 11.6916 21.3345 12.0466C21.115 12.4026 20.8025 12.6776 20.397 12.8721C19.9915 13.0671 19.5205 13.1641 18.985 13.1641H17.27V15.9991H15.8065V8.49609ZM19.5765 11.8111C19.761 11.7196 19.903 11.5891 20.003 11.4196C20.103 11.2496 20.153 11.0526 20.153 10.8276C20.153 10.6026 20.103 10.4016 20.003 10.2351C19.903 10.0691 19.7605 9.94009 19.577 9.84909C19.393 9.75809 19.1775 9.71259 18.931 9.71259H17.2695V11.9476H18.931C19.1775 11.9476 19.3925 11.9026 19.5765 11.8111ZM18.2615 12.6926H19.8585L21.8255 16.0001H20.148L18.2615 12.6926Z" fill="white"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_4573_12579" x1="3.8355" y1="32.1964" x2="30.5625" y2="19.8044" gradientUnits="userSpaceOnUse">
+<stop offset="0.08" stop-color="#00D886"/>
+<stop offset="0.46" stop-color="#FFAB00"/>
+</linearGradient>
+<linearGradient id="paint1_linear_4573_12579" x1="29.966" y1="29.838" x2="0.667998" y2="0.539999" gradientUnits="userSpaceOnUse">
+<stop offset="0.19" stop-color="#FFAB00"/>
+<stop offset="0.83" stop-color="#FF004C"/>
+</linearGradient>
+<clipPath id="clip0_4573_12579">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/frontend/providers/devbox/components/Icon/icons/jetbrains/webstorm.svg b/frontend/providers/devbox/components/Icon/icons/jetbrains/webstorm.svg
new file mode 100644
index 000000000000..5ced52cd7fc3
--- /dev/null
+++ b/frontend/providers/devbox/components/Icon/icons/jetbrains/webstorm.svg
@@ -0,0 +1,22 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4568_12025)">
+<path d="M3 23.775V29.904C3.00003 30.1776 3.05449 30.4484 3.16019 30.7007C3.2659 30.953 3.42075 31.1818 3.61572 31.3737C3.81068 31.5656 4.04188 31.7168 4.29585 31.8185C4.54981 31.9202 4.82147 31.9703 5.095 31.966L10.617 31.878C10.9089 31.8734 11.1966 31.8068 11.4608 31.6827C11.7251 31.5585 11.96 31.3797 12.15 31.158L28.5035 12.079C28.8235 11.7055 29 11.229 29 10.737V5.0625C29 4.79165 28.9467 4.52345 28.843 4.27322C28.7394 4.02298 28.5874 3.79561 28.3959 3.60409C28.2044 3.41257 27.977 3.26065 27.7268 3.157C27.4765 3.05335 27.2084 3 26.9375 3H21.436C20.841 3 20.2755 3.257 19.8835 3.7045L3.5105 22.4165C3.18134 22.7925 2.99993 23.2753 3 23.775Z" fill="#F0EB18"/>
+<path d="M3 24.5074V29.9384C3 30.4854 3.2173 31.01 3.60409 31.3968C3.99089 31.7836 4.51549 32.0009 5.0625 32.0009H11.3455C11.4455 32.0009 11.5455 31.9939 11.6445 31.9789L30.237 29.2549C30.7268 29.183 31.1745 28.9373 31.4982 28.5627C31.8218 28.188 32 27.7095 32 27.2144V19.5149C32 19.244 31.9466 18.9757 31.8429 18.7254C31.7392 18.4751 31.5872 18.2477 31.3956 18.0561C31.2039 17.8646 30.9764 17.7127 30.7261 17.6091C30.4757 17.5055 30.2074 17.4523 29.9365 17.4524L20.6845 17.4549C20.4715 17.4549 20.26 17.4879 20.0575 17.5524L4.4355 22.5424C4.01881 22.6754 3.65519 22.9375 3.39717 23.2907C3.13914 23.6439 3.00005 24.07 3 24.5074Z" fill="url(#paint0_linear_4568_12025)"/>
+<path d="M0 2.0625V19.126C0 19.9555 0.4965 20.7035 1.26 21.026L19.9715 28.925C20.2305 29.0345 20.509 29.09 20.7905 29.087L29.955 29.012C30.4989 29.0074 31.0189 28.7881 31.4019 28.4019C31.7849 28.0157 31.9999 27.4939 32 26.95V18.117C32 17.714 31.882 17.3205 31.661 16.9835L21.1065 0.93C20.9188 0.644296 20.663 0.409727 20.3622 0.247391C20.0613 0.0850555 19.7248 4.31658e-05 19.383 0L2.0625 0C1.51549 0 0.990886 0.217298 0.604092 0.604092C0.217298 0.990886 0 1.51549 0 2.0625Z" fill="url(#paint1_linear_4568_12025)"/>
+<path d="M26 6H6V26H26V6Z" fill="black"/>
+<path d="M16.5 21.9999H8.50004V23.4999H16.5V21.9999ZM9.52555 8.49594L10.737 13.9734L12.0285 8.49594H13.5075L14.858 13.9734L16.032 8.49594H17.517L15.6945 15.9989H14.0275L12.7625 10.5489L11.482 15.9989H9.82004L8.00854 8.49594H9.52504H9.52555ZM19.331 15.8319C18.911 15.6354 18.5825 15.3604 18.345 15.0069C18.1075 14.6529 17.985 14.2459 17.9775 13.7849H19.446C19.446 14.0029 19.503 14.1939 19.6175 14.3584C19.732 14.5229 19.891 14.6514 20.0945 14.7444C20.298 14.8369 20.532 14.8834 20.7965 14.8834C21.0615 14.8834 21.2725 14.8419 21.464 14.7579C21.655 14.6739 21.803 14.5569 21.9085 14.4069C22.0135 14.2569 22.0665 14.0854 22.0665 13.8924C22.0665 13.6529 21.994 13.4549 21.8495 13.2974C21.7045 13.1404 21.5055 13.0314 21.252 12.9704L19.928 12.6754C19.5925 12.6068 19.2749 12.469 18.9955 12.2709C18.7369 12.0864 18.5258 11.843 18.3795 11.5609C18.233 11.2789 18.1595 10.9609 18.1595 10.6069C18.1595 10.1784 18.2705 9.79344 18.492 9.45194C18.7135 9.11094 19.0225 8.84444 19.419 8.65344C19.8155 8.46244 20.266 8.36694 20.7695 8.36694C21.2735 8.36694 21.7365 8.45994 22.1365 8.64594C22.5365 8.83194 22.848 9.08994 23.0715 9.42044C23.295 9.75044 23.408 10.1304 23.4115 10.5589H21.949C21.949 10.3769 21.9005 10.2134 21.804 10.0689C21.7075 9.92444 21.571 9.81144 21.394 9.73094C21.2022 9.64775 20.9946 9.60682 20.7855 9.61094C20.557 9.61094 20.356 9.64894 20.183 9.72594C20.021 9.79367 19.8808 9.90495 19.778 10.0474C19.6806 10.1883 19.63 10.3562 19.6335 10.5274C19.6335 10.7344 19.7005 10.9059 19.8345 11.0414C19.9685 11.1774 20.1515 11.2734 20.384 11.3309L21.659 11.6094C22.0275 11.6844 22.355 11.8269 22.643 12.0354C22.9242 12.237 23.1544 12.5013 23.3155 12.8074C23.4769 13.1157 23.5596 13.459 23.5565 13.8069C23.5565 14.2499 23.4395 14.6474 23.2055 14.9994C22.9715 15.3509 22.644 15.6269 22.2225 15.8274C21.8005 16.0274 21.318 16.1274 20.7755 16.1274C20.2325 16.1274 19.7505 16.0289 19.331 15.8324V15.8319Z" fill="white"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_4568_12025" x1="3.8355" y1="32.1959" x2="30.563" y2="19.8044" gradientUnits="userSpaceOnUse">
+<stop offset="0.22" stop-color="#F0EB18"/>
+<stop offset="0.59" stop-color="#00C4F4"/>
+</linearGradient>
+<linearGradient id="paint1_linear_4568_12025" x1="29.966" y1="29.838" x2="0.668499" y2="0.539501" gradientUnits="userSpaceOnUse">
+<stop offset="0.19" stop-color="#00C4F4"/>
+<stop offset="0.83" stop-color="#007DFE"/>
+</linearGradient>
+<clipPath id="clip0_4568_12025">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/frontend/providers/devbox/components/Icon/icons/trae.svg b/frontend/providers/devbox/components/Icon/icons/trae.svg
new file mode 100644
index 000000000000..98d7f158a2af
--- /dev/null
+++ b/frontend/providers/devbox/components/Icon/icons/trae.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 28 28" fill="none"><path d="M27.4343 0H0.565657C0.253253 0 0 0.253253 0 0.565657V27.4343C0 27.7467 0.253253 28 0.565657 28H27.4343C27.7467 28 28 27.7467 28 27.4343V0.565657C28 0.253253 27.7467 0 27.4343 0Z" fill="#FF4A36"></path><path d="M22.9121 19.8093H13.8616V22.9091H22.9121V19.8093Z" fill="#ffffff"></path></svg>
\ No newline at end of file
diff --git a/frontend/providers/devbox/components/Icon/index.tsx b/frontend/providers/devbox/components/Icon/index.tsx
index 2e893f8f8e87..abb0d6684ad4 100644
--- a/frontend/providers/devbox/components/Icon/index.tsx
+++ b/frontend/providers/devbox/components/Icon/index.tsx
@@ -1,5 +1,5 @@
-import type { IconProps } from '@chakra-ui/react'
-import { Icon } from '@chakra-ui/react'
+import type { IconProps } from '@chakra-ui/react';
+import { Icon } from '@chakra-ui/react';
 
 const map = {
   codeServer: require('./icons/codeServer.svg').default,
@@ -49,6 +49,7 @@ const map = {
   upload: require('./icons/upload.svg').default,
   target: require('./icons/target.svg').default,
   arrowDown: require('./icons/arrowDown.svg').default,
+  arrowRight: require('./icons/arrowRight.svg').default,
   docs: require('./icons/docs.svg').default,
   vscode: require('./icons/vscode.svg').default,
   monitor: require('./icons/monitor.svg').default,
@@ -70,7 +71,21 @@ const map = {
   official: require('./icons/official.svg').default,
   firstPage: require('./icons/firstPage.svg').default,
   prePage: require('./icons/prePage.svg').default,
-}
+  jetbrains: require('./icons/jetbrains.svg').default,
+
+  clion: require('./icons/jetbrains/clion.svg').default,
+  goland: require('./icons/jetbrains/goland.svg').default,
+  intellij: require('./icons/jetbrains/intellij.svg').default,
+  pycharm: require('./icons/jetbrains/pycharm.svg').default,
+  phpstorm: require('./icons/jetbrains/phpstorm.svg').default,
+  rider: require('./icons/jetbrains/rider.svg').default,
+  rubymine: require('./icons/jetbrains/rubymine.svg').default,
+  rustover: require('./icons/jetbrains/rustover.svg').default,
+  webstorm: require('./icons/jetbrains/webstorm.svg').default,
+  gift: require('./icons/gift.svg').default,
+  fileConfig: require('./icons/fileConfig.svg').default,
+  trae: require('./icons/trae.svg').default
+};
 
 const MyIcon = ({
   name,
@@ -80,7 +95,7 @@ const MyIcon = ({
 }: { name: keyof typeof map } & IconProps) => {
   return map[name] ? (
     <Icon as={map[name]} verticalAlign={'text-top'} fill={'currentColor'} w={w} h={h} {...props} />
-  ) : null
-}
+  ) : null;
+};
 
-export default MyIcon
+export default MyIcon;
diff --git a/frontend/providers/devbox/components/MyFormControl.tsx b/frontend/providers/devbox/components/MyFormControl.tsx
index 84879d914802..a82364d46b80 100644
--- a/frontend/providers/devbox/components/MyFormControl.tsx
+++ b/frontend/providers/devbox/components/MyFormControl.tsx
@@ -1,13 +1,26 @@
-import { FormLabel, FormLabelProps } from "@chakra-ui/react";
+import { FormLabel, FormLabelProps } from '@chakra-ui/react';
 
-export default function MyFormLabel({ isRequired, children, ...props }: FormLabelProps & { isRequired?: boolean }) {
-  return <FormLabel {...props} _before={
-      isRequired ? {
-        content: '"*"',
-        // display: 'none',
-        color: 'red.600',
-        fontSize:'14px',
-        fontWeight:'500',
-      } : {}
-    }>{children}</FormLabel>
-}
\ No newline at end of file
+export default function MyFormLabel({
+  isRequired,
+  children,
+  ...props
+}: FormLabelProps & { isRequired?: boolean }) {
+  return (
+    <FormLabel
+      {...props}
+      _before={
+        isRequired
+          ? {
+              content: '"*"',
+              // display: 'none',
+              color: 'red.600',
+              fontSize: '14px',
+              fontWeight: '500'
+            }
+          : {}
+      }
+    >
+      {children}
+    </FormLabel>
+  );
+}
diff --git a/frontend/providers/devbox/components/MyTable.tsx b/frontend/providers/devbox/components/MyTable.tsx
index 7244b3cd1147..505ebd9f6f73 100644
--- a/frontend/providers/devbox/components/MyTable.tsx
+++ b/frontend/providers/devbox/components/MyTable.tsx
@@ -1,33 +1,44 @@
-import { Box, BoxProps, Flex, Grid } from '@chakra-ui/react'
+import { Box, BoxProps, Flex, Grid } from '@chakra-ui/react';
 
 interface Props extends BoxProps {
   columns: {
-    title: string
-    dataIndex?: string
-    key: string
-    render?: (item: any) => JSX.Element
-    minWidth?: string
-    width?: string
-  }[]
-  data: any[]
-  itemClass?: string
-  alternateRowColors?: boolean,
-  needRadius?: boolean
+    title: string;
+    dataIndex?: string;
+    key: string;
+    render?: (item: any) => JSX.Element;
+    minWidth?: string;
+    width?: string;
+  }[];
+  data: any[];
+  itemClass?: string;
+  alternateRowColors?: boolean;
+  needRadius?: boolean;
 }
 
-
-const MyTable = ({ columns, data, itemClass = '', alternateRowColors = false, needRadius = false, gridTemplateColumns }: Props) => {
+const MyTable = ({
+  columns,
+  data,
+  itemClass = '',
+  alternateRowColors = false,
+  needRadius = false,
+  gridTemplateColumns
+}: Props) => {
   return (
     <>
       <Grid
-        templateColumns={gridTemplateColumns ? gridTemplateColumns : columns.map((col) => col.width || '1fr').join(' ')}
+        templateColumns={
+          gridTemplateColumns
+            ? gridTemplateColumns
+            : columns.map((col) => col.width || '1fr').join(' ')
+        }
         overflowX={'auto'}
         borderTopRadius={'md'}
         borderBottomRadius={needRadius ? 'md' : '0'}
         fontSize={'base'}
         color={'grayModern.600'}
         fontWeight={'bold'}
-        backgroundColor={'grayModern.100'}>
+        backgroundColor={'grayModern.100'}
+      >
         {columns.map((item) => (
           <Box
             px={3}
@@ -37,21 +48,27 @@ const MyTable = ({ columns, data, itemClass = '', alternateRowColors = false, ne
             _first={{ pl: 7 }}
             minWidth={item.minWidth || '100px'}
             overflow={'hidden'}
-            textOverflow={'ellipsis'}>
+            textOverflow={'ellipsis'}
+          >
             {item.title}
           </Box>
         ))}
       </Grid>
       {data.map((item: any, index1) => (
         <Grid
-          templateColumns={gridTemplateColumns ? gridTemplateColumns : columns.map((col) => col.width || '1fr').join(' ')}
+          templateColumns={
+            gridTemplateColumns
+              ? gridTemplateColumns
+              : columns.map((col) => col.width || '1fr').join(' ')
+          }
           overflowX={'auto'}
           key={index1}
           bg={alternateRowColors ? (index1 % 2 === 0 ? '#FBFBFC' : '#F4F4F7') : 'white'}
           _hover={{ bg: '#FBFBFC' }}
           borderBottomRadius={index1 === data.length - 1 ? 'md' : '0px'}
           borderBottom={'1px solid'}
-          borderBottomColor={index1 !== data.length - 1 ? 'grayModern.150' : 'transparent'}>
+          borderBottomColor={index1 !== data.length - 1 ? 'grayModern.150' : 'transparent'}
+        >
           {columns.map((col, index2) => (
             <Flex
               className={index2 === 0 ? itemClass : ''}
@@ -63,14 +80,15 @@ const MyTable = ({ columns, data, itemClass = '', alternateRowColors = false, ne
               fontSize={'base'}
               fontWeight={'bold'}
               color={'grayModern.900'}
-              minWidth={col.minWidth || '100px'}>
+              minWidth={col.minWidth || '100px'}
+            >
               {col.render ? col.render(item) : col.dataIndex ? `${item[col.dataIndex]}` : ''}
             </Flex>
           ))}
         </Grid>
       ))}
     </>
-  )
-}
+  );
+};
 
-export default MyTable
+export default MyTable;
diff --git a/frontend/providers/devbox/components/MyTooltip.tsx b/frontend/providers/devbox/components/MyTooltip.tsx
index 3d9679ef4e47..5729e97981b2 100644
--- a/frontend/providers/devbox/components/MyTooltip.tsx
+++ b/frontend/providers/devbox/components/MyTooltip.tsx
@@ -1,4 +1,4 @@
-import { Tooltip, TooltipProps } from '@chakra-ui/react'
+import { Tooltip, TooltipProps } from '@chakra-ui/react';
 
 const MyTooltip = ({ children, ...props }: TooltipProps) => {
   return (
@@ -13,10 +13,11 @@ const MyTooltip = ({ children, ...props }: TooltipProps) => {
       py={2}
       borderRadius={'8px'}
       whiteSpace={'pre-wrap'}
-      {...props}>
+      {...props}
+    >
       {children}
     </Tooltip>
-  )
-}
+  );
+};
 
-export default MyTooltip
+export default MyTooltip;
diff --git a/frontend/providers/devbox/components/PodLineChart.tsx b/frontend/providers/devbox/components/PodLineChart.tsx
index e14993ef4a43..c9b041fec86b 100644
--- a/frontend/providers/devbox/components/PodLineChart.tsx
+++ b/frontend/providers/devbox/components/PodLineChart.tsx
@@ -1,11 +1,11 @@
-'use client'
+'use client';
 
-import dayjs from 'dayjs'
-import * as echarts from 'echarts'
-import React, { useEffect, useMemo, useRef } from 'react'
+import dayjs from 'dayjs';
+import * as echarts from 'echarts';
+import React, { useEffect, useMemo, useRef } from 'react';
 
-import { useGlobalStore } from '@/stores/global'
-import { MonitorDataResult } from '@/types/monitor'
+import { useGlobalStore } from '@/stores/global';
+import { MonitorDataResult } from '@/types/monitor';
 
 const map = {
   blue: {
@@ -93,25 +93,25 @@ const map = {
     lineColor: '#00A9A6',
     max: 100
   }
-}
+};
 
 const PodLineChart = ({
   type,
   data,
   isShowLabel = false
 }: {
-  type: 'blue' | 'deepBlue' | 'green' | 'purple'
-  data?: MonitorDataResult
-  isShowLabel?: boolean
+  type: 'blue' | 'deepBlue' | 'green' | 'purple';
+  data?: MonitorDataResult;
+  isShowLabel?: boolean;
 }) => {
-  const { screenWidth } = useGlobalStore()
+  const { screenWidth } = useGlobalStore();
   const xData =
     data?.xData?.map((time) => (time ? dayjs(time * 1000).format('HH:mm') : '')) ||
-    new Array(30).fill(0)
-  const yData = data?.yData || new Array(30).fill('')
+    new Array(30).fill(0);
+  const yData = data?.yData || new Array(30).fill('');
 
-  const Dom = useRef<HTMLDivElement>(null)
-  const myChart = useRef<echarts.ECharts>()
+  const Dom = useRef<HTMLDivElement>(null);
+  const myChart = useRef<echarts.ECharts>();
 
   const optionStyle = useMemo(
     () => ({
@@ -128,7 +128,7 @@ const PodLineChart = ({
       }
     }),
     [type]
-  )
+  );
   const option = useRef({
     xAxis: {
       type: 'category',
@@ -168,9 +168,10 @@ const PodLineChart = ({
       axisPointer: {
         type: 'line'
       },
+      appendToBody: true,
       formatter: (params: any[]) => {
-        const axisValue = params[0]?.axisValue
-        return `${axisValue} ${params[0]?.value || 0}%`
+        const axisValue = params[0]?.axisValue;
+        return `${axisValue} ${params[0]?.value || 0}%`;
       }
     },
     series: [
@@ -187,40 +188,40 @@ const PodLineChart = ({
         }
       }
     ]
-  })
+  });
 
   // init chart
   useEffect(() => {
-    if (!Dom.current || myChart?.current?.getOption()) return
-    myChart.current = echarts.init(Dom.current)
-    myChart.current && myChart.current.setOption(option.current)
-  }, [Dom])
+    if (!Dom.current || myChart?.current?.getOption()) return;
+    myChart.current = echarts.init(Dom.current);
+    myChart.current && myChart.current.setOption(option.current);
+  }, [Dom]);
 
   // data changed, update
   useEffect(() => {
-    if (!myChart.current || !myChart?.current?.getOption()) return
-    option.current.xAxis.data = xData
-    option.current.series[0].data = yData
-    myChart.current.setOption(option.current)
-  }, [xData, yData])
+    if (!myChart.current || !myChart?.current?.getOption()) return;
+    option.current.xAxis.data = xData;
+    option.current.series[0].data = yData;
+    myChart.current.setOption(option.current);
+  }, [xData, yData]);
 
   // type changed, update
   useEffect(() => {
-    if (!myChart.current || !myChart?.current?.getOption()) return
+    if (!myChart.current || !myChart?.current?.getOption()) return;
     option.current.series[0] = {
       ...option.current.series[0],
       ...optionStyle
-    }
-    myChart.current.setOption(option.current)
-  }, [optionStyle])
+    };
+    myChart.current.setOption(option.current);
+  }, [optionStyle]);
 
   // resize chart
   useEffect(() => {
-    if (!myChart.current || !myChart.current.getOption()) return
-    myChart.current.resize()
-  }, [screenWidth])
+    if (!myChart.current || !myChart.current.getOption()) return;
+    myChart.current.resize();
+  }, [screenWidth]);
 
-  return <div ref={Dom} style={{ width: '100%', height: '100%' }} />
-}
+  return <div ref={Dom} style={{ width: '100%', height: '100%' }} />;
+};
 
-export default React.memo(PodLineChart)
+export default React.memo(PodLineChart);
diff --git a/frontend/providers/devbox/components/PriceBox.tsx b/frontend/providers/devbox/components/PriceBox.tsx
index 6151a9b68c14..c7e2f9551837 100644
--- a/frontend/providers/devbox/components/PriceBox.tsx
+++ b/frontend/providers/devbox/components/PriceBox.tsx
@@ -1,48 +1,48 @@
-import { useMemo } from 'react'
-import { CurrencySymbol } from '@sealos/ui'
-import { useTranslations } from 'next-intl'
-import { Box, Flex, useTheme, Text } from '@chakra-ui/react'
+import { useMemo } from 'react';
+import { CurrencySymbol } from '@sealos/ui';
+import { useTranslations } from 'next-intl';
+import { Box, Flex, useTheme, Text } from '@chakra-ui/react';
 
-import { usePriceStore } from '@/stores/price'
-import { useEnvStore } from '@/stores/env'
+import { usePriceStore } from '@/stores/price';
+import { useEnvStore } from '@/stores/env';
 
 export const colorMap = {
   cpu: '#33BABB',
   memory: '#36ADEF',
   nodeports: '#8172D8'
-}
+};
 
 const PriceBox = ({
   components = []
 }: {
   components: {
-    cpu: number
-    memory: number
-    nodeports: number
-  }[]
+    cpu: number;
+    memory: number;
+    nodeports: number;
+  }[];
 }) => {
-  const theme = useTheme()
-  const t = useTranslations()
-  const { env } = useEnvStore()
+  const theme = useTheme();
+  const t = useTranslations();
+  const { env } = useEnvStore();
 
-  const { sourcePrice } = usePriceStore()
+  const { sourcePrice } = usePriceStore();
 
   const priceList: {
-    label: string
-    color: string
-    value: string
+    label: string;
+    color: string;
+    value: string;
   }[] = useMemo(() => {
-    let cp = 0
-    let mp = 0
-    let pp = 0
-    let tp = 0
+    let cp = 0;
+    let mp = 0;
+    let pp = 0;
+    let tp = 0;
 
     components.forEach(({ cpu, memory, nodeports }) => {
-      cp = (sourcePrice.cpu * cpu * 24) / 1000
-      mp = (sourcePrice.memory * memory * 24) / 1024
-      pp = sourcePrice.nodeports * nodeports * 24
-      tp = cp + mp + pp
-    })
+      cp = (sourcePrice.cpu * cpu * 24) / 1000;
+      mp = (sourcePrice.memory * memory * 24) / 1024;
+      pp = sourcePrice.nodeports * nodeports * 24;
+      tp = cp + mp + pp;
+    });
 
     return [
       {
@@ -57,11 +57,11 @@ const PriceBox = ({
         value: pp.toFixed(2)
       },
       { label: 'total_price', color: '#485058', value: tp.toFixed(2) }
-    ]
-  }, [components, sourcePrice.cpu, sourcePrice.memory, sourcePrice.nodeports])
+    ];
+  }, [components, sourcePrice.cpu, sourcePrice.memory, sourcePrice.nodeports]);
 
   return (
-    <Box bg={'#FFF'} borderRadius={'md'} border={theme.borders.base}>
+    <Box bg={'#FFF'} borderRadius={'md'} border={theme.borders.base} className="guide-cost">
       <Flex py={3} px={'20px'} borderBottom={theme.borders.base} gap={'8px'}>
         <Text color={'grayModern.900'} fontWeight={500}>
           {t('estimated_price')}
@@ -81,7 +81,7 @@ const PriceBox = ({
         ))}
       </Flex>
     </Box>
-  )
-}
+  );
+};
 
-export default PriceBox
+export default PriceBox;
diff --git a/frontend/providers/devbox/components/QuotaBox.tsx b/frontend/providers/devbox/components/QuotaBox.tsx
index 57d5f603522c..f5184976073c 100644
--- a/frontend/providers/devbox/components/QuotaBox.tsx
+++ b/frontend/providers/devbox/components/QuotaBox.tsx
@@ -1,12 +1,12 @@
-'use client'
+'use client';
 
-import { useMemo } from 'react'
-import { useTranslations } from 'next-intl'
-import { useQuery } from '@tanstack/react-query'
-import { Box, Flex, Progress, css, useTheme } from '@chakra-ui/react'
+import { useMemo } from 'react';
+import { useTranslations } from 'next-intl';
+import { useQuery } from '@tanstack/react-query';
+import { Box, Flex, Progress, css, useTheme } from '@chakra-ui/react';
 
-import { useUserStore } from '@/stores/user'
-import MyTooltip from '@/components/MyTooltip'
+import { useUserStore } from '@/stores/user';
+import MyTooltip from '@/components/MyTooltip';
 
 const sourceMap = {
   cpu: {
@@ -21,30 +21,30 @@ const sourceMap = {
     color: '#FFA500',
     unit: ''
   }
-}
+};
 
 const QuotaBox = ({ showBorder = true }: { showBorder?: boolean }) => {
-  const theme = useTheme()
-  const t = useTranslations()
-  const { userQuota, loadUserQuota } = useUserStore()
+  const theme = useTheme();
+  const t = useTranslations();
+  const { userQuota, loadUserQuota } = useUserStore();
 
-  useQuery(['getUserQuota'], loadUserQuota)
+  useQuery(['getUserQuota'], loadUserQuota);
   const quotaList = useMemo(() => {
-    if (!userQuota) return []
+    if (!userQuota) return [];
 
     return userQuota
       .filter((item) => item.limit > 0)
       .map((item) => {
-        const { limit, used, type } = item
-        const unit = sourceMap[type]?.unit
-        const color = sourceMap[type]?.color
+        const { limit, used, type } = item;
+        const unit = sourceMap[type]?.unit;
+        const color = sourceMap[type]?.color;
         const tip = `${t('total')}: ${limit} ${unit}
 ${t('used')}: ${used.toFixed(2)} ${unit}
-${t('remaining')}: ${(limit - used).toFixed(2)} ${unit}`
+${t('remaining')}: ${(limit - used).toFixed(2)} ${unit}`;
 
-        return { ...item, tip, color }
-      })
-  }, [userQuota, t])
+        return { ...item, tip, color };
+      });
+  }, [userQuota, t]);
 
   return userQuota.length === 0 ? null : (
     <Box borderRadius={'md'} border={showBorder && theme.borders.base} bg={'#FFF'}>
@@ -53,7 +53,8 @@ ${t('remaining')}: ${(limit - used).toFixed(2)} ${unit}`
         px={'20px'}
         borderBottom={showBorder && theme.borders.base}
         color={'grayModern.900'}
-        fontWeight={500}>
+        fontWeight={500}
+      >
         {t('resource_quota')}
       </Box>
       <Flex flexDirection={'column'} gap={'14px'} py={'16px'} px={'20px'}>
@@ -80,7 +81,7 @@ ${t('remaining')}: ${(limit - used).toFixed(2)} ${unit}`
         ))}
       </Flex>
     </Box>
-  )
-}
+  );
+};
 
-export default QuotaBox
+export default QuotaBox;
diff --git a/frontend/providers/devbox/components/ScriptCode.tsx b/frontend/providers/devbox/components/ScriptCode.tsx
new file mode 100644
index 000000000000..1735528d6a58
--- /dev/null
+++ b/frontend/providers/devbox/components/ScriptCode.tsx
@@ -0,0 +1,110 @@
+import { useState } from 'react';
+import { Box, Button, Collapse, Flex } from '@chakra-ui/react';
+
+import MyIcon from './Icon';
+import Code from './Code';
+import { useCopyData } from '@/utils/tools';
+
+const ScriptCode = ({
+  platform,
+  script,
+  defaultOpen = false,
+  oneLine = false
+}: {
+  platform: string;
+  script: string;
+  defaultOpen?: boolean;
+  oneLine?: boolean;
+}) => {
+  const [onOpenScripts, setOnOpenScripts] = useState(defaultOpen);
+
+  const { copyData } = useCopyData();
+
+  return (
+    <Flex
+      px={2}
+      py={1}
+      borderRadius={'6px'}
+      border={'1px solid'}
+      borderColor={'grayModern.200'}
+      flexDirection={oneLine ? 'row' : 'column'}
+      w={'585px'}
+      maxH={'300px'}
+      sx={{
+        '& .copy-button': {
+          display: 'none'
+        },
+        '&:hover .copy-button': {
+          display: 'flex'
+        }
+      }}
+    >
+      <Flex justifyContent={oneLine ? 'null' : 'space-between'} alignItems={'center'} w={'full'}>
+        {!oneLine && (
+          <Box>
+            <Button
+              onClick={() => setOnOpenScripts(!onOpenScripts)}
+              bg={'transparent'}
+              border={'none'}
+              boxShadow={'none'}
+              color={'grayModern.900'}
+              fontWeight={400}
+              _hover={{
+                cursor: 'pointer'
+              }}
+              leftIcon={
+                <MyIcon
+                  name="arrowRight"
+                  color={'grayModern.500'}
+                  w={'16px'}
+                  transform={onOpenScripts ? 'rotate(90deg)' : 'rotate(0)'}
+                  transition="transform 0.2s ease"
+                />
+              }
+            >
+              {platform === 'Windows' ? 'PowerShell' : 'Bash'}
+            </Button>
+          </Box>
+        )}
+        {oneLine && (
+          <Box py={2} overflowY={'auto'} h={'100%'} pl={4}>
+            <Code content={script} language={platform === 'Windows' ? 'powershell' : 'bash'} />
+          </Box>
+        )}
+        <Button
+          className="copy-button"
+          bg={'transparent'}
+          border={'none'}
+          {...(oneLine && {
+            position: 'absolute',
+            right: 2
+          })}
+          boxShadow={'none'}
+          color={'grayModern.900'}
+          _hover={{
+            color: 'brightBlue.600',
+            '& svg': {
+              color: 'brightBlue.600'
+            }
+          }}
+        >
+          <MyIcon
+            name="copy"
+            color={'grayModern.600'}
+            w={'16px'}
+            onClick={() => copyData(script)}
+          />
+        </Button>
+      </Flex>
+      {!oneLine && (
+        <Collapse in={onOpenScripts} animateOpacity>
+          <Box pt={2} pl={3} overflowY={'auto'} h={'100%'}>
+            <Code content={script} language={platform === 'Windows' ? 'powershell' : 'bash'} />
+          </Box>
+        </Collapse>
+      )}
+    </Flex>
+  );
+};
+
+export default ScriptCode;
diff --git a/frontend/providers/devbox/components/SwitchPage.tsx b/frontend/providers/devbox/components/SwitchPage.tsx
index b5579ed66170..86bda30dee9e 100644
--- a/frontend/providers/devbox/components/SwitchPage.tsx
+++ b/frontend/providers/devbox/components/SwitchPage.tsx
@@ -166,9 +166,7 @@ export default function SwitchPage({
     }
   };
   return (
-    <Flex ml={'auto'}
-      mr={'0'} h="32px" align={'center'} 
-      fontSize="14px" {...props}>
+    <Flex ml={'auto'} mr={'0'} h="32px" align={'center'} fontSize="14px" {...props}>
       <Text fontSize="14px" color={'grayModern.500'}>
         {t('total_page_items')}:
       </Text>
@@ -189,7 +187,7 @@ export default function SwitchPage({
           }}
           color={currentPage === 1 ? 'grayModern.400' : 'grayModern.900'}
         >
-          <MyIcon name='firstPage' boxSize={'12px'} fill={'currentcolor'} />
+          <MyIcon name="firstPage" boxSize={'12px'} fill={'currentcolor'} />
         </Button>
         <Button
           {...switchStyle}
@@ -204,7 +202,7 @@ export default function SwitchPage({
           }}
           color={currentPage === 1 ? 'grayModern.400' : 'grayModern.900'}
         >
-          <MyIcon name='prePage' boxSize={'12px'} fill={'currentcolor'} />
+          <MyIcon name="prePage" boxSize={'12px'} fill={'currentcolor'} />
           {/* <RightArrowIcon boxSize={'6px'} transform={'rotate(180deg)'} fill={'currentcolor'} /> */}
         </Button>
         <Text color={'grayModern.500'}>{currentPage}</Text>
@@ -224,7 +222,12 @@ export default function SwitchPage({
             setCurrentPage(currentPage + 1);
           }}
         >
-          <MyIcon name='prePage' boxSize={'12px'} fill={'currentcolor'} transform={'rotate(180deg)'} />
+          <MyIcon
+            name="prePage"
+            boxSize={'12px'}
+            fill={'currentcolor'}
+            transform={'rotate(180deg)'}
+          />
         </Button>
         <Button
           {...switchStyle}
@@ -241,7 +244,12 @@ export default function SwitchPage({
             setCurrentPage(totalPage);
           }}
         >
-          <MyIcon name='firstPage' boxSize={'12px'} fill={'currentcolor'} transform={'rotate(180deg)'} />
+          <MyIcon
+            name="firstPage"
+            boxSize={'12px'}
+            fill={'currentcolor'}
+            transform={'rotate(180deg)'}
+          />
         </Button>
       </Flex>
       <Text fontSize="12px" fontWeight="500" color={'grayModern.900'}>
@@ -252,4 +260,4 @@ export default function SwitchPage({
       </Text>
     </Flex>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/providers/devbox/components/Tab.tsx b/frontend/providers/devbox/components/Tab.tsx
new file mode 100644
index 000000000000..832acf217cb8
--- /dev/null
+++ b/frontend/providers/devbox/components/Tab.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { Box, useTab } from '@chakra-ui/react';
+
+const Tab = React.forwardRef((props: { children: React.ReactNode }, ref) => {
+  const tabProps = useTab({ ...props, ref: ref as React.Ref<HTMLElement> });
+
+  return (
+    <Box
+      {...tabProps}
+      color={'grayModern.500'}
+      bg={'white'}
+      cursor={'pointer'}
+      _hover={{
+        color: 'brightBlue.600'
+      }}
+      mr={6}
+      pb={1}
+      fontWeight={500}
+      fontSize={'14px'}
+      _selected={{
+        color: 'brightBlue.600',
+        position: 'relative',
+        '&::after': {
+          content: '""',
+          position: 'absolute',
+          bottom: '-2px',
+          left: '0px',
+          width: '100%',
+          height: '2px',
+          backgroundColor: 'brightBlue.600'
+        }
+      }}
+    >
+      {tabProps.children}
+    </Box>
+  );
+});
+
+Tab.displayName = 'Tab';
+
+export default Tab;
diff --git a/frontend/providers/devbox/components/YamlCode/index.module.scss b/frontend/providers/devbox/components/YamlCode/index.module.scss
deleted file mode 100644
index 883b64a970c3..000000000000
--- a/frontend/providers/devbox/components/YamlCode/index.module.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.markdown {
-  height: '100%';
-  div {
-    overflow: visible !important;
-  }
-}
diff --git a/frontend/providers/devbox/components/YamlCode/index.tsx b/frontend/providers/devbox/components/YamlCode/index.tsx
deleted file mode 100644
index 7f9ce5cda8f6..000000000000
--- a/frontend/providers/devbox/components/YamlCode/index.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { useMemo } from 'react'
-import ReactMarkdown from 'react-markdown'
-import SyntaxHighlighter from 'react-syntax-highlighter'
-
-import { codeTheme } from './hljs'
-
-import styles from './index.module.scss'
-
-type TMarkDown = {
-  content: string
-  [key: string]: any
-}
-
-const YamlCode = ({ content, ...props }: TMarkDown) => {
-  const code = useMemo(() => '```yaml\n' + content + '```', [content])
-
-  return (
-    <ReactMarkdown
-      {...props}
-      className={styles.markdown}
-      // eslint-disable-next-line react/no-children-prop
-      children={code}
-      components={{
-        code({ node, inline, className, children, ...props }) {
-          const match = /language-(\w+)/.exec(className || '')
-          return !inline && match ? (
-            <SyntaxHighlighter
-              // eslint-disable-next-line react/no-children-prop
-              children={String(children).replace(/\n$/, '')}
-              showLineNumbers={true}
-              // @ts-ignore nextline
-              style={codeTheme}
-              language={match[1]}
-              PreTag="div"
-              {...props}
-            />
-          ) : (
-            <code className={className} {...props}>
-              {children}
-            </code>
-          )
-        }
-      }}
-    />
-  )
-}
-
-export default YamlCode
diff --git a/frontend/providers/devbox/components/modals/AppSelectModal.tsx b/frontend/providers/devbox/components/modals/AppSelectModal.tsx
index 3a585fb3fdfa..4c9928afe525 100644
--- a/frontend/providers/devbox/components/modals/AppSelectModal.tsx
+++ b/frontend/providers/devbox/components/modals/AppSelectModal.tsx
@@ -9,38 +9,38 @@ import {
   ModalHeader,
   Text,
   Divider
-} from '@chakra-ui/react'
-import { useTranslations } from 'next-intl'
-import { useCallback } from 'react'
-import { customAlphabet } from 'nanoid'
-import { sealosApp } from 'sealos-desktop-sdk/app'
+} from '@chakra-ui/react';
+import { useTranslations } from 'next-intl';
+import { useCallback } from 'react';
+import { customAlphabet } from 'nanoid';
+import { sealosApp } from 'sealos-desktop-sdk/app';
 
-import { AppListItemType } from '@/types/app'
+import { AppListItemType } from '@/types/app';
 
-import MyIcon from '../Icon'
-import MyTable from '../MyTable'
-import { useEnvStore } from '@/stores/env'
+import MyIcon from '../Icon';
+import MyTable from '../MyTable';
+import { useEnvStore } from '@/stores/env';
 
-const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz', 6)
+const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz', 6);
 
 interface NetworkConfig {
-  port: number
-  protocol: string
-  openPublicDomain: boolean
-  domain: string
+  port: number;
+  protocol: string;
+  openPublicDomain: boolean;
+  domain: string;
 }
 
 interface DeployData {
-  appName: string
-  cpu: number
-  memory: number
-  imageName: string
-  networks: NetworkConfig[]
-  runCMD: string
-  cmdParam: string[]
+  appName: string;
+  cpu: number;
+  memory: number;
+  imageName: string;
+  networks: NetworkConfig[];
+  runCMD: string;
+  cmdParam: string[];
   labels: {
-    [key: string]: string
-  }
+    [key: string]: string;
+  };
 }
 
 const AppSelectModal = ({
@@ -50,18 +50,18 @@ const AppSelectModal = ({
   onSuccess,
   onClose
 }: {
-  apps: AppListItemType[]
-  devboxName: string
-  deployData: DeployData
-  onSuccess: () => void
-  onClose: () => void
+  apps: AppListItemType[];
+  devboxName: string;
+  deployData: DeployData;
+  onSuccess: () => void;
+  onClose: () => void;
 }) => {
-  const t = useTranslations()
-  const { env } = useEnvStore()
+  const t = useTranslations();
+  const { env } = useEnvStore();
 
   const handleCreate = useCallback(() => {
-    const tempFormData = { ...deployData, appName: `${deployData.appName}-${nanoid()}` }
-    const tempFormDataStr = encodeURIComponent(JSON.stringify(tempFormData))
+    const tempFormData = { ...deployData, appName: `${deployData.appName}-${nanoid()}` };
+    const tempFormDataStr = encodeURIComponent(JSON.stringify(tempFormData));
     sealosApp.runEvents('openDesktopApp', {
       appKey: 'system-applaunchpad',
       pathname: '/redirect',
@@ -70,16 +70,16 @@ const AppSelectModal = ({
         type: 'InternalAppCall',
         formData: tempFormDataStr
       }
-    })
-  }, [deployData])
+    });
+  }, [deployData]);
 
   const handleUpdate = useCallback(
     (item: AppListItemType) => {
       const tempFormData = {
         appName: item.name,
         imageName: deployData.imageName
-      }
-      const tempFormDataStr = encodeURIComponent(JSON.stringify(tempFormData))
+      };
+      const tempFormDataStr = encodeURIComponent(JSON.stringify(tempFormData));
       sealosApp.runEvents('openDesktopApp', {
         appKey: 'system-applaunchpad',
         pathname: '/redirect',
@@ -88,18 +88,18 @@ const AppSelectModal = ({
           type: 'InternalAppCall',
           formData: tempFormDataStr
         }
-      })
-      onSuccess()
+      });
+      onSuccess();
     },
     [deployData, onSuccess]
-  )
+  );
 
   const columns: {
-    title: string
-    dataIndex?: keyof AppListItemType
-    key: string
-    width?: string
-    render?: (item: AppListItemType) => JSX.Element
+    title: string;
+    dataIndex?: keyof AppListItemType;
+    key: string;
+    width?: string;
+    render?: (item: AppListItemType) => JSX.Element;
   }[] = [
     {
       title: t('app_name'),
@@ -110,7 +110,7 @@ const AppSelectModal = ({
           <Text ml={4} color={'grayModern.600'}>
             {item.name}
           </Text>
-        )
+        );
       }
     },
     {
@@ -123,8 +123,8 @@ const AppSelectModal = ({
           `${env.registryAddr}/${env.namespace}/${devboxName}`
         )
           ? item.imageName.replace(`${env.registryAddr}/${env.namespace}/`, '')
-          : '-'
-        return <Text color={'grayModern.600'}>{dealImageName}</Text>
+          : '-';
+        return <Text color={'grayModern.600'}>{dealImageName}</Text>;
       }
     },
     {
@@ -132,7 +132,7 @@ const AppSelectModal = ({
       dataIndex: 'createTime',
       key: 'createTime',
       render: (item: AppListItemType) => {
-        return <Text color={'grayModern.600'}>{item.createTime}</Text>
+        return <Text color={'grayModern.600'}>{item.createTime}</Text>;
       }
     },
     {
@@ -151,13 +151,14 @@ const AppSelectModal = ({
             _hover={{
               color: 'brightBlue.600'
             }}
-            onClick={() => handleUpdate(item)}>
+            onClick={() => handleUpdate(item)}
+          >
             {t('to_update')}
           </Button>
         </Flex>
       )
     }
-  ]
+  ];
 
   return (
     <Box>
@@ -171,7 +172,8 @@ const AppSelectModal = ({
               direction={'column'}
               mb={2}
               justifyContent={'space-between'}
-              p={4}>
+              p={4}
+            >
               <Text fontSize={'lg'} fontWeight={'medium'}>
                 {t('create_directly')}
               </Text>
@@ -182,7 +184,8 @@ const AppSelectModal = ({
                 size={'md'}
                 px={8}
                 fontSize={'base'}
-                leftIcon={<MyIcon name="rocket" w={'15px'} h={'15px'} color={'white'} />}>
+                leftIcon={<MyIcon name="rocket" w={'15px'} h={'15px'} color={'white'} />}
+              >
                 {t('deploy')}
               </Button>
             </Flex>
@@ -199,7 +202,7 @@ const AppSelectModal = ({
         </ModalContent>
       </Modal>
     </Box>
-  )
-}
+  );
+};
 
-export default AppSelectModal
+export default AppSelectModal;
diff --git a/frontend/providers/devbox/components/modals/CustomAccessModal.tsx b/frontend/providers/devbox/components/modals/CustomAccessModal.tsx
index f7302b4d9537..181c77a31464 100644
--- a/frontend/providers/devbox/components/modals/CustomAccessModal.tsx
+++ b/frontend/providers/devbox/components/modals/CustomAccessModal.tsx
@@ -1,4 +1,4 @@
-import { InfoOutlineIcon } from '@chakra-ui/icons'
+import { InfoOutlineIcon } from '@chakra-ui/icons';
 import {
   Box,
   BoxProps,
@@ -13,18 +13,18 @@ import {
   ModalHeader,
   ModalOverlay,
   useTheme
-} from '@chakra-ui/react'
-import { Tip } from '@sealos/ui'
-import { useTranslations } from 'next-intl'
-import { useRef } from 'react'
+} from '@chakra-ui/react';
+import { Tip } from '@sealos/ui';
+import { useTranslations } from 'next-intl';
+import { useRef } from 'react';
 
-import { postAuthCname } from '@/api/platform'
-import { useRequest } from '@/hooks/useRequest'
+import { postAuthCname } from '@/api/platform';
+import { useRequest } from '@/hooks/useRequest';
 
 export type CustomAccessModalParams = {
-  publicDomain: string
-  customDomain: string
-}
+  publicDomain: string;
+  customDomain: string;
+};
 
 const CustomAccessModal = ({
   publicDomain,
@@ -32,30 +32,30 @@ const CustomAccessModal = ({
   onClose,
   onSuccess
 }: CustomAccessModalParams & { onClose: () => void; onSuccess: (e: string) => void }) => {
-  const ref = useRef<HTMLInputElement>(null)
-  const theme = useTheme()
-  const t = useTranslations()
+  const ref = useRef<HTMLInputElement>(null);
+  const theme = useTheme();
+  const t = useTranslations();
 
   const titleStyles: BoxProps = {
     fontWeight: 'bold',
     mb: 2
-  }
+  };
 
   const { mutate: authCNAME, isLoading } = useRequest({
     mutationFn: async () => {
-      const val = ref.current?.value || ''
+      const val = ref.current?.value || '';
       if (!val) {
-        return onSuccess('')
+        return onSuccess('');
       }
       await postAuthCname({
         publicDomain: publicDomain,
         customDomain: val
-      })
-      return val
+      });
+      return val;
     },
     onSuccess,
     errorToast: 'Custom Domain Error'
-  })
+  });
 
   return (
     <>
@@ -73,7 +73,8 @@ const CustomAccessModal = ({
               px={4}
               borderRadius={'md'}
               border={theme.borders.base}
-              userSelect={'all'}>
+              userSelect={'all'}
+            >
               {publicDomain}
             </Flex>
             <Box {...titleStyles} mt={7}>
@@ -96,14 +97,14 @@ const CustomAccessModal = ({
             />
           </ModalBody>
           <ModalFooter>
-            <Button width={'80px'} isLoading={isLoading} onClick={()=>authCNAME()}>
+            <Button width={'80px'} isLoading={isLoading} onClick={() => authCNAME()}>
               {t('confirm')}
             </Button>
           </ModalFooter>
         </ModalContent>
       </Modal>
     </>
-  )
-}
+  );
+};
 
-export default CustomAccessModal
+export default CustomAccessModal;
diff --git a/frontend/providers/devbox/components/modals/DelModal.tsx b/frontend/providers/devbox/components/modals/DelModal.tsx
index c0a4fafa15bf..4c796ad0f551 100644
--- a/frontend/providers/devbox/components/modals/DelModal.tsx
+++ b/frontend/providers/devbox/components/modals/DelModal.tsx
@@ -11,15 +11,15 @@ import {
   ModalHeader,
   ModalOverlay,
   Text
-} from '@chakra-ui/react'
-import { useMessage } from '@sealos/ui'
-import { useTranslations } from 'next-intl'
-import { useCallback, useState } from 'react'
+} from '@chakra-ui/react';
+import { useMessage } from '@sealos/ui';
+import { useTranslations } from 'next-intl';
+import { useCallback, useState } from 'react';
 
-import { delDevbox } from '@/api/devbox'
-import MyIcon from '@/components/Icon'
-import { useIDEStore } from '@/stores/ide'
-import { DevboxDetailTypeV2, DevboxListItemTypeV2 } from '@/types/devbox'
+import { delDevbox } from '@/api/devbox';
+import MyIcon from '@/components/Icon';
+import { useIDEStore } from '@/stores/ide';
+import { DevboxDetailTypeV2, DevboxListItemTypeV2 } from '@/types/devbox';
 
 const DelModal = ({
   devbox,
@@ -27,51 +27,51 @@ const DelModal = ({
   refetchDevboxList,
   onSuccess
 }: {
-  devbox: DevboxListItemTypeV2 | DevboxDetailTypeV2
-  onClose: () => void
-  onSuccess: () => void
-  refetchDevboxList: () => void
+  devbox: DevboxListItemTypeV2 | DevboxDetailTypeV2;
+  onClose: () => void;
+  onSuccess: () => void;
+  refetchDevboxList: () => void;
 }) => {
-  const t = useTranslations()
-  const { message: toast } = useMessage()
-  const { removeDevboxIDE } = useIDEStore()
+  const t = useTranslations();
+  const { message: toast } = useMessage();
+  const { removeDevboxIDE } = useIDEStore();
 
-  const [loading, setLoading] = useState(false)
-  const [inputValue, setInputValue] = useState('')
+  const [loading, setLoading] = useState(false);
+  const [inputValue, setInputValue] = useState('');
 
   const handleDelDevbox = useCallback(async () => {
     try {
-      setLoading(true)
-      await delDevbox(devbox.name)
-      removeDevboxIDE(devbox.name)
+      setLoading(true);
+      await delDevbox(devbox.name);
+      removeDevboxIDE(devbox.name);
       toast({
         title: t('delete_successful'),
         status: 'success'
-      })
-      onSuccess()
-      onClose()
+      });
+      onSuccess();
+      onClose();
 
-      let retryCount = 0
-      const maxRetries = 3
-      const retryInterval = 3000
+      let retryCount = 0;
+      const maxRetries = 3;
+      const retryInterval = 3000;
 
       const retry = async () => {
         if (retryCount < maxRetries) {
-          await new Promise((resolve) => setTimeout(resolve, retryInterval))
-          await refetchDevboxList()
-          retryCount++
+          await new Promise((resolve) => setTimeout(resolve, retryInterval));
+          await refetchDevboxList();
+          retryCount++;
         }
-      }
-      retry()
+      };
+      retry();
     } catch (error: any) {
       toast({
         title: typeof error === 'string' ? error : error.message || t('delete_failed'),
         status: 'error'
-      })
-      console.error(error)
+      });
+      console.error(error);
     }
-    setLoading(false)
-  }, [devbox.name, removeDevboxIDE, toast, t, onSuccess, onClose, refetchDevboxList])
+    setLoading(false);
+  }, [devbox.name, removeDevboxIDE, toast, t, onSuccess, onClose, refetchDevboxList]);
 
   return (
     <Modal isOpen onClose={onClose} lockFocusAcrossFrames={false} size={'lg'}>
@@ -92,7 +92,8 @@ const DelModal = ({
             mt={2}
             bg={'grayModern.50'}
             borderRadius={'4px'}
-            p={2}>
+            p={2}
+          >
             {t('delete_warning_content_2')}
           </Box>
           <Box mt={4}>
@@ -126,13 +127,14 @@ const DelModal = ({
             variant={'solid'}
             isLoading={loading}
             onClick={handleDelDevbox}
-            isDisabled={inputValue !== devbox.name}>
+            isDisabled={inputValue !== devbox.name}
+          >
             {t('confirm_delete')}
           </Button>
         </ModalFooter>
       </ModalContent>
     </Modal>
-  )
-}
+  );
+};
 
-export default DelModal
+export default DelModal;
diff --git a/frontend/providers/devbox/components/modals/EditVersionDesModal.tsx b/frontend/providers/devbox/components/modals/EditVersionDesModal.tsx
index aece104f94be..9cee751bf83f 100644
--- a/frontend/providers/devbox/components/modals/EditVersionDesModal.tsx
+++ b/frontend/providers/devbox/components/modals/EditVersionDesModal.tsx
@@ -10,13 +10,13 @@ import {
   ModalHeader,
   ModalOverlay,
   Textarea
-} from '@chakra-ui/react'
-import { useMessage } from '@sealos/ui'
-import { useTranslations } from 'next-intl'
-import { useCallback, useState } from 'react'
+} from '@chakra-ui/react';
+import { useMessage } from '@sealos/ui';
+import { useTranslations } from 'next-intl';
+import { useCallback, useState } from 'react';
 
-import { editDevboxVersion } from '@/api/devbox'
-import { DevboxVersionListItemType } from '@/types/devbox'
+import { editDevboxVersion } from '@/api/devbox';
+import { DevboxVersionListItemType } from '@/types/devbox';
 
 const EditVersionDesModal = ({
   version,
@@ -24,37 +24,37 @@ const EditVersionDesModal = ({
   isOpen,
   onSuccess
 }: {
-  version: DevboxVersionListItemType
-  isOpen: boolean
-  onClose: () => void
-  onSuccess: () => void
+  version: DevboxVersionListItemType;
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
 }) => {
-  const t = useTranslations()
-  const { message: toast } = useMessage()
-  const [loading, setLoading] = useState(false)
-  const [inputValue, setInputValue] = useState(version.description)
+  const t = useTranslations();
+  const { message: toast } = useMessage();
+  const [loading, setLoading] = useState(false);
+  const [inputValue, setInputValue] = useState(version.description);
   const handleEditVersionDes = useCallback(async () => {
     try {
-      setLoading(true)
+      setLoading(true);
       await editDevboxVersion({
         name: version.name,
         releaseDes: inputValue
-      })
+      });
       toast({
         title: t('edit_successful'),
         status: 'success'
-      })
-      onSuccess()
-      onClose()
+      });
+      onSuccess();
+      onClose();
     } catch (error: any) {
       toast({
         title: typeof error === 'string' ? error : error.message || t('edit_failed'),
         status: 'error'
-      })
-      console.error(error)
+      });
+      console.error(error);
     }
-    setLoading(false)
-  }, [version.name, inputValue, toast, t, onSuccess, onClose])
+    setLoading(false);
+  }, [version.name, inputValue, toast, t, onSuccess, onClose]);
 
   return (
     <Modal isOpen={isOpen} onClose={onClose} lockFocusAcrossFrames={false}>
@@ -84,7 +84,7 @@ const EditVersionDesModal = ({
         </ModalFooter>
       </ModalContent>
     </Modal>
-  )
-}
+  );
+};
 
-export default EditVersionDesModal
+export default EditVersionDesModal;
diff --git a/frontend/providers/devbox/components/modals/ErrorModal.tsx b/frontend/providers/devbox/components/modals/ErrorModal.tsx
index 2c66f82c7c49..7ce439ebb7b8 100644
--- a/frontend/providers/devbox/components/modals/ErrorModal.tsx
+++ b/frontend/providers/devbox/components/modals/ErrorModal.tsx
@@ -6,20 +6,20 @@ import {
   ModalBody,
   ModalCloseButton,
   Box
-} from '@chakra-ui/react'
-import React from 'react'
-import { useTranslations } from 'next-intl'
+} from '@chakra-ui/react';
+import React from 'react';
+import { useTranslations } from 'next-intl';
 
 const ErrorModal = ({
   title,
   content,
   onClose
 }: {
-  title: string
-  content: string
-  onClose: () => void
+  title: string;
+  content: string;
+  onClose: () => void;
 }) => {
-  const t = useTranslations()
+  const t = useTranslations();
   return (
     <Modal isOpen={true} onClose={onClose} lockFocusAcrossFrames={false}>
       <ModalOverlay />
@@ -29,7 +29,8 @@ const ErrorModal = ({
           alignItems={'center'}
           color={'grayModern.900'}
           fontWeight={'bold'}
-          fontSize={'lg'}>
+          fontSize={'lg'}
+        >
           <Box>{t(title)}</Box>
         </ModalHeader>
         <ModalCloseButton top={'10px'} right={'10px'} />
@@ -38,7 +39,7 @@ const ErrorModal = ({
         </ModalBody>
       </ModalContent>
     </Modal>
-  )
-}
+  );
+};
 
-export default ErrorModal
+export default ErrorModal;
diff --git a/frontend/providers/devbox/components/modals/JetbrainsGuideModal.tsx b/frontend/providers/devbox/components/modals/JetbrainsGuideModal.tsx
new file mode 100644
index 000000000000..e9d7e7f33043
--- /dev/null
+++ b/frontend/providers/devbox/components/modals/JetbrainsGuideModal.tsx
@@ -0,0 +1,528 @@
+import {
+  Box,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalOverlay,
+  ModalHeader,
+  Text,
+  Divider,
+  Button,
+  Flex,
+  Stepper,
+  Step,
+  StepIndicator,
+  StepStatus,
+  StepNumber,
+  StepSeparator,
+  Grid,
+  GridItem,
+  Circle,
+  ModalCloseButton,
+  Progress
+} from '@chakra-ui/react';
+import { useCallback, useRef, useState } from 'react';
+import { useTranslations } from 'next-intl';
+
+import MyIcon from '../Icon';
+import SshConnectModal from './SshConnectModal';
+
+import { JetBrainsGuideData } from '../IDEButton';
+import { execCommandInDevboxPod } from '@/api/devbox';
+
+const JetBrainsGuideModal = ({
+  onClose,
+  jetbrainsGuideData
+}: {
+  onSuccess: () => void;
+  onClose: () => void;
+  jetbrainsGuideData: JetBrainsGuideData;
+}) => {
+  const t = useTranslations();
+
+  const controllerRef = useRef<AbortController | null>(null);
+
+  const recommendIDE = runtimeTypeToIDEType(jetbrainsGuideData.runtimeType);
+
+  const [selectedIDE, setSelectedIDE] = useState<JetbrainsIDEObj>(recommendIDE);
+
+  const [progress, setProgress] = useState(0);
+  const [onConnecting, setOnConnecting] = useState(false);
+  const [onOpenSSHConnectModal, setOnOpenSSHConnectModal] = useState(false);
+
+  const connectIDE = useCallback(
+    async (idePathName: string, version: string) => {
+      window.open(
+        `jetbrains-gateway://connect#host=${
+          jetbrainsGuideData.configHost
+        }&type=ssh&deploy=false&projectPath=${encodeURIComponent(
+          jetbrainsGuideData.workingDir
+        )}&user=${encodeURIComponent(jetbrainsGuideData.userName)}&port=${encodeURIComponent(
+          jetbrainsGuideData.port
+        )}&idePath=%2Fhome%2Fdevbox%2F.cache%2FJetBrains%2F${idePathName}${version}`,
+        '_blank'
+      );
+    },
+    [jetbrainsGuideData]
+  );
+
+  const handleConnectIDE = useCallback(async () => {
+    const res = await fetch(
+      `https://data.services.jetbrains.com/products/releases?code=${selectedIDE.productCode}&type=release&latest=true&build=`,
+      {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      }
+    );
+    const data = await res.json();
+
+    const controller = new AbortController();
+    controllerRef.current = controller;
+
+    const version = data[selectedIDE.productCode][0].version;
+    const downloadLink = data[selectedIDE.productCode][0].downloads['linux']['link'];
+    const idePathName = selectedIDE.value;
+
+    // NOTE: workingDir /home/devbox/project -> /home/devbox, workingDir maybe change in the future
+    const basePath = jetbrainsGuideData.workingDir.split('/').slice(0, -1).join('/');
+
+    const execDownloadCommand = `
+    IDE_DIR="${basePath}/.cache/JetBrains/${idePathName}${version}";
+    if [ -d "$IDE_DIR" ] && [ ! -f "$IDE_DIR/bin/${selectedIDE.binName}" ]; then
+      rm -rf "$IDE_DIR";
+    fi;
+    [ ! -d ${basePath}/.cache/JetBrains/${idePathName}${version} ] && mkdir -p ${basePath}/.cache/JetBrains/${idePathName}${version} && wget -q --show-progress --progress=bar:force -O- ${downloadLink} | tar -xzC ${basePath}/.cache/JetBrains/${idePathName}${version} --strip-components=1 && chmod -R 776 ${basePath}/.cache && chown -R devbox:devbox ${basePath}/.cache`;
+
+    try {
+      await execCommandInDevboxPod({
+        devboxName: jetbrainsGuideData.devboxName,
+        command: execDownloadCommand,
+        idePath: `/home/devbox/.cache/JetBrains/${idePathName}${version}`,
+        onDownloadProgress: (progressEvent) => {
+          const text = progressEvent.event.target.response;
+          const progressMatch = text.match(/\s+(\d+)%\[/g);
+          const progress = progressMatch
+            ? parseInt(progressMatch[progressMatch.length - 1].split('%')[0])
+            : null;
+
+          if (progress) {
+            setProgress(progress);
+          }
+          if (progress && progress === 1) {
+            setOnConnecting(true);
+          }
+        },
+        signal: controller.signal
+      });
+      setOnConnecting(false);
+      setProgress(0);
+    } catch (error: any) {
+      if (
+        !error ||
+        error.startsWith('nvidia driver modules are not yet loaded, invoking runc directly') ||
+        error.includes('100%')
+      ) {
+        connectIDE(idePathName, version);
+      }
+      setProgress(0);
+      setOnConnecting(false);
+    }
+  }, [selectedIDE, jetbrainsGuideData.devboxName, connectIDE, jetbrainsGuideData.workingDir]);
+
+  return (
+    <Box>
+      <Modal
+        isOpen
+        onClose={onConnecting ? () => {} : onClose}
+        lockFocusAcrossFrames={false}
+        isCentered
+        scrollBehavior={'inside'}
+      >
+        <ModalOverlay />
+        <ModalContent maxWidth={'800px'} w={'700px'} position={'relative'} h={'785px'}>
+          <ModalHeader pl={10}>{t('use_jetbrains')}</ModalHeader>
+          <ModalCloseButton top={'10px'} right={'10px'} isDisabled={onConnecting} />
+          <ModalBody pb={6} overflowY={'auto'}>
+            {/* prepare */}
+            <Box pb={6}>
+              <Text fontWeight={'bold'} fontSize={'lg'} mb={6}>
+                {t('jetbrains_guide_prepare')}
+              </Text>
+              <Stepper orientation="vertical" index={-1} mt={4} gap={0} position={'relative'}>
+                {/* 1 */}
+                <Step>
+                  <StepIndicator backgroundColor={'grayModern.100'} borderColor={'grayModern.100'}>
+                    <StepStatus incomplete={<StepNumber />} />
+                  </StepIndicator>
+                  <Box mt={1} ml={2} mb={5}>
+                    <Box fontSize={'14px'} mb={3}>
+                      {t.rich('jetbrains_guide_prepare_install', {
+                        blue: (chunks) => (
+                          <Text
+                            fontWeight={'bold'}
+                            display={'inline-block'}
+                            color={'brightBlue.600'}
+                          >
+                            {chunks}
+                          </Text>
+                        )
+                      })}
+                    </Box>
+                    <Button
+                      leftIcon={<MyIcon name="upperRight" color={'grayModern.600'} w={'16px'} />}
+                      bg={'white'}
+                      color={'grayModern.600'}
+                      borderRadius={'5px'}
+                      borderWidth={1}
+                      size={'sm'}
+                      _hover={{
+                        color: 'brightBlue.600',
+                        '& svg': {
+                          color: 'brightBlue.600'
+                        }
+                      }}
+                      onClick={() => {
+                        window.open('https://code-with-me.jetbrains.com/remoteDev', '_blank');
+                      }}
+                    >
+                      JetBrains Gateway
+                    </Button>
+                  </Box>
+                  <StepSeparator />
+                </Step>
+                {/* 2 */}
+                <Step>
+                  <StepIndicator backgroundColor={'grayModern.100'} borderColor={'grayModern.100'}>
+                    <StepStatus incomplete={<StepNumber />} />
+                  </StepIndicator>
+                  <Box mt={1} ml={2} mb={5}>
+                    <Box fontSize={'14px'} mb={3}>
+                      {t.rich('jetbrains_guide_click_to_config', {
+                        blue: (chunks) => (
+                          <Text
+                            fontWeight={'bold'}
+                            display={'inline-block'}
+                            color={'brightBlue.600'}
+                          >
+                            {chunks}
+                          </Text>
+                        )
+                      })}
+                    </Box>
+                    <Button
+                      leftIcon={<MyIcon name="settings" color={'grayModern.600'} w={'16px'} />}
+                      bg={'white'}
+                      color={'grayModern.600'}
+                      borderRadius={'5px'}
+                      borderWidth={1}
+                      size={'sm'}
+                      _hover={{
+                        color: 'brightBlue.600',
+                        '& svg': {
+                          color: 'brightBlue.600'
+                        }
+                      }}
+                      onClick={() => setOnOpenSSHConnectModal(true)}
+                    >
+                      {t('jetbrains_guide_config_ssh')}
+                    </Button>
+                  </Box>
+                  <StepSeparator />
+                </Step>
+                {/* done */}
+                <Step>
+                  <Circle
+                    size="10px"
+                    bg="grayModern.100"
+                    top={-3}
+                    left={2.5}
+                    position={'absolute'}
+                  />
+                </Step>
+              </Stepper>
+            </Box>
+            <Divider />
+            <Box pt={6} pb={6}>
+              <Flex alignItems={'center'} mb={6}>
+                <Text fontWeight={'bold'} fontSize={'lg'} mr={2}>
+                  {t('jetbrains_guide_start_to_use')}
+                </Text>
+              </Flex>
+              <Text fontSize={'14px'} fontWeight={'400'}>
+                {t('jetbrains_guide_select_ide')}
+              </Text>
+              <Grid templateColumns={'repeat(3, 1fr)'} gap={4} mt={4}>
+                {Object.values(jetbrainsIDEObj).map((ideType: any) => (
+                  <GridItem key={ideType.value}>
+                    <Flex
+                      bg={selectedIDE === ideType ? 'brightBlue.25' : 'grayModern.25'}
+                      borderWidth={1}
+                      boxShadow={
+                        selectedIDE === ideType ? '0 0 0 2.4px rgba(33, 155, 244, 0.15)' : 'none'
+                      }
+                      borderColor={selectedIDE === ideType ? 'brightBlue.500' : 'grayModern.200'}
+                      borderRadius={'6px'}
+                      p={4}
+                      justifyContent={'center'}
+                      alignItems={'center'}
+                      flexDirection={'column'}
+                      cursor={onConnecting ? 'not-allowed' : 'pointer'}
+                      opacity={onConnecting ? 0.5 : 1}
+                      _hover={{
+                        bg: onConnecting ? 'inherit' : 'brightBlue.25'
+                      }}
+                      onClick={() => {
+                        if (!onConnecting) {
+                          setSelectedIDE(ideType);
+                        }
+                      }}
+                      position={'relative'}
+                    >
+                      <MyIcon name={ideType.value as any} color={'grayModern.600'} w={'36px'} />
+                      <Text>{ideType.label}</Text>
+                      {recommendIDE === ideType && (
+                        <Box
+                          bg="yellow.100"
+                          top={1.5}
+                          left={0}
+                          position={'absolute'}
+                          p={'1px 10px'}
+                          borderRadius={'0px 4px 4px 0px'}
+                          fontSize={'12px'}
+                          color={'yellow.600'}
+                        >
+                          {t('recommend')}
+                        </Box>
+                      )}
+                    </Flex>
+                  </GridItem>
+                ))}
+              </Grid>
+              <Button
+                mt={4}
+                w={'100%'}
+                bg={'white'}
+                borderWidth={1}
+                borderRadius={'6px'}
+                color={'grayModern.600'}
+                size={'sm'}
+                px={1}
+                borderColor={onConnecting ? 'brightBlue.500' : 'grayModern.200'}
+                _hover={
+                  onConnecting
+                    ? {}
+                    : {
+                        color: 'brightBlue.600',
+                        borderColor: 'brightBlue.500'
+                      }
+                }
+                onClick={handleConnectIDE}
+                h={'36px'}
+              >
+                {onConnecting ? (
+                  <Flex position={'relative'} w={'full'} alignItems={'center'} justify={'center'}>
+                    {t.rich('jetbrains_guide_connecting', {
+                      process: progress
+                    })}
+                    <Box
+                      _hover={{
+                        textDecoration: 'underline'
+                      }}
+                      cursor={'pointer'}
+                      color={'brightBlue.600'}
+                      ml={6}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        controllerRef.current?.abort();
+                        controllerRef.current = null;
+                        setProgress(0);
+                        setOnConnecting(false);
+                      }}
+                    >
+                      {t('jetbrains_guide_cancel')}
+                    </Box>
+                    <Progress
+                      value={progress}
+                      size={'xs'}
+                      colorScheme={'brightBlue'}
+                      position={'absolute'}
+                      bottom={'-9.5px'}
+                      w={'full'}
+                      left={0}
+                      right={0}
+                    />
+                  </Flex>
+                ) : (
+                  t('jetbrains_guide_start_to_connect')
+                )}
+              </Button>
+              {onConnecting && (
+                <Flex
+                  mt={4}
+                  bg={'brightBlue.50'}
+                  p={2}
+                  borderRadius={'6px'}
+                  alignItems={'center'}
+                  justify={'center'}
+                >
+                  <MyIcon name="infoCircle" color={'brightBlue.600'} w={'16px'} mr={1} />
+                  <Text fontSize={'14px'} fontWeight={'400'} color={'brightBlue.600'}>
+                    {t('jetbrains_guide_connecting_info')}
+                  </Text>
+                </Flex>
+              )}
+            </Box>
+            {onOpenSSHConnectModal && (
+              <SshConnectModal
+                onClose={() => setOnOpenSSHConnectModal(false)}
+                onSuccess={() => {}}
+                jetbrainsGuideData={jetbrainsGuideData}
+              />
+            )}
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </Box>
+  );
+};
+
+interface JetbrainsIDEObj {
+  label: string;
+  value: string;
+  binName: string;
+  productCode: string;
+}
+const jetbrainsIDEObj: { [key: string]: JetbrainsIDEObj } = {
+  IntelliJ: {
+    label: 'IntelliJ IDEA',
+    value: 'intellij',
+    binName: 'idea.sh',
+    productCode: 'IIU'
+  },
+  PyCharm: {
+    label: 'PyCharm',
+    value: 'pycharm',
+    binName: 'pycharm.sh',
+    productCode: 'PCP'
+  },
+  WebStorm: {
+    label: 'WebStorm',
+    value: 'webstorm',
+    binName: 'webstorm.sh',
+    productCode: 'WS'
+  },
+  Rider: {
+    label: 'Rider',
+    value: 'rider',
+    binName: 'rider.sh',
+    productCode: 'RD'
+  },
+  CLion: {
+    label: 'CLion',
+    value: 'clion',
+    binName: 'clion.sh',
+    productCode: 'CL'
+  },
+  GoLand: {
+    label: 'GoLand',
+    value: 'goland',
+    binName: 'goland.sh',
+    productCode: 'GO'
+  },
+  RubyMine: {
+    label: 'RubyMine',
+    value: 'rubymine',
+    binName: 'rubymine.sh',
+    productCode: 'RM'
+  },
+  PhpStorm: {
+    label: 'PhpStorm',
+    value: 'phpstorm',
+    binName: 'phpstorm.sh',
+    productCode: 'PS'
+  },
+  RustRover: {
+    label: 'RustRover',
+    value: 'rustover',
+    binName: 'rustover.sh',
+    productCode: 'RR'
+  }
+};
+
+const runtimeTypeToIDEType = (runtimeType: string): any => {
+  switch (runtimeType) {
+    // Python
+    case 'python':
+    case 'django':
+    case 'flask':
+      return jetbrainsIDEObj.PyCharm;
+
+    // Go
+    case 'go':
+    case 'gin':
+    case 'echo':
+    case 'hertz':
+    case 'iris':
+    case 'chi':
+      return jetbrainsIDEObj.GoLand;
+
+    // Frontend and nodejs
+    case 'angular':
+    case 'ant-design':
+    case 'astro':
+    case 'chakra-ui':
+    case 'express.js':
+    case 'react':
+    case 'vue':
+    case 'react':
+    case 'hexo':
+    case 'hugo':
+    case 'sealaf':
+    case 'nuxt3':
+    case 'svelte':
+    case 'umi':
+    case 'vitepress':
+    case 'next.js':
+    case 'nest.js':
+    case 'node.js':
+    case 'docusaurus':
+      return jetbrainsIDEObj.WebStorm;
+
+    // C/C++
+    case 'c':
+    case 'cpp':
+      return jetbrainsIDEObj.CLion;
+
+    // Java
+    case 'java':
+    case 'quarkus':
+    case 'vert.x':
+    case 'spring-boot':
+      return jetbrainsIDEObj.IntelliJ;
+
+    // PHP
+    case 'php':
+    case 'laravel':
+      return jetbrainsIDEObj.PhpStorm;
+
+    // Ruby
+    case 'ruby':
+    case 'rails':
+      return jetbrainsIDEObj.RubyMine;
+
+    // Rust
+    case 'rust':
+    case 'rocket':
+      return jetbrainsIDEObj.RustRover;
+
+    // other
+    case 'debian-ssh':
+    case 'custom':
+    default:
+      return jetbrainsIDEObj.IntelliJ;
+  }
+};
+
+export default JetBrainsGuideModal;
diff --git a/frontend/providers/devbox/components/modals/MonitorModal.tsx b/frontend/providers/devbox/components/modals/MonitorModal.tsx
index 7a37d1166ac2..ed2ddac3c3fa 100644
--- a/frontend/providers/devbox/components/modals/MonitorModal.tsx
+++ b/frontend/providers/devbox/components/modals/MonitorModal.tsx
@@ -7,16 +7,16 @@ import {
   ModalHeader,
   ModalOverlay,
   useTheme
-} from '@chakra-ui/react'
-import { useTranslations } from 'next-intl'
+} from '@chakra-ui/react';
+import { useTranslations } from 'next-intl';
 
-import PodLineChart from '@/components/PodLineChart'
-import { useDevboxStore } from '@/stores/devbox'
+import PodLineChart from '@/components/PodLineChart';
+import { useDevboxStore } from '@/stores/devbox';
 
 const MonitorModal = ({ onClose, isOpen }: { isOpen: boolean; onClose: () => void }) => {
-  const theme = useTheme()
-  const t = useTranslations()
-  const { devboxDetail } = useDevboxStore()
+  const theme = useTheme();
+  const t = useTranslations();
+  const { devboxDetail } = useDevboxStore();
 
   return (
     <Modal isOpen={isOpen} onClose={onClose} autoFocus={false} lockFocusAcrossFrames={false}>
@@ -24,16 +24,15 @@ const MonitorModal = ({ onClose, isOpen }: { isOpen: boolean; onClose: () => voi
       <ModalContent maxW={'90vw'}>
         <ModalHeader>{t('monitor')}</ModalHeader>
         <ModalCloseButton />
-        {
-          devboxDetail && 
+        {devboxDetail && (
           <ModalBody fontSize={'12px'} fontWeight={'bold'} color={'grayModern.900'}>
-  
             <Box
               p={'24px'}
               bg={'grayModern.25'}
               border={theme.borders.base}
               mb={'16px'}
-              borderRadius={'lg'}>
+              borderRadius={'lg'}
+            >
               <Box mb={'12px'}>
                 CPU&ensp;({devboxDetail.usedCpu.yData[devboxDetail.usedCpu.yData.length - 1]}%)
               </Box>
@@ -51,10 +50,10 @@ const MonitorModal = ({ onClose, isOpen }: { isOpen: boolean; onClose: () => voi
               </Box>
             </Box>
           </ModalBody>
-        }
+        )}
       </ModalContent>
     </Modal>
-  )
-}
+  );
+};
 
-export default MonitorModal
+export default MonitorModal;
diff --git a/frontend/providers/devbox/components/modals/releaseModal.tsx b/frontend/providers/devbox/components/modals/ReleaseModal.tsx
similarity index 74%
rename from frontend/providers/devbox/components/modals/releaseModal.tsx
rename to frontend/providers/devbox/components/modals/ReleaseModal.tsx
index 8d164d590e8e..dd64221aa50e 100644
--- a/frontend/providers/devbox/components/modals/releaseModal.tsx
+++ b/frontend/providers/devbox/components/modals/ReleaseModal.tsx
@@ -11,66 +11,66 @@ import {
   ModalHeader,
   ModalOverlay,
   Textarea
-} from '@chakra-ui/react'
-import { useMessage } from '@sealos/ui'
-import { useTranslations } from 'next-intl'
-import { useCallback, useState } from 'react'
+} from '@chakra-ui/react';
+import { useMessage } from '@sealos/ui';
+import { useTranslations } from 'next-intl';
+import { useCallback, useState } from 'react';
 
-import { pauseDevbox, releaseDevbox, startDevbox } from '@/api/devbox'
-import { useConfirm } from '@/hooks/useConfirm'
-import { useEnvStore } from '@/stores/env'
-import { DevboxListItemTypeV2 } from '@/types/devbox'
-import { versionSchema } from '@/utils/vaildate'
+import { pauseDevbox, releaseDevbox, startDevbox } from '@/api/devbox';
+import { useConfirm } from '@/hooks/useConfirm';
+import { useEnvStore } from '@/stores/env';
+import { DevboxListItemTypeV2 } from '@/types/devbox';
+import { versionSchema } from '@/utils/vaildate';
 
 const ReleaseModal = ({
   onClose,
   onSuccess,
   devbox
 }: {
-  devbox: Omit<DevboxListItemTypeV2, 'template'>
-  onClose: () => void
-  onSuccess: () => void
+  devbox: Omit<DevboxListItemTypeV2, 'template'>;
+  onClose: () => void;
+  onSuccess: () => void;
 }) => {
-  const t = useTranslations()
-  const { message: toast } = useMessage()
+  const t = useTranslations();
+  const { message: toast } = useMessage();
 
-  const { env } = useEnvStore()
+  const { env } = useEnvStore();
 
-  const [tag, setTag] = useState('')
-  const [loading, setLoading] = useState(false)
-  const [tagError, setTagError] = useState(false)
-  const [releaseDes, setReleaseDes] = useState('')
+  const [tag, setTag] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [tagError, setTagError] = useState(false);
+  const [releaseDes, setReleaseDes] = useState('');
 
   const { openConfirm, ConfirmChild } = useConfirm({
     content: 'release_confirm_info',
     showCheckbox: true,
     checkboxLabel: 'pause_devbox_info'
-  })
+  });
 
   const handleSubmit = () => {
-    const tagResult = versionSchema.safeParse(tag)
+    const tagResult = versionSchema.safeParse(tag);
     if (!tag) {
-      setTagError(true)
+      setTagError(true);
     } else if (versionSchema.safeParse(tag).success === false) {
       toast({
         title: t('tag_format_error'),
         status: 'error'
-      })
+      });
     } else {
-      setTagError(false)
-      openConfirm((enableRestartMachine: boolean) => handleReleaseDevbox(enableRestartMachine))()
+      setTagError(false);
+      openConfirm((enableRestartMachine: boolean) => handleReleaseDevbox(enableRestartMachine))();
     }
-  }
+  };
 
   const handleReleaseDevbox = useCallback(
     async (enableRestartMachine: boolean) => {
       try {
-        setLoading(true)
+        setLoading(true);
         // 1.pause devbox
         if (devbox.status.value === 'Running') {
-          await pauseDevbox({ devboxName: devbox.name })
+          await pauseDevbox({ devboxName: devbox.name });
           // wait 3s
-          await new Promise((resolve) => setTimeout(resolve, 3000))
+          await new Promise((resolve) => setTimeout(resolve, 3000));
         }
         // 2.release devbox
         await releaseDevbox({
@@ -78,28 +78,28 @@ const ReleaseModal = ({
           tag,
           releaseDes,
           devboxUid: devbox.id
-        })
+        });
         // 3.start devbox
         if (enableRestartMachine) {
-          await startDevbox({ devboxName: devbox.name })
+          await startDevbox({ devboxName: devbox.name });
         }
         toast({
           title: t('submit_release_successful'),
           status: 'success'
-        })
-        onSuccess()
-        onClose()
+        });
+        onSuccess();
+        onClose();
       } catch (error: any) {
         toast({
           title: typeof error === 'string' ? error : error.message || t('submit_release_failed'),
           status: 'error'
-        })
-        console.error(error)
+        });
+        console.error(error);
       }
-      setLoading(false)
+      setLoading(false);
     },
     [devbox.status.value, devbox.name, devbox.id, tag, releaseDes, toast, t, onSuccess, onClose]
-  )
+  );
 
   return (
     <Box>
@@ -156,7 +156,8 @@ const ReleaseModal = ({
               onClick={handleSubmit}
               mr={'11px'}
               width={'80px'}
-              isLoading={loading}>
+              isLoading={loading}
+            >
               {t('publish')}
             </Button>
           </ModalFooter>
@@ -164,7 +165,7 @@ const ReleaseModal = ({
       </Modal>
       <ConfirmChild />
     </Box>
-  )
-}
+  );
+};
 
-export default ReleaseModal
+export default ReleaseModal;
diff --git a/frontend/providers/devbox/components/modals/SshConnectModal.tsx b/frontend/providers/devbox/components/modals/SshConnectModal.tsx
new file mode 100644
index 000000000000..8cdd203fe9f1
--- /dev/null
+++ b/frontend/providers/devbox/components/modals/SshConnectModal.tsx
@@ -0,0 +1,518 @@
+import {
+  Box,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalOverlay,
+  ModalHeader,
+  ModalCloseButton,
+  Flex,
+  Text,
+  Button,
+  Divider,
+  Stepper,
+  Step,
+  StepIndicator,
+  StepNumber,
+  StepStatus,
+  StepSeparator,
+  Circle,
+  Tabs,
+  TabList
+} from '@chakra-ui/react';
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslations } from 'next-intl';
+import { Tabs as MyTabs } from '@sealos/ui';
+
+import Tab from '../Tab';
+import MyIcon from '../Icon';
+import ScriptCode from '../ScriptCode';
+import {
+  macosAndLinuxScriptsTemplate,
+  sshConfig,
+  sshConnectCommand,
+  windowsScriptsTemplate
+} from '@/constants/scripts';
+import { JetBrainsGuideData } from '../IDEButton';
+import { downLoadBlob, useCopyData } from '@/utils/tools';
+
+const systemList = ['Windows', 'Mac', 'Linux'];
+
+enum stepEnum {
+  OneClick = 'one-click',
+  StepByStep = 'step-by-step'
+}
+
+const SshConnectModal = ({
+  onClose,
+  jetbrainsGuideData,
+  onSuccess
+}: {
+  onSuccess: () => void;
+  onClose: () => void;
+  jetbrainsGuideData: JetBrainsGuideData;
+}) => {
+  const t = useTranslations();
+  const { copyData } = useCopyData();
+
+  const [activeTab, setActiveTab] = useState(0);
+  const [activeStep, setActiveStep] = useState(stepEnum.OneClick);
+
+  useEffect(() => {
+    const detectPlatform = () => {
+      if (window.navigator.platform) {
+        const platform = window.navigator.platform.toLowerCase();
+        console.log('platform', platform);
+        if (platform.includes('windows')) return 0;
+        if (platform.includes('mac')) return 1;
+        if (platform.includes('linux')) return 2;
+      }
+
+      const userAgent = window.navigator.userAgent.toLowerCase();
+      console.log('userAgent', userAgent);
+      if (userAgent.includes('win')) return 0;
+      if (userAgent.includes('mac')) return 1;
+      if (userAgent.includes('linux')) return 2;
+
+      return 0;
+    };
+
+    setActiveTab(detectPlatform());
+  }, []);
+
+  const script = useMemo(() => {
+    if (activeTab === 0) {
+      return {
+        platform: 'Windows',
+        script: windowsScriptsTemplate(
+          jetbrainsGuideData.privateKey,
+          jetbrainsGuideData.configHost,
+          jetbrainsGuideData.host,
+          jetbrainsGuideData.port,
+          jetbrainsGuideData.userName
+        )
+      };
+    } else if (activeTab === 1) {
+      return {
+        platform: 'Mac',
+        script: macosAndLinuxScriptsTemplate(
+          jetbrainsGuideData.privateKey,
+          jetbrainsGuideData.configHost,
+          jetbrainsGuideData.host,
+          jetbrainsGuideData.port,
+          jetbrainsGuideData.userName
+        )
+      };
+    } else {
+      return {
+        platform: 'Linux',
+        script: macosAndLinuxScriptsTemplate(
+          jetbrainsGuideData.privateKey,
+          jetbrainsGuideData.configHost,
+          jetbrainsGuideData.host,
+          jetbrainsGuideData.port,
+          jetbrainsGuideData.userName
+        )
+      };
+    }
+  }, [activeTab, jetbrainsGuideData]);
+
+  return (
+    <Box>
+      <Modal
+        isOpen
+        onClose={onClose}
+        lockFocusAcrossFrames={false}
+        size={'4xl'}
+        isCentered
+        scrollBehavior={'inside'}
+      >
+        <ModalOverlay />
+        <ModalContent maxWidth={'800px'} w={'700px'} h={'785px'} position={'relative'}>
+          <ModalHeader pl={10}>{t('jetbrains_guide_config_ssh')}</ModalHeader>
+          <ModalCloseButton top={'10px'} right={'10px'} />
+          <ModalBody
+            pb={6}
+            overflowY={'auto'}
+            sx={{
+              '&::-webkit-scrollbar': {
+                display: 'none'
+              }
+            }}
+          >
+            <Tabs
+              onChange={(index) => setActiveTab(index)}
+              mb={4}
+              colorScheme={'brightBlue'}
+              defaultIndex={activeTab}
+            >
+              <TabList>
+                {systemList.map((item) => (
+                  <Tab key={item}>{item}</Tab>
+                ))}
+              </TabList>
+            </Tabs>
+
+            <MyTabs
+              my={8}
+              list={[
+                { id: stepEnum.OneClick, label: t('jetbrains_guide_one_click_setup') },
+                { id: stepEnum.StepByStep, label: t('jetbrains_guide_step_by_step') }
+              ]}
+              activeId={activeStep}
+              onChange={(step) => setActiveStep(step as stepEnum)}
+            />
+            {/* one-click */}
+            {activeStep === stepEnum.OneClick && (
+              <>
+                <Stepper orientation="vertical" index={-1} mt={3} gap={0}>
+                  {/* 1 */}
+                  <Box>
+                    <Step>
+                      <StepIndicator
+                        backgroundColor={'grayModern.100'}
+                        borderColor={'grayModern.100'}
+                      >
+                        <StepStatus incomplete={<StepNumber />} />
+                      </StepIndicator>
+                      <Flex flexDirection={'column'} gap={6} mt={1} ml={2} mb={5} flex={1}>
+                        <Flex
+                          borderRadius={'6px'}
+                          p={2}
+                          gap={2}
+                          h={'96px'}
+                          borderWidth={1}
+                          borderColor={'brightBlue.500'}
+                          flexDirection={'column'}
+                          alignItems={'center'}
+                          justifyContent={'center'}
+                          _hover={{
+                            bg: 'brightBlue.50'
+                          }}
+                          cursor={'pointer'}
+                          onClick={() => {
+                            if (script.platform === 'Windows') {
+                              downLoadBlob(
+                                script.script,
+                                'text/plain',
+                                `ssh-config-${jetbrainsGuideData.devboxName}.ps1`
+                              );
+                            } else {
+                              downLoadBlob(
+                                script.script,
+                                'text/plain',
+                                `ssh-config-${jetbrainsGuideData.devboxName}.sh`
+                              );
+                            }
+                          }}
+                        >
+                          <MyIcon
+                            name="fileConfig"
+                            color={'brightBlue.600'}
+                            w={'24px'}
+                            h={'24px'}
+                          />
+                          <Text fontSize={'14px'} color={'brightBlue.600'} fontWeight={'500'}>
+                            {t('jetbrains_guide_click_to_download')}
+                          </Text>
+                        </Flex>
+                        <Box
+                          fontSize={'14px'}
+                          color={'grayModern.900'}
+                          fontWeight={500}
+                          lineHeight={'20px'}
+                        >
+                          {script.platform === 'Windows'
+                            ? t.rich('jetbrains_guide_one_click_setup_desc_windows', {
+                                blue: (chunks) => (
+                                  <Text
+                                    fontWeight={'bold'}
+                                    display={'inline-block'}
+                                    color={'brightBlue.600'}
+                                  >
+                                    {chunks}
+                                  </Text>
+                                )
+                              })
+                            : t.rich('jetbrains_guide_one_click_setup_desc', {
+                                blue: (chunks) => (
+                                  <Text
+                                    fontWeight={'bold'}
+                                    display={'inline-block'}
+                                    color={'brightBlue.600'}
+                                  >
+                                    {chunks}
+                                  </Text>
+                                )
+                              })}
+                        </Box>
+                        <Box
+                          fontSize={'14px'}
+                          color={'grayModern.900'}
+                          fontWeight={400}
+                          lineHeight={'20px'}
+                        >
+                          {t.rich('jetbrains_guide_one_click_setup_desc_2', {
+                            lightColor: (chunks) => (
+                              <Text color={'grayModern.600'} display={'inline-block'}>
+                                {chunks}
+                              </Text>
+                            )
+                          })}
+                        </Box>
+                        <ScriptCode platform={script.platform} script={script.script} />
+                      </Flex>
+                      <StepSeparator />
+                    </Step>
+                  </Box>
+                  {/* 2 */}
+                  <Box w={'100%'}>
+                    <Step>
+                      <StepIndicator
+                        backgroundColor={'grayModern.100'}
+                        borderColor={'grayModern.100'}
+                      >
+                        <StepStatus incomplete={<StepNumber />} />
+                      </StepIndicator>
+                      <Flex mt={1} ml={2} mb={5} flexDirection={'column'} gap={6} flex={1}>
+                        <Box fontSize={'14px'}>{t('jetbrains_guide_command')}</Box>
+                        <ScriptCode
+                          oneLine={true}
+                          defaultOpen={true}
+                          platform={script.platform}
+                          script={sshConnectCommand(jetbrainsGuideData.configHost)}
+                        />
+                      </Flex>
+                      <StepSeparator />
+                    </Step>
+                  </Box>
+                  {/* done */}
+                  <Step>
+                    <Circle
+                      size="10px"
+                      bg="grayModern.100"
+                      top={-3}
+                      left={2.5}
+                      position={'absolute'}
+                    />
+                  </Step>
+                </Stepper>
+                <Box position={'relative'} w={'100%'} h={'30px'} mt={8}>
+                  <Button
+                    w={'100%'}
+                    bg={'white'}
+                    borderWidth={1}
+                    borderRadius={'6px'}
+                    color={'green.600'}
+                    size={'sm'}
+                    px={1}
+                    borderColor={'green.600'}
+                    _hover={{
+                      bg: 'green.50'
+                    }}
+                    onClick={() => onClose()}
+                    h={'36px'}
+                  >
+                    {t('jetbrains_guide_confirm')}
+                  </Button>
+                </Box>
+              </>
+            )}
+            {/* step-by-step */}
+            {activeStep === stepEnum.StepByStep && (
+              <>
+                <Stepper orientation="vertical" index={-1} mt={3} gap={0} position={'relative'}>
+                  {/* 1 */}
+                  <Box w={'100%'}>
+                    <Step>
+                      <StepIndicator
+                        backgroundColor={'grayModern.100'}
+                        borderColor={'grayModern.100'}
+                      >
+                        <StepStatus incomplete={<StepNumber />} />
+                      </StepIndicator>
+                      <Box mt={1} ml={2} mb={5} flex={1}>
+                        <Box fontSize={'14px'} mb={3}>
+                          {t.rich('jetbrains_guide_download_private_key', {
+                            blue: (chunks) => (
+                              <Text
+                                fontWeight={'bold'}
+                                display={'inline-block'}
+                                color={'brightBlue.600'}
+                              >
+                                {chunks}
+                              </Text>
+                            )
+                          })}
+                        </Box>
+                        <Button
+                          leftIcon={<MyIcon name="download" color={'grayModern.600'} w={'16px'} />}
+                          bg={'white'}
+                          color={'grayModern.600'}
+                          borderRadius={'5px'}
+                          borderWidth={1}
+                          py={4}
+                          size={'sm'}
+                          _hover={{
+                            color: 'brightBlue.600',
+                            '& svg': {
+                              color: 'brightBlue.600'
+                            }
+                          }}
+                          onClick={() => {
+                            downLoadBlob(
+                              jetbrainsGuideData.privateKey,
+                              'application/octet-stream',
+                              `${jetbrainsGuideData.configHost}`
+                            );
+                          }}
+                        >
+                          {t('download_private_key')}
+                        </Button>
+                      </Box>
+                      <StepSeparator />
+                    </Step>
+                  </Box>
+                  {/* 2 */}
+                  <Box w={'100%'}>
+                    <Step>
+                      <StepIndicator
+                        backgroundColor={'grayModern.100'}
+                        borderColor={'grayModern.100'}
+                      >
+                        <StepStatus incomplete={<StepNumber />} />
+                      </StepIndicator>
+                      <Flex mt={1} ml={2} mb={5} flex={1} h={'40px'}>
+                        <Box fontSize={'14px'}>
+                          {t.rich('jetbrains_guide_move_to_path', {
+                            blue: (chunks) => (
+                              <Text
+                                fontWeight={'bold'}
+                                display={'inline-block'}
+                                color={'brightBlue.600'}
+                              >
+                                {chunks}
+                              </Text>
+                            )
+                          })}
+                        </Box>
+                        <Box
+                          color={'grayModern.900'}
+                          _hover={{
+                            color: 'brightBlue.600',
+                            '& svg': {
+                              color: 'brightBlue.600'
+                            }
+                          }}
+                          cursor={'pointer'}
+                          ml={2}
+                        >
+                          <MyIcon
+                            name="copy"
+                            color={'grayModern.500'}
+                            w={'16px'}
+                            onClick={() => copyData('~/.ssh/sealos')}
+                          />
+                        </Box>
+                      </Flex>
+                      <StepSeparator />
+                    </Step>
+                  </Box>
+                  {/* 3 */}
+                  <Box w={'100%'}>
+                    <Step>
+                      <StepIndicator
+                        backgroundColor={'grayModern.100'}
+                        borderColor={'grayModern.100'}
+                      >
+                        <StepStatus incomplete={<StepNumber />} />
+                      </StepIndicator>
+                      <Flex mt={1} ml={2} mb={5} flexDirection={'column'} gap={4} flex={1}>
+                        <Box fontSize={'14px'}>
+                          {t.rich('jetbrains_guide_modified_file', {
+                            blue: (chunks) => (
+                              <Text
+                                fontWeight={'bold'}
+                                display={'inline-block'}
+                                color={'brightBlue.600'}
+                              >
+                                {chunks}
+                              </Text>
+                            )
+                          })}
+                        </Box>
+                        <ScriptCode
+                          platform={script.platform}
+                          defaultOpen
+                          script={sshConfig(
+                            jetbrainsGuideData.configHost,
+                            jetbrainsGuideData.host,
+                            jetbrainsGuideData.port,
+                            jetbrainsGuideData.userName
+                          )}
+                        />
+                      </Flex>
+                      <StepSeparator />
+                    </Step>
+                  </Box>
+                  {/* 4 */}
+                  <Box w={'100%'}>
+                    <Step>
+                      <StepIndicator
+                        backgroundColor={'grayModern.100'}
+                        borderColor={'grayModern.100'}
+                      >
+                        <StepStatus incomplete={<StepNumber />} />
+                      </StepIndicator>
+                      <Flex mt={1} ml={2} mb={5} flexDirection={'column'} gap={4} flex={1}>
+                        <Box fontSize={'14px'}>{t('jetbrains_guide_command')}</Box>
+                        <ScriptCode
+                          oneLine={true}
+                          defaultOpen={true}
+                          platform={script.platform}
+                          script={sshConnectCommand(jetbrainsGuideData.configHost)}
+                        />
+                      </Flex>
+                      <StepSeparator />
+                    </Step>
+                  </Box>
+                  {/* done */}
+                  <Step>
+                    <Circle
+                      size="10px"
+                      bg="grayModern.100"
+                      top={-3}
+                      left={2.5}
+                      position={'absolute'}
+                    />
+                  </Step>
+                </Stepper>
+                <Box position={'relative'} w={'100%'} h={'30px'} mt={4}>
+                  <Button
+                    w={'100%'}
+                    bg={'white'}
+                    borderWidth={1}
+                    borderRadius={'6px'}
+                    color={'green.600'}
+                    size={'sm'}
+                    px={1}
+                    borderColor={'green.600'}
+                    _hover={{
+                      bg: 'green.50'
+                    }}
+                    onClick={() => onClose()}
+                    h={'36px'}
+                  >
+                    {t('jetbrains_guide_confirm')}
+                  </Button>
+                </Box>
+              </>
+            )}
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </Box>
+  );
+};
+
+export default SshConnectModal;
diff --git a/frontend/providers/devbox/components/providers/MyChakraProvider.tsx b/frontend/providers/devbox/components/providers/MyChakraProvider.tsx
index 16b92083fee7..d0007f4efa87 100644
--- a/frontend/providers/devbox/components/providers/MyChakraProvider.tsx
+++ b/frontend/providers/devbox/components/providers/MyChakraProvider.tsx
@@ -1,9 +1,9 @@
-import { ChakraProvider as CkProvider } from '@chakra-ui/react'
+import { ChakraProvider as CkProvider } from '@chakra-ui/react';
 
-import { theme } from '@/constants/theme'
+import { theme } from '@/constants/theme';
 
 const ChakraProvider = ({ children }: { children: React.ReactNode }) => {
-  return <CkProvider theme={theme}>{children}</CkProvider>
-}
+  return <CkProvider theme={theme}>{children}</CkProvider>;
+};
 
-export default ChakraProvider
+export default ChakraProvider;
diff --git a/frontend/providers/devbox/components/providers/MyIntlProvider.tsx b/frontend/providers/devbox/components/providers/MyIntlProvider.tsx
index 39090ece6c37..1d20574f8e5b 100644
--- a/frontend/providers/devbox/components/providers/MyIntlProvider.tsx
+++ b/frontend/providers/devbox/components/providers/MyIntlProvider.tsx
@@ -1,10 +1,10 @@
-import React from 'react'
-import { getMessages } from 'next-intl/server'
-import { NextIntlClientProvider } from 'next-intl'
+import React from 'react';
+import { getMessages } from 'next-intl/server';
+import { NextIntlClientProvider } from 'next-intl';
 
 const IntlProvider = async ({ children }: { children: React.ReactNode }) => {
-  const messages = await getMessages()
-  return <NextIntlClientProvider messages={messages}>{children}</NextIntlClientProvider>
-}
+  const messages = await getMessages();
+  return <NextIntlClientProvider messages={messages}>{children}</NextIntlClientProvider>;
+};
 
-export default IntlProvider
+export default IntlProvider;
diff --git a/frontend/providers/devbox/components/providers/MyQueryProvider.tsx b/frontend/providers/devbox/components/providers/MyQueryProvider.tsx
index 2a75959db819..591e018627e2 100644
--- a/frontend/providers/devbox/components/providers/MyQueryProvider.tsx
+++ b/frontend/providers/devbox/components/providers/MyQueryProvider.tsx
@@ -1,6 +1,6 @@
-'use client'
+'use client';
 
-import { isServer, QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { isServer, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 const makeQueryClient = () => {
   return new QueryClient({
     defaultOptions: {
@@ -10,16 +10,16 @@ const makeQueryClient = () => {
         cacheTime: 0
       }
     }
-  })
-}
-let browserQueryClient: QueryClient | undefined = undefined
+  });
+};
+let browserQueryClient: QueryClient | undefined = undefined;
 const getQueryClient = () => {
-  if (isServer) return makeQueryClient()
+  if (isServer) return makeQueryClient();
   else {
-    if (!browserQueryClient) browserQueryClient = makeQueryClient()
-    return browserQueryClient
+    if (!browserQueryClient) browserQueryClient = makeQueryClient();
+    return browserQueryClient;
   }
-}
+};
 const QueryProvider = ({ children }: { children: React.ReactNode }) => {
   // const [queryClient] = useState(
   //   () =>
@@ -33,8 +33,8 @@ const QueryProvider = ({ children }: { children: React.ReactNode }) => {
   //       }
   //     })
   // )
-  const queryClient = getQueryClient()
-  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-}
+  const queryClient = getQueryClient();
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+};
 
-export default QueryProvider
+export default QueryProvider;
diff --git a/frontend/providers/devbox/components/providers/MyRouteHandlerProvider.tsx b/frontend/providers/devbox/components/providers/MyRouteHandlerProvider.tsx
index dd70eef27983..c982d0ce9914 100644
--- a/frontend/providers/devbox/components/providers/MyRouteHandlerProvider.tsx
+++ b/frontend/providers/devbox/components/providers/MyRouteHandlerProvider.tsx
@@ -1,43 +1,43 @@
-'use client'
+'use client';
 
-import NProgress from 'nprogress'
-import { useEffect } from 'react'
+import NProgress from 'nprogress';
+import { useEffect } from 'react';
 
-import { usePathname } from '@/i18n'
-import { useGlobalStore } from '@/stores/global'
+import { usePathname } from '@/i18n';
+import { useGlobalStore } from '@/stores/global';
 
-import { useSearchParams } from 'next/navigation'
-import 'nprogress/nprogress.css'
+import { useSearchParams } from 'next/navigation';
+import 'nprogress/nprogress.css';
 
 const RouteHandlerProvider = ({ children }: { children: React.ReactNode }) => {
-  const pathname = usePathname()
-  const search = useSearchParams()
-  const { setLastRoute } = useGlobalStore()
+  const pathname = usePathname();
+  const search = useSearchParams();
+  const { setLastRoute } = useGlobalStore();
 
   useEffect(() => {
     return () => {
-      setLastRoute(pathname)
-    }
+      setLastRoute(pathname);
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pathname])
+  }, [pathname]);
 
   useEffect(() => {
-    const handleRouteChangeStart = () => NProgress.start()
-    const handleRouteChangeComplete = () => NProgress.done()
-    const handleRouteChangeError = () => NProgress.done()
+    const handleRouteChangeStart = () => NProgress.start();
+    const handleRouteChangeComplete = () => NProgress.done();
+    const handleRouteChangeError = () => NProgress.done();
 
-    document.addEventListener('routeChangeStart', handleRouteChangeStart)
-    document.addEventListener('routeChangeComplete', handleRouteChangeComplete)
-    document.addEventListener('routeChangeError', handleRouteChangeError)
+    document.addEventListener('routeChangeStart', handleRouteChangeStart);
+    document.addEventListener('routeChangeComplete', handleRouteChangeComplete);
+    document.addEventListener('routeChangeError', handleRouteChangeError);
 
     return () => {
-      document.removeEventListener('routeChangeStart', handleRouteChangeStart)
-      document.removeEventListener('routeChangeComplete', handleRouteChangeComplete)
-      document.removeEventListener('routeChangeError', handleRouteChangeError)
-    }
-  }, [])
+      document.removeEventListener('routeChangeStart', handleRouteChangeStart);
+      document.removeEventListener('routeChangeComplete', handleRouteChangeComplete);
+      document.removeEventListener('routeChangeError', handleRouteChangeError);
+    };
+  }, []);
 
-  return <div>{children}</div>
-}
+  return <div>{children}</div>;
+};
 
-export default RouteHandlerProvider
+export default RouteHandlerProvider;
diff --git a/frontend/providers/devbox/constants/devbox.ts b/frontend/providers/devbox/constants/devbox.ts
index 12c3890a4f28..dec77350fcd3 100644
--- a/frontend/providers/devbox/constants/devbox.ts
+++ b/frontend/providers/devbox/constants/devbox.ts
@@ -1,10 +1,10 @@
-import { DevboxDetailType, DevboxEditType, DevboxEditTypeV2 } from '@/types/devbox'
+import { DevboxDetailType, DevboxEditType, DevboxEditTypeV2 } from '@/types/devbox';
 
-export const crLabelKey = 'sealos-devbox-cr'
-export const devboxKey = 'cloud.sealos.io/devbox-manager'
-export const devboxIdKey = 'cloud.sealos.io/app-devbox-id'
-export const ingressProtocolKey = 'nginx.ingress.kubernetes.io/backend-protocol'
-export const publicDomainKey = `cloud.sealos.io/app-deploy-manager-domain`
+export const crLabelKey = 'sealos-devbox-cr';
+export const devboxKey = 'cloud.sealos.io/devbox-manager';
+export const devboxIdKey = 'cloud.sealos.io/app-devbox-id';
+export const ingressProtocolKey = 'nginx.ingress.kubernetes.io/backend-protocol';
+export const publicDomainKey = `cloud.sealos.io/app-deploy-manager-domain`;
 
 export enum LanguageTypeEnum {
   java = 'java',
@@ -64,7 +64,7 @@ export const CpuSlideMarkList = [
   { label: 4, value: 4000 },
   { label: 8, value: 8000 },
   { label: 16, value: 16000 }
-]
+];
 
 export const MemorySlideMarkList = [
   // { label: '512Mi', value: 512 },
@@ -76,7 +76,7 @@ export const MemorySlideMarkList = [
   // { label: '12G', value: 12288 },
   { label: '16G', value: 16384 },
   { label: '32G', value: 32768 }
-]
+];
 
 export const defaultDevboxEditValue: DevboxEditType = {
   name: 'devbox',
@@ -85,7 +85,7 @@ export const defaultDevboxEditValue: DevboxEditType = {
   cpu: CpuSlideMarkList[1].value,
   memory: MemorySlideMarkList[1].value,
   networks: []
-}
+};
 export const defaultDevboxEditValueV2: DevboxEditTypeV2 = {
   name: 'devbox',
   image: '',
@@ -95,7 +95,7 @@ export const defaultDevboxEditValueV2: DevboxEditTypeV2 = {
   cpu: CpuSlideMarkList[1].value,
   memory: MemorySlideMarkList[1].value,
   networks: []
-}
+};
 export const devboxStatusMap = {
   [DevboxStatusEnum.Stopping]: {
     label: 'Stopping',
@@ -146,7 +146,7 @@ export const devboxStatusMap = {
     backgroundColor: '#F5F5F8',
     dotColor: '#787A90'
   }
-}
+};
 
 export const devboxReleaseStatusMap = {
   [DevboxReleaseStatusEnum.Success]: {
@@ -170,10 +170,10 @@ export const devboxReleaseStatusMap = {
     backgroundColor: '#FEF3F2',
     dotColor: '#F04438'
   }
-}
+};
 
 export const editModeMap: (isEdit: boolean) => {
-  [key: string]: string
+  [key: string]: string;
 } = (isEdit: boolean) => {
   if (isEdit) {
     return {
@@ -182,7 +182,7 @@ export const editModeMap: (isEdit: boolean) => {
       applyMessage: 'confirm_update_devbox',
       applySuccess: 'update_success',
       applyError: 'update_failed'
-    }
+    };
   }
 
   return {
@@ -191,8 +191,8 @@ export const editModeMap: (isEdit: boolean) => {
     applyMessage: 'confirm_create_devbox',
     applySuccess: 'create_success',
     applyError: 'create_failed'
-  }
-}
+  };
+};
 
 export const defaultDevboxDetail: DevboxDetailType = {
   ...defaultDevboxEditValue,
@@ -229,13 +229,13 @@ export const defaultDevboxDetail: DevboxDetailType = {
     sshPort: 0,
     sshPrivateKey: ''
   }
-}
+};
 
 export const ProtocolList = [
   { value: 'HTTP', label: 'https://' },
   { value: 'GRPC', label: 'grpcs://' },
   { value: 'WS', label: 'wss://' }
-]
+];
 
 export enum YamlKindEnum {
   Devbox = 'Devbox',
@@ -271,4 +271,4 @@ export const podStatusMap = {
     reason: '',
     message: ''
   }
-}
+};
diff --git a/frontend/providers/devbox/components/YamlCode/hljs.ts b/frontend/providers/devbox/constants/hljs.ts
similarity index 100%
rename from frontend/providers/devbox/components/YamlCode/hljs.ts
rename to frontend/providers/devbox/constants/hljs.ts
diff --git a/frontend/providers/devbox/constants/scripts.ts b/frontend/providers/devbox/constants/scripts.ts
new file mode 100644
index 000000000000..16c37e991b50
--- /dev/null
+++ b/frontend/providers/devbox/constants/scripts.ts
@@ -0,0 +1,181 @@
+export const windowsScriptsTemplate = (
+  privateKey: string,
+  configHost: string,
+  host: string,
+  port: string,
+  user: string
+) => `\$ConfigDirTxt = "~/.ssh/sealos/"
+\$ConfigDir = "\$HOME\\.ssh\\sealos\\"
+\$SSHConfigFile = "\$HOME\\.ssh\\config"
+
+\$ConfigFileTxt = "~/.ssh/sealos/devbox_config"
+\$ConfigFile = "\$ConfigDir\\devbox_config"
+
+\$PrivateKey = @"
+${privateKey}
+"@
+
+\$Name = "${configHost}"
+\$HostName = "${host}"
+\$Port = "${port}"
+\$User = "${user}"
+
+\$IdentityFileTxt = "\${ConfigDirTxt}\$Name"
+\$IdentityFile = "\$ConfigDir\$Name"
+\$HostEntry = "Host \$Name\`n  HostName \$HostName\`n  Port \$Port\`n  User \$User\`n  IdentityFile \$IdentityFileTxt\`n  IdentitiesOnly yes\`n  StrictHostKeyChecking no"
+
+# Check if the configuration directory exists
+if (-Not (Test-Path \$ConfigDir)) {
+    New-Item -ItemType Directory -Path \$ConfigDir -Force | Out-Null
+}
+
+# Check if the configuration file exists
+if (-Not (Test-Path \$ConfigFile)) {
+    New-Item -ItemType File -Path \$ConfigFile -Force | Out-Null
+}
+
+# Check if the default config exists
+if (-Not (Test-Path \$SSHConfigFile)) {
+    New-Item -ItemType File -Path \$SSHConfigFile -Force | Out-Null
+}
+
+# Check if the .ssh/config file contains the Include statement
+if (-Not (Get-Content \$SSHConfigFile)) {
+    Add-Content -Path \$SSHConfigFile -Value "Include \$ConfigFileTxt\`n"
+} else {
+    if (-Not (Select-String -Path \$SSHConfigFile -Pattern "Include \$ConfigFileTxt")) {
+        (Get-Content \$SSHConfigFile) | ForEach-Object {
+            if (\$_ -eq (Get-Content \$SSHConfigFile)[0]) {
+                "Include \$ConfigFileTxt\`n\$_"
+            } else {
+                \$_
+            }
+        } | Set-Content \$SSHConfigFile
+    }
+}
+
+# Write the private key to the file
+\$PrivateKey | Set-Content -Path \$IdentityFile -Force
+
+# Check if a host with the same name exists
+if (Select-String -Path \$ConfigFile -Pattern "^Host \$Name") {
+    $newContent = @()
+    $skip = $false
+
+    (Get-Content $ConfigFile) | ForEach-Object {
+        if ($_ -match "^Host $Name$") {
+            $skip = $true
+            $newContent += $HostEntry
+        }
+        elseif ($_ -match "^Host ") {
+            $skip = $false
+            $newContent += $_
+        }
+        elseif (-not $skip) {
+            $newContent += $_
+        }
+    }
+
+    $newContent | Set-Content $ConfigFile
+} else {
+    # Append to the end of the file
+    Add-Content -Path \$ConfigFile -Value \$HostEntry
+}
+`;
+export const macosAndLinuxScriptsTemplate = (
+  privateKey: string,
+  configHost: string,
+  host: string,
+  port: string,
+  user: string
+) => `#!/bin/bash
+
+CONFIG_DIR_TXT="~/.ssh/sealos/"
+CONFIG_DIR=~/.ssh/sealos/
+SSH_CONFIG_FILE=~/.ssh/config
+
+CONFIG_FILE_TXT="\${CONFIG_DIR_TXT}devbox_config"
+CONFIG_FILE=\${CONFIG_DIR}devbox_config
+
+PRIVATE_KEY="${privateKey}"
+NAME="${configHost}"
+HOST="${host}"
+PORT="${port}"
+USER="${user}"
+
+IDENTITY_FILE_TXT="\${CONFIG_DIR_TXT}\$NAME"
+IDENTITY_FILE="\${CONFIG_DIR}\$NAME"
+HOST_ENTRY="
+Host \$NAME
+  HostName \$HOST
+  Port \$PORT
+  User \$USER
+  IdentityFile \$IDENTITY_FILE_TXT
+  IdentitiesOnly yes
+  StrictHostKeyChecking no"
+
+mkdir -p \$CONFIG_DIR
+
+if [ ! -f "\$CONFIG_FILE" ]; then
+    touch "\$CONFIG_FILE"
+    chmod 0644 "\$CONFIG_FILE"
+fi
+
+if [ ! -f "\$SSH_CONFIG_FILE" ]; then
+    touch "\$SSH_CONFIG_FILE"
+    chmod 0600 "\$SSH_CONFIG_FILE"
+fi
+
+if [ ! -s "\$SSH_CONFIG_FILE" ]; then
+    echo "Include \$CONFIG_FILE_TXT\\n" >> "\$SSH_CONFIG_FILE"
+else
+    if ! grep -q "Include \$CONFIG_FILE_TXT" "\$SSH_CONFIG_FILE"; then
+        temp_file="\$(mktemp)"
+        echo "Include \$CONFIG_FILE_TXT" > "\$temp_file"
+        cat "\$SSH_CONFIG_FILE" >> "\$temp_file"
+        mv "\$temp_file" "\$SSH_CONFIG_FILE"
+    fi
+fi
+
+echo "$PRIVATE_KEY" > "$IDENTITY_FILE"
+chmod 0600 "$IDENTITY_FILE"
+
+if grep -q "^Host \$NAME" "\$CONFIG_FILE"; then
+    temp_file="\$(mktemp)"
+    awk '
+        BEGIN { skip=0 }
+        /^Host '"$NAME"'$/ { skip=1; next }
+        /^Host / {
+            skip=0
+            print
+            next
+        }
+        /^$/ {
+            skip=0
+            print
+            next
+        }
+        !skip { print }
+    ' "$CONFIG_FILE" > "$temp_file"
+    echo "\$HOST_ENTRY" >> "$temp_file"
+    mv "$temp_file" "$CONFIG_FILE"
+else
+    echo "\$HOST_ENTRY" >> "\$CONFIG_FILE"
+fi`;
+
+export const sshConfig = (
+  configHost: string,
+  host: string,
+  port: string,
+  user: string
+) => `Host ${configHost}
+  HostName ${host}
+  Port ${port}
+  User ${user}
+  IdentityFile ~/.ssh/sealos/${configHost}
+  IdentitiesOnly yes
+  StrictHostKeyChecking no
+`;
+
+export const sshConnectCommand = (configHost: string) => `ssh ${configHost}
+`;
diff --git a/frontend/providers/devbox/constants/template.ts b/frontend/providers/devbox/constants/template.ts
index 6efc03f81018..db5d991a3a04 100644
--- a/frontend/providers/devbox/constants/template.ts
+++ b/frontend/providers/devbox/constants/template.ts
@@ -1,9 +1,9 @@
 export enum TemplateState {
   publicTemplate = 'publicTemplate',
-  privateTemplate = 'privateTemplate',
+  privateTemplate = 'privateTemplate'
 }
 export enum TemplateVersionState {
-  ACTIVE = 'ACTIVE',       
+  ACTIVE = 'ACTIVE',
   PENDING_DELETE = 'PENDING_DELETE',
   DELETED = 'DELETED'
-}
\ No newline at end of file
+}
diff --git a/frontend/providers/devbox/constants/theme.ts b/frontend/providers/devbox/constants/theme.ts
index 9184b3b6fe85..71bb2020bcf3 100644
--- a/frontend/providers/devbox/constants/theme.ts
+++ b/frontend/providers/devbox/constants/theme.ts
@@ -1,5 +1,5 @@
-import { extendTheme } from '@chakra-ui/react'
-import { theme as SealosTheme } from '@sealos/ui'
+import { extendTheme } from '@chakra-ui/react';
+import { theme as SealosTheme } from '@sealos/ui';
 
 export const theme = extendTheme(SealosTheme, {
   styles: {
@@ -14,4 +14,4 @@ export const theme = extendTheme(SealosTheme, {
       }
     }
   }
-})
+});
diff --git a/frontend/providers/devbox/deploy/manifests/ingress.yaml.tmpl b/frontend/providers/devbox/deploy/manifests/ingress.yaml.tmpl
index 381eed8e2393..9c51bd69affb 100644
--- a/frontend/providers/devbox/deploy/manifests/ingress.yaml.tmpl
+++ b/frontend/providers/devbox/deploy/manifests/ingress.yaml.tmpl
@@ -15,7 +15,7 @@ metadata:
   namespace: devbox-frontend
 spec:
   rules:
-    - host: devbox.{{ .cloudDomain }}{{ if .cloudPort }}:{{ .cloudPort }}{{ end }}
+    - host: devbox.{{ .cloudDomain }}
       http:
         paths:
           - pathType: Prefix
@@ -27,5 +27,5 @@ spec:
                   number: 3000
   tls:
     - hosts:
-        - devbox.{{ .cloudDomain }}{{ if .cloudPort }}:{{ .cloudPort }}{{ end }}
-      secretName: wildcard-cert
+        - devbox.{{ .cloudDomain }}
+      secretName: {{ .certSecretName }}
diff --git a/frontend/providers/devbox/hooks/useConfirm.tsx b/frontend/providers/devbox/hooks/useConfirm.tsx
index 63fda9155433..29b5f499acc9 100644
--- a/frontend/providers/devbox/hooks/useConfirm.tsx
+++ b/frontend/providers/devbox/hooks/useConfirm.tsx
@@ -9,32 +9,32 @@ import {
   Button,
   Checkbox,
   Box
-} from '@chakra-ui/react'
-import { useTranslations } from 'next-intl'
-import { useCallback, useRef, useState } from 'react'
+} from '@chakra-ui/react';
+import { useTranslations } from 'next-intl';
+import { useCallback, useRef, useState } from 'react';
 
 const ConfirmCheckbox = ({
   checkboxLabel,
   onCheckedChange
 }: {
-  checkboxLabel: string
-  onCheckedChange: (checked: boolean) => void
+  checkboxLabel: string;
+  onCheckedChange: (checked: boolean) => void;
 }) => {
-  const [isChecked, setIsChecked] = useState(true)
-  const t = useTranslations()
+  const [isChecked, setIsChecked] = useState(true);
+  const t = useTranslations();
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = e.target.checked
-    setIsChecked(newValue)
-    onCheckedChange(newValue)
-  }
+    const newValue = e.target.checked;
+    setIsChecked(newValue);
+    onCheckedChange(newValue);
+  };
 
   return (
     <Checkbox isChecked={isChecked} spacing={4} onChange={handleChange}>
       {t(checkboxLabel)}
     </Checkbox>
-  )
-}
+  );
+};
 
 export const useConfirm = ({
   title = 'prompt',
@@ -44,29 +44,29 @@ export const useConfirm = ({
   showCheckbox = false,
   checkboxLabel = ''
 }: {
-  title?: string
-  content: string
-  confirmText?: string
-  cancelText?: string
-  showCheckbox?: boolean
-  checkboxLabel?: string
+  title?: string;
+  content: string;
+  confirmText?: string;
+  cancelText?: string;
+  showCheckbox?: boolean;
+  checkboxLabel?: string;
 }) => {
-  const { isOpen, onOpen, onClose } = useDisclosure()
-  const t = useTranslations()
-  const cancelRef = useRef(null)
-  const confirmCb = useRef<any>()
-  const cancelCb = useRef<any>()
-  const isCheckedRef = useRef(true)
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const t = useTranslations();
+  const cancelRef = useRef(null);
+  const confirmCb = useRef<any>();
+  const cancelCb = useRef<any>();
+  const isCheckedRef = useRef(true);
 
   return {
     openConfirm: useCallback(
       (confirm?: any, cancel?: any) => {
         return function () {
-          onOpen()
-          confirmCb.current = confirm
-          cancelCb.current = cancel
-          isCheckedRef.current = true
-        }
+          onOpen();
+          confirmCb.current = confirm;
+          cancelCb.current = cancel;
+          isCheckedRef.current = true;
+        };
       },
       [onOpen]
     ),
@@ -86,7 +86,7 @@ export const useConfirm = ({
                     <ConfirmCheckbox
                       checkboxLabel={checkboxLabel}
                       onCheckedChange={(checked) => {
-                        isCheckedRef.current = checked
+                        isCheckedRef.current = checked;
                       }}
                     />
                   )}
@@ -97,23 +97,25 @@ export const useConfirm = ({
                 <Button
                   variant={'outline'}
                   onClick={() => {
-                    onClose()
-                    typeof cancelCb.current === 'function' && cancelCb.current()
-                  }}>
+                    onClose();
+                    typeof cancelCb.current === 'function' && cancelCb.current();
+                  }}
+                >
                   {t(cancelText)}
                 </Button>
                 <Button
                   ml={3}
                   variant={'solid'}
                   onClick={() => {
-                    onClose()
+                    onClose();
                     if (showCheckbox) {
                       typeof confirmCb.current === 'function' &&
-                        confirmCb.current(isCheckedRef.current)
+                        confirmCb.current(isCheckedRef.current);
                     } else {
-                      typeof confirmCb.current === 'function' && confirmCb.current()
+                      typeof confirmCb.current === 'function' && confirmCb.current();
                     }
-                  }}>
+                  }}
+                >
                   {t(confirmText)}
                 </Button>
               </AlertDialogFooter>
@@ -123,5 +125,5 @@ export const useConfirm = ({
       ),
       [cancelText, checkboxLabel, confirmText, content, isOpen, onClose, showCheckbox, t, title]
     )
-  }
-}
+  };
+};
diff --git a/frontend/providers/devbox/hooks/useDetailDriver.tsx b/frontend/providers/devbox/hooks/useDetailDriver.tsx
new file mode 100644
index 000000000000..0d742f35d7f2
--- /dev/null
+++ b/frontend/providers/devbox/hooks/useDetailDriver.tsx
@@ -0,0 +1,132 @@
+import { useGuideStore } from '@/stores/guide';
+import { Flex, FlexProps, Icon, Text } from '@chakra-ui/react';
+import { DriveStep, driver } from '@sealos/driver';
+import { useTranslations } from 'next-intl';
+import { DriverStarIcon } from './useDriver';
+import { checkUserTask } from '@/api/platform';
+
+export default function useDetailDriver() {
+  const t = useTranslations();
+  const { detailCompleted, setDetailCompleted, isGuideEnabled } = useGuideStore();
+
+  const PopoverBodyInfo = (props: FlexProps) => {
+    return (
+      <Flex
+        gap="4px"
+        id="popover-info"
+        position={'absolute'}
+        bottom={'-30px'}
+        color={'white'}
+        alignItems={'center'}
+        {...props}
+      >
+        <Text color={'#FFF'} fontSize={'12px'} fontWeight={500}>
+          {t('guide.click_shadow_skip')}
+        </Text>
+        <Icon
+          xmlns="http://www.w3.org/2000/svg"
+          width="20"
+          height="20"
+          viewBox="0 0 20 20"
+          fill="white"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M7.50001 0.97229C7.88354 0.97229 8.19445 1.2832 8.19445 1.66673V2.91673C8.19445 3.30027 7.88354 3.61118 7.50001 3.61118C7.11648 3.61118 6.80556 3.30027 6.80556 2.91673V1.66673C6.80556 1.2832 7.11648 0.97229 7.50001 0.97229ZM2.84229 2.84235C3.11349 2.57116 3.55319 2.57116 3.82439 2.84235L4.70827 3.72624C4.97947 3.99744 4.97947 4.43713 4.70827 4.70833C4.43707 4.97953 3.99737 4.97953 3.72618 4.70833L2.84229 3.82445C2.5711 3.55325 2.5711 3.11355 2.84229 2.84235ZM12.2083 2.84235C12.4795 3.11355 12.4795 3.55325 12.2083 3.82445L11.3244 4.70833C11.0532 4.97953 10.6135 4.97953 10.3423 4.70833C10.0711 4.43713 10.0711 3.99744 10.3423 3.72624L11.2262 2.84235C11.4974 2.57116 11.9371 2.57116 12.2083 2.84235ZM8.05107 6.36654C8.05921 6.36904 8.06735 6.37155 8.07548 6.37406L17.4584 9.26437C17.6747 9.33097 17.8794 9.394 18.0383 9.45881C18.183 9.51788 18.4465 9.63567 18.6129 9.8969C18.8034 10.1959 18.8398 10.5678 18.7109 10.8981C18.5983 11.1866 18.3627 11.3532 18.2321 11.4393C18.0888 11.5336 17.9002 11.6352 17.7009 11.7425L13.8279 13.828L11.7424 17.701C11.6351 17.9003 11.5336 18.0889 11.4392 18.2322C11.3531 18.3628 11.1865 18.5984 10.898 18.711C10.5677 18.8399 10.1958 18.8035 9.8968 18.613C9.63557 18.4466 9.51779 18.1831 9.45872 18.0384C9.39391 17.8795 9.33088 17.6748 9.26429 17.4586L6.37399 8.07554C6.37148 8.0674 6.36897 8.05926 6.36647 8.05112C6.31285 7.87717 6.25951 7.70409 6.2288 7.55823C6.19822 7.413 6.15971 7.17003 6.25365 6.91402C6.36609 6.60762 6.60756 6.36615 6.91396 6.25371C7.16997 6.15977 7.41294 6.19829 7.55817 6.22886C7.70404 6.25957 7.87712 6.31292 8.05107 6.36654ZM7.71679 7.71686L10.564 16.9599L12.609 13.1621C12.6112 13.158 12.6136 13.1535 12.6162 13.1486C12.6422 13.0999 12.6884 13.0133 12.7511 12.9339C12.8047 12.8661 12.866 12.8048 12.9339 12.7512C13.0132 12.6884 13.0999 12.6422 13.1485 12.6163C13.1535 12.6137 13.158 12.6112 13.1621 12.609L16.9598 10.5641L7.71679 7.71686ZM0.972229 7.50007C0.972229 7.11654 1.28314 6.80562 1.66667 6.80562H2.91667C3.3002 6.80562 3.61112 7.11654 3.61112 7.50007C3.61112 7.8836 3.3002 8.19451 2.91667 8.19451H1.66667C1.28314 8.19451 0.972229 7.8836 0.972229 7.50007ZM4.70827 10.3424C4.97947 10.6136 4.97947 11.0532 4.70827 11.3244L3.82439 12.2083C3.55319 12.4795 3.11349 12.4795 2.84229 12.2083C2.5711 11.9371 2.5711 11.4974 2.84229 11.2262L3.72618 10.3424C3.99737 10.0712 4.43707 10.0712 4.70827 10.3424Z"
+          />
+        </Icon>
+      </Flex>
+    );
+  };
+
+  const baseSteps: DriveStep[] = [
+    {
+      element: '.guide-close-button',
+      popover: {
+        side: 'bottom',
+        align: 'start',
+        borderRadius: '0px 12px 12px 12px',
+        PopoverBody: (
+          <Flex gap={'6px'}>
+            <DriverStarIcon />
+            <Text color={'#24282C'} fontSize={'12px'} fontWeight={500}>
+              {t('guide.devbox_close_button')}
+            </Text>
+            <PopoverBodyInfo />
+          </Flex>
+        )
+      }
+    },
+    {
+      element: '.guide-network-address',
+      popover: {
+        side: 'bottom',
+        align: 'start',
+        borderRadius: '0px 12px 12px 12px',
+        PopoverBody: (
+          <Flex gap={'6px'}>
+            <DriverStarIcon />
+            <Text color={'#24282C'} fontSize={'12px'} fontWeight={500}>
+              {t('guide.devbox_network_address')}
+            </Text>
+            <PopoverBodyInfo top={'80px'} />
+          </Flex>
+        )
+      }
+    },
+    {
+      element: '.guide-release-button',
+      popover: {
+        side: 'left',
+        align: 'start',
+        borderRadius: '12px 12px 0px 12px',
+        PopoverBody: (
+          <Flex gap={'6px'}>
+            <DriverStarIcon />
+            <Text color={'#24282C'} fontSize={'12px'} fontWeight={500}>
+              {t('guide.devbox_release_button')}
+            </Text>
+            <PopoverBodyInfo top={'-120px'} />
+          </Flex>
+        )
+      }
+    }
+  ];
+
+  const handleUserGuide = async () => {
+    try {
+      if (isGuideEnabled && !detailCompleted) {
+        const driverObj = driver({
+          disableActiveInteraction: true,
+          showProgress: false,
+          allowClose: false,
+          allowClickMaskNextStep: true,
+          allowPreviousStep: false,
+          isShowButtons: false,
+          allowKeyboardControl: false,
+          overlaySkipButton: t('skip') || 'skip',
+          steps: baseSteps,
+          onDestroyed: () => {
+            console.log('onDestroyed Detail');
+            setDetailCompleted(true);
+            checkUserTask().then((err) => {
+              console.log(err);
+            });
+          },
+          interceptSkipButtonClick: () => {
+            driverObj.destroy();
+          }
+        });
+
+        requestAnimationFrame(() => {
+          driverObj.drive();
+        });
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  return { handleUserGuide };
+}
diff --git a/frontend/providers/devbox/hooks/useDriver.tsx b/frontend/providers/devbox/hooks/useDriver.tsx
new file mode 100644
index 000000000000..64cbb89a8094
--- /dev/null
+++ b/frontend/providers/devbox/hooks/useDriver.tsx
@@ -0,0 +1,180 @@
+import { getUserTasks } from '@/api/platform';
+import { useGuideStore } from '@/stores/guide';
+import { formatMoney } from '@/utils/tools';
+import { Flex, FlexProps, Icon, Text } from '@chakra-ui/react';
+import { driver } from '@sealos/driver';
+import { useTranslations } from 'next-intl';
+import { useCallback, useState } from 'react';
+
+export function DriverStarIcon() {
+  return (
+    <Icon xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21" fill="none">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.24999 1.58789C4.5696 1.58789 4.82869 1.84699 4.82869 2.16659V3.67122H6.33332C6.65293 3.67122 6.91203 3.93032 6.91203 4.24993C6.91203 4.56954 6.65293 4.82863 6.33332 4.82863H4.82869V6.33326C4.82869 6.65287 4.5696 6.91196 4.24999 6.91196C3.93038 6.91196 3.67128 6.65287 3.67128 6.33326V4.82863H2.16666C1.84705 4.82863 1.58795 4.56954 1.58795 4.24993C1.58795 3.93032 1.84705 3.67122 2.16666 3.67122H3.67128V2.16659C3.67128 1.84699 3.93038 1.58789 4.24999 1.58789ZM11.3333 2.42122C11.5728 2.42122 11.7875 2.56869 11.8735 2.79218L13.3186 6.54957C13.5643 7.18827 13.6548 7.41187 13.7853 7.59548C13.9098 7.77051 14.0627 7.92344 14.2378 8.04791C14.4214 8.17846 14.645 8.269 15.2837 8.51465L19.0411 9.9598C19.2646 10.0458 19.412 10.2605 19.412 10.4999C19.412 10.7394 19.2646 10.9541 19.0411 11.0401L15.2837 12.4852C14.645 12.7309 14.4214 12.8214 14.2378 12.9519C14.0627 13.0764 13.9098 13.2293 13.7853 13.4044C13.6548 13.588 13.5643 13.8116 13.3186 14.4503L11.8735 18.2077C11.7875 18.4312 11.5728 18.5786 11.3333 18.5786C11.0939 18.5786 10.8792 18.4312 10.7932 18.2077L9.34804 14.4503C9.10239 13.8116 9.01186 13.588 8.8813 13.4044C8.75684 13.2293 8.60391 13.0764 8.42887 12.9519C8.24526 12.8214 8.02166 12.7309 7.38297 12.4852L3.62558 11.0401C3.40209 10.9541 3.25462 10.7394 3.25462 10.4999C3.25462 10.2605 3.40209 10.0458 3.62558 9.9598L7.38296 8.51465C8.02166 8.269 8.24526 8.17846 8.42887 8.04791C8.60391 7.92345 8.75684 7.77051 8.8813 7.59548C9.01186 7.41187 9.10239 7.18827 9.34804 6.54957L10.7932 2.79219C10.8791 2.56869 11.0939 2.42122 11.3333 2.42122ZM11.3333 4.61201L10.4283 6.96506C10.4195 6.98797 10.4108 7.01059 10.4022 7.03291C10.1924 7.57876 10.0502 7.94881 9.82456 8.26619C9.62512 8.54667 9.38006 8.79173 9.09958 8.99117C8.78221 9.21684 8.41216 9.35905 7.86631 9.56883C7.84398 9.5774 7.82137 9.5861 7.79845 9.59491L5.4454 10.4999L7.79845 11.4049C7.82137 11.4138 7.84398 11.4225 7.86631 11.431C8.41216 11.6408 8.78221 11.783 9.09958 12.0087C9.38006 12.2081 9.62512 12.4532 9.82456 12.7337C10.0502 13.051 10.1924 13.4211 10.4022 13.9669C10.4108 13.9893 10.4195 14.0119 10.4283 14.0348L11.3333 16.3878L12.2383 14.0348C12.2472 14.0119 12.2558 13.9893 12.2644 13.967C12.4742 13.4211 12.6164 13.051 12.8421 12.7337C13.0415 12.4532 13.2866 12.2081 13.5671 12.0087C13.8844 11.783 14.2545 11.6408 14.8003 11.431C14.8227 11.4225 14.8453 11.4138 14.8682 11.4049L17.2212 10.4999L14.8682 9.59491C14.8453 9.5861 14.8227 9.57741 14.8004 9.56883C14.2545 9.35906 13.8844 9.21684 13.5671 8.99117C13.2866 8.79173 13.0415 8.54667 12.8421 8.26619C12.6164 7.94881 12.4742 7.57876 12.2644 7.03291C12.2558 7.01059 12.2472 6.98797 12.2383 6.96505L11.3333 4.61201ZM4.24999 14.0879C4.5696 14.0879 4.82869 14.347 4.82869 14.6666V16.1712H6.33332C6.65293 16.1712 6.91203 16.4303 6.91203 16.7499C6.91203 17.0695 6.65293 17.3286 6.33332 17.3286H4.82869V18.8333C4.82869 19.1529 4.5696 19.412 4.24999 19.412C3.93038 19.412 3.67128 19.1529 3.67128 18.8333V17.3286H2.16666C1.84705 17.3286 1.58795 17.0695 1.58795 16.7499C1.58795 16.4303 1.84705 16.1712 2.16666 16.1712H3.67128V14.6666C3.67128 14.347 3.93038 14.0879 4.24999 14.0879Z"
+        fill="url(#paint0_linear_864_3172)"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_864_3172"
+          x1="10.5"
+          y1="2.16659"
+          x2="10.5"
+          y2="18.8333"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#69AEFF" />
+          <stop offset="0.432292" stopColor="#6096FF" />
+          <stop offset="1" stopColor="#6C7FFF" />
+        </linearGradient>
+      </defs>
+    </Icon>
+  );
+}
+
+export default function useDriver() {
+  const t = useTranslations();
+  const { createCompleted, setCreateCompleted, setGuideEnabled } = useGuideStore();
+
+  const PopoverBodyInfo = (props: FlexProps) => {
+    return (
+      <Flex
+        gap="4px"
+        id="popover-info"
+        position={'absolute'}
+        bottom={'-30px'}
+        color={'white'}
+        alignItems={'center'}
+        {...props}
+      >
+        <Text color={'#FFF'} fontSize={'12px'} fontWeight={500}>
+          {t('guide.click_shadow_skip')}
+        </Text>
+        <Icon
+          xmlns="http://www.w3.org/2000/svg"
+          width="20"
+          height="20"
+          viewBox="0 0 20 20"
+          fill="white"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M7.50001 0.97229C7.88354 0.97229 8.19445 1.2832 8.19445 1.66673V2.91673C8.19445 3.30027 7.88354 3.61118 7.50001 3.61118C7.11648 3.61118 6.80556 3.30027 6.80556 2.91673V1.66673C6.80556 1.2832 7.11648 0.97229 7.50001 0.97229ZM2.84229 2.84235C3.11349 2.57116 3.55319 2.57116 3.82439 2.84235L4.70827 3.72624C4.97947 3.99744 4.97947 4.43713 4.70827 4.70833C4.43707 4.97953 3.99737 4.97953 3.72618 4.70833L2.84229 3.82445C2.5711 3.55325 2.5711 3.11355 2.84229 2.84235ZM12.2083 2.84235C12.4795 3.11355 12.4795 3.55325 12.2083 3.82445L11.3244 4.70833C11.0532 4.97953 10.6135 4.97953 10.3423 4.70833C10.0711 4.43713 10.0711 3.99744 10.3423 3.72624L11.2262 2.84235C11.4974 2.57116 11.9371 2.57116 12.2083 2.84235ZM8.05107 6.36654C8.05921 6.36904 8.06735 6.37155 8.07548 6.37406L17.4584 9.26437C17.6747 9.33097 17.8794 9.394 18.0383 9.45881C18.183 9.51788 18.4465 9.63567 18.6129 9.8969C18.8034 10.1959 18.8398 10.5678 18.7109 10.8981C18.5983 11.1866 18.3627 11.3532 18.2321 11.4393C18.0888 11.5336 17.9002 11.6352 17.7009 11.7425L13.8279 13.828L11.7424 17.701C11.6351 17.9003 11.5336 18.0889 11.4392 18.2322C11.3531 18.3628 11.1865 18.5984 10.898 18.711C10.5677 18.8399 10.1958 18.8035 9.8968 18.613C9.63557 18.4466 9.51779 18.1831 9.45872 18.0384C9.39391 17.8795 9.33088 17.6748 9.26429 17.4586L6.37399 8.07554C6.37148 8.0674 6.36897 8.05926 6.36647 8.05112C6.31285 7.87717 6.25951 7.70409 6.2288 7.55823C6.19822 7.413 6.15971 7.17003 6.25365 6.91402C6.36609 6.60762 6.60756 6.36615 6.91396 6.25371C7.16997 6.15977 7.41294 6.19829 7.55817 6.22886C7.70404 6.25957 7.87712 6.31292 8.05107 6.36654ZM7.71679 7.71686L10.564 16.9599L12.609 13.1621C12.6112 13.158 12.6136 13.1535 12.6162 13.1486C12.6422 13.0999 12.6884 13.0133 12.7511 12.9339C12.8047 12.8661 12.866 12.8048 12.9339 12.7512C13.0132 12.6884 13.0999 12.6422 13.1485 12.6163C13.1535 12.6137 13.158 12.6112 13.1621 12.609L16.9598 10.5641L7.71679 7.71686ZM0.972229 7.50007C0.972229 7.11654 1.28314 6.80562 1.66667 6.80562H2.91667C3.3002 6.80562 3.61112 7.11654 3.61112 7.50007C3.61112 7.8836 3.3002 8.19451 2.91667 8.19451H1.66667C1.28314 8.19451 0.972229 7.8836 0.972229 7.50007ZM4.70827 10.3424C4.97947 10.6136 4.97947 11.0532 4.70827 11.3244L3.82439 12.2083C3.55319 12.4795 3.11349 12.4795 2.84229 12.2083C2.5711 11.9371 2.5711 11.4974 2.84229 11.2262L3.72618 10.3424C3.99737 10.0712 4.43707 10.0712 4.70827 10.3424Z"
+          />
+        </Icon>
+      </Flex>
+    );
+  };
+
+  const driverObj = driver({
+    showProgress: false,
+    allowClose: false,
+    allowClickMaskNextStep: true,
+    allowPreviousStep: false,
+    isShowButtons: false,
+    allowKeyboardControl: false,
+    overlaySkipButton: t('skip') || 'skip',
+    disableActiveInteraction: true,
+    steps: [
+      {
+        element: '.guide-runtimes',
+        popover: {
+          side: 'bottom',
+          align: 'start',
+          borderRadius: '0px 12px 12px 12px',
+          PopoverBody: (
+            <Flex gap={'6px'}>
+              <DriverStarIcon />
+              <Text color={'#24282C'} fontSize={'13px'} fontWeight={500}>
+                {t('guide.deploy_runtimes')}
+              </Text>
+              <PopoverBodyInfo />
+            </Flex>
+          )
+        }
+      },
+      {
+        element: '.guide-custom-resources',
+        popover: {
+          side: 'bottom',
+          align: 'start',
+          borderRadius: '0px 12px 12px 12px',
+          PopoverBody: (
+            <Flex gap={'6px'}>
+              <DriverStarIcon />
+              <Text color={'#24282C'} fontSize={'13px'} fontWeight={500}>
+                {t('guide.deploy_custom_resources')}
+              </Text>
+              <PopoverBodyInfo top={'-120px'} />
+            </Flex>
+          )
+        }
+      },
+      {
+        element: '.guide-network-configuration',
+        popover: {
+          side: 'top',
+          align: 'start',
+          borderRadius: '12px 12px 12px 0px',
+          PopoverBody: (
+            <Flex gap={'6px'}>
+              <DriverStarIcon />
+              <Text color={'#24282C'} fontSize={'13px'} fontWeight={500}>
+                {t('guide.deploy_network')}
+              </Text>
+              <PopoverBodyInfo top={'-120px'} />
+            </Flex>
+          )
+        }
+      },
+      {
+        element: '.guide-cost',
+        popover: {
+          side: 'right',
+          align: 'center',
+          borderRadius: '0px 12px 12px 12px',
+          PopoverBody: (
+            <Flex gap={'6px'} alignItems={'center'} fontSize={'13px'} fontWeight={500}>
+              <DriverStarIcon />
+              <Text color={'#24282C'}>{t('guide.deploy_cost')}</Text>
+            </Flex>
+          )
+        }
+      }
+    ],
+    onDestroyed: () => {
+      setCreateCompleted(true);
+    }
+  });
+
+  const startGuide = useCallback(() => {
+    driverObj.drive();
+  }, [driverObj]);
+
+  const closeGuide = () => {
+    driverObj.destroy();
+  };
+
+  const handleUserGuide = async () => {
+    try {
+      const data = await getUserTasks();
+      console.log('data handleUserGuide', data);
+
+      if (data.needGuide) {
+        setGuideEnabled(true);
+      }
+
+      if (!createCompleted) {
+        requestAnimationFrame(() => {
+          startGuide();
+        });
+      }
+    } catch (error) {
+      setGuideEnabled(false);
+    }
+  };
+
+  return { startGuide, closeGuide, handleUserGuide };
+}
diff --git a/frontend/providers/devbox/hooks/useListDriver.tsx b/frontend/providers/devbox/hooks/useListDriver.tsx
new file mode 100644
index 000000000000..709eacb11804
--- /dev/null
+++ b/frontend/providers/devbox/hooks/useListDriver.tsx
@@ -0,0 +1,112 @@
+import { useGuideStore } from '@/stores/guide';
+import { Flex, FlexProps, Icon, Text } from '@chakra-ui/react';
+import { driver } from '@sealos/driver';
+import { useTranslations } from 'next-intl';
+import { useCallback, useState } from 'react';
+import { DriverStarIcon } from './useDriver';
+
+export default function useListDriver() {
+  const t = useTranslations();
+  const { isGuideEnabled, listCompleted, setListCompleted } = useGuideStore();
+
+  const PopoverBodyInfo = (props: FlexProps) => {
+    return (
+      <Flex
+        gap="4px"
+        id="popover-info"
+        position={'absolute'}
+        bottom={'-30px'}
+        color={'white'}
+        alignItems={'center'}
+        {...props}
+      >
+        <Text color={'#FFF'} fontSize={'12px'} fontWeight={500}>
+          {t('guide.click_shadow_skip')}
+        </Text>
+        <Icon
+          xmlns="http://www.w3.org/2000/svg"
+          width="20"
+          height="20"
+          viewBox="0 0 20 20"
+          fill="white"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M7.50001 0.97229C7.88354 0.97229 8.19445 1.2832 8.19445 1.66673V2.91673C8.19445 3.30027 7.88354 3.61118 7.50001 3.61118C7.11648 3.61118 6.80556 3.30027 6.80556 2.91673V1.66673C6.80556 1.2832 7.11648 0.97229 7.50001 0.97229ZM2.84229 2.84235C3.11349 2.57116 3.55319 2.57116 3.82439 2.84235L4.70827 3.72624C4.97947 3.99744 4.97947 4.43713 4.70827 4.70833C4.43707 4.97953 3.99737 4.97953 3.72618 4.70833L2.84229 3.82445C2.5711 3.55325 2.5711 3.11355 2.84229 2.84235ZM12.2083 2.84235C12.4795 3.11355 12.4795 3.55325 12.2083 3.82445L11.3244 4.70833C11.0532 4.97953 10.6135 4.97953 10.3423 4.70833C10.0711 4.43713 10.0711 3.99744 10.3423 3.72624L11.2262 2.84235C11.4974 2.57116 11.9371 2.57116 12.2083 2.84235ZM8.05107 6.36654C8.05921 6.36904 8.06735 6.37155 8.07548 6.37406L17.4584 9.26437C17.6747 9.33097 17.8794 9.394 18.0383 9.45881C18.183 9.51788 18.4465 9.63567 18.6129 9.8969C18.8034 10.1959 18.8398 10.5678 18.7109 10.8981C18.5983 11.1866 18.3627 11.3532 18.2321 11.4393C18.0888 11.5336 17.9002 11.6352 17.7009 11.7425L13.8279 13.828L11.7424 17.701C11.6351 17.9003 11.5336 18.0889 11.4392 18.2322C11.3531 18.3628 11.1865 18.5984 10.898 18.711C10.5677 18.8399 10.1958 18.8035 9.8968 18.613C9.63557 18.4466 9.51779 18.1831 9.45872 18.0384C9.39391 17.8795 9.33088 17.6748 9.26429 17.4586L6.37399 8.07554C6.37148 8.0674 6.36897 8.05926 6.36647 8.05112C6.31285 7.87717 6.25951 7.70409 6.2288 7.55823C6.19822 7.413 6.15971 7.17003 6.25365 6.91402C6.36609 6.60762 6.60756 6.36615 6.91396 6.25371C7.16997 6.15977 7.41294 6.19829 7.55817 6.22886C7.70404 6.25957 7.87712 6.31292 8.05107 6.36654ZM7.71679 7.71686L10.564 16.9599L12.609 13.1621C12.6112 13.158 12.6136 13.1535 12.6162 13.1486C12.6422 13.0999 12.6884 13.0133 12.7511 12.9339C12.8047 12.8661 12.866 12.8048 12.9339 12.7512C13.0132 12.6884 13.0999 12.6422 13.1485 12.6163C13.1535 12.6137 13.158 12.6112 13.1621 12.609L16.9598 10.5641L7.71679 7.71686ZM0.972229 7.50007C0.972229 7.11654 1.28314 6.80562 1.66667 6.80562H2.91667C3.3002 6.80562 3.61112 7.11654 3.61112 7.50007C3.61112 7.8836 3.3002 8.19451 2.91667 8.19451H1.66667C1.28314 8.19451 0.972229 7.8836 0.972229 7.50007ZM4.70827 10.3424C4.97947 10.6136 4.97947 11.0532 4.70827 11.3244L3.82439 12.2083C3.55319 12.4795 3.11349 12.4795 2.84229 12.2083C2.5711 11.9371 2.5711 11.4974 2.84229 11.2262L3.72618 10.3424C3.99737 10.0712 4.43707 10.0712 4.70827 10.3424Z"
+          />
+        </Icon>
+      </Flex>
+    );
+  };
+
+  const driverObj = driver({
+    showProgress: false,
+    allowClose: false,
+    allowClickMaskNextStep: true,
+    allowPreviousStep: false,
+    isShowButtons: false,
+    allowKeyboardControl: false,
+    overlaySkipButton: t('skip') || 'skip',
+    disableActiveInteraction: true,
+    steps: [
+      {
+        element: '.guide-status-tag',
+        popover: {
+          side: 'right',
+          align: 'center',
+          borderRadius: '0px 12px 12px 12px',
+          PopoverBody: (
+            <Flex gap={'6px'}>
+              <DriverStarIcon />
+              <Text color={'#24282C'} fontSize={'13px'} fontWeight={500}>
+                {t('guide.devbox_status')}
+              </Text>
+              <PopoverBodyInfo />
+            </Flex>
+          )
+        }
+      },
+      {
+        element: '.guide-ide-button',
+        popover: {
+          side: 'right',
+          align: 'center',
+          borderRadius: '12px 0px 12px 12px',
+          PopoverBody: (
+            <Flex gap={'6px'}>
+              <DriverStarIcon />
+              <Text color={'#24282C'} fontSize={'13px'} fontWeight={500}>
+                {t('guide.ide_button')}
+              </Text>
+              <PopoverBodyInfo top={'-120px'} />
+            </Flex>
+          )
+        }
+      }
+    ],
+    onDestroyed: () => {
+      setListCompleted(true);
+    }
+  });
+
+  const startGuide = useCallback(() => {
+    driverObj.drive();
+  }, [driverObj]);
+
+  const closeGuide = () => {
+    driverObj.destroy();
+  };
+
+  const handleUserGuide = async () => {
+    try {
+      if (isGuideEnabled && !listCompleted) {
+        requestAnimationFrame(() => {
+          startGuide();
+        });
+      }
+    } catch (error) {}
+  };
+
+  return { startGuide, handleUserGuide, closeGuide };
+}
diff --git a/frontend/providers/devbox/hooks/useLoading.tsx b/frontend/providers/devbox/hooks/useLoading.tsx
index 1f34dacd5dad..c2326597663a 100644
--- a/frontend/providers/devbox/hooks/useLoading.tsx
+++ b/frontend/providers/devbox/hooks/useLoading.tsx
@@ -1,8 +1,8 @@
-import { useState, useCallback } from 'react'
-import { Spinner, Flex } from '@chakra-ui/react'
+import { useState, useCallback } from 'react';
+import { Spinner, Flex } from '@chakra-ui/react';
 
 export const useLoading = (props?: { defaultLoading: boolean }) => {
-  const [isLoading, setIsLoading] = useState(props?.defaultLoading || false)
+  const [isLoading, setIsLoading] = useState(props?.defaultLoading || false);
 
   const Loading = useCallback(
     ({
@@ -10,9 +10,9 @@ export const useLoading = (props?: { defaultLoading: boolean }) => {
       fixed = true,
       size = 'xl'
     }: {
-      loading?: boolean
-      fixed?: boolean
-      size?: string
+      loading?: boolean;
+      fixed?: boolean;
+      size?: string;
     }): JSX.Element | null => {
       return (
         <Flex
@@ -25,7 +25,8 @@ export const useLoading = (props?: { defaultLoading: boolean }) => {
           bottom={0}
           alignItems={'center'}
           justifyContent={'center'}
-          visibility={isLoading || loading ? 'visible' : 'hidden'}>
+          visibility={isLoading || loading ? 'visible' : 'hidden'}
+        >
           <Spinner
             thickness="4px"
             speed="0.65s"
@@ -34,14 +35,14 @@ export const useLoading = (props?: { defaultLoading: boolean }) => {
             size={size}
           />
         </Flex>
-      )
+      );
     },
     [isLoading]
-  )
+  );
 
   return {
     isLoading,
     setIsLoading,
     Loading
-  }
-}
+  };
+};
diff --git a/frontend/providers/devbox/hooks/useReleaseDriver.tsx b/frontend/providers/devbox/hooks/useReleaseDriver.tsx
new file mode 100644
index 000000000000..eacfb21d3af5
--- /dev/null
+++ b/frontend/providers/devbox/hooks/useReleaseDriver.tsx
@@ -0,0 +1,95 @@
+import { useGuideStore } from '@/stores/guide';
+import { Flex, FlexProps, Icon, Text } from '@chakra-ui/react';
+import { driver } from '@sealos/driver';
+import { useTranslations } from 'next-intl';
+import { useCallback, useState } from 'react';
+import { DriverStarIcon } from './useDriver';
+
+export default function useReleaseDriver() {
+  const t = useTranslations();
+
+  const {
+    isGuideEnabled,
+    releaseCompleted,
+    detailCompleted,
+    setReleaseCompleted,
+    setGuideEnabled
+  } = useGuideStore();
+
+  const PopoverBodyInfo = (props: FlexProps) => {
+    return (
+      <Flex
+        gap="4px"
+        id="popover-info"
+        position={'absolute'}
+        bottom={'-30px'}
+        color={'white'}
+        alignItems={'center'}
+        {...props}
+      >
+        <Text color={'#FFF'} fontSize={'12px'} fontWeight={500}>
+          {t('guide.click_shadow_skip')}
+        </Text>
+        <Icon
+          xmlns="http://www.w3.org/2000/svg"
+          width="20"
+          height="20"
+          viewBox="0 0 20 20"
+          fill="white"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M7.50001 0.97229C7.88354 0.97229 8.19445 1.2832 8.19445 1.66673V2.91673C8.19445 3.30027 7.88354 3.61118 7.50001 3.61118C7.11648 3.61118 6.80556 3.30027 6.80556 2.91673V1.66673C6.80556 1.2832 7.11648 0.97229 7.50001 0.97229ZM2.84229 2.84235C3.11349 2.57116 3.55319 2.57116 3.82439 2.84235L4.70827 3.72624C4.97947 3.99744 4.97947 4.43713 4.70827 4.70833C4.43707 4.97953 3.99737 4.97953 3.72618 4.70833L2.84229 3.82445C2.5711 3.55325 2.5711 3.11355 2.84229 2.84235ZM12.2083 2.84235C12.4795 3.11355 12.4795 3.55325 12.2083 3.82445L11.3244 4.70833C11.0532 4.97953 10.6135 4.97953 10.3423 4.70833C10.0711 4.43713 10.0711 3.99744 10.3423 3.72624L11.2262 2.84235C11.4974 2.57116 11.9371 2.57116 12.2083 2.84235ZM8.05107 6.36654C8.05921 6.36904 8.06735 6.37155 8.07548 6.37406L17.4584 9.26437C17.6747 9.33097 17.8794 9.394 18.0383 9.45881C18.183 9.51788 18.4465 9.63567 18.6129 9.8969C18.8034 10.1959 18.8398 10.5678 18.7109 10.8981C18.5983 11.1866 18.3627 11.3532 18.2321 11.4393C18.0888 11.5336 17.9002 11.6352 17.7009 11.7425L13.8279 13.828L11.7424 17.701C11.6351 17.9003 11.5336 18.0889 11.4392 18.2322C11.3531 18.3628 11.1865 18.5984 10.898 18.711C10.5677 18.8399 10.1958 18.8035 9.8968 18.613C9.63557 18.4466 9.51779 18.1831 9.45872 18.0384C9.39391 17.8795 9.33088 17.6748 9.26429 17.4586L6.37399 8.07554C6.37148 8.0674 6.36897 8.05926 6.36647 8.05112C6.31285 7.87717 6.25951 7.70409 6.2288 7.55823C6.19822 7.413 6.15971 7.17003 6.25365 6.91402C6.36609 6.60762 6.60756 6.36615 6.91396 6.25371C7.16997 6.15977 7.41294 6.19829 7.55817 6.22886C7.70404 6.25957 7.87712 6.31292 8.05107 6.36654ZM7.71679 7.71686L10.564 16.9599L12.609 13.1621C12.6112 13.158 12.6136 13.1535 12.6162 13.1486C12.6422 13.0999 12.6884 13.0133 12.7511 12.9339C12.8047 12.8661 12.866 12.8048 12.9339 12.7512C13.0132 12.6884 13.0999 12.6422 13.1485 12.6163C13.1535 12.6137 13.158 12.6112 13.1621 12.609L16.9598 10.5641L7.71679 7.71686ZM0.972229 7.50007C0.972229 7.11654 1.28314 6.80562 1.66667 6.80562H2.91667C3.3002 6.80562 3.61112 7.11654 3.61112 7.50007C3.61112 7.8836 3.3002 8.19451 2.91667 8.19451H1.66667C1.28314 8.19451 0.972229 7.8836 0.972229 7.50007ZM4.70827 10.3424C4.97947 10.6136 4.97947 11.0532 4.70827 11.3244L3.82439 12.2083C3.55319 12.4795 3.11349 12.4795 2.84229 12.2083C2.5711 11.9371 2.5711 11.4974 2.84229 11.2262L3.72618 10.3424C3.99737 10.0712 4.43707 10.0712 4.70827 10.3424Z"
+          />
+        </Icon>
+      </Flex>
+    );
+  };
+
+  const startReleaseGuide = async () => {
+    try {
+      if (isGuideEnabled && !releaseCompleted) {
+        const driverObj = driver({
+          showProgress: false,
+          allowClose: false,
+          allowClickMaskNextStep: true,
+          allowPreviousStep: false,
+          isShowButtons: false,
+          allowKeyboardControl: false,
+          overlaySkipButton: t('skip') || 'skip',
+          disableActiveInteraction: true,
+          steps: [
+            {
+              element: '.guide-online-button',
+              popover: {
+                side: 'left',
+                align: 'start',
+                borderRadius: '12px 0px 12px 12px',
+                PopoverBody: (
+                  <Flex gap={'6px'}>
+                    <DriverStarIcon />
+                    <Text color={'#24282C'} fontSize={'13px'} fontWeight={500}>
+                      {t('guide.online_button')}
+                    </Text>
+                    <PopoverBodyInfo />
+                  </Flex>
+                )
+              }
+            }
+          ],
+          onDestroyed: () => {
+            setReleaseCompleted(true);
+            setGuideEnabled(false);
+          }
+        });
+
+        requestAnimationFrame(() => {
+          driverObj.drive();
+        });
+      }
+    } catch (error) {}
+  };
+
+  return { startReleaseGuide };
+}
diff --git a/frontend/providers/devbox/hooks/useRequest.tsx b/frontend/providers/devbox/hooks/useRequest.tsx
index c9f2c3b26fc0..000288f28038 100644
--- a/frontend/providers/devbox/hooks/useRequest.tsx
+++ b/frontend/providers/devbox/hooks/useRequest.tsx
@@ -1,37 +1,37 @@
-import { useMessage } from '@sealos/ui'
-import type { UseMutationOptions } from '@tanstack/react-query'
-import { useMutation } from '@tanstack/react-query'
-import { useTranslations } from 'next-intl'
+import { useMessage } from '@sealos/ui';
+import type { UseMutationOptions } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
 
-import { getErrText } from '@/utils/tools'
+import { getErrText } from '@/utils/tools';
 
 interface Props extends UseMutationOptions<any, any, any, any> {
-  successToast?: string | null
-  errorToast?: string | null
+  successToast?: string | null;
+  errorToast?: string | null;
 }
 
 export const useRequest = ({ successToast, errorToast, onSuccess, onError, ...props }: Props) => {
-  const { message: toast } = useMessage()
-  const t = useTranslations()
+  const { message: toast } = useMessage();
+  const t = useTranslations();
   const mutation = useMutation({
     ...props,
     onSuccess(res, variables: void, context: unknown) {
-      onSuccess?.(res, variables, context)
+      onSuccess?.(res, variables, context);
       successToast &&
         toast({
           title: successToast,
           status: 'success'
-        })
+        });
     },
     onError(err: any, variables: void, context: unknown) {
-      onError?.(err, variables, context)
+      onError?.(err, variables, context);
       errorToast &&
         toast({
           title: t(getErrText(err, errorToast)),
           status: 'error'
-        })
+        });
     }
-  })
+  });
 
-  return mutation
-}
+  return mutation;
+};
diff --git a/frontend/providers/devbox/i18n.ts b/frontend/providers/devbox/i18n.ts
index e6a3b45e18b9..679a7b398031 100644
--- a/frontend/providers/devbox/i18n.ts
+++ b/frontend/providers/devbox/i18n.ts
@@ -1,20 +1,19 @@
-import { createSharedPathnamesNavigation } from 'next-intl/navigation'
-import { getRequestConfig } from 'next-intl/server'
-import { notFound } from 'next/navigation'
+import { createSharedPathnamesNavigation } from 'next-intl/navigation';
+import { getRequestConfig } from 'next-intl/server';
+import { notFound } from 'next/navigation';
 
 // Can be imported from a shared config
-const locales = ['en', 'zh']
+const locales = ['en', 'zh'];
 
 export default getRequestConfig(async ({ locale, ...props }) => {
-  
   // Validate that the incoming `locale` parameter is valid
   if (!locales.includes(locale as any)) {
-    return notFound()
+    return notFound();
   }
   return {
     locale,
     messages: (await import(`./message/${locale}.json`)).default
-  }
-})
+  };
+});
 
-export const { Link, redirect, usePathname, useRouter  } = createSharedPathnamesNavigation()
+export const { Link, redirect, usePathname, useRouter } = createSharedPathnamesNavigation();
diff --git a/frontend/providers/devbox/message/en.json b/frontend/providers/devbox/message/en.json
index ef446a204cc5..eef54da39a5e 100644
--- a/frontend/providers/devbox/message/en.json
+++ b/frontend/providers/devbox/message/en.json
@@ -78,6 +78,8 @@
   "devbox_name_required": "Devbox name cannot be empty",
   "devbox_template": "Devbox Templates",
   "download_config": "Download config",
+  "download_private_key": "Private Key",
+  "download_scripts": "Download Script",
   "edit": "Edit",
   "edit_failed": "Edit failed",
   "edit_repository": "Version Manage",
@@ -93,6 +95,19 @@
   "export_yaml": "Export YAML",
   "external_address": "Public Address",
   "framework": "Framework",
+  "guide": {
+    "click_shadow_skip": "Click on any shadow to skip",
+    "deploy_cost": "Current resources, estimated daily consumption",
+    "deploy_custom_resources": "Custom project resource size",
+    "deploy_network": "Enabled by default, supports on and off at any time",
+    "deploy_runtimes": "Choose project language and framework",
+    "devbox_close_button": "Turn on and use at any time, shut down and suspend without charge",
+    "devbox_network_address": "Public network access address of the current project",
+    "devbox_release_button": "Release version, automatically packaged into docker image",
+    "devbox_status": "Project running status",
+    "ide_button": "Connect to the installed IDE",
+    "online_button": "Click Go Online to automatically deploy to the production environment"
+  },
   "have_read_and_agree_to_the ": "I have read and agree to the ",
   "ide_tooltip": "Click to develop in IDE",
   "image": "Image",
@@ -103,6 +118,41 @@
   "internal_address": "Internal Address",
   "invalide_template_name": "Please enter a valid template name",
   "invalide_template_version": "Please enter a valid version number",
+  "jetbrains_guide_cancel": "Click to Cancel",
+  "jetbrains_guide_check_ssh_connection": "Connection Verification",
+  "jetbrains_guide_click_to_config": "Click the button below to <blue>configure SSH connection </blue>.",
+  "jetbrains_guide_click_to_download": "Download the Script",
+  "jetbrains_guide_command": "Open a terminal and type the following command to verify connection:",
+  "jetbrains_guide_config_ssh": "SSH Connection Setup",
+  "jetbrains_guide_confirm": "Setup Complete",
+  "jetbrains_guide_connecting": "Connecting ({process}%) ...",
+  "jetbrains_guide_connecting_info": "The initial connection may take 3-5 minutes. Please be patient.",
+  "jetbrains_guide_documentation": "User Guide",
+  "jetbrains_guide_download_private_key": "Download <blue>the private key</blue>.",
+  "jetbrains_guide_modified_file": "Open <blue>~/.ssh/sealos/devbox_config</blue> and append the following content:",
+  "jetbrains_guide_move_to_path": "Make sure the private key is in the following directory: <blue>~/.ssh/sealos/</blue>.",
+  "jetbrains_guide_one_click_setup": "One-Click Setup",
+  "jetbrains_guide_one_click_setup_desc": "Click the button to download <blue>the bat/sh script</blue>, then <blue>simply double-click to run it</blue> to complete the SSH connection setup.",
+  "jetbrains_guide_one_click_setup_desc_2": "<lightColor>Alternatively, you can copy the script below, paste it into your local terminal, and run it directly.</lightColor>",
+  "jetbrains_guide_one_click_setup_desc_windows": "Click the button to download <blue>the bat/sh script</blue>, then <blue>right click the file > Run with PowerShell</blue> to complete the SSH connection setup.",
+  "jetbrains_guide_post_connection": "You can click the button below to view the user guide.",
+  "jetbrains_guide_post_use": "Learn More",
+  "jetbrains_guide_prepare": "Prerequiste(s)",
+  "jetbrains_guide_prepare_install": "You need to download <blue>JetBrains Gateway</blue> in advance.",
+  "jetbrains_guide_select_ide": "Choose an IDE to start developing:",
+  "jetbrains_guide_start_to_connect": "Connect",
+  "jetbrains_guide_start_to_use": "Getting Started",
+  "jetbrains_guide_step_1": "In the opened Jetbrains Gateway window, select <blue>New Connection</blue>.",
+  "jetbrains_guide_step_2_1": "Fill in <blue>Username</blue>、<blue>Host</blue> and <blue>Port</blue>.",
+  "jetbrains_guide_step_2_2": "Download <blue>Private Key</blue>.",
+  "jetbrains_guide_step_2_3": "Locate and select <blue>the path of the downloaded private key</blue>. Click <blue>Check Connection and Continue</blue> to test the SSH connection.",
+  "jetbrains_guide_step_3_1": "Select IDE version: It is recommended to choose <blue>{ideVersion}</blue>.",
+  "jetbrains_guide_step_3_2": "Select the project path: <blue>{projectPath}</blue>.",
+  "jetbrains_guide_step_3_3": "Click <blue>Download IDE and Connect</blue> to download.",
+  "jetbrains_guide_step_3_4": "Wait for the IDE to be ready.",
+  "jetbrains_guide_step_3_5": "Check if local <blue>{ide}</blue> is automatically invoked.",
+  "jetbrains_guide_step_by_step": "Step-By-Step",
+  "jetbrains_guide_three_steps": "(3 steps)",
   "jump_prompt": "Jump prompt",
   "jump_terminal_error": "Jump terminal failed",
   "language": "Language",
@@ -123,6 +173,7 @@
   "none": "None",
   "none_template_version": "No versions of this Runtime are currently available, rendering it unusable. To restore functionality, please add a new version in the project details page.",
   "not_allow_standalone_use": "Not allowed to use standalone",
+  "one_click_config": "One-Click Setup",
   "open_link": "Open link",
   "open_vscode": "VS Code",
   "opening_ide": "Opening IDE...",
@@ -146,6 +197,7 @@
   "publish": "Publish",
   "read_event_detail": "Toggle event detail",
   "recent_error": "Recent Errors",
+  "recommend": "Rec",
   "release": "Release",
   "release_confirm_info": "During the release process, the machine will be temporarily shut down and the release will be in the current state. Please save the running project.",
   "release_failed": "Release failed",
@@ -173,6 +225,7 @@
   "select_template_tips": "Select the template you wish to update",
   "set_template_to_public_tips": "Make this template available to all users.Once public, you cannot revert it to private.",
   "shutdown": "Shutdown",
+  "skip": "Skip",
   "ssh_config": "SSH Configuration",
   "ssh_connect_info": "SSH Connection String",
   "start": "Start",
@@ -212,6 +265,7 @@
   "update_template_success": "Template updated successfully!",
   "update_time": "Last Modified",
   "use_case": "Use Case",
+  "use_jetbrains": "Develop with JetBrains IDEs",
   "used": "Used",
   "version": "Release",
   "version_config": "Configuration",
diff --git a/frontend/providers/devbox/message/zh.json b/frontend/providers/devbox/message/zh.json
index 850ee999e896..c6d697cc1392 100644
--- a/frontend/providers/devbox/message/zh.json
+++ b/frontend/providers/devbox/message/zh.json
@@ -79,6 +79,8 @@
   "devbox_name_required": "项目名称不能为空",
   "devbox_template": "Devbox 模板",
   "download_config": "下载配置",
+  "download_private_key": "下载私钥",
+  "download_scripts": "下载脚本",
   "edit": "编辑",
   "edit_failed": "编辑失败",
   "edit_repository": "版本管理",
@@ -94,6 +96,19 @@
   "export_yaml": "导出 YAML",
   "external_address": "公网地址",
   "framework": "框架",
+  "guide": {
+    "click_shadow_skip": "点击任意阴影跳过",
+    "deploy_cost": "当前资源，预估单日消耗",
+    "deploy_custom_resources": "自定义项目资源大小",
+    "deploy_network": "默认开启，支持随开随关",
+    "deploy_runtimes": "选择项目语言和框架",
+    "devbox_close_button": "随开随用，关机暂停不扣费",
+    "devbox_network_address": "当前项目的公网访问地址",
+    "devbox_release_button": "发布版本，自动打包成docker镜像",
+    "devbox_status": "项目运行状态",
+    "ide_button": "连接已安装IDE",
+    "online_button": "点击上线，自动独立部署到生产环境内"
+  },
   "have_read_and_agree_to_the ": "我已阅读并同意",
   "ide_tooltip": "点击在 IDE 中开发",
   "image": "镜像",
@@ -105,6 +120,41 @@
   "intranet_address": "内网地址",
   "invalide_template_name": "输入的模板名称不符合规则",
   "invalide_template_version": "输入的版本号不符合规则",
+  "jetbrains_guide_cancel": "点击取消",
+  "jetbrains_guide_check_ssh_connection": "连接验证",
+  "jetbrains_guide_click_to_config": "点击下方按钮，<blue>配置 SSH 连接信息</blue>。",
+  "jetbrains_guide_click_to_download": "点击下载脚本",
+  "jetbrains_guide_command": "打开命令行，输入以下命令来检测SSH连接是否正常：",
+  "jetbrains_guide_config_ssh": "配置 SSH 连接信息",
+  "jetbrains_guide_confirm": "配置完成",
+  "jetbrains_guide_connecting": "正在连接（{process}%）...",
+  "jetbrains_guide_connecting_info": "第一次连接需要 3-5 min，请耐心等待",
+  "jetbrains_guide_documentation": "使用文档",
+  "jetbrains_guide_download_private_key": "下载 <blue>私钥</blue>。",
+  "jetbrains_guide_modified_file": "修改<blue> ~/.ssh/sealos/devbox_config</blue> 文件（如果不存在需要新建一个文件），在文件末尾追加：",
+  "jetbrains_guide_move_to_path": "将下载好的私钥移动到目录：<blue>~/.ssh/sealos/</blue> 。",
+  "jetbrains_guide_one_click_setup": "一键配置",
+  "jetbrains_guide_one_click_setup_desc": "点击上方按钮 <blue>下载 bat/sh 脚本</blue>，下载到本地后<blue>直接双击运行</blue>即可完成 SSH 连接信息的配置。",
+  "jetbrains_guide_one_click_setup_desc_windows": "点击上方按钮 <blue>下载 bat/sh 脚本</blue>，下载到本地后<blue>右键点击文件 > 使用 PowerShell 运行</blue> 即可完成 SSH 连接信息的配置。",
+  "jetbrains_guide_one_click_setup_desc_2": "<lightColor>或者，您也可以复制下方脚本到本地命令行，然后直接执行。</lightColor>",
+  "jetbrains_guide_post_connection": "后续使用可点击下方按钮进行查看。",
+  "jetbrains_guide_post_use": "后续使用",
+  "jetbrains_guide_prepare": "前置准备",
+  "jetbrains_guide_prepare_install": "需要提前下载好 <blue>JetBrains Gateway</blue> 应用。",
+  "jetbrains_guide_select_ide": "请选择一个 IDE 进行开发：",
+  "jetbrains_guide_start_to_connect": "开始连接",
+  "jetbrains_guide_start_to_use": "开始使用",
+  "jetbrains_guide_step_1": "在打开的 Jetbrains Gateway 窗口中，选择 <blue>New Connection</blue> 。",
+  "jetbrains_guide_step_2_1": "填写 <blue>Username</blue>、<blue>Host</blue> 和 <blue>Port</blue>。",
+  "jetbrains_guide_step_2_2": "下载<blue>私钥</blue>。",
+  "jetbrains_guide_step_2_3": "勾选 Specify private key，选择刚才下载的私钥的所在路径。点击 Check Connection and Continue 按钮，即可测试 SSH 连接。",
+  "jetbrains_guide_step_3_1": "选择 IDE 版本：推荐选择 <blue>{ideVersion}</blue>。",
+  "jetbrains_guide_step_3_2": "选择项目路径：<blue>{projectPath}</blue> 。",
+  "jetbrains_guide_step_3_3": "点击 <blue>Download IDE and Connect</blue> 按钮，即可下载 IDE 和连接。",
+  "jetbrains_guide_step_3_4": "等待 IDE 下载完毕。",
+  "jetbrains_guide_step_3_5": "自动唤起本地的<blue>{ide}</blue>。",
+  "jetbrains_guide_step_by_step": "手把手",
+  "jetbrains_guide_three_steps": "（共 3 步）",
   "jump_prompt": "跳转提示",
   "jump_terminal_error": "跳转终端失败",
   "language": "语言",
@@ -125,6 +175,7 @@
   "none": "无",
   "none_template_version": "当前没有可用的模板版本，因此无法继续使用该模板。请在项目详情页中添加新的模板版本以恢复使用。",
   "not_allow_standalone_use": "不允许独立使用",
+  "one_click_config": "一键配置",
   "open_link": "打开链接",
   "open_vscode": "VS Code",
   "opening_ide": "正在打开 IDE...",
@@ -148,6 +199,7 @@
   "publish": "发版",
   "read_event_detail": "查看事件详情",
   "recent_error": "最近错误",
+  "recommend": "推荐",
   "release": "发布",
   "release_confirm_info": "发版过程中将暂时关闭机器，且以当前状态发版，请保存好正在运行的项目。",
   "release_failed": "发版失败",
@@ -174,6 +226,7 @@
   "select_template_tips": "选择您想更新的模板",
   "set_template_to_public_tips": "设为公开后，其他用户可访问此模板，但无法再设为私密",
   "shutdown": "关机",
+  "skip": "跳过",
   "ssh_config": "SSH 配置",
   "ssh_connect_info": "连接串",
   "start": "开机",
@@ -213,6 +266,7 @@
   "update_template_success": "更新模板成功！",
   "update_time": "更新时间",
   "use_case": "用例",
+  "use_jetbrains": "使用 JetBrains IDE 开发",
   "used": "已用",
   "version": "版本",
   "version_config": "版本配置",
diff --git a/frontend/providers/devbox/middleware.ts b/frontend/providers/devbox/middleware.ts
index dad501e4fdca..c985e4df48ee 100644
--- a/frontend/providers/devbox/middleware.ts
+++ b/frontend/providers/devbox/middleware.ts
@@ -1,17 +1,14 @@
-import createMiddleware from 'next-intl/middleware'
+import createMiddleware from 'next-intl/middleware';
 
-export default  createMiddleware({
+export default createMiddleware({
   // A list of all locales that are supported
   locales: ['en', 'zh'],
   // Used when no locale matches
   defaultLocale: 'en'
-})
+});
 
 export const config = {
   // Match only internationalized pathnames
   // matcher: ['/((?!api|_next/static|_next/image|favicon.ico|images|fonts|public).*)']
-  matcher: [
-    '/',
-    '/(zh|en)/:path*',
-  ]
-}
+  matcher: ['/', '/(zh|en)/:path*']
+};
diff --git a/frontend/providers/devbox/next.config.js b/frontend/providers/devbox/next.config.js
index e0a9ba125dc6..370c58e29619 100644
--- a/frontend/providers/devbox/next.config.js
+++ b/frontend/providers/devbox/next.config.js
@@ -1,8 +1,8 @@
 /** @type {import('next').NextConfig} */
-const path = require('path')
-const createNextIntlPlugin = require('next-intl/plugin')
+const path = require('path');
+const createNextIntlPlugin = require('next-intl/plugin');
 
-const withNextIntl = createNextIntlPlugin()
+const withNextIntl = createNextIntlPlugin();
 
 const nextConfig = {
   output: 'standalone',
@@ -15,15 +15,15 @@ const nextConfig = {
         issuer: /\.[jt]sx?$/,
         use: ['@svgr/webpack'] // svg to react component
       }
-    ])
-    config.plugins = [...config.plugins]
-    return config
+    ]);
+    config.plugins = [...config.plugins];
+    return config;
   },
   transpilePackages: ['@sealos/ui', 'sealos-desktop-sdk', '@sealos/driver'],
   experimental: {
     // this includes files from the monorepo base two directories up
     outputFileTracingRoot: path.join(__dirname, '../../')
   }
-}
+};
 
-module.exports = withNextIntl(nextConfig)
+module.exports = withNextIntl(nextConfig);
diff --git a/frontend/providers/devbox/package.json b/frontend/providers/devbox/package.json
index c6002049b8f5..d3021aa11eef 100644
--- a/frontend/providers/devbox/package.json
+++ b/frontend/providers/devbox/package.json
@@ -19,6 +19,7 @@
     "@emotion/styled": "^11.11.0",
     "@kubernetes/client-node": "^0.21.0",
     "@prisma/client": "^5.10.2",
+    "@sealos/driver": "workspace:^",
     "@sealos/ui": "workspace:^",
     "@tanstack/react-query": "^4.35.3",
     "axios": "^1.7.3",
diff --git a/frontend/providers/devbox/prisma/migrations/20250103095011_region_update/migration.sql b/frontend/providers/devbox/prisma/migrations/20250103095011_region_update/migration.sql
new file mode 100644
index 000000000000..159fc4c5d1cc
--- /dev/null
+++ b/frontend/providers/devbox/prisma/migrations/20250103095011_region_update/migration.sql
@@ -0,0 +1,24 @@
+-- upgrade region  
+-- DropIndex  
+DROP INDEX "TemplateRepository_isDeleted_name_key";  
+
+-- add regionUid column
+ALTER TABLE "TemplateRepository"  
+    ADD COLUMN "regionUid" STRING NOT NULL default '00000000-0000-0000-0000-000000000000';  
+ALTER TABLE "TemplateRepository"  
+    ALTER COLUMN "regionUid" DROP DEFAULT;  
+
+-- CreateIndex  
+CREATE INDEX "TemplateRepository_isDeleted_createdAt_idx" ON "TemplateRepository" ("isDeleted", "createdAt");  
+
+-- CreateIndex  
+CREATE UNIQUE INDEX "TemplateRepository_isDeleted_regionUid_name_key" ON "TemplateRepository" ("isDeleted", "regionUid", "name");  
+
+SET enable_experimental_alter_column_type_general = true;  
+-- AlterTable  
+ALTER TABLE public."TemplateRepository" alter column "organizationUid" type uuid using "organizationUid"::uuid;  
+-- AlterTable  
+DROP INDEX "Template_isDeleted_templateRepositoryUid_name_key";  
+ALTER TABLE "Template" ALTER COLUMN "templateRepositoryUid" type uuid using "templateRepositoryUid"::uuid;  
+CREATE UNIQUE INDEX "Template_isDeleted_templateRepositoryUid_name_key" ON "Template" ("isDeleted", "templateRepositoryUid", "name");  
+SET enable_experimental_alter_column_type_general = false;
\ No newline at end of file
diff --git a/frontend/providers/devbox/prisma/schema.prisma b/frontend/providers/devbox/prisma/schema.prisma
index c64a71ebedb6..2f4a5c56b2cf 100644
--- a/frontend/providers/devbox/prisma/schema.prisma
+++ b/frontend/providers/devbox/prisma/schema.prisma
@@ -12,7 +12,7 @@ datasource db {
 
 model User {
   uid               String             @id @default(dbgenerated("gen_random_uuid()")) @db.Uuid
-  regionUid         String
+  regionUid         String             
   namespaceId       String
   deletedAt         DateTime?          @db.Timestamptz(3)
   createdAt         DateTime           @default(now()) @db.Timestamptz(3)
@@ -50,31 +50,32 @@ model UserOrganization {
 }
 
 model TemplateRepository {
-  uid             String                 @id @default(dbgenerated("gen_random_uuid()")) @db.Uuid
-  deletedAt       DateTime?              @db.Timestamptz(3)
-  createdAt       DateTime               @default(now()) @db.Timestamptz(3)
-  updatedAt       DateTime               @updatedAt @db.Timestamptz(3)
-  name            String
+  uid                    String                  @id @default(dbgenerated("gen_random_uuid()")) @db.Uuid
+  deletedAt              DateTime?               @db.Timestamptz(3)
+  createdAt              DateTime                @default(now()) @db.Timestamptz(3)
+  updatedAt              DateTime                @updatedAt @db.Timestamptz(3)
+  name                   String
   // hzh.hub.sealos.run/orgNanoid/templateRepositoryName:templateName
-  description     String?
-  kind            TemplateRepositoryKind
-  organizationUid String
-  isPublic        Boolean                @default(false)
-  templates       Template[]
-  iconId          String?
-  organization    Organization           @relation(fields: [organizationUid], references: [uid])
-  isDeleted       Boolean?               @default(false)
-
+  description            String?
+  kind                   TemplateRepositoryKind
+  organizationUid        String                  @db.Uuid
+  isPublic               Boolean                 @default(false)
+  templates              Template[]
+  iconId                 String?
+  organization           Organization            @relation(fields: [organizationUid], references: [uid])
+  isDeleted              Boolean?                @default(false)
+  regionUid              String
   templateRepositoryTags TemplateRepositoryTag[]
 
-  @@unique([isDeleted, name])
+  @@unique([isDeleted, regionUid, name])
   @@index([isDeleted, isPublic])
+  @@index([isDeleted, createdAt])
 }
 
 model Template {
   uid                   String     @id @default(dbgenerated("gen_random_uuid()")) @db.Uuid
   name                  String
-  templateRepositoryUid String
+  templateRepositoryUid String     @db.Uuid
   devboxReleaseImage    String?
   image                 String
   config                String // json
@@ -93,7 +94,7 @@ model Template {
 
 model Tag {
   uid                    String                  @id @default(dbgenerated("gen_random_uuid()")) @db.Uuid
-  type                   TagType            @default(OFFICIAL_CONTENT)
+  type                   TagType                 @default(OFFICIAL_CONTENT)
   name                   String
   zhName                 String?
   enName                 String?
@@ -121,4 +122,4 @@ enum TagType {
   PROGRAMMING_LANGUAGE
   USE_CASE
   OFFICIAL_CONTENT
-}
\ No newline at end of file
+}
diff --git a/frontend/providers/devbox/services/backend/auth.ts b/frontend/providers/devbox/services/backend/auth.ts
index 88ca114f0722..fa4f624ba6ef 100644
--- a/frontend/providers/devbox/services/backend/auth.ts
+++ b/frontend/providers/devbox/services/backend/auth.ts
@@ -1,86 +1,97 @@
-import { decode, JwtPayload, sign, verify } from 'jsonwebtoken'
-import { ERROR_ENUM } from '../error'
+import { decode, JwtPayload, sign, verify } from 'jsonwebtoken';
+import { ERROR_ENUM } from '../error';
+import { IncomingHttpHeaders } from 'http';
 
 interface CustomJwtPayload extends JwtPayload {
-  namespace: string
-  devboxName: string
+  namespace: string;
+  devboxName: string;
 }
 
 export const authSession = async (headers: Headers) => {
-  if (!headers) return Promise.reject(ERROR_ENUM.unAuthorization)
+  if (!headers) return Promise.reject(ERROR_ENUM.unAuthorization);
 
-  const authorization = headers.get('Authorization') || null
+  const authorization = headers.get('Authorization') || null;
 
-  if (!authorization) return Promise.reject(ERROR_ENUM.unAuthorization)
+  if (!authorization) return Promise.reject(ERROR_ENUM.unAuthorization);
 
   try {
-    const kubeConfig = decodeURIComponent(authorization)
-    return Promise.resolve(kubeConfig)
+    const kubeConfig = decodeURIComponent(authorization);
+    return Promise.resolve(kubeConfig);
   } catch (err) {
-    return Promise.reject(ERROR_ENUM.unAuthorization)
+    return Promise.reject(ERROR_ENUM.unAuthorization);
   }
-}
+};
 export const authSessionWithDesktopJWT = async (headers: Headers) => {
-  const kubeConfig = await authSession(headers)
-  const token = headers.get('Authorization-Bearer')
-  if (!token) return Promise.reject(ERROR_ENUM.unAuthorization)
-  const payload = await verifyToken<{ workspaceId: string }>(token, process.env.JWT_SECRET as string)
-  if (!payload) return Promise.reject(ERROR_ENUM.unAuthorization)
+  const kubeConfig = await authSession(headers);
+  const token = headers.get('Authorization-Bearer');
+  if (!token) return Promise.reject(ERROR_ENUM.unAuthorization);
+  const payload = await verifyToken<{ workspaceId: string }>(
+    token,
+    process.env.JWT_SECRET as string
+  );
+  if (!payload) return Promise.reject(ERROR_ENUM.unAuthorization);
   return {
     kubeConfig,
     payload,
     token
-  }
-}
+  };
+};
 export const authSessionWithJWT = async (headers: Headers) => {
-
-  const kubeConfig = await authSession(headers)
-  const token = headers.get('Authorization-Bearer')
-  if (!token) return Promise.reject(ERROR_ENUM.unAuthorization)
-  const payload = await verifyToken<{ workspaceId: string, organizationUid: string, userUid: string, regionUid: string }>(token, process.env.JWT_SECRET as string)
-  if (!payload) return Promise.reject(ERROR_ENUM.unAuthorization)
+  const kubeConfig = await authSession(headers);
+  const token = headers.get('Authorization-Bearer');
+  if (!token) return Promise.reject(ERROR_ENUM.unAuthorization);
+  const payload = await verifyToken<{
+    workspaceId: string;
+    organizationUid: string;
+    userUid: string;
+    regionUid: string;
+  }>(token, process.env.JWT_SECRET as string);
+  if (!payload) return Promise.reject(ERROR_ENUM.unAuthorization);
   return {
     kubeConfig,
     payload,
     token
-  }
-}
-export const generateDevboxToken = (
-  payload: { workspaceId: string, organizationUid: string, userUid: string, regionUid: string },
-) => sign(payload, process.env.JWT_SECRET as string, { expiresIn: '7d' })
+  };
+};
+export const generateDevboxToken = (payload: {
+  workspaceId: string;
+  organizationUid: string;
+  userUid: string;
+  regionUid: string;
+}) => sign(payload, process.env.JWT_SECRET as string, { expiresIn: '7d' });
 
 export const getPayloadWithoutVerification = <T = CustomJwtPayload>(
   headers: Headers
 ): { payload: T | null; token: string | null } => {
   try {
-    const authHeader = headers.get('authorization')
+    const authHeader = headers.get('authorization');
     if (!authHeader) {
-      return { payload: null, token: null }
+      return { payload: null, token: null };
     }
-    const token = authHeader.startsWith('Bearer ') ? authHeader.slice(7) : authHeader
-    const payload = decode(token) as T
-    return { payload, token }
+    const token = authHeader.startsWith('Bearer ') ? authHeader.slice(7) : authHeader;
+    const payload = decode(token) as T;
+    return { payload, token };
   } catch (err) {
-    console.log(err)
-    return { payload: null, token: null }
+    console.log(err);
+    return { payload: null, token: null };
   }
-}
+};
 export const verifyToken = async <TPayload = CustomJwtPayload>(
   token: string,
   secret: string
 ): Promise<TPayload | null> => {
   try {
-    const payload = verify(token, secret) as TPayload
-    return payload
+    const payload = verify(token, secret) as TPayload;
+    return payload;
   } catch (err) {
-    return null
+    return null;
   }
-}
+};
 
 export const generateAccessToken = (
   payload: {
-    namespace: string
-    devboxName: string
+    namespace: string;
+    devboxName: string;
   },
   secret: string
-) => sign(payload, secret, { expiresIn: '365d' })
+) => sign(payload, secret, { expiresIn: '365d' });
diff --git a/frontend/providers/devbox/services/backend/kubernetes.ts b/frontend/providers/devbox/services/backend/kubernetes.ts
index d7e0f481adc7..3b7c0ca1a384 100644
--- a/frontend/providers/devbox/services/backend/kubernetes.ts
+++ b/frontend/providers/devbox/services/backend/kubernetes.ts
@@ -1,14 +1,14 @@
-import * as yaml from 'js-yaml'
-import * as k8s from '@kubernetes/client-node'
+import * as yaml from 'js-yaml';
+import * as k8s from '@kubernetes/client-node';
 
-import { UserQuotaItemType } from '@/types/user'
-import { cpuFormatToM, memoryFormatToMi } from '@/utils/tools'
+import { UserQuotaItemType } from '@/types/user';
+import { cpuFormatToM, memoryFormatToMi } from '@/utils/tools';
 
 // Load default kc
 export function K8sApiDefault(): k8s.KubeConfig {
-  const kc = new k8s.KubeConfig()
-  kc.loadFromDefault()
-  return kc
+  const kc = new k8s.KubeConfig();
+  kc.loadFromDefault();
+  return kc;
 }
 
 export function CheckIsInCluster(): [boolean, string] {
@@ -21,22 +21,22 @@ export function CheckIsInCluster(): [boolean, string] {
     return [
       true,
       'https://' + process.env.KUBERNETES_SERVICE_HOST + ':' + process.env.KUBERNETES_SERVICE_PORT
-    ]
+    ];
   }
-  return [false, '']
+  return [false, ''];
 }
 
 /* init api */
 export function K8sApi(config = ''): k8s.KubeConfig {
-  const kc = new k8s.KubeConfig()
-  config ? kc.loadFromString(config) : kc.loadFromCluster()
+  const kc = new k8s.KubeConfig();
+  config ? kc.loadFromString(config) : kc.loadFromCluster();
 
-  const cluster = kc.getCurrentCluster()
+  const cluster = kc.getCurrentCluster();
 
   if (cluster !== null && process.env.NODE_ENV !== 'development') {
-    let server: k8s.Cluster
+    let server: k8s.Cluster;
 
-    const [inCluster, hosts] = CheckIsInCluster()
+    const [inCluster, hosts] = CheckIsInCluster();
     if (inCluster && hosts !== '') {
       server = {
         name: cluster.name,
@@ -44,7 +44,7 @@ export function K8sApi(config = ''): k8s.KubeConfig {
         caFile: cluster.caFile,
         server: hosts,
         skipTLSVerify: cluster.skipTLSVerify
-      }
+      };
     } else {
       server = {
         name: cluster.name,
@@ -52,53 +52,53 @@ export function K8sApi(config = ''): k8s.KubeConfig {
         caFile: cluster.caFile,
         server: 'https://apiserver.cluster.local:6443',
         skipTLSVerify: cluster.skipTLSVerify
-      }
+      };
     }
     // console.log(server, 'server');
     kc.clusters.forEach((item, i) => {
       if (item.name === cluster.name) {
-        kc.clusters[i] = server
+        kc.clusters[i] = server;
       }
-    })
+    });
   }
 
-  return kc
+  return kc;
 }
 
 export type CRDMeta = {
-  group: string // group
-  version: string // version
-  namespace: string // namespace
-  plural: string // type
-}
+  group: string; // group
+  version: string; // version
+  namespace: string; // namespace
+  plural: string; // type
+};
 
 export async function createYaml(
   kc: k8s.KubeConfig,
   specs: k8s.KubernetesObject[]
 ): Promise<k8s.KubernetesObject[]> {
-  const client = k8s.KubernetesObjectApi.makeApiClient(kc)
-  const created = [] as k8s.KubernetesObject[]
+  const client = k8s.KubernetesObjectApi.makeApiClient(kc);
+  const created = [] as k8s.KubernetesObject[];
 
   try {
     for (const spec of specs) {
-      spec.metadata = spec.metadata || {}
-      const response = await client.create(spec)
-      created.push(response.body)
+      spec.metadata = spec.metadata || {};
+      const response = await client.create(spec);
+      created.push(response.body);
     }
   } catch (error: any) {
-    console.log('create error')
+    console.log('create error');
     /* delete success specs */
     for (const spec of created) {
       try {
-        console.log('delete:', spec.kind)
-        await client.delete(spec)
+        console.log('delete:', spec.kind);
+        await client.delete(spec);
       } catch (error) {
         // console.log('delete error', spec.kind);
       }
     }
-    return Promise.reject(error)
+    return Promise.reject(error);
   }
-  return created
+  return created;
 }
 
 export async function updateYaml(
@@ -106,56 +106,56 @@ export async function updateYaml(
   specs: k8s.KubernetesObject[],
   canCreate = false
 ): Promise<k8s.KubernetesObject[]> {
-  const client = k8s.KubernetesObjectApi.makeApiClient(kc)
+  const client = k8s.KubernetesObjectApi.makeApiClient(kc);
   // const validSpecs = specs.filter((s) => s && s.kind && s.metadata)
-  const created = [] as k8s.KubernetesObject[]
+  const created = [] as k8s.KubernetesObject[];
 
   try {
     for (const spec of specs) {
-      spec.metadata = spec.metadata || {}
+      spec.metadata = spec.metadata || {};
 
-      console.log('update yaml: ', spec.kind)
-      const response = await client.create(spec)
-      created.push(response.body)
+      console.log('update yaml: ', spec.kind);
+      const response = await client.create(spec);
+      created.push(response.body);
     }
   } catch (error: any) {
-    console.log('update error')
+    console.log('update error');
     /* delete success specs */
     for (const spec of specs) {
       try {
-        console.log('delete:', spec.kind)
-        await client.delete(spec)
+        console.log('delete:', spec.kind);
+        await client.delete(spec);
       } catch (error) {
         // console.log('delete error', spec.kind);
       }
     }
     if (error.body.reason === 'AlreadyExists' && canCreate) {
-      return updateYaml(kc, specs)
+      return updateYaml(kc, specs);
     }
-    return Promise.reject(error)
+    return Promise.reject(error);
   }
-  return created
+  return created;
 }
 
 export async function replaceYaml(
   kc: k8s.KubeConfig,
   specs: k8s.KubernetesObject[]
 ): Promise<k8s.KubernetesObject[]> {
-  const client = k8s.KubernetesObjectApi.makeApiClient(kc)
-  const validSpecs = specs.filter((s) => s && s.kind && s.metadata)
-  const succeed = [] as k8s.KubernetesObject[]
+  const client = k8s.KubernetesObjectApi.makeApiClient(kc);
+  const validSpecs = specs.filter((s) => s && s.kind && s.metadata);
+  const succeed = [] as k8s.KubernetesObject[];
 
   for (const spec of validSpecs) {
-    spec.metadata = spec.metadata || {}
-    spec.metadata.annotations = spec.metadata.annotations || {}
-    delete spec.metadata.annotations['kubectl.kubernetes.io/last-applied-configuration']
+    spec.metadata = spec.metadata || {};
+    spec.metadata.annotations = spec.metadata.annotations || {};
+    delete spec.metadata.annotations['kubectl.kubernetes.io/last-applied-configuration'];
     spec.metadata.annotations['kubectl.kubernetes.io/last-applied-configuration'] =
-      JSON.stringify(spec)
+      JSON.stringify(spec);
 
     try {
       // @ts-ignore
-      const { body } = await client.read(spec)
-      console.log('replace yaml: ', spec.kind)
+      const { body } = await client.read(spec);
+      console.log('replace yaml: ', spec.kind);
       // update resource
       const response = await client.replace({
         ...spec,
@@ -163,55 +163,55 @@ export async function replaceYaml(
           ...spec.metadata,
           resourceVersion: body.metadata?.resourceVersion
         }
-      })
-      succeed.push(response.body)
+      });
+      succeed.push(response.body);
     } catch (error: any) {
-      console.log('replace error:', error)
+      console.log('replace error:', error);
       // no yaml, create it
       if (error?.body?.code && +error?.body?.code === 404) {
         try {
-          console.log('create yaml', spec.kind)
-          const response = await client.create(spec)
-          succeed.push(response.body)
+          console.log('create yaml', spec.kind);
+          const response = await client.create(spec);
+          succeed.push(response.body);
         } catch (error: any) {
-          return Promise.reject(error)
+          return Promise.reject(error);
         }
       } else {
-        return Promise.reject(error)
+        return Promise.reject(error);
       }
     }
   }
-  return succeed
+  return succeed;
 }
 
 export async function delYaml(kc: k8s.KubeConfig, specs: k8s.KubernetesObject[]) {
-  const client = k8s.KubernetesObjectApi.makeApiClient(kc)
-  const validSpecs = specs.filter((s) => s && s.kind && s.metadata)
+  const client = k8s.KubernetesObjectApi.makeApiClient(kc);
+  const validSpecs = specs.filter((s) => s && s.kind && s.metadata);
 
   try {
     for (const spec of validSpecs) {
-      console.log('delete:', spec.kind)
-      client.delete(spec)
+      console.log('delete:', spec.kind);
+      client.delete(spec);
     }
   } catch (error: any) {
     // console.log('delete error', error);
-    return Promise.reject(error)
+    return Promise.reject(error);
   }
 }
 
 export function GetUserDefaultNameSpace(user: string): string {
-  return 'ns-' + user
+  return 'ns-' + user;
 }
 
 export async function getUserQuota(
   kc: k8s.KubeConfig,
   namespace: string
 ): Promise<UserQuotaItemType[]> {
-  const k8sApi = kc.makeApiClient(k8s.CoreV1Api)
+  const k8sApi = kc.makeApiClient(k8s.CoreV1Api);
 
   const {
     body: { status }
-  } = await k8sApi.readNamespacedResourceQuota(`quota-${namespace}`, namespace)
+  } = await k8sApi.readNamespacedResourceQuota(`quota-${namespace}`, namespace);
 
   return [
     {
@@ -229,14 +229,14 @@ export async function getUserQuota(
       limit: Number(status?.hard?.['services.nodeports']) || 0,
       used: Number(status?.used?.['services.nodeports']) || 0
     }
-  ]
+  ];
 }
 
 export async function getUserBalance(kc: k8s.KubeConfig) {
-  const user = kc.getCurrentUser()
-  if (!user) return 5
+  const user = kc.getCurrentUser();
+  if (!user) return 5;
 
-  const k8sApi = kc.makeApiClient(k8s.CustomObjectsApi)
+  const k8sApi = kc.makeApiClient(k8s.CustomObjectsApi);
 
   const { body } = (await k8sApi.getNamespacedCustomObject(
     'account.sealos.io',
@@ -244,48 +244,48 @@ export async function getUserBalance(kc: k8s.KubeConfig) {
     'sealos-system',
     'accounts',
     user.name
-  )) as { body: { status: { balance: number; deductionBalance: number } } }
+  )) as { body: { status: { balance: number; deductionBalance: number } } };
 
   if (body?.status?.balance !== undefined && body?.status?.deductionBalance !== undefined) {
-    return (body.status.balance - body.status.deductionBalance) / 1000000
+    return (body.status.balance - body.status.deductionBalance) / 1000000;
   }
 
-  return 5
+  return 5;
 }
 
 export async function getK8s({
   kubeconfig,
   useDefaultConfig = false
 }: {
-  kubeconfig?: string
-  useDefaultConfig?: boolean
+  kubeconfig?: string;
+  useDefaultConfig?: boolean;
 }) {
-  const kc = useDefaultConfig ? K8sApiDefault() : K8sApi(kubeconfig)
-  const kube_user = kc.getCurrentUser()
-  const client = k8s.KubernetesObjectApi.makeApiClient(kc)
+  const kc = useDefaultConfig ? K8sApiDefault() : K8sApi(kubeconfig);
+  const kube_user = kc.getCurrentUser();
+  const client = k8s.KubernetesObjectApi.makeApiClient(kc);
 
   if (kube_user === null) {
-    return Promise.reject('user not found')
+    return Promise.reject('user not found');
   }
 
-  const namespace = kc.contexts[0].namespace || GetUserDefaultNameSpace(kube_user.name)
+  const namespace = kc.contexts[0].namespace || GetUserDefaultNameSpace(kube_user.name);
 
   const applyYamlList = async (yamlList: string[], type: 'create' | 'replace' | 'update') => {
     const formatYaml: k8s.KubernetesObject[] = yamlList
       .map((item) => yaml.loadAll(item))
       .flat()
       .map((item: any) => {
-        return item
-      })
+        return item;
+      });
     if (type === 'create') {
-      return createYaml(kc, formatYaml)
+      return createYaml(kc, formatYaml);
     } else if (type === 'replace') {
-      return replaceYaml(kc, formatYaml)
+      return replaceYaml(kc, formatYaml);
     } else if (type === 'update') {
-      return updateYaml(kc, formatYaml, true)
+      return updateYaml(kc, formatYaml, true);
     }
-    return createYaml(kc, formatYaml)
-  }
+    return createYaml(kc, formatYaml);
+  };
 
   const delYamlList = (yamlList: string[]) => {
     // insert namespace
@@ -294,12 +294,12 @@ export async function getK8s({
       .flat()
       .map((item: any) => {
         if (item.metadata) {
-          item.metadata.namespace = namespace
+          item.metadata.namespace = namespace;
         }
-        return item
-      })
-    return delYaml(kc, formatYaml)
-  }
+        return item;
+      });
+    return delYaml(kc, formatYaml);
+  };
 
   return Promise.resolve({
     kc,
@@ -313,11 +313,12 @@ export async function getK8s({
     k8sAuth: kc.makeApiClient(k8s.RbacAuthorizationV1Api),
     metricsClient: new k8s.Metrics(kc),
     k8sBatch: kc.makeApiClient(k8s.BatchV1Api),
+    k8sExec: new k8s.Exec(kc),
     kube_user,
     namespace,
     applyYamlList,
     delYamlList,
     getUserQuota: () => getUserQuota(kc, namespace),
     getUserBalance: () => getUserBalance(kc)
-  })
+  });
 }
diff --git a/frontend/providers/devbox/services/backend/response.ts b/frontend/providers/devbox/services/backend/response.ts
index b78b5f1c362d..b9c7630e32ac 100644
--- a/frontend/providers/devbox/services/backend/response.ts
+++ b/frontend/providers/devbox/services/backend/response.ts
@@ -1,50 +1,58 @@
-import { NextResponse } from 'next/server'
+import { NextResponse } from 'next/server';
 
-import { V1Status } from '@kubernetes/client-node'
-import { ERROR_ENUM, ERROR_RESPONSE, ERROR_TEXT } from '../error'
+import { V1Status } from '@kubernetes/client-node';
+import { ERROR_ENUM, ERROR_RESPONSE, ERROR_TEXT } from '../error';
 
 export const jsonRes = <T = any>(props: {
-  code?: number
-  message?: string
-  data?: T
-  error?: any
+  code?: number;
+  message?: string;
+  data?: T;
+  error?: any;
 }) => {
-  const { code = 200, message = '', data = null, error } = props || {}
+  const { code = 200, message = '', data = null, error } = props || {};
 
   if (typeof error === 'string' && ERROR_RESPONSE[error]) {
-    return NextResponse.json(ERROR_RESPONSE[error])
+    return NextResponse.json(ERROR_RESPONSE[error]);
   }
-  const body = error?.body
-  if(body instanceof V1Status && body.message?.includes('40001:')) {
-    return NextResponse.json(ERROR_RESPONSE[ERROR_ENUM.outstandingPayment])
+  const body = error?.body;
+  if (body instanceof V1Status) {
+    if (body.message?.includes('40001:')) {
+      return NextResponse.json(ERROR_RESPONSE[ERROR_ENUM.outstandingPayment]);
+    } else {
+      return NextResponse.json({
+        code: 500,
+        statusText: body.message,
+        message: body.message
+      });
+    }
   }
 
-  let msg = message
+  let msg = message;
   if ((code < 200 || code >= 400) && !message) {
-    if(code >= 500) {
-      console.log(error)
-      msg = 'Internal Server Error'
+    if (code >= 500) {
+      console.log(error);
+      msg = 'Internal Server Error';
     } else {
-      msg = error?.body?.message || error?.message || 'request error'
+      msg = error?.body?.message || error?.message || 'request error';
     }
     if (typeof error === 'string') {
-      msg = error
+      msg = error;
     } else if (error?.code && error.code in ERROR_TEXT) {
-      msg = ERROR_TEXT[error.code]
+      msg = ERROR_TEXT[error.code];
     }
-    console.log('===jsonRes===\n', error)
+    console.log('===jsonRes===\n', error);
   }
-  if(code >= 500) {
+  if (code >= 500) {
     return NextResponse.json({
       code,
       statusText: '',
-      message: msg,
-    })
+      message: msg
+    });
   }
   return NextResponse.json({
     code,
     statusText: '',
     message: msg,
     data: data || error || null
-  })
-}
\ No newline at end of file
+  });
+};
diff --git a/frontend/providers/devbox/services/db/init.ts b/frontend/providers/devbox/services/db/init.ts
index 14c65bc7c079..100bd278bc05 100644
--- a/frontend/providers/devbox/services/db/init.ts
+++ b/frontend/providers/devbox/services/db/init.ts
@@ -1,10 +1,8 @@
-
 import { PrismaClient } from 'prisma/generated/client';
 
-
 const createPrismaClient = () =>
   new PrismaClient({
-    log: process.env.NODE_ENV === 'development' ? ['query', 'error', 'warn'] : ['error']
+    // log: process.env.NODE_ENV === 'development' ? ['query', 'error', 'warn'] : ['error']
   });
 const globalForPrisma = globalThis as unknown as {
   prisma: ReturnType<typeof createPrismaClient> | undefined;
@@ -14,4 +12,4 @@ export const devboxDB = globalForPrisma.prisma ?? createPrismaClient();
 
 if (process.env.NODE_ENV !== 'production') {
   globalForPrisma.prisma = devboxDB;
-}
\ No newline at end of file
+}
diff --git a/frontend/providers/devbox/services/error.ts b/frontend/providers/devbox/services/error.ts
index 76c9ae8f7388..7486b681e3c8 100644
--- a/frontend/providers/devbox/services/error.ts
+++ b/frontend/providers/devbox/services/error.ts
@@ -1,6 +1,6 @@
 export const ERROR_TEXT: Record<string, string> = {
   ETIMEDOUT: 'server timeout'
-}
+};
 export const openaiError: Record<string, string> = {
   context_length_exceeded: 'content too long, please reset the conversation',
   Unauthorized: 'API-KEY is invalid',
@@ -8,11 +8,11 @@ export const openaiError: Record<string, string> = {
   'Bad Request': 'Bad Request~ maybe content too many',
   'Too Many Requests': 'request too many, please slow down~',
   'Bad Gateway': 'gateway error, please try again'
-}
+};
 export const proxyError: Record<string, boolean> = {
   ECONNABORTED: true,
   ECONNRESET: true
-}
+};
 
 export enum ERROR_ENUM {
   unAuthorization = 'unAuthorization',
@@ -21,10 +21,10 @@ export enum ERROR_ENUM {
 export const ERROR_RESPONSE: Record<
   any,
   {
-    code: number
-    statusText: string
-    message: string
-    data?: any
+    code: number;
+    statusText: string;
+    message: string;
+    data?: any;
   }
 > = {
   [ERROR_ENUM.unAuthorization]: {
@@ -37,4 +37,4 @@ export const ERROR_RESPONSE: Record<
     statusText: ERROR_ENUM.outstandingPayment,
     message: 'outstanding payment'
   }
-}
+};
diff --git a/frontend/providers/devbox/services/monitorFetch.ts b/frontend/providers/devbox/services/monitorFetch.ts
index 73cd05b54e13..f77e005e39a0 100644
--- a/frontend/providers/devbox/services/monitorFetch.ts
+++ b/frontend/providers/devbox/services/monitorFetch.ts
@@ -1,25 +1,26 @@
-import { AxiosRequestConfig } from 'axios'
+import { AxiosRequestConfig } from 'axios';
 
 export const monitorFetch = async (props: AxiosRequestConfig, kubeconfig: string) => {
-  const { url, params } = props
-  const queryString = typeof params === 'object' ? new URLSearchParams(params).toString() : params
+  const { url, params } = props;
+  const queryString = typeof params === 'object' ? new URLSearchParams(params).toString() : params;
   const requestOptions = {
     method: 'GET',
     headers: {
       Authorization: encodeURIComponent(kubeconfig)
     }
-  }
+  };
 
-  const doMain = process.env.MONITOR_URL || 'http://launchpad-monitor.sealos.svc.cluster.local:8428'
+  const doMain =
+    process.env.MONITOR_URL || 'http://launchpad-monitor.sealos.svc.cluster.local:8428';
 
   try {
-    const response = await fetch(`${doMain}${url}?${queryString}`, requestOptions)
+    const response = await fetch(`${doMain}${url}?${queryString}`, requestOptions);
 
     if (!response.ok) {
-      throw new Error(`Error monitorFetch ${response.status}`)
+      throw new Error(`Error monitorFetch ${response.status}`);
     }
-    return await response.json()
+    return await response.json();
   } catch (error) {
-    throw error
+    throw error;
   }
-}
+};
diff --git a/frontend/providers/devbox/services/request.ts b/frontend/providers/devbox/services/request.ts
index b3ada2e5562c..9d5a6f7ee552 100644
--- a/frontend/providers/devbox/services/request.ts
+++ b/frontend/providers/devbox/services/request.ts
@@ -3,119 +3,119 @@ import axios, {
   AxiosRequestConfig,
   AxiosResponse,
   InternalAxiosRequestConfig
-} from 'axios'
+} from 'axios';
 
-import type { ApiResp } from './kubernet'
-import { isApiResp } from './kubernet'
+import type { ApiResp } from './kubernet';
+import { isApiResp } from './kubernet';
 
-import { getDesktopSessionFromSessionStorage, getSessionFromSessionStorage } from '@/utils/user'
+import { getDesktopSessionFromSessionStorage, getSessionFromSessionStorage } from '@/utils/user';
 
 const showStatus = (status: number) => {
-  let message = ''
+  let message = '';
   switch (status) {
     case 400:
-      message = 'request error(400)'
-      break
+      message = 'request error(400)';
+      break;
     case 401:
-      message = 'unauthorized, please login again(401)'
-      break
+      message = 'unauthorized, please login again(401)';
+      break;
     case 402:
-      message = 'payment required(402)'
-      break
+      message = 'payment required(402)';
+      break;
     case 403:
-      message = 'access denied(403)'
-      break
+      message = 'access denied(403)';
+      break;
     case 404:
-      message = 'request error(404)'
-      break
+      message = 'request error(404)';
+      break;
     case 408:
-      message = 'request timeout(408)'
-      break
+      message = 'request timeout(408)';
+      break;
     case 500:
-      message = 'server error(500)'
-      break
+      message = 'server error(500)';
+      break;
     case 501:
-      message = 'service not implemented(501)'
-      break
+      message = 'service not implemented(501)';
+      break;
     case 502:
-      message = 'network error(502)'
-      break
+      message = 'network error(502)';
+      break;
     case 503:
-      message = 'service unavailable(503)'
-      break
+      message = 'service unavailable(503)';
+      break;
     case 504:
-      message = 'network timeout(504)'
-      break
+      message = 'network timeout(504)';
+      break;
     case 505:
-      message = 'HTTP version not supported(505)'
-      break
+      message = 'HTTP version not supported(505)';
+      break;
     default:
-      message = `connection error(${status})!`
+      message = `connection error(${status})!`;
   }
-  return `${message}, please check the network or contact the administrator!`
-}
+  return `${message}, please check the network or contact the administrator!`;
+};
 
 const request = axios.create({
   baseURL: '/',
   withCredentials: true,
   timeout: 60000
-})
+});
 
 // request interceptor
 request.interceptors.request.use(
   (config: InternalAxiosRequestConfig) => {
     // auto append service prefix
     if (config.url && !config.url?.startsWith('/api/')) {
-      config.url = '' + config.url
+      config.url = '' + config.url;
     }
-    let _headers: AxiosHeaders = config.headers
-    const session = getDesktopSessionFromSessionStorage()
-    const devboxToken = getSessionFromSessionStorage()
+    let _headers: AxiosHeaders = config.headers;
+    const session = getDesktopSessionFromSessionStorage();
+    const devboxToken = getSessionFromSessionStorage();
     //获取token，并将其添加至请求头中
-    _headers['Authorization'] = encodeURIComponent(session?.kubeconfig || '')
-    _headers['Authorization-Bearer'] = encodeURIComponent(devboxToken || session?.token || '')
+    _headers['Authorization'] = encodeURIComponent(session?.kubeconfig || '');
+    _headers['Authorization-Bearer'] = encodeURIComponent(devboxToken || session?.token || '');
     if (!config.headers || config.headers['Content-Type'] === '') {
-      _headers['Content-Type'] = 'application/json'
+      _headers['Content-Type'] = 'application/json';
     }
 
-    config.headers = _headers
-    return config
+    config.headers = _headers;
+    return config;
   },
   (error: any) => {
-    error.data = {}
-    error.data.msg = 'server error, please contact the administrator!'
-    return Promise.resolve(error)
+    error.data = {};
+    error.data.msg = 'server error, please contact the administrator!';
+    return Promise.resolve(error);
   }
-)
+);
 
 // response interceptor
 request.interceptors.response.use(
   (response: AxiosResponse) => {
-    const { status, data } = response
+    const { status, data } = response;
     if (status < 200 || status >= 300 || !isApiResp(data)) {
       return Promise.reject(
         status + ':' + showStatus(status) + ', ' + typeof data === 'string' ? data : String(data)
-      )
+      );
     }
 
-    const apiResp = data as ApiResp
+    const apiResp = data as ApiResp;
     if (apiResp.code < 200 || apiResp.code >= 400) {
-      return Promise.reject(apiResp.code + ':' + apiResp.message)
+      return Promise.reject(apiResp.code + ':' + apiResp.message);
     }
 
-    response.data = apiResp.data
-    return response.data
+    response.data = apiResp.data;
+    return response.data;
   },
   (error: any) => {
     if (axios.isCancel(error)) {
-      return Promise.reject('cancel request' + String(error))
+      return Promise.reject('cancel request' + String(error));
     } else {
       error.errMessage =
-        'request timeout or server error, please check the network or contact the administrator!'
+        'request timeout or server error, please check the network or contact the administrator!';
     }
-    return Promise.reject(error)
+    return Promise.reject(error);
   }
-)
+);
 
 export function GET<T = any>(
   url: string,
@@ -125,7 +125,7 @@ export function GET<T = any>(
   return request.get(url, {
     params: data,
     ...config
-  })
+  });
 }
 
 export function POST<T = any>(
@@ -133,7 +133,7 @@ export function POST<T = any>(
   data?: { [key: string]: any },
   config?: AxiosRequestConfig
 ): Promise<T> {
-  return request.post(url, data, config)
+  return request.post(url, data, config);
 }
 
 export function DELETE<T = any>(
@@ -144,5 +144,5 @@ export function DELETE<T = any>(
   return request.delete(url, {
     params: data,
     ...config
-  })
+  });
 }
diff --git a/frontend/providers/devbox/services/retag.ts b/frontend/providers/devbox/services/retag.ts
index 91cd77ed4905..8a0f538effb8 100644
--- a/frontend/providers/devbox/services/retag.ts
+++ b/frontend/providers/devbox/services/retag.ts
@@ -1,7 +1,7 @@
-import axios from "axios"
+import axios from 'axios';
 
 export const retagSvcClient = axios.create({
   baseURL: process.env.RETAG_SVC_URL,
   withCredentials: true,
   timeout: 60000
-})
\ No newline at end of file
+});
diff --git a/frontend/providers/devbox/stores/devbox.ts b/frontend/providers/devbox/stores/devbox.ts
index 6618dbb04b83..30690a18bb91 100644
--- a/frontend/providers/devbox/stores/devbox.ts
+++ b/frontend/providers/devbox/stores/devbox.ts
@@ -1,6 +1,6 @@
-import { create } from 'zustand'
-import { devtools } from 'zustand/middleware'
-import { immer } from 'zustand/middleware/immer'
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+import { immer } from 'zustand/middleware/immer';
 
 import {
   getDevboxByName,
@@ -9,40 +9,44 @@ import {
   getDevboxVersionList,
   getMyDevboxList,
   getSSHConnectionInfo
-} from '@/api/devbox'
-import { devboxStatusMap, PodStatusEnum } from '@/constants/devbox'
+} from '@/api/devbox';
+import { devboxStatusMap, PodStatusEnum } from '@/constants/devbox';
 import type {
   DevboxDetailType,
   DevboxDetailTypeV2,
   DevboxListItemTypeV2,
   DevboxVersionListItemType
-} from '@/types/devbox'
+} from '@/types/devbox';
 
 type State = {
-  devboxList: DevboxListItemTypeV2[]
-  requestCache: Map<string, Promise<any>>
-  setDevboxList: () => Promise<DevboxListItemTypeV2[]>
-  loadAvgMonitorData: (devboxName: string) => Promise<void>
-  devboxVersionList: DevboxVersionListItemType[]
+  devboxList: DevboxListItemTypeV2[];
+  requestCache: Map<string, Promise<any>>;
+  setDevboxList: () => Promise<DevboxListItemTypeV2[]>;
+  loadAvgMonitorData: (devboxName: string) => Promise<void>;
+  devboxVersionList: DevboxVersionListItemType[];
   startedTemplate?: {
-    uid: string,
-    iconId: string | null,
-    name: string,
-  }
-  setStartedTemplate: (template: {
-    uid: string,
-    iconId: string | null,
-    name: string,
-  } | undefined) => void,
+    uid: string;
+    iconId: string | null;
+    name: string;
+  };
+  setStartedTemplate: (
+    template:
+      | {
+          uid: string;
+          iconId: string | null;
+          name: string;
+        }
+      | undefined
+  ) => void;
   setDevboxVersionList: (
     devboxName: string,
     devboxUid: string
-  ) => Promise<DevboxVersionListItemType[]>
-  devboxDetail?: DevboxDetailTypeV2
-  setDevboxDetail: (devboxName: string, sealosDomain: string) => Promise<DevboxDetailTypeV2>
-  intervalLoadPods: (devboxName: string, updateDetail: boolean) => Promise<any>
-  loadDetailMonitorData: (devboxName: string) => Promise<any>
-}
+  ) => Promise<DevboxVersionListItemType[]>;
+  devboxDetail?: DevboxDetailTypeV2;
+  setDevboxDetail: (devboxName: string, sealosDomain: string) => Promise<DevboxDetailTypeV2>;
+  intervalLoadPods: (devboxName: string, updateDetail: boolean) => Promise<any>;
+  loadDetailMonitorData: (devboxName: string) => Promise<any>;
+};
 
 export const useDevboxStore = create<State>()(
   devtools(
@@ -50,15 +54,15 @@ export const useDevboxStore = create<State>()(
       devboxList: [],
       requestCache: new Map(),
       setDevboxList: async () => {
-        const res = await getMyDevboxList()
+        const res = await getMyDevboxList();
         set((state) => {
-          state.devboxList = res
-        })
-        return res
+          state.devboxList = res;
+        });
+        return res;
       },
       loadAvgMonitorData: async (devboxName) => {
-        const pods = await getDevboxPodsByDevboxName(devboxName)
-        const queryName = pods.length > 0 ? pods[0].podName : devboxName
+        const pods = await getDevboxPodsByDevboxName(devboxName);
+        const queryName = pods.length > 0 ? pods[0].podName : devboxName;
 
         const [averageCpuData, averageMemoryData] = await Promise.all([
           getDevboxMonitorData({
@@ -71,7 +75,7 @@ export const useDevboxStore = create<State>()(
             queryName: queryName,
             step: '2m'
           })
-        ])
+        ]);
         set((state) => {
           state.devboxList = state.devboxList.map((item) => ({
             ...item,
@@ -81,69 +85,70 @@ export const useDevboxStore = create<State>()(
               item.name === devboxName && averageMemoryData[0]
                 ? averageMemoryData[0]
                 : item.usedMemory
-          }))
-        })
+          }));
+        });
       },
       devboxVersionList: [],
       setDevboxVersionList: async (devboxName, devboxUid) => {
-        const res = await getDevboxVersionList(devboxName, devboxUid)
+        const res = await getDevboxVersionList(devboxName, devboxUid);
 
         set((state) => {
-          state.devboxVersionList = res
-        })
-        return res
+          state.devboxVersionList = res;
+        });
+        return res;
       },
       setStartedTemplate(templateRepository) {
         set((state) => {
-          if(!templateRepository) state.startedTemplate = undefined
-          else state.startedTemplate = {
-            uid: templateRepository.uid,
-            iconId: templateRepository.iconId,
-            name: templateRepository.name
-          }
-        })
+          if (!templateRepository) state.startedTemplate = undefined;
+          else
+            state.startedTemplate = {
+              uid: templateRepository.uid,
+              iconId: templateRepository.iconId,
+              name: templateRepository.name
+            };
+        });
       },
       startedTemplate: undefined,
       devboxDetail: undefined,
       setDevboxDetail: async (devboxName: string, sealosDomain: string) => {
-        const detail = await getDevboxByName(devboxName)
+        const detail = await getDevboxByName(devboxName);
 
         if (detail.status.value !== 'Running') {
           set((state) => {
-            state.devboxDetail = detail
-          })
-          return detail
+            state.devboxDetail = detail;
+          });
+          return detail;
         }
-        const pods = await getDevboxPodsByDevboxName(devboxName)
+        const pods = await getDevboxPodsByDevboxName(devboxName);
 
         const { base64PrivateKey, userName } = await getSSHConnectionInfo({
           devboxName: detail.name
-        })
+        });
 
-        const sshPrivateKey = Buffer.from(base64PrivateKey, 'base64').toString('utf-8')
+        const sshPrivateKey = Buffer.from(base64PrivateKey, 'base64').toString('utf-8');
         const sshConfig = {
           sshUser: userName,
           sshDomain: sealosDomain,
           sshPort: detail.sshPort,
           sshPrivateKey
-        }
+        };
 
         // add sshConfig
-        detail.sshConfig = sshConfig as DevboxDetailType['sshConfig']
+        detail.sshConfig = sshConfig as DevboxDetailType['sshConfig'];
 
         // add upTime by Pod
-        detail.upTime = pods[0].upTime
+        detail.upTime = pods[0].upTime;
 
         set((state) => {
-          state.devboxDetail = detail
-        })
+          state.devboxDetail = detail;
+        });
 
-        return detail
+        return detail;
       },
       intervalLoadPods: async (devboxName, updateDetail) => {
-        if (!devboxName) return Promise.reject('devbox name is empty')
+        if (!devboxName) return Promise.reject('devbox name is empty');
 
-        const pods = await getDevboxPodsByDevboxName(devboxName)
+        const pods = await getDevboxPodsByDevboxName(devboxName);
 
         // TODO: change Running to podStatusMap.running
         // TODO: check status enum and backend status enum
@@ -151,24 +156,24 @@ export const useDevboxStore = create<State>()(
           pods.length === 0
             ? devboxStatusMap.Stopped
             : pods.filter((pod) => pod.status.value === PodStatusEnum.running).length > 0
-              ? devboxStatusMap.Running
-              : devboxStatusMap.Pending
+            ? devboxStatusMap.Running
+            : devboxStatusMap.Pending;
 
         set((state) => {
           if (state?.devboxDetail?.name === devboxName && updateDetail) {
-            state.devboxDetail.status = devboxStatus
+            state.devboxDetail.status = devboxStatus;
           }
           state.devboxList = state.devboxList.map((item) => ({
             ...item,
             status: item.name === devboxName ? devboxStatus : item.status
-          }))
-        })
-        return 'success'
+          }));
+        });
+        return 'success';
       },
       loadDetailMonitorData: async (devboxName) => {
-        const pods = await getDevboxPodsByDevboxName(devboxName)
+        const pods = await getDevboxPodsByDevboxName(devboxName);
 
-        const queryName = pods.length > 0 ? pods[0].podName : devboxName
+        const queryName = pods.length > 0 ? pods[0].podName : devboxName;
 
         const [averageCpuData, averageMemoryData] = await Promise.all([
           getDevboxMonitorData({
@@ -181,28 +186,28 @@ export const useDevboxStore = create<State>()(
             queryName: queryName,
             step: '2m'
           })
-        ])
+        ]);
 
         set((state) => {
           if (state?.devboxDetail?.name === devboxName && state.devboxDetail?.isPause !== true) {
             state.devboxDetail.usedCpu = averageCpuData[0]
               ? averageCpuData[0]
               : {
-                xData: new Array(30).fill(0),
-                yData: new Array(30).fill('0'),
-                name: ''
-              }
+                  xData: new Array(30).fill(0),
+                  yData: new Array(30).fill('0'),
+                  name: ''
+                };
             state.devboxDetail.usedMemory = averageMemoryData[0]
               ? averageMemoryData[0]
               : {
-                xData: new Array(30).fill(0),
-                yData: new Array(30).fill('0'),
-                name: ''
-              }
+                  xData: new Array(30).fill(0),
+                  yData: new Array(30).fill('0'),
+                  name: ''
+                };
           }
-        })
-        return 'success'
+        });
+        return 'success';
       }
     }))
   )
-)
+);
diff --git a/frontend/providers/devbox/stores/env.ts b/frontend/providers/devbox/stores/env.ts
index 66a42e33b82b..cf50819f8193 100644
--- a/frontend/providers/devbox/stores/env.ts
+++ b/frontend/providers/devbox/stores/env.ts
@@ -1,9 +1,9 @@
-import { create } from 'zustand'
-import { devtools, persist } from 'zustand/middleware'
-import { immer } from 'zustand/middleware/immer'
+import { create } from 'zustand';
+import { devtools, persist } from 'zustand/middleware';
+import { immer } from 'zustand/middleware/immer';
 
-import { getAppEnv } from '@/api/platform'
-import { Env } from '@/types/static'
+import { getAppEnv } from '@/api/platform';
+import { Env } from '@/types/static';
 
 export const defaultEnv: Env = {
   sealosDomain: 'dev.sealos.plus',
@@ -16,12 +16,12 @@ export const defaultEnv: Env = {
   rootRuntimeNamespace: 'devbox-system',
   ingressDomain: 'sealosusw.site',
   currencySymbol: 'shellCoin'
-}
+};
 
 type State = {
-  env: Env
-  setEnv: () => Promise<Env>
-}
+  env: Env;
+  setEnv: () => Promise<Env>;
+};
 
 export const useEnvStore = create<State>()(
   devtools(
@@ -29,11 +29,11 @@ export const useEnvStore = create<State>()(
       immer((set) => ({
         env: defaultEnv,
         async setEnv() {
-          const res = await getAppEnv()
+          const res = await getAppEnv();
           set((state) => {
-            state.env = res
-          })
-          return res
+            state.env = res;
+          });
+          return res;
         }
       })),
       {
@@ -41,4 +41,4 @@ export const useEnvStore = create<State>()(
       }
     )
   )
-)
+);
diff --git a/frontend/providers/devbox/stores/global.ts b/frontend/providers/devbox/stores/global.ts
index 5a3492af779e..e8b98e0bd077 100644
--- a/frontend/providers/devbox/stores/global.ts
+++ b/frontend/providers/devbox/stores/global.ts
@@ -1,15 +1,17 @@
-import { create } from 'zustand'
-import { devtools } from 'zustand/middleware'
-import { immer } from 'zustand/middleware/immer'
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+import { immer } from 'zustand/middleware/immer';
+
+export type IDEType = 'vscode' | 'cursor' | 'vscodeInsiders' | 'windsurf' | 'jetbrains';
 
 type State = {
-  screenWidth: number
-  setScreenWidth: (e: number) => void
-  loading: boolean
-  setLoading: (val: boolean) => void
-  lastRoute: string
-  setLastRoute: (val: string) => void
-}
+  screenWidth: number;
+  setScreenWidth: (e: number) => void;
+  loading: boolean;
+  setLoading: (val: boolean) => void;
+  lastRoute: string;
+  setLastRoute: (val: string) => void;
+};
 
 export const useGlobalStore = create<State>()(
   devtools(
@@ -17,21 +19,21 @@ export const useGlobalStore = create<State>()(
       screenWidth: 1440,
       setScreenWidth(e: number) {
         set((state) => {
-          state.screenWidth = e
-        })
+          state.screenWidth = e;
+        });
       },
       loading: false,
       setLoading(val: boolean) {
         set((state) => {
-          state.loading = val
-        })
+          state.loading = val;
+        });
       },
       lastRoute: '/',
       setLastRoute(val) {
         set((state) => {
-          state.lastRoute = val
-        })
+          state.lastRoute = val;
+        });
       }
     }))
   )
-)
+);
diff --git a/frontend/providers/devbox/stores/guide.ts b/frontend/providers/devbox/stores/guide.ts
new file mode 100644
index 000000000000..7a68c29977da
--- /dev/null
+++ b/frontend/providers/devbox/stores/guide.ts
@@ -0,0 +1,39 @@
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+
+interface GuideState {
+  createCompleted: boolean;
+  detailCompleted: boolean;
+  listCompleted: boolean;
+  isGuideEnabled: boolean;
+  releaseCompleted: boolean;
+  setCreateCompleted: (completed: boolean) => void;
+  setDetailCompleted: (completed: boolean) => void;
+  setListCompleted: (completed: boolean) => void;
+  setGuideEnabled: (enabled: boolean) => void;
+  setReleaseCompleted: (completed: boolean) => void;
+  resetGuideState: (completed: boolean) => void;
+}
+
+export const useGuideStore = create<GuideState>()(
+  persist(
+    (set) => ({
+      createCompleted: false,
+      detailCompleted: false,
+      listCompleted: false,
+      isGuideEnabled: false,
+      releaseCompleted: false,
+      setCreateCompleted: (completed) => set({ createCompleted: completed }),
+      setDetailCompleted: (completed) => set({ detailCompleted: completed }),
+      setListCompleted: (completed) => set({ listCompleted: completed }),
+      setReleaseCompleted: (completed) => set({ releaseCompleted: completed }),
+      setGuideEnabled: (enabled) => set({ isGuideEnabled: enabled }),
+      resetGuideState: (completed) =>
+        set({ createCompleted: completed, detailCompleted: completed, listCompleted: completed })
+    }),
+    {
+      name: 'user-guide',
+      storage: createJSONStorage(() => localStorage)
+    }
+  )
+);
diff --git a/frontend/providers/devbox/stores/ide.ts b/frontend/providers/devbox/stores/ide.ts
index a12839d38e51..d41c5683f131 100644
--- a/frontend/providers/devbox/stores/ide.ts
+++ b/frontend/providers/devbox/stores/ide.ts
@@ -1,16 +1,16 @@
-import { create } from 'zustand'
-import { devtools, persist } from 'zustand/middleware'
-import { immer } from 'zustand/middleware/immer'
+import { create } from 'zustand';
+import { devtools, persist } from 'zustand/middleware';
+import { immer } from 'zustand/middleware/immer';
 
-export type IDEType = 'vscode' | 'cursor' | 'vscodeInsiders' | 'windsurf'
+export type IDEType = 'vscode' | 'cursor' | 'vscodeInsiders' | 'windsurf' | 'jetbrains';
 
 type State = {
-  devboxIDEList: { ide: IDEType; devboxName: string }[]
-  getDevboxIDEByDevboxName: (devboxName: string) => IDEType
-  addDevboxIDE: (ide: IDEType, devboxName: string) => void
-  updateDevboxIDE: (ide: IDEType, devboxName: string) => void
-  removeDevboxIDE: (devboxName: string) => void
-}
+  devboxIDEList: { ide: IDEType; devboxName: string }[];
+  getDevboxIDEByDevboxName: (devboxName: string) => IDEType;
+  addDevboxIDE: (ide: IDEType, devboxName: string) => void;
+  updateDevboxIDE: (ide: IDEType, devboxName: string) => void;
+  removeDevboxIDE: (devboxName: string) => void;
+};
 
 export const useIDEStore = create<State>()(
   devtools(
@@ -18,29 +18,31 @@ export const useIDEStore = create<State>()(
       immer((set, get) => ({
         devboxIDEList: [],
         getDevboxIDEByDevboxName(devboxName: string) {
-          return get().devboxIDEList.find((item) => item.devboxName === devboxName)?.ide ||'vscode'
+          return (
+            get().devboxIDEList.find((item) => item.devboxName === devboxName)?.ide || 'vscode'
+          );
         },
         addDevboxIDE(ide: IDEType, devboxName: string) {
           set((state) => {
-            state.devboxIDEList.push({ ide, devboxName })
-          })
+            state.devboxIDEList.push({ ide, devboxName });
+          });
         },
         updateDevboxIDE(ide: IDEType, devboxName: string) {
           set((state) => {
-            const item = state.devboxIDEList.find((item) => item.devboxName === devboxName)
+            const item = state.devboxIDEList.find((item) => item.devboxName === devboxName);
             if (item) {
-              item.ide = ide
+              item.ide = ide;
             } else {
-              state.devboxIDEList.push({ ide, devboxName })
+              state.devboxIDEList.push({ ide, devboxName });
             }
-          })
+          });
         },
         removeDevboxIDE(devboxName: string) {
           set((state) => {
             state.devboxIDEList = state.devboxIDEList.filter(
               (item) => item.devboxName !== devboxName
-            )
-          })
+            );
+          });
         }
       })),
       {
@@ -48,4 +50,4 @@ export const useIDEStore = create<State>()(
       }
     )
   )
-)
+);
diff --git a/frontend/providers/devbox/stores/price.ts b/frontend/providers/devbox/stores/price.ts
index 9830575b1a0d..514fef27382d 100644
--- a/frontend/providers/devbox/stores/price.ts
+++ b/frontend/providers/devbox/stores/price.ts
@@ -1,27 +1,27 @@
-import { getResourcePrice } from '@/api/platform'
-import { SourcePrice } from '@/types/static'
-import { create } from 'zustand'
-import { devtools } from 'zustand/middleware'
-import { immer } from 'zustand/middleware/immer'
+import { getResourcePrice } from '@/api/platform';
+import { SourcePrice } from '@/types/static';
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+import { immer } from 'zustand/middleware/immer';
 
-const defaultSourcePrice: SourcePrice = { cpu: 0.067, memory: 0.033792, nodeports: 0.0001 }
+const defaultSourcePrice: SourcePrice = { cpu: 0.067, memory: 0.033792, nodeports: 0.0001 };
 
 type State = {
-  sourcePrice: SourcePrice
-  setSourcePrice: () => Promise<SourcePrice>
-}
+  sourcePrice: SourcePrice;
+  setSourcePrice: () => Promise<SourcePrice>;
+};
 
 export const usePriceStore = create<State>()(
   devtools(
     immer((set, get) => ({
       sourcePrice: defaultSourcePrice,
       async setSourcePrice() {
-        const res = await getResourcePrice()
+        const res = await getResourcePrice();
         set((state) => {
-          state.sourcePrice = res
-        })
-        return res
+          state.sourcePrice = res;
+        });
+        return res;
       }
     }))
   )
-)
+);
diff --git a/frontend/providers/devbox/stores/tagSelector.ts b/frontend/providers/devbox/stores/tagSelector.ts
index c2bc3306ce6d..a6034793cadd 100644
--- a/frontend/providers/devbox/stores/tagSelector.ts
+++ b/frontend/providers/devbox/stores/tagSelector.ts
@@ -1,32 +1,32 @@
-import { createStore } from "zustand"
+import { createStore } from 'zustand';
 
 export type TagSelectorProps = {
-  selectedTagList: Set<string>
-}
+  selectedTagList: Set<string>;
+};
 export type TagSelectorStore = {
-  setSelectedTag: (tagUid: string, select: boolean) => void,
-  getSelectedTagList: () => string[],
-} & TagSelectorProps
+  setSelectedTag: (tagUid: string, select: boolean) => void;
+  getSelectedTagList: () => string[];
+} & TagSelectorProps;
 
 export const createTagSelectorStore = (initProps?: Partial<TagSelectorProps>) => {
   const DEFAULT_PROPS: TagSelectorProps = {
     selectedTagList: new Set()
-  }
+  };
   return createStore<TagSelectorStore>()((set, get) => ({
     ...DEFAULT_PROPS,
     ...initProps,
     setSelectedTag(tagUid, select) {
-      set(draft => {
-        const newSet = new Set(draft.selectedTagList)
-        if (select) newSet.add(tagUid)
-        else newSet.delete(tagUid)
+      set((draft) => {
+        const newSet = new Set(draft.selectedTagList);
+        if (select) newSet.add(tagUid);
+        else newSet.delete(tagUid);
         return {
           selectedTagList: newSet
-        }
-      })
+        };
+      });
     },
     getSelectedTagList() {
-      return [...get().selectedTagList]
-    },
-  }))
-}
\ No newline at end of file
+      return [...get().selectedTagList];
+    }
+  }));
+};
diff --git a/frontend/providers/devbox/stores/template.ts b/frontend/providers/devbox/stores/template.ts
index 6bd04a399a34..26fe228fcbea 100644
--- a/frontend/providers/devbox/stores/template.ts
+++ b/frontend/providers/devbox/stores/template.ts
@@ -1,42 +1,42 @@
-import { TemplateState } from '@/constants/template'
-import { create } from 'zustand'
-import { devtools } from 'zustand/middleware'
-import { immer } from 'zustand/middleware/immer'
+import { TemplateState } from '@/constants/template';
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+import { immer } from 'zustand/middleware/immer';
 type TemplateModalConfig = {
-  templateState: TemplateState,
-  lastRoute: string,
-}
+  templateState: TemplateState;
+  lastRoute: string;
+};
 type State = {
-  isOpen : boolean,
-  config: TemplateModalConfig,
-  openTemplateModal: (config: TemplateModalConfig) => void,
-  closeTemplateModal: () => void,
-  updateTemplateModalConfig: (config: TemplateModalConfig) => void,
-}
+  isOpen: boolean;
+  config: TemplateModalConfig;
+  openTemplateModal: (config: TemplateModalConfig) => void;
+  closeTemplateModal: () => void;
+  updateTemplateModalConfig: (config: TemplateModalConfig) => void;
+};
 export const useTemplateStore = create<State>()(
   devtools(
     immer((set, get) => ({
       isOpen: false,
       config: {
         templateState: TemplateState.publicTemplate,
-        lastRoute: '',
+        lastRoute: ''
       },
       updateTemplateModalConfig(config: TemplateModalConfig) {
         set((state) => {
-          state.config = config
-        })
+          state.config = config;
+        });
       },
       openTemplateModal(config: TemplateModalConfig) {
         set((state) => {
-          state.isOpen = true
-          state.config = config
-        })
+          state.isOpen = true;
+          state.config = config;
+        });
       },
       closeTemplateModal() {
         set((state) => {
-          state.isOpen = false
-        })
-      },
+          state.isOpen = false;
+        });
+      }
     }))
   )
-)
\ No newline at end of file
+);
diff --git a/frontend/providers/devbox/stores/user.ts b/frontend/providers/devbox/stores/user.ts
index 1c87fcdbe729..7b8a7d317915 100644
--- a/frontend/providers/devbox/stores/user.ts
+++ b/frontend/providers/devbox/stores/user.ts
@@ -1,20 +1,17 @@
-import { create } from 'zustand'
-import { devtools } from 'zustand/middleware'
-import { immer } from 'zustand/middleware/immer'
-
-import { getUserQuota } from '@/api/platform'
-import { DevboxEditType } from '@/types/devbox'
-import { UserQuotaItemType } from '@/types/user'
-type TQuota = Pick<DevboxEditType, 'memory'|'cpu'> & { nodeports: number }
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+import { immer } from 'zustand/middleware/immer';
+
+import { getUserQuota } from '@/api/platform';
+import { DevboxEditType } from '@/types/devbox';
+import { UserQuotaItemType } from '@/types/user';
+type TQuota = Pick<DevboxEditType, 'memory' | 'cpu'> & { nodeports: number };
 type State = {
-  balance: number
-  userQuota: UserQuotaItemType[]
-  loadUserQuota: () => Promise<null>
-  checkQuotaAllow: (
-    request: TQuota,
-    usedData?: TQuota
-  ) => string | undefined
-}
+  balance: number;
+  userQuota: UserQuotaItemType[];
+  loadUserQuota: () => Promise<null>;
+  checkQuotaAllow: (request: TQuota, usedData?: TQuota) => string | undefined;
+};
 
 export const useUserStore = create<State>()(
   devtools(
@@ -22,45 +19,45 @@ export const useUserStore = create<State>()(
       balance: 5,
       userQuota: [],
       loadUserQuota: async () => {
-        const response = await getUserQuota()
+        const response = await getUserQuota();
 
         set((state) => {
-          state.userQuota = response.quota
-        })
-        return null
+          state.userQuota = response.quota;
+        });
+        return null;
       },
       checkQuotaAllow: ({ cpu, memory, nodeports }, usedData): string | undefined => {
-        const quote = get().userQuota
+        const quote = get().userQuota;
 
-        console.log(cpu, memory, nodeports)
+        console.log(cpu, memory, nodeports);
         const request = {
           cpu: cpu / 1000,
           memory: memory / 1024,
           nodeports: nodeports
-        }
+        };
 
         if (usedData) {
-          const { cpu = 0, memory = 0, nodeports = 0 } = usedData
+          const { cpu = 0, memory = 0, nodeports = 0 } = usedData;
 
-          request.cpu -= cpu / 1000
-          request.memory -= memory / 1024
-          request.nodeports -= nodeports
+          request.cpu -= cpu / 1000;
+          request.memory -= memory / 1024;
+          request.nodeports -= nodeports;
         }
 
         const overLimitTip: { [key: string]: string } = {
           cpu: 'cpu_exceeds_quota',
           memory: 'memory_exceeds_quota',
           nodeports: 'nodeports_exceeds_quota'
-        }
+        };
 
         const exceedQuota = quote.find((item) => {
           if (item.used + request[item.type] > item.limit) {
-            return true
+            return true;
           }
-        })
+        });
 
-        return exceedQuota?.type ? overLimitTip[exceedQuota.type] : undefined
+        return exceedQuota?.type ? overLimitTip[exceedQuota.type] : undefined;
       }
     }))
   )
-)
+);
diff --git a/frontend/providers/devbox/types/adapt.d.ts b/frontend/providers/devbox/types/adapt.d.ts
index 6a82b20fd3ff..b619a4ce8733 100644
--- a/frontend/providers/devbox/types/adapt.d.ts
+++ b/frontend/providers/devbox/types/adapt.d.ts
@@ -1,14 +1,18 @@
-import { TemplateRepositoryKind } from "@/prisma/generated/client";
-import type { PortInfos } from "@/types/ingress";
-import type { KBDevboxTypeV2 } from "@/types/k8s";
-export type GetDevboxByNameReturn = [KBDevboxTypeV2, PortInfos, {
-  templateRepository: {
-    uid: string,
-    name: string,
-    iconId: string | null,
-    kind: TemplateRepositoryKind
-  },
-  uid: string,
-  name: string,
-  image: string,
-}]
\ No newline at end of file
+import { TemplateRepositoryKind } from '@/prisma/generated/client';
+import type { PortInfos } from '@/types/ingress';
+import type { KBDevboxTypeV2 } from '@/types/k8s';
+export type GetDevboxByNameReturn = [
+  KBDevboxTypeV2,
+  PortInfos,
+  {
+    templateRepository: {
+      uid: string;
+      name: string;
+      iconId: string | null;
+      kind: TemplateRepositoryKind;
+    };
+    uid: string;
+    name: string;
+    image: string;
+  }
+];
diff --git a/frontend/providers/devbox/types/app.d.ts b/frontend/providers/devbox/types/app.d.ts
index 6345369db147..35897ff27877 100644
--- a/frontend/providers/devbox/types/app.d.ts
+++ b/frontend/providers/devbox/types/app.d.ts
@@ -1,6 +1,6 @@
 export interface AppListItemType {
-  id: string
-  name: string
-  createTime: string
-  imageName: string
+  id: string;
+  name: string;
+  createTime: string;
+  imageName: string;
 }
diff --git a/frontend/providers/devbox/types/cluster.d.ts b/frontend/providers/devbox/types/cluster.d.ts
index 4c5ac5cb0b7c..be76ee1c650a 100644
--- a/frontend/providers/devbox/types/cluster.d.ts
+++ b/frontend/providers/devbox/types/cluster.d.ts
@@ -1,78 +1,78 @@
-import { DBType, DBStatusEnum } from './db'
+import { DBType, DBStatusEnum } from './db';
 
 export type KbPgClusterType = {
-  apiVersion: 'apps.kubeblocks.io/v1alpha1'
-  kind: 'Cluster'
+  apiVersion: 'apps.kubeblocks.io/v1alpha1';
+  kind: 'Cluster';
   metadata: {
-    annotations: Record<string, string>
-    creationTimestamp: Date
+    annotations: Record<string, string>;
+    creationTimestamp: Date;
     labels: {
-      'clusterdefinition.kubeblocks.io/name': DBType
-      'clusterversion.kubeblocks.io/name': string
-      'sealos-db-provider/postgresql': string
-      [key: string]: string
-    }
-    name: string
-    namespace: string
-    uid: string
-  }
-  spec: KubeBlockClusterSpec
-  status?: KubeBlockClusterStatus
-}
+      'clusterdefinition.kubeblocks.io/name': DBType;
+      'clusterversion.kubeblocks.io/name': string;
+      'sealos-db-provider/postgresql': string;
+      [key: string]: string;
+    };
+    name: string;
+    namespace: string;
+    uid: string;
+  };
+  spec: KubeBlockClusterSpec;
+  status?: KubeBlockClusterStatus;
+};
 
 export interface KubeBlockClusterSpec {
-  clusterDefinitionRef: DBType
-  clusterVersionRef: string
-  terminationPolicy: string
+  clusterDefinitionRef: DBType;
+  clusterVersionRef: string;
+  terminationPolicy: string;
   componentSpecs: {
-    componentDefRef: DBType
-    name: DBType
-    replicas: number
+    componentDefRef: DBType;
+    name: DBType;
+    replicas: number;
     resources: {
       limits: {
-        cpu: string
-        memory: string
-      }
+        cpu: string;
+        memory: string;
+      };
       requests: {
-        cpu: string
-        memory: string
-      }
-    }
+        cpu: string;
+        memory: string;
+      };
+    };
     volumeClaimTemplates: {
-      name: 'data'
+      name: 'data';
       spec: {
-        accessModes: ['ReadWriteOnce']
+        accessModes: ['ReadWriteOnce'];
         resources: {
           requests: {
-            storage: string
-          }
-        }
-      }
-    }[]
-  }[]
+            storage: string;
+          };
+        };
+      };
+    }[];
+  }[];
   backup: {
-    enabled: boolean
-    cronExpression: string
-    method: string
-    pitrEnabled: boolean
-    repoName: string
-    retentionPeriod: string
-  }
+    enabled: boolean;
+    cronExpression: string;
+    method: string;
+    pitrEnabled: boolean;
+    repoName: string;
+    retentionPeriod: string;
+  };
 }
 export interface KubeBlockClusterStatus {
-  clusterDefGeneration: number
-  components: object
-  conditions: k8s.V1Condition[]
-  observedGeneration: number
-  phase: `${DBStatusEnum}`
+  clusterDefGeneration: number;
+  components: object;
+  conditions: k8s.V1Condition[];
+  observedGeneration: number;
+  phase: `${DBStatusEnum}`;
 }
 
 export interface DBListItemType {
-  id: string
-  name: string
-  dbType: DBType
-  createTime: string
-  cpu: number
-  memory: number
-  storage: string
+  id: string;
+  name: string;
+  dbType: DBType;
+  createTime: string;
+  cpu: number;
+  memory: number;
+  storage: string;
 }
diff --git a/frontend/providers/devbox/types/db.d.ts b/frontend/providers/devbox/types/db.d.ts
index 242746a33217..c603e53b6243 100644
--- a/frontend/providers/devbox/types/db.d.ts
+++ b/frontend/providers/devbox/types/db.d.ts
@@ -1,3 +1,3 @@
-import { DBTypeEnum } from '@/constants/db'
+import { DBTypeEnum } from '@/constants/db';
 
-export type DBType = `${DBTypeEnum}`
+export type DBType = `${DBTypeEnum}`;
diff --git a/frontend/providers/devbox/types/devbox.d.ts b/frontend/providers/devbox/types/devbox.d.ts
index ea9b3b44783e..d0dfda5a5e5c 100644
--- a/frontend/providers/devbox/types/devbox.d.ts
+++ b/frontend/providers/devbox/types/devbox.d.ts
@@ -7,7 +7,7 @@ import {
   V1Secret,
   V1Service,
   V1StatefulSet
-} from '@kubernetes/client-node'
+} from '@kubernetes/client-node';
 
 import {
   DevboxReleaseStatusEnum,
@@ -17,160 +17,160 @@ import {
   OSTypeEnum,
   PodStatusEnum,
   YamlKindEnum
-} from '@/constants/devbox'
-import { PortInfos } from './ingress'
-import { MonitorDataResult } from './monitor'
+} from '@/constants/devbox';
+import { PortInfos } from './ingress';
+import { MonitorDataResult } from './monitor';
 
-export type DevboxStatusValueType = `${DevboxStatusEnum}`
-export type DevboxReleaseStatusValueType = `${DevboxReleaseStatusEnum}`
-export type RuntimeType = `${FrameworkTypeEnum}` | `${LanguageTypeEnum}` | `${OSTypeEnum}`
-export type ProtocolType = 'HTTP' | 'GRPC' | 'WS'
+export type DevboxStatusValueType = `${DevboxStatusEnum}`;
+export type DevboxReleaseStatusValueType = `${DevboxReleaseStatusEnum}`;
+export type RuntimeType = `${FrameworkTypeEnum}` | `${LanguageTypeEnum}` | `${OSTypeEnum}`;
+export type ProtocolType = 'HTTP' | 'GRPC' | 'WS';
 
 export interface DevboxEditType {
-  name: string
-  runtimeType: string
-  runtimeVersion: string
-  cpu: number
-  memory: number
+  name: string;
+  runtimeType: string;
+  runtimeVersion: string;
+  cpu: number;
+  memory: number;
   networks: {
-    networkName: string
-    portName: string
-    port: number
-    protocol: ProtocolType
-    openPublicDomain: boolean
-    publicDomain: string // default domain
-    customDomain: string // custom domain
-  }[]
+    networkName: string;
+    portName: string;
+    port: number;
+    protocol: ProtocolType;
+    openPublicDomain: boolean;
+    publicDomain: string; // default domain
+    customDomain: string; // custom domain
+  }[];
 }
 export interface DevboxEditTypeV2 {
-  name: string
-  templateUid: string
-  templateRepositoryUid: string
-  templateConfig: string //json
-  image: string
-  cpu: number
-  memory: number
-  networks: PortInfos
+  name: string;
+  templateUid: string;
+  templateRepositoryUid: string;
+  templateConfig: string; //json
+  image: string;
+  cpu: number;
+  memory: number;
+  networks: PortInfos;
 }
 export interface DevboxStatusMapType {
-  label: string
-  value: DevboxStatusValueType
-  color: string
-  backgroundColor: string
-  dotColor: string
+  label: string;
+  value: DevboxStatusValueType;
+  color: string;
+  backgroundColor: string;
+  dotColor: string;
 }
 export interface DevboxReleaseStatusMapType {
-  label: string
-  value: DevboxReleaseStatusValueType
-  color: string
-  backgroundColor: string
-  dotColor: string
+  label: string;
+  value: DevboxReleaseStatusValueType;
+  color: string;
+  backgroundColor: string;
+  dotColor: string;
 }
 
 export interface DevboxConditionItemType {
-  lastTransitionTime: string
-  message: string
-  observedGeneration: 3
-  reason: string
-  status: 'True' | 'False'
-  type: string
+  lastTransitionTime: string;
+  message: string;
+  observedGeneration: 3;
+  reason: string;
+  status: 'True' | 'False';
+  type: string;
 }
 
 export interface DevboxDetailType extends DevboxEditType {
-  id: string
-  upTime?: string
-  createTime: string
-  isPause?: boolean
-  status: DevboxStatusMapType
-  usedCpu: MonitorDataResult
-  usedMemory: MonitorDataResult
+  id: string;
+  upTime?: string;
+  createTime: string;
+  isPause?: boolean;
+  status: DevboxStatusMapType;
+  usedCpu: MonitorDataResult;
+  usedMemory: MonitorDataResult;
   sshConfig?: {
-    sshUser: string
-    sshDomain: string
-    sshPort: number
-    sshPrivateKey: string
-  }
-  sshPort?: number
-  lastTerminatedReason?: string
+    sshUser: string;
+    sshDomain: string;
+    sshPort: number;
+    sshPrivateKey: string;
+  };
+  sshPort?: number;
+  lastTerminatedReason?: string;
 }
 export interface DevboxDetailTypeV2 extends json2DevboxV2Data {
-  id: string
-  upTime?: string
-  createTime: string
-  isPause?: boolean
-  iconId: string
-  templateName: string
-  templateRepositoryName: string
-  status: DevboxStatusMapType
-  usedCpu: MonitorDataResult
-  usedMemory: MonitorDataResult
+  id: string;
+  upTime?: string;
+  createTime: string;
+  isPause?: boolean;
+  iconId: string;
+  templateName: string;
+  templateRepositoryName: string;
+  status: DevboxStatusMapType;
+  usedCpu: MonitorDataResult;
+  usedMemory: MonitorDataResult;
   sshConfig?: {
-    sshUser: string
-    sshDomain: string
-    sshPort: number
-    sshPrivateKey: string
-  },
-  sshPort?: number
-  lastTerminatedReason?: string
+    sshUser: string;
+    sshDomain: string;
+    sshPort: number;
+    sshPrivateKey: string;
+  };
+  sshPort?: number;
+  lastTerminatedReason?: string;
 }
 export interface NetworkType {
-  networkName: string
-  portName: string
-  port: number
-  protocol: ProtocolType
-  openPublicDomain: boolean
-  publicDomain: string // default domain
-  customDomain: string // custom domain
+  networkName: string;
+  portName: string;
+  port: number;
+  protocol: ProtocolType;
+  openPublicDomain: boolean;
+  publicDomain: string; // default domain
+  customDomain: string; // custom domain
 }
 
 export interface DevboxListItemType {
-  id: string
-  name: string
-  runtimeType: string
-  runtimeVersion: string
-  status: DevboxStatusMapType
-  createTime: string
-  cpu: number
-  memory: number
-  usedCpu: MonitorDataResult
-  usedMemory: MonitorDataResult
-  sshPort: number
-  lastTerminatedReason?: string
+  id: string;
+  name: string;
+  runtimeType: string;
+  runtimeVersion: string;
+  status: DevboxStatusMapType;
+  createTime: string;
+  cpu: number;
+  memory: number;
+  usedCpu: MonitorDataResult;
+  usedMemory: MonitorDataResult;
+  sshPort: number;
+  lastTerminatedReason?: string;
 }
 export interface DevboxListItemTypeV2 {
-  id: string
-  name: string
+  id: string;
+  name: string;
   // templateRepository: object
   template: {
     templateRepository: {
       iconId: string | null;
     };
     uid: string;
-  }
-  status: DevboxStatusMapType
-  createTime: string
-  cpu: number
-  memory: number
-  usedCpu: MonitorDataResult
-  usedMemory: MonitorDataResult
-  sshPort: number
-  lastTerminatedReason?: string
+  };
+  status: DevboxStatusMapType;
+  createTime: string;
+  cpu: number;
+  memory: number;
+  usedCpu: MonitorDataResult;
+  usedMemory: MonitorDataResult;
+  sshPort: number;
+  lastTerminatedReason?: string;
 }
 export interface DevboxVersionListItemType {
-  id: string
-  name: string
-  devboxName: string
-  tag: string
-  createTime: string
-  description: string
-  status: DevboxReleaseStatusMapType
+  id: string;
+  name: string;
+  devboxName: string;
+  tag: string;
+  createTime: string;
+  description: string;
+  status: DevboxReleaseStatusMapType;
 }
 
 export type DevboxPatchPropsType = (
   | { type: 'delete'; kind: `${YamlKindEnum}`; name: string }
   | { type: 'patch'; kind: `${YamlKindEnum}`; value: Record<string, any> }
   | { type: 'create'; kind: `${YamlKindEnum}`; value: string }
-)[]
+)[];
 
 export type DevboxKindsType =
   | V1Deployment
@@ -179,52 +179,51 @@ export type DevboxKindsType =
   | V1Service
   | V1Ingress
   | V1Secret
-  | V1HorizontalPodAutoscaler
+  | V1HorizontalPodAutoscaler;
 
 export interface ValueType {
-  id: string
-  label: string
+  id: string;
+  label: string;
 }
 
 export interface VersionMapType {
-  [key: string]: ValueTypeWithPorts[]
+  [key: string]: ValueTypeWithPorts[];
 }
 
 export interface ValueTypeWithPorts extends ValueType {
-  defaultPorts: number[]
+  defaultPorts: number[];
 }
 
 export interface runtimeNamespaceMapType {
-  [key: string]: string
+  [key: string]: string;
 }
 
 export interface PodStatusMapType {
-  label: string
-  value: `${PodStatusEnum}`
-  color: string
-  reason?: string
-  message?: string
+  label: string;
+  value: `${PodStatusEnum}`;
+  color: string;
+  reason?: string;
+  message?: string;
 }
 
 export interface PodDetailType extends V1Pod {
-  podName: string
-  upTime: string
-  status: PodStatusMapType
-  nodeName: string
-  ip: string
-  restarts: number
-  age: string
-  usedCpu: MonitorDataResult
-  usedMemory: MonitorDataResult
-  cpu: number
-  memory: number
-  podReason?: string
-  podMessage?: string
-  containerStatus: PodStatusMapType
+  podName: string;
+  upTime: string;
+  status: PodStatusMapType;
+  nodeName: string;
+  ip: string;
+  restarts: number;
+  age: string;
+  usedCpu: MonitorDataResult;
+  usedMemory: MonitorDataResult;
+  cpu: number;
+  memory: number;
+  podReason?: string;
+  podMessage?: string;
+  containerStatus: PodStatusMapType;
 }
 
 export interface json2DevboxV2Data extends DevboxEditTypeV2 {
-  templateConfig: string,
-  image: string,
+  templateConfig: string;
+  image: string;
 }
-
diff --git a/frontend/providers/devbox/types/index.d.ts b/frontend/providers/devbox/types/index.d.ts
index 0ed3a6d8cf0b..799f587549d5 100644
--- a/frontend/providers/devbox/types/index.d.ts
+++ b/frontend/providers/devbox/types/index.d.ts
@@ -1,8 +1,8 @@
 export type QueryType = {
-  name: string
-}
+  name: string;
+};
 
 export interface YamlItemType {
-  filename: string
-  value: string
+  filename: string;
+  value: string;
 }
diff --git a/frontend/providers/devbox/types/ingress.d.ts b/frontend/providers/devbox/types/ingress.d.ts
index cddb6a3bba74..ff70c60836d5 100644
--- a/frontend/providers/devbox/types/ingress.d.ts
+++ b/frontend/providers/devbox/types/ingress.d.ts
@@ -1,20 +1,20 @@
-import { ProtocolType } from "./devbox"
+import { ProtocolType } from './devbox';
 
 export interface IngressListItemType {
-  name: string
-  namespace: string
-  address: string
-  port: number
-  protocol: string
+  name: string;
+  namespace: string;
+  address: string;
+  port: number;
+  protocol: string;
 }
 
 export type PortInfos = {
   networkName?: string;
   portName: string;
   port: number;
-  protocol?: ProtocolType; // 
+  protocol?: ProtocolType; //
   openPublicDomain: boolean;
   publicDomain?: string;
   customDomain?: string;
-}[]
-// export type PortInfos = NetworkType[]
\ No newline at end of file
+}[];
+// export type PortInfos = NetworkType[]
diff --git a/frontend/providers/devbox/types/k8s.d.ts b/frontend/providers/devbox/types/k8s.d.ts
index f76768ed883e..081914328775 100644
--- a/frontend/providers/devbox/types/k8s.d.ts
+++ b/frontend/providers/devbox/types/k8s.d.ts
@@ -1,285 +1,285 @@
-import { DevboxStatusEnum } from '@/constants/devbox'
+import { DevboxStatusEnum } from '@/constants/devbox';
 
 export type KBDevboxType = {
-  apiVersion: 'devbox.sealos.io/v1alpha1'
-  kind: 'Devbox'
+  apiVersion: 'devbox.sealos.io/v1alpha1';
+  kind: 'Devbox';
   metadata: {
-    name: string
-    uid: string
-    creationTimestamp: string
-  }
-  spec: KBDevboxSpec
+    name: string;
+    uid: string;
+    creationTimestamp: string;
+  };
+  spec: KBDevboxSpec;
   status: {
     lastState: {
       terminated?: {
-        containerID: string
-        exitCode: number
-        finishedAt: string
-        reason: string // normally is Error if it not null
-        startedAt: string
-      }
-    }
+        containerID: string;
+        exitCode: number;
+        finishedAt: string;
+        reason: string; // normally is Error if it not null
+        startedAt: string;
+      };
+    };
     state: {
       running?: {
-        startedAt: string
-      }
+        startedAt: string;
+      };
       waiting?: {
-        message: string
-        reason: string
-      }
+        message: string;
+        reason: string;
+      };
       terminated?: {
-        containerID: string
-        exitCode: number
-        finishedAt: string
-        reason: string
-        startedAt: string
-      }
-    }
-    phase: 'Pending' | 'Running' | 'Stopped' | 'Stopping' | 'Error' | 'Unknown'
+        containerID: string;
+        exitCode: number;
+        finishedAt: string;
+        reason: string;
+        startedAt: string;
+      };
+    };
+    phase: 'Pending' | 'Running' | 'Stopped' | 'Stopping' | 'Error' | 'Unknown';
     commitHistory: {
-      image: string
-      pod: string
-      status: string
-      time: string
-    }[]
+      image: string;
+      pod: string;
+      status: string;
+      time: string;
+    }[];
     network: {
-      nodePort: number
-      tailnet: string
-      type: 'NodePort' | 'Tailnet'
-    }
-    podPhase: 'Pending' | 'Running' | 'Stopped' | 'Stopping' | 'Error' | 'Delete'
-  }
-}
+      nodePort: number;
+      tailnet: string;
+      type: 'NodePort' | 'Tailnet';
+    };
+    podPhase: 'Pending' | 'Running' | 'Stopped' | 'Stopping' | 'Error' | 'Delete';
+  };
+};
 export type KBDevboxTypeV2 = {
-  apiVersion: 'devbox.sealos.io/v1alpha1'
-  kind: 'Devbox'
+  apiVersion: 'devbox.sealos.io/v1alpha1';
+  kind: 'Devbox';
   metadata: {
-    name: string
-    uid: string
-    creationTimestamp: string
-  }
-  spec: KBDevboxSpecV2
-  status: {
+    name: string;
+    uid: string;
+    creationTimestamp: string;
+  };
+  spec: KBDevboxSpecV2;
+  status?: {
     lastState: {
       terminated?: {
-        containerID: string
-        exitCode: number
-        finishedAt: string
-        reason: string // normally is Error if it not null
-        startedAt: string
-      }
-    }
+        containerID: string;
+        exitCode: number;
+        finishedAt: string;
+        reason: string; // normally is Error if it not null
+        startedAt: string;
+      };
+    };
     state: {
       running?: {
-        startedAt: string
-      }
+        startedAt: string;
+      };
       waiting?: {
-        message: string
-        reason: string
-      }
+        message: string;
+        reason: string;
+      };
       terminated?: {
-        containerID: string
-        exitCode: number
-        finishedAt: string
-        reason: string
-        startedAt: string
-      }
-    }
-    phase: 'Pending' | 'Running' | 'Stopped' | 'Stopping' | 'Error' | 'Unknown'
+        containerID: string;
+        exitCode: number;
+        finishedAt: string;
+        reason: string;
+        startedAt: string;
+      };
+    };
+    phase: 'Pending' | 'Running' | 'Stopped' | 'Stopping' | 'Error' | 'Unknown';
     commitHistory: {
-      image: string
-      pod: string
-      status: string
-      time: string
-    }[]
+      image: string;
+      pod: string;
+      status: string;
+      time: string;
+    }[];
     network: {
-      nodePort: number
-      tailnet: string
-      type: 'NodePort' | 'Tailnet'
-    }
-    podPhase: 'Pending' | 'Running' | 'Stopped' | 'Stopping' | 'Error' | 'Delete'
-  }
-}
+      nodePort: number;
+      tailnet: string;
+      type: 'NodePort' | 'Tailnet';
+    };
+    podPhase: 'Pending' | 'Running' | 'Stopped' | 'Stopping' | 'Error' | 'Delete';
+  };
+};
 // note: runtimeType is I added by logic in api/getDevboxList/route.ts
 export interface KBDevboxSpec {
-  runtimeType?: string
+  runtimeType?: string;
 
-  squash?: boolean
+  squash?: boolean;
   network: {
-    type: 'NodePort' | 'Tailnet'
+    type: 'NodePort' | 'Tailnet';
     extraPorts: {
       // NOTE: this object is deprecated, will be removed in the future
-      containerPort: number
-      hostPort?: number
-      protocol?: string
-      name?: string
-    }[]
+      containerPort: number;
+      hostPort?: number;
+      protocol?: string;
+      name?: string;
+    }[];
     // next all is added by logic in api/getDevboxList/route.ts
-    networkName?: string
-    port?: string
-    portName?: string
-    protocol?: string
-    openPublicDomain?: boolean
-    publicDomain?: string
-    customDomain?: string
-  }
+    networkName?: string;
+    port?: string;
+    portName?: string;
+    protocol?: string;
+    openPublicDomain?: boolean;
+    publicDomain?: string;
+    customDomain?: string;
+  };
   resource: {
-    cpu: string
-    memory: string
-  }
+    cpu: string;
+    memory: string;
+  };
   runtimeRef: {
-    name: string
-    namespace: string
-  }
-  state: DevboxStatusEnum
+    name: string;
+    namespace: string;
+  };
+  state: DevboxStatusEnum;
   tolerations?: {
-    key: string
-    operator: string
-    effect: string
-  }[]
+    key: string;
+    operator: string;
+    effect: string;
+  }[];
   affinity?: {
     nodeAffinity: {
       requiredDuringSchedulingIgnoredDuringExecution: {
         nodeSelectorTerms: {
           matchExpressions: {
-            key: string
-            operator: string
-          }[]
-        }[]
-      }
-    }
-  }
+            key: string;
+            operator: string;
+          }[];
+        }[];
+      };
+    };
+  };
 }
 export interface KBDevboxSpecV2 {
-  squash?: boolean
-  config: object
-  image: string
-  templateID: string
+  squash?: boolean;
+  config: object;
+  image: string;
+  templateID: string;
   network: {
-    type: 'NodePort' | 'Tailnet'
+    type: 'NodePort' | 'Tailnet';
     extraPorts: {
-      containerPort: number
-      hostPort?: number
-      protocol?: string
-      name?: string
-    }[]
+      containerPort: number;
+      hostPort?: number;
+      protocol?: string;
+      name?: string;
+    }[];
     // next all is added by logic in api/getDevboxList/route.ts
-    networkName?: string
-    port?: string
-    portName?: string
-    protocol?: string
-    openPublicDomain?: boolean
-    publicDomain?: string
-    customDomain?: string
-  }
+    networkName?: string;
+    port?: string;
+    portName?: string;
+    protocol?: string;
+    openPublicDomain?: boolean;
+    publicDomain?: string;
+    customDomain?: string;
+  };
   resource: {
-    cpu: string
-    memory: string
-  }
-  state: DevboxStatusEnum
+    cpu: string;
+    memory: string;
+  };
+  state: DevboxStatusEnum;
   tolerations?: {
-    key: string
-    operator: string
-    effect: string
-  }[]
+    key: string;
+    operator: string;
+    effect: string;
+  }[];
   affinity?: {
     nodeAffinity: {
       requiredDuringSchedulingIgnoredDuringExecution: {
         nodeSelectorTerms: {
           matchExpressions: {
-            key: string
-            operator: string
-          }[]
-        }[]
-      }
-    }
-  }
+            key: string;
+            operator: string;
+          }[];
+        }[];
+      };
+    };
+  };
 }
 export type KBDevboxReleaseType = {
-  apiVersion: 'devbox.sealos.io/v1alpha1'
-  kind: 'DevboxRelease'
+  apiVersion: 'devbox.sealos.io/v1alpha1';
+  kind: 'DevboxRelease';
   metadata: {
-    name: string
-    uid: string
-    creationTimestamp: string,
+    name: string;
+    uid: string;
+    creationTimestamp: string;
     ownerReferences: {
-      apiVersion: string
-      controller: boolean
-      kind: string
-      name: string
-      uid: string
-    }[]
-  }
+      apiVersion: string;
+      controller: boolean;
+      kind: string;
+      name: string;
+      uid: string;
+    }[];
+  };
   spec: {
-    devboxName: string
-    newTag: string
-    notes?:string
-  }
+    devboxName: string;
+    newTag: string;
+    notes?: string;
+  };
   status: {
-    originalImage?: string
-    phase: 'Pending' | 'Success' | 'Failed'
-  }
-}
+    originalImage?: string;
+    phase: 'Pending' | 'Success' | 'Failed';
+  };
+};
 
 export type KBRuntimeType = {
-  apiVersion: 'devbox.sealos.io/v1alpha1'
-  kind: 'Runtime'
+  apiVersion: 'devbox.sealos.io/v1alpha1';
+  kind: 'Runtime';
   metadata: {
-    name: string // go-v1-22-5 name+version
-    namespace: string
-    uid: string
-    creationTimestamp: string
+    name: string; // go-v1-22-5 name+version
+    namespace: string;
+    uid: string;
+    creationTimestamp: string;
     annotations: {
-      'devbox.sealos.io/defaultVersion': boolean
-    }
-  }
+      'devbox.sealos.io/defaultVersion': boolean;
+    };
+  };
   spec: {
-    classRef: string
+    classRef: string;
     config: {
       // appPorts is used to network default expose ports
       appPorts: {
-        name: string // devbox-app-port
-        port: number
-        protocol: string // TCP normally
-      }[]
-      image: string
+        name: string; // devbox-app-port
+        port: number;
+        protocol: string; // TCP normally
+      }[];
+      image: string;
       ports: {
-        containerPort: number
-        name?: string // devbox-ssh-port
-        protocol?: string
-      }[]
-      user: string
-      workingDir: string
-      releaseCommand: string[]
-      releaseArgs: string[]
-    }
-    state: 'active' | 'deprecated' | 'archived' | 'beta'
-    runtimeVersion: string
-    category: string[]
-    description: string
-    version: string
+        containerPort: number;
+        name?: string; // devbox-ssh-port
+        protocol?: string;
+      }[];
+      user: string;
+      workingDir: string;
+      releaseCommand: string[];
+      releaseArgs: string[];
+    };
+    state: 'active' | 'deprecated' | 'archived' | 'beta';
+    runtimeVersion: string;
+    category: string[];
+    description: string;
+    version: string;
     components: {
-      name: string // go
-      kind: string // language
-      version: string // v1.22.5
-    }[]
-    state: string
-    runtimeVersion: string
-  }
-}
+      name: string; // go
+      kind: string; // language
+      version: string; // v1.22.5
+    }[];
+    state: string;
+    runtimeVersion: string;
+  };
+};
 
 export type KBRuntimeClassType = {
-  apiVersion: 'devbox.sealos.io/v1alpha1'
-  kind: 'RuntimeClass'
+  apiVersion: 'devbox.sealos.io/v1alpha1';
+  kind: 'RuntimeClass';
   metadata: {
-    name: string
-    namespace: string
-    uid: string
-    creationTimestamp: string
-  }
+    name: string;
+    namespace: string;
+    uid: string;
+    creationTimestamp: string;
+  };
   spec: {
-    kind: string
-    title: string
-    description: string
-  }
-}
+    kind: string;
+    title: string;
+    description: string;
+  };
+};
diff --git a/frontend/providers/devbox/types/monitor.d.ts b/frontend/providers/devbox/types/monitor.d.ts
index 9c920d3af95c..ae6a163b215b 100644
--- a/frontend/providers/devbox/types/monitor.d.ts
+++ b/frontend/providers/devbox/types/monitor.d.ts
@@ -1,46 +1,46 @@
 export type MonitorDataResult = {
-  name: string
-  xData: number[]
-  yData: string[]
-}
+  name: string;
+  xData: number[];
+  yData: string[];
+};
 
 export type MonitorQueryKey = {
-  cpu: string
-  memory: string
-  disk: string
-  average_memory: string
-  average_cpu: string
-}
+  cpu: string;
+  memory: string;
+  disk: string;
+  average_memory: string;
+  average_cpu: string;
+};
 
 export interface MonitorServiceResult {
-  status: string
+  status: string;
   data: {
-    resultType: string
+    resultType: string;
     result: {
       metric: {
-        app_kubernetes_io_instance: string
-        app_kubernetes_io_managed_by: string
-        app_kubernetes_io_name: string
-        apps_kubeblocks_io_component_name: string
-        datname: string
-        instance: string
-        job: string
-        namespace: string
-        node: string
-        pod: string
-        server: string
-        service: string
-        __name__: string
-        state?: string
-        command?: string
-        database?: string
-        db: string
-        type?: string
-        cmd?: string
-        persistentvolumeclaim?: string
-      }
-      value: [number, string]
-      values: [[number, string]]
-    }[]
-  }
+        app_kubernetes_io_instance: string;
+        app_kubernetes_io_managed_by: string;
+        app_kubernetes_io_name: string;
+        apps_kubeblocks_io_component_name: string;
+        datname: string;
+        instance: string;
+        job: string;
+        namespace: string;
+        node: string;
+        pod: string;
+        server: string;
+        service: string;
+        __name__: string;
+        state?: string;
+        command?: string;
+        database?: string;
+        db: string;
+        type?: string;
+        cmd?: string;
+        persistentvolumeclaim?: string;
+      };
+      value: [number, string];
+      values: [[number, string]];
+    }[];
+  };
 }
diff --git a/frontend/providers/devbox/types/params.ts b/frontend/providers/devbox/types/params.ts
index b9a028e2af04..e082d2a6230e 100644
--- a/frontend/providers/devbox/types/params.ts
+++ b/frontend/providers/devbox/types/params.ts
@@ -9,4 +9,4 @@ export interface TemplateSearchParams {
 export interface TemplateCallbackParams {
   templateId: string;
   [key: string]: string; // 其他可能的参数
-}
\ No newline at end of file
+}
diff --git a/frontend/providers/devbox/types/static.d.ts b/frontend/providers/devbox/types/static.d.ts
index d0c42464020c..a324f33f1f3e 100644
--- a/frontend/providers/devbox/types/static.d.ts
+++ b/frontend/providers/devbox/types/static.d.ts
@@ -1,25 +1,25 @@
 export interface SourcePrice {
-  cpu: number
-  memory: number
-  nodeports: number
+  cpu: number;
+  memory: number;
+  nodeports: number;
 }
 
 export interface Env {
-  sealosDomain: string
-  ingressSecret: string
-  registryAddr: string
-  privacyUrl: string
-  devboxAffinityEnable: string
-  squashEnable: string
-  namespace: string
-  rootRuntimeNamespace: string
-  ingressDomain: string
-  currencySymbol: 'shellCoin' | 'cny' | 'usd'
+  sealosDomain: string;
+  ingressSecret: string;
+  registryAddr: string;
+  privacyUrl: string;
+  devboxAffinityEnable: string;
+  squashEnable: string;
+  namespace: string;
+  rootRuntimeNamespace: string;
+  ingressDomain: string;
+  currencySymbol: 'shellCoin' | 'cny' | 'usd';
 }
 
 export interface RuntimeTypeMap {
-  id: string
-  label: string
+  id: string;
+  label: string;
 }
 
 // RuntimeTypeMap
@@ -30,10 +30,10 @@ export interface RuntimeTypeMap {
 
 export interface RuntimeVersionMap {
   [key: string]: {
-    id: string
-    label: string
-    defaultPorts: number[]
-  }[]
+    id: string;
+    label: string;
+    defaultPorts: number[];
+  }[];
 }
 
 // RuntimeVersionMap
diff --git a/frontend/providers/devbox/types/template.d.ts b/frontend/providers/devbox/types/template.d.ts
index 47fad2252c89..db0649ec87be 100644
--- a/frontend/providers/devbox/types/template.d.ts
+++ b/frontend/providers/devbox/types/template.d.ts
@@ -1,9 +1,9 @@
-import { TemplateRepositoryKind } from "@/prisma/generated/client";
+import { TemplateRepositoryKind } from '@/prisma/generated/client';
 
-export type TemplateRepository  = {
+export type TemplateRepository = {
   uid: string;
   name: string;
   kind: TemplateRepositoryKind;
   iconId: string;
   description: string | null;
-}
\ No newline at end of file
+};
diff --git a/frontend/providers/devbox/types/user.d.ts b/frontend/providers/devbox/types/user.d.ts
index 8e9b1add0c51..df8833e46557 100644
--- a/frontend/providers/devbox/types/user.d.ts
+++ b/frontend/providers/devbox/types/user.d.ts
@@ -1,34 +1,45 @@
 export type OAuthToken = {
-  readonly access_token: string
-  readonly token_type: string
-  readonly refresh_token: string
-  readonly expiry: string
-}
+  readonly access_token: string;
+  readonly token_type: string;
+  readonly refresh_token: string;
+  readonly expiry: string;
+};
 
 export type UserInfo = {
-  readonly id: string
-  readonly name: string
-  readonly avatar: string
-}
+  readonly id: string;
+  readonly name: string;
+  readonly avatar: string;
+};
 
-export type KubeConfig = string
+export type KubeConfig = string;
 
 export type Session = {
-  token?: OAuthToken
-  user: UserInfo
-  kubeconfig: KubeConfig
-}
+  token?: OAuthToken;
+  user: UserInfo;
+  kubeconfig: KubeConfig;
+};
 
-export const sessionKey = 'session'
+export const sessionKey = 'session';
 
 export type userPriceType = {
-  cpu: number
-  memory: number
-  nodeports: number
-}
+  cpu: number;
+  memory: number;
+  nodeports: number;
+};
 
 export type UserQuotaItemType = {
-  type: 'cpu' | 'memory' | 'nodeports'
-  used: number
-  limit: number
-}
+  type: 'cpu' | 'memory' | 'nodeports';
+  used: number;
+  limit: number;
+};
+
+export type UserTask = {
+  id: string;
+  title: string;
+  description: string;
+  reward: string;
+  order: number;
+  taskType: TaskType;
+  isCompleted: boolean;
+  completedAt: string;
+};
diff --git a/frontend/providers/devbox/utils/adapt.ts b/frontend/providers/devbox/utils/adapt.ts
index e4c1b0ef556d..23157ce7a36b 100644
--- a/frontend/providers/devbox/utils/adapt.ts
+++ b/frontend/providers/devbox/utils/adapt.ts
@@ -1,28 +1,27 @@
-import dayjs from 'dayjs'
+import dayjs from 'dayjs';
 
 import {
   devboxReleaseStatusMap,
   devboxStatusMap,
   PodStatusEnum,
   podStatusMap
-} from '@/constants/devbox'
-import { GetDevboxByNameReturn } from '@/types/adapt'
-import { DBListItemType, KbPgClusterType } from '@/types/cluster'
+} from '@/constants/devbox';
+import { GetDevboxByNameReturn } from '@/types/adapt';
+import { DBListItemType, KbPgClusterType } from '@/types/cluster';
 import {
-  DevboxDetailType,
   DevboxDetailTypeV2,
   DevboxListItemType,
   DevboxListItemTypeV2,
   DevboxVersionListItemType,
   PodDetailType
-} from '@/types/devbox'
+} from '@/types/devbox';
 
-import { AppListItemType } from '@/types/app'
-import { IngressListItemType } from '@/types/ingress'
-import { V1Deployment, V1Ingress, V1Pod, V1StatefulSet } from '@kubernetes/client-node'
+import { AppListItemType } from '@/types/app';
+import { IngressListItemType } from '@/types/ingress';
+import { V1Deployment, V1Ingress, V1Pod, V1StatefulSet } from '@kubernetes/client-node';
 
-import { KBDevboxReleaseType, KBDevboxType, KBDevboxTypeV2 } from '@/types/k8s'
-import { calculateUptime, cpuFormatToM, formatPodTime, memoryFormatToMi } from '@/utils/tools'
+import { KBDevboxReleaseType, KBDevboxType, KBDevboxTypeV2 } from '@/types/k8s';
+import { calculateUptime, cpuFormatToM, formatPodTime, memoryFormatToMi } from '@/utils/tools';
 
 export const adaptDevboxListItem = (devbox: KBDevboxType): DevboxListItemType => {
   return {
@@ -53,27 +52,29 @@ export const adaptDevboxListItem = (devbox: KBDevboxType): DevboxListItemType =>
         ? devbox.status.state.waiting
           ? devbox.status.state.waiting.reason
           : devbox.status.state.terminated
-            ? devbox.status.state.terminated.reason
-            : ''
+          ? devbox.status.state.terminated.reason
+          : ''
         : ''
-  }
-}
-export const adaptDevboxListItemV2 = ([devbox, template]: [KBDevboxTypeV2, {
-  templateRepository: {
-    iconId: string | null;
   };
-  uid: string;
-}
+};
+export const adaptDevboxListItemV2 = ([devbox, template]: [
+  KBDevboxTypeV2,
+  {
+    templateRepository: {
+      iconId: string | null;
+    };
+    uid: string;
+  }
 ]): DevboxListItemTypeV2 => {
   return {
     id: devbox.metadata?.uid || ``,
     name: devbox.metadata.name || 'devbox',
     template,
     status:
-      devbox.status.phase && devboxStatusMap[devbox.status.phase]
+      devbox.status?.phase && devboxStatusMap[devbox.status.phase]
         ? devboxStatusMap[devbox.status.phase]
         : devboxStatusMap.Error,
-    sshPort: devbox.status.network.nodePort,
+    sshPort: devbox.status?.network.nodePort || 65535,
     createTime: dayjs(devbox.metadata.creationTimestamp).format('YYYY/MM/DD HH:mm'),
     cpu: cpuFormatToM(devbox.spec.resource.cpu),
     memory: memoryFormatToMi(devbox.spec.resource.memory),
@@ -87,61 +88,28 @@ export const adaptDevboxListItemV2 = ([devbox, template]: [KBDevboxTypeV2, {
       xData: new Array(30).fill(0),
       yData: new Array(30).fill('0')
     },
-    lastTerminatedReason:
-      devbox.status.lastState?.terminated && devbox.status.lastState.terminated.reason === 'Error'
-        ? devbox.status.state.waiting
-          ? devbox.status.state.waiting.reason
-          : devbox.status.state.terminated
-            ? devbox.status.state.terminated.reason
-            : ''
-        : ''
-  }
-}
-export const adaptDevboxDetail = (
-  devbox: KBDevboxType & { portInfos: any[] }
-): DevboxDetailType => {
-  return {
-    id: devbox.metadata?.uid || ``,
-    name: devbox.metadata.name || 'devbox',
-    runtimeType: devbox.spec.runtimeType || '',
-    runtimeVersion: devbox.spec.runtimeRef.name || '',
-    status:
-      devbox.status.phase && devboxStatusMap[devbox.status.phase]
-        ? devboxStatusMap[devbox.status.phase]
-        : devboxStatusMap.Error,
-    sshPort: devbox.status.network.nodePort,
-    isPause: devbox.status.phase === 'Stopped',
-    createTime: dayjs(devbox.metadata.creationTimestamp).format('YYYY-MM-DD HH:mm'),
-    cpu: cpuFormatToM(devbox.spec.resource.cpu),
-    memory: memoryFormatToMi(devbox.spec.resource.memory),
-    usedCpu: {
-      name: '',
-      xData: new Array(30).fill(0),
-      yData: new Array(30).fill('0')
-    },
-    usedMemory: {
-      name: '',
-      xData: new Array(30).fill(0),
-      yData: new Array(30).fill('0')
-    },
-    networks: devbox.portInfos,
-    lastTerminatedReason:
-      devbox.status.lastState?.terminated && devbox.status.lastState.terminated.reason === 'Error'
+    lastTerminatedReason: devbox.status
+      ? devbox.status.lastState?.terminated && devbox.status.lastState.terminated.reason === 'Error'
         ? devbox.status.state.waiting
           ? devbox.status.state.waiting.reason
           : devbox.status.state.terminated
-            ? devbox.status.state.terminated.reason
-            : ''
+          ? devbox.status.state.terminated.reason
+          : ''
         : ''
-  }
-}
-export const adaptDevboxDetailV2 = (
-  [devbox, portInfos, template]: GetDevboxByNameReturn
-): DevboxDetailTypeV2 => {
-  console.log('adaptDevboxDetailV2')
-  const status =       devbox.status.phase && devboxStatusMap[devbox.status.phase]
-  ? devboxStatusMap[devbox.status.phase]
-  : devboxStatusMap.Error
+      : ''
+  };
+};
+
+export const adaptDevboxDetailV2 = ([
+  devbox,
+  portInfos,
+  template
+]: GetDevboxByNameReturn): DevboxDetailTypeV2 => {
+  console.log('adaptDevboxDetailV2');
+  const status =
+    devbox.status?.phase && devboxStatusMap[devbox.status.phase]
+      ? devboxStatusMap[devbox.status.phase]
+      : devboxStatusMap.Error;
   return {
     id: devbox.metadata?.uid || ``,
     name: devbox.metadata.name || 'devbox',
@@ -153,8 +121,8 @@ export const adaptDevboxDetailV2 = (
     image: template.image,
     iconId: template.templateRepository.iconId || '',
     status,
-    sshPort: devbox.status.network.nodePort,
-    isPause: devbox.status.phase === 'Stopped',
+    sshPort: devbox.status?.network.nodePort || 65535,
+    isPause: devbox.status?.phase === 'Stopped',
     createTime: dayjs(devbox.metadata.creationTimestamp).format('YYYY-MM-DD HH:mm'),
     cpu: cpuFormatToM(devbox.spec.resource.cpu),
     memory: memoryFormatToMi(devbox.spec.resource.memory),
@@ -169,16 +137,17 @@ export const adaptDevboxDetailV2 = (
       yData: new Array(30).fill('0')
     },
     networks: portInfos || [],
-    lastTerminatedReason:
-      devbox.status.lastState?.terminated && devbox.status.lastState.terminated.reason === 'Error'
+    lastTerminatedReason: devbox.status
+      ? devbox.status.lastState?.terminated && devbox.status.lastState.terminated.reason === 'Error'
         ? devbox.status.state.waiting
           ? devbox.status.state.waiting.reason
           : devbox.status.state.terminated
-            ? devbox.status.state.terminated.reason
-            : ''
+          ? devbox.status.state.terminated.reason
+          : ''
         : ''
-  }
-}
+      : ''
+  };
+};
 export const adaptDevboxVersionListItem = (
   devboxRelease: KBDevboxReleaseType
 ): DevboxVersionListItemType => {
@@ -193,8 +162,8 @@ export const adaptDevboxVersionListItem = (
         ? devboxReleaseStatusMap[devboxRelease.status.phase]
         : devboxReleaseStatusMap.Failed,
     description: devboxRelease.spec.notes || 'release notes'
-  }
-}
+  };
+};
 export const adaptDevboxVersionListItemV2 = (
   devboxRelease: KBDevboxReleaseType
 ): DevboxVersionListItemType => {
@@ -209,8 +178,8 @@ export const adaptDevboxVersionListItemV2 = (
         ? devboxReleaseStatusMap[devboxRelease.status.phase]
         : devboxReleaseStatusMap.Failed,
     description: devboxRelease.spec.notes || 'release notes'
-  }
-}
+  };
+};
 
 export const adaptPod = (pod: V1Pod): PodDetailType => {
   return {
@@ -218,41 +187,41 @@ export const adaptPod = (pod: V1Pod): PodDetailType => {
     podName: pod.metadata?.name || 'pod name',
     upTime: calculateUptime(pod.metadata?.creationTimestamp || new Date()),
     status: (() => {
-      const container = pod.status?.containerStatuses || []
+      const container = pod.status?.containerStatuses || [];
       if (container.length > 0) {
-        const stateObj = container[0].state
+        const stateObj = container[0].state;
         if (stateObj) {
-          const stateKeys = Object.keys(stateObj)
-          const key = stateKeys[0] as `${PodStatusEnum}`
+          const stateKeys = Object.keys(stateObj);
+          const key = stateKeys[0] as `${PodStatusEnum}`;
           if (key === PodStatusEnum.running) {
-            return podStatusMap[PodStatusEnum.running]
+            return podStatusMap[PodStatusEnum.running];
           }
           if (key && podStatusMap[key]) {
             return {
               ...podStatusMap[key],
               ...stateObj[key]
-            }
+            };
           }
         }
       }
-      return podStatusMap.waiting
+      return podStatusMap.waiting;
     })(),
     containerStatus: (() => {
-      const container = pod.status?.containerStatuses || []
+      const container = pod.status?.containerStatuses || [];
       if (container.length > 0) {
-        const lastStateObj = container[0].lastState
+        const lastStateObj = container[0].lastState;
         if (lastStateObj) {
-          const lastStateKeys = Object.keys(lastStateObj)
-          const key = lastStateKeys[0] as `${PodStatusEnum}`
+          const lastStateKeys = Object.keys(lastStateObj);
+          const key = lastStateKeys[0] as `${PodStatusEnum}`;
           if (key && podStatusMap[key]) {
             return {
               ...podStatusMap[key],
               ...lastStateObj[key]
-            }
+            };
           }
         }
       }
-      return podStatusMap.waiting
+      return podStatusMap.waiting;
     })(),
     nodeName: pod.spec?.nodeName || 'node name',
     ip: pod.status?.podIP || 'pod ip',
@@ -270,8 +239,8 @@ export const adaptPod = (pod: V1Pod): PodDetailType => {
     },
     cpu: cpuFormatToM(pod.spec?.containers?.[0]?.resources?.limits?.cpu || '0'),
     memory: memoryFormatToMi(pod.spec?.containers?.[0]?.resources?.limits?.memory || '0')
-  }
-}
+  };
+};
 
 export const adaptDBListItem = (db: KbPgClusterType): DBListItemType => {
   return {
@@ -284,21 +253,21 @@ export const adaptDBListItem = (db: KbPgClusterType): DBListItemType => {
     storage:
       db.spec?.componentSpecs?.[0]?.volumeClaimTemplates?.[0]?.spec?.resources?.requests?.storage ||
       '-'
-  }
-}
+  };
+};
 
 export const adaptIngressListItem = (ingress: V1Ingress): IngressListItemType => {
-  const firstRule = ingress.spec?.rules?.[0]
-  const firstPath = firstRule?.http?.paths?.[0]
-  const protocol = ingress.metadata?.annotations?.['nginx.ingress.kubernetes.io/backend-protocol']
+  const firstRule = ingress.spec?.rules?.[0];
+  const firstPath = firstRule?.http?.paths?.[0];
+  const protocol = ingress.metadata?.annotations?.['nginx.ingress.kubernetes.io/backend-protocol'];
   return {
     name: ingress.metadata?.name || '',
     namespace: ingress.metadata?.namespace || '',
     address: firstRule?.host || '',
     port: firstPath?.backend?.service?.port?.number || 0,
     protocol: protocol || 'http'
-  }
-}
+  };
+};
 
 export const adaptAppListItem = (app: V1Deployment & V1StatefulSet): AppListItemType => {
   return {
@@ -309,5 +278,5 @@ export const adaptAppListItem = (app: V1Deployment & V1StatefulSet): AppListItem
       app?.metadata?.annotations?.originImageName ||
       app.spec?.template?.spec?.containers?.[0]?.image ||
       ''
-  }
-}
+  };
+};
diff --git a/frontend/providers/devbox/utils/cookie.ts b/frontend/providers/devbox/utils/cookie.ts
index 043c1ad2383d..be69f2aaf0aa 100644
--- a/frontend/providers/devbox/utils/cookie.ts
+++ b/frontend/providers/devbox/utils/cookie.ts
@@ -1,15 +1,15 @@
-import Cookies from 'js-cookie'
+import Cookies from 'js-cookie';
 
-export const LANG_KEY = 'NEXT_LOCALE'
+export const LANG_KEY = 'NEXT_LOCALE';
 
 export const setLangStore = (value: string) => {
-  return Cookies.set(LANG_KEY, value, { expires: 30, sameSite: 'None', secure: true })
-}
+  return Cookies.set(LANG_KEY, value, { expires: 30, sameSite: 'None', secure: true });
+};
 
 export const getLangStore = () => {
-  return Cookies.get(LANG_KEY)
-}
+  return Cookies.get(LANG_KEY);
+};
 
 export const removeLangStore = () => {
-  Cookies.remove(LANG_KEY)
-}
+  Cookies.remove(LANG_KEY);
+};
diff --git a/frontend/providers/devbox/utils/env.ts b/frontend/providers/devbox/utils/env.ts
new file mode 100644
index 000000000000..3101f1406518
--- /dev/null
+++ b/frontend/providers/devbox/utils/env.ts
@@ -0,0 +1 @@
+export const getRegionUid = () => process.env.REGION_UID || '';
diff --git a/frontend/providers/devbox/utils/json2Yaml.ts b/frontend/providers/devbox/utils/json2Yaml.ts
index 73a68ec242c8..6cca3ad62327 100644
--- a/frontend/providers/devbox/utils/json2Yaml.ts
+++ b/frontend/providers/devbox/utils/json2Yaml.ts
@@ -1,10 +1,16 @@
-import yaml from 'js-yaml'
+import yaml from 'js-yaml';
 
-import { devboxKey, publicDomainKey } from '@/constants/devbox'
-import { DevboxEditType, DevboxEditTypeV2, json2DevboxV2Data, ProtocolType, runtimeNamespaceMapType } from '@/types/devbox'
-import { produce } from 'immer'
-import { parseTemplateConfig, str2Num } from './tools'
-import { getUserNamespace } from './user'
+import { devboxKey, publicDomainKey } from '@/constants/devbox';
+import {
+  DevboxEditType,
+  DevboxEditTypeV2,
+  json2DevboxV2Data,
+  ProtocolType,
+  runtimeNamespaceMapType
+} from '@/types/devbox';
+import { produce } from 'immer';
+import { parseTemplateConfig, str2Num } from './tools';
+import { getUserNamespace } from './user';
 
 export const json2Devbox = (
   data: DevboxEditType,
@@ -13,7 +19,7 @@ export const json2Devbox = (
   squashEnable: string = 'false'
 ) => {
   // runtimeNamespace inject
-  const runtimeNamespace = runtimeNamespaceMap[data.runtimeVersion]
+  const runtimeNamespace = runtimeNamespaceMap[data.runtimeVersion];
 
   let json: any = {
     apiVersion: 'devbox.sealos.io/v1alpha1',
@@ -39,7 +45,7 @@ export const json2Devbox = (
       },
       state: 'Running'
     }
-  }
+  };
   if (devboxAffinityEnable === 'true') {
     json.spec.tolerations = [
       {
@@ -47,7 +53,7 @@ export const json2Devbox = (
         operator: 'Exists',
         effect: 'NoSchedule'
       }
-    ]
+    ];
     json.spec.affinity = {
       nodeAffinity: {
         requiredDuringSchedulingIgnoredDuringExecution: {
@@ -63,10 +69,10 @@ export const json2Devbox = (
           ]
         }
       }
-    }
+    };
   }
-  return yaml.dump(json)
-}
+  return yaml.dump(json);
+};
 export const json2DevboxV2 = (
   data: json2DevboxV2Data,
   devboxAffinityEnable: string = 'true',
@@ -92,17 +98,17 @@ export const json2DevboxV2 = (
       },
       templateID: data.templateUid,
       image: data.image,
-      config: produce(parseTemplateConfig(data.templateConfig), draft=>{
+      config: produce(parseTemplateConfig(data.templateConfig), (draft) => {
         draft.appPorts = data.networks.map((item) => ({
           port: str2Num(item.port),
           name: item.portName,
           protocol: 'TCP',
           targetPort: str2Num(item.port)
-        }))
+        }));
       }),
       state: 'Running'
     }
-  }
+  };
   if (devboxAffinityEnable === 'true') {
     json.spec.tolerations = [
       {
@@ -110,7 +116,7 @@ export const json2DevboxV2 = (
         operator: 'Exists',
         effect: 'NoSchedule'
       }
-    ]
+    ];
     json.spec.affinity = {
       nodeAffinity: {
         requiredDuringSchedulingIgnoredDuringExecution: {
@@ -126,16 +132,16 @@ export const json2DevboxV2 = (
           ]
         }
       }
-    }
+    };
   }
-  return yaml.dump(json)
-}
+  return yaml.dump(json);
+};
 export const json2StartOrStop = ({
   devboxName,
   type
 }: {
-  devboxName: string
-  type: 'Paused' | 'Running'
+  devboxName: string;
+  type: 'Paused' | 'Running';
 }) => {
   const json = {
     apiVersion: 'devbox.sealos.io/v1alpha1',
@@ -146,17 +152,17 @@ export const json2StartOrStop = ({
     spec: {
       state: type
     }
-  }
-  return yaml.dump(json)
-}
+  };
+  return yaml.dump(json);
+};
 export const getDevboxReleaseName = (devboxName: string, tag: string) => {
-  return `${devboxName}-${tag}`
-}
+  return `${devboxName}-${tag}`;
+};
 export const json2DevboxRelease = (data: {
-  devboxName: string
-  tag: string
-  releaseDes: string
-  devboxUid: string
+  devboxName: string;
+  tag: string;
+  releaseDes: string;
+  devboxUid: string;
 }) => {
   const json = {
     apiVersion: 'devbox.sealos.io/v1alpha1',
@@ -179,11 +185,14 @@ export const json2DevboxRelease = (data: {
       newTag: data.tag,
       notes: data.releaseDes
     }
-  }
-  return yaml.dump(json)
-}
+  };
+  return yaml.dump(json);
+};
 
-export const json2Ingress = (data: Pick<DevboxEditTypeV2, 'name'|'networks'>, ingressSecret: string) => {
+export const json2Ingress = (
+  data: Pick<DevboxEditTypeV2, 'name' | 'networks'>,
+  ingressSecret: string
+) => {
   // different protocol annotations
   const map = {
     HTTP: {
@@ -205,15 +214,15 @@ export const json2Ingress = (data: Pick<DevboxEditTypeV2, 'name'|'networks'>, in
       'nginx.ingress.kubernetes.io/proxy-send-timeout': '3600',
       'nginx.ingress.kubernetes.io/backend-protocol': 'WS'
     }
-  }
+  };
 
   const result = data.networks
     .filter((item) => item.openPublicDomain)
     .map((network, i) => {
-      const host = network.customDomain ? network.customDomain : network.publicDomain
+      const host = network.customDomain ? network.customDomain : network.publicDomain;
 
-      const secretName = network.customDomain ? network.networkName : ingressSecret
-      const protocol = network.protocol
+      const secretName = network.customDomain ? network.networkName : ingressSecret;
+      const protocol = network.protocol;
       const ingress = {
         apiVersion: 'networking.k8s.io/v1',
         kind: 'Ingress',
@@ -226,7 +235,7 @@ export const json2Ingress = (data: Pick<DevboxEditTypeV2, 'name'|'networks'>, in
           annotations: {
             'kubernetes.io/ingress.class': 'nginx',
             'nginx.ingress.kubernetes.io/proxy-body-size': '32m',
-            ...map[network.protocol as ProtocolType || 'HTTP']
+            ...map[(network.protocol as ProtocolType) || 'HTTP']
           }
         },
         spec: {
@@ -258,7 +267,7 @@ export const json2Ingress = (data: Pick<DevboxEditTypeV2, 'name'|'networks'>, in
             }
           ]
         }
-      }
+      };
       const issuer = {
         apiVersion: 'cert-manager.io/v1',
         kind: 'Issuer',
@@ -287,7 +296,7 @@ export const json2Ingress = (data: Pick<DevboxEditTypeV2, 'name'|'networks'>, in
             ]
           }
         }
-      }
+      };
       const certificate = {
         apiVersion: 'cert-manager.io/v1',
         kind: 'Certificate',
@@ -305,20 +314,20 @@ export const json2Ingress = (data: Pick<DevboxEditTypeV2, 'name'|'networks'>, in
             kind: 'Issuer'
           }
         }
-      }
+      };
 
-      let resYaml = yaml.dump(ingress)
+      let resYaml = yaml.dump(ingress);
       if (network.customDomain) {
-        resYaml += `\n---\n${yaml.dump(issuer)}\n---\n${yaml.dump(certificate)}`
+        resYaml += `\n---\n${yaml.dump(issuer)}\n---\n${yaml.dump(certificate)}`;
       }
-      return resYaml
-    })
+      return resYaml;
+    });
 
-  return result.join('\n---\n')
-}
-export const json2Service = (data: Pick<DevboxEditTypeV2, 'name'|'networks'>) => {
+  return result.join('\n---\n');
+};
+export const json2Service = (data: Pick<DevboxEditTypeV2, 'name' | 'networks'>) => {
   if (data.networks.length === 0) {
-    return ''
+    return '';
   }
   const template = {
     apiVersion: 'v1',
@@ -341,9 +350,9 @@ export const json2Service = (data: Pick<DevboxEditTypeV2, 'name'|'networks'>) =>
         ['app.kubernetes.io/managed-by']: 'sealos'
       }
     }
-  }
-  return yaml.dump(template)
-}
+  };
+  return yaml.dump(template);
+};
 export const limitRangeYaml = `
 apiVersion: v1
 kind: LimitRange
@@ -355,12 +364,15 @@ spec:
         cpu: 50m
         memory: 64Mi
       type: Container
-`
-export const generateYamlList = (data: json2DevboxV2Data, env: {
-  devboxAffinityEnable?: string,
-  squashEnable?: string,
-  ingressSecret: string
-}) => {
+`;
+export const generateYamlList = (
+  data: json2DevboxV2Data,
+  env: {
+    devboxAffinityEnable?: string;
+    squashEnable?: string;
+    ingressSecret: string;
+  }
+) => {
   return [
     {
       filename: 'devbox.yaml',
@@ -368,19 +380,19 @@ export const generateYamlList = (data: json2DevboxV2Data, env: {
     },
     ...(data.networks.length > 0
       ? [
-        {
-          filename: 'service.yaml',
-          value: json2Service(data)
-        }
-      ]
+          {
+            filename: 'service.yaml',
+            value: json2Service(data)
+          }
+        ]
       : []),
     ...(data.networks.find((item) => item.openPublicDomain)
       ? [
-        {
-          filename: 'ingress.yaml',
-          value: json2Ingress(data, env.ingressSecret)
-        }
-      ]
+          {
+            filename: 'ingress.yaml',
+            value: json2Ingress(data, env.ingressSecret)
+          }
+        ]
       : [])
-  ]
-}
\ No newline at end of file
+  ];
+};
diff --git a/frontend/providers/devbox/utils/tools.ts b/frontend/providers/devbox/utils/tools.ts
index ff8d534b3c07..e06d909f7d48 100644
--- a/frontend/providers/devbox/utils/tools.ts
+++ b/frontend/providers/devbox/utils/tools.ts
@@ -1,129 +1,142 @@
-import { useMessage } from '@sealos/ui'
-import dayjs from 'dayjs'
-import duration from 'dayjs/plugin/duration'
-import * as jsonpatch from 'fast-json-patch'
-import yaml from 'js-yaml'
-import { useTranslations } from 'next-intl'
+import { useMessage } from '@sealos/ui';
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import * as jsonpatch from 'fast-json-patch';
+import yaml from 'js-yaml';
+import { useTranslations } from 'next-intl';
 
-import { YamlKindEnum } from '@/constants/devbox'
-import type { DevboxKindsType, DevboxPatchPropsType } from '@/types/devbox'
-import { customAlphabet } from 'nanoid'
+import { YamlKindEnum } from '@/constants/devbox';
+import type { DevboxKindsType, DevboxPatchPropsType } from '@/types/devbox';
+import { customAlphabet } from 'nanoid';
 
-dayjs.extend(duration)
+dayjs.extend(duration);
 
 export const cpuFormatToM = (cpu = '0') => {
   if (!cpu || cpu === '0') {
-    return 0
+    return 0;
   }
-  let value = parseFloat(cpu)
+  let value = parseFloat(cpu);
 
   if (/n/gi.test(cpu)) {
-    value = value / 1000 / 1000
+    value = value / 1000 / 1000;
   } else if (/u/gi.test(cpu)) {
-    value = value / 1000
+    value = value / 1000;
   } else if (/m/gi.test(cpu)) {
-    value = value
+    value = value;
   } else {
-    value = value * 1000
+    value = value * 1000;
   }
   if (value < 0.1) {
-    return 0
+    return 0;
   }
-  return Number(value.toFixed(4))
-}
+  return Number(value.toFixed(4));
+};
 
 export const memoryFormatToMi = (memory = '0') => {
   if (!memory || memory === '0') {
-    return 0
+    return 0;
   }
 
-  let value = parseFloat(memory)
+  let value = parseFloat(memory);
 
   if (/Ki/gi.test(memory)) {
-    value = value / 1024
+    value = value / 1024;
   } else if (/Mi/gi.test(memory)) {
-    value = value
+    value = value;
   } else if (/Gi/gi.test(memory)) {
-    value = value * 1024
+    value = value * 1024;
   } else if (/Ti/gi.test(memory)) {
-    value = value * 1024 * 1024
+    value = value * 1024 * 1024;
   } else {
-    console.log('Invalid memory value')
-    value = 0
+    console.log('Invalid memory value');
+    value = 0;
   }
 
-  return Number(value.toFixed(2))
-}
+  return Number(value.toFixed(2));
+};
 
 export const storageFormatToNum = (storage = '0') => {
-  return +`${storage.replace(/gi/i, '')}`
-}
+  return +`${storage.replace(/gi/i, '')}`;
+};
 
 export const printMemory = (val: number) => {
-  return val >= 1024 ? `${Math.round(val / 1024)} Gi` : `${val} Mi`
-}
+  return val >= 1024 ? `${Math.round(val / 1024)} Gi` : `${val} Mi`;
+};
 
 export function downLoadBlob(content: BlobPart, type: string, fileName: string) {
-  const blob = new Blob([content], { type })
+  const blob = new Blob([content], { type });
 
-  const url = URL.createObjectURL(blob)
+  const url = URL.createObjectURL(blob);
 
-  const link = document.createElement('a')
-  link.href = url
-  link.download = fileName
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = fileName;
 
-  link.click()
+  link.click();
 }
 
 export const obj2Query = (obj: Record<string, string | number>) => {
-  let str = ''
+  let str = '';
   Object.entries(obj).forEach(([key, val]) => {
     if (val) {
-      str += `${key}=${val}&`
+      str += `${key}=${val}&`;
     }
-  })
+  });
 
-  return str.slice(0, str.length - 1)
-}
+  return str.slice(0, str.length - 1);
+};
 
 export const useCopyData = () => {
-  const { message: toast } = useMessage()
-  const t = useTranslations()
+  const { message: toast } = useMessage();
+  const t = useTranslations();
 
   return {
-    copyData: (data: string, title: string = 'copy_success') => {
+    copyData: async (data: string, title: string = 'copy_success') => {
       try {
-        const textarea = document.createElement('textarea')
-        textarea.value = data
-        document.body.appendChild(textarea)
-        textarea.select()
-        document.execCommand('copy')
-        document.body.removeChild(textarea)
+        await navigator.clipboard.writeText(data);
+
         toast({
           title: t(title),
           status: 'success',
           duration: 1000
-        })
+        });
       } catch (error) {
-        console.error(error)
-        toast({
-          title: t('copy_failed'),
-          status: 'error'
-        })
+        try {
+          const textarea = document.createElement('textarea');
+          textarea.value = data;
+          textarea.style.position = 'fixed';
+          textarea.style.opacity = '0';
+          document.body.appendChild(textarea);
+          textarea.select();
+          document.execCommand('copy');
+          document.body.removeChild(textarea);
+
+          toast({
+            title: t(title),
+            status: 'success',
+            duration: 1000
+          });
+        } catch (fallbackError) {
+          console.error('Copy failed:', fallbackError);
+          toast({
+            title: t('copy_failed'),
+            status: 'error'
+          });
+        }
       }
     }
-  }
-}
+  };
+};
 
 export const str2Num = (str?: string | number) => {
-  return !!str ? +str : 0
-}
+  return !!str ? +str : 0;
+};
 
 export const getErrText = (err: any, def = '') => {
-  const msg: string = typeof err === 'string' ? err : err?.message || def || ''
-  msg && console.log('error =>', msg)
-  return msg
-}
+  const msg: string = typeof err === 'string' ? err : err?.message || def || '';
+  msg && console.log('error =>', msg);
+  return msg;
+};
 
 /**
  * patch yamlList and get action
@@ -131,48 +144,48 @@ export const getErrText = (err: any, def = '') => {
 export const patchYamlList = ({
   parsedOldYamlList,
   parsedNewYamlList,
-  originalYamlList,
+  originalYamlList
 }: {
-  parsedOldYamlList: string[]
-  parsedNewYamlList: string[]
-  originalYamlList: DevboxKindsType[],
+  parsedOldYamlList: string[];
+  parsedNewYamlList: string[];
+  originalYamlList: DevboxKindsType[];
 }) => {
   const oldFormJsonList = parsedOldYamlList
     .map((item) => yaml.loadAll(item))
-    .flat() as DevboxKindsType[]
+    .flat() as DevboxKindsType[];
 
   const newFormJsonList = parsedNewYamlList
     .map((item) => yaml.loadAll(item))
-    .flat() as DevboxKindsType[]
+    .flat() as DevboxKindsType[];
 
-  const actions: DevboxPatchPropsType = []
+  const actions: DevboxPatchPropsType = [];
 
   // find delete
   oldFormJsonList.forEach((oldYamlJson) => {
     const item = newFormJsonList.find(
       (item) => item.kind === oldYamlJson.kind && item.metadata?.name === oldYamlJson.metadata?.name
-    )
+    );
     if (!item && oldYamlJson.metadata?.name) {
       actions.push({
         type: 'delete',
         kind: oldYamlJson.kind as `${YamlKindEnum}`,
         name: oldYamlJson.metadata?.name
-      })
+      });
     }
-  })
+  });
 
   // find create and patch
   newFormJsonList.forEach((newYamlJson) => {
     const oldFormJson = oldFormJsonList.find(
       (item) =>
         item.kind === newYamlJson.kind && item?.metadata?.name === newYamlJson?.metadata?.name
-    )
+    );
 
     if (oldFormJson) {
-      const patchRes = jsonpatch.compare(oldFormJson, newYamlJson)
+      const patchRes = jsonpatch.compare(oldFormJson, newYamlJson);
 
       if (patchRes.length === 0) {
-        return
+        return;
       }
 
       /* Generate a new json using the formPatchResult and the crJson */
@@ -183,21 +196,21 @@ export const patchYamlList = ({
             (item) =>
               item.kind === oldFormJson?.kind &&
               item?.metadata?.name === oldFormJson?.metadata?.name
-          )
+          );
 
           if (!crOldYamlJson) {
-            return newYamlJson
+            return newYamlJson;
           }
-          crOldYamlJson = JSON.parse(JSON.stringify(crOldYamlJson))
+          crOldYamlJson = JSON.parse(JSON.stringify(crOldYamlJson));
 
           if (!crOldYamlJson) {
-            return newYamlJson
+            return newYamlJson;
           }
 
           /* generate new json */
           const _patchRes: jsonpatch.Operation[] = patchRes
             .map((item) => {
-              let jsonPatchError = jsonpatch.validate([item], crOldYamlJson)
+              let jsonPatchError = jsonpatch.validate([item], crOldYamlJson);
               if (jsonPatchError?.name === 'OPERATION_PATH_UNRESOLVABLE') {
                 switch (item.op) {
                   case 'add':
@@ -206,20 +219,20 @@ export const patchYamlList = ({
                       ...item,
                       op: 'add' as const,
                       value: item.value ?? ''
-                    }
+                    };
                   default:
-                    return null
+                    return null;
                 }
               }
-              return item
+              return item;
             })
-            .filter((op): op is jsonpatch.Operation => op !== null)
+            .filter((op): op is jsonpatch.Operation => op !== null);
 
-          const patchResYamlJson = jsonpatch.applyPatch(crOldYamlJson, _patchRes, true).newDocument
+          const patchResYamlJson = jsonpatch.applyPatch(crOldYamlJson, _patchRes, true).newDocument;
 
           // delete invalid field
           // @ts-ignore
-          delete patchResYamlJson.status
+          delete patchResYamlJson.status;
           patchResYamlJson.metadata = {
             name: patchResYamlJson.metadata?.name,
             namespace: patchResYamlJson.metadata?.namespace,
@@ -227,23 +240,23 @@ export const patchYamlList = ({
             annotations: patchResYamlJson.metadata?.annotations,
             ownerReferences: patchResYamlJson.metadata?.ownerReferences,
             finalizers: patchResYamlJson.metadata?.finalizers
-          }
+          };
 
-          return patchResYamlJson
+          return patchResYamlJson;
         } catch (error) {
-          console.error('ACTIONS JSON ERROR:\n', error)
-          return newYamlJson
+          console.error('ACTIONS JSON ERROR:\n', error);
+          return newYamlJson;
         }
-      })()
+      })();
 
       if (actionsJson.kind === YamlKindEnum.Service) {
         // @ts-ignore
-        const ports = actionsJson?.spec.ports || []
+        const ports = actionsJson?.spec.ports || [];
 
         // @ts-ignore
         if (ports.length > 1 && !ports[0]?.name) {
           // @ts-ignore
-          actionsJson.spec.ports[0].name = 'adaptport'
+          actionsJson.spec.ports[0].name = 'adaptport';
         }
       }
 
@@ -251,103 +264,107 @@ export const patchYamlList = ({
         type: 'patch',
         kind: newYamlJson.kind as `${YamlKindEnum}`,
         value: actionsJson as any
-      })
+      });
     } else {
       actions.push({
         type: 'create',
         kind: newYamlJson.kind as `${YamlKindEnum}`,
         value: yaml.dump(newYamlJson)
-      })
+      });
     }
-  })
+  });
 
-  return actions
-}
+  return actions;
+};
 
 /**
  * format pod createTime
  */
 export const formatPodTime = (createTimeStamp: Date = new Date()) => {
-  const podStartTimeStamp = dayjs(createTimeStamp)
+  const podStartTimeStamp = dayjs(createTimeStamp);
 
-  let timeDiff = Math.floor(dayjs().diff(podStartTimeStamp) / 1000)
+  let timeDiff = Math.floor(dayjs().diff(podStartTimeStamp) / 1000);
 
   // 计算天数
-  const days = Math.floor(timeDiff / (24 * 60 * 60))
-  timeDiff -= days * 24 * 60 * 60
+  const days = Math.floor(timeDiff / (24 * 60 * 60));
+  timeDiff -= days * 24 * 60 * 60;
 
   // 计算小时数
-  const hours = Math.floor(timeDiff / (60 * 60))
-  timeDiff -= hours * 60 * 60
+  const hours = Math.floor(timeDiff / (60 * 60));
+  timeDiff -= hours * 60 * 60;
 
   // 计算分钟数
-  const minutes = Math.floor(timeDiff / 60)
-  timeDiff -= minutes * 60
+  const minutes = Math.floor(timeDiff / 60);
+  timeDiff -= minutes * 60;
 
   // 计算秒数
-  const seconds = timeDiff
+  const seconds = timeDiff;
 
   if (days > 0) {
-    return `${days}d${hours}h`
+    return `${days}d${hours}h`;
   }
   if (hours > 0) {
-    return `${hours}h${minutes}m`
+    return `${hours}h${minutes}m`;
   }
   if (minutes > 0) {
-    return `${minutes}m${seconds}s`
+    return `${minutes}m${seconds}s`;
   }
-  return `${seconds}s`
-}
+  return `${seconds}s`;
+};
+
+export const formatMoney = (mone: number) => {
+  return mone / 1000000;
+};
 
 export function calculateUptime(createdTime: Date): string {
-  const now = dayjs()
-  const created = dayjs(createdTime)
-  const diff = dayjs.duration(now.diff(created))
+  const now = dayjs();
+  const created = dayjs(createdTime);
+  const diff = dayjs.duration(now.diff(created));
 
-  const days = diff.days()
-  const hours = diff.hours()
-  const minutes = diff.minutes()
+  const days = diff.days();
+  const hours = diff.hours();
+  const minutes = diff.minutes();
 
-  let uptime = ''
+  let uptime = '';
   if (days > 0) {
-    uptime += `${days}d`
+    uptime += `${days}d`;
   }
   if (hours > 0) {
-    uptime += `${hours}h`
+    uptime += `${hours}h`;
   }
   if (minutes > 0) {
-    uptime += `${minutes}m`
+    uptime += `${minutes}m`;
   }
 
-  return uptime || 'Recently Started'
+  return uptime || 'Recently Started';
 }
 
 export const isElementInViewport = (element: Element) => {
-  const rect = element.getBoundingClientRect()
-  const windowHeight = window.innerHeight || document.documentElement.clientHeight
-  const windowWidth = window.innerWidth || document.documentElement.clientWidth
-  const vertInView = rect.top <= windowHeight && rect.top + rect.height >= 0
-  const horInView = rect.left <= windowWidth && rect.left + rect.width >= 0
-  return vertInView && horInView
-}
-export const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz', 12)
+  const rect = element.getBoundingClientRect();
+  const windowHeight = window.innerHeight || document.documentElement.clientHeight;
+  const windowWidth = window.innerWidth || document.documentElement.clientWidth;
+  const vertInView = rect.top <= windowHeight && rect.top + rect.height >= 0;
+  const horInView = rect.left <= windowWidth && rect.left + rect.width >= 0;
+  return vertInView && horInView;
+};
+export const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz', 12);
 
 export const parseTemplateConfig = (config: string) => {
   return JSON.parse(config) as {
-    user: string
-    workingDir: string
-    releaseCommand: string[]
-    releaseArgs: string[]
+    user: string;
+    workingDir: string;
+    releaseCommand: string[];
+    releaseArgs: string[];
     appPorts: {
-      name: string
-      port: number
-      protocol: string
-      targetPort: number
-    }[]
+      name: string;
+      port: number;
+      protocol: string;
+      targetPort: number;
+    }[];
     ports: {
-      containerPort: number
-      name: string
-      protocol: string
-    }[]
-  }
-}
\ No newline at end of file
+      containerPort: number;
+      name: string;
+      protocol: string;
+    }[];
+  };
+};
diff --git a/frontend/providers/devbox/utils/user.ts b/frontend/providers/devbox/utils/user.ts
index 646a028d969a..78a859ff711c 100644
--- a/frontend/providers/devbox/utils/user.ts
+++ b/frontend/providers/devbox/utils/user.ts
@@ -1,78 +1,77 @@
-import yaml from 'js-yaml'
-import { customAlphabet } from 'nanoid'
-import { SessionV1 } from 'sealos-desktop-sdk/*'
+import yaml from 'js-yaml';
+import { customAlphabet } from 'nanoid';
+import { SessionV1 } from 'sealos-desktop-sdk/*';
 
 export const getUserKubeConfig = () => {
-  if(typeof window === 'undefined') {
-    return ''
+  if (typeof window === 'undefined') {
+    return '';
   }
   let kubeConfig: string =
-    process.env.NODE_ENV === 'development' ? process.env.NEXT_PUBLIC_MOCK_USER || '' : ''
+    process.env.NODE_ENV === 'development' ? process.env.NEXT_PUBLIC_MOCK_USER || '' : '';
   try {
-    const store = sessionStorage.getItem('session')
+    const store = sessionStorage.getItem('session');
     if (!kubeConfig && store) {
-      const session = JSON.parse(store) as SessionV1
-      kubeConfig = session.kubeconfig
-
+      const session = JSON.parse(store) as SessionV1;
+      kubeConfig = session.kubeconfig;
     }
   } catch (err) {
-    err
+    err;
   }
-  return kubeConfig
-}
+  return kubeConfig;
+};
 export const getDesktopSessionFromSessionStorage = () => {
-  if(typeof window === 'undefined') {
-    return null
+  if (typeof window === 'undefined') {
+    return null;
   }
   try {
-    const store = sessionStorage.getItem('session')
+    const store = sessionStorage.getItem('session');
     if (store) {
-      const session = JSON.parse(store) as SessionV1
-      return session
+      const session = JSON.parse(store) as SessionV1;
+      return session;
     } else {
-      return null
+      return null;
     }
   } catch (err) {
-    console.log(err)
-    return null
+    console.log(err);
+    return null;
   }
-}
+};
 export const getSessionFromSessionStorage = () => {
-  if(typeof window === 'undefined') {
-    return null
+  if (typeof window === 'undefined') {
+    return null;
   }
   try {
-    return sessionStorage.getItem('token')
+    return sessionStorage.getItem('token');
   } catch (err) {
-    console.log(err)
-    return null
+    console.log(err);
+    return null;
   }
-}
+};
 export const setSessionToSessionStorage = (token: string) => {
-  if(typeof window === 'undefined') {
-    return null
+  if (typeof window === 'undefined') {
+    return null;
   }
-  
-  sessionStorage.setItem('token', token)
-}
+
+  sessionStorage.setItem('token', token);
+};
 export const cleanSession = () => {
-  if(typeof window === 'undefined') {
-    return null
+  if (typeof window === 'undefined') {
+    return null;
   }
-  sessionStorage.removeItem('session')
-  sessionStorage.removeItem('token')
-}
+  sessionStorage.removeItem('session');
+  sessionStorage.removeItem('token');
+};
 export const getUserNamespace = () => {
-  const kubeConfig = getUserKubeConfig()
-  const json: any = yaml.load(kubeConfig)
+  const kubeConfig = getUserKubeConfig();
+  const json: any = yaml.load(kubeConfig);
   try {
-    return json?.contexts[0]?.context?.namespace || `ns-${json.users[0].name}`
+    return json?.contexts[0]?.context?.namespace || `ns-${json.users[0].name}`;
   } catch (err) {
-    return 'ns-'
+    return 'ns-';
   }
-}
+};
 
 export const makeOrganizationName = () => {
-  const gen = customAlphabet('23456789abcdefghijkmnpqrstuvwxyz', 7)
-  return gen()
-}
\ No newline at end of file
+  const gen = customAlphabet('23456789abcdefghijkmnpqrstuvwxyz', 7);
+  return gen();
+};
diff --git a/frontend/providers/devbox/utils/vaildate.ts b/frontend/providers/devbox/utils/vaildate.ts
index b02002e5e3c6..247b5ff0a651 100644
--- a/frontend/providers/devbox/utils/vaildate.ts
+++ b/frontend/providers/devbox/utils/vaildate.ts
@@ -1,40 +1,42 @@
-import { z } from "zod";
+import { z } from 'zod';
 export enum versionErrorEnum {
-  INVALID_VERSION = "INVALID_VERSION",
-
+  INVALID_VERSION = 'INVALID_VERSION'
 }
-export const versionSchema = z.string().min(1).regex(/[\w][\w.-]{0,127}/, {
-  message: versionErrorEnum.INVALID_VERSION,
-});
+export const versionSchema = z
+  .string()
+  .min(1)
+  .regex(/[\w][\w.-]{0,127}/, {
+    message: versionErrorEnum.INVALID_VERSION
+  });
 export const templateNameSchema = z.string().regex(/^[a-z0-9]([a-z0-9-]*[a-z0-9])?$/);
-export const devboxNameSchema = z.string().regex(/^[a-z]([-a-z0-9]*[a-z0-9])?/);
+export const devboxNameSchema = z.string().regex(/^[a-z]([-a-z0-9]*[a-z0-9])?$/);
 export const createTemplateRepositorySchema = z.object({
   description: z.string().max(255),
   version: z.string().min(1).max(255),
   tagUidList: z.string().uuid().array().default([]),
   templateRepositoryName: z.string().min(1).max(255),
   isPublic: z.boolean().default(false),
-  devboxReleaseName: z.string(),
-})
+  devboxReleaseName: z.string()
+});
 export const updateTemplateRepositorySchema = z.object({
   uid: z.string().uuid(),
   templateRepositoryName: z.string().min(1).max(255),
   description: z.string().max(255),
   tagUidList: z.string().uuid().array().default([]),
-  isPublic: z.boolean().default(false),
-})
+  isPublic: z.boolean().default(false)
+});
 export const updateTemplateSchema = z.object({
   templateRepositoryUid: z.string().uuid(),
   description: z.string().max(255),
   version: z.string(),
   tagUidList: z.string().uuid().array().default([]),
-  devboxReleaseName: z.string(),
-})
+  devboxReleaseName: z.string()
+});
 export const updateTemplateListSchema = z.object({
   uid: z.string().uuid(),
-  versionList: z.string().array(), // uid[]
-})
-export type CreateTemplateRepositoryType = z.infer<typeof createTemplateRepositorySchema>
-export type UpdateTemplateRepositoryType = z.infer<typeof updateTemplateRepositorySchema>
-export type UpdateTemplateListType = z.infer<typeof updateTemplateListSchema>
-export type UpdateTemplateType = z.infer<typeof updateTemplateSchema>
\ No newline at end of file
+  versionList: z.string().array() // uid[]
+});
+export type CreateTemplateRepositoryType = z.infer<typeof createTemplateRepositorySchema>;
+export type UpdateTemplateRepositoryType = z.infer<typeof updateTemplateRepositorySchema>;
+export type UpdateTemplateListType = z.infer<typeof updateTemplateListSchema>;
+export type UpdateTemplateType = z.infer<typeof updateTemplateSchema>;
diff --git a/frontend/providers/invite/public/locales/en/common.json b/frontend/providers/invite/public/locales/en/common.json
index 3645f8056cc4..e640012b9fe1 100644
--- a/frontend/providers/invite/public/locales/en/common.json
+++ b/frontend/providers/invite/public/locales/en/common.json
@@ -1,11 +1,12 @@
 {
   "Cumulative number of invitees": "Cumulative number of invitees",
   "Earnings": "Earnings",
-  "Cashback Ratio": "Cashback Ratio",
-  "Every time a friend recharges": "Every time a friend recharges, you will receive a balance reward of {{amount}}",
+  "Cashback Ratio": "Cashback Rules",
+  "every_time_a_friend_recharges": "2. Every time a friend recharges, you will receive a rebate of TA's recharge amount <strong>{{amount}}</strong>",
   "Invitation link": "Invitation link",
   "Copy link": "Copy link",
   "Time": "Time",
   "Amount": "Amount",
-  "No invitation records": "No invitation records~"
-}
+  "No invitation records": "No invitation records~",
+  "cashback_first_rule": "1. After a friend completes real-name authentication, you and TA will receive a <strong>{{amount}}</strong> yuan balance reward"
+}
\ No newline at end of file
diff --git a/frontend/providers/invite/public/locales/zh/common.json b/frontend/providers/invite/public/locales/zh/common.json
index bc49d3eb00db..64519c527008 100644
--- a/frontend/providers/invite/public/locales/zh/common.json
+++ b/frontend/providers/invite/public/locales/zh/common.json
@@ -1,11 +1,12 @@
 {
   "Cumulative number of invitees": "累计邀请人数",
   "Earnings": "收益",
-  "Cashback Ratio": "返现比例",
-  "Every time a friend recharges": "好友每次充值，您都获得 {{amount}} 的余额奖励",
+  "Cashback Ratio": "返现规则",
+  "every_time_a_friend_recharges": "2. 好友每次充值，您会获得TA的充值金额  <strong>{{amount}}</strong>  的返利",
   "Invitation link": "邀请链接",
   "Copy link": "复制链接",
   "Time": "时间",
   "Amount": "金额",
-  "No invitation records": "无邀请记录~"
-}
+  "No invitation records": "无邀请记录~",
+  "cashback_first_rule": "1. 好友完成实名认证后，您和TA都将获得 <strong>{{amount}}</strong> 元余额奖励"
+}
\ No newline at end of file
diff --git a/frontend/providers/invite/src/pages/index.tsx b/frontend/providers/invite/src/pages/index.tsx
index b5b1e603705b..9d327b71f00f 100644
--- a/frontend/providers/invite/src/pages/index.tsx
+++ b/frontend/providers/invite/src/pages/index.tsx
@@ -21,7 +21,7 @@ import {
 } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import dayjs from 'dayjs';
-import { useTranslation } from 'next-i18next';
+import { useTranslation, Trans } from 'next-i18next';
 import { useCallback } from 'react';
 
 export default function Index({
@@ -79,10 +79,22 @@ export default function Index({
           <Flex alignItems={'center'} justifyContent={'center'} flexDirection={'column'}>
             <Box mb="4px">{t('Cashback Ratio')}</Box>
             <Text fontSize={'12px'}>
-              {t('Every time a friend recharges', { amount: `${parseFloat(GIFT_RATIO) * 100}%` })}
+              <Trans
+                i18nKey="cashback_first_rule"
+                values={{
+                  amount: 5
+                }}
+              />
+            </Text>
+            <Text fontSize={'12px'}>
+              <Trans
+                i18nKey="every_time_a_friend_recharges"
+                values={{
+                  amount: `${parseFloat(GIFT_RATIO) * 100}%`
+                }}
+              />
             </Text>
           </Flex>
-          <Box {...titleStyles}>{parseFloat(GIFT_RATIO) * 100}%</Box>
         </Box>
         <Box {...statisticsStyles}>
           <Flex alignItems={'center'} justifyContent={'center'}>
diff --git a/frontend/providers/template/src/api/delete.ts b/frontend/providers/template/src/api/delete.ts
index 7281283a6c00..b479de0dd842 100644
--- a/frontend/providers/template/src/api/delete.ts
+++ b/frontend/providers/template/src/api/delete.ts
@@ -65,7 +65,8 @@ const deleteResourceByKind: Record<AllResourceKindType, DeleteResourceFunction |
   ServiceAccount: (instanceName: string) => delServiceAccountByName(instanceName),
   PersistentVolumeClaim: delPersistentVolumeClaim,
   Service: delServiceByName,
-  ObjectStorageBucket: undefined // use delCR
+  ObjectStorageBucket: undefined, // use delCR
+  Devbox: undefined // use delCR
 };
 
 export const deleteAllResources = async (resources: ResourceListItemType[]) => {
diff --git a/frontend/providers/template/src/pages/api/app/listOtherByName.ts b/frontend/providers/template/src/pages/api/app/listOtherByName.ts
index 3360452b8929..48eec1e8bca0 100644
--- a/frontend/providers/template/src/pages/api/app/listOtherByName.ts
+++ b/frontend/providers/template/src/pages/api/app/listOtherByName.ts
@@ -146,14 +146,25 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
         kind: 'PromehteusList';
       };
     }>;
-    const prometheusPvcPromise = k8sCore.listNamespacedPersistentVolumeClaim(
+
+    // const prometheusPvcPromise = k8sCore.listNamespacedPersistentVolumeClaim(
+    //   namespace,
+    //   undefined,
+    //   undefined,
+    //   undefined,
+    //   undefined,
+    //   `app.kubernetes.io/name=prometheus,prometheus=${instanceName}`
+    // );
+
+    const pvcPromise = k8sCore.listNamespacedPersistentVolumeClaim(
       namespace,
       undefined,
       undefined,
       undefined,
       undefined,
-      `app.kubernetes.io/name=prometheus,prometheus=${instanceName}`
+      labelSelector
     );
+
     const servicemonitorPromise = k8sCustomObjects.listNamespacedCustomObject(
       'monitoring.coreos.com',
       'v1',
@@ -198,6 +209,24 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
       `${labelSelector}`
     );
 
+    const devboxPromise = k8sCustomObjects.listNamespacedCustomObject(
+      'devbox.sealos.io',
+      'v1alpha1',
+      namespace,
+      'devboxes',
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      labelSelector
+    ) as Promise<{
+      response: IncomingMessage;
+      body: {
+        items: { kind?: string }[];
+        kind: 'DevboxList';
+      };
+    }>;
+
     const result = await Promise.allSettled([
       secretPromise,
       jobPromise,
@@ -209,10 +238,11 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
       configMapPromise,
       prometheusPromise,
       prometheusPromiseRule,
-      prometheusPvcPromise,
       servicemonitorPromise,
       probePromise,
-      servicePromise
+      servicePromise,
+      devboxPromise,
+      pvcPromise
     ]);
     const data = result
       .map((res) => {
diff --git a/frontend/providers/template/src/pages/deploy/components/ReadMe.tsx b/frontend/providers/template/src/pages/deploy/components/ReadMe.tsx
index 55b0a8781025..c586290a5095 100644
--- a/frontend/providers/template/src/pages/deploy/components/ReadMe.tsx
+++ b/frontend/providers/template/src/pages/deploy/components/ReadMe.tsx
@@ -1,60 +1,21 @@
 import MyIcon from '@/components/Icon';
-import { TemplateType } from '@/types/app';
 import { Box } from '@chakra-ui/react';
 import 'github-markdown-css/github-markdown-light.css';
-import { useEffect, useMemo, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
+import rehypeRewrite from 'rehype-rewrite';
 import remarkGfm from 'remark-gfm';
 import remarkUnwrapImages from 'remark-unwrap-images';
-import rehypeRewrite from 'rehype-rewrite';
 import styles from './index.module.scss';
-import { parseGithubUrl } from '@/utils/tools';
-import { Octokit, App } from 'octokit';
-import { useTranslation } from 'next-i18next';
-
-const ReadMe = ({ templateDetail }: { templateDetail: TemplateType }) => {
-  const { i18n } = useTranslation();
-  const [templateReadMe, setTemplateReadMe] = useState('');
-
-  const readme =
-    templateDetail?.spec?.i18n?.[i18n.language]?.readme ?? templateDetail?.spec?.readme;
-
-  // const octokit = new Octokit({
-  //   auth: ''
-  // });
-  // useEffect(() => {
-  //   (async () => {
-  //     const result = await octokit.request('GET /repos/{owner}/{repo}/readme', {
-  //       owner: 'appsmithorg',
-  //       repo: 'appsmith',
-  //       headers: {}
-  //     });
-  //     console.log(result);
-  //   })();
-  // }, []);
-
-  const githubOptions = useMemo(() => parseGithubUrl(readme), [readme]);
-
-  useEffect(() => {
-    if (readme) {
-      (async () => {
-        try {
-          const res = await (await fetch(readme)).text();
-          setTemplateReadMe(res);
-        } catch (error) {
-          console.log(error);
-        }
-      })();
-    }
-  }, [readme]);
 
+const ReadMe = ({ readUrl, readmeContent }: { readUrl: string; readmeContent: string }) => {
   // @ts-ignore
   const myRewrite = (node, index, parent) => {
     if (node.tagName === 'img' && !node.properties.src.startsWith('http')) {
       const imgSrc = node.properties.src.replace(/^\.\/|^\//, '');
-
-      node.properties.src = `https://${githubOptions?.hostname}/${githubOptions?.organization}/${githubOptions?.repository}/${githubOptions?.branch}/${imgSrc}`;
+      const baseUrl = readUrl?.substring(0, readUrl?.lastIndexOf('/') + 1);
+      node.properties.referrerPolicy = 'no-referrer';
+      node.properties.src = `${baseUrl}${imgSrc}`;
     }
   };
 
@@ -76,7 +37,7 @@ const ReadMe = ({ templateDetail }: { templateDetail: TemplateType }) => {
           rehypePlugins={[rehypeRaw, [rehypeRewrite, { rewrite: myRewrite }]]}
           remarkPlugins={[remarkGfm, remarkUnwrapImages]}
         >
-          {templateReadMe}
+          {readmeContent}
         </ReactMarkdown>
       </Box>
     </Box>
diff --git a/frontend/providers/template/src/pages/deploy/index.tsx b/frontend/providers/template/src/pages/deploy/index.tsx
index da186bd5fc46..b2e27c25bcea 100644
--- a/frontend/providers/template/src/pages/deploy/index.tsx
+++ b/frontend/providers/template/src/pages/deploy/index.tsx
@@ -33,7 +33,9 @@ const Header = dynamic(() => import('./components/Header'), { ssr: false });
 export default function EditApp({
   appName,
   metaData,
-  brandName
+  brandName,
+  readmeContent,
+  readUrl
 }: {
   appName?: string;
   metaData: {
@@ -42,6 +44,8 @@ export default function EditApp({
     description: string;
   };
   brandName?: string;
+  readmeContent: string;
+  readUrl: string;
 }) {
   const { t, i18n } = useTranslation();
   const { message: toast } = useMessage();
@@ -387,7 +391,7 @@ export default function EditApp({
               platformEnvs={platformEnvs!}
             />
             {/* <Yaml yamlList={yamlList} pxVal={pxVal}></Yaml> */}
-            <ReadMe templateDetail={data?.templateYaml!} />
+            <ReadMe key={readUrl} readUrl={readUrl} readmeContent={readmeContent} />
           </Flex>
         </Flex>
       </Flex>
@@ -421,16 +425,24 @@ export async function getServerSideProps(content: any) {
     keywords: '',
     description: ''
   };
+  let readmeContent = '';
+  let readUrl = '';
 
   try {
     const templateSource: { data: TemplateSourceType } = await (
       await fetch(`${baseurl}/api/getTemplateSource?templateName=${appName}`)
     ).json();
+    const templateDetail = templateSource?.data.templateYaml;
+
     metaData = {
-      title: templateSource?.data.templateYaml.spec.title,
-      keywords: templateSource?.data.templateYaml.spec.description,
-      description: templateSource?.data.templateYaml.spec.description
+      title: templateDetail?.spec?.title,
+      keywords: templateDetail?.spec?.description,
+      description: templateDetail?.spec?.description
     };
+
+    const readme = templateDetail?.spec?.i18n?.[local]?.readme ?? templateDetail?.spec?.readme;
+    readUrl = readme;
+    readmeContent = await (await fetch(readme)).text();
   } catch (error) {}
 
   return {
@@ -438,6 +450,8 @@ export async function getServerSideProps(content: any) {
       appName,
       metaData,
       brandName,
+      readmeContent,
+      readUrl,
       ...(await serviceSideProps(content))
     }
   };
diff --git a/frontend/providers/template/src/pages/index.tsx b/frontend/providers/template/src/pages/index.tsx
index 89a03e25f6ba..7484088f1d83 100644
--- a/frontend/providers/template/src/pages/index.tsx
+++ b/frontend/providers/template/src/pages/index.tsx
@@ -31,8 +31,13 @@ import { ShareIcon } from '@/components/icons';
 
 const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ');
 
-export default function AppList({ showCarousel }: { showCarousel: boolean }) {
-  const brandName = process.env.NEXT_PUBLIC_BRAND_NAME;
+export default function AppList({
+  showCarousel,
+  brandName
+}: {
+  showCarousel: boolean;
+  brandName: string;
+}) {
   const { t, i18n } = useTranslation();
   const router = useRouter();
   const { searchValue, appType } = useSearchStore();
@@ -270,9 +275,13 @@ export default function AppList({ showCarousel }: { showCarousel: boolean }) {
 
 // https://nextjs.org/docs/pages/api-reference/functions/get-server-side-props#context-parameter
 export async function getServerSideProps(content: any) {
+  const forcedLanguage = process.env.FORCED_LANGUAGE;
+  const brandName = process.env.NEXT_PUBLIC_BRAND_NAME;
   const local =
+    forcedLanguage ||
     content?.req?.cookies?.NEXT_LOCALE ||
     compareFirstLanguages(content?.req?.headers?.['accept-language'] || 'zh');
+
   content?.res.setHeader(
     'Set-Cookie',
     `NEXT_LOCALE=${local}; Max-Age=2592000; Secure; SameSite=None`
@@ -286,7 +295,8 @@ export async function getServerSideProps(content: any) {
   return {
     props: {
       ...(await serviceSideProps(content)),
-      showCarousel: data.showCarousel
+      showCarousel: data.showCarousel,
+      brandName
     }
   };
 }
diff --git a/frontend/providers/template/src/pages/instance/components/dbList.tsx b/frontend/providers/template/src/pages/instance/components/dbList.tsx
index 8eeec97ebb60..7a2b4b04aba6 100644
--- a/frontend/providers/template/src/pages/instance/components/dbList.tsx
+++ b/frontend/providers/template/src/pages/instance/components/dbList.tsx
@@ -35,12 +35,12 @@ export default function AppList({ instanceName }: { instanceName: string }) {
     }
   );
 
-  const handleToDetailPage = (name: string) => {
+  const handleToDetailPage = (item: DBListItemType) => {
     sealosApp.runEvents('openDesktopApp', {
       appKey: 'system-dbprovider',
-      pathname: '/db/detail',
-      query: { name: name },
-      messageData: { type: 'InternalAppCall', name: name }
+      pathname: '/redirect',
+      query: { name: item.name },
+      messageData: { type: 'InternalAppCall', name: item.name }
     });
   };
 
@@ -108,7 +108,7 @@ export default function AppList({ instanceName }: { instanceName: string }) {
               }}
               h={'32px'}
               leftIcon={<MyIcon name={'detail'} transform={'translateY(-1px)'} />}
-              onClick={() => handleToDetailPage(item.name)}
+              onClick={() => handleToDetailPage(item)}
             >
               {t('Details')}
             </Button>
diff --git a/frontend/providers/template/src/types/index.ts b/frontend/providers/template/src/types/index.ts
index e22e40d31ed0..e6edb97e0a46 100644
--- a/frontend/providers/template/src/types/index.ts
+++ b/frontend/providers/template/src/types/index.ts
@@ -20,6 +20,7 @@ export type ServiceEnvType = {
 };
 
 export type EnvResponse = {
+  FORCED_LANGUAGE: string;
   SEALOS_CLOUD_DOMAIN: string;
   SEALOS_CERT_SECRET_NAME: string;
   TEMPLATE_REPO_URL: string;
diff --git a/frontend/providers/template/src/types/resource.ts b/frontend/providers/template/src/types/resource.ts
index f987d92631e5..06e8a2936510 100644
--- a/frontend/providers/template/src/types/resource.ts
+++ b/frontend/providers/template/src/types/resource.ts
@@ -15,7 +15,8 @@ export type AllResourceKindType =
   | 'Instance'
   | 'Service'
   | 'ObjectStorageBucket'
-  | 'PersistentVolumeClaim';
+  | 'PersistentVolumeClaim'
+  | 'Devbox';
 
 export type DeleteResourceFunction = (instanceName: string) => void;
 
diff --git a/frontend/providers/template/src/utils/tools.ts b/frontend/providers/template/src/utils/tools.ts
index b26c3c071669..91063aa8f882 100644
--- a/frontend/providers/template/src/utils/tools.ts
+++ b/frontend/providers/template/src/utils/tools.ts
@@ -276,7 +276,8 @@ export function getTemplateEnvs(namespace?: string): EnvResponse {
     SEALOS_SERVICE_ACCOUNT: namespace?.replace('ns-', '') || '',
     SHOW_AUTHOR: process.env.SHOW_AUTHOR || 'false',
     DESKTOP_DOMAIN: process.env.DESKTOP_DOMAIN || 'cloud.sealos.io',
-    CURRENCY_SYMBOL: (process.env.CURRENCY_SYMBOL as 'shellCoin' | 'cny' | 'usd') || 'shellCoin'
+    CURRENCY_SYMBOL: (process.env.CURRENCY_SYMBOL as 'shellCoin' | 'cny' | 'usd') || 'shellCoin',
+    FORCED_LANGUAGE: process.env.FORCED_LANGUAGE || 'zh-CN'
   };
   return TemplateEnvs;
 }
diff --git a/frontend/providers/workorder/.env.template b/frontend/providers/workorder/.env.template
index f7500dd584ed..3df62f396f14 100644
--- a/frontend/providers/workorder/.env.template
+++ b/frontend/providers/workorder/.env.template
@@ -9,12 +9,14 @@ MINIO_BUCKET_NAME=
 MINIO_ACCESS_KEY= 
 MINIO_SECRET_KEY= 
 MINIO_PORT= 
+
 # admin
-ADMIN_FEISHU_URL=
 JWT_SECRET_DESKTOP_TO_APP=
 JWT_SECRET_SELF=
+ADMIN_FEISHU_URL=
 ADMIN_FEISHU_CALLBACK_URL=
 ADMIN_API_TOKEN=
+
 # fastgpt
 FASTGPT_API_URL=
 FASTGPT_API_KEY=
diff --git a/frontend/providers/workorder/public/locales/en/common.json b/frontend/providers/workorder/public/locales/en/common.json
index 543ecf3656cf..4cee1a1d412e 100644
--- a/frontend/providers/workorder/public/locales/en/common.json
+++ b/frontend/providers/workorder/public/locales/en/common.json
@@ -5,6 +5,7 @@
   "Close": "Close",
   "Completed": "Completed",
   "Confirm": "Confirm",
+  "Copy": "Copy",
   "Create Time": "Create Time ",
   "Creating": "Creating",
   "Delete": "Delete",
@@ -13,12 +14,10 @@
   "Details": "Details",
   "Failed": "Failed",
   "File upload failed": "File upload failed",
-  "functionserver": "Function Server",
   "Name": "Name",
   "New Order": "New Order",
   "None": "None",
   "Notification SwitchToManual Tips": "The request was sent successfully, please wait patiently.",
-  "objectstorage": "Object Storage",
   "Operation": "Operation",
   "Order Conversation": "Order Conversation",
   "Order Detail": "Order Detail",
@@ -40,6 +39,8 @@
   "Total": "Total",
   "Type": "Type",
   "Upload File": "Upload File",
+  "account_center": "Account Center",
+  "api is error": "api is error",
   "appendix": "appendix",
   "applaunchpad": "App Launchpad",
   "cloudserver": "Cloud Server",
@@ -47,22 +48,25 @@
   "cronjob": "CronJob",
   "dbprovider": "Database",
   "describe your problem": "describe your problem",
+  "fastgpt": "FastGPT",
   "file": {
     "Upload Success": "File uploaded successfully",
     "Uploading": "Uploading file, Progress: {{percent}}%"
   },
+  "functionserver": "Function Server",
+  "input_placeholder": "Enter your message here, you can paste the picture and upload it directly",
   "network anomaly": "Network anomaly",
+  "newline": "newline",
+  "objectstorage": "Object Storage",
+  "other": "other",
   "please wait for the end": "Chatting in progress... Please wait for it to finish",
+  "region": "region",
+  "send": "Send",
+  "success": "Success",
+  "support_staff_recalled_a_message": "Administrator retracts a message",
   "template": "App Store",
   "user info": "User Info",
-  "send": "Send",
-  "newline": "newline",
-  "Copy": "Copy",
-  "api is error": "api is error",
-  "region": "region",
   "userId": "userId",
-  "other": "other",
-  "fastgpt": "FastGPT",
-  "account_center": "Account Center",
-  "input_placeholder": "Enter your message here, you can paste the picture and upload it directly"
+  "user_recalled_a_message": "Withdrawn a message",
+  "you_recalled_a_message": "You recalled a message"
 }
diff --git a/frontend/providers/workorder/public/locales/zh/common.json b/frontend/providers/workorder/public/locales/zh/common.json
index fa4ffd93fd48..1d79b1a42305 100644
--- a/frontend/providers/workorder/public/locales/zh/common.json
+++ b/frontend/providers/workorder/public/locales/zh/common.json
@@ -1,68 +1,72 @@
 {
-  "file": {
-    "Uploading": "正在上传文件，进度: {{percent}}%",
-    "Upload Success": "文件上传成功"
-  },
   "All": "全部",
-  "Total": "总数",
-  "Page": "页",
+  "Are you sure you want to submit this work order": "确定提交此工单吗",
+  "Cancel": "取消",
+  "Close": "关闭",
+  "Completed": "已完成",
+  "Confirm": "确认",
+  "Copy": "复制",
+  "Create Time": "创建时间",
   "Creating": "创建中",
+  "Delete": "删除",
+  "Deleted": "已删除",
+  "Description": "详细描述",
+  "Details": "详情",
   "Failed": "有异常",
+  "File upload failed": "文件上传失败",
   "Name": "名字",
-  "Cancel": "取消",
-  "Confirm": "确认",
   "New Order": "新建工单",
-  "Submit Order": "提交工单",
-  "Problem Description": "问题描述",
-  "appendix": "附件",
-  "Description": "详细描述",
-  "Type": "类型",
-  "Order List": "工单列表",
-  "describe your problem": "描述您的问题",
-  "Are you sure you want to submit this work order": "确定提交此工单吗",
-  "Order Name": "工单号",
+  "None": "暂无",
+  "Notification SwitchToManual Tips": "已转人工处理，请耐心等待。",
   "Operation": "操作",
-  "Question Type": "问题类型",
-  "Status": "状态",
-  "Create Time": "创建时间",
-  "Details": "详情",
-  "Close": "关闭",
-  "Delete": "删除",
-  "Order Detail": "工单详情",
   "Order Conversation": "工单对话",
-  "Send": "发送",
+  "Order Detail": "工单详情",
   "Order Empty": "暂无工单",
-  "Upload File": "上传文件",
-  "None": "暂无",
+  "Order List": "工单列表",
+  "Order Name": "工单号",
+  "Page": "页",
+  "Pending": "待处理",
+  "Problem Description": "问题描述",
   "Processing": "进行中",
-  "Completed": "已完成",
   "Prompt": "提示",
-  "File upload failed": "文件上传失败",
-  "Pending": "待处理",
+  "Question Type": "问题类型",
+  "Request exceeds limit": "请求超出限制",
+  "Send": "发送",
+  "Status": "状态",
   "Submit Error": "提交错误",
-  "Deleted": "已删除",
-  "user info": "用户信息",
+  "Submit Order": "提交工单",
   "Switch to manual": "转人工客服",
-  "network anomaly": "网络异常",
-  "Notification SwitchToManual Tips": "已转人工处理，请耐心等待。",
-  "please wait for the end": "正在聊天中...请等待结束",
-  "Request exceeds limit": "请求超出限制",
+  "Total": "总数",
+  "Type": "类型",
+  "Upload File": "上传文件",
+  "account_center": "账号中心",
+  "api is error": "api is error",
+  "appendix": "附件",
   "applaunchpad": "应用管理",
+  "cloudserver": "云主机",
   "costcenter": "费用中心",
-  "template": "应用市场",
-  "dbprovider": "数据库",
   "cronjob": "定时任务",
-  "cloudserver": "云主机",
-  "objectstorage": "对象存储",
+  "dbprovider": "数据库",
+  "describe your problem": "描述您的问题",
+  "fastgpt": "FastGPT",
+  "file": {
+    "Upload Success": "文件上传成功",
+    "Uploading": "正在上传文件，进度: {{percent}}%"
+  },
   "functionserver": "云开发",
-  "send": "发送",
+  "input_placeholder": "在此输入消息，可粘贴图片直接上传",
+  "network anomaly": "网络异常",
   "newline": "换行",
-  "Copy": "复制",
-  "api is error": "api is error",
+  "objectstorage": "对象存储",
+  "other": "其他",
+  "please wait for the end": "正在聊天中...请等待结束",
   "region": "可用区",
+  "send": "发送",
+  "success": "成功",
+  "support_staff_recalled_a_message": "管理员撤回一条消息",
+  "template": "应用市场",
+  "user info": "用户信息",
   "userId": "用户ID",
-  "other": "其他",
-  "fastgpt": "FastGPT",
-  "account_center": "账号中心",
-  "input_placeholder": "在此输入消息，可粘贴图片直接上传"
+  "user_recalled_a_message": "撤回了一条消息",
+  "you_recalled_a_message": "你撤回一条消息"
 }
diff --git a/frontend/providers/workorder/src/components/Icon/icons/undo.svg b/frontend/providers/workorder/src/components/Icon/icons/undo.svg
new file mode 100644
index 000000000000..782cdfb691b2
--- /dev/null
+++ b/frontend/providers/workorder/src/components/Icon/icons/undo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-undo-2"><path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11"/></svg>
\ No newline at end of file
diff --git a/frontend/providers/workorder/src/components/Icon/index.tsx b/frontend/providers/workorder/src/components/Icon/index.tsx
index 9135d9fd141d..371928717528 100644
--- a/frontend/providers/workorder/src/components/Icon/index.tsx
+++ b/frontend/providers/workorder/src/components/Icon/index.tsx
@@ -34,6 +34,7 @@ const map = {
   robot: require('./icons/robot.svg').default,
   sealosAvator: require('./icons/sealosAvator.svg').default,
   defaultAvator: require('./icons/defaultAvator.svg').default,
+  undo: require('./icons/undo.svg').default,
   link: require('./icons/link.svg').default
 };
 
diff --git a/frontend/providers/workorder/src/pages/api/workorder/getByID.ts b/frontend/providers/workorder/src/pages/api/workorder/getByID.ts
index 7422acc5107f..5d18a0c5cc4d 100644
--- a/frontend/providers/workorder/src/pages/api/workorder/getByID.ts
+++ b/frontend/providers/workorder/src/pages/api/workorder/getByID.ts
@@ -27,6 +27,14 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         message: 'Not Found'
       });
     }
+
+    if (result?.dialogs) {
+      result.dialogs = result.dialogs.map((dialog) => ({
+        ...dialog,
+        content: dialog?.isRecall ? '***' : dialog.content
+      }));
+    }
+
     jsonRes(res, {
       data: result
     });
diff --git a/frontend/providers/workorder/src/pages/api/workorder/updateDialog.ts b/frontend/providers/workorder/src/pages/api/workorder/updateDialog.ts
index a44906c194bf..e5e8085fe4d0 100644
--- a/frontend/providers/workorder/src/pages/api/workorder/updateDialog.ts
+++ b/frontend/providers/workorder/src/pages/api/workorder/updateDialog.ts
@@ -33,6 +33,15 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
           manualHandling: { isManuallyHandled: true, handlingTime: new Date() }
         }
       });
+    } else if (!isRobot) {
+      // When a regular user (non-robot) replies, update status to pending
+      await updateOrder({
+        orderId,
+        userId: payload.userId,
+        updates: {
+          status: WorkOrderStatus.Pending
+        }
+      });
     }
 
     const result = await addDialogToOrder({
diff --git a/frontend/providers/workorder/src/pages/workorder/detail/components/AppMainInfo.tsx b/frontend/providers/workorder/src/pages/workorder/detail/components/AppMainInfo.tsx
index 51a6f45698f9..d88100278d5d 100644
--- a/frontend/providers/workorder/src/pages/workorder/detail/components/AppMainInfo.tsx
+++ b/frontend/providers/workorder/src/pages/workorder/detail/components/AppMainInfo.tsx
@@ -1,5 +1,5 @@
 import { FeishuNotification, deleteFileByName, getFileUrl, uploadFile } from '@/api/platform';
-import { updateWorkOrderDialogById } from '@/api/workorder';
+import { updateWorkOrderDialogById, updateWorkOrderById } from '@/api/workorder';
 import MyIcon from '@/components/Icon';
 import Markdown from '@/components/Markdown';
 import { useSelectFile } from '@/hooks/useSelectFile';
@@ -350,6 +350,32 @@ const AppMainInfo = ({
     }
   }, []);
 
+  const handleRecallMessage = async (index: number) => {
+    try {
+      setIsloading(true);
+      await updateWorkOrderById({
+        orderId: app.orderId,
+        updates: {
+          [`dialogs.${index}.isRecall`]: true
+        }
+      });
+      setDialogs(
+        dialogs.map((dialog, i) => (i === index ? { ...dialog, isRecall: true } : dialog))
+      );
+      toast({
+        title: t('success'),
+        status: 'success'
+      });
+    } catch (error) {
+      toast({
+        title: t('network anomaly'),
+        status: 'error'
+      });
+    } finally {
+      setIsloading(false);
+    }
+  };
+
   return (
     <>
       <Text fontSize={'18px'} fontWeight={500} color={'#24282C'} mt="24px" ml="36px">
@@ -427,13 +453,78 @@ const AppMainInfo = ({
                       )}
                     </Box>
 
-                    <Box mt="4px" p="12px" bg="#F6F8F9" borderRadius={'4px'} fontWeight={400}>
-                      {isURL(item.content) ? (
-                        <Image alt="img" src={item.content} onLoad={() => scrollToBottom()}></Image>
+                    <Box
+                      position={'relative'}
+                      mt="4px"
+                      p="12px"
+                      bg="#F6F8F9"
+                      borderRadius={'4px'}
+                      fontWeight={400}
+                      role="group"
+                    >
+                      {item.isRecall ? (
+                        <Text color="grayModern.500" fontSize="12px" fontStyle="italic">
+                          {item.userId === session?.user?.userId
+                            ? t('you_recalled_a_message')
+                            : item.isAdmin
+                            ? t('user_recalled_a_message')
+                            : t('user_recalled_a_message')}
+                        </Text>
                       ) : (
-                        <Box fontWeight={400}>
-                          <Markdown source={item.content} />
-                        </Box>
+                        <>
+                          {item.userId === session?.user?.userId && (
+                            <Center
+                              color={'grayModern.500'}
+                              position={'absolute'}
+                              right="8px"
+                              top="8px"
+                              cursor={'pointer'}
+                              opacity={0}
+                              _groupHover={{ opacity: 1 }}
+                              _hover={{
+                                bg: 'rgba(17, 24, 36, 0.05)'
+                              }}
+                              w={'20px'}
+                              h={'20px'}
+                              borderRadius={'4px'}
+                              onClick={() => handleRecallMessage(index)}
+                            >
+                              <Icon
+                                xmlns="http://www.w3.org/2000/svg"
+                                width="14px"
+                                height="14px"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                strokeWidth="2"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                              >
+                                <path d="M9 14 4 9l5-5" />
+                                <path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11" />
+                              </Icon>
+                            </Center>
+                          )}
+                          {isURL(item.content) ? (
+                            item.content.match(/\.(jpg|jpeg|png|gif|bmp)/i) ? (
+                              <Image alt="img" src={item.content} onLoad={() => scrollToBottom()} />
+                            ) : (
+                              <Box
+                                as="a"
+                                href={item.content}
+                                target="_blank"
+                                color="blue.500"
+                                textDecoration="underline"
+                              >
+                                {item.content}
+                              </Box>
+                            )
+                          ) : (
+                            <Box fontWeight={400}>
+                              <Markdown source={item.content} />
+                            </Box>
+                          )}
+                        </>
                       )}
                     </Box>
                     {index === dialogs?.length - 1 &&
diff --git a/frontend/providers/workorder/src/types/workorder.ts b/frontend/providers/workorder/src/types/workorder.ts
index 5fab3f1b93c9..a4faed9ad138 100644
--- a/frontend/providers/workorder/src/types/workorder.ts
+++ b/frontend/providers/workorder/src/types/workorder.ts
@@ -28,6 +28,7 @@ export type WorkOrderDialog = {
   userId: string;
   isAdmin: boolean;
   isAIBot: boolean;
+  isRecall?: boolean;
 };
 
 export enum WorkOrderType {
diff --git a/lychee.toml b/lychee.toml
index 2f60b72a4aa0..ff02d18d00cf 100644
--- a/lychee.toml
+++ b/lychee.toml
@@ -4,4 +4,4 @@ exclude_all_private = true
 insecure = true
 no_progress = true
 output = ".dummy.report.md"
-exclude = [ '.*codecov.*','.*sealos\.hub:5000.*','.*local.*','file:///.*','.*sealos.io/payment/wechat/callback.*','.*www.sealos.io/docs/cloud/apps/appstore.*','.*chat.openai.com/c.*','.*twitter.com/sealosio.*','.*sealos.run.*','.*sealos.io.*','.*jsd.cdn.zzko.cn.*','.*feishu.cn*' ]
+exclude = [ '.*codecov.*','.*sealos\.hub:5000.*','.*local.*','file:///.*','.*sealos.io/payment/wechat/callback.*','.*www.sealos.io/docs/cloud/apps/appstore.*','.*chat.openai.com/c.*','.*twitter.com/Sailos_io.*','.*sealos.run.*','.*sealos.io.*','.*jsd.cdn.zzko.cn.*','.*feishu.cn*' ]
diff --git a/scripts/cloud/install.sh b/scripts/cloud/install.sh
index 44475293f91c..92be05f330a1 100644
--- a/scripts/cloud/install.sh
+++ b/scripts/cloud/install.sh
@@ -423,9 +423,10 @@ spec:
         type: NodePort
       kind: DaemonSet
       tolerations:
-        - key: node-role.kubernetes.io/control-plane
-          operator: Exists
-          effect: NoSchedule
+        - effect: "NoExecute"
+          operator: "Exists"
+        - effect: "NoSchedule"
+          operator: "Exists"
       resources:
         requests:
           cpu: 256m
@@ -436,11 +437,12 @@ spec:
       autoscaling:
         enabled: true
       nodeSelector:
-        node-role.kubernetes.io/control-plane: ''
+        node-role.kubernetes.io/control-plane: "true"
       tolerations:
-        - key: node-role.kubernetes.io/control-plane
-          operator: Exists
-          effect: NoSchedule
+        - effect: "NoExecute"
+          operator: "Exists"
+        - effect: "NoSchedule"
+          operator: "Exists"
       resources:
         requests:
           cpu: 256m
diff --git a/scripts/resolve-tag-image.sh b/scripts/resolve-tag-image.sh
index 36fad1db802e..60e681fc037f 100644
--- a/scripts/resolve-tag-image.sh
+++ b/scripts/resolve-tag-image.sh
@@ -7,7 +7,7 @@ push_image=${1:-false}
 release=${2:-false}
 
 if [[ "$push_image" == true ]]; then
-  tag_name=${3}
+  tag_name=${3:-latest}
 elif [[ "$release" == true ]]; then
   tag_name=${GITHUB_REF#refs/tags/}
 fi
diff --git a/service/account/api/api.go b/service/account/api/api.go
index 0928529fbfda..0c675e0a5d76 100644
--- a/service/account/api/api.go
+++ b/service/account/api/api.go
@@ -1025,27 +1025,35 @@ func GetUserRealNameInfo(c *gin.Context) {
 	}
 
 	userRealNameInfo, err := dao.DBClient.GetUserRealNameInfo(req)
-
-	if err != nil {
+	if err != nil && !errors.Is(err, gorm.ErrRecordNotFound) {
 		c.JSON(http.StatusInternalServerError, helper.ErrorMessage{Error: fmt.Sprintf("failed to get user real name info: %v", err)})
 		return
 	}
 
-	if userRealNameInfo == nil {
-		c.JSON(http.StatusInternalServerError, helper.ErrorMessage{Error: "user real name info not found"})
+	enterpriseRealNameInfo, err := dao.DBClient.GetEnterpriseRealNameInfo(req)
+	if err != nil && !errors.Is(err, gorm.ErrRecordNotFound) {
+		c.JSON(http.StatusInternalServerError, helper.ErrorMessage{Error: fmt.Sprintf("failed to get enterprise real name info: %v", err)})
 		return
 	}
 
-	if !userRealNameInfo.IsVerified {
-		c.JSON(http.StatusInternalServerError, helper.ErrorMessage{Error: "user real name info is not verified"})
+	isVerified := (userRealNameInfo != nil && userRealNameInfo.IsVerified) ||
+		(enterpriseRealNameInfo != nil && enterpriseRealNameInfo.IsVerified)
+
+	if !isVerified {
+		c.JSON(http.StatusOK, helper.GetRealNameInfoResp{
+			Data: helper.GetRealNameInfoRespData{
+				UserID:     req.UserID,
+				IsRealName: false,
+			},
+			Message: "user is not verified",
+		})
 		return
 	}
 
-	// Return success response
 	c.JSON(http.StatusOK, helper.GetRealNameInfoResp{
 		Data: helper.GetRealNameInfoRespData{
 			UserID:     req.UserID,
-			IsRealName: userRealNameInfo.IsVerified,
+			IsRealName: true,
 		},
 		Message: "successfully get user real name info",
 	})
diff --git a/service/account/dao/init.go b/service/account/dao/init.go
index 7b2ff2eeda03..c0105f364c20 100644
--- a/service/account/dao/init.go
+++ b/service/account/dao/init.go
@@ -60,6 +60,7 @@ func Init(ctx context.Context) error {
 	}
 
 	file := helper.ConfigPath
+	Cfg = &Config{} // Initialize Cfg regardless of file existence
 	if _, err := os.Stat(file); err == nil {
 		data, err := os.ReadFile(file)
 		if err != nil {
@@ -67,8 +68,7 @@ func Init(ctx context.Context) error {
 		}
 		fmt.Printf("config file found, use config file: \n%s\n", file)
 
-		Cfg = &Config{}
-		// json marshal
+		// json unmarshal
 		if err = json.Unmarshal(data, Cfg); err != nil {
 			return fmt.Errorf("unmarshal config file error: %v", err)
 		}
diff --git a/service/account/dao/interface.go b/service/account/dao/interface.go
index ebf798c91121..960cd9511abe 100644
--- a/service/account/dao/interface.go
+++ b/service/account/dao/interface.go
@@ -2,6 +2,7 @@ package dao
 
 import (
 	"context"
+	"errors"
 	"fmt"
 	"strconv"
 	"strings"
@@ -67,6 +68,7 @@ type Interface interface {
 	GetRechargeDiscount(req helper.AuthReq) (helper.RechargeDiscountResp, error)
 	ProcessPendingTaskRewards() error
 	GetUserRealNameInfo(req *helper.GetRealNameInfoReq) (*types.UserRealNameInfo, error)
+	GetEnterpriseRealNameInfo(req *helper.GetRealNameInfoReq) (*types.EnterpriseRealNameInfo, error)
 	ReconcileUnsettledLLMBilling(startTime, endTime time.Time) error
 	ReconcileActiveBilling(startTime, endTime time.Time) error
 	ArchiveHourlyBilling(hourStart, hourEnd time.Time) error
@@ -1574,12 +1576,29 @@ func (m *Account) GetUserRealNameInfo(req *helper.GetRealNameInfoReq) (*types.Us
 	userRealNameInfo, err := m.ck.GetUserRealNameInfoByUserID(req.UserID)
 
 	if err != nil {
+		if errors.Is(err, gorm.ErrRecordNotFound) {
+			return nil, gorm.ErrRecordNotFound
+		}
 		return nil, fmt.Errorf("failed to get user real name info: %v", err)
 	}
 
 	return userRealNameInfo, nil
 }
 
+func (m *Account) GetEnterpriseRealNameInfo(req *helper.GetRealNameInfoReq) (*types.EnterpriseRealNameInfo, error) {
+	// get enterprise info
+	enterpriseRealNameInfo, err := m.ck.GetEnterpriseRealNameInfoByUserID(req.UserID)
+
+	if err != nil {
+		if errors.Is(err, gorm.ErrRecordNotFound) {
+			return nil, gorm.ErrRecordNotFound
+		}
+		return nil, fmt.Errorf("failed to get enterprise real name info: %v", err)
+	}
+
+	return enterpriseRealNameInfo, nil
+}
+
 func (m *Account) ReconcileActiveBilling(startTime, endTime time.Time) error {
 	ctx := context.Background()
 	billings := make(map[uuid.UUID]*billingBatch)
diff --git a/service/account/dao/interface_test.go b/service/account/dao/interface_test.go
index cf6259a2071d..344cd26bbbb5 100644
--- a/service/account/dao/interface_test.go
+++ b/service/account/dao/interface_test.go
@@ -645,6 +645,28 @@ func TestAccount_GetUserRealNameInfo(t *testing.T) {
 	t.Logf("userRealNameInfo = %+v", userRealNameInfo)
 }
 
+func TestAccount_GetEnterpriseRealNameInfo(t *testing.T) {
+	db, err := newAccountForTest("", os.Getenv("GLOBAL_COCKROACH_URI"), os.Getenv("LOCAL_COCKROACH_URI"))
+	if err != nil {
+		t.Fatalf("NewAccountInterface() error = %v", err)
+		return
+	}
+
+	enterpriseRealNameInfo, err := db.GetEnterpriseRealNameInfo(&helper.GetRealNameInfoReq{
+		AuthBase: helper.AuthBase{
+			Auth: &helper.Auth{
+				UserID: "E1xAJ0fy4k",
+			},
+		},
+	})
+
+	if err != nil {
+		t.Fatalf("GetUserRealNameInfo() error = %v", err)
+		return
+	}
+	t.Logf("enterpriseRealNameInfo = %+v", enterpriseRealNameInfo)
+}
+
 func init() {
 	// set env
 	os.Setenv("MONGO_URI", "")
diff --git a/service/aiproxy/Dockerfile b/service/aiproxy/Dockerfile
index f078274204e8..8602bc0814b0 100644
--- a/service/aiproxy/Dockerfile
+++ b/service/aiproxy/Dockerfile
@@ -1,7 +1,15 @@
-FROM gcr.io/distroless/static:nonroot
+FROM alpine:latest
+
 ARG TARGETARCH
-COPY bin/service-aiproxy-$TARGETARCH /manager
+COPY bin/service-aiproxy-$TARGETARCH /aiproxy
+
+ENV PUID=0 PGID=0 UMASK=022
+
+ENV FFPROBE_ENABLED=true
+
 EXPOSE 3000
-USER 65532:65532
 
-ENTRYPOINT ["/manager"]
\ No newline at end of file
+RUN apk add --no-cache ca-certificates tzdata ffmpeg && \
+    rm -rf /var/cache/apk/*
+
+ENTRYPOINT ["/aiproxy"]
diff --git a/service/aiproxy/README.md b/service/aiproxy/README.md
index 442a287699c4..50c0e872935c 100644
--- a/service/aiproxy/README.md
+++ b/service/aiproxy/README.md
@@ -14,3 +14,13 @@ sealos run ghcr.io/labring/sealos-cloud-aiproxy-service:latest \
     -e cloudDomain=<cloud-domain> \
     -e LOG_SQL_DSN=""
 ```
+
+# Envs
+
+- `ADMIN_KEY`: The admin key for the AI Proxy Service, admin key is used to admin api and relay api, default is empty
+- `SEALOS_JWT_KEY`: Used to sealos balance service, default is empty
+- `SQL_DSN`: The database connection string, default is empty
+- `LOG_SQL_DSN`: The log database connection string, default is empty
+- `REDIS_CONN_STRING`: The redis connection string, default is empty
+- `BALANCE_SEALOS_CHECK_REAL_NAME_ENABLE`: Whether to check real name, default is `false`
+- `BALANCE_SEALOS_NO_REAL_NAME_USED_AMOUNT_LIMIT`: The amount of used balance when the user has no real name, default is `1`
diff --git a/service/aiproxy/common/audio/audio.go b/service/aiproxy/common/audio/audio.go
new file mode 100644
index 000000000000..d7b2d416deee
--- /dev/null
+++ b/service/aiproxy/common/audio/audio.go
@@ -0,0 +1,76 @@
+package audio
+
+import (
+	"errors"
+	"io"
+	"os/exec"
+	"strconv"
+	"strings"
+
+	"github.com/labring/sealos/service/aiproxy/common/config"
+)
+
+var ErrAudioDurationNAN = errors.New("audio duration is N/A")
+
+func GetAudioDuration(audio io.Reader) (float64, error) {
+	if !config.FfprobeEnabled {
+		return 0, nil
+	}
+
+	ffprobeCmd := exec.Command(
+		"ffprobe",
+		"-v", "error",
+		"-select_streams", "a:0",
+		"-show_entries", "stream=duration",
+		"-of", "default=noprint_wrappers=1:nokey=1",
+		"-i", "-",
+	)
+	ffprobeCmd.Stdin = audio
+	output, err := ffprobeCmd.Output()
+	if err != nil {
+		return 0, err
+	}
+
+	str := strings.TrimSpace(string(output))
+
+	if str == "" || str == "N/A" {
+		return 0, ErrAudioDurationNAN
+	}
+
+	duration, err := strconv.ParseFloat(str, 64)
+	if err != nil {
+		return 0, err
+	}
+	return duration, nil
+}
+
+func GetAudioDurationFromFilePath(filePath string) (float64, error) {
+	if !config.FfprobeEnabled {
+		return 0, nil
+	}
+
+	ffprobeCmd := exec.Command(
+		"ffprobe",
+		"-v", "error",
+		"-select_streams", "a:0",
+		"-show_entries", "format=duration",
+		"-of", "default=noprint_wrappers=1:nokey=1",
+		"-i", filePath,
+	)
+	output, err := ffprobeCmd.Output()
+	if err != nil {
+		return 0, err
+	}
+
+	str := strings.TrimSpace(string(output))
+
+	if str == "" || str == "N/A" {
+		return 0, ErrAudioDurationNAN
+	}
+
+	duration, err := strconv.ParseFloat(str, 64)
+	if err != nil {
+		return 0, err
+	}
+	return duration, nil
+}
diff --git a/service/aiproxy/common/balance/balance.go b/service/aiproxy/common/balance/balance.go
index b1eac62231a1..934448d706b6 100644
--- a/service/aiproxy/common/balance/balance.go
+++ b/service/aiproxy/common/balance/balance.go
@@ -1,14 +1,24 @@
 package balance
 
-import "context"
+import (
+	"context"
+
+	"github.com/labring/sealos/service/aiproxy/model"
+)
 
 type GroupBalance interface {
-	GetGroupRemainBalance(ctx context.Context, group string) (float64, PostGroupConsumer, error)
+	GetGroupRemainBalance(ctx context.Context, group model.GroupCache) (float64, PostGroupConsumer, error)
 }
 
 type PostGroupConsumer interface {
 	PostGroupConsume(ctx context.Context, tokenName string, usage float64) (float64, error)
-	GetBalance(ctx context.Context) (float64, error)
 }
 
-var Default GroupBalance = NewMockGroupBalance()
+var (
+	mock    GroupBalance = NewMockGroupBalance()
+	Default              = mock
+)
+
+func MockGetGroupRemainBalance(ctx context.Context, group model.GroupCache) (float64, PostGroupConsumer, error) {
+	return mock.GetGroupRemainBalance(ctx, group)
+}
diff --git a/service/aiproxy/common/balance/mock.go b/service/aiproxy/common/balance/mock.go
index 8cb2ddc7e86c..fe94e2247ca8 100644
--- a/service/aiproxy/common/balance/mock.go
+++ b/service/aiproxy/common/balance/mock.go
@@ -1,6 +1,10 @@
 package balance
 
-import "context"
+import (
+	"context"
+
+	"github.com/labring/sealos/service/aiproxy/model"
+)
 
 var _ GroupBalance = (*MockGroupBalance)(nil)
 
@@ -14,14 +18,10 @@ func NewMockGroupBalance() *MockGroupBalance {
 	return &MockGroupBalance{}
 }
 
-func (q *MockGroupBalance) GetGroupRemainBalance(_ context.Context, _ string) (float64, PostGroupConsumer, error) {
+func (q *MockGroupBalance) GetGroupRemainBalance(_ context.Context, _ model.GroupCache) (float64, PostGroupConsumer, error) {
 	return mockBalance, q, nil
 }
 
 func (q *MockGroupBalance) PostGroupConsume(_ context.Context, _ string, usage float64) (float64, error) {
 	return usage, nil
 }
-
-func (q *MockGroupBalance) GetBalance(_ context.Context) (float64, error) {
-	return mockBalance, nil
-}
diff --git a/service/aiproxy/common/balance/sealos.go b/service/aiproxy/common/balance/sealos.go
index 872f69fb9953..f7c8a386d65e 100644
--- a/service/aiproxy/common/balance/sealos.go
+++ b/service/aiproxy/common/balance/sealos.go
@@ -14,6 +14,7 @@ import (
 	"github.com/labring/sealos/service/aiproxy/common"
 	"github.com/labring/sealos/service/aiproxy/common/conv"
 	"github.com/labring/sealos/service/aiproxy/common/env"
+	"github.com/labring/sealos/service/aiproxy/model"
 	"github.com/redis/go-redis/v9"
 	"github.com/shopspring/decimal"
 	log "github.com/sirupsen/logrus"
@@ -25,6 +26,7 @@ const (
 	appType               = "LLM-TOKEN"
 	sealosRequester       = "sealos-admin"
 	sealosGroupBalanceKey = "sealos:balance:%s"
+	sealosUserRealNameKey = "sealos:realName:%s"
 	getBalanceRetry       = 3
 )
 
@@ -38,6 +40,11 @@ var (
 	sealosCacheExpire       = 3 * time.Minute
 )
 
+var (
+	sealosCheckRealNameEnable       = env.Bool("BALANCE_SEALOS_CHECK_REAL_NAME_ENABLE", false)
+	sealosNoRealNameUsedAmountLimit = env.Float64("BALANCE_SEALOS_NO_REAL_NAME_USED_AMOUNT_LIMIT", 1)
+)
+
 type Sealos struct {
 	accountURL string
 }
@@ -145,12 +152,20 @@ func cacheDecreaseGroupBalance(ctx context.Context, group string, amount int64)
 	return decreaseGroupBalanceScript.Run(ctx, common.RDB, []string{fmt.Sprintf(sealosGroupBalanceKey, group)}, amount).Err()
 }
 
-func (s *Sealos) GetGroupRemainBalance(ctx context.Context, group string) (float64, PostGroupConsumer, error) {
+var ErrNoRealNameUsedAmountLimit = errors.New("达到未实名用户使用额度限制，请实名认证")
+
+func (s *Sealos) GetGroupRemainBalance(ctx context.Context, group model.GroupCache) (float64, PostGroupConsumer, error) {
 	var errs []error
 	for i := 0; ; i++ {
-		balance, consumer, err := s.getGroupRemainBalance(ctx, group)
+		balance, userUID, err := s.getGroupRemainBalance(ctx, group.ID)
 		if err == nil {
-			return balance, consumer, nil
+			if sealosCheckRealNameEnable &&
+				group.UsedAmount > sealosNoRealNameUsedAmountLimit &&
+				!s.checkRealName(ctx, userUID) {
+				return 0, nil, ErrNoRealNameUsedAmountLimit
+			}
+			return decimal.NewFromInt(balance).Div(decimalBalancePrecision).InexactFloat64(),
+				newSealosPostGroupConsumer(s.accountURL, group.ID, userUID), nil
 		}
 		errs = append(errs, err)
 		if i == getBalanceRetry-1 {
@@ -160,26 +175,105 @@ func (s *Sealos) GetGroupRemainBalance(ctx context.Context, group string) (float
 	}
 }
 
+func cacheGetUserRealName(ctx context.Context, userUID string) (bool, error) {
+	if !common.RedisEnabled || !sealosRedisCacheEnable {
+		return true, redis.Nil
+	}
+	ctx, cancel := context.WithTimeout(ctx, 5*time.Second)
+	defer cancel()
+	realName, err := common.RDB.Get(ctx, fmt.Sprintf(sealosUserRealNameKey, userUID)).Bool()
+	if err != nil {
+		return false, err
+	}
+	return realName, nil
+}
+
+func cacheSetUserRealName(ctx context.Context, userUID string, realName bool) error {
+	if !common.RedisEnabled || !sealosRedisCacheEnable {
+		return nil
+	}
+	ctx, cancel := context.WithTimeout(ctx, 5*time.Second)
+	defer cancel()
+	var expireTime time.Duration
+	if realName {
+		expireTime = time.Hour * 12
+	} else {
+		expireTime = time.Minute * 1
+	}
+	return common.RDB.Set(ctx, fmt.Sprintf(sealosUserRealNameKey, userUID), realName, expireTime).Err()
+}
+
+func (s *Sealos) checkRealName(ctx context.Context, userUID string) bool {
+	if cache, err := cacheGetUserRealName(ctx, userUID); err == nil {
+		return cache
+	} else if !errors.Is(err, redis.Nil) {
+		log.Errorf("get user (%s) real name cache failed: %s", userUID, err)
+	}
+
+	realName, err := s.fetchRealNameFromAPI(ctx, userUID)
+	if err != nil {
+		log.Errorf("fetch user (%s) real name failed: %s", userUID, err)
+		return true
+	}
+
+	if err := cacheSetUserRealName(ctx, userUID, realName); err != nil {
+		log.Errorf("set user (%s) real name cache failed: %s", userUID, err)
+	}
+
+	return realName
+}
+
+type sealosGetRealNameInfoResp struct {
+	IsRealName bool   `json:"isRealName"`
+	Error      string `json:"error"`
+}
+
+func (s *Sealos) fetchRealNameFromAPI(ctx context.Context, userUID string) (bool, error) {
+	ctx, cancel := context.WithTimeout(ctx, 5*time.Second)
+	defer cancel()
+	req, err := http.NewRequestWithContext(ctx, http.MethodGet,
+		fmt.Sprintf("%s/admin/v1alpha1/real-name-info?userUID=%s", s.accountURL, userUID), nil)
+	if err != nil {
+		return false, err
+	}
+
+	req.Header.Set("Authorization", "Bearer "+jwtToken)
+	resp, err := sealosHTTPClient.Do(req)
+	if err != nil {
+		return false, err
+	}
+	defer resp.Body.Close()
+
+	var sealosResp sealosGetRealNameInfoResp
+	if err := json.NewDecoder(resp.Body).Decode(&sealosResp); err != nil {
+		return false, err
+	}
+
+	if resp.StatusCode != http.StatusOK || sealosResp.Error != "" {
+		return false, fmt.Errorf("get user (%s) real name failed with status code %d, error: %s", userUID, resp.StatusCode, sealosResp.Error)
+	}
+
+	return sealosResp.IsRealName, nil
+}
+
 // GroupBalance interface implementation
-func (s *Sealos) getGroupRemainBalance(ctx context.Context, group string) (float64, PostGroupConsumer, error) {
+func (s *Sealos) getGroupRemainBalance(ctx context.Context, group string) (int64, string, error) {
 	if cache, err := cacheGetGroupBalance(ctx, group); err == nil && cache.UserUID != "" {
-		return decimal.NewFromInt(cache.Balance).Div(decimalBalancePrecision).InexactFloat64(),
-			newSealosPostGroupConsumer(s.accountURL, group, cache.UserUID, cache.Balance), nil
+		return cache.Balance, cache.UserUID, nil
 	} else if err != nil && !errors.Is(err, redis.Nil) {
 		log.Errorf("get group (%s) balance cache failed: %s", group, err)
 	}
 
 	balance, userUID, err := s.fetchBalanceFromAPI(ctx, group)
 	if err != nil {
-		return 0, nil, err
+		return 0, "", err
 	}
 
 	if err := cacheSetGroupBalance(ctx, group, balance, userUID); err != nil {
 		log.Errorf("set group (%s) balance cache failed: %s", group, err)
 	}
 
-	return decimal.NewFromInt(balance).Div(decimalBalancePrecision).InexactFloat64(),
-		newSealosPostGroupConsumer(s.accountURL, group, userUID, balance), nil
+	return balance, userUID, nil
 }
 
 func (s *Sealos) fetchBalanceFromAPI(ctx context.Context, group string) (balance int64, userUID string, err error) {
@@ -218,22 +312,16 @@ type SealosPostGroupConsumer struct {
 	accountURL string
 	group      string
 	uid        string
-	balance    int64
 }
 
-func newSealosPostGroupConsumer(accountURL, group, uid string, balance int64) *SealosPostGroupConsumer {
+func newSealosPostGroupConsumer(accountURL, group, uid string) *SealosPostGroupConsumer {
 	return &SealosPostGroupConsumer{
 		accountURL: accountURL,
 		group:      group,
 		uid:        uid,
-		balance:    balance,
 	}
 }
 
-func (s *SealosPostGroupConsumer) GetBalance(_ context.Context) (float64, error) {
-	return decimal.NewFromInt(s.balance).Div(decimalBalancePrecision).InexactFloat64(), nil
-}
-
 func (s *SealosPostGroupConsumer) PostGroupConsume(ctx context.Context, tokenName string, usage float64) (float64, error) {
 	amount := s.calculateAmount(usage)
 
diff --git a/service/aiproxy/common/client/init.go b/service/aiproxy/common/client/init.go
deleted file mode 100644
index 18a45c9d70ff..000000000000
--- a/service/aiproxy/common/client/init.go
+++ /dev/null
@@ -1,63 +0,0 @@
-package client
-
-import (
-	"fmt"
-	"net/http"
-	"net/url"
-	"time"
-
-	"github.com/labring/sealos/service/aiproxy/common/config"
-	log "github.com/sirupsen/logrus"
-)
-
-var (
-	HTTPClient                   *http.Client
-	ImpatientHTTPClient          *http.Client
-	UserContentRequestHTTPClient *http.Client
-)
-
-func Init() {
-	if config.UserContentRequestProxy != "" {
-		log.Info(fmt.Sprintf("using %s as proxy to fetch user content", config.UserContentRequestProxy))
-		proxyURL, err := url.Parse(config.UserContentRequestProxy)
-		if err != nil {
-			log.Fatal("USER_CONTENT_REQUEST_PROXY set but invalid: " + config.UserContentRequestProxy)
-		}
-		transport := &http.Transport{
-			Proxy: http.ProxyURL(proxyURL),
-		}
-		UserContentRequestHTTPClient = &http.Client{
-			Transport: transport,
-			Timeout:   time.Second * time.Duration(config.UserContentRequestTimeout),
-		}
-	} else {
-		UserContentRequestHTTPClient = &http.Client{}
-	}
-	var transport http.RoundTripper
-	if config.RelayProxy != "" {
-		log.Info(fmt.Sprintf("using %s as api relay proxy", config.RelayProxy))
-		proxyURL, err := url.Parse(config.RelayProxy)
-		if err != nil {
-			log.Fatal("USER_CONTENT_REQUEST_PROXY set but invalid: " + config.UserContentRequestProxy)
-		}
-		transport = &http.Transport{
-			Proxy: http.ProxyURL(proxyURL),
-		}
-	}
-
-	if config.RelayTimeout == 0 {
-		HTTPClient = &http.Client{
-			Transport: transport,
-		}
-	} else {
-		HTTPClient = &http.Client{
-			Timeout:   time.Duration(config.RelayTimeout) * time.Second,
-			Transport: transport,
-		}
-	}
-
-	ImpatientHTTPClient = &http.Client{
-		Timeout:   5 * time.Second,
-		Transport: transport,
-	}
-}
diff --git a/service/aiproxy/common/config/config.go b/service/aiproxy/common/config/config.go
index d68f359b1c89..4ec33efa1575 100644
--- a/service/aiproxy/common/config/config.go
+++ b/service/aiproxy/common/config/config.go
@@ -1,79 +1,63 @@
 package config
 
 import (
+	"math"
 	"os"
 	"slices"
-	"strconv"
-	"sync"
 	"sync/atomic"
-	"time"
 
 	"github.com/labring/sealos/service/aiproxy/common/env"
 )
 
 var (
-	OptionMap        map[string]string
-	OptionMapRWMutex sync.RWMutex
+	DebugEnabled    = env.Bool("DEBUG", false)
+	DebugSQLEnabled = env.Bool("DEBUG_SQL", false)
 )
 
 var (
-	DebugEnabled, _    = strconv.ParseBool(os.Getenv("DEBUG"))
-	DebugSQLEnabled, _ = strconv.ParseBool(os.Getenv("DEBUG_SQL"))
+	DisableAutoMigrateDB = env.Bool("DISABLE_AUTO_MIGRATE_DB", false)
+	OnlyOneLogFile       = env.Bool("ONLY_ONE_LOG_FILE", false)
+	AdminKey             = os.Getenv("ADMIN_KEY")
+	FfprobeEnabled       = env.Bool("FFPROBE_ENABLED", false)
 )
 
 var (
-	// 当测试或请求的时候发生错误是否自动禁用渠道
-	automaticDisableChannelEnabled atomic.Bool
-	// 当测试成功是否自动启用渠道
-	automaticEnableChannelWhenTestSucceedEnabled atomic.Bool
-	// 是否近似计算token
-	approximateTokenEnabled atomic.Bool
-	// 重试次数
-	retryTimes atomic.Int64
-	// 暂停服务
-	disableServe atomic.Bool
-	// log detail 存储时间(小时)
+	disableServe          atomic.Bool
 	logDetailStorageHours int64 = 3 * 24
+	internalToken         atomic.Value
 )
 
-func GetLogDetailStorageHours() int64 {
-	return atomic.LoadInt64(&logDetailStorageHours)
-}
-
-func SetLogDetailStorageHours(hours int64) {
-	atomic.StoreInt64(&logDetailStorageHours, hours)
-}
-
-func GetDisableServe() bool {
-	return disableServe.Load()
-}
-
-func SetDisableServe(disabled bool) {
-	disableServe.Store(disabled)
-}
-
-func GetAutomaticDisableChannelEnabled() bool {
-	return automaticDisableChannelEnabled.Load()
-}
+var (
+	retryTimes              atomic.Int64
+	enableModelErrorAutoBan atomic.Bool
+	modelErrorAutoBanRate   = math.Float64bits(0.5)
+	timeoutWithModelType    atomic.Value
+	disableModelConfig      = env.Bool("DISABLE_MODEL_CONFIG", false)
+)
 
-func SetAutomaticDisableChannelEnabled(enabled bool) {
-	automaticDisableChannelEnabled.Store(enabled)
-}
+var (
+	defaultChannelModels       atomic.Value
+	defaultChannelModelMapping atomic.Value
+	groupMaxTokenNum           atomic.Int64
+	groupConsumeLevelRatio     atomic.Value
+)
 
-func GetAutomaticEnableChannelWhenTestSucceedEnabled() bool {
-	return automaticEnableChannelWhenTestSucceedEnabled.Load()
-}
+var geminiSafetySetting atomic.Value
 
-func SetAutomaticEnableChannelWhenTestSucceedEnabled(enabled bool) {
-	automaticEnableChannelWhenTestSucceedEnabled.Store(enabled)
-}
+var billingEnabled atomic.Bool
 
-func GetApproximateTokenEnabled() bool {
-	return approximateTokenEnabled.Load()
+func init() {
+	timeoutWithModelType.Store(make(map[int]int64))
+	defaultChannelModels.Store(make(map[int][]string))
+	defaultChannelModelMapping.Store(make(map[int]map[string]string))
+	groupConsumeLevelRatio.Store(make(map[float64]float64))
+	geminiSafetySetting.Store("BLOCK_NONE")
+	billingEnabled.Store(true)
+	internalToken.Store(os.Getenv("INTERNAL_TOKEN"))
 }
 
-func SetApproximateTokenEnabled(enabled bool) {
-	approximateTokenEnabled.Store(enabled)
+func GetDisableModelConfig() bool {
+	return disableModelConfig
 }
 
 func GetRetryTimes() int64 {
@@ -81,57 +65,53 @@ func GetRetryTimes() int64 {
 }
 
 func SetRetryTimes(times int64) {
+	times = env.Int64("RETRY_TIMES", times)
 	retryTimes.Store(times)
 }
 
-var DisableAutoMigrateDB = os.Getenv("DISABLE_AUTO_MIGRATE_DB") == "true"
-
-var RelayTimeout = env.Int("RELAY_TIMEOUT", 0) // unit is second
-
-var RateLimitKeyExpirationDuration = 20 * time.Minute
+func GetEnableModelErrorAutoBan() bool {
+	return enableModelErrorAutoBan.Load()
+}
 
-var OnlyOneLogFile = env.Bool("ONLY_ONE_LOG_FILE", false)
+func SetEnableModelErrorAutoBan(enabled bool) {
+	enabled = env.Bool("ENABLE_MODEL_ERROR_AUTO_BAN", enabled)
+	enableModelErrorAutoBan.Store(enabled)
+}
 
-var (
-	// 代理地址
-	RelayProxy = env.String("RELAY_PROXY", "")
-	// 用户内容请求代理地址
-	UserContentRequestProxy = env.String("USER_CONTENT_REQUEST_PROXY", "")
-	// 用户内容请求超时时间，单位为秒
-	UserContentRequestTimeout = env.Int("USER_CONTENT_REQUEST_TIMEOUT", 30)
-)
+func GetModelErrorAutoBanRate() float64 {
+	return math.Float64frombits(atomic.LoadUint64(&modelErrorAutoBanRate))
+}
 
-var AdminKey = env.String("ADMIN_KEY", "")
+func SetModelErrorAutoBanRate(rate float64) {
+	rate = env.Float64("MODEL_ERROR_AUTO_BAN_RATE", rate)
+	atomic.StoreUint64(&modelErrorAutoBanRate, math.Float64bits(rate))
+}
 
-var (
-	globalAPIRateLimitNum      atomic.Int64
-	defaultChannelModels       atomic.Value
-	defaultChannelModelMapping atomic.Value
-	defaultGroupQPM            atomic.Int64
-	groupMaxTokenNum           atomic.Int32
-)
+func GetTimeoutWithModelType() map[int]int64 {
+	return timeoutWithModelType.Load().(map[int]int64)
+}
 
-func init() {
-	defaultChannelModels.Store(make(map[int][]string))
-	defaultChannelModelMapping.Store(make(map[int]map[string]string))
+func SetTimeoutWithModelType(timeout map[int]int64) {
+	timeout = env.JSON("TIMEOUT_WITH_MODEL_TYPE", timeout)
+	timeoutWithModelType.Store(timeout)
 }
 
-// 全局qpm，不是根据ip限制，而是所有请求共享一个qpm
-func GetGlobalAPIRateLimitNum() int64 {
-	return globalAPIRateLimitNum.Load()
+func GetLogDetailStorageHours() int64 {
+	return atomic.LoadInt64(&logDetailStorageHours)
 }
 
-func SetGlobalAPIRateLimitNum(num int64) {
-	globalAPIRateLimitNum.Store(num)
+func SetLogDetailStorageHours(hours int64) {
+	hours = env.Int64("LOG_DETAIL_STORAGE_HOURS", hours)
+	atomic.StoreInt64(&logDetailStorageHours, hours)
 }
 
-// group默认qpm，如果group没有设置qpm，则使用该qpm
-func GetDefaultGroupQPM() int64 {
-	return defaultGroupQPM.Load()
+func GetDisableServe() bool {
+	return disableServe.Load()
 }
 
-func SetDefaultGroupQPM(qpm int64) {
-	defaultGroupQPM.Store(qpm)
+func SetDisableServe(disabled bool) {
+	disabled = env.Bool("DISABLE_SERVE", disabled)
+	disableServe.Store(disabled)
 }
 
 func GetDefaultChannelModels() map[int][]string {
@@ -139,6 +119,7 @@ func GetDefaultChannelModels() map[int][]string {
 }
 
 func SetDefaultChannelModels(models map[int][]string) {
+	models = env.JSON("DEFAULT_CHANNEL_MODELS", models)
 	for key, ms := range models {
 		slices.Sort(ms)
 		models[key] = slices.Compact(ms)
@@ -151,26 +132,27 @@ func GetDefaultChannelModelMapping() map[int]map[string]string {
 }
 
 func SetDefaultChannelModelMapping(mapping map[int]map[string]string) {
+	mapping = env.JSON("DEFAULT_CHANNEL_MODEL_MAPPING", mapping)
 	defaultChannelModelMapping.Store(mapping)
 }
 
-// 那个group最多可创建的token数量，0表示不限制
-func GetGroupMaxTokenNum() int32 {
-	return groupMaxTokenNum.Load()
+func GetGroupConsumeLevelRatio() map[float64]float64 {
+	return groupConsumeLevelRatio.Load().(map[float64]float64)
 }
 
-func SetGroupMaxTokenNum(num int32) {
-	groupMaxTokenNum.Store(num)
+func SetGroupConsumeLevelRatio(ratio map[float64]float64) {
+	ratio = env.JSON("GROUP_CONSUME_LEVEL_RATIO", ratio)
+	groupConsumeLevelRatio.Store(ratio)
 }
 
-var (
-	geminiSafetySetting atomic.Value
-	geminiVersion       atomic.Value
-)
+// GetGroupMaxTokenNum returns max number of tokens per group, 0 means unlimited
+func GetGroupMaxTokenNum() int64 {
+	return groupMaxTokenNum.Load()
+}
 
-func init() {
-	geminiSafetySetting.Store("BLOCK_NONE")
-	geminiVersion.Store("v1beta")
+func SetGroupMaxTokenNum(num int64) {
+	num = env.Int64("GROUP_MAX_TOKEN_NUM", num)
+	groupMaxTokenNum.Store(num)
 }
 
 func GetGeminiSafetySetting() string {
@@ -178,27 +160,24 @@ func GetGeminiSafetySetting() string {
 }
 
 func SetGeminiSafetySetting(setting string) {
+	setting = env.String("GEMINI_SAFETY_SETTING", setting)
 	geminiSafetySetting.Store(setting)
 }
 
-func GetGeminiVersion() string {
-	return geminiVersion.Load().(string)
-}
-
-func SetGeminiVersion(version string) {
-	geminiVersion.Store(version)
-}
-
-var billingEnabled atomic.Bool
-
-func init() {
-	billingEnabled.Store(true)
-}
-
 func GetBillingEnabled() bool {
 	return billingEnabled.Load()
 }
 
 func SetBillingEnabled(enabled bool) {
+	enabled = env.Bool("BILLING_ENABLED", enabled)
 	billingEnabled.Store(enabled)
 }
+
+func GetInternalToken() string {
+	return internalToken.Load().(string)
+}
+
+func SetInternalToken(token string) {
+	token = env.String("INTERNAL_TOKEN", token)
+	internalToken.Store(token)
+}
diff --git a/service/aiproxy/common/consume/consume.go b/service/aiproxy/common/consume/consume.go
new file mode 100644
index 000000000000..1dd5d8c84622
--- /dev/null
+++ b/service/aiproxy/common/consume/consume.go
@@ -0,0 +1,181 @@
+package consume
+
+import (
+	"context"
+	"sync"
+
+	"github.com/labring/sealos/service/aiproxy/common/balance"
+	"github.com/labring/sealos/service/aiproxy/model"
+	"github.com/labring/sealos/service/aiproxy/relay/meta"
+	relaymodel "github.com/labring/sealos/service/aiproxy/relay/model"
+	"github.com/shopspring/decimal"
+	log "github.com/sirupsen/logrus"
+)
+
+var consumeWaitGroup sync.WaitGroup
+
+func Wait() {
+	consumeWaitGroup.Wait()
+}
+
+func AsyncConsume(
+	postGroupConsumer balance.PostGroupConsumer,
+	code int,
+	usage *relaymodel.Usage,
+	meta *meta.Meta,
+	inputPrice,
+	outputPrice float64,
+	content string,
+	ip string,
+	requestDetail *model.RequestDetail,
+) {
+	if meta.IsChannelTest {
+		return
+	}
+
+	consumeWaitGroup.Add(1)
+	defer func() {
+		consumeWaitGroup.Done()
+		if r := recover(); r != nil {
+			log.Errorf("panic in consume: %v", r)
+		}
+	}()
+
+	go Consume(
+		context.Background(),
+		postGroupConsumer,
+		code,
+		usage,
+		meta,
+		inputPrice,
+		outputPrice,
+		content,
+		ip,
+		requestDetail,
+	)
+}
+
+func Consume(
+	ctx context.Context,
+	postGroupConsumer balance.PostGroupConsumer,
+	code int,
+	usage *relaymodel.Usage,
+	meta *meta.Meta,
+	inputPrice,
+	outputPrice float64,
+	content string,
+	ip string,
+	requestDetail *model.RequestDetail,
+) {
+	if meta.IsChannelTest {
+		return
+	}
+
+	amount := CalculateAmount(usage, inputPrice, outputPrice)
+
+	amount = consumeAmount(ctx, amount, postGroupConsumer, meta)
+
+	err := recordConsume(meta, code, usage, inputPrice, outputPrice, content, ip, requestDetail, amount)
+	if err != nil {
+		log.Error("error batch record consume: " + err.Error())
+	}
+}
+
+func consumeAmount(
+	ctx context.Context,
+	amount float64,
+	postGroupConsumer balance.PostGroupConsumer,
+	meta *meta.Meta,
+) float64 {
+	if amount > 0 {
+		return processGroupConsume(ctx, amount, postGroupConsumer, meta)
+	}
+	return 0
+}
+
+func CalculateAmount(
+	usage *relaymodel.Usage,
+	inputPrice, outputPrice float64,
+) float64 {
+	if usage == nil {
+		return 0
+	}
+
+	promptTokens := usage.PromptTokens
+	completionTokens := usage.CompletionTokens
+	totalTokens := promptTokens + completionTokens
+
+	if totalTokens == 0 {
+		return 0
+	}
+
+	promptAmount := decimal.NewFromInt(int64(promptTokens)).
+		Mul(decimal.NewFromFloat(inputPrice)).
+		Div(decimal.NewFromInt(model.PriceUnit))
+	completionAmount := decimal.NewFromInt(int64(completionTokens)).
+		Mul(decimal.NewFromFloat(outputPrice)).
+		Div(decimal.NewFromInt(model.PriceUnit))
+
+	return promptAmount.Add(completionAmount).InexactFloat64()
+}
+
+func processGroupConsume(
+	ctx context.Context,
+	amount float64,
+	postGroupConsumer balance.PostGroupConsumer,
+	meta *meta.Meta,
+) float64 {
+	consumedAmount, err := postGroupConsumer.PostGroupConsume(ctx, meta.Token.Name, amount)
+	if err != nil {
+		log.Error("error consuming token remain amount: " + err.Error())
+		if err := model.CreateConsumeError(
+			meta.RequestID,
+			meta.RequestAt,
+			meta.Group.ID,
+			meta.Token.Name,
+			meta.OriginModel,
+			err.Error(),
+			amount,
+			meta.Token.ID,
+		); err != nil {
+			log.Error("failed to create consume error: " + err.Error())
+		}
+		return amount
+	}
+	return consumedAmount
+}
+
+func recordConsume(meta *meta.Meta, code int, usage *relaymodel.Usage, inputPrice, outputPrice float64, content string, ip string, requestDetail *model.RequestDetail, amount float64) error {
+	promptTokens := 0
+	completionTokens := 0
+	if usage != nil {
+		promptTokens = usage.PromptTokens
+		completionTokens = usage.CompletionTokens
+	}
+
+	var channelID int
+	if meta.Channel != nil {
+		channelID = meta.Channel.ID
+	}
+
+	return model.BatchRecordConsume(
+		meta.RequestID,
+		meta.RequestAt,
+		meta.Group.ID,
+		code,
+		channelID,
+		promptTokens,
+		completionTokens,
+		meta.OriginModel,
+		meta.Token.ID,
+		meta.Token.Name,
+		amount,
+		inputPrice,
+		outputPrice,
+		meta.Endpoint,
+		content,
+		meta.Mode,
+		ip,
+		requestDetail,
+	)
+}
diff --git a/service/aiproxy/common/conv/any.go b/service/aiproxy/common/conv/any.go
index ed6de0d1c122..d5e3bc037fda 100644
--- a/service/aiproxy/common/conv/any.go
+++ b/service/aiproxy/common/conv/any.go
@@ -9,15 +9,10 @@ func AsString(v any) string {
 
 // The change of bytes will cause the change of string synchronously
 func BytesToString(b []byte) string {
-	return *(*string)(unsafe.Pointer(&b))
+	return unsafe.String(unsafe.SliceData(b), len(b))
 }
 
 // If string is readonly, modifying bytes will cause panic
 func StringToBytes(s string) []byte {
-	return *(*[]byte)(unsafe.Pointer(
-		&struct {
-			string
-			Cap int
-		}{s, len(s)},
-	))
+	return unsafe.Slice(unsafe.StringData(s), len(s))
 }
diff --git a/service/aiproxy/common/ctxkey/key.go b/service/aiproxy/common/ctxkey/key.go
index 488a856ca522..a1275b875f42 100644
--- a/service/aiproxy/common/ctxkey/key.go
+++ b/service/aiproxy/common/ctxkey/key.go
@@ -1,13 +1,11 @@
 package ctxkey
 
-type OriginalModelKey string
-
-const (
-	OriginalModel OriginalModelKey = "original_model"
-)
-
 const (
-	Channel = "channel"
-	Group   = "group"
-	Token   = "token"
+	Group         = "group"
+	Token         = "token"
+	GroupBalance  = "group_balance"
+	OriginalModel = "original_model"
+	RequestID     = "X-Request-Id"
+	ModelCaches   = "model_caches"
+	ModelConfig   = "model_config"
 )
diff --git a/service/aiproxy/common/database.go b/service/aiproxy/common/database.go
index a164266c27a3..b89c8956832f 100644
--- a/service/aiproxy/common/database.go
+++ b/service/aiproxy/common/database.go
@@ -11,6 +11,6 @@ var (
 )
 
 var (
-	SQLitePath        = "aiproxy.db"
-	SQLiteBusyTimeout = env.Int("SQLITE_BUSY_TIMEOUT", 3000)
+	SQLitePath        = env.String("SQLITE_PATH", "aiproxy.db")
+	SQLiteBusyTimeout = env.Int64("SQLITE_BUSY_TIMEOUT", 3000)
 )
diff --git a/service/aiproxy/common/env/helper.go b/service/aiproxy/common/env/helper.go
index fdb9f827ac25..2e01ef156be1 100644
--- a/service/aiproxy/common/env/helper.go
+++ b/service/aiproxy/common/env/helper.go
@@ -3,40 +3,83 @@ package env
 import (
 	"os"
 	"strconv"
+
+	json "github.com/json-iterator/go"
+	"github.com/labring/sealos/service/aiproxy/common/conv"
+	log "github.com/sirupsen/logrus"
 )
 
 func Bool(env string, defaultValue bool) bool {
-	if env == "" || os.Getenv(env) == "" {
+	if env == "" {
+		return defaultValue
+	}
+	e := os.Getenv(env)
+	if e == "" {
+		return defaultValue
+	}
+	p, err := strconv.ParseBool(e)
+	if err != nil {
+		log.Errorf("invalid %s: %s", env, e)
 		return defaultValue
 	}
-	return os.Getenv(env) == "true"
+	return p
 }
 
-func Int(env string, defaultValue int) int {
-	if env == "" || os.Getenv(env) == "" {
+func Int64(env string, defaultValue int64) int64 {
+	if env == "" {
+		return defaultValue
+	}
+	e := os.Getenv(env)
+	if e == "" {
 		return defaultValue
 	}
-	num, err := strconv.Atoi(os.Getenv(env))
+	num, err := strconv.ParseInt(e, 10, 64)
 	if err != nil {
+		log.Errorf("invalid %s: %s", env, e)
 		return defaultValue
 	}
 	return num
 }
 
 func Float64(env string, defaultValue float64) float64 {
-	if env == "" || os.Getenv(env) == "" {
+	if env == "" {
+		return defaultValue
+	}
+	e := os.Getenv(env)
+	if e == "" {
 		return defaultValue
 	}
-	num, err := strconv.ParseFloat(os.Getenv(env), 64)
+	num, err := strconv.ParseFloat(e, 64)
 	if err != nil {
+		log.Errorf("invalid %s: %s", env, e)
 		return defaultValue
 	}
 	return num
 }
 
 func String(env string, defaultValue string) string {
-	if env == "" || os.Getenv(env) == "" {
+	if env == "" {
+		return defaultValue
+	}
+	e := os.Getenv(env)
+	if e == "" {
+		return defaultValue
+	}
+	return e
+}
+
+func JSON[T any](env string, defaultValue T) T {
+	if env == "" {
+		return defaultValue
+	}
+	e := os.Getenv(env)
+	if e == "" {
+		return defaultValue
+	}
+	var t T
+	if err := json.Unmarshal(conv.StringToBytes(e), &t); err != nil {
+		log.Errorf("invalid %s: %s", env, e)
 		return defaultValue
 	}
-	return os.Getenv(env)
+	return t
 }
diff --git a/service/aiproxy/common/fastJSONSerializer/fastJSONSerializer.go b/service/aiproxy/common/fastJSONSerializer/fastJSONSerializer.go
index 98a55ae32cff..32fe8e483587 100644
--- a/service/aiproxy/common/fastJSONSerializer/fastJSONSerializer.go
+++ b/service/aiproxy/common/fastJSONSerializer/fastJSONSerializer.go
@@ -7,7 +7,6 @@ import (
 
 	json "github.com/json-iterator/go"
 	"github.com/labring/sealos/service/aiproxy/common/conv"
-
 	"gorm.io/gorm/schema"
 )
 
diff --git a/service/aiproxy/common/gin.go b/service/aiproxy/common/gin.go
index 113617b4d77b..e62b4eed63c7 100644
--- a/service/aiproxy/common/gin.go
+++ b/service/aiproxy/common/gin.go
@@ -3,9 +3,11 @@ package common
 import (
 	"bytes"
 	"context"
+	"errors"
 	"fmt"
 	"io"
 	"net/http"
+	"strings"
 
 	"github.com/gin-gonic/gin"
 	json "github.com/json-iterator/go"
@@ -13,7 +15,38 @@ import (
 
 type RequestBodyKey struct{}
 
+const (
+	MaxRequestBodySize = 1024 * 1024 * 50 // 50MB
+)
+
+func LimitReader(r io.Reader, n int64) io.Reader { return &LimitedReader{r, n} }
+
+type LimitedReader struct {
+	R io.Reader
+	N int64
+}
+
+var ErrLimitedReaderExceeded = errors.New("limited reader exceeded")
+
+func (l *LimitedReader) Read(p []byte) (n int, err error) {
+	if l.N <= 0 {
+		return 0, ErrLimitedReaderExceeded
+	}
+	if int64(len(p)) > l.N {
+		p = p[0:l.N]
+	}
+	n, err = l.R.Read(p)
+	l.N -= int64(n)
+	return
+}
+
 func GetRequestBody(req *http.Request) ([]byte, error) {
+	contentType := req.Header.Get("Content-Type")
+	if contentType == "application/x-www-form-urlencoded" ||
+		strings.HasPrefix(contentType, "multipart/form-data") {
+		return nil, nil
+	}
+
 	requestBody := req.Context().Value(RequestBodyKey{})
 	if requestBody != nil {
 		return requestBody.([]byte), nil
@@ -27,8 +60,17 @@ func GetRequestBody(req *http.Request) ([]byte, error) {
 		}
 	}()
 	if req.ContentLength <= 0 || req.Header.Get("Content-Type") != "application/json" {
-		buf, err = io.ReadAll(req.Body)
+		buf, err = io.ReadAll(LimitReader(req.Body, MaxRequestBodySize))
+		if err != nil {
+			if errors.Is(err, ErrLimitedReaderExceeded) {
+				return nil, fmt.Errorf("request body too large, max: %d", MaxRequestBodySize)
+			}
+			return nil, fmt.Errorf("request body read failed: %w", err)
+		}
 	} else {
+		if req.ContentLength > MaxRequestBodySize {
+			return nil, fmt.Errorf("request body too large: %d, max: %d", req.ContentLength, MaxRequestBodySize)
+		}
 		buf = make([]byte, req.ContentLength)
 		_, err = io.ReadFull(req.Body, buf)
 	}
diff --git a/service/aiproxy/common/helper/helper.go b/service/aiproxy/common/helper/helper.go
deleted file mode 100644
index 8d882b60c680..000000000000
--- a/service/aiproxy/common/helper/helper.go
+++ /dev/null
@@ -1,41 +0,0 @@
-package helper
-
-import (
-	"fmt"
-	"strconv"
-	"time"
-
-	"github.com/gin-gonic/gin"
-	"github.com/labring/sealos/service/aiproxy/common/random"
-)
-
-func GenRequestID() string {
-	return strconv.FormatInt(time.Now().UnixMilli(), 10) + random.GetRandomNumberString(4)
-}
-
-func GetResponseID(c *gin.Context) string {
-	logID := c.GetString(string(RequestIDKey))
-	return "chatcmpl-" + logID
-}
-
-func AssignOrDefault(value string, defaultValue string) string {
-	if len(value) != 0 {
-		return value
-	}
-	return defaultValue
-}
-
-func MessageWithRequestID(message string, id string) string {
-	return fmt.Sprintf("%s (request id: %s)", message, id)
-}
-
-func String2Int(keyword string) int {
-	if keyword == "" {
-		return 0
-	}
-	i, err := strconv.Atoi(keyword)
-	if err != nil {
-		return 0
-	}
-	return i
-}
diff --git a/service/aiproxy/common/helper/key.go b/service/aiproxy/common/helper/key.go
deleted file mode 100644
index bc9c949eb9cb..000000000000
--- a/service/aiproxy/common/helper/key.go
+++ /dev/null
@@ -1,7 +0,0 @@
-package helper
-
-type Key string
-
-const (
-	RequestIDKey Key = "X-Request-Id"
-)
diff --git a/service/aiproxy/common/helper/time.go b/service/aiproxy/common/helper/time.go
deleted file mode 100644
index 757e56af23d7..000000000000
--- a/service/aiproxy/common/helper/time.go
+++ /dev/null
@@ -1,9 +0,0 @@
-package helper
-
-import (
-	"time"
-)
-
-func GetTimestamp() int64 {
-	return time.Now().Unix()
-}
diff --git a/service/aiproxy/common/image/image.go b/service/aiproxy/common/image/image.go
index 505d63f9414b..9ec808c0e373 100644
--- a/service/aiproxy/common/image/image.go
+++ b/service/aiproxy/common/image/image.go
@@ -19,10 +19,10 @@ import (
 	"regexp"
 	"strings"
 
+	"github.com/labring/sealos/service/aiproxy/common"
+
 	// import webp decoder
 	_ "golang.org/x/image/webp"
-
-	"github.com/labring/sealos/service/aiproxy/common/client"
 )
 
 // Regex to match data URL pattern
@@ -37,7 +37,7 @@ func GetImageSizeFromURL(url string) (width int, height int, err error) {
 	if err != nil {
 		return 0, 0, err
 	}
-	resp, err := client.UserContentRequestHTTPClient.Do(req)
+	resp, err := http.DefaultClient.Do(req)
 	if err != nil {
 		return
 	}
@@ -58,6 +58,10 @@ func GetImageSizeFromURL(url string) (width int, height int, err error) {
 	return img.Width, img.Height, nil
 }
 
+const (
+	MaxImageSize = 1024 * 1024 * 5 // 5MB
+)
+
 func GetImageFromURL(ctx context.Context, url string) (string, string, error) {
 	// Check if the URL is a data URL
 	matches := dataURLPattern.FindStringSubmatch(url)
@@ -70,7 +74,7 @@ func GetImageFromURL(ctx context.Context, url string) (string, string, error) {
 	if err != nil {
 		return "", "", err
 	}
-	resp, err := client.UserContentRequestHTTPClient.Do(req)
+	resp, err := http.DefaultClient.Do(req)
 	if err != nil {
 		return "", "", err
 	}
@@ -78,20 +82,29 @@ func GetImageFromURL(ctx context.Context, url string) (string, string, error) {
 	if resp.StatusCode != http.StatusOK {
 		return "", "", fmt.Errorf("status code: %d", resp.StatusCode)
 	}
+	isImage := IsImageURL(resp)
+	if !isImage {
+		return "", "", errors.New("not an image")
+	}
 	var buf []byte
 	if resp.ContentLength <= 0 {
-		buf, err = io.ReadAll(resp.Body)
+		buf, err = io.ReadAll(common.LimitReader(resp.Body, MaxImageSize))
+		if err != nil {
+			if errors.Is(err, common.ErrLimitedReaderExceeded) {
+				return "", "", fmt.Errorf("image too large, max: %d", MaxImageSize)
+			}
+			return "", "", fmt.Errorf("image read failed: %w", err)
+		}
 	} else {
+		if resp.ContentLength > MaxImageSize {
+			return "", "", fmt.Errorf("image too large: %d, max: %d", resp.ContentLength, MaxImageSize)
+		}
 		buf = make([]byte, resp.ContentLength)
 		_, err = io.ReadFull(resp.Body, buf)
 	}
 	if err != nil {
 		return "", "", err
 	}
-	isImage := IsImageURL(resp)
-	if !isImage {
-		return "", "", errors.New("not an image")
-	}
 	return resp.Header.Get("Content-Type"), base64.StdEncoding.EncodeToString(buf), nil
 }
 
diff --git a/service/aiproxy/common/image/image_test.go b/service/aiproxy/common/image/image_test.go
deleted file mode 100644
index 7dad94a0c5ad..000000000000
--- a/service/aiproxy/common/image/image_test.go
+++ /dev/null
@@ -1,176 +0,0 @@
-package image_test
-
-import (
-	"encoding/base64"
-	"image"
-	_ "image/gif"
-	_ "image/jpeg"
-	_ "image/png"
-	"io"
-	"net/http"
-	"strconv"
-	"strings"
-	"testing"
-
-	"github.com/labring/sealos/service/aiproxy/common/client"
-
-	img "github.com/labring/sealos/service/aiproxy/common/image"
-
-	"github.com/stretchr/testify/assert"
-	_ "golang.org/x/image/webp"
-)
-
-type CountingReader struct {
-	reader    io.Reader
-	BytesRead int
-}
-
-func (r *CountingReader) Read(p []byte) (n int, err error) {
-	n, err = r.reader.Read(p)
-	r.BytesRead += n
-	return n, err
-}
-
-var cases = []struct {
-	url    string
-	format string
-	width  int
-	height int
-}{
-	{"https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Gfp-wisconsin-madison-the-nature-boardwalk.jpg/2560px-Gfp-wisconsin-madison-the-nature-boardwalk.jpg", "jpeg", 2560, 1669},
-	{"https://upload.wikimedia.org/wikipedia/commons/9/97/Basshunter_live_performances.png", "png", 4500, 2592},
-	{"https://upload.wikimedia.org/wikipedia/commons/c/c6/TO_THE_ONE_SOMETHINGNESS.webp", "webp", 984, 985},
-	{"https://upload.wikimedia.org/wikipedia/commons/d/d0/01_Das_Sandberg-Modell.gif", "gif", 1917, 1533},
-	{"https://upload.wikimedia.org/wikipedia/commons/6/62/102Cervus.jpg", "jpeg", 270, 230},
-}
-
-func TestMain(m *testing.M) {
-	client.Init()
-	m.Run()
-}
-
-func TestDecode(t *testing.T) {
-	// Bytes read: varies sometimes
-	// jpeg: 1063892
-	// png: 294462
-	// webp: 99529
-	// gif: 956153
-	// jpeg#01: 32805
-	for _, c := range cases {
-		t.Run("Decode:"+c.format, func(t *testing.T) {
-			resp, err := http.Get(c.url)
-			assert.NoError(t, err)
-			defer resp.Body.Close()
-			reader := &CountingReader{reader: resp.Body}
-			img, format, err := image.Decode(reader)
-			assert.NoError(t, err)
-			size := img.Bounds().Size()
-			assert.Equal(t, c.format, format)
-			assert.Equal(t, c.width, size.X)
-			assert.Equal(t, c.height, size.Y)
-			t.Logf("Bytes read: %d", reader.BytesRead)
-		})
-	}
-
-	// Bytes read:
-	// jpeg: 4096
-	// png: 4096
-	// webp: 4096
-	// gif: 4096
-	// jpeg#01: 4096
-	for _, c := range cases {
-		t.Run("DecodeConfig:"+c.format, func(t *testing.T) {
-			resp, err := http.Get(c.url)
-			assert.NoError(t, err)
-			defer resp.Body.Close()
-			reader := &CountingReader{reader: resp.Body}
-			config, format, err := image.DecodeConfig(reader)
-			assert.NoError(t, err)
-			assert.Equal(t, c.format, format)
-			assert.Equal(t, c.width, config.Width)
-			assert.Equal(t, c.height, config.Height)
-			t.Logf("Bytes read: %d", reader.BytesRead)
-		})
-	}
-}
-
-func TestBase64(t *testing.T) {
-	// Bytes read:
-	// jpeg: 1063892
-	// png: 294462
-	// webp: 99072
-	// gif: 953856
-	// jpeg#01: 32805
-	for _, c := range cases {
-		t.Run("Decode:"+c.format, func(t *testing.T) {
-			resp, err := http.Get(c.url)
-			assert.NoError(t, err)
-			defer resp.Body.Close()
-			data, err := io.ReadAll(resp.Body)
-			assert.NoError(t, err)
-			encoded := base64.StdEncoding.EncodeToString(data)
-			body := base64.NewDecoder(base64.StdEncoding, strings.NewReader(encoded))
-			reader := &CountingReader{reader: body}
-			img, format, err := image.Decode(reader)
-			assert.NoError(t, err)
-			size := img.Bounds().Size()
-			assert.Equal(t, c.format, format)
-			assert.Equal(t, c.width, size.X)
-			assert.Equal(t, c.height, size.Y)
-			t.Logf("Bytes read: %d", reader.BytesRead)
-		})
-	}
-
-	// Bytes read:
-	// jpeg: 1536
-	// png: 768
-	// webp: 768
-	// gif: 1536
-	// jpeg#01: 3840
-	for _, c := range cases {
-		t.Run("DecodeConfig:"+c.format, func(t *testing.T) {
-			resp, err := http.Get(c.url)
-			assert.NoError(t, err)
-			defer resp.Body.Close()
-			data, err := io.ReadAll(resp.Body)
-			assert.NoError(t, err)
-			encoded := base64.StdEncoding.EncodeToString(data)
-			body := base64.NewDecoder(base64.StdEncoding, strings.NewReader(encoded))
-			reader := &CountingReader{reader: body}
-			config, format, err := image.DecodeConfig(reader)
-			assert.NoError(t, err)
-			assert.Equal(t, c.format, format)
-			assert.Equal(t, c.width, config.Width)
-			assert.Equal(t, c.height, config.Height)
-			t.Logf("Bytes read: %d", reader.BytesRead)
-		})
-	}
-}
-
-func TestGetImageSize(t *testing.T) {
-	for i, c := range cases {
-		t.Run("Decode:"+strconv.Itoa(i), func(t *testing.T) {
-			width, height, err := img.GetImageSize(c.url)
-			assert.NoError(t, err)
-			assert.Equal(t, c.width, width)
-			assert.Equal(t, c.height, height)
-		})
-	}
-}
-
-func TestGetImageSizeFromBase64(t *testing.T) {
-	for i, c := range cases {
-		t.Run("Decode:"+strconv.Itoa(i), func(t *testing.T) {
-			resp, err := http.Get(c.url)
-			assert.NoError(t, err)
-			defer resp.Body.Close()
-			data, err := io.ReadAll(resp.Body)
-			assert.NoError(t, err)
-			encoded := base64.StdEncoding.EncodeToString(data)
-			width, height, err := img.GetImageSizeFromBase64(encoded)
-			assert.NoError(t, err)
-			assert.Equal(t, c.width, width)
-			assert.Equal(t, c.height, height)
-		})
-	}
-}
diff --git a/service/aiproxy/common/image/svg.go b/service/aiproxy/common/image/svg.go
new file mode 100644
index 000000000000..a183d2b6f361
--- /dev/null
+++ b/service/aiproxy/common/image/svg.go
@@ -0,0 +1,45 @@
+package image
+
+import (
+	"image"
+	"image/color"
+	"io"
+
+	"github.com/srwiley/oksvg"
+	"github.com/srwiley/rasterx"
+)
+
+func Decode(r io.Reader) (image.Image, error) {
+	icon, err := oksvg.ReadIconStream(r)
+	if err != nil {
+		return nil, err
+	}
+
+	w, h := int(icon.ViewBox.W), int(icon.ViewBox.H)
+	icon.SetTarget(0, 0, float64(w), float64(h))
+
+	rgba := image.NewRGBA(image.Rect(0, 0, w, h))
+	icon.Draw(rasterx.NewDasher(w, h, rasterx.NewScannerGV(w, h, rgba, rgba.Bounds())), 1)
+
+	return rgba, err
+}
+
+func DecodeConfig(r io.Reader) (image.Config, error) {
+	var config image.Config
+
+	icon, err := oksvg.ReadIconStream(r)
+	if err != nil {
+		return config, err
+	}
+
+	config.ColorModel = color.RGBAModel
+	config.Width = int(icon.ViewBox.W)
+	config.Height = int(icon.ViewBox.H)
+
+	return config, nil
+}
+
+func init() {
+	image.RegisterFormat("svg", "<?xml ", Decode, DecodeConfig)
+	image.RegisterFormat("svg", "<svg", Decode, DecodeConfig)
+}
diff --git a/service/aiproxy/common/init.go b/service/aiproxy/common/init.go
index fa2826e407a2..b17fc1c8ac16 100644
--- a/service/aiproxy/common/init.go
+++ b/service/aiproxy/common/init.go
@@ -16,9 +16,6 @@ var (
 func Init() {
 	flag.Parse()
 
-	if os.Getenv("SQLITE_PATH") != "" {
-		SQLitePath = os.Getenv("SQLITE_PATH")
-	}
 	if *LogDir != "" {
 		var err error
 		*LogDir, err = filepath.Abs(*LogDir)
diff --git a/service/aiproxy/common/redis.go b/service/aiproxy/common/redis.go
index 30a7ad1b85b2..e83e9d8f4ca1 100644
--- a/service/aiproxy/common/redis.go
+++ b/service/aiproxy/common/redis.go
@@ -32,7 +32,11 @@ func InitRedisClient() (err error) {
 	defer cancel()
 
 	_, err = RDB.Ping(ctx).Result()
-	return err
+	if err != nil {
+		log.Errorf("failed to ping redis: %s", err.Error())
+	}
+
+	return nil
 }
 
 func RedisSet(key string, value string, expiration time.Duration) error {
diff --git a/service/aiproxy/common/rate-limit.go b/service/aiproxy/common/rpmlimit/mem.go
similarity index 99%
rename from service/aiproxy/common/rate-limit.go
rename to service/aiproxy/common/rpmlimit/mem.go
index a94b6496fc21..5463d164b45d 100644
--- a/service/aiproxy/common/rate-limit.go
+++ b/service/aiproxy/common/rpmlimit/mem.go
@@ -1,4 +1,4 @@
-package common
+package rpmlimit
 
 import (
 	"sync"
diff --git a/service/aiproxy/common/rpmlimit/rate-limit.go b/service/aiproxy/common/rpmlimit/rate-limit.go
new file mode 100644
index 000000000000..32b88baa06e6
--- /dev/null
+++ b/service/aiproxy/common/rpmlimit/rate-limit.go
@@ -0,0 +1,132 @@
+package rpmlimit
+
+import (
+	"context"
+	"fmt"
+	"time"
+
+	"github.com/labring/sealos/service/aiproxy/common"
+	log "github.com/sirupsen/logrus"
+)
+
+var inMemoryRateLimiter InMemoryRateLimiter
+
+const (
+	groupModelRPMKey = "group_model_rpm:%s:%s"
+)
+
+var pushRequestScript = `
+local key = KEYS[1]
+local window = tonumber(ARGV[1])
+local current_time = tonumber(ARGV[2])
+local cutoff = current_time - window
+
+redis.call('ZREMRANGEBYSCORE', key, '-inf', cutoff)
+redis.call('ZADD', key, current_time, current_time)
+redis.call('PEXPIRE', key, window)
+return redis.call('ZCOUNT', key, cutoff, current_time)
+`
+
+var getRequestCountScript = `
+local pattern = ARGV[1]
+local window = tonumber(ARGV[2])
+local current_time = tonumber(ARGV[3])
+local cutoff = current_time - window
+
+local keys = redis.call('KEYS', pattern)
+local total = 0
+
+for _, key in ipairs(keys) do
+	redis.call('ZREMRANGEBYSCORE', key, '-inf', cutoff)
+    local count = redis.call('ZCOUNT', key, cutoff, current_time)
+    total = total + count
+end
+
+return total
+`
+
+func GetRPM(ctx context.Context, group, model string) (int64, error) {
+	if !common.RedisEnabled {
+		return 0, nil
+	}
+
+	var pattern string
+	if group == "" && model == "" {
+		pattern = "group_model_rpm:*:*"
+	} else if group == "" {
+		pattern = "group_model_rpm:*:" + model
+	} else if model == "" {
+		pattern = fmt.Sprintf("group_model_rpm:%s:*", group)
+	} else {
+		pattern = fmt.Sprintf("group_model_rpm:%s:%s", group, model)
+	}
+
+	rdb := common.RDB
+	result, err := rdb.Eval(
+		ctx,
+		getRequestCountScript,
+		[]string{},
+		pattern,
+		time.Minute.Microseconds(),
+		time.Now().UnixMicro(),
+	).Int64()
+	if err != nil {
+		return 0, err
+	}
+	return result, nil
+}
+
+func redisRateLimitRequest(ctx context.Context, group, model string, maxRequestNum int64, duration time.Duration) (bool, error) {
+	result, err := PushRequest(ctx, group, model, duration)
+	if err != nil {
+		return false, err
+	}
+	return result <= maxRequestNum, nil
+}
+
+func PushRequest(ctx context.Context, group, model string, duration time.Duration) (int64, error) {
+	result, err := common.RDB.Eval(
+		ctx,
+		pushRequestScript,
+		[]string{
+			fmt.Sprintf(groupModelRPMKey, group, model),
+		},
+		duration.Microseconds(),
+		time.Now().UnixMicro(),
+	).Int64()
+	if err != nil {
+		return 0, err
+	}
+	return result, nil
+}
+
+func RateLimit(ctx context.Context, group, model string, maxRequestNum int64, duration time.Duration) (bool, error) {
+	if maxRequestNum == 0 {
+		return true, nil
+	}
+	if common.RedisEnabled {
+		return redisRateLimitRequest(ctx, group, model, maxRequestNum, duration)
+	}
+	return MemoryRateLimit(ctx, group, model, maxRequestNum, duration), nil
+}
+
+// ignore redis error
+func ForceRateLimit(ctx context.Context, group, model string, maxRequestNum int64, duration time.Duration) bool {
+	if maxRequestNum == 0 {
+		return true
+	}
+	if common.RedisEnabled {
+		ok, err := redisRateLimitRequest(ctx, group, model, maxRequestNum, duration)
+		if err == nil {
+			return ok
+		}
+		log.Error("rate limit error: " + err.Error())
+	}
+	return MemoryRateLimit(ctx, group, model, maxRequestNum, duration)
+}
+
+func MemoryRateLimit(_ context.Context, group, model string, maxRequestNum int64, duration time.Duration) bool {
+	// It's safe to call multi times.
+	inMemoryRateLimiter.Init(3 * time.Minute)
+	return inMemoryRateLimiter.Request(fmt.Sprintf(groupModelRPMKey, group, model), int(maxRequestNum), duration)
+}
diff --git a/service/aiproxy/common/splitter/splitter.go b/service/aiproxy/common/splitter/splitter.go
new file mode 100644
index 000000000000..18ac4b9c283e
--- /dev/null
+++ b/service/aiproxy/common/splitter/splitter.go
@@ -0,0 +1,122 @@
+package splitter
+
+import "bytes"
+
+type Splitter struct {
+	head           []byte
+	tail           []byte
+	headLen        int
+	tailLen        int
+	buffer         []byte
+	state          int
+	partialTailPos int
+	kmpNext        []int
+}
+
+func NewSplitter(head, tail []byte) *Splitter {
+	return &Splitter{
+		head:    head,
+		tail:    tail,
+		headLen: len(head),
+		tailLen: len(tail),
+		kmpNext: computeKMPNext(tail),
+	}
+}
+
+func computeKMPNext(pattern []byte) []int {
+	n := len(pattern)
+	next := make([]int, n)
+	if n == 0 {
+		return next
+	}
+	next[0] = 0
+	for i := 1; i < n; i++ {
+		j := next[i-1]
+		for j > 0 && pattern[i] != pattern[j] {
+			j = next[j-1]
+		}
+		if pattern[i] == pattern[j] {
+			j++
+		}
+		next[i] = j
+	}
+	return next
+}
+
+func (s *Splitter) Process(data []byte) ([]byte, []byte) {
+	if len(data) == 0 {
+		return nil, nil
+	}
+	switch s.state {
+	case 0:
+		s.buffer = append(s.buffer, data...)
+		bufferLen := len(s.buffer)
+		minLen := bufferLen
+		if minLen > s.headLen {
+			minLen = s.headLen
+		}
+		if minLen > 0 {
+			if !bytes.Equal(s.buffer[:minLen], s.head[:minLen]) {
+				s.state = 2
+				remaining := s.buffer
+				s.buffer = nil
+				return nil, remaining
+			}
+		}
+
+		if bufferLen < s.headLen {
+			return nil, nil
+		}
+
+		s.state = 1
+		s.buffer = s.buffer[s.headLen:]
+		if len(s.buffer) == 0 {
+			return nil, nil
+		}
+		return s.processSeekTail()
+	case 1:
+		s.buffer = append(s.buffer, data...)
+		return s.processSeekTail()
+	default:
+		return nil, data
+	}
+}
+
+func (s *Splitter) processSeekTail() ([]byte, []byte) {
+	data := s.buffer
+	j := s.partialTailPos
+	tail := s.tail
+	tailLen := s.tailLen
+	kmpNext := s.kmpNext
+
+	var i int
+	for i = 0; i < len(data); i++ {
+		for j > 0 && data[i] != tail[j] {
+			j = kmpNext[j-1]
+		}
+		if data[i] == tail[j] {
+			j++
+			if j == tailLen {
+				end := i - tailLen + 1
+				if end < 0 {
+					end = 0
+				}
+				result := data[:end]
+				remaining := data[i+1:]
+				s.buffer = nil
+				s.state = 2
+				s.partialTailPos = 0
+				return result, remaining
+			}
+		}
+	}
+	splitAt := len(data) - j
+	if splitAt < 0 {
+		splitAt = 0
+	}
+	result := data[:splitAt]
+	remainingPart := data[splitAt:]
+	s.partialTailPos = j
+	s.buffer = remainingPart
+	return result, nil
+}
diff --git a/service/aiproxy/common/splitter/think.go b/service/aiproxy/common/splitter/think.go
new file mode 100644
index 000000000000..99b1f3d324eb
--- /dev/null
+++ b/service/aiproxy/common/splitter/think.go
@@ -0,0 +1,17 @@
+package splitter
+
+import "github.com/labring/sealos/service/aiproxy/common/conv"
+
+const (
+	ThinkHead = "<think>\n"
+	ThinkTail = "</think>\n"
+)
+
+var (
+	thinkHeadBytes = conv.StringToBytes(ThinkHead)
+	thinkTailBytes = conv.StringToBytes(ThinkTail)
+)
+
+func NewThinkSplitter() *Splitter {
+	return NewSplitter(thinkHeadBytes, thinkTailBytes)
+}
diff --git a/service/aiproxy/common/trunc.go b/service/aiproxy/common/trunc.go
new file mode 100644
index 000000000000..e4d85bfe897f
--- /dev/null
+++ b/service/aiproxy/common/trunc.go
@@ -0,0 +1,31 @@
+package common
+
+import (
+	"unicode/utf8"
+
+	"github.com/labring/sealos/service/aiproxy/common/conv"
+)
+
+func TruncateByRune(s string, length int) string {
+	total := 0
+	for _, r := range s {
+		runeLen := utf8.RuneLen(r)
+		if runeLen == -1 || total+runeLen > length {
+			return s[:total]
+		}
+		total += runeLen
+	}
+	return s[:total]
+}
+
+func TruncateBytesByRune(b []byte, length int) []byte {
+	total := 0
+	for _, r := range conv.BytesToString(b) {
+		runeLen := utf8.RuneLen(r)
+		if runeLen == -1 || total+runeLen > length {
+			return b[:total]
+		}
+		total += runeLen
+	}
+	return b[:total]
+}
diff --git a/service/aiproxy/controller/channel-billing.go b/service/aiproxy/controller/channel-billing.go
index bf6247be234f..cb6cf9d0504f 100644
--- a/service/aiproxy/controller/channel-billing.go
+++ b/service/aiproxy/controller/channel-billing.go
@@ -1,21 +1,20 @@
 package controller
 
 import (
+	"errors"
 	"fmt"
 	"net/http"
 	"strconv"
 	"time"
 
+	"github.com/gin-gonic/gin"
 	"github.com/labring/sealos/service/aiproxy/common/balance"
-	"github.com/labring/sealos/service/aiproxy/common/ctxkey"
 	"github.com/labring/sealos/service/aiproxy/middleware"
 	"github.com/labring/sealos/service/aiproxy/model"
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor"
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor/openai"
 	"github.com/labring/sealos/service/aiproxy/relay/channeltype"
 	log "github.com/sirupsen/logrus"
-
-	"github.com/gin-gonic/gin"
 )
 
 // https://github.com/labring/sealos/service/aiproxy/issues/79
@@ -25,7 +24,7 @@ func updateChannelBalance(channel *model.Channel) (float64, error) {
 	if !ok {
 		return 0, fmt.Errorf("invalid channel type: %d", channel.Type)
 	}
-	if getBalance, ok := adaptorI.(adaptor.GetBalance); ok {
+	if getBalance, ok := adaptorI.(adaptor.Balancer); ok {
 		balance, err := getBalance.GetBalance(channel)
 		if err != nil {
 			return 0, err
@@ -48,7 +47,7 @@ func UpdateChannelBalance(c *gin.Context) {
 		})
 		return
 	}
-	channel, err := model.GetChannelByID(id, false)
+	channel, err := model.GetChannelByID(id)
 	if err != nil {
 		c.JSON(http.StatusOK, middleware.APIResponse{
 			Success: false,
@@ -72,7 +71,7 @@ func UpdateChannelBalance(c *gin.Context) {
 }
 
 func updateAllChannelsBalance() error {
-	channels, err := model.GetAllChannels(false, false)
+	channels, err := model.GetAllChannels()
 	if err != nil {
 		return err
 	}
@@ -105,29 +104,30 @@ func AutomaticallyUpdateChannels(frequency int) {
 
 // subscription
 func GetSubscription(c *gin.Context) {
-	group := c.MustGet(ctxkey.Group).(*model.GroupCache)
-	b, _, err := balance.Default.GetGroupRemainBalance(c, group.ID)
+	group := middleware.GetGroup(c)
+	b, _, err := balance.Default.GetGroupRemainBalance(c, *group)
 	if err != nil {
+		if errors.Is(err, balance.ErrNoRealNameUsedAmountLimit) {
+			middleware.ErrorResponse(c, http.StatusForbidden, err.Error())
+			return
+		}
 		log.Errorf("get group (%s) balance failed: %s", group.ID, err)
-		c.JSON(http.StatusOK, middleware.APIResponse{
-			Success: false,
-			Message: fmt.Sprintf("get group (%s) balance failed", group.ID),
-		})
+		middleware.ErrorResponse(c, http.StatusInternalServerError, fmt.Sprintf("get group (%s) balance failed", group.ID))
 		return
 	}
-	token := c.MustGet(ctxkey.Token).(*model.TokenCache)
+	token := middleware.GetToken(c)
 	quota := token.Quota
 	if quota <= 0 {
 		quota = b
 	}
 	c.JSON(http.StatusOK, openai.SubscriptionResponse{
-		HardLimitUSD:       quota / 7,
-		SoftLimitUSD:       b / 7,
-		SystemHardLimitUSD: quota / 7,
+		HardLimitUSD:       quota + token.UsedAmount,
+		SoftLimitUSD:       b,
+		SystemHardLimitUSD: quota + token.UsedAmount,
 	})
 }
 
 func GetUsage(c *gin.Context) {
-	token := c.MustGet(ctxkey.Token).(*model.TokenCache)
-	c.JSON(http.StatusOK, openai.UsageResponse{TotalUsage: token.UsedAmount / 7 * 100})
+	token := middleware.GetToken(c)
+	c.JSON(http.StatusOK, openai.UsageResponse{TotalUsage: token.UsedAmount * 100})
 }
diff --git a/service/aiproxy/controller/channel-test.go b/service/aiproxy/controller/channel-test.go
index 5c431ff8792f..c7656edf6398 100644
--- a/service/aiproxy/controller/channel-test.go
+++ b/service/aiproxy/controller/channel-test.go
@@ -1,6 +1,7 @@
 package controller
 
 import (
+	"context"
 	"errors"
 	"fmt"
 	"io"
@@ -16,11 +17,12 @@ import (
 
 	"github.com/gin-gonic/gin"
 	"github.com/labring/sealos/service/aiproxy/common"
-	"github.com/labring/sealos/service/aiproxy/common/helper"
 	"github.com/labring/sealos/service/aiproxy/common/render"
 	"github.com/labring/sealos/service/aiproxy/middleware"
 	"github.com/labring/sealos/service/aiproxy/model"
+	"github.com/labring/sealos/service/aiproxy/monitor"
 	"github.com/labring/sealos/service/aiproxy/relay/meta"
+	"github.com/labring/sealos/service/aiproxy/relay/relaymode"
 	"github.com/labring/sealos/service/aiproxy/relay/utils"
 	log "github.com/sirupsen/logrus"
 )
@@ -28,8 +30,12 @@ import (
 const channelTestRequestID = "channel-test"
 
 // testSingleModel tests a single model in the channel
-func testSingleModel(channel *model.Channel, modelName string) (*model.ChannelTest, error) {
-	body, mode, err := utils.BuildRequest(modelName)
+func testSingleModel(mc *model.ModelCaches, channel *model.Channel, modelName string) (*model.ChannelTest, error) {
+	modelConfig, ok := mc.ModelConfig.GetModelConfig(modelName)
+	if !ok {
+		return nil, errors.New(modelName + " model config not found")
+	}
+	body, mode, err := utils.BuildRequest(modelConfig)
 	if err != nil {
 		return nil, err
 	}
@@ -37,38 +43,49 @@ func testSingleModel(channel *model.Channel, modelName string) (*model.ChannelTe
 	w := httptest.NewRecorder()
 	newc, _ := gin.CreateTestContext(w)
 	newc.Request = &http.Request{
-		Method: http.MethodPost,
-		URL:    &url.URL{Path: utils.BuildModeDefaultPath(mode)},
+		URL:    &url.URL{},
 		Body:   io.NopCloser(body),
 		Header: make(http.Header),
 	}
-	newc.Set(string(helper.RequestIDKey), channelTestRequestID)
+	middleware.SetRequestID(newc, channelTestRequestID)
 
 	meta := meta.NewMeta(
 		channel,
 		mode,
 		modelName,
+		modelConfig,
 		meta.WithRequestID(channelTestRequestID),
 		meta.WithChannelTest(true),
 	)
-	bizErr := relayHelper(meta, newc)
+	relayController, ok := relayController(mode)
+	if !ok {
+		return nil, fmt.Errorf("relay mode %d not implemented", mode)
+	}
+	bizErr := relayController(meta, newc)
+	success := bizErr == nil
 	var respStr string
 	var code int
-	if bizErr == nil {
-		respStr = w.Body.String()
+	if success {
+		switch meta.Mode {
+		case relaymode.AudioSpeech,
+			relaymode.ImagesGenerations:
+			respStr = ""
+		default:
+			respStr = w.Body.String()
+		}
 		code = w.Code
 	} else {
-		respStr = bizErr.String()
+		respStr = bizErr.Error.JSONOrEmpty()
 		code = bizErr.StatusCode
 	}
 
 	return channel.UpdateModelTest(
 		meta.RequestAt,
-		meta.OriginModelName,
-		meta.ActualModelName,
+		meta.OriginModel,
+		meta.ActualModel,
 		meta.Mode,
 		time.Since(meta.RequestAt).Seconds(),
-		bizErr == nil,
+		success,
 		respStr,
 		code,
 	)
@@ -111,7 +128,7 @@ func TestChannel(c *gin.Context) {
 		return
 	}
 
-	ct, err := testSingleModel(channel, modelName)
+	ct, err := testSingleModel(model.LoadModelCaches(), channel, modelName)
 	if err != nil {
 		log.Errorf("failed to test channel %s(%d) model %s: %s", channel.Name, channel.ID, modelName, err.Error())
 		c.JSON(http.StatusOK, middleware.APIResponse{
@@ -137,8 +154,8 @@ type testResult struct {
 	Success bool               `json:"success"`
 }
 
-func processTestResult(channel *model.Channel, modelName string, returnSuccess bool, successResponseBody bool) *testResult {
-	ct, err := testSingleModel(channel, modelName)
+func processTestResult(mc *model.ModelCaches, channel *model.Channel, modelName string, returnSuccess bool, successResponseBody bool) *testResult {
+	ct, err := testSingleModel(mc, channel, modelName)
 
 	e := &utils.UnsupportedModelTypeError{}
 	if errors.As(err, &e) {
@@ -211,6 +228,8 @@ func TestChannelModels(c *gin.Context) {
 		models[i], models[j] = models[j], models[i]
 	})
 
+	mc := model.LoadModelCaches()
+
 	for _, modelName := range models {
 		wg.Add(1)
 		semaphore <- struct{}{}
@@ -219,7 +238,7 @@ func TestChannelModels(c *gin.Context) {
 			defer wg.Done()
 			defer func() { <-semaphore }()
 
-			result := processTestResult(channel, model, returnSuccess, successResponseBody)
+			result := processTestResult(mc, channel, model, returnSuccess, successResponseBody)
 			if result == nil {
 				return
 			}
@@ -294,6 +313,8 @@ func TestAllChannels(c *gin.Context) {
 		newChannels[i], newChannels[j] = newChannels[j], newChannels[i]
 	})
 
+	mc := model.LoadModelCaches()
+
 	for _, channel := range newChannels {
 		channelHasError := &atomic.Bool{}
 		hasErrorMap[channel.ID] = channelHasError
@@ -311,7 +332,7 @@ func TestAllChannels(c *gin.Context) {
 				defer wg.Done()
 				defer func() { <-semaphore }()
 
-				result := processTestResult(ch, model, returnSuccess, successResponseBody)
+				result := processTestResult(mc, ch, model, returnSuccess, successResponseBody)
 				if result == nil {
 					return
 				}
@@ -350,3 +371,42 @@ func TestAllChannels(c *gin.Context) {
 		})
 	}
 }
+
+func AutoTestBannedModels() {
+	log := log.WithFields(log.Fields{
+		"auto_test_banned_models": "true",
+	})
+	channels, err := monitor.GetAllBannedChannels(context.Background())
+	if err != nil {
+		log.Errorf("failed to get banned channels: %s", err.Error())
+		return
+	}
+	if len(channels) == 0 {
+		return
+	}
+
+	mc := model.LoadModelCaches()
+
+	for modelName, ids := range channels {
+		for _, id := range ids {
+			channel, err := model.LoadChannelByID(int(id))
+			if err != nil {
+				log.Errorf("failed to get channel by model %s: %s", modelName, err.Error())
+				continue
+			}
+			result, err := testSingleModel(mc, channel, modelName)
+			if err != nil {
+				log.Errorf("failed to test channel %s(%d) model %s: %s", channel.Name, channel.ID, modelName, err.Error())
+			}
+			if result.Success {
+				log.Infof("model %s(%d) test success, unban it", modelName, channel.ID)
+				err = monitor.ClearChannelModelErrors(context.Background(), modelName, channel.ID)
+				if err != nil {
+					log.Errorf("clear channel errors failed: %+v", err)
+				}
+			} else {
+				log.Infof("model %s(%d) test failed", modelName, channel.ID)
+			}
+		}
+	}
+}
diff --git a/service/aiproxy/controller/channel.go b/service/aiproxy/controller/channel.go
index 572a3a061d32..c8f194716ace 100644
--- a/service/aiproxy/controller/channel.go
+++ b/service/aiproxy/controller/channel.go
@@ -1,6 +1,7 @@
 package controller
 
 import (
+	"fmt"
 	"maps"
 	"net/http"
 	"slices"
@@ -10,13 +11,20 @@ import (
 	"github.com/gin-gonic/gin"
 	"github.com/labring/sealos/service/aiproxy/middleware"
 	"github.com/labring/sealos/service/aiproxy/model"
+	"github.com/labring/sealos/service/aiproxy/monitor"
+	"github.com/labring/sealos/service/aiproxy/relay/adaptor"
 	"github.com/labring/sealos/service/aiproxy/relay/channeltype"
+	log "github.com/sirupsen/logrus"
 )
 
 func ChannelTypeNames(c *gin.Context) {
 	middleware.SuccessResponse(c, channeltype.ChannelNames)
 }
 
+func ChannelTypeMetas(c *gin.Context) {
+	middleware.SuccessResponse(c, channeltype.ChannelMetas)
+}
+
 func GetChannels(c *gin.Context) {
 	p, _ := strconv.Atoi(c.Query("p"))
 	p--
@@ -35,7 +43,7 @@ func GetChannels(c *gin.Context) {
 	channelType, _ := strconv.Atoi(c.Query("channel_type"))
 	baseURL := c.Query("base_url")
 	order := c.Query("order")
-	channels, total, err := model.GetChannels(p*perPage, perPage, false, false, id, name, key, channelType, baseURL, order)
+	channels, total, err := model.GetChannels(p*perPage, perPage, id, name, key, channelType, baseURL, order)
 	if err != nil {
 		middleware.ErrorResponse(c, http.StatusOK, err.Error())
 		return
@@ -47,7 +55,7 @@ func GetChannels(c *gin.Context) {
 }
 
 func GetAllChannels(c *gin.Context) {
-	channels, err := model.GetAllChannels(false, false)
+	channels, err := model.GetAllChannels()
 	if err != nil {
 		middleware.ErrorResponse(c, http.StatusOK, err.Error())
 		return
@@ -64,7 +72,12 @@ func AddChannels(c *gin.Context) {
 	}
 	_channels := make([]*model.Channel, 0, len(channels))
 	for _, channel := range channels {
-		_channels = append(_channels, channel.ToChannels()...)
+		channels, err := channel.ToChannels()
+		if err != nil {
+			middleware.ErrorResponse(c, http.StatusOK, err.Error())
+			return
+		}
+		_channels = append(_channels, channels...)
 	}
 	err = model.BatchInsertChannels(_channels)
 	if err != nil {
@@ -93,7 +106,7 @@ func SearchChannels(c *gin.Context) {
 	channelType, _ := strconv.Atoi(c.Query("channel_type"))
 	baseURL := c.Query("base_url")
 	order := c.Query("order")
-	channels, total, err := model.SearchChannels(keyword, p*perPage, perPage, false, false, id, name, key, channelType, baseURL, order)
+	channels, total, err := model.SearchChannels(keyword, p*perPage, perPage, id, name, key, channelType, baseURL, order)
 	if err != nil {
 		middleware.ErrorResponse(c, http.StatusOK, err.Error())
 		return
@@ -110,7 +123,7 @@ func GetChannel(c *gin.Context) {
 		middleware.ErrorResponse(c, http.StatusOK, err.Error())
 		return
 	}
-	channel, err := model.GetChannelByID(id, false)
+	channel, err := model.GetChannelByID(id)
 	if err != nil {
 		middleware.ErrorResponse(c, http.StatusOK, err.Error())
 		return
@@ -119,19 +132,33 @@ func GetChannel(c *gin.Context) {
 }
 
 type AddChannelRequest struct {
-	ModelMapping map[string]string   `json:"model_mapping"`
-	Config       model.ChannelConfig `json:"config"`
-	Name         string              `json:"name"`
-	Key          string              `json:"key"`
-	BaseURL      string              `json:"base_url"`
-	Other        string              `json:"other"`
-	Models       []string            `json:"models"`
-	Type         int                 `json:"type"`
-	Priority     int32               `json:"priority"`
-	Status       int                 `json:"status"`
-}
-
-func (r *AddChannelRequest) ToChannel() *model.Channel {
+	ModelMapping map[string]string    `json:"model_mapping"`
+	Config       *model.ChannelConfig `json:"config"`
+	Name         string               `json:"name"`
+	Key          string               `json:"key"`
+	BaseURL      string               `json:"base_url"`
+	Other        string               `json:"other"`
+	Models       []string             `json:"models"`
+	Type         int                  `json:"type"`
+	Priority     int32                `json:"priority"`
+	Status       int                  `json:"status"`
+}
+
+func (r *AddChannelRequest) ToChannel() (*model.Channel, error) {
+	channelType, ok := channeltype.GetAdaptor(r.Type)
+	if !ok {
+		return nil, fmt.Errorf("invalid channel type: %d", r.Type)
+	}
+	if validator, ok := channelType.(adaptor.KeyValidator); ok {
+		err := validator.ValidateKey(r.Key)
+		if err != nil {
+			keyHelp := validator.KeyHelp()
+			if keyHelp == "" {
+				return nil, fmt.Errorf("%s [%s(%d)] invalid key: %w", r.Name, channeltype.ChannelNames[r.Type], r.Type, err)
+			}
+			return nil, fmt.Errorf("%s [%s(%d)] invalid key: %w, %s", r.Name, channeltype.ChannelNames[r.Type], r.Type, err, keyHelp)
+		}
+	}
 	return &model.Channel{
 		Type:         r.Type,
 		Name:         r.Name,
@@ -139,24 +166,27 @@ func (r *AddChannelRequest) ToChannel() *model.Channel {
 		BaseURL:      r.BaseURL,
 		Models:       slices.Clone(r.Models),
 		ModelMapping: maps.Clone(r.ModelMapping),
-		Config:       r.Config,
 		Priority:     r.Priority,
 		Status:       r.Status,
-	}
+		Config:       r.Config,
+	}, nil
 }
 
-func (r *AddChannelRequest) ToChannels() []*model.Channel {
+func (r *AddChannelRequest) ToChannels() ([]*model.Channel, error) {
 	keys := strings.Split(r.Key, "\n")
 	channels := make([]*model.Channel, 0, len(keys))
 	for _, key := range keys {
 		if key == "" {
 			continue
 		}
-		c := r.ToChannel()
+		c, err := r.ToChannel()
+		if err != nil {
+			return nil, err
+		}
 		c.Key = key
 		channels = append(channels, c)
 	}
-	return channels
+	return channels, nil
 }
 
 func AddChannel(c *gin.Context) {
@@ -166,7 +196,12 @@ func AddChannel(c *gin.Context) {
 		middleware.ErrorResponse(c, http.StatusOK, err.Error())
 		return
 	}
-	err = model.BatchInsertChannels(channel.ToChannels())
+	channels, err := channel.ToChannels()
+	if err != nil {
+		middleware.ErrorResponse(c, http.StatusOK, err.Error())
+		return
+	}
+	err = model.BatchInsertChannels(channels)
 	if err != nil {
 		middleware.ErrorResponse(c, http.StatusOK, err.Error())
 		return
@@ -216,13 +251,21 @@ func UpdateChannel(c *gin.Context) {
 		middleware.ErrorResponse(c, http.StatusOK, err.Error())
 		return
 	}
-	ch := channel.ToChannel()
+	ch, err := channel.ToChannel()
+	if err != nil {
+		middleware.ErrorResponse(c, http.StatusOK, err.Error())
+		return
+	}
 	ch.ID = id
 	err = model.UpdateChannel(ch)
 	if err != nil {
 		middleware.ErrorResponse(c, http.StatusOK, err.Error())
 		return
 	}
+	err = monitor.ClearChannelAllModelErrors(c.Request.Context(), id)
+	if err != nil {
+		log.Errorf("failed to clear channel all model errors: %+v", err)
+	}
 	middleware.SuccessResponse(c, ch)
 }
 
@@ -243,5 +286,9 @@ func UpdateChannelStatus(c *gin.Context) {
 		middleware.ErrorResponse(c, http.StatusOK, err.Error())
 		return
 	}
+	err = monitor.ClearChannelAllModelErrors(c.Request.Context(), id)
+	if err != nil {
+		log.Errorf("failed to clear channel all model errors: %+v", err)
+	}
 	middleware.SuccessResponse(c, nil)
 }
diff --git a/service/aiproxy/controller/dashboard.go b/service/aiproxy/controller/dashboard.go
new file mode 100644
index 000000000000..54c95ad79146
--- /dev/null
+++ b/service/aiproxy/controller/dashboard.go
@@ -0,0 +1,217 @@
+package controller
+
+import (
+	"errors"
+	"fmt"
+	"net/http"
+	"strconv"
+	"time"
+
+	"github.com/gin-gonic/gin"
+	"github.com/labring/sealos/service/aiproxy/common"
+	"github.com/labring/sealos/service/aiproxy/common/rpmlimit"
+	"github.com/labring/sealos/service/aiproxy/middleware"
+	"github.com/labring/sealos/service/aiproxy/model"
+)
+
+func getDashboardTime(t string) (time.Time, time.Time, time.Duration) {
+	end := time.Now()
+	var start time.Time
+	var timeSpan time.Duration
+	switch t {
+	case "month":
+		start = end.AddDate(0, 0, -30)
+		timeSpan = time.Hour * 24
+	case "two_week":
+		start = end.AddDate(0, 0, -15)
+		timeSpan = time.Hour * 24
+	case "week":
+		start = end.AddDate(0, 0, -7)
+		timeSpan = time.Hour * 24
+	case "day":
+		fallthrough
+	default:
+		start = end.AddDate(0, 0, -1)
+		timeSpan = time.Hour * 1
+	}
+	return start, end, timeSpan
+}
+
+func fillGaps(data []*model.ChartData, start, end time.Time, timeSpan time.Duration) []*model.ChartData {
+	if len(data) == 0 {
+		return data
+	}
+
+	// Handle first point
+	firstPoint := time.Unix(data[0].Timestamp, 0)
+	firstAlignedTime := firstPoint
+	for !firstAlignedTime.Add(-timeSpan).Before(start) {
+		firstAlignedTime = firstAlignedTime.Add(-timeSpan)
+	}
+	var firstIsZero bool
+	if !firstAlignedTime.Equal(firstPoint) {
+		data = append([]*model.ChartData{
+			{
+				Timestamp: firstAlignedTime.Unix(),
+			},
+		}, data...)
+		firstIsZero = true
+	}
+
+	// Handle last point
+	lastPoint := time.Unix(data[len(data)-1].Timestamp, 0)
+	lastAlignedTime := lastPoint
+	for !lastAlignedTime.Add(timeSpan).After(end) {
+		lastAlignedTime = lastAlignedTime.Add(timeSpan)
+	}
+	var lastIsZero bool
+	if !lastAlignedTime.Equal(lastPoint) {
+		data = append(data, &model.ChartData{
+			Timestamp: lastAlignedTime.Unix(),
+		})
+		lastIsZero = true
+	}
+
+	result := make([]*model.ChartData, 0, len(data))
+	result = append(result, data[0])
+
+	for i := 1; i < len(data); i++ {
+		curr := data[i]
+		prev := data[i-1]
+		hourDiff := (curr.Timestamp - prev.Timestamp) / int64(timeSpan.Seconds())
+
+		// If gap is 1 hour or less, continue
+		if hourDiff <= 1 {
+			result = append(result, curr)
+			continue
+		}
+
+		// If gap is more than 3 hours, only add boundary points
+		if hourDiff > 3 {
+			// Add point for hour after prev
+			if i != 1 || (i == 1 && !firstIsZero) {
+				result = append(result, &model.ChartData{
+					Timestamp: prev.Timestamp + int64(timeSpan.Seconds()),
+				})
+			}
+			// Add point for hour before curr
+			if i != len(data)-1 || (i == len(data)-1 && !lastIsZero) {
+				result = append(result, &model.ChartData{
+					Timestamp: curr.Timestamp - int64(timeSpan.Seconds()),
+				})
+			}
+			result = append(result, curr)
+			continue
+		}
+
+		// Fill gaps of 2-3 hours with zero points
+		for j := prev.Timestamp + int64(timeSpan.Seconds()); j < curr.Timestamp; j += int64(timeSpan.Seconds()) {
+			result = append(result, &model.ChartData{
+				Timestamp: j,
+			})
+		}
+		result = append(result, curr)
+	}
+
+	return result
+}
+
+func getTimeSpanWithDefault(c *gin.Context, defaultTimeSpan time.Duration) time.Duration {
+	spanStr := c.Query("span")
+	if spanStr == "" {
+		return defaultTimeSpan
+	}
+	span, err := strconv.Atoi(spanStr)
+	if err != nil {
+		return defaultTimeSpan
+	}
+	if span < 1 || span > 48 {
+		return defaultTimeSpan
+	}
+	return time.Duration(span) * time.Hour
+}
+
+func GetDashboard(c *gin.Context) {
+	log := middleware.GetLogger(c)
+
+	start, end, timeSpan := getDashboardTime(c.Query("type"))
+	modelName := c.Query("model")
+	timeSpan = getTimeSpanWithDefault(c, timeSpan)
+
+	dashboards, err := model.GetDashboardData(start, end, modelName, timeSpan)
+	if err != nil {
+		middleware.ErrorResponse(c, http.StatusOK, err.Error())
+		return
+	}
+
+	dashboards.ChartData = fillGaps(dashboards.ChartData, start, end, timeSpan)
+
+	if common.RedisEnabled {
+		rpm, err := rpmlimit.GetRPM(c.Request.Context(), "", modelName)
+		if err != nil {
+			log.Errorf("failed to get rpm: %v", err)
+		} else {
+			dashboards.RPM = rpm
+		}
+	}
+
+	middleware.SuccessResponse(c, dashboards)
+}
+
+func GetGroupDashboard(c *gin.Context) {
+	log := middleware.GetLogger(c)
+
+	group := c.Param("group")
+	if group == "" {
+		middleware.ErrorResponse(c, http.StatusOK, "invalid parameter")
+		return
+	}
+
+	start, end, timeSpan := getDashboardTime(c.Query("type"))
+	tokenName := c.Query("token_name")
+	modelName := c.Query("model")
+	timeSpan = getTimeSpanWithDefault(c, timeSpan)
+
+	dashboards, err := model.GetGroupDashboardData(group, start, end, tokenName, modelName, timeSpan)
+	if err != nil {
+		middleware.ErrorResponse(c, http.StatusOK, "failed to get statistics")
+		return
+	}
+
+	dashboards.ChartData = fillGaps(dashboards.ChartData, start, end, timeSpan)
+
+	if common.RedisEnabled && tokenName == "" {
+		rpm, err := rpmlimit.GetRPM(c.Request.Context(), group, modelName)
+		if err != nil {
+			log.Errorf("failed to get rpm: %v", err)
+		} else {
+			dashboards.RPM = rpm
+		}
+	}
+
+	middleware.SuccessResponse(c, dashboards)
+}
+
+func GetGroupDashboardModels(c *gin.Context) {
+	group := c.Param("group")
+	if group == "" {
+		middleware.ErrorResponse(c, http.StatusOK, "invalid parameter")
+		return
+	}
+	groupCache, err := model.CacheGetGroup(group)
+	if err != nil {
+		if errors.Is(err, model.NotFoundError(model.ErrGroupNotFound)) {
+			middleware.SuccessResponse(c, model.LoadModelCaches().EnabledModelConfigs)
+		} else {
+			middleware.ErrorResponse(c, http.StatusOK, fmt.Sprintf("failed to get group: %v", err))
+		}
+		return
+	}
+
+	enabledModelConfigs := model.LoadModelCaches().EnabledModelConfigs
+	newEnabledModelConfigs := make([]*model.ModelConfig, len(enabledModelConfigs))
+	for i, mc := range enabledModelConfigs {
+		newEnabledModelConfigs[i] = middleware.GetGroupAdjustedModelConfig(groupCache, mc)
+	}
+	middleware.SuccessResponse(c, newEnabledModelConfigs)
+}
diff --git a/service/aiproxy/controller/group.go b/service/aiproxy/controller/group.go
index b52e8a79e201..dd5580ae6a03 100644
--- a/service/aiproxy/controller/group.go
+++ b/service/aiproxy/controller/group.go
@@ -5,14 +5,30 @@ import (
 	"strconv"
 	"time"
 
+	"github.com/gin-gonic/gin"
 	json "github.com/json-iterator/go"
-
 	"github.com/labring/sealos/service/aiproxy/middleware"
 	"github.com/labring/sealos/service/aiproxy/model"
-
-	"github.com/gin-gonic/gin"
 )
 
+type GroupResponse struct {
+	*model.Group
+	AccessedAt time.Time `json:"accessed_at,omitempty"`
+}
+
+func (g *GroupResponse) MarshalJSON() ([]byte, error) {
+	type Alias model.Group
+	return json.Marshal(&struct {
+		*Alias
+		CreatedAt  int64 `json:"created_at,omitempty"`
+		AccessedAt int64 `json:"accessed_at,omitempty"`
+	}{
+		Alias:      (*Alias)(g.Group),
+		CreatedAt:  g.CreatedAt.UnixMilli(),
+		AccessedAt: g.AccessedAt.UnixMilli(),
+	})
+}
+
 func GetGroups(c *gin.Context) {
 	p, _ := strconv.Atoi(c.Query("p"))
 	p--
@@ -32,8 +48,16 @@ func GetGroups(c *gin.Context) {
 		middleware.ErrorResponse(c, http.StatusOK, err.Error())
 		return
 	}
+	groupResponses := make([]*GroupResponse, len(groups))
+	for i, group := range groups {
+		lastRequestAt, _ := model.GetGroupLastRequestTime(group.ID)
+		groupResponses[i] = &GroupResponse{
+			Group:      group,
+			AccessedAt: lastRequestAt,
+		}
+	}
 	middleware.SuccessResponse(c, gin.H{
-		"groups": groups,
+		"groups": groupResponses,
 		"total":  total,
 	})
 }
@@ -58,57 +82,128 @@ func SearchGroups(c *gin.Context) {
 		middleware.ErrorResponse(c, http.StatusOK, err.Error())
 		return
 	}
+	groupResponses := make([]*GroupResponse, len(groups))
+	for i, group := range groups {
+		lastRequestAt, _ := model.GetGroupLastRequestTime(group.ID)
+		groupResponses[i] = &GroupResponse{
+			Group:      group,
+			AccessedAt: lastRequestAt,
+		}
+	}
 	middleware.SuccessResponse(c, gin.H{
-		"groups": groups,
+		"groups": groupResponses,
 		"total":  total,
 	})
 }
 
 func GetGroup(c *gin.Context) {
-	id := c.Param("id")
-	if id == "" {
+	group := c.Param("group")
+	if group == "" {
 		middleware.ErrorResponse(c, http.StatusOK, "group id is empty")
 		return
 	}
-	group, err := model.GetGroupByID(id)
+	_group, err := model.GetGroupByID(group)
+	if err != nil {
+		middleware.ErrorResponse(c, http.StatusOK, err.Error())
+		return
+	}
+	lastRequestAt, _ := model.GetGroupLastRequestTime(group)
+	groupResponse := &GroupResponse{
+		Group:      _group,
+		AccessedAt: lastRequestAt,
+	}
+	middleware.SuccessResponse(c, groupResponse)
+}
+
+type UpdateGroupRPMRatioRequest struct {
+	RPMRatio float64 `json:"rpm_ratio"`
+}
+
+func UpdateGroupRPMRatio(c *gin.Context) {
+	group := c.Param("group")
+	if group == "" {
+		middleware.ErrorResponse(c, http.StatusOK, "invalid parameter")
+		return
+	}
+	req := UpdateGroupRPMRatioRequest{}
+	err := json.NewDecoder(c.Request.Body).Decode(&req)
+	if err != nil {
+		middleware.ErrorResponse(c, http.StatusOK, "invalid parameter")
+		return
+	}
+	err = model.UpdateGroupRPMRatio(group, req.RPMRatio)
+	if err != nil {
+		middleware.ErrorResponse(c, http.StatusOK, err.Error())
+		return
+	}
+	middleware.SuccessResponse(c, nil)
+}
+
+type UpdateGroupRPMRequest struct {
+	RPM map[string]int64 `json:"rpm"`
+}
+
+func UpdateGroupRPM(c *gin.Context) {
+	group := c.Param("group")
+	if group == "" {
+		middleware.ErrorResponse(c, http.StatusOK, "invalid parameter")
+		return
+	}
+	req := UpdateGroupRPMRequest{}
+	err := json.NewDecoder(c.Request.Body).Decode(&req)
+	if err != nil {
+		middleware.ErrorResponse(c, http.StatusOK, "invalid parameter")
+		return
+	}
+	err = model.UpdateGroupRPM(group, req.RPM)
 	if err != nil {
 		middleware.ErrorResponse(c, http.StatusOK, err.Error())
 		return
 	}
-	middleware.SuccessResponse(c, group)
+	middleware.SuccessResponse(c, nil)
 }
 
-func GetGroupDashboard(c *gin.Context) {
-	id := c.Param("id")
-	now := time.Now()
-	startOfDay := now.Truncate(24*time.Hour).AddDate(0, 0, -6).Unix()
-	endOfDay := now.Truncate(24 * time.Hour).Add(24*time.Hour - time.Second).Unix()
+type UpdateGroupTPMRequest struct {
+	TPM map[string]int64 `json:"tpm"`
+}
 
-	dashboards, err := model.SearchLogsByDayAndModel(id, time.Unix(startOfDay, 0), time.Unix(endOfDay, 0))
+func UpdateGroupTPM(c *gin.Context) {
+	group := c.Param("group")
+	if group == "" {
+		middleware.ErrorResponse(c, http.StatusOK, "invalid parameter")
+		return
+	}
+	req := UpdateGroupTPMRequest{}
+	err := json.NewDecoder(c.Request.Body).Decode(&req)
 	if err != nil {
-		middleware.ErrorResponse(c, http.StatusOK, "failed to get statistics")
+		middleware.ErrorResponse(c, http.StatusOK, "invalid parameter")
 		return
 	}
-	middleware.SuccessResponse(c, dashboards)
+	err = model.UpdateGroupTPM(group, req.TPM)
+	if err != nil {
+		middleware.ErrorResponse(c, http.StatusOK, err.Error())
+		return
+	}
+	middleware.SuccessResponse(c, nil)
 }
 
-type UpdateGroupQPMRequest struct {
-	QPM int64 `json:"qpm"`
+type UpdateGroupTPMRatioRequest struct {
+	TPMRatio float64 `json:"tpm_ratio"`
 }
 
-func UpdateGroupQPM(c *gin.Context) {
-	id := c.Param("id")
-	if id == "" {
+func UpdateGroupTPMRatio(c *gin.Context) {
+	group := c.Param("group")
+	if group == "" {
 		middleware.ErrorResponse(c, http.StatusOK, "invalid parameter")
 		return
 	}
-	req := UpdateGroupQPMRequest{}
+	req := UpdateGroupTPMRatioRequest{}
 	err := json.NewDecoder(c.Request.Body).Decode(&req)
 	if err != nil {
 		middleware.ErrorResponse(c, http.StatusOK, "invalid parameter")
 		return
 	}
-	err = model.UpdateGroupQPM(id, req.QPM)
+	err = model.UpdateGroupTPMRatio(group, req.TPMRatio)
 	if err != nil {
 		middleware.ErrorResponse(c, http.StatusOK, err.Error())
 		return
@@ -121,8 +216,8 @@ type UpdateGroupStatusRequest struct {
 }
 
 func UpdateGroupStatus(c *gin.Context) {
-	id := c.Param("id")
-	if id == "" {
+	group := c.Param("group")
+	if group == "" {
 		middleware.ErrorResponse(c, http.StatusOK, "invalid parameter")
 		return
 	}
@@ -132,7 +227,7 @@ func UpdateGroupStatus(c *gin.Context) {
 		middleware.ErrorResponse(c, http.StatusOK, "invalid parameter")
 		return
 	}
-	err = model.UpdateGroupStatus(id, req.Status)
+	err = model.UpdateGroupStatus(group, req.Status)
 	if err != nil {
 		middleware.ErrorResponse(c, http.StatusOK, err.Error())
 		return
@@ -141,12 +236,12 @@ func UpdateGroupStatus(c *gin.Context) {
 }
 
 func DeleteGroup(c *gin.Context) {
-	id := c.Param("id")
-	if id == "" {
+	group := c.Param("group")
+	if group == "" {
 		middleware.ErrorResponse(c, http.StatusOK, "invalid parameter")
 		return
 	}
-	err := model.DeleteGroupByID(id)
+	err := model.DeleteGroupByID(group)
 	if err != nil {
 		middleware.ErrorResponse(c, http.StatusOK, err.Error())
 		return
@@ -170,20 +265,30 @@ func DeleteGroups(c *gin.Context) {
 }
 
 type CreateGroupRequest struct {
-	ID  string `json:"id"`
-	QPM int64  `json:"qpm"`
+	RPM      map[string]int64 `json:"rpm"`
+	RPMRatio float64          `json:"rpm_ratio"`
+	TPM      map[string]int64 `json:"tpm"`
+	TPMRatio float64          `json:"tpm_ratio"`
 }
 
 func CreateGroup(c *gin.Context) {
-	var group CreateGroupRequest
-	err := json.NewDecoder(c.Request.Body).Decode(&group)
-	if err != nil || group.ID == "" {
+	group := c.Param("group")
+	if group == "" {
+		middleware.ErrorResponse(c, http.StatusOK, "invalid parameter")
+		return
+	}
+	req := CreateGroupRequest{}
+	err := json.NewDecoder(c.Request.Body).Decode(&req)
+	if err != nil {
 		middleware.ErrorResponse(c, http.StatusOK, "invalid parameter")
 		return
 	}
 	if err := model.CreateGroup(&model.Group{
-		ID:  group.ID,
-		QPM: group.QPM,
+		ID:       group,
+		RPMRatio: req.RPMRatio,
+		RPM:      req.RPM,
+		TPMRatio: req.TPMRatio,
+		TPM:      req.TPM,
 	}); err != nil {
 		middleware.ErrorResponse(c, http.StatusOK, err.Error())
 		return
diff --git a/service/aiproxy/controller/log.go b/service/aiproxy/controller/log.go
index 651aa610452b..f028a9099bec 100644
--- a/service/aiproxy/controller/log.go
+++ b/service/aiproxy/controller/log.go
@@ -22,7 +22,6 @@ func GetLogs(c *gin.Context) {
 	} else if perPage > 100 {
 		perPage = 100
 	}
-	code, _ := strconv.Atoi(c.Query("code"))
 	startTimestamp, _ := strconv.ParseInt(c.Query("start_timestamp"), 10, 64)
 	endTimestamp, _ := strconv.ParseInt(c.Query("end_timestamp"), 10, 64)
 	var startTimestampTime time.Time
@@ -35,42 +34,47 @@ func GetLogs(c *gin.Context) {
 	}
 	tokenName := c.Query("token_name")
 	modelName := c.Query("model_name")
-	channel, _ := strconv.Atoi(c.Query("channel"))
+	channelID, _ := strconv.Atoi(c.Query("channel"))
 	group := c.Query("group")
 	endpoint := c.Query("endpoint")
-	content := c.Query("content")
 	tokenID, _ := strconv.Atoi(c.Query("token_id"))
 	order := c.Query("order")
 	requestID := c.Query("request_id")
 	mode, _ := strconv.Atoi(c.Query("mode"))
-	logs, total, err := model.GetLogs(
+	codeType := c.Query("code_type")
+	withBody, _ := strconv.ParseBool(c.Query("with_body"))
+	ip := c.Query("ip")
+	result, err := model.GetLogs(
+		group,
 		startTimestampTime,
 		endTimestampTime,
-		code,
 		modelName,
-		group,
 		requestID,
 		tokenID,
 		tokenName,
-		p*perPage,
-		perPage,
-		channel,
+		channelID,
 		endpoint,
-		content,
 		order,
 		mode,
+		model.CodeType(codeType),
+		withBody,
+		ip,
+		p,
+		perPage,
 	)
 	if err != nil {
 		middleware.ErrorResponse(c, http.StatusOK, err.Error())
 		return
 	}
-	middleware.SuccessResponse(c, gin.H{
-		"logs":  logs,
-		"total": total,
-	})
+	middleware.SuccessResponse(c, result)
 }
 
 func GetGroupLogs(c *gin.Context) {
+	group := c.Param("group")
+	if group == "" {
+		middleware.ErrorResponse(c, http.StatusOK, "group is required")
+		return
+	}
 	p, _ := strconv.Atoi(c.Query("p"))
 	p--
 	if p < 0 {
@@ -82,7 +86,6 @@ func GetGroupLogs(c *gin.Context) {
 	} else if perPage > 100 {
 		perPage = 100
 	}
-	code, _ := strconv.Atoi(c.Query("code"))
 	startTimestamp, _ := strconv.ParseInt(c.Query("start_timestamp"), 10, 64)
 	endTimestamp, _ := strconv.ParseInt(c.Query("end_timestamp"), 10, 64)
 	var startTimestampTime time.Time
@@ -95,39 +98,38 @@ func GetGroupLogs(c *gin.Context) {
 	}
 	tokenName := c.Query("token_name")
 	modelName := c.Query("model_name")
-	channel, _ := strconv.Atoi(c.Query("channel"))
-	group := c.Param("group")
+	channelID, _ := strconv.Atoi(c.Query("channel"))
 	endpoint := c.Query("endpoint")
-	content := c.Query("content")
 	tokenID, _ := strconv.Atoi(c.Query("token_id"))
 	order := c.Query("order")
 	requestID := c.Query("request_id")
 	mode, _ := strconv.Atoi(c.Query("mode"))
-	logs, total, err := model.GetGroupLogs(
+	codeType := c.Query("code_type")
+	withBody, _ := strconv.ParseBool(c.Query("with_body"))
+	ip := c.Query("ip")
+	result, err := model.GetGroupLogs(
 		group,
 		startTimestampTime,
 		endTimestampTime,
-		code,
 		modelName,
 		requestID,
 		tokenID,
 		tokenName,
-		p*perPage,
-		perPage,
-		channel,
+		channelID,
 		endpoint,
-		content,
 		order,
 		mode,
+		model.CodeType(codeType),
+		withBody,
+		ip,
+		p,
+		perPage,
 	)
 	if err != nil {
 		middleware.ErrorResponse(c, http.StatusOK, err.Error())
 		return
 	}
-	middleware.SuccessResponse(c, gin.H{
-		"logs":  logs,
-		"total": total,
-	})
+	middleware.SuccessResponse(c, result)
 }
 
 func SearchLogs(c *gin.Context) {
@@ -139,14 +141,12 @@ func SearchLogs(c *gin.Context) {
 	} else if perPage > 100 {
 		perPage = 100
 	}
-	code, _ := strconv.Atoi(c.Query("code"))
 	endpoint := c.Query("endpoint")
 	tokenName := c.Query("token_name")
 	modelName := c.Query("model_name")
-	content := c.Query("content")
-	groupID := c.Query("group_id")
+	group := c.Query("group_id")
 	tokenID, _ := strconv.Atoi(c.Query("token_id"))
-	channel, _ := strconv.Atoi(c.Query("channel"))
+	channelID, _ := strconv.Atoi(c.Query("channel"))
 	startTimestamp, _ := strconv.ParseInt(c.Query("start_timestamp"), 10, 64)
 	endTimestamp, _ := strconv.ParseInt(c.Query("end_timestamp"), 10, 64)
 	var startTimestampTime time.Time
@@ -160,35 +160,41 @@ func SearchLogs(c *gin.Context) {
 	order := c.Query("order")
 	requestID := c.Query("request_id")
 	mode, _ := strconv.Atoi(c.Query("mode"))
-	logs, total, err := model.SearchLogs(
+	codeType := c.Query("code_type")
+	withBody, _ := strconv.ParseBool(c.Query("with_body"))
+	ip := c.Query("ip")
+	result, err := model.SearchLogs(
+		group,
 		keyword,
-		p,
-		perPage,
-		code,
 		endpoint,
-		groupID,
 		requestID,
 		tokenID,
 		tokenName,
 		modelName,
-		content,
 		startTimestampTime,
 		endTimestampTime,
-		channel,
+		channelID,
 		order,
 		mode,
+		model.CodeType(codeType),
+		withBody,
+		ip,
+		p,
+		perPage,
 	)
 	if err != nil {
 		middleware.ErrorResponse(c, http.StatusOK, err.Error())
 		return
 	}
-	middleware.SuccessResponse(c, gin.H{
-		"logs":  logs,
-		"total": total,
-	})
+	middleware.SuccessResponse(c, result)
 }
 
 func SearchGroupLogs(c *gin.Context) {
+	group := c.Param("group")
+	if group == "" {
+		middleware.ErrorResponse(c, http.StatusOK, "group is required")
+		return
+	}
 	keyword := c.Query("keyword")
 	p, _ := strconv.Atoi(c.Query("p"))
 	perPage, _ := strconv.Atoi(c.Query("per_page"))
@@ -197,12 +203,9 @@ func SearchGroupLogs(c *gin.Context) {
 	} else if perPage > 100 {
 		perPage = 100
 	}
-	group := c.Param("group")
-	code, _ := strconv.Atoi(c.Query("code"))
 	endpoint := c.Query("endpoint")
 	tokenName := c.Query("token_name")
 	modelName := c.Query("model_name")
-	content := c.Query("content")
 	tokenID, _ := strconv.Atoi(c.Query("token_id"))
 	channelID, _ := strconv.Atoi(c.Query("channel"))
 	startTimestamp, _ := strconv.ParseInt(c.Query("start_timestamp"), 10, 64)
@@ -218,32 +221,58 @@ func SearchGroupLogs(c *gin.Context) {
 	order := c.Query("order")
 	requestID := c.Query("request_id")
 	mode, _ := strconv.Atoi(c.Query("mode"))
-	logs, total, err := model.SearchGroupLogs(
+	codeType := c.Query("code_type")
+	withBody, _ := strconv.ParseBool(c.Query("with_body"))
+	ip := c.Query("ip")
+	result, err := model.SearchGroupLogs(
 		group,
 		keyword,
-		p,
-		perPage,
-		code,
 		endpoint,
 		requestID,
 		tokenID,
 		tokenName,
 		modelName,
-		content,
 		startTimestampTime,
 		endTimestampTime,
 		channelID,
 		order,
 		mode,
+		model.CodeType(codeType),
+		withBody,
+		ip,
+		p,
+		perPage,
 	)
 	if err != nil {
 		middleware.ErrorResponse(c, http.StatusOK, err.Error())
 		return
 	}
-	middleware.SuccessResponse(c, gin.H{
-		"logs":  logs,
-		"total": total,
-	})
+	middleware.SuccessResponse(c, result)
+}
+
+func GetLogDetail(c *gin.Context) {
+	logID, _ := strconv.Atoi(c.Param("log_id"))
+	log, err := model.GetLogDetail(logID)
+	if err != nil {
+		middleware.ErrorResponse(c, http.StatusOK, err.Error())
+		return
+	}
+	middleware.SuccessResponse(c, log)
+}
+
+func GetGroupLogDetail(c *gin.Context) {
+	group := c.Param("group")
+	if group == "" {
+		middleware.ErrorResponse(c, http.StatusOK, "group is required")
+		return
+	}
+	logID, _ := strconv.Atoi(c.Param("log_id"))
+	log, err := model.GetGroupLogDetail(logID, group)
+	if err != nil {
+		middleware.ErrorResponse(c, http.StatusOK, err.Error())
+		return
+	}
+	middleware.SuccessResponse(c, log)
 }
 
 func DeleteHistoryLogs(c *gin.Context) {
diff --git a/service/aiproxy/controller/misc.go b/service/aiproxy/controller/misc.go
index 83f10290ff21..21ed6f03b305 100644
--- a/service/aiproxy/controller/misc.go
+++ b/service/aiproxy/controller/misc.go
@@ -1,10 +1,9 @@
 package controller
 
 import (
+	"github.com/gin-gonic/gin"
 	"github.com/labring/sealos/service/aiproxy/common"
 	"github.com/labring/sealos/service/aiproxy/middleware"
-
-	"github.com/gin-gonic/gin"
 )
 
 type StatusData struct {
diff --git a/service/aiproxy/controller/model.go b/service/aiproxy/controller/model.go
index 2db6be6c1c12..06e27e671e08 100644
--- a/service/aiproxy/controller/model.go
+++ b/service/aiproxy/controller/model.go
@@ -168,11 +168,11 @@ func ChannelDefaultModelsAndMappingByType(c *gin.Context) {
 }
 
 func EnabledModels(c *gin.Context) {
-	middleware.SuccessResponse(c, model.CacheGetEnabledModelConfigs())
+	middleware.SuccessResponse(c, model.LoadModelCaches().EnabledModelConfigs)
 }
 
 func ChannelEnabledModels(c *gin.Context) {
-	middleware.SuccessResponse(c, model.CacheGetEnabledChannelType2ModelConfigs())
+	middleware.SuccessResponse(c, model.LoadModelCaches().EnabledChannelType2ModelConfigs)
 }
 
 func ChannelEnabledModelsByType(c *gin.Context) {
@@ -186,23 +186,26 @@ func ChannelEnabledModelsByType(c *gin.Context) {
 		middleware.ErrorResponse(c, http.StatusOK, "invalid type")
 		return
 	}
-	middleware.SuccessResponse(c, model.CacheGetEnabledChannelType2ModelConfigs()[channelTypeInt])
+	middleware.SuccessResponse(c, model.LoadModelCaches().EnabledChannelType2ModelConfigs[channelTypeInt])
 }
 
 func ListModels(c *gin.Context) {
-	models := model.CacheGetEnabledModelConfigs()
-
-	availableOpenAIModels := make([]*OpenAIModels, len(models))
-
-	for idx, model := range models {
-		availableOpenAIModels[idx] = &OpenAIModels{
-			ID:         model.Model,
-			Object:     "model",
-			Created:    1626777600,
-			OwnedBy:    string(model.Owner),
-			Root:       model.Model,
-			Permission: permission,
-			Parent:     nil,
+	enabledModelConfigsMap := middleware.GetModelCaches(c).EnabledModelConfigsMap
+	token := middleware.GetToken(c)
+
+	availableOpenAIModels := make([]*OpenAIModels, 0, len(token.Models))
+
+	for _, model := range token.Models {
+		if mc, ok := enabledModelConfigsMap[model]; ok {
+			availableOpenAIModels = append(availableOpenAIModels, &OpenAIModels{
+				ID:         model,
+				Object:     "model",
+				Created:    1626777600,
+				OwnedBy:    string(mc.Owner),
+				Root:       model,
+				Permission: permission,
+				Parent:     nil,
+			})
 		}
 	}
 
@@ -214,10 +217,15 @@ func ListModels(c *gin.Context) {
 
 func RetrieveModel(c *gin.Context) {
 	modelName := c.Param("model")
-	enabledModels := model.GetEnabledModel2Channels()
-	model, ok := model.CacheGetModelConfig(modelName)
+	enabledModelConfigsMap := middleware.GetModelCaches(c).EnabledModelConfigsMap
 
-	if _, exist := enabledModels[modelName]; !exist || !ok {
+	mc, ok := enabledModelConfigsMap[modelName]
+	if ok {
+		token := middleware.GetToken(c)
+		ok = slices.Contains(token.Models, modelName)
+	}
+
+	if !ok {
 		c.JSON(200, gin.H{
 			"error": &relaymodel.Error{
 				Message: fmt.Sprintf("the model '%s' does not exist", modelName),
@@ -230,11 +238,11 @@ func RetrieveModel(c *gin.Context) {
 	}
 
 	c.JSON(200, &OpenAIModels{
-		ID:         model.Model,
+		ID:         modelName,
 		Object:     "model",
 		Created:    1626777600,
-		OwnedBy:    string(model.Owner),
-		Root:       model.Model,
+		OwnedBy:    string(mc.Owner),
+		Root:       modelName,
 		Permission: permission,
 		Parent:     nil,
 	})
diff --git a/service/aiproxy/controller/modelconfig.go b/service/aiproxy/controller/modelconfig.go
index 94501cd4806e..b79d130a70a1 100644
--- a/service/aiproxy/controller/modelconfig.go
+++ b/service/aiproxy/controller/modelconfig.go
@@ -87,13 +87,23 @@ func SearchModelConfigs(c *gin.Context) {
 	})
 }
 
+type SaveModelConfigsRequest struct {
+	CreatedAt int64 `json:"created_at"`
+	UpdatedAt int64 `json:"updated_at"`
+	*model.ModelConfig
+}
+
 func SaveModelConfigs(c *gin.Context) {
-	var configs []*model.ModelConfig
+	var configs []*SaveModelConfigsRequest
 	if err := c.ShouldBindJSON(&configs); err != nil {
 		middleware.ErrorResponse(c, http.StatusOK, err.Error())
 		return
 	}
-	err := model.SaveModelConfigs(configs)
+	modelConfigs := make([]*model.ModelConfig, len(configs))
+	for i, config := range configs {
+		modelConfigs[i] = config.ModelConfig
+	}
+	err := model.SaveModelConfigs(modelConfigs)
 	if err != nil {
 		middleware.ErrorResponse(c, http.StatusOK, err.Error())
 		return
@@ -102,12 +112,12 @@ func SaveModelConfigs(c *gin.Context) {
 }
 
 func SaveModelConfig(c *gin.Context) {
-	var config model.ModelConfig
+	var config SaveModelConfigsRequest
 	if err := c.ShouldBindJSON(&config); err != nil {
 		middleware.ErrorResponse(c, http.StatusOK, err.Error())
 		return
 	}
-	err := model.SaveModelConfig(&config)
+	err := model.SaveModelConfig(config.ModelConfig)
 	if err != nil {
 		middleware.ErrorResponse(c, http.StatusOK, err.Error())
 		return
diff --git a/service/aiproxy/controller/monitor.go b/service/aiproxy/controller/monitor.go
new file mode 100644
index 000000000000..fbe4be466d06
--- /dev/null
+++ b/service/aiproxy/controller/monitor.go
@@ -0,0 +1,74 @@
+package controller
+
+import (
+	"net/http"
+	"strconv"
+
+	"github.com/gin-gonic/gin"
+	"github.com/labring/sealos/service/aiproxy/middleware"
+	"github.com/labring/sealos/service/aiproxy/monitor"
+)
+
+func GetAllChannelModelErrorRates(c *gin.Context) {
+	rates, err := monitor.GetAllChannelModelErrorRates(c.Request.Context())
+	if err != nil {
+		middleware.ErrorResponse(c, http.StatusOK, err.Error())
+		return
+	}
+	c.JSON(http.StatusOK, rates)
+}
+
+func GetChannelModelErrorRates(c *gin.Context) {
+	channelID := c.Param("id")
+	channelIDInt, err := strconv.ParseInt(channelID, 10, 64)
+	if err != nil {
+		middleware.ErrorResponse(c, http.StatusOK, "Invalid channel ID")
+		return
+	}
+	rates, err := monitor.GetChannelModelErrorRates(c.Request.Context(), channelIDInt)
+	if err != nil {
+		middleware.ErrorResponse(c, http.StatusOK, err.Error())
+		return
+	}
+	c.JSON(http.StatusOK, rates)
+}
+
+func ClearAllModelErrors(c *gin.Context) {
+	err := monitor.ClearAllModelErrors(c.Request.Context())
+	if err != nil {
+		middleware.ErrorResponse(c, http.StatusOK, err.Error())
+		return
+	}
+	c.Status(http.StatusNoContent)
+}
+
+func ClearChannelAllModelErrors(c *gin.Context) {
+	channelID := c.Param("id")
+	channelIDInt, err := strconv.ParseInt(channelID, 10, 64)
+	if err != nil {
+		middleware.ErrorResponse(c, http.StatusOK, "Invalid channel ID")
+		return
+	}
+	err = monitor.ClearChannelAllModelErrors(c.Request.Context(), int(channelIDInt))
+	if err != nil {
+		middleware.ErrorResponse(c, http.StatusOK, err.Error())
+		return
+	}
+	c.Status(http.StatusNoContent)
+}
+
+func ClearChannelModelErrors(c *gin.Context) {
+	channelID := c.Param("id")
+	model := c.Param("model")
+	channelIDInt, err := strconv.ParseInt(channelID, 10, 64)
+	if err != nil {
+		middleware.ErrorResponse(c, http.StatusOK, "Invalid channel ID")
+		return
+	}
+	err = monitor.ClearChannelModelErrors(c.Request.Context(), model, int(channelIDInt))
+	if err != nil {
+		middleware.ErrorResponse(c, http.StatusOK, err.Error())
+		return
+	}
+	c.Status(http.StatusNoContent)
+}
diff --git a/service/aiproxy/controller/option.go b/service/aiproxy/controller/option.go
index 6197331bb490..348a37f08db6 100644
--- a/service/aiproxy/controller/option.go
+++ b/service/aiproxy/controller/option.go
@@ -3,12 +3,10 @@ package controller
 import (
 	"net/http"
 
+	"github.com/gin-gonic/gin"
 	json "github.com/json-iterator/go"
-
 	"github.com/labring/sealos/service/aiproxy/middleware"
 	"github.com/labring/sealos/service/aiproxy/model"
-
-	"github.com/gin-gonic/gin"
 )
 
 func GetOptions(c *gin.Context) {
@@ -24,6 +22,20 @@ func GetOptions(c *gin.Context) {
 	middleware.SuccessResponse(c, options)
 }
 
+func GetOption(c *gin.Context) {
+	key := c.Param("key")
+	if key == "" {
+		middleware.ErrorResponse(c, http.StatusOK, "key is required")
+		return
+	}
+	option, err := model.GetOption(key)
+	if err != nil {
+		middleware.ErrorResponse(c, http.StatusOK, err.Error())
+		return
+	}
+	middleware.SuccessResponse(c, option)
+}
+
 func UpdateOption(c *gin.Context) {
 	var option model.Option
 	err := json.NewDecoder(c.Request.Body).Decode(&option)
diff --git a/service/aiproxy/controller/relay.go b/service/aiproxy/controller/relay.go
index 1d30cef78afd..f9c8afcf3534 100644
--- a/service/aiproxy/controller/relay.go
+++ b/service/aiproxy/controller/relay.go
@@ -2,112 +2,188 @@ package controller
 
 import (
 	"bytes"
+	"context"
+	"errors"
 	"io"
 	"net/http"
 
 	"github.com/gin-gonic/gin"
 	"github.com/labring/sealos/service/aiproxy/common"
 	"github.com/labring/sealos/service/aiproxy/common/config"
-	"github.com/labring/sealos/service/aiproxy/common/helper"
 	"github.com/labring/sealos/service/aiproxy/middleware"
 	dbmodel "github.com/labring/sealos/service/aiproxy/model"
+	"github.com/labring/sealos/service/aiproxy/monitor"
 	"github.com/labring/sealos/service/aiproxy/relay/controller"
 	"github.com/labring/sealos/service/aiproxy/relay/meta"
 	"github.com/labring/sealos/service/aiproxy/relay/model"
 	"github.com/labring/sealos/service/aiproxy/relay/relaymode"
+	log "github.com/sirupsen/logrus"
 )
 
 // https://platform.openai.com/docs/api-reference/chat
 
-func relayHelper(meta *meta.Meta, c *gin.Context) *model.ErrorWithStatusCode {
-	log := middleware.GetLogger(c)
-	middleware.SetLogFieldsFromMeta(meta, log.Data)
-	switch meta.Mode {
-	case relaymode.ImagesGenerations:
-		return controller.RelayImageHelper(meta, c)
+type RelayController func(*meta.Meta, *gin.Context) *model.ErrorWithStatusCode
+
+func relayController(mode int) (RelayController, bool) {
+	var relayController RelayController
+	switch mode {
+	case relaymode.ImagesGenerations,
+		relaymode.Edits:
+		relayController = controller.RelayImageHelper
 	case relaymode.AudioSpeech:
-		return controller.RelayTTSHelper(meta, c)
-	case relaymode.AudioTranslation:
-		return controller.RelaySTTHelper(meta, c)
-	case relaymode.AudioTranscription:
-		return controller.RelaySTTHelper(meta, c)
+		relayController = controller.RelayTTSHelper
+	case relaymode.AudioTranslation,
+		relaymode.AudioTranscription:
+		relayController = controller.RelaySTTHelper
 	case relaymode.Rerank:
-		return controller.RerankHelper(meta, c)
+		relayController = controller.RerankHelper
+	case relaymode.ChatCompletions,
+		relaymode.Embeddings,
+		relaymode.Completions,
+		relaymode.Moderations:
+		relayController = controller.RelayTextHelper
 	default:
-		return controller.RelayTextHelper(meta, c)
+		return nil, false
 	}
+	return func(meta *meta.Meta, c *gin.Context) *model.ErrorWithStatusCode {
+		log := middleware.GetLogger(c)
+		middleware.SetLogFieldsFromMeta(meta, log.Data)
+		return relayController(meta, c)
+	}, true
 }
 
-func Relay(c *gin.Context) {
+func RelayHelper(meta *meta.Meta, c *gin.Context, relayController RelayController) (*model.ErrorWithStatusCode, bool) {
+	err := relayController(meta, c)
+	if err == nil {
+		if err := monitor.AddRequest(
+			context.Background(),
+			meta.OriginModel,
+			int64(meta.Channel.ID),
+			false,
+		); err != nil {
+			log.Errorf("add request failed: %+v", err)
+		}
+		return nil, false
+	}
+	if shouldRetry(c, err.StatusCode) {
+		if err := monitor.AddRequest(
+			context.Background(),
+			meta.OriginModel,
+			int64(meta.Channel.ID),
+			true,
+		); err != nil {
+			log.Errorf("add request failed: %+v", err)
+		}
+		return err, true
+	}
+	return err, false
+}
+
+func getChannelWithFallback(cache *dbmodel.ModelCaches, model string, failedChannelIDs ...int) (*dbmodel.Channel, error) {
+	channel, err := cache.GetRandomSatisfiedChannel(model, failedChannelIDs...)
+	if err == nil {
+		return channel, nil
+	}
+	if !errors.Is(err, dbmodel.ErrChannelsExhausted) {
+		return nil, err
+	}
+	return cache.GetRandomSatisfiedChannel(model)
+}
+
+func NewRelay(mode int) func(c *gin.Context) {
+	relayController, ok := relayController(mode)
+	if !ok {
+		log.Fatalf("relay mode %d not implemented", mode)
+	}
+	return func(c *gin.Context) {
+		relay(c, mode, relayController)
+	}
+}
+
+func relay(c *gin.Context, mode int, relayController RelayController) {
 	log := middleware.GetLogger(c)
-	if config.DebugEnabled {
-		requestBody, _ := common.GetRequestBody(c.Request)
-		log.Debugf("request body: %s", requestBody)
+
+	requestModel := middleware.GetOriginalModel(c)
+
+	ids, err := monitor.GetBannedChannels(c.Request.Context(), requestModel)
+	if err != nil {
+		log.Errorf("get %s auto banned channels failed: %+v", requestModel, err)
+	}
+
+	log.Debugf("%s model banned channels: %+v", requestModel, ids)
+
+	failedChannelIDs := []int{}
+	for _, id := range ids {
+		failedChannelIDs = append(failedChannelIDs, int(id))
 	}
-	meta := middleware.NewMetaByContext(c)
-	bizErr := relayHelper(meta, c)
+
+	mc := middleware.GetModelCaches(c)
+
+	channel, err := getChannelWithFallback(mc, requestModel, failedChannelIDs...)
+	if err != nil {
+		c.JSON(http.StatusServiceUnavailable, gin.H{
+			"error": &model.Error{
+				Message: "The upstream load is saturated, please try again later",
+				Code:    "upstream_load_saturated",
+				Type:    middleware.ErrorTypeAIPROXY,
+			},
+		})
+		return
+	}
+
+	meta := middleware.NewMetaByContext(c, channel, requestModel, mode)
+	bizErr, retry := RelayHelper(meta, c, relayController)
 	if bizErr == nil {
 		return
 	}
-	lastFailedChannelID := meta.Channel.ID
-	requestID := c.GetString(string(helper.RequestIDKey))
-	retryTimes := config.GetRetryTimes()
-	if !shouldRetry(c, bizErr.StatusCode) {
-		retryTimes = 0
+	failedChannelIDs = append(failedChannelIDs, channel.ID)
+	requestID := middleware.GetRequestID(c)
+	var retryTimes int64
+	if retry {
+		retryTimes = config.GetRetryTimes()
 	}
 	for i := retryTimes; i > 0; i-- {
-		channel, err := dbmodel.CacheGetRandomSatisfiedChannel(meta.OriginModelName)
+		newChannel, err := mc.GetRandomSatisfiedChannel(requestModel, failedChannelIDs...)
 		if err != nil {
-			log.Errorf("get random satisfied channel failed: %+v", err)
-			break
-		}
-		log.Infof("using channel #%d to retry (remain times %d)", channel.ID, i)
-		if channel.ID == lastFailedChannelID {
-			continue
+			if errors.Is(err, dbmodel.ErrChannelsNotFound) {
+				break
+			}
+			if !errors.Is(err, dbmodel.ErrChannelsExhausted) {
+				break
+			}
+			newChannel = channel
 		}
+		log.Warnf("using channel %s(%d) to retry (remain times %d)", newChannel.Name, newChannel.ID, i)
 		requestBody, err := common.GetRequestBody(c.Request)
 		if err != nil {
 			log.Errorf("GetRequestBody failed: %+v", err)
 			break
 		}
 		c.Request.Body = io.NopCloser(bytes.NewBuffer(requestBody))
-		meta.Reset(channel)
-		bizErr = relayHelper(meta, c)
+		meta.Reset(newChannel)
+		bizErr, retry = RelayHelper(meta, c, relayController)
 		if bizErr == nil {
 			return
 		}
-		lastFailedChannelID = channel.ID
+		if !retry {
+			break
+		}
+		failedChannelIDs = append(failedChannelIDs, newChannel.ID)
 	}
 	if bizErr != nil {
-		message := bizErr.Message
-		if bizErr.StatusCode == http.StatusTooManyRequests {
-			message = "The upstream load of the current group is saturated, please try again later"
-		}
-		c.JSON(bizErr.StatusCode, gin.H{
-			"error": &model.Error{
-				Message: helper.MessageWithRequestID(message, requestID),
-				Code:    bizErr.Code,
-				Param:   bizErr.Param,
-				Type:    bizErr.Type,
-			},
-		})
+		bizErr.Error.Message = middleware.MessageWithRequestID(bizErr.Error.Message, requestID)
+		c.JSON(bizErr.StatusCode, bizErr)
 	}
 }
 
+// 仅当是channel错误时，才需要重试，用户请求参数错误时，不需要重试
 func shouldRetry(_ *gin.Context, statusCode int) bool {
-	if statusCode == http.StatusTooManyRequests {
-		return true
-	}
-	if statusCode/100 == 5 {
+	if statusCode == http.StatusTooManyRequests ||
+		statusCode == http.StatusGatewayTimeout ||
+		statusCode == http.StatusForbidden {
 		return true
 	}
-	if statusCode == http.StatusBadRequest {
-		return false
-	}
-	if statusCode/100 == 2 {
-		return false
-	}
-	return true
+	return false
 }
 
 func RelayNotImplemented(c *gin.Context) {
diff --git a/service/aiproxy/controller/token.go b/service/aiproxy/controller/token.go
index 090800004ce9..abdf52815aab 100644
--- a/service/aiproxy/controller/token.go
+++ b/service/aiproxy/controller/token.go
@@ -8,12 +8,33 @@ import (
 	"time"
 
 	"github.com/gin-gonic/gin"
+	json "github.com/json-iterator/go"
 	"github.com/labring/sealos/service/aiproxy/common/network"
 	"github.com/labring/sealos/service/aiproxy/common/random"
 	"github.com/labring/sealos/service/aiproxy/middleware"
 	"github.com/labring/sealos/service/aiproxy/model"
 )
 
+type TokenResponse struct {
+	*model.Token
+	AccessedAt time.Time `json:"accessed_at"`
+}
+
+func (t *TokenResponse) MarshalJSON() ([]byte, error) {
+	type Alias TokenResponse
+	return json.Marshal(&struct {
+		*Alias
+		CreatedAt  int64 `json:"created_at"`
+		ExpiredAt  int64 `json:"expired_at"`
+		AccessedAt int64 `json:"accessed_at"`
+	}{
+		Alias:      (*Alias)(t),
+		CreatedAt:  t.CreatedAt.UnixMilli(),
+		ExpiredAt:  t.ExpiredAt.UnixMilli(),
+		AccessedAt: t.AccessedAt.UnixMilli(),
+	})
+}
+
 func GetTokens(c *gin.Context) {
 	p, _ := strconv.Atoi(c.Query("p"))
 	p--
@@ -29,18 +50,31 @@ func GetTokens(c *gin.Context) {
 	group := c.Query("group")
 	order := c.Query("order")
 	status, _ := strconv.Atoi(c.Query("status"))
-	tokens, total, err := model.GetTokens(p*perPage, perPage, order, group, status)
+	tokens, total, err := model.GetTokens(group, p*perPage, perPage, order, status)
 	if err != nil {
 		middleware.ErrorResponse(c, http.StatusOK, err.Error())
 		return
 	}
+	tokenResponses := make([]*TokenResponse, len(tokens))
+	for i, token := range tokens {
+		lastRequestAt, _ := model.GetTokenLastRequestTime(token.ID)
+		tokenResponses[i] = &TokenResponse{
+			Token:      token,
+			AccessedAt: lastRequestAt,
+		}
+	}
 	middleware.SuccessResponse(c, gin.H{
-		"tokens": tokens,
+		"tokens": tokenResponses,
 		"total":  total,
 	})
 }
 
 func GetGroupTokens(c *gin.Context) {
+	group := c.Param("group")
+	if group == "" {
+		middleware.ErrorResponse(c, http.StatusOK, "group is required")
+		return
+	}
 	p, _ := strconv.Atoi(c.Query("p"))
 	p--
 	if p < 0 {
@@ -52,16 +86,23 @@ func GetGroupTokens(c *gin.Context) {
 	} else if perPage > 100 {
 		perPage = 100
 	}
-	group := c.Param("group")
 	order := c.Query("order")
 	status, _ := strconv.Atoi(c.Query("status"))
-	tokens, total, err := model.GetGroupTokens(group, p*perPage, perPage, order, status)
+	tokens, total, err := model.GetTokens(group, p*perPage, perPage, order, status)
 	if err != nil {
 		middleware.ErrorResponse(c, http.StatusOK, err.Error())
 		return
 	}
+	tokenResponses := make([]*TokenResponse, len(tokens))
+	for i, token := range tokens {
+		lastRequestAt, _ := model.GetTokenLastRequestTime(token.ID)
+		tokenResponses[i] = &TokenResponse{
+			Token:      token,
+			AccessedAt: lastRequestAt,
+		}
+	}
 	middleware.SuccessResponse(c, gin.H{
-		"tokens": tokens,
+		"tokens": tokenResponses,
 		"total":  total,
 	})
 }
@@ -84,18 +125,31 @@ func SearchTokens(c *gin.Context) {
 	key := c.Query("key")
 	status, _ := strconv.Atoi(c.Query("status"))
 	group := c.Query("group")
-	tokens, total, err := model.SearchTokens(keyword, p*perPage, perPage, order, status, name, key, group)
+	tokens, total, err := model.SearchTokens(group, keyword, p*perPage, perPage, order, status, name, key)
 	if err != nil {
 		middleware.ErrorResponse(c, http.StatusOK, err.Error())
 		return
 	}
+	tokenResponses := make([]*TokenResponse, len(tokens))
+	for i, token := range tokens {
+		lastRequestAt, _ := model.GetTokenLastRequestTime(token.ID)
+		tokenResponses[i] = &TokenResponse{
+			Token:      token,
+			AccessedAt: lastRequestAt,
+		}
+	}
 	middleware.SuccessResponse(c, gin.H{
-		"tokens": tokens,
+		"tokens": tokenResponses,
 		"total":  total,
 	})
 }
 
 func SearchGroupTokens(c *gin.Context) {
+	group := c.Param("group")
+	if group == "" {
+		middleware.ErrorResponse(c, http.StatusOK, "group is required")
+		return
+	}
 	keyword := c.Query("keyword")
 	p, _ := strconv.Atoi(c.Query("p"))
 	p--
@@ -108,18 +162,25 @@ func SearchGroupTokens(c *gin.Context) {
 	} else if perPage > 100 {
 		perPage = 100
 	}
-	group := c.Param("group")
 	order := c.Query("order")
 	name := c.Query("name")
 	key := c.Query("key")
 	status, _ := strconv.Atoi(c.Query("status"))
-	tokens, total, err := model.SearchGroupTokens(group, keyword, p*perPage, perPage, order, status, name, key)
+	tokens, total, err := model.SearchTokens(group, keyword, p*perPage, perPage, order, status, name, key)
 	if err != nil {
 		middleware.ErrorResponse(c, http.StatusOK, err.Error())
 		return
 	}
+	tokenResponses := make([]*TokenResponse, len(tokens))
+	for i, token := range tokens {
+		lastRequestAt, _ := model.GetTokenLastRequestTime(token.ID)
+		tokenResponses[i] = &TokenResponse{
+			Token:      token,
+			AccessedAt: lastRequestAt,
+		}
+	}
 	middleware.SuccessResponse(c, gin.H{
-		"tokens": tokens,
+		"tokens": tokenResponses,
 		"total":  total,
 	})
 }
@@ -135,22 +196,36 @@ func GetToken(c *gin.Context) {
 		middleware.ErrorResponse(c, http.StatusOK, err.Error())
 		return
 	}
-	middleware.SuccessResponse(c, token)
+	lastRequestAt, _ := model.GetTokenLastRequestTime(id)
+	tokenResponse := &TokenResponse{
+		Token:      token,
+		AccessedAt: lastRequestAt,
+	}
+	middleware.SuccessResponse(c, tokenResponse)
 }
 
 func GetGroupToken(c *gin.Context) {
+	group := c.Param("group")
+	if group == "" {
+		middleware.ErrorResponse(c, http.StatusOK, "group is required")
+		return
+	}
 	id, err := strconv.Atoi(c.Param("id"))
 	if err != nil {
 		middleware.ErrorResponse(c, http.StatusOK, err.Error())
 		return
 	}
-	group := c.Param("group")
 	token, err := model.GetGroupTokenByID(group, id)
 	if err != nil {
 		middleware.ErrorResponse(c, http.StatusOK, err.Error())
 		return
 	}
-	middleware.SuccessResponse(c, token)
+	lastRequestAt, _ := model.GetTokenLastRequestTime(id)
+	tokenResponse := &TokenResponse{
+		Token:      token,
+		AccessedAt: lastRequestAt,
+	}
+	middleware.SuccessResponse(c, tokenResponse)
 }
 
 func validateToken(token AddTokenRequest) error {
@@ -212,7 +287,9 @@ func AddToken(c *gin.Context) {
 		middleware.ErrorResponse(c, http.StatusOK, err.Error())
 		return
 	}
-	middleware.SuccessResponse(c, cleanToken)
+	middleware.SuccessResponse(c, &TokenResponse{
+		Token: cleanToken,
+	})
 }
 
 func DeleteToken(c *gin.Context) {
@@ -311,7 +388,9 @@ func UpdateToken(c *gin.Context) {
 		middleware.ErrorResponse(c, http.StatusOK, err.Error())
 		return
 	}
-	middleware.SuccessResponse(c, cleanToken)
+	middleware.SuccessResponse(c, &TokenResponse{
+		Token: cleanToken,
+	})
 }
 
 func UpdateGroupToken(c *gin.Context) {
@@ -351,7 +430,9 @@ func UpdateGroupToken(c *gin.Context) {
 		middleware.ErrorResponse(c, http.StatusOK, err.Error())
 		return
 	}
-	middleware.SuccessResponse(c, cleanToken)
+	middleware.SuccessResponse(c, &TokenResponse{
+		Token: cleanToken,
+	})
 }
 
 type UpdateTokenStatusRequest struct {
@@ -375,20 +456,14 @@ func UpdateTokenStatus(c *gin.Context) {
 		middleware.ErrorResponse(c, http.StatusOK, err.Error())
 		return
 	}
+
 	if token.Status == model.TokenStatusEnabled {
-		if cleanToken.Status == model.TokenStatusExpired && !cleanToken.ExpiredAt.IsZero() && cleanToken.ExpiredAt.Before(time.Now()) {
-			middleware.ErrorResponse(c, http.StatusOK, "token expired, please update token expired time or set to never expire")
-			return
-		}
-		if cleanToken.Status == model.TokenStatusExhausted && cleanToken.Quota > 0 && cleanToken.UsedAmount >= cleanToken.Quota {
-			middleware.ErrorResponse(c, http.StatusOK, "token quota exhausted, please update token quota or set to unlimited quota")
-			return
-		}
-		if cleanToken.Status == model.TokenStatusExhausted && cleanToken.Quota > 0 && cleanToken.UsedAmount >= cleanToken.Quota {
-			middleware.ErrorResponse(c, http.StatusOK, "token quota exhausted, please update token quota or set to unlimited quota")
+		if err := validateTokenStatus(cleanToken); err != nil {
+			middleware.ErrorResponse(c, http.StatusOK, err.Error())
 			return
 		}
 	}
+
 	err = model.UpdateTokenStatus(id, token.Status)
 	if err != nil {
 		middleware.ErrorResponse(c, http.StatusOK, err.Error())
@@ -419,20 +494,14 @@ func UpdateGroupTokenStatus(c *gin.Context) {
 		middleware.ErrorResponse(c, http.StatusOK, err.Error())
 		return
 	}
+
 	if token.Status == model.TokenStatusEnabled {
-		if cleanToken.Status == model.TokenStatusExpired && !cleanToken.ExpiredAt.IsZero() && cleanToken.ExpiredAt.Before(time.Now()) {
-			middleware.ErrorResponse(c, http.StatusOK, "token expired, please update token expired time or set to never expire")
-			return
-		}
-		if cleanToken.Status == model.TokenStatusExhausted && cleanToken.Quota > 0 && cleanToken.UsedAmount >= cleanToken.Quota {
-			middleware.ErrorResponse(c, http.StatusOK, "token quota exhausted, please update token quota or set to unlimited quota")
-			return
-		}
-		if cleanToken.Status == model.TokenStatusExhausted && cleanToken.Quota > 0 && cleanToken.UsedAmount >= cleanToken.Quota {
-			middleware.ErrorResponse(c, http.StatusOK, "token quota exhausted, please update token quota or set to unlimited quota")
+		if err := validateTokenStatus(cleanToken); err != nil {
+			middleware.ErrorResponse(c, http.StatusOK, err.Error())
 			return
 		}
 	}
+
 	err = model.UpdateGroupTokenStatus(group, id, token.Status)
 	if err != nil {
 		middleware.ErrorResponse(c, http.StatusOK, err.Error())
@@ -441,6 +510,16 @@ func UpdateGroupTokenStatus(c *gin.Context) {
 	middleware.SuccessResponse(c, nil)
 }
 
+func validateTokenStatus(token *model.Token) error {
+	if token.Status == model.TokenStatusExpired && !token.ExpiredAt.IsZero() && token.ExpiredAt.Before(time.Now()) {
+		return errors.New("token expired, please update token expired time or set to never expire")
+	}
+	if token.Status == model.TokenStatusExhausted && token.Quota > 0 && token.UsedAmount >= token.Quota {
+		return errors.New("token quota exhausted, please update token quota or set to unlimited quota")
+	}
+	return nil
+}
+
 type UpdateTokenNameRequest struct {
 	Name string `json:"name"`
 }
diff --git a/service/aiproxy/deploy/Kubefile b/service/aiproxy/deploy/Kubefile
index 9fc2c9a21f63..0ec02c20cb67 100644
--- a/service/aiproxy/deploy/Kubefile
+++ b/service/aiproxy/deploy/Kubefile
@@ -13,4 +13,7 @@ ENV SQL_DSN="<sql-placeholder>"
 ENV LOG_SQL_DSN="<sql-log-placeholder>"
 ENV REDIS_CONN_STRING="<redis-placeholder>"
 
+ENV BALANCE_SEALOS_CHECK_REAL_NAME_ENABLE="false"
+ENV BALANCE_SEALOS_NO_REAL_NAME_USED_AMOUNT_LIMIT="1"
+
 CMD ["bash scripts/init.sh"]
diff --git a/service/aiproxy/deploy/manifests/aiproxy-config.yaml.tmpl b/service/aiproxy/deploy/manifests/aiproxy-config.yaml.tmpl
index 94214c615374..d345fb62b825 100644
--- a/service/aiproxy/deploy/manifests/aiproxy-config.yaml.tmpl
+++ b/service/aiproxy/deploy/manifests/aiproxy-config.yaml.tmpl
@@ -10,3 +10,5 @@ data:
   SQL_DSN: "{{ .SQL_DSN }}"
   LOG_SQL_DSN: "{{ .LOG_SQL_DSN }}"
   REDIS_CONN_STRING: "{{ .REDIS_CONN_STRING }}"
+  BALANCE_SEALOS_CHECK_REAL_NAME_ENABLE: "{{ .BALANCE_SEALOS_CHECK_REAL_NAME_ENABLE }}"
+  BALANCE_SEALOS_NO_REAL_NAME_USED_AMOUNT_LIMIT: "{{ .BALANCE_SEALOS_NO_REAL_NAME_USED_AMOUNT_LIMIT }}"
diff --git a/service/aiproxy/go.mod b/service/aiproxy/go.mod
index 8e382e3c96de..31d6aab73e7f 100644
--- a/service/aiproxy/go.mod
+++ b/service/aiproxy/go.mod
@@ -5,12 +5,12 @@ go 1.22.7
 replace github.com/labring/sealos/service/aiproxy => ../aiproxy
 
 require (
-	cloud.google.com/go/iam v1.3.0
-	github.com/aws/aws-sdk-go-v2 v1.32.6
-	github.com/aws/aws-sdk-go-v2/credentials v1.17.47
-	github.com/aws/aws-sdk-go-v2/service/bedrockruntime v1.23.0
-	github.com/gin-contrib/cors v1.7.2
-	github.com/gin-contrib/gzip v1.0.1
+	cloud.google.com/go/iam v1.3.1
+	github.com/aws/aws-sdk-go-v2 v1.36.1
+	github.com/aws/aws-sdk-go-v2/credentials v1.17.59
+	github.com/aws/aws-sdk-go-v2/service/bedrockruntime v1.24.4
+	github.com/gin-contrib/cors v1.7.3
+	github.com/gin-contrib/gzip v1.2.2
 	github.com/gin-gonic/gin v1.10.0
 	github.com/glebarez/sqlite v1.11.0
 	github.com/golang-jwt/jwt/v5 v5.2.1
@@ -28,57 +28,57 @@ require (
 	github.com/shopspring/decimal v1.4.0
 	github.com/sirupsen/logrus v1.9.3
 	github.com/smartystreets/goconvey v1.8.1
-	github.com/stretchr/testify v1.9.0
-	golang.org/x/image v0.23.0
-	google.golang.org/api v0.210.0
+	github.com/srwiley/oksvg v0.0.0-20221011165216-be6e8873101c
+	github.com/srwiley/rasterx v0.0.0-20220730225603-2ab79fcdd4ef
+	github.com/stretchr/testify v1.10.0
+	golang.org/x/image v0.24.0
+	golang.org/x/sync v0.11.0
+	google.golang.org/api v0.220.0
 	gorm.io/driver/mysql v1.5.7
 	gorm.io/driver/postgres v1.5.11
 	gorm.io/gorm v1.25.12
 )
 
 require (
-	cloud.google.com/go/auth v0.12.0 // indirect
-	cloud.google.com/go/auth/oauth2adapt v0.2.6 // indirect
-	cloud.google.com/go/compute/metadata v0.5.2 // indirect
+	cloud.google.com/go/auth v0.14.1 // indirect
+	cloud.google.com/go/auth/oauth2adapt v0.2.7 // indirect
+	cloud.google.com/go/compute/metadata v0.6.0 // indirect
 	filippo.io/edwards25519 v1.1.0 // indirect
-	github.com/aws/aws-sdk-go-v2/aws/protocol/eventstream v1.6.7 // indirect
-	github.com/aws/aws-sdk-go-v2/internal/configsources v1.3.25 // indirect
-	github.com/aws/aws-sdk-go-v2/internal/endpoints/v2 v2.6.25 // indirect
-	github.com/aws/smithy-go v1.22.1 // indirect
-	github.com/bytedance/sonic v1.12.5 // indirect
-	github.com/bytedance/sonic/loader v0.2.1 // indirect
+	github.com/aws/aws-sdk-go-v2/aws/protocol/eventstream v1.6.8 // indirect
+	github.com/aws/aws-sdk-go-v2/internal/configsources v1.3.32 // indirect
+	github.com/aws/aws-sdk-go-v2/internal/endpoints/v2 v2.6.32 // indirect
+	github.com/aws/smithy-go v1.22.2 // indirect
+	github.com/bytedance/sonic v1.12.8 // indirect
+	github.com/bytedance/sonic/loader v0.2.3 // indirect
 	github.com/cespare/xxhash/v2 v2.3.0 // indirect
-	github.com/cloudwego/base64x v0.1.4 // indirect
-	github.com/cloudwego/iasm v0.2.0 // indirect
+	github.com/cloudwego/base64x v0.1.5 // indirect
 	github.com/davecgh/go-spew v1.1.1 // indirect
 	github.com/dgryski/go-rendezvous v0.0.0-20200823014737-9f7001d12a5f // indirect
 	github.com/dlclark/regexp2 v1.11.4 // indirect
 	github.com/dustin/go-humanize v1.0.1 // indirect
 	github.com/felixge/httpsnoop v1.0.4 // indirect
-	github.com/gabriel-vasile/mimetype v1.4.7 // indirect
-	github.com/gin-contrib/sse v0.1.0 // indirect
+	github.com/gabriel-vasile/mimetype v1.4.8 // indirect
+	github.com/gin-contrib/sse v1.0.0 // indirect
 	github.com/glebarez/go-sqlite v1.22.0 // indirect
 	github.com/go-logr/logr v1.4.2 // indirect
 	github.com/go-logr/stdr v1.2.2 // indirect
 	github.com/go-playground/locales v0.14.1 // indirect
 	github.com/go-playground/universal-translator v0.18.1 // indirect
-	github.com/go-playground/validator/v10 v10.23.0 // indirect
+	github.com/go-playground/validator/v10 v10.24.0 // indirect
 	github.com/go-sql-driver/mysql v1.8.1 // indirect
-	github.com/goccy/go-json v0.10.3 // indirect
-	github.com/golang/groupcache v0.0.0-20241129210726-2c02b8208cf8 // indirect
-	github.com/google/s2a-go v0.1.8 // indirect
+	github.com/goccy/go-json v0.10.5 // indirect
+	github.com/google/s2a-go v0.1.9 // indirect
 	github.com/googleapis/enterprise-certificate-proxy v0.3.4 // indirect
-	github.com/googleapis/gax-go/v2 v2.14.0 // indirect
+	github.com/googleapis/gax-go/v2 v2.14.1 // indirect
 	github.com/gopherjs/gopherjs v1.17.2 // indirect
 	github.com/jackc/pgpassfile v1.0.0 // indirect
 	github.com/jackc/pgservicefile v0.0.0-20240606120523-5a60cdf6a761 // indirect
-	github.com/jackc/pgx/v5 v5.7.1 // indirect
+	github.com/jackc/pgx/v5 v5.7.2 // indirect
 	github.com/jackc/puddle/v2 v2.2.2 // indirect
 	github.com/jinzhu/inflection v1.0.0 // indirect
 	github.com/jinzhu/now v1.1.5 // indirect
 	github.com/jtolds/gls v4.20.0+incompatible // indirect
 	github.com/klauspost/cpuid/v2 v2.2.9 // indirect
-	github.com/kr/text v0.2.0 // indirect
 	github.com/leodido/go-urn v1.4.0 // indirect
 	github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd // indirect
 	github.com/modern-go/reflect2 v1.0.2 // indirect
@@ -89,28 +89,27 @@ require (
 	github.com/smarty/assertions v1.15.0 // indirect
 	github.com/twitchyliquid64/golang-asm v0.15.1 // indirect
 	github.com/ugorji/go/codec v1.2.12 // indirect
-	go.opencensus.io v0.24.0 // indirect
-	go.opentelemetry.io/contrib/instrumentation/google.golang.org/grpc/otelgrpc v0.57.0 // indirect
-	go.opentelemetry.io/contrib/instrumentation/net/http/otelhttp v0.57.0 // indirect
-	go.opentelemetry.io/otel v1.32.0 // indirect
-	go.opentelemetry.io/otel/metric v1.32.0 // indirect
-	go.opentelemetry.io/otel/trace v1.32.0 // indirect
-	golang.org/x/arch v0.12.0 // indirect
-	golang.org/x/crypto v0.30.0 // indirect
-	golang.org/x/exp v0.0.0-20241204233417-43b7b7cde48d // indirect
-	golang.org/x/net v0.32.0 // indirect
-	golang.org/x/oauth2 v0.24.0 // indirect
-	golang.org/x/sync v0.10.0 // indirect
-	golang.org/x/sys v0.28.0 // indirect
-	golang.org/x/text v0.21.0 // indirect
-	golang.org/x/time v0.8.0 // indirect
-	google.golang.org/genproto/googleapis/api v0.0.0-20241209162323-e6fa225c2576 // indirect
-	google.golang.org/genproto/googleapis/rpc v0.0.0-20241209162323-e6fa225c2576 // indirect
-	google.golang.org/grpc v1.68.1 // indirect
-	google.golang.org/protobuf v1.35.2 // indirect
+	go.opentelemetry.io/auto/sdk v1.1.0 // indirect
+	go.opentelemetry.io/contrib/instrumentation/google.golang.org/grpc/otelgrpc v0.59.0 // indirect
+	go.opentelemetry.io/contrib/instrumentation/net/http/otelhttp v0.59.0 // indirect
+	go.opentelemetry.io/otel v1.34.0 // indirect
+	go.opentelemetry.io/otel/metric v1.34.0 // indirect
+	go.opentelemetry.io/otel/trace v1.34.0 // indirect
+	golang.org/x/arch v0.14.0 // indirect
+	golang.org/x/crypto v0.33.0 // indirect
+	golang.org/x/exp v0.0.0-20250210185358-939b2ce775ac // indirect
+	golang.org/x/net v0.35.0 // indirect
+	golang.org/x/oauth2 v0.26.0 // indirect
+	golang.org/x/sys v0.30.0 // indirect
+	golang.org/x/text v0.22.0 // indirect
+	golang.org/x/time v0.10.0 // indirect
+	google.golang.org/genproto/googleapis/api v0.0.0-20250207221924-e9438ea467c6 // indirect
+	google.golang.org/genproto/googleapis/rpc v0.0.0-20250207221924-e9438ea467c6 // indirect
+	google.golang.org/grpc v1.70.0 // indirect
+	google.golang.org/protobuf v1.36.5 // indirect
 	gopkg.in/yaml.v3 v3.0.1 // indirect
-	modernc.org/libc v1.61.4 // indirect
-	modernc.org/mathutil v1.6.0 // indirect
-	modernc.org/memory v1.8.0 // indirect
-	modernc.org/sqlite v1.34.2 // indirect
+	modernc.org/libc v1.61.12 // indirect
+	modernc.org/mathutil v1.7.1 // indirect
+	modernc.org/memory v1.8.2 // indirect
+	modernc.org/sqlite v1.34.5 // indirect
 )
diff --git a/service/aiproxy/go.sum b/service/aiproxy/go.sum
index 59895f5af141..e203358904b8 100644
--- a/service/aiproxy/go.sum
+++ b/service/aiproxy/go.sum
@@ -1,48 +1,41 @@
-cloud.google.com/go v0.26.0/go.mod h1:aQUYkXzVsufM+DwF1aE+0xfcU+56JwCaLick0ClmMTw=
-cloud.google.com/go/auth v0.12.0 h1:ARAD8r0lkiHw2go7kEnmviF6TOYhzLM+yDGcDt9mP68=
-cloud.google.com/go/auth v0.12.0/go.mod h1:xxA5AqpDrvS+Gkmo9RqrGGRh6WSNKKOXhY3zNOr38tI=
-cloud.google.com/go/auth/oauth2adapt v0.2.6 h1:V6a6XDu2lTwPZWOawrAa9HUK+DB2zfJyTuciBG5hFkU=
-cloud.google.com/go/auth/oauth2adapt v0.2.6/go.mod h1:AlmsELtlEBnaNTL7jCj8VQFLy6mbZv0s4Q7NGBeQ5E8=
-cloud.google.com/go/compute/metadata v0.5.2 h1:UxK4uu/Tn+I3p2dYWTfiX4wva7aYlKixAHn3fyqngqo=
-cloud.google.com/go/compute/metadata v0.5.2/go.mod h1:C66sj2AluDcIqakBq/M8lw8/ybHgOZqin2obFxa/E5k=
-cloud.google.com/go/iam v1.3.0 h1:4Wo2qTaGKFtajbLpF6I4mywg900u3TLlHDb6mriLDPU=
-cloud.google.com/go/iam v1.3.0/go.mod h1:0Ys8ccaZHdI1dEUilwzqng/6ps2YB6vRsjIe00/+6JY=
+cloud.google.com/go/auth v0.14.1 h1:AwoJbzUdxA/whv1qj3TLKwh3XX5sikny2fc40wUl+h0=
+cloud.google.com/go/auth v0.14.1/go.mod h1:4JHUxlGXisL0AW8kXPtUF6ztuOksyfUQNFjfsOCXkPM=
+cloud.google.com/go/auth/oauth2adapt v0.2.7 h1:/Lc7xODdqcEw8IrZ9SvwnlLX6j9FHQM74z6cBk9Rw6M=
+cloud.google.com/go/auth/oauth2adapt v0.2.7/go.mod h1:NTbTTzfvPl1Y3V1nPpOgl2w6d/FjO7NNUQaWSox6ZMc=
+cloud.google.com/go/compute/metadata v0.6.0 h1:A6hENjEsCDtC1k8byVsgwvVcioamEHvZ4j01OwKxG9I=
+cloud.google.com/go/compute/metadata v0.6.0/go.mod h1:FjyFAW1MW0C203CEOMDTu3Dk1FlqW3Rga40jzHL4hfg=
+cloud.google.com/go/iam v1.3.1 h1:KFf8SaT71yYq+sQtRISn90Gyhyf4X8RGgeAVC8XGf3E=
+cloud.google.com/go/iam v1.3.1/go.mod h1:3wMtuyT4NcbnYNPLMBzYRFiEfjKfJlLVLrisE7bwm34=
 filippo.io/edwards25519 v1.1.0 h1:FNf4tywRC1HmFuKW5xopWpigGjJKiJSV0Cqo0cJWDaA=
 filippo.io/edwards25519 v1.1.0/go.mod h1:BxyFTGdWcka3PhytdK4V28tE5sGfRvvvRV7EaN4VDT4=
-github.com/BurntSushi/toml v0.3.1/go.mod h1:xHWCNGjB5oqiDr8zfno3MHue2Ht5sIBksp03qcyfWMU=
-github.com/aws/aws-sdk-go-v2 v1.32.6 h1:7BokKRgRPuGmKkFMhEg/jSul+tB9VvXhcViILtfG8b4=
-github.com/aws/aws-sdk-go-v2 v1.32.6/go.mod h1:P5WJBrYqqbWVaOxgH0X/FYYD47/nooaPOZPlQdmiN2U=
-github.com/aws/aws-sdk-go-v2/aws/protocol/eventstream v1.6.7 h1:lL7IfaFzngfx0ZwUGOZdsFFnQ5uLvR0hWqqhyE7Q9M8=
-github.com/aws/aws-sdk-go-v2/aws/protocol/eventstream v1.6.7/go.mod h1:QraP0UcVlQJsmHfioCrveWOC1nbiWUl3ej08h4mXWoc=
-github.com/aws/aws-sdk-go-v2/credentials v1.17.47 h1:48bA+3/fCdi2yAwVt+3COvmatZ6jUDNkDTIsqDiMUdw=
-github.com/aws/aws-sdk-go-v2/credentials v1.17.47/go.mod h1:+KdckOejLW3Ks3b0E3b5rHsr2f9yuORBum0WPnE5o5w=
-github.com/aws/aws-sdk-go-v2/internal/configsources v1.3.25 h1:s/fF4+yDQDoElYhfIVvSNyeCydfbuTKzhxSXDXCPasU=
-github.com/aws/aws-sdk-go-v2/internal/configsources v1.3.25/go.mod h1:IgPfDv5jqFIzQSNbUEMoitNooSMXjRSDkhXv8jiROvU=
-github.com/aws/aws-sdk-go-v2/internal/endpoints/v2 v2.6.25 h1:ZntTCl5EsYnhN/IygQEUugpdwbhdkom9uHcbCftiGgA=
-github.com/aws/aws-sdk-go-v2/internal/endpoints/v2 v2.6.25/go.mod h1:DBdPrgeocww+CSl1C8cEV8PN1mHMBhuCDLpXezyvWkE=
-github.com/aws/aws-sdk-go-v2/service/bedrockruntime v1.23.0 h1:mfV5tcLXeRLbiyI4EHoHWH1sIU7JvbfXVvymUCIgZEo=
-github.com/aws/aws-sdk-go-v2/service/bedrockruntime v1.23.0/go.mod h1:YSSgYnasDKm5OjU3bOPkaz+2PFO6WjEQGIA6KQNsR3Q=
-github.com/aws/smithy-go v1.22.1 h1:/HPHZQ0g7f4eUeK6HKglFz8uwVfZKgoI25rb/J+dnro=
-github.com/aws/smithy-go v1.22.1/go.mod h1:irrKGvNn1InZwb2d7fkIRNucdfwR8R+Ts3wxYa/cJHg=
+github.com/aws/aws-sdk-go-v2 v1.36.1 h1:iTDl5U6oAhkNPba0e1t1hrwAo02ZMqbrGq4k5JBWM5E=
+github.com/aws/aws-sdk-go-v2 v1.36.1/go.mod h1:5PMILGVKiW32oDzjj6RU52yrNrDPUHcbZQYr1sM7qmM=
+github.com/aws/aws-sdk-go-v2/aws/protocol/eventstream v1.6.8 h1:zAxi9p3wsZMIaVCdoiQp2uZ9k1LsZvmAnoTBeZPXom0=
+github.com/aws/aws-sdk-go-v2/aws/protocol/eventstream v1.6.8/go.mod h1:3XkePX5dSaxveLAYY7nsbsZZrKxCyEuE5pM4ziFxyGg=
+github.com/aws/aws-sdk-go-v2/credentials v1.17.59 h1:9btwmrt//Q6JcSdgJOLI98sdr5p7tssS9yAsGe8aKP4=
+github.com/aws/aws-sdk-go-v2/credentials v1.17.59/go.mod h1:NM8fM6ovI3zak23UISdWidyZuI1ghNe2xjzUZAyT+08=
+github.com/aws/aws-sdk-go-v2/internal/configsources v1.3.32 h1:BjUcr3X3K0wZPGFg2bxOWW3VPN8rkE3/61zhP+IHviA=
+github.com/aws/aws-sdk-go-v2/internal/configsources v1.3.32/go.mod h1:80+OGC/bgzzFFTUmcuwD0lb4YutwQeKLFpmt6hoWapU=
+github.com/aws/aws-sdk-go-v2/internal/endpoints/v2 v2.6.32 h1:m1GeXHVMJsRsUAqG6HjZWx9dj7F5TR+cF1bjyfYyBd4=
+github.com/aws/aws-sdk-go-v2/internal/endpoints/v2 v2.6.32/go.mod h1:IitoQxGfaKdVLNg0hD8/DXmAqNy0H4K2H2Sf91ti8sI=
+github.com/aws/aws-sdk-go-v2/service/bedrockruntime v1.24.4 h1:NYHDOBe0ZIeQfaPSPRaQym2NePzA+QYM3O/Oh4IznKg=
+github.com/aws/aws-sdk-go-v2/service/bedrockruntime v1.24.4/go.mod h1:AD+JAcEr9fNzFcfKs3CINKBdWGFK7R+/uZ+VdJRhK2U=
+github.com/aws/smithy-go v1.22.2 h1:6D9hW43xKFrRx/tXXfAlIZc4JI+yQe6snnWcQyxSyLQ=
+github.com/aws/smithy-go v1.22.2/go.mod h1:irrKGvNn1InZwb2d7fkIRNucdfwR8R+Ts3wxYa/cJHg=
 github.com/bsm/ginkgo/v2 v2.12.0 h1:Ny8MWAHyOepLGlLKYmXG4IEkioBysk6GpaRTLC8zwWs=
 github.com/bsm/ginkgo/v2 v2.12.0/go.mod h1:SwYbGRRDovPVboqFv0tPTcG1sN61LM1Z4ARdbAV9g4c=
 github.com/bsm/gomega v1.27.10 h1:yeMWxP2pV2fG3FgAODIY8EiRE3dy0aeFYt4l7wh6yKA=
 github.com/bsm/gomega v1.27.10/go.mod h1:JyEr/xRbxbtgWNi8tIEVPUYZ5Dzef52k01W3YH0H+O0=
-github.com/bytedance/sonic v1.12.5 h1:hoZxY8uW+mT+OpkcUWw4k0fDINtOcVavEsGfzwzFU/w=
-github.com/bytedance/sonic v1.12.5/go.mod h1:B8Gt/XvtZ3Fqj+iSKMypzymZxw/FVwgIGKzMzT9r/rk=
+github.com/bytedance/sonic v1.12.8 h1:4xYRVRlXIgvSZ4e8iVTlMF5szgpXd4AfvuWgA8I8lgs=
+github.com/bytedance/sonic v1.12.8/go.mod h1:uVvFidNmlt9+wa31S1urfwwthTWteBgG0hWuoKAXTx8=
 github.com/bytedance/sonic/loader v0.1.1/go.mod h1:ncP89zfokxS5LZrJxl5z0UJcsk4M4yY2JpfqGeCtNLU=
-github.com/bytedance/sonic/loader v0.2.1 h1:1GgorWTqf12TA8mma4DDSbaQigE2wOgQo7iCjjJv3+E=
-github.com/bytedance/sonic/loader v0.2.1/go.mod h1:ncP89zfokxS5LZrJxl5z0UJcsk4M4yY2JpfqGeCtNLU=
-github.com/census-instrumentation/opencensus-proto v0.2.1/go.mod h1:f6KPmirojxKA12rnyqOA5BBL4O983OfeGPqjHWSTneU=
+github.com/bytedance/sonic/loader v0.2.3 h1:yctD0Q3v2NOGfSWPLPvG2ggA2kV6TS6s4wioyEqssH0=
+github.com/bytedance/sonic/loader v0.2.3/go.mod h1:N8A3vUdtUebEY2/VQC0MyhYeKUFosQU6FxH2JmUe6VI=
 github.com/cespare/xxhash/v2 v2.3.0 h1:UL815xU9SqsFlibzuggzjXhog7bL6oX9BbNZnL2UFvs=
 github.com/cespare/xxhash/v2 v2.3.0/go.mod h1:VGX0DQ3Q6kWi7AoAeZDth3/j3BFtOZR5XLFGgcrjCOs=
-github.com/client9/misspell v0.3.4/go.mod h1:qj6jICC3Q7zFZvVWo7KLAzC3yx5G7kyvSDkc90ppPyw=
-github.com/cloudwego/base64x v0.1.4 h1:jwCgWpFanWmN8xoIUHa2rtzmkd5J2plF/dnLS6Xd/0Y=
-github.com/cloudwego/base64x v0.1.4/go.mod h1:0zlkT4Wn5C6NdauXdJRhSKRlJvmclQ1hhJgA0rcu/8w=
-github.com/cloudwego/iasm v0.2.0 h1:1KNIy1I1H9hNNFEEH3DVnI4UujN+1zjpuk6gwHLTssg=
+github.com/cloudwego/base64x v0.1.5 h1:XPciSp1xaq2VCSt6lF0phncD4koWyULpl5bUxbfCyP4=
+github.com/cloudwego/base64x v0.1.5/go.mod h1:0zlkT4Wn5C6NdauXdJRhSKRlJvmclQ1hhJgA0rcu/8w=
 github.com/cloudwego/iasm v0.2.0/go.mod h1:8rXZaNYT2n95jn+zTI1sDr+IgcD2GVs0nlbbQPiEFhY=
-github.com/cncf/udpa/go v0.0.0-20191209042840-269d4d468f6f/go.mod h1:M8M6+tZqaGXZJjfX53e64911xZQV5JYwmTeXPW+k8Sc=
-github.com/creack/pty v1.1.9/go.mod h1:oKZEueFk5CKHvIhNR5MUki03XCEU+Q6VDXinZuGJ33E=
 github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
@@ -52,20 +45,16 @@ github.com/dlclark/regexp2 v1.11.4 h1:rPYF9/LECdNymJufQKmri9gV604RvvABwgOA8un7yA
 github.com/dlclark/regexp2 v1.11.4/go.mod h1:DHkYz0B9wPfa6wondMfaivmHpzrQ3v9q8cnmRbL6yW8=
 github.com/dustin/go-humanize v1.0.1 h1:GzkhY7T5VNhEkwH0PVJgjz+fX1rhBrR7pRT3mDkpeCY=
 github.com/dustin/go-humanize v1.0.1/go.mod h1:Mu1zIs6XwVuF/gI1OepvI0qD18qycQx+mFykh5fBlto=
-github.com/envoyproxy/go-control-plane v0.9.0/go.mod h1:YTl/9mNaCwkRvm6d1a2C3ymFceY/DCBVvsKhRF0iEA4=
-github.com/envoyproxy/go-control-plane v0.9.1-0.20191026205805-5f8ba28d4473/go.mod h1:YTl/9mNaCwkRvm6d1a2C3ymFceY/DCBVvsKhRF0iEA4=
-github.com/envoyproxy/go-control-plane v0.9.4/go.mod h1:6rpuAdCZL397s3pYoYcLgu1mIlRU8Am5FuJP05cCM98=
-github.com/envoyproxy/protoc-gen-validate v0.1.0/go.mod h1:iSmxcyjqTsJpI2R4NaDN7+kN2VEUnK/pcBlmesArF7c=
 github.com/felixge/httpsnoop v1.0.4 h1:NFTV2Zj1bL4mc9sqWACXbQFVBBg2W3GPvqp8/ESS2Wg=
 github.com/felixge/httpsnoop v1.0.4/go.mod h1:m8KPJKqk1gH5J9DgRY2ASl2lWCfGKXixSwevea8zH2U=
-github.com/gabriel-vasile/mimetype v1.4.7 h1:SKFKl7kD0RiPdbht0s7hFtjl489WcQ1VyPW8ZzUMYCA=
-github.com/gabriel-vasile/mimetype v1.4.7/go.mod h1:GDlAgAyIRT27BhFl53XNAFtfjzOkLaF35JdEG0P7LtU=
-github.com/gin-contrib/cors v1.7.2 h1:oLDHxdg8W/XDoN/8zamqk/Drgt4oVZDvaV0YmvVICQw=
-github.com/gin-contrib/cors v1.7.2/go.mod h1:SUJVARKgQ40dmrzgXEVxj2m7Ig1v1qIboQkPDTQ9t2E=
-github.com/gin-contrib/gzip v1.0.1 h1:HQ8ENHODeLY7a4g1Au/46Z92bdGFl74OhxcZble9WJE=
-github.com/gin-contrib/gzip v1.0.1/go.mod h1:njt428fdUNRvjuJf16tZMYZ2Yl+WQB53X5wmhDwXvC4=
-github.com/gin-contrib/sse v0.1.0 h1:Y/yl/+YNO8GZSjAhjMsSuLt29uWRFHdHYUb5lYOV9qE=
-github.com/gin-contrib/sse v0.1.0/go.mod h1:RHrZQHXnP2xjPF+u1gW/2HnVO7nvIa9PG3Gm+fLHvGI=
+github.com/gabriel-vasile/mimetype v1.4.8 h1:FfZ3gj38NjllZIeJAmMhr+qKL8Wu+nOoI3GqacKw1NM=
+github.com/gabriel-vasile/mimetype v1.4.8/go.mod h1:ByKUIKGjh1ODkGM1asKUbQZOLGrPjydw3hYPU2YU9t8=
+github.com/gin-contrib/cors v1.7.3 h1:hV+a5xp8hwJoTw7OY+a70FsL8JkVVFTXw9EcfrYUdns=
+github.com/gin-contrib/cors v1.7.3/go.mod h1:M3bcKZhxzsvI+rlRSkkxHyljJt1ESd93COUvemZ79j4=
+github.com/gin-contrib/gzip v1.2.2 h1:iUU/EYCM8ENfkjmZaVrxbjF/ZC267Iqv5S0MMCMEliI=
+github.com/gin-contrib/gzip v1.2.2/go.mod h1:C1a5cacjlDsS20cKnHlZRCPUu57D3qH6B2pV0rl+Y/s=
+github.com/gin-contrib/sse v1.0.0 h1:y3bT1mUWUxDpW4JLQg/HnTqV4rozuW4tC9eFKTxYI9E=
+github.com/gin-contrib/sse v1.0.0/go.mod h1:zNuFdwarAygJBht0NTKiSi3jRf6RbqeILZ9Sp6Slhe0=
 github.com/gin-gonic/gin v1.10.0 h1:nTuyha1TYqgedzytsKYqna+DfLos46nTv2ygFy86HFU=
 github.com/gin-gonic/gin v1.10.0/go.mod h1:4PMNQiOhvDRa013RKVbsiNwoyezlm2rm0uX/T7kzp5Y=
 github.com/glebarez/go-sqlite v1.22.0 h1:uAcMJhaA6r3LHMTFgP0SifzgXg46yJkgxqyuyec+ruQ=
@@ -83,51 +72,30 @@ github.com/go-playground/locales v0.14.1 h1:EWaQ/wswjilfKLTECiXz7Rh+3BjFhfDFKv/o
 github.com/go-playground/locales v0.14.1/go.mod h1:hxrqLVvrK65+Rwrd5Fc6F2O76J/NuW9t0sjnWqG1slY=
 github.com/go-playground/universal-translator v0.18.1 h1:Bcnm0ZwsGyWbCzImXv+pAJnYK9S473LQFuzCbDbfSFY=
 github.com/go-playground/universal-translator v0.18.1/go.mod h1:xekY+UJKNuX9WP91TpwSH2VMlDf28Uj24BCp08ZFTUY=
-github.com/go-playground/validator/v10 v10.23.0 h1:/PwmTwZhS0dPkav3cdK9kV1FsAmrL8sThn8IHr/sO+o=
-github.com/go-playground/validator/v10 v10.23.0/go.mod h1:dbuPbCMFw/DrkbEynArYaCwl3amGuJotoKCe95atGMM=
+github.com/go-playground/validator/v10 v10.24.0 h1:KHQckvo8G6hlWnrPX4NJJ+aBfWNAE/HH+qdL2cBpCmg=
+github.com/go-playground/validator/v10 v10.24.0/go.mod h1:GGzBIJMuE98Ic/kJsBXbz1x/7cByt++cQ+YOuDM5wus=
 github.com/go-sql-driver/mysql v1.7.0/go.mod h1:OXbVy3sEdcQ2Doequ6Z5BW6fXNQTmx+9S1MCJN5yJMI=
 github.com/go-sql-driver/mysql v1.8.1 h1:LedoTUt/eveggdHS9qUFC1EFSa8bU2+1pZjSRpvNJ1Y=
 github.com/go-sql-driver/mysql v1.8.1/go.mod h1:wEBSXgmK//2ZFJyE+qWnIsVGmvmEKlqwuVSjsCm7DZg=
-github.com/goccy/go-json v0.10.3 h1:KZ5WoDbxAIgm2HNbYckL0se1fHD6rz5j4ywS6ebzDqA=
-github.com/goccy/go-json v0.10.3/go.mod h1:oq7eo15ShAhp70Anwd5lgX2pLfOS3QCiwU/PULtXL6M=
+github.com/goccy/go-json v0.10.5 h1:Fq85nIqj+gXn/S5ahsiTlK3TmC85qgirsdTP/+DeaC4=
+github.com/goccy/go-json v0.10.5/go.mod h1:oq7eo15ShAhp70Anwd5lgX2pLfOS3QCiwU/PULtXL6M=
 github.com/golang-jwt/jwt/v5 v5.2.1 h1:OuVbFODueb089Lh128TAcimifWaLhJwVflnrgM17wHk=
 github.com/golang-jwt/jwt/v5 v5.2.1/go.mod h1:pqrtFR0X4osieyHYxtmOUWsAWrfe1Q5UVIyoH402zdk=
-github.com/golang/glog v0.0.0-20160126235308-23def4e6c14b/go.mod h1:SBH7ygxi8pfUlaOkMMuAQtPIUF8ecWP5IEl/CR7VP2Q=
-github.com/golang/groupcache v0.0.0-20200121045136-8c9f03a8e57e/go.mod h1:cIg4eruTrX1D+g88fzRXU5OdNfaM+9IcxsU14FzY7Hc=
-github.com/golang/groupcache v0.0.0-20241129210726-2c02b8208cf8 h1:f+oWsMOmNPc8JmEHVZIycC7hBoQxHH9pNKQORJNozsQ=
-github.com/golang/groupcache v0.0.0-20241129210726-2c02b8208cf8/go.mod h1:wcDNUvekVysuuOpQKo3191zZyTpiI6se1N1ULghS0sw=
-github.com/golang/mock v1.1.1/go.mod h1:oTYuIxOrZwtPieC+H1uAHpcLFnEyAGVDL/k47Jfbm0A=
-github.com/golang/protobuf v1.2.0/go.mod h1:6lQm79b+lXiMfvg/cZm0SGofjICqVBUtrP5yJMmIC1U=
-github.com/golang/protobuf v1.3.2/go.mod h1:6lQm79b+lXiMfvg/cZm0SGofjICqVBUtrP5yJMmIC1U=
-github.com/golang/protobuf v1.4.0-rc.1/go.mod h1:ceaxUfeHdC40wWswd/P6IGgMaK3YpKi5j83Wpe3EHw8=
-github.com/golang/protobuf v1.4.0-rc.1.0.20200221234624-67d41d38c208/go.mod h1:xKAWHe0F5eneWXFV3EuXVDTCmh+JuBKY0li0aMyXATA=
-github.com/golang/protobuf v1.4.0-rc.2/go.mod h1:LlEzMj4AhA7rCAGe4KMBDvJI+AwstrUpVNzEA03Pprs=
-github.com/golang/protobuf v1.4.0-rc.4.0.20200313231945-b860323f09d0/go.mod h1:WU3c8KckQ9AFe+yFwt9sWVRKCVIyN9cPHBJSNnbL67w=
-github.com/golang/protobuf v1.4.0/go.mod h1:jodUvKwWbYaEsadDk5Fwe5c77LiNKVO9IDvqG2KuDX0=
-github.com/golang/protobuf v1.4.1/go.mod h1:U8fpvMrcmy5pZrNK1lt4xCsGvpyWQ/VVv6QDs8UjoX8=
-github.com/golang/protobuf v1.4.3/go.mod h1:oDoupMAO8OvCJWAcko0GGGIgR6R6ocIYbsSw735rRwI=
 github.com/golang/protobuf v1.5.4 h1:i7eJL8qZTpSEXOPTxNKhASYpMn+8e5Q6AdndVa1dWek=
 github.com/golang/protobuf v1.5.4/go.mod h1:lnTiLA8Wa4RWRcIUkrtSVa5nRhsEGBg48fD6rSs7xps=
-github.com/google/go-cmp v0.2.0/go.mod h1:oXzfMopK8JAjlY9xF4vHSVASa0yLyX7SntLO5aqRK0M=
-github.com/google/go-cmp v0.3.0/go.mod h1:8QqcDgzrUqlUb/G2PQTWiueGozuR1884gddMywk6iLU=
-github.com/google/go-cmp v0.3.1/go.mod h1:8QqcDgzrUqlUb/G2PQTWiueGozuR1884gddMywk6iLU=
-github.com/google/go-cmp v0.4.0/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
-github.com/google/go-cmp v0.5.0/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
-github.com/google/go-cmp v0.5.3/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
 github.com/google/go-cmp v0.6.0 h1:ofyhxvXcZhMsU5ulbFiLKl/XBFqE1GSq7atu8tAmTRI=
 github.com/google/go-cmp v0.6.0/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
 github.com/google/gofuzz v1.0.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg=
 github.com/google/pprof v0.0.0-20240409012703-83162a5b38cd h1:gbpYu9NMq8jhDVbvlGkMFWCjLFlqqEZjEmObmhUy6Vo=
 github.com/google/pprof v0.0.0-20240409012703-83162a5b38cd/go.mod h1:kf6iHlnVGwgKolg33glAes7Yg/8iWP8ukqeldJSO7jw=
-github.com/google/s2a-go v0.1.8 h1:zZDs9gcbt9ZPLV0ndSyQk6Kacx2g/X+SKYovpnz3SMM=
-github.com/google/s2a-go v0.1.8/go.mod h1:6iNWHTpQ+nfNRN5E00MSdfDwVesa8hhS32PhPO8deJA=
-github.com/google/uuid v1.1.2/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
+github.com/google/s2a-go v0.1.9 h1:LGD7gtMgezd8a/Xak7mEWL0PjoTQFvpRudN895yqKW0=
+github.com/google/s2a-go v0.1.9/go.mod h1:YA0Ei2ZQL3acow2O62kdp9UlnvMmU7kA6Eutn0dXayM=
 github.com/google/uuid v1.6.0 h1:NIvaJDMOsjHA8n1jAhLSgzrAzy1Hgr+hNrb57e+94F0=
 github.com/google/uuid v1.6.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
 github.com/googleapis/enterprise-certificate-proxy v0.3.4 h1:XYIDZApgAnrN1c855gTgghdIA6Stxb52D5RnLI1SLyw=
 github.com/googleapis/enterprise-certificate-proxy v0.3.4/go.mod h1:YKe7cfqYXjKGpGvmSg28/fFvhNzinZQm8DGnaburhGA=
-github.com/googleapis/gax-go/v2 v2.14.0 h1:f+jMrjBPl+DL9nI4IQzLUxMq7XrAqFYB7hBPqMNIe8o=
-github.com/googleapis/gax-go/v2 v2.14.0/go.mod h1:lhBCnjdLrWRaPvLWhmc8IS24m9mr07qSYnHncrgo+zk=
+github.com/googleapis/gax-go/v2 v2.14.1 h1:hb0FFeiPaQskmvakKu5EbCbpntQn48jyHuvrkurSS/Q=
+github.com/googleapis/gax-go/v2 v2.14.1/go.mod h1:Hb/NubMaVM88SrNkvl8X/o8XWwDJEPqouaLeN2IUxoA=
 github.com/gopherjs/gopherjs v1.17.2 h1:fQnZVsXk8uxXIStYb0N4bGk7jeyTalG/wsZjQ25dO0g=
 github.com/gopherjs/gopherjs v1.17.2/go.mod h1:pRRIvn/QzFLrKfvEz3qUuEhtE/zLCWfreZ6J5gM2i+k=
 github.com/gorilla/websocket v1.5.3 h1:saDtZ6Pbx/0u+bgYQ3q96pZgCzfhKXGPqt7kZ72aNNg=
@@ -136,8 +104,8 @@ github.com/jackc/pgpassfile v1.0.0 h1:/6Hmqy13Ss2zCq62VdNG8tM1wchn8zjSGOBJ6icpsI
 github.com/jackc/pgpassfile v1.0.0/go.mod h1:CEx0iS5ambNFdcRtxPj5JhEz+xB6uRky5eyVu/W2HEg=
 github.com/jackc/pgservicefile v0.0.0-20240606120523-5a60cdf6a761 h1:iCEnooe7UlwOQYpKFhBabPMi4aNAfoODPEFNiAnClxo=
 github.com/jackc/pgservicefile v0.0.0-20240606120523-5a60cdf6a761/go.mod h1:5TJZWKEWniPve33vlWYSoGYefn3gLQRzjfDlhSJ9ZKM=
-github.com/jackc/pgx/v5 v5.7.1 h1:x7SYsPBYDkHDksogeSmZZ5xzThcTgRz++I5E+ePFUcs=
-github.com/jackc/pgx/v5 v5.7.1/go.mod h1:e7O26IywZZ+naJtWWos6i6fvWK+29etgITqrqHLfoZA=
+github.com/jackc/pgx/v5 v5.7.2 h1:mLoDLV6sonKlvjIEsV56SkWNCnuNv531l94GaIzO+XI=
+github.com/jackc/pgx/v5 v5.7.2/go.mod h1:ncY89UGWxg82EykZUwSpUKEfccBGGYq1xjrOpsbsfGQ=
 github.com/jackc/puddle/v2 v2.2.2 h1:PR8nw+E/1w0GLuRFSmiioY6UooMp6KJv0/61nB7icHo=
 github.com/jackc/puddle/v2 v2.2.2/go.mod h1:vriiEXHvEE654aYKXXjOvZM39qJ0q+azkZFrfEOc3H4=
 github.com/jinzhu/copier v0.4.0 h1:w3ciUoD19shMCRargcpm0cm91ytaBhDvuRpz1ODO/U8=
@@ -156,8 +124,8 @@ github.com/klauspost/cpuid/v2 v2.0.9/go.mod h1:FInQzS24/EEf25PyTYn52gqo7WaD8xa02
 github.com/klauspost/cpuid/v2 v2.2.9 h1:66ze0taIn2H33fBvCkXuv9BmCwDfafmiIVpKV9kKGuY=
 github.com/klauspost/cpuid/v2 v2.2.9/go.mod h1:rqkxqrZ1EhYM9G+hXH7YdowN5R5RGN6NK4QwQ3WMXF8=
 github.com/knz/go-libedit v1.10.1/go.mod h1:MZTVkCWyz0oBc7JOWP3wNAzd002ZbM/5hgShxwh4x8M=
-github.com/kr/pretty v0.3.0 h1:WgNl7dwNpEZ6jJ9k1snq4pZsg7DOEN8hP9Xw0Tsjwk0=
-github.com/kr/pretty v0.3.0/go.mod h1:640gp4NfQd8pI5XOwp5fnNeVWj67G7CFk/SaSQn7NBk=
+github.com/kr/pretty v0.3.1 h1:flRD4NNwYAUpkphVc1HcthR4KEIFJ65n8Mw5qdRn3LE=
+github.com/kr/pretty v0.3.1/go.mod h1:hoEshYVHaxMs3cyo3Yncou5ZscifuDolrwPKZanG3xk=
 github.com/kr/text v0.2.0 h1:5Nx0Ya0ZqY2ygV366QzturHI13Jq95ApcVaJBhpS+AY=
 github.com/kr/text v0.2.0/go.mod h1:eLer722TekiGuMkidMxC/pM04lWEeraHUUmBw8l2grE=
 github.com/leodido/go-urn v1.4.0 h1:WT9HwE9SGECu3lg4d/dIA+jxlljEa1/ffXKmRjqdmIQ=
@@ -183,13 +151,12 @@ github.com/pkoukk/tiktoken-go v0.1.7 h1:qOBHXX4PHtvIvmOtyg1EeKlwFRiMKAcoMp4Q+bLQ
 github.com/pkoukk/tiktoken-go v0.1.7/go.mod h1:9NiV+i9mJKGj1rYOT+njbv+ZwA/zJxYdewGl6qVatpg=
 github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
-github.com/prometheus/client_model v0.0.0-20190812154241-14fe0d1b01d4/go.mod h1:xMI15A0UPsDsEKsMN9yxemIoYk6Tm2C1GtYGdfGttqA=
 github.com/redis/go-redis/v9 v9.7.0 h1:HhLSs+B6O021gwzl+locl0zEDnyNkxMtf/Z3NNBMa9E=
 github.com/redis/go-redis/v9 v9.7.0/go.mod h1:f6zhXITC7JUJIlPEiBOTXxJgPLdZcA93GewI7inzyWw=
 github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec h1:W09IVJc94icq4NjY3clb7Lk8O1qJ8BdBEF8z0ibU0rE=
 github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec/go.mod h1:qqbHyh8v60DhA7CoWK5oRCqLrMHRGoxYCSS9EjAz6Eo=
-github.com/rogpeppe/go-internal v1.8.0 h1:FCbCCtXNOY3UtUuHUYaghJg4y7Fd14rXifAYUAtL9R8=
-github.com/rogpeppe/go-internal v1.8.0/go.mod h1:WmiCO8CzOY8rg0OYDC4/i/2WRWAB6poM+XZ2dLUbcbE=
+github.com/rogpeppe/go-internal v1.13.1 h1:KvO1DLK/DRN07sQ1LQKScxyZJuNnedQ5/wKSR38lUII=
+github.com/rogpeppe/go-internal v1.13.1/go.mod h1:uMEvuHeurkdAXX61udpOXGD/AzZDWNMNyH2VO9fmH0o=
 github.com/shopspring/decimal v1.4.0 h1:bxl37RwXBklmTi0C79JfXCEBD1cqqHt0bbgBAGFp81k=
 github.com/shopspring/decimal v1.4.0/go.mod h1:gawqmDU56v4yIKSwfBSFip1HdCCXN8/+DMd9qYNcwME=
 github.com/sirupsen/logrus v1.9.3 h1:dueUQJ1C2q9oE3F7wvmSGAaVtTmUizReu6fjN8uqzbQ=
@@ -198,115 +165,78 @@ github.com/smarty/assertions v1.15.0 h1:cR//PqUBUiQRakZWqBiFFQ9wb8emQGDb0HeGdqGB
 github.com/smarty/assertions v1.15.0/go.mod h1:yABtdzeQs6l1brC900WlRNwj6ZR55d7B+E8C6HtKdec=
 github.com/smartystreets/goconvey v1.8.1 h1:qGjIddxOk4grTu9JPOU31tVfq3cNdBlNa5sSznIX1xY=
 github.com/smartystreets/goconvey v1.8.1/go.mod h1:+/u4qLyY6x1jReYOp7GOM2FSt8aP9CzCZL03bI28W60=
+github.com/srwiley/oksvg v0.0.0-20221011165216-be6e8873101c h1:km8GpoQut05eY3GiYWEedbTT0qnSxrCjsVbb7yKY1KE=
+github.com/srwiley/oksvg v0.0.0-20221011165216-be6e8873101c/go.mod h1:cNQ3dwVJtS5Hmnjxy6AgTPd0Inb3pW05ftPSX7NZO7Q=
+github.com/srwiley/rasterx v0.0.0-20220730225603-2ab79fcdd4ef h1:Ch6Q+AZUxDBCVqdkI8FSpFyZDtCVBc2VmejdNrm5rRQ=
+github.com/srwiley/rasterx v0.0.0-20220730225603-2ab79fcdd4ef/go.mod h1:nXTWP6+gD5+LUJ8krVhhoeHjvHTutPxMYl5SvkcnJNE=
 github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
 github.com/stretchr/objx v0.4.0/go.mod h1:YvHI0jy2hoMjB+UWwv71VJQ9isScKT/TqJzVSSt89Yw=
 github.com/stretchr/objx v0.5.0/go.mod h1:Yh+to48EsGEfYuaHDzXPcE3xhTkx73EhmCGUpEOglKo=
+github.com/stretchr/objx v0.5.2/go.mod h1:FRsXN1f5AsAjCGJKqEizvkpNtU+EGNCLh3NxZ/8L+MA=
 github.com/stretchr/testify v1.3.0/go.mod h1:M5WIy9Dh21IEIfnGCwXGc5bZfKNJtfHm1UVUgZn+9EI=
 github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
 github.com/stretchr/testify v1.7.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
 github.com/stretchr/testify v1.8.0/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO+kdMU+MU=
 github.com/stretchr/testify v1.8.1/go.mod h1:w2LPCIKwWwSfY2zedu0+kehJoqGctiVI29o6fzry7u4=
-github.com/stretchr/testify v1.9.0 h1:HtqpIVDClZ4nwg75+f6Lvsy/wHu+3BoSGCbBAcpTsTg=
-github.com/stretchr/testify v1.9.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
+github.com/stretchr/testify v1.8.4/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
+github.com/stretchr/testify v1.10.0 h1:Xv5erBjTwe/5IxqUQTdXv5kgmIvbHo3QQyRwhJsOfJA=
+github.com/stretchr/testify v1.10.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
 github.com/twitchyliquid64/golang-asm v0.15.1 h1:SU5vSMR7hnwNxj24w34ZyCi/FmDZTkS4MhqMhdFk5YI=
 github.com/twitchyliquid64/golang-asm v0.15.1/go.mod h1:a1lVb/DtPvCB8fslRZhAngC2+aY1QWCk3Cedj/Gdt08=
 github.com/ugorji/go/codec v1.2.12 h1:9LC83zGrHhuUA9l16C9AHXAqEV/2wBQ4nkvumAE65EE=
 github.com/ugorji/go/codec v1.2.12/go.mod h1:UNopzCgEMSXjBc6AOMqYvWC1ktqTAfzJZUZgYf6w6lg=
-go.opencensus.io v0.24.0 h1:y73uSU6J157QMP2kn2r30vwW1A2W2WFwSCGnAVxeaD0=
-go.opencensus.io v0.24.0/go.mod h1:vNK8G9p7aAivkbmorf4v+7Hgx+Zs0yY+0fOtgBfjQKo=
-go.opentelemetry.io/contrib/instrumentation/google.golang.org/grpc/otelgrpc v0.57.0 h1:qtFISDHKolvIxzSs0gIaiPUPR0Cucb0F2coHC7ZLdps=
-go.opentelemetry.io/contrib/instrumentation/google.golang.org/grpc/otelgrpc v0.57.0/go.mod h1:Y+Pop1Q6hCOnETWTW4NROK/q1hv50hM7yDaUTjG8lp8=
-go.opentelemetry.io/contrib/instrumentation/net/http/otelhttp v0.57.0 h1:DheMAlT6POBP+gh8RUH19EOTnQIor5QE0uSRPtzCpSw=
-go.opentelemetry.io/contrib/instrumentation/net/http/otelhttp v0.57.0/go.mod h1:wZcGmeVO9nzP67aYSLDqXNWK87EZWhi7JWj1v7ZXf94=
-go.opentelemetry.io/otel v1.32.0 h1:WnBN+Xjcteh0zdk01SVqV55d/m62NJLJdIyb4y/WO5U=
-go.opentelemetry.io/otel v1.32.0/go.mod h1:00DCVSB0RQcnzlwyTfqtxSm+DRr9hpYrHjNGiBHVQIg=
-go.opentelemetry.io/otel/metric v1.32.0 h1:xV2umtmNcThh2/a/aCP+h64Xx5wsj8qqnkYZktzNa0M=
-go.opentelemetry.io/otel/metric v1.32.0/go.mod h1:jH7CIbbK6SH2V2wE16W05BHCtIDzauciCRLoc/SyMv8=
-go.opentelemetry.io/otel/trace v1.32.0 h1:WIC9mYrXf8TmY/EXuULKc8hR17vE+Hjv2cssQDe03fM=
-go.opentelemetry.io/otel/trace v1.32.0/go.mod h1:+i4rkvCraA+tG6AzwloGaCtkx53Fa+L+V8e9a7YvhT8=
-golang.org/x/arch v0.12.0 h1:UsYJhbzPYGsT0HbEdmYcqtCv8UNGvnaL561NnIUvaKg=
-golang.org/x/arch v0.12.0/go.mod h1:FEVrYAQjsQXMVJ1nsMoVVXPZg6p2JE2mx8psSWTDQys=
-golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
-golang.org/x/crypto v0.0.0-20200622213623-75b288015ac9/go.mod h1:LzIPMQfyMNhhGPhUkYOs5KpL4U8rLKemX1yGLhDgUto=
-golang.org/x/crypto v0.30.0 h1:RwoQn3GkWiMkzlX562cLB7OxWvjH1L8xutO2WoJcRoY=
-golang.org/x/crypto v0.30.0/go.mod h1:kDsLvtWBEx7MV9tJOj9bnXsPbxwJQ6csT/x4KIN4Ssk=
-golang.org/x/exp v0.0.0-20190121172915-509febef88a4/go.mod h1:CJ0aWSM057203Lf6IL+f9T1iT9GByDxfZKAQTCR3kQA=
-golang.org/x/exp v0.0.0-20241204233417-43b7b7cde48d h1:0olWaB5pg3+oychR51GUVCEsGkeCU/2JxjBgIo4f3M0=
-golang.org/x/exp v0.0.0-20241204233417-43b7b7cde48d/go.mod h1:qj5a5QZpwLU2NLQudwIN5koi3beDhSAlJwa67PuM98c=
-golang.org/x/image v0.23.0 h1:HseQ7c2OpPKTPVzNjG5fwJsOTCiiwS4QdsYi5XU6H68=
-golang.org/x/image v0.23.0/go.mod h1:wJJBTdLfCCf3tiHa1fNxpZmUI4mmoZvwMCPP0ddoNKY=
-golang.org/x/lint v0.0.0-20181026193005-c67002cb31c3/go.mod h1:UVdnD1Gm6xHRNCYTkRU2/jEulfH38KcIWyp/GAMgvoE=
-golang.org/x/lint v0.0.0-20190227174305-5b3e6a55c961/go.mod h1:wehouNa3lNwaWXcvxsM5YxQ5yQlVC4a0KAMCusXpPoU=
-golang.org/x/lint v0.0.0-20190313153728-d0100b6bd8b3/go.mod h1:6SW0HCj/g11FgYtHlgUYUwCkIfeOF89ocIRzGO/8vkc=
-golang.org/x/mod v0.22.0 h1:D4nJWe9zXqHOmWqj4VMOJhvzj7bEZg4wEYa759z1pH4=
-golang.org/x/mod v0.22.0/go.mod h1:6SkKJ3Xj0I0BrPOZoBy3bdMptDDU9oJrpohJ3eWZ1fY=
-golang.org/x/net v0.0.0-20180724234803-3673e40ba225/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
-golang.org/x/net v0.0.0-20180826012351-8a410e7b638d/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
-golang.org/x/net v0.0.0-20190213061140-3a22650c66bd/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
-golang.org/x/net v0.0.0-20190311183353-d8887717615a/go.mod h1:t9HGtf8HONx5eT2rtn7q6eTqICYqUVnKs3thJo3Qplg=
-golang.org/x/net v0.0.0-20190404232315-eb5bcb51f2a3/go.mod h1:t9HGtf8HONx5eT2rtn7q6eTqICYqUVnKs3thJo3Qplg=
-golang.org/x/net v0.0.0-20201110031124-69a78807bb2b/go.mod h1:sp8m0HH+o8qH0wwXwYZr8TS3Oi6o0r6Gce1SSxlDquU=
-golang.org/x/net v0.32.0 h1:ZqPmj8Kzc+Y6e0+skZsuACbx+wzMgo5MQsJh9Qd6aYI=
-golang.org/x/net v0.32.0/go.mod h1:CwU0IoeOlnQQWJ6ioyFrfRuomB8GKF6KbYXZVyeXNfs=
-golang.org/x/oauth2 v0.0.0-20180821212333-d2e6202438be/go.mod h1:N/0e6XlmueqKjAGxoOufVs8QHGRruUQn6yWY3a++T0U=
-golang.org/x/oauth2 v0.24.0 h1:KTBBxWqUa0ykRPLtV69rRto9TLXcqYkeswu48x/gvNE=
-golang.org/x/oauth2 v0.24.0/go.mod h1:XYTD2NtWslqkgxebSiOHnXEap4TF09sJSc7H1sXbhtI=
-golang.org/x/sync v0.0.0-20180314180146-1d60e4601c6f/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
-golang.org/x/sync v0.0.0-20181108010431-42b317875d0f/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
-golang.org/x/sync v0.0.0-20190423024810-112230192c58/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
-golang.org/x/sync v0.10.0 h1:3NQrjDixjgGwUOCaF8w2+VYHv0Ve/vGYSbdkTa98gmQ=
-golang.org/x/sync v0.10.0/go.mod h1:Czt+wKu1gCyEFDUtn0jG5QVvpJ6rzVqr5aXyt9drQfk=
-golang.org/x/sys v0.0.0-20180830151530-49385e6e1522/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
-golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
-golang.org/x/sys v0.0.0-20190412213103-97732733099d/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
-golang.org/x/sys v0.0.0-20200930185726-fdedc70b468f/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+go.opentelemetry.io/auto/sdk v1.1.0 h1:cH53jehLUN6UFLY71z+NDOiNJqDdPRaXzTel0sJySYA=
+go.opentelemetry.io/auto/sdk v1.1.0/go.mod h1:3wSPjt5PWp2RhlCcmmOial7AvC4DQqZb7a7wCow3W8A=
+go.opentelemetry.io/contrib/instrumentation/google.golang.org/grpc/otelgrpc v0.59.0 h1:rgMkmiGfix9vFJDcDi1PK8WEQP4FLQwLDfhp5ZLpFeE=
+go.opentelemetry.io/contrib/instrumentation/google.golang.org/grpc/otelgrpc v0.59.0/go.mod h1:ijPqXp5P6IRRByFVVg9DY8P5HkxkHE5ARIa+86aXPf4=
+go.opentelemetry.io/contrib/instrumentation/net/http/otelhttp v0.59.0 h1:CV7UdSGJt/Ao6Gp4CXckLxVRRsRgDHoI8XjbL3PDl8s=
+go.opentelemetry.io/contrib/instrumentation/net/http/otelhttp v0.59.0/go.mod h1:FRmFuRJfag1IZ2dPkHnEoSFVgTVPUd2qf5Vi69hLb8I=
+go.opentelemetry.io/otel v1.34.0 h1:zRLXxLCgL1WyKsPVrgbSdMN4c0FMkDAskSTQP+0hdUY=
+go.opentelemetry.io/otel v1.34.0/go.mod h1:OWFPOQ+h4G8xpyjgqo4SxJYdDQ/qmRH+wivy7zzx9oI=
+go.opentelemetry.io/otel/metric v1.34.0 h1:+eTR3U0MyfWjRDhmFMxe2SsW64QrZ84AOhvqS7Y+PoQ=
+go.opentelemetry.io/otel/metric v1.34.0/go.mod h1:CEDrp0fy2D0MvkXE+dPV7cMi8tWZwX3dmaIhwPOaqHE=
+go.opentelemetry.io/otel/sdk v1.34.0 h1:95zS4k/2GOy069d321O8jWgYsW3MzVV+KuSPKp7Wr1A=
+go.opentelemetry.io/otel/sdk v1.34.0/go.mod h1:0e/pNiaMAqaykJGKbi+tSjWfNNHMTxoC9qANsCzbyxU=
+go.opentelemetry.io/otel/sdk/metric v1.32.0 h1:rZvFnvmvawYb0alrYkjraqJq0Z4ZUJAiyYCU9snn1CU=
+go.opentelemetry.io/otel/sdk/metric v1.32.0/go.mod h1:PWeZlq0zt9YkYAp3gjKZ0eicRYvOh1Gd+X99x6GHpCQ=
+go.opentelemetry.io/otel/trace v1.34.0 h1:+ouXS2V8Rd4hp4580a8q23bg0azF2nI8cqLYnC8mh/k=
+go.opentelemetry.io/otel/trace v1.34.0/go.mod h1:Svm7lSjQD7kG7KJ/MUHPVXSDGz2OX4h0M2jHBhmSfRE=
+golang.org/x/arch v0.14.0 h1:z9JUEZWr8x4rR0OU6c4/4t6E6jOZ8/QBS2bBYBm4tx4=
+golang.org/x/arch v0.14.0/go.mod h1:FEVrYAQjsQXMVJ1nsMoVVXPZg6p2JE2mx8psSWTDQys=
+golang.org/x/crypto v0.33.0 h1:IOBPskki6Lysi0lo9qQvbxiQ+FvsCC/YWOecCHAixus=
+golang.org/x/crypto v0.33.0/go.mod h1:bVdXmD7IV/4GdElGPozy6U7lWdRXA4qyRVGJV57uQ5M=
+golang.org/x/exp v0.0.0-20250210185358-939b2ce775ac h1:l5+whBCLH3iH2ZNHYLbAe58bo7yrN4mVcnkHDYz5vvs=
+golang.org/x/exp v0.0.0-20250210185358-939b2ce775ac/go.mod h1:hH+7mtFmImwwcMvScyxUhjuVHR3HGaDPMn9rMSUUbxo=
+golang.org/x/image v0.24.0 h1:AN7zRgVsbvmTfNyqIbbOraYL8mSwcKncEj8ofjgzcMQ=
+golang.org/x/image v0.24.0/go.mod h1:4b/ITuLfqYq1hqZcjofwctIhi7sZh2WaCjvsBNjjya8=
+golang.org/x/mod v0.23.0 h1:Zb7khfcRGKk+kqfxFaP5tZqCnDZMjC5VtUBs87Hr6QM=
+golang.org/x/mod v0.23.0/go.mod h1:6SkKJ3Xj0I0BrPOZoBy3bdMptDDU9oJrpohJ3eWZ1fY=
+golang.org/x/net v0.35.0 h1:T5GQRQb2y08kTAByq9L4/bz8cipCdA8FbRTXewonqY8=
+golang.org/x/net v0.35.0/go.mod h1:EglIi67kWsHKlRzzVMUD93VMSWGFOMSZgxFjparz1Qk=
+golang.org/x/oauth2 v0.26.0 h1:afQXWNNaeC4nvZ0Ed9XvCCzXM6UHJG7iCg0W4fPqSBE=
+golang.org/x/oauth2 v0.26.0/go.mod h1:XYTD2NtWslqkgxebSiOHnXEap4TF09sJSc7H1sXbhtI=
+golang.org/x/sync v0.11.0 h1:GGz8+XQP4FvTTrjZPzNKTMFtSXH80RAzG+5ghFPgK9w=
+golang.org/x/sync v0.11.0/go.mod h1:Czt+wKu1gCyEFDUtn0jG5QVvpJ6rzVqr5aXyt9drQfk=
 golang.org/x/sys v0.0.0-20220715151400-c0bba94af5f8/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.28.0 h1:Fksou7UEQUWlKvIdsqzJmUmCX3cZuD2+P3XyyzwMhlA=
-golang.org/x/sys v0.28.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
-golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
-golang.org/x/text v0.3.3/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
-golang.org/x/text v0.21.0 h1:zyQAAkrwaneQ066sspRyJaG9VNi/YJ1NfzcGB3hZ/qo=
-golang.org/x/text v0.21.0/go.mod h1:4IBbMaMmOPCJ8SecivzSH54+73PCFmPWxNTLm+vZkEQ=
-golang.org/x/time v0.8.0 h1:9i3RxcPv3PZnitoVGMPDKZSq1xW1gK1Xy3ArNOGZfEg=
-golang.org/x/time v0.8.0/go.mod h1:3BpzKBy/shNhVucY/MWOyx10tF3SFh9QdLuxbVysPQM=
-golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
-golang.org/x/tools v0.0.0-20190114222345-bf090417da8b/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
-golang.org/x/tools v0.0.0-20190226205152-f727befe758c/go.mod h1:9Yl7xja0Znq3iFh3HoIrodX9oNMXvdceNzlUR8zjMvY=
-golang.org/x/tools v0.0.0-20190311212946-11955173bddd/go.mod h1:LCzVGOaR6xXOjkQ3onu1FJEFr0SW1gC7cKk1uF8kGRs=
-golang.org/x/tools v0.0.0-20190524140312-2c0ae7006135/go.mod h1:RgjU9mgBXZiqYHBnxXauZ1Gv1EHHAz9KjViQ78xBX0Q=
-golang.org/x/tools v0.28.0 h1:WuB6qZ4RPCQo5aP3WdKZS7i595EdWqWR8vqJTlwTVK8=
-golang.org/x/tools v0.28.0/go.mod h1:dcIOrVd3mfQKTgrDVQHqCPMWy6lnhfhtX3hLXYVLfRw=
-golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
-google.golang.org/api v0.210.0 h1:HMNffZ57OoZCRYSbdWVRoqOa8V8NIHLL0CzdBPLztWk=
-google.golang.org/api v0.210.0/go.mod h1:B9XDZGnx2NtyjzVkOVTGrFSAVZgPcbedzKg/gTLwqBs=
-google.golang.org/appengine v1.1.0/go.mod h1:EbEs0AVv82hx2wNQdGPgUI5lhzA/G0D9YwlJXL52JkM=
-google.golang.org/appengine v1.4.0/go.mod h1:xpcJRLb0r/rnEns0DIKYYv+WjYCduHsrkT7/EB5XEv4=
-google.golang.org/genproto v0.0.0-20180817151627-c66870c02cf8/go.mod h1:JiN7NxoALGmiZfu7CAH4rXhgtRTLTxftemlI0sWmxmc=
-google.golang.org/genproto v0.0.0-20190819201941-24fa4b261c55/go.mod h1:DMBHOl98Agz4BDEuKkezgsaosCRResVns1a3J2ZsMNc=
-google.golang.org/genproto v0.0.0-20200526211855-cb27e3aa2013/go.mod h1:NbSheEEYHJ7i3ixzK3sjbqSGDJWnxyFXZblF3eUsNvo=
-google.golang.org/genproto/googleapis/api v0.0.0-20241209162323-e6fa225c2576 h1:CkkIfIt50+lT6NHAVoRYEyAvQGFM7xEwXUUywFvEb3Q=
-google.golang.org/genproto/googleapis/api v0.0.0-20241209162323-e6fa225c2576/go.mod h1:1R3kvZ1dtP3+4p4d3G8uJ8rFk/fWlScl38vanWACI08=
-google.golang.org/genproto/googleapis/rpc v0.0.0-20241209162323-e6fa225c2576 h1:8ZmaLZE4XWrtU3MyClkYqqtl6Oegr3235h7jxsDyqCY=
-google.golang.org/genproto/googleapis/rpc v0.0.0-20241209162323-e6fa225c2576/go.mod h1:5uTbfoYQed2U9p3KIj2/Zzm02PYhndfdmML0qC3q3FU=
-google.golang.org/grpc v1.19.0/go.mod h1:mqu4LbDTu4XGKhr4mRzUsmM4RtVoemTSY81AxZiDr8c=
-google.golang.org/grpc v1.23.0/go.mod h1:Y5yQAOtifL1yxbo5wqy6BxZv8vAUGQwXBOALyacEbxg=
-google.golang.org/grpc v1.25.1/go.mod h1:c3i+UQWmh7LiEpx4sFZnkU36qjEYZ0imhYfXVyQciAY=
-google.golang.org/grpc v1.27.0/go.mod h1:qbnxyOmOxrQa7FizSgH+ReBfzJrCY1pSN7KXBS8abTk=
-google.golang.org/grpc v1.33.2/go.mod h1:JMHMWHQWaTccqQQlmk3MJZS+GWXOdAesneDmEnv2fbc=
-google.golang.org/grpc v1.68.1 h1:oI5oTa11+ng8r8XMMN7jAOmWfPZWbYpCFaMUTACxkM0=
-google.golang.org/grpc v1.68.1/go.mod h1:+q1XYFJjShcqn0QZHvCyeR4CXPA+llXIeUIfIe00waw=
-google.golang.org/protobuf v0.0.0-20200109180630-ec00e32a8dfd/go.mod h1:DFci5gLYBciE7Vtevhsrf46CRTquxDuWsQurQQe4oz8=
-google.golang.org/protobuf v0.0.0-20200221191635-4d8936d0db64/go.mod h1:kwYJMbMJ01Woi6D6+Kah6886xMZcty6N08ah7+eCXa0=
-google.golang.org/protobuf v0.0.0-20200228230310-ab0ca4ff8a60/go.mod h1:cfTl7dwQJ+fmap5saPgwCLgHXTUD7jkjRqWcaiX5VyM=
-google.golang.org/protobuf v1.20.1-0.20200309200217-e05f789c0967/go.mod h1:A+miEFZTKqfCUM6K7xSMQL9OKL/b6hQv+e19PK+JZNE=
-google.golang.org/protobuf v1.21.0/go.mod h1:47Nbq4nVaFHyn7ilMalzfO3qCViNmqZ2kzikPIcrTAo=
-google.golang.org/protobuf v1.22.0/go.mod h1:EGpADcykh3NcUnDUJcl1+ZksZNG86OlYog2l/sGQquU=
-google.golang.org/protobuf v1.23.0/go.mod h1:EGpADcykh3NcUnDUJcl1+ZksZNG86OlYog2l/sGQquU=
-google.golang.org/protobuf v1.23.1-0.20200526195155-81db48ad09cc/go.mod h1:EGpADcykh3NcUnDUJcl1+ZksZNG86OlYog2l/sGQquU=
-google.golang.org/protobuf v1.25.0/go.mod h1:9JNX74DMeImyA3h4bdi1ymwjUzf21/xIlbajtzgsN7c=
-google.golang.org/protobuf v1.35.2 h1:8Ar7bF+apOIoThw1EdZl0p1oWvMqTHmpA2fRTyZO8io=
-google.golang.org/protobuf v1.35.2/go.mod h1:9fA7Ob0pmnwhb644+1+CVWFRbNajQ6iRojtC/QF5bRE=
+golang.org/x/sys v0.30.0 h1:QjkSwP/36a20jFYWkSue1YwXzLmsV5Gfq7Eiy72C1uc=
+golang.org/x/sys v0.30.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/text v0.22.0 h1:bofq7m3/HAFvbF51jz3Q9wLg3jkvSPuiZu/pD1XwgtM=
+golang.org/x/text v0.22.0/go.mod h1:YRoo4H8PVmsu+E3Ou7cqLVH8oXWIHVoX0jqUWALQhfY=
+golang.org/x/time v0.10.0 h1:3usCWA8tQn0L8+hFJQNgzpWbd89begxN66o1Ojdn5L4=
+golang.org/x/time v0.10.0/go.mod h1:3BpzKBy/shNhVucY/MWOyx10tF3SFh9QdLuxbVysPQM=
+golang.org/x/tools v0.30.0 h1:BgcpHewrV5AUp2G9MebG4XPFI1E2W41zU1SaqVA9vJY=
+golang.org/x/tools v0.30.0/go.mod h1:c347cR/OJfw5TI+GfX7RUPNMdDRRbjvYTS0jPyvsVtY=
+google.golang.org/api v0.220.0 h1:3oMI4gdBgB72WFVwE1nerDD8W3HUOS4kypK6rRLbGns=
+google.golang.org/api v0.220.0/go.mod h1:26ZAlY6aN/8WgpCzjPNy18QpYaz7Zgg1h0qe1GkZEmY=
+google.golang.org/genproto/googleapis/api v0.0.0-20250207221924-e9438ea467c6 h1:L9JNMl/plZH9wmzQUHleO/ZZDSN+9Gh41wPczNy+5Fk=
+google.golang.org/genproto/googleapis/api v0.0.0-20250207221924-e9438ea467c6/go.mod h1:iYONQfRdizDB8JJBybql13nArx91jcUk7zCXEsOofM4=
+google.golang.org/genproto/googleapis/rpc v0.0.0-20250207221924-e9438ea467c6 h1:2duwAxN2+k0xLNpjnHTXoMUgnv6VPSp5fiqTuwSxjmI=
+google.golang.org/genproto/googleapis/rpc v0.0.0-20250207221924-e9438ea467c6/go.mod h1:8BS3B93F/U1juMFq9+EDk+qOT5CO1R9IzXxG3PTqiRk=
+google.golang.org/grpc v1.70.0 h1:pWFv03aZoHzlRKHWicjsZytKAiYCtNS0dHbXnIdq7jQ=
+google.golang.org/grpc v1.70.0/go.mod h1:ofIJqVKDXx/JiXrwr2IG4/zwdH9txy3IlF40RmcJSQw=
+google.golang.org/protobuf v1.36.5 h1:tPhr+woSbjfYvY6/GPufUoYizxw1cF/yFoxJ2fmpwlM=
+google.golang.org/protobuf v1.36.5/go.mod h1:9fA7Ob0pmnwhb644+1+CVWFRbNajQ6iRojtC/QF5bRE=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/check.v1 v1.0.0-20201130134442-10cb98267c6c h1:Hei/4ADfdWqJk1ZMxUNpqntNwaWcugrBjAiHlqqRiVk=
 gopkg.in/check.v1 v1.0.0-20201130134442-10cb98267c6c/go.mod h1:JHkPIbrfpd72SG/EVd6muEfDQjcINNoR0C8j2r3qZ4Q=
@@ -320,30 +250,28 @@ gorm.io/driver/postgres v1.5.11/go.mod h1:DX3GReXH+3FPWGrrgffdvCk3DQ1dwDPdmbenSk
 gorm.io/gorm v1.25.7/go.mod h1:hbnx/Oo0ChWMn1BIhpy1oYozzpM15i4YPuHDmfYtwg8=
 gorm.io/gorm v1.25.12 h1:I0u8i2hWQItBq1WfE0o2+WuL9+8L21K9e2HHSTE/0f8=
 gorm.io/gorm v1.25.12/go.mod h1:xh7N7RHfYlNc5EmcI/El95gXusucDrQnHXe0+CgWcLQ=
-honnef.co/go/tools v0.0.0-20190102054323-c2f93a96b099/go.mod h1:rf3lG4BRIbNafJWhAfAdb/ePZxsR/4RtNHQocxwk9r4=
-honnef.co/go/tools v0.0.0-20190523083050-ea95bdfd59fc/go.mod h1:rf3lG4BRIbNafJWhAfAdb/ePZxsR/4RtNHQocxwk9r4=
-modernc.org/cc/v4 v4.23.1 h1:WqJoPL3x4cUufQVHkXpXX7ThFJ1C4ik80i2eXEXbhD8=
-modernc.org/cc/v4 v4.23.1/go.mod h1:HM7VJTZbUCR3rV8EYBi9wxnJ0ZBRiGE5OeGXNA0IsLQ=
-modernc.org/ccgo/v4 v4.23.1 h1:N49a7JiWGWV7lkPE4yYcvjkBGZQi93/JabRYjdWmJXc=
-modernc.org/ccgo/v4 v4.23.1/go.mod h1:JoIUegEIfutvoWV/BBfDFpPpfR2nc3U0jKucGcbmwDU=
+modernc.org/cc/v4 v4.24.4 h1:TFkx1s6dCkQpd6dKurBNmpo+G8Zl4Sq/ztJ+2+DEsh0=
+modernc.org/cc/v4 v4.24.4/go.mod h1:uVtb5OGqUKpoLWhqwNQo/8LwvoiEBLvZXIQ/SmO6mL0=
+modernc.org/ccgo/v4 v4.23.16 h1:Z2N+kk38b7SfySC1ZkpGLN2vthNJP1+ZzGZIlH7uBxo=
+modernc.org/ccgo/v4 v4.23.16/go.mod h1:nNma8goMTY7aQZQNTyN9AIoJfxav4nvTnvKThAeMDdo=
 modernc.org/fileutil v1.3.0 h1:gQ5SIzK3H9kdfai/5x41oQiKValumqNTDXMvKo62HvE=
 modernc.org/fileutil v1.3.0/go.mod h1:XatxS8fZi3pS8/hKG2GH/ArUogfxjpEKs3Ku3aK4JyQ=
-modernc.org/gc/v2 v2.5.0 h1:bJ9ChznK1L1mUtAQtxi0wi5AtAs5jQuw4PrPHO5pb6M=
-modernc.org/gc/v2 v2.5.0/go.mod h1:wzN5dK1AzVGoH6XOzc3YZ+ey/jPgYHLuVckd62P0GYU=
-modernc.org/libc v1.61.4 h1:wVyqEx6tlltte9lPTjq0kDAdtdM9c4JH8rU6M1ZVawA=
-modernc.org/libc v1.61.4/go.mod h1:VfXVuM/Shh5XsMNrh3C6OkfL78G3loa4ZC/Ljv9k7xc=
-modernc.org/mathutil v1.6.0 h1:fRe9+AmYlaej+64JsEEhoWuAYBkOtQiMEU7n/XgfYi4=
-modernc.org/mathutil v1.6.0/go.mod h1:Ui5Q9q1TR2gFm0AQRqQUaBWFLAhQpCwNcuhBOSedWPo=
-modernc.org/memory v1.8.0 h1:IqGTL6eFMaDZZhEWwcREgeMXYwmW83LYW8cROZYkg+E=
-modernc.org/memory v1.8.0/go.mod h1:XPZ936zp5OMKGWPqbD3JShgd/ZoQ7899TUuQqxY+peU=
-modernc.org/opt v0.1.3 h1:3XOZf2yznlhC+ibLltsDGzABUGVx8J6pnFMS3E4dcq4=
-modernc.org/opt v0.1.3/go.mod h1:WdSiB5evDcignE70guQKxYUl14mgWtbClRi5wmkkTX0=
-modernc.org/sortutil v1.2.0 h1:jQiD3PfS2REGJNzNCMMaLSp/wdMNieTbKX920Cqdgqc=
-modernc.org/sortutil v1.2.0/go.mod h1:TKU2s7kJMf1AE84OoiGppNHJwvB753OYfNl2WRb++Ss=
-modernc.org/sqlite v1.34.2 h1:J9n76TPsfYYkFkZ9Uy1QphILYifiVEwwOT7yP5b++2Y=
-modernc.org/sqlite v1.34.2/go.mod h1:dnR723UrTtjKpoHCAMN0Q/gZ9MT4r+iRvIBb9umWFkU=
-modernc.org/strutil v1.2.0 h1:agBi9dp1I+eOnxXeiZawM8F4LawKv4NzGWSaLfyeNZA=
-modernc.org/strutil v1.2.0/go.mod h1:/mdcBmfOibveCTBxUl5B5l6W+TTH1FXPLHZE6bTosX0=
+modernc.org/gc/v2 v2.6.3 h1:aJVhcqAte49LF+mGveZ5KPlsp4tdGdAOT4sipJXADjw=
+modernc.org/gc/v2 v2.6.3/go.mod h1:YgIahr1ypgfe7chRuJi2gD7DBQiKSLMPgBQe9oIiito=
+modernc.org/libc v1.61.12 h1:Fsnh0A7XLXylYNwIOJmKux9PhnfrIvMaMnjuyJ1t/f4=
+modernc.org/libc v1.61.12/go.mod h1:8F/uJWL/3nNil0Lgt1Dpz+GgkApWh04N3el3hxJcA6E=
+modernc.org/mathutil v1.7.1 h1:GCZVGXdaN8gTqB1Mf/usp1Y/hSqgI2vAGGP4jZMCxOU=
+modernc.org/mathutil v1.7.1/go.mod h1:4p5IwJITfppl0G4sUEDtCr4DthTaT47/N3aT6MhfgJg=
+modernc.org/memory v1.8.2 h1:cL9L4bcoAObu4NkxOlKWBWtNHIsnnACGF/TbqQ6sbcI=
+modernc.org/memory v1.8.2/go.mod h1:ZbjSvMO5NQ1A2i3bWeDiVMxIorXwdClKE/0SZ+BMotU=
+modernc.org/opt v0.1.4 h1:2kNGMRiUjrp4LcaPuLY2PzUfqM/w9N23quVwhKt5Qm8=
+modernc.org/opt v0.1.4/go.mod h1:03fq9lsNfvkYSfxrfUhZCWPk1lm4cq4N+Bh//bEtgns=
+modernc.org/sortutil v1.2.1 h1:+xyoGf15mM3NMlPDnFqrteY07klSFxLElE2PVuWIJ7w=
+modernc.org/sortutil v1.2.1/go.mod h1:7ZI3a3REbai7gzCLcotuw9AC4VZVpYMjDzETGsSMqJE=
+modernc.org/sqlite v1.34.5 h1:Bb6SR13/fjp15jt70CL4f18JIN7p7dnMExd+UFnF15g=
+modernc.org/sqlite v1.34.5/go.mod h1:YLuNmX9NKs8wRNK2ko1LW1NGYcc9FkBO69JOt1AR9JE=
+modernc.org/strutil v1.2.1 h1:UneZBkQA+DX2Rp35KcM69cSsNES9ly8mQWD71HKlOA0=
+modernc.org/strutil v1.2.1/go.mod h1:EHkiggD70koQxjVdSBM3JKM7k6L0FbGE5eymy9i3B9A=
 modernc.org/token v1.1.0 h1:Xl7Ap9dKaEs5kLoOQeQmPWevfnk/DM5qcLcYlA8ys6Y=
 modernc.org/token v1.1.0/go.mod h1:UGzOrNV1mAFSEB63lOFHIpNRUVMvYTc6yu1SMY/XTDM=
 nullprogram.com/x/optparse v1.0.0/go.mod h1:KdyPE+Igbe0jQUrVfMqDMeJQIJZEuyV7pjYmp6pbG50=
diff --git a/service/aiproxy/main.go b/service/aiproxy/main.go
index 38a7f392766e..ec9a973a8469 100644
--- a/service/aiproxy/main.go
+++ b/service/aiproxy/main.go
@@ -17,11 +17,11 @@ import (
 	_ "github.com/joho/godotenv/autoload"
 	"github.com/labring/sealos/service/aiproxy/common"
 	"github.com/labring/sealos/service/aiproxy/common/balance"
-	"github.com/labring/sealos/service/aiproxy/common/client"
 	"github.com/labring/sealos/service/aiproxy/common/config"
+	"github.com/labring/sealos/service/aiproxy/common/consume"
+	"github.com/labring/sealos/service/aiproxy/controller"
 	"github.com/labring/sealos/service/aiproxy/middleware"
 	"github.com/labring/sealos/service/aiproxy/model"
-	relaycontroller "github.com/labring/sealos/service/aiproxy/relay/controller"
 	"github.com/labring/sealos/service/aiproxy/router"
 	log "github.com/sirupsen/logrus"
 )
@@ -39,12 +39,7 @@ func initializeServices() error {
 		return err
 	}
 
-	if err := initializeCaches(); err != nil {
-		return err
-	}
-
-	client.Init()
-	return nil
+	return initializeCaches()
 }
 
 func initializeBalance() error {
@@ -76,7 +71,7 @@ func setLog(l *log.Logger) {
 	l.SetOutput(os.Stdout)
 	stdlog.SetOutput(l.Writer())
 
-	log.SetFormatter(&log.TextFormatter{
+	l.SetFormatter(&log.TextFormatter{
 		ForceColors:      true,
 		DisableColors:    false,
 		ForceQuote:       config.DebugEnabled,
@@ -105,20 +100,16 @@ func initializeDatabases() error {
 }
 
 func initializeCaches() error {
-	if err := model.InitOptionMap(); err != nil {
+	if err := model.InitOption2DB(); err != nil {
 		return err
 	}
-	if err := model.InitModelConfigCache(); err != nil {
-		return err
-	}
-	return model.InitChannelCache()
+	return model.InitModelConfigAndChannelCache()
 }
 
 func startSyncServices(ctx context.Context, wg *sync.WaitGroup) {
-	wg.Add(3)
+	wg.Add(2)
 	go model.SyncOptions(ctx, wg, time.Second*5)
-	go model.SyncChannelCache(ctx, wg, time.Second*5)
-	go model.SyncModelConfigCache(ctx, wg, time.Second*5)
+	go model.SyncModelConfigAndChannelCache(ctx, wg, time.Second*10)
 }
 
 func setupHTTPServer() (*http.Server, *gin.Engine) {
@@ -126,9 +117,9 @@ func setupHTTPServer() (*http.Server, *gin.Engine) {
 
 	w := log.StandardLogger().Writer()
 	server.
-		Use(middleware.NewLog(log.StandardLogger())).
 		Use(gin.RecoveryWithWriter(w)).
-		Use(middleware.RequestID)
+		Use(middleware.NewLog(log.StandardLogger())).
+		Use(middleware.RequestID, middleware.CORS())
 	router.SetRouter(server)
 
 	port := os.Getenv("PORT")
@@ -143,6 +134,16 @@ func setupHTTPServer() (*http.Server, *gin.Engine) {
 	}, server
 }
 
+func autoTestBannedModels() {
+	log.Info("auto test banned models start")
+	ticker := time.NewTicker(time.Second * 15)
+	defer ticker.Stop()
+
+	for range ticker.C {
+		controller.AutoTestBannedModels()
+	}
+}
+
 func main() {
 	if err := initializeServices(); err != nil {
 		log.Fatal("failed to initialize services: " + err.Error())
@@ -169,18 +170,25 @@ func main() {
 		}
 	}()
 
+	go autoTestBannedModels()
+
 	<-ctx.Done()
-	log.Info("shutting down server...")
-	log.Info("max wait time: 120s")
 
-	shutdownCtx, cancel := context.WithTimeout(context.Background(), 120*time.Second)
+	shutdownCtx, cancel := context.WithTimeout(context.Background(), 600*time.Second)
 	defer cancel()
 
+	log.Info("shutting down http server...")
+	log.Info("max wait time: 600s")
 	if err := srv.Shutdown(shutdownCtx); err != nil {
 		log.Error("server forced to shutdown: " + err.Error())
+	} else {
+		log.Info("server shutdown successfully")
 	}
 
-	relaycontroller.ConsumeWaitGroup.Wait()
+	log.Info("shutting down consumer...")
+	consume.Wait()
+
+	log.Info("shutting down sync services...")
 	wg.Wait()
 
 	log.Info("server exiting")
diff --git a/service/aiproxy/middleware/auth.go b/service/aiproxy/middleware/auth.go
index a8408f1abcd9..2390d11e8815 100644
--- a/service/aiproxy/middleware/auth.go
+++ b/service/aiproxy/middleware/auth.go
@@ -4,7 +4,6 @@ import (
 	"fmt"
 	"net/http"
 	"strings"
-	"time"
 
 	"github.com/gin-gonic/gin"
 	"github.com/labring/sealos/service/aiproxy/common/config"
@@ -42,12 +41,18 @@ func AdminAuth(c *gin.Context) {
 		c.Abort()
 		return
 	}
+
+	group := c.Param("group")
+	if group != "" {
+		log := GetLogger(c)
+		log.Data["gid"] = group
+	}
+
 	c.Next()
 }
 
 func TokenAuth(c *gin.Context) {
 	log := GetLogger(c)
-	ctx := c.Request.Context()
 	key := c.Request.Header.Get("Authorization")
 	key = strings.TrimPrefix(
 		strings.TrimPrefix(key, "Bearer "),
@@ -55,18 +60,29 @@ func TokenAuth(c *gin.Context) {
 	)
 	parts := strings.Split(key, "-")
 	key = parts[0]
-	token, err := model.ValidateAndGetToken(key)
-	if err != nil {
-		abortWithMessage(c, http.StatusUnauthorized, err.Error())
-		return
+
+	var token *model.TokenCache
+	var useInternalToken bool
+	if config.GetInternalToken() != "" && config.GetInternalToken() == key || config.AdminKey != "" && config.AdminKey == key {
+		token = &model.TokenCache{}
+		useInternalToken = true
+	} else {
+		var err error
+		token, err = model.ValidateAndGetToken(key)
+		if err != nil {
+			abortLogWithMessage(c, http.StatusUnauthorized, err.Error())
+			return
+		}
 	}
-	SetLogTokenFields(log.Data, token)
+
+	SetLogTokenFields(log.Data, token, useInternalToken)
+
 	if token.Subnet != "" {
 		if ok, err := network.IsIPInSubnets(c.ClientIP(), token.Subnet); err != nil {
-			abortWithMessage(c, http.StatusInternalServerError, err.Error())
+			abortLogWithMessage(c, http.StatusInternalServerError, err.Error())
 			return
 		} else if !ok {
-			abortWithMessage(c, http.StatusForbidden,
+			abortLogWithMessage(c, http.StatusForbidden,
 				fmt.Sprintf("token (%s[%d]) can only be used in the specified subnet: %s, current ip: %s",
 					token.Name,
 					token.ID,
@@ -77,47 +93,86 @@ func TokenAuth(c *gin.Context) {
 			return
 		}
 	}
-	group, err := model.CacheGetGroup(token.Group)
-	if err != nil {
-		abortWithMessage(c, http.StatusInternalServerError, err.Error())
-		return
-	}
-	SetLogGroupFields(log.Data, group)
-	if len(token.Models) == 0 {
-		token.Models = model.CacheGetEnabledModels()
-	}
-	if group.QPM <= 0 {
-		group.QPM = config.GetDefaultGroupQPM()
-	}
-	if group.QPM > 0 {
-		ok := ForceRateLimit(ctx, "group_qpm:"+group.ID, int(group.QPM), time.Minute)
-		if !ok {
-			abortWithMessage(c, http.StatusTooManyRequests,
-				group.ID+" is requesting too frequently",
-			)
+
+	var group *model.GroupCache
+	if useInternalToken {
+		group = &model.GroupCache{
+			Status: model.GroupStatusInternal,
+		}
+	} else {
+		var err error
+		group, err = model.CacheGetGroup(token.Group)
+		if err != nil {
+			abortLogWithMessage(c, http.StatusInternalServerError, fmt.Sprintf("failed to get group: %v", err))
+			return
+		}
+		if group.Status != model.GroupStatusEnabled && group.Status != model.GroupStatusInternal {
+			abortLogWithMessage(c, http.StatusForbidden, "group is disabled")
 			return
 		}
 	}
 
+	SetLogGroupFields(log.Data, group)
+
+	modelCaches := model.LoadModelCaches()
+
+	storeTokenModels(token, modelCaches)
+
 	c.Set(ctxkey.Group, group)
 	c.Set(ctxkey.Token, token)
+	c.Set(ctxkey.ModelCaches, modelCaches)
 
 	c.Next()
 }
 
+func GetGroup(c *gin.Context) *model.GroupCache {
+	return c.MustGet(ctxkey.Group).(*model.GroupCache)
+}
+
+func GetToken(c *gin.Context) *model.TokenCache {
+	return c.MustGet(ctxkey.Token).(*model.TokenCache)
+}
+
+func GetModelCaches(c *gin.Context) *model.ModelCaches {
+	return c.MustGet(ctxkey.ModelCaches).(*model.ModelCaches)
+}
+
+func sliceFilter[T any](s []T, fn func(T) bool) []T {
+	i := 0
+	for _, v := range s {
+		if fn(v) {
+			s[i] = v
+			i++
+		}
+	}
+	return s[:i]
+}
+
+func storeTokenModels(token *model.TokenCache, modelCaches *model.ModelCaches) {
+	if len(token.Models) == 0 {
+		token.Models = modelCaches.EnabledModels
+	} else {
+		enabledModelsMap := modelCaches.EnabledModelsMap
+		token.Models = sliceFilter(token.Models, func(m string) bool {
+			_, ok := enabledModelsMap[m]
+			return ok
+		})
+	}
+}
+
 func SetLogFieldsFromMeta(m *meta.Meta, fields logrus.Fields) {
 	SetLogRequestIDField(fields, m.RequestID)
 
 	SetLogModeField(fields, m.Mode)
-	SetLogModelFields(fields, m.OriginModelName)
-	SetLogActualModelFields(fields, m.ActualModelName)
+	SetLogModelFields(fields, m.OriginModel)
+	SetLogActualModelFields(fields, m.ActualModel)
 
 	if m.IsChannelTest {
 		SetLogIsChannelTestField(fields, true)
 	}
 
 	SetLogGroupFields(fields, m.Group)
-	SetLogTokenFields(fields, m.Token)
+	SetLogTokenFields(fields, m.Token, false)
 	SetLogChannelFields(fields, m.Channel)
 }
 
@@ -150,17 +205,30 @@ func SetLogRequestIDField(fields logrus.Fields, requestID string) {
 }
 
 func SetLogGroupFields(fields logrus.Fields, group *model.GroupCache) {
-	if group != nil {
+	if group == nil {
+		return
+	}
+	if group.ID != "" {
 		fields["gid"] = group.ID
 	}
 }
 
-func SetLogTokenFields(fields logrus.Fields, token *model.TokenCache) {
-	if token != nil {
+func SetLogTokenFields(fields logrus.Fields, token *model.TokenCache, internal bool) {
+	if token == nil {
+		return
+	}
+	if token.ID > 0 {
 		fields["tid"] = token.ID
+	}
+	if token.Name != "" {
 		fields["tname"] = token.Name
+	}
+	if token.Key != "" {
 		fields["key"] = maskTokenKey(token.Key)
 	}
+	if internal {
+		fields["internal"] = "true"
+	}
 }
 
 func maskTokenKey(key string) string {
diff --git a/service/aiproxy/middleware/distributor.go b/service/aiproxy/middleware/distributor.go
index c0501d35be48..86d0e71ed6d6 100644
--- a/service/aiproxy/middleware/distributor.go
+++ b/service/aiproxy/middleware/distributor.go
@@ -1,47 +1,207 @@
 package middleware
 
 import (
-	"context"
+	"errors"
 	"fmt"
 	"net/http"
 	"slices"
+	"strconv"
+	"strings"
+	"time"
 
 	"github.com/gin-gonic/gin"
+	"github.com/labring/sealos/service/aiproxy/common"
+	"github.com/labring/sealos/service/aiproxy/common/balance"
 	"github.com/labring/sealos/service/aiproxy/common/config"
+	"github.com/labring/sealos/service/aiproxy/common/consume"
 	"github.com/labring/sealos/service/aiproxy/common/ctxkey"
-	"github.com/labring/sealos/service/aiproxy/common/helper"
+	"github.com/labring/sealos/service/aiproxy/common/rpmlimit"
 	"github.com/labring/sealos/service/aiproxy/model"
 	"github.com/labring/sealos/service/aiproxy/relay/meta"
-	"github.com/labring/sealos/service/aiproxy/relay/relaymode"
+	log "github.com/sirupsen/logrus"
 )
 
-type ModelRequest struct {
-	Model string `form:"model" json:"model"`
+func calculateGroupConsumeLevelRatio(usedAmount float64) float64 {
+	v := config.GetGroupConsumeLevelRatio()
+	if len(v) == 0 {
+		return 1
+	}
+	var maxConsumeLevel float64 = -1
+	var groupConsumeLevelRatio float64
+	for consumeLevel, ratio := range v {
+		if usedAmount < consumeLevel {
+			continue
+		}
+		if consumeLevel > maxConsumeLevel {
+			maxConsumeLevel = consumeLevel
+			groupConsumeLevelRatio = ratio
+		}
+	}
+	if groupConsumeLevelRatio <= 0 {
+		groupConsumeLevelRatio = 1
+	}
+	return groupConsumeLevelRatio
+}
+
+func getGroupPMRatio(group *model.GroupCache) (float64, float64) {
+	groupRPMRatio := group.RPMRatio
+	if groupRPMRatio <= 0 {
+		groupRPMRatio = 1
+	}
+	groupTPMRatio := group.TPMRatio
+	if groupTPMRatio <= 0 {
+		groupTPMRatio = 1
+	}
+	return groupRPMRatio, groupTPMRatio
+}
+
+func GetGroupAdjustedModelConfig(group *model.GroupCache, mc *model.ModelConfig) *model.ModelConfig {
+	rpm := mc.RPM
+	tpm := mc.TPM
+	if group.RPM != nil && group.RPM[mc.Model] > 0 {
+		rpm = group.RPM[mc.Model]
+	}
+	if group.TPM != nil && group.TPM[mc.Model] > 0 {
+		tpm = group.TPM[mc.Model]
+	}
+	rpmRatio, tpmRatio := getGroupPMRatio(group)
+	groupConsumeLevelRatio := calculateGroupConsumeLevelRatio(group.UsedAmount)
+	rpm = int64(float64(rpm) * rpmRatio * groupConsumeLevelRatio)
+	tpm = int64(float64(tpm) * tpmRatio * groupConsumeLevelRatio)
+	if rpm != mc.RPM || tpm != mc.TPM {
+		newMc := *mc
+		newMc.RPM = rpm
+		newMc.TPM = tpm
+		return &newMc
+	}
+	return mc
 }
 
-func Distribute(c *gin.Context) {
+var (
+	ErrRequestRateLimitExceeded = errors.New("request rate limit exceeded, please try again later")
+	ErrRequestTpmLimitExceeded  = errors.New("request tpm limit exceeded, please try again later")
+)
+
+func checkGroupModelRPMAndTPM(c *gin.Context, group *model.GroupCache, mc *model.ModelConfig) error {
+	adjustedModelConfig := GetGroupAdjustedModelConfig(group, mc)
+
+	if adjustedModelConfig.RPM > 0 {
+		ok := rpmlimit.ForceRateLimit(
+			c.Request.Context(),
+			group.ID,
+			mc.Model,
+			adjustedModelConfig.RPM,
+			time.Minute,
+		)
+		if !ok {
+			return ErrRequestRateLimitExceeded
+		}
+	} else if common.RedisEnabled {
+		_, err := rpmlimit.PushRequest(c.Request.Context(), group.ID, mc.Model, time.Minute)
+		if err != nil {
+			log.Errorf("push request error: %s", err.Error())
+		}
+	}
+
+	if adjustedModelConfig.TPM > 0 {
+		tpm, err := model.CacheGetGroupModelTPM(group.ID, mc.Model)
+		if err != nil {
+			log.Errorf("get group model tpm (%s:%s) error: %s", group.ID, mc.Model, err.Error())
+			// ignore error
+			return nil
+		}
+
+		if tpm >= adjustedModelConfig.TPM {
+			return ErrRequestTpmLimitExceeded
+		}
+	}
+	return nil
+}
+
+type GroupBalanceConsumer struct {
+	GroupBalance float64
+	Consumer     balance.PostGroupConsumer
+}
+
+func checkGroupBalance(c *gin.Context, group *model.GroupCache) bool {
+	var groupBalance float64
+	var consumer balance.PostGroupConsumer
+
+	if group.Status == model.GroupStatusInternal {
+		groupBalance, consumer, _ = balance.MockGetGroupRemainBalance(c.Request.Context(), *group)
+	} else {
+		log := GetLogger(c)
+		var err error
+		groupBalance, consumer, err = balance.Default.GetGroupRemainBalance(c.Request.Context(), *group)
+		if err != nil {
+			if errors.Is(err, balance.ErrNoRealNameUsedAmountLimit) {
+				abortLogWithMessage(c, http.StatusForbidden, balance.ErrNoRealNameUsedAmountLimit.Error())
+				return false
+			}
+			log.Errorf("get group (%s) balance error: %v", group.ID, err)
+			abortWithMessage(c, http.StatusInternalServerError, fmt.Sprintf("get group (%s) balance error", group.ID))
+			return false
+		}
+		log.Data["balance"] = strconv.FormatFloat(groupBalance, 'f', -1, 64)
+	}
+
+	if groupBalance <= 0 {
+		abortLogWithMessage(c, http.StatusForbidden, fmt.Sprintf("group (%s) balance not enough", group.ID))
+		return false
+	}
+	c.Set(ctxkey.GroupBalance, &GroupBalanceConsumer{
+		GroupBalance: groupBalance,
+		Consumer:     consumer,
+	})
+	return true
+}
+
+func NewDistribute(mode int) gin.HandlerFunc {
+	return func(c *gin.Context) {
+		distribute(c, mode)
+	}
+}
+
+func distribute(c *gin.Context, mode int) {
 	if config.GetDisableServe() {
-		abortWithMessage(c, http.StatusServiceUnavailable, "service is under maintenance")
+		abortLogWithMessage(c, http.StatusServiceUnavailable, "service is under maintenance")
 		return
 	}
 
 	log := GetLogger(c)
 
+	group := GetGroup(c)
+
+	if !checkGroupBalance(c, group) {
+		return
+	}
+
 	requestModel, err := getRequestModel(c)
 	if err != nil {
-		abortWithMessage(c, http.StatusBadRequest, err.Error())
+		abortLogWithMessage(c, http.StatusBadRequest, err.Error())
 		return
 	}
 	if requestModel == "" {
-		abortWithMessage(c, http.StatusBadRequest, "no model provided")
+		abortLogWithMessage(c, http.StatusBadRequest, "no model provided")
 		return
 	}
 
+	c.Set(ctxkey.OriginalModel, requestModel)
+
 	SetLogModelFields(log.Data, requestModel)
 
-	token := c.MustGet(ctxkey.Token).(*model.TokenCache)
+	mc, ok := GetModelCaches(c).ModelConfig.GetModelConfig(requestModel)
+	if !ok {
+		abortLogWithMessage(c, http.StatusServiceUnavailable, requestModel+" is not available")
+		return
+	}
+
+	c.Set(ctxkey.ModelConfig, mc)
+
+	token := GetToken(c)
+
 	if len(token.Models) == 0 || !slices.Contains(token.Models, requestModel) {
-		abortWithMessage(c,
+		abortLogWithMessage(c,
 			http.StatusForbidden,
 			fmt.Sprintf("token (%s[%d]) has no permission to use model: %s",
 				token.Name, token.ID, requestModel,
@@ -49,32 +209,71 @@ func Distribute(c *gin.Context) {
 		)
 		return
 	}
-	channel, err := model.CacheGetRandomSatisfiedChannel(requestModel)
-	if err != nil {
-		abortWithMessage(c, http.StatusServiceUnavailable, requestModel+" is not available")
+
+	if err := checkGroupModelRPMAndTPM(c, group, mc); err != nil {
+		errMsg := err.Error()
+		consume.AsyncConsume(
+			nil,
+			http.StatusTooManyRequests,
+			nil,
+			NewMetaByContext(c, nil, mc.Model, mode),
+			0,
+			0,
+			errMsg,
+			c.ClientIP(),
+			nil,
+		)
+		abortLogWithMessage(c, http.StatusTooManyRequests, errMsg)
 		return
 	}
 
-	c.Set(string(ctxkey.OriginalModel), requestModel)
-	ctx := context.WithValue(c.Request.Context(), ctxkey.OriginalModel, requestModel)
-	c.Request = c.Request.WithContext(ctx)
-	c.Set(ctxkey.Channel, channel)
-
 	c.Next()
 }
 
-func NewMetaByContext(c *gin.Context) *meta.Meta {
-	channel := c.MustGet(ctxkey.Channel).(*model.Channel)
-	originalModel := c.MustGet(string(ctxkey.OriginalModel)).(string)
-	requestID := c.GetString(string(helper.RequestIDKey))
-	group := c.MustGet(ctxkey.Group).(*model.GroupCache)
-	token := c.MustGet(ctxkey.Token).(*model.TokenCache)
+func GetOriginalModel(c *gin.Context) string {
+	return c.GetString(ctxkey.OriginalModel)
+}
+
+func GetModelConfig(c *gin.Context) *model.ModelConfig {
+	return c.MustGet(ctxkey.ModelConfig).(*model.ModelConfig)
+}
+
+func NewMetaByContext(c *gin.Context, channel *model.Channel, modelName string, mode int) *meta.Meta {
+	requestID := GetRequestID(c)
+	group := GetGroup(c)
+	token := GetToken(c)
+
 	return meta.NewMeta(
 		channel,
-		relaymode.GetByPath(c.Request.URL.Path),
-		originalModel,
+		mode,
+		modelName,
+		GetModelConfig(c),
 		meta.WithRequestID(requestID),
 		meta.WithGroup(group),
 		meta.WithToken(token),
+		meta.WithEndpoint(c.Request.URL.Path),
 	)
 }
+
+type ModelRequest struct {
+	Model string `form:"model" json:"model"`
+}
+
+func getRequestModel(c *gin.Context) (string, error) {
+	path := c.Request.URL.Path
+	switch {
+	case strings.HasPrefix(path, "/v1/audio/transcriptions"),
+		strings.HasPrefix(path, "/v1/audio/translations"):
+		return c.Request.FormValue("model"), nil
+	case strings.HasPrefix(path, "/v1/engines") && strings.HasSuffix(path, "/embeddings"):
+		// /engines/:model/embeddings
+		return c.Param("model"), nil
+	default:
+		var modelRequest ModelRequest
+		err := common.UnmarshalBodyReusable(c.Request, &modelRequest)
+		if err != nil {
+			return "", fmt.Errorf("get request model failed: %w", err)
+		}
+		return modelRequest.Model, nil
+	}
+}
diff --git a/service/aiproxy/middleware/rate-limit.go b/service/aiproxy/middleware/rate-limit.go
deleted file mode 100644
index 12ebfafc4b58..000000000000
--- a/service/aiproxy/middleware/rate-limit.go
+++ /dev/null
@@ -1,101 +0,0 @@
-package middleware
-
-import (
-	"context"
-	"net/http"
-	"time"
-
-	"github.com/gin-gonic/gin"
-	"github.com/labring/sealos/service/aiproxy/common"
-	"github.com/labring/sealos/service/aiproxy/common/config"
-	log "github.com/sirupsen/logrus"
-)
-
-var inMemoryRateLimiter common.InMemoryRateLimiter
-
-// 1. 使用Redis列表存储请求时间戳
-// 2. 列表长度代表当前窗口内的请求数
-// 3. 如果请求数未达到限制，直接添加新请求并返回成功
-// 4. 如果达到限制，则检查最老的请求是否已经过期
-// 5. 如果最老的请求已过期，移除它并添加新请求，否则拒绝新请求
-// 6. 通过EXPIRE命令设置键的过期时间，自动清理过期数据
-var luaScript = `
-local key = KEYS[1]
-local max_requests = tonumber(ARGV[1])
-local window = tonumber(ARGV[2])
-local current_time = tonumber(ARGV[3])
-
-local count = redis.call('LLEN', key)
-
-if count < max_requests then
-    redis.call('LPUSH', key, current_time)
-    redis.call('PEXPIRE', key, window)
-    return 1
-else
-    local oldest = redis.call('LINDEX', key, -1)
-    if current_time - tonumber(oldest) >= window then
-        redis.call('LPUSH', key, current_time)
-        redis.call('LTRIM', key, 0, max_requests - 1)
-		redis.call('PEXPIRE', key, window)
-        return 1
-    else
-        return 0
-    end
-end
-`
-
-func redisRateLimitRequest(ctx context.Context, key string, maxRequestNum int, duration time.Duration) (bool, error) {
-	rdb := common.RDB
-	currentTime := time.Now().UnixMilli()
-	result, err := rdb.Eval(ctx, luaScript, []string{key}, maxRequestNum, duration.Milliseconds(), currentTime).Int64()
-	if err != nil {
-		return false, err
-	}
-	return result == 1, nil
-}
-
-func RateLimit(ctx context.Context, key string, maxRequestNum int, duration time.Duration) (bool, error) {
-	if maxRequestNum == 0 {
-		return true, nil
-	}
-	if common.RedisEnabled {
-		return redisRateLimitRequest(ctx, key, maxRequestNum, duration)
-	}
-	return MemoryRateLimit(ctx, key, maxRequestNum, duration), nil
-}
-
-// ignore redis error
-func ForceRateLimit(ctx context.Context, key string, maxRequestNum int, duration time.Duration) bool {
-	if maxRequestNum == 0 {
-		return true
-	}
-	if common.RedisEnabled {
-		ok, err := redisRateLimitRequest(ctx, key, maxRequestNum, duration)
-		if err == nil {
-			return ok
-		}
-		log.Error("rate limit error: " + err.Error())
-	}
-	return MemoryRateLimit(ctx, key, maxRequestNum, duration)
-}
-
-func MemoryRateLimit(_ context.Context, key string, maxRequestNum int, duration time.Duration) bool {
-	// It's safe to call multi times.
-	inMemoryRateLimiter.Init(config.RateLimitKeyExpirationDuration)
-	return inMemoryRateLimiter.Request(key, maxRequestNum, duration)
-}
-
-func GlobalAPIRateLimit(c *gin.Context) {
-	globalAPIRateLimitNum := config.GetGlobalAPIRateLimitNum()
-	if globalAPIRateLimitNum <= 0 {
-		c.Next()
-		return
-	}
-	ok := ForceRateLimit(c.Request.Context(), "global_qpm", int(globalAPIRateLimitNum), time.Minute)
-	if !ok {
-		c.Status(http.StatusTooManyRequests)
-		c.Abort()
-		return
-	}
-	c.Next()
-}
diff --git a/service/aiproxy/middleware/request-id.go b/service/aiproxy/middleware/request-id.go
index 159ebb220c83..17ba4516bb7e 100644
--- a/service/aiproxy/middleware/request-id.go
+++ b/service/aiproxy/middleware/request-id.go
@@ -1,15 +1,30 @@
 package middleware
 
 import (
+	"strconv"
+	"time"
+
 	"github.com/gin-gonic/gin"
-	"github.com/labring/sealos/service/aiproxy/common/helper"
+	"github.com/labring/sealos/service/aiproxy/common/ctxkey"
+	"github.com/labring/sealos/service/aiproxy/common/random"
 )
 
-func RequestID(c *gin.Context) {
-	id := helper.GenRequestID()
-	c.Set(string(helper.RequestIDKey), id)
-	c.Header(string(helper.RequestIDKey), id)
+func GenRequestID() string {
+	return strconv.FormatInt(time.Now().UnixMilli(), 10) + random.GetRandomNumberString(4)
+}
+
+func SetRequestID(c *gin.Context, id string) {
+	c.Set(ctxkey.RequestID, id)
+	c.Header(ctxkey.RequestID, id)
 	log := GetLogger(c)
 	SetLogRequestIDField(log.Data, id)
-	c.Next()
+}
+
+func GetRequestID(c *gin.Context) string {
+	return c.GetString(ctxkey.RequestID)
+}
+
+func RequestID(c *gin.Context) {
+	id := GenRequestID()
+	SetRequestID(c, id)
 }
diff --git a/service/aiproxy/middleware/utils.go b/service/aiproxy/middleware/utils.go
index e80a61778679..0d37992adecc 100644
--- a/service/aiproxy/middleware/utils.go
+++ b/service/aiproxy/middleware/utils.go
@@ -2,11 +2,8 @@ package middleware
 
 import (
 	"fmt"
-	"strings"
 
 	"github.com/gin-gonic/gin"
-	"github.com/labring/sealos/service/aiproxy/common"
-	"github.com/labring/sealos/service/aiproxy/common/helper"
 	"github.com/labring/sealos/service/aiproxy/relay/model"
 )
 
@@ -14,31 +11,21 @@ const (
 	ErrorTypeAIPROXY = "aiproxy_error"
 )
 
-func abortWithMessage(c *gin.Context, statusCode int, message string) {
+func MessageWithRequestID(message string, id string) string {
+	return fmt.Sprintf("%s (aiproxy: %s)", message, id)
+}
+
+func abortLogWithMessage(c *gin.Context, statusCode int, message string) {
 	GetLogger(c).Error(message)
+	abortWithMessage(c, statusCode, message)
+}
+
+func abortWithMessage(c *gin.Context, statusCode int, message string) {
 	c.JSON(statusCode, gin.H{
 		"error": &model.Error{
-			Message: helper.MessageWithRequestID(message, c.GetString(string(helper.RequestIDKey))),
+			Message: MessageWithRequestID(message, GetRequestID(c)),
 			Type:    ErrorTypeAIPROXY,
 		},
 	})
 	c.Abort()
 }
-
-func getRequestModel(c *gin.Context) (string, error) {
-	path := c.Request.URL.Path
-	switch {
-	case strings.HasPrefix(path, "/v1/audio/transcriptions"), strings.HasPrefix(path, "/v1/audio/translations"):
-		return c.Request.FormValue("model"), nil
-	case strings.HasPrefix(path, "/v1/engines") && strings.HasSuffix(path, "/embeddings"):
-		// /engines/:model/embeddings
-		return c.Param("model"), nil
-	default:
-		var modelRequest ModelRequest
-		err := common.UnmarshalBodyReusable(c.Request, &modelRequest)
-		if err != nil {
-			return "", fmt.Errorf("get request model failed: %w", err)
-		}
-		return modelRequest.Model, nil
-	}
-}
diff --git a/service/aiproxy/model/cache.go b/service/aiproxy/model/cache.go
index 858c02f91011..927509c31d51 100644
--- a/service/aiproxy/model/cache.go
+++ b/service/aiproxy/model/cache.go
@@ -9,22 +9,23 @@ import (
 	"slices"
 	"sort"
 	"sync"
+	"sync/atomic"
 	"time"
 
 	json "github.com/json-iterator/go"
-	"github.com/maruel/natural"
-	"github.com/redis/go-redis/v9"
-
 	"github.com/labring/sealos/service/aiproxy/common"
 	"github.com/labring/sealos/service/aiproxy/common/config"
 	"github.com/labring/sealos/service/aiproxy/common/conv"
+	"github.com/maruel/natural"
+	"github.com/redis/go-redis/v9"
 	log "github.com/sirupsen/logrus"
 )
 
 const (
-	SyncFrequency = time.Minute * 3
-	TokenCacheKey = "token:%s"
-	GroupCacheKey = "group:%s"
+	SyncFrequency    = time.Minute * 3
+	TokenCacheKey    = "token:%s"
+	GroupCacheKey    = "group:%s"
+	GroupModelTPMKey = "group:%s:model_tpm"
 )
 
 var (
@@ -44,6 +45,11 @@ func (r redisStringSlice) MarshalBinary() ([]byte, error) {
 
 type redisTime time.Time
 
+var (
+	_ redis.Scanner            = (*redisTime)(nil)
+	_ encoding.BinaryMarshaler = (*redisTime)(nil)
+)
+
 func (t *redisTime) ScanRedis(value string) error {
 	return (*time.Time)(t).UnmarshalBinary(conv.StringToBytes(value))
 }
@@ -88,13 +94,13 @@ func CacheDeleteToken(key string) error {
 }
 
 //nolint:gosec
-func CacheSetToken(token *Token) error {
+func CacheSetToken(token *TokenCache) error {
 	if !common.RedisEnabled {
 		return nil
 	}
 	key := fmt.Sprintf(TokenCacheKey, token.Key)
 	pipe := common.RDB.Pipeline()
-	pipe.HSet(context.Background(), key, token.ToTokenCache())
+	pipe.HSet(context.Background(), key, token)
 	expireTime := SyncFrequency + time.Duration(rand.Int64N(60)-30)*time.Second
 	pipe.Expire(context.Background(), key, expireTime)
 	_, err := pipe.Exec(context.Background())
@@ -125,73 +131,96 @@ func CacheGetTokenByKey(key string) (*TokenCache, error) {
 		return nil, err
 	}
 
-	if err := CacheSetToken(token); err != nil {
+	tc := token.ToTokenCache()
+
+	if err := CacheSetToken(tc); err != nil {
 		log.Error("redis set token error: " + err.Error())
 	}
 
-	return token.ToTokenCache(), nil
+	return tc, nil
 }
 
-var updateTokenUsedAmountScript = redis.NewScript(`
-	if redis.call("HExists", KEYS[1], "used_amount") then
-		redis.call("HSet", KEYS[1], "used_amount", ARGV[1])
-	end
-	return redis.status_reply("ok")
-`)
-
 var updateTokenUsedAmountOnlyIncreaseScript = redis.NewScript(`
-	local used_amount = redis.call("HGet", KEYS[1], "used_amount")
+	local used_amount = redis.call("HGet", KEYS[1], "ua")
 	if used_amount == false then
 		return redis.status_reply("ok")
 	end
 	if ARGV[1] < used_amount then
 		return redis.status_reply("ok")
 	end
-	redis.call("HSet", KEYS[1], "used_amount", ARGV[1])
+	redis.call("HSet", KEYS[1], "ua", ARGV[1])
 	return redis.status_reply("ok")
 `)
 
-var increaseTokenUsedAmountScript = redis.NewScript(`
-	local used_amount = redis.call("HGet", KEYS[1], "used_amount")
-	if used_amount == false then
-		return redis.status_reply("ok")
+func CacheUpdateTokenUsedAmountOnlyIncrease(key string, amount float64) error {
+	if !common.RedisEnabled {
+		return nil
+	}
+	return updateTokenUsedAmountOnlyIncreaseScript.Run(context.Background(), common.RDB, []string{fmt.Sprintf(TokenCacheKey, key)}, amount).Err()
+}
+
+var updateTokenNameScript = redis.NewScript(`
+	if redis.call("HExists", KEYS[1], "n") then
+		redis.call("HSet", KEYS[1], "n", ARGV[1])
 	end
-	redis.call("HSet", KEYS[1], "used_amount", used_amount + ARGV[1])
 	return redis.status_reply("ok")
 `)
 
-func CacheUpdateTokenUsedAmount(key string, amount float64) error {
+func CacheUpdateTokenName(key string, name string) error {
 	if !common.RedisEnabled {
 		return nil
 	}
-	return updateTokenUsedAmountScript.Run(context.Background(), common.RDB, []string{fmt.Sprintf(TokenCacheKey, key)}, amount).Err()
+	return updateTokenNameScript.Run(context.Background(), common.RDB, []string{fmt.Sprintf(TokenCacheKey, key)}, name).Err()
 }
 
-func CacheUpdateTokenUsedAmountOnlyIncrease(key string, amount float64) error {
+var updateTokenStatusScript = redis.NewScript(`
+	if redis.call("HExists", KEYS[1], "st") then
+		redis.call("HSet", KEYS[1], "st", ARGV[1])
+	end
+	return redis.status_reply("ok")
+`)
+
+func CacheUpdateTokenStatus(key string, status int) error {
 	if !common.RedisEnabled {
 		return nil
 	}
-	return updateTokenUsedAmountOnlyIncreaseScript.Run(context.Background(), common.RDB, []string{fmt.Sprintf(TokenCacheKey, key)}, amount).Err()
+	return updateTokenStatusScript.Run(context.Background(), common.RDB, []string{fmt.Sprintf(TokenCacheKey, key)}, status).Err()
 }
 
-func CacheIncreaseTokenUsedAmount(key string, amount float64) error {
-	if !common.RedisEnabled {
-		return nil
-	}
-	return increaseTokenUsedAmountScript.Run(context.Background(), common.RDB, []string{fmt.Sprintf(TokenCacheKey, key)}, amount).Err()
+type redisMapStringInt64 map[string]int64
+
+var (
+	_ redis.Scanner            = (*redisMapStringInt64)(nil)
+	_ encoding.BinaryMarshaler = (*redisMapStringInt64)(nil)
+)
+
+func (r *redisMapStringInt64) ScanRedis(value string) error {
+	return json.Unmarshal(conv.StringToBytes(value), r)
+}
+
+func (r redisMapStringInt64) MarshalBinary() ([]byte, error) {
+	return json.Marshal(r)
 }
 
 type GroupCache struct {
-	ID     string `json:"-"      redis:"-"`
-	Status int    `json:"status" redis:"st"`
-	QPM    int64  `json:"qpm"    redis:"q"`
+	ID         string              `json:"-"           redis:"-"`
+	Status     int                 `json:"status"      redis:"st"`
+	UsedAmount float64             `json:"used_amount" redis:"ua"`
+	RPMRatio   float64             `json:"rpm_ratio"   redis:"rpm_r"`
+	RPM        redisMapStringInt64 `json:"rpm"         redis:"rpm"`
+	TPMRatio   float64             `json:"tpm_ratio"   redis:"tpm_r"`
+	TPM        redisMapStringInt64 `json:"tpm"         redis:"tpm"`
 }
 
 func (g *Group) ToGroupCache() *GroupCache {
 	return &GroupCache{
-		ID:     g.ID,
-		Status: g.Status,
-		QPM:    g.QPM,
+		ID:         g.ID,
+		Status:     g.Status,
+		UsedAmount: g.UsedAmount,
+		RPMRatio:   g.RPMRatio,
+		RPM:        g.RPM,
+		TPMRatio:   g.TPMRatio,
+		TPM:        g.TPM,
 	}
 }
 
@@ -202,23 +231,73 @@ func CacheDeleteGroup(id string) error {
 	return common.RedisDel(fmt.Sprintf(GroupCacheKey, id))
 }
 
-var updateGroupQPMScript = redis.NewScript(`
-	if redis.call("HExists", KEYS[1], "qpm") then
-		redis.call("HSet", KEYS[1], "qpm", ARGV[1])
+var updateGroupRPMRatioScript = redis.NewScript(`
+	if redis.call("HExists", KEYS[1], "rpm_r") then
+		redis.call("HSet", KEYS[1], "rpm_r", ARGV[1])
+	end
+	return redis.status_reply("ok")
+`)
+
+func CacheUpdateGroupRPMRatio(id string, rpmRatio float64) error {
+	if !common.RedisEnabled {
+		return nil
+	}
+	return updateGroupRPMRatioScript.Run(context.Background(), common.RDB, []string{fmt.Sprintf(GroupCacheKey, id)}, rpmRatio).Err()
+}
+
+var updateGroupRPMScript = redis.NewScript(`
+	if redis.call("HExists", KEYS[1], "rpm") then
+		redis.call("HSet", KEYS[1], "rpm", ARGV[1])
+	end
+	return redis.status_reply("ok")
+`)
+
+func CacheUpdateGroupRPM(id string, rpm map[string]int64) error {
+	if !common.RedisEnabled {
+		return nil
+	}
+	jsonRPM, err := json.Marshal(rpm)
+	if err != nil {
+		return err
+	}
+	return updateGroupRPMScript.Run(context.Background(), common.RDB, []string{fmt.Sprintf(GroupCacheKey, id)}, conv.BytesToString(jsonRPM)).Err()
+}
+
+var updateGroupTPMRatioScript = redis.NewScript(`
+	if redis.call("HExists", KEYS[1], "tpm_r") then
+		redis.call("HSet", KEYS[1], "tpm_r", ARGV[1])
+	end
+	return redis.status_reply("ok")
+`)
+
+func CacheUpdateGroupTPMRatio(id string, tpmRatio float64) error {
+	if !common.RedisEnabled {
+		return nil
+	}
+	return updateGroupTPMRatioScript.Run(context.Background(), common.RDB, []string{fmt.Sprintf(GroupCacheKey, id)}, tpmRatio).Err()
+}
+
+var updateGroupTPMScript = redis.NewScript(`
+	if redis.call("HExists", KEYS[1], "tpm") then
+		redis.call("HSet", KEYS[1], "tpm", ARGV[1])
 	end
 	return redis.status_reply("ok")
 `)
 
-func CacheUpdateGroupQPM(id string, qpm int64) error {
+func CacheUpdateGroupTPM(id string, tpm map[string]int64) error {
 	if !common.RedisEnabled {
 		return nil
 	}
-	return updateGroupQPMScript.Run(context.Background(), common.RDB, []string{fmt.Sprintf(GroupCacheKey, id)}, qpm).Err()
+	jsonTPM, err := json.Marshal(tpm)
+	if err != nil {
+		return err
+	}
+	return updateGroupTPMScript.Run(context.Background(), common.RDB, []string{fmt.Sprintf(GroupCacheKey, id)}, conv.BytesToString(jsonTPM)).Err()
 }
 
 var updateGroupStatusScript = redis.NewScript(`
-	if redis.call("HExists", KEYS[1], "status") then
-		redis.call("HSet", KEYS[1], "status", ARGV[1])
+	if redis.call("HExists", KEYS[1], "st") then
+		redis.call("HSet", KEYS[1], "st", ARGV[1])
 	end
 	return redis.status_reply("ok")
 `)
@@ -231,13 +310,13 @@ func CacheUpdateGroupStatus(id string, status int) error {
 }
 
 //nolint:gosec
-func CacheSetGroup(group *Group) error {
+func CacheSetGroup(group *GroupCache) error {
 	if !common.RedisEnabled {
 		return nil
 	}
 	key := fmt.Sprintf(GroupCacheKey, group.ID)
 	pipe := common.RDB.Pipeline()
-	pipe.HSet(context.Background(), key, group.ToGroupCache())
+	pipe.HSet(context.Background(), key, group)
 	expireTime := SyncFrequency + time.Duration(rand.Int64N(60)-30)*time.Second
 	pipe.Expire(context.Background(), key, expireTime)
 	_, err := pipe.Exec(context.Background())
@@ -268,89 +347,103 @@ func CacheGetGroup(id string) (*GroupCache, error) {
 		return nil, err
 	}
 
-	if err := CacheSetGroup(group); err != nil {
+	gc := group.ToGroupCache()
+
+	if err := CacheSetGroup(gc); err != nil {
 		log.Error("redis set group error: " + err.Error())
 	}
 
-	return group.ToGroupCache(), nil
+	return gc, nil
 }
 
-var (
-	enabledChannels                 []*Channel
-	allChannels                     []*Channel
-	enabledModel2channels           map[string][]*Channel
-	enabledModels                   []string
-	enabledModelConfigs             []*ModelConfig
-	enabledChannelType2ModelConfigs map[int][]*ModelConfig
-	enabledChannelID2channel        map[int]*Channel
-	allChannelID2channel            map[int]*Channel
-	channelSyncLock                 sync.RWMutex
-)
+var updateGroupUsedAmountOnlyIncreaseScript = redis.NewScript(`
+	local used_amount = redis.call("HGet", KEYS[1], "ua")
+	if used_amount == false then
+		return redis.status_reply("ok")
+	end
+	if ARGV[1] < used_amount then
+		return redis.status_reply("ok")
+	end
+	redis.call("HSet", KEYS[1], "ua", ARGV[1])
+	return redis.status_reply("ok")
+`)
 
-func CacheGetAllChannels() []*Channel {
-	channelSyncLock.RLock()
-	defer channelSyncLock.RUnlock()
-	return allChannels
+func CacheUpdateGroupUsedAmountOnlyIncrease(id string, amount float64) error {
+	if !common.RedisEnabled {
+		return nil
+	}
+	return updateGroupUsedAmountOnlyIncreaseScript.Run(context.Background(), common.RDB, []string{fmt.Sprintf(GroupCacheKey, id)}, amount).Err()
 }
 
-func CacheGetAllChannelByID(id int) (*Channel, bool) {
-	channelSyncLock.RLock()
-	defer channelSyncLock.RUnlock()
-	channel, ok := allChannelID2channel[id]
-	return channel, ok
-}
+//nolint:gosec
+func CacheGetGroupModelTPM(id string, model string) (int64, error) {
+	if !common.RedisEnabled {
+		return GetGroupModelTPM(id, model)
+	}
 
-// GetEnabledModel2Channels returns a map of model name to enabled channels
-func GetEnabledModel2Channels() map[string][]*Channel {
-	channelSyncLock.RLock()
-	defer channelSyncLock.RUnlock()
-	return enabledModel2channels
-}
+	cacheKey := fmt.Sprintf(GroupModelTPMKey, id)
+	tpm, err := common.RDB.HGet(context.Background(), cacheKey, model).Int64()
+	if err == nil {
+		return tpm, nil
+	} else if !errors.Is(err, redis.Nil) {
+		log.Errorf("get group model tpm (%s:%s) from redis error: %s", id, model, err.Error())
+	}
+
+	tpm, err = GetGroupModelTPM(id, model)
+	if err != nil {
+		return 0, err
+	}
+
+	pipe := common.RDB.Pipeline()
+	pipe.HSet(context.Background(), cacheKey, model, tpm)
+	// 2-5 seconds
+	pipe.Expire(context.Background(), cacheKey, 2*time.Second+time.Duration(rand.Int64N(3))*time.Second)
+	_, err = pipe.Exec(context.Background())
+	if err != nil {
+		log.Errorf("set group model tpm (%s:%s) to redis error: %s", id, model, err.Error())
+	}
 
-// CacheGetEnabledModels returns a list of enabled model names
-func CacheGetEnabledModels() []string {
-	channelSyncLock.RLock()
-	defer channelSyncLock.RUnlock()
-	return enabledModels
+	return tpm, nil
 }
 
-// CacheGetEnabledChannelType2ModelConfigs returns a map of channel type to enabled model configs
-func CacheGetEnabledChannelType2ModelConfigs() map[int][]*ModelConfig {
-	channelSyncLock.RLock()
-	defer channelSyncLock.RUnlock()
-	return enabledChannelType2ModelConfigs
+//nolint:revive
+type ModelConfigCache interface {
+	GetModelConfig(model string) (*ModelConfig, bool)
 }
 
-// CacheGetEnabledModelConfigs returns a list of enabled model configs
-func CacheGetEnabledModelConfigs() []*ModelConfig {
-	channelSyncLock.RLock()
-	defer channelSyncLock.RUnlock()
-	return enabledModelConfigs
+// read-only cache
+//
+//nolint:revive
+type ModelCaches struct {
+	ModelConfig                     ModelConfigCache
+	EnabledModel2channels           map[string][]*Channel
+	EnabledModels                   []string
+	EnabledModelsMap                map[string]struct{}
+	EnabledModelConfigs             []*ModelConfig
+	EnabledModelConfigsMap          map[string]*ModelConfig
+	EnabledChannelType2ModelConfigs map[int][]*ModelConfig
+	EnabledChannelID2channel        map[int]*Channel
 }
 
-func CacheGetEnabledChannels() []*Channel {
-	channelSyncLock.RLock()
-	defer channelSyncLock.RUnlock()
-	return enabledChannels
+var modelCaches atomic.Pointer[ModelCaches]
+
+func init() {
+	modelCaches.Store(new(ModelCaches))
 }
 
-func CacheGetEnabledChannelByID(id int) (*Channel, bool) {
-	channelSyncLock.RLock()
-	defer channelSyncLock.RUnlock()
-	channel, ok := enabledChannelID2channel[id]
-	return channel, ok
+func LoadModelCaches() *ModelCaches {
+	return modelCaches.Load()
 }
 
-// InitChannelCache initializes the channel cache from database
-func InitChannelCache() error {
-	// Load enabled newEnabledChannels from database
-	newEnabledChannels, err := LoadEnabledChannels()
+// InitModelConfigAndChannelCache initializes the channel cache from database
+func InitModelConfigAndChannelCache() error {
+	modelConfig, err := initializeModelConfigCache()
 	if err != nil {
 		return err
 	}
 
-	// Load all channels from database
-	newAllChannels, err := LoadChannels()
+	// Load enabled newEnabledChannels from database
+	newEnabledChannels, err := LoadEnabledChannels()
 	if err != nil {
 		return err
 	}
@@ -359,7 +452,6 @@ func InitChannelCache() error {
 	newEnabledChannelID2channel := buildChannelIDMap(newEnabledChannels)
 
 	// Build all channel ID to channel map
-	newAllChannelID2channel := buildChannelIDMap(newAllChannels)
 
 	// Build model to channels map
 	newEnabledModel2channels := buildModelToChannelsMap(newEnabledChannels)
@@ -368,29 +460,29 @@ func InitChannelCache() error {
 	sortChannelsByPriority(newEnabledModel2channels)
 
 	// Build channel type to model configs map
-	newEnabledChannelType2ModelConfigs := buildChannelTypeToModelConfigsMap(newEnabledChannels)
+	newEnabledChannelType2ModelConfigs := buildChannelTypeToModelConfigsMap(newEnabledChannels, modelConfig)
 
 	// Build enabled models and configs lists
-	newEnabledModels, newEnabledModelConfigs := buildEnabledModelsAndConfigs(newEnabledChannelType2ModelConfigs)
+	newEnabledModels, newEnabledModelsMap, newEnabledModelConfigs, newEnabledModelConfigsMap := buildEnabledModelsAndConfigs(newEnabledChannelType2ModelConfigs)
 
 	// Update global cache atomically
-	updateGlobalCache(
-		newEnabledChannels,
-		newAllChannels,
-		newEnabledModel2channels,
-		newEnabledModels,
-		newEnabledModelConfigs,
-		newEnabledChannelID2channel,
-		newEnabledChannelType2ModelConfigs,
-		newAllChannelID2channel,
-	)
+	modelCaches.Store(&ModelCaches{
+		ModelConfig:                     modelConfig,
+		EnabledModel2channels:           newEnabledModel2channels,
+		EnabledModels:                   newEnabledModels,
+		EnabledModelsMap:                newEnabledModelsMap,
+		EnabledModelConfigs:             newEnabledModelConfigs,
+		EnabledModelConfigsMap:          newEnabledModelConfigsMap,
+		EnabledChannelType2ModelConfigs: newEnabledChannelType2ModelConfigs,
+		EnabledChannelID2channel:        newEnabledChannelID2channel,
+	})
 
 	return nil
 }
 
 func LoadEnabledChannels() ([]*Channel, error) {
 	var channels []*Channel
-	err := DB.Where("status = ?", ChannelStatusEnabled).Find(&channels).Error
+	err := DB.Where("status = ? or status = ?", ChannelStatusEnabled, ChannelStatusFail).Find(&channels).Error
 	if err != nil {
 		return nil, err
 	}
@@ -431,13 +523,54 @@ func LoadChannelByID(id int) (*Channel, error) {
 	return &channel, nil
 }
 
+var _ ModelConfigCache = (*modelConfigMapCache)(nil)
+
+type modelConfigMapCache struct {
+	modelConfigMap map[string]*ModelConfig
+}
+
+func (m *modelConfigMapCache) GetModelConfig(model string) (*ModelConfig, bool) {
+	config, ok := m.modelConfigMap[model]
+	return config, ok
+}
+
+var _ ModelConfigCache = (*disabledModelConfigCache)(nil)
+
+type disabledModelConfigCache struct {
+	modelConfigs ModelConfigCache
+}
+
+func (d *disabledModelConfigCache) GetModelConfig(model string) (*ModelConfig, bool) {
+	if config, ok := d.modelConfigs.GetModelConfig(model); ok {
+		return config, true
+	}
+	return NewDefaultModelConfig(model), true
+}
+
+func initializeModelConfigCache() (ModelConfigCache, error) {
+	modelConfigs, err := GetAllModelConfigs()
+	if err != nil {
+		return nil, err
+	}
+	newModelConfigMap := make(map[string]*ModelConfig)
+	for _, modelConfig := range modelConfigs {
+		newModelConfigMap[modelConfig.Model] = modelConfig
+	}
+
+	configs := &modelConfigMapCache{modelConfigMap: newModelConfigMap}
+	if config.GetDisableModelConfig() {
+		return &disabledModelConfigCache{modelConfigs: configs}, nil
+	}
+	return configs, nil
+}
+
 func initializeChannelModels(channel *Channel) {
 	if len(channel.Models) == 0 {
 		channel.Models = config.GetDefaultChannelModels()[channel.Type]
 		return
 	}
 
-	findedModels, missingModels, err := CheckModelConfig(channel.Models)
+	findedModels, missingModels, err := GetModelConfigWithModels(channel.Models)
 	if err != nil {
 		return
 	}
@@ -477,12 +610,12 @@ func buildModelToChannelsMap(channels []*Channel) map[string][]*Channel {
 func sortChannelsByPriority(modelMap map[string][]*Channel) {
 	for _, channels := range modelMap {
 		sort.Slice(channels, func(i, j int) bool {
-			return channels[i].Priority > channels[j].Priority
+			return channels[i].GetPriority() > channels[j].GetPriority()
 		})
 	}
 }
 
-func buildChannelTypeToModelConfigsMap(channels []*Channel) map[int][]*ModelConfig {
+func buildChannelTypeToModelConfigsMap(channels []*Channel, modelConfigMap ModelConfigCache) map[int][]*ModelConfig {
 	typeMap := make(map[int][]*ModelConfig)
 
 	for _, channel := range channels {
@@ -492,7 +625,7 @@ func buildChannelTypeToModelConfigsMap(channels []*Channel) map[int][]*ModelConf
 		configs := typeMap[channel.Type]
 
 		for _, model := range channel.Models {
-			if config, ok := CacheGetModelConfig(model); ok {
+			if config, ok := modelConfigMap.GetModelConfig(model); ok {
 				configs = append(configs, config)
 			}
 		}
@@ -508,10 +641,11 @@ func buildChannelTypeToModelConfigsMap(channels []*Channel) map[int][]*ModelConf
 	return typeMap
 }
 
-func buildEnabledModelsAndConfigs(typeMap map[int][]*ModelConfig) ([]string, []*ModelConfig) {
+func buildEnabledModelsAndConfigs(typeMap map[int][]*ModelConfig) ([]string, map[string]struct{}, []*ModelConfig, map[string]*ModelConfig) {
 	models := make([]string, 0)
 	configs := make([]*ModelConfig, 0)
 	appended := make(map[string]struct{})
+	modelConfigsMap := make(map[string]*ModelConfig)
 
 	for _, modelConfigs := range typeMap {
 		for _, config := range modelConfigs {
@@ -521,13 +655,14 @@ func buildEnabledModelsAndConfigs(typeMap map[int][]*ModelConfig) ([]string, []*
 			models = append(models, config.Model)
 			configs = append(configs, config)
 			appended[config.Model] = struct{}{}
+			modelConfigsMap[config.Model] = config
 		}
 	}
 
 	slices.Sort(models)
 	slices.SortStableFunc(configs, SortModelConfigsFunc)
 
-	return models, configs
+	return models, appended, configs, modelConfigsMap
 }
 
 func SortModelConfigsFunc(i, j *ModelConfig) int {
@@ -552,29 +687,7 @@ func SortModelConfigsFunc(i, j *ModelConfig) int {
 	return 1
 }
 
-func updateGlobalCache(
-	newEnabledChannels []*Channel,
-	newAllChannels []*Channel,
-	newEnabledModel2channels map[string][]*Channel,
-	newEnabledModels []string,
-	newEnabledModelConfigs []*ModelConfig,
-	newEnabledChannelID2channel map[int]*Channel,
-	newEnabledChannelType2ModelConfigs map[int][]*ModelConfig,
-	newAllChannelID2channel map[int]*Channel,
-) {
-	channelSyncLock.Lock()
-	defer channelSyncLock.Unlock()
-	enabledChannels = newEnabledChannels
-	allChannels = newAllChannels
-	enabledModel2channels = newEnabledModel2channels
-	enabledModels = newEnabledModels
-	enabledModelConfigs = newEnabledModelConfigs
-	enabledChannelID2channel = newEnabledChannelID2channel
-	enabledChannelType2ModelConfigs = newEnabledChannelType2ModelConfigs
-	allChannelID2channel = newAllChannelID2channel
-}
-
-func SyncChannelCache(ctx context.Context, wg *sync.WaitGroup, frequency time.Duration) {
+func SyncModelConfigAndChannelCache(ctx context.Context, wg *sync.WaitGroup, frequency time.Duration) {
 	defer wg.Done()
 
 	ticker := time.NewTicker(frequency)
@@ -584,7 +697,7 @@ func SyncChannelCache(ctx context.Context, wg *sync.WaitGroup, frequency time.Du
 		case <-ctx.Done():
 			return
 		case <-ticker.C:
-			err := InitChannelCache()
+			err := InitModelConfigAndChannelCache()
 			if err != nil {
 				log.Error("failed to sync channels: " + err.Error())
 				continue
@@ -593,11 +706,35 @@ func SyncChannelCache(ctx context.Context, wg *sync.WaitGroup, frequency time.Du
 	}
 }
 
+func filterChannels(channels []*Channel, ignoreChannel ...int) []*Channel {
+	filtered := make([]*Channel, 0)
+	for _, channel := range channels {
+		if channel.Status != ChannelStatusEnabled {
+			continue
+		}
+		if slices.Contains(ignoreChannel, channel.ID) {
+			continue
+		}
+		filtered = append(filtered, channel)
+	}
+	return filtered
+}
+
+var (
+	ErrChannelsNotFound  = errors.New("channels not found")
+	ErrChannelsExhausted = errors.New("channels exhausted")
+)
+
 //nolint:gosec
-func CacheGetRandomSatisfiedChannel(model string) (*Channel, error) {
-	channels := GetEnabledModel2Channels()[model]
+func (c *ModelCaches) GetRandomSatisfiedChannel(model string, ignoreChannel ...int) (*Channel, error) {
+	_channels := c.EnabledModel2channels[model]
+	if len(_channels) == 0 {
+		return nil, ErrChannelsNotFound
+	}
+
+	channels := filterChannels(_channels, ignoreChannel...)
 	if len(channels) == 0 {
-		return nil, errors.New("model not found")
+		return nil, ErrChannelsExhausted
 	}
 
 	if len(channels) == 1 {
@@ -606,7 +743,7 @@ func CacheGetRandomSatisfiedChannel(model string) (*Channel, error) {
 
 	var totalWeight int32
 	for _, ch := range channels {
-		totalWeight += ch.Priority
+		totalWeight += ch.GetPriority()
 	}
 
 	if totalWeight == 0 {
@@ -615,7 +752,7 @@ func CacheGetRandomSatisfiedChannel(model string) (*Channel, error) {
 
 	r := rand.Int32N(totalWeight)
 	for _, ch := range channels {
-		r -= ch.Priority
+		r -= ch.GetPriority()
 		if r < 0 {
 			return ch, nil
 		}
@@ -623,65 +760,3 @@ func CacheGetRandomSatisfiedChannel(model string) (*Channel, error) {
 
 	return channels[rand.IntN(len(channels))], nil
 }
-
-var (
-	modelConfigSyncLock sync.RWMutex
-	modelConfigMap      map[string]*ModelConfig
-)
-
-func InitModelConfigCache() error {
-	modelConfigs, err := GetAllModelConfigs()
-	if err != nil {
-		return err
-	}
-	newModelConfigMap := make(map[string]*ModelConfig)
-	for _, modelConfig := range modelConfigs {
-		newModelConfigMap[modelConfig.Model] = modelConfig
-	}
-
-	modelConfigSyncLock.Lock()
-	modelConfigMap = newModelConfigMap
-	modelConfigSyncLock.Unlock()
-	return nil
-}
-
-func SyncModelConfigCache(ctx context.Context, wg *sync.WaitGroup, frequency time.Duration) {
-	defer wg.Done()
-
-	ticker := time.NewTicker(frequency)
-	defer ticker.Stop()
-	for {
-		select {
-		case <-ctx.Done():
-			return
-		case <-ticker.C:
-			err := InitModelConfigCache()
-			if err != nil {
-				log.Error("failed to sync model configs: " + err.Error())
-			}
-		}
-	}
-}
-
-func CacheGetModelConfig(model string) (*ModelConfig, bool) {
-	modelConfigSyncLock.RLock()
-	defer modelConfigSyncLock.RUnlock()
-	modelConfig, ok := modelConfigMap[model]
-	return modelConfig, ok
-}
-
-func CacheCheckModelConfig(models []string) ([]string, []string) {
-	if len(models) == 0 {
-		return models, nil
-	}
-	founded := make([]string, 0)
-	missing := make([]string, 0)
-	for _, model := range models {
-		if _, ok := modelConfigMap[model]; ok {
-			founded = append(founded, model)
-		} else {
-			missing = append(missing, model)
-		}
-	}
-	return founded, missing
-}
diff --git a/service/aiproxy/model/channel.go b/service/aiproxy/model/channel.go
index de5ab2d3501a..938f25a7f10b 100644
--- a/service/aiproxy/model/channel.go
+++ b/service/aiproxy/model/channel.go
@@ -2,13 +2,13 @@ package model
 
 import (
 	"fmt"
+	"slices"
 	"strings"
 	"time"
 
 	json "github.com/json-iterator/go"
-
 	"github.com/labring/sealos/service/aiproxy/common"
-	"github.com/labring/sealos/service/aiproxy/common/helper"
+	"github.com/labring/sealos/service/aiproxy/common/config"
 	"gorm.io/gorm"
 	"gorm.io/gorm/clause"
 )
@@ -18,20 +18,22 @@ const (
 )
 
 const (
-	ChannelStatusUnknown          = 0
-	ChannelStatusEnabled          = 1 // don't use 0, 0 is the default value!
-	ChannelStatusManuallyDisabled = 2 // also don't use 0
-	ChannelStatusAutoDisabled     = 3
+	ChannelStatusUnknown  = 0
+	ChannelStatusEnabled  = 1 // don't use 0, 0 is the default value!
+	ChannelStatusDisabled = 2 // also don't use 0
+	ChannelStatusFail     = 3
 )
 
+type ChannelConfig struct {
+	SplitThink bool `json:"split_think"`
+}
+
 type Channel struct {
 	CreatedAt        time.Time         `gorm:"index"                              json:"created_at"`
-	AccessedAt       time.Time         `json:"accessed_at"`
 	LastTestErrorAt  time.Time         `json:"last_test_error_at"`
-	ChannelTests     []*ChannelTest    `gorm:"foreignKey:ChannelID;references:ID" json:"channel_tests"`
+	ChannelTests     []*ChannelTest    `gorm:"foreignKey:ChannelID;references:ID" json:"channel_tests,omitempty"`
 	BalanceUpdatedAt time.Time         `json:"balance_updated_at"`
 	ModelMapping     map[string]string `gorm:"serializer:fastjson;type:text"      json:"model_mapping"`
-	Config           ChannelConfig     `gorm:"serializer:fastjson;type:text"      json:"config"`
 	Key              string            `gorm:"type:text;index"                    json:"key"`
 	Name             string            `gorm:"index"                              json:"name"`
 	BaseURL          string            `gorm:"index"                              json:"base_url"`
@@ -43,37 +45,30 @@ type Channel struct {
 	Status           int               `gorm:"default:1;index"                    json:"status"`
 	Type             int               `gorm:"default:0;index"                    json:"type"`
 	Priority         int32             `json:"priority"`
+	Config           *ChannelConfig    `gorm:"serializer:fastjson;type:text"      json:"config,omitempty"`
 }
 
 func (c *Channel) BeforeDelete(tx *gorm.DB) (err error) {
 	return tx.Model(&ChannelTest{}).Where("channel_id = ?", c.ID).Delete(&ChannelTest{}).Error
 }
 
-// check model config exist
-func (c *Channel) BeforeSave(tx *gorm.DB) (err error) {
-	if len(c.Models) == 0 {
-		return nil
-	}
-	_, missingModels, err := checkModelConfig(tx, c.Models)
-	if err != nil {
-		return err
-	}
-	if len(missingModels) > 0 {
-		return fmt.Errorf("model config not found: %v", missingModels)
-	}
-	return nil
-}
+const (
+	DefaultPriority = 100
+)
 
-func CheckModelConfig(models []string) ([]string, []string, error) {
-	return checkModelConfig(DB, models)
+func (c *Channel) GetPriority() int32 {
+	if c.Priority == 0 {
+		return DefaultPriority
+	}
+	return c.Priority
 }
 
-func checkModelConfig(tx *gorm.DB, models []string) ([]string, []string, error) {
-	if len(models) == 0 {
+func GetModelConfigWithModels(models []string) ([]string, []string, error) {
+	if len(models) == 0 || config.GetDisableModelConfig() {
 		return models, nil, nil
 	}
 
-	where := tx.Model(&ModelConfig{}).Where("model IN ?", models)
+	where := DB.Model(&ModelConfig{}).Where("model IN ?", models)
 	var count int64
 	if err := where.Count(&count).Error; err != nil {
 		return nil, nil, err
@@ -108,18 +103,28 @@ func checkModelConfig(tx *gorm.DB, models []string) ([]string, []string, error)
 	return foundModels, nil, nil
 }
 
+func CheckModelConfigExist(models []string) error {
+	_, missingModels, err := GetModelConfigWithModels(models)
+	if err != nil {
+		return err
+	}
+	if len(missingModels) > 0 {
+		slices.Sort(missingModels)
+		return fmt.Errorf("model config not found: %v", missingModels)
+	}
+	return nil
+}
+
 func (c *Channel) MarshalJSON() ([]byte, error) {
 	type Alias Channel
 	return json.Marshal(&struct {
 		*Alias
 		CreatedAt        int64 `json:"created_at"`
-		AccessedAt       int64 `json:"accessed_at"`
 		BalanceUpdatedAt int64 `json:"balance_updated_at"`
 		LastTestErrorAt  int64 `json:"last_test_error_at"`
 	}{
 		Alias:            (*Alias)(c),
 		CreatedAt:        c.CreatedAt.UnixMilli(),
-		AccessedAt:       c.AccessedAt.UnixMilli(),
 		BalanceUpdatedAt: c.BalanceUpdatedAt.UnixMilli(),
 		LastTestErrorAt:  c.LastTestErrorAt.UnixMilli(),
 	})
@@ -129,7 +134,7 @@ func (c *Channel) MarshalJSON() ([]byte, error) {
 func getChannelOrder(order string) string {
 	prefix, suffix, _ := strings.Cut(order, "-")
 	switch prefix {
-	case "name", "type", "created_at", "accessed_at", "status", "test_at", "balance_updated_at", "used_amount", "request_count", "priority", "id":
+	case "name", "type", "created_at", "status", "test_at", "balance_updated_at", "used_amount", "request_count", "priority", "id":
 		switch suffix {
 		case "asc":
 			return prefix + " asc"
@@ -141,34 +146,14 @@ func getChannelOrder(order string) string {
 	}
 }
 
-type ChannelConfig struct {
-	Region            string `json:"region,omitempty"`
-	SK                string `json:"sk,omitempty"`
-	AK                string `json:"ak,omitempty"`
-	UserID            string `json:"user_id,omitempty"`
-	APIVersion        string `json:"api_version,omitempty"`
-	Plugin            string `json:"plugin,omitempty"`
-	VertexAIProjectID string `json:"vertex_ai_project_id,omitempty"`
-	VertexAIADC       string `json:"vertex_ai_adc,omitempty"`
-}
-
-func GetAllChannels(onlyDisabled bool, omitKey bool) (channels []*Channel, err error) {
+func GetAllChannels() (channels []*Channel, err error) {
 	tx := DB.Model(&Channel{})
-	if onlyDisabled {
-		tx = tx.Where("status = ? or status = ?", ChannelStatusAutoDisabled, ChannelStatusManuallyDisabled)
-	}
-	if omitKey {
-		tx = tx.Omit("key")
-	}
 	err = tx.Order("id desc").Find(&channels).Error
 	return channels, err
 }
 
-func GetChannels(startIdx int, num int, onlyDisabled bool, omitKey bool, id int, name string, key string, channelType int, baseURL string, order string) (channels []*Channel, total int64, err error) {
+func GetChannels(startIdx int, num int, id int, name string, key string, channelType int, baseURL string, order string) (channels []*Channel, total int64, err error) {
 	tx := DB.Model(&Channel{})
-	if onlyDisabled {
-		tx = tx.Where("status = ? or status = ?", ChannelStatusAutoDisabled, ChannelStatusManuallyDisabled)
-	}
 	if id != 0 {
 		tx = tx.Where("id = ?", id)
 	}
@@ -188,9 +173,6 @@ func GetChannels(startIdx int, num int, onlyDisabled bool, omitKey bool, id int,
 	if err != nil {
 		return nil, 0, err
 	}
-	if omitKey {
-		tx = tx.Omit("key")
-	}
 	if total <= 0 {
 		return nil, 0, nil
 	}
@@ -198,11 +180,8 @@ func GetChannels(startIdx int, num int, onlyDisabled bool, omitKey bool, id int,
 	return channels, total, err
 }
 
-func SearchChannels(keyword string, startIdx int, num int, onlyDisabled bool, omitKey bool, id int, name string, key string, channelType int, baseURL string, order string) (channels []*Channel, total int64, err error) {
+func SearchChannels(keyword string, startIdx int, num int, id int, name string, key string, channelType int, baseURL string, order string) (channels []*Channel, total int64, err error) {
 	tx := DB.Model(&Channel{})
-	if onlyDisabled {
-		tx = tx.Where("status = ? or status = ?", ChannelStatusAutoDisabled, ChannelStatusManuallyDisabled)
-	}
 
 	// Handle exact match conditions for non-zero values
 	if id != 0 {
@@ -228,7 +207,11 @@ func SearchChannels(keyword string, startIdx int, num int, onlyDisabled bool, om
 
 		if id == 0 {
 			conditions = append(conditions, "id = ?")
-			values = append(values, helper.String2Int(keyword))
+			values = append(values, String2Int(keyword))
+		}
+		if channelType == 0 {
+			conditions = append(conditions, "type = ?")
+			values = append(values, String2Int(keyword))
 		}
 		if name == "" {
 			if common.UsingPostgreSQL {
@@ -246,10 +229,6 @@ func SearchChannels(keyword string, startIdx int, num int, onlyDisabled bool, om
 			}
 			values = append(values, "%"+keyword+"%")
 		}
-		if channelType == 0 {
-			conditions = append(conditions, "type = ?")
-			values = append(values, helper.String2Int(keyword))
-		}
 		if baseURL == "" {
 			if common.UsingPostgreSQL {
 				conditions = append(conditions, "base_url ILIKE ?")
@@ -259,6 +238,13 @@ func SearchChannels(keyword string, startIdx int, num int, onlyDisabled bool, om
 			values = append(values, "%"+keyword+"%")
 		}
 
+		if common.UsingPostgreSQL {
+			conditions = append(conditions, "models ILIKE ?")
+		} else {
+			conditions = append(conditions, "models LIKE ?")
+		}
+		values = append(values, "%"+keyword+"%")
+
 		if len(conditions) > 0 {
 			tx = tx.Where(fmt.Sprintf("(%s)", strings.Join(conditions, " OR ")), values...)
 		}
@@ -268,9 +254,6 @@ func SearchChannels(keyword string, startIdx int, num int, onlyDisabled bool, om
 	if err != nil {
 		return nil, 0, err
 	}
-	if omitKey {
-		tx = tx.Omit("key")
-	}
 	if total <= 0 {
 		return nil, 0, nil
 	}
@@ -278,28 +261,32 @@ func SearchChannels(keyword string, startIdx int, num int, onlyDisabled bool, om
 	return channels, total, err
 }
 
-func GetChannelByID(id int, omitKey bool) (*Channel, error) {
+func GetChannelByID(id int) (*Channel, error) {
 	channel := Channel{ID: id}
-	var err error
-	if omitKey {
-		err = DB.Omit("key").First(&channel, "id = ?", id).Error
-	} else {
-		err = DB.First(&channel, "id = ?", id).Error
-	}
+	err := DB.First(&channel, "id = ?", id).Error
 	return &channel, HandleNotFound(err, ErrChannelNotFound)
 }
 
 func BatchInsertChannels(channels []*Channel) error {
+	for _, channel := range channels {
+		if err := CheckModelConfigExist(channel.Models); err != nil {
+			return err
+		}
+	}
 	return DB.Transaction(func(tx *gorm.DB) error {
 		return tx.Create(&channels).Error
 	})
 }
 
 func UpdateChannel(channel *Channel) error {
+	if err := CheckModelConfigExist(channel.Models); err != nil {
+		return err
+	}
 	result := DB.
 		Model(channel).
-		Omit("accessed_at", "used_amount", "request_count", "created_at", "balance_updated_at", "balance").
+		Omit("used_amount", "request_count", "created_at", "balance_updated_at", "balance").
 		Clauses(clause.Returning{}).
+		Where("id = ?", channel.ID).
 		Updates(channel)
 	return HandleUpdateResult(result, ErrChannelNotFound)
 }
@@ -346,10 +333,13 @@ func (c *Channel) UpdateModelTest(testAt time.Time, model, actualModel string, m
 }
 
 func (c *Channel) UpdateBalance(balance float64) error {
-	result := DB.Model(c).Select("balance_updated_at", "balance").Updates(Channel{
-		BalanceUpdatedAt: time.Now(),
-		Balance:          balance,
-	})
+	result := DB.Model(&Channel{}).
+		Select("balance_updated_at", "balance").
+		Where("id = ?", c.ID).
+		Updates(Channel{
+			BalanceUpdatedAt: time.Now(),
+			Balance:          balance,
+		})
 	return HandleUpdateResult(result, ErrChannelNotFound)
 }
 
@@ -368,28 +358,28 @@ func DeleteChannelsByIDs(ids []int) error {
 }
 
 func UpdateChannelStatusByID(id int, status int) error {
-	result := DB.Model(&Channel{}).Where("id = ?", id).Update("status", status)
+	result := DB.Model(&Channel{}).
+		Where("id = ?", id).
+		Update("status", status)
 	return HandleUpdateResult(result, ErrChannelNotFound)
 }
 
-func DisableChannelByID(id int) error {
-	return UpdateChannelStatusByID(id, ChannelStatusAutoDisabled)
-}
-
-func EnableChannelByID(id int) error {
-	return UpdateChannelStatusByID(id, ChannelStatusEnabled)
-}
-
 func UpdateChannelUsedAmount(id int, amount float64, requestCount int) error {
-	result := DB.Model(&Channel{}).Where("id = ?", id).Updates(map[string]interface{}{
-		"used_amount":   gorm.Expr("used_amount + ?", amount),
-		"request_count": gorm.Expr("request_count + ?", requestCount),
-		"accessed_at":   time.Now(),
-	})
+	result := DB.Model(&Channel{}).
+		Where("id = ?", id).
+		Updates(map[string]interface{}{
+			"used_amount":   gorm.Expr("used_amount + ?", amount),
+			"request_count": gorm.Expr("request_count + ?", requestCount),
+		})
 	return HandleUpdateResult(result, ErrChannelNotFound)
 }
 
 func DeleteDisabledChannel() error {
-	result := DB.Where("status = ? or status = ?", ChannelStatusAutoDisabled, ChannelStatusManuallyDisabled).Delete(&Channel{})
+	result := DB.Where("status = ?", ChannelStatusDisabled).Delete(&Channel{})
+	return HandleUpdateResult(result, ErrChannelNotFound)
+}
+
+func DeleteFailChannel() error {
+	result := DB.Where("status = ?", ChannelStatusFail).Delete(&Channel{})
 	return HandleUpdateResult(result, ErrChannelNotFound)
 }
diff --git a/service/aiproxy/model/configkey.go b/service/aiproxy/model/configkey.go
new file mode 100644
index 000000000000..c826cdf4398e
--- /dev/null
+++ b/service/aiproxy/model/configkey.go
@@ -0,0 +1,140 @@
+package model
+
+import "reflect"
+
+//nolint:revive
+type ModelConfigKey string
+
+const (
+	ModelConfigMaxContextTokensKey ModelConfigKey = "max_context_tokens"
+	ModelConfigMaxInputTokensKey   ModelConfigKey = "max_input_tokens"
+	ModelConfigMaxOutputTokensKey  ModelConfigKey = "max_output_tokens"
+	ModelConfigVisionKey           ModelConfigKey = "vision"
+	ModelConfigToolChoiceKey       ModelConfigKey = "tool_choice"
+	ModelConfigSupportFormatsKey   ModelConfigKey = "support_formats"
+	ModelConfigSupportVoicesKey    ModelConfigKey = "support_voices"
+)
+
+//nolint:revive
+type ModelConfigOption func(config map[ModelConfigKey]any)
+
+func WithModelConfigMaxContextTokens(maxContextTokens int) ModelConfigOption {
+	return func(config map[ModelConfigKey]any) {
+		config[ModelConfigMaxContextTokensKey] = maxContextTokens
+	}
+}
+
+func WithModelConfigMaxInputTokens(maxInputTokens int) ModelConfigOption {
+	return func(config map[ModelConfigKey]any) {
+		config[ModelConfigMaxInputTokensKey] = maxInputTokens
+	}
+}
+
+func WithModelConfigMaxOutputTokens(maxOutputTokens int) ModelConfigOption {
+	return func(config map[ModelConfigKey]any) {
+		config[ModelConfigMaxOutputTokensKey] = maxOutputTokens
+	}
+}
+
+func WithModelConfigVision(vision bool) ModelConfigOption {
+	return func(config map[ModelConfigKey]any) {
+		config[ModelConfigVisionKey] = vision
+	}
+}
+
+func WithModelConfigToolChoice(toolChoice bool) ModelConfigOption {
+	return func(config map[ModelConfigKey]any) {
+		config[ModelConfigToolChoiceKey] = toolChoice
+	}
+}
+
+func WithModelConfigSupportFormats(supportFormats []string) ModelConfigOption {
+	return func(config map[ModelConfigKey]any) {
+		config[ModelConfigSupportFormatsKey] = supportFormats
+	}
+}
+
+func WithModelConfigSupportVoices(supportVoices []string) ModelConfigOption {
+	return func(config map[ModelConfigKey]any) {
+		config[ModelConfigSupportVoicesKey] = supportVoices
+	}
+}
+
+func NewModelConfig(opts ...ModelConfigOption) map[ModelConfigKey]any {
+	config := make(map[ModelConfigKey]any)
+	for _, opt := range opts {
+		opt(config)
+	}
+	return config
+}
+
+func GetModelConfigInt(config map[ModelConfigKey]any, key ModelConfigKey) (int, bool) {
+	if v, ok := config[key]; ok {
+		value := reflect.ValueOf(v)
+		if value.CanInt() {
+			return int(value.Int()), true
+		}
+		if value.CanFloat() {
+			return int(value.Float()), true
+		}
+	}
+	return 0, false
+}
+
+func GetModelConfigUint(config map[ModelConfigKey]any, key ModelConfigKey) (uint64, bool) {
+	if v, ok := config[key]; ok {
+		value := reflect.ValueOf(v)
+		if value.CanUint() {
+			return value.Uint(), true
+		}
+		if value.CanFloat() {
+			return uint64(value.Float()), true
+		}
+	}
+	return 0, false
+}
+
+func GetModelConfigFloat(config map[ModelConfigKey]any, key ModelConfigKey) (float64, bool) {
+	if v, ok := config[key]; ok {
+		value := reflect.ValueOf(v)
+		if value.CanFloat() {
+			return value.Float(), true
+		}
+		if value.CanInt() {
+			return float64(value.Int()), true
+		}
+		if value.CanUint() {
+			return float64(value.Uint()), true
+		}
+	}
+	return 0, false
+}
+
+func GetModelConfigStringSlice(config map[ModelConfigKey]any, key ModelConfigKey) ([]string, bool) {
+	v, ok := config[key]
+	if !ok {
+		return nil, false
+	}
+	if slice, ok := v.([]string); ok {
+		return slice, true
+	}
+	if slice, ok := v.([]any); ok {
+		result := make([]string, len(slice))
+		for i, v := range slice {
+			if s, ok := v.(string); ok {
+				result[i] = s
+				continue
+			}
+			return nil, false
+		}
+		return result, true
+	}
+	return nil, false
+}
+
+func GetModelConfigBool(config map[ModelConfigKey]any, key ModelConfigKey) (bool, bool) {
+	if v, ok := config[key].(bool); ok {
+		return v, true
+	}
+	return false, false
+}
diff --git a/service/aiproxy/model/consumeerr.go b/service/aiproxy/model/consumeerr.go
index 36e5f2b46f8b..9843b739381e 100644
--- a/service/aiproxy/model/consumeerr.go
+++ b/service/aiproxy/model/consumeerr.go
@@ -7,7 +7,6 @@ import (
 
 	json "github.com/json-iterator/go"
 	"github.com/labring/sealos/service/aiproxy/common"
-	"github.com/labring/sealos/service/aiproxy/common/helper"
 )
 
 type ConsumeError struct {
@@ -82,7 +81,7 @@ func SearchConsumeError(keyword string, requestID string, group string, tokenNam
 
 		if tokenID == 0 {
 			conditions = append(conditions, "token_id = ?")
-			values = append(values, helper.String2Int(keyword))
+			values = append(values, String2Int(keyword))
 		}
 		if requestID == "" {
 			if common.UsingPostgreSQL {
diff --git a/service/aiproxy/model/group.go b/service/aiproxy/model/group.go
index 9e33745c43f8..63f93369cf29 100644
--- a/service/aiproxy/model/group.go
+++ b/service/aiproxy/model/group.go
@@ -2,12 +2,10 @@ package model
 
 import (
 	"errors"
-	"fmt"
 	"strings"
 	"time"
 
 	json "github.com/json-iterator/go"
-
 	"github.com/labring/sealos/service/aiproxy/common"
 	log "github.com/sirupsen/logrus"
 	"gorm.io/gorm"
@@ -21,41 +19,31 @@ const (
 const (
 	GroupStatusEnabled  = 1 // don't use 0, 0 is the default value!
 	GroupStatusDisabled = 2 // also don't use 0
+	GroupStatusInternal = 3
 )
 
 type Group struct {
-	CreatedAt    time.Time `json:"created_at"`
-	AccessedAt   time.Time `json:"accessed_at"`
-	ID           string    `gorm:"primaryKey"         json:"id"`
-	Tokens       []*Token  `gorm:"foreignKey:GroupID" json:"-"`
-	Status       int       `gorm:"default:1;index"    json:"status"`
-	UsedAmount   float64   `gorm:"index"              json:"used_amount"`
-	QPM          int64     `gorm:"index"              json:"qpm"`
-	RequestCount int       `gorm:"index"              json:"request_count"`
+	CreatedAt    time.Time        `json:"created_at"`
+	ID           string           `gorm:"primaryKey"          json:"id"`
+	Tokens       []*Token         `gorm:"foreignKey:GroupID"  json:"-"`
+	Status       int              `gorm:"default:1;index"     json:"status"`
+	UsedAmount   float64          `gorm:"index"               json:"used_amount"`
+	RPMRatio     float64          `gorm:"index"               json:"rpm_ratio"`
+	RPM          map[string]int64 `gorm:"serializer:fastjson" json:"rpm"`
+	TPMRatio     float64          `gorm:"index"               json:"tpm_ratio"`
+	TPM          map[string]int64 `gorm:"serializer:fastjson" json:"tpm"`
+	RequestCount int              `gorm:"index"               json:"request_count"`
 }
 
 func (g *Group) BeforeDelete(tx *gorm.DB) (err error) {
 	return tx.Model(&Token{}).Where("group_id = ?", g.ID).Delete(&Token{}).Error
 }
 
-func (g *Group) MarshalJSON() ([]byte, error) {
-	type Alias Group
-	return json.Marshal(&struct {
-		*Alias
-		CreatedAt  int64 `json:"created_at"`
-		AccessedAt int64 `json:"accessed_at"`
-	}{
-		Alias:      (*Alias)(g),
-		CreatedAt:  g.CreatedAt.UnixMilli(),
-		AccessedAt: g.AccessedAt.UnixMilli(),
-	})
-}
-
 //nolint:goconst
 func getGroupOrder(order string) string {
 	prefix, suffix, _ := strings.Cut(order, "-")
 	switch prefix {
-	case "id", "request_count", "accessed_at", "status", "created_at", "used_amount":
+	case "id", "request_count", "status", "created_at", "used_amount":
 		switch suffix {
 		case "asc":
 			return prefix + " asc"
@@ -88,7 +76,7 @@ func GetGroups(startIdx int, num int, order string, onlyDisabled bool) (groups [
 
 func GetGroupByID(id string) (*Group, error) {
 	if id == "" {
-		return nil, errors.New("id 为空！")
+		return nil, errors.New("group id is empty")
 	}
 	group := Group{ID: id}
 	err := DB.First(&group, "id = ?", id).Error
@@ -97,7 +85,7 @@ func GetGroupByID(id string) (*Group, error) {
 
 func DeleteGroupByID(id string) (err error) {
 	if id == "" {
-		return errors.New("id 为空！")
+		return errors.New("group id is empty")
 	}
 	defer func() {
 		if err == nil {
@@ -143,40 +131,83 @@ func DeleteGroupsByIDs(ids []string) (err error) {
 	})
 }
 
-func UpdateGroupUsedAmountAndRequestCount(id string, amount float64, count int) error {
-	result := DB.Model(&Group{}).Where("id = ?", id).Updates(map[string]interface{}{
-		"used_amount":   gorm.Expr("used_amount + ?", amount),
-		"request_count": gorm.Expr("request_count + ?", count),
-		"accessed_at":   time.Now(),
-	})
+func UpdateGroupUsedAmountAndRequestCount(id string, amount float64, count int) (err error) {
+	group := &Group{ID: id}
+	defer func() {
+		if amount > 0 && err == nil {
+			if err := CacheUpdateGroupUsedAmountOnlyIncrease(group.ID, group.UsedAmount); err != nil {
+				log.Error("update group used amount in cache failed: " + err.Error())
+			}
+		}
+	}()
+	result := DB.
+		Model(group).
+		Clauses(clause.Returning{
+			Columns: []clause.Column{
+				{Name: "used_amount"},
+			},
+		}).
+		Where("id = ?", id).
+		Updates(map[string]interface{}{
+			"used_amount":   gorm.Expr("used_amount + ?", amount),
+			"request_count": gorm.Expr("request_count + ?", count),
+		})
 	return HandleUpdateResult(result, ErrGroupNotFound)
 }
 
-func UpdateGroupUsedAmount(id string, amount float64) error {
-	result := DB.Model(&Group{}).Where("id = ?", id).Updates(map[string]interface{}{
-		"used_amount": gorm.Expr("used_amount + ?", amount),
-		"accessed_at": time.Now(),
-	})
+func UpdateGroupRPMRatio(id string, rpmRatio float64) (err error) {
+	defer func() {
+		if err == nil {
+			if err := CacheUpdateGroupRPMRatio(id, rpmRatio); err != nil {
+				log.Error("cache update group rpm failed: " + err.Error())
+			}
+		}
+	}()
+	result := DB.Model(&Group{}).Where("id = ?", id).Update("rpm_ratio", rpmRatio)
 	return HandleUpdateResult(result, ErrGroupNotFound)
 }
 
-func UpdateGroupRequestCount(id string, count int) error {
-	result := DB.Model(&Group{}).Where("id = ?", id).Updates(map[string]interface{}{
-		"request_count": gorm.Expr("request_count + ?", count),
-		"accessed_at":   time.Now(),
-	})
+func UpdateGroupRPM(id string, rpm map[string]int64) (err error) {
+	defer func() {
+		if err == nil {
+			if err := CacheUpdateGroupRPM(id, rpm); err != nil {
+				log.Error("cache update group rpm failed: " + err.Error())
+			}
+		}
+	}()
+	jsonRpm, err := json.Marshal(rpm)
+	if err != nil {
+		return err
+	}
+	result := DB.Model(&Group{}).Where("id = ?", id).Update("rpm", jsonRpm)
 	return HandleUpdateResult(result, ErrGroupNotFound)
 }
 
-func UpdateGroupQPM(id string, qpm int64) (err error) {
+func UpdateGroupTPMRatio(id string, tpmRatio float64) (err error) {
 	defer func() {
 		if err == nil {
-			if err := CacheUpdateGroupQPM(id, qpm); err != nil {
-				log.Error("cache update group qpm failed: " + err.Error())
+			if err := CacheUpdateGroupTPMRatio(id, tpmRatio); err != nil {
+				log.Error("cache update group tpm ratio failed: " + err.Error())
 			}
 		}
 	}()
-	result := DB.Model(&Group{}).Where("id = ?", id).Update("qpm", qpm)
+	result := DB.Model(&Group{}).Where("id = ?", id).Update("tpm_ratio", tpmRatio)
+	return HandleUpdateResult(result, ErrGroupNotFound)
+}
+
+func UpdateGroupTPM(id string, tpm map[string]int64) (err error) {
+	defer func() {
+		if err == nil {
+			if err := CacheUpdateGroupTPM(id, tpm); err != nil {
+				log.Error("cache update group tpm failed: " + err.Error())
+			}
+		}
+	}()
+	jsonTpm, err := json.Marshal(tpm)
+	if err != nil {
+		return err
+	}
+	result := DB.Model(&Group{}).Where("id = ?", id).Update("tpm", jsonTpm)
 	return HandleUpdateResult(result, ErrGroupNotFound)
 }
 
@@ -202,19 +233,6 @@ func SearchGroup(keyword string, startIdx int, num int, order string, status int
 	} else {
 		tx = tx.Where("id LIKE ?", "%"+keyword+"%")
 	}
-	if keyword != "" {
-		var conditions []string
-		var values []interface{}
-
-		if status == 0 {
-			conditions = append(conditions, "status = ?")
-			values = append(values, 1)
-		}
-
-		if len(conditions) > 0 {
-			tx = tx.Where(fmt.Sprintf("(%s)", strings.Join(conditions, " OR ")), values...)
-		}
-	}
 	err = tx.Count(&total).Error
 	if err != nil {
 		return nil, 0, err
diff --git a/service/aiproxy/model/log.go b/service/aiproxy/model/log.go
index 66cb6e95d174..18cdcba0a603 100644
--- a/service/aiproxy/model/log.go
+++ b/service/aiproxy/model/log.go
@@ -1,47 +1,82 @@
 package model
 
 import (
+	"cmp"
 	"errors"
 	"fmt"
+	"slices"
 	"strings"
 	"time"
 
 	json "github.com/json-iterator/go"
-	log "github.com/sirupsen/logrus"
-
 	"github.com/labring/sealos/service/aiproxy/common"
 	"github.com/labring/sealos/service/aiproxy/common/config"
-	"github.com/labring/sealos/service/aiproxy/common/helper"
+	"github.com/shopspring/decimal"
+	log "github.com/sirupsen/logrus"
+	"golang.org/x/sync/errgroup"
+	"gorm.io/gorm"
+)
+
+const (
+	requestBodyMaxSize  = 128 * 1024 // 128KB
+	responseBodyMaxSize = 128 * 1024 // 128KB
 )
 
 type RequestDetail struct {
-	CreatedAt    time.Time `gorm:"autoCreateTime" json:"-"`
-	RequestBody  string    `gorm:"type:text"      json:"request_body"`
-	ResponseBody string    `gorm:"type:text"      json:"response_body"`
-	ID           int       `json:"id"`
-	LogID        int       `json:"log_id"`
+	CreatedAt             time.Time `gorm:"autoCreateTime"                    json:"-"`
+	RequestBody           string    `gorm:"type:text"                         json:"request_body,omitempty"`
+	ResponseBody          string    `gorm:"type:text"                         json:"response_body,omitempty"`
+	RequestBodyTruncated  bool      `json:"request_body_truncated,omitempty"`
+	ResponseBodyTruncated bool      `json:"response_body_truncated,omitempty"`
+	ID                    int       `json:"id"`
+	LogID                 int       `json:"log_id"`
+}
+
+func (d *RequestDetail) BeforeSave(_ *gorm.DB) (err error) {
+	if len(d.RequestBody) > requestBodyMaxSize {
+		d.RequestBody = common.TruncateByRune(d.RequestBody, requestBodyMaxSize) + "..."
+		d.RequestBodyTruncated = true
+	}
+	if len(d.ResponseBody) > responseBodyMaxSize {
+		d.ResponseBody = common.TruncateByRune(d.ResponseBody, responseBodyMaxSize) + "..."
+		d.ResponseBodyTruncated = true
+	}
+	return
 }
 
 type Log struct {
 	RequestDetail    *RequestDetail `gorm:"foreignKey:LogID;constraint:OnUpdate:CASCADE,OnDelete:CASCADE;"                                                         json:"request_detail,omitempty"`
 	RequestAt        time.Time      `gorm:"index;index:idx_request_at_group_id,priority:2;index:idx_group_reqat_token,priority:2"                                  json:"request_at"`
 	CreatedAt        time.Time      `gorm:"index"                                                                                                                  json:"created_at"`
-	TokenName        string         `gorm:"index;index:idx_group_token,priority:2;index:idx_group_reqat_token,priority:3"                                          json:"token_name"`
+	TokenName        string         `gorm:"index;index:idx_group_token,priority:2;index:idx_group_reqat_token,priority:3"                                          json:"token_name,omitempty"`
 	Endpoint         string         `gorm:"index"                                                                                                                  json:"endpoint"`
-	Content          string         `gorm:"type:text"                                                                                                              json:"content"`
-	GroupID          string         `gorm:"index;index:idx_group_token,priority:1;index:idx_request_at_group_id,priority:1;index:idx_group_reqat_token,priority:1" json:"group"`
+	Content          string         `gorm:"type:text"                                                                                                              json:"content,omitempty"`
+	GroupID          string         `gorm:"index;index:idx_group_token,priority:1;index:idx_request_at_group_id,priority:1;index:idx_group_reqat_token,priority:1" json:"group,omitempty"`
 	Model            string         `gorm:"index"                                                                                                                  json:"model"`
 	RequestID        string         `gorm:"index"                                                                                                                  json:"request_id"`
 	Price            float64        `json:"price"`
 	ID               int            `gorm:"primaryKey"                                                                                                             json:"id"`
 	CompletionPrice  float64        `json:"completion_price"`
-	TokenID          int            `gorm:"index"                                                                                                                  json:"token_id"`
+	TokenID          int            `gorm:"index"                                                                                                                  json:"token_id,omitempty"`
 	UsedAmount       float64        `gorm:"index"                                                                                                                  json:"used_amount"`
 	PromptTokens     int            `json:"prompt_tokens"`
 	CompletionTokens int            `json:"completion_tokens"`
+	TotalTokens      int            `json:"total_tokens"`
 	ChannelID        int            `gorm:"index"                                                                                                                  json:"channel"`
 	Code             int            `gorm:"index"                                                                                                                  json:"code"`
 	Mode             int            `json:"mode"`
+	IP               string         `json:"ip"`
+}
+
+const (
+	contentMaxSize = 2 * 1024 // 2KB
+)
+
+func (l *Log) BeforeSave(_ *gorm.DB) (err error) {
+	if len(l.Content) > contentMaxSize {
+		l.Content = common.TruncateByRune(l.Content, contentMaxSize) + "..."
+	}
+	return
 }
 
 func (l *Log) MarshalJSON() ([]byte, error) {
@@ -57,6 +92,48 @@ func (l *Log) MarshalJSON() ([]byte, error) {
 	})
 }
 
+func GetLogDetail(logID int) (*RequestDetail, error) {
+	var detail RequestDetail
+	err := LogDB.
+		Model(&RequestDetail{}).
+		Where("log_id = ?", logID).
+		First(&detail).Error
+	if err != nil {
+		return nil, err
+	}
+	return &detail, nil
+}
+
+func GetGroupLogDetail(logID int, group string) (*RequestDetail, error) {
+	if group == "" {
+		return nil, errors.New("group is required")
+	}
+	var detail RequestDetail
+	err := LogDB.
+		Model(&RequestDetail{}).
+		Joins("JOIN logs ON logs.id = request_details.log_id").
+		Where("logs.group_id = ?", group).
+		Where("log_id = ?", logID).
+		First(&detail).Error
+	if err != nil {
+		return nil, err
+	}
+	return &detail, nil
+}
+
+func cleanRequestDetail() error {
+	detailStorageHours := config.GetLogDetailStorageHours()
+	if detailStorageHours <= 0 {
+		return nil
+	}
+	return LogDB.
+		Where(
+			"created_at < ?",
+			time.Now().Add(-time.Duration(detailStorageHours)*time.Hour),
+		).
+		Delete(&RequestDetail{}).Error
+}
+
 func RecordConsumeLog(
 	requestID string,
 	requestAt time.Time,
@@ -74,16 +151,14 @@ func RecordConsumeLog(
 	endpoint string,
 	content string,
 	mode int,
+	ip string,
 	requestDetail *RequestDetail,
 ) error {
 	defer func() {
-		detailStorageHours := config.GetLogDetailStorageHours()
-		if detailStorageHours <= 0 {
+		if requestDetail == nil {
 			return
 		}
-		err := LogDB.
-			Where("created_at < ?", time.Now().Add(-time.Duration(detailStorageHours)*time.Hour)).
-			Delete(&RequestDetail{}).Error
+		err := cleanRequestDetail()
 		if err != nil {
 			log.Errorf("delete request detail failed: %s", err)
 		}
@@ -96,10 +171,12 @@ func RecordConsumeLog(
 		Code:             code,
 		PromptTokens:     promptTokens,
 		CompletionTokens: completionTokens,
+		TotalTokens:      promptTokens + completionTokens,
 		TokenID:          tokenID,
 		TokenName:        tokenName,
 		Model:            modelName,
 		Mode:             mode,
+		IP:               ip,
 		UsedAmount:       amount,
 		Price:            price,
 		CompletionPrice:  completionPrice,
@@ -127,7 +204,39 @@ func getLogOrder(order string) string {
 	}
 }
 
-func GetLogs(startTimestamp time.Time, endTimestamp time.Time, code int, modelName string, group string, requestID string, tokenID int, tokenName string, startIdx int, num int, channelID int, endpoint string, content string, order string, mode int) (logs []*Log, total int64, err error) {
+type CodeType string
+
+const (
+	CodeTypeAll     CodeType = "all"
+	CodeTypeSuccess CodeType = "success"
+	CodeTypeError   CodeType = "error"
+)
+
+type GetLogsResult struct {
+	Logs   []*Log   `json:"logs"`
+	Total  int64    `json:"total"`
+	Models []string `json:"models"`
+}
+
+type GetGroupLogsResult struct {
+	GetLogsResult
+	TokenNames []string `json:"token_names"`
+}
+
+func buildGetLogsQuery(
+	group string,
+	startTimestamp time.Time,
+	endTimestamp time.Time,
+	modelName string,
+	requestID string,
+	tokenID int,
+	tokenName string,
+	channelID int,
+	endpoint string,
+	mode int,
+	codeType CodeType,
+	ip string,
+) *gorm.DB {
 	tx := LogDB.Model(&Log{})
 	if group != "" {
 		tx = tx.Where("group_id = ?", group)
@@ -141,15 +250,15 @@ func GetLogs(startTimestamp time.Time, endTimestamp time.Time, code int, modelNa
 	if tokenName != "" {
 		tx = tx.Where("token_name = ?", tokenName)
 	}
-	if requestID != "" {
-		tx = tx.Where("request_id = ?", requestID)
-	}
 	if modelName != "" {
 		tx = tx.Where("model = ?", modelName)
 	}
 	if mode != 0 {
 		tx = tx.Where("mode = ?", mode)
 	}
+	if requestID != "" {
+		tx = tx.Where("request_id = ?", requestID)
+	}
 	if tokenID != 0 {
 		tx = tx.Where("token_id = ?", tokenID)
 	}
@@ -159,88 +268,235 @@ func GetLogs(startTimestamp time.Time, endTimestamp time.Time, code int, modelNa
 	if endpoint != "" {
 		tx = tx.Where("endpoint = ?", endpoint)
 	}
-	if content != "" {
-		tx = tx.Where("content = ?", content)
+	if ip != "" {
+		tx = tx.Where("ip = ?", ip)
 	}
-	if code != 0 {
-		tx = tx.Where("code = ?", code)
+	switch codeType {
+	case CodeTypeSuccess:
+		tx = tx.Where("code = 200")
+	case CodeTypeError:
+		tx = tx.Where("code != 200")
 	}
-	err = tx.Count(&total).Error
-	if err != nil {
-		return nil, 0, err
-	}
-	if total <= 0 {
-		return nil, 0, nil
+	return tx
+}
+
+func getLogs(
+	group string,
+	startTimestamp time.Time,
+	endTimestamp time.Time,
+	modelName string,
+	requestID string,
+	tokenID int,
+	tokenName string,
+	channelID int,
+	endpoint string,
+	order string,
+	mode int,
+	codeType CodeType,
+	withBody bool,
+	ip string,
+	page int,
+	perPage int,
+) (int64, []*Log, error) {
+	var total int64
+	var logs []*Log
+
+	g := new(errgroup.Group)
+
+	g.Go(func() error {
+		return buildGetLogsQuery(
+			group,
+			startTimestamp,
+			endTimestamp,
+			modelName,
+			requestID,
+			tokenID,
+			tokenName,
+			channelID,
+			endpoint,
+			mode,
+			codeType,
+			ip,
+		).Count(&total).Error
+	})
+
+	g.Go(func() error {
+		page--
+		if page < 0 {
+			page = 0
+		}
+
+		query := buildGetLogsQuery(
+			group,
+			startTimestamp,
+			endTimestamp,
+			modelName,
+			requestID,
+			tokenID,
+			tokenName,
+			channelID,
+			endpoint,
+			mode,
+			codeType,
+			ip,
+		)
+		if withBody {
+			query = query.Preload("RequestDetail")
+		} else {
+			query = query.Preload("RequestDetail", func(db *gorm.DB) *gorm.DB {
+				return db.Select("id", "log_id")
+			})
+		}
+
+		return query.
+			Order(getLogOrder(order)).
+			Limit(perPage).
+			Offset(page * perPage).
+			Find(&logs).Error
+	})
+
+	if err := g.Wait(); err != nil {
+		return 0, nil, err
 	}
 
-	err = tx.
-		Preload("RequestDetail").
-		Order(getLogOrder(order)).
-		Limit(num).
-		Offset(startIdx).
-		Find(&logs).Error
-	return logs, total, err
+	return total, logs, nil
 }
 
-func GetGroupLogs(group string, startTimestamp time.Time, endTimestamp time.Time, code int, modelName string, requestID string, tokenID int, tokenName string, startIdx int, num int, channelID int, endpoint string, content string, order string, mode int) (logs []*Log, total int64, err error) {
-	tx := LogDB.Model(&Log{}).Where("group_id = ?", group)
-	if !startTimestamp.IsZero() {
-		tx = tx.Where("request_at >= ?", startTimestamp)
-	}
-	if !endTimestamp.IsZero() {
-		tx = tx.Where("request_at <= ?", endTimestamp)
-	}
-	if tokenName != "" {
-		tx = tx.Where("token_name = ?", tokenName)
-	}
-	if modelName != "" {
-		tx = tx.Where("model = ?", modelName)
-	}
-	if mode != 0 {
-		tx = tx.Where("mode = ?", mode)
-	}
-	if requestID != "" {
-		tx = tx.Where("request_id = ?", requestID)
-	}
-	if tokenID != 0 {
-		tx = tx.Where("token_id = ?", tokenID)
-	}
-	if channelID != 0 {
-		tx = tx.Where("channel_id = ?", channelID)
-	}
-	if endpoint != "" {
-		tx = tx.Where("endpoint = ?", endpoint)
-	}
-	if content != "" {
-		tx = tx.Where("content = ?", content)
+func GetLogs(
+	group string,
+	startTimestamp time.Time,
+	endTimestamp time.Time,
+	modelName string,
+	requestID string,
+	tokenID int,
+	tokenName string,
+	channelID int,
+	endpoint string,
+	order string,
+	mode int,
+	codeType CodeType,
+	withBody bool,
+	ip string,
+	page int,
+	perPage int,
+) (*GetLogsResult, error) {
+	var (
+		total  int64
+		logs   []*Log
+		models []string
+	)
+
+	g := new(errgroup.Group)
+
+	g.Go(func() error {
+		var err error
+		total, logs, err = getLogs(group, startTimestamp, endTimestamp, modelName, requestID, tokenID, tokenName, channelID, endpoint, order, mode, codeType, withBody, ip, page, perPage)
+		return err
+	})
+
+	g.Go(func() error {
+		var err error
+		models, err = getLogDistinctValues[string]("model", group, startTimestamp, endTimestamp)
+		return err
+	})
+
+	if err := g.Wait(); err != nil {
+		return nil, err
 	}
-	if code != 0 {
-		tx = tx.Where("code = ?", code)
+
+	result := &GetLogsResult{
+		Logs:   logs,
+		Total:  total,
+		Models: models,
 	}
-	err = tx.Count(&total).Error
-	if err != nil {
-		return nil, 0, err
+
+	return result, nil
+}
+
+func GetGroupLogs(
+	group string,
+	startTimestamp time.Time,
+	endTimestamp time.Time,
+	modelName string,
+	requestID string,
+	tokenID int,
+	tokenName string,
+	channelID int,
+	endpoint string,
+	order string,
+	mode int,
+	codeType CodeType,
+	withBody bool,
+	ip string,
+	page int,
+	perPage int,
+) (*GetGroupLogsResult, error) {
+	if group == "" {
+		return nil, errors.New("group is required")
 	}
-	if total <= 0 {
-		return nil, 0, nil
+
+	var (
+		total      int64
+		logs       []*Log
+		tokenNames []string
+		models     []string
+	)
+
+	g := new(errgroup.Group)
+
+	g.Go(func() error {
+		var err error
+		total, logs, err = getLogs(group, startTimestamp, endTimestamp, modelName, requestID, tokenID, tokenName, channelID, endpoint, order, mode, codeType, withBody, ip, page, perPage)
+		return err
+	})
+
+	g.Go(func() error {
+		var err error
+		tokenNames, err = getLogDistinctValues[string]("token_name", group, startTimestamp, endTimestamp)
+		return err
+	})
+
+	g.Go(func() error {
+		var err error
+		models, err = getLogDistinctValues[string]("model", group, startTimestamp, endTimestamp)
+		return err
+	})
+
+	if err := g.Wait(); err != nil {
+		return nil, err
 	}
 
-	err = tx.
-		Preload("RequestDetail").
-		Order(getLogOrder(order)).
-		Limit(num).
-		Offset(startIdx).
-		Find(&logs).Error
-	return logs, total, err
+	return &GetGroupLogsResult{
+		GetLogsResult: GetLogsResult{
+			Logs:   logs,
+			Total:  total,
+			Models: models,
+		},
+		TokenNames: tokenNames,
+	}, nil
 }
 
-func SearchLogs(keyword string, page int, perPage int, code int, endpoint string, groupID string, requestID string, tokenID int, tokenName string, modelName string, content string, startTimestamp time.Time, endTimestamp time.Time, channelID int, order string, mode int) (logs []*Log, total int64, err error) {
+func buildSearchLogsQuery(
+	group string,
+	keyword string,
+	endpoint string,
+	requestID string,
+	tokenID int,
+	tokenName string,
+	modelName string,
+	startTimestamp time.Time,
+	endTimestamp time.Time,
+	channelID int,
+	mode int,
+	codeType CodeType,
+	ip string,
+) *gorm.DB {
 	tx := LogDB.Model(&Log{})
+	if group != "" {
+		tx = tx.Where("group_id = ?", group)
+	}
 
 	// Handle exact match conditions for non-zero values
-	if groupID != "" {
-		tx = tx.Where("group_id = ?", groupID)
-	}
 	if !startTimestamp.IsZero() {
 		tx = tx.Where("request_at >= ?", startTimestamp)
 	}
@@ -256,35 +512,39 @@ func SearchLogs(keyword string, page int, perPage int, code int, endpoint string
 	if mode != 0 {
 		tx = tx.Where("mode = ?", mode)
 	}
-	if tokenID != 0 {
-		tx = tx.Where("token_id = ?", tokenID)
-	}
-	if code != 0 {
-		tx = tx.Where("code = ?", code)
-	}
 	if endpoint != "" {
 		tx = tx.Where("endpoint = ?", endpoint)
 	}
 	if requestID != "" {
 		tx = tx.Where("request_id = ?", requestID)
 	}
-	if content != "" {
-		tx = tx.Where("content = ?", content)
+	if tokenID != 0 {
+		tx = tx.Where("token_id = ?", tokenID)
 	}
 	if channelID != 0 {
 		tx = tx.Where("channel_id = ?", channelID)
 	}
+	if ip != "" {
+		tx = tx.Where("ip = ?", ip)
+	}
+	switch codeType {
+	case CodeTypeSuccess:
+		tx = tx.Where("code = 200")
+	case CodeTypeError:
+		tx = tx.Where("code != 200")
+	}
 
 	// Handle keyword search for zero value fields
 	if keyword != "" {
 		var conditions []string
 		var values []interface{}
 
-		if num := helper.String2Int(keyword); num != 0 {
-			if code == 0 {
-				conditions = append(conditions, "code = ?")
-				values = append(values, num)
-			}
+		if group == "" {
+			conditions = append(conditions, "group_id = ?")
+			values = append(values, keyword)
+		}
+
+		if num := String2Int(keyword); num != 0 {
 			if channelID == 0 {
 				conditions = append(conditions, "channel_id = ?")
 				values = append(values, num)
@@ -294,309 +554,579 @@ func SearchLogs(keyword string, page int, perPage int, code int, endpoint string
 				values = append(values, num)
 			}
 		}
-
-		if endpoint == "" {
-			if common.UsingPostgreSQL {
-				conditions = append(conditions, "endpoint ILIKE ?")
-			} else {
-				conditions = append(conditions, "endpoint LIKE ?")
-			}
-			values = append(values, "%"+keyword+"%")
-		}
-		if groupID == "" {
-			if common.UsingPostgreSQL {
-				conditions = append(conditions, "group_id ILIKE ?")
-			} else {
-				conditions = append(conditions, "group_id LIKE ?")
-			}
-			values = append(values, "%"+keyword+"%")
-		}
 		if requestID == "" {
-			if common.UsingPostgreSQL {
-				conditions = append(conditions, "request_id ILIKE ?")
-			} else {
-				conditions = append(conditions, "request_id LIKE ?")
-			}
-			values = append(values, "%"+keyword+"%")
+			conditions = append(conditions, "request_id = ?")
+			values = append(values, keyword)
 		}
 		if tokenName == "" {
-			if common.UsingPostgreSQL {
-				conditions = append(conditions, "token_name ILIKE ?")
-			} else {
-				conditions = append(conditions, "token_name LIKE ?")
-			}
-			values = append(values, "%"+keyword+"%")
+			conditions = append(conditions, "token_name = ?")
+			values = append(values, keyword)
 		}
 		if modelName == "" {
-			if common.UsingPostgreSQL {
-				conditions = append(conditions, "model ILIKE ?")
-			} else {
-				conditions = append(conditions, "model LIKE ?")
-			}
-			values = append(values, "%"+keyword+"%")
+			conditions = append(conditions, "model = ?")
+			values = append(values, keyword)
 		}
-		if content == "" {
-			if common.UsingPostgreSQL {
-				conditions = append(conditions, "content ILIKE ?")
-			} else {
-				conditions = append(conditions, "content LIKE ?")
-			}
-			values = append(values, "%"+keyword+"%")
+
+		if ip != "" {
+			conditions = append(conditions, "ip = ?")
+			values = append(values, ip)
 		}
 
+		// if endpoint == "" {
+		// 	if common.UsingPostgreSQL {
+		// 		conditions = append(conditions, "endpoint ILIKE ?")
+		// 	} else {
+		// 		conditions = append(conditions, "endpoint LIKE ?")
+		// 	}
+		// 	values = append(values, "%"+keyword+"%")
+		// }
+
+		if common.UsingPostgreSQL {
+			conditions = append(conditions, "content ILIKE ?")
+		} else {
+			conditions = append(conditions, "content LIKE ?")
+		}
+		values = append(values, "%"+keyword+"%")
+
 		if len(conditions) > 0 {
 			tx = tx.Where(fmt.Sprintf("(%s)", strings.Join(conditions, " OR ")), values...)
 		}
 	}
 
-	err = tx.Count(&total).Error
-	if err != nil {
-		return nil, 0, err
+	return tx
+}
+
+func searchLogs(
+	group string,
+	keyword string,
+	endpoint string,
+	requestID string,
+	tokenID int,
+	tokenName string,
+	modelName string,
+	startTimestamp time.Time,
+	endTimestamp time.Time,
+	channelID int,
+	order string,
+	mode int,
+	codeType CodeType,
+	withBody bool,
+	ip string,
+	page int,
+	perPage int,
+) (int64, []*Log, error) {
+	var total int64
+	var logs []*Log
+
+	g := new(errgroup.Group)
+
+	g.Go(func() error {
+		return buildSearchLogsQuery(
+			group,
+			keyword,
+			endpoint,
+			requestID,
+			tokenID,
+			tokenName,
+			modelName,
+			startTimestamp,
+			endTimestamp,
+			channelID,
+			mode,
+			codeType,
+			ip,
+		).Count(&total).Error
+	})
+
+	g.Go(func() error {
+		page--
+		if page < 0 {
+			page = 0
+		}
+
+		query := buildSearchLogsQuery(
+			group,
+			keyword,
+			endpoint,
+			requestID,
+			tokenID,
+			tokenName,
+			modelName,
+			startTimestamp,
+			endTimestamp,
+			channelID,
+			mode,
+			codeType,
+			ip,
+		)
+
+		if withBody {
+			query = query.Preload("RequestDetail")
+		} else {
+			query = query.Preload("RequestDetail", func(db *gorm.DB) *gorm.DB {
+				return db.Select("id", "log_id")
+			})
+		}
+
+		return query.
+			Order(getLogOrder(order)).
+			Limit(perPage).
+			Offset(page * perPage).
+			Find(&logs).Error
+	})
+
+	if err := g.Wait(); err != nil {
+		return 0, nil, err
 	}
-	if total <= 0 {
-		return nil, 0, nil
+
+	return total, logs, nil
+}
+
+func SearchLogs(
+	group string,
+	keyword string,
+	endpoint string,
+	requestID string,
+	tokenID int,
+	tokenName string,
+	modelName string,
+	startTimestamp time.Time,
+	endTimestamp time.Time,
+	channelID int,
+	order string,
+	mode int,
+	codeType CodeType,
+	withBody bool,
+	ip string,
+	page int,
+	perPage int,
+) (*GetLogsResult, error) {
+	var (
+		total  int64
+		logs   []*Log
+		models []string
+	)
+
+	g := new(errgroup.Group)
+
+	g.Go(func() error {
+		var err error
+		total, logs, err = searchLogs(group, keyword, endpoint, requestID, tokenID, tokenName, modelName, startTimestamp, endTimestamp, channelID, order, mode, codeType, withBody, ip, page, perPage)
+		return err
+	})
+
+	g.Go(func() error {
+		var err error
+		models, err = getLogDistinctValues[string]("model", group, startTimestamp, endTimestamp)
+		return err
+	})
+
+	if err := g.Wait(); err != nil {
+		return nil, err
 	}
 
-	page--
-	if page < 0 {
-		page = 0
+	result := &GetLogsResult{
+		Logs:   logs,
+		Total:  total,
+		Models: models,
 	}
-	err = tx.
-		Preload("RequestDetail").
-		Order(getLogOrder(order)).
-		Limit(perPage).
-		Offset(page * perPage).
-		Find(&logs).Error
-	return logs, total, err
+
+	return result, nil
 }
 
-func SearchGroupLogs(group string, keyword string, page int, perPage int, code int, endpoint string, requestID string, tokenID int, tokenName string, modelName string, content string, startTimestamp time.Time, endTimestamp time.Time, channelID int, order string, mode int) (logs []*Log, total int64, err error) {
+func SearchGroupLogs(
+	group string,
+	keyword string,
+	endpoint string,
+	requestID string,
+	tokenID int,
+	tokenName string,
+	modelName string,
+	startTimestamp time.Time,
+	endTimestamp time.Time,
+	channelID int,
+	order string,
+	mode int,
+	codeType CodeType,
+	withBody bool,
+	ip string,
+	page int,
+	perPage int,
+) (*GetGroupLogsResult, error) {
 	if group == "" {
-		return nil, 0, errors.New("group is empty")
+		return nil, errors.New("group is required")
 	}
-	tx := LogDB.Model(&Log{}).Where("group_id = ?", group)
 
-	// Handle exact match conditions for non-zero values
-	if !startTimestamp.IsZero() {
-		tx = tx.Where("request_at >= ?", startTimestamp)
-	}
-	if !endTimestamp.IsZero() {
-		tx = tx.Where("request_at <= ?", endTimestamp)
+	var (
+		total      int64
+		logs       []*Log
+		tokenNames []string
+		models     []string
+	)
+
+	g := new(errgroup.Group)
+
+	g.Go(func() error {
+		var err error
+		total, logs, err = searchLogs(group, keyword, endpoint, requestID, tokenID, tokenName, modelName, startTimestamp, endTimestamp, channelID, order, mode, codeType, withBody, ip, page, perPage)
+		return err
+	})
+
+	g.Go(func() error {
+		var err error
+		tokenNames, err = getLogDistinctValues[string]("token_name", group, startTimestamp, endTimestamp)
+		return err
+	})
+
+	g.Go(func() error {
+		var err error
+		models, err = getLogDistinctValues[string]("model", group, startTimestamp, endTimestamp)
+		return err
+	})
+
+	if err := g.Wait(); err != nil {
+		return nil, err
 	}
-	if tokenName != "" {
-		tx = tx.Where("token_name = ?", tokenName)
+
+	result := &GetGroupLogsResult{
+		GetLogsResult: GetLogsResult{
+			Logs:   logs,
+			Total:  total,
+			Models: models,
+		},
+		TokenNames: tokenNames,
 	}
-	if modelName != "" {
-		tx = tx.Where("model = ?", modelName)
+
+	return result, nil
+}
+
+func DeleteOldLog(timestamp time.Time) (int64, error) {
+	result := LogDB.Where("request_at < ?", timestamp).Delete(&Log{})
+	return result.RowsAffected, result.Error
+}
+
+func DeleteGroupLogs(groupID string) (int64, error) {
+	if groupID == "" {
+		return 0, errors.New("group is required")
 	}
-	if code != 0 {
-		tx = tx.Where("code = ?", code)
+	result := LogDB.Where("group_id = ?", groupID).Delete(&Log{})
+	return result.RowsAffected, result.Error
+}
+
+type ChartData struct {
+	Timestamp      int64   `json:"timestamp"`
+	RequestCount   int64   `json:"request_count"`
+	UsedAmount     float64 `json:"used_amount"`
+	ExceptionCount int64   `json:"exception_count"`
+}
+
+type DashboardResponse struct {
+	ChartData      []*ChartData `json:"chart_data"`
+	Models         []string     `json:"models"`
+	TotalCount     int64        `json:"total_count"`
+	ExceptionCount int64        `json:"exception_count"`
+	UsedAmount     float64      `json:"used_amount"`
+	RPM            int64        `json:"rpm"`
+	TPM            int64        `json:"tpm"`
+}
+
+type GroupDashboardResponse struct {
+	DashboardResponse
+	TokenNames []string `json:"token_names"`
+}
+
+func getTimeSpanFormat(timeSpan time.Duration) string {
+	switch {
+	case common.UsingMySQL:
+		return fmt.Sprintf("UNIX_TIMESTAMP(DATE_FORMAT(request_at, '%%Y-%%m-%%d %%H:%%i:00')) DIV %d * %d", int64(timeSpan.Seconds()), int64(timeSpan.Seconds()))
+	case common.UsingPostgreSQL:
+		return fmt.Sprintf("FLOOR(EXTRACT(EPOCH FROM date_trunc('minute', request_at)) / %d) * %d", int64(timeSpan.Seconds()), int64(timeSpan.Seconds()))
+	case common.UsingSQLite:
+		return fmt.Sprintf("CAST(STRFTIME('%%s', STRFTIME('%%Y-%%m-%%d %%H:%%M:00', request_at)) AS INTEGER) / %d * %d", int64(timeSpan.Seconds()), int64(timeSpan.Seconds()))
+	default:
+		return ""
 	}
-	if mode != 0 {
-		tx = tx.Where("mode = ?", mode)
+}
+
+func getChartData(group string, start, end time.Time, tokenName, modelName string, timeSpan time.Duration) ([]*ChartData, error) {
+	var chartData []*ChartData
+
+	timeSpanFormat := getTimeSpanFormat(timeSpan)
+	if timeSpanFormat == "" {
+		return nil, errors.New("unsupported time format")
 	}
-	if endpoint != "" {
-		tx = tx.Where("endpoint = ?", endpoint)
+
+	query := LogDB.Table("logs").
+		Select(timeSpanFormat + " as timestamp, count(*) as request_count, sum(used_amount) as used_amount, sum(case when code != 200 then 1 else 0 end) as exception_count").
+		Group("timestamp").
+		Order("timestamp ASC")
+
+	if group != "" {
+		query = query.Where("group_id = ?", group)
 	}
-	if requestID != "" {
-		tx = tx.Where("request_id = ?", requestID)
+	if !start.IsZero() {
+		query = query.Where("request_at >= ?", start)
 	}
-	if tokenID != 0 {
-		tx = tx.Where("token_id = ?", tokenID)
+	if !end.IsZero() {
+		query = query.Where("request_at <= ?", end)
 	}
-	if content != "" {
-		tx = tx.Where("content = ?", content)
+
+	if tokenName != "" {
+		query = query.Where("token_name = ?", tokenName)
 	}
-	if channelID != 0 {
-		tx = tx.Where("channel_id = ?", channelID)
+	if modelName != "" {
+		query = query.Where("model = ?", modelName)
 	}
 
-	// Handle keyword search for zero value fields
-	if keyword != "" {
-		var conditions []string
-		var values []interface{}
+	err := query.Scan(&chartData).Error
 
-		if num := helper.String2Int(keyword); num != 0 {
-			if code == 0 {
-				conditions = append(conditions, "code = ?")
-				values = append(values, num)
-			}
-			if channelID == 0 {
-				conditions = append(conditions, "channel_id = ?")
-				values = append(values, num)
-			}
-			if mode != 0 {
-				conditions = append(conditions, "mode = ?")
-				values = append(values, num)
-			}
-		}
-		if endpoint == "" {
-			if common.UsingPostgreSQL {
-				conditions = append(conditions, "endpoint ILIKE ?")
-			} else {
-				conditions = append(conditions, "endpoint LIKE ?")
-			}
-			values = append(values, "%"+keyword+"%")
-		}
-		if requestID == "" {
-			if common.UsingPostgreSQL {
-				conditions = append(conditions, "request_id ILIKE ?")
-			} else {
-				conditions = append(conditions, "request_id LIKE ?")
-			}
-			values = append(values, "%"+keyword+"%")
-		}
-		if tokenName == "" {
-			if common.UsingPostgreSQL {
-				conditions = append(conditions, "token_name ILIKE ?")
-			} else {
-				conditions = append(conditions, "token_name LIKE ?")
-			}
-			values = append(values, "%"+keyword+"%")
-		}
-		if modelName == "" {
-			if common.UsingPostgreSQL {
-				conditions = append(conditions, "model ILIKE ?")
-			} else {
-				conditions = append(conditions, "model LIKE ?")
-			}
-			values = append(values, "%"+keyword+"%")
-		}
-		if content == "" {
-			if common.UsingPostgreSQL {
-				conditions = append(conditions, "content ILIKE ?")
-			} else {
-				conditions = append(conditions, "content LIKE ?")
-			}
-			values = append(values, "%"+keyword+"%")
-		}
+	return chartData, err
+}
 
-		if len(conditions) > 0 {
-			tx = tx.Where(fmt.Sprintf("(%s)", strings.Join(conditions, " OR ")), values...)
-		}
+func getLogDistinctValues[T cmp.Ordered](field string, group string, start, end time.Time) ([]T, error) {
+	var values []T
+	query := LogDB.
+		Model(&Log{}).
+		Distinct(field)
+
+	if group != "" {
+		query = query.Where("group_id = ?", group)
 	}
 
-	err = tx.Count(&total).Error
-	if err != nil {
-		return nil, 0, err
+	if !start.IsZero() {
+		query = query.Where("request_at >= ?", start)
 	}
-	if total <= 0 {
-		return nil, 0, nil
+	if !end.IsZero() {
+		query = query.Where("request_at <= ?", end)
+	}
+
+	err := query.Pluck(field, &values).Error
+	if err != nil {
+		return nil, err
 	}
+	slices.Sort(values)
+	return values, nil
+}
 
-	page--
-	if page < 0 {
-		page = 0
+func sumTotalCount(chartData []*ChartData) int64 {
+	var count int64
+	for _, data := range chartData {
+		count += data.RequestCount
 	}
+	return count
+}
 
-	err = tx.
-		Preload("RequestDetail").
-		Order(getLogOrder(order)).
-		Limit(perPage).
-		Offset(page * perPage).
-		Find(&logs).Error
-	return logs, total, err
+func sumExceptionCount(chartData []*ChartData) int64 {
+	var count int64
+	for _, data := range chartData {
+		count += data.ExceptionCount
+	}
+	return count
 }
 
-func SumUsedQuota(startTimestamp time.Time, endTimestamp time.Time, modelName string, group string, tokenName string, channel int, endpoint string) (quota int64) {
-	ifnull := "ifnull"
-	if common.UsingPostgreSQL {
-		ifnull = "COALESCE"
+func sumUsedAmount(chartData []*ChartData) float64 {
+	var amount decimal.Decimal
+	for _, data := range chartData {
+		amount = amount.Add(decimal.NewFromFloat(data.UsedAmount))
 	}
-	tx := LogDB.Table("logs").Select(ifnull + "(sum(quota),0)")
+	return amount.InexactFloat64()
+}
+
+func getRPM(group string, end time.Time, tokenName, modelName string) (int64, error) {
+	query := LogDB.Model(&Log{}).
+		Where("request_at >= ? AND request_at <= ?", end.Add(-time.Minute), end)
+
 	if group != "" {
-		tx = tx.Where("group_id = ?", group)
+		query = query.Where("group_id = ?", group)
 	}
 	if tokenName != "" {
-		tx = tx.Where("token_name = ?", tokenName)
-	}
-	if !startTimestamp.IsZero() {
-		tx = tx.Where("request_at >= ?", startTimestamp)
-	}
-	if !endTimestamp.IsZero() {
-		tx = tx.Where("request_at <= ?", endTimestamp)
+		query = query.Where("token_name = ?", tokenName)
 	}
 	if modelName != "" {
-		tx = tx.Where("model = ?", modelName)
-	}
-	if channel != 0 {
-		tx = tx.Where("channel_id = ?", channel)
-	}
-	if endpoint != "" {
-		tx = tx.Where("endpoint = ?", endpoint)
+		query = query.Where("model = ?", modelName)
 	}
-	tx.Scan(&quota)
-	return quota
+
+	var count int64
+	err := query.Count(&count).Error
+	return count, err
 }
 
-func SumUsedToken(startTimestamp time.Time, endTimestamp time.Time, modelName string, group string, tokenName string, endpoint string) (token int) {
-	ifnull := "ifnull"
-	if common.UsingPostgreSQL {
-		ifnull = "COALESCE"
-	}
-	tx := LogDB.Table("logs").Select(fmt.Sprintf("%s(sum(prompt_tokens),0) + %s(sum(completion_tokens),0)", ifnull, ifnull))
+func getTPM(group string, end time.Time, tokenName, modelName string) (int64, error) {
+	query := LogDB.Model(&Log{}).
+		Select("COALESCE(SUM(total_tokens), 0)").
+		Where("request_at >= ? AND request_at <= ?", end.Add(-time.Minute), end)
+
 	if group != "" {
-		tx = tx.Where("group_id = ?", group)
+		query = query.Where("group_id = ?", group)
 	}
 	if tokenName != "" {
-		tx = tx.Where("token_name = ?", tokenName)
-	}
-	if !startTimestamp.IsZero() {
-		tx = tx.Where("request_at >= ?", startTimestamp)
-	}
-	if !endTimestamp.IsZero() {
-		tx = tx.Where("request_at <= ?", endTimestamp)
+		query = query.Where("token_name = ?", tokenName)
 	}
 	if modelName != "" {
-		tx = tx.Where("model = ?", modelName)
-	}
-	if endpoint != "" {
-		tx = tx.Where("endpoint = ?", endpoint)
+		query = query.Where("model = ?", modelName)
 	}
-	tx.Scan(&token)
-	return token
-}
 
-func DeleteOldLog(timestamp time.Time) (int64, error) {
-	result := LogDB.Where("request_at < ?", timestamp).Delete(&Log{})
-	return result.RowsAffected, result.Error
+	var tpm int64
+	err := query.Scan(&tpm).Error
+	return tpm, err
 }
 
-func DeleteGroupLogs(groupID string) (int64, error) {
-	result := LogDB.Where("group_id = ?", groupID).Delete(&Log{})
-	return result.RowsAffected, result.Error
-}
+func GetDashboardData(start, end time.Time, modelName string, timeSpan time.Duration) (*DashboardResponse, error) {
+	if end.IsZero() {
+		end = time.Now()
+	} else if end.Before(start) {
+		return nil, errors.New("end time is before start time")
+	}
+
+	var (
+		chartData []*ChartData
+		models    []string
+		rpm       int64
+		tpm       int64
+	)
+
+	g := new(errgroup.Group)
+
+	g.Go(func() error {
+		var err error
+		chartData, err = getChartData("", start, end, "", modelName, timeSpan)
+		return err
+	})
+
+	g.Go(func() error {
+		var err error
+		models, err = getLogDistinctValues[string]("model", "", start, end)
+		return err
+	})
+
+	g.Go(func() error {
+		var err error
+		rpm, err = getRPM("", end, "", modelName)
+		return err
+	})
+
+	g.Go(func() error {
+		var err error
+		tpm, err = getTPM("", end, "", modelName)
+		return err
+	})
+
+	if err := g.Wait(); err != nil {
+		return nil, err
+	}
 
-type LogStatistic struct {
-	Day              string `gorm:"column:day"`
-	Model            string `gorm:"column:model"`
-	RequestCount     int    `gorm:"column:request_count"`
-	PromptTokens     int    `gorm:"column:prompt_tokens"`
-	CompletionTokens int    `gorm:"column:completion_tokens"`
+	totalCount := sumTotalCount(chartData)
+	exceptionCount := sumExceptionCount(chartData)
+	usedAmount := sumUsedAmount(chartData)
+
+	return &DashboardResponse{
+		ChartData:      chartData,
+		Models:         models,
+		TotalCount:     totalCount,
+		ExceptionCount: exceptionCount,
+		UsedAmount:     usedAmount,
+		RPM:            rpm,
+		TPM:            tpm,
+	}, nil
 }
 
-func SearchLogsByDayAndModel(group string, start time.Time, end time.Time) (logStatistics []*LogStatistic, err error) {
-	groupSelect := "DATE_FORMAT(FROM_UNIXTIME(created_at), '%Y-%m-%d') as day"
+func GetGroupDashboardData(group string, start, end time.Time, tokenName string, modelName string, timeSpan time.Duration) (*GroupDashboardResponse, error) {
+	if group == "" {
+		return nil, errors.New("group is required")
+	}
+
+	if end.IsZero() {
+		end = time.Now()
+	} else if end.Before(start) {
+		return nil, errors.New("end time is before start time")
+	}
+
+	var (
+		chartData  []*ChartData
+		tokenNames []string
+		models     []string
+		rpm        int64
+		tpm        int64
+	)
+
+	g := new(errgroup.Group)
+
+	g.Go(func() error {
+		var err error
+		chartData, err = getChartData(group, start, end, tokenName, modelName, timeSpan)
+		return err
+	})
+
+	g.Go(func() error {
+		var err error
+		tokenNames, err = getLogDistinctValues[string]("token_name", group, start, end)
+		return err
+	})
+
+	g.Go(func() error {
+		var err error
+		models, err = getLogDistinctValues[string]("model", group, start, end)
+		return err
+	})
+
+	g.Go(func() error {
+		var err error
+		rpm, err = getRPM(group, end, tokenName, modelName)
+		return err
+	})
 
-	if common.UsingPostgreSQL {
-		groupSelect = "TO_CHAR(date_trunc('day', to_timestamp(created_at)), 'YYYY-MM-DD') as day"
+	g.Go(func() error {
+		var err error
+		tpm, err = getTPM(group, end, tokenName, modelName)
+		return err
+	})
+
+	if err := g.Wait(); err != nil {
+		return nil, err
 	}
 
-	if common.UsingSQLite {
-		groupSelect = "strftime('%Y-%m-%d', datetime(created_at, 'unixepoch')) as day"
+	totalCount := sumTotalCount(chartData)
+	exceptionCount := sumExceptionCount(chartData)
+	usedAmount := sumUsedAmount(chartData)
+
+	return &GroupDashboardResponse{
+		DashboardResponse: DashboardResponse{
+			ChartData:      chartData,
+			Models:         models,
+			TotalCount:     totalCount,
+			ExceptionCount: exceptionCount,
+			UsedAmount:     usedAmount,
+			RPM:            rpm,
+			TPM:            tpm,
+		},
+		TokenNames: tokenNames,
+	}, nil
+}
+
+func GetGroupLastRequestTime(group string) (time.Time, error) {
+	if group == "" {
+		return time.Time{}, errors.New("group is required")
 	}
+	var log Log
+	err := LogDB.Model(&Log{}).Where("group_id = ?", group).Order("request_at desc").First(&log).Error
+	return log.RequestAt, err
+}
 
-	err = LogDB.Raw(`
-		SELECT `+groupSelect+`,
-		model, count(1) as request_count,
-		sum(prompt_tokens) as prompt_tokens,
-		sum(completion_tokens) as completion_tokens
-		FROM logs
-		WHERE group_id = ?
-		AND created_at BETWEEN ? AND ?
-		GROUP BY day, model
-		ORDER BY day, model
-	`, group, start, end).Scan(&logStatistics).Error
+func GetTokenLastRequestTime(id int) (time.Time, error) {
+	var log Log
+	tx := LogDB.Model(&Log{})
+	err := tx.Where("token_id = ?", id).Order("request_at desc").First(&log).Error
+	return log.RequestAt, err
+}
 
-	return logStatistics, err
+func GetGroupModelTPM(group string, model string) (int64, error) {
+	end := time.Now()
+	start := end.Add(-time.Minute)
+	var tpm int64
+	err := LogDB.
+		Model(&Log{}).
+		Where("group_id = ? AND request_at >= ? AND request_at <= ? AND model = ?", group, start, end, model).
+		Select("COALESCE(SUM(total_tokens), 0)").
+		Scan(&tpm).Error
+	return tpm, err
 }
diff --git a/service/aiproxy/model/main.go b/service/aiproxy/model/main.go
index 50c54c3cfdfa..6d5cbb109fd7 100644
--- a/service/aiproxy/model/main.go
+++ b/service/aiproxy/model/main.go
@@ -3,6 +3,7 @@ package model
 import (
 	"fmt"
 	"os"
+	"path/filepath"
 	"strings"
 	"time"
 
@@ -88,8 +89,15 @@ func openMySQL(dsn string) (*gorm.DB, error) {
 }
 
 func openSQLite() (*gorm.DB, error) {
-	log.Info("SQL_DSN not set, using SQLite as database")
+	log.Info("SQL_DSN not set, using SQLite as database: ", common.SQLitePath)
 	common.UsingSQLite = true
+
+	baseDir := filepath.Dir(common.SQLitePath)
+	if err := os.MkdirAll(baseDir, 0o755); err != nil {
+		log.Fatal("failed to create base directory: " + err.Error())
+		return nil, err
+	}
+
 	dsn := fmt.Sprintf("%s?_busy_timeout=%d", common.SQLitePath, common.SQLiteBusyTimeout)
 	return gorm.Open(sqlite.Open(dsn), &gorm.Config{
 		PrepareStmt:                              true, // precompile SQL
@@ -194,9 +202,9 @@ func setDBConns(db *gorm.DB) {
 		return
 	}
 
-	sqlDB.SetMaxIdleConns(env.Int("SQL_MAX_IDLE_CONNS", 100))
-	sqlDB.SetMaxOpenConns(env.Int("SQL_MAX_OPEN_CONNS", 1000))
-	sqlDB.SetConnMaxLifetime(time.Second * time.Duration(env.Int("SQL_MAX_LIFETIME", 60)))
+	sqlDB.SetMaxIdleConns(int(env.Int64("SQL_MAX_IDLE_CONNS", 100)))
+	sqlDB.SetMaxOpenConns(int(env.Int64("SQL_MAX_OPEN_CONNS", 1000)))
+	sqlDB.SetConnMaxLifetime(time.Second * time.Duration(env.Int64("SQL_MAX_LIFETIME", 60)))
 }
 
 func closeDB(db *gorm.DB) error {
diff --git a/service/aiproxy/model/modelconfig.go b/service/aiproxy/model/modelconfig.go
index df8c92528a60..5727e17f2ab4 100644
--- a/service/aiproxy/model/modelconfig.go
+++ b/service/aiproxy/model/modelconfig.go
@@ -10,52 +10,9 @@ import (
 	"gorm.io/gorm"
 )
 
-//nolint:revive
-type ModelConfigKey string
-
-const (
-	ModelConfigMaxContextTokensKey ModelConfigKey = "max_context_tokens"
-	ModelConfigMaxInputTokensKey   ModelConfigKey = "max_input_tokens"
-	ModelConfigMaxOutputTokensKey  ModelConfigKey = "max_output_tokens"
-	ModelConfigToolChoiceKey       ModelConfigKey = "tool_choice"
-	ModelConfigFunctionCallingKey  ModelConfigKey = "function_calling"
-	ModelConfigSupportFormatsKey   ModelConfigKey = "support_formats"
-	ModelConfigSupportVoicesKey    ModelConfigKey = "support_voices"
-)
-
-//nolint:revive
-type ModelOwner string
-
 const (
-	ModelOwnerOpenAI      ModelOwner = "openai"
-	ModelOwnerAlibaba     ModelOwner = "alibaba"
-	ModelOwnerTencent     ModelOwner = "tencent"
-	ModelOwnerXunfei      ModelOwner = "xunfei"
-	ModelOwnerDeepSeek    ModelOwner = "deepseek"
-	ModelOwnerMoonshot    ModelOwner = "moonshot"
-	ModelOwnerMiniMax     ModelOwner = "minimax"
-	ModelOwnerBaidu       ModelOwner = "baidu"
-	ModelOwnerGoogle      ModelOwner = "google"
-	ModelOwnerBAAI        ModelOwner = "baai"
-	ModelOwnerFunAudioLLM ModelOwner = "funaudiollm"
-	ModelOwnerDoubao      ModelOwner = "doubao"
-	ModelOwnerFishAudio   ModelOwner = "fishaudio"
-	ModelOwnerChatGLM     ModelOwner = "chatglm"
-	ModelOwnerStabilityAI ModelOwner = "stabilityai"
-	ModelOwnerNetease     ModelOwner = "netease"
-	ModelOwnerAI360       ModelOwner = "ai360"
-	ModelOwnerAnthropic   ModelOwner = "anthropic"
-	ModelOwnerMeta        ModelOwner = "meta"
-	ModelOwnerBaichuan    ModelOwner = "baichuan"
-	ModelOwnerMistral     ModelOwner = "mistral"
-	ModelOwnerOpenChat    ModelOwner = "openchat"
-	ModelOwnerMicrosoft   ModelOwner = "microsoft"
-	ModelOwnerDefog       ModelOwner = "defog"
-	ModelOwnerNexusFlow   ModelOwner = "nexusflow"
-	ModelOwnerCohere      ModelOwner = "cohere"
-	ModelOwnerHuggingFace ModelOwner = "huggingface"
-	ModelOwnerLingyiWanwu ModelOwner = "lingyiwanwu"
-	ModelOwnerStepFun     ModelOwner = "stepfun"
+	// /1K tokens
+	PriceUnit = 1000
 )
 
 //nolint:revive
@@ -63,14 +20,21 @@ type ModelConfig struct {
 	CreatedAt         time.Time              `gorm:"index;autoCreateTime"          json:"created_at"`
 	UpdatedAt         time.Time              `gorm:"index;autoUpdateTime"          json:"updated_at"`
 	Config            map[ModelConfigKey]any `gorm:"serializer:fastjson;type:text" json:"config,omitempty"`
-	ImagePrices       map[string]float64     `gorm:"serializer:fastjson"           json:"image_prices"`
+	ImagePrices       map[string]float64     `gorm:"serializer:fastjson"           json:"image_prices,omitempty"`
 	Model             string                 `gorm:"primaryKey"                    json:"model"`
 	Owner             ModelOwner             `gorm:"type:varchar(255);index"       json:"owner"`
-	ImageMaxBatchSize int                    `json:"image_batch_size"`
-	// relaymode/define.go
-	Type        int     `json:"type"`
-	InputPrice  float64 `json:"input_price"`
-	OutputPrice float64 `json:"output_price"`
+	ImageMaxBatchSize int                    `json:"image_batch_size,omitempty"`
+	Type              int                    `json:"type"` // relaymode/define.go
+	InputPrice        float64                `json:"input_price,omitempty"`
+	OutputPrice       float64                `json:"output_price,omitempty"`
+	RPM               int64                  `json:"rpm,omitempty"`
+	TPM               int64                  `json:"tpm,omitempty"`
+}
+
+func NewDefaultModelConfig(model string) *ModelConfig {
+	return &ModelConfig{
+		Model: model,
+	}
 }
 
 func (c *ModelConfig) MarshalJSON() ([]byte, error) {
@@ -86,6 +50,34 @@ func (c *ModelConfig) MarshalJSON() ([]byte, error) {
 	})
 }
 
+func (c *ModelConfig) MaxContextTokens() (int, bool) {
+	return GetModelConfigInt(c.Config, ModelConfigMaxContextTokensKey)
+}
+
+func (c *ModelConfig) MaxInputTokens() (int, bool) {
+	return GetModelConfigInt(c.Config, ModelConfigMaxInputTokensKey)
+}
+
+func (c *ModelConfig) MaxOutputTokens() (int, bool) {
+	return GetModelConfigInt(c.Config, ModelConfigMaxOutputTokensKey)
+}
+
+func (c *ModelConfig) SupportVision() (bool, bool) {
+	return GetModelConfigBool(c.Config, ModelConfigVisionKey)
+}
+
+func (c *ModelConfig) SupportVoices() ([]string, bool) {
+	return GetModelConfigStringSlice(c.Config, ModelConfigSupportVoicesKey)
+}
+
+func (c *ModelConfig) SupportToolChoice() (bool, bool) {
+	return GetModelConfigBool(c.Config, ModelConfigToolChoiceKey)
+}
+
+func (c *ModelConfig) SupportFormats() ([]string, bool) {
+	return GetModelConfigStringSlice(c.Config, ModelConfigSupportFormatsKey)
+}
+
 func GetModelConfigs(startIdx int, num int, model string) (configs []*ModelConfig, total int64, err error) {
 	tx := DB.Model(&ModelConfig{})
 	if model != "" {
diff --git a/service/aiproxy/model/option.go b/service/aiproxy/model/option.go
index 8be3fcb6854b..f74fa3ea019f 100644
--- a/service/aiproxy/model/option.go
+++ b/service/aiproxy/model/option.go
@@ -11,7 +11,6 @@ import (
 	"time"
 
 	json "github.com/json-iterator/go"
-
 	"github.com/labring/sealos/service/aiproxy/common/config"
 	"github.com/labring/sealos/service/aiproxy/common/conv"
 	log "github.com/sirupsen/logrus"
@@ -24,41 +23,78 @@ type Option struct {
 
 func GetAllOption() ([]*Option, error) {
 	var options []*Option
-	err := DB.Find(&options).Error
+	err := DB.Where("key IN (?)", optionKeys).Find(&options).Error
 	return options, err
 }
 
-func InitOptionMap() error {
-	config.OptionMapRWMutex.Lock()
-	config.OptionMap = make(map[string]string)
-	config.OptionMap["LogDetailStorageHours"] = strconv.FormatInt(config.GetLogDetailStorageHours(), 10)
-	config.OptionMap["DisableServe"] = strconv.FormatBool(config.GetDisableServe())
-	config.OptionMap["AutomaticDisableChannelEnabled"] = strconv.FormatBool(config.GetAutomaticDisableChannelEnabled())
-	config.OptionMap["AutomaticEnableChannelWhenTestSucceedEnabled"] = strconv.FormatBool(config.GetAutomaticEnableChannelWhenTestSucceedEnabled())
-	config.OptionMap["ApproximateTokenEnabled"] = strconv.FormatBool(config.GetApproximateTokenEnabled())
-	config.OptionMap["BillingEnabled"] = strconv.FormatBool(config.GetBillingEnabled())
-	config.OptionMap["RetryTimes"] = strconv.FormatInt(config.GetRetryTimes(), 10)
-	config.OptionMap["GlobalApiRateLimitNum"] = strconv.FormatInt(config.GetGlobalAPIRateLimitNum(), 10)
-	config.OptionMap["DefaultGroupQPM"] = strconv.FormatInt(config.GetDefaultGroupQPM(), 10)
-	defaultChannelModelsJSON, _ := json.Marshal(config.GetDefaultChannelModels())
-	config.OptionMap["DefaultChannelModels"] = conv.BytesToString(defaultChannelModelsJSON)
-	defaultChannelModelMappingJSON, _ := json.Marshal(config.GetDefaultChannelModelMapping())
-	config.OptionMap["DefaultChannelModelMapping"] = conv.BytesToString(defaultChannelModelMappingJSON)
-	config.OptionMap["GeminiSafetySetting"] = config.GetGeminiSafetySetting()
-	config.OptionMap["GeminiVersion"] = config.GetGeminiVersion()
-	config.OptionMap["GroupMaxTokenNum"] = strconv.FormatInt(int64(config.GetGroupMaxTokenNum()), 10)
-	config.OptionMapRWMutex.Unlock()
-	err := loadOptionsFromDatabase(true)
+func GetOption(key string) (*Option, error) {
+	if !slices.Contains(optionKeys, key) {
+		return nil, ErrUnknownOptionKey
+	}
+	var option Option
+	err := DB.Where("key = ?", key).First(&option).Error
+	return &option, err
+}
+
+var (
+	optionMap = make(map[string]string)
+	// allowed option keys
+	optionKeys []string
+)
+
+func InitOption2DB() error {
+	err := initOptionMap()
+	if err != nil {
+		return err
+	}
+
+	err = loadOptionsFromDatabase(true)
 	if err != nil {
 		return err
 	}
 	return storeOptionMap()
 }
 
+func initOptionMap() error {
+	optionMap["LogDetailStorageHours"] = strconv.FormatInt(config.GetLogDetailStorageHours(), 10)
+	optionMap["DisableServe"] = strconv.FormatBool(config.GetDisableServe())
+	optionMap["BillingEnabled"] = strconv.FormatBool(config.GetBillingEnabled())
+	optionMap["RetryTimes"] = strconv.FormatInt(config.GetRetryTimes(), 10)
+	optionMap["ModelErrorAutoBanRate"] = strconv.FormatFloat(config.GetModelErrorAutoBanRate(), 'f', -1, 64)
+	optionMap["EnableModelErrorAutoBan"] = strconv.FormatBool(config.GetEnableModelErrorAutoBan())
+	timeoutWithModelTypeJSON, err := json.Marshal(config.GetTimeoutWithModelType())
+	if err != nil {
+		return err
+	}
+	optionMap["TimeoutWithModelType"] = conv.BytesToString(timeoutWithModelTypeJSON)
+	defaultChannelModelsJSON, err := json.Marshal(config.GetDefaultChannelModels())
+	if err != nil {
+		return err
+	}
+	optionMap["DefaultChannelModels"] = conv.BytesToString(defaultChannelModelsJSON)
+	defaultChannelModelMappingJSON, err := json.Marshal(config.GetDefaultChannelModelMapping())
+	if err != nil {
+		return err
+	}
+	optionMap["DefaultChannelModelMapping"] = conv.BytesToString(defaultChannelModelMappingJSON)
+	optionMap["GeminiSafetySetting"] = config.GetGeminiSafetySetting()
+	optionMap["GroupMaxTokenNum"] = strconv.FormatInt(config.GetGroupMaxTokenNum(), 10)
+	groupConsumeLevelRatioJSON, err := json.Marshal(config.GetGroupConsumeLevelRatio())
+	if err != nil {
+		return err
+	}
+	optionMap["GroupConsumeLevelRatio"] = conv.BytesToString(groupConsumeLevelRatioJSON)
+	optionMap["InternalToken"] = config.GetInternalToken()
+
+	optionKeys = make([]string, 0, len(optionMap))
+	for key := range optionMap {
+		optionKeys = append(optionKeys, key)
+	}
+	return nil
+}
+
 func storeOptionMap() error {
-	config.OptionMapRWMutex.Lock()
-	defer config.OptionMapRWMutex.Unlock()
-	for key, value := range config.OptionMap {
+	for key, value := range optionMap {
 		err := saveOption(key, value)
 		if err != nil {
 			return err
@@ -73,9 +109,18 @@ func loadOptionsFromDatabase(isInit bool) error {
 		return err
 	}
 	for _, option := range options {
-		err := updateOptionMap(option.Key, option.Value, isInit)
-		if err != nil && !errors.Is(err, ErrUnknownOptionKey) {
-			log.Errorf("failed to update option: %s, value: %s, error: %s", option.Key, option.Value, err.Error())
+		err := updateOption(option.Key, option.Value, isInit)
+		if err != nil {
+			if !errors.Is(err, ErrUnknownOptionKey) {
+				return fmt.Errorf("failed to update option: %s, value: %s, error: %w", option.Key, option.Value, err)
+			}
+			if isInit {
+				log.Warnf("unknown option: %s, value: %s", option.Key, option.Value)
+			}
+			continue
+		}
+		if isInit {
+			delete(optionMap, option.Key)
 		}
 	}
 	return nil
@@ -91,7 +136,7 @@ func SyncOptions(ctx context.Context, wg *sync.WaitGroup, frequency time.Duratio
 		case <-ctx.Done():
 			return
 		case <-ticker.C:
-			if err := loadOptionsFromDatabase(true); err != nil {
+			if err := loadOptionsFromDatabase(false); err != nil {
 				log.Error("failed to sync options from database: " + err.Error())
 			}
 		}
@@ -108,7 +153,7 @@ func saveOption(key string, value string) error {
 }
 
 func UpdateOption(key string, value string) error {
-	err := updateOptionMap(key, value, false)
+	err := updateOption(key, value, false)
 	if err != nil {
 		return err
 	}
@@ -136,25 +181,22 @@ func isTrue(value string) bool {
 	return result
 }
 
-func updateOptionMap(key string, value string, isInit bool) (err error) {
-	config.OptionMapRWMutex.Lock()
-	defer config.OptionMapRWMutex.Unlock()
-	config.OptionMap[key] = value
+//nolint:gocyclo
+func updateOption(key string, value string, isInit bool) (err error) {
 	switch key {
+	case "InternalToken":
+		config.SetInternalToken(value)
 	case "LogDetailStorageHours":
 		logDetailStorageHours, err := strconv.ParseInt(value, 10, 64)
 		if err != nil {
 			return err
 		}
+		if logDetailStorageHours < 0 {
+			return errors.New("log detail storage hours must be greater than 0")
+		}
 		config.SetLogDetailStorageHours(logDetailStorageHours)
 	case "DisableServe":
 		config.SetDisableServe(isTrue(value))
-	case "AutomaticDisableChannelEnabled":
-		config.SetAutomaticDisableChannelEnabled(isTrue(value))
-	case "AutomaticEnableChannelWhenTestSucceedEnabled":
-		config.SetAutomaticEnableChannelWhenTestSucceedEnabled(isTrue(value))
-	case "ApproximateTokenEnabled":
-		config.SetApproximateTokenEnabled(isTrue(value))
 	case "BillingEnabled":
 		config.SetBillingEnabled(isTrue(value))
 	case "GroupMaxTokenNum":
@@ -162,23 +204,12 @@ func updateOptionMap(key string, value string, isInit bool) (err error) {
 		if err != nil {
 			return err
 		}
-		config.SetGroupMaxTokenNum(int32(groupMaxTokenNum))
+		if groupMaxTokenNum < 0 {
+			return errors.New("group max token num must be greater than 0")
+		}
+		config.SetGroupMaxTokenNum(groupMaxTokenNum)
 	case "GeminiSafetySetting":
 		config.SetGeminiSafetySetting(value)
-	case "GeminiVersion":
-		config.SetGeminiVersion(value)
-	case "GlobalApiRateLimitNum":
-		globalAPIRateLimitNum, err := strconv.ParseInt(value, 10, 64)
-		if err != nil {
-			return err
-		}
-		config.SetGlobalAPIRateLimitNum(globalAPIRateLimitNum)
-	case "DefaultGroupQPM":
-		defaultGroupQPM, err := strconv.ParseInt(value, 10, 64)
-		if err != nil {
-			return err
-		}
-		config.SetDefaultGroupQPM(defaultGroupQPM)
 	case "DefaultChannelModels":
 		var newModels map[int][]string
 		err := json.Unmarshal(conv.StringToBytes(value), &newModels)
@@ -196,7 +227,7 @@ func updateOptionMap(key string, value string, isInit bool) (err error) {
 		for model := range allModelsMap {
 			allModels = append(allModels, model)
 		}
-		foundModels, missingModels, err := CheckModelConfig(allModels)
+		foundModels, missingModels, err := GetModelConfigWithModels(allModels)
 		if err != nil {
 			return err
 		}
@@ -229,7 +260,48 @@ func updateOptionMap(key string, value string, isInit bool) (err error) {
 		if err != nil {
 			return err
 		}
+		if retryTimes < 0 {
+			return errors.New("retry times must be greater than 0")
+		}
 		config.SetRetryTimes(retryTimes)
+	case "EnableModelErrorAutoBan":
+		config.SetEnableModelErrorAutoBan(isTrue(value))
+	case "ModelErrorAutoBanRate":
+		modelErrorAutoBanRate, err := strconv.ParseFloat(value, 64)
+		if err != nil {
+			return err
+		}
+		if modelErrorAutoBanRate < 0 || modelErrorAutoBanRate > 1 {
+			return errors.New("model error auto ban rate must be between 0 and 1")
+		}
+		config.SetModelErrorAutoBanRate(modelErrorAutoBanRate)
+	case "TimeoutWithModelType":
+		var newTimeoutWithModelType map[int]int64
+		err := json.Unmarshal(conv.StringToBytes(value), &newTimeoutWithModelType)
+		if err != nil {
+			return err
+		}
+		for _, v := range newTimeoutWithModelType {
+			if v < 0 {
+				return errors.New("timeout must be greater than 0")
+			}
+		}
+		config.SetTimeoutWithModelType(newTimeoutWithModelType)
+	case "GroupConsumeLevelRatio":
+		var newGroupRpmRatio map[float64]float64
+		err := json.Unmarshal(conv.StringToBytes(value), &newGroupRpmRatio)
+		if err != nil {
+			return err
+		}
+		for k, v := range newGroupRpmRatio {
+			if k < 0 {
+				return errors.New("consume level must be greater than 0")
+			}
+			if v < 0 {
+				return errors.New("rpm ratio must be greater than 0")
+			}
+		}
+		config.SetGroupConsumeLevelRatio(newGroupRpmRatio)
 	default:
 		return ErrUnknownOptionKey
 	}
diff --git a/service/aiproxy/model/owner.go b/service/aiproxy/model/owner.go
new file mode 100644
index 000000000000..4d562120bff2
--- /dev/null
+++ b/service/aiproxy/model/owner.go
@@ -0,0 +1,36 @@
+package model
+
+//nolint:revive
+type ModelOwner string
+
+const (
+	ModelOwnerOpenAI      ModelOwner = "openai"
+	ModelOwnerAlibaba     ModelOwner = "alibaba"
+	ModelOwnerTencent     ModelOwner = "tencent"
+	ModelOwnerXunfei      ModelOwner = "xunfei"
+	ModelOwnerDeepSeek    ModelOwner = "deepseek"
+	ModelOwnerMoonshot    ModelOwner = "moonshot"
+	ModelOwnerMiniMax     ModelOwner = "minimax"
+	ModelOwnerBaidu       ModelOwner = "baidu"
+	ModelOwnerGoogle      ModelOwner = "google"
+	ModelOwnerBAAI        ModelOwner = "baai"
+	ModelOwnerFunAudioLLM ModelOwner = "funaudiollm"
+	ModelOwnerDoubao      ModelOwner = "doubao"
+	ModelOwnerFishAudio   ModelOwner = "fishaudio"
+	ModelOwnerChatGLM     ModelOwner = "chatglm"
+	ModelOwnerStabilityAI ModelOwner = "stabilityai"
+	ModelOwnerNetease     ModelOwner = "netease"
+	ModelOwnerAI360       ModelOwner = "ai360"
+	ModelOwnerAnthropic   ModelOwner = "anthropic"
+	ModelOwnerMeta        ModelOwner = "meta"
+	ModelOwnerBaichuan    ModelOwner = "baichuan"
+	ModelOwnerMistral     ModelOwner = "mistral"
+	ModelOwnerOpenChat    ModelOwner = "openchat"
+	ModelOwnerMicrosoft   ModelOwner = "microsoft"
+	ModelOwnerDefog       ModelOwner = "defog"
+	ModelOwnerNexusFlow   ModelOwner = "nexusflow"
+	ModelOwnerCohere      ModelOwner = "cohere"
+	ModelOwnerHuggingFace ModelOwner = "huggingface"
+	ModelOwnerLingyiWanwu ModelOwner = "lingyiwanwu"
+	ModelOwnerStepFun     ModelOwner = "stepfun"
+)
diff --git a/service/aiproxy/model/token.go b/service/aiproxy/model/token.go
index aa8a915b8bf5..8ed234002e16 100644
--- a/service/aiproxy/model/token.go
+++ b/service/aiproxy/model/token.go
@@ -6,8 +6,6 @@ import (
 	"strings"
 	"time"
 
-	json "github.com/json-iterator/go"
-
 	"github.com/labring/sealos/service/aiproxy/common"
 	"github.com/labring/sealos/service/aiproxy/common/config"
 	log "github.com/sirupsen/logrus"
@@ -29,7 +27,6 @@ const (
 type Token struct {
 	CreatedAt    time.Time       `json:"created_at"`
 	ExpiredAt    time.Time       `json:"expired_at"`
-	AccessedAt   time.Time       `gorm:"index"                                     json:"accessed_at"`
 	Group        *Group          `gorm:"foreignKey:GroupID"                        json:"-"`
 	Key          string          `gorm:"type:char(48);uniqueIndex"                 json:"key"`
 	Name         EmptyNullString `gorm:"index;uniqueIndex:idx_group_name;not null" json:"name"`
@@ -43,26 +40,11 @@ type Token struct {
 	RequestCount int             `gorm:"index"                                     json:"request_count"`
 }
 
-func (t *Token) MarshalJSON() ([]byte, error) {
-	type Alias Token
-	return json.Marshal(&struct {
-		*Alias
-		CreatedAt  int64 `json:"created_at"`
-		AccessedAt int64 `json:"accessed_at"`
-		ExpiredAt  int64 `json:"expired_at"`
-	}{
-		Alias:      (*Alias)(t),
-		CreatedAt:  t.CreatedAt.UnixMilli(),
-		AccessedAt: t.AccessedAt.UnixMilli(),
-		ExpiredAt:  t.ExpiredAt.UnixMilli(),
-	})
-}
-
 //nolint:goconst
 func getTokenOrder(order string) string {
 	prefix, suffix, _ := strings.Cut(order, "-")
 	switch prefix {
-	case "name", "accessed_at", "expired_at", "group", "used_amount", "request_count", "id", "created_at":
+	case "name", "expired_at", "group", "used_amount", "request_count", "id", "created_at":
 		switch suffix {
 		case "asc":
 			return prefix + " asc"
@@ -91,7 +73,7 @@ func InsertToken(token *Token, autoCreateGroup bool) error {
 			if err != nil {
 				return err
 			}
-			if count >= int64(maxTokenNum) {
+			if count >= maxTokenNum {
 				return errors.New("group max token num reached")
 			}
 		}
@@ -106,34 +88,11 @@ func InsertToken(token *Token, autoCreateGroup bool) error {
 	return nil
 }
 
-func GetTokens(startIdx int, num int, order string, group string, status int) (tokens []*Token, total int64, err error) {
+func GetTokens(group string, startIdx int, num int, order string, status int) (tokens []*Token, total int64, err error) {
 	tx := DB.Model(&Token{})
-
 	if group != "" {
 		tx = tx.Where("group_id = ?", group)
 	}
-	if status != 0 {
-		tx = tx.Where("status = ?", status)
-	}
-
-	err = tx.Count(&total).Error
-	if err != nil {
-		return nil, 0, err
-	}
-
-	if total <= 0 {
-		return nil, 0, nil
-	}
-	err = tx.Order(getTokenOrder(order)).Limit(num).Offset(startIdx).Find(&tokens).Error
-	return tokens, total, err
-}
-
-func GetGroupTokens(group string, startIdx int, num int, order string, status int) (tokens []*Token, total int64, err error) {
-	if group == "" {
-		return nil, 0, errors.New("group is empty")
-	}
-
-	tx := DB.Model(&Token{}).Where("group_id = ?", group)
 
 	if status != 0 {
 		tx = tx.Where("status = ?", status)
@@ -151,7 +110,7 @@ func GetGroupTokens(group string, startIdx int, num int, order string, status in
 	return tokens, total, err
 }
 
-func SearchTokens(keyword string, startIdx int, num int, order string, status int, name string, key string, group string) (tokens []*Token, total int64, err error) {
+func SearchTokens(group string, keyword string, startIdx int, num int, order string, status int, name string, key string) (tokens []*Token, total int64, err error) {
 	tx := DB.Model(&Token{})
 	if group != "" {
 		tx = tx.Where("group_id = ?", group)
@@ -169,88 +128,31 @@ func SearchTokens(keyword string, startIdx int, num int, order string, status in
 	if keyword != "" {
 		var conditions []string
 		var values []interface{}
-		if status == 0 {
-			conditions = append(conditions, "status = ?")
-			values = append(values, 1)
-		}
+
 		if group == "" {
-			if common.UsingPostgreSQL {
-				conditions = append(conditions, "group_id ILIKE ?")
-			} else {
-				conditions = append(conditions, "group_id LIKE ?")
-			}
-			values = append(values, "%"+keyword+"%")
-		}
-		if name == "" {
-			if common.UsingPostgreSQL {
-				conditions = append(conditions, "name ILIKE ?")
-			} else {
-				conditions = append(conditions, "name LIKE ?")
-			}
-			values = append(values, "%"+keyword+"%")
-		}
-		if key == "" {
-			if common.UsingPostgreSQL {
-				conditions = append(conditions, "key ILIKE ?")
-			} else {
-				conditions = append(conditions, "key LIKE ?")
-			}
+			conditions = append(conditions, "group_id = ?")
 			values = append(values, keyword)
 		}
-		if len(conditions) > 0 {
-			tx = tx.Where(fmt.Sprintf("(%s)", strings.Join(conditions, " OR ")), values...)
-		}
-	}
-
-	err = tx.Count(&total).Error
-	if err != nil {
-		return nil, 0, err
-	}
-	if total <= 0 {
-		return nil, 0, nil
-	}
-	err = tx.Order(getTokenOrder(order)).Limit(num).Offset(startIdx).Find(&tokens).Error
-	return tokens, total, err
-}
-
-func SearchGroupTokens(group string, keyword string, startIdx int, num int, order string, status int, name string, key string) (tokens []*Token, total int64, err error) {
-	if group == "" {
-		return nil, 0, errors.New("group is empty")
-	}
-	tx := DB.Model(&Token{}).Where("group_id = ?", group)
-	if status != 0 {
-		tx = tx.Where("status = ?", status)
-	}
-	if name != "" {
-		tx = tx.Where("name = ?", name)
-	}
-	if key != "" {
-		tx = tx.Where("key = ?", key)
-	}
-
-	if keyword != "" {
-		var conditions []string
-		var values []interface{}
 		if status == 0 {
 			conditions = append(conditions, "status = ?")
-			values = append(values, 1)
+			values = append(values, String2Int(keyword))
 		}
 		if name == "" {
-			if common.UsingPostgreSQL {
-				conditions = append(conditions, "name ILIKE ?")
-			} else {
-				conditions = append(conditions, "name LIKE ?")
-			}
-			values = append(values, "%"+keyword+"%")
+			conditions = append(conditions, "name = ?")
+			values = append(values, keyword)
 		}
 		if key == "" {
-			if common.UsingPostgreSQL {
-				conditions = append(conditions, "key ILIKE ?")
-			} else {
-				conditions = append(conditions, "key LIKE ?")
-			}
+			conditions = append(conditions, "key = ?")
 			values = append(values, keyword)
 		}
+
+		if common.UsingPostgreSQL {
+			conditions = append(conditions, "models ILIKE ?")
+		} else {
+			conditions = append(conditions, "models LIKE ?")
+		}
+		values = append(values, "%"+keyword+"%")
+
 		if len(conditions) > 0 {
 			tx = tx.Where(fmt.Sprintf("(%s)", strings.Join(conditions, " OR ")), values...)
 		}
@@ -291,10 +193,10 @@ func ValidateAndGetToken(key string) (token *TokenCache, err error) {
 	}
 	token, err = CacheGetTokenByKey(key)
 	if err != nil {
-		log.Error("get token from cache failed: " + err.Error())
 		if errors.Is(err, gorm.ErrRecordNotFound) {
 			return nil, errors.New("invalid token")
 		}
+		log.Error("get token from cache failed: " + err.Error())
 		return nil, errors.New("token validation failed")
 	}
 	switch token.Status {
@@ -302,12 +204,14 @@ func ValidateAndGetToken(key string) (token *TokenCache, err error) {
 		return nil, fmt.Errorf("token (%s[%d]) quota is exhausted", token.Name, token.ID)
 	case TokenStatusExpired:
 		return nil, fmt.Errorf("token (%s[%d]) is expired", token.Name, token.ID)
+	case TokenStatusDisabled:
+		return nil, fmt.Errorf("token (%s[%d]) is disabled", token.Name, token.ID)
 	}
 	if token.Status != TokenStatusEnabled {
 		return nil, fmt.Errorf("token (%s[%d]) is not available", token.Name, token.ID)
 	}
 	if !time.Time(token.ExpiredAt).IsZero() && time.Time(token.ExpiredAt).Before(time.Now()) {
-		err := UpdateTokenStatusAndAccessedAt(token.ID, TokenStatusExpired)
+		err := UpdateTokenStatus(token.ID, TokenStatusExpired)
 		if err != nil {
 			log.Error("failed to update token status" + err.Error())
 		}
@@ -315,7 +219,7 @@ func ValidateAndGetToken(key string) (token *TokenCache, err error) {
 	}
 	if token.Quota > 0 && token.UsedAmount >= token.Quota {
 		// in this case, we can make sure the token is exhausted
-		err := UpdateTokenStatusAndAccessedAt(token.ID, TokenStatusExhausted)
+		err := UpdateTokenStatus(token.ID, TokenStatusExhausted)
 		if err != nil {
 			log.Error("failed to update token status" + err.Error())
 		}
@@ -348,8 +252,8 @@ func UpdateTokenStatus(id int, status int) (err error) {
 	token := Token{ID: id}
 	defer func() {
 		if err == nil {
-			if err := CacheDeleteToken(token.Key); err != nil {
-				log.Error("delete token from cache failed: " + err.Error())
+			if err := CacheUpdateTokenStatus(token.Key, status); err != nil {
+				log.Error("update token status in cache failed: " + err.Error())
 			}
 		}
 	}()
@@ -369,63 +273,12 @@ func UpdateTokenStatus(id int, status int) (err error) {
 	return HandleUpdateResult(result, ErrTokenNotFound)
 }
 
-func UpdateTokenStatusAndAccessedAt(id int, status int) (err error) {
-	token := Token{ID: id}
-	defer func() {
-		if err == nil {
-			if err := CacheDeleteToken(token.Key); err != nil {
-				log.Error("delete token from cache failed: " + err.Error())
-			}
-		}
-	}()
-	result := DB.
-		Model(&token).
-		Clauses(clause.Returning{
-			Columns: []clause.Column{
-				{Name: "key"},
-			},
-		}).
-		Where("id = ?", id).Updates(
-		map[string]interface{}{
-			"status":      status,
-			"accessed_at": time.Now(),
-		},
-	)
-	return HandleUpdateResult(result, ErrTokenNotFound)
-}
-
-func UpdateGroupTokenStatusAndAccessedAt(group string, id int, status int) (err error) {
-	token := Token{}
-	defer func() {
-		if err == nil {
-			if err := CacheDeleteToken(token.Key); err != nil {
-				log.Error("delete token from cache failed: " + err.Error())
-			}
-		}
-	}()
-	result := DB.
-		Model(&token).
-		Clauses(clause.Returning{
-			Columns: []clause.Column{
-				{Name: "key"},
-			},
-		}).
-		Where("id = ? and group_id = ?", id, group).
-		Updates(
-			map[string]interface{}{
-				"status":      status,
-				"accessed_at": time.Now(),
-			},
-		)
-	return HandleUpdateResult(result, ErrTokenNotFound)
-}
-
 func UpdateGroupTokenStatus(group string, id int, status int) (err error) {
 	token := Token{}
 	defer func() {
 		if err == nil {
-			if err := CacheDeleteToken(token.Key); err != nil {
-				log.Error("delete token from cache failed: " + err.Error())
+			if err := CacheUpdateTokenStatus(token.Key, status); err != nil {
+				log.Error("update token status in cache failed: " + err.Error())
 			}
 		}
 	}()
@@ -586,7 +439,6 @@ func UpdateTokenUsedAmount(id int, amount float64, requestCount int) (err error)
 			map[string]interface{}{
 				"used_amount":   gorm.Expr("used_amount + ?", amount),
 				"request_count": gorm.Expr("request_count + ?", requestCount),
-				"accessed_at":   time.Now(),
 			},
 		)
 	return HandleUpdateResult(result, ErrTokenNotFound)
@@ -596,8 +448,8 @@ func UpdateTokenName(id int, name string) (err error) {
 	token := &Token{ID: id}
 	defer func() {
 		if err == nil {
-			if err := CacheDeleteToken(token.Key); err != nil {
-				log.Error("delete token from cache failed: " + err.Error())
+			if err := CacheUpdateTokenName(token.Key, name); err != nil {
+				log.Error("update token name in cache failed: " + err.Error())
 			}
 		}
 	}()
@@ -620,8 +472,8 @@ func UpdateGroupTokenName(group string, id int, name string) (err error) {
 	token := &Token{ID: id, GroupID: group}
 	defer func() {
 		if err == nil {
-			if err := CacheDeleteToken(token.Key); err != nil {
-				log.Error("delete token from cache failed: " + err.Error())
+			if err := CacheUpdateTokenName(token.Key, name); err != nil {
+				log.Error("update token name in cache failed: " + err.Error())
 			}
 		}
 	}()
diff --git a/service/aiproxy/model/utils.go b/service/aiproxy/model/utils.go
index a12d0cae9b30..148454496f56 100644
--- a/service/aiproxy/model/utils.go
+++ b/service/aiproxy/model/utils.go
@@ -4,6 +4,7 @@ import (
 	"database/sql/driver"
 	"errors"
 	"fmt"
+	"strconv"
 	"strings"
 	"time"
 
@@ -58,6 +59,7 @@ func BatchRecordConsume(
 	endpoint string,
 	content string,
 	mode int,
+	ip string,
 	requestDetail *RequestDetail,
 ) error {
 	errs := []error{}
@@ -78,22 +80,29 @@ func BatchRecordConsume(
 		endpoint,
 		content,
 		mode,
+		ip,
 		requestDetail,
 	)
 	if err != nil {
 		errs = append(errs, fmt.Errorf("failed to record log: %w", err))
 	}
-	err = UpdateGroupUsedAmountAndRequestCount(group, amount, 1)
-	if err != nil {
-		errs = append(errs, fmt.Errorf("failed to update group used amount and request count: %w", err))
+	if group != "" {
+		err = UpdateGroupUsedAmountAndRequestCount(group, amount, 1)
+		if err != nil {
+			errs = append(errs, fmt.Errorf("failed to update group used amount and request count: %w", err))
+		}
 	}
-	err = UpdateTokenUsedAmount(tokenID, amount, 1)
-	if err != nil {
-		errs = append(errs, fmt.Errorf("failed to update token used amount: %w", err))
+	if tokenID > 0 {
+		err = UpdateTokenUsedAmount(tokenID, amount, 1)
+		if err != nil {
+			errs = append(errs, fmt.Errorf("failed to update token used amount: %w", err))
+		}
 	}
-	err = UpdateChannelUsedAmount(channelID, amount, 1)
-	if err != nil {
-		errs = append(errs, fmt.Errorf("failed to update channel used amount: %w", err))
+	if channelID > 0 {
+		err = UpdateChannelUsedAmount(channelID, amount, 1)
+		if err != nil {
+			errs = append(errs, fmt.Errorf("failed to update channel used amount: %w", err))
+		}
 	}
 	if len(errs) == 0 {
 		return nil
@@ -131,3 +140,14 @@ func (ns EmptyNullString) Value() (driver.Value, error) {
 	}
 	return string(ns), nil
 }
+
+func String2Int(keyword string) int {
+	if keyword == "" {
+		return 0
+	}
+	i, err := strconv.Atoi(keyword)
+	if err != nil {
+		return 0
+	}
+	return i
+}
diff --git a/service/aiproxy/monitor/model.go b/service/aiproxy/monitor/model.go
new file mode 100644
index 000000000000..fca8217efdb2
--- /dev/null
+++ b/service/aiproxy/monitor/model.go
@@ -0,0 +1,386 @@
+package monitor
+
+import (
+	"context"
+	"fmt"
+	"strconv"
+	"strings"
+	"time"
+
+	"github.com/labring/sealos/service/aiproxy/common"
+	"github.com/labring/sealos/service/aiproxy/common/config"
+	"github.com/redis/go-redis/v9"
+	log "github.com/sirupsen/logrus"
+)
+
+// Redis key prefixes and patterns
+const (
+	modelKeyPrefix  = "model:"
+	bannedKeySuffix = ":banned"
+	statsKeySuffix  = ":stats"
+	channelKeyPart  = ":channel:"
+)
+
+// Redis scripts
+var (
+	addRequestScript                 = redis.NewScript(addRequestLuaScript)
+	getChannelModelErrorRateScript   = redis.NewScript(getChannelModelErrorRateLuaScript)
+	getBannedChannelsScript          = redis.NewScript(getBannedChannelsLuaScript)
+	clearChannelModelErrorsScript    = redis.NewScript(clearChannelModelErrorsLuaScript)
+	clearChannelAllModelErrorsScript = redis.NewScript(clearChannelAllModelErrorsLuaScript)
+	clearAllModelErrorsScript        = redis.NewScript(clearAllModelErrorsLuaScript)
+)
+
+// Helper functions
+func isFeatureEnabled() bool {
+	return common.RedisEnabled && config.GetEnableModelErrorAutoBan()
+}
+
+func buildStatsKey(model string, channelID interface{}) string {
+	return fmt.Sprintf("%s%s%s%v%s", modelKeyPrefix, model, channelKeyPart, channelID, statsKeySuffix)
+}
+
+// AddRequest adds a request record and checks if channel should be banned
+func AddRequest(ctx context.Context, model string, channelID int64, isError bool) error {
+	if !isFeatureEnabled() {
+		return nil
+	}
+
+	errorFlag := 0
+	if isError {
+		errorFlag = 1
+	}
+
+	now := time.Now().UnixMilli()
+	val, err := addRequestScript.Run(
+		ctx,
+		common.RDB,
+		[]string{model},
+		channelID,
+		errorFlag,
+		now,
+		config.GetModelErrorAutoBanRate(),
+		time.Second.Milliseconds()*15,
+	).Int64()
+	if err != nil {
+		return err
+	}
+
+	log.Debugf("add request result: %d", val)
+	if val == 1 {
+		log.Errorf("channel %d model %s is banned", channelID, model)
+	}
+	return nil
+}
+
+// GetChannelModelErrorRates gets error rates for a specific channel
+func GetChannelModelErrorRates(ctx context.Context, channelID int64) (map[string]float64, error) {
+	if !isFeatureEnabled() {
+		return nil, nil
+	}
+
+	result := make(map[string]float64)
+	pattern := buildStatsKey("*", channelID)
+	now := time.Now().UnixMilli()
+
+	iter := common.RDB.Scan(ctx, 0, pattern, 0).Iterator()
+	for iter.Next(ctx) {
+		key := iter.Val()
+		parts := strings.Split(key, ":")
+		if len(parts) != 5 || parts[4] != "stats" {
+			continue
+		}
+		model := parts[1]
+
+		rate, err := getChannelModelErrorRateScript.Run(
+			ctx,
+			common.RDB,
+			[]string{key},
+			now,
+		).Float64()
+		if err != nil {
+			return nil, err
+		}
+
+		result[model] = rate
+	}
+
+	if err := iter.Err(); err != nil {
+		return nil, err
+	}
+
+	return result, nil
+}
+
+// GetBannedChannels gets banned channels for a specific model
+func GetBannedChannels(ctx context.Context, model string) ([]int64, error) {
+	if !isFeatureEnabled() {
+		return nil, nil
+	}
+	result, err := getBannedChannelsScript.Run(ctx, common.RDB, []string{model}).Int64Slice()
+	if err != nil {
+		return nil, err
+	}
+	return result, nil
+}
+
+// ClearChannelModelErrors clears errors for a specific channel and model
+func ClearChannelModelErrors(ctx context.Context, model string, channelID int) error {
+	if !isFeatureEnabled() {
+		return nil
+	}
+	return clearChannelModelErrorsScript.Run(
+		ctx,
+		common.RDB,
+		[]string{model},
+		strconv.Itoa(channelID),
+	).Err()
+}
+
+// ClearChannelAllModelErrors clears all errors for a specific channel
+func ClearChannelAllModelErrors(ctx context.Context, channelID int) error {
+	if !isFeatureEnabled() {
+		return nil
+	}
+	return clearChannelAllModelErrorsScript.Run(
+		ctx,
+		common.RDB,
+		[]string{},
+		strconv.Itoa(channelID),
+	).Err()
+}
+
+// ClearAllModelErrors clears all error records
+func ClearAllModelErrors(ctx context.Context) error {
+	if !isFeatureEnabled() {
+		return nil
+	}
+	return clearAllModelErrorsScript.Run(ctx, common.RDB, []string{}).Err()
+}
+
+// GetAllBannedChannels gets all banned channels for all models
+func GetAllBannedChannels(ctx context.Context) (map[string][]int64, error) {
+	if !isFeatureEnabled() {
+		return nil, nil
+	}
+
+	result := make(map[string][]int64)
+	iter := common.RDB.Scan(ctx, 0, modelKeyPrefix+"*"+bannedKeySuffix, 0).Iterator()
+
+	for iter.Next(ctx) {
+		key := iter.Val()
+		model := strings.Split(key, ":")[1]
+
+		channels, err := getBannedChannelsScript.Run(
+			ctx,
+			common.RDB,
+			[]string{model},
+		).Int64Slice()
+		if err != nil {
+			return nil, err
+		}
+		result[model] = channels
+	}
+
+	if err := iter.Err(); err != nil {
+		return nil, err
+	}
+
+	return result, nil
+}
+
+// GetAllChannelModelErrorRates gets error rates for all channels and models
+func GetAllChannelModelErrorRates(ctx context.Context) (map[int64]map[string]float64, error) {
+	if !isFeatureEnabled() {
+		return nil, nil
+	}
+
+	result := make(map[int64]map[string]float64)
+	pattern := modelKeyPrefix + "*" + channelKeyPart + "*" + statsKeySuffix
+	now := time.Now().UnixMilli()
+
+	iter := common.RDB.Scan(ctx, 0, pattern, 0).Iterator()
+	for iter.Next(ctx) {
+		key := iter.Val()
+		parts := strings.Split(key, ":")
+		if len(parts) != 5 || parts[4] != "stats" {
+			continue
+		}
+
+		model := parts[1]
+		channelID, err := strconv.ParseInt(parts[3], 10, 64)
+		if err != nil {
+			continue
+		}
+
+		rate, err := getChannelModelErrorRateScript.Run(
+			ctx,
+			common.RDB,
+			[]string{key},
+			now,
+		).Float64()
+		if err != nil {
+			return nil, err
+		}
+
+		if _, exists := result[channelID]; !exists {
+			result[channelID] = make(map[string]float64)
+		}
+		result[channelID][model] = rate
+	}
+
+	if err := iter.Err(); err != nil {
+		return nil, err
+	}
+
+	return result, nil
+}
+
+// Lua scripts
+const (
+	addRequestLuaScript = `
+local model = KEYS[1]
+local channel_id = ARGV[1]
+local is_error = tonumber(ARGV[2])
+local now_ts = tonumber(ARGV[3])
+local max_error_rate = tonumber(ARGV[4])
+local statsExpiry = tonumber(ARGV[5])
+
+local banned_key = "model:" .. model .. ":banned"
+local stats_key = "model:" .. model .. ":channel:" .. channel_id .. ":stats"
+local maxSliceCount = 6
+local current_slice = math.floor(now_ts / 1000)
+
+if redis.call("SISMEMBER", banned_key, channel_id) == 1 then
+    return 2
+end
+
+local function parse_req_err(value)
+    if not value then return 0, 0 end
+    local r, e = value:match("^(%d+):(%d+)$")
+    return tonumber(r) or 0, tonumber(e) or 0
+end
+
+local function update_current_slice()
+    local req, err = parse_req_err(redis.call("HGET", stats_key, current_slice))
+    req = req + 1
+    err = err + (is_error == 1 and 1 or 0)
+    redis.call("HSET", stats_key, current_slice, req .. ":" .. err)
+    redis.call("PEXPIRE", stats_key, statsExpiry)
+    return req, err
+end
+
+local function calculate_error_rate()
+    local total_req, total_err = 0, 0
+    local min_valid_slice = current_slice - maxSliceCount
+    
+    local all_slices = redis.call("HGETALL", stats_key)
+    local to_delete = {}
+    
+    for i = 1, #all_slices, 2 do
+        local slice = tonumber(all_slices[i])
+        if slice < min_valid_slice then
+            table.insert(to_delete, all_slices[i])
+        else
+            local req, err = parse_req_err(all_slices[i+1])
+            total_req = total_req + req
+            total_err = total_err + err
+        end
+    end
+    
+    if #to_delete > 0 then
+        redis.call("HDEL", stats_key, unpack(to_delete))
+    end
+    
+    return total_req, total_err
+end
+
+update_current_slice()
+
+if is_error == 0 then
+    return 0
+end
+
+local total_req, total_err = calculate_error_rate()
+
+if total_req >= 10 and (total_err / total_req) >= max_error_rate then
+    redis.call("SADD", banned_key, channel_id)
+    redis.call("DEL", stats_key)
+    return 1
+end
+
+return 0
+`
+
+	getChannelModelErrorRateLuaScript = `
+local stats_key = KEYS[1]
+local now_ts = tonumber(ARGV[1])
+local maxSliceCount = 6
+local current_slice = math.floor(now_ts / 1000)
+local min_valid_slice = current_slice - maxSliceCount
+
+local function parse_req_err(value)
+    if not value then return 0, 0 end
+    local r, e = value:match("^(%d+):(%d+)$")
+    return tonumber(r) or 0, tonumber(e) or 0
+end
+
+local total_req, total_err = 0, 0
+local all_slices = redis.call("HGETALL", stats_key)
+
+for i = 1, #all_slices, 2 do
+    local slice = tonumber(all_slices[i])
+    if slice >= min_valid_slice then
+        local req, err = parse_req_err(all_slices[i+1])
+        total_req = total_req + req
+        total_err = total_err + err
+    end
+end
+
+if total_req == 0 then return 0 end
+return string.format("%.2f", total_err / total_req)
+`
+
+	getBannedChannelsLuaScript = `
+local model = KEYS[1]
+return redis.call("SMEMBERS", "model:" .. model .. ":banned")
+`
+
+	clearChannelModelErrorsLuaScript = `
+local model = KEYS[1]
+local channel_id = ARGV[1]
+local stats_key = "model:" .. model .. ":channel:" .. channel_id .. ":stats"
+local banned_key = "model:" .. model .. ":banned"
+
+redis.call("DEL", stats_key)
+redis.call("SREM", banned_key, channel_id)
+return redis.status_reply("ok")
+`
+
+	clearChannelAllModelErrorsLuaScript = `
+local channel_id = ARGV[1]
+local pattern = "model:*:channel:" .. channel_id .. ":stats"
+local keys = redis.call("KEYS", pattern)
+
+for _, key in ipairs(keys) do
+    redis.call("DEL", key)
+    local model = string.match(key, "model:(.*):channel:")
+    if model then
+        redis.call("SREM", "model:"..model..":banned", channel_id)
+    end
+end
+return redis.status_reply("ok")
+`
+
+	clearAllModelErrorsLuaScript = `
+local function del_keys(pattern)
+    local keys = redis.call("KEYS", pattern)
+    if #keys > 0 then redis.call("DEL", unpack(keys)) end
+end
+
+del_keys("model:*:channel:*:stats")
+del_keys("model:*:banned")
+
+return redis.status_reply("ok")
+`
+)
diff --git a/service/aiproxy/relay/adaptor/ai360/adaptor.go b/service/aiproxy/relay/adaptor/ai360/adaptor.go
index e53cc50b10aa..5ce25e6e02a9 100644
--- a/service/aiproxy/relay/adaptor/ai360/adaptor.go
+++ b/service/aiproxy/relay/adaptor/ai360/adaptor.go
@@ -3,20 +3,16 @@ package ai360
 import (
 	"github.com/labring/sealos/service/aiproxy/model"
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor/openai"
-	"github.com/labring/sealos/service/aiproxy/relay/meta"
 )
 
 type Adaptor struct {
 	openai.Adaptor
 }
 
-const baseURL = "https://ai.360.cn"
+const baseURL = "https://ai.360.cn/v1"
 
-func (a *Adaptor) GetRequestURL(meta *meta.Meta) (string, error) {
-	if meta.Channel.BaseURL == "" {
-		meta.Channel.BaseURL = baseURL
-	}
-	return a.Adaptor.GetRequestURL(meta)
+func (a *Adaptor) GetBaseURL() string {
+	return baseURL
 }
 
 func (a *Adaptor) GetModelList() []*model.ModelConfig {
diff --git a/service/aiproxy/relay/adaptor/ali/adaptor.go b/service/aiproxy/relay/adaptor/ali/adaptor.go
index 86b23fb67f6f..ab48abb942e4 100644
--- a/service/aiproxy/relay/adaptor/ali/adaptor.go
+++ b/service/aiproxy/relay/adaptor/ali/adaptor.go
@@ -22,6 +22,10 @@ type Adaptor struct{}
 
 const baseURL = "https://dashscope.aliyuncs.com"
 
+func (a *Adaptor) GetBaseURL() string {
+	return baseURL
+}
+
 func (a *Adaptor) GetRequestURL(meta *meta.Meta) (string, error) {
 	u := meta.Channel.BaseURL
 	if u == "" {
@@ -34,6 +38,8 @@ func (a *Adaptor) GetRequestURL(meta *meta.Meta) (string, error) {
 		return u + "/api/v1/services/aigc/text2image/image-synthesis", nil
 	case relaymode.ChatCompletions:
 		return u + "/compatible-mode/v1/chat/completions", nil
+	case relaymode.Completions:
+		return u + "/compatible-mode/v1/completions", nil
 	case relaymode.AudioSpeech, relaymode.AudioTranscription:
 		return u + "/api-ws/v1/inference", nil
 	case relaymode.Rerank:
@@ -46,13 +52,11 @@ func (a *Adaptor) GetRequestURL(meta *meta.Meta) (string, error) {
 func (a *Adaptor) SetupRequestHeader(meta *meta.Meta, _ *gin.Context, req *http.Request) error {
 	req.Header.Set("Authorization", "Bearer "+meta.Channel.Key)
 
-	if meta.Channel.Config.Plugin != "" {
-		req.Header.Set("X-Dashscope-Plugin", meta.Channel.Config.Plugin)
-	}
+	// req.Header.Set("X-Dashscope-Plugin", meta.Channel.Config.Plugin)
 	return nil
 }
 
-func (a *Adaptor) ConvertRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Reader, error) {
+func (a *Adaptor) ConvertRequest(meta *meta.Meta, req *http.Request) (string, http.Header, io.Reader, error) {
 	switch meta.Mode {
 	case relaymode.ImagesGenerations:
 		return ConvertImageRequest(meta, req)
@@ -60,30 +64,36 @@ func (a *Adaptor) ConvertRequest(meta *meta.Meta, req *http.Request) (http.Heade
 		return ConvertRerankRequest(meta, req)
 	case relaymode.Embeddings:
 		return ConvertEmbeddingsRequest(meta, req)
-	case relaymode.ChatCompletions:
+	case relaymode.ChatCompletions, relaymode.Completions:
 		return openai.ConvertRequest(meta, req)
 	case relaymode.AudioSpeech:
 		return ConvertTTSRequest(meta, req)
 	case relaymode.AudioTranscription:
 		return ConvertSTTRequest(meta, req)
 	default:
-		return nil, nil, errors.New("unsupported convert request mode")
+		return "", nil, nil, errors.New("unsupported convert request mode")
 	}
 }
 
+func ignoreTest(meta *meta.Meta) bool {
+	return meta.IsChannelTest &&
+		(strings.Contains(meta.ActualModel, "-ocr") ||
+			strings.HasPrefix(meta.ActualModel, "qwen-mt-"))
+}
+
 func (a *Adaptor) DoRequest(meta *meta.Meta, _ *gin.Context, req *http.Request) (*http.Response, error) {
+	if ignoreTest(meta) {
+		return &http.Response{
+			StatusCode: http.StatusOK,
+			Body:       io.NopCloser(bytes.NewReader(nil)),
+		}, nil
+	}
 	switch meta.Mode {
 	case relaymode.AudioSpeech:
 		return TTSDoRequest(meta, req)
 	case relaymode.AudioTranscription:
 		return STTDoRequest(meta, req)
 	case relaymode.ChatCompletions:
-		if meta.IsChannelTest && strings.Contains(meta.ActualModelName, "-ocr") {
-			return &http.Response{
-				StatusCode: http.StatusOK,
-				Body:       io.NopCloser(bytes.NewReader(nil)),
-			}, nil
-		}
 		fallthrough
 	default:
 		return utils.DoRequest(req)
@@ -91,15 +101,15 @@ func (a *Adaptor) DoRequest(meta *meta.Meta, _ *gin.Context, req *http.Request)
 }
 
 func (a *Adaptor) DoResponse(meta *meta.Meta, c *gin.Context, resp *http.Response) (usage *relaymodel.Usage, err *relaymodel.ErrorWithStatusCode) {
+	if ignoreTest(meta) {
+		return &relaymodel.Usage{}, nil
+	}
 	switch meta.Mode {
 	case relaymode.Embeddings:
 		usage, err = EmbeddingsHandler(meta, c, resp)
 	case relaymode.ImagesGenerations:
 		usage, err = ImageHandler(meta, c, resp)
-	case relaymode.ChatCompletions:
-		if meta.IsChannelTest && strings.Contains(meta.ActualModelName, "-ocr") {
-			return nil, nil
-		}
+	case relaymode.ChatCompletions, relaymode.Completions:
 		usage, err = openai.DoResponse(meta, c, resp)
 	case relaymode.Rerank:
 		usage, err = RerankHandler(meta, c, resp)
diff --git a/service/aiproxy/relay/adaptor/ali/constants.go b/service/aiproxy/relay/adaptor/ali/constants.go
index cd4629c5722b..d68f360e18cf 100644
--- a/service/aiproxy/relay/adaptor/ali/constants.go
+++ b/service/aiproxy/relay/adaptor/ali/constants.go
@@ -15,11 +15,13 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.02,
 		OutputPrice: 0.06,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 32768,
-			model.ModelConfigMaxInputTokensKey:   30720,
-			model.ModelConfigMaxOutputTokensKey:  8192,
-		},
+		RPM:         1200,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(32768),
+			model.WithModelConfigMaxInputTokens(30720),
+			model.WithModelConfigMaxOutputTokens(8192),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "qwen-max-latest",
@@ -27,11 +29,13 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.02,
 		OutputPrice: 0.06,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 32768,
-			model.ModelConfigMaxInputTokensKey:   30720,
-			model.ModelConfigMaxOutputTokensKey:  8192,
-		},
+		RPM:         1200,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(32768),
+			model.WithModelConfigMaxInputTokens(30720),
+			model.WithModelConfigMaxOutputTokens(8192),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 
 	// 通义千问-Plus
@@ -41,11 +45,13 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.0008,
 		OutputPrice: 0.002,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 131072,
-			model.ModelConfigMaxInputTokensKey:   129024,
-			model.ModelConfigMaxOutputTokensKey:  8192,
-		},
+		RPM:         1200,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(131072),
+			model.WithModelConfigMaxInputTokens(129024),
+			model.WithModelConfigMaxOutputTokens(8192),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "qwen-plus-latest",
@@ -53,11 +59,13 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.0008,
 		OutputPrice: 0.002,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 32000,
-			model.ModelConfigMaxInputTokensKey:   30000,
-			model.ModelConfigMaxOutputTokensKey:  8000,
-		},
+		RPM:         1200,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(32000),
+			model.WithModelConfigMaxInputTokens(30000),
+			model.WithModelConfigMaxOutputTokens(8000),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 
 	// 通义千问-Turbo
@@ -67,11 +75,13 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.0003,
 		OutputPrice: 0.0006,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 131072,
-			model.ModelConfigMaxInputTokensKey:   129024,
-			model.ModelConfigMaxOutputTokensKey:  8192,
-		},
+		RPM:         1200,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(131072),
+			model.WithModelConfigMaxInputTokens(129024),
+			model.WithModelConfigMaxOutputTokens(8192),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "qwen-turbo-latest",
@@ -79,11 +89,13 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.0003,
 		OutputPrice: 0.0006,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 1000000,
-			model.ModelConfigMaxInputTokensKey:   1000000,
-			model.ModelConfigMaxOutputTokensKey:  8192,
-		},
+		RPM:         1200,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(1000000),
+			model.WithModelConfigMaxInputTokens(1000000),
+			model.WithModelConfigMaxOutputTokens(8192),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 
 	// Qwen-Long
@@ -93,11 +105,13 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.0005,
 		OutputPrice: 0.002,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 10000000,
-			model.ModelConfigMaxInputTokensKey:   10000000,
-			model.ModelConfigMaxOutputTokensKey:  6000,
-		},
+		RPM:         1200,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(1000000),
+			model.WithModelConfigMaxInputTokens(1000000),
+			model.WithModelConfigMaxOutputTokens(6000),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 
 	// 通义千问VL
@@ -107,11 +121,14 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.02,
 		OutputPrice: 0.02,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 32000,
-			model.ModelConfigMaxInputTokensKey:   30000,
-			model.ModelConfigMaxOutputTokensKey:  2000,
-		},
+		RPM:         1200,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(32000),
+			model.WithModelConfigMaxInputTokens(30000),
+			model.WithModelConfigMaxOutputTokens(2000),
+			model.WithModelConfigVision(true),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "qwen-vl-max-latest",
@@ -119,11 +136,14 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.02,
 		OutputPrice: 0.02,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 32000,
-			model.ModelConfigMaxInputTokensKey:   30000,
-			model.ModelConfigMaxOutputTokensKey:  2000,
-		},
+		RPM:         1200,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(32000),
+			model.WithModelConfigMaxInputTokens(30000),
+			model.WithModelConfigMaxOutputTokens(2000),
+			model.WithModelConfigVision(true),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "qwen-vl-plus",
@@ -131,11 +151,14 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.008,
 		OutputPrice: 0.008,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 8000,
-			model.ModelConfigMaxInputTokensKey:   6000,
-			model.ModelConfigMaxOutputTokensKey:  2000,
-		},
+		RPM:         1200,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(8000),
+			model.WithModelConfigMaxInputTokens(6000),
+			model.WithModelConfigMaxOutputTokens(2000),
+			model.WithModelConfigVision(true),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "qwen-vl-plus-latest",
@@ -143,11 +166,14 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.008,
 		OutputPrice: 0.008,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 32000,
-			model.ModelConfigMaxInputTokensKey:   30000,
-			model.ModelConfigMaxOutputTokensKey:  2000,
-		},
+		RPM:         1200,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(32000),
+			model.WithModelConfigMaxInputTokens(30000),
+			model.WithModelConfigMaxOutputTokens(2000),
+			model.WithModelConfigVision(true),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 
 	// 通义千问OCR
@@ -157,11 +183,13 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.005,
 		OutputPrice: 0.005,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 34096,
-			model.ModelConfigMaxInputTokensKey:   30000,
-			model.ModelConfigMaxOutputTokensKey:  4096,
-		},
+		RPM:         600,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(34096),
+			model.WithModelConfigMaxInputTokens(30000),
+			model.WithModelConfigMaxOutputTokens(4096),
+			model.WithModelConfigVision(true),
+		),
 	},
 	{
 		Model:       "qwen-vl-ocr-latest",
@@ -169,11 +197,13 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.005,
 		OutputPrice: 0.005,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 34096,
-			model.ModelConfigMaxInputTokensKey:   30000,
-			model.ModelConfigMaxOutputTokensKey:  4096,
-		},
+		RPM:         600,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(34096),
+			model.WithModelConfigMaxInputTokens(30000),
+			model.WithModelConfigMaxOutputTokens(4096),
+			model.WithModelConfigVision(true),
+		),
 	},
 
 	// 通义千问Math
@@ -183,11 +213,13 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.004,
 		OutputPrice: 0.012,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 4096,
-			model.ModelConfigMaxInputTokensKey:   3072,
-			model.ModelConfigMaxOutputTokensKey:  3072,
-		},
+		RPM:         1200,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(4096),
+			model.WithModelConfigMaxInputTokens(3072),
+			model.WithModelConfigMaxOutputTokens(3072),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "qwen-math-plus-latest",
@@ -195,11 +227,13 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.004,
 		OutputPrice: 0.012,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 4096,
-			model.ModelConfigMaxInputTokensKey:   3072,
-			model.ModelConfigMaxOutputTokensKey:  3072,
-		},
+		RPM:         1200,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(4096),
+			model.WithModelConfigMaxInputTokens(3072),
+			model.WithModelConfigMaxOutputTokens(3072),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "qwen-math-turbo",
@@ -207,11 +241,13 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.002,
 		OutputPrice: 0.006,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 4096,
-			model.ModelConfigMaxInputTokensKey:   3072,
-			model.ModelConfigMaxOutputTokensKey:  3072,
-		},
+		RPM:         1200,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(4096),
+			model.WithModelConfigMaxInputTokens(3072),
+			model.WithModelConfigMaxOutputTokens(3072),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "qwen-math-turbo-latest",
@@ -219,11 +255,13 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.002,
 		OutputPrice: 0.006,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 4096,
-			model.ModelConfigMaxInputTokensKey:   3072,
-			model.ModelConfigMaxOutputTokensKey:  3072,
-		},
+		RPM:         1200,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(4096),
+			model.WithModelConfigMaxInputTokens(3072),
+			model.WithModelConfigMaxOutputTokens(3072),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 
 	// 通义千问Coder
@@ -233,11 +271,13 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.0035,
 		OutputPrice: 0.007,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 131072,
-			model.ModelConfigMaxInputTokensKey:   129024,
-			model.ModelConfigMaxOutputTokensKey:  8192,
-		},
+		RPM:         1200,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(131072),
+			model.WithModelConfigMaxInputTokens(129024),
+			model.WithModelConfigMaxOutputTokens(8192),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "qwen-coder-plus-latest",
@@ -245,11 +285,13 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.0035,
 		OutputPrice: 0.007,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 131072,
-			model.ModelConfigMaxInputTokensKey:   129024,
-			model.ModelConfigMaxOutputTokensKey:  8192,
-		},
+		RPM:         1200,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(131072),
+			model.WithModelConfigMaxInputTokens(129024),
+			model.WithModelConfigMaxOutputTokens(8192),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "qwen-coder-turbo",
@@ -257,11 +299,13 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.002,
 		OutputPrice: 0.006,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 131072,
-			model.ModelConfigMaxInputTokensKey:   129024,
-			model.ModelConfigMaxOutputTokensKey:  8192,
-		},
+		RPM:         1200,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(131072),
+			model.WithModelConfigMaxInputTokens(129024),
+			model.WithModelConfigMaxOutputTokens(8192),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "qwen-coder-turbo-latest",
@@ -269,11 +313,13 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.002,
 		OutputPrice: 0.006,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 131072,
-			model.ModelConfigMaxInputTokensKey:   129024,
-			model.ModelConfigMaxOutputTokensKey:  8192,
-		},
+		RPM:         1200,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(131072),
+			model.WithModelConfigMaxInputTokens(129024),
+			model.WithModelConfigMaxOutputTokens(8192),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 
 	// 通义千问2.5
@@ -283,11 +329,13 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.004,
 		OutputPrice: 0.012,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 131072,
-			model.ModelConfigMaxInputTokensKey:   129024,
-			model.ModelConfigMaxOutputTokensKey:  8192,
-		},
+		RPM:         1200,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(131072),
+			model.WithModelConfigMaxInputTokens(129024),
+			model.WithModelConfigMaxOutputTokens(8192),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "qwen2.5-32b-instruct",
@@ -295,11 +343,13 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.0035,
 		OutputPrice: 0.007,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 131072,
-			model.ModelConfigMaxInputTokensKey:   129024,
-			model.ModelConfigMaxOutputTokensKey:  8192,
-		},
+		RPM:         1200,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(131072),
+			model.WithModelConfigMaxInputTokens(129024),
+			model.WithModelConfigMaxOutputTokens(8192),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "qwen2.5-14b-instruct",
@@ -307,11 +357,13 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.002,
 		OutputPrice: 0.006,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 131072,
-			model.ModelConfigMaxInputTokensKey:   129024,
-			model.ModelConfigMaxOutputTokensKey:  8192,
-		},
+		RPM:         1200,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(131072),
+			model.WithModelConfigMaxInputTokens(129024),
+			model.WithModelConfigMaxOutputTokens(8192),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "qwen2.5-7b-instruct",
@@ -319,11 +371,58 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.001,
 		OutputPrice: 0.002,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 131072,
-			model.ModelConfigMaxInputTokensKey:   129024,
-			model.ModelConfigMaxOutputTokensKey:  8192,
-		},
+		RPM:         1200,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(131072),
+			model.WithModelConfigMaxInputTokens(129024),
+			model.WithModelConfigMaxOutputTokens(8192),
+			model.WithModelConfigToolChoice(true),
+		),
+	},
+	{
+		Model:       "qwen2.5-vl-72b-instruct",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerAlibaba,
+		InputPrice:  0.016,
+		OutputPrice: 0.048,
+		RPM:         60,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(131072),
+			model.WithModelConfigMaxInputTokens(129024),
+			model.WithModelConfigMaxOutputTokens(8192),
+			model.WithModelConfigVision(true),
+			model.WithModelConfigToolChoice(true),
+		),
+	},
+	{
+		Model:       "qwen2.5-vl-7b-instruct",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerAlibaba,
+		InputPrice:  0.002,
+		OutputPrice: 0.005,
+		RPM:         1200,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(131072),
+			model.WithModelConfigMaxInputTokens(129024),
+			model.WithModelConfigMaxOutputTokens(8192),
+			model.WithModelConfigVision(true),
+			model.WithModelConfigToolChoice(true),
+		),
+	},
+	{
+		Model:       "qwen2.5-vl-3b-instruct",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerAlibaba,
+		InputPrice:  0.0012,
+		OutputPrice: 0.0036,
+		RPM:         1200,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(131072),
+			model.WithModelConfigMaxInputTokens(129024),
+			model.WithModelConfigMaxOutputTokens(8192),
+			model.WithModelConfigVision(true),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 
 	// 通义千问2
@@ -333,11 +432,13 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.004,
 		OutputPrice: 0.012,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 131072,
-			model.ModelConfigMaxInputTokensKey:   128000,
-			model.ModelConfigMaxOutputTokensKey:  6144,
-		},
+		RPM:         60,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(131072),
+			model.WithModelConfigMaxInputTokens(128000),
+			model.WithModelConfigMaxOutputTokens(6144),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "qwen2-57b-a14b-instruct",
@@ -345,11 +446,13 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.0035,
 		OutputPrice: 0.007,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 65536,
-			model.ModelConfigMaxInputTokensKey:   63488,
-			model.ModelConfigMaxOutputTokensKey:  6144,
-		},
+		RPM:         60,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(65536),
+			model.WithModelConfigMaxInputTokens(63488),
+			model.WithModelConfigMaxOutputTokens(6144),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "qwen2-7b-instruct",
@@ -357,11 +460,27 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.001,
 		OutputPrice: 0.002,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 131072,
-			model.ModelConfigMaxInputTokensKey:   128000,
-			model.ModelConfigMaxOutputTokensKey:  6144,
-		},
+		RPM:         60,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(131072),
+			model.WithModelConfigMaxInputTokens(128000),
+			model.WithModelConfigMaxOutputTokens(6144),
+			model.WithModelConfigToolChoice(true),
+		),
+	},
+	{
+		Model:       "qwen2-vl-72b-instruct",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerAlibaba,
+		InputPrice:  0.016,
+		OutputPrice: 0.048,
+		RPM:         60,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(32768),
+			model.WithModelConfigMaxInputTokens(30720),
+			model.WithModelConfigMaxOutputTokens(2048),
+			model.WithModelConfigVision(true),
+		),
 	},
 
 	// 通义千问1.5
@@ -371,11 +490,13 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.007,
 		OutputPrice: 0.014,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 32000,
-			model.ModelConfigMaxInputTokensKey:   30000,
-			model.ModelConfigMaxOutputTokensKey:  8000,
-		},
+		RPM:         10,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(32000),
+			model.WithModelConfigMaxInputTokens(30000),
+			model.WithModelConfigMaxOutputTokens(8000),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "qwen1.5-72b-chat",
@@ -383,11 +504,13 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.005,
 		OutputPrice: 0.01,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 32000,
-			model.ModelConfigMaxInputTokensKey:   30000,
-			model.ModelConfigMaxOutputTokensKey:  8000,
-		},
+		RPM:         120,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(32000),
+			model.WithModelConfigMaxInputTokens(30000),
+			model.WithModelConfigMaxOutputTokens(8000),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "qwen1.5-32b-chat",
@@ -395,11 +518,13 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.0035,
 		OutputPrice: 0.007,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 32000,
-			model.ModelConfigMaxInputTokensKey:   30000,
-			model.ModelConfigMaxOutputTokensKey:  8000,
-		},
+		RPM:         10,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(32000),
+			model.WithModelConfigMaxInputTokens(30000),
+			model.WithModelConfigMaxOutputTokens(8000),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "qwen1.5-14b-chat",
@@ -407,11 +532,13 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.002,
 		OutputPrice: 0.004,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 8000,
-			model.ModelConfigMaxInputTokensKey:   6000,
-			model.ModelConfigMaxOutputTokensKey:  2000,
-		},
+		RPM:         120,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(8000),
+			model.WithModelConfigMaxInputTokens(6000),
+			model.WithModelConfigMaxOutputTokens(2000),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "qwen1.5-7b-chat",
@@ -419,11 +546,13 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.001,
 		OutputPrice: 0.002,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 8000,
-			model.ModelConfigMaxInputTokensKey:   6000,
-			model.ModelConfigMaxOutputTokensKey:  2000,
-		},
+		RPM:         120,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(8000),
+			model.WithModelConfigMaxInputTokens(6000),
+			model.WithModelConfigMaxOutputTokens(2000),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 
 	// 通义千问
@@ -433,11 +562,13 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.02,
 		OutputPrice: 0.02,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 32000,
-			model.ModelConfigMaxInputTokensKey:   30000,
-			model.ModelConfigMaxOutputTokensKey:  2000,
-		},
+		RPM:         80,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(32000),
+			model.WithModelConfigMaxInputTokens(30000),
+			model.WithModelConfigMaxOutputTokens(2000),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "qwen-14b-chat",
@@ -445,11 +576,13 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.008,
 		OutputPrice: 0.008,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 8000,
-			model.ModelConfigMaxInputTokensKey:   6000,
-			model.ModelConfigMaxOutputTokensKey:  2000,
-		},
+		RPM:         300,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(8000),
+			model.WithModelConfigMaxInputTokens(6000),
+			model.WithModelConfigMaxOutputTokens(2000),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "qwen-7b-chat",
@@ -457,11 +590,13 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.006,
 		OutputPrice: 0.006,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 7500,
-			model.ModelConfigMaxInputTokensKey:   6000,
-			model.ModelConfigMaxOutputTokensKey:  1500,
-		},
+		RPM:         300,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(7500),
+			model.WithModelConfigMaxInputTokens(6000),
+			model.WithModelConfigMaxOutputTokens(1500),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 
 	// 通义千问数学模型
@@ -471,11 +606,13 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.004,
 		OutputPrice: 0.012,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 4096,
-			model.ModelConfigMaxInputTokensKey:   3072,
-			model.ModelConfigMaxOutputTokensKey:  3072,
-		},
+		RPM:         1200,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(4096),
+			model.WithModelConfigMaxInputTokens(3072),
+			model.WithModelConfigMaxOutputTokens(3072),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "qwen2.5-math-7b-instruct",
@@ -483,11 +620,13 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.001,
 		OutputPrice: 0.002,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 4096,
-			model.ModelConfigMaxInputTokensKey:   3072,
-			model.ModelConfigMaxOutputTokensKey:  3072,
-		},
+		RPM:         1200,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(4096),
+			model.WithModelConfigMaxInputTokens(3072),
+			model.WithModelConfigMaxOutputTokens(3072),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "qwen2-math-72b-instruct",
@@ -495,11 +634,13 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.004,
 		OutputPrice: 0.012,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 4096,
-			model.ModelConfigMaxInputTokensKey:   3072,
-			model.ModelConfigMaxOutputTokensKey:  3072,
-		},
+		RPM:         10,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(4096),
+			model.WithModelConfigMaxInputTokens(3072),
+			model.WithModelConfigMaxOutputTokens(3072),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "qwen2-math-7b-instruct",
@@ -507,11 +648,13 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.001,
 		OutputPrice: 0.002,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 4096,
-			model.ModelConfigMaxInputTokensKey:   3072,
-			model.ModelConfigMaxOutputTokensKey:  3072,
-		},
+		RPM:         10,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(4096),
+			model.WithModelConfigMaxInputTokens(3072),
+			model.WithModelConfigMaxOutputTokens(3072),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 
 	// 通义千问Coder
@@ -521,11 +664,13 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.0035,
 		OutputPrice: 0.007,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 131072,
-			model.ModelConfigMaxInputTokensKey:   129024,
-			model.ModelConfigMaxOutputTokensKey:  8192,
-		},
+		RPM:         1200,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(131072),
+			model.WithModelConfigMaxInputTokens(129024),
+			model.WithModelConfigMaxOutputTokens(8192),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "qwen2.5-coder-14b-instruct",
@@ -533,11 +678,13 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.002,
 		OutputPrice: 0.006,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 131072,
-			model.ModelConfigMaxInputTokensKey:   129024,
-			model.ModelConfigMaxOutputTokensKey:  8192,
-		},
+		RPM:         1200,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(131072),
+			model.WithModelConfigMaxInputTokens(129024),
+			model.WithModelConfigMaxOutputTokens(8192),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "qwen2.5-coder-7b-instruct",
@@ -545,11 +692,67 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerAlibaba,
 		InputPrice:  0.001,
 		OutputPrice: 0.002,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 131072,
-			model.ModelConfigMaxInputTokensKey:   129024,
-			model.ModelConfigMaxOutputTokensKey:  8192,
-		},
+		RPM:         1200,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(131072),
+			model.WithModelConfigMaxInputTokens(129024),
+			model.WithModelConfigMaxOutputTokens(8192),
+			model.WithModelConfigToolChoice(true),
+		),
+	},
+
+	{
+		Model:       "qwq-32b-preview",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerAlibaba,
+		InputPrice:  0.0035,
+		OutputPrice: 0.007,
+		RPM:         1200,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(32768),
+			model.WithModelConfigMaxInputTokens(30720),
+			model.WithModelConfigMaxOutputTokens(16384),
+		),
+	},
+	{
+		Model:       "qvq-72b-preview",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerAlibaba,
+		InputPrice:  0.012,
+		OutputPrice: 0.036,
+		RPM:         60,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(32768),
+			model.WithModelConfigMaxInputTokens(16384),
+			model.WithModelConfigMaxOutputTokens(16384),
+		),
+	},
+
+	{
+		Model:       "qwen-mt-plus",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerAlibaba,
+		InputPrice:  0.015,
+		OutputPrice: 0.045,
+		RPM:         60,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(2048),
+			model.WithModelConfigMaxInputTokens(1024),
+			model.WithModelConfigMaxOutputTokens(1024),
+		),
+	},
+	{
+		Model:       "qwen-mt-turbo",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerAlibaba,
+		InputPrice:  0.001,
+		OutputPrice: 0.003,
+		RPM:         60,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(2048),
+			model.WithModelConfigMaxInputTokens(1024),
+			model.WithModelConfigMaxOutputTokens(1024),
+		),
 	},
 
 	// stable-diffusion
@@ -557,31 +760,37 @@ var ModelList = []*model.ModelConfig{
 		Model: "stable-diffusion-xl",
 		Type:  relaymode.ImagesGenerations,
 		Owner: model.ModelOwnerStabilityAI,
+		RPM:   2,
 	},
 	{
 		Model: "stable-diffusion-v1.5",
 		Type:  relaymode.ImagesGenerations,
 		Owner: model.ModelOwnerStabilityAI,
+		RPM:   2,
 	},
 	{
 		Model: "stable-diffusion-3.5-large",
 		Type:  relaymode.ImagesGenerations,
 		Owner: model.ModelOwnerStabilityAI,
+		RPM:   2,
 	},
 	{
 		Model: "stable-diffusion-3.5-large-turbo",
 		Type:  relaymode.ImagesGenerations,
 		Owner: model.ModelOwnerStabilityAI,
+		RPM:   2,
 	},
+
 	{
 		Model:      "sambert-v1",
 		Type:       relaymode.AudioSpeech,
 		Owner:      model.ModelOwnerAlibaba,
 		InputPrice: 0.1,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxInputTokensKey: 10000,
-			model.ModelConfigSupportFormatsKey: []string{"mp3", "wav", "pcm"},
-			model.ModelConfigSupportVoicesKey: []string{
+		RPM:        20,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxInputTokens(10000),
+			model.WithModelConfigSupportFormats([]string{"mp3", "wav", "pcm"}),
+			model.WithModelConfigSupportVoices([]string{
 				"zhinan",
 				"zhiqi",
 				"zhichu",
@@ -623,28 +832,31 @@ var ModelList = []*model.ModelConfig{
 				"donna",
 				"brian",
 				"waan",
-			},
-		},
+			}),
+		),
 	},
 
 	{
-		Model: "paraformer-realtime-v2",
-		Type:  relaymode.AudioTranscription,
-		Owner: model.ModelOwnerAlibaba,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxInputTokensKey: 10000,
-			model.ModelConfigSupportFormatsKey: []string{"pcm", "wav", "opus", "speex", "aac", "amr"},
-		},
+		Model:      "paraformer-realtime-v2",
+		Type:       relaymode.AudioTranscription,
+		Owner:      model.ModelOwnerAlibaba,
+		RPM:        20,
+		InputPrice: 0.24,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxInputTokens(10000),
+			model.WithModelConfigSupportFormats([]string{"pcm", "wav", "opus", "speex", "aac", "amr"}),
+		),
 	},
 
 	{
 		Model: "gte-rerank",
 		Type:  relaymode.Rerank,
 		Owner: model.ModelOwnerAlibaba,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 4000,
-			model.ModelConfigMaxInputTokensKey:   4000,
-		},
+		RPM:   5,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(4000),
+			model.WithModelConfigMaxInputTokens(4000),
+		),
 	},
 
 	{
@@ -652,26 +864,29 @@ var ModelList = []*model.ModelConfig{
 		Type:       relaymode.Embeddings,
 		Owner:      model.ModelOwnerAlibaba,
 		InputPrice: 0.0007,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxInputTokensKey: 2048,
-		},
+		RPM:        30,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxInputTokens(2048),
+		),
 	},
 	{
 		Model:      "text-embedding-v2",
 		Type:       relaymode.Embeddings,
 		Owner:      model.ModelOwnerAlibaba,
 		InputPrice: 0.0007,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxInputTokensKey: 2048,
-		},
+		RPM:        30,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxInputTokens(2048),
+		),
 	},
 	{
 		Model:      "text-embedding-v3",
 		Type:       relaymode.Embeddings,
 		Owner:      model.ModelOwnerAlibaba,
 		InputPrice: 0.0007,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxInputTokensKey: 8192,
-		},
+		RPM:        30,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxInputTokens(8192),
+		),
 	},
 }
diff --git a/service/aiproxy/relay/adaptor/ali/embeddings.go b/service/aiproxy/relay/adaptor/ali/embeddings.go
index d460b87bc257..877f6b66f500 100644
--- a/service/aiproxy/relay/adaptor/ali/embeddings.go
+++ b/service/aiproxy/relay/adaptor/ali/embeddings.go
@@ -15,16 +15,16 @@ import (
 	relaymodel "github.com/labring/sealos/service/aiproxy/relay/model"
 )
 
-func ConvertEmbeddingsRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Reader, error) {
+func ConvertEmbeddingsRequest(meta *meta.Meta, req *http.Request) (string, http.Header, io.Reader, error) {
 	var reqMap map[string]any
 	err := common.UnmarshalBodyReusable(req, &reqMap)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
-	reqMap["model"] = meta.ActualModelName
+	reqMap["model"] = meta.ActualModel
 	input, ok := reqMap["input"]
 	if !ok {
-		return nil, nil, errors.New("input is required")
+		return "", nil, nil, errors.New("input is required")
 	}
 	switch v := input.(type) {
 	case string:
@@ -47,16 +47,16 @@ func ConvertEmbeddingsRequest(meta *meta.Meta, req *http.Request) (http.Header,
 	reqMap["parameters"] = parameters
 	jsonData, err := json.Marshal(reqMap)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
-	return nil, bytes.NewReader(jsonData), nil
+	return http.MethodPost, nil, bytes.NewReader(jsonData), nil
 }
 
 func embeddingResponse2OpenAI(meta *meta.Meta, response *EmbeddingResponse) *openai.EmbeddingResponse {
 	openAIEmbeddingResponse := openai.EmbeddingResponse{
 		Object: "list",
 		Data:   make([]*openai.EmbeddingResponseItem, 0, 1),
-		Model:  meta.OriginModelName,
+		Model:  meta.OriginModel,
 		Usage:  response.Usage,
 	}
 
@@ -94,7 +94,7 @@ func EmbeddingsHandler(meta *meta.Meta, c *gin.Context, resp *http.Response) (*r
 	}
 	_, err = c.Writer.Write(data)
 	if err != nil {
-		log.Error("write response body failed: " + err.Error())
+		log.Warnf("write response body failed: %v", err)
 	}
 	return &openaiResponse.Usage, nil
 }
diff --git a/service/aiproxy/relay/adaptor/ali/image.go b/service/aiproxy/relay/adaptor/ali/image.go
index 92c7d048a87d..0ec83b3fd760 100644
--- a/service/aiproxy/relay/adaptor/ali/image.go
+++ b/service/aiproxy/relay/adaptor/ali/image.go
@@ -11,7 +11,6 @@ import (
 
 	"github.com/gin-gonic/gin"
 	json "github.com/json-iterator/go"
-	"github.com/labring/sealos/service/aiproxy/common/helper"
 	"github.com/labring/sealos/service/aiproxy/common/image"
 	"github.com/labring/sealos/service/aiproxy/middleware"
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor/openai"
@@ -23,12 +22,12 @@ import (
 
 const MetaResponseFormat = "response_format"
 
-func ConvertImageRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Reader, error) {
+func ConvertImageRequest(meta *meta.Meta, req *http.Request) (string, http.Header, io.Reader, error) {
 	request, err := utils.UnmarshalImageRequest(req)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
-	request.Model = meta.ActualModelName
+	request.Model = meta.ActualModel
 
 	var imageRequest ImageRequest
 	imageRequest.Input.Prompt = request.Prompt
@@ -41,9 +40,9 @@ func ConvertImageRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Re
 
 	data, err := json.Marshal(&imageRequest)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
-	return http.Header{
+	return http.MethodPost, http.Header{
 		"X-Dashscope-Async": {"enable"},
 	}, bytes.NewReader(data), nil
 }
@@ -98,7 +97,7 @@ func ImageHandler(meta *meta.Meta, c *gin.Context, resp *http.Response) (*model.
 	c.Writer.WriteHeader(resp.StatusCode)
 	_, err = c.Writer.Write(jsonResponse)
 	if err != nil {
-		log.Error("aliImageHandler write response body failed: " + err.Error())
+		log.Warnf("aliImageHandler write response body failed: %v", err)
 	}
 	return &model.Usage{}, nil
 }
@@ -168,7 +167,7 @@ func asyncTaskWait(ctx context.Context, taskID string, key string) (*TaskRespons
 
 func responseAli2OpenAIImage(ctx context.Context, response *TaskResponse, responseFormat string) *openai.ImageResponse {
 	imageResponse := openai.ImageResponse{
-		Created: helper.GetTimestamp(),
+		Created: time.Now().Unix(),
 	}
 
 	for _, data := range response.Output.Results {
diff --git a/service/aiproxy/relay/adaptor/ali/rerank.go b/service/aiproxy/relay/adaptor/ali/rerank.go
index 4fb4412af006..97b56b557454 100644
--- a/service/aiproxy/relay/adaptor/ali/rerank.go
+++ b/service/aiproxy/relay/adaptor/ali/rerank.go
@@ -26,13 +26,13 @@ type RerankUsage struct {
 	TotalTokens int `json:"total_tokens"`
 }
 
-func ConvertRerankRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Reader, error) {
+func ConvertRerankRequest(meta *meta.Meta, req *http.Request) (string, http.Header, io.Reader, error) {
 	reqMap := make(map[string]any)
 	err := common.UnmarshalBodyReusable(req, &reqMap)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
-	reqMap["model"] = meta.ActualModelName
+	reqMap["model"] = meta.ActualModel
 	reqMap["input"] = map[string]any{
 		"query":     reqMap["query"],
 		"documents": reqMap["documents"],
@@ -50,9 +50,9 @@ func ConvertRerankRequest(meta *meta.Meta, req *http.Request) (http.Header, io.R
 	reqMap["parameters"] = parameters
 	jsonData, err := json.Marshal(reqMap)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
-	return nil, bytes.NewReader(jsonData), nil
+	return http.MethodPost, nil, bytes.NewReader(jsonData), nil
 }
 
 func RerankHandler(meta *meta.Meta, c *gin.Context, resp *http.Response) (*relaymodel.Usage, *relaymodel.ErrorWithStatusCode) {
@@ -86,9 +86,9 @@ func RerankHandler(meta *meta.Meta, c *gin.Context, resp *http.Response) (*relay
 	var usage *relaymodel.Usage
 	if rerankResponse.Usage == nil {
 		usage = &relaymodel.Usage{
-			PromptTokens:     meta.PromptTokens,
+			PromptTokens:     meta.InputTokens,
 			CompletionTokens: 0,
-			TotalTokens:      meta.PromptTokens,
+			TotalTokens:      meta.InputTokens,
 		}
 	} else {
 		usage = &relaymodel.Usage{
@@ -103,7 +103,7 @@ func RerankHandler(meta *meta.Meta, c *gin.Context, resp *http.Response) (*relay
 	}
 	_, err = c.Writer.Write(jsonResponse)
 	if err != nil {
-		log.Error("write response body failed: " + err.Error())
+		log.Warnf("write response body failed: %v", err)
 	}
 	return usage, nil
 }
diff --git a/service/aiproxy/relay/adaptor/ali/stt-realtime.go b/service/aiproxy/relay/adaptor/ali/stt-realtime.go
index b8bc38e09508..4c735c1621d0 100644
--- a/service/aiproxy/relay/adaptor/ali/stt-realtime.go
+++ b/service/aiproxy/relay/adaptor/ali/stt-realtime.go
@@ -2,7 +2,6 @@ package ali
 
 import (
 	"bytes"
-	"errors"
 	"io"
 	"net/http"
 
@@ -59,29 +58,19 @@ type STTUsage struct {
 	Characters int `json:"characters"`
 }
 
-func ConvertSTTRequest(meta *meta.Meta, request *http.Request) (http.Header, io.Reader, error) {
+func ConvertSTTRequest(meta *meta.Meta, request *http.Request) (string, http.Header, io.Reader, error) {
 	err := request.ParseMultipartForm(1024 * 1024 * 4)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
-
-	var audioData []byte
-	if files, ok := request.MultipartForm.File["file"]; !ok {
-		return nil, nil, errors.New("audio file is required")
-	} else if len(files) == 1 {
-		file, err := files[0].Open()
-		if err != nil {
-			return nil, nil, err
-		}
-		audioData, err = io.ReadAll(file)
-		file.Close()
-		if err != nil {
-			return nil, nil, err
-		}
-	} else {
-		return nil, nil, errors.New("audio file is required")
+	audioFile, _, err := request.FormFile("file")
+	if err != nil {
+		return "", nil, nil, err
+	}
+	audioData, err := io.ReadAll(audioFile)
+	if err != nil {
+		return "", nil, nil, err
 	}
-
 	sttRequest := STTMessage{
 		Header: STTHeader{
 			Action:    "run-task",
@@ -89,7 +78,7 @@ func ConvertSTTRequest(meta *meta.Meta, request *http.Request) (http.Header, io.
 			TaskID:    uuid.New().String(),
 		},
 		Payload: STTPayload{
-			Model:     meta.ActualModelName,
+			Model:     meta.ActualModel,
 			Task:      "asr",
 			TaskGroup: "audio",
 			Function:  "recognition",
@@ -103,11 +92,11 @@ func ConvertSTTRequest(meta *meta.Meta, request *http.Request) (http.Header, io.
 
 	data, err := json.Marshal(sttRequest)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
 	meta.Set("audio_data", audioData)
 	meta.Set("task_id", sttRequest.Header.TaskID)
-	return http.Header{
+	return http.MethodPost, http.Header{
 		"X-DashScope-DataInspection": {"enable"},
 	}, bytes.NewReader(data), nil
 }
diff --git a/service/aiproxy/relay/adaptor/ali/tts.go b/service/aiproxy/relay/adaptor/ali/tts.go
index b1ecf4d31fee..642e76fe8ab9 100644
--- a/service/aiproxy/relay/adaptor/ali/tts.go
+++ b/service/aiproxy/relay/adaptor/ali/tts.go
@@ -93,21 +93,21 @@ var ttsSupportedFormat = map[string]struct{}{
 	"mp3": {},
 }
 
-func ConvertTTSRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Reader, error) {
+func ConvertTTSRequest(meta *meta.Meta, req *http.Request) (string, http.Header, io.Reader, error) {
 	request, err := utils.UnmarshalTTSRequest(req)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
 	reqMap, err := utils.UnmarshalMap(req)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
 	var sampleRate int
 	sampleRateI, ok := reqMap["sample_rate"].(float64)
 	if ok {
 		sampleRate = int(sampleRateI)
 	}
-	request.Model = meta.ActualModelName
+	request.Model = meta.ActualModel
 
 	if strings.HasPrefix(request.Model, "sambert-v") {
 		voice := request.Voice
@@ -156,9 +156,9 @@ func ConvertTTSRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Read
 
 	data, err := json.Marshal(ttsRequest)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
-	return http.Header{
+	return http.MethodPost, http.Header{
 		"X-DashScope-DataInspection": {"enable"},
 	}, bytes.NewReader(data), nil
 }
diff --git a/service/aiproxy/relay/adaptor/anthropic/adaptor.go b/service/aiproxy/relay/adaptor/anthropic/adaptor.go
index b265b039ccbe..6fbf59bc798f 100644
--- a/service/aiproxy/relay/adaptor/anthropic/adaptor.go
+++ b/service/aiproxy/relay/adaptor/anthropic/adaptor.go
@@ -16,14 +16,14 @@ import (
 
 type Adaptor struct{}
 
-const baseURL = "https://api.anthropic.com"
+const baseURL = "https://api.anthropic.com/v1"
+
+func (a *Adaptor) GetBaseURL() string {
+	return baseURL
+}
 
 func (a *Adaptor) GetRequestURL(meta *meta.Meta) (string, error) {
-	u := meta.Channel.BaseURL
-	if u == "" {
-		u = baseURL
-	}
-	return u + "/v1/messages", nil
+	return meta.Channel.BaseURL + "/messages", nil
 }
 
 func (a *Adaptor) SetupRequestHeader(meta *meta.Meta, c *gin.Context, req *http.Request) error {
@@ -37,24 +37,24 @@ func (a *Adaptor) SetupRequestHeader(meta *meta.Meta, c *gin.Context, req *http.
 
 	// https://x.com/alexalbert__/status/1812921642143900036
 	// claude-3-5-sonnet can support 8k context
-	if strings.HasPrefix(meta.ActualModelName, "claude-3-5-sonnet") {
+	if strings.HasPrefix(meta.ActualModel, "claude-3-5-sonnet") {
 		req.Header.Set("Anthropic-Beta", "max-tokens-3-5-sonnet-2024-07-15")
 	}
 
 	return nil
 }
 
-func (a *Adaptor) ConvertRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Reader, error) {
+func (a *Adaptor) ConvertRequest(meta *meta.Meta, req *http.Request) (string, http.Header, io.Reader, error) {
 	data, err := ConvertRequest(meta, req)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
 
 	data2, err := json.Marshal(data)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
-	return nil, bytes.NewReader(data2), nil
+	return http.MethodPost, nil, bytes.NewReader(data2), nil
 }
 
 func (a *Adaptor) DoRequest(_ *meta.Meta, _ *gin.Context, req *http.Request) (*http.Response, error) {
diff --git a/service/aiproxy/relay/adaptor/anthropic/constants.go b/service/aiproxy/relay/adaptor/anthropic/constants.go
index 119e019b40ea..c58eee144dba 100644
--- a/service/aiproxy/relay/adaptor/anthropic/constants.go
+++ b/service/aiproxy/relay/adaptor/anthropic/constants.go
@@ -7,48 +7,73 @@ import (
 
 var ModelList = []*model.ModelConfig{
 	{
-		Model: "claude-instant-1.2",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerAnthropic,
+		Model:       "claude-3-haiku-20240307",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerAnthropic,
+		InputPrice:  0.0025,
+		OutputPrice: 0.0125,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(200000),
+			model.WithModelConfigMaxOutputTokens(4096),
+		),
 	},
 	{
-		Model: "claude-2.0",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerAnthropic,
+		Model:       "claude-3-opus-20240229",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerAnthropic,
+		InputPrice:  0.015,
+		OutputPrice: 0.075,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(200000),
+			model.WithModelConfigMaxOutputTokens(4096),
+		),
 	},
 	{
-		Model: "claude-2.1",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerAnthropic,
+		Model:       "claude-3-5-haiku-20241022",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerAnthropic,
+		InputPrice:  0.0008,
+		OutputPrice: 0.004,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(200000),
+			model.WithModelConfigMaxOutputTokens(4096),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
-		Model: "claude-3-haiku-20240307",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerAnthropic,
+		Model:       "claude-3-5-sonnet-20240620",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerAnthropic,
+		InputPrice:  0.003,
+		OutputPrice: 0.015,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(200000),
+			model.WithModelConfigMaxOutputTokens(8192),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
-		Model: "claude-3-sonnet-20240229",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerAnthropic,
+		Model:       "claude-3-5-sonnet-20241022",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerAnthropic,
+		InputPrice:  0.003,
+		OutputPrice: 0.015,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(200000),
+			model.WithModelConfigMaxOutputTokens(8192),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
-		Model: "claude-3-opus-20240229",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerAnthropic,
-	},
-	{
-		Model: "claude-3-5-sonnet-20240620",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerAnthropic,
-	},
-	{
-		Model: "claude-3-5-sonnet-20241022",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerAnthropic,
-	},
-	{
-		Model: "claude-3-5-sonnet-latest",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerAnthropic,
+		Model:       "claude-3-5-sonnet-latest",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerAnthropic,
+		InputPrice:  0.003,
+		OutputPrice: 0.015,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(200000),
+			model.WithModelConfigMaxOutputTokens(8192),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 }
diff --git a/service/aiproxy/relay/adaptor/anthropic/main.go b/service/aiproxy/relay/adaptor/anthropic/main.go
index 00a018455c49..54576245b876 100644
--- a/service/aiproxy/relay/adaptor/anthropic/main.go
+++ b/service/aiproxy/relay/adaptor/anthropic/main.go
@@ -4,17 +4,17 @@ import (
 	"bufio"
 	"net/http"
 	"slices"
+	"time"
 
+	"github.com/gin-gonic/gin"
 	json "github.com/json-iterator/go"
+	"github.com/labring/sealos/service/aiproxy/common"
 	"github.com/labring/sealos/service/aiproxy/common/conv"
+	"github.com/labring/sealos/service/aiproxy/common/image"
 	"github.com/labring/sealos/service/aiproxy/common/render"
 	"github.com/labring/sealos/service/aiproxy/middleware"
-
-	"github.com/gin-gonic/gin"
-	"github.com/labring/sealos/service/aiproxy/common"
-	"github.com/labring/sealos/service/aiproxy/common/helper"
-	"github.com/labring/sealos/service/aiproxy/common/image"
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor/openai"
+	"github.com/labring/sealos/service/aiproxy/relay/constant"
 	"github.com/labring/sealos/service/aiproxy/relay/meta"
 	"github.com/labring/sealos/service/aiproxy/relay/model"
 )
@@ -26,10 +26,8 @@ func stopReasonClaude2OpenAI(reason *string) string {
 		return ""
 	}
 	switch *reason {
-	case "end_turn":
-		return "stop"
-	case "stop_sequence":
-		return "stop"
+	case "end_turn", "stop_sequence":
+		return constant.StopFinishReason
 	case "max_tokens":
 		return "length"
 	case toolUseType:
@@ -45,7 +43,7 @@ func ConvertRequest(meta *meta.Meta, req *http.Request) (*Request, error) {
 	if err != nil {
 		return nil, err
 	}
-	textRequest.Model = meta.ActualModelName
+	textRequest.Model = meta.ActualModel
 	meta.Set("stream", textRequest.Stream)
 	claudeTools := make([]Tool, 0, len(textRequest.Tools))
 
@@ -256,18 +254,18 @@ func ResponseClaude2OpenAI(claudeResponse *Response) *openai.TextResponse {
 		ID:      "chatcmpl-" + claudeResponse.ID,
 		Model:   claudeResponse.Model,
 		Object:  "chat.completion",
-		Created: helper.GetTimestamp(),
+		Created: time.Now().Unix(),
 		Choices: []*openai.TextResponseChoice{&choice},
 	}
 	return &fullTextResponse
 }
 
-func StreamHandler(_ *meta.Meta, c *gin.Context, resp *http.Response) (*model.ErrorWithStatusCode, *model.Usage) {
+func StreamHandler(m *meta.Meta, c *gin.Context, resp *http.Response) (*model.ErrorWithStatusCode, *model.Usage) {
 	defer resp.Body.Close()
 
 	log := middleware.GetLogger(c)
 
-	createdTime := helper.GetTimestamp()
+	createdTime := time.Now().Unix()
 	scanner := bufio.NewScanner(resp.Body)
 	scanner.Split(func(data []byte, atEOF bool) (advance int, token []byte, err error) {
 		if atEOF && len(data) == 0 {
@@ -285,9 +283,9 @@ func StreamHandler(_ *meta.Meta, c *gin.Context, resp *http.Response) (*model.Er
 	common.SetEventStreamHeaders(c)
 
 	var usage model.Usage
-	var modelName string
 	var id string
 	var lastToolCallChoice *openai.ChatCompletionsStreamResponseChoice
+	var usageWrited bool
 
 	for scanner.Scan() {
 		data := scanner.Bytes()
@@ -314,11 +312,14 @@ func StreamHandler(_ *meta.Meta, c *gin.Context, resp *http.Response) (*model.Er
 		if meta != nil {
 			usage.PromptTokens += meta.Usage.InputTokens
 			usage.CompletionTokens += meta.Usage.OutputTokens
+			usage.TotalTokens = usage.PromptTokens + usage.CompletionTokens
 			if len(meta.ID) > 0 { // only message_start has an id, otherwise it's a finish_reason event.
-				modelName = meta.Model
 				id = "chatcmpl-" + meta.ID
 				continue
 			}
+			response.Usage = &usage
+			usageWrited = true
+
 			if lastToolCallChoice != nil && len(lastToolCallChoice.Delta.ToolCalls) > 0 {
 				lastArgs := &lastToolCallChoice.Delta.ToolCalls[len(lastToolCallChoice.Delta.ToolCalls)-1].Function
 				if len(lastArgs.Arguments) == 0 { // compatible with OpenAI sending an empty object `{}` when no arguments.
@@ -330,7 +331,7 @@ func StreamHandler(_ *meta.Meta, c *gin.Context, resp *http.Response) (*model.Er
 		}
 
 		response.ID = id
-		response.Model = modelName
+		response.Model = m.OriginModel
 		response.Created = createdTime
 
 		for _, choice := range response.Choices {
@@ -338,16 +339,29 @@ func StreamHandler(_ *meta.Meta, c *gin.Context, resp *http.Response) (*model.Er
 				lastToolCallChoice = choice
 			}
 		}
-		err = render.ObjectData(c, response)
-		if err != nil {
-			log.Error("error rendering stream response: " + err.Error())
-		}
+		_ = render.ObjectData(c, response)
 	}
 
 	if err := scanner.Err(); err != nil {
 		log.Error("error reading stream: " + err.Error())
 	}
 
+	if usage.CompletionTokens == 0 && usage.PromptTokens == 0 {
+		usage.PromptTokens = m.InputTokens
+	}
+
+	usage.TotalTokens = usage.PromptTokens + usage.CompletionTokens
+
+	if !usageWrited {
+		_ = render.ObjectData(c, &openai.ChatCompletionsStreamResponse{
+			Model:   m.OriginModel,
+			Object:  "chat.completion.chunk",
+			Created: createdTime,
+			Choices: []*openai.ChatCompletionsStreamResponseChoice{},
+			Usage:   &usage,
+		})
+	}
+
 	render.Done(c)
 
 	return nil, &usage
@@ -373,7 +387,7 @@ func Handler(meta *meta.Meta, c *gin.Context, resp *http.Response) (*model.Error
 		}, nil
 	}
 	fullTextResponse := ResponseClaude2OpenAI(&claudeResponse)
-	fullTextResponse.Model = meta.OriginModelName
+	fullTextResponse.Model = meta.OriginModel
 	usage := model.Usage{
 		PromptTokens:     claudeResponse.Usage.InputTokens,
 		CompletionTokens: claudeResponse.Usage.OutputTokens,
diff --git a/service/aiproxy/relay/adaptor/aws/adaptor.go b/service/aiproxy/relay/adaptor/aws/adaptor.go
index 3295c7dd9d78..09fa2c103f9a 100644
--- a/service/aiproxy/relay/adaptor/aws/adaptor.go
+++ b/service/aiproxy/relay/adaptor/aws/adaptor.go
@@ -17,10 +17,14 @@ var _ adaptor.Adaptor = new(Adaptor)
 
 type Adaptor struct{}
 
-func (a *Adaptor) ConvertRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Reader, error) {
-	adaptor := GetAdaptor(meta.ActualModelName)
+func (a *Adaptor) GetBaseURL() string {
+	return ""
+}
+
+func (a *Adaptor) ConvertRequest(meta *meta.Meta, req *http.Request) (string, http.Header, io.Reader, error) {
+	adaptor := GetAdaptor(meta.ActualModel)
 	if adaptor == nil {
-		return nil, nil, errors.New("adaptor not found")
+		return "", nil, nil, errors.New("adaptor not found")
 	}
 	meta.Set("awsAdapter", adaptor)
 	return adaptor.ConvertRequest(meta, req)
diff --git a/service/aiproxy/relay/adaptor/aws/claude/adapter.go b/service/aiproxy/relay/adaptor/aws/claude/adapter.go
index 8b0126f93dfe..1cf0813a2e67 100644
--- a/service/aiproxy/relay/adaptor/aws/claude/adapter.go
+++ b/service/aiproxy/relay/adaptor/aws/claude/adapter.go
@@ -19,13 +19,13 @@ var _ utils.AwsAdapter = new(Adaptor)
 
 type Adaptor struct{}
 
-func (a *Adaptor) ConvertRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Reader, error) {
+func (a *Adaptor) ConvertRequest(meta *meta.Meta, req *http.Request) (string, http.Header, io.Reader, error) {
 	r, err := anthropic.ConvertRequest(meta, req)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
 	meta.Set(ConvertedRequest, r)
-	return nil, nil, nil
+	return "", nil, nil, nil
 }
 
 func (a *Adaptor) DoResponse(meta *meta.Meta, c *gin.Context) (usage *model.Usage, err *model.ErrorWithStatusCode) {
diff --git a/service/aiproxy/relay/adaptor/aws/claude/main.go b/service/aiproxy/relay/adaptor/aws/claude/main.go
index 45f974fc9089..7a9e19f1d611 100644
--- a/service/aiproxy/relay/adaptor/aws/claude/main.go
+++ b/service/aiproxy/relay/adaptor/aws/claude/main.go
@@ -4,6 +4,7 @@ package aws
 import (
 	"io"
 	"net/http"
+	"time"
 
 	json "github.com/json-iterator/go"
 
@@ -12,7 +13,6 @@ import (
 	"github.com/aws/aws-sdk-go-v2/service/bedrockruntime/types"
 	"github.com/gin-gonic/gin"
 	"github.com/jinzhu/copier"
-	"github.com/labring/sealos/service/aiproxy/common/helper"
 	"github.com/labring/sealos/service/aiproxy/common/render"
 	"github.com/labring/sealos/service/aiproxy/middleware"
 	"github.com/labring/sealos/service/aiproxy/model"
@@ -93,7 +93,7 @@ func awsModelID(requestModel string) (string, error) {
 }
 
 func Handler(meta *meta.Meta, c *gin.Context) (*relaymodel.ErrorWithStatusCode, *relaymodel.Usage) {
-	awsModelID, err := awsModelID(meta.ActualModelName)
+	awsModelID, err := awsModelID(meta.ActualModel)
 	if err != nil {
 		return utils.WrapErr(errors.Wrap(err, "awsModelID")), nil
 	}
@@ -121,7 +121,12 @@ func Handler(meta *meta.Meta, c *gin.Context) (*relaymodel.ErrorWithStatusCode,
 		return utils.WrapErr(errors.Wrap(err, "marshal request")), nil
 	}
 
-	awsResp, err := meta.AwsClient().InvokeModel(c.Request.Context(), awsReq)
+	awsClient, err := utils.AwsClientFromMeta(meta)
+	if err != nil {
+		return utils.WrapErr(errors.Wrap(err, "get aws client")), nil
+	}
+
+	awsResp, err := awsClient.InvokeModel(c.Request.Context(), awsReq)
 	if err != nil {
 		return utils.WrapErr(errors.Wrap(err, "InvokeModel")), nil
 	}
@@ -133,7 +138,7 @@ func Handler(meta *meta.Meta, c *gin.Context) (*relaymodel.ErrorWithStatusCode,
 	}
 
 	openaiResp := anthropic.ResponseClaude2OpenAI(claudeResponse)
-	openaiResp.Model = meta.OriginModelName
+	openaiResp.Model = meta.OriginModel
 	usage := relaymodel.Usage{
 		PromptTokens:     claudeResponse.Usage.InputTokens,
 		CompletionTokens: claudeResponse.Usage.OutputTokens,
@@ -147,9 +152,9 @@ func Handler(meta *meta.Meta, c *gin.Context) (*relaymodel.ErrorWithStatusCode,
 
 func StreamHandler(meta *meta.Meta, c *gin.Context) (*relaymodel.ErrorWithStatusCode, *relaymodel.Usage) {
 	log := middleware.GetLogger(c)
-	createdTime := helper.GetTimestamp()
-	originModelName := meta.OriginModelName
-	awsModelID, err := awsModelID(meta.ActualModelName)
+	createdTime := time.Now().Unix()
+	originModelName := meta.OriginModel
+	awsModelID, err := awsModelID(meta.ActualModel)
 	if err != nil {
 		return utils.WrapErr(errors.Wrap(err, "awsModelID")), nil
 	}
@@ -177,7 +182,12 @@ func StreamHandler(meta *meta.Meta, c *gin.Context) (*relaymodel.ErrorWithStatus
 		return utils.WrapErr(errors.Wrap(err, "marshal request")), nil
 	}
 
-	awsResp, err := meta.AwsClient().InvokeModelWithResponseStream(c.Request.Context(), awsReq)
+	awsClient, err := utils.AwsClientFromMeta(meta)
+	if err != nil {
+		return utils.WrapErr(errors.Wrap(err, "get aws client")), nil
+	}
+
+	awsResp, err := awsClient.InvokeModelWithResponseStream(c.Request.Context(), awsReq)
 	if err != nil {
 		return utils.WrapErr(errors.Wrap(err, "InvokeModelWithResponseStream")), nil
 	}
diff --git a/service/aiproxy/relay/adaptor/aws/key.go b/service/aiproxy/relay/adaptor/aws/key.go
new file mode 100644
index 000000000000..e2ef5f461b31
--- /dev/null
+++ b/service/aiproxy/relay/adaptor/aws/key.go
@@ -0,0 +1,20 @@
+package aws
+
+import (
+	"github.com/labring/sealos/service/aiproxy/relay/adaptor"
+	"github.com/labring/sealos/service/aiproxy/relay/adaptor/aws/utils"
+)
+
+var _ adaptor.KeyValidator = (*Adaptor)(nil)
+
+func (a *Adaptor) ValidateKey(key string) error {
+	_, err := utils.GetAwsConfigFromKey(key)
+	if err != nil {
+		return err
+	}
+	return nil
+}
+
+func (a *Adaptor) KeyHelp() string {
+	return "region|ak|sk"
+}
diff --git a/service/aiproxy/relay/adaptor/aws/llama3/adapter.go b/service/aiproxy/relay/adaptor/aws/llama3/adapter.go
index 1524a92e7b93..ecfd2ee18cb4 100644
--- a/service/aiproxy/relay/adaptor/aws/llama3/adapter.go
+++ b/service/aiproxy/relay/adaptor/aws/llama3/adapter.go
@@ -19,16 +19,16 @@ var _ utils.AwsAdapter = new(Adaptor)
 
 type Adaptor struct{}
 
-func (a *Adaptor) ConvertRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Reader, error) {
+func (a *Adaptor) ConvertRequest(meta *meta.Meta, req *http.Request) (string, http.Header, io.Reader, error) {
 	request, err := relayutils.UnmarshalGeneralOpenAIRequest(req)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
-	request.Model = meta.ActualModelName
+	request.Model = meta.ActualModel
 	meta.Set("stream", request.Stream)
 	llamaReq := ConvertRequest(request)
 	meta.Set(ConvertedRequest, llamaReq)
-	return nil, nil, nil
+	return "", nil, nil, nil
 }
 
 func (a *Adaptor) DoResponse(meta *meta.Meta, c *gin.Context) (usage *model.Usage, err *model.ErrorWithStatusCode) {
diff --git a/service/aiproxy/relay/adaptor/aws/llama3/main.go b/service/aiproxy/relay/adaptor/aws/llama3/main.go
index f60e43a35286..d353096178fe 100644
--- a/service/aiproxy/relay/adaptor/aws/llama3/main.go
+++ b/service/aiproxy/relay/adaptor/aws/llama3/main.go
@@ -6,22 +6,22 @@ import (
 	"io"
 	"net/http"
 	"text/template"
+	"time"
 
 	json "github.com/json-iterator/go"
 
-	"github.com/labring/sealos/service/aiproxy/common/random"
-	"github.com/labring/sealos/service/aiproxy/common/render"
-	"github.com/labring/sealos/service/aiproxy/middleware"
-	"github.com/labring/sealos/service/aiproxy/model"
-
 	"github.com/aws/aws-sdk-go-v2/aws"
 	"github.com/aws/aws-sdk-go-v2/service/bedrockruntime"
 	"github.com/aws/aws-sdk-go-v2/service/bedrockruntime/types"
 	"github.com/gin-gonic/gin"
 	"github.com/labring/sealos/service/aiproxy/common"
-	"github.com/labring/sealos/service/aiproxy/common/helper"
+	"github.com/labring/sealos/service/aiproxy/common/random"
+	"github.com/labring/sealos/service/aiproxy/common/render"
+	"github.com/labring/sealos/service/aiproxy/middleware"
+	"github.com/labring/sealos/service/aiproxy/model"
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor/aws/utils"
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor/openai"
+	"github.com/labring/sealos/service/aiproxy/relay/constant"
 	"github.com/labring/sealos/service/aiproxy/relay/meta"
 	relaymodel "github.com/labring/sealos/service/aiproxy/relay/model"
 	"github.com/labring/sealos/service/aiproxy/relay/relaymode"
@@ -94,7 +94,7 @@ func ConvertRequest(textRequest *relaymodel.GeneralOpenAIRequest) *Request {
 }
 
 func Handler(meta *meta.Meta, c *gin.Context) (*relaymodel.ErrorWithStatusCode, *relaymodel.Usage) {
-	awsModelID, err := awsModelID(meta.ActualModelName)
+	awsModelID, err := awsModelID(meta.ActualModel)
 	if err != nil {
 		return utils.WrapErr(errors.Wrap(err, "awsModelID")), nil
 	}
@@ -115,7 +115,12 @@ func Handler(meta *meta.Meta, c *gin.Context) (*relaymodel.ErrorWithStatusCode,
 		return utils.WrapErr(errors.Wrap(err, "marshal request")), nil
 	}
 
-	awsResp, err := meta.AwsClient().InvokeModel(c.Request.Context(), awsReq)
+	awsClient, err := utils.AwsClientFromMeta(meta)
+	if err != nil {
+		return utils.WrapErr(errors.Wrap(err, "get aws client")), nil
+	}
+
+	awsResp, err := awsClient.InvokeModel(c.Request.Context(), awsReq)
 	if err != nil {
 		return utils.WrapErr(errors.Wrap(err, "InvokeModel")), nil
 	}
@@ -127,7 +132,7 @@ func Handler(meta *meta.Meta, c *gin.Context) (*relaymodel.ErrorWithStatusCode,
 	}
 
 	openaiResp := ResponseLlama2OpenAI(&llamaResponse)
-	openaiResp.Model = meta.OriginModelName
+	openaiResp.Model = meta.OriginModel
 	usage := relaymodel.Usage{
 		PromptTokens:     llamaResponse.PromptTokenCount,
 		CompletionTokens: llamaResponse.GenerationTokenCount,
@@ -156,7 +161,7 @@ func ResponseLlama2OpenAI(llamaResponse *Response) *openai.TextResponse {
 	fullTextResponse := openai.TextResponse{
 		ID:      "chatcmpl-" + random.GetUUID(),
 		Object:  "chat.completion",
-		Created: helper.GetTimestamp(),
+		Created: time.Now().Unix(),
 		Choices: []*openai.TextResponseChoice{&choice},
 	}
 	return &fullTextResponse
@@ -165,8 +170,8 @@ func ResponseLlama2OpenAI(llamaResponse *Response) *openai.TextResponse {
 func StreamHandler(meta *meta.Meta, c *gin.Context) (*relaymodel.ErrorWithStatusCode, *relaymodel.Usage) {
 	log := middleware.GetLogger(c)
 
-	createdTime := helper.GetTimestamp()
-	awsModelID, err := awsModelID(meta.ActualModelName)
+	createdTime := time.Now().Unix()
+	awsModelID, err := awsModelID(meta.ActualModel)
 	if err != nil {
 		return utils.WrapErr(errors.Wrap(err, "awsModelID")), nil
 	}
@@ -187,7 +192,12 @@ func StreamHandler(meta *meta.Meta, c *gin.Context) (*relaymodel.ErrorWithStatus
 		return utils.WrapErr(errors.Wrap(err, "marshal request")), nil
 	}
 
-	awsResp, err := meta.AwsClient().InvokeModelWithResponseStream(c.Request.Context(), awsReq)
+	awsClient, err := utils.AwsClientFromMeta(meta)
+	if err != nil {
+		return utils.WrapErr(errors.Wrap(err, "get aws client")), nil
+	}
+
+	awsResp, err := awsClient.InvokeModelWithResponseStream(c.Request.Context(), awsReq)
 	if err != nil {
 		return utils.WrapErr(errors.Wrap(err, "InvokeModelWithResponseStream")), nil
 	}
@@ -215,13 +225,13 @@ func StreamHandler(meta *meta.Meta, c *gin.Context) (*relaymodel.ErrorWithStatus
 			if llamaResp.PromptTokenCount > 0 {
 				usage.PromptTokens = llamaResp.PromptTokenCount
 			}
-			if llamaResp.StopReason == "stop" {
+			if llamaResp.StopReason == constant.StopFinishReason {
 				usage.CompletionTokens = llamaResp.GenerationTokenCount
 				usage.TotalTokens = usage.PromptTokens + usage.CompletionTokens
 			}
 			response := StreamResponseLlama2OpenAI(&llamaResp)
 			response.ID = "chatcmpl-" + random.GetUUID()
-			response.Model = meta.OriginModelName
+			response.Model = meta.OriginModel
 			response.Created = createdTime
 			err = render.ObjectData(c, response)
 			if err != nil {
diff --git a/service/aiproxy/relay/adaptor/aws/utils/adaptor.go b/service/aiproxy/relay/adaptor/aws/utils/adaptor.go
index d034d86f1ba7..cee82c555b78 100644
--- a/service/aiproxy/relay/adaptor/aws/utils/adaptor.go
+++ b/service/aiproxy/relay/adaptor/aws/utils/adaptor.go
@@ -1,15 +1,68 @@
 package utils
 
 import (
+	"errors"
 	"io"
 	"net/http"
+	"strings"
 
+	"github.com/aws/aws-sdk-go-v2/aws"
+	"github.com/aws/aws-sdk-go-v2/credentials"
+	"github.com/aws/aws-sdk-go-v2/service/bedrockruntime"
 	"github.com/gin-gonic/gin"
 	"github.com/labring/sealos/service/aiproxy/relay/meta"
 	"github.com/labring/sealos/service/aiproxy/relay/model"
 )
 
 type AwsAdapter interface {
-	ConvertRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Reader, error)
+	ConvertRequest(meta *meta.Meta, req *http.Request) (string, http.Header, io.Reader, error)
 	DoResponse(meta *meta.Meta, c *gin.Context) (usage *model.Usage, err *model.ErrorWithStatusCode)
 }
+
+type AwsConfig struct {
+	Region string
+	AK     string
+	SK     string
+}
+
+func GetAwsConfigFromKey(key string) (*AwsConfig, error) {
+	split := strings.Split(key, "|")
+	if len(split) != 3 {
+		return nil, errors.New("invalid key format")
+	}
+	return &AwsConfig{
+		Region: split[0],
+		AK:     split[1],
+		SK:     split[2],
+	}, nil
+}
+
+func AwsClient(config *AwsConfig) *bedrockruntime.Client {
+	return bedrockruntime.New(bedrockruntime.Options{
+		Region:      config.Region,
+		Credentials: aws.NewCredentialsCache(credentials.NewStaticCredentialsProvider(config.AK, config.SK, "")),
+	})
+}
+
+func awsClientFromKey(key string) (*bedrockruntime.Client, error) {
+	config, err := GetAwsConfigFromKey(key)
+	if err != nil {
+		return nil, err
+	}
+	return AwsClient(config), nil
+}
+
+const AwsClientKey = "aws_client"
+
+func AwsClientFromMeta(meta *meta.Meta) (*bedrockruntime.Client, error) {
+	awsClientI, ok := meta.Get(AwsClientKey)
+	if ok {
+		return awsClientI.(*bedrockruntime.Client), nil
+	}
+	awsClient, err := awsClientFromKey(meta.Channel.Key)
+	if err != nil {
+		return nil, err
+	}
+	meta.Set(AwsClientKey, awsClient)
+	return awsClient, nil
+}
diff --git a/service/aiproxy/relay/adaptor/azure/constants.go b/service/aiproxy/relay/adaptor/azure/constants.go
index f0cc9694420d..1f0ac7c38b84 100644
--- a/service/aiproxy/relay/adaptor/azure/constants.go
+++ b/service/aiproxy/relay/adaptor/azure/constants.go
@@ -8,48 +8,48 @@ import (
 	"github.com/gin-gonic/gin"
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor/openai"
 	"github.com/labring/sealos/service/aiproxy/relay/meta"
+	"github.com/labring/sealos/service/aiproxy/relay/relaymode"
 )
 
 type Adaptor struct {
 	openai.Adaptor
 }
 
-// func (a *Adaptor) GetRequestURL(meta *meta.Meta) (string, error) {
-// 	switch meta.Mode {
-// 	case relaymode.ImagesGenerations:
-// 		// https://learn.microsoft.com/en-us/azure/ai-services/openai/dall-e-quickstart?tabs=dalle3%2Ccommand-line&pivots=rest-api
-// 		// https://{resource_name}.openai.azure.com/openai/deployments/dall-e-3/images/generations?api-version=2024-03-01-preview
-// 		return fmt.Sprintf("%s/openai/deployments/%s/images/generations?api-version=%s", meta.Channel.BaseURL, meta.ActualModelName, meta.Channel.Config.APIVersion), nil
-// 	case relaymode.AudioTranscription:
-// 		// https://learn.microsoft.com/en-us/azure/ai-services/openai/whisper-quickstart?tabs=command-line#rest-api
-// 		return fmt.Sprintf("%s/openai/deployments/%s/audio/transcriptions?api-version=%s", meta.Channel.BaseURL, meta.ActualModelName, meta.Channel.Config.APIVersion), nil
-// 	case relaymode.AudioSpeech:
-// 		// https://learn.microsoft.com/en-us/azure/ai-services/openai/text-to-speech-quickstart?tabs=command-line#rest-api
-// 		return fmt.Sprintf("%s/openai/deployments/%s/audio/speech?api-version=%s", meta.Channel.BaseURL, meta.ActualModelName, meta.Channel.Config.APIVersion), nil
-// 	}
-
-// 	// https://learn.microsoft.com/en-us/azure/cognitive-services/openai/chatgpt-quickstart?pivots=rest-api&tabs=command-line#rest-api
-// 	requestURL := strings.Split(meta.RequestURLPath, "?")[0]
-// 	requestURL = fmt.Sprintf("%s?api-version=%s", requestURL, meta.Channel.Config.APIVersion)
-// 	task := strings.TrimPrefix(requestURL, "/v1/")
-// 	model := strings.ReplaceAll(meta.ActualModelName, ".", "")
-// 	// https://github.com/labring/sealos/service/aiproxy/issues/1191
-// 	// {your endpoint}/openai/deployments/{your azure_model}/chat/completions?api-version={api_version}
-// 	requestURL = fmt.Sprintf("/openai/deployments/%s/%s", model, task)
-// 	return GetFullRequestURL(meta.Channel.BaseURL, requestURL), nil
-// }
-
-func GetFullRequestURL(baseURL string, requestURL string) string {
-	fullRequestURL := fmt.Sprintf("%s%s", baseURL, requestURL)
+func (a *Adaptor) GetBaseURL() string {
+	return "https://{resource_name}.openai.azure.com"
+}
 
-	if strings.HasPrefix(baseURL, "https://gateway.ai.cloudflare.com") {
-		fullRequestURL = fmt.Sprintf("%s%s", baseURL, strings.TrimPrefix(requestURL, "/v1"))
+func (a *Adaptor) GetRequestURL(meta *meta.Meta) (string, error) {
+	_, apiVersion, err := getTokenAndAPIVersion(meta.Channel.Key)
+	if err != nil {
+		return "", err
+	}
+	model := strings.ReplaceAll(meta.ActualModel, ".", "")
+	switch meta.Mode {
+	case relaymode.ImagesGenerations:
+		// https://learn.microsoft.com/en-us/azure/ai-services/openai/dall-e-quickstart?tabs=dalle3%2Ccommand-line&pivots=rest-api
+		// https://{resource_name}.openai.azure.com/openai/deployments/dall-e-3/images/generations?api-version=2024-03-01-preview
+		return fmt.Sprintf("%s/openai/deployments/%s/images/generations?api-version=%s", meta.Channel.BaseURL, model, apiVersion), nil
+	case relaymode.AudioTranscription:
+		// https://learn.microsoft.com/en-us/azure/ai-services/openai/whisper-quickstart?tabs=command-line#rest-api
+		return fmt.Sprintf("%s/openai/deployments/%s/audio/transcriptions?api-version=%s", meta.Channel.BaseURL, model, apiVersion), nil
+	case relaymode.AudioSpeech:
+		// https://learn.microsoft.com/en-us/azure/ai-services/openai/text-to-speech-quickstart?tabs=command-line#rest-api
+		return fmt.Sprintf("%s/openai/deployments/%s/audio/speech?api-version=%s", meta.Channel.BaseURL, model, apiVersion), nil
+	case relaymode.ChatCompletions:
+		// https://learn.microsoft.com/en-us/azure/cognitive-services/openai/chatgpt-quickstart?pivots=rest-api&tabs=command-line#rest-api
+		return fmt.Sprintf("%s/openai/deployments/%s/chat/completions?api-version=%s", meta.Channel.BaseURL, model, apiVersion), nil
+	default:
+		return "", fmt.Errorf("unsupported mode: %d", meta.Mode)
 	}
-	return fullRequestURL
 }
 
 func (a *Adaptor) SetupRequestHeader(meta *meta.Meta, _ *gin.Context, req *http.Request) error {
-	req.Header.Set("Api-Key", meta.Channel.Key)
+	token, _, err := getTokenAndAPIVersion(meta.Channel.Key)
+	if err != nil {
+		return err
+	}
+	req.Header.Set("Api-Key", token)
 	return nil
 }
 
diff --git a/service/aiproxy/relay/adaptor/azure/key.go b/service/aiproxy/relay/adaptor/azure/key.go
new file mode 100644
index 000000000000..7d4596b82d54
--- /dev/null
+++ b/service/aiproxy/relay/adaptor/azure/key.go
@@ -0,0 +1,33 @@
+package azure
+
+import (
+	"errors"
+	"strings"
+
+	"github.com/labring/sealos/service/aiproxy/relay/adaptor"
+)
+
+var _ adaptor.KeyValidator = (*Adaptor)(nil)
+
+func (a *Adaptor) ValidateKey(key string) error {
+	_, _, err := getTokenAndAPIVersion(key)
+	if err != nil {
+		return err
+	}
+	return nil
+}
+
+func (a *Adaptor) KeyHelp() string {
+	return "key or key|api-version"
+}
+
+func getTokenAndAPIVersion(key string) (string, string, error) {
+	split := strings.Split(key, "|")
+	if len(split) == 1 {
+		return key, "", nil
+	}
+	if len(split) != 2 {
+		return "", "", errors.New("invalid key format")
+	}
+	return split[0], split[1], nil
+}
diff --git a/service/aiproxy/relay/adaptor/baichuan/adaptor.go b/service/aiproxy/relay/adaptor/baichuan/adaptor.go
index 9a7a88adbf26..481ec07923ef 100644
--- a/service/aiproxy/relay/adaptor/baichuan/adaptor.go
+++ b/service/aiproxy/relay/adaptor/baichuan/adaptor.go
@@ -3,20 +3,16 @@ package baichuan
 import (
 	"github.com/labring/sealos/service/aiproxy/model"
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor/openai"
-	"github.com/labring/sealos/service/aiproxy/relay/meta"
 )
 
 type Adaptor struct {
 	openai.Adaptor
 }
 
-const baseURL = "https://api.baichuan-ai.com"
+const baseURL = "https://api.baichuan-ai.com/v1"
 
-func (a *Adaptor) GetRequestURL(meta *meta.Meta) (string, error) {
-	if meta.Channel.BaseURL == "" {
-		meta.Channel.BaseURL = baseURL
-	}
-	return a.Adaptor.GetRequestURL(meta)
+func (a *Adaptor) GetBaseURL() string {
+	return baseURL
 }
 
 func (a *Adaptor) GetModelList() []*model.ModelConfig {
diff --git a/service/aiproxy/relay/adaptor/baichuan/constants.go b/service/aiproxy/relay/adaptor/baichuan/constants.go
index 5cab26dcce5b..a3ad414927a3 100644
--- a/service/aiproxy/relay/adaptor/baichuan/constants.go
+++ b/service/aiproxy/relay/adaptor/baichuan/constants.go
@@ -7,18 +7,63 @@ import (
 
 var ModelList = []*model.ModelConfig{
 	{
-		Model: "Baichuan2-Turbo",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerBaichuan,
+		Model:       "Baichuan4-Turbo",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerBaichuan,
+		InputPrice:  0.015,
+		OutputPrice: 0.015,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(32768),
+		),
 	},
 	{
-		Model: "Baichuan2-Turbo-192k",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerBaichuan,
+		Model:       "Baichuan4-Air",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerBaichuan,
+		InputPrice:  0.00098,
+		OutputPrice: 0.00098,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(32768),
+		),
 	},
 	{
-		Model: "Baichuan-Text-Embedding",
-		Type:  relaymode.Embeddings,
-		Owner: model.ModelOwnerBaichuan,
+		Model:       "Baichuan4",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerBaichuan,
+		InputPrice:  0.1,
+		OutputPrice: 0.1,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(32768),
+		),
+	},
+	{
+		Model:       "Baichuan3-Turbo",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerBaichuan,
+		InputPrice:  0.012,
+		OutputPrice: 0.012,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(32768),
+		),
+	},
+	{
+		Model:       "Baichuan3-Turbo-128k",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerBaichuan,
+		InputPrice:  0.024,
+		OutputPrice: 0.024,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(131072),
+		),
+	},
+
+	{
+		Model:      "Baichuan-Text-Embedding",
+		Type:       relaymode.Embeddings,
+		Owner:      model.ModelOwnerBaichuan,
+		InputPrice: 0.0005,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxInputTokens(512),
+		),
 	},
 }
diff --git a/service/aiproxy/relay/adaptor/baidu/adaptor.go b/service/aiproxy/relay/adaptor/baidu/adaptor.go
index da6ed65d75bc..f2db94be4ae2 100644
--- a/service/aiproxy/relay/adaptor/baidu/adaptor.go
+++ b/service/aiproxy/relay/adaptor/baidu/adaptor.go
@@ -23,6 +23,10 @@ const (
 	baseURL = "https://aip.baidubce.com"
 )
 
+func (a *Adaptor) GetBaseURL() string {
+	return baseURL
+}
+
 // Get model-specific endpoint using map
 var modelEndpointMap = map[string]string{
 	"ERNIE-4.0-8K":         "completions_pro",
@@ -64,9 +68,9 @@ func (a *Adaptor) GetRequestURL(meta *meta.Meta) (string, error) {
 		pathSuffix = "text2image"
 	}
 
-	modelEndpoint, ok := modelEndpointMap[meta.ActualModelName]
+	modelEndpoint, ok := modelEndpointMap[meta.ActualModel]
 	if !ok {
-		modelEndpoint = strings.ToLower(meta.ActualModelName)
+		modelEndpoint = strings.ToLower(meta.ActualModel)
 	}
 
 	// Construct full URL
@@ -86,7 +90,7 @@ func (a *Adaptor) SetupRequestHeader(meta *meta.Meta, _ *gin.Context, req *http.
 	return nil
 }
 
-func (a *Adaptor) ConvertRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Reader, error) {
+func (a *Adaptor) ConvertRequest(meta *meta.Meta, req *http.Request) (string, http.Header, io.Reader, error) {
 	switch meta.Mode {
 	case relaymode.Embeddings:
 		meta.Set(openai.MetaEmbeddingsPatchInputToSlices, true)
diff --git a/service/aiproxy/relay/adaptor/baidu/constants.go b/service/aiproxy/relay/adaptor/baidu/constants.go
index 23a188be6d3f..55a9c3d616eb 100644
--- a/service/aiproxy/relay/adaptor/baidu/constants.go
+++ b/service/aiproxy/relay/adaptor/baidu/constants.go
@@ -12,9 +12,9 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerBaidu,
 		InputPrice:  0.004,
 		OutputPrice: 0.004,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 4800,
-		},
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(4800),
+		),
 	},
 
 	{
@@ -23,6 +23,7 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerBaidu,
 		InputPrice:  0.0005,
 		OutputPrice: 0,
+		RPM:         1200,
 	},
 	{
 		Model:       "bge-large-zh",
@@ -30,6 +31,7 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerBAAI,
 		InputPrice:  0.0005,
 		OutputPrice: 0,
+		RPM:         1200,
 	},
 	{
 		Model:       "bge-large-en",
@@ -37,6 +39,7 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerBAAI,
 		InputPrice:  0.0005,
 		OutputPrice: 0,
+		RPM:         1200,
 	},
 	{
 		Model:       "tao-8k",
@@ -44,6 +47,7 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerBaidu,
 		InputPrice:  0.0005,
 		OutputPrice: 0,
+		RPM:         1200,
 	},
 
 	{
@@ -52,6 +56,7 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerBaidu,
 		InputPrice:  0.0005,
 		OutputPrice: 0,
+		RPM:         1200,
 	},
 
 	{
diff --git a/service/aiproxy/relay/adaptor/baidu/embeddings.go b/service/aiproxy/relay/adaptor/baidu/embeddings.go
index 9071c871499f..49e73cb5d474 100644
--- a/service/aiproxy/relay/adaptor/baidu/embeddings.go
+++ b/service/aiproxy/relay/adaptor/baidu/embeddings.go
@@ -41,7 +41,7 @@ func EmbeddingsHandler(meta *meta.Meta, c *gin.Context, resp *http.Response) (*r
 	if err != nil {
 		return &baiduResponse.Usage, openai.ErrorWrapper(err, "unmarshal_response_body_failed", http.StatusInternalServerError)
 	}
-	respMap["model"] = meta.OriginModelName
+	respMap["model"] = meta.OriginModel
 	respMap["object"] = "list"
 
 	data, err := json.Marshal(respMap)
@@ -50,7 +50,7 @@ func EmbeddingsHandler(meta *meta.Meta, c *gin.Context, resp *http.Response) (*r
 	}
 	_, err = c.Writer.Write(data)
 	if err != nil {
-		log.Error("write response body failed: " + err.Error())
+		log.Warnf("write response body failed: %v", err)
 	}
 	return &baiduResponse.Usage, nil
 }
diff --git a/service/aiproxy/relay/adaptor/baidu/image.go b/service/aiproxy/relay/adaptor/baidu/image.go
index 1d7dc8470987..dc24b2f93999 100644
--- a/service/aiproxy/relay/adaptor/baidu/image.go
+++ b/service/aiproxy/relay/adaptor/baidu/image.go
@@ -55,7 +55,7 @@ func ImageHandler(_ *meta.Meta, c *gin.Context, resp *http.Response) (*model.Usa
 	}
 	_, err = c.Writer.Write(data)
 	if err != nil {
-		log.Error("write response body failed: " + err.Error())
+		log.Warnf("write response body failed: %v", err)
 	}
 	return usage, nil
 }
diff --git a/service/aiproxy/relay/adaptor/baidu/main.go b/service/aiproxy/relay/adaptor/baidu/main.go
index f68ecbc50192..e9fc9eae8ee0 100644
--- a/service/aiproxy/relay/adaptor/baidu/main.go
+++ b/service/aiproxy/relay/adaptor/baidu/main.go
@@ -41,12 +41,12 @@ type ChatRequest struct {
 	EnableCitation  bool             `json:"enable_citation,omitempty"`
 }
 
-func ConvertRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Reader, error) {
+func ConvertRequest(meta *meta.Meta, req *http.Request) (string, http.Header, io.Reader, error) {
 	request, err := utils.UnmarshalGeneralOpenAIRequest(req)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
-	request.Model = meta.ActualModelName
+	request.Model = meta.ActualModel
 	baiduRequest := ChatRequest{
 		Messages:        request.Messages,
 		Temperature:     request.Temperature,
@@ -81,9 +81,9 @@ func ConvertRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Reader,
 
 	data, err := json.Marshal(baiduRequest)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
-	return nil, bytes.NewReader(data), nil
+	return http.MethodPost, nil, bytes.NewReader(data), nil
 }
 
 func responseBaidu2OpenAI(response *ChatResponse) *openai.TextResponse {
@@ -93,7 +93,7 @@ func responseBaidu2OpenAI(response *ChatResponse) *openai.TextResponse {
 			Role:    "assistant",
 			Content: response.Result,
 		},
-		FinishReason: "stop",
+		FinishReason: constant.StopFinishReason,
 	}
 	fullTextResponse := openai.TextResponse{
 		ID:      response.ID,
@@ -117,7 +117,7 @@ func streamResponseBaidu2OpenAI(meta *meta.Meta, baiduResponse *ChatStreamRespon
 		ID:      baiduResponse.ID,
 		Object:  "chat.completion.chunk",
 		Created: baiduResponse.Created,
-		Model:   meta.OriginModelName,
+		Model:   meta.OriginModel,
 		Choices: []*openai.ChatCompletionsStreamResponseChoice{&choice},
 		Usage:   baiduResponse.Usage,
 	}
@@ -158,10 +158,7 @@ func StreamHandler(meta *meta.Meta, c *gin.Context, resp *http.Response) (*model
 			usage.CompletionTokens = baiduResponse.Usage.TotalTokens - baiduResponse.Usage.PromptTokens
 		}
 		response := streamResponseBaidu2OpenAI(meta, &baiduResponse)
-		err = render.ObjectData(c, response)
-		if err != nil {
-			log.Error("error rendering stream response: " + err.Error())
-		}
+		_ = render.ObjectData(c, response)
 	}
 
 	if err := scanner.Err(); err != nil {
@@ -185,7 +182,7 @@ func Handler(meta *meta.Meta, c *gin.Context, resp *http.Response) (*model.Usage
 		return nil, openai.ErrorWrapperWithMessage(baiduResponse.Error.ErrorMsg, "baidu_error_"+strconv.Itoa(baiduResponse.Error.ErrorCode), http.StatusInternalServerError)
 	}
 	fullTextResponse := responseBaidu2OpenAI(&baiduResponse)
-	fullTextResponse.Model = meta.OriginModelName
+	fullTextResponse.Model = meta.OriginModel
 	jsonResponse, err := json.Marshal(fullTextResponse)
 	if err != nil {
 		return nil, openai.ErrorWrapper(err, "marshal_response_body_failed", http.StatusInternalServerError)
diff --git a/service/aiproxy/relay/adaptor/baidu/rerank.go b/service/aiproxy/relay/adaptor/baidu/rerank.go
index fe81e9e84e01..d6666d002f98 100644
--- a/service/aiproxy/relay/adaptor/baidu/rerank.go
+++ b/service/aiproxy/relay/adaptor/baidu/rerank.go
@@ -56,7 +56,7 @@ func RerankHandler(_ *meta.Meta, c *gin.Context, resp *http.Response) (*model.Us
 	}
 	_, err = c.Writer.Write(jsonData)
 	if err != nil {
-		log.Error("write response body failed: " + err.Error())
+		log.Warnf("write response body failed: %v", err)
 	}
 	return &reRankResp.Usage, nil
 }
diff --git a/service/aiproxy/relay/adaptor/baidu/token.go b/service/aiproxy/relay/adaptor/baidu/token.go
index d1305dc2c756..605a203ae3e6 100644
--- a/service/aiproxy/relay/adaptor/baidu/token.go
+++ b/service/aiproxy/relay/adaptor/baidu/token.go
@@ -10,7 +10,7 @@ import (
 	"time"
 
 	json "github.com/json-iterator/go"
-	"github.com/labring/sealos/service/aiproxy/common/client"
+	"github.com/labring/sealos/service/aiproxy/relay/utils"
 	log "github.com/sirupsen/logrus"
 )
 
@@ -66,7 +66,7 @@ func getBaiduAccessTokenHelper(ctx context.Context, apiKey string) (*AccessToken
 	}
 	req.Header.Add("Content-Type", "application/json")
 	req.Header.Add("Accept", "application/json")
-	res, err := client.ImpatientHTTPClient.Do(req)
+	res, err := utils.DoRequest(req)
 	if err != nil {
 		return nil, err
 	}
diff --git a/service/aiproxy/relay/adaptor/baiduv2/adaptor.go b/service/aiproxy/relay/adaptor/baiduv2/adaptor.go
index f1c1c487f182..59b54981758e 100644
--- a/service/aiproxy/relay/adaptor/baiduv2/adaptor.go
+++ b/service/aiproxy/relay/adaptor/baiduv2/adaptor.go
@@ -7,43 +7,29 @@ import (
 	"net/http"
 	"strings"
 
+	"github.com/gin-gonic/gin"
 	"github.com/labring/sealos/service/aiproxy/model"
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor/openai"
 	"github.com/labring/sealos/service/aiproxy/relay/meta"
+	relaymodel "github.com/labring/sealos/service/aiproxy/relay/model"
 	"github.com/labring/sealos/service/aiproxy/relay/relaymode"
 	"github.com/labring/sealos/service/aiproxy/relay/utils"
-
-	"github.com/gin-gonic/gin"
-	relaymodel "github.com/labring/sealos/service/aiproxy/relay/model"
 )
 
 type Adaptor struct{}
 
 const (
-	baseURL = "https://qianfan.baidubce.com"
+	baseURL = "https://qianfan.baidubce.com/v2"
 )
 
+func (a *Adaptor) GetBaseURL() string {
+	return baseURL
+}
+
 // https://cloud.baidu.com/doc/WENXINWORKSHOP/s/Fm2vrveyu
 var v2ModelMap = map[string]string{
-	"ERNIE-4.0-8K-Latest":        "ernie-4.0-8k-latest",
-	"ERNIE-4.0-8K-Preview":       "ernie-4.0-8k-preview",
-	"ERNIE-4.0-8K":               "ernie-4.0-8k",
-	"ERNIE-4.0-Turbo-8K-Latest":  "ernie-4.0-turbo-8k-latest",
-	"ERNIE-4.0-Turbo-8K-Preview": "ernie-4.0-turbo-8k-preview",
-	"ERNIE-4.0-Turbo-8K":         "ernie-4.0-turbo-8k",
-	"ERNIE-4.0-Turbo-128K":       "ernie-4.0-turbo-128k",
-	"ERNIE-3.5-8K-Preview":       "ernie-3.5-8k-preview",
-	"ERNIE-3.5-8K":               "ernie-3.5-8k",
-	"ERNIE-3.5-128K":             "ernie-3.5-128k",
-	"ERNIE-Speed-8K":             "ernie-speed-8k",
-	"ERNIE-Speed-128K":           "ernie-speed-128k",
-	"ERNIE-Speed-Pro-128K":       "ernie-speed-pro-128k",
-	"ERNIE-Lite-8K":              "ernie-lite-8k",
-	"ERNIE-Lite-Pro-128K":        "ernie-lite-pro-128k",
-	"ERNIE-Tiny-8K":              "ernie-tiny-8k",
 	"ERNIE-Character-8K":         "ernie-char-8k",
 	"ERNIE-Character-Fiction-8K": "ernie-char-fiction-8k",
-	"ERNIE-Novel-8K":             "ernie-novel-8k",
 }
 
 func toV2ModelName(modelName string) string {
@@ -54,13 +40,9 @@ func toV2ModelName(modelName string) string {
 }
 
 func (a *Adaptor) GetRequestURL(meta *meta.Meta) (string, error) {
-	if meta.Channel.BaseURL == "" {
-		meta.Channel.BaseURL = baseURL
-	}
-
 	switch meta.Mode {
 	case relaymode.ChatCompletions:
-		return meta.Channel.BaseURL + "/v2/chat/completions", nil
+		return meta.Channel.BaseURL + "/chat/completions", nil
 	default:
 		return "", fmt.Errorf("unsupported mode: %d", meta.Mode)
 	}
@@ -75,16 +57,18 @@ func (a *Adaptor) SetupRequestHeader(meta *meta.Meta, _ *gin.Context, req *http.
 	return nil
 }
 
-func (a *Adaptor) ConvertRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Reader, error) {
+func (a *Adaptor) ConvertRequest(meta *meta.Meta, req *http.Request) (string, http.Header, io.Reader, error) {
 	switch meta.Mode {
 	case relaymode.ChatCompletions:
-		actModel := meta.ActualModelName
+		actModel := meta.ActualModel
 		v2Model := toV2ModelName(actModel)
-		meta.ActualModelName = v2Model
-		defer func() { meta.ActualModelName = actModel }()
+		if v2Model != actModel {
+			meta.ActualModel = v2Model
+			defer func() { meta.ActualModel = actModel }()
+		}
 		return openai.ConvertRequest(meta, req)
 	default:
-		return nil, nil, fmt.Errorf("unsupported mode: %d", meta.Mode)
+		return "", nil, nil, fmt.Errorf("unsupported mode: %d", meta.Mode)
 	}
 }
 
diff --git a/service/aiproxy/relay/adaptor/baiduv2/constants.go b/service/aiproxy/relay/adaptor/baiduv2/constants.go
index 7d11339a4405..61f6f21ef579 100644
--- a/service/aiproxy/relay/adaptor/baiduv2/constants.go
+++ b/service/aiproxy/relay/adaptor/baiduv2/constants.go
@@ -5,78 +5,92 @@ import (
 	"github.com/labring/sealos/service/aiproxy/relay/relaymode"
 )
 
+// https://cloud.baidu.com/doc/WENXINWORKSHOP/s/Fm2vrveyu
+
 var ModelList = []*model.ModelConfig{
 	{
-		Model:       "ERNIE-4.0-8K-Preview",
+		Model:       "ERNIE-4.0-8K-Latest",
 		Type:        relaymode.ChatCompletions,
 		Owner:       model.ModelOwnerBaidu,
 		InputPrice:  0.03,
 		OutputPrice: 0.09,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 5120,
-			model.ModelConfigMaxInputTokensKey:   5120,
-			model.ModelConfigMaxOutputTokensKey:  2048,
-		},
+		RPM:         120,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(5120),
+			model.WithModelConfigMaxInputTokens(5120),
+			model.WithModelConfigMaxOutputTokens(2048),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
-		Model:       "ERNIE-4.0-8K",
+		Model:       "ERNIE-4.0-8K-Preview",
 		Type:        relaymode.ChatCompletions,
 		Owner:       model.ModelOwnerBaidu,
 		InputPrice:  0.03,
 		OutputPrice: 0.09,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 5120,
-			model.ModelConfigMaxInputTokensKey:   5120,
-			model.ModelConfigMaxOutputTokensKey:  2048,
-		},
+		RPM:         300,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(5120),
+			model.WithModelConfigMaxInputTokens(5120),
+			model.WithModelConfigMaxOutputTokens(2048),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
-		Model:       "ERNIE-4.0-8K-Latest",
+		Model:       "ERNIE-4.0-8K",
 		Type:        relaymode.ChatCompletions,
 		Owner:       model.ModelOwnerBaidu,
 		InputPrice:  0.03,
 		OutputPrice: 0.09,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 5120,
-			model.ModelConfigMaxInputTokensKey:   5120,
-			model.ModelConfigMaxOutputTokensKey:  2048,
-		},
+		RPM:         10000,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(5120),
+			model.WithModelConfigMaxInputTokens(5120),
+			model.WithModelConfigMaxOutputTokens(2048),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
-		Model:       "ERNIE-4.0-Turbo-8K",
+		Model:       "ERNIE-4.0-Turbo-8K-Latest",
 		Type:        relaymode.ChatCompletions,
 		Owner:       model.ModelOwnerBaidu,
 		InputPrice:  0.02,
 		OutputPrice: 0.06,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 6144,
-			model.ModelConfigMaxInputTokensKey:   6144,
-			model.ModelConfigMaxOutputTokensKey:  2048,
-		},
+		RPM:         60,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(6144),
+			model.WithModelConfigMaxInputTokens(6144),
+			model.WithModelConfigMaxOutputTokens(2048),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
-		Model:       "ERNIE-4.0-Turbo-8K-Latest",
+		Model:       "ERNIE-4.0-Turbo-8K-Preview",
 		Type:        relaymode.ChatCompletions,
 		Owner:       model.ModelOwnerBaidu,
 		InputPrice:  0.02,
 		OutputPrice: 0.06,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 6144,
-			model.ModelConfigMaxInputTokensKey:   6144,
-			model.ModelConfigMaxOutputTokensKey:  2048,
-		},
+		RPM:         60,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(6144),
+			model.WithModelConfigMaxInputTokens(6144),
+			model.WithModelConfigMaxOutputTokens(2048),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
-		Model:       "ERNIE-4.0-Turbo-8K-Preview",
+		Model:       "ERNIE-4.0-Turbo-8K",
 		Type:        relaymode.ChatCompletions,
 		Owner:       model.ModelOwnerBaidu,
 		InputPrice:  0.02,
 		OutputPrice: 0.06,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 6144,
-			model.ModelConfigMaxInputTokensKey:   6144,
-			model.ModelConfigMaxOutputTokensKey:  2048,
-		},
+		RPM:         10000,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(6144),
+			model.WithModelConfigMaxInputTokens(6144),
+			model.WithModelConfigMaxOutputTokens(2048),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "ERNIE-4.0-Turbo-128K",
@@ -84,24 +98,27 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerBaidu,
 		InputPrice:  0.02,
 		OutputPrice: 0.06,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 126976,
-			model.ModelConfigMaxInputTokensKey:   126976,
-			model.ModelConfigMaxOutputTokensKey:  4096,
-		},
+		RPM:         60,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(126976),
+			model.WithModelConfigMaxInputTokens(126976),
+			model.WithModelConfigMaxOutputTokens(4096),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
-
 	{
 		Model:       "ERNIE-3.5-8K-Preview",
 		Type:        relaymode.ChatCompletions,
 		Owner:       model.ModelOwnerBaidu,
 		InputPrice:  0.0008,
 		OutputPrice: 0.002,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 5120,
-			model.ModelConfigMaxInputTokensKey:   5120,
-			model.ModelConfigMaxOutputTokensKey:  2048,
-		},
+		RPM:         300,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(5120),
+			model.WithModelConfigMaxInputTokens(5120),
+			model.WithModelConfigMaxOutputTokens(2048),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "ERNIE-3.5-8K",
@@ -109,11 +126,13 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerBaidu,
 		InputPrice:  0.0008,
 		OutputPrice: 0.002,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 5120,
-			model.ModelConfigMaxInputTokensKey:   5120,
-			model.ModelConfigMaxOutputTokensKey:  2048,
-		},
+		RPM:         10000,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(5120),
+			model.WithModelConfigMaxInputTokens(5120),
+			model.WithModelConfigMaxOutputTokens(2048),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "ERNIE-3.5-128K",
@@ -121,24 +140,26 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerBaidu,
 		InputPrice:  0.0008,
 		OutputPrice: 0.002,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 126976,
-			model.ModelConfigMaxInputTokensKey:   126976,
-			model.ModelConfigMaxOutputTokensKey:  4096,
-		},
+		RPM:         5000,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(126976),
+			model.WithModelConfigMaxInputTokens(126976),
+			model.WithModelConfigMaxOutputTokens(4096),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
-
 	{
 		Model:       "ERNIE-Speed-8K",
 		Type:        relaymode.ChatCompletions,
 		Owner:       model.ModelOwnerBaidu,
 		InputPrice:  0.0001,
 		OutputPrice: 0.0001,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 7168,
-			model.ModelConfigMaxInputTokensKey:   7168,
-			model.ModelConfigMaxOutputTokensKey:  2048,
-		},
+		RPM:         500,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(7168),
+			model.WithModelConfigMaxInputTokens(7168),
+			model.WithModelConfigMaxOutputTokens(2048),
+		),
 	},
 	{
 		Model:       "ERNIE-Speed-128K",
@@ -146,11 +167,12 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerBaidu,
 		InputPrice:  0.0001,
 		OutputPrice: 0.0001,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 126976,
-			model.ModelConfigMaxInputTokensKey:   126976,
-			model.ModelConfigMaxOutputTokensKey:  4096,
-		},
+		RPM:         500,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(126976),
+			model.WithModelConfigMaxInputTokens(126976),
+			model.WithModelConfigMaxOutputTokens(4096),
+		),
 	},
 	{
 		Model:       "ERNIE-Speed-Pro-128K",
@@ -158,24 +180,25 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerBaidu,
 		InputPrice:  0.0003,
 		OutputPrice: 0.0006,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 126976,
-			model.ModelConfigMaxInputTokensKey:   126976,
-			model.ModelConfigMaxOutputTokensKey:  4096,
-		},
+		RPM:         10000,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(126976),
+			model.WithModelConfigMaxInputTokens(126976),
+			model.WithModelConfigMaxOutputTokens(4096),
+		),
 	},
-
 	{
 		Model:       "ERNIE-Lite-8K",
 		Type:        relaymode.ChatCompletions,
 		Owner:       model.ModelOwnerBaidu,
 		InputPrice:  0.0001,
 		OutputPrice: 0.0001,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 6144,
-			model.ModelConfigMaxInputTokensKey:   6144,
-			model.ModelConfigMaxOutputTokensKey:  2048,
-		},
+		RPM:         500,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(6144),
+			model.WithModelConfigMaxInputTokens(6144),
+			model.WithModelConfigMaxOutputTokens(2048),
+		),
 	},
 	{
 		Model:       "ERNIE-Lite-Pro-128K",
@@ -183,37 +206,39 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerBaidu,
 		InputPrice:  0.0002,
 		OutputPrice: 0.0004,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 126976,
-			model.ModelConfigMaxInputTokensKey:   126976,
-			model.ModelConfigMaxOutputTokensKey:  4096,
-		},
+		RPM:         10000,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(126976),
+			model.WithModelConfigMaxInputTokens(126976),
+			model.WithModelConfigMaxOutputTokens(4096),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
-
 	{
 		Model:       "ERNIE-Tiny-8K",
 		Type:        relaymode.ChatCompletions,
 		Owner:       model.ModelOwnerBaidu,
 		InputPrice:  0.0001,
 		OutputPrice: 0.0001,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 6144,
-			model.ModelConfigMaxInputTokensKey:   6144,
-			model.ModelConfigMaxOutputTokensKey:  2048,
-		},
+		RPM:         10000,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(6144),
+			model.WithModelConfigMaxInputTokens(6144),
+			model.WithModelConfigMaxOutputTokens(2048),
+		),
 	},
-
 	{
 		Model:       "ERNIE-Character-8K",
 		Type:        relaymode.ChatCompletions,
 		Owner:       model.ModelOwnerBaidu,
 		InputPrice:  0.0003,
 		OutputPrice: 0.0006,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 6144,
-			model.ModelConfigMaxInputTokensKey:   6144,
-			model.ModelConfigMaxOutputTokensKey:  2048,
-		},
+		RPM:         60,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(6144),
+			model.WithModelConfigMaxInputTokens(6144),
+			model.WithModelConfigMaxOutputTokens(2048),
+		),
 	},
 	{
 		Model:       "ERNIE-Character-Fiction-8K",
@@ -221,23 +246,49 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerBaidu,
 		InputPrice:  0.0003,
 		OutputPrice: 0.0006,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 5120,
-			model.ModelConfigMaxInputTokensKey:   5120,
-			model.ModelConfigMaxOutputTokensKey:  2048,
-		},
+		RPM:         300,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(5120),
+			model.WithModelConfigMaxInputTokens(5120),
+			model.WithModelConfigMaxOutputTokens(2048),
+		),
 	},
-
 	{
 		Model:       "ERNIE-Novel-8K",
 		Type:        relaymode.ChatCompletions,
 		Owner:       model.ModelOwnerBaidu,
 		InputPrice:  0.04,
 		OutputPrice: 0.12,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 6144,
-			model.ModelConfigMaxInputTokensKey:   6144,
-			model.ModelConfigMaxOutputTokensKey:  2048,
-		},
+		RPM:         60,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(6144),
+			model.WithModelConfigMaxInputTokens(6144),
+			model.WithModelConfigMaxOutputTokens(2048),
+		),
+	},
+
+	{
+		Model:       "DeepSeek-V3",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerDeepSeek,
+		InputPrice:  0.0008,
+		OutputPrice: 0.0016,
+		RPM:         1000,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(64000),
+			model.WithModelConfigMaxOutputTokens(8192),
+		),
+	},
+	{
+		Model:       "DeepSeek-R1",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerDeepSeek,
+		InputPrice:  0.002,
+		OutputPrice: 0.008,
+		RPM:         1000,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(64000),
+			model.WithModelConfigMaxOutputTokens(8192),
+		),
 	},
 }
diff --git a/service/aiproxy/relay/adaptor/cloudflare/adaptor.go b/service/aiproxy/relay/adaptor/cloudflare/adaptor.go
index 42c661428373..47a80e8e66d0 100644
--- a/service/aiproxy/relay/adaptor/cloudflare/adaptor.go
+++ b/service/aiproxy/relay/adaptor/cloudflare/adaptor.go
@@ -16,6 +16,10 @@ type Adaptor struct {
 
 const baseURL = "https://api.cloudflare.com"
 
+func (a *Adaptor) GetBaseURL() string {
+	return baseURL
+}
+
 // WorkerAI cannot be used across accounts with AIGateWay
 // https://developers.cloudflare.com/ai-gateway/providers/workersai/#openai-compatible-endpoints
 // https://gateway.ai.cloudflare.com/v1/{account_id}/{gateway_id}/workers-ai
@@ -25,15 +29,12 @@ func isAIGateWay(baseURL string) bool {
 
 func (a *Adaptor) GetRequestURL(meta *meta.Meta) (string, error) {
 	u := meta.Channel.BaseURL
-	if u == "" {
-		u = baseURL
-	}
 	isAIGateWay := isAIGateWay(u)
 	var urlPrefix string
 	if isAIGateWay {
 		urlPrefix = u
 	} else {
-		urlPrefix = fmt.Sprintf("%s/client/v4/accounts/%s/ai", u, meta.Channel.Config.UserID)
+		urlPrefix = fmt.Sprintf("%s/client/v4/accounts/%s/ai", u, meta.Channel.Key)
 	}
 
 	switch meta.Mode {
@@ -43,9 +44,9 @@ func (a *Adaptor) GetRequestURL(meta *meta.Meta) (string, error) {
 		return urlPrefix + "/v1/embeddings", nil
 	default:
 		if isAIGateWay {
-			return fmt.Sprintf("%s/%s", urlPrefix, meta.ActualModelName), nil
+			return fmt.Sprintf("%s/%s", urlPrefix, meta.ActualModel), nil
 		}
-		return fmt.Sprintf("%s/run/%s", urlPrefix, meta.ActualModelName), nil
+		return fmt.Sprintf("%s/run/%s", urlPrefix, meta.ActualModel), nil
 	}
 }
 
diff --git a/service/aiproxy/relay/adaptor/cohere/adaptor.go b/service/aiproxy/relay/adaptor/cohere/adaptor.go
index 93882964de4c..f3691c3436f2 100644
--- a/service/aiproxy/relay/adaptor/cohere/adaptor.go
+++ b/service/aiproxy/relay/adaptor/cohere/adaptor.go
@@ -20,12 +20,12 @@ type Adaptor struct{}
 
 const baseURL = "https://api.cohere.ai"
 
+func (a *Adaptor) GetBaseURL() string {
+	return baseURL
+}
+
 func (a *Adaptor) GetRequestURL(meta *meta.Meta) (string, error) {
-	u := meta.Channel.BaseURL
-	if u == "" {
-		u = baseURL
-	}
-	return u + "/v1/chat", nil
+	return meta.Channel.BaseURL + "/v1/chat", nil
 }
 
 func (a *Adaptor) SetupRequestHeader(meta *meta.Meta, _ *gin.Context, req *http.Request) error {
@@ -33,21 +33,21 @@ func (a *Adaptor) SetupRequestHeader(meta *meta.Meta, _ *gin.Context, req *http.
 	return nil
 }
 
-func (a *Adaptor) ConvertRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Reader, error) {
+func (a *Adaptor) ConvertRequest(meta *meta.Meta, req *http.Request) (string, http.Header, io.Reader, error) {
 	request, err := utils.UnmarshalGeneralOpenAIRequest(req)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
-	request.Model = meta.ActualModelName
+	request.Model = meta.ActualModel
 	requestBody := ConvertRequest(request)
 	if requestBody == nil {
-		return nil, nil, errors.New("request body is nil")
+		return "", nil, nil, errors.New("request body is nil")
 	}
 	data, err := json.Marshal(requestBody)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
-	return nil, bytes.NewReader(data), nil
+	return http.MethodPost, nil, bytes.NewReader(data), nil
 }
 
 func (a *Adaptor) DoRequest(_ *meta.Meta, _ *gin.Context, req *http.Request) (*http.Response, error) {
@@ -62,7 +62,7 @@ func (a *Adaptor) DoResponse(meta *meta.Meta, c *gin.Context, resp *http.Respons
 		if utils.IsStreamResponse(resp) {
 			err, usage = StreamHandler(c, resp)
 		} else {
-			err, usage = Handler(c, resp, meta.PromptTokens, meta.ActualModelName)
+			err, usage = Handler(c, resp, meta.InputTokens, meta.ActualModel)
 		}
 	}
 	return
diff --git a/service/aiproxy/relay/adaptor/cohere/main.go b/service/aiproxy/relay/adaptor/cohere/main.go
index 61a65c51f42d..fbc076f2df91 100644
--- a/service/aiproxy/relay/adaptor/cohere/main.go
+++ b/service/aiproxy/relay/adaptor/cohere/main.go
@@ -5,16 +5,16 @@ import (
 	"fmt"
 	"net/http"
 	"strings"
+	"time"
 
+	"github.com/gin-gonic/gin"
 	json "github.com/json-iterator/go"
+	"github.com/labring/sealos/service/aiproxy/common"
 	"github.com/labring/sealos/service/aiproxy/common/conv"
 	"github.com/labring/sealos/service/aiproxy/common/render"
 	"github.com/labring/sealos/service/aiproxy/middleware"
-
-	"github.com/gin-gonic/gin"
-	"github.com/labring/sealos/service/aiproxy/common"
-	"github.com/labring/sealos/service/aiproxy/common/helper"
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor/openai"
+	"github.com/labring/sealos/service/aiproxy/relay/constant"
 	"github.com/labring/sealos/service/aiproxy/relay/model"
 )
 
@@ -26,7 +26,7 @@ func stopReasonCohere2OpenAI(reason *string) string {
 	}
 	switch *reason {
 	case "COMPLETE":
-		return "stop"
+		return constant.StopFinishReason
 	default:
 		return *reason
 	}
@@ -125,7 +125,7 @@ func ResponseCohere2OpenAI(cohereResponse *Response) *openai.TextResponse {
 		ID:      "chatcmpl-" + cohereResponse.ResponseID,
 		Model:   "model",
 		Object:  "chat.completion",
-		Created: helper.GetTimestamp(),
+		Created: time.Now().Unix(),
 		Choices: []*openai.TextResponseChoice{&choice},
 	}
 	return &fullTextResponse
@@ -136,7 +136,7 @@ func StreamHandler(c *gin.Context, resp *http.Response) (*model.ErrorWithStatusC
 
 	log := middleware.GetLogger(c)
 
-	createdTime := helper.GetTimestamp()
+	createdTime := time.Now().Unix()
 	scanner := bufio.NewScanner(resp.Body)
 	scanner.Split(bufio.ScanLines)
 
@@ -168,10 +168,7 @@ func StreamHandler(c *gin.Context, resp *http.Response) (*model.ErrorWithStatusC
 		response.Model = c.GetString("original_model")
 		response.Created = createdTime
 
-		err = render.ObjectData(c, response)
-		if err != nil {
-			log.Error("error rendering stream response: " + err.Error())
-		}
+		_ = render.ObjectData(c, response)
 	}
 
 	if err := scanner.Err(); err != nil {
diff --git a/service/aiproxy/relay/adaptor/coze/adaptor.go b/service/aiproxy/relay/adaptor/coze/adaptor.go
index c322d302638d..50687f4f8802 100644
--- a/service/aiproxy/relay/adaptor/coze/adaptor.go
+++ b/service/aiproxy/relay/adaptor/coze/adaptor.go
@@ -5,6 +5,7 @@ import (
 	"errors"
 	"io"
 	"net/http"
+	"strings"
 
 	"github.com/gin-gonic/gin"
 	json "github.com/json-iterator/go"
@@ -12,6 +13,7 @@ import (
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor/openai"
 	"github.com/labring/sealos/service/aiproxy/relay/meta"
 	relaymodel "github.com/labring/sealos/service/aiproxy/relay/model"
+	"github.com/labring/sealos/service/aiproxy/relay/relaymode"
 	"github.com/labring/sealos/service/aiproxy/relay/utils"
 )
 
@@ -19,42 +21,58 @@ type Adaptor struct{}
 
 const baseURL = "https://api.coze.com"
 
+func (a *Adaptor) GetBaseURL() string {
+	return baseURL
+}
+
 func (a *Adaptor) GetRequestURL(meta *meta.Meta) (string, error) {
-	u := meta.Channel.BaseURL
-	if u == "" {
-		u = baseURL
-	}
-	return u + "/open_api/v2/chat", nil
+	return meta.Channel.BaseURL + "/open_api/v2/chat", nil
 }
 
 func (a *Adaptor) SetupRequestHeader(meta *meta.Meta, _ *gin.Context, req *http.Request) error {
-	req.Header.Set("Authorization", "Bearer "+meta.Channel.Key)
+	token, _, err := getTokenAndUserID(meta.Channel.Key)
+	if err != nil {
+		return err
+	}
+	req.Header.Set("Authorization", "Bearer "+token)
 	return nil
 }
 
-func (a *Adaptor) ConvertRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Reader, error) {
+func (a *Adaptor) ConvertRequest(meta *meta.Meta, req *http.Request) (string, http.Header, io.Reader, error) {
+	if meta.Mode != relaymode.ChatCompletions {
+		return "", nil, nil, errors.New("coze only support chat completions")
+	}
 	request, err := utils.UnmarshalGeneralOpenAIRequest(req)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
-	request.User = meta.Channel.Config.UserID
-	request.Model = meta.ActualModelName
-	requestBody := ConvertRequest(request)
-	if requestBody == nil {
-		return nil, nil, errors.New("request body is nil")
-	}
-	data, err := json.Marshal(requestBody)
+	_, userID, err := getTokenAndUserID(meta.Channel.Key)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
-	return nil, bytes.NewReader(data), nil
-}
-
-func (a *Adaptor) ConvertImageRequest(request *relaymodel.ImageRequest) (any, error) {
-	if request == nil {
-		return nil, errors.New("request is nil")
+	request.User = userID
+	request.Model = meta.ActualModel
+	cozeRequest := Request{
+		Stream: request.Stream,
+		User:   request.User,
+		BotID:  strings.TrimPrefix(meta.ActualModel, "bot-"),
+	}
+	for i, message := range request.Messages {
+		if i == len(request.Messages)-1 {
+			cozeRequest.Query = message.StringContent()
+			continue
+		}
+		cozeMessage := Message{
+			Role:    message.Role,
+			Content: message.StringContent(),
+		}
+		cozeRequest.ChatHistory = append(cozeRequest.ChatHistory, cozeMessage)
+	}
+	data, err := json.Marshal(cozeRequest)
+	if err != nil {
+		return "", nil, nil, err
 	}
-	return request, nil
+	return http.MethodPost, nil, bytes.NewReader(data), nil
 }
 
 func (a *Adaptor) DoRequest(_ *meta.Meta, _ *gin.Context, req *http.Request) (*http.Response, error) {
@@ -66,14 +84,14 @@ func (a *Adaptor) DoResponse(meta *meta.Meta, c *gin.Context, resp *http.Respons
 	if utils.IsStreamResponse(resp) {
 		err, responseText = StreamHandler(c, resp)
 	} else {
-		err, responseText = Handler(c, resp, meta.PromptTokens, meta.ActualModelName)
+		err, responseText = Handler(c, resp, meta.InputTokens, meta.ActualModel)
 	}
 	if responseText != nil {
-		usage = openai.ResponseText2Usage(*responseText, meta.ActualModelName, meta.PromptTokens)
+		usage = openai.ResponseText2Usage(*responseText, meta.ActualModel, meta.InputTokens)
 	} else {
 		usage = &relaymodel.Usage{}
 	}
-	usage.PromptTokens = meta.PromptTokens
+	usage.PromptTokens = meta.InputTokens
 	usage.TotalTokens = usage.PromptTokens + usage.CompletionTokens
 	return
 }
diff --git a/service/aiproxy/relay/adaptor/coze/key.go b/service/aiproxy/relay/adaptor/coze/key.go
new file mode 100644
index 000000000000..5440e4f0ab5a
--- /dev/null
+++ b/service/aiproxy/relay/adaptor/coze/key.go
@@ -0,0 +1,30 @@
+package coze
+
+import (
+	"errors"
+	"strings"
+
+	"github.com/labring/sealos/service/aiproxy/relay/adaptor"
+)
+
+var _ adaptor.KeyValidator = (*Adaptor)(nil)
+
+func (a *Adaptor) ValidateKey(key string) error {
+	_, _, err := getTokenAndUserID(key)
+	if err != nil {
+		return err
+	}
+	return nil
+}
+
+func (a *Adaptor) KeyHelp() string {
+	return "token|user_id"
+}
+
+func getTokenAndUserID(key string) (string, string, error) {
+	split := strings.Split(key, "|")
+	if len(split) != 2 {
+		return "", "", errors.New("invalid key format")
+	}
+	return split[0], split[1], nil
+}
diff --git a/service/aiproxy/relay/adaptor/coze/main.go b/service/aiproxy/relay/adaptor/coze/main.go
index be7ce381e7cc..d2b644f3c403 100644
--- a/service/aiproxy/relay/adaptor/coze/main.go
+++ b/service/aiproxy/relay/adaptor/coze/main.go
@@ -3,18 +3,17 @@ package coze
 import (
 	"bufio"
 	"net/http"
-	"strings"
-
-	json "github.com/json-iterator/go"
-	"github.com/labring/sealos/service/aiproxy/common/render"
-	"github.com/labring/sealos/service/aiproxy/middleware"
+	"time"
 
 	"github.com/gin-gonic/gin"
+	json "github.com/json-iterator/go"
 	"github.com/labring/sealos/service/aiproxy/common"
 	"github.com/labring/sealos/service/aiproxy/common/conv"
-	"github.com/labring/sealos/service/aiproxy/common/helper"
+	"github.com/labring/sealos/service/aiproxy/common/render"
+	"github.com/labring/sealos/service/aiproxy/middleware"
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor/coze/constant/messagetype"
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor/openai"
+	"github.com/labring/sealos/service/aiproxy/relay/constant"
 	"github.com/labring/sealos/service/aiproxy/relay/model"
 )
 
@@ -36,26 +35,6 @@ func stopReasonCoze2OpenAI(reason *string) string {
 	}
 }
 
-func ConvertRequest(textRequest *model.GeneralOpenAIRequest) *Request {
-	cozeRequest := Request{
-		Stream: textRequest.Stream,
-		User:   textRequest.User,
-		BotID:  strings.TrimPrefix(textRequest.Model, "bot-"),
-	}
-	for i, message := range textRequest.Messages {
-		if i == len(textRequest.Messages)-1 {
-			cozeRequest.Query = message.StringContent()
-			continue
-		}
-		cozeMessage := Message{
-			Role:    message.Role,
-			Content: message.StringContent(),
-		}
-		cozeRequest.ChatHistory = append(cozeRequest.ChatHistory, cozeMessage)
-	}
-	return &cozeRequest
-}
-
 func StreamResponseCoze2OpenAI(cozeResponse *StreamResponse) (*openai.ChatCompletionsStreamResponse, *Response) {
 	var response *Response
 	var stopReason string
@@ -94,13 +73,13 @@ func ResponseCoze2OpenAI(cozeResponse *Response) *openai.TextResponse {
 			Content: responseText,
 			Name:    nil,
 		},
-		FinishReason: "stop",
+		FinishReason: constant.StopFinishReason,
 	}
 	fullTextResponse := openai.TextResponse{
 		ID:      "chatcmpl-" + cozeResponse.ConversationID,
 		Model:   "coze-bot",
 		Object:  "chat.completion",
-		Created: helper.GetTimestamp(),
+		Created: time.Now().Unix(),
 		Choices: []*openai.TextResponseChoice{&choice},
 	}
 	return &fullTextResponse
@@ -112,7 +91,7 @@ func StreamHandler(c *gin.Context, resp *http.Response) (*model.ErrorWithStatusC
 	log := middleware.GetLogger(c)
 
 	var responseText string
-	createdTime := helper.GetTimestamp()
+	createdTime := time.Now().Unix()
 	scanner := bufio.NewScanner(resp.Body)
 	scanner.Split(bufio.ScanLines)
 
@@ -148,10 +127,7 @@ func StreamHandler(c *gin.Context, resp *http.Response) (*model.ErrorWithStatusC
 		response.Model = modelName
 		response.Created = createdTime
 
-		err = render.ObjectData(c, response)
-		if err != nil {
-			log.Error("error rendering stream response: " + err.Error())
-		}
+		_ = render.ObjectData(c, response)
 	}
 
 	if err := scanner.Err(); err != nil {
@@ -192,7 +168,7 @@ func Handler(c *gin.Context, resp *http.Response, _ int, modelName string) (*mod
 	c.Writer.WriteHeader(resp.StatusCode)
 	_, err = c.Writer.Write(jsonResponse)
 	if err != nil {
-		log.Error("write response body failed: " + err.Error())
+		log.Warnf("write response body failed: %v", err)
 	}
 	var responseText string
 	if len(fullTextResponse.Choices) > 0 {
diff --git a/service/aiproxy/relay/adaptor/deepseek/adaptor.go b/service/aiproxy/relay/adaptor/deepseek/adaptor.go
index 4acb32802b03..5ed5cd32be2f 100644
--- a/service/aiproxy/relay/adaptor/deepseek/adaptor.go
+++ b/service/aiproxy/relay/adaptor/deepseek/adaptor.go
@@ -4,7 +4,6 @@ import (
 	"github.com/labring/sealos/service/aiproxy/model"
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor"
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor/openai"
-	"github.com/labring/sealos/service/aiproxy/relay/meta"
 )
 
 var _ adaptor.Adaptor = (*Adaptor)(nil)
@@ -13,13 +12,10 @@ type Adaptor struct {
 	openai.Adaptor
 }
 
-const baseURL = "https://api.deepseek.com"
+const baseURL = "https://api.deepseek.com/v1"
 
-func (a *Adaptor) GetRequestURL(meta *meta.Meta) (string, error) {
-	if meta.Channel.BaseURL == "" {
-		meta.Channel.BaseURL = baseURL
-	}
-	return a.Adaptor.GetRequestURL(meta)
+func (a *Adaptor) GetBaseURL() string {
+	return baseURL
 }
 
 func (a *Adaptor) GetModelList() []*model.ModelConfig {
diff --git a/service/aiproxy/relay/adaptor/deepseek/balance.go b/service/aiproxy/relay/adaptor/deepseek/balance.go
index 34ca472ac980..0d990adeb617 100644
--- a/service/aiproxy/relay/adaptor/deepseek/balance.go
+++ b/service/aiproxy/relay/adaptor/deepseek/balance.go
@@ -7,12 +7,11 @@ import (
 	"strconv"
 
 	json "github.com/json-iterator/go"
-
 	"github.com/labring/sealos/service/aiproxy/model"
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor"
 )
 
-var _ adaptor.GetBalance = (*Adaptor)(nil)
+var _ adaptor.Balancer = (*Adaptor)(nil)
 
 func (a *Adaptor) GetBalance(channel *model.Channel) (float64, error) {
 	u := channel.BaseURL
diff --git a/service/aiproxy/relay/adaptor/deepseek/constants.go b/service/aiproxy/relay/adaptor/deepseek/constants.go
index 6271cb354eb0..33b7f30a7b40 100644
--- a/service/aiproxy/relay/adaptor/deepseek/constants.go
+++ b/service/aiproxy/relay/adaptor/deepseek/constants.go
@@ -12,14 +12,24 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerDeepSeek,
 		InputPrice:  0.001,
 		OutputPrice: 0.002,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxInputTokensKey:  64000,
-			model.ModelConfigMaxOutputTokensKey: 4096,
-		},
+		RPM:         10000,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(64000),
+			model.WithModelConfigMaxOutputTokens(8192),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
+
 	{
-		Model: "deepseek-coder",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerDeepSeek,
+		Model:       "deepseek-reasoner",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerDeepSeek,
+		InputPrice:  0.004,
+		OutputPrice: 0.016,
+		RPM:         10000,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(64000),
+			model.WithModelConfigMaxOutputTokens(8192),
+		),
 	},
 }
diff --git a/service/aiproxy/relay/adaptor/doubao/constants.go b/service/aiproxy/relay/adaptor/doubao/constants.go
index d90289c852d6..75f56506c8d7 100644
--- a/service/aiproxy/relay/adaptor/doubao/constants.go
+++ b/service/aiproxy/relay/adaptor/doubao/constants.go
@@ -8,16 +8,93 @@ import (
 // https://console.volcengine.com/ark/region:ark+cn-beijing/model
 
 var ModelList = []*model.ModelConfig{
+	{
+		Model:       "Doubao-1.5-vision-pro-32k",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerDoubao,
+		InputPrice:  0.003,
+		OutputPrice: 0.009,
+		RPM:         15000,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxInputTokens(32768),
+			model.WithModelConfigVision(true),
+		),
+	},
+	{
+		Model:       "Doubao-1.5-pro-32k",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerDoubao,
+		InputPrice:  0.0008,
+		OutputPrice: 0.0020,
+		RPM:         15000,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxInputTokens(32768),
+			model.WithModelConfigMaxOutputTokens(4096),
+			model.WithModelConfigToolChoice(true),
+		),
+	},
+	{
+		Model:       "Doubao-1.5-pro-256k",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerDoubao,
+		InputPrice:  0.005,
+		OutputPrice: 0.009,
+		RPM:         2000,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(256000),
+			model.WithModelConfigMaxOutputTokens(12000),
+			model.WithModelConfigToolChoice(true),
+		),
+	},
+	{
+		Model:       "Doubao-1.5-lite-32k",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerDoubao,
+		InputPrice:  0.0003,
+		OutputPrice: 0.0006,
+		RPM:         15000,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(32768),
+			model.WithModelConfigMaxOutputTokens(4096),
+			model.WithModelConfigToolChoice(true),
+		),
+	},
+
+	{
+		Model:       "Doubao-vision-lite-32k",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerDoubao,
+		InputPrice:  0.008,
+		OutputPrice: 0.008,
+		RPM:         15000,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxInputTokens(32768),
+			model.WithModelConfigVision(true),
+		),
+	},
+	{
+		Model:       "Doubao-vision-pro-32k",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerDoubao,
+		InputPrice:  0.02,
+		OutputPrice: 0.02,
+		RPM:         15000,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxInputTokens(32768),
+			model.WithModelConfigVision(true),
+		),
+	},
 	{
 		Model:       "Doubao-pro-256k",
 		Type:        relaymode.ChatCompletions,
 		Owner:       model.ModelOwnerDoubao,
 		InputPrice:  0.0050,
 		OutputPrice: 0.0090,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 256000,
-			model.ModelConfigMaxOutputTokensKey:  4096,
-		},
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(256000),
+			model.WithModelConfigMaxOutputTokens(4096),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "Doubao-pro-128k",
@@ -25,10 +102,12 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerDoubao,
 		InputPrice:  0.0050,
 		OutputPrice: 0.0090,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 128000,
-			model.ModelConfigMaxOutputTokensKey:  4096,
-		},
+		RPM:         1000,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(128000),
+			model.WithModelConfigMaxOutputTokens(4096),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "Doubao-pro-32k",
@@ -36,10 +115,12 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerDoubao,
 		InputPrice:  0.0008,
 		OutputPrice: 0.0020,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 32768,
-			model.ModelConfigMaxOutputTokensKey:  4096,
-		},
+		RPM:         15000,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(32768),
+			model.WithModelConfigMaxOutputTokens(4096),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "Doubao-pro-4k",
@@ -47,10 +128,12 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerDoubao,
 		InputPrice:  0.0008,
 		OutputPrice: 0.0020,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 4096,
-			model.ModelConfigMaxOutputTokensKey:  4096,
-		},
+		RPM:         10000,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(4096),
+			model.WithModelConfigMaxOutputTokens(4096),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "Doubao-lite-128k",
@@ -58,10 +141,12 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerDoubao,
 		InputPrice:  0.0008,
 		OutputPrice: 0.0010,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 128000,
-			model.ModelConfigMaxOutputTokensKey:  4096,
-		},
+		RPM:         15000,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(128000),
+			model.WithModelConfigMaxOutputTokens(4096),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "Doubao-lite-32k",
@@ -69,10 +154,12 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerDoubao,
 		InputPrice:  0.0003,
 		OutputPrice: 0.0006,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 32768,
-			model.ModelConfigMaxOutputTokensKey:  4096,
-		},
+		RPM:         15000,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(32768),
+			model.WithModelConfigMaxOutputTokens(4096),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "Doubao-lite-4k",
@@ -80,10 +167,12 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerDoubao,
 		InputPrice:  0.0003,
 		OutputPrice: 0.0006,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 4096,
-			model.ModelConfigMaxOutputTokensKey:  4096,
-		},
+		RPM:         10000,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(4096),
+			model.WithModelConfigMaxOutputTokens(4096),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 
 	{
@@ -91,17 +180,19 @@ var ModelList = []*model.ModelConfig{
 		Type:       relaymode.Embeddings,
 		Owner:      model.ModelOwnerDoubao,
 		InputPrice: 0.0005,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxInputTokensKey: 4096,
-		},
+		RPM:        1200,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxInputTokens(4096),
+		),
 	},
 	{
 		Model:      "Doubao-embedding-large",
 		Type:       relaymode.Embeddings,
 		Owner:      model.ModelOwnerDoubao,
 		InputPrice: 0.0007,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxInputTokensKey: 4096,
-		},
+		RPM:        1000,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxInputTokens(4096),
+		),
 	},
 }
diff --git a/service/aiproxy/relay/adaptor/doubao/main.go b/service/aiproxy/relay/adaptor/doubao/main.go
index 9d4b7eb42da5..debe1bac0fd9 100644
--- a/service/aiproxy/relay/adaptor/doubao/main.go
+++ b/service/aiproxy/relay/adaptor/doubao/main.go
@@ -1,23 +1,26 @@
 package doubao
 
 import (
+	"bytes"
+	"errors"
 	"fmt"
+	"io"
+	"net/http"
 	"strings"
 
+	json "github.com/json-iterator/go"
 	"github.com/labring/sealos/service/aiproxy/model"
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor/openai"
 	"github.com/labring/sealos/service/aiproxy/relay/meta"
+	relaymodel "github.com/labring/sealos/service/aiproxy/relay/model"
 	"github.com/labring/sealos/service/aiproxy/relay/relaymode"
 )
 
 func GetRequestURL(meta *meta.Meta) (string, error) {
 	u := meta.Channel.BaseURL
-	if u == "" {
-		u = baseURL
-	}
 	switch meta.Mode {
 	case relaymode.ChatCompletions:
-		if strings.HasPrefix(meta.ActualModelName, "bot-") {
+		if strings.HasPrefix(meta.ActualModel, "bot-") {
 			return u + "/api/v3/bots/chat/completions", nil
 		}
 		return u + "/api/v3/chat/completions", nil
@@ -34,6 +37,10 @@ type Adaptor struct {
 
 const baseURL = "https://ark.cn-beijing.volces.com"
 
+func (a *Adaptor) GetBaseURL() string {
+	return baseURL
+}
+
 func (a *Adaptor) GetModelList() []*model.ModelConfig {
 	return ModelList
 }
@@ -42,6 +49,38 @@ func (a *Adaptor) GetRequestURL(meta *meta.Meta) (string, error) {
 	return GetRequestURL(meta)
 }
 
+func (a *Adaptor) ConvertRequest(meta *meta.Meta, req *http.Request) (string, http.Header, io.Reader, error) {
+	method, header, body, err := a.Adaptor.ConvertRequest(meta, req)
+	if err != nil {
+		return "", nil, nil, err
+	}
+	if meta.Mode != relaymode.ChatCompletions || meta.OriginModel != "deepseek-reasoner" {
+		return method, header, body, nil
+	}
+
+	m := make(map[string]any)
+	err = json.NewDecoder(body).Decode(&m)
+	if err != nil {
+		return "", nil, nil, err
+	}
+	messages, _ := m["messages"].([]any)
+	if len(messages) == 0 {
+		return "", nil, nil, errors.New("messages is empty")
+	}
+	sysMessage := relaymodel.Message{
+		Role:    "system",
+		Content: "回答前，都先用 <think></think> 输出你的思考过程。",
+	}
+	messages = append([]any{sysMessage}, messages...)
+	m["messages"] = messages
+	newBody, err := json.Marshal(m)
+	if err != nil {
+		return "", nil, nil, err
+	}
+
+	return method, header, bytes.NewReader(newBody), nil
+}
+
 func (a *Adaptor) GetChannelName() string {
 	return "doubao"
 }
diff --git a/service/aiproxy/relay/adaptor/doubaoaudio/constants.go b/service/aiproxy/relay/adaptor/doubaoaudio/constants.go
index 0dcc1566aca1..f56d43db20d1 100644
--- a/service/aiproxy/relay/adaptor/doubaoaudio/constants.go
+++ b/service/aiproxy/relay/adaptor/doubaoaudio/constants.go
@@ -13,14 +13,15 @@ var ModelList = []*model.ModelConfig{
 		Type:       relaymode.AudioSpeech,
 		Owner:      model.ModelOwnerDoubao,
 		InputPrice: 0.5,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigSupportFormatsKey: []string{
+		RPM:        60,
+		Config: model.NewModelConfig(
+			model.WithModelConfigSupportFormats([]string{
 				"pcm",
 				"mp3",
 				"wav",
 				"ogg_opus",
-			},
-			model.ModelConfigSupportVoicesKey: []string{
+			}),
+			model.WithModelConfigSupportVoices([]string{
 				"zh_female_cancan_mars_bigtts",
 				"zh_female_qingxinnvsheng_mars_bigtts",
 				"zh_female_shuangkuaisisi_moon_bigtts",
@@ -92,8 +93,8 @@ var ModelList = []*model.ModelConfig{
 				"zh_male_qingcang_mars_bigtts",
 				"zh_female_gufengshaoyu_mars_bigtts",
 				"zh_female_wenroushunv_mars_bigtts",
-			},
-		},
+			}),
+		),
 	},
 
 	// {
diff --git a/service/aiproxy/relay/adaptor/doubaoaudio/key.go b/service/aiproxy/relay/adaptor/doubaoaudio/key.go
new file mode 100644
index 000000000000..46a6b99efb55
--- /dev/null
+++ b/service/aiproxy/relay/adaptor/doubaoaudio/key.go
@@ -0,0 +1,28 @@
+package doubaoaudio
+
+import (
+	"errors"
+	"strings"
+
+	"github.com/labring/sealos/service/aiproxy/relay/adaptor"
+)
+
+var _ adaptor.KeyValidator = (*Adaptor)(nil)
+
+func (a *Adaptor) ValidateKey(key string) error {
+	_, _, err := getAppIDAndToken(key)
+	return err
+}
+
+func (a *Adaptor) KeyHelp() string {
+	return "app_id|app_token"
+}
+
+// key格式: app_id|app_token
+func getAppIDAndToken(key string) (string, string, error) {
+	parts := strings.Split(key, "|")
+	if len(parts) != 2 {
+		return "", "", errors.New("invalid key format")
+	}
+	return parts[0], parts[1], nil
+}
diff --git a/service/aiproxy/relay/adaptor/doubaoaudio/main.go b/service/aiproxy/relay/adaptor/doubaoaudio/main.go
index e3855af9d26b..f653a821a1ed 100644
--- a/service/aiproxy/relay/adaptor/doubaoaudio/main.go
+++ b/service/aiproxy/relay/adaptor/doubaoaudio/main.go
@@ -1,11 +1,9 @@
 package doubaoaudio
 
 import (
-	"errors"
 	"fmt"
 	"io"
 	"net/http"
-	"strings"
 
 	"github.com/gin-gonic/gin"
 	"github.com/labring/sealos/service/aiproxy/model"
@@ -17,9 +15,6 @@ import (
 
 func GetRequestURL(meta *meta.Meta) (string, error) {
 	u := meta.Channel.BaseURL
-	if u == "" {
-		u = baseURL
-	}
 	switch meta.Mode {
 	case relaymode.AudioSpeech:
 		return u + "/api/v1/tts/ws_binary", nil
@@ -32,6 +27,10 @@ type Adaptor struct{}
 
 const baseURL = "https://openspeech.bytedance.com"
 
+func (a *Adaptor) GetBaseURL() string {
+	return baseURL
+}
+
 func (a *Adaptor) GetModelList() []*model.ModelConfig {
 	return ModelList
 }
@@ -40,22 +39,13 @@ func (a *Adaptor) GetRequestURL(meta *meta.Meta) (string, error) {
 	return GetRequestURL(meta)
 }
 
-func (a *Adaptor) ConvertRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Reader, error) {
+func (a *Adaptor) ConvertRequest(meta *meta.Meta, req *http.Request) (string, http.Header, io.Reader, error) {
 	switch meta.Mode {
 	case relaymode.AudioSpeech:
 		return ConvertTTSRequest(meta, req)
 	default:
-		return nil, nil, fmt.Errorf("unsupported relay mode %d for doubao", meta.Mode)
-	}
-}
-
-// key格式: app_id|app_token
-func getAppIDAndToken(key string) (string, string, error) {
-	parts := strings.Split(key, "|")
-	if len(parts) != 2 {
-		return "", "", errors.New("invalid key format")
+		return "", nil, nil, fmt.Errorf("unsupported relay mode %d for doubao", meta.Mode)
 	}
-	return parts[0], parts[1], nil
 }
 
 func (a *Adaptor) SetupRequestHeader(meta *meta.Meta, _ *gin.Context, req *http.Request) error {
diff --git a/service/aiproxy/relay/adaptor/doubaoaudio/tts.go b/service/aiproxy/relay/adaptor/doubaoaudio/tts.go
index 85267704de30..399c0c8e7e8d 100644
--- a/service/aiproxy/relay/adaptor/doubaoaudio/tts.go
+++ b/service/aiproxy/relay/adaptor/doubaoaudio/tts.go
@@ -62,20 +62,20 @@ type RequestConfig struct {
 var defaultHeader = []byte{0x11, 0x10, 0x11, 0x00}
 
 //nolint:gosec
-func ConvertTTSRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Reader, error) {
+func ConvertTTSRequest(meta *meta.Meta, req *http.Request) (string, http.Header, io.Reader, error) {
 	request, err := utils.UnmarshalTTSRequest(req)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
 
 	reqMap, err := utils.UnmarshalMap(req)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
 
 	appID, token, err := getAppIDAndToken(meta.Channel.Key)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
 
 	doubaoRequest := DoubaoTTSRequest{
@@ -119,12 +119,12 @@ func ConvertTTSRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Read
 
 	data, err := json.Marshal(doubaoRequest)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
 
 	compressedData, err := gzipCompress(data)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
 
 	payloadArr := make([]byte, 4)
@@ -134,7 +134,7 @@ func ConvertTTSRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Read
 	clientRequest = append(clientRequest, payloadArr...)
 	clientRequest = append(clientRequest, compressedData...)
 
-	return nil, bytes.NewReader(clientRequest), nil
+	return http.MethodPost, nil, bytes.NewReader(clientRequest), nil
 }
 
 func TTSDoRequest(meta *meta.Meta, req *http.Request) (*http.Response, error) {
@@ -171,8 +171,8 @@ func TTSDoResponse(meta *meta.Meta, c *gin.Context, _ *http.Response) (*relaymod
 	defer conn.Close()
 
 	usage := &relaymodel.Usage{
-		PromptTokens: meta.PromptTokens,
-		TotalTokens:  meta.PromptTokens,
+		PromptTokens: meta.InputTokens,
+		TotalTokens:  meta.InputTokens,
 	}
 
 	for {
diff --git a/service/aiproxy/relay/adaptor/gemini/adaptor.go b/service/aiproxy/relay/adaptor/gemini/adaptor.go
index 05686c38a39d..18ca3b398d74 100644
--- a/service/aiproxy/relay/adaptor/gemini/adaptor.go
+++ b/service/aiproxy/relay/adaptor/gemini/adaptor.go
@@ -7,8 +7,6 @@ import (
 	"net/http"
 
 	"github.com/gin-gonic/gin"
-	"github.com/labring/sealos/service/aiproxy/common/config"
-	"github.com/labring/sealos/service/aiproxy/common/helper"
 	"github.com/labring/sealos/service/aiproxy/model"
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor/openai"
 	"github.com/labring/sealos/service/aiproxy/relay/meta"
@@ -21,8 +19,25 @@ type Adaptor struct{}
 
 const baseURL = "https://generativelanguage.googleapis.com"
 
+func (a *Adaptor) GetBaseURL() string {
+	return baseURL
+}
+
+var v1ModelMap = map[string]struct{}{}
+
+func getRequestURL(meta *meta.Meta, action string) string {
+	u := meta.Channel.BaseURL
+	if u == "" {
+		u = baseURL
+	}
+	version := "v1beta"
+	if _, ok := v1ModelMap[meta.ActualModel]; ok {
+		version = "v1"
+	}
+	return fmt.Sprintf("%s/%s/models/%s:%s", u, version, meta.ActualModel, action)
+}
+
 func (a *Adaptor) GetRequestURL(meta *meta.Meta) (string, error) {
-	version := helper.AssignOrDefault(meta.Channel.Config.APIVersion, config.GetGeminiVersion())
 	var action string
 	switch meta.Mode {
 	case relaymode.Embeddings:
@@ -34,11 +49,7 @@ func (a *Adaptor) GetRequestURL(meta *meta.Meta) (string, error) {
 	if meta.GetBool("stream") {
 		action = "streamGenerateContent?alt=sse"
 	}
-	u := meta.Channel.BaseURL
-	if u == "" {
-		u = baseURL
-	}
-	return fmt.Sprintf("%s/%s/models/%s:%s", u, version, meta.ActualModelName, action), nil
+	return getRequestURL(meta, action), nil
 }
 
 func (a *Adaptor) SetupRequestHeader(meta *meta.Meta, _ *gin.Context, req *http.Request) error {
@@ -46,14 +57,14 @@ func (a *Adaptor) SetupRequestHeader(meta *meta.Meta, _ *gin.Context, req *http.
 	return nil
 }
 
-func (a *Adaptor) ConvertRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Reader, error) {
+func (a *Adaptor) ConvertRequest(meta *meta.Meta, req *http.Request) (string, http.Header, io.Reader, error) {
 	switch meta.Mode {
 	case relaymode.Embeddings:
 		return ConvertEmbeddingRequest(meta, req)
 	case relaymode.ChatCompletions:
 		return ConvertRequest(meta, req)
 	default:
-		return nil, nil, errors.New("unsupported mode")
+		return "", nil, nil, errors.New("unsupported mode")
 	}
 }
 
diff --git a/service/aiproxy/relay/adaptor/gemini/constants.go b/service/aiproxy/relay/adaptor/gemini/constants.go
index 2988ca8f719f..bdf2eab28db3 100644
--- a/service/aiproxy/relay/adaptor/gemini/constants.go
+++ b/service/aiproxy/relay/adaptor/gemini/constants.go
@@ -6,36 +6,116 @@ import (
 )
 
 // https://ai.google.dev/models/gemini
+// https://ai.google.dev/gemini-api/docs/pricing
 
 var ModelList = []*model.ModelConfig{
 	{
-		Model: "gemini-pro",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerGoogle,
+		Model:       "gemini-1.5-pro",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerGoogle,
+		InputPrice:  0.0025,
+		OutputPrice: 0.01,
+		RPM:         600,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(2097152),
+			model.WithModelConfigMaxOutputTokens(8192),
+			model.WithModelConfigToolChoice(true),
+			model.WithModelConfigVision(true),
+		),
 	},
 	{
-		Model: "gemini-1.0-pro",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerGoogle,
+		Model:       "gemini-1.5-flash",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerGoogle,
+		InputPrice:  0.00015,
+		OutputPrice: 0.0006,
+		RPM:         600,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(1048576),
+			model.WithModelConfigMaxOutputTokens(8192),
+			model.WithModelConfigToolChoice(true),
+			model.WithModelConfigVision(true),
+		),
 	},
 	{
-		Model: "gemini-1.5-flash",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerGoogle,
+		Model:       "gemini-1.5-flash-8b",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerGoogle,
+		InputPrice:  0.000075,
+		OutputPrice: 0.0003,
+		RPM:         600,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(1048576),
+			model.WithModelConfigMaxOutputTokens(8192),
+			model.WithModelConfigToolChoice(true),
+			model.WithModelConfigVision(true),
+		),
 	},
 	{
-		Model: "gemini-1.5-pro",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerGoogle,
+		Model:       "gemini-2.0-flash",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerGoogle,
+		InputPrice:  0.0001,
+		OutputPrice: 0.0004,
+		RPM:         600,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(1048576),
+			model.WithModelConfigMaxOutputTokens(8192),
+			model.WithModelConfigToolChoice(true),
+			model.WithModelConfigVision(true),
+		),
 	},
 	{
-		Model: "text-embedding-004",
-		Type:  relaymode.Embeddings,
-		Owner: model.ModelOwnerGoogle,
+		Model:       "gemini-2.0-flash-lite-preview",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerGoogle,
+		InputPrice:  0.000075,
+		OutputPrice: 0.0003,
+		RPM:         600,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(1048576),
+			model.WithModelConfigMaxOutputTokens(8192),
+			model.WithModelConfigToolChoice(true),
+			model.WithModelConfigVision(true),
+		),
 	},
 	{
-		Model: "aqa",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerGoogle,
+		Model:       "gemini-2.0-flash-thinking-exp",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerGoogle,
+		InputPrice:  0.0001,
+		OutputPrice: 0.0004,
+		RPM:         600,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(1048576),
+			model.WithModelConfigMaxOutputTokens(8192),
+			model.WithModelConfigVision(true),
+		),
+	},
+	{
+		Model:       "gemini-2.0-pro-exp",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerGoogle,
+		InputPrice:  0.0025,
+		OutputPrice: 0.01,
+		RPM:         600,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(2097152),
+			model.WithModelConfigMaxOutputTokens(8192),
+			model.WithModelConfigToolChoice(true),
+			model.WithModelConfigVision(true),
+		),
+	},
+
+	{
+		Model:      "text-embedding-004",
+		Type:       relaymode.Embeddings,
+		Owner:      model.ModelOwnerGoogle,
+		InputPrice: 0.0001,
+		RPM:        1500,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(2048),
+			model.WithModelConfigMaxOutputTokens(768),
+		),
 	},
 }
diff --git a/service/aiproxy/relay/adaptor/gemini/embeddings.go b/service/aiproxy/relay/adaptor/gemini/embeddings.go
index 1f8f13909d6f..403284e1db3f 100644
--- a/service/aiproxy/relay/adaptor/gemini/embeddings.go
+++ b/service/aiproxy/relay/adaptor/gemini/embeddings.go
@@ -13,12 +13,12 @@ import (
 	"github.com/labring/sealos/service/aiproxy/relay/utils"
 )
 
-func ConvertEmbeddingRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Reader, error) {
+func ConvertEmbeddingRequest(meta *meta.Meta, req *http.Request) (string, http.Header, io.Reader, error) {
 	request, err := utils.UnmarshalGeneralOpenAIRequest(req)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
-	request.Model = meta.ActualModelName
+	request.Model = meta.ActualModel
 
 	inputs := request.ParseInput()
 	requests := make([]EmbeddingRequest, len(inputs))
@@ -41,9 +41,9 @@ func ConvertEmbeddingRequest(meta *meta.Meta, req *http.Request) (http.Header, i
 		Requests: requests,
 	})
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
-	return nil, bytes.NewReader(data), nil
+	return http.MethodPost, nil, bytes.NewReader(data), nil
 }
 
 func EmbeddingHandler(c *gin.Context, resp *http.Response) (*model.Usage, *model.ErrorWithStatusCode) {
diff --git a/service/aiproxy/relay/adaptor/gemini/main.go b/service/aiproxy/relay/adaptor/gemini/main.go
index 9bb3dc6bd358..4a9707b7a99c 100644
--- a/service/aiproxy/relay/adaptor/gemini/main.go
+++ b/service/aiproxy/relay/adaptor/gemini/main.go
@@ -4,29 +4,26 @@ import (
 	"bufio"
 	"bytes"
 	"context"
-	"fmt"
 	"io"
 	"net/http"
 	"strings"
+	"time"
 
+	"github.com/gin-gonic/gin"
 	json "github.com/json-iterator/go"
-	"github.com/labring/sealos/service/aiproxy/common/conv"
-	"github.com/labring/sealos/service/aiproxy/common/render"
-	"github.com/labring/sealos/service/aiproxy/middleware"
-
 	"github.com/labring/sealos/service/aiproxy/common"
 	"github.com/labring/sealos/service/aiproxy/common/config"
-	"github.com/labring/sealos/service/aiproxy/common/helper"
+	"github.com/labring/sealos/service/aiproxy/common/conv"
 	"github.com/labring/sealos/service/aiproxy/common/image"
 	"github.com/labring/sealos/service/aiproxy/common/random"
+	"github.com/labring/sealos/service/aiproxy/common/render"
+	"github.com/labring/sealos/service/aiproxy/middleware"
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor/openai"
 	"github.com/labring/sealos/service/aiproxy/relay/constant"
 	"github.com/labring/sealos/service/aiproxy/relay/meta"
 	"github.com/labring/sealos/service/aiproxy/relay/model"
 	"github.com/labring/sealos/service/aiproxy/relay/utils"
 	log "github.com/sirupsen/logrus"
-
-	"github.com/gin-gonic/gin"
 )
 
 // https://ai.google.dev/docs/gemini_api_overview?hl=zh-cn
@@ -35,6 +32,12 @@ const (
 	VisionMaxImageNum = 16
 )
 
+var toolChoiceTypeMap = map[string]string{
+	"none":     "NONE",
+	"auto":     "AUTO",
+	"required": "ANY",
+}
+
 var mimeTypeMap = map[string]string{
 	"json_object": "application/json",
 	"text":        "text/plain",
@@ -52,6 +55,7 @@ func buildSafetySettings() []ChatSafetySettings {
 		{Category: "HARM_CATEGORY_HATE_SPEECH", Threshold: safetySetting},
 		{Category: "HARM_CATEGORY_SEXUALLY_EXPLICIT", Threshold: safetySetting},
 		{Category: "HARM_CATEGORY_DANGEROUS_CONTENT", Threshold: safetySetting},
+		{Category: "HARM_CATEGORY_CIVIC_INTEGRITY", Threshold: safetySetting},
 	}
 }
 
@@ -79,6 +83,13 @@ func buildTools(textRequest *model.GeneralOpenAIRequest) []ChatTools {
 	if textRequest.Tools != nil {
 		functions := make([]model.Function, 0, len(textRequest.Tools))
 		for _, tool := range textRequest.Tools {
+			if parameters, ok := tool.Function.Parameters.(map[string]any); ok {
+				if properties, ok := parameters["properties"].(map[string]any); ok {
+					if len(properties) == 0 {
+						tool.Function.Parameters = nil
+					}
+				}
+			}
 			functions = append(functions, tool.Function)
 		}
 		return []ChatTools{{FunctionDeclarations: functions}}
@@ -89,6 +100,31 @@ func buildTools(textRequest *model.GeneralOpenAIRequest) []ChatTools {
 	return nil
 }
 
+func buildToolConfig(textRequest *model.GeneralOpenAIRequest) *ToolConfig {
+	if textRequest.ToolChoice == nil {
+		return nil
+	}
+	toolConfig := ToolConfig{
+		FunctionCallingConfig: FunctionCallingConfig{
+			Mode: "auto",
+		},
+	}
+	switch mode := textRequest.ToolChoice.(type) {
+	case string:
+		if toolChoiceType, ok := toolChoiceTypeMap[mode]; ok {
+			toolConfig.FunctionCallingConfig.Mode = toolChoiceType
+		}
+	case map[string]interface{}:
+		toolConfig.FunctionCallingConfig.Mode = "ANY"
+		if fn, ok := mode["function"].(map[string]interface{}); ok {
+			if fnName, ok := fn["name"].(string); ok {
+				toolConfig.FunctionCallingConfig.AllowedFunctionNames = []string{fnName}
+			}
+		}
+	}
+	return &toolConfig
+}
+
 func buildMessageParts(ctx context.Context, part model.MessageContent) ([]Part, error) {
 	if part.Type == model.ContentTypeText {
 		return []Part{{Text: part.Text}}, nil
@@ -110,145 +146,154 @@ func buildMessageParts(ctx context.Context, part model.MessageContent) ([]Part,
 	return nil, nil
 }
 
-func buildContents(textRequest *model.GeneralOpenAIRequest, req *http.Request) ([]ChatContent, error) {
-	contents := make([]ChatContent, 0, len(textRequest.Messages))
-	shouldAddDummyModelMessage := false
+func buildContents(ctx context.Context, textRequest *model.GeneralOpenAIRequest) (*ChatContent, []*ChatContent, error) {
+	contents := make([]*ChatContent, 0, len(textRequest.Messages))
 	imageNum := 0
 
+	var systemContent *ChatContent
+
 	for _, message := range textRequest.Messages {
 		content := ChatContent{
 			Role:  message.Role,
 			Parts: make([]Part, 0),
 		}
 
-		// Convert role names
-		switch content.Role {
-		case "assistant":
-			content.Role = "model"
-		case "system":
-			content.Role = "user"
-			shouldAddDummyModelMessage = true
-		}
-
-		// Process message content
-		openaiContent := message.ParseContent()
-		for _, part := range openaiContent {
-			if part.Type == model.ContentTypeImageURL {
-				imageNum++
-				if imageNum > VisionMaxImageNum {
-					continue
+		if message.Role == "assistant" && len(message.ToolCalls) > 0 {
+			for _, toolCall := range message.ToolCalls {
+				var args map[string]any
+				if toolCall.Function.Arguments != "" {
+					if err := json.Unmarshal([]byte(toolCall.Function.Arguments), &args); err != nil {
+						args = make(map[string]any)
+					}
+				} else {
+					args = make(map[string]any)
 				}
+				content.Parts = append(content.Parts, Part{
+					FunctionCall: &FunctionCall{
+						Name: toolCall.Function.Name,
+						Args: args,
+					},
+				})
+			}
+		} else if message.Role == "tool" && message.ToolCallID != "" {
+			var contentMap map[string]any
+			if message.Content != nil {
+				switch content := message.Content.(type) {
+				case map[string]any:
+					contentMap = content
+				case string:
+					if err := json.Unmarshal([]byte(content), &contentMap); err != nil {
+						log.Error("unmarshal content failed: " + err.Error())
+					}
+				}
+			} else {
+				contentMap = make(map[string]any)
 			}
+			content.Parts = append(content.Parts, Part{
+				FunctionResponse: &FunctionResponse{
+					Name: *message.Name,
+					Response: struct {
+						Name    string         `json:"name"`
+						Content map[string]any `json:"content"`
+					}{
+						Name:    *message.Name,
+						Content: contentMap,
+					},
+				},
+			})
+		} else {
+			openaiContent := message.ParseContent()
+			for _, part := range openaiContent {
+				if part.Type == model.ContentTypeImageURL {
+					imageNum++
+					if imageNum > VisionMaxImageNum {
+						continue
+					}
+				}
 
-			parts, err := buildMessageParts(req.Context(), part)
-			if err != nil {
-				return nil, err
+				parts, err := buildMessageParts(ctx, part)
+				if err != nil {
+					return nil, nil, err
+				}
+				content.Parts = append(content.Parts, parts...)
 			}
-			content.Parts = append(content.Parts, parts...)
 		}
 
-		contents = append(contents, content)
-
-		// Add dummy model message after system message
-		if shouldAddDummyModelMessage {
-			contents = append(contents, ChatContent{
-				Role:  "model",
-				Parts: []Part{{Text: "Okay"}},
-			})
-			shouldAddDummyModelMessage = false
+		switch content.Role {
+		case "assistant":
+			content.Role = "model"
+		case "tool":
+			content.Role = "user"
+		case "system":
+			systemContent = &content
+			continue
 		}
+		contents = append(contents, &content)
 	}
 
-	return contents, nil
+	return systemContent, contents, nil
 }
 
 // Setting safety to the lowest possible values since Gemini is already powerless enough
-func ConvertRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Reader, error) {
+func ConvertRequest(meta *meta.Meta, req *http.Request) (string, http.Header, io.Reader, error) {
 	textRequest, err := utils.UnmarshalGeneralOpenAIRequest(req)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
 
-	textRequest.Model = meta.ActualModelName
+	textRequest.Model = meta.ActualModel
 	meta.Set("stream", textRequest.Stream)
 
-	contents, err := buildContents(textRequest, req)
+	systemContent, contents, err := buildContents(req.Context(), textRequest)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
 
-	tokenCount, err := CountTokens(req.Context(), meta, contents)
-	if err != nil {
-		return nil, nil, err
-	}
-	meta.PromptTokens = tokenCount
-
 	// Build actual request
 	geminiRequest := ChatRequest{
-		Contents:         contents,
-		SafetySettings:   buildSafetySettings(),
-		GenerationConfig: buildGenerationConfig(textRequest),
-		Tools:            buildTools(textRequest),
+		Contents:          contents,
+		SystemInstruction: systemContent,
+		SafetySettings:    buildSafetySettings(),
+		GenerationConfig:  buildGenerationConfig(textRequest),
+		Tools:             buildTools(textRequest),
+		ToolConfig:        buildToolConfig(textRequest),
 	}
 
 	data, err := json.Marshal(geminiRequest)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
 
-	return nil, bytes.NewReader(data), nil
-}
-
-func CountTokens(ctx context.Context, meta *meta.Meta, chat []ChatContent) (int, error) {
-	countReq := ChatRequest{
-		Contents: chat,
-	}
-	countData, err := json.Marshal(countReq)
-	if err != nil {
-		return 0, err
-	}
-	version := helper.AssignOrDefault(meta.Channel.Config.APIVersion, config.GetGeminiVersion())
-	u := meta.Channel.BaseURL
-	if u == "" {
-		u = baseURL
-	}
-	countURL := fmt.Sprintf("%s/%s/models/%s:countTokens", u, version, meta.ActualModelName)
-	req, err := http.NewRequestWithContext(ctx, http.MethodPost, countURL, bytes.NewReader(countData))
-	if err != nil {
-		return 0, err
-	}
-	req.Header.Set("Content-Type", "application/json")
-	req.Header.Set("X-Goog-Api-Key", meta.Channel.Key)
-
-	resp, err := http.DefaultClient.Do(req)
-	if err != nil {
-		return 0, err
-	}
-	defer resp.Body.Close()
-
-	var tokenCount CountTokensResponse
-	if err := json.NewDecoder(resp.Body).Decode(&tokenCount); err != nil {
-		return 0, err
-	}
-	if tokenCount.Error != nil {
-		return 0, fmt.Errorf("count tokens error: %s, code: %d, status: %s", tokenCount.Error.Message, tokenCount.Error.Code, resp.Status)
-	}
-	return tokenCount.TotalTokens, nil
+	return http.MethodPost, nil, bytes.NewReader(data), nil
 }
 
 type ChatResponse struct {
 	Candidates     []*ChatCandidate   `json:"candidates"`
 	PromptFeedback ChatPromptFeedback `json:"promptFeedback"`
+	UsageMetadata  *UsageMetadata     `json:"usageMetadata"`
+	ModelVersion   string             `json:"modelVersion"`
+}
+
+type UsageMetadata struct {
+	PromptTokenCount     int `json:"promptTokenCount"`
+	CandidatesTokenCount int `json:"candidatesTokenCount"`
+	TotalTokenCount      int `json:"totalTokenCount"`
 }
 
 func (g *ChatResponse) GetResponseText() string {
 	if g == nil {
 		return ""
 	}
-	if len(g.Candidates) > 0 && len(g.Candidates[0].Content.Parts) > 0 {
-		return g.Candidates[0].Content.Parts[0].Text
+	builder := strings.Builder{}
+	for _, candidate := range g.Candidates {
+		for i, part := range candidate.Content.Parts {
+			if i > 0 {
+				builder.WriteString("\n")
+			}
+			builder.WriteString(part.Text)
+		}
 	}
-	return ""
+	return builder.String()
 }
 
 type ChatCandidate struct {
@@ -267,14 +312,17 @@ type ChatPromptFeedback struct {
 	SafetyRatings []ChatSafetyRating `json:"safetyRatings"`
 }
 
-func getToolCalls(candidate *ChatCandidate) []*model.Tool {
-	var toolCalls []*model.Tool
+func getToolCalls(candidate *ChatCandidate, toolCallIndex int) []*model.Tool {
+	if len(candidate.Content.Parts) <= toolCallIndex {
+		return nil
+	}
 
-	item := candidate.Content.Parts[0]
+	var toolCalls []*model.Tool
+	item := candidate.Content.Parts[toolCallIndex]
 	if item.FunctionCall == nil {
 		return toolCalls
 	}
-	argsBytes, err := json.Marshal(item.FunctionCall.Arguments)
+	argsBytes, err := json.Marshal(item.FunctionCall.Args)
 	if err != nil {
 		log.Error("getToolCalls failed: " + err.Error())
 		return toolCalls
@@ -284,18 +332,19 @@ func getToolCalls(candidate *ChatCandidate) []*model.Tool {
 		Type: "function",
 		Function: model.Function{
 			Arguments: conv.BytesToString(argsBytes),
-			Name:      item.FunctionCall.FunctionName,
+			Name:      item.FunctionCall.Name,
 		},
 	}
 	toolCalls = append(toolCalls, &toolCall)
 	return toolCalls
 }
 
-func responseGeminiChat2OpenAI(response *ChatResponse) *openai.TextResponse {
+func responseGeminiChat2OpenAI(meta *meta.Meta, response *ChatResponse) *openai.TextResponse {
 	fullTextResponse := openai.TextResponse{
 		ID:      "chatcmpl-" + random.GetUUID(),
+		Model:   meta.OriginModel,
 		Object:  "chat.completion",
-		Created: helper.GetTimestamp(),
+		Created: time.Now().Unix(),
 		Choices: make([]*openai.TextResponseChoice, 0, len(response.Candidates)),
 	}
 	for i, candidate := range response.Candidates {
@@ -307,10 +356,32 @@ func responseGeminiChat2OpenAI(response *ChatResponse) *openai.TextResponse {
 			FinishReason: constant.StopFinishReason,
 		}
 		if len(candidate.Content.Parts) > 0 {
-			if candidate.Content.Parts[0].FunctionCall != nil {
-				choice.Message.ToolCalls = getToolCalls(candidate)
+			toolCallIndex := -1
+			for i, part := range candidate.Content.Parts {
+				if part.FunctionCall != nil {
+					toolCallIndex = i
+					break
+				}
+			}
+			if toolCallIndex != -1 {
+				choice.Message.ToolCalls = getToolCalls(candidate, toolCallIndex)
+				content := strings.Builder{}
+				for i, part := range candidate.Content.Parts {
+					if i == toolCallIndex {
+						continue
+					}
+					content.WriteString(part.Text)
+				}
+				choice.Message.Content = content.String()
 			} else {
-				choice.Message.Content = candidate.Content.Parts[0].Text
+				builder := strings.Builder{}
+				for i, part := range candidate.Content.Parts {
+					if i > 0 {
+						builder.WriteString("\n")
+					}
+					builder.WriteString(part.Text)
+				}
+				choice.Message.Content = builder.String()
 			}
 		} else {
 			choice.Message.Content = ""
@@ -322,16 +393,59 @@ func responseGeminiChat2OpenAI(response *ChatResponse) *openai.TextResponse {
 }
 
 func streamResponseGeminiChat2OpenAI(meta *meta.Meta, geminiResponse *ChatResponse) *openai.ChatCompletionsStreamResponse {
-	var choice openai.ChatCompletionsStreamResponseChoice
-	choice.Delta.Content = geminiResponse.GetResponseText()
-	// choice.FinishReason = &constant.StopFinishReason
-	var response openai.ChatCompletionsStreamResponse
-	response.ID = "chatcmpl-" + random.GetUUID()
-	response.Created = helper.GetTimestamp()
-	response.Object = "chat.completion.chunk"
-	response.Model = meta.OriginModelName
-	response.Choices = []*openai.ChatCompletionsStreamResponseChoice{&choice}
-	return &response
+	response := &openai.ChatCompletionsStreamResponse{
+		ID:      "chatcmpl-" + random.GetUUID(),
+		Created: time.Now().Unix(),
+		Model:   meta.OriginModel,
+		Object:  "chat.completion.chunk",
+		Choices: make([]*openai.ChatCompletionsStreamResponseChoice, 0, len(geminiResponse.Candidates)),
+	}
+	if geminiResponse.UsageMetadata != nil {
+		response.Usage = &model.Usage{
+			PromptTokens:     geminiResponse.UsageMetadata.PromptTokenCount,
+			CompletionTokens: geminiResponse.UsageMetadata.CandidatesTokenCount,
+			TotalTokens:      geminiResponse.UsageMetadata.TotalTokenCount,
+		}
+	}
+	for i, candidate := range geminiResponse.Candidates {
+		choice := openai.ChatCompletionsStreamResponseChoice{
+			Index: i,
+		}
+		if len(candidate.Content.Parts) > 0 {
+			toolCallIndex := -1
+			for i, part := range candidate.Content.Parts {
+				if part.FunctionCall != nil {
+					toolCallIndex = i
+					break
+				}
+			}
+			if toolCallIndex != -1 {
+				choice.Delta.ToolCalls = getToolCalls(candidate, toolCallIndex)
+				content := strings.Builder{}
+				for i, part := range candidate.Content.Parts {
+					if i == toolCallIndex {
+						continue
+					}
+					content.WriteString(part.Text)
+				}
+				choice.Delta.Content = content.String()
+			} else {
+				builder := strings.Builder{}
+				for i, part := range candidate.Content.Parts {
+					if i > 0 {
+						builder.WriteString("\n")
+					}
+					builder.WriteString(part.Text)
+				}
+				choice.Delta.Content = builder.String()
+			}
+		} else {
+			choice.Delta.Content = ""
+			choice.FinishReason = &candidate.FinishReason
+		}
+		response.Choices = append(response.Choices, &choice)
+	}
+	return response
 }
 
 func StreamHandler(meta *meta.Meta, c *gin.Context, resp *http.Response) (*model.Usage, *model.ErrorWithStatusCode) {
@@ -340,12 +454,15 @@ func StreamHandler(meta *meta.Meta, c *gin.Context, resp *http.Response) (*model
 	log := middleware.GetLogger(c)
 
 	responseText := strings.Builder{}
-	respContent := []ChatContent{}
 	scanner := bufio.NewScanner(resp.Body)
 	scanner.Split(bufio.ScanLines)
 
 	common.SetEventStreamHeaders(c)
 
+	usage := model.Usage{
+		PromptTokens: meta.InputTokens,
+	}
+
 	for scanner.Scan() {
 		data := scanner.Bytes()
 		if len(data) < 6 || conv.BytesToString(data[:6]) != "data: " {
@@ -363,20 +480,14 @@ func StreamHandler(meta *meta.Meta, c *gin.Context, resp *http.Response) (*model
 			log.Error("error unmarshalling stream response: " + err.Error())
 			continue
 		}
-		for _, candidate := range geminiResponse.Candidates {
-			respContent = append(respContent, candidate.Content)
-		}
 		response := streamResponseGeminiChat2OpenAI(meta, &geminiResponse)
-		if response == nil {
-			continue
+		if response.Usage != nil {
+			usage = *response.Usage
 		}
 
 		responseText.WriteString(response.Choices[0].Delta.StringContent())
 
-		err = render.ObjectData(c, response)
-		if err != nil {
-			log.Error("error rendering stream response: " + err.Error())
-		}
+		_ = render.ObjectData(c, response)
 	}
 
 	if err := scanner.Err(); err != nil {
@@ -385,26 +496,12 @@ func StreamHandler(meta *meta.Meta, c *gin.Context, resp *http.Response) (*model
 
 	render.Done(c)
 
-	usage := model.Usage{
-		PromptTokens: meta.PromptTokens,
-	}
-
-	tokenCount, err := CountTokens(c.Request.Context(), meta, respContent)
-	if err != nil {
-		log.Error("count tokens failed: " + err.Error())
-		usage.CompletionTokens = openai.CountTokenText(responseText.String(), meta.ActualModelName)
-	} else {
-		usage.CompletionTokens = tokenCount
-	}
-	usage.TotalTokens = usage.PromptTokens + usage.CompletionTokens
 	return &usage, nil
 }
 
 func Handler(meta *meta.Meta, c *gin.Context, resp *http.Response) (*model.Usage, *model.ErrorWithStatusCode) {
 	defer resp.Body.Close()
 
-	log := middleware.GetLogger(c)
-
 	var geminiResponse ChatResponse
 	err := json.NewDecoder(resp.Body).Decode(&geminiResponse)
 	if err != nil {
@@ -413,24 +510,14 @@ func Handler(meta *meta.Meta, c *gin.Context, resp *http.Response) (*model.Usage
 	if len(geminiResponse.Candidates) == 0 {
 		return nil, openai.ErrorWrapperWithMessage("No candidates returned", "gemini_error", resp.StatusCode)
 	}
-	fullTextResponse := responseGeminiChat2OpenAI(&geminiResponse)
-	fullTextResponse.Model = meta.OriginModelName
-	respContent := []ChatContent{}
-	for _, candidate := range geminiResponse.Candidates {
-		respContent = append(respContent, candidate.Content)
-	}
+	fullTextResponse := responseGeminiChat2OpenAI(meta, &geminiResponse)
+	fullTextResponse.Model = meta.OriginModel
 
 	usage := model.Usage{
-		PromptTokens: meta.PromptTokens,
-	}
-	tokenCount, err := CountTokens(c.Request.Context(), meta, respContent)
-	if err != nil {
-		log.Error("count tokens failed: " + err.Error())
-		usage.CompletionTokens = openai.CountTokenText(geminiResponse.GetResponseText(), meta.ActualModelName)
-	} else {
-		usage.CompletionTokens = tokenCount
+		PromptTokens:     geminiResponse.UsageMetadata.PromptTokenCount,
+		CompletionTokens: geminiResponse.UsageMetadata.CandidatesTokenCount,
+		TotalTokens:      geminiResponse.UsageMetadata.TotalTokenCount,
 	}
-	usage.TotalTokens = usage.PromptTokens + usage.CompletionTokens
 	fullTextResponse.Usage = usage
 	jsonResponse, err := json.Marshal(fullTextResponse)
 	if err != nil {
diff --git a/service/aiproxy/relay/adaptor/gemini/model.go b/service/aiproxy/relay/adaptor/gemini/model.go
index 6b60976fa33e..8ed1a99734b6 100644
--- a/service/aiproxy/relay/adaptor/gemini/model.go
+++ b/service/aiproxy/relay/adaptor/gemini/model.go
@@ -1,10 +1,12 @@
 package gemini
 
 type ChatRequest struct {
-	GenerationConfig *ChatGenerationConfig `json:"generation_config,omitempty"`
-	Contents         []ChatContent         `json:"contents"`
-	SafetySettings   []ChatSafetySettings  `json:"safety_settings,omitempty"`
-	Tools            []ChatTools           `json:"tools,omitempty"`
+	Contents          []*ChatContent        `json:"contents"`
+	SystemInstruction *ChatContent          `json:"system_instruction,omitempty"`
+	SafetySettings    []ChatSafetySettings  `json:"safety_settings,omitempty"`
+	GenerationConfig  *ChatGenerationConfig `json:"generation_config,omitempty"`
+	Tools             []ChatTools           `json:"tools,omitempty"`
+	ToolConfig        *ToolConfig           `json:"tool_config,omitempty"`
 }
 
 type EmbeddingRequest struct {
@@ -40,14 +42,23 @@ type InlineData struct {
 }
 
 type FunctionCall struct {
-	Arguments    any    `json:"args"`
-	FunctionName string `json:"name"`
+	Args map[string]any `json:"args"`
+	Name string         `json:"name"`
+}
+
+type FunctionResponse struct {
+	Name     string `json:"name"`
+	Response struct {
+		Name    string         `json:"name"`
+		Content map[string]any `json:"content"`
+	} `json:"response"`
 }
 
 type Part struct {
-	InlineData   *InlineData   `json:"inlineData,omitempty"`
-	FunctionCall *FunctionCall `json:"functionCall,omitempty"`
-	Text         string        `json:"text,omitempty"`
+	InlineData       *InlineData       `json:"inlineData,omitempty"`
+	FunctionCall     *FunctionCall     `json:"functionCall,omitempty"`
+	FunctionResponse *FunctionResponse `json:"functionResponse,omitempty"`
+	Text             string            `json:"text,omitempty"`
 }
 
 type ChatContent struct {
@@ -74,3 +85,12 @@ type ChatGenerationConfig struct {
 	MaxOutputTokens  int      `json:"maxOutputTokens,omitempty"`
 	CandidateCount   int      `json:"candidateCount,omitempty"`
 }
+
+type FunctionCallingConfig struct {
+	Mode                 string   `json:"mode,omitempty"`
+	AllowedFunctionNames []string `json:"allowed_function_names,omitempty"`
+}
+
+type ToolConfig struct {
+	FunctionCallingConfig FunctionCallingConfig `json:"function_calling_config"`
+}
diff --git a/service/aiproxy/relay/adaptor/geminiopenai/adaptor.go b/service/aiproxy/relay/adaptor/geminiopenai/adaptor.go
new file mode 100644
index 000000000000..b6c20ae2992f
--- /dev/null
+++ b/service/aiproxy/relay/adaptor/geminiopenai/adaptor.go
@@ -0,0 +1,25 @@
+package geminiopenai
+
+import (
+	"github.com/labring/sealos/service/aiproxy/model"
+	"github.com/labring/sealos/service/aiproxy/relay/adaptor/gemini"
+	"github.com/labring/sealos/service/aiproxy/relay/adaptor/openai"
+)
+
+type Adaptor struct {
+	openai.Adaptor
+}
+
+const baseURL = "https://generativelanguage.googleapis.com/v1beta/openai"
+
+func (a *Adaptor) GetBaseURL() string {
+	return baseURL
+}
+
+func (a *Adaptor) GetModelList() []*model.ModelConfig {
+	return gemini.ModelList
+}
+
+func (a *Adaptor) GetChannelName() string {
+	return "google gemini (openai)"
+}
diff --git a/service/aiproxy/relay/adaptor/groq/adaptor.go b/service/aiproxy/relay/adaptor/groq/adaptor.go
index 2dfb7380a209..0db752eb2eb7 100644
--- a/service/aiproxy/relay/adaptor/groq/adaptor.go
+++ b/service/aiproxy/relay/adaptor/groq/adaptor.go
@@ -3,20 +3,16 @@ package groq
 import (
 	"github.com/labring/sealos/service/aiproxy/model"
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor/openai"
-	"github.com/labring/sealos/service/aiproxy/relay/meta"
 )
 
 type Adaptor struct {
 	openai.Adaptor
 }
 
-const baseURL = "https://api.groq.com/openai"
+const baseURL = "https://api.groq.com/openai/v1"
 
-func (a *Adaptor) GetRequestURL(meta *meta.Meta) (string, error) {
-	if meta.Channel.BaseURL == "" {
-		meta.Channel.BaseURL = baseURL
-	}
-	return a.Adaptor.GetRequestURL(meta)
+func (a *Adaptor) GetBaseURL() string {
+	return baseURL
 }
 
 func (a *Adaptor) GetModelList() []*model.ModelConfig {
diff --git a/service/aiproxy/relay/adaptor/interface.go b/service/aiproxy/relay/adaptor/interface.go
index f9e515ec59d3..239cd8184631 100644
--- a/service/aiproxy/relay/adaptor/interface.go
+++ b/service/aiproxy/relay/adaptor/interface.go
@@ -12,14 +12,20 @@ import (
 
 type Adaptor interface {
 	GetChannelName() string
+	GetBaseURL() string
 	GetRequestURL(meta *meta.Meta) (string, error)
 	SetupRequestHeader(meta *meta.Meta, c *gin.Context, req *http.Request) error
-	ConvertRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Reader, error)
+	ConvertRequest(meta *meta.Meta, req *http.Request) (string, http.Header, io.Reader, error)
 	DoRequest(meta *meta.Meta, c *gin.Context, req *http.Request) (*http.Response, error)
 	DoResponse(meta *meta.Meta, c *gin.Context, resp *http.Response) (*relaymodel.Usage, *relaymodel.ErrorWithStatusCode)
 	GetModelList() []*model.ModelConfig
 }
 
-type GetBalance interface {
+type Balancer interface {
 	GetBalance(channel *model.Channel) (float64, error)
 }
+
+type KeyValidator interface {
+	ValidateKey(key string) error
+	KeyHelp() string
+}
diff --git a/service/aiproxy/relay/adaptor/lingyiwanwu/adaptor.go b/service/aiproxy/relay/adaptor/lingyiwanwu/adaptor.go
index d271ba594de0..3f529b46196b 100644
--- a/service/aiproxy/relay/adaptor/lingyiwanwu/adaptor.go
+++ b/service/aiproxy/relay/adaptor/lingyiwanwu/adaptor.go
@@ -3,20 +3,16 @@ package lingyiwanwu
 import (
 	"github.com/labring/sealos/service/aiproxy/model"
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor/openai"
-	"github.com/labring/sealos/service/aiproxy/relay/meta"
 )
 
 type Adaptor struct {
 	openai.Adaptor
 }
 
-const baseURL = "https://api.lingyiwanwu.com"
+const baseURL = "https://api.lingyiwanwu.com/v1"
 
-func (a *Adaptor) GetRequestURL(meta *meta.Meta) (string, error) {
-	if meta.Channel.BaseURL == "" {
-		meta.Channel.BaseURL = baseURL
-	}
-	return a.Adaptor.GetRequestURL(meta)
+func (a *Adaptor) GetBaseURL() string {
+	return baseURL
 }
 
 func (a *Adaptor) GetModelList() []*model.ModelConfig {
diff --git a/service/aiproxy/relay/adaptor/lingyiwanwu/constants.go b/service/aiproxy/relay/adaptor/lingyiwanwu/constants.go
index bfa063ddb2ca..3b95f8412cb3 100644
--- a/service/aiproxy/relay/adaptor/lingyiwanwu/constants.go
+++ b/service/aiproxy/relay/adaptor/lingyiwanwu/constants.go
@@ -14,88 +14,23 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerLingyiWanwu,
 		InputPrice:  0.00099,
 		OutputPrice: 0.00099,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 16384,
-		},
+		RPM:         60,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(16384),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
-		Model:       "yi-large",
-		Type:        relaymode.ChatCompletions,
-		Owner:       model.ModelOwnerLingyiWanwu,
-		InputPrice:  0.02,
-		OutputPrice: 0.02,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 32768,
-		},
-	},
-	{
-		Model:       "yi-medium",
-		Type:        relaymode.ChatCompletions,
-		Owner:       model.ModelOwnerLingyiWanwu,
-		InputPrice:  0.0025,
-		OutputPrice: 0.0025,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 16384,
-		},
-	},
-	{
-		Model:       "yi-vision",
+		Model:       "yi-vision-v2",
 		Type:        relaymode.ChatCompletions,
 		Owner:       model.ModelOwnerLingyiWanwu,
 		InputPrice:  0.006,
 		OutputPrice: 0.006,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 16384,
-		},
-	},
-	{
-		Model:       "yi-medium-200k",
-		Type:        relaymode.ChatCompletions,
-		Owner:       model.ModelOwnerLingyiWanwu,
-		InputPrice:  0.012,
-		OutputPrice: 0.012,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 204800,
-		},
-	},
-	{
-		Model:       "yi-spark",
-		Type:        relaymode.ChatCompletions,
-		Owner:       model.ModelOwnerLingyiWanwu,
-		InputPrice:  0.001,
-		OutputPrice: 0.001,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 16384,
-		},
-	},
-	{
-		Model:       "yi-large-rag",
-		Type:        relaymode.ChatCompletions,
-		Owner:       model.ModelOwnerLingyiWanwu,
-		InputPrice:  0.025,
-		OutputPrice: 0.025,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 16384,
-		},
-	},
-	{
-		Model:       "yi-large-fc",
-		Type:        relaymode.ChatCompletions,
-		Owner:       model.ModelOwnerLingyiWanwu,
-		InputPrice:  0.02,
-		OutputPrice: 0.02,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 32768,
-		},
-	},
-	{
-		Model:       "yi-large-turbo",
-		Type:        relaymode.ChatCompletions,
-		Owner:       model.ModelOwnerLingyiWanwu,
-		InputPrice:  0.012,
-		OutputPrice: 0.012,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 16384,
-		},
+		RPM:         60,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(16384),
+			model.WithModelConfigVision(true),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 }
diff --git a/service/aiproxy/relay/adaptor/minimax/adaptor.go b/service/aiproxy/relay/adaptor/minimax/adaptor.go
index 954e5139dc9b..54b8a4080401 100644
--- a/service/aiproxy/relay/adaptor/minimax/adaptor.go
+++ b/service/aiproxy/relay/adaptor/minimax/adaptor.go
@@ -4,7 +4,6 @@ import (
 	"fmt"
 	"io"
 	"net/http"
-	"strings"
 
 	"github.com/gin-gonic/gin"
 	"github.com/labring/sealos/service/aiproxy/model"
@@ -18,22 +17,10 @@ type Adaptor struct {
 	openai.Adaptor
 }
 
-const baseURL = "https://api.minimax.chat"
+const baseURL = "https://api.minimax.chat/v1"
 
-func GetAPIKey(key string) string {
-	keys := strings.Split(key, "|")
-	if len(keys) > 0 {
-		return keys[0]
-	}
-	return ""
-}
-
-func GetGroupID(key string) string {
-	keys := strings.Split(key, "|")
-	if len(keys) > 1 {
-		return keys[1]
-	}
-	return ""
+func (a *Adaptor) GetBaseURL() string {
+	return baseURL
 }
 
 func (a *Adaptor) GetModelList() []*model.ModelConfig {
@@ -41,27 +28,32 @@ func (a *Adaptor) GetModelList() []*model.ModelConfig {
 }
 
 func (a *Adaptor) SetupRequestHeader(meta *meta.Meta, _ *gin.Context, req *http.Request) error {
-	req.Header.Set("Authorization", "Bearer "+GetAPIKey(meta.Channel.Key))
+	apiKey, _, err := GetAPIKeyAndGroupID(meta.Channel.Key)
+	if err != nil {
+		return err
+	}
+	req.Header.Set("Authorization", "Bearer "+apiKey)
 	return nil
 }
 
 func (a *Adaptor) GetRequestURL(meta *meta.Meta) (string, error) {
-	if meta.Channel.BaseURL == "" {
-		meta.Channel.BaseURL = baseURL
+	_, groupID, err := GetAPIKeyAndGroupID(meta.Channel.Key)
+	if err != nil {
+		return "", err
 	}
 	switch meta.Mode {
 	case relaymode.ChatCompletions:
-		return meta.Channel.BaseURL + "/v1/text/chatcompletion_v2", nil
+		return meta.Channel.BaseURL + "/text/chatcompletion_v2", nil
 	case relaymode.Embeddings:
-		return fmt.Sprintf("%s/v1/embeddings?GroupId=%s", meta.Channel.BaseURL, GetGroupID(meta.Channel.Key)), nil
+		return fmt.Sprintf("%s/embeddings?GroupId=%s", meta.Channel.BaseURL, groupID), nil
 	case relaymode.AudioSpeech:
-		return fmt.Sprintf("%s/v1/t2a_v2?GroupId=%s", meta.Channel.BaseURL, GetGroupID(meta.Channel.Key)), nil
+		return fmt.Sprintf("%s/t2a_v2?GroupId=%s", meta.Channel.BaseURL, groupID), nil
 	default:
 		return a.Adaptor.GetRequestURL(meta)
 	}
 }
 
-func (a *Adaptor) ConvertRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Reader, error) {
+func (a *Adaptor) ConvertRequest(meta *meta.Meta, req *http.Request) (string, http.Header, io.Reader, error) {
 	switch meta.Mode {
 	case relaymode.ChatCompletions:
 		meta.Set(openai.DoNotPatchStreamOptionsIncludeUsageMetaKey, true)
diff --git a/service/aiproxy/relay/adaptor/minimax/constants.go b/service/aiproxy/relay/adaptor/minimax/constants.go
index 468b0ac0e84e..efc9edf1f952 100644
--- a/service/aiproxy/relay/adaptor/minimax/constants.go
+++ b/service/aiproxy/relay/adaptor/minimax/constants.go
@@ -14,9 +14,11 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerMiniMax,
 		InputPrice:  0.01,
 		OutputPrice: 0.01,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 245760,
-		},
+		RPM:         120,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(245760),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "abab6.5s-chat",
@@ -24,9 +26,11 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerMiniMax,
 		InputPrice:  0.001,
 		OutputPrice: 0.001,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 245760,
-		},
+		RPM:         120,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(245760),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "abab6.5g-chat",
@@ -34,9 +38,11 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerMiniMax,
 		InputPrice:  0.005,
 		OutputPrice: 0.005,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 8192,
-		},
+		RPM:         120,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(8192),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "abab6.5t-chat",
@@ -44,9 +50,11 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerMiniMax,
 		InputPrice:  0.005,
 		OutputPrice: 0.005,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 8192,
-		},
+		RPM:         120,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(8192),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "abab5.5s-chat",
@@ -54,9 +62,11 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerMiniMax,
 		InputPrice:  0.005,
 		OutputPrice: 0.005,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 8192,
-		},
+		RPM:         120,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(8192),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "abab5.5-chat",
@@ -64,9 +74,11 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerMiniMax,
 		InputPrice:  0.015,
 		OutputPrice: 0.015,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 16384,
-		},
+		RPM:         120,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(16384),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 
 	{
@@ -74,9 +86,10 @@ var ModelList = []*model.ModelConfig{
 		Type:       relaymode.AudioSpeech,
 		Owner:      model.ModelOwnerMiniMax,
 		InputPrice: 0.2,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigSupportFormatsKey: []string{"pcm", "wav", "flac", "mp3"},
-			model.ModelConfigSupportVoicesKey: []string{
+		RPM:        20,
+		Config: model.NewModelConfig(
+			model.WithModelConfigSupportFormats([]string{"pcm", "wav", "flac", "mp3"}),
+			model.WithModelConfigSupportVoices([]string{
 				"male-qn-qingse", "male-qn-jingying", "male-qn-badao", "male-qn-daxuesheng",
 				"female-shaonv", "female-yujie", "female-chengshu", "female-tianmei",
 				"presenter_male", "presenter_female",
@@ -90,7 +103,7 @@ var ModelList = []*model.ModelConfig{
 				"Santa_Claus", "Grinch", "Rudolph", "Arnold",
 				"Charming_Santa", "Charming_Lady", "Sweet_Girl", "Cute_Elf",
 				"Attractive_Girl", "Serene_Woman",
-			},
-		},
+			}),
+		),
 	},
 }
diff --git a/service/aiproxy/relay/adaptor/minimax/key.go b/service/aiproxy/relay/adaptor/minimax/key.go
new file mode 100644
index 000000000000..b352343e446a
--- /dev/null
+++ b/service/aiproxy/relay/adaptor/minimax/key.go
@@ -0,0 +1,30 @@
+package minimax
+
+import (
+	"errors"
+	"strings"
+
+	"github.com/labring/sealos/service/aiproxy/relay/adaptor"
+)
+
+var _ adaptor.KeyValidator = (*Adaptor)(nil)
+
+func (a *Adaptor) ValidateKey(key string) error {
+	_, _, err := GetAPIKeyAndGroupID(key)
+	if err != nil {
+		return err
+	}
+	return nil
+}
+
+func (a *Adaptor) KeyHelp() string {
+	return "api_key|group_id"
+}
+
+func GetAPIKeyAndGroupID(key string) (string, string, error) {
+	keys := strings.Split(key, "|")
+	if len(keys) != 2 {
+		return "", "", errors.New("invalid key format")
+	}
+	return keys[0], keys[1], nil
+}
diff --git a/service/aiproxy/relay/adaptor/minimax/tts.go b/service/aiproxy/relay/adaptor/minimax/tts.go
index 87ec58fa3f78..712ce8a8b09b 100644
--- a/service/aiproxy/relay/adaptor/minimax/tts.go
+++ b/service/aiproxy/relay/adaptor/minimax/tts.go
@@ -19,13 +19,13 @@ import (
 	"github.com/labring/sealos/service/aiproxy/relay/utils"
 )
 
-func ConvertTTSRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Reader, error) {
+func ConvertTTSRequest(meta *meta.Meta, req *http.Request) (string, http.Header, io.Reader, error) {
 	reqMap, err := utils.UnmarshalMap(req)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
 
-	reqMap["model"] = meta.ActualModelName
+	reqMap["model"] = meta.ActualModel
 
 	reqMap["text"] = reqMap["input"]
 	delete(reqMap, "input")
@@ -79,10 +79,10 @@ func ConvertTTSRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Read
 
 	body, err := json.Marshal(reqMap)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
 
-	return nil, bytes.NewReader(body), nil
+	return http.MethodPost, nil, bytes.NewReader(body), nil
 }
 
 type TTSExtraInfo struct {
@@ -137,10 +137,10 @@ func TTSHandler(meta *meta.Meta, c *gin.Context, resp *http.Response) (*relaymod
 
 	_, err = c.Writer.Write(audioBytes)
 	if err != nil {
-		log.Error("write response body failed: " + err.Error())
+		log.Warnf("write response body failed: %v", err)
 	}
 
-	usageCharacters := meta.PromptTokens
+	usageCharacters := meta.InputTokens
 	if result.ExtraInfo.UsageCharacters > 0 {
 		usageCharacters = result.ExtraInfo.UsageCharacters
 	}
@@ -161,7 +161,7 @@ func ttsStreamHandler(meta *meta.Meta, c *gin.Context, resp *http.Response) (*re
 	scanner := bufio.NewScanner(resp.Body)
 	scanner.Split(bufio.ScanLines)
 
-	usageCharacters := meta.PromptTokens
+	usageCharacters := meta.InputTokens
 
 	for scanner.Scan() {
 		data := scanner.Text()
@@ -190,7 +190,7 @@ func ttsStreamHandler(meta *meta.Meta, c *gin.Context, resp *http.Response) (*re
 
 		_, err = c.Writer.Write(audioBytes)
 		if err != nil {
-			log.Error("write response body failed: " + err.Error())
+			log.Warnf("write response body failed: %v", err)
 		}
 	}
 
diff --git a/service/aiproxy/relay/adaptor/mistral/adaptor.go b/service/aiproxy/relay/adaptor/mistral/adaptor.go
index f27bcff71f91..413cbc1797f2 100644
--- a/service/aiproxy/relay/adaptor/mistral/adaptor.go
+++ b/service/aiproxy/relay/adaptor/mistral/adaptor.go
@@ -3,20 +3,16 @@ package mistral
 import (
 	"github.com/labring/sealos/service/aiproxy/model"
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor/openai"
-	"github.com/labring/sealos/service/aiproxy/relay/meta"
 )
 
 type Adaptor struct {
 	openai.Adaptor
 }
 
-const baseURL = "https://api.mistral.ai"
+const baseURL = "https://api.mistral.ai/v1"
 
-func (a *Adaptor) GetRequestURL(meta *meta.Meta) (string, error) {
-	if meta.Channel.BaseURL == "" {
-		meta.Channel.BaseURL = baseURL
-	}
-	return a.Adaptor.GetRequestURL(meta)
+func (a *Adaptor) GetBaseURL() string {
+	return baseURL
 }
 
 func (a *Adaptor) GetModelList() []*model.ModelConfig {
diff --git a/service/aiproxy/relay/adaptor/moonshot/adaptor.go b/service/aiproxy/relay/adaptor/moonshot/adaptor.go
index 0ad45bf456d7..0f109a1057d5 100644
--- a/service/aiproxy/relay/adaptor/moonshot/adaptor.go
+++ b/service/aiproxy/relay/adaptor/moonshot/adaptor.go
@@ -3,20 +3,16 @@ package moonshot
 import (
 	"github.com/labring/sealos/service/aiproxy/model"
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor/openai"
-	"github.com/labring/sealos/service/aiproxy/relay/meta"
 )
 
 type Adaptor struct {
 	openai.Adaptor
 }
 
-const baseURL = "https://api.moonshot.cn"
+const baseURL = "https://api.moonshot.cn/v1"
 
-func (a *Adaptor) GetRequestURL(meta *meta.Meta) (string, error) {
-	if meta.Channel.BaseURL == "" {
-		meta.Channel.BaseURL = baseURL
-	}
-	return a.Adaptor.GetRequestURL(meta)
+func (a *Adaptor) GetBaseURL() string {
+	return baseURL
 }
 
 func (a *Adaptor) GetModelList() []*model.ModelConfig {
diff --git a/service/aiproxy/relay/adaptor/moonshot/balance.go b/service/aiproxy/relay/adaptor/moonshot/balance.go
index 8e901a52976c..896625ff918e 100644
--- a/service/aiproxy/relay/adaptor/moonshot/balance.go
+++ b/service/aiproxy/relay/adaptor/moonshot/balance.go
@@ -10,7 +10,7 @@ import (
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor"
 )
 
-var _ adaptor.GetBalance = (*Adaptor)(nil)
+var _ adaptor.Balancer = (*Adaptor)(nil)
 
 func (a *Adaptor) GetBalance(channel *model.Channel) (float64, error) {
 	u := channel.BaseURL
diff --git a/service/aiproxy/relay/adaptor/moonshot/constants.go b/service/aiproxy/relay/adaptor/moonshot/constants.go
index 2a77f4cef50d..905f015c73c5 100644
--- a/service/aiproxy/relay/adaptor/moonshot/constants.go
+++ b/service/aiproxy/relay/adaptor/moonshot/constants.go
@@ -12,9 +12,11 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerMoonshot,
 		InputPrice:  0.012,
 		OutputPrice: 0.012,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxInputTokensKey: 8192,
-		},
+		RPM:         500,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxInputTokens(8192),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "moonshot-v1-32k",
@@ -22,9 +24,11 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerMoonshot,
 		InputPrice:  0.024,
 		OutputPrice: 0.024,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxInputTokensKey: 32768,
-		},
+		RPM:         500,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxInputTokens(32768),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "moonshot-v1-128k",
@@ -32,8 +36,50 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerMoonshot,
 		InputPrice:  0.06,
 		OutputPrice: 0.06,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxInputTokensKey: 131072,
-		},
+		RPM:         500,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxInputTokens(131072),
+			model.WithModelConfigToolChoice(true),
+		),
+	},
+
+	{
+		Model:       "moonshot-v1-8k-vision-preview",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerMoonshot,
+		InputPrice:  0.012,
+		OutputPrice: 0.012,
+		RPM:         500,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxInputTokens(8192),
+			model.WithModelConfigToolChoice(true),
+			model.WithModelConfigVision(true),
+		),
+	},
+	{
+		Model:       "moonshot-v1-32k-vision-preview",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerMoonshot,
+		InputPrice:  0.024,
+		OutputPrice: 0.024,
+		RPM:         500,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxInputTokens(32768),
+			model.WithModelConfigToolChoice(true),
+			model.WithModelConfigVision(true),
+		),
+	},
+	{
+		Model:       "moonshot-v1-128k-vision-preview",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerMoonshot,
+		InputPrice:  0.06,
+		OutputPrice: 0.06,
+		RPM:         500,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxInputTokens(131072),
+			model.WithModelConfigToolChoice(true),
+			model.WithModelConfigVision(true),
+		),
 	},
 }
diff --git a/service/aiproxy/relay/adaptor/novita/adaptor.go b/service/aiproxy/relay/adaptor/novita/adaptor.go
index 1ab848ad4e42..a1b45a0d36a5 100644
--- a/service/aiproxy/relay/adaptor/novita/adaptor.go
+++ b/service/aiproxy/relay/adaptor/novita/adaptor.go
@@ -1,37 +1,22 @@
 package novita
 
 import (
-	"fmt"
-
 	"github.com/labring/sealos/service/aiproxy/model"
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor/openai"
-	"github.com/labring/sealos/service/aiproxy/relay/meta"
-	"github.com/labring/sealos/service/aiproxy/relay/relaymode"
 )
 
-func GetRequestURL(meta *meta.Meta) (string, error) {
-	u := meta.Channel.BaseURL
-	if u == "" {
-		u = baseURL
-	}
-	if meta.Mode == relaymode.ChatCompletions {
-		return u + "/chat/completions", nil
-	}
-	return "", fmt.Errorf("unsupported relay mode %d for novita", meta.Mode)
-}
-
 type Adaptor struct {
 	openai.Adaptor
 }
 
 const baseURL = "https://api.novita.ai/v3/openai"
 
-func (a *Adaptor) GetModelList() []*model.ModelConfig {
-	return ModelList
+func (a *Adaptor) GetBaseURL() string {
+	return baseURL
 }
 
-func (a *Adaptor) GetRequestURL(meta *meta.Meta) (string, error) {
-	return GetRequestURL(meta)
+func (a *Adaptor) GetModelList() []*model.ModelConfig {
+	return ModelList
 }
 
 func (a *Adaptor) GetChannelName() string {
diff --git a/service/aiproxy/relay/adaptor/ollama/adaptor.go b/service/aiproxy/relay/adaptor/ollama/adaptor.go
index d281190f726d..554f34de4a21 100644
--- a/service/aiproxy/relay/adaptor/ollama/adaptor.go
+++ b/service/aiproxy/relay/adaptor/ollama/adaptor.go
@@ -6,25 +6,25 @@ import (
 	"io"
 	"net/http"
 
+	"github.com/gin-gonic/gin"
 	"github.com/labring/sealos/service/aiproxy/model"
 	"github.com/labring/sealos/service/aiproxy/relay/meta"
+	relaymodel "github.com/labring/sealos/service/aiproxy/relay/model"
 	"github.com/labring/sealos/service/aiproxy/relay/relaymode"
 	"github.com/labring/sealos/service/aiproxy/relay/utils"
-
-	"github.com/gin-gonic/gin"
-	relaymodel "github.com/labring/sealos/service/aiproxy/relay/model"
 )
 
 type Adaptor struct{}
 
 const baseURL = "http://localhost:11434"
 
+func (a *Adaptor) GetBaseURL() string {
+	return baseURL
+}
+
 func (a *Adaptor) GetRequestURL(meta *meta.Meta) (string, error) {
 	// https://github.com/ollama/ollama/blob/main/docs/api.md
 	u := meta.Channel.BaseURL
-	if u == "" {
-		u = baseURL
-	}
 	switch meta.Mode {
 	case relaymode.Embeddings:
 		return u + "/api/embed", nil
@@ -40,9 +40,9 @@ func (a *Adaptor) SetupRequestHeader(meta *meta.Meta, _ *gin.Context, req *http.
 	return nil
 }
 
-func (a *Adaptor) ConvertRequest(meta *meta.Meta, request *http.Request) (http.Header, io.Reader, error) {
+func (a *Adaptor) ConvertRequest(meta *meta.Meta, request *http.Request) (string, http.Header, io.Reader, error) {
 	if request == nil {
-		return nil, nil, errors.New("request is nil")
+		return "", nil, nil, errors.New("request is nil")
 	}
 	switch meta.Mode {
 	case relaymode.Embeddings:
@@ -50,7 +50,7 @@ func (a *Adaptor) ConvertRequest(meta *meta.Meta, request *http.Request) (http.H
 	case relaymode.ChatCompletions:
 		return ConvertRequest(meta, request)
 	default:
-		return nil, nil, fmt.Errorf("unsupported mode: %d", meta.Mode)
+		return "", nil, nil, fmt.Errorf("unsupported mode: %d", meta.Mode)
 	}
 }
 
@@ -58,23 +58,15 @@ func (a *Adaptor) DoRequest(_ *meta.Meta, _ *gin.Context, req *http.Request) (*h
 	return utils.DoRequest(req)
 }
 
-func (a *Adaptor) ConvertSTTRequest(*http.Request) (io.Reader, error) {
-	return nil, errors.New("not implemented")
-}
-
-func (a *Adaptor) ConvertTTSRequest(*relaymodel.TextToSpeechRequest) (any, error) {
-	return nil, errors.New("not implemented")
-}
-
 func (a *Adaptor) DoResponse(meta *meta.Meta, c *gin.Context, resp *http.Response) (usage *relaymodel.Usage, err *relaymodel.ErrorWithStatusCode) {
 	switch meta.Mode {
 	case relaymode.Embeddings:
-		err, usage = EmbeddingHandler(c, resp)
+		err, usage = EmbeddingHandler(meta, c, resp)
 	default:
 		if utils.IsStreamResponse(resp) {
-			err, usage = StreamHandler(c, resp)
+			err, usage = StreamHandler(meta, c, resp)
 		} else {
-			err, usage = Handler(c, resp)
+			err, usage = Handler(meta, c, resp)
 		}
 	}
 	return
diff --git a/service/aiproxy/relay/adaptor/ollama/main.go b/service/aiproxy/relay/adaptor/ollama/main.go
index dc7a6c770115..54dfefe9464d 100644
--- a/service/aiproxy/relay/adaptor/ollama/main.go
+++ b/service/aiproxy/relay/adaptor/ollama/main.go
@@ -6,18 +6,16 @@ import (
 	"io"
 	"net/http"
 	"strings"
+	"time"
 
+	"github.com/gin-gonic/gin"
 	json "github.com/json-iterator/go"
+	"github.com/labring/sealos/service/aiproxy/common"
 	"github.com/labring/sealos/service/aiproxy/common/conv"
+	"github.com/labring/sealos/service/aiproxy/common/image"
+	"github.com/labring/sealos/service/aiproxy/common/random"
 	"github.com/labring/sealos/service/aiproxy/common/render"
 	"github.com/labring/sealos/service/aiproxy/middleware"
-
-	"github.com/labring/sealos/service/aiproxy/common/helper"
-	"github.com/labring/sealos/service/aiproxy/common/random"
-
-	"github.com/gin-gonic/gin"
-	"github.com/labring/sealos/service/aiproxy/common"
-	"github.com/labring/sealos/service/aiproxy/common/image"
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor/openai"
 	"github.com/labring/sealos/service/aiproxy/relay/constant"
 	"github.com/labring/sealos/service/aiproxy/relay/meta"
@@ -25,13 +23,13 @@ import (
 	"github.com/labring/sealos/service/aiproxy/relay/utils"
 )
 
-func ConvertRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Reader, error) {
+func ConvertRequest(meta *meta.Meta, req *http.Request) (string, http.Header, io.Reader, error) {
 	var request relaymodel.GeneralOpenAIRequest
 	err := common.UnmarshalBodyReusable(req, &request)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
-	request.Model = meta.ActualModelName
+	request.Model = meta.ActualModel
 
 	ollamaRequest := ChatRequest{
 		Model: request.Model,
@@ -57,7 +55,7 @@ func ConvertRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Reader,
 			case relaymodel.ContentTypeImageURL:
 				_, data, err := image.GetImageFromURL(req.Context(), part.ImageURL.URL)
 				if err != nil {
-					return nil, nil, err
+					return "", nil, nil, err
 				}
 				imageUrls = append(imageUrls, data)
 			}
@@ -71,13 +69,13 @@ func ConvertRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Reader,
 
 	data, err := json.Marshal(ollamaRequest)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
 
-	return nil, bytes.NewReader(data), nil
+	return http.MethodPost, nil, bytes.NewReader(data), nil
 }
 
-func responseOllama2OpenAI(response *ChatResponse) *openai.TextResponse {
+func responseOllama2OpenAI(meta *meta.Meta, response *ChatResponse) *openai.TextResponse {
 	choice := openai.TextResponseChoice{
 		Index: 0,
 		Message: relaymodel.Message{
@@ -86,13 +84,13 @@ func responseOllama2OpenAI(response *ChatResponse) *openai.TextResponse {
 		},
 	}
 	if response.Done {
-		choice.FinishReason = "stop"
+		choice.FinishReason = constant.StopFinishReason
 	}
 	fullTextResponse := openai.TextResponse{
 		ID:      "chatcmpl-" + random.GetUUID(),
-		Model:   response.Model,
+		Model:   meta.OriginModel,
 		Object:  "chat.completion",
-		Created: helper.GetTimestamp(),
+		Created: time.Now().Unix(),
 		Choices: []*openai.TextResponseChoice{&choice},
 		Usage: relaymodel.Usage{
 			PromptTokens:     response.PromptEvalCount,
@@ -103,7 +101,7 @@ func responseOllama2OpenAI(response *ChatResponse) *openai.TextResponse {
 	return &fullTextResponse
 }
 
-func streamResponseOllama2OpenAI(ollamaResponse *ChatResponse) *openai.ChatCompletionsStreamResponse {
+func streamResponseOllama2OpenAI(meta *meta.Meta, ollamaResponse *ChatResponse) *openai.ChatCompletionsStreamResponse {
 	var choice openai.ChatCompletionsStreamResponseChoice
 	choice.Delta.Role = ollamaResponse.Message.Role
 	choice.Delta.Content = ollamaResponse.Message.Content
@@ -113,14 +111,23 @@ func streamResponseOllama2OpenAI(ollamaResponse *ChatResponse) *openai.ChatCompl
 	response := openai.ChatCompletionsStreamResponse{
 		ID:      "chatcmpl-" + random.GetUUID(),
 		Object:  "chat.completion.chunk",
-		Created: helper.GetTimestamp(),
-		Model:   ollamaResponse.Model,
+		Created: time.Now().Unix(),
+		Model:   meta.OriginModel,
 		Choices: []*openai.ChatCompletionsStreamResponseChoice{&choice},
 	}
+
+	if ollamaResponse.EvalCount != 0 {
+		response.Usage = &relaymodel.Usage{
+			PromptTokens:     ollamaResponse.PromptEvalCount,
+			CompletionTokens: ollamaResponse.EvalCount,
+			TotalTokens:      ollamaResponse.PromptEvalCount + ollamaResponse.EvalCount,
+		}
+	}
+
 	return &response
 }
 
-func StreamHandler(c *gin.Context, resp *http.Response) (*relaymodel.ErrorWithStatusCode, *relaymodel.Usage) {
+func StreamHandler(meta *meta.Meta, c *gin.Context, resp *http.Response) (*relaymodel.ErrorWithStatusCode, *relaymodel.Usage) {
 	defer resp.Body.Close()
 
 	log := middleware.GetLogger(c)
@@ -155,17 +162,13 @@ func StreamHandler(c *gin.Context, resp *http.Response) (*relaymodel.ErrorWithSt
 			continue
 		}
 
-		if ollamaResponse.EvalCount != 0 {
-			usage.PromptTokens = ollamaResponse.PromptEvalCount
-			usage.CompletionTokens = ollamaResponse.EvalCount
-			usage.TotalTokens = ollamaResponse.PromptEvalCount + ollamaResponse.EvalCount
-		}
+		response := streamResponseOllama2OpenAI(meta, &ollamaResponse)
 
-		response := streamResponseOllama2OpenAI(&ollamaResponse)
-		err = render.ObjectData(c, response)
-		if err != nil {
-			log.Error("error rendering stream response: " + err.Error())
+		if response.Usage != nil {
+			usage = *response.Usage
 		}
+
+		_ = render.ObjectData(c, response)
 	}
 
 	if err := scanner.Err(); err != nil {
@@ -177,12 +180,12 @@ func StreamHandler(c *gin.Context, resp *http.Response) (*relaymodel.ErrorWithSt
 	return nil, &usage
 }
 
-func ConvertEmbeddingRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Reader, error) {
+func ConvertEmbeddingRequest(meta *meta.Meta, req *http.Request) (string, http.Header, io.Reader, error) {
 	request, err := utils.UnmarshalGeneralOpenAIRequest(req)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
-	request.Model = meta.ActualModelName
+	request.Model = meta.ActualModel
 	data, err := json.Marshal(&EmbeddingRequest{
 		Model: request.Model,
 		Input: request.ParseInput(),
@@ -195,12 +198,12 @@ func ConvertEmbeddingRequest(meta *meta.Meta, req *http.Request) (http.Header, i
 		},
 	})
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
-	return nil, bytes.NewReader(data), nil
+	return http.MethodPost, nil, bytes.NewReader(data), nil
 }
 
-func EmbeddingHandler(c *gin.Context, resp *http.Response) (*relaymodel.ErrorWithStatusCode, *relaymodel.Usage) {
+func EmbeddingHandler(meta *meta.Meta, c *gin.Context, resp *http.Response) (*relaymodel.ErrorWithStatusCode, *relaymodel.Usage) {
 	defer resp.Body.Close()
 
 	var ollamaResponse EmbeddingResponse
@@ -221,7 +224,7 @@ func EmbeddingHandler(c *gin.Context, resp *http.Response) (*relaymodel.ErrorWit
 		}, nil
 	}
 
-	fullTextResponse := embeddingResponseOllama2OpenAI(&ollamaResponse)
+	fullTextResponse := embeddingResponseOllama2OpenAI(meta, &ollamaResponse)
 	jsonResponse, err := json.Marshal(fullTextResponse)
 	if err != nil {
 		return openai.ErrorWrapper(err, "marshal_response_body_failed", http.StatusInternalServerError), nil
@@ -232,12 +235,15 @@ func EmbeddingHandler(c *gin.Context, resp *http.Response) (*relaymodel.ErrorWit
 	return nil, &fullTextResponse.Usage
 }
 
-func embeddingResponseOllama2OpenAI(response *EmbeddingResponse) *openai.EmbeddingResponse {
+func embeddingResponseOllama2OpenAI(meta *meta.Meta, response *EmbeddingResponse) *openai.EmbeddingResponse {
 	openAIEmbeddingResponse := openai.EmbeddingResponse{
 		Object: "list",
 		Data:   make([]*openai.EmbeddingResponseItem, 0, 1),
-		Model:  response.Model,
-		Usage:  relaymodel.Usage{TotalTokens: 0},
+		Model:  meta.OriginModel,
+		Usage: relaymodel.Usage{
+			PromptTokens: response.PromptEvalCount,
+			TotalTokens:  response.PromptEvalCount,
+		},
 	}
 
 	for i, embedding := range response.Embeddings {
@@ -250,7 +256,7 @@ func embeddingResponseOllama2OpenAI(response *EmbeddingResponse) *openai.Embeddi
 	return &openAIEmbeddingResponse
 }
 
-func Handler(c *gin.Context, resp *http.Response) (*relaymodel.ErrorWithStatusCode, *relaymodel.Usage) {
+func Handler(meta *meta.Meta, c *gin.Context, resp *http.Response) (*relaymodel.ErrorWithStatusCode, *relaymodel.Usage) {
 	defer resp.Body.Close()
 
 	var ollamaResponse ChatResponse
@@ -269,7 +275,7 @@ func Handler(c *gin.Context, resp *http.Response) (*relaymodel.ErrorWithStatusCo
 			StatusCode: resp.StatusCode,
 		}, nil
 	}
-	fullTextResponse := responseOllama2OpenAI(&ollamaResponse)
+	fullTextResponse := responseOllama2OpenAI(meta, &ollamaResponse)
 	jsonResponse, err := json.Marshal(fullTextResponse)
 	if err != nil {
 		return openai.ErrorWrapper(err, "marshal_response_body_failed", http.StatusInternalServerError), nil
diff --git a/service/aiproxy/relay/adaptor/ollama/model.go b/service/aiproxy/relay/adaptor/ollama/model.go
index 7dc4c773c89b..454af1823c81 100644
--- a/service/aiproxy/relay/adaptor/ollama/model.go
+++ b/service/aiproxy/relay/adaptor/ollama/model.go
@@ -22,6 +22,7 @@ type ChatRequest struct {
 	Model    string    `json:"model,omitempty"`
 	Messages []Message `json:"messages,omitempty"`
 	Stream   bool      `json:"stream"`
+	Format   any       `json:"format,omitempty"`
 }
 
 type ChatResponse struct {
@@ -45,7 +46,8 @@ type EmbeddingRequest struct {
 }
 
 type EmbeddingResponse struct {
-	Error      string      `json:"error,omitempty"`
-	Model      string      `json:"model"`
-	Embeddings [][]float64 `json:"embeddings"`
+	Error           string      `json:"error,omitempty"`
+	Model           string      `json:"model"`
+	Embeddings      [][]float64 `json:"embeddings"`
+	PromptEvalCount int         `json:"prompt_eval_count,omitempty"`
 }
diff --git a/service/aiproxy/relay/adaptor/openai/adaptor.go b/service/aiproxy/relay/adaptor/openai/adaptor.go
index e4d3a5bd3707..6288124a9328 100644
--- a/service/aiproxy/relay/adaptor/openai/adaptor.go
+++ b/service/aiproxy/relay/adaptor/openai/adaptor.go
@@ -3,10 +3,8 @@ package openai
 import (
 	"bytes"
 	"errors"
-	"fmt"
 	"io"
 	"net/http"
-	"strings"
 
 	"github.com/gin-gonic/gin"
 	json "github.com/json-iterator/go"
@@ -23,15 +21,14 @@ var _ adaptor.Adaptor = (*Adaptor)(nil)
 
 type Adaptor struct{}
 
-const baseURL = "https://api.openai.com"
+const baseURL = "https://api.openai.com/v1"
 
-const MetaBaseURLNoV1 = "base_url_no_v1"
+func (a *Adaptor) GetBaseURL() string {
+	return baseURL
+}
 
 func (a *Adaptor) GetRequestURL(meta *meta.Meta) (string, error) {
 	u := meta.Channel.BaseURL
-	if u == "" {
-		u = baseURL
-	}
 
 	var path string
 	switch meta.Mode {
@@ -59,11 +56,7 @@ func (a *Adaptor) GetRequestURL(meta *meta.Meta) (string, error) {
 		return "", errors.New("unsupported mode")
 	}
 
-	if meta.GetBool(MetaBaseURLNoV1) ||
-		(strings.HasPrefix(u, "https://gateway.ai.cloudflare.com") && strings.HasSuffix(u, "/openai")) {
-		return u + path, nil
-	}
-	return fmt.Sprintf("%s/v1%s", u, path), nil
+	return u + path, nil
 }
 
 func (a *Adaptor) SetupRequestHeader(meta *meta.Meta, _ *gin.Context, req *http.Request) error {
@@ -71,22 +64,22 @@ func (a *Adaptor) SetupRequestHeader(meta *meta.Meta, _ *gin.Context, req *http.
 	return nil
 }
 
-func (a *Adaptor) ConvertRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Reader, error) {
+func (a *Adaptor) ConvertRequest(meta *meta.Meta, req *http.Request) (string, http.Header, io.Reader, error) {
 	return ConvertRequest(meta, req)
 }
 
-func ConvertRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Reader, error) {
+func ConvertRequest(meta *meta.Meta, req *http.Request) (string, http.Header, io.Reader, error) {
 	if req == nil {
-		return nil, nil, errors.New("request is nil")
+		return "", nil, nil, errors.New("request is nil")
 	}
 	switch meta.Mode {
 	case relaymode.Moderations:
 		meta.Set(MetaEmbeddingsPatchInputToSlices, true)
 		return ConvertEmbeddingsRequest(meta, req)
-	case relaymode.Embeddings:
+	case relaymode.Embeddings, relaymode.Completions:
 		return ConvertEmbeddingsRequest(meta, req)
 	case relaymode.ChatCompletions:
-		return ConvertTextRequest(meta, req)
+		return ConvertTextRequest(meta, req, meta.GetBool(DoNotPatchStreamOptionsIncludeUsageMetaKey))
 	case relaymode.ImagesGenerations:
 		return ConvertImageRequest(meta, req)
 	case relaymode.AudioTranscription, relaymode.AudioTranslation:
@@ -96,7 +89,7 @@ func ConvertRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Reader,
 	case relaymode.Rerank:
 		return ConvertRerankRequest(meta, req)
 	default:
-		return nil, nil, errors.New("unsupported convert request mode")
+		return "", nil, nil, errors.New("unsupported convert request mode")
 	}
 }
 
@@ -112,7 +105,7 @@ func DoResponse(meta *meta.Meta, c *gin.Context, resp *http.Response) (usage *re
 		usage, err = RerankHandler(meta, c, resp)
 	case relaymode.Moderations:
 		usage, err = ModerationsHandler(meta, c, resp)
-	case relaymode.Embeddings:
+	case relaymode.Embeddings, relaymode.Completions:
 		fallthrough
 	case relaymode.ChatCompletions:
 		if utils.IsStreamResponse(resp) {
@@ -128,25 +121,25 @@ func DoResponse(meta *meta.Meta, c *gin.Context, resp *http.Response) (usage *re
 
 const DoNotPatchStreamOptionsIncludeUsageMetaKey = "do_not_patch_stream_options_include_usage"
 
-func ConvertTextRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Reader, error) {
+func ConvertTextRequest(meta *meta.Meta, req *http.Request, doNotPatchStreamOptionsIncludeUsage bool) (string, http.Header, io.Reader, error) {
 	reqMap := make(map[string]any)
 	err := common.UnmarshalBodyReusable(req, &reqMap)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
 
-	if !meta.GetBool(DoNotPatchStreamOptionsIncludeUsageMetaKey) {
+	if !doNotPatchStreamOptionsIncludeUsage {
 		if err := patchStreamOptions(reqMap); err != nil {
-			return nil, nil, err
+			return "", nil, nil, err
 		}
 	}
 
-	reqMap["model"] = meta.ActualModelName
+	reqMap["model"] = meta.ActualModel
 	jsonData, err := json.Marshal(reqMap)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
-	return nil, bytes.NewReader(jsonData), nil
+	return http.MethodPost, nil, bytes.NewReader(jsonData), nil
 }
 
 func patchStreamOptions(reqMap map[string]any) error {
diff --git a/service/aiproxy/relay/adaptor/openai/balance.go b/service/aiproxy/relay/adaptor/openai/balance.go
index e6f7efee34ff..b38daf190e9b 100644
--- a/service/aiproxy/relay/adaptor/openai/balance.go
+++ b/service/aiproxy/relay/adaptor/openai/balance.go
@@ -6,12 +6,11 @@ import (
 	"time"
 
 	json "github.com/json-iterator/go"
-	"github.com/labring/sealos/service/aiproxy/common/client"
 	"github.com/labring/sealos/service/aiproxy/model"
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor"
 )
 
-var _ adaptor.GetBalance = (*Adaptor)(nil)
+var _ adaptor.Balancer = (*Adaptor)(nil)
 
 func (a *Adaptor) GetBalance(channel *model.Channel) (float64, error) {
 	return GetBalance(channel)
@@ -29,7 +28,7 @@ func GetBalance(channel *model.Channel) (float64, error) {
 		return 0, err
 	}
 	req1.Header.Set("Authorization", "Bearer "+channel.Key)
-	res1, err := client.HTTPClient.Do(req1)
+	res1, err := http.DefaultClient.Do(req1)
 	if err != nil {
 		return 0, err
 	}
@@ -51,7 +50,7 @@ func GetBalance(channel *model.Channel) (float64, error) {
 		return 0, err
 	}
 	req2.Header.Set("Authorization", "Bearer "+channel.Key)
-	res2, err := client.HTTPClient.Do(req2)
+	res2, err := http.DefaultClient.Do(req2)
 	if err != nil {
 		return 0, err
 	}
diff --git a/service/aiproxy/relay/adaptor/openai/constants.go b/service/aiproxy/relay/adaptor/openai/constants.go
index bbdb1f728f15..a72ce8e8649f 100644
--- a/service/aiproxy/relay/adaptor/openai/constants.go
+++ b/service/aiproxy/relay/adaptor/openai/constants.go
@@ -12,26 +12,10 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerOpenAI,
 		InputPrice:  0.022,
 		OutputPrice: 0.044,
-	},
-	{
-		Model: "gpt-3.5-turbo-0301",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerOpenAI,
-	},
-	{
-		Model: "gpt-3.5-turbo-0613",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerOpenAI,
-	},
-	{
-		Model: "gpt-3.5-turbo-1106",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerOpenAI,
-	},
-	{
-		Model: "gpt-3.5-turbo-0125",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerOpenAI,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(4096),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "gpt-3.5-turbo-16k",
@@ -39,11 +23,10 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerOpenAI,
 		InputPrice:  0.022,
 		OutputPrice: 0.044,
-	},
-	{
-		Model: "gpt-3.5-turbo-16k-0613",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerOpenAI,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(16384),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model: "gpt-3.5-turbo-instruct",
@@ -56,26 +39,10 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerOpenAI,
 		InputPrice:  0.22,
 		OutputPrice: 0.44,
-	},
-	{
-		Model: "gpt-4-0314",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerOpenAI,
-	},
-	{
-		Model: "gpt-4-0613",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerOpenAI,
-	},
-	{
-		Model: "gpt-4-1106-preview",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerOpenAI,
-	},
-	{
-		Model: "gpt-4-0125-preview",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerOpenAI,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(8192),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "gpt-4-32k",
@@ -83,21 +50,10 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerOpenAI,
 		InputPrice:  0.44,
 		OutputPrice: 0.88,
-	},
-	{
-		Model: "gpt-4-32k-0314",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerOpenAI,
-	},
-	{
-		Model: "gpt-4-32k-0613",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerOpenAI,
-	},
-	{
-		Model: "gpt-4-turbo-preview",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerOpenAI,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(32768),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "gpt-4-turbo",
@@ -105,11 +61,10 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerOpenAI,
 		InputPrice:  0.071,
 		OutputPrice: 0.213,
-	},
-	{
-		Model: "gpt-4-turbo-2024-04-09",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerOpenAI,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(131072),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "gpt-4o",
@@ -117,16 +72,11 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerOpenAI,
 		InputPrice:  0.01775,
 		OutputPrice: 0.071,
-	},
-	{
-		Model: "gpt-4o-2024-05-13",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerOpenAI,
-	},
-	{
-		Model: "gpt-4o-2024-08-06",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerOpenAI,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(131072),
+			model.WithModelConfigVision(true),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model: "chatgpt-4o-latest",
@@ -139,11 +89,10 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerOpenAI,
 		InputPrice:  0.001065,
 		OutputPrice: 0.00426,
-	},
-	{
-		Model: "gpt-4o-mini-2024-07-18",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerOpenAI,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(131072),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model: "gpt-4-vision-preview",
@@ -156,6 +105,9 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerOpenAI,
 		InputPrice:  0.0213,
 		OutputPrice: 0.0852,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(131072),
+		),
 	},
 	{
 		Model:       "o1-preview",
@@ -163,7 +115,11 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerOpenAI,
 		InputPrice:  0.1065,
 		OutputPrice: 0.426,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(131072),
+		),
 	},
+
 	{
 		Model: "text-embedding-ada-002",
 		Type:  relaymode.Embeddings,
diff --git a/service/aiproxy/relay/adaptor/openai/embeddings.go b/service/aiproxy/relay/adaptor/openai/embeddings.go
index d0c2997682e1..f1851aa4a8ce 100644
--- a/service/aiproxy/relay/adaptor/openai/embeddings.go
+++ b/service/aiproxy/relay/adaptor/openai/embeddings.go
@@ -13,14 +13,14 @@ import (
 const MetaEmbeddingsPatchInputToSlices = "embeddings_input_to_slices"
 
 //nolint:gocritic
-func ConvertEmbeddingsRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Reader, error) {
+func ConvertEmbeddingsRequest(meta *meta.Meta, req *http.Request) (string, http.Header, io.Reader, error) {
 	reqMap := make(map[string]any)
 	err := common.UnmarshalBodyReusable(req, &reqMap)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
 
-	reqMap["model"] = meta.ActualModelName
+	reqMap["model"] = meta.ActualModel
 
 	if meta.GetBool(MetaEmbeddingsPatchInputToSlices) {
 		switch v := reqMap["input"].(type) {
@@ -31,7 +31,7 @@ func ConvertEmbeddingsRequest(meta *meta.Meta, req *http.Request) (http.Header,
 
 	jsonData, err := json.Marshal(reqMap)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
-	return nil, bytes.NewReader(jsonData), nil
+	return http.MethodPost, nil, bytes.NewReader(jsonData), nil
 }
diff --git a/service/aiproxy/relay/adaptor/openai/image.go b/service/aiproxy/relay/adaptor/openai/image.go
index 9c2ea8d8f971..5386357da45f 100644
--- a/service/aiproxy/relay/adaptor/openai/image.go
+++ b/service/aiproxy/relay/adaptor/openai/image.go
@@ -14,20 +14,20 @@ import (
 	"github.com/labring/sealos/service/aiproxy/relay/model"
 )
 
-func ConvertImageRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Reader, error) {
+func ConvertImageRequest(meta *meta.Meta, req *http.Request) (string, http.Header, io.Reader, error) {
 	reqMap := make(map[string]any)
 	err := common.UnmarshalBodyReusable(req, &reqMap)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
 	meta.Set(MetaResponseFormat, reqMap["response_format"])
 
-	reqMap["model"] = meta.ActualModelName
+	reqMap["model"] = meta.ActualModel
 	jsonData, err := json.Marshal(reqMap)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
-	return nil, bytes.NewReader(jsonData), nil
+	return http.MethodPost, nil, bytes.NewReader(jsonData), nil
 }
 
 func ImageHandler(meta *meta.Meta, c *gin.Context, resp *http.Response) (*model.Usage, *model.ErrorWithStatusCode) {
@@ -71,7 +71,7 @@ func ImageHandler(meta *meta.Meta, c *gin.Context, resp *http.Response) (*model.
 
 	_, err = c.Writer.Write(data)
 	if err != nil {
-		log.Error("write response body failed: " + err.Error())
+		log.Warnf("write response body failed: %v", err)
 	}
 	return usage, nil
 }
diff --git a/service/aiproxy/relay/adaptor/openai/main.go b/service/aiproxy/relay/adaptor/openai/main.go
index bb670ee6a76d..ab9229d55977 100644
--- a/service/aiproxy/relay/adaptor/openai/main.go
+++ b/service/aiproxy/relay/adaptor/openai/main.go
@@ -6,14 +6,13 @@ import (
 	"net/http"
 	"strings"
 
-	json "github.com/json-iterator/go"
-
-	"github.com/labring/sealos/service/aiproxy/common/render"
-	"github.com/labring/sealos/service/aiproxy/middleware"
-
 	"github.com/gin-gonic/gin"
+	json "github.com/json-iterator/go"
 	"github.com/labring/sealos/service/aiproxy/common"
 	"github.com/labring/sealos/service/aiproxy/common/conv"
+	"github.com/labring/sealos/service/aiproxy/common/render"
+	"github.com/labring/sealos/service/aiproxy/common/splitter"
+	"github.com/labring/sealos/service/aiproxy/middleware"
 	"github.com/labring/sealos/service/aiproxy/relay/meta"
 	"github.com/labring/sealos/service/aiproxy/relay/model"
 	"github.com/labring/sealos/service/aiproxy/relay/relaymode"
@@ -45,6 +44,12 @@ func StreamHandler(meta *meta.Meta, c *gin.Context, resp *http.Response) (*model
 
 	common.SetEventStreamHeaders(c)
 
+	hasReasoningContent := false
+	var thinkSplitter *splitter.Splitter
+	if meta.ChannelConfig.SplitThink {
+		thinkSplitter = splitter.NewThinkSplitter()
+	}
+
 	for scanner.Scan() {
 		data := scanner.Text()
 		if len(data) < DataPrefixLength { // ignore blank line or wrong format
@@ -63,33 +68,33 @@ func StreamHandler(meta *meta.Meta, c *gin.Context, resp *http.Response) (*model
 			err := json.Unmarshal(conv.StringToBytes(data), &streamResponse)
 			if err != nil {
 				log.Error("error unmarshalling stream response: " + err.Error())
-				continue // just ignore the error
-			}
-			if len(streamResponse.Choices) == 0 && streamResponse.Usage == nil {
-				// but for empty choice and no usage, we should not pass it to client, this is for azure
-				continue // just ignore empty choice
+				continue
 			}
 			if streamResponse.Usage != nil {
 				usage = streamResponse.Usage
 			}
 			for _, choice := range streamResponse.Choices {
 				responseText += choice.Delta.StringContent()
+				if choice.Delta.ReasoningContent != "" {
+					hasReasoningContent = true
+				}
 			}
-			// streamResponse.Model = meta.ActualModelName
 			respMap := make(map[string]any)
 			err = json.Unmarshal(conv.StringToBytes(data), &respMap)
 			if err != nil {
 				log.Error("error unmarshalling stream response: " + err.Error())
 				continue
 			}
-			if _, ok := respMap["model"]; ok && meta.OriginModelName != "" {
-				respMap["model"] = meta.OriginModelName
+			if _, ok := respMap["model"]; ok && meta.OriginModel != "" {
+				respMap["model"] = meta.OriginModel
 			}
-			err = render.ObjectData(c, respMap)
-			if err != nil {
-				log.Error("error rendering stream response: " + err.Error())
+			if meta.ChannelConfig.SplitThink && !hasReasoningContent {
+				StreamSplitThink(respMap, thinkSplitter, func(data map[string]any) {
+					_ = render.ObjectData(c, data)
+				})
 				continue
 			}
+			_ = render.ObjectData(c, respMap)
 		case relaymode.Completions:
 			var streamResponse CompletionsStreamResponse
 			err := json.Unmarshal(conv.StringToBytes(data), &streamResponse)
@@ -100,6 +105,9 @@ func StreamHandler(meta *meta.Meta, c *gin.Context, resp *http.Response) (*model
 			for _, choice := range streamResponse.Choices {
 				responseText += choice.Text
 			}
+			if streamResponse.Usage != nil {
+				usage = streamResponse.Usage
+			}
 			render.StringData(c, data)
 		}
 	}
@@ -111,17 +119,81 @@ func StreamHandler(meta *meta.Meta, c *gin.Context, resp *http.Response) (*model
 	render.Done(c)
 
 	if usage == nil || (usage.TotalTokens == 0 && responseText != "") {
-		usage = ResponseText2Usage(responseText, meta.ActualModelName, meta.PromptTokens)
+		usage = ResponseText2Usage(responseText, meta.ActualModel, meta.InputTokens)
 	}
 
 	if usage.TotalTokens != 0 && usage.PromptTokens == 0 { // some channels don't return prompt tokens & completion tokens
-		usage.PromptTokens = meta.PromptTokens
-		usage.CompletionTokens = usage.TotalTokens - meta.PromptTokens
+		usage.PromptTokens = meta.InputTokens
+		usage.CompletionTokens = usage.TotalTokens - meta.InputTokens
 	}
 
 	return usage, nil
 }
 
+// renderCallback maybe reuse data, so don't modify data
+func StreamSplitThink(data map[string]any, thinkSplitter *splitter.Splitter, renderCallback func(data map[string]any)) {
+	choices, ok := data["choices"].([]any)
+	if !ok {
+		return
+	}
+	for _, choice := range choices {
+		choiceMap, ok := choice.(map[string]any)
+		if !ok {
+			renderCallback(data)
+			continue
+		}
+		delta, ok := choiceMap["delta"].(map[string]any)
+		if !ok {
+			renderCallback(data)
+			continue
+		}
+		content, ok := delta["content"].(string)
+		if !ok {
+			renderCallback(data)
+			continue
+		}
+		think, remaining := thinkSplitter.Process(conv.StringToBytes(content))
+		if len(think) == 0 && len(remaining) == 0 {
+			renderCallback(data)
+			continue
+		}
+		if len(think) > 0 {
+			delta["content"] = ""
+			delta["reasoning_content"] = conv.BytesToString(think)
+			renderCallback(data)
+		}
+		if len(remaining) > 0 {
+			delta["content"] = conv.BytesToString(remaining)
+			delta["reasoning_content"] = ""
+			renderCallback(data)
+		}
+	}
+}
+
+func SplitThink(data map[string]any) {
+	choices, ok := data["choices"].([]any)
+	if !ok {
+		return
+	}
+	for _, choice := range choices {
+		choiceMap, ok := choice.(map[string]any)
+		if !ok {
+			continue
+		}
+		delta, ok := choiceMap["delta"].(map[string]any)
+		if !ok {
+			continue
+		}
+		content, ok := delta["content"].(string)
+		if !ok {
+			continue
+		}
+		think, remaining := splitter.NewThinkSplitter().Process(conv.StringToBytes(content))
+		delta["reasoning_content"] = conv.BytesToString(think)
+		delta["content"] = conv.BytesToString(remaining)
+	}
+}
+
 func Handler(meta *meta.Meta, c *gin.Context, resp *http.Response) (*model.Usage, *model.ErrorWithStatusCode) {
 	defer resp.Body.Close()
 
@@ -143,10 +215,10 @@ func Handler(meta *meta.Meta, c *gin.Context, resp *http.Response) (*model.Usage
 	if textResponse.Usage.TotalTokens == 0 || (textResponse.Usage.PromptTokens == 0 && textResponse.Usage.CompletionTokens == 0) {
 		completionTokens := 0
 		for _, choice := range textResponse.Choices {
-			completionTokens += CountTokenText(choice.Message.StringContent(), meta.ActualModelName)
+			completionTokens += CountTokenText(choice.Message.StringContent(), meta.ActualModel)
 		}
 		textResponse.Usage = model.Usage{
-			PromptTokens:     meta.PromptTokens,
+			PromptTokens:     meta.InputTokens,
 			CompletionTokens: completionTokens,
 		}
 	}
@@ -158,8 +230,12 @@ func Handler(meta *meta.Meta, c *gin.Context, resp *http.Response) (*model.Usage
 		return &textResponse.Usage, ErrorWrapper(err, "unmarshal_response_body_failed", http.StatusInternalServerError)
 	}
 
-	if _, ok := respMap["model"]; ok && meta.OriginModelName != "" {
-		respMap["model"] = meta.OriginModelName
+	if _, ok := respMap["model"]; ok && meta.OriginModel != "" {
+		respMap["model"] = meta.OriginModel
+	}
+
+	if meta.ChannelConfig.SplitThink {
+		SplitThink(respMap)
 	}
 
 	newData, err := stdjson.Marshal(respMap)
@@ -169,7 +245,7 @@ func Handler(meta *meta.Meta, c *gin.Context, resp *http.Response) (*model.Usage
 
 	_, err = c.Writer.Write(newData)
 	if err != nil {
-		log.Error("write response body failed: " + err.Error())
+		log.Warnf("write response body failed: %v", err)
 	}
 	return &textResponse.Usage, nil
 }
diff --git a/service/aiproxy/relay/adaptor/openai/model.go b/service/aiproxy/relay/adaptor/openai/model.go
index 6c101b93398f..ad0d579bf56e 100644
--- a/service/aiproxy/relay/adaptor/openai/model.go
+++ b/service/aiproxy/relay/adaptor/openai/model.go
@@ -1,6 +1,8 @@
 package openai
 
-import "github.com/labring/sealos/service/aiproxy/relay/model"
+import (
+	"github.com/labring/sealos/service/aiproxy/relay/model"
+)
 
 type TextContent struct {
 	Type string `json:"type,omitempty"`
@@ -136,6 +138,7 @@ type CompletionsStreamResponse struct {
 		Text         string `json:"text"`
 		FinishReason string `json:"finish_reason"`
 	} `json:"choices"`
+	Usage *model.Usage `json:"usage"`
 }
 
 type SubscriptionResponse struct {
diff --git a/service/aiproxy/relay/adaptor/openai/moderations.go b/service/aiproxy/relay/adaptor/openai/moderations.go
index 877d378f99c6..06d164b41b25 100644
--- a/service/aiproxy/relay/adaptor/openai/moderations.go
+++ b/service/aiproxy/relay/adaptor/openai/moderations.go
@@ -36,13 +36,13 @@ func ModerationsHandler(meta *meta.Meta, c *gin.Context, resp *http.Response) (*
 		return nil, ErrorWrapperWithMessage(errorResp.Error.Message, errorResp.Error.Code, http.StatusBadRequest)
 	}
 
-	if _, ok := respMap["model"]; ok && meta.OriginModelName != "" {
-		respMap["model"] = meta.OriginModelName
+	if _, ok := respMap["model"]; ok && meta.OriginModel != "" {
+		respMap["model"] = meta.OriginModel
 	}
 
 	usage := &model.Usage{
-		PromptTokens: meta.PromptTokens,
-		TotalTokens:  meta.PromptTokens,
+		PromptTokens: meta.InputTokens,
+		TotalTokens:  meta.InputTokens,
 	}
 
 	newData, err := stdjson.Marshal(respMap)
@@ -52,7 +52,7 @@ func ModerationsHandler(meta *meta.Meta, c *gin.Context, resp *http.Response) (*
 
 	_, err = c.Writer.Write(newData)
 	if err != nil {
-		log.Error("write response body failed: " + err.Error())
+		log.Warnf("write response body failed: %v", err)
 	}
 	return usage, nil
 }
diff --git a/service/aiproxy/relay/adaptor/openai/rerank.go b/service/aiproxy/relay/adaptor/openai/rerank.go
index 18f2cd04e645..5940b85f9e21 100644
--- a/service/aiproxy/relay/adaptor/openai/rerank.go
+++ b/service/aiproxy/relay/adaptor/openai/rerank.go
@@ -13,18 +13,18 @@ import (
 	"github.com/labring/sealos/service/aiproxy/relay/model"
 )
 
-func ConvertRerankRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Reader, error) {
+func ConvertRerankRequest(meta *meta.Meta, req *http.Request) (string, http.Header, io.Reader, error) {
 	reqMap := make(map[string]any)
 	err := common.UnmarshalBodyReusable(req, &reqMap)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
-	reqMap["model"] = meta.ActualModelName
+	reqMap["model"] = meta.ActualModel
 	jsonData, err := json.Marshal(reqMap)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
-	return nil, bytes.NewReader(jsonData), nil
+	return http.MethodPost, nil, bytes.NewReader(jsonData), nil
 }
 
 func RerankHandler(meta *meta.Meta, c *gin.Context, resp *http.Response) (*model.Usage, *model.ErrorWithStatusCode) {
@@ -46,18 +46,18 @@ func RerankHandler(meta *meta.Meta, c *gin.Context, resp *http.Response) (*model
 
 	_, err = c.Writer.Write(responseBody)
 	if err != nil {
-		log.Error("write response body failed: " + err.Error())
+		log.Warnf("write response body failed: %v", err)
 	}
 
 	if rerankResponse.Meta.Tokens == nil {
 		return &model.Usage{
-			PromptTokens:     meta.PromptTokens,
+			PromptTokens:     meta.InputTokens,
 			CompletionTokens: 0,
-			TotalTokens:      meta.PromptTokens,
+			TotalTokens:      meta.InputTokens,
 		}, nil
 	}
 	if rerankResponse.Meta.Tokens.InputTokens <= 0 {
-		rerankResponse.Meta.Tokens.InputTokens = meta.PromptTokens
+		rerankResponse.Meta.Tokens.InputTokens = meta.InputTokens
 	}
 	return &model.Usage{
 		PromptTokens:     rerankResponse.Meta.Tokens.InputTokens,
diff --git a/service/aiproxy/relay/adaptor/openai/stt.go b/service/aiproxy/relay/adaptor/openai/stt.go
index a4f8fec6673e..42ffb783650e 100644
--- a/service/aiproxy/relay/adaptor/openai/stt.go
+++ b/service/aiproxy/relay/adaptor/openai/stt.go
@@ -17,10 +17,10 @@ import (
 	"github.com/labring/sealos/service/aiproxy/relay/model"
 )
 
-func ConvertSTTRequest(meta *meta.Meta, request *http.Request) (http.Header, io.Reader, error) {
+func ConvertSTTRequest(meta *meta.Meta, request *http.Request) (string, http.Header, io.Reader, error) {
 	err := request.ParseMultipartForm(1024 * 1024 * 4)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
 
 	multipartBody := &bytes.Buffer{}
@@ -32,9 +32,9 @@ func ConvertSTTRequest(meta *meta.Meta, request *http.Request) (http.Header, io.
 		}
 		value := values[0]
 		if key == "model" {
-			err = multipartWriter.WriteField(key, meta.ActualModelName)
+			err = multipartWriter.WriteField(key, meta.ActualModel)
 			if err != nil {
-				return nil, nil, err
+				return "", nil, nil, err
 			}
 			continue
 		}
@@ -44,7 +44,7 @@ func ConvertSTTRequest(meta *meta.Meta, request *http.Request) (http.Header, io.
 		}
 		err = multipartWriter.WriteField(key, value)
 		if err != nil {
-			return nil, nil, err
+			return "", nil, nil, err
 		}
 	}
 
@@ -55,23 +55,23 @@ func ConvertSTTRequest(meta *meta.Meta, request *http.Request) (http.Header, io.
 		fileHeader := files[0]
 		file, err := fileHeader.Open()
 		if err != nil {
-			return nil, nil, err
+			return "", nil, nil, err
 		}
 		w, err := multipartWriter.CreateFormFile(key, fileHeader.Filename)
 		if err != nil {
 			file.Close()
-			return nil, nil, err
+			return "", nil, nil, err
 		}
 		_, err = io.Copy(w, file)
 		file.Close()
 		if err != nil {
-			return nil, nil, err
+			return "", nil, nil, err
 		}
 	}
 
 	multipartWriter.Close()
 	ContentType := multipartWriter.FormDataContentType()
-	return http.Header{
+	return http.MethodPost, http.Header{
 		"Content-Type": {ContentType},
 	}, multipartBody, nil
 }
@@ -113,20 +113,25 @@ func STTHandler(meta *meta.Meta, c *gin.Context, resp *http.Response) (*model.Us
 	if err != nil {
 		return nil, ErrorWrapper(err, "get_text_from_body_err", http.StatusInternalServerError)
 	}
-	completionTokens := CountTokenText(text, meta.ActualModelName)
+	var promptTokens int
+	if meta.InputTokens > 0 {
+		promptTokens = meta.InputTokens
+	} else {
+		promptTokens = CountTokenText(text, meta.ActualModel)
+	}
 
 	for k, v := range resp.Header {
 		c.Writer.Header().Set(k, v[0])
 	}
 	_, err = c.Writer.Write(responseBody)
 	if err != nil {
-		log.Error("write response body failed: " + err.Error())
+		log.Warnf("write response body failed: %v", err)
 	}
 
 	return &model.Usage{
-		PromptTokens:     0,
-		CompletionTokens: completionTokens,
-		TotalTokens:      completionTokens,
+		PromptTokens:     promptTokens,
+		CompletionTokens: 0,
+		TotalTokens:      promptTokens,
 	}, nil
 }
 
diff --git a/service/aiproxy/relay/adaptor/openai/token.go b/service/aiproxy/relay/adaptor/openai/token.go
index 99b8a98e194a..2b3df7d2be70 100644
--- a/service/aiproxy/relay/adaptor/openai/token.go
+++ b/service/aiproxy/relay/adaptor/openai/token.go
@@ -2,13 +2,11 @@ package openai
 
 import (
 	"errors"
-	"fmt"
 	"math"
 	"strings"
 	"sync"
 	"unicode/utf8"
 
-	"github.com/labring/sealos/service/aiproxy/common/config"
 	"github.com/labring/sealos/service/aiproxy/common/image"
 	"github.com/labring/sealos/service/aiproxy/relay/model"
 	"github.com/pkoukk/tiktoken-go"
@@ -34,28 +32,26 @@ func getTokenEncoder(model string) *tiktoken.Tiktoken {
 	tokenEncoderLock.RLock()
 	tokenEncoder, ok := tokenEncoderMap[model]
 	tokenEncoderLock.RUnlock()
-
-	if ok && tokenEncoder != nil {
+	if ok {
 		return tokenEncoder
 	}
-	if ok {
-		tokenEncoder, err := tiktoken.EncodingForModel(model)
-		if err != nil {
-			log.Error(fmt.Sprintf("failed to get token encoder for model %s: %s, using encoder for gpt-3.5-turbo", model, err.Error()))
-			tokenEncoder = defaultTokenEncoder
-		}
-		tokenEncoderLock.Lock()
-		tokenEncoderMap[model] = tokenEncoder
-		tokenEncoderLock.Unlock()
+
+	tokenEncoderLock.Lock()
+	defer tokenEncoderLock.Unlock()
+	if tokenEncoder, ok := tokenEncoderMap[model]; ok {
 		return tokenEncoder
 	}
-	return defaultTokenEncoder
+
+	tokenEncoder, err := tiktoken.EncodingForModel(model)
+	if err != nil {
+		log.Warnf("failed to get token encoder for model %s: %v, using encoder for gpt-3.5-turbo", model, err)
+		tokenEncoder = defaultTokenEncoder
+	}
+	tokenEncoderMap[model] = tokenEncoder
+	return tokenEncoder
 }
 
 func getTokenNum(tokenEncoder *tiktoken.Tiktoken, text string) int {
-	if config.GetApproximateTokenEnabled() {
-		return int(float64(len(text)) * 0.38)
-	}
 	return len(tokenEncoder.Encode(text, nil, nil))
 }
 
diff --git a/service/aiproxy/relay/adaptor/openai/tts.go b/service/aiproxy/relay/adaptor/openai/tts.go
index 60fe18094e06..b8cba5ce0be2 100644
--- a/service/aiproxy/relay/adaptor/openai/tts.go
+++ b/service/aiproxy/relay/adaptor/openai/tts.go
@@ -14,26 +14,26 @@ import (
 	relaymodel "github.com/labring/sealos/service/aiproxy/relay/model"
 )
 
-func ConvertTTSRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Reader, error) {
+func ConvertTTSRequest(meta *meta.Meta, req *http.Request) (string, http.Header, io.Reader, error) {
 	textRequest := relaymodel.TextToSpeechRequest{}
 	err := common.UnmarshalBodyReusable(req, &textRequest)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
 	if len(textRequest.Input) > 4096 {
-		return nil, nil, errors.New("input is too long (over 4096 characters)")
+		return "", nil, nil, errors.New("input is too long (over 4096 characters)")
 	}
 	reqMap := make(map[string]any)
 	err = common.UnmarshalBodyReusable(req, &reqMap)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
-	reqMap["model"] = meta.ActualModelName
+	reqMap["model"] = meta.ActualModel
 	jsonData, err := json.Marshal(reqMap)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
-	return nil, bytes.NewReader(jsonData), nil
+	return http.MethodPost, nil, bytes.NewReader(jsonData), nil
 }
 
 func TTSHandler(meta *meta.Meta, c *gin.Context, resp *http.Response) (*relaymodel.Usage, *relaymodel.ErrorWithStatusCode) {
@@ -47,11 +47,11 @@ func TTSHandler(meta *meta.Meta, c *gin.Context, resp *http.Response) (*relaymod
 
 	_, err := io.Copy(c.Writer, resp.Body)
 	if err != nil {
-		log.Error("write response body failed: " + err.Error())
+		log.Warnf("write response body failed: %v", err)
 	}
 	return &relaymodel.Usage{
-		PromptTokens:     meta.PromptTokens,
+		PromptTokens:     meta.InputTokens,
 		CompletionTokens: 0,
-		TotalTokens:      meta.PromptTokens,
+		TotalTokens:      meta.InputTokens,
 	}, nil
 }
diff --git a/service/aiproxy/relay/adaptor/siliconflow/adaptor.go b/service/aiproxy/relay/adaptor/siliconflow/adaptor.go
index f2816ef5a0fa..c814250f52f0 100644
--- a/service/aiproxy/relay/adaptor/siliconflow/adaptor.go
+++ b/service/aiproxy/relay/adaptor/siliconflow/adaptor.go
@@ -1,7 +1,6 @@
 package siliconflow
 
 import (
-	"io"
 	"net/http"
 
 	"github.com/gin-gonic/gin"
@@ -19,13 +18,10 @@ type Adaptor struct {
 	openai.Adaptor
 }
 
-const baseURL = "https://api.siliconflow.cn"
+const baseURL = "https://api.siliconflow.cn/v1"
 
-func (a *Adaptor) GetRequestURL(meta *meta.Meta) (string, error) {
-	if meta.Channel.BaseURL == "" {
-		meta.Channel.BaseURL = baseURL
-	}
-	return a.Adaptor.GetRequestURL(meta)
+func (a *Adaptor) GetBaseURL() string {
+	return baseURL
 }
 
 func (a *Adaptor) GetModelList() []*model.ModelConfig {
@@ -36,10 +32,6 @@ func (a *Adaptor) GetChannelName() string {
 	return "siliconflow"
 }
 
-func (a *Adaptor) ConvertRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Reader, error) {
-	return a.Adaptor.ConvertRequest(meta, req)
-}
-
 //nolint:gocritic
 func (a *Adaptor) DoResponse(meta *meta.Meta, c *gin.Context, resp *http.Response) (*relaymodel.Usage, *relaymodel.ErrorWithStatusCode) {
 	usage, err := a.Adaptor.DoResponse(meta, c, resp)
diff --git a/service/aiproxy/relay/adaptor/siliconflow/balance.go b/service/aiproxy/relay/adaptor/siliconflow/balance.go
index 74172143d73d..2fcbeb4c78de 100644
--- a/service/aiproxy/relay/adaptor/siliconflow/balance.go
+++ b/service/aiproxy/relay/adaptor/siliconflow/balance.go
@@ -7,12 +7,11 @@ import (
 	"net/http"
 	"strconv"
 
-	"github.com/labring/sealos/service/aiproxy/common/client"
 	"github.com/labring/sealos/service/aiproxy/model"
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor"
 )
 
-var _ adaptor.GetBalance = (*Adaptor)(nil)
+var _ adaptor.Balancer = (*Adaptor)(nil)
 
 func (a *Adaptor) GetBalance(channel *model.Channel) (float64, error) {
 	u := channel.BaseURL
@@ -25,7 +24,7 @@ func (a *Adaptor) GetBalance(channel *model.Channel) (float64, error) {
 		return 0, err
 	}
 	req.Header.Set("Authorization", "Bearer "+channel.Key)
-	res, err := client.HTTPClient.Do(req)
+	res, err := http.DefaultClient.Do(req)
 	if err != nil {
 		return 0, err
 	}
diff --git a/service/aiproxy/relay/adaptor/siliconflow/constants.go b/service/aiproxy/relay/adaptor/siliconflow/constants.go
index 7fbb0b7855ce..a3e3c942946b 100644
--- a/service/aiproxy/relay/adaptor/siliconflow/constants.go
+++ b/service/aiproxy/relay/adaptor/siliconflow/constants.go
@@ -14,12 +14,15 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerBAAI,
 		InputPrice:  0.0009,
 		OutputPrice: 0,
+		RPM:         2000,
 	},
 
 	{
-		Model: "BAAI/bge-large-zh-v1.5",
-		Type:  relaymode.Embeddings,
-		Owner: model.ModelOwnerBAAI,
+		Model:      "BAAI/bge-large-zh-v1.5",
+		Type:       relaymode.Embeddings,
+		Owner:      model.ModelOwnerBAAI,
+		InputPrice: 0.0005,
+		RPM:        2000,
 	},
 
 	{
diff --git a/service/aiproxy/relay/adaptor/siliconflow/image.go b/service/aiproxy/relay/adaptor/siliconflow/image.go
index 08853c733a4c..517b1ac67c69 100644
--- a/service/aiproxy/relay/adaptor/siliconflow/image.go
+++ b/service/aiproxy/relay/adaptor/siliconflow/image.go
@@ -6,7 +6,6 @@ import (
 	"net/http"
 
 	json "github.com/json-iterator/go"
-
 	"github.com/labring/sealos/service/aiproxy/common"
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor/openai"
 	"github.com/labring/sealos/service/aiproxy/relay/meta"
@@ -33,7 +32,7 @@ func ConvertImageRequest(meta *meta.Meta, request *http.Request) (http.Header, i
 
 	meta.Set(openai.MetaResponseFormat, reqMap["response_format"])
 
-	reqMap["model"] = meta.ActualModelName
+	reqMap["model"] = meta.ActualModel
 	reqMap["batch_size"] = reqMap["n"]
 	delete(reqMap, "n")
 	if _, ok := reqMap["steps"]; ok {
diff --git a/service/aiproxy/relay/adaptor/stepfun/adaptor.go b/service/aiproxy/relay/adaptor/stepfun/adaptor.go
index 6359e3d95f57..e2c01b31bf36 100644
--- a/service/aiproxy/relay/adaptor/stepfun/adaptor.go
+++ b/service/aiproxy/relay/adaptor/stepfun/adaptor.go
@@ -3,20 +3,16 @@ package stepfun
 import (
 	"github.com/labring/sealos/service/aiproxy/model"
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor/openai"
-	"github.com/labring/sealos/service/aiproxy/relay/meta"
 )
 
 type Adaptor struct {
 	openai.Adaptor
 }
 
-const baseURL = "https://api.stepfun.com"
+const baseURL = "https://api.stepfun.com/v1"
 
-func (a *Adaptor) GetRequestURL(meta *meta.Meta) (string, error) {
-	if meta.Channel.BaseURL == "" {
-		meta.Channel.BaseURL = baseURL
-	}
-	return a.Adaptor.GetRequestURL(meta)
+func (a *Adaptor) GetBaseURL() string {
+	return baseURL
 }
 
 func (a *Adaptor) GetModelList() []*model.ModelConfig {
diff --git a/service/aiproxy/relay/adaptor/stepfun/constants.go b/service/aiproxy/relay/adaptor/stepfun/constants.go
index 944d733a4cb0..09ad93613e78 100644
--- a/service/aiproxy/relay/adaptor/stepfun/constants.go
+++ b/service/aiproxy/relay/adaptor/stepfun/constants.go
@@ -7,48 +7,159 @@ import (
 
 var ModelList = []*model.ModelConfig{
 	{
-		Model: "step-1-8k",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerStepFun,
+		Model:       "step-1-8k",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerStepFun,
+		InputPrice:  0.005,
+		OutputPrice: 0.02,
+		RPM:         60,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(8000),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
-		Model: "step-1-32k",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerStepFun,
+		Model:       "step-1-32k",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerStepFun,
+		InputPrice:  0.015,
+		OutputPrice: 0.07,
+		RPM:         60,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(32000),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
-		Model: "step-1-128k",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerStepFun,
+		Model:       "step-1-128k",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerStepFun,
+		InputPrice:  0.04,
+		OutputPrice: 0.2,
+		RPM:         60,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(128000),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
-		Model: "step-1-256k",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerStepFun,
+		Model:       "step-1-256k",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerStepFun,
+		InputPrice:  0.95,
+		OutputPrice: 0.3,
+		RPM:         60,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(256000),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
-		Model: "step-1-flash",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerStepFun,
+		Model:       "step-1-flash",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerStepFun,
+		InputPrice:  0.001,
+		OutputPrice: 0.004,
+		RPM:         60,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(8000),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
-		Model: "step-2-16k",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerStepFun,
+		Model:       "step-2-16k",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerStepFun,
+		InputPrice:  0.038,
+		OutputPrice: 0.12,
+		RPM:         60,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(16000),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
-		Model: "step-1v-8k",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerStepFun,
+		Model:       "step-1v-8k",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerStepFun,
+		InputPrice:  0.005,
+		OutputPrice: 0.02,
+		RPM:         60,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(8000),
+			model.WithModelConfigToolChoice(true),
+			model.WithModelConfigVision(true),
+		),
 	},
 	{
-		Model: "step-1v-32k",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerStepFun,
+		Model:       "step-1v-32k",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerStepFun,
+		InputPrice:  0.015,
+		OutputPrice: 0.07,
+		RPM:         60,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(32000),
+			model.WithModelConfigToolChoice(true),
+			model.WithModelConfigVision(true),
+		),
 	},
 	{
-		Model: "step-1x-medium",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerStepFun,
+		Model:       "step-1.5v-mini",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerStepFun,
+		InputPrice:  0.008,
+		OutputPrice: 0.035,
+		RPM:         60,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(32000),
+			model.WithModelConfigToolChoice(true),
+			model.WithModelConfigVision(true),
+		),
+	},
+
+	{
+		Model:      "step-tts-mini",
+		Type:       relaymode.AudioSpeech,
+		Owner:      model.ModelOwnerStepFun,
+		InputPrice: 0.09,
+		RPM:        60,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxInputTokens(1000),
+			model.WithModelConfigSupportFormats([]string{"opus", "wav", "flac", "mp3"}),
+			model.WithModelConfigSupportVoices([]string{
+				"cixingnansheng", "zhengpaiqingnian", "yuanqinansheng",
+				"qingniandaxuesheng", "boyinnansheng", "ruyananshi",
+				"shenchennanyin", "qinqienvsheng", "wenrounvsheng",
+				"jilingshaonv", "yuanqishaonv", "ruanmengnvsheng",
+				"youyanvsheng", "lengyanyujie", "shuangkuaijiejie",
+				"wenjingxuejie", "linjiajiejie", "linjiameimei",
+				"zhixingjiejie",
+			}),
+		),
+	},
+
+	{
+		Model:      "step-asr",
+		Type:       relaymode.AudioTranscription,
+		Owner:      model.ModelOwnerStepFun,
+		InputPrice: 0.09,
+		RPM:        60,
+	},
+
+	{
+		Model:             "step-1x-medium",
+		Type:              relaymode.ImagesGenerations,
+		Owner:             model.ModelOwnerStepFun,
+		RPM:               60,
+		ImageMaxBatchSize: 1,
+		ImagePrices: map[string]float64{
+			"256x256":   0.1,
+			"512x512":   0.1,
+			"768x768":   0.1,
+			"1024x1024": 0.1,
+			"1280x800":  0.1,
+			"800x1280":  0.1,
+		},
 	},
 }
diff --git a/service/aiproxy/relay/adaptor/tencent/adaptor.go b/service/aiproxy/relay/adaptor/tencent/adaptor.go
index 0b032d03240f..4b3109ed0cc6 100644
--- a/service/aiproxy/relay/adaptor/tencent/adaptor.go
+++ b/service/aiproxy/relay/adaptor/tencent/adaptor.go
@@ -3,7 +3,6 @@ package tencent
 import (
 	"github.com/labring/sealos/service/aiproxy/model"
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor/openai"
-	"github.com/labring/sealos/service/aiproxy/relay/meta"
 )
 
 // https://cloud.tencent.com/document/api/1729/101837
@@ -12,13 +11,10 @@ type Adaptor struct {
 	openai.Adaptor
 }
 
-const baseURL = "https://api.hunyuan.cloud.tencent.com"
+const baseURL = "https://api.hunyuan.cloud.tencent.com/v1"
 
-func (a *Adaptor) GetRequestURL(meta *meta.Meta) (string, error) {
-	if meta.Channel.BaseURL == "" {
-		meta.Channel.BaseURL = baseURL
-	}
-	return a.Adaptor.GetRequestURL(meta)
+func (a *Adaptor) GetBaseURL() string {
+	return baseURL
 }
 
 func (a *Adaptor) GetModelList() []*model.ModelConfig {
diff --git a/service/aiproxy/relay/adaptor/tencent/constants.go b/service/aiproxy/relay/adaptor/tencent/constants.go
index da5770960d90..84bea4faf099 100644
--- a/service/aiproxy/relay/adaptor/tencent/constants.go
+++ b/service/aiproxy/relay/adaptor/tencent/constants.go
@@ -5,11 +5,35 @@ import (
 	"github.com/labring/sealos/service/aiproxy/relay/relaymode"
 )
 
+// https://cloud.tencent.com/document/product/1729/104753
+
 var ModelList = []*model.ModelConfig{
 	{
-		Model: "hunyuan-lite",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerTencent,
+		Model:       "hunyuan-lite",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerTencent,
+		InputPrice:  0.0001,
+		OutputPrice: 0.0001,
+		RPM:         300,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(262144),
+			model.WithModelConfigMaxInputTokens(256000),
+			model.WithModelConfigMaxOutputTokens(6144),
+		),
+	},
+	{
+		Model:       "hunyuan-turbo-latest",
+		Type:        relaymode.ChatCompletions,
+		Owner:       model.ModelOwnerTencent,
+		InputPrice:  0.015,
+		OutputPrice: 0.05,
+		RPM:         300,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(32768),
+			model.WithModelConfigMaxInputTokens(28672),
+			model.WithModelConfigMaxOutputTokens(4096),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "hunyuan-turbo",
@@ -17,13 +41,28 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerTencent,
 		InputPrice:  0.015,
 		OutputPrice: 0.05,
+		RPM:         300,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(32768),
+			model.WithModelConfigMaxInputTokens(28672),
+			model.WithModelConfigMaxOutputTokens(4096),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
+
 	{
 		Model:       "hunyuan-pro",
 		Type:        relaymode.ChatCompletions,
 		Owner:       model.ModelOwnerTencent,
 		InputPrice:  0.03,
 		OutputPrice: 0.10,
+		RPM:         300,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(32768),
+			model.WithModelConfigMaxInputTokens(28672),
+			model.WithModelConfigMaxOutputTokens(4096),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "hunyuan-large",
@@ -31,6 +70,13 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerTencent,
 		InputPrice:  0.004,
 		OutputPrice: 0.012,
+		RPM:         300,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(32768),
+			model.WithModelConfigMaxInputTokens(28672),
+			model.WithModelConfigMaxOutputTokens(4096),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "hunyuan-large-longcontext",
@@ -38,6 +84,11 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerTencent,
 		InputPrice:  0.006,
 		OutputPrice: 0.018,
+		RPM:         300,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(131072),
+			model.WithModelConfigMaxOutputTokens(6144),
+		),
 	},
 	{
 		Model:       "hunyuan-standard",
@@ -45,6 +96,11 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerTencent,
 		InputPrice:  0.0008,
 		OutputPrice: 0.002,
+		RPM:         300,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(32768),
+			model.WithModelConfigMaxOutputTokens(2048),
+		),
 	},
 	// {
 	// 	Model:       "hunyuan-standard-256K",
@@ -59,6 +115,11 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerTencent,
 		InputPrice:  0.004,
 		OutputPrice: 0.008,
+		RPM:         300,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(32768),
+			model.WithModelConfigMaxOutputTokens(4096),
+		),
 	},
 	{
 		Model:       "hunyuan-functioncall",
@@ -66,6 +127,12 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerTencent,
 		InputPrice:  0.004,
 		OutputPrice: 0.008,
+		RPM:         300,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(32768),
+			model.WithModelConfigMaxOutputTokens(4096),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "hunyuan-code",
@@ -73,6 +140,12 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerTencent,
 		InputPrice:  0.004,
 		OutputPrice: 0.008,
+		RPM:         300,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(8192),
+			model.WithModelConfigMaxInputTokens(4096),
+			model.WithModelConfigMaxOutputTokens(4096),
+		),
 	},
 	{
 		Model:       "hunyuan-turbo-vision",
@@ -80,6 +153,14 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerTencent,
 		InputPrice:  0.08,
 		OutputPrice: 0.08,
+		RPM:         300,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(8192),
+			model.WithModelConfigMaxInputTokens(6144),
+			model.WithModelConfigMaxOutputTokens(2048),
+			model.WithModelConfigVision(true),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "hunyuan-vision",
@@ -87,6 +168,14 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerTencent,
 		InputPrice:  0.018,
 		OutputPrice: 0.018,
+		RPM:         300,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(8192),
+			model.WithModelConfigMaxInputTokens(6144),
+			model.WithModelConfigMaxOutputTokens(2048),
+			model.WithModelConfigVision(true),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 
 	{
@@ -94,5 +183,9 @@ var ModelList = []*model.ModelConfig{
 		Type:       relaymode.Embeddings,
 		Owner:      model.ModelOwnerTencent,
 		InputPrice: 0.0007,
+		RPM:        300,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxInputTokens(1024),
+		),
 	},
 }
diff --git a/service/aiproxy/relay/adaptor/togetherai/constants.go b/service/aiproxy/relay/adaptor/togetherai/constants.go
deleted file mode 100644
index dd3db44f496a..000000000000
--- a/service/aiproxy/relay/adaptor/togetherai/constants.go
+++ /dev/null
@@ -1,40 +0,0 @@
-package togetherai
-
-import (
-	"github.com/labring/sealos/service/aiproxy/model"
-	"github.com/labring/sealos/service/aiproxy/relay/adaptor/openai"
-	"github.com/labring/sealos/service/aiproxy/relay/relaymode"
-)
-
-// https://docs.together.ai/docs/inference-models
-
-var ModelList = []*model.ModelConfig{
-	{
-		Model: "meta-llama/Llama-3-70b-chat-hf",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerMeta,
-	},
-	{
-		Model: "deepseek-ai/deepseek-coder-33b-instruct",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerDeepSeek,
-	},
-	{
-		Model: "mistralai/Mixtral-8x22B-Instruct-v0.1",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerMistral,
-	},
-	{
-		Model: "Qwen/Qwen1.5-72B-Chat",
-		Type:  relaymode.ChatCompletions,
-		Owner: model.ModelOwnerAlibaba,
-	},
-}
-
-type Adaptor struct {
-	openai.Adaptor
-}
-
-func (a *Adaptor) GetModelList() []*model.ModelConfig {
-	return ModelList
-}
diff --git a/service/aiproxy/relay/adaptor/vertexai/adaptor.go b/service/aiproxy/relay/adaptor/vertexai/adaptor.go
index fa8ab21ce1f2..64882637b393 100644
--- a/service/aiproxy/relay/adaptor/vertexai/adaptor.go
+++ b/service/aiproxy/relay/adaptor/vertexai/adaptor.go
@@ -23,19 +23,29 @@ const channelName = "vertexai"
 
 type Adaptor struct{}
 
-func (a *Adaptor) ConvertRequest(meta *meta.Meta, request *http.Request) (http.Header, io.Reader, error) {
-	adaptor := GetAdaptor(meta.ActualModelName)
+func (a *Adaptor) GetBaseURL() string {
+	return ""
+}
+
+type Config struct {
+	Region    string
+	ProjectID string
+	ADCJSON   string
+}
+
+func (a *Adaptor) ConvertRequest(meta *meta.Meta, request *http.Request) (string, http.Header, io.Reader, error) {
+	adaptor := GetAdaptor(meta.ActualModel)
 	if adaptor == nil {
-		return nil, nil, errors.New("adaptor not found")
+		return "", nil, nil, errors.New("adaptor not found")
 	}
 
 	return adaptor.ConvertRequest(meta, request)
 }
 
 func (a *Adaptor) DoResponse(meta *meta.Meta, c *gin.Context, resp *http.Response) (usage *relaymodel.Usage, err *relaymodel.ErrorWithStatusCode) {
-	adaptor := GetAdaptor(meta.ActualModelName)
+	adaptor := GetAdaptor(meta.ActualModel)
 	if adaptor == nil {
-		return nil, openai.ErrorWrapperWithMessage(meta.ActualModelName+" adaptor not found", "adaptor_not_found", http.StatusInternalServerError)
+		return nil, openai.ErrorWrapperWithMessage(meta.ActualModel+" adaptor not found", "adaptor_not_found", http.StatusInternalServerError)
 	}
 	return adaptor.DoResponse(meta, c, resp)
 }
@@ -50,7 +60,7 @@ func (a *Adaptor) GetChannelName() string {
 
 func (a *Adaptor) GetRequestURL(meta *meta.Meta) (string, error) {
 	var suffix string
-	if strings.HasPrefix(meta.ActualModelName, "gemini") {
+	if strings.HasPrefix(meta.ActualModel, "gemini") {
 		if meta.GetBool("stream") {
 			suffix = "streamGenerateContent?alt=sse"
 		} else {
@@ -64,28 +74,37 @@ func (a *Adaptor) GetRequestURL(meta *meta.Meta) (string, error) {
 		}
 	}
 
+	config, err := getConfigFromKey(meta.Channel.Key)
+	if err != nil {
+		return "", err
+	}
+
 	if meta.Channel.BaseURL != "" {
 		return fmt.Sprintf(
 			"%s/v1/projects/%s/locations/%s/publishers/google/models/%s:%s",
 			meta.Channel.BaseURL,
-			meta.Channel.Config.VertexAIProjectID,
-			meta.Channel.Config.Region,
-			meta.ActualModelName,
+			config.ProjectID,
+			config.Region,
+			meta.ActualModel,
 			suffix,
 		), nil
 	}
 	return fmt.Sprintf(
 		"https://%s-aiplatform.googleapis.com/v1/projects/%s/locations/%s/publishers/google/models/%s:%s",
-		meta.Channel.Config.Region,
-		meta.Channel.Config.VertexAIProjectID,
-		meta.Channel.Config.Region,
-		meta.ActualModelName,
+		config.Region,
+		config.ProjectID,
+		config.Region,
+		meta.ActualModel,
 		suffix,
 	), nil
 }
 
 func (a *Adaptor) SetupRequestHeader(meta *meta.Meta, _ *gin.Context, req *http.Request) error {
-	token, err := getToken(context.Background(), meta.Channel.ID, meta.Channel.Config.VertexAIADC)
+	config, err := getConfigFromKey(meta.Channel.Key)
+	if err != nil {
+		return err
+	}
+	token, err := getToken(context.Background(), meta.Channel.ID, config.ADCJSON)
 	if err != nil {
 		return err
 	}
diff --git a/service/aiproxy/relay/adaptor/vertexai/claude/adapter.go b/service/aiproxy/relay/adaptor/vertexai/claude/adapter.go
index 8337d7e6ee87..58599896804f 100644
--- a/service/aiproxy/relay/adaptor/vertexai/claude/adapter.go
+++ b/service/aiproxy/relay/adaptor/vertexai/claude/adapter.go
@@ -55,14 +55,14 @@ const anthropicVersion = "vertex-2023-10-16"
 
 type Adaptor struct{}
 
-func (a *Adaptor) ConvertRequest(meta *meta.Meta, request *http.Request) (http.Header, io.Reader, error) {
+func (a *Adaptor) ConvertRequest(meta *meta.Meta, request *http.Request) (string, http.Header, io.Reader, error) {
 	if request == nil {
-		return nil, nil, errors.New("request is nil")
+		return "", nil, nil, errors.New("request is nil")
 	}
 
 	claudeReq, err := anthropic.ConvertRequest(meta, request)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
 	meta.Set("stream", claudeReq.Stream)
 	req := Request{
@@ -79,9 +79,9 @@ func (a *Adaptor) ConvertRequest(meta *meta.Meta, request *http.Request) (http.H
 	}
 	data, err := json.Marshal(req)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
-	return nil, bytes.NewReader(data), nil
+	return http.MethodPost, nil, bytes.NewReader(data), nil
 }
 
 func (a *Adaptor) DoResponse(meta *meta.Meta, c *gin.Context, resp *http.Response) (usage *relaymodel.Usage, err *relaymodel.ErrorWithStatusCode) {
diff --git a/service/aiproxy/relay/adaptor/vertexai/gemini/adapter.go b/service/aiproxy/relay/adaptor/vertexai/gemini/adapter.go
index 8d50a3d4f942..e2e6ccf49400 100644
--- a/service/aiproxy/relay/adaptor/vertexai/gemini/adapter.go
+++ b/service/aiproxy/relay/adaptor/vertexai/gemini/adapter.go
@@ -39,7 +39,7 @@ var ModelList = []*model.ModelConfig{
 
 type Adaptor struct{}
 
-func (a *Adaptor) ConvertRequest(meta *meta.Meta, request *http.Request) (http.Header, io.Reader, error) {
+func (a *Adaptor) ConvertRequest(meta *meta.Meta, request *http.Request) (string, http.Header, io.Reader, error) {
 	return gemini.ConvertRequest(meta, request)
 }
 
diff --git a/service/aiproxy/relay/adaptor/vertexai/key.go b/service/aiproxy/relay/adaptor/vertexai/key.go
new file mode 100644
index 000000000000..955c9b9ca9cd
--- /dev/null
+++ b/service/aiproxy/relay/adaptor/vertexai/key.go
@@ -0,0 +1,39 @@
+package vertexai
+
+import (
+	"errors"
+	"strings"
+
+	"github.com/labring/sealos/service/aiproxy/relay/adaptor"
+)
+
+var _ adaptor.KeyValidator = (*Adaptor)(nil)
+
+func (a *Adaptor) ValidateKey(key string) error {
+	_, err := getConfigFromKey(key)
+	if err != nil {
+		return err
+	}
+	return nil
+}
+
+func (a *Adaptor) KeyHelp() string {
+	return "region|projectID|adcJSON"
+}
+
+// region|projectID|adcJSON
+func getConfigFromKey(key string) (Config, error) {
+	region, after, ok := strings.Cut(key, "|")
+	if !ok {
+		return Config{}, errors.New("invalid key format")
+	}
+	projectID, adcJSON, ok := strings.Cut(after, "|")
+	if !ok {
+		return Config{}, errors.New("invalid key format")
+	}
+	return Config{
+		Region:    region,
+		ProjectID: projectID,
+		ADCJSON:   adcJSON,
+	}, nil
+}
diff --git a/service/aiproxy/relay/adaptor/vertexai/registry.go b/service/aiproxy/relay/adaptor/vertexai/registry.go
index 4173bf8f8033..7253a16e08e2 100644
--- a/service/aiproxy/relay/adaptor/vertexai/registry.go
+++ b/service/aiproxy/relay/adaptor/vertexai/registry.go
@@ -37,7 +37,7 @@ func init() {
 }
 
 type innerAIAdapter interface {
-	ConvertRequest(meta *meta.Meta, request *http.Request) (http.Header, io.Reader, error)
+	ConvertRequest(meta *meta.Meta, request *http.Request) (string, http.Header, io.Reader, error)
 	DoResponse(meta *meta.Meta, c *gin.Context, resp *http.Response) (usage *relaymodel.Usage, err *relaymodel.ErrorWithStatusCode)
 }
 
diff --git a/service/aiproxy/relay/adaptor/vertexai/token.go b/service/aiproxy/relay/adaptor/vertexai/token.go
index 77b64ba9db3a..1f51295e7b91 100644
--- a/service/aiproxy/relay/adaptor/vertexai/token.go
+++ b/service/aiproxy/relay/adaptor/vertexai/token.go
@@ -5,11 +5,10 @@ import (
 	"fmt"
 	"time"
 
-	json "github.com/json-iterator/go"
-	"github.com/labring/sealos/service/aiproxy/common/conv"
-
 	credentials "cloud.google.com/go/iam/credentials/apiv1"
 	"cloud.google.com/go/iam/credentials/apiv1/credentialspb"
+	json "github.com/json-iterator/go"
+	"github.com/labring/sealos/service/aiproxy/common/conv"
 	"github.com/patrickmn/go-cache"
 	"google.golang.org/api/option"
 )
diff --git a/service/aiproxy/relay/adaptor/xunfei/adaptor.go b/service/aiproxy/relay/adaptor/xunfei/adaptor.go
index 46d966df711f..d5e59771ce76 100644
--- a/service/aiproxy/relay/adaptor/xunfei/adaptor.go
+++ b/service/aiproxy/relay/adaptor/xunfei/adaptor.go
@@ -13,30 +13,27 @@ type Adaptor struct {
 	openai.Adaptor
 }
 
-const baseURL = "https://spark-api-open.xf-yun.com"
-
-func (a *Adaptor) GetRequestURL(meta *meta.Meta) (string, error) {
-	if meta.Channel.BaseURL == "" {
-		meta.Channel.BaseURL = baseURL
-	}
-	return a.Adaptor.GetRequestURL(meta)
+func (a *Adaptor) GetBaseURL() string {
+	return baseURL
 }
 
-func (a *Adaptor) ConvertRequest(meta *meta.Meta, req *http.Request) (http.Header, io.Reader, error) {
-	domain, err := getXunfeiDomain(meta.ActualModelName)
+const baseURL = "https://spark-api-open.xf-yun.com/v1"
+
+func (a *Adaptor) ConvertRequest(meta *meta.Meta, req *http.Request) (string, http.Header, io.Reader, error) {
+	domain, err := getXunfeiDomain(meta.ActualModel)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
-	model := meta.ActualModelName
-	meta.ActualModelName = domain
+	model := meta.ActualModel
+	meta.ActualModel = domain
 	defer func() {
-		meta.ActualModelName = model
+		meta.ActualModel = model
 	}()
-	h, body, err := a.Adaptor.ConvertRequest(meta, req)
+	method, h, body, err := a.Adaptor.ConvertRequest(meta, req)
 	if err != nil {
-		return nil, nil, err
+		return "", nil, nil, err
 	}
-	return h, body, nil
+	return method, h, body, nil
 }
 
 func (a *Adaptor) GetModelList() []*model.ModelConfig {
diff --git a/service/aiproxy/relay/adaptor/xunfei/constants.go b/service/aiproxy/relay/adaptor/xunfei/constants.go
index 3f6ad14ccec3..6937e3b23d5c 100644
--- a/service/aiproxy/relay/adaptor/xunfei/constants.go
+++ b/service/aiproxy/relay/adaptor/xunfei/constants.go
@@ -5,6 +5,8 @@ import (
 	"github.com/labring/sealos/service/aiproxy/relay/relaymode"
 )
 
+// https://www.xfyun.cn/doc/spark/HTTP%E8%B0%83%E7%94%A8%E6%96%87%E6%A1%A3.html#_1-%E6%8E%A5%E5%8F%A3%E8%AF%B4%E6%98%8E
+
 var ModelList = []*model.ModelConfig{
 	{
 		Model:       "SparkDesk-4.0-Ultra",
@@ -12,9 +14,11 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerXunfei,
 		InputPrice:  0.14,
 		OutputPrice: 0.14,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 128000,
-		},
+		RPM:         120,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(131072),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "SparkDesk-Lite",
@@ -22,9 +26,10 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerXunfei,
 		InputPrice:  0.001,
 		OutputPrice: 0.001,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 4000,
-		},
+		RPM:         120,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(4096),
+		),
 	},
 	{
 		Model:       "SparkDesk-Max",
@@ -32,9 +37,11 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerXunfei,
 		InputPrice:  0.06,
 		OutputPrice: 0.06,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 128000,
-		},
+		RPM:         120,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(131072),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "SparkDesk-Max-32k",
@@ -42,9 +49,11 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerXunfei,
 		InputPrice:  0.09,
 		OutputPrice: 0.09,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 32000,
-		},
+		RPM:         120,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(32768),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "SparkDesk-Pro",
@@ -52,9 +61,10 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerXunfei,
 		InputPrice:  0.014,
 		OutputPrice: 0.014,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 128000,
-		},
+		RPM:         120,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(131072),
+		),
 	},
 	{
 		Model:       "SparkDesk-Pro-128K",
@@ -62,8 +72,9 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerXunfei,
 		InputPrice:  0.026,
 		OutputPrice: 0.026,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 128000,
-		},
+		RPM:         120,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(131072),
+		),
 	},
 }
diff --git a/service/aiproxy/relay/adaptor/xunfei/key.go b/service/aiproxy/relay/adaptor/xunfei/key.go
new file mode 100644
index 000000000000..55ce0deb40d5
--- /dev/null
+++ b/service/aiproxy/relay/adaptor/xunfei/key.go
@@ -0,0 +1,21 @@
+package xunfei
+
+import (
+	"errors"
+	"strings"
+
+	"github.com/labring/sealos/service/aiproxy/relay/adaptor"
+)
+
+var _ adaptor.KeyValidator = (*Adaptor)(nil)
+
+func (a *Adaptor) ValidateKey(key string) error {
+	if strings.Contains(key, ":") {
+		return nil
+	}
+	return errors.New("invalid key format")
+}
+
+func (a *Adaptor) KeyHelp() string {
+	return "xxx:xxx"
+}
diff --git a/service/aiproxy/relay/adaptor/zhipu/adaptor.go b/service/aiproxy/relay/adaptor/zhipu/adaptor.go
index 719e1791afe5..7d01f8138a5b 100644
--- a/service/aiproxy/relay/adaptor/zhipu/adaptor.go
+++ b/service/aiproxy/relay/adaptor/zhipu/adaptor.go
@@ -1,7 +1,6 @@
 package zhipu
 
 import (
-	"errors"
 	"net/http"
 
 	"github.com/gin-gonic/gin"
@@ -16,23 +15,10 @@ type Adaptor struct {
 	openai.Adaptor
 }
 
-const baseURL = "https://open.bigmodel.cn"
+const baseURL = "https://open.bigmodel.cn/api/paas/v4"
 
-func (a *Adaptor) GetRequestURL(meta *meta.Meta) (string, error) {
-	u := meta.Channel.BaseURL
-	if u == "" {
-		u = baseURL
-	}
-	switch meta.Mode {
-	case relaymode.ImagesGenerations:
-		return u + "/api/paas/v4/images/generations", nil
-	case relaymode.Embeddings:
-		return u + "/api/paas/v4/embeddings", nil
-	case relaymode.ChatCompletions:
-		return u + "/api/paas/v4/chat/completions", nil
-	default:
-		return "", errors.New("unsupported mode")
-	}
+func (a *Adaptor) GetBaseURL() string {
+	return baseURL
 }
 
 func (a *Adaptor) DoResponse(meta *meta.Meta, c *gin.Context, resp *http.Response) (usage *relaymodel.Usage, err *relaymodel.ErrorWithStatusCode) {
diff --git a/service/aiproxy/relay/adaptor/zhipu/constants.go b/service/aiproxy/relay/adaptor/zhipu/constants.go
index bd001273f38a..bd501e73dfcb 100644
--- a/service/aiproxy/relay/adaptor/zhipu/constants.go
+++ b/service/aiproxy/relay/adaptor/zhipu/constants.go
@@ -12,10 +12,11 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerChatGLM,
 		InputPrice:  0.001,
 		OutputPrice: 0.001,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 128000,
-			model.ModelConfigMaxOutputTokensKey:  4096,
-		},
+		RPM:         300,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(131072),
+			model.WithModelConfigMaxOutputTokens(4096),
+		),
 	},
 	{
 		Model:       "glm-4",
@@ -23,10 +24,12 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerChatGLM,
 		InputPrice:  0.1,
 		OutputPrice: 0.1,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 128000,
-			model.ModelConfigMaxOutputTokensKey:  4096,
-		},
+		RPM:         60,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(131072),
+			model.WithModelConfigMaxOutputTokens(4096),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "glm-4-plus",
@@ -34,10 +37,12 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerChatGLM,
 		InputPrice:  0.05,
 		OutputPrice: 0.05,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 128000,
-			model.ModelConfigMaxOutputTokensKey:  4096,
-		},
+		RPM:         600,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(131072),
+			model.WithModelConfigMaxOutputTokens(4096),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "glm-4-air",
@@ -45,10 +50,12 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerChatGLM,
 		InputPrice:  0.001,
 		OutputPrice: 0.001,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 128000,
-			model.ModelConfigMaxOutputTokensKey:  4096,
-		},
+		RPM:         900,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(131072),
+			model.WithModelConfigMaxOutputTokens(4096),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "glm-4-airx",
@@ -56,10 +63,12 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerChatGLM,
 		InputPrice:  0.01,
 		OutputPrice: 0.01,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 8192,
-			model.ModelConfigMaxOutputTokensKey:  4096,
-		},
+		RPM:         60,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(8192),
+			model.WithModelConfigMaxOutputTokens(4096),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "glm-4-long",
@@ -67,10 +76,12 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerChatGLM,
 		InputPrice:  0.001,
 		OutputPrice: 0.001,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 1000000,
-			model.ModelConfigMaxOutputTokensKey:  4096,
-		},
+		RPM:         60,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(1024000),
+			model.WithModelConfigMaxOutputTokens(4096),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "glm-4-flashx",
@@ -78,10 +89,12 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerChatGLM,
 		InputPrice:  0.0001,
 		OutputPrice: 0.0001,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 128000,
-			model.ModelConfigMaxOutputTokensKey:  4096,
-		},
+		RPM:         600,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(131072),
+			model.WithModelConfigMaxOutputTokens(4096),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "glm-4-flash",
@@ -89,10 +102,12 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerChatGLM,
 		InputPrice:  0.0001,
 		OutputPrice: 0.0001,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 128000,
-			model.ModelConfigMaxOutputTokensKey:  4096,
-		},
+		RPM:         1800,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(131072),
+			model.WithModelConfigMaxOutputTokens(4096),
+			model.WithModelConfigToolChoice(true),
+		),
 	},
 	{
 		Model:       "glm-4v-flash",
@@ -100,10 +115,12 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerChatGLM,
 		InputPrice:  0.0001,
 		OutputPrice: 0.0001,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxInputTokensKey:  8192,
-			model.ModelConfigMaxOutputTokensKey: 1024,
-		},
+		RPM:         60,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxInputTokens(8192),
+			model.WithModelConfigMaxOutputTokens(1024),
+			model.WithModelConfigVision(true),
+		),
 	},
 	{
 		Model:       "glm-4v",
@@ -111,10 +128,12 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerChatGLM,
 		InputPrice:  0.05,
 		OutputPrice: 0.05,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxInputTokensKey:  2048,
-			model.ModelConfigMaxOutputTokensKey: 1024,
-		},
+		RPM:         60,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxInputTokens(2048),
+			model.WithModelConfigMaxOutputTokens(1024),
+			model.WithModelConfigVision(true),
+		),
 	},
 	{
 		Model:       "glm-4v-plus",
@@ -122,33 +141,25 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerChatGLM,
 		InputPrice:  0.01,
 		OutputPrice: 0.01,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxInputTokensKey:  8192,
-			model.ModelConfigMaxOutputTokensKey: 1024,
-		},
+		RPM:         60,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxInputTokens(8192),
+			model.WithModelConfigMaxOutputTokens(1024),
+			model.WithModelConfigVision(true),
+		),
 	},
 
 	{
-		Model:       "charglm-3",
-		Type:        relaymode.ChatCompletions,
-		Owner:       model.ModelOwnerChatGLM,
-		InputPrice:  0.015,
-		OutputPrice: 0.015,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 4096,
-			model.ModelConfigMaxOutputTokensKey:  2048,
-		},
-	},
-	{
-		Model:       "emohaa",
+		Model:       "charglm-4",
 		Type:        relaymode.ChatCompletions,
 		Owner:       model.ModelOwnerChatGLM,
-		InputPrice:  0.015,
-		OutputPrice: 0.015,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 8192,
-			model.ModelConfigMaxOutputTokensKey:  4096,
-		},
+		InputPrice:  0.001,
+		OutputPrice: 0.001,
+		RPM:         60,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(4096),
+			model.WithModelConfigMaxOutputTokens(2048),
+		),
 	},
 	{
 		Model:       "codegeex-4",
@@ -156,10 +167,11 @@ var ModelList = []*model.ModelConfig{
 		Owner:       model.ModelOwnerChatGLM,
 		InputPrice:  0.0001,
 		OutputPrice: 0.0001,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxContextTokensKey: 128000,
-			model.ModelConfigMaxOutputTokensKey:  4096,
-		},
+		RPM:         60,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxContextTokens(131072),
+			model.WithModelConfigMaxOutputTokens(4096),
+		),
 	},
 
 	{
@@ -167,18 +179,20 @@ var ModelList = []*model.ModelConfig{
 		Type:       relaymode.Embeddings,
 		Owner:      model.ModelOwnerChatGLM,
 		InputPrice: 0.0005,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxInputTokensKey: 8192,
-		},
+		RPM:        60,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxInputTokens(8192),
+		),
 	},
 	{
 		Model:      "embedding-3",
 		Type:       relaymode.Embeddings,
 		Owner:      model.ModelOwnerChatGLM,
 		InputPrice: 0.0005,
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxInputTokensKey: 8192,
-		},
+		RPM:        600,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxInputTokens(8192),
+		),
 	},
 
 	{
@@ -189,9 +203,10 @@ var ModelList = []*model.ModelConfig{
 		ImagePrices: map[string]float64{
 			"1024x1024": 0.1,
 		},
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxOutputTokensKey: 1024,
-		},
+		RPM: 60,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxOutputTokens(1024),
+		),
 	},
 	{
 		Model:             "cogview-3-plus",
@@ -207,8 +222,9 @@ var ModelList = []*model.ModelConfig{
 			"1440x720":  0.06,
 			"720x1440":  0.06,
 		},
-		Config: map[model.ModelConfigKey]any{
-			model.ModelConfigMaxOutputTokensKey: 1024,
-		},
+		RPM: 60,
+		Config: model.NewModelConfig(
+			model.WithModelConfigMaxOutputTokens(1024),
+		),
 	},
 }
diff --git a/service/aiproxy/relay/channeltype/define.go b/service/aiproxy/relay/channeltype/define.go
index b1b761bf1f5f..b91fbf64ad25 100644
--- a/service/aiproxy/relay/channeltype/define.go
+++ b/service/aiproxy/relay/channeltype/define.go
@@ -6,6 +6,7 @@ import (
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor/ali"
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor/anthropic"
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor/aws"
+	"github.com/labring/sealos/service/aiproxy/relay/adaptor/azure"
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor/baichuan"
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor/baidu"
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor/baiduv2"
@@ -16,6 +17,7 @@ import (
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor/doubao"
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor/doubaoaudio"
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor/gemini"
+	"github.com/labring/sealos/service/aiproxy/relay/adaptor/geminiopenai"
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor/groq"
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor/lingyiwanwu"
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor/minimax"
@@ -33,8 +35,9 @@ import (
 )
 
 var ChannelAdaptor = map[int]adaptor.Adaptor{
-	1: &openai.Adaptor{},
-	// 3:  &azure.Adaptor{},
+	1:  &openai.Adaptor{},
+	3:  &azure.Adaptor{},
+	12: &geminiopenai.Adaptor{},
 	13: &baiduv2.Adaptor{},
 	14: &anthropic.Adaptor{},
 	15: &baidu.Adaptor{},
@@ -69,7 +72,16 @@ func GetAdaptor(channel int) (adaptor.Adaptor, bool) {
 	return a, ok
 }
 
-var ChannelNames = map[int]string{}
+type AdaptorMeta struct {
+	Name           string `json:"name"`
+	KeyHelp        string `json:"keyHelp"`
+	DefaultBaseURL string `json:"defaultBaseUrl"`
+}
+
+var (
+	ChannelNames = map[int]string{}
+	ChannelMetas = map[int]AdaptorMeta{}
+)
 
 func init() {
 	names := make(map[string]struct{})
@@ -79,6 +91,18 @@ func init() {
 			panic("duplicate channel name: " + name)
 		}
 		names[name] = struct{}{}
+		ChannelMetas[i] = AdaptorMeta{
+			Name:           name,
+			KeyHelp:        getAdaptorKeyHelp(adaptor),
+			DefaultBaseURL: adaptor.GetBaseURL(),
+		}
 		ChannelNames[i] = name
 	}
 }
+
+func getAdaptorKeyHelp(a adaptor.Adaptor) string {
+	if keyValidator, ok := a.(adaptor.KeyValidator); ok {
+		return keyValidator.KeyHelp()
+	}
+	return ""
+}
diff --git a/service/aiproxy/relay/controller/consume.go b/service/aiproxy/relay/controller/consume.go
new file mode 100644
index 000000000000..f2bfb86ced41
--- /dev/null
+++ b/service/aiproxy/relay/controller/consume.go
@@ -0,0 +1,57 @@
+package controller
+
+import (
+	"github.com/gin-gonic/gin"
+	"github.com/labring/sealos/service/aiproxy/common/balance"
+	"github.com/labring/sealos/service/aiproxy/common/ctxkey"
+	"github.com/labring/sealos/service/aiproxy/middleware"
+	"github.com/labring/sealos/service/aiproxy/model"
+	"github.com/labring/sealos/service/aiproxy/relay/meta"
+	"github.com/shopspring/decimal"
+)
+
+type PreCheckGroupBalanceReq struct {
+	InputTokens int
+	MaxTokens   int
+	InputPrice  float64
+	OutputPrice float64
+}
+
+func getPreConsumedAmount(req *PreCheckGroupBalanceReq) float64 {
+	if req == nil || req.InputPrice == 0 || (req.InputTokens == 0 && req.MaxTokens == 0) {
+		return 0
+	}
+	preConsumedTokens := int64(req.InputTokens)
+	if req.MaxTokens != 0 {
+		preConsumedTokens += int64(req.MaxTokens)
+	}
+	return decimal.
+		NewFromInt(preConsumedTokens).
+		Mul(decimal.NewFromFloat(req.InputPrice)).
+		Div(decimal.NewFromInt(model.PriceUnit)).
+		InexactFloat64()
+}
+
+func checkGroupBalance(req *PreCheckGroupBalanceReq, meta *meta.Meta, groupRemainBalance float64) bool {
+	if meta.IsChannelTest {
+		return true
+	}
+
+	preConsumedAmount := getPreConsumedAmount(req)
+
+	return groupRemainBalance > preConsumedAmount
+}
+
+func getGroupBalance(ctx *gin.Context, meta *meta.Meta) (float64, balance.PostGroupConsumer, error) {
+	if meta.IsChannelTest {
+		return 0, nil, nil
+	}
+
+	groupBalance, ok := ctx.Get(ctxkey.GroupBalance)
+	if !ok {
+		return balance.Default.GetGroupRemainBalance(ctx.Request.Context(), *meta.Group)
+	}
+
+	groupBalanceConsumer := groupBalance.(*middleware.GroupBalanceConsumer)
+	return groupBalanceConsumer.GroupBalance, groupBalanceConsumer.Consumer, nil
+}
diff --git a/service/aiproxy/relay/controller/dohelper.go b/service/aiproxy/relay/controller/dohelper.go
new file mode 100644
index 000000000000..b0a288bd6d08
--- /dev/null
+++ b/service/aiproxy/relay/controller/dohelper.go
@@ -0,0 +1,236 @@
+package controller
+
+import (
+	"bytes"
+	"context"
+	"errors"
+	"net/http"
+	"sync"
+	"time"
+
+	"github.com/gin-gonic/gin"
+	"github.com/labring/sealos/service/aiproxy/common"
+	"github.com/labring/sealos/service/aiproxy/common/config"
+	"github.com/labring/sealos/service/aiproxy/common/conv"
+	"github.com/labring/sealos/service/aiproxy/middleware"
+	"github.com/labring/sealos/service/aiproxy/model"
+	"github.com/labring/sealos/service/aiproxy/relay/adaptor"
+	"github.com/labring/sealos/service/aiproxy/relay/adaptor/openai"
+	"github.com/labring/sealos/service/aiproxy/relay/meta"
+	relaymodel "github.com/labring/sealos/service/aiproxy/relay/model"
+	"github.com/labring/sealos/service/aiproxy/relay/relaymode"
+	"github.com/labring/sealos/service/aiproxy/relay/utils"
+	log "github.com/sirupsen/logrus"
+)
+
+func isErrorHappened(resp *http.Response) bool {
+	if resp == nil {
+		return false
+	}
+	return resp.StatusCode != http.StatusOK
+}
+
+const (
+	// 0.5MB
+	maxBufferSize = 512 * 1024
+)
+
+type responseWriter struct {
+	gin.ResponseWriter
+	body *bytes.Buffer
+}
+
+func (rw *responseWriter) Write(b []byte) (int, error) {
+	if total := rw.body.Len() + len(b); total <= maxBufferSize {
+		rw.body.Write(b)
+	} else {
+		rw.body.Write(b[:maxBufferSize-rw.body.Len()])
+	}
+	return rw.ResponseWriter.Write(b)
+}
+
+func (rw *responseWriter) WriteString(s string) (int, error) {
+	if total := rw.body.Len() + len(s); total <= maxBufferSize {
+		rw.body.WriteString(s)
+	} else {
+		rw.body.WriteString(s[:maxBufferSize-rw.body.Len()])
+	}
+	return rw.ResponseWriter.WriteString(s)
+}
+
+var bufferPool = sync.Pool{
+	New: func() interface{} {
+		return bytes.NewBuffer(make([]byte, 0, maxBufferSize))
+	},
+}
+
+func getBuffer() *bytes.Buffer {
+	return bufferPool.Get().(*bytes.Buffer)
+}
+
+func putBuffer(buf *bytes.Buffer) {
+	buf.Reset()
+	if buf.Cap() > maxBufferSize {
+		return
+	}
+	bufferPool.Put(buf)
+}
+
+func DoHelper(
+	a adaptor.Adaptor,
+	c *gin.Context,
+	meta *meta.Meta,
+) (
+	*relaymodel.Usage,
+	*model.RequestDetail,
+	*relaymodel.ErrorWithStatusCode,
+) {
+	log := middleware.GetLogger(c)
+	detail := model.RequestDetail{}
+
+	// 1. Get request body
+	if err := getRequestBody(meta, c, &detail); err != nil {
+		return nil, nil, err
+	}
+
+	// 2. Convert and prepare request
+	resp, err := prepareAndDoRequest(a, c, meta)
+	if err != nil {
+		return nil, &detail, err
+	}
+
+	// 3. Handle error response
+	if isErrorHappened(resp) {
+		relayErr := utils.RelayErrorHandler(meta, resp)
+		detail.ResponseBody = relayErr.JSONOrEmpty()
+		return nil, &detail, relayErr
+	}
+
+	// 4. Handle success response
+	usage, relayErr := handleSuccessResponse(a, c, meta, resp, &detail)
+	if relayErr != nil {
+		return nil, &detail, relayErr
+	}
+
+	// 5. Update usage metrics
+	updateUsageMetrics(usage, meta, log)
+
+	return usage, &detail, nil
+}
+
+func getRequestBody(meta *meta.Meta, c *gin.Context, detail *model.RequestDetail) *relaymodel.ErrorWithStatusCode {
+	switch meta.Mode {
+	case relaymode.AudioTranscription, relaymode.AudioTranslation:
+		return nil
+	default:
+		reqBody, err := common.GetRequestBody(c.Request)
+		if err != nil {
+			return openai.ErrorWrapperWithMessage("get request body failed: "+err.Error(), "get_request_body_failed", http.StatusBadRequest)
+		}
+		detail.RequestBody = conv.BytesToString(reqBody)
+		return nil
+	}
+}
+
+func prepareAndDoRequest(a adaptor.Adaptor, c *gin.Context, meta *meta.Meta) (*http.Response, *relaymodel.ErrorWithStatusCode) {
+	method, header, body, err := a.ConvertRequest(meta, c.Request)
+	if err != nil {
+		return nil, openai.ErrorWrapperWithMessage("convert request failed: "+err.Error(), "convert_request_failed", http.StatusBadRequest)
+	}
+
+	if meta.Channel.BaseURL == "" {
+		meta.Channel.BaseURL = a.GetBaseURL()
+	}
+
+	fullRequestURL, err := a.GetRequestURL(meta)
+	if err != nil {
+		return nil, openai.ErrorWrapperWithMessage("get request url failed: "+err.Error(), "get_request_url_failed", http.StatusBadRequest)
+	}
+
+	log.Debugf("request url: %s %s", method, fullRequestURL)
+
+	ctx := context.Background()
+	if timeout := config.GetTimeoutWithModelType()[meta.Mode]; timeout > 0 {
+		// donot use c.Request.Context() because it will be canceled by the client
+		// which will cause the usage of non-streaming requests to be unable to be recorded
+		var cancel context.CancelFunc
+		ctx, cancel = context.WithTimeout(ctx, time.Duration(timeout)*time.Second)
+		defer cancel()
+	}
+
+	req, err := http.NewRequestWithContext(ctx, method, fullRequestURL, body)
+	if err != nil {
+		return nil, openai.ErrorWrapperWithMessage("new request failed: "+err.Error(), "new_request_failed", http.StatusBadRequest)
+	}
+
+	if err := setupRequestHeader(a, c, meta, req, header); err != nil {
+		return nil, err
+	}
+
+	return doRequest(a, c, meta, req)
+}
+
+func setupRequestHeader(a adaptor.Adaptor, c *gin.Context, meta *meta.Meta, req *http.Request, header http.Header) *relaymodel.ErrorWithStatusCode {
+	contentType := req.Header.Get("Content-Type")
+	if contentType == "" {
+		contentType = "application/json; charset=utf-8"
+	}
+	req.Header.Set("Content-Type", contentType)
+	for key, value := range header {
+		req.Header[key] = value
+	}
+	if err := a.SetupRequestHeader(meta, c, req); err != nil {
+		return openai.ErrorWrapperWithMessage("setup request header failed: "+err.Error(), "setup_request_header_failed", http.StatusBadRequest)
+	}
+	return nil
+}
+
+func doRequest(a adaptor.Adaptor, c *gin.Context, meta *meta.Meta, req *http.Request) (*http.Response, *relaymodel.ErrorWithStatusCode) {
+	resp, err := a.DoRequest(meta, c, req)
+	if err != nil {
+		if errors.Is(err, context.Canceled) {
+			return nil, openai.ErrorWrapperWithMessage("do request failed: request canceled by client", "request_canceled", http.StatusBadRequest)
+		}
+		if errors.Is(err, context.DeadlineExceeded) {
+			return nil, openai.ErrorWrapperWithMessage("do request failed: request timeout", "request_timeout", http.StatusGatewayTimeout)
+		}
+		return nil, openai.ErrorWrapperWithMessage("do request failed: "+err.Error(), "request_failed", http.StatusBadRequest)
+	}
+	return resp, nil
+}
+
+func handleSuccessResponse(a adaptor.Adaptor, c *gin.Context, meta *meta.Meta, resp *http.Response, detail *model.RequestDetail) (*relaymodel.Usage, *relaymodel.ErrorWithStatusCode) {
+	buf := getBuffer()
+	defer putBuffer(buf)
+
+	rw := &responseWriter{
+		ResponseWriter: c.Writer,
+		body:           buf,
+	}
+	rawWriter := c.Writer
+	defer func() { c.Writer = rawWriter }()
+	c.Writer = rw
+
+	c.Header("Content-Type", resp.Header.Get("Content-Type"))
+	usage, relayErr := a.DoResponse(meta, c, resp)
+	// copy body buffer
+	// do not use bytes conv
+	detail.ResponseBody = rw.body.String()
+
+	return usage, relayErr
+}
+
+func updateUsageMetrics(usage *relaymodel.Usage, meta *meta.Meta, log *log.Entry) {
+	if usage == nil {
+		usage = &relaymodel.Usage{
+			PromptTokens: meta.InputTokens,
+			TotalTokens:  meta.InputTokens,
+		}
+	}
+	if usage.TotalTokens == 0 {
+		usage.TotalTokens = usage.PromptTokens + usage.CompletionTokens
+	}
+	log.Data["t_input"] = usage.PromptTokens
+	log.Data["t_output"] = usage.CompletionTokens
+	log.Data["t_total"] = usage.TotalTokens
+}
diff --git a/service/aiproxy/relay/controller/handle.go b/service/aiproxy/relay/controller/handle.go
new file mode 100644
index 000000000000..785b4085c9d0
--- /dev/null
+++ b/service/aiproxy/relay/controller/handle.go
@@ -0,0 +1,136 @@
+package controller
+
+import (
+	"fmt"
+	"net/http"
+	"strconv"
+
+	"github.com/gin-gonic/gin"
+	"github.com/labring/sealos/service/aiproxy/common/config"
+	"github.com/labring/sealos/service/aiproxy/common/consume"
+	"github.com/labring/sealos/service/aiproxy/middleware"
+	"github.com/labring/sealos/service/aiproxy/model"
+	"github.com/labring/sealos/service/aiproxy/relay/adaptor/openai"
+	"github.com/labring/sealos/service/aiproxy/relay/channeltype"
+	"github.com/labring/sealos/service/aiproxy/relay/meta"
+	relaymodel "github.com/labring/sealos/service/aiproxy/relay/model"
+)
+
+func Handle(meta *meta.Meta, c *gin.Context, preProcess func() (*PreCheckGroupBalanceReq, error)) *relaymodel.ErrorWithStatusCode {
+	log := middleware.GetLogger(c)
+
+	// 1. Get adaptor
+	adaptor, ok := channeltype.GetAdaptor(meta.Channel.Type)
+	if !ok {
+		log.Errorf("invalid (%s[%d]) channel type: %d", meta.Channel.Name, meta.Channel.ID, meta.Channel.Type)
+		return openai.ErrorWrapperWithMessage(
+			"invalid channel error", "invalid_channel_type", http.StatusInternalServerError)
+	}
+
+	// 2. Get group balance
+	groupRemainBalance, postGroupConsumer, err := getGroupBalance(c, meta)
+	if err != nil {
+		log.Errorf("get group (%s) balance failed: %v", meta.Group.ID, err)
+		errMsg := fmt.Sprintf("get group (%s) balance failed", meta.Group.ID)
+		consume.AsyncConsume(
+			nil,
+			http.StatusInternalServerError,
+			nil,
+			meta,
+			0,
+			0,
+			errMsg,
+			c.ClientIP(),
+			nil,
+		)
+		return openai.ErrorWrapperWithMessage(
+			errMsg,
+			"get_group_quota_failed",
+			http.StatusInternalServerError,
+		)
+	}
+
+	if !meta.IsChannelTest && groupRemainBalance <= 0 {
+		return openai.ErrorWrapperWithMessage(fmt.Sprintf("group (%s) balance not enough", meta.Group.ID), "insufficient_group_balance", http.StatusForbidden)
+	}
+
+	// 3. Pre-process request
+	preCheckReq, err := preProcess()
+	if err != nil {
+		log.Errorf("pre-process request failed: %s", err.Error())
+		detail := &model.RequestDetail{}
+		if err := getRequestBody(meta, c, detail); err != nil {
+			log.Errorf("get request body failed: %v", err.Error)
+		}
+		consume.AsyncConsume(
+			nil,
+			http.StatusBadRequest,
+			nil,
+			meta,
+			0,
+			0,
+			err.Error(),
+			c.ClientIP(),
+			detail,
+		)
+		return openai.ErrorWrapper(err, "invalid_request", http.StatusBadRequest)
+	}
+
+	// 4. Pre-check balance
+	ok = checkGroupBalance(preCheckReq, meta, groupRemainBalance)
+	if !ok {
+		return openai.ErrorWrapperWithMessage(fmt.Sprintf("group (%s) balance is not enough", meta.Group.ID), "insufficient_group_balance", http.StatusForbidden)
+	}
+
+	meta.InputTokens = preCheckReq.InputTokens
+
+	// 5. Do request
+	usage, detail, respErr := DoHelper(adaptor, c, meta)
+	if respErr != nil {
+		var logDetail *model.RequestDetail
+		if detail != nil && config.DebugEnabled {
+			logDetail = detail
+			log.Errorf(
+				"handle failed: %+v\nrequest detail:\n%s\nresponse detail:\n%s",
+				respErr.Error,
+				logDetail.RequestBody,
+				logDetail.ResponseBody,
+			)
+		} else {
+			log.Errorf("handle failed: %+v", respErr.Error)
+		}
+
+		consume.AsyncConsume(
+			postGroupConsumer,
+			respErr.StatusCode,
+			usage,
+			meta,
+			preCheckReq.InputPrice,
+			preCheckReq.OutputPrice,
+			respErr.Error.JSONOrEmpty(),
+			c.ClientIP(),
+			detail,
+		)
+		return respErr
+	}
+
+	amount := consume.CalculateAmount(usage, preCheckReq.InputPrice, preCheckReq.OutputPrice)
+	if amount > 0 {
+		log.Data["amount"] = strconv.FormatFloat(amount, 'f', -1, 64)
+	}
+
+	// 6. Post consume
+	consume.AsyncConsume(
+		postGroupConsumer,
+		http.StatusOK,
+		usage,
+		meta,
+		preCheckReq.InputPrice,
+		preCheckReq.OutputPrice,
+		"",
+		c.ClientIP(),
+		nil,
+	)
+
+	return nil
+}
diff --git a/service/aiproxy/relay/controller/helper.go b/service/aiproxy/relay/controller/helper.go
deleted file mode 100644
index f8b2d7579a0f..000000000000
--- a/service/aiproxy/relay/controller/helper.go
+++ /dev/null
@@ -1,285 +0,0 @@
-package controller
-
-import (
-	"bytes"
-	"context"
-	"encoding/json"
-	"io"
-	"net/http"
-	"sync"
-
-	"github.com/gin-gonic/gin"
-	"github.com/labring/sealos/service/aiproxy/common"
-	"github.com/labring/sealos/service/aiproxy/common/balance"
-	"github.com/labring/sealos/service/aiproxy/common/conv"
-	"github.com/labring/sealos/service/aiproxy/middleware"
-	"github.com/labring/sealos/service/aiproxy/model"
-	"github.com/labring/sealos/service/aiproxy/relay/adaptor"
-	"github.com/labring/sealos/service/aiproxy/relay/adaptor/openai"
-	"github.com/labring/sealos/service/aiproxy/relay/meta"
-	relaymodel "github.com/labring/sealos/service/aiproxy/relay/model"
-	billingprice "github.com/labring/sealos/service/aiproxy/relay/price"
-	"github.com/labring/sealos/service/aiproxy/relay/relaymode"
-	"github.com/labring/sealos/service/aiproxy/relay/utils"
-	"github.com/shopspring/decimal"
-)
-
-var ConsumeWaitGroup sync.WaitGroup
-
-type PreCheckGroupBalanceReq struct {
-	PromptTokens int
-	MaxTokens    int
-	Price        float64
-}
-
-func getPreConsumedAmount(req *PreCheckGroupBalanceReq) float64 {
-	if req.Price == 0 || (req.PromptTokens == 0 && req.MaxTokens == 0) {
-		return 0
-	}
-	preConsumedTokens := int64(req.PromptTokens)
-	if req.MaxTokens != 0 {
-		preConsumedTokens += int64(req.MaxTokens)
-	}
-	return decimal.
-		NewFromInt(preConsumedTokens).
-		Mul(decimal.NewFromFloat(req.Price)).
-		Div(decimal.NewFromInt(billingprice.PriceUnit)).
-		InexactFloat64()
-}
-
-func preCheckGroupBalance(ctx context.Context, req *PreCheckGroupBalanceReq, meta *meta.Meta) (bool, balance.PostGroupConsumer, error) {
-	if meta.IsChannelTest {
-		return true, nil, nil
-	}
-
-	preConsumedAmount := getPreConsumedAmount(req)
-
-	groupRemainBalance, postGroupConsumer, err := balance.Default.GetGroupRemainBalance(ctx, meta.Group.ID)
-	if err != nil {
-		return false, nil, err
-	}
-	if groupRemainBalance < preConsumedAmount {
-		return false, nil, nil
-	}
-	return true, postGroupConsumer, nil
-}
-
-func postConsumeAmount(
-	ctx context.Context,
-	consumeWaitGroup *sync.WaitGroup,
-	postGroupConsumer balance.PostGroupConsumer,
-	code int,
-	endpoint string,
-	usage *relaymodel.Usage,
-	meta *meta.Meta,
-	price,
-	completionPrice float64,
-	content string,
-	requestDetail *model.RequestDetail,
-) {
-	defer consumeWaitGroup.Done()
-	if meta.IsChannelTest {
-		return
-	}
-	log := middleware.NewLogger()
-	middleware.SetLogFieldsFromMeta(meta, log.Data)
-	if usage == nil {
-		err := model.BatchRecordConsume(
-			meta.RequestID,
-			meta.RequestAt,
-			meta.Group.ID,
-			code,
-			meta.Channel.ID,
-			0,
-			0,
-			meta.OriginModelName,
-			meta.Token.ID,
-			meta.Token.Name,
-			0,
-			price,
-			completionPrice,
-			endpoint,
-			content,
-			meta.Mode,
-			requestDetail,
-		)
-		if err != nil {
-			log.Error("error batch record consume: " + err.Error())
-		}
-		return
-	}
-	promptTokens := usage.PromptTokens
-	completionTokens := usage.CompletionTokens
-	var amount float64
-	totalTokens := promptTokens + completionTokens
-	if totalTokens != 0 {
-		promptAmount := decimal.
-			NewFromInt(int64(promptTokens)).
-			Mul(decimal.NewFromFloat(price)).
-			Div(decimal.NewFromInt(billingprice.PriceUnit))
-		completionAmount := decimal.
-			NewFromInt(int64(completionTokens)).
-			Mul(decimal.NewFromFloat(completionPrice)).
-			Div(decimal.NewFromInt(billingprice.PriceUnit))
-		amount = promptAmount.Add(completionAmount).InexactFloat64()
-		if amount > 0 {
-			_amount, err := postGroupConsumer.PostGroupConsume(ctx, meta.Token.Name, amount)
-			if err != nil {
-				log.Error("error consuming token remain amount: " + err.Error())
-				err = model.CreateConsumeError(
-					meta.RequestID,
-					meta.RequestAt,
-					meta.Group.ID,
-					meta.Token.Name,
-					meta.OriginModelName,
-					err.Error(),
-					amount,
-					meta.Token.ID,
-				)
-				if err != nil {
-					log.Error("failed to create consume error: " + err.Error())
-				}
-			} else {
-				amount = _amount
-			}
-		}
-	}
-	err := model.BatchRecordConsume(
-		meta.RequestID,
-		meta.RequestAt,
-		meta.Group.ID,
-		code,
-		meta.Channel.ID,
-		promptTokens,
-		completionTokens,
-		meta.OriginModelName,
-		meta.Token.ID,
-		meta.Token.Name,
-		amount,
-		price,
-		completionPrice,
-		endpoint,
-		content,
-		meta.Mode,
-		requestDetail,
-	)
-	if err != nil {
-		log.Error("error batch record consume: " + err.Error())
-	}
-}
-
-func isErrorHappened(resp *http.Response) bool {
-	if resp == nil {
-		return false
-	}
-	return resp.StatusCode != http.StatusOK
-}
-
-type responseWriter struct {
-	gin.ResponseWriter
-	body *bytes.Buffer
-}
-
-func (rw *responseWriter) Write(b []byte) (int, error) {
-	rw.body.Write(b)
-	return rw.ResponseWriter.Write(b)
-}
-
-func (rw *responseWriter) WriteString(s string) (int, error) {
-	rw.body.WriteString(s)
-	return rw.ResponseWriter.WriteString(s)
-}
-
-func DoHelper(a adaptor.Adaptor, c *gin.Context, meta *meta.Meta) (*relaymodel.Usage, *model.RequestDetail, *relaymodel.ErrorWithStatusCode) {
-	log := middleware.GetLogger(c)
-
-	detail := model.RequestDetail{}
-	switch meta.Mode {
-	case relaymode.AudioTranscription, relaymode.AudioTranslation:
-		break
-	default:
-		reqBody, err := common.GetRequestBody(c.Request)
-		if err != nil {
-			return nil, nil, openai.ErrorWrapperWithMessage("get request body failed: "+err.Error(), "get_request_body_failed", http.StatusBadRequest)
-		}
-		detail.RequestBody = conv.BytesToString(reqBody)
-	}
-
-	header, body, err := a.ConvertRequest(meta, c.Request)
-	if err != nil {
-		return nil, &detail, openai.ErrorWrapperWithMessage("convert request failed: "+err.Error(), "convert_request_failed", http.StatusBadRequest)
-	}
-
-	fullRequestURL, err := a.GetRequestURL(meta)
-	if err != nil {
-		return nil, &detail, openai.ErrorWrapperWithMessage("get request url failed: "+err.Error(), "get_request_url_failed", http.StatusBadRequest)
-	}
-	req, err := http.NewRequestWithContext(c.Request.Context(), c.Request.Method, fullRequestURL, body)
-	if err != nil {
-		return nil, &detail, openai.ErrorWrapperWithMessage("new request failed: "+err.Error(), "new_request_failed", http.StatusBadRequest)
-	}
-	log.Debugf("request url: %s", fullRequestURL)
-
-	contentType := req.Header.Get("Content-Type")
-	if contentType == "" {
-		contentType = "application/json; charset=utf-8"
-	}
-	req.Header.Set("Content-Type", contentType)
-	for key, value := range header {
-		req.Header[key] = value
-	}
-	err = a.SetupRequestHeader(meta, c, req)
-	if err != nil {
-		return nil, &detail, openai.ErrorWrapperWithMessage("setup request header failed: "+err.Error(), "setup_request_header_failed", http.StatusBadRequest)
-	}
-
-	resp, err := a.DoRequest(meta, c, req)
-	if err != nil {
-		return nil, &detail, openai.ErrorWrapperWithMessage("do request failed: "+err.Error(), "do_request_failed", http.StatusBadRequest)
-	}
-
-	if isErrorHappened(resp) {
-		respBody, err := io.ReadAll(resp.Body)
-		if err != nil {
-			return nil, &detail, openai.ErrorWrapperWithMessage("read response body failed: "+err.Error(), "read_response_body_failed", http.StatusBadRequest)
-		}
-		detail.ResponseBody = conv.BytesToString(respBody)
-		resp.Body = io.NopCloser(bytes.NewReader(respBody))
-		return nil, &detail, utils.RelayErrorHandler(meta, resp)
-	}
-
-	rw := &responseWriter{
-		ResponseWriter: c.Writer,
-		body:           bytes.NewBuffer(nil),
-	}
-	rawWriter := c.Writer
-	defer func() { c.Writer = rawWriter }()
-	c.Writer = rw
-
-	c.Header("Content-Type", resp.Header.Get("Content-Type"))
-	usage, relayErr := a.DoResponse(meta, c, resp)
-	detail.ResponseBody = conv.BytesToString(rw.body.Bytes())
-	if relayErr != nil {
-		if detail.ResponseBody == "" {
-			respData, err := json.Marshal(gin.H{
-				"error": relayErr.Error,
-			})
-			if err != nil {
-				detail.ResponseBody = relayErr.Error.String()
-			} else {
-				detail.ResponseBody = conv.BytesToString(respData)
-			}
-		}
-		return nil, &detail, relayErr
-	}
-	if usage == nil {
-		usage = &relaymodel.Usage{
-			PromptTokens: meta.PromptTokens,
-			TotalTokens:  meta.PromptTokens,
-		}
-	}
-	if usage.TotalTokens == 0 {
-		usage.TotalTokens = usage.PromptTokens + usage.CompletionTokens
-	}
-	return usage, &detail, nil
-}
diff --git a/service/aiproxy/relay/controller/image.go b/service/aiproxy/relay/controller/image.go
index d9b514464a88..919d17faab34 100644
--- a/service/aiproxy/relay/controller/image.go
+++ b/service/aiproxy/relay/controller/image.go
@@ -1,136 +1,64 @@
 package controller
 
 import (
-	"context"
 	"errors"
 	"fmt"
-	"net/http"
 
 	"github.com/gin-gonic/gin"
-	"github.com/labring/sealos/service/aiproxy/middleware"
-	"github.com/labring/sealos/service/aiproxy/relay/adaptor/openai"
-	"github.com/labring/sealos/service/aiproxy/relay/channeltype"
+	"github.com/labring/sealos/service/aiproxy/model"
 	"github.com/labring/sealos/service/aiproxy/relay/meta"
 	relaymodel "github.com/labring/sealos/service/aiproxy/relay/model"
-	billingprice "github.com/labring/sealos/service/aiproxy/relay/price"
 	"github.com/labring/sealos/service/aiproxy/relay/utils"
 )
 
-func getImageRequest(c *gin.Context) (*relaymodel.ImageRequest, error) {
-	imageRequest, err := utils.UnmarshalImageRequest(c.Request)
-	if err != nil {
-		return nil, err
+func validateImageMaxBatchSize(modelConfig *model.ModelConfig, batchSize int) error {
+	if batchSize <= 1 {
+		return nil
 	}
-	if imageRequest.N == 0 {
-		imageRequest.N = 1
+	if modelConfig.ImageMaxBatchSize <= 0 {
+		return nil
 	}
-	if imageRequest.Size == "" {
-		return nil, errors.New("size is required")
-	}
-	return imageRequest, nil
-}
-
-func validateImageRequest(imageRequest *relaymodel.ImageRequest) *relaymodel.ErrorWithStatusCode {
-	// check prompt length
-	if imageRequest.Prompt == "" {
-		return openai.ErrorWrapper(errors.New("prompt is required"), "prompt_missing", http.StatusBadRequest)
-	}
-
-	// Number of generated images validation
-	if err := billingprice.ValidateImageMaxBatchSize(imageRequest.Model, imageRequest.N); err != nil {
-		return openai.ErrorWrapper(err, "n_not_within_range", http.StatusBadRequest)
+	if batchSize > modelConfig.ImageMaxBatchSize {
+		return fmt.Errorf("batch size %d is greater than the maximum batch size %d", batchSize, modelConfig.ImageMaxBatchSize)
 	}
 	return nil
 }
 
-func getImageCostPrice(modelName string, reqModel string, size string) (float64, error) {
-	imageCostPrice, ok := billingprice.GetImageSizePrice(modelName, reqModel, size)
-	if !ok {
-		return 0, fmt.Errorf("invalid image size: %s", size)
-	}
-	return imageCostPrice, nil
-}
-
-func RelayImageHelper(meta *meta.Meta, c *gin.Context) *relaymodel.ErrorWithStatusCode {
-	log := middleware.GetLogger(c)
-	ctx := c.Request.Context()
-
-	imageRequest, err := getImageRequest(c)
+func getImageRequest(meta *meta.Meta, c *gin.Context) (*relaymodel.ImageRequest, error) {
+	imageRequest, err := utils.UnmarshalImageRequest(c.Request)
 	if err != nil {
-		log.Errorf("getImageRequest failed: %s", err.Error())
-		return openai.ErrorWrapper(err, "invalid_image_request", http.StatusBadRequest)
-	}
-
-	meta.PromptTokens = imageRequest.N
-
-	bizErr := validateImageRequest(imageRequest)
-	if bizErr != nil {
-		return bizErr
+		return nil, err
 	}
-
-	imageCostPrice, err := getImageCostPrice(meta.OriginModelName, meta.ActualModelName, imageRequest.Size)
-	if err != nil {
-		return openai.ErrorWrapper(err, "get_image_cost_price_failed", http.StatusInternalServerError)
+	if imageRequest.Prompt == "" {
+		return nil, errors.New("prompt is required")
 	}
-
-	adaptor, ok := channeltype.GetAdaptor(meta.Channel.Type)
-	if !ok {
-		return openai.ErrorWrapper(fmt.Errorf("invalid channel type: %d", meta.Channel.Type), "invalid_channel_type", http.StatusBadRequest)
+	if imageRequest.Size == "" {
+		return nil, errors.New("size is required")
 	}
-
-	ok, postGroupConsumer, err := preCheckGroupBalance(ctx, &PreCheckGroupBalanceReq{
-		PromptTokens: meta.PromptTokens,
-		Price:        imageCostPrice,
-	}, meta)
-	if err != nil {
-		log.Errorf("get group (%s) balance failed: %v", meta.Group.ID, err)
-		return openai.ErrorWrapper(
-			fmt.Errorf("get group (%s) balance failed", meta.Group.ID),
-			"get_group_quota_failed",
-			http.StatusInternalServerError,
-		)
+	if imageRequest.N == 0 {
+		imageRequest.N = 1
 	}
-	if !ok {
-		return openai.ErrorWrapper(errors.New("group balance is not enough"), "insufficient_group_balance", http.StatusForbidden)
+	if err := validateImageMaxBatchSize(meta.ModelConfig, imageRequest.N); err != nil {
+		return nil, err
 	}
+	return imageRequest, nil
+}
 
-	// do response
-	usage, detail, respErr := DoHelper(adaptor, c, meta)
-	if respErr != nil {
-		if detail != nil {
-			log.Errorf("do image failed: %s\nrequest detail:\n%s\nresponse detail:\n%s", respErr, detail.RequestBody, detail.ResponseBody)
-		} else {
-			log.Errorf("do image failed: %s", respErr)
+func RelayImageHelper(meta *meta.Meta, c *gin.Context) *relaymodel.ErrorWithStatusCode {
+	return Handle(meta, c, func() (*PreCheckGroupBalanceReq, error) {
+		imageRequest, err := getImageRequest(meta, c)
+		if err != nil {
+			return nil, err
 		}
-		ConsumeWaitGroup.Add(1)
-		go postConsumeAmount(context.Background(),
-			&ConsumeWaitGroup,
-			postGroupConsumer,
-			respErr.StatusCode,
-			c.Request.URL.Path,
-			usage,
-			meta,
-			imageCostPrice,
-			0,
-			respErr.String(),
-			detail,
-		)
-		return respErr
-	}
 
-	ConsumeWaitGroup.Add(1)
-	go postConsumeAmount(context.Background(),
-		&ConsumeWaitGroup,
-		postGroupConsumer,
-		http.StatusOK,
-		c.Request.URL.Path,
-		usage,
-		meta,
-		imageCostPrice,
-		0,
-		imageRequest.Size,
-		nil,
-	)
+		imageCostPrice, ok := GetImageSizePrice(meta.ModelConfig, imageRequest.Size)
+		if !ok {
+			return nil, fmt.Errorf("invalid image size: %s", imageRequest.Size)
+		}
 
-	return nil
+		return &PreCheckGroupBalanceReq{
+			InputTokens: imageRequest.N,
+			InputPrice:  imageCostPrice,
+		}, nil
+	})
 }
diff --git a/service/aiproxy/relay/controller/price.go b/service/aiproxy/relay/controller/price.go
new file mode 100644
index 000000000000..b36b2a29377b
--- /dev/null
+++ b/service/aiproxy/relay/controller/price.go
@@ -0,0 +1,24 @@
+package controller
+
+import (
+	"github.com/labring/sealos/service/aiproxy/common/config"
+	"github.com/labring/sealos/service/aiproxy/model"
+)
+
+func GetModelPrice(modelConfig *model.ModelConfig) (float64, float64, bool) {
+	if !config.GetBillingEnabled() {
+		return 0, 0, true
+	}
+	return modelConfig.InputPrice, modelConfig.OutputPrice, true
+}
+
+func GetImageSizePrice(modelConfig *model.ModelConfig, size string) (float64, bool) {
+	if !config.GetBillingEnabled() {
+		return 0, false
+	}
+	if len(modelConfig.ImagePrices) == 0 {
+		return 0, true
+	}
+	price, ok := modelConfig.ImagePrices[size]
+	return price, ok
+}
diff --git a/service/aiproxy/relay/controller/rerank.go b/service/aiproxy/relay/controller/rerank.go
index 70001623ff12..d377b08e9cc8 100644
--- a/service/aiproxy/relay/controller/rerank.go
+++ b/service/aiproxy/relay/controller/rerank.go
@@ -1,98 +1,34 @@
 package controller
 
 import (
-	"context"
 	"errors"
 	"fmt"
-	"net/http"
 	"strings"
 
 	"github.com/gin-gonic/gin"
-	"github.com/labring/sealos/service/aiproxy/middleware"
-	"github.com/labring/sealos/service/aiproxy/relay/adaptor/openai"
-	"github.com/labring/sealos/service/aiproxy/relay/channeltype"
 	"github.com/labring/sealos/service/aiproxy/relay/meta"
 	relaymodel "github.com/labring/sealos/service/aiproxy/relay/model"
-	billingprice "github.com/labring/sealos/service/aiproxy/relay/price"
 	"github.com/labring/sealos/service/aiproxy/relay/utils"
 )
 
 func RerankHelper(meta *meta.Meta, c *gin.Context) *relaymodel.ErrorWithStatusCode {
-	log := middleware.GetLogger(c)
-	ctx := c.Request.Context()
-
-	rerankRequest, err := getRerankRequest(c)
-	if err != nil {
-		log.Errorf("get rerank request failed: %s", err.Error())
-		return openai.ErrorWrapper(err, "invalid_rerank_request", http.StatusBadRequest)
-	}
-
-	price, completionPrice, ok := billingprice.GetModelPrice(meta.OriginModelName, meta.ActualModelName)
-	if !ok {
-		return openai.ErrorWrapper(fmt.Errorf("model price not found: %s", meta.OriginModelName), "model_price_not_found", http.StatusInternalServerError)
-	}
-
-	meta.PromptTokens = rerankPromptTokens(rerankRequest)
-
-	ok, postGroupConsumer, err := preCheckGroupBalance(ctx, &PreCheckGroupBalanceReq{
-		PromptTokens: meta.PromptTokens,
-		Price:        price,
-	}, meta)
-	if err != nil {
-		log.Errorf("get group (%s) balance failed: %v", meta.Group.ID, err)
-		return openai.ErrorWrapper(
-			fmt.Errorf("get group (%s) balance failed", meta.Group.ID),
-			"get_group_quota_failed",
-			http.StatusInternalServerError,
-		)
-	}
-	if !ok {
-		return openai.ErrorWrapper(errors.New("group balance is not enough"), "insufficient_group_balance", http.StatusForbidden)
-	}
-
-	adaptor, ok := channeltype.GetAdaptor(meta.Channel.Type)
-	if !ok {
-		return openai.ErrorWrapper(fmt.Errorf("invalid channel type: %d", meta.Channel.Type), "invalid_channel_type", http.StatusBadRequest)
-	}
-
-	usage, detail, respErr := DoHelper(adaptor, c, meta)
-	if respErr != nil {
-		if detail != nil {
-			log.Errorf("do rerank failed: %s\nrequest detail:\n%s\nresponse detail:\n%s", respErr, detail.RequestBody, detail.ResponseBody)
-		} else {
-			log.Errorf("do rerank failed: %s", respErr)
+	return Handle(meta, c, func() (*PreCheckGroupBalanceReq, error) {
+		price, completionPrice, ok := GetModelPrice(meta.ModelConfig)
+		if !ok {
+			return nil, fmt.Errorf("model price not found: %s", meta.OriginModel)
 		}
-		ConsumeWaitGroup.Add(1)
-		go postConsumeAmount(context.Background(),
-			&ConsumeWaitGroup,
-			postGroupConsumer,
-			http.StatusInternalServerError,
-			c.Request.URL.Path,
-			usage,
-			meta,
-			price,
-			completionPrice,
-			respErr.String(),
-			detail,
-		)
-		return respErr
-	}
 
-	ConsumeWaitGroup.Add(1)
-	go postConsumeAmount(context.Background(),
-		&ConsumeWaitGroup,
-		postGroupConsumer,
-		http.StatusOK,
-		c.Request.URL.Path,
-		usage,
-		meta,
-		price,
-		completionPrice,
-		"",
-		nil,
-	)
+		rerankRequest, err := getRerankRequest(c)
+		if err != nil {
+			return nil, err
+		}
 
-	return nil
+		return &PreCheckGroupBalanceReq{
+			InputTokens: rerankPromptTokens(rerankRequest),
+			InputPrice:  price,
+			OutputPrice: completionPrice,
+		}, nil
+	})
 }
 
 func getRerankRequest(c *gin.Context) (*relaymodel.RerankRequest, error) {
diff --git a/service/aiproxy/relay/controller/stt.go b/service/aiproxy/relay/controller/stt.go
index 030de04add4b..c30d9dc0384e 100644
--- a/service/aiproxy/relay/controller/stt.go
+++ b/service/aiproxy/relay/controller/stt.go
@@ -1,86 +1,101 @@
 package controller
 
 import (
-	"context"
 	"errors"
 	"fmt"
-	"net/http"
+	"math"
+	"mime/multipart"
+	"os"
 
 	"github.com/gin-gonic/gin"
+	"github.com/labring/sealos/service/aiproxy/common/audio"
 	"github.com/labring/sealos/service/aiproxy/middleware"
-	"github.com/labring/sealos/service/aiproxy/relay/adaptor/openai"
-	"github.com/labring/sealos/service/aiproxy/relay/channeltype"
 	"github.com/labring/sealos/service/aiproxy/relay/meta"
 	relaymodel "github.com/labring/sealos/service/aiproxy/relay/model"
-	billingprice "github.com/labring/sealos/service/aiproxy/relay/price"
 )
 
 func RelaySTTHelper(meta *meta.Meta, c *gin.Context) *relaymodel.ErrorWithStatusCode {
-	log := middleware.GetLogger(c)
-	ctx := c.Request.Context()
+	return Handle(meta, c, func() (*PreCheckGroupBalanceReq, error) {
+		price, completionPrice, ok := GetModelPrice(meta.ModelConfig)
+		if !ok {
+			return nil, fmt.Errorf("model price not found: %s", meta.OriginModel)
+		}
+
+		audioFile, err := c.FormFile("file")
+		if err != nil {
+			return nil, fmt.Errorf("failed to get audio file: %w", err)
+		}
+
+		duration, err := getAudioDuration(audioFile)
+		if err != nil {
+			return nil, err
+		}
+
+		durationInt := int(math.Ceil(duration))
+		log := middleware.GetLogger(c)
+		log.Data["duration"] = durationInt
+
+		return &PreCheckGroupBalanceReq{
+			InputTokens: durationInt,
+			InputPrice:  price,
+			OutputPrice: completionPrice,
+		}, nil
+	})
+}
+
+func getAudioDuration(audioFile *multipart.FileHeader) (float64, error) {
+	// Try to get duration directly from audio data
+	audioData, err := audioFile.Open()
+	if err != nil {
+		return 0, fmt.Errorf("failed to open audio file: %w", err)
+	}
+	defer audioData.Close()
 
-	adaptor, ok := channeltype.GetAdaptor(meta.Channel.Type)
-	if !ok {
-		return openai.ErrorWrapper(fmt.Errorf("invalid channel type: %d", meta.Channel.Type), "invalid_channel_type", http.StatusBadRequest)
+	// If it's already an os.File, use file path method
+	if osFile, ok := audioData.(*os.File); ok {
+		duration, err := audio.GetAudioDurationFromFilePath(osFile.Name())
+		if err != nil {
+			return 0, fmt.Errorf("failed to get audio duration from temp file: %w", err)
+		}
+		return duration, nil
+	}
+
+	// Try to get duration from audio data
+	duration, err := audio.GetAudioDuration(audioData)
+	if err == nil {
+		return duration, nil
 	}
 
-	price, completionPrice, ok := billingprice.GetModelPrice(meta.OriginModelName, meta.ActualModelName)
-	if !ok {
-		return openai.ErrorWrapper(fmt.Errorf("model price not found: %s", meta.OriginModelName), "model_price_not_found", http.StatusInternalServerError)
+	// If duration is NaN, create temp file and try again
+	if errors.Is(err, audio.ErrAudioDurationNAN) {
+		return getDurationFromTempFile(audioFile)
 	}
 
-	ok, postGroupConsumer, err := preCheckGroupBalance(ctx, &PreCheckGroupBalanceReq{
-		PromptTokens: meta.PromptTokens,
-		Price:        price,
-	}, meta)
+	return 0, fmt.Errorf("failed to get audio duration: %w", err)
+}
+
+func getDurationFromTempFile(audioFile *multipart.FileHeader) (float64, error) {
+	tempFile, err := os.CreateTemp("", "audio.wav")
 	if err != nil {
-		log.Errorf("get group (%s) balance failed: %v", meta.Group.ID, err)
-		return openai.ErrorWrapper(
-			fmt.Errorf("get group (%s) balance failed", meta.Group.ID),
-			"get_group_quota_failed",
-			http.StatusInternalServerError,
-		)
+		return 0, fmt.Errorf("failed to create temp file: %w", err)
 	}
-	if !ok {
-		return openai.ErrorWrapper(errors.New("group balance is not enough"), "insufficient_group_balance", http.StatusForbidden)
+	defer os.Remove(tempFile.Name())
+	defer tempFile.Close()
+
+	newAudioData, err := audioFile.Open()
+	if err != nil {
+		return 0, fmt.Errorf("failed to open audio file: %w", err)
 	}
+	defer newAudioData.Close()
 
-	usage, detail, respErr := DoHelper(adaptor, c, meta)
-	if respErr != nil {
-		if detail != nil {
-			log.Errorf("do stt failed: %s\nrequest detail:\n%s\nresponse detail:\n%s", respErr, detail.RequestBody, detail.ResponseBody)
-		} else {
-			log.Errorf("do stt failed: %s", respErr)
-		}
-		ConsumeWaitGroup.Add(1)
-		go postConsumeAmount(context.Background(),
-			&ConsumeWaitGroup,
-			postGroupConsumer,
-			respErr.StatusCode,
-			c.Request.URL.Path,
-			usage,
-			meta,
-			price,
-			completionPrice,
-			respErr.String(),
-			detail,
-		)
-		return respErr
+	if _, err = tempFile.ReadFrom(newAudioData); err != nil {
+		return 0, fmt.Errorf("failed to read from temp file: %w", err)
+	}
+
+	duration, err := audio.GetAudioDurationFromFilePath(tempFile.Name())
+	if err != nil {
+		return 0, fmt.Errorf("failed to get audio duration from temp file: %w", err)
 	}
 
-	ConsumeWaitGroup.Add(1)
-	go postConsumeAmount(context.Background(),
-		&ConsumeWaitGroup,
-		postGroupConsumer,
-		http.StatusOK,
-		c.Request.URL.Path,
-		usage,
-		meta,
-		price,
-		completionPrice,
-		"",
-		nil,
-	)
-
-	return nil
+	return duration, nil
 }
diff --git a/service/aiproxy/relay/controller/text.go b/service/aiproxy/relay/controller/text.go
index 50ffafb485d7..d260f0c8d934 100644
--- a/service/aiproxy/relay/controller/text.go
+++ b/service/aiproxy/relay/controller/text.go
@@ -1,97 +1,32 @@
 package controller
 
 import (
-	"context"
-	"errors"
 	"fmt"
-	"net/http"
 
 	"github.com/gin-gonic/gin"
-	"github.com/labring/sealos/service/aiproxy/middleware"
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor/openai"
-	"github.com/labring/sealos/service/aiproxy/relay/channeltype"
 	"github.com/labring/sealos/service/aiproxy/relay/meta"
-	"github.com/labring/sealos/service/aiproxy/relay/model"
-	billingprice "github.com/labring/sealos/service/aiproxy/relay/price"
+	relaymodel "github.com/labring/sealos/service/aiproxy/relay/model"
 	"github.com/labring/sealos/service/aiproxy/relay/utils"
 )
 
-func RelayTextHelper(meta *meta.Meta, c *gin.Context) *model.ErrorWithStatusCode {
-	log := middleware.GetLogger(c)
-	ctx := c.Request.Context()
-
-	textRequest, err := utils.UnmarshalGeneralOpenAIRequest(c.Request)
-	if err != nil {
-		log.Errorf("get and validate text request failed: %s", err.Error())
-		return openai.ErrorWrapper(err, "invalid_text_request", http.StatusBadRequest)
-	}
-
-	// get model price
-	price, completionPrice, ok := billingprice.GetModelPrice(meta.OriginModelName, meta.ActualModelName)
-	if !ok {
-		return openai.ErrorWrapper(fmt.Errorf("model price not found: %s", meta.OriginModelName), "model_price_not_found", http.StatusInternalServerError)
-	}
-	// pre-consume balance
-	promptTokens := openai.GetPromptTokens(meta, textRequest)
-	meta.PromptTokens = promptTokens
-	ok, postGroupConsumer, err := preCheckGroupBalance(ctx, &PreCheckGroupBalanceReq{
-		PromptTokens: promptTokens,
-		MaxTokens:    textRequest.MaxTokens,
-		Price:        price,
-	}, meta)
-	if err != nil {
-		log.Errorf("get group (%s) balance failed: %v", meta.Group.ID, err)
-		return openai.ErrorWrapper(
-			fmt.Errorf("get group (%s) balance failed", meta.Group.ID),
-			"get_group_quota_failed",
-			http.StatusInternalServerError,
-		)
-	}
-	if !ok {
-		return openai.ErrorWrapper(errors.New("group balance is not enough"), "insufficient_group_balance", http.StatusForbidden)
-	}
-
-	adaptor, ok := channeltype.GetAdaptor(meta.Channel.Type)
-	if !ok {
-		return openai.ErrorWrapper(fmt.Errorf("invalid channel type: %d", meta.Channel.Type), "invalid_channel_type", http.StatusBadRequest)
-	}
+func RelayTextHelper(meta *meta.Meta, c *gin.Context) *relaymodel.ErrorWithStatusCode {
+	return Handle(meta, c, func() (*PreCheckGroupBalanceReq, error) {
+		price, completionPrice, ok := GetModelPrice(meta.ModelConfig)
+		if !ok {
+			return nil, fmt.Errorf("model price not found: %s", meta.OriginModel)
+		}
 
-	// do response
-	usage, detail, respErr := DoHelper(adaptor, c, meta)
-	if respErr != nil {
-		if detail != nil {
-			log.Errorf("do text failed: %s\nrequest detail:\n%s\nresponse detail:\n%s", respErr, detail.RequestBody, detail.ResponseBody)
-		} else {
-			log.Errorf("do text failed: %s", respErr)
+		textRequest, err := utils.UnmarshalGeneralOpenAIRequest(c.Request)
+		if err != nil {
+			return nil, err
 		}
-		ConsumeWaitGroup.Add(1)
-		go postConsumeAmount(context.Background(),
-			&ConsumeWaitGroup,
-			postGroupConsumer,
-			respErr.StatusCode,
-			c.Request.URL.Path,
-			usage,
-			meta,
-			price,
-			completionPrice,
-			respErr.String(),
-			detail,
-		)
-		return respErr
-	}
-	// post-consume amount
-	ConsumeWaitGroup.Add(1)
-	go postConsumeAmount(context.Background(),
-		&ConsumeWaitGroup,
-		postGroupConsumer,
-		http.StatusOK,
-		c.Request.URL.Path,
-		usage,
-		meta,
-		price,
-		completionPrice,
-		"",
-		nil,
-	)
-	return nil
+
+		return &PreCheckGroupBalanceReq{
+			InputTokens: openai.GetPromptTokens(meta, textRequest),
+			MaxTokens:   textRequest.MaxTokens,
+			InputPrice:  price,
+			OutputPrice: completionPrice,
+		}, nil
+	})
 }
diff --git a/service/aiproxy/relay/controller/tts.go b/service/aiproxy/relay/controller/tts.go
index df669b3b768d..8afcf22b8ce4 100644
--- a/service/aiproxy/relay/controller/tts.go
+++ b/service/aiproxy/relay/controller/tts.go
@@ -1,93 +1,31 @@
 package controller
 
 import (
-	"context"
-	"errors"
 	"fmt"
-	"net/http"
 
 	"github.com/gin-gonic/gin"
-	"github.com/labring/sealos/service/aiproxy/middleware"
 	"github.com/labring/sealos/service/aiproxy/relay/adaptor/openai"
-	"github.com/labring/sealos/service/aiproxy/relay/channeltype"
 	"github.com/labring/sealos/service/aiproxy/relay/meta"
 	relaymodel "github.com/labring/sealos/service/aiproxy/relay/model"
-	billingprice "github.com/labring/sealos/service/aiproxy/relay/price"
 	"github.com/labring/sealos/service/aiproxy/relay/utils"
 )
 
 func RelayTTSHelper(meta *meta.Meta, c *gin.Context) *relaymodel.ErrorWithStatusCode {
-	log := middleware.GetLogger(c)
-	ctx := c.Request.Context()
-
-	adaptor, ok := channeltype.GetAdaptor(meta.Channel.Type)
-	if !ok {
-		return openai.ErrorWrapper(fmt.Errorf("invalid channel type: %d", meta.Channel.Type), "invalid_channel_type", http.StatusBadRequest)
-	}
-
-	price, completionPrice, ok := billingprice.GetModelPrice(meta.OriginModelName, meta.ActualModelName)
-	if !ok {
-		return openai.ErrorWrapper(fmt.Errorf("model price not found: %s", meta.OriginModelName), "model_price_not_found", http.StatusInternalServerError)
-	}
-
-	ttsRequest, err := utils.UnmarshalTTSRequest(c.Request)
-	if err != nil {
-		return openai.ErrorWrapper(err, "invalid_json", http.StatusBadRequest)
-	}
-	meta.PromptTokens = openai.CountTokenText(ttsRequest.Input, meta.ActualModelName)
-
-	ok, postGroupConsumer, err := preCheckGroupBalance(ctx, &PreCheckGroupBalanceReq{
-		PromptTokens: meta.PromptTokens,
-		Price:        price,
-	}, meta)
-	if err != nil {
-		log.Errorf("get group (%s) balance failed: %v", meta.Group.ID, err)
-		return openai.ErrorWrapper(
-			fmt.Errorf("get group (%s) balance failed", meta.Group.ID),
-			"get_group_quota_failed",
-			http.StatusInternalServerError,
-		)
-	}
-	if !ok {
-		return openai.ErrorWrapper(errors.New("group balance is not enough"), "insufficient_group_balance", http.StatusForbidden)
-	}
-
-	usage, detail, respErr := DoHelper(adaptor, c, meta)
-	if respErr != nil {
-		if detail != nil {
-			log.Errorf("do tts failed: %s\nrequest detail:\n%s\nresponse detail:\n%s", respErr, detail.RequestBody, detail.ResponseBody)
-		} else {
-			log.Errorf("do tts failed: %s", respErr)
+	return Handle(meta, c, func() (*PreCheckGroupBalanceReq, error) {
+		price, completionPrice, ok := GetModelPrice(meta.ModelConfig)
+		if !ok {
+			return nil, fmt.Errorf("model price not found: %s", meta.OriginModel)
 		}
-		ConsumeWaitGroup.Add(1)
-		go postConsumeAmount(context.Background(),
-			&ConsumeWaitGroup,
-			postGroupConsumer,
-			respErr.StatusCode,
-			c.Request.URL.Path,
-			usage,
-			meta,
-			price,
-			completionPrice,
-			respErr.String(),
-			detail,
-		)
-		return respErr
-	}
 
-	ConsumeWaitGroup.Add(1)
-	go postConsumeAmount(context.Background(),
-		&ConsumeWaitGroup,
-		postGroupConsumer,
-		http.StatusOK,
-		c.Request.URL.Path,
-		usage,
-		meta,
-		price,
-		completionPrice,
-		"",
-		nil,
-	)
+		ttsRequest, err := utils.UnmarshalTTSRequest(c.Request)
+		if err != nil {
+			return nil, err
+		}
 
-	return nil
+		return &PreCheckGroupBalanceReq{
+			InputTokens: openai.CountTokenText(ttsRequest.Input, meta.ActualModel),
+			InputPrice:  price,
+			OutputPrice: completionPrice,
+		}, nil
+	})
 }
diff --git a/service/aiproxy/relay/meta/meta.go b/service/aiproxy/relay/meta/meta.go
index f5159df7474e..bde574e3ab05 100644
--- a/service/aiproxy/relay/meta/meta.go
+++ b/service/aiproxy/relay/meta/meta.go
@@ -4,14 +4,10 @@ import (
 	"fmt"
 	"time"
 
-	"github.com/aws/aws-sdk-go-v2/aws"
-	"github.com/aws/aws-sdk-go-v2/credentials"
-	"github.com/aws/aws-sdk-go-v2/service/bedrockruntime"
 	"github.com/labring/sealos/service/aiproxy/model"
 )
 
 type ChannelMeta struct {
-	Config  model.ChannelConfig
 	Name    string
 	BaseURL string
 	Key     string
@@ -20,22 +16,31 @@ type ChannelMeta struct {
 }
 
 type Meta struct {
-	values  map[string]any
-	Channel *ChannelMeta
-	Group   *model.GroupCache
-	Token   *model.TokenCache
-
-	RequestAt       time.Time
-	RequestID       string
-	OriginModelName string
-	ActualModelName string
-	Mode            int
-	PromptTokens    int
-	IsChannelTest   bool
+	values        map[string]any
+	Channel       *ChannelMeta
+	ChannelConfig model.ChannelConfig
+	Group         *model.GroupCache
+	Token         *model.TokenCache
+	ModelConfig   *model.ModelConfig
+
+	Endpoint      string
+	RequestAt     time.Time
+	RequestID     string
+	OriginModel   string
+	ActualModel   string
+	Mode          int
+	InputTokens   int
+	IsChannelTest bool
 }
 
 type Option func(meta *Meta)
 
+func WithEndpoint(endpoint string) Option {
+	return func(meta *Meta) {
+		meta.Endpoint = endpoint
+	}
+}
+
 func WithChannelTest(isChannelTest bool) Option {
 	return func(meta *Meta) {
 		meta.IsChannelTest = isChannelTest
@@ -66,33 +71,45 @@ func WithToken(token *model.TokenCache) Option {
 	}
 }
 
-func NewMeta(channel *model.Channel, mode int, modelName string, opts ...Option) *Meta {
+func NewMeta(
+	channel *model.Channel,
+	mode int,
+	modelName string,
+	modelConfig *model.ModelConfig,
+	opts ...Option,
+) *Meta {
 	meta := Meta{
-		values:          make(map[string]any),
-		Mode:            mode,
-		OriginModelName: modelName,
-		RequestAt:       time.Now(),
+		values:      make(map[string]any),
+		Mode:        mode,
+		OriginModel: modelName,
+		ActualModel: modelName,
+		RequestAt:   time.Now(),
+		ModelConfig: modelConfig,
 	}
 
 	for _, opt := range opts {
 		opt(&meta)
 	}
 
-	meta.Reset(channel)
+	if channel != nil {
+		meta.Reset(channel)
+	}
 
 	return &meta
 }
 
 func (m *Meta) Reset(channel *model.Channel) {
 	m.Channel = &ChannelMeta{
-		Config:  channel.Config,
 		Name:    channel.Name,
 		BaseURL: channel.BaseURL,
 		Key:     channel.Key,
 		ID:      channel.ID,
 		Type:    channel.Type,
 	}
-	m.ActualModelName, _ = GetMappedModelName(m.OriginModelName, channel.ModelMapping)
+	if channel.Config != nil {
+		m.ChannelConfig = *channel.Config
+	}
+	m.ActualModel, _ = GetMappedModelName(m.OriginModel, channel.ModelMapping)
 	m.ClearValues()
 }
 
@@ -131,22 +148,12 @@ func (m *Meta) GetString(key string) string {
 }
 
 func (m *Meta) GetBool(key string) bool {
-	if v, ok := m.Get(key); ok {
-		return v.(bool)
-	}
-	return false
-}
-
-func (m *Meta) AwsClient() *bedrockruntime.Client {
-	if v, ok := m.Get("awsClient"); ok {
-		return v.(*bedrockruntime.Client)
+	v, ok := m.Get(key)
+	if !ok {
+		return false
 	}
-	awsClient := bedrockruntime.New(bedrockruntime.Options{
-		Region:      m.Channel.Config.Region,
-		Credentials: aws.NewCredentialsCache(credentials.NewStaticCredentialsProvider(m.Channel.Config.AK, m.Channel.Config.SK, "")),
-	})
-	m.Set("awsClient", awsClient)
-	return awsClient
+	b, _ := v.(bool)
+	return b
 }
 
 //nolint:unparam
diff --git a/service/aiproxy/relay/model/message.go b/service/aiproxy/relay/model/message.go
index eefe4e029644..fab5e7942423 100644
--- a/service/aiproxy/relay/model/message.go
+++ b/service/aiproxy/relay/model/message.go
@@ -3,11 +3,12 @@ package model
 import "strings"
 
 type Message struct {
-	Content    any     `json:"content,omitempty"`
-	Name       *string `json:"name,omitempty"`
-	Role       string  `json:"role,omitempty"`
-	ToolCallID string  `json:"tool_call_id,omitempty"`
-	ToolCalls  []*Tool `json:"tool_calls,omitempty"`
+	Content          any     `json:"content,omitempty"`
+	ReasoningContent string  `json:"reasoning_content,omitempty"`
+	Name             *string `json:"name,omitempty"`
+	Role             string  `json:"role,omitempty"`
+	ToolCallID       string  `json:"tool_call_id,omitempty"`
+	ToolCalls        []*Tool `json:"tool_calls,omitempty"`
 }
 
 func (m *Message) IsStringContent() bool {
@@ -23,6 +24,10 @@ func (m *Message) ToStringContentMessage() {
 }
 
 func (m *Message) StringContent() string {
+	if m.ReasoningContent != "" {
+		return m.ReasoningContent
+	}
+
 	content, ok := m.Content.(string)
 	if ok {
 		return content
diff --git a/service/aiproxy/relay/model/misc.go b/service/aiproxy/relay/model/misc.go
index 21252028680b..7f06c440df8f 100644
--- a/service/aiproxy/relay/model/misc.go
+++ b/service/aiproxy/relay/model/misc.go
@@ -1,6 +1,9 @@
 package model
 
-import "fmt"
+import (
+	json "github.com/json-iterator/go"
+	"github.com/labring/sealos/service/aiproxy/common/conv"
+)
 
 type Usage struct {
 	PromptTokens     int `json:"prompt_tokens"`
@@ -9,25 +12,39 @@ type Usage struct {
 }
 
 type Error struct {
-	Code    any    `json:"code"`
-	Message string `json:"message"`
-	Type    string `json:"type"`
-	Param   string `json:"param"`
+	Code    any    `json:"code,omitempty"`
+	Message string `json:"message,omitempty"`
+	Type    string `json:"type,omitempty"`
+	Param   string `json:"param,omitempty"`
 }
 
-func (e *Error) String() string {
-	return fmt.Sprintf("code: %v, message: %s, type: %s, param: %s", e.Code, e.Message, e.Type, e.Param)
+func (e *Error) IsEmpty() bool {
+	return e == nil || (e.Code == nil && e.Message == "" && e.Type == "" && e.Param == "")
 }
 
-func (e *Error) Error() string {
-	return e.String()
+func (e *Error) JSONOrEmpty() string {
+	if e.IsEmpty() {
+		return ""
+	}
+	jsonBuf, err := json.Marshal(e)
+	if err != nil {
+		return ""
+	}
+	return conv.BytesToString(jsonBuf)
 }
 
 type ErrorWithStatusCode struct {
-	Error
-	StatusCode int `json:"status_code"`
+	Error      Error `json:"error"`
+	StatusCode int   `json:"-"`
 }
 
-func (e *ErrorWithStatusCode) String() string {
-	return fmt.Sprintf("%s, status_code: %d", e.Error.String(), e.StatusCode)
+func (e *ErrorWithStatusCode) JSONOrEmpty() string {
+	if e.Error.IsEmpty() {
+		return ""
+	}
+	jsonBuf, err := json.Marshal(e)
+	if err != nil {
+		return ""
+	}
+	return conv.BytesToString(jsonBuf)
 }
diff --git a/service/aiproxy/relay/price/image.go b/service/aiproxy/relay/price/image.go
deleted file mode 100644
index 19bcde3f7b2c..000000000000
--- a/service/aiproxy/relay/price/image.go
+++ /dev/null
@@ -1,51 +0,0 @@
-package price
-
-import (
-	"errors"
-	"fmt"
-
-	"github.com/labring/sealos/service/aiproxy/common/config"
-	"github.com/labring/sealos/service/aiproxy/model"
-)
-
-func GetImageSizePrice(model string, reqModel string, size string) (float64, bool) {
-	if !config.GetBillingEnabled() {
-		return 0, false
-	}
-	if price, ok := getImageSizePrice(model, size); ok {
-		return price, true
-	}
-	if price, ok := getImageSizePrice(reqModel, size); ok {
-		return price, true
-	}
-	return 0, false
-}
-
-func getImageSizePrice(modelName string, size string) (float64, bool) {
-	modelConfig, ok := model.CacheGetModelConfig(modelName)
-	if !ok {
-		return 0, false
-	}
-	if len(modelConfig.ImagePrices) == 0 {
-		return 0, true
-	}
-	price, ok := modelConfig.ImagePrices[size]
-	return price, ok
-}
-
-func ValidateImageMaxBatchSize(modelName string, batchSize int) error {
-	if batchSize <= 1 {
-		return nil
-	}
-	modelConfig, ok := model.CacheGetModelConfig(modelName)
-	if !ok {
-		return errors.New("model not found")
-	}
-	if modelConfig.ImageMaxBatchSize <= 0 {
-		return nil
-	}
-	if batchSize > modelConfig.ImageMaxBatchSize {
-		return fmt.Errorf("batch size %d is greater than the maximum batch size %d", batchSize, modelConfig.ImageMaxBatchSize)
-	}
-	return nil
-}
diff --git a/service/aiproxy/relay/price/model.go b/service/aiproxy/relay/price/model.go
deleted file mode 100644
index 09cda1bd7088..000000000000
--- a/service/aiproxy/relay/price/model.go
+++ /dev/null
@@ -1,36 +0,0 @@
-package price
-
-import (
-	"github.com/labring/sealos/service/aiproxy/common/config"
-	"github.com/labring/sealos/service/aiproxy/model"
-)
-
-const (
-	// /1K tokens
-	PriceUnit = 1000
-)
-
-// ModelPrice
-// https://platform.openai.com/docs/models/model-endpoint-compatibility
-// https://cloud.baidu.com/doc/WENXINWORKSHOP/s/Blfmc9dlf
-// https://openai.com/pricing
-// 价格单位：人民币/1K tokens
-
-func GetModelPrice(mapedName string, reqModel string) (float64, float64, bool) {
-	if !config.GetBillingEnabled() {
-		return 0, 0, true
-	}
-	price, completionPrice, ok := getModelPrice(mapedName)
-	if !ok && reqModel != "" {
-		price, completionPrice, ok = getModelPrice(reqModel)
-	}
-	return price, completionPrice, ok
-}
-
-func getModelPrice(modelName string) (float64, float64, bool) {
-	modelConfig, ok := model.CacheGetModelConfig(modelName)
-	if !ok {
-		return 0, 0, false
-	}
-	return modelConfig.InputPrice, modelConfig.OutputPrice, true
-}
diff --git a/service/aiproxy/relay/relaymode/helper.go b/service/aiproxy/relay/relaymode/helper.go
deleted file mode 100644
index 7a83ec53f739..000000000000
--- a/service/aiproxy/relay/relaymode/helper.go
+++ /dev/null
@@ -1,30 +0,0 @@
-package relaymode
-
-import "strings"
-
-func GetByPath(path string) int {
-	switch {
-	case strings.HasPrefix(path, "/v1/chat/completions"):
-		return ChatCompletions
-	case strings.HasPrefix(path, "/v1/completions"):
-		return Completions
-	case strings.HasSuffix(path, "embeddings"):
-		return Embeddings
-	case strings.HasPrefix(path, "/v1/moderations"):
-		return Moderations
-	case strings.HasPrefix(path, "/v1/images/generations"):
-		return ImagesGenerations
-	case strings.HasPrefix(path, "/v1/edits"):
-		return Edits
-	case strings.HasPrefix(path, "/v1/audio/speech"):
-		return AudioSpeech
-	case strings.HasPrefix(path, "/v1/audio/transcriptions"):
-		return AudioTranscription
-	case strings.HasPrefix(path, "/v1/audio/translations"):
-		return AudioTranslation
-	case strings.HasPrefix(path, "/v1/rerank"):
-		return Rerank
-	default:
-		return Unknown
-	}
-}
diff --git a/service/aiproxy/relay/utils/error.go b/service/aiproxy/relay/utils/error.go
index c70ce99eeaf3..0843cdf0f9e5 100644
--- a/service/aiproxy/relay/utils/error.go
+++ b/service/aiproxy/relay/utils/error.go
@@ -5,13 +5,11 @@ import (
 	"io"
 	"net/http"
 	"strconv"
-	"strings"
 
 	json "github.com/json-iterator/go"
 	"github.com/labring/sealos/service/aiproxy/common/conv"
 	"github.com/labring/sealos/service/aiproxy/relay/meta"
 	"github.com/labring/sealos/service/aiproxy/relay/model"
-	"github.com/labring/sealos/service/aiproxy/relay/relaymode"
 )
 
 type GeneralErrorResponse struct {
@@ -60,7 +58,7 @@ const (
 	ErrorCodeBadResponse = "bad_response"
 )
 
-func RelayErrorHandler(meta *meta.Meta, resp *http.Response) *model.ErrorWithStatusCode {
+func RelayErrorHandler(_ *meta.Meta, resp *http.Response) *model.ErrorWithStatusCode {
 	if resp == nil {
 		return &model.ErrorWithStatusCode{
 			StatusCode: 500,
@@ -71,36 +69,7 @@ func RelayErrorHandler(meta *meta.Meta, resp *http.Response) *model.ErrorWithSta
 			},
 		}
 	}
-	switch meta.Mode {
-	case relaymode.Rerank:
-		return RerankErrorHandler(resp)
-	default:
-		return RelayDefaultErrorHanlder(resp)
-	}
-}
-
-func RerankErrorHandler(resp *http.Response) *model.ErrorWithStatusCode {
-	defer resp.Body.Close()
-	respBody, err := io.ReadAll(resp.Body)
-	if err != nil {
-		return &model.ErrorWithStatusCode{
-			StatusCode: resp.StatusCode,
-			Error: model.Error{
-				Message: err.Error(),
-				Type:    ErrorTypeUpstream,
-				Code:    ErrorCodeBadResponse,
-			},
-		}
-	}
-	trimmedRespBody := strings.Trim(conv.BytesToString(respBody), "\"")
-	return &model.ErrorWithStatusCode{
-		StatusCode: resp.StatusCode,
-		Error: model.Error{
-			Message: trimmedRespBody,
-			Type:    ErrorTypeUpstream,
-			Code:    ErrorCodeBadResponse,
-		},
-	}
+	return RelayDefaultErrorHanlder(resp)
 }
 
 func RelayDefaultErrorHanlder(resp *http.Response) *model.ErrorWithStatusCode {
@@ -126,11 +95,21 @@ func RelayDefaultErrorHanlder(resp *http.Response) *model.ErrorWithStatusCode {
 			Param:   strconv.Itoa(resp.StatusCode),
 		},
 	}
+
 	var errResponse GeneralErrorResponse
 	err = json.Unmarshal(respBody, &errResponse)
 	if err != nil {
-		return ErrorWithStatusCode
+		var errsResp []GeneralErrorResponse
+		err = json.Unmarshal(respBody, &errsResp)
+		if err != nil {
+			ErrorWithStatusCode.Error.Message = conv.BytesToString(respBody)
+			return ErrorWithStatusCode
+		}
+		if len(errsResp) > 0 {
+			errResponse = errsResp[0]
+		}
 	}
+
 	if errResponse.Error.Message != "" {
 		// OpenAI format error, so we override the default one
 		ErrorWithStatusCode.Error = errResponse.Error
diff --git a/service/aiproxy/relay/utils/testreq.go b/service/aiproxy/relay/utils/testreq.go
index 23ff2dfaac9e..6c6410fa1078 100644
--- a/service/aiproxy/relay/utils/testreq.go
+++ b/service/aiproxy/relay/utils/testreq.go
@@ -3,7 +3,6 @@ package utils
 import (
 	"bytes"
 	"encoding/json"
-	"errors"
 	"fmt"
 	"io"
 	"strconv"
@@ -25,14 +24,10 @@ func NewErrUnsupportedModelType(modelType string) *UnsupportedModelTypeError {
 	return &UnsupportedModelTypeError{ModelType: modelType}
 }
 
-func BuildRequest(modelName string) (io.Reader, int, error) {
-	modelConfig, ok := model.CacheGetModelConfig(modelName)
-	if !ok {
-		return nil, relaymode.Unknown, errors.New(modelName + " model config not found")
-	}
+func BuildRequest(modelConfig *model.ModelConfig) (io.Reader, int, error) {
 	switch modelConfig.Type {
 	case relaymode.ChatCompletions:
-		body, err := BuildChatCompletionRequest(modelName)
+		body, err := BuildChatCompletionRequest(modelConfig.Model)
 		if err != nil {
 			return nil, relaymode.Unknown, err
 		}
@@ -40,13 +35,13 @@ func BuildRequest(modelName string) (io.Reader, int, error) {
 	case relaymode.Completions:
 		return nil, relaymode.Unknown, NewErrUnsupportedModelType("completions")
 	case relaymode.Embeddings:
-		body, err := BuildEmbeddingsRequest(modelName)
+		body, err := BuildEmbeddingsRequest(modelConfig.Model)
 		if err != nil {
 			return nil, relaymode.Unknown, err
 		}
 		return body, relaymode.Embeddings, nil
 	case relaymode.Moderations:
-		body, err := BuildModerationsRequest(modelName)
+		body, err := BuildModerationsRequest(modelConfig.Model)
 		if err != nil {
 			return nil, relaymode.Unknown, err
 		}
@@ -60,7 +55,7 @@ func BuildRequest(modelName string) (io.Reader, int, error) {
 	case relaymode.Edits:
 		return nil, relaymode.Unknown, NewErrUnsupportedModelType("edits")
 	case relaymode.AudioSpeech:
-		body, err := BuildAudioSpeechRequest(modelName)
+		body, err := BuildAudioSpeechRequest(modelConfig.Model)
 		if err != nil {
 			return nil, relaymode.Unknown, err
 		}
@@ -70,7 +65,7 @@ func BuildRequest(modelName string) (io.Reader, int, error) {
 	case relaymode.AudioTranslation:
 		return nil, relaymode.Unknown, NewErrUnsupportedModelType("audio translation")
 	case relaymode.Rerank:
-		body, err := BuildRerankRequest(modelName)
+		body, err := BuildRerankRequest(modelConfig.Model)
 		if err != nil {
 			return nil, relaymode.Unknown, err
 		}
@@ -163,29 +158,3 @@ func BuildRerankRequest(model string) (io.Reader, error) {
 	}
 	return bytes.NewReader(jsonBytes), nil
 }
-
-func BuildModeDefaultPath(mode int) string {
-	switch mode {
-	case relaymode.ChatCompletions:
-		return "/v1/chat/completions"
-	case relaymode.Completions:
-		return "/v1/completions"
-	case relaymode.Embeddings:
-		return "/v1/embeddings"
-	case relaymode.Moderations:
-		return "/v1/moderations"
-	case relaymode.ImagesGenerations:
-		return "/v1/images/generations"
-	case relaymode.Edits:
-		return "/v1/edits"
-	case relaymode.AudioSpeech:
-		return "/v1/audio/speech"
-	case relaymode.AudioTranscription:
-		return "/v1/audio/transcriptions"
-	case relaymode.AudioTranslation:
-		return "/v1/audio/translations"
-	case relaymode.Rerank:
-		return "/v1/rerank"
-	}
-	return ""
-}
diff --git a/service/aiproxy/relay/utils/utils.go b/service/aiproxy/relay/utils/utils.go
index aebd317a721c..ae307bf00866 100644
--- a/service/aiproxy/relay/utils/utils.go
+++ b/service/aiproxy/relay/utils/utils.go
@@ -5,7 +5,6 @@ import (
 	"strings"
 
 	"github.com/labring/sealos/service/aiproxy/common"
-	"github.com/labring/sealos/service/aiproxy/common/client"
 	relaymodel "github.com/labring/sealos/service/aiproxy/relay/model"
 )
 
@@ -54,8 +53,10 @@ func UnmarshalMap(req *http.Request) (map[string]any, error) {
 	return request, nil
 }
 
+var defaultClient = &http.Client{}
+
 func DoRequest(req *http.Request) (*http.Response, error) {
-	resp, err := client.HTTPClient.Do(req)
+	resp, err := defaultClient.Do(req)
 	if err != nil {
 		return nil, err
 	}
diff --git a/service/aiproxy/router/api.go b/service/aiproxy/router/api.go
index 0e6d36486c23..7006a085c0f1 100644
--- a/service/aiproxy/router/api.go
+++ b/service/aiproxy/router/api.go
@@ -33,6 +33,13 @@ func SetAPIRouter(router *gin.Engine) {
 			modelsRoute.GET("/default/:type", controller.ChannelDefaultModelsAndMappingByType)
 		}
 
+		dashboardRoute := apiRouter.Group("/dashboard")
+		{
+			dashboardRoute.GET("/", controller.GetDashboard)
+			dashboardRoute.GET("/:group", controller.GetGroupDashboard)
+			dashboardRoute.GET("/:group/models", controller.GetGroupDashboardModels)
+		}
+
 		groupsRoute := apiRouter.Group("/groups")
 		{
 			groupsRoute.GET("/", controller.GetGroups)
@@ -41,16 +48,20 @@ func SetAPIRouter(router *gin.Engine) {
 		}
 		groupRoute := apiRouter.Group("/group")
 		{
-			groupRoute.POST("/", controller.CreateGroup)
-			groupRoute.GET("/:id", controller.GetGroup)
-			groupRoute.DELETE("/:id", controller.DeleteGroup)
-			groupRoute.POST("/:id/status", controller.UpdateGroupStatus)
-			groupRoute.POST("/:id/qpm", controller.UpdateGroupQPM)
+			groupRoute.POST("/:group", controller.CreateGroup)
+			groupRoute.GET("/:group", controller.GetGroup)
+			groupRoute.DELETE("/:group", controller.DeleteGroup)
+			groupRoute.POST("/:group/status", controller.UpdateGroupStatus)
+			groupRoute.POST("/:group/rpm_ratio", controller.UpdateGroupRPMRatio)
+			groupRoute.POST("/:group/rpm", controller.UpdateGroupRPM)
+			groupRoute.POST("/:group/tpm_ratio", controller.UpdateGroupTPMRatio)
+			groupRoute.POST("/:group/tpm", controller.UpdateGroupTPM)
 		}
 
 		optionRoute := apiRouter.Group("/option")
 		{
 			optionRoute.GET("/", controller.GetOptions)
+			optionRoute.GET("/:key", controller.GetOption)
 			optionRoute.PUT("/", controller.UpdateOption)
 			optionRoute.PUT("/batch", controller.UpdateOptions)
 		}
@@ -60,6 +71,7 @@ func SetAPIRouter(router *gin.Engine) {
 			channelsRoute.GET("/", controller.GetChannels)
 			channelsRoute.GET("/all", controller.GetAllChannels)
 			channelsRoute.GET("/type_names", controller.ChannelTypeNames)
+			channelsRoute.GET("/type_metas", controller.ChannelTypeMetas)
 			channelsRoute.POST("/", controller.AddChannels)
 			channelsRoute.GET("/search", controller.SearchChannels)
 			channelsRoute.GET("/update_balance", controller.UpdateAllChannelsBalance)
@@ -108,11 +120,13 @@ func SetAPIRouter(router *gin.Engine) {
 			logsRoute.DELETE("/", controller.DeleteHistoryLogs)
 			logsRoute.GET("/search", controller.SearchLogs)
 			logsRoute.GET("/consume_error", controller.SearchConsumeError)
+			logsRoute.GET("/detail/:log_id", controller.GetLogDetail)
 		}
 		logRoute := apiRouter.Group("/log")
 		{
 			logRoute.GET("/:group/search", controller.SearchGroupLogs)
 			logRoute.GET("/:group", controller.GetGroupLogs)
+			logRoute.GET("/:group/detail/:log_id", controller.GetGroupLogDetail)
 		}
 
 		modelConfigsRoute := apiRouter.Group("/model_configs")
@@ -130,5 +144,14 @@ func SetAPIRouter(router *gin.Engine) {
 			modelConfigRoute.POST("/", controller.SaveModelConfig)
 			modelConfigRoute.DELETE("/:model", controller.DeleteModelConfig)
 		}
+
+		monitorRoute := apiRouter.Group("/monitor")
+		{
+			monitorRoute.GET("/", controller.GetAllChannelModelErrorRates)
+			monitorRoute.GET("/:id", controller.GetChannelModelErrorRates)
+			monitorRoute.DELETE("/", controller.ClearAllModelErrors)
+			monitorRoute.DELETE("/:id", controller.ClearChannelAllModelErrors)
+			monitorRoute.DELETE("/:id/:model", controller.ClearChannelModelErrors)
+		}
 	}
 }
diff --git a/service/aiproxy/router/relay.go b/service/aiproxy/router/relay.go
index a15ccaa91dca..513374c4a555 100644
--- a/service/aiproxy/router/relay.go
+++ b/service/aiproxy/router/relay.go
@@ -3,78 +3,123 @@ package router
 import (
 	"github.com/labring/sealos/service/aiproxy/controller"
 	"github.com/labring/sealos/service/aiproxy/middleware"
+	"github.com/labring/sealos/service/aiproxy/relay/relaymode"
 
 	"github.com/gin-gonic/gin"
 )
 
 func SetRelayRouter(router *gin.Engine) {
-	router.Use(middleware.CORS())
-	router.Use(middleware.GlobalAPIRateLimit)
 	// https://platform.openai.com/docs/api-reference/introduction
-	modelsRouter := router.Group("/v1/models")
-	modelsRouter.Use(middleware.TokenAuth)
+	v1Router := router.Group("/v1")
+	v1Router.Use(middleware.TokenAuth)
+
+	modelsRouter := v1Router.Group("/models")
 	{
 		modelsRouter.GET("", controller.ListModels)
 		modelsRouter.GET("/:model", controller.RetrieveModel)
 	}
-	dashboardRouter := router.Group("/v1/dashboard")
-	dashboardRouter.Use(middleware.TokenAuth)
+	dashboardRouter := v1Router.Group("/dashboard")
 	{
 		dashboardRouter.GET("/billing/subscription", controller.GetSubscription)
 		dashboardRouter.GET("/billing/usage", controller.GetUsage)
 	}
-	relayV1Router := router.Group("/v1")
-	relayV1Router.Use(middleware.TokenAuth, middleware.Distribute)
+	relayRouter := v1Router.Group("")
 	{
-		relayV1Router.POST("/completions", controller.Relay)
-		relayV1Router.POST("/chat/completions", controller.Relay)
-		relayV1Router.POST("/edits", controller.Relay)
-		relayV1Router.POST("/images/generations", controller.Relay)
-		relayV1Router.POST("/images/edits", controller.RelayNotImplemented)
-		relayV1Router.POST("/images/variations", controller.RelayNotImplemented)
-		relayV1Router.POST("/embeddings", controller.Relay)
-		relayV1Router.POST("/engines/:model/embeddings", controller.Relay)
-		relayV1Router.POST("/audio/transcriptions", controller.Relay)
-		relayV1Router.POST("/audio/translations", controller.Relay)
-		relayV1Router.POST("/audio/speech", controller.Relay)
-		relayV1Router.POST("/rerank", controller.Relay)
-		relayV1Router.GET("/files", controller.RelayNotImplemented)
-		relayV1Router.POST("/files", controller.RelayNotImplemented)
-		relayV1Router.DELETE("/files/:id", controller.RelayNotImplemented)
-		relayV1Router.GET("/files/:id", controller.RelayNotImplemented)
-		relayV1Router.GET("/files/:id/content", controller.RelayNotImplemented)
-		relayV1Router.POST("/fine_tuning/jobs", controller.RelayNotImplemented)
-		relayV1Router.GET("/fine_tuning/jobs", controller.RelayNotImplemented)
-		relayV1Router.GET("/fine_tuning/jobs/:id", controller.RelayNotImplemented)
-		relayV1Router.POST("/fine_tuning/jobs/:id/cancel", controller.RelayNotImplemented)
-		relayV1Router.GET("/fine_tuning/jobs/:id/events", controller.RelayNotImplemented)
-		relayV1Router.DELETE("/models/:model", controller.RelayNotImplemented)
-		relayV1Router.POST("/moderations", controller.Relay)
-		relayV1Router.POST("/assistants", controller.RelayNotImplemented)
-		relayV1Router.GET("/assistants/:id", controller.RelayNotImplemented)
-		relayV1Router.POST("/assistants/:id", controller.RelayNotImplemented)
-		relayV1Router.DELETE("/assistants/:id", controller.RelayNotImplemented)
-		relayV1Router.GET("/assistants", controller.RelayNotImplemented)
-		relayV1Router.POST("/assistants/:id/files", controller.RelayNotImplemented)
-		relayV1Router.GET("/assistants/:id/files/:fileId", controller.RelayNotImplemented)
-		relayV1Router.DELETE("/assistants/:id/files/:fileId", controller.RelayNotImplemented)
-		relayV1Router.GET("/assistants/:id/files", controller.RelayNotImplemented)
-		relayV1Router.POST("/threads", controller.RelayNotImplemented)
-		relayV1Router.GET("/threads/:id", controller.RelayNotImplemented)
-		relayV1Router.POST("/threads/:id", controller.RelayNotImplemented)
-		relayV1Router.DELETE("/threads/:id", controller.RelayNotImplemented)
-		relayV1Router.POST("/threads/:id/messages", controller.RelayNotImplemented)
-		relayV1Router.GET("/threads/:id/messages/:messageId", controller.RelayNotImplemented)
-		relayV1Router.POST("/threads/:id/messages/:messageId", controller.RelayNotImplemented)
-		relayV1Router.GET("/threads/:id/messages/:messageId/files/:filesId", controller.RelayNotImplemented)
-		relayV1Router.GET("/threads/:id/messages/:messageId/files", controller.RelayNotImplemented)
-		relayV1Router.POST("/threads/:id/runs", controller.RelayNotImplemented)
-		relayV1Router.GET("/threads/:id/runs/:runsId", controller.RelayNotImplemented)
-		relayV1Router.POST("/threads/:id/runs/:runsId", controller.RelayNotImplemented)
-		relayV1Router.GET("/threads/:id/runs", controller.RelayNotImplemented)
-		relayV1Router.POST("/threads/:id/runs/:runsId/submit_tool_outputs", controller.RelayNotImplemented)
-		relayV1Router.POST("/threads/:id/runs/:runsId/cancel", controller.RelayNotImplemented)
-		relayV1Router.GET("/threads/:id/runs/:runsId/steps/:stepId", controller.RelayNotImplemented)
-		relayV1Router.GET("/threads/:id/runs/:runsId/steps", controller.RelayNotImplemented)
+		relayRouter.POST(
+			"/completions",
+			middleware.NewDistribute(relaymode.Completions),
+			controller.NewRelay(relaymode.Completions),
+		)
+
+		relayRouter.POST(
+			"/chat/completions",
+			middleware.NewDistribute(relaymode.ChatCompletions),
+			controller.NewRelay(relaymode.ChatCompletions),
+		)
+		relayRouter.POST(
+			"/edits",
+			middleware.NewDistribute(relaymode.Edits),
+			controller.NewRelay(relaymode.Edits),
+		)
+		relayRouter.POST(
+			"/images/generations",
+			middleware.NewDistribute(relaymode.ImagesGenerations),
+			controller.NewRelay(relaymode.ImagesGenerations),
+		)
+		relayRouter.POST(
+			"/embeddings",
+			middleware.NewDistribute(relaymode.Embeddings),
+			controller.NewRelay(relaymode.Embeddings),
+		)
+		relayRouter.POST(
+			"/engines/:model/embeddings",
+			middleware.NewDistribute(relaymode.Embeddings),
+			controller.NewRelay(relaymode.Embeddings),
+		)
+		relayRouter.POST(
+			"/audio/transcriptions",
+			middleware.NewDistribute(relaymode.AudioTranscription),
+			controller.NewRelay(relaymode.AudioTranscription),
+		)
+		relayRouter.POST(
+			"/audio/translations",
+			middleware.NewDistribute(relaymode.AudioTranslation),
+			controller.NewRelay(relaymode.AudioTranslation),
+		)
+		relayRouter.POST(
+			"/audio/speech",
+			middleware.NewDistribute(relaymode.AudioSpeech),
+			controller.NewRelay(relaymode.AudioSpeech),
+		)
+		relayRouter.POST(
+			"/rerank",
+			middleware.NewDistribute(relaymode.Rerank),
+			controller.NewRelay(relaymode.Rerank),
+		)
+		relayRouter.POST(
+			"/moderations",
+			middleware.NewDistribute(relaymode.Moderations),
+			controller.NewRelay(relaymode.Moderations),
+		)
+
+		relayRouter.POST("/images/edits", controller.RelayNotImplemented)
+		relayRouter.POST("/images/variations", controller.RelayNotImplemented)
+		relayRouter.GET("/files", controller.RelayNotImplemented)
+		relayRouter.POST("/files", controller.RelayNotImplemented)
+		relayRouter.DELETE("/files/:id", controller.RelayNotImplemented)
+		relayRouter.GET("/files/:id", controller.RelayNotImplemented)
+		relayRouter.GET("/files/:id/content", controller.RelayNotImplemented)
+		relayRouter.POST("/fine_tuning/jobs", controller.RelayNotImplemented)
+		relayRouter.GET("/fine_tuning/jobs", controller.RelayNotImplemented)
+		relayRouter.GET("/fine_tuning/jobs/:id", controller.RelayNotImplemented)
+		relayRouter.POST("/fine_tuning/jobs/:id/cancel", controller.RelayNotImplemented)
+		relayRouter.GET("/fine_tuning/jobs/:id/events", controller.RelayNotImplemented)
+		relayRouter.DELETE("/models/:model", controller.RelayNotImplemented)
+		relayRouter.POST("/assistants", controller.RelayNotImplemented)
+		relayRouter.GET("/assistants/:id", controller.RelayNotImplemented)
+		relayRouter.POST("/assistants/:id", controller.RelayNotImplemented)
+		relayRouter.DELETE("/assistants/:id", controller.RelayNotImplemented)
+		relayRouter.GET("/assistants", controller.RelayNotImplemented)
+		relayRouter.POST("/assistants/:id/files", controller.RelayNotImplemented)
+		relayRouter.GET("/assistants/:id/files/:fileId", controller.RelayNotImplemented)
+		relayRouter.DELETE("/assistants/:id/files/:fileId", controller.RelayNotImplemented)
+		relayRouter.GET("/assistants/:id/files", controller.RelayNotImplemented)
+		relayRouter.POST("/threads", controller.RelayNotImplemented)
+		relayRouter.GET("/threads/:id", controller.RelayNotImplemented)
+		relayRouter.POST("/threads/:id", controller.RelayNotImplemented)
+		relayRouter.DELETE("/threads/:id", controller.RelayNotImplemented)
+		relayRouter.POST("/threads/:id/messages", controller.RelayNotImplemented)
+		relayRouter.GET("/threads/:id/messages/:messageId", controller.RelayNotImplemented)
+		relayRouter.POST("/threads/:id/messages/:messageId", controller.RelayNotImplemented)
+		relayRouter.GET("/threads/:id/messages/:messageId/files/:filesId", controller.RelayNotImplemented)
+		relayRouter.GET("/threads/:id/messages/:messageId/files", controller.RelayNotImplemented)
+		relayRouter.POST("/threads/:id/runs", controller.RelayNotImplemented)
+		relayRouter.GET("/threads/:id/runs/:runsId", controller.RelayNotImplemented)
+		relayRouter.POST("/threads/:id/runs/:runsId", controller.RelayNotImplemented)
+		relayRouter.GET("/threads/:id/runs", controller.RelayNotImplemented)
+		relayRouter.POST("/threads/:id/runs/:runsId/submit_tool_outputs", controller.RelayNotImplemented)
+		relayRouter.POST("/threads/:id/runs/:runsId/cancel", controller.RelayNotImplemented)
+		relayRouter.GET("/threads/:id/runs/:runsId/steps/:stepId", controller.RelayNotImplemented)
+		relayRouter.GET("/threads/:id/runs/:runsId/steps", controller.RelayNotImplemented)
 	}
 }
diff --git a/service/go.work b/service/go.work
index a09a09fe45af..eaab1dd40cb1 100644
--- a/service/go.work
+++ b/service/go.work
@@ -9,6 +9,7 @@ use (
 	./launchpad
 	./pay
 	./devbox
+	./vlogs
 )
 
 replace (
diff --git a/service/go.work.sum b/service/go.work.sum
index 1594a5654746..05bf1d455c4b 100644
--- a/service/go.work.sum
+++ b/service/go.work.sum
@@ -1,5 +1,8 @@
 cel.dev/expr v0.16.1 h1:NR0+oFYzR1CqLFhTAqg3ql59G9VfN8fKq1TCHJ6gq1g=
 cel.dev/expr v0.16.1/go.mod h1:AsGA5zb3WruAEQeQng1RZdGEXmBj0jvMWh6l5SnNuC8=
+cel.dev/expr v0.16.2/go.mod h1:gXngZQMkWJoSbE8mOzehJlXQyubn/Vg0vR9/F3W7iw8=
+cel.dev/expr v0.19.0/go.mod h1:MrpN08Q+lEBs+bGYdLxxHkZoUSsCp0nSKTs0nTymJgw=
+cloud.google.com/go v0.26.0/go.mod h1:aQUYkXzVsufM+DwF1aE+0xfcU+56JwCaLick0ClmMTw=
 cloud.google.com/go v0.34.0 h1:eOI3/cP2VTU6uZLDYAoic+eyzzB9YyGmJ7eIjl8rOPg=
 cloud.google.com/go v0.34.0/go.mod h1:aQUYkXzVsufM+DwF1aE+0xfcU+56JwCaLick0ClmMTw=
 cloud.google.com/go v0.38.0/go.mod h1:990N+gfupTy94rShfmMCWGDn0LpTmnzTp2qbd1dvSRU=
@@ -179,6 +182,7 @@ cloud.google.com/go/compute/metadata v0.2.3 h1:mg4jlk7mCAj6xXp9UJ4fjI9VUI5rubuGB
 cloud.google.com/go/compute/metadata v0.2.3/go.mod h1:VAV5nSsACxMJvgaAuX6Pk2AawlZn8kiOGuCv6gTkwuA=
 cloud.google.com/go/compute/metadata v0.3.0/go.mod h1:zFmK7XCadkQkj6TtorcaGlCW1hT1fIilQDwofLpJ20k=
 cloud.google.com/go/compute/metadata v0.5.0/go.mod h1:aHnloV2TPI38yx4s9+wAZhHykWvVCfu7hQbF+9CWoiY=
+cloud.google.com/go/compute/metadata v0.5.2/go.mod h1:C66sj2AluDcIqakBq/M8lw8/ybHgOZqin2obFxa/E5k=
 cloud.google.com/go/contactcenterinsights v1.6.0 h1:jXIpfcH/VYSE1SYcPzO0n1VVb+sAamiLOgCw45JbOQk=
 cloud.google.com/go/contactcenterinsights v1.6.0/go.mod h1:IIDlT6CLcDoyv79kDv8iWxMSTZhLxSCofVV5W6YFM/w=
 cloud.google.com/go/contactcenterinsights v1.10.0/go.mod h1:bsg/R7zGLYMVxFFzfh9ooLTruLRCG9fnzhH9KznHhbM=
@@ -684,10 +688,13 @@ github.com/Azure/go-autorest/logger v0.2.1/go.mod h1:T9E3cAhj2VqvPOtCYAvby9aBXkZ
 github.com/Azure/go-autorest/tracing v0.6.0 h1:TYi4+3m5t6K48TGI9AUdb+IzbnSxvnvUMfuitfgcfuo=
 github.com/Azure/go-autorest/tracing v0.6.0/go.mod h1:+vhtPC754Xsa23ID7GlGsrdKBpUA79WCAKPPZVC2DeU=
 github.com/BurntSushi/toml v0.3.1 h1:WXkYYl6Yr3qBf1K79EBnL4mak0OimBfB0XUf9Vl28OQ=
+github.com/BurntSushi/toml v0.3.1/go.mod h1:xHWCNGjB5oqiDr8zfno3MHue2Ht5sIBksp03qcyfWMU=
 github.com/BurntSushi/toml v1.3.2 h1:o7IhLm0Msx3BaB+n3Ag7L8EVlByGnpq14C4YWiu/gL8=
 github.com/BurntSushi/toml v1.3.2/go.mod h1:CxXYINrC8qIiEnFrOxCa7Jy5BFHlXnUU2pbicEuybxQ=
 github.com/BurntSushi/xgb v0.0.0-20160522181843-27f122750802 h1:1BDTz0u9nC3//pOCMdNH+CiXJVYJh5UQNCOBG7jbELc=
 github.com/BurntSushi/xgb v0.0.0-20160522181843-27f122750802/go.mod h1:IVnqGOEym/WlBOVXweHU+Q+/VP0lqqI8lqeDx9IjBqo=
+github.com/GoogleCloudPlatform/opentelemetry-operations-go/detectors/gcp v1.24.2/go.mod h1:itPGVDKf9cC/ov4MdvJ2QZ0khw4bfoo9jzwTJlaxy2k=
+github.com/GoogleCloudPlatform/opentelemetry-operations-go/detectors/gcp v1.25.0/go.mod h1:obipzmGjfSjam60XLwGfqUkJsfiheAl+TUjG+4yzyPM=
 github.com/Microsoft/go-winio v0.6.1 h1:9/kr64B9VUZrLm5YYwbGtUJnMgqWVOdUAXu6Migciow=
 github.com/Microsoft/go-winio v0.6.1/go.mod h1:LRdKpFKfdobln8UmuiYcKPot9D2v6svN5+sAH+4kjUM=
 github.com/Microsoft/hcsshim v0.12.0-rc.0 h1:wX/F5huJxH9APBkhKSEAqaiZsuBvbbDnyBROZAqsSaY=
@@ -746,17 +753,29 @@ github.com/astaxie/beego v1.12.3 h1:SAQkdD2ePye+v8Gn1r4X6IKZM1wd28EyUOVQ3PDSOOQ=
 github.com/astaxie/beego v1.12.3/go.mod h1:p3qIm0Ryx7zeBHLljmd7omloyca1s4yu1a8kM1FkpIA=
 github.com/aws/aws-sdk-go-v2/feature/ec2/imds v1.16.19 h1:woXadbf0c7enQ2UGCi8gW/WuKmE0xIzxBF/eD94jMKQ=
 github.com/aws/aws-sdk-go-v2/feature/ec2/imds v1.16.19/go.mod h1:zminj5ucw7w0r65bP6nhyOd3xL6veAUMc3ElGMoLVb4=
+github.com/aws/aws-sdk-go-v2/feature/ec2/imds v1.16.21 h1:AmoU1pziydclFT/xRV+xXE/Vb8fttJCLRPv8oAkprc0=
 github.com/aws/aws-sdk-go-v2/feature/ec2/imds v1.16.21/go.mod h1:AjUdLYe4Tgs6kpH4Bv7uMZo7pottoyHMn4eTcIcneaY=
+github.com/aws/aws-sdk-go-v2/feature/ec2/imds v1.16.22/go.mod h1:NtSFajXVVL8TA2QNngagVZmUtXciyrHOt7xgz4faS/M=
 github.com/aws/aws-sdk-go-v2/service/internal/accept-encoding v1.12.0/go.mod h1:0jp+ltwkf+SwG2fm/PKo8t4y8pJSgOCO4D8Lz3k0aHQ=
+github.com/aws/aws-sdk-go-v2/service/internal/accept-encoding v1.12.1 h1:iXtILhvDxB6kPvEXgsDhGaZCSC6LQET5ZHSdJozeI0Y=
 github.com/aws/aws-sdk-go-v2/service/internal/accept-encoding v1.12.1/go.mod h1:9nu0fVANtYiAePIBh2/pFUSwtJ402hLnp854CNoDOeE=
 github.com/aws/aws-sdk-go-v2/service/internal/presigned-url v1.12.4/go.mod h1:4GQbF1vJzG60poZqWatZlhP31y8PGCCVTvIGPdaaYJ0=
+github.com/aws/aws-sdk-go-v2/service/internal/presigned-url v1.12.6 h1:50+XsN70RS7dwJ2CkVNXzj7U2L1HKP8nqTd3XWEXBN4=
 github.com/aws/aws-sdk-go-v2/service/internal/presigned-url v1.12.6/go.mod h1:WqgLmwY7so32kG01zD8CPTJWVWM+TzJoOVHwTg4aPug=
+github.com/aws/aws-sdk-go-v2/service/internal/presigned-url v1.12.7/go.mod h1:kLPQvGUmxn/fqiCrDeohwG33bq2pQpGeY62yRO6Nrh0=
 github.com/aws/aws-sdk-go-v2/service/sso v1.24.5/go.mod h1:wrMCEwjFPms+V86TCQQeOxQF/If4vT44FGIOFiMC2ck=
+github.com/aws/aws-sdk-go-v2/service/sso v1.24.7 h1:rLnYAfXQ3YAccocshIH5mzNNwZBkBo+bP6EhIxak6Hw=
 github.com/aws/aws-sdk-go-v2/service/sso v1.24.7/go.mod h1:ZHtuQJ6t9A/+YDuxOLnbryAmITtr8UysSny3qcyvJTc=
+github.com/aws/aws-sdk-go-v2/service/sso v1.24.8/go.mod h1:XDeGv1opzwm8ubxddF0cgqkZWsyOtw4lr6dxwmb6YQg=
 github.com/aws/aws-sdk-go-v2/service/ssooidc v1.28.4/go.mod h1:Tp/ly1cTjRLGBBmNccFumbZ8oqpZlpdhFf80SrRh4is=
+github.com/aws/aws-sdk-go-v2/service/ssooidc v1.28.6 h1:JnhTZR3PiYDNKlXy50/pNeix9aGMo6lLpXwJ1mw8MD4=
 github.com/aws/aws-sdk-go-v2/service/ssooidc v1.28.6/go.mod h1:URronUEGfXZN1VpdktPSD1EkAL9mfrV+2F4sjH38qOY=
+github.com/aws/aws-sdk-go-v2/service/ssooidc v1.28.7/go.mod h1:JfyQ0g2JG8+Krq0EuZNnRwX0mU0HrwY/tG6JNfcqh4k=
 github.com/aws/aws-sdk-go-v2/service/sts v1.32.4/go.mod h1:9XEUty5v5UAsMiFOBJrNibZgwCeOma73jgGwwhgffa8=
+github.com/aws/aws-sdk-go-v2/service/sts v1.33.2 h1:s4074ZO1Hk8qv65GqNXqDjmkf4HSQqJukaLuuW0TpDA=
 github.com/aws/aws-sdk-go-v2/service/sts v1.33.2/go.mod h1:mVggCnIWoM09jP71Wh+ea7+5gAp53q+49wDFs1SW5z8=
+github.com/aws/aws-sdk-go-v2/service/sts v1.33.3/go.mod h1:5Gn+d+VaaRgsjewpMvGazt0WfcFO+Md4wLOuBfGR9Bc=
+github.com/bazelbuild/rules_go v0.49.0 h1:5vCbuvy8Q11g41lseGJDc5vxhDjJtfxr6nM/IC4VmqM=
 github.com/bazelbuild/rules_go v0.49.0/go.mod h1:Dhcz716Kqg1RHNWos+N6MlXNkjNP2EwZQ0LukRKJfMs=
 github.com/benbjohnson/clock v1.1.0 h1:Q92kusRqC1XV2MjkWETPvjJVqKetz1OzxZB7mHJLju8=
 github.com/benbjohnson/clock v1.1.0/go.mod h1:J11/hYXuz8f4ySSvYwY0FKfm+ezbsZBKZxNJlLklBHA=
@@ -770,11 +789,15 @@ github.com/blang/semver/v4 v4.0.0 h1:1PFHFE6yCCTv8C1TeyNNarDzntLi7wMI5i/pzqYIsAM
 github.com/blang/semver/v4 v4.0.0/go.mod h1:IbckMUScFkM3pff0VJDNKRiT6TG/YpiHIM2yvyW5YoQ=
 github.com/buger/jsonparser v1.1.1 h1:2PnMjfWD7wBILjqQbt530v576A/cAbQvEW9gGIpYMUs=
 github.com/buger/jsonparser v1.1.1/go.mod h1:6RYKKt7H4d4+iWqouImQ9R2FZql3VbhNgx27UK13J/0=
+github.com/bytedance/sonic v1.12.6/go.mod h1:B8Gt/XvtZ3Fqj+iSKMypzymZxw/FVwgIGKzMzT9r/rk=
 github.com/bytedance/sonic/loader v0.2.0/go.mod h1:ncP89zfokxS5LZrJxl5z0UJcsk4M4yY2JpfqGeCtNLU=
+github.com/bytedance/sonic/loader v0.2.1/go.mod h1:ncP89zfokxS5LZrJxl5z0UJcsk4M4yY2JpfqGeCtNLU=
+github.com/bytedance/sonic/loader v0.2.2/go.mod h1:N8A3vUdtUebEY2/VQC0MyhYeKUFosQU6FxH2JmUe6VI=
 github.com/cenkalti/backoff/v4 v4.1.3 h1:cFAlzYUlVYDysBEH2T5hyJZMh3+5+WCBvSnK6Q8UtC4=
 github.com/cenkalti/backoff/v4 v4.2.1 h1:y4OZtCnogmCPw98Zjyt5a6+QwPLGkiQsYW5oUqylYbM=
 github.com/cenkalti/backoff/v4 v4.2.1/go.mod h1:Y3VNntkOUPxTVeUxJ/G5vcM//AlwfmyYozVcomhLiZE=
 github.com/census-instrumentation/opencensus-proto v0.2.1 h1:glEXhBS5PSLLv4IXzLA5yPRVX4bilULVyxxbrfOtDAk=
+github.com/census-instrumentation/opencensus-proto v0.2.1/go.mod h1:f6KPmirojxKA12rnyqOA5BBL4O983OfeGPqjHWSTneU=
 github.com/census-instrumentation/opencensus-proto v0.4.1 h1:iKLQ0xPNFxR/2hzXZMrBo8f1j86j5WHzznCCQxV/b8g=
 github.com/census-instrumentation/opencensus-proto v0.4.1/go.mod h1:4T9NM4+4Vw91VeyqjLS6ao50K5bOcLKN6Q42XnYaRYw=
 github.com/cespare/xxhash v1.1.0 h1:a6HrQnmkObjyL+Gs60czilIUGqrzKutQD6XZog3p+ko=
@@ -804,6 +827,8 @@ github.com/cilium/ebpf v0.7.0/go.mod h1:/oI2+1shJiTGAMgl6/RgJr36Eo1jzrRcAWbcXO2u
 github.com/clbanning/mxj/v2 v2.5.7 h1:7q5lvUpaPF/WOkqgIDiwjBJaznaLCCBd78pi8ZyAnE0=
 github.com/clbanning/mxj/v2 v2.5.7/go.mod h1:hNiWqW14h+kc+MdF9C6/YoRfjEJoR3ou6tn/Qo+ve2s=
 github.com/client9/misspell v0.3.4 h1:ta993UF76GwbvJcIo3Y68y/M3WxlpEHPWIGDkJYwzJI=
+github.com/client9/misspell v0.3.4/go.mod h1:qj6jICC3Q7zFZvVWo7KLAzC3yx5G7kyvSDkc90ppPyw=
+github.com/cncf/udpa/go v0.0.0-20191209042840-269d4d468f6f/go.mod h1:M8M6+tZqaGXZJjfX53e64911xZQV5JYwmTeXPW+k8Sc=
 github.com/cncf/udpa/go v0.0.0-20200629203442-efcf912fb354/go.mod h1:WmhPx2Nbnhtbo57+VJT5O0JRkEi1Wbu0z5j0R8u5Hbk=
 github.com/cncf/udpa/go v0.0.0-20201120205902-5459f2c99403 h1:cqQfy1jclcSy/FwLjemeg3SR1yaINm74aQyupQ0Bl8M=
 github.com/cncf/udpa/go v0.0.0-20201120205902-5459f2c99403/go.mod h1:WmhPx2Nbnhtbo57+VJT5O0JRkEi1Wbu0z5j0R8u5Hbk=
@@ -871,6 +896,9 @@ github.com/emicklei/go-restful/v3 v3.8.0/go.mod h1:6n3XBCmQQb25CM2LCACGz8ukIrRry
 github.com/emicklei/go-restful/v3 v3.9.0/go.mod h1:6n3XBCmQQb25CM2LCACGz8ukIrRry+4bhvbpWn3mrbc=
 github.com/emicklei/go-restful/v3 v3.10.2 h1:hIovbnmBTLjHXkqEBUz3HGpXZdM7ZrE9fJIZIqlJLqE=
 github.com/emicklei/go-restful/v3 v3.10.2/go.mod h1:6n3XBCmQQb25CM2LCACGz8ukIrRry+4bhvbpWn3mrbc=
+github.com/envoyproxy/go-control-plane v0.9.0/go.mod h1:YTl/9mNaCwkRvm6d1a2C3ymFceY/DCBVvsKhRF0iEA4=
+github.com/envoyproxy/go-control-plane v0.9.1-0.20191026205805-5f8ba28d4473/go.mod h1:YTl/9mNaCwkRvm6d1a2C3ymFceY/DCBVvsKhRF0iEA4=
+github.com/envoyproxy/go-control-plane v0.9.4/go.mod h1:6rpuAdCZL397s3pYoYcLgu1mIlRU8Am5FuJP05cCM98=
 github.com/envoyproxy/go-control-plane v0.9.7/go.mod h1:cwu0lG7PUMfa9snN8LXBig5ynNVH9qI8YYLbd1fK2po=
 github.com/envoyproxy/go-control-plane v0.9.9-0.20201210154907-fd9021fe5dad/go.mod h1:cXg6YxExXjJnVBQHBLXeUAgxn2UodCpnH306RInaBQk=
 github.com/envoyproxy/go-control-plane v0.9.9-0.20210217033140-668b12f5399d/go.mod h1:cXg6YxExXjJnVBQHBLXeUAgxn2UodCpnH306RInaBQk=
@@ -883,7 +911,9 @@ github.com/envoyproxy/go-control-plane v0.11.1 h1:wSUXTlLfiAQRWs2F+p+EKOY9rUyis1
 github.com/envoyproxy/go-control-plane v0.11.1/go.mod h1:uhMcXKCQMEJHiAb0w+YGefQLaTEw+YhGluxZkrTmD0g=
 github.com/envoyproxy/go-control-plane v0.13.0 h1:HzkeUz1Knt+3bK+8LG1bxOO/jzWZmdxpwC51i202les=
 github.com/envoyproxy/go-control-plane v0.13.0/go.mod h1:GRaKG3dwvFoTg4nj7aXdZnvMg4d7nvT/wl9WgVXn3Q8=
+github.com/envoyproxy/go-control-plane v0.13.1/go.mod h1:X45hY0mufo6Fd0KW3rqsGvQMw58jvjymeCzBU3mWyHw=
 github.com/envoyproxy/protoc-gen-validate v0.1.0 h1:EQciDnbrYxy13PgWoY8AqoxGiPrpgBZ1R8UNe3ddc+A=
+github.com/envoyproxy/protoc-gen-validate v0.1.0/go.mod h1:iSmxcyjqTsJpI2R4NaDN7+kN2VEUnK/pcBlmesArF7c=
 github.com/envoyproxy/protoc-gen-validate v0.10.1 h1:c0g45+xCJhdgFGw7a5QAfdS4byAbud7miNWJ1WwEVf8=
 github.com/envoyproxy/protoc-gen-validate v0.10.1/go.mod h1:DRjgyB0I43LtJapqN6NiRwroiAU2PaFuvk/vjgh61ss=
 github.com/envoyproxy/protoc-gen-validate v1.0.2 h1:QkIBuU5k+x7/QXPvPPnWXWlCdaBFApVqftFV6k087DA=
@@ -900,6 +930,7 @@ github.com/fsnotify/fsnotify v1.4.9/go.mod h1:znqG4EE+3YCdAaPaxE2ZRY/06pZUdp0tY4
 github.com/fsnotify/fsnotify v1.6.0/go.mod h1:sl3t1tCWJFWoRz9R8WJCbQihKKwmorjAbSClcnxKAGw=
 github.com/fsnotify/fsnotify v1.7.0 h1:8JEhPFa5W2WU7YfeZzPNqzMP6Lwt7L2715Ggo0nosvA=
 github.com/fsnotify/fsnotify v1.7.0/go.mod h1:40Bi/Hjc2AVfZrqy+aj+yEI+/bRxZnMJyTJwOpGvigM=
+github.com/gabriel-vasile/mimetype v1.4.7/go.mod h1:GDlAgAyIRT27BhFl53XNAFtfjzOkLaF35JdEG0P7LtU=
 github.com/ghodss/yaml v1.0.0 h1:wQHKEahhL6wmXdzwWG11gIVCkOv05bNOh+Rxn0yngAk=
 github.com/ghodss/yaml v1.0.0/go.mod h1:4dBDuWmgqj2HViK6kFavaiC9ZROes6MMH2rRYeMEF04=
 github.com/go-gl/glfw v0.0.0-20190409004039-e6da0acd62b1 h1:QbL/5oDUmRBzO9/Z7Seo6zf912W/a6Sr4Eu0G/3Jho0=
@@ -920,6 +951,7 @@ github.com/go-logr/zapr v1.2.4/go.mod h1:FyHWQIzQORZ0QVE1BtVHv3cKtNLuXsbNLtpuhNa
 github.com/go-ole/go-ole v1.2.6 h1:/Fpf6oFPoeFik9ty7siob0G6Ke8QvQEuVcuChpwXzpY=
 github.com/go-ole/go-ole v1.2.6/go.mod h1:pprOEPIfldk/42T2oK7lQ4v4JSDwmV0As9GaiUsvbm0=
 github.com/go-openapi/jsonreference v0.20.1/go.mod h1:Bl1zwGIM8/wsvqjsOQLJ/SH+En5Ap4rVB5KVcIDZG2k=
+github.com/go-playground/validator/v10 v10.23.0/go.mod h1:dbuPbCMFw/DrkbEynArYaCwl3amGuJotoKCe95atGMM=
 github.com/go-task/slim-sprig v0.0.0-20230315185526-52ccab3ef572/go.mod h1:9Pwr4B2jHnOSGXyyzV8ROjYa2ojvAY6HCGYYfMoC3Ls=
 github.com/gobwas/httphead v0.1.0 h1:exrUm0f4YX0L7EBwZHuCF4GDp8aJfVeBrlLQrs6NqWU=
 github.com/gobwas/httphead v0.1.0/go.mod h1:O/RXo79gxV8G+RqlR/otEwx4Q36zl9rqC5u12GKvMCM=
@@ -927,22 +959,28 @@ github.com/gobwas/pool v0.2.1 h1:xfeeEhW7pwmX8nuLVlqbzVc7udMDrwetjEv+TZIz1og=
 github.com/gobwas/pool v0.2.1/go.mod h1:q8bcK0KcYlCgd9e7WYLm9LpyS+YeLd8JVDW6WezmKEw=
 github.com/gobwas/ws v1.2.1 h1:F2aeBZrm2NDsc7vbovKrWSogd4wvfAxg0FQ89/iqOTk=
 github.com/gobwas/ws v1.2.1/go.mod h1:hRKAFb8wOxFROYNsT1bqfWnhX+b5MFeJM9r2ZSwg/KY=
+github.com/goccy/go-json v0.10.4/go.mod h1:oq7eo15ShAhp70Anwd5lgX2pLfOS3QCiwU/PULtXL6M=
 github.com/godbus/dbus/v5 v5.0.4/go.mod h1:xhWf0FNVPg57R7Z0UbKHbJfkEywrmjJnf7w5xrFpKfA=
 github.com/godbus/dbus/v5 v5.0.6 h1:mkgN1ofwASrYnJ5W6U/BxG15eXXXjirgZc7CLqkcaro=
 github.com/godbus/dbus/v5 v5.0.6/go.mod h1:xhWf0FNVPg57R7Z0UbKHbJfkEywrmjJnf7w5xrFpKfA=
 github.com/golang-jwt/jwt/v4 v4.5.0 h1:7cYmW1XlMY7h7ii7UhUyChSgS5wUJEnm9uZVTGqOWzg=
 github.com/golang-jwt/jwt/v4 v4.5.0/go.mod h1:m21LjoU+eqJr34lmDMbreY2eSTRJ1cv77w39/MY0Ch0=
 github.com/golang/glog v0.0.0-20160126235308-23def4e6c14b h1:VKtxabqXZkF25pY9ekfRL6a582T4P37/31XEstQ5p58=
+github.com/golang/glog v0.0.0-20160126235308-23def4e6c14b/go.mod h1:SBH7ygxi8pfUlaOkMMuAQtPIUF8ecWP5IEl/CR7VP2Q=
 github.com/golang/glog v1.1.0 h1:/d3pCKDPWNnvIWe0vVUpNP32qc8U3PDVxySP/y360qE=
 github.com/golang/glog v1.1.0/go.mod h1:pfYeQZ3JWZoXTV5sFc986z3HTpwQs9At6P4ImfuP3NQ=
 github.com/golang/glog v1.1.2 h1:DVjP2PbBOzHyzA+dn3WhHIq4NdVu3Q+pvivFICf/7fo=
 github.com/golang/glog v1.1.2/go.mod h1:zR+okUeTbrL6EL3xHUDxZuEtGv04p5shwip1+mL/rLQ=
 github.com/golang/glog v1.2.2 h1:1+mZ9upx1Dh6FmUTFR1naJ77miKiXgALjWOZ3NVFPmY=
 github.com/golang/glog v1.2.2/go.mod h1:6AhwSGph0fcJtXVM/PEHPqZlFeoLxhs7/t5UDAwmO+w=
+github.com/golang/glog v1.2.3/go.mod h1:6AhwSGph0fcJtXVM/PEHPqZlFeoLxhs7/t5UDAwmO+w=
 github.com/golang/groupcache v0.0.0-20190702054246-869f871628b6/go.mod h1:cIg4eruTrX1D+g88fzRXU5OdNfaM+9IcxsU14FzY7Hc=
 github.com/golang/groupcache v0.0.0-20191227052852-215e87163ea7/go.mod h1:cIg4eruTrX1D+g88fzRXU5OdNfaM+9IcxsU14FzY7Hc=
+github.com/golang/groupcache v0.0.0-20200121045136-8c9f03a8e57e/go.mod h1:cIg4eruTrX1D+g88fzRXU5OdNfaM+9IcxsU14FzY7Hc=
+github.com/golang/groupcache v0.0.0-20210331224755-41bb18bfe9da h1:oI5xCqsCo564l8iNU+DwB5epxmsaqB+rhGL0m5jtYqE=
 github.com/golang/groupcache v0.0.0-20210331224755-41bb18bfe9da/go.mod h1:cIg4eruTrX1D+g88fzRXU5OdNfaM+9IcxsU14FzY7Hc=
 github.com/golang/mock v1.1.1 h1:G5FRp8JnTd7RQH5kemVNlMeyXQAztQ3mOWV95KxsXH8=
+github.com/golang/mock v1.1.1/go.mod h1:oTYuIxOrZwtPieC+H1uAHpcLFnEyAGVDL/k47Jfbm0A=
 github.com/golang/mock v1.2.0/go.mod h1:oTYuIxOrZwtPieC+H1uAHpcLFnEyAGVDL/k47Jfbm0A=
 github.com/golang/mock v1.3.1/go.mod h1:sBzyDLLjw3U8JLTeZvSv8jJB+tU5PVekmnlKIyFUx0Y=
 github.com/golang/mock v1.4.0/go.mod h1:UOMv5ysSaYNkG+OFQykRIcU/QvvxJf3p21QfJ2Bt3cw=
@@ -951,10 +989,19 @@ github.com/golang/mock v1.4.3/go.mod h1:UOMv5ysSaYNkG+OFQykRIcU/QvvxJf3p21QfJ2Bt
 github.com/golang/mock v1.4.4/go.mod h1:l3mdAwkq5BuhzHwde/uurv3sEJeZMXNpwsxVWU71h+4=
 github.com/golang/mock v1.5.0 h1:jlYHihg//f7RRwuPfptm04yp4s7O6Kw8EZiVYIGcH0g=
 github.com/golang/mock v1.5.0/go.mod h1:CWnOUgYIOo4TcNZ0wHX3YZCqsaM1I1Jvs6v3mP3KVu8=
+github.com/golang/protobuf v1.2.0/go.mod h1:6lQm79b+lXiMfvg/cZm0SGofjICqVBUtrP5yJMmIC1U=
+github.com/golang/protobuf v1.3.2/go.mod h1:6lQm79b+lXiMfvg/cZm0SGofjICqVBUtrP5yJMmIC1U=
 github.com/golang/protobuf v1.3.3/go.mod h1:vzj43D7+SQXF/4pzW/hwtAqwc6iTitCiVSaWz5lYuqw=
 github.com/golang/protobuf v1.3.4/go.mod h1:vzj43D7+SQXF/4pzW/hwtAqwc6iTitCiVSaWz5lYuqw=
 github.com/golang/protobuf v1.3.5/go.mod h1:6O5/vntMXwX2lRkT1hjjk0nAC1IDOTvTlVgjlRvqsdk=
+github.com/golang/protobuf v1.4.0-rc.1/go.mod h1:ceaxUfeHdC40wWswd/P6IGgMaK3YpKi5j83Wpe3EHw8=
+github.com/golang/protobuf v1.4.0-rc.1.0.20200221234624-67d41d38c208/go.mod h1:xKAWHe0F5eneWXFV3EuXVDTCmh+JuBKY0li0aMyXATA=
+github.com/golang/protobuf v1.4.0-rc.2/go.mod h1:LlEzMj4AhA7rCAGe4KMBDvJI+AwstrUpVNzEA03Pprs=
+github.com/golang/protobuf v1.4.0-rc.4.0.20200313231945-b860323f09d0/go.mod h1:WU3c8KckQ9AFe+yFwt9sWVRKCVIyN9cPHBJSNnbL67w=
+github.com/golang/protobuf v1.4.0/go.mod h1:jodUvKwWbYaEsadDk5Fwe5c77LiNKVO9IDvqG2KuDX0=
+github.com/golang/protobuf v1.4.1/go.mod h1:U8fpvMrcmy5pZrNK1lt4xCsGvpyWQ/VVv6QDs8UjoX8=
 github.com/golang/protobuf v1.4.2/go.mod h1:oDoupMAO8OvCJWAcko0GGGIgR6R6ocIYbsSw735rRwI=
+github.com/golang/protobuf v1.4.3/go.mod h1:oDoupMAO8OvCJWAcko0GGGIgR6R6ocIYbsSw735rRwI=
 github.com/golang/protobuf v1.5.1/go.mod h1:DopwsBzvsk0Fs44TXzsVbJyPhcCPeIwnvohx4u74HPM=
 github.com/golang/protobuf v1.5.2/go.mod h1:XVQd3VNwM+JqD3oG2Ue2ip4fOMUkwXdXDdiuN0vRsmY=
 github.com/golang/snappy v0.0.3/go.mod h1:/XxbfmMg8lxefKM7IXC3fBNl/7bRcc72aCRzEWrmP2Q=
@@ -971,8 +1018,14 @@ github.com/google/flatbuffers v2.0.8+incompatible/go.mod h1:1AeVuKshWv4vARoZatz6
 github.com/google/gnostic v0.5.7-v3refs/go.mod h1:73MKFl6jIHelAJNaBGFzt3SPtZULs9dYrGFt8OiIsHQ=
 github.com/google/gnostic v0.6.9 h1:ZK/5VhkoX835RikCHpSUJV9a+S3e1zLh59YnyWeBW+0=
 github.com/google/gnostic v0.6.9/go.mod h1:Nm8234We1lq6iB9OmlgNv3nH91XLLVZHCDayfA3xq+E=
+github.com/google/go-cmp v0.2.0/go.mod h1:oXzfMopK8JAjlY9xF4vHSVASa0yLyX7SntLO5aqRK0M=
+github.com/google/go-cmp v0.3.0/go.mod h1:8QqcDgzrUqlUb/G2PQTWiueGozuR1884gddMywk6iLU=
+github.com/google/go-cmp v0.3.1/go.mod h1:8QqcDgzrUqlUb/G2PQTWiueGozuR1884gddMywk6iLU=
+github.com/google/go-cmp v0.4.0/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
 github.com/google/go-cmp v0.4.1/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
+github.com/google/go-cmp v0.5.0/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
 github.com/google/go-cmp v0.5.1/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
+github.com/google/go-cmp v0.5.3/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
 github.com/google/go-cmp v0.5.4/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
 github.com/google/go-cmp v0.5.6/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
 github.com/google/go-cmp v0.5.8/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
@@ -1010,6 +1063,7 @@ github.com/google/s2a-go v0.1.4 h1:1kZ/sQM3srePvKs3tXAvQzo66XfcReoqFpIpIccE7Oc=
 github.com/google/s2a-go v0.1.4/go.mod h1:Ej+mSEMGRnqRzjc7VtF+jdBwYG5fuJfiZ8ELkjEwM0A=
 github.com/google/s2a-go v0.1.7 h1:60BLSyTrOV4/haCDW4zb1guZItoSq8foHCXrAnjBo/o=
 github.com/google/s2a-go v0.1.7/go.mod h1:50CgR4k1jNlWBu4UfS4AcfhVe1r6pdZPygJ3R8F0Qdw=
+github.com/google/uuid v1.1.2/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
 github.com/google/uuid v1.4.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
 github.com/googleapis/enterprise-certificate-proxy v0.2.3 h1:yk9/cqRKtT9wXZSsRH9aurXEpJX+U6FLtpYTdC3R06k=
 github.com/googleapis/enterprise-certificate-proxy v0.2.3/go.mod h1:AwSRAtLfXpU5Nm3pW+v7rGDHp09LsPtGY9MduiEsR9k=
@@ -1263,6 +1317,7 @@ github.com/prometheus/client_golang v1.17.0/go.mod h1:VeL+gMmOAxkS2IqfCq0ZmHSL+L
 github.com/prometheus/client_golang v1.18.0/go.mod h1:T+GXkCk5wSJyOqMIzVgvvjFDlkOQntgjkJWKrN5txjA=
 github.com/prometheus/client_golang v1.19.0 h1:ygXvpU1AoN1MhdzckN+PyD9QJOSD4x7kmXYlnfbA6JU=
 github.com/prometheus/client_golang v1.19.0/go.mod h1:ZRM9uEAypZakd+q/x7+gmsvXdURP+DABIEIjnmDdp+k=
+github.com/prometheus/client_model v0.0.0-20190812154241-14fe0d1b01d4/go.mod h1:xMI15A0UPsDsEKsMN9yxemIoYk6Tm2C1GtYGdfGttqA=
 github.com/prometheus/client_model v0.4.0/go.mod h1:oMQmHW1/JoDwqLtg57MGgP/Fb1CJEYF2imWWhWtMkYU=
 github.com/prometheus/client_model v0.5.0 h1:VQw1hfvPvk3Uv6Qf29VrPF32JB6rtbgI6cYPYQjL0Qw=
 github.com/prometheus/client_model v0.5.0/go.mod h1:dTiFglRmd66nLR9Pv9f0mZi7B7fk5Pm3gvsjB5tr+kI=
@@ -1448,6 +1503,10 @@ go.opencensus.io v0.22.3/go.mod h1:yxeiOL68Rb0Xd1ddK5vPZ/oVn4vY4Ynel7k9FzqtOIw=
 go.opencensus.io v0.22.4/go.mod h1:yxeiOL68Rb0Xd1ddK5vPZ/oVn4vY4Ynel7k9FzqtOIw=
 go.opencensus.io v0.22.5/go.mod h1:5pWMHQbX5EPX2/62yrJeAkowc+lfs/XD7Uxpq3pI6kk=
 go.opencensus.io v0.23.0/go.mod h1:XItmlyltB5F7CS4xOC1DcqMoFqwtC6OG2xF7mCv7P7E=
+go.opencensus.io v0.24.0 h1:y73uSU6J157QMP2kn2r30vwW1A2W2WFwSCGnAVxeaD0=
+go.opencensus.io v0.24.0/go.mod h1:vNK8G9p7aAivkbmorf4v+7Hgx+Zs0yY+0fOtgBfjQKo=
+go.opentelemetry.io/contrib/detectors/gcp v1.31.0/go.mod h1:tzQL6E1l+iV44YFTkcAeNQqzXUiekSYP9jjJjXwEd00=
+go.opentelemetry.io/contrib/detectors/gcp v1.32.0/go.mod h1:TVqo0Sda4Cv8gCIixd7LuLwW4EylumVWfhjZJjDD4DU=
 go.opentelemetry.io/contrib/instrumentation/google.golang.org/grpc/otelgrpc v0.35.0 h1:xFSRQBbXF6VvYRf2lqMJXxoB72XI1K/azav8TekHHSw=
 go.opentelemetry.io/contrib/instrumentation/google.golang.org/grpc/otelgrpc v0.35.0/go.mod h1:h8TWwRAhQpOd0aM5nYsRD8+flnkj+526GEIVlarH7eY=
 go.opentelemetry.io/contrib/instrumentation/google.golang.org/grpc/otelgrpc v0.42.0 h1:ZOLJc06r4CB42laIXg/7udr0pbZyuAihN10A/XuiQRY=
@@ -1460,6 +1519,8 @@ go.opentelemetry.io/otel v1.10.0 h1:Y7DTJMR6zs1xkS/upamJYk0SxxN4C9AqRd77jmZnyY4=
 go.opentelemetry.io/otel v1.10.0/go.mod h1:NbvWjCthWHKBEUMpf0/v8ZRZlni86PpGFEMA9pnQSnQ=
 go.opentelemetry.io/otel v1.19.0 h1:MuS/TNf4/j4IXsZuJegVzI1cwut7Qc00344rgH7p8bs=
 go.opentelemetry.io/otel v1.19.0/go.mod h1:i0QyjOq3UPoTzff0PJB2N66fb4S0+rSbSB15/oyH9fY=
+go.opentelemetry.io/otel v1.31.0/go.mod h1:O0C14Yl9FgkjqcCZAsE053C13OaddMYr/hz6clDkEJE=
+go.opentelemetry.io/otel v1.32.0/go.mod h1:00DCVSB0RQcnzlwyTfqtxSm+DRr9hpYrHjNGiBHVQIg=
 go.opentelemetry.io/otel/exporters/otlp/internal/retry v1.10.0 h1:TaB+1rQhddO1sF71MpZOZAuSPW1klK2M8XxfrBMfK7Y=
 go.opentelemetry.io/otel/exporters/otlp/internal/retry v1.10.0/go.mod h1:78XhIg8Ht9vR4tbLNUhXsiOnE2HOuSeKAiAcoVQEpOY=
 go.opentelemetry.io/otel/exporters/otlp/otlptrace v1.10.0 h1:pDDYmo0QadUPal5fwXoY1pmMpFcdyhXOmL5drCrI3vU=
@@ -1474,16 +1535,21 @@ go.opentelemetry.io/otel/metric v0.31.0 h1:6SiklT+gfWAwWUR0meEMxQBtihpiEs4c+vL9s
 go.opentelemetry.io/otel/metric v0.31.0/go.mod h1:ohmwj9KTSIeBnDBm/ZwH2PSZxZzoOaG2xZeekTRzL5A=
 go.opentelemetry.io/otel/metric v1.19.0 h1:aTzpGtV0ar9wlV4Sna9sdJyII5jTVJEvKETPiOKwvpE=
 go.opentelemetry.io/otel/metric v1.19.0/go.mod h1:L5rUsV9kM1IxCj1MmSdS+JQAcVm319EUrDVLrt7jqt8=
+go.opentelemetry.io/otel/metric v1.31.0/go.mod h1:C3dEloVbLuYoX41KpmAhOqNriGbA+qqH6PQ5E5mUfnY=
+go.opentelemetry.io/otel/metric v1.32.0/go.mod h1:jH7CIbbK6SH2V2wE16W05BHCtIDzauciCRLoc/SyMv8=
 go.opentelemetry.io/otel/sdk v1.10.0 h1:jZ6K7sVn04kk/3DNUdJ4mqRlGDiXAVuIG+MMENpTNdY=
 go.opentelemetry.io/otel/sdk v1.10.0/go.mod h1:vO06iKzD5baltJz1zarxMCNHFpUlUiOy4s65ECtn6kE=
 go.opentelemetry.io/otel/sdk v1.19.0 h1:6USY6zH+L8uMH8L3t1enZPR3WFEmSTADlqldyHtJi3o=
 go.opentelemetry.io/otel/sdk v1.19.0/go.mod h1:NedEbbS4w3C6zElbLdPJKOpJQOrGUJ+GfzpjUvI0v1A=
 go.opentelemetry.io/otel/sdk v1.29.0 h1:vkqKjk7gwhS8VaWb0POZKmIEDimRCMsopNYnriHyryo=
 go.opentelemetry.io/otel/sdk v1.29.0/go.mod h1:pM8Dx5WKnvxLCb+8lG1PRNIDxu9g9b9g59Qr7hfAAok=
+go.opentelemetry.io/otel/sdk v1.32.0/go.mod h1:LqgegDBjKMmb2GC6/PrTnteJG39I8/vJCAP9LlJXEjU=
 go.opentelemetry.io/otel/trace v1.10.0 h1:npQMbR8o7mum8uF95yFbOEJffhs1sbCOfDh8zAJiH5E=
 go.opentelemetry.io/otel/trace v1.10.0/go.mod h1:Sij3YYczqAdz+EhmGhE6TpTxUO5/F/AzrK+kxfGqySM=
 go.opentelemetry.io/otel/trace v1.19.0 h1:DFVQmlVbfVeOuBRrwdtaehRrWiL1JoVs9CPIQ1Dzxpg=
 go.opentelemetry.io/otel/trace v1.19.0/go.mod h1:mfaSyvGyEJEI0nyV2I4qhNQnbBOUUmYZpYojqMnX2vo=
+go.opentelemetry.io/otel/trace v1.31.0/go.mod h1:TXZkRk7SM2ZQLtR6eoAWQFIHPvzQ06FJAsO1tJg480A=
+go.opentelemetry.io/otel/trace v1.32.0/go.mod h1:+i4rkvCraA+tG6AzwloGaCtkx53Fa+L+V8e9a7YvhT8=
 go.opentelemetry.io/proto/otlp v0.7.0 h1:rwOQPCuKAKmwGKq2aVNnYIibI6wnV7EvzgfTCzcdGg8=
 go.opentelemetry.io/proto/otlp v0.7.0/go.mod h1:PqfVotwruBrMGOCsRd/89rSnXhoiJIqeYNgFYFoEGnI=
 go.opentelemetry.io/proto/otlp v0.19.0 h1:IVN6GR+mhC4s5yfcTbmzHYODqvWAp3ZedA2SJPI1Nnw=
@@ -1501,6 +1567,7 @@ go.uber.org/multierr v1.6.0/go.mod h1:cdWPpRnG4AhwMwsgIHip0KRBQjJy5kYEpYjJxpXp9i
 go.uber.org/multierr v1.10.0/go.mod h1:20+QtiLqy0Nd6FdQB9TLXag12DsQkrbs3htMFfDN80Y=
 go.uber.org/zap v1.17.0/go.mod h1:MXVU+bhUf/A7Xi2HNOnopQOrmycQ5Ih87HtOu4q5SSo=
 go.uber.org/zap v1.24.0/go.mod h1:2kMP+WWQ8aoFoedH3T2sq6iJ2yDWpHbP0f6MQbS9Gkg=
+golang.org/x/arch v0.12.0/go.mod h1:FEVrYAQjsQXMVJ1nsMoVVXPZg6p2JE2mx8psSWTDQys=
 golang.org/x/crypto v0.0.0-20181029021203-45a5f77698d3/go.mod h1:6SG95UA2DQfeDnfUPMdvaQW0Q7yPrPDi9nlGo2tz2b4=
 golang.org/x/crypto v0.0.0-20190510104115-cbcb75029529/go.mod h1:yigFU9vqHzYiE8UmvKecakEJjdnWj3jj499lnFckfCI=
 golang.org/x/crypto v0.0.0-20190605123033-f99c8df09eb5/go.mod h1:yigFU9vqHzYiE8UmvKecakEJjdnWj3jj499lnFckfCI=
@@ -1513,7 +1580,10 @@ golang.org/x/crypto v0.14.0/go.mod h1:MVFd36DqK4CsrnJYDkBA3VC4m2GkXAM0PvzMCn4JQf
 golang.org/x/crypto v0.17.0/go.mod h1:gCAAfMLgwOJRpTjQ2zCCt2OcSfYMTeZVSRtQlPC7Nq4=
 golang.org/x/crypto v0.19.0/go.mod h1:Iy9bg/ha4yyC70EfRS8jz+B6ybOBKMaSxLj6P6oBDfU=
 golang.org/x/crypto v0.27.0/go.mod h1:1Xngt8kV6Dvbssa53Ziq6Eqn0HqbZi5Z6R0ZpwQzt70=
+golang.org/x/crypto v0.31.0/go.mod h1:kDsLvtWBEx7MV9tJOj9bnXsPbxwJQ6csT/x4KIN4Ssk=
+golang.org/x/crypto v0.32.0/go.mod h1:ZnnJkOaASj8g0AjIduWNlq2NRxL0PlBrbKVyZ6V/Ugc=
 golang.org/x/exp v0.0.0-20190121172915-509febef88a4 h1:c2HOrn5iMezYjSlGPncknSEr/8x5LELb/ilJbXi9DEA=
+golang.org/x/exp v0.0.0-20190121172915-509febef88a4/go.mod h1:CJ0aWSM057203Lf6IL+f9T1iT9GByDxfZKAQTCR3kQA=
 golang.org/x/exp v0.0.0-20190306152737-a1d7652674e8/go.mod h1:CJ0aWSM057203Lf6IL+f9T1iT9GByDxfZKAQTCR3kQA=
 golang.org/x/exp v0.0.0-20190510132918-efd6b22b2522/go.mod h1:ZjyILWgesfNpC6sMxTJOJm9Kp84zZh5NQWvqDGG3Qr8=
 golang.org/x/exp v0.0.0-20190829153037-c13cbed26979/go.mod h1:86+5VVa7VpoJ4kLfm080zCjGlMRFzhUhsZKEZO7MGek=
@@ -1527,8 +1597,11 @@ golang.org/x/exp v0.0.0-20200224162631-6cc2880d07d6/go.mod h1:3jZMyOhIsHpP37uCMk
 golang.org/x/exp v0.0.0-20220722155223-a9213eeb770e/go.mod h1:Kr81I6Kryrl9sr8s2FK3vxD90NdsKWRuOIl2O4CvYbA=
 golang.org/x/image v0.0.0-20190227222117-0694c2d4d067/go.mod h1:kZ7UVZpmo3dzQBMxlp+ypCbDeSB+sBbTgSJuh5dn5js=
 golang.org/x/image v0.0.0-20190802002840-cff245a6509b/go.mod h1:FeLwcggjj3mMvU+oOTbSwawSJRM1uh48EjtB4UJZlP0=
+golang.org/x/lint v0.0.0-20181026193005-c67002cb31c3/go.mod h1:UVdnD1Gm6xHRNCYTkRU2/jEulfH38KcIWyp/GAMgvoE=
+golang.org/x/lint v0.0.0-20190227174305-5b3e6a55c961/go.mod h1:wehouNa3lNwaWXcvxsM5YxQ5yQlVC4a0KAMCusXpPoU=
 golang.org/x/lint v0.0.0-20190301231843-5614ed5bae6f/go.mod h1:UVdnD1Gm6xHRNCYTkRU2/jEulfH38KcIWyp/GAMgvoE=
 golang.org/x/lint v0.0.0-20190313153728-d0100b6bd8b3 h1:XQyxROzUlZH+WIQwySDgnISgOivlhjIEwaQaJEJrrN0=
+golang.org/x/lint v0.0.0-20190313153728-d0100b6bd8b3/go.mod h1:6SW0HCj/g11FgYtHlgUYUwCkIfeOF89ocIRzGO/8vkc=
 golang.org/x/lint v0.0.0-20190409202823-959b441ac422/go.mod h1:6SW0HCj/g11FgYtHlgUYUwCkIfeOF89ocIRzGO/8vkc=
 golang.org/x/lint v0.0.0-20190909230951-414d861bb4ac/go.mod h1:6SW0HCj/g11FgYtHlgUYUwCkIfeOF89ocIRzGO/8vkc=
 golang.org/x/lint v0.0.0-20190930215403-16217165b5de/go.mod h1:6SW0HCj/g11FgYtHlgUYUwCkIfeOF89ocIRzGO/8vkc=
@@ -1555,9 +1628,13 @@ golang.org/x/mod v0.10.0/go.mod h1:iBbtSCu2XBx23ZKBPSOrRkjjQPZFPuis4dIYUhu/chs=
 golang.org/x/mod v0.15.0 h1:SernR4v+D55NyBH2QiEQrlBAnj1ECL6AGrA5+dPaMY8=
 golang.org/x/mod v0.15.0/go.mod h1:hTbmBsO62+eylJbnUtE2MGJUyE7QWk4xUqPFrRgJ+7c=
 golang.org/x/mod v0.17.0/go.mod h1:hTbmBsO62+eylJbnUtE2MGJUyE7QWk4xUqPFrRgJ+7c=
+golang.org/x/mod v0.18.0/go.mod h1:hTbmBsO62+eylJbnUtE2MGJUyE7QWk4xUqPFrRgJ+7c=
+golang.org/x/net v0.0.0-20180724234803-3673e40ba225/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
+golang.org/x/net v0.0.0-20180826012351-8a410e7b638d/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
 golang.org/x/net v0.0.0-20181023162649-9b4f9f5ad519/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
 golang.org/x/net v0.0.0-20181201002055-351d144fa1fc/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
 golang.org/x/net v0.0.0-20190108225652-1e06a53dbb7e/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
+golang.org/x/net v0.0.0-20190213061140-3a22650c66bd/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
 golang.org/x/net v0.0.0-20190501004415-9ce7a6920f09/go.mod h1:t9HGtf8HONx5eT2rtn7q6eTqICYqUVnKs3thJo3Qplg=
 golang.org/x/net v0.0.0-20190503192946-f4e77d36d62c/go.mod h1:t9HGtf8HONx5eT2rtn7q6eTqICYqUVnKs3thJo3Qplg=
 golang.org/x/net v0.0.0-20190628185345-da137c7871d7/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
@@ -1575,6 +1652,7 @@ golang.org/x/net v0.0.0-20200625001655-4c5254603344/go.mod h1:/O7V0waA8r7cgGh81R
 golang.org/x/net v0.0.0-20200707034311-ab3426394381/go.mod h1:/O7V0waA8r7cgGh81Ro3o1hOxt32SMVPicZroKQ2sZA=
 golang.org/x/net v0.0.0-20200822124328-c89045814202/go.mod h1:/O7V0waA8r7cgGh81Ro3o1hOxt32SMVPicZroKQ2sZA=
 golang.org/x/net v0.0.0-20201031054903-ff519b6c9102/go.mod h1:sp8m0HH+o8qH0wwXwYZr8TS3Oi6o0r6Gce1SSxlDquU=
+golang.org/x/net v0.0.0-20201110031124-69a78807bb2b/go.mod h1:sp8m0HH+o8qH0wwXwYZr8TS3Oi6o0r6Gce1SSxlDquU=
 golang.org/x/net v0.0.0-20201209123823-ac852fbbde11/go.mod h1:m0MpNAwzfU5UDzcl9v0D8zg8gWTRqZa9RBIspLL5mdg=
 golang.org/x/net v0.0.0-20210119194325-5f4716e94777/go.mod h1:m0MpNAwzfU5UDzcl9v0D8zg8gWTRqZa9RBIspLL5mdg=
 golang.org/x/net v0.0.0-20210316092652-d523dce5a7f4/go.mod h1:RBQZq4jEuRlivfhVLdyRGr576XBO4/greRjx4P4O3yc=
@@ -1593,6 +1671,10 @@ golang.org/x/net v0.28.0/go.mod h1:yqtgsTWOOnlGLG9GFRrK3++bGOUEkNBoHZc8MEDWPNg=
 golang.org/x/net v0.29.0/go.mod h1:gLkgy8jTGERgjzMic6DS9+SP0ajcu6Xu3Orq/SpETg0=
 golang.org/x/net v0.30.0/go.mod h1:2wGyMJ5iFasEhkwi13ChkO/t1ECNC4X4eBKkVFyYFlU=
 golang.org/x/net v0.31.0/go.mod h1:P4fl1q7dY2hnZFxEk4pPSkDHF+QqjitcnDjUQyMM+pM=
+golang.org/x/net v0.32.0/go.mod h1:CwU0IoeOlnQQWJ6ioyFrfRuomB8GKF6KbYXZVyeXNfs=
+golang.org/x/net v0.33.0/go.mod h1:HXLR5J+9DxmrqMwG9qjGCxZ+zKXxBru04zlTvWlWuN4=
+golang.org/x/net v0.34.0/go.mod h1:di0qlW3YNM5oh6GqDGQr92MyTozJPmybPK4Ev/Gm31k=
+golang.org/x/oauth2 v0.0.0-20180821212333-d2e6202438be/go.mod h1:N/0e6XlmueqKjAGxoOufVs8QHGRruUQn6yWY3a++T0U=
 golang.org/x/oauth2 v0.0.0-20190226205417-e64efc72b421/go.mod h1:gOpvHmFTYa4IltrdGE7lF6nIHvwfUNPOp7c8zoXwtLw=
 golang.org/x/oauth2 v0.0.0-20190604053449-0f29369cfe45/go.mod h1:gOpvHmFTYa4IltrdGE7lF6nIHvwfUNPOp7c8zoXwtLw=
 golang.org/x/oauth2 v0.0.0-20191202225959-858c2ad4c8b6/go.mod h1:gOpvHmFTYa4IltrdGE7lF6nIHvwfUNPOp7c8zoXwtLw=
@@ -1615,6 +1697,9 @@ golang.org/x/oauth2 v0.16.0/go.mod h1:hqZ+0LWXsiVoZpeld6jVt06P3adbS2Uu911W1SsJv2
 golang.org/x/oauth2 v0.18.0 h1:09qnuIAgzdx1XplqJvW6CQqMCtGZykZWcXzPMPUusvI=
 golang.org/x/oauth2 v0.18.0/go.mod h1:Wf7knwG0MPoWIMMBgFlEaSUDaKskp0dCfrlJRJXbBi8=
 golang.org/x/oauth2 v0.23.0/go.mod h1:XYTD2NtWslqkgxebSiOHnXEap4TF09sJSc7H1sXbhtI=
+golang.org/x/oauth2 v0.24.0/go.mod h1:XYTD2NtWslqkgxebSiOHnXEap4TF09sJSc7H1sXbhtI=
+golang.org/x/sync v0.0.0-20180314180146-1d60e4601c6f/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.0.0-20181108010431-42b317875d0f/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20181221193216-37e7f081c4d4/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20190227155943-e225da77a7e6/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20200625203802-6e8e738ad208/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
@@ -1624,7 +1709,9 @@ golang.org/x/sync v0.2.0/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.3.0/go.mod h1:FU7BRWz2tNW+3quACPkgCx/L+uEAv1htQ0V83Z9Rj+Y=
 golang.org/x/sync v0.5.0/go.mod h1:Czt+wKu1gCyEFDUtn0jG5QVvpJ6rzVqr5aXyt9drQfk=
 golang.org/x/sync v0.8.0/go.mod h1:Czt+wKu1gCyEFDUtn0jG5QVvpJ6rzVqr5aXyt9drQfk=
+golang.org/x/sync v0.10.0/go.mod h1:Czt+wKu1gCyEFDUtn0jG5QVvpJ6rzVqr5aXyt9drQfk=
 golang.org/x/sys v0.0.0-20180823144017-11551d06cbcc/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
+golang.org/x/sys v0.0.0-20180830151530-49385e6e1522/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20181026203630-95b1ffbd15a5/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20190312061237-fead79001313/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20190502145724-3ef323f4f1fd/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
@@ -1673,9 +1760,12 @@ golang.org/x/sys v0.15.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
 golang.org/x/sys v0.16.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
 golang.org/x/sys v0.17.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
 golang.org/x/sys v0.20.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/sys v0.21.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
 golang.org/x/sys v0.22.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
 golang.org/x/sys v0.24.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
 golang.org/x/sys v0.25.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/sys v0.28.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/sys v0.29.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
 golang.org/x/telemetry v0.0.0-20240208230135-b75ee8823808 h1:+Kc94D8UVEVxJnLXp/+FMfqQARZtWHfVrcRtcG8aT3g=
 golang.org/x/telemetry v0.0.0-20240208230135-b75ee8823808/go.mod h1:KG1lNk5ZFNssSZLrpVb4sMXKMpGwGXOxSG3rnu2gZQQ=
 golang.org/x/telemetry v0.0.0-20240521205824-bda55230c457 h1:zf5N6UOrA487eEFacMePxjXAJctxKmyjKUsjA11Uzuk=
@@ -1684,6 +1774,8 @@ golang.org/x/term v0.26.0 h1:WEQa6V3Gja/BhNxg540hBip/kkaYtRg3cxg4oXSw4AU=
 golang.org/x/term v0.26.0/go.mod h1:Si5m1o57C5nBNQo5z1iq+XDijt21BDBDp2bK0QI8e3E=
 golang.org/x/term v0.27.0 h1:WP60Sv1nlK1T6SupCHbXzSaN0b9wUmsPoRS9b61A23Q=
 golang.org/x/term v0.27.0/go.mod h1:iMsnZpn0cago0GOrHO2+Y7u7JPn5AylBrcoWkElMTSM=
+golang.org/x/term v0.29.0 h1:L6pJp37ocefwRRtYPKSWOWzOtWSxVajvz2ldH/xi3iU=
+golang.org/x/term v0.29.0/go.mod h1:6bl4lRlvVuDgSf3179VpIxBF0o10JUpXWOnI7nErv7s=
 golang.org/x/text v0.0.0-20170915032832-14c0d48ead0c/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
 golang.org/x/text v0.3.1-0.20180807135948-17ff2d5776d2/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
 golang.org/x/text v0.3.4/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
@@ -1692,15 +1784,21 @@ golang.org/x/text v0.8.0/go.mod h1:e1OnstbJyHTd6l/uOt8jFFHp6TRDWZR/bV3emEE/zU8=
 golang.org/x/text v0.11.0/go.mod h1:TvPlkZtksWOMsz7fbANvkp4WM8x/WCo/om8BMLbz+aE=
 golang.org/x/text v0.17.0/go.mod h1:BuEKDfySbSR4drPmRPG/7iBdf8hvFMuRexcpahXilzY=
 golang.org/x/text v0.18.0/go.mod h1:BuEKDfySbSR4drPmRPG/7iBdf8hvFMuRexcpahXilzY=
+golang.org/x/text v0.19.0/go.mod h1:BuEKDfySbSR4drPmRPG/7iBdf8hvFMuRexcpahXilzY=
+golang.org/x/text v0.21.0/go.mod h1:4IBbMaMmOPCJ8SecivzSH54+73PCFmPWxNTLm+vZkEQ=
 golang.org/x/time v0.0.0-20181108054448-85acf8d2951c/go.mod h1:tRJNPiyCQ0inRvYxbN9jk5I+vvW/OXSQhTDSoE431IQ=
 golang.org/x/time v0.0.0-20190308202827-9d24e82272b4/go.mod h1:tRJNPiyCQ0inRvYxbN9jk5I+vvW/OXSQhTDSoE431IQ=
 golang.org/x/time v0.0.0-20191024005414-555d28b269f0/go.mod h1:tRJNPiyCQ0inRvYxbN9jk5I+vvW/OXSQhTDSoE431IQ=
 golang.org/x/time v0.5.0 h1:o7cqy6amK/52YcAKIPlM3a+Fpj35zvRj2TP+e1xFSfk=
 golang.org/x/time v0.5.0/go.mod h1:3BpzKBy/shNhVucY/MWOyx10tF3SFh9QdLuxbVysPQM=
+golang.org/x/tools v0.0.0-20190114222345-bf090417da8b/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
+golang.org/x/tools v0.0.0-20190226205152-f727befe758c/go.mod h1:9Yl7xja0Znq3iFh3HoIrodX9oNMXvdceNzlUR8zjMvY=
+golang.org/x/tools v0.0.0-20190311212946-11955173bddd/go.mod h1:LCzVGOaR6xXOjkQ3onu1FJEFr0SW1gC7cKk1uF8kGRs=
 golang.org/x/tools v0.0.0-20190312151545-0bb0c0a6e846/go.mod h1:LCzVGOaR6xXOjkQ3onu1FJEFr0SW1gC7cKk1uF8kGRs=
 golang.org/x/tools v0.0.0-20190312170243-e65039ee4138/go.mod h1:LCzVGOaR6xXOjkQ3onu1FJEFr0SW1gC7cKk1uF8kGRs=
 golang.org/x/tools v0.0.0-20190425150028-36563e24a262/go.mod h1:RgjU9mgBXZiqYHBnxXauZ1Gv1EHHAz9KjViQ78xBX0Q=
 golang.org/x/tools v0.0.0-20190506145303-2d16b83fe98c/go.mod h1:RgjU9mgBXZiqYHBnxXauZ1Gv1EHHAz9KjViQ78xBX0Q=
+golang.org/x/tools v0.0.0-20190524140312-2c0ae7006135/go.mod h1:RgjU9mgBXZiqYHBnxXauZ1Gv1EHHAz9KjViQ78xBX0Q=
 golang.org/x/tools v0.0.0-20190606124116-d0a3d012864b/go.mod h1:/rFqwRUd4F7ZHNgwSSTFct+R/Kf4OFW1sUzUTQQTgfc=
 golang.org/x/tools v0.0.0-20190621195816-6e04913cbbac/go.mod h1:/rFqwRUd4F7ZHNgwSSTFct+R/Kf4OFW1sUzUTQQTgfc=
 golang.org/x/tools v0.0.0-20190628153133-6cdbf07be9d0/go.mod h1:/rFqwRUd4F7ZHNgwSSTFct+R/Kf4OFW1sUzUTQQTgfc=
@@ -1750,6 +1848,7 @@ golang.org/x/tools v0.12.0/go.mod h1:Sc0INKfu04TlqNoRA1hgpFZbhYXHPr4V5DzpSBTPqQM
 golang.org/x/tools v0.13.0/go.mod h1:HvlwmtVNQAhOuCjW7xxvovg8wbNq7LwfXh/k7wXUl58=
 golang.org/x/tools v0.18.0/go.mod h1:GL7B4CwcLLeo59yx/9UWWuNOW1n3VZ4f5axWfML7Lcg=
 golang.org/x/tools v0.21.1-0.20240508182429-e35e4ccd0d2d/go.mod h1:aiJjzUbINMkxbQROHiO6hDPo2LHcIPhhQsa9DLh0yGk=
+golang.org/x/tools v0.22.0/go.mod h1:aCwcsjqvq7Yqt6TNyX7QMU2enbQ/Gt0bo6krSeEri+c=
 golang.org/x/xerrors v0.0.0-20220907171357-04be3eba64a2 h1:H2TDz8ibqkAF6YGhCdN3jS9O0/s90v0rJh3X/OLHEUk=
 golang.org/x/xerrors v0.0.0-20220907171357-04be3eba64a2/go.mod h1:K8+ghG5WaK9qNqU5K3HdILfMLy1f3aNYFI/wnl100a8=
 golang.org/x/xerrors v0.0.0-20231012003039-104605ab7028 h1:+cNy6SZtPcJQH3LJVLOSmiC7MMxXNOb3PU/VUEz+EhU=
@@ -1786,17 +1885,21 @@ google.golang.org/api v0.126.0 h1:q4GJq+cAdMAC7XP7njvQ4tvohGLiSlytuL4BQxbIZ+o=
 google.golang.org/api v0.126.0/go.mod h1:mBwVAtz+87bEN6CbA1GtZPDOqY2R5ONPqJeIlvyo4Aw=
 google.golang.org/api v0.149.0 h1:b2CqT6kG+zqJIVKRQ3ELJVLN1PwHZ6DJ3dW8yl82rgY=
 google.golang.org/api v0.149.0/go.mod h1:Mwn1B7JTXrzXtnvmzQE2BD6bYZQ8DShKZDZbeN9I7qI=
+google.golang.org/appengine v1.1.0/go.mod h1:EbEs0AVv82hx2wNQdGPgUI5lhzA/G0D9YwlJXL52JkM=
+google.golang.org/appengine v1.4.0/go.mod h1:xpcJRLb0r/rnEns0DIKYYv+WjYCduHsrkT7/EB5XEv4=
 google.golang.org/appengine v1.5.0/go.mod h1:xpcJRLb0r/rnEns0DIKYYv+WjYCduHsrkT7/EB5XEv4=
 google.golang.org/appengine v1.6.1/go.mod h1:i06prIuMbXzDqacNJfV5OdTW448YApPu5ww/cMBSeb0=
 google.golang.org/appengine v1.6.5/go.mod h1:8WjMMxjGQR8xUklV/ARdw2HLXBOI7O7uCIDZVag1xfc=
 google.golang.org/appengine v1.6.6/go.mod h1:8WjMMxjGQR8xUklV/ARdw2HLXBOI7O7uCIDZVag1xfc=
 google.golang.org/appengine v1.6.8 h1:IhEN5q69dyKagZPYMSdIjS2HqprW324FRQZJcGqPAsM=
 google.golang.org/appengine v1.6.8/go.mod h1:1jJ3jBArFh5pcgW8gCtRJnepW8FzD1V44FJffLiz/Ds=
+google.golang.org/genproto v0.0.0-20180817151627-c66870c02cf8/go.mod h1:JiN7NxoALGmiZfu7CAH4rXhgtRTLTxftemlI0sWmxmc=
 google.golang.org/genproto v0.0.0-20190307195333-5fe7a883aa19/go.mod h1:VzzqZJRnGkLBvHegQrXjBqPurQTc5/KpmUdxsrq26oE=
 google.golang.org/genproto v0.0.0-20190418145605-e7d98fc518a7/go.mod h1:VzzqZJRnGkLBvHegQrXjBqPurQTc5/KpmUdxsrq26oE=
 google.golang.org/genproto v0.0.0-20190425155659-357c62f0e4bb/go.mod h1:VzzqZJRnGkLBvHegQrXjBqPurQTc5/KpmUdxsrq26oE=
 google.golang.org/genproto v0.0.0-20190502173448-54afdca5d873/go.mod h1:VzzqZJRnGkLBvHegQrXjBqPurQTc5/KpmUdxsrq26oE=
 google.golang.org/genproto v0.0.0-20190801165951-fa694d86fc64/go.mod h1:DMBHOl98Agz4BDEuKkezgsaosCRResVns1a3J2ZsMNc=
+google.golang.org/genproto v0.0.0-20190819201941-24fa4b261c55/go.mod h1:DMBHOl98Agz4BDEuKkezgsaosCRResVns1a3J2ZsMNc=
 google.golang.org/genproto v0.0.0-20190911173649-1774047e7e51/go.mod h1:IbNlFCBrqXvoKpeg0TB2l7cyZUmoaFKYIwrEpbDKLA8=
 google.golang.org/genproto v0.0.0-20191108220845-16a3f7862a1a/go.mod h1:n3cpQtvxv34hfy77yVDNjmbRyujviMdxYliBSkLhpCc=
 google.golang.org/genproto v0.0.0-20191115194625-c23dd37a84c9/go.mod h1:n3cpQtvxv34hfy77yVDNjmbRyujviMdxYliBSkLhpCc=
@@ -1815,6 +1918,7 @@ google.golang.org/genproto v0.0.0-20200430143042-b979b6f78d84/go.mod h1:55QSHmfG
 google.golang.org/genproto v0.0.0-20200511104702-f5ebc3bea380/go.mod h1:55QSHmfGQM9UVYDPBsyGGes0y52j32PQ3BqQfXhyH3c=
 google.golang.org/genproto v0.0.0-20200513103714-09dca8ec2884/go.mod h1:55QSHmfGQM9UVYDPBsyGGes0y52j32PQ3BqQfXhyH3c=
 google.golang.org/genproto v0.0.0-20200515170657-fc4c6c6a6587/go.mod h1:YsZOwe1myG/8QRHRsmBRE1LrgQY60beZKjly0O1fX9U=
+google.golang.org/genproto v0.0.0-20200526211855-cb27e3aa2013/go.mod h1:NbSheEEYHJ7i3ixzK3sjbqSGDJWnxyFXZblF3eUsNvo=
 google.golang.org/genproto v0.0.0-20200618031413-b414f8b61790/go.mod h1:jDfRM7FcilCzHH/e9qn6dsT145K34l5v+OpcnNgKAAA=
 google.golang.org/genproto v0.0.0-20200729003335-053ba62fc06f/go.mod h1:FWY/as6DDZQgahTzZj3fqbO1CbirC29ZNUFHwi0/+no=
 google.golang.org/genproto v0.0.0-20200804131852-c06518451d9c/go.mod h1:FWY/as6DDZQgahTzZj3fqbO1CbirC29ZNUFHwi0/+no=
@@ -1848,6 +1952,8 @@ google.golang.org/genproto v0.0.0-20231106174013-bbf56f31fb17/go.mod h1:J7XzRzVy
 google.golang.org/genproto v0.0.0-20231212172506-995d672761c0/go.mod h1:l/k7rMz0vFTBPy+tFSGvXEd3z+BcoG1k7EHbqm+YBsY=
 google.golang.org/genproto v0.0.0-20240116215550-a9fa1716bcac h1:ZL/Teoy/ZGnzyrqK/Optxxp2pmVh+fmJ97slxSRyzUg=
 google.golang.org/genproto v0.0.0-20240116215550-a9fa1716bcac/go.mod h1:+Rvu7ElI+aLzyDQhpHMFMMltsD6m7nqpuWDd2CwJw3k=
+google.golang.org/genproto v0.0.0-20241015192408-796eee8c2d53 h1:Df6WuGvthPzc+JiQ/G+m+sNX24kc0aTBqoDN/0yyykE=
+google.golang.org/genproto v0.0.0-20241015192408-796eee8c2d53/go.mod h1:fheguH3Am2dGp1LfXkrvwqC/KlFq8F0nLq3LryOMrrE=
 google.golang.org/genproto v0.0.0-20241021214115-324edc3d5d38 h1:Q3nlH8iSQSRUwOskjbcSMcF2jiYMNiQYZ0c2KEJLKKU=
 google.golang.org/genproto v0.0.0-20241021214115-324edc3d5d38/go.mod h1:xBI+tzfqGGN2JBeSebfKXFSdBpWVQ7sLW40PTupVRm4=
 google.golang.org/genproto v0.0.0-20241118233622-e639e219e697 h1:ToEetK57OidYuqD4Q5w+vfEnPvPpuTwedCNVohYJfNk=
@@ -1864,13 +1970,17 @@ google.golang.org/genproto/googleapis/api v0.0.0-20231106174013-bbf56f31fb17/go.
 google.golang.org/genproto/googleapis/api v0.0.0-20240102182953-50ed04b92917 h1:rcS6EyEaoCO52hQDupoSfrxI3R6C2Tq741is7X8OvnM=
 google.golang.org/genproto/googleapis/api v0.0.0-20240102182953-50ed04b92917/go.mod h1:CmlNWB9lSezaYELKS5Ym1r44VrrbPUa7JTvw+6MbpJ0=
 google.golang.org/genproto/googleapis/api v0.0.0-20240903143218-8af14fe29dc1/go.mod h1:qpvKtACPCQhAdu3PyQgV4l3LMXZEtft7y8QcarRsp9I=
+google.golang.org/genproto/googleapis/api v0.0.0-20241015192408-796eee8c2d53/go.mod h1:riSXTwQ4+nqmPGtobMFyW5FqVAmIs0St6VPp4Ug7CE4=
+google.golang.org/genproto/googleapis/api v0.0.0-20241202173237-19429a94021a/go.mod h1:jehYqy3+AhJU9ve55aNOaSml7wUXjF9x6z2LcCfpAhY=
 google.golang.org/genproto/googleapis/bytestream v0.0.0-20230530153820-e85fd2cbaebc h1:g3hIDl0jRNd9PPTs2uBzYuaD5mQuwOkZY0vSc0LR32o=
 google.golang.org/genproto/googleapis/bytestream v0.0.0-20230530153820-e85fd2cbaebc/go.mod h1:ylj+BE99M198VPbBh6A8d9n3w8fChvyLK3wwBOjXBFA=
 google.golang.org/genproto/googleapis/bytestream v0.0.0-20231030173426-d783a09b4405 h1:o4S3HvTUEXgRsNSUQsALDVog0O9F/U1JJlHmmUN8Uas=
 google.golang.org/genproto/googleapis/bytestream v0.0.0-20231030173426-d783a09b4405/go.mod h1:GRUCuLdzVqZte8+Dl/D4N25yLzcGqqWaYkeVOwulFqw=
 google.golang.org/genproto/googleapis/bytestream v0.0.0-20241021214115-324edc3d5d38 h1:42FIsHvG4GOaVHLDMcy/YMqC4clCbgAPojbcA2hXp5w=
 google.golang.org/genproto/googleapis/bytestream v0.0.0-20241021214115-324edc3d5d38/go.mod h1:T8O3fECQbif8cez15vxAcjbwXxvL2xbnvbQ7ZfiMAMs=
+google.golang.org/genproto/googleapis/bytestream v0.0.0-20241118233622-e639e219e697 h1:rY93Be8/KL+EtFM4im9lxMzjGn796GnwVUd75cyFCJg=
 google.golang.org/genproto/googleapis/bytestream v0.0.0-20241118233622-e639e219e697/go.mod h1:qUsLYwbwz5ostUWtuFuXPlHmSJodC5NI/88ZlHj4M1o=
+google.golang.org/genproto/googleapis/bytestream v0.0.0-20241209162323-e6fa225c2576/go.mod h1:qUsLYwbwz5ostUWtuFuXPlHmSJodC5NI/88ZlHj4M1o=
 google.golang.org/genproto/googleapis/rpc v0.0.0-20230526203410-71b5a4ffd15e/go.mod h1:66JfowdXAEgad5O9NnYcsNPLCPZJD++2L9X0PCMODrA=
 google.golang.org/genproto/googleapis/rpc v0.0.0-20230530153820-e85fd2cbaebc h1:XSJ8Vk1SWuNr8S18z1NZSziL0CPIXLCCMDOEFtHBOFc=
 google.golang.org/genproto/googleapis/rpc v0.0.0-20230530153820-e85fd2cbaebc/go.mod h1:66JfowdXAEgad5O9NnYcsNPLCPZJD++2L9X0PCMODrA=
@@ -1884,12 +1994,20 @@ google.golang.org/genproto/googleapis/rpc v0.0.0-20240102182953-50ed04b92917/go.
 google.golang.org/genproto/googleapis/rpc v0.0.0-20240125205218-1f4bbc51befe h1:bQnxqljG/wqi4NTXu2+DJ3n7APcEA882QZ1JvhQAq9o=
 google.golang.org/genproto/googleapis/rpc v0.0.0-20240125205218-1f4bbc51befe/go.mod h1:PAREbraiVEVGVdTZsVWjSbbTtSyGbAgIIvni8a8CD5s=
 google.golang.org/genproto/googleapis/rpc v0.0.0-20240903143218-8af14fe29dc1/go.mod h1:UqMtugtsSgubUsoxbuAoiCXvqvErP7Gf0so0mK9tHxU=
+google.golang.org/genproto/googleapis/rpc v0.0.0-20241015192408-796eee8c2d53/go.mod h1:GX3210XPVPUjJbTUbvwI8f2IpZDMZuPJWDzDuebbviI=
 google.golang.org/genproto/googleapis/rpc v0.0.0-20241104194629-dd2ea8efbc28/go.mod h1:GX3210XPVPUjJbTUbvwI8f2IpZDMZuPJWDzDuebbviI=
 google.golang.org/genproto/googleapis/rpc v0.0.0-20241118233622-e639e219e697/go.mod h1:5uTbfoYQed2U9p3KIj2/Zzm02PYhndfdmML0qC3q3FU=
+google.golang.org/genproto/googleapis/rpc v0.0.0-20241202173237-19429a94021a/go.mod h1:5uTbfoYQed2U9p3KIj2/Zzm02PYhndfdmML0qC3q3FU=
 google.golang.org/genproto/googleapis/rpc v0.0.0-20241206012308-a4fef0638583/go.mod h1:5uTbfoYQed2U9p3KIj2/Zzm02PYhndfdmML0qC3q3FU=
+google.golang.org/genproto/googleapis/rpc v0.0.0-20241223144023-3abc09e42ca8/go.mod h1:lcTa1sDdWEIHMWlITnIczmw5w60CF9ffkb8Z+DVmmjA=
+google.golang.org/genproto/googleapis/rpc v0.0.0-20250124145028-65684f501c47/go.mod h1:+2Yz8+CLJbIfL9z73EW45avw8Lmge3xVElCP9zEKi50=
+google.golang.org/grpc v1.19.0/go.mod h1:mqu4LbDTu4XGKhr4mRzUsmM4RtVoemTSY81AxZiDr8c=
 google.golang.org/grpc v1.20.1/go.mod h1:10oTOabMzJvdu6/UiuZezV6QK5dSlG84ov/aaiqXj38=
 google.golang.org/grpc v1.21.1/go.mod h1:oYelfM1adQP15Ek0mdvEgi9Df8B9CZIaU1084ijfRaM=
+google.golang.org/grpc v1.23.0/go.mod h1:Y5yQAOtifL1yxbo5wqy6BxZv8vAUGQwXBOALyacEbxg=
+google.golang.org/grpc v1.25.1/go.mod h1:c3i+UQWmh7LiEpx4sFZnkU36qjEYZ0imhYfXVyQciAY=
 google.golang.org/grpc v1.26.0/go.mod h1:qbnxyOmOxrQa7FizSgH+ReBfzJrCY1pSN7KXBS8abTk=
+google.golang.org/grpc v1.27.0/go.mod h1:qbnxyOmOxrQa7FizSgH+ReBfzJrCY1pSN7KXBS8abTk=
 google.golang.org/grpc v1.27.1/go.mod h1:qbnxyOmOxrQa7FizSgH+ReBfzJrCY1pSN7KXBS8abTk=
 google.golang.org/grpc v1.28.0/go.mod h1:rpkK4SK4GF4Ach/+MFLZUBavHOvF2JJB5uozKKal+60=
 google.golang.org/grpc v1.29.1/go.mod h1:itym6AZVZYACWQqET3MqgPpjcuV5QH3BxFS3IjizoKk=
@@ -1897,6 +2015,7 @@ google.golang.org/grpc v1.30.0/go.mod h1:N36X2cJ7JwdamYAgDz+s+rVMFjt3numwzf/HckM
 google.golang.org/grpc v1.31.0/go.mod h1:N36X2cJ7JwdamYAgDz+s+rVMFjt3numwzf/HckM8pak=
 google.golang.org/grpc v1.31.1/go.mod h1:N36X2cJ7JwdamYAgDz+s+rVMFjt3numwzf/HckM8pak=
 google.golang.org/grpc v1.33.1/go.mod h1:fr5YgcSWrqhRRxogOsw7RzIpsmvOZ6IcH4kBYTpR3n0=
+google.golang.org/grpc v1.33.2/go.mod h1:JMHMWHQWaTccqQQlmk3MJZS+GWXOdAesneDmEnv2fbc=
 google.golang.org/grpc v1.34.0/go.mod h1:WotjhfgOW/POjDeRt8vscBtXq+2VjORFy659qA51WJ8=
 google.golang.org/grpc v1.35.0/go.mod h1:qjiiYl8FncCW8feJPdyg3v6XW24KsRHe+dy9BAGRRjU=
 google.golang.org/grpc v1.36.0/go.mod h1:qjiiYl8FncCW8feJPdyg3v6XW24KsRHe+dy9BAGRRjU=
@@ -1916,13 +2035,25 @@ google.golang.org/grpc v1.61.0/go.mod h1:VUbo7IFqmF1QtCAstipjG0GIoq49KvMe9+h1jFL
 google.golang.org/grpc v1.67.1/go.mod h1:1gLDyUQU7CTLJI90u3nXZ9ekeghjeM7pTDZlqFNg2AA=
 google.golang.org/grpc/cmd/protoc-gen-go-grpc v1.1.0 h1:M1YKkFIboKNieVO5DLUEVzQfGwJD30Nv2jfUgzb5UcE=
 google.golang.org/grpc/cmd/protoc-gen-go-grpc v1.1.0/go.mod h1:6Kw0yEErY5E/yWrBtf03jp27GLLJujG4z/JK95pnjjw=
+google.golang.org/protobuf v0.0.0-20200109180630-ec00e32a8dfd/go.mod h1:DFci5gLYBciE7Vtevhsrf46CRTquxDuWsQurQQe4oz8=
+google.golang.org/protobuf v0.0.0-20200221191635-4d8936d0db64/go.mod h1:kwYJMbMJ01Woi6D6+Kah6886xMZcty6N08ah7+eCXa0=
+google.golang.org/protobuf v0.0.0-20200228230310-ab0ca4ff8a60/go.mod h1:cfTl7dwQJ+fmap5saPgwCLgHXTUD7jkjRqWcaiX5VyM=
+google.golang.org/protobuf v1.20.1-0.20200309200217-e05f789c0967/go.mod h1:A+miEFZTKqfCUM6K7xSMQL9OKL/b6hQv+e19PK+JZNE=
+google.golang.org/protobuf v1.21.0/go.mod h1:47Nbq4nVaFHyn7ilMalzfO3qCViNmqZ2kzikPIcrTAo=
+google.golang.org/protobuf v1.22.0/go.mod h1:EGpADcykh3NcUnDUJcl1+ZksZNG86OlYog2l/sGQquU=
+google.golang.org/protobuf v1.23.0/go.mod h1:EGpADcykh3NcUnDUJcl1+ZksZNG86OlYog2l/sGQquU=
+google.golang.org/protobuf v1.23.1-0.20200526195155-81db48ad09cc/go.mod h1:EGpADcykh3NcUnDUJcl1+ZksZNG86OlYog2l/sGQquU=
 google.golang.org/protobuf v1.24.0/go.mod h1:r/3tXBNzIEhYS9I1OUVjXDlt8tc493IdKGjtUeSXeh4=
+google.golang.org/protobuf v1.25.0/go.mod h1:9JNX74DMeImyA3h4bdi1ymwjUzf21/xIlbajtzgsN7c=
 google.golang.org/protobuf v1.27.1/go.mod h1:9q0QmTI4eRPtz6boOQmLYwt+qCgq0jsYwAQnmE0givc=
 google.golang.org/protobuf v1.28.0/go.mod h1:HV8QOd/L58Z+nl8r43ehVNZIU/HEI6OcFqwMG9pJV4I=
 google.golang.org/protobuf v1.30.0/go.mod h1:HV8QOd/L58Z+nl8r43ehVNZIU/HEI6OcFqwMG9pJV4I=
 google.golang.org/protobuf v1.32.0/go.mod h1:c6P6GXX6sHbq/GpV6MGZEdwhWPcYBgnhAHhKbcUYpos=
 google.golang.org/protobuf v1.34.2/go.mod h1:qYOHts0dSfpeUzUFpOMr/WGzszTmLH+DiWniOlNbLDw=
 google.golang.org/protobuf v1.35.1/go.mod h1:9fA7Ob0pmnwhb644+1+CVWFRbNajQ6iRojtC/QF5bRE=
+google.golang.org/protobuf v1.35.2/go.mod h1:9fA7Ob0pmnwhb644+1+CVWFRbNajQ6iRojtC/QF5bRE=
+google.golang.org/protobuf v1.36.1/go.mod h1:9fA7Ob0pmnwhb644+1+CVWFRbNajQ6iRojtC/QF5bRE=
+google.golang.org/protobuf v1.36.4/go.mod h1:9fA7Ob0pmnwhb644+1+CVWFRbNajQ6iRojtC/QF5bRE=
 gopkg.in/alexcesaro/quotedprintable.v3 v3.0.0-20150716171945-2caba252f4dc h1:2gGKlE2+asNV9m7xrywl36YYNnBG5ZQ0r/BOOxqPpmk=
 gopkg.in/alexcesaro/quotedprintable.v3 v3.0.0-20150716171945-2caba252f4dc/go.mod h1:m7x9LTH6d71AHyAX77c9yqWCCa3UKHcVEj9y7hAtKDk=
 gopkg.in/check.v1 v1.0.0-20190902080502-41f04d3bba15/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
@@ -1941,9 +2072,11 @@ gotest.tools v2.2.0+incompatible h1:VsBPFP1AI068pPrMxtb/S8Zkgf9xEmTLJjfM+P5UIEo=
 gotest.tools v2.2.0+incompatible/go.mod h1:DsYFclhRJ6vuDpmuTbkuFWG+y2sxOXAzmJt81HFBacw=
 gotest.tools/v3 v3.0.3 h1:4AuOwCGf4lLR9u3YOe2awrHygurzhO/HeQ6laiA6Sx0=
 gotest.tools/v3 v3.0.3/go.mod h1:Z7Lb0S5l+klDB31fvDQX8ss/FlKDxtlFlw3Oa8Ymbl8=
+honnef.co/go/tools v0.0.0-20190102054323-c2f93a96b099/go.mod h1:rf3lG4BRIbNafJWhAfAdb/ePZxsR/4RtNHQocxwk9r4=
 honnef.co/go/tools v0.0.0-20190106161140-3f1c8253044a/go.mod h1:rf3lG4BRIbNafJWhAfAdb/ePZxsR/4RtNHQocxwk9r4=
 honnef.co/go/tools v0.0.0-20190418001031-e561f6794a2a/go.mod h1:rf3lG4BRIbNafJWhAfAdb/ePZxsR/4RtNHQocxwk9r4=
 honnef.co/go/tools v0.0.0-20190523083050-ea95bdfd59fc h1:/hemPrYIhOhy8zYrNj+069zDB68us2sMGsfkFJO0iZs=
+honnef.co/go/tools v0.0.0-20190523083050-ea95bdfd59fc/go.mod h1:rf3lG4BRIbNafJWhAfAdb/ePZxsR/4RtNHQocxwk9r4=
 honnef.co/go/tools v0.0.1-2019.2.3/go.mod h1:a3bituU0lyd329TUQxRnasdCoJDkEUEAqEt0JzvZhAg=
 honnef.co/go/tools v0.0.1-2020.1.3/go.mod h1:X/FiERA/W4tHapMX5mGpAtMSVEeEUOyHaw9vFzvIQ3k=
 honnef.co/go/tools v0.0.1-2020.1.4 h1:UoveltGrhghAA7ePc+e+QYDHXrBps2PqFZiHkGR/xK8=
diff --git a/service/pkg/api/req.go b/service/pkg/api/req.go
index a4872bd97030..c8d4c4883a91 100644
--- a/service/pkg/api/req.go
+++ b/service/pkg/api/req.go
@@ -70,6 +70,37 @@ type Stats struct {
 	ExecutionTimeMsec int    `json:"executionTimeMsec"`
 }
 
+type JSONQuery struct {
+	Key string
+	// There are a total of four modes,"=" equal,"!" Not equal,"~" including,"!~" Not included.
+	Mode  string
+	Value string
+}
+
+type VlogsRequest struct {
+	Time        string      `json:"time"`
+	Namespace   string      `json:"namespace"`
+	App         string      `json:"app"`
+	Limit       string      `json:"limit,omitempty"`
+	JSONMode    string      `json:"jsonMode,omitempty"`
+	StderrMode  string      `json:"stderrMode,omitempty"`
+	NumberMode  string      `json:"numberMode,omitempty"`
+	NumberLevel string      `json:"numberLevel,omitempty"`
+	Pod         []string    `json:"pod,omitempty"`
+	Container   []string    `json:"container,omitempty"`
+	Keyword     string      `json:"keyword,omitempty"`
+	JSONQuery   []JSONQuery `json:"jsonQuery,omitempty"`
+	PodQuery    string      `json:"podQuery,omitempty"`
+}
+
+type VlogsResponse struct {
+	Time      string `json:"_time"`
+	Message   string `json:"_msg"`
+	Container string `json:"container"`
+	Pod       string `json:"pod"`
+	Stream    string `json:"stream"`
+}
+
 var (
 	Mysql = map[string]string{
 		"cpu":           "round(sum(node_namespace_pod_container:container_cpu_usage_seconds_total:sum_irate{namespace=~\"#\",pod=~\"@-mysql-\\\\d\"}) by (pod) / sum(cluster:namespace:pod_cpu:active:kube_pod_container_resource_limits{namespace=~\"#\",pod=~\"@-mysql-\\\\d\"}) by (pod)*100,0.01)",
diff --git a/service/vlogs/Dockerfile b/service/vlogs/Dockerfile
new file mode 100644
index 000000000000..f9fee8e8f361
--- /dev/null
+++ b/service/vlogs/Dockerfile
@@ -0,0 +1,7 @@
+FROM gcr.io/distroless/static:nonroot
+ARG TARGETARCH
+COPY bin/service-vlogs-$TARGETARCH /manager
+EXPOSE 8428
+USER 65532:65532
+
+ENTRYPOINT [ "/manager", "config/config.yml" ]
\ No newline at end of file
diff --git a/service/vlogs/Makefile b/service/vlogs/Makefile
new file mode 100644
index 000000000000..5189df3973d2
--- /dev/null
+++ b/service/vlogs/Makefile
@@ -0,0 +1,55 @@
+IMG ?= ghcr.io/labring/sealos-vlogs-service:latest
+
+# Get the currently used golang install path (in GOPATH/bin, unless GOBIN is set)
+ifeq (,$(shell go env GOBIN))
+GOBIN=$(shell go env GOPATH)/bin
+else
+GOBIN=$(shell go env GOBIN)
+endif
+
+# only support linux, non cgo
+PLATFORMS ?= linux_arm64 linux_amd64
+GOOS=linux
+CGO_ENABLED=0
+GOARCH=$(shell go env GOARCH)
+
+GO_BUILD_FLAGS=-trimpath -ldflags "-s -w"
+
+.PHONY: all
+all: build
+
+##@ General
+
+# The help target prints out all targets with their descriptions organized
+# beneath their categories. The categories are represented by '##@' and the
+# target descriptions by '##'. The awk commands is responsible for reading the
+# entire set of makefiles included in this invocation, looking for lines of the
+# file as xyz: ## something, and then pretty-format the target and help. Then,
+# if there's a line with ##@ something, that gets pretty-printed as a category.
+# More info on the usage of ANSI control characters for terminal formatting:
+# https://en.wikipedia.org/wiki/ANSI_escape_code#SGR_parameters
+# More info on the awk command:
+# http://linuxcommand.org/lc3_adv_awk.php
+
+.PHONY: help
+help: ## Display this help.
+	@awk 'BEGIN {FS = ":.*##"; printf "\nUsage:\n  make \033[36m<target>\033[0m\n"} /^[a-zA-Z_0-9-]+:.*?##/ { printf "  \033[36m%-15s\033[0m %s\n", $$1, $$2 } /^##@/ { printf "\n\033[1m%s\033[0m\n", substr($$0, 5) } ' $(MAKEFILE_LIST)
+
+##@ Build
+
+.PHONY: clean
+clean:
+	rm -f $(SERVICE_NAME)
+
+.PHONY: build
+build: clean ## Build service-hub binary.
+	CGO_ENABLED=$(CGO_ENABLED) GOOS=$(GOOS) go build $(GO_BUILD_FLAGS) -o bin/manager main.go
+
+.PHONY: docker-build
+docker-build: build
+	mv bin/manager bin/service-vlogs-${TARGETARCH}
+	docker build -t $(IMG) .
+
+.PHONY: docker-push
+docker-push:
+	docker push $(IMG)
diff --git a/service/vlogs/README.md b/service/vlogs/README.md
new file mode 100644
index 000000000000..32ef35e25910
--- /dev/null
+++ b/service/vlogs/README.md
@@ -0,0 +1,54 @@
+# RESTServer
+
+## Description
+
+restserver for victoria logs
+
+## Getting Started
+
+### Running on the cluster
+
+1. Build and push your image to the location specified by `IMG`:
+
+```sh
+make docker-build docker-push IMG=<some-registry>/sealos-vlogs-service:latest
+```
+
+2. Deploy the restserver:
+
+```sh
+kubectl apply -f deploy/manifests/
+```
+
+### How it works
+
+To enable the database frontend application to retrieve monitoring data, you need to modify the environment variable `MONITOR_URL` of the frontend deployment to the corresponding address of the restserver.
+
+Additionally, to configure the data source, you need to set the environment variable `VM_SERVICE_HOST` of the restserver deployment to the correct address.
+
+```
+e.g.
+http://prometheus.sealos.svc.cluster.local
+```
+
+## License
+
+Copyright 2023.
+
+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.
\ No newline at end of file
diff --git a/service/vlogs/config/config.yml b/service/vlogs/config/config.yml
new file mode 100644
index 000000000000..bdce9e3b2162
--- /dev/null
+++ b/service/vlogs/config/config.yml
@@ -0,0 +1,2 @@
+server:
+  addr: ":8428"
diff --git a/service/vlogs/deploy/Kubefile b/service/vlogs/deploy/Kubefile
new file mode 100644
index 000000000000..035ec02f5a03
--- /dev/null
+++ b/service/vlogs/deploy/Kubefile
@@ -0,0 +1,5 @@
+FROM scratch
+COPY registry registry
+COPY manifests manifests
+
+CMD ["kubectl apply -f manifests/deploy.yaml"]
\ No newline at end of file
diff --git a/service/vlogs/deploy/README.md b/service/vlogs/deploy/README.md
new file mode 100644
index 000000000000..8606792effbc
--- /dev/null
+++ b/service/vlogs/deploy/README.md
@@ -0,0 +1,16 @@
+### docker image build and deploy
+```bash
+make docker-build IMG=$(YourImageName)
+# edit deploy/manifests/depoly.yaml and deploy
+kubectl apply -f deploy/manifests/depoly.yaml
+```
+
+### cluster image build and deploy
+```bash
+```
+
+### Victoria Metrics
+
+In order to prevent performance degradation or abnormal behavior caused by excessive data size in Prometheus, VictoriaMetrics is utilized for data collection.
+
+> By default, we use kb-prometheus-server for the data collection service.
\ No newline at end of file
diff --git a/service/vlogs/deploy/manifests/deploy.yaml b/service/vlogs/deploy/manifests/deploy.yaml
new file mode 100644
index 000000000000..2abf3100b449
--- /dev/null
+++ b/service/vlogs/deploy/manifests/deploy.yaml
@@ -0,0 +1,86 @@
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  labels:
+    app: service-vlogs
+  name: service-vlogs-config
+  namespace: sealos
+data:
+  config.yml: |
+    server:
+      addr: ":8428"
+---
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  labels:
+    app: service-vlogs
+  name: service-vlogs-deployment
+  namespace: sealos
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: service-vlogs
+  strategy:
+    type: Recreate
+  template:
+    metadata:
+      labels:
+        app: service-vlogs
+    spec:
+      containers:
+        - args:
+            - /config/config.yml
+          command:
+            - /manager
+          image: ghcr.io/labring/sealos-vlogs-service:latest
+          imagePullPolicy: Always
+          name: service-vlogs
+          ports:
+            - containerPort: 8428
+              protocol: TCP
+          resources:
+            limits:
+              cpu: 500m
+              memory: 1Gi
+            requests:
+              cpu: 5m
+              memory: 64Mi
+          securityContext:
+            allowPrivilegeEscalation: false
+            capabilities:
+              drop:
+                - ALL
+            runAsNonRoot: true
+          terminationMessagePath: /dev/termination-log
+          terminationMessagePolicy: File
+          env:
+            - name: WHITELIST_KUBERNETES_HOSTS
+              value: "https://usw.sailos.io:6443"
+          volumeMounts:
+            - mountPath: /config
+              name: config-vol
+      dnsPolicy: ClusterFirst
+      restartPolicy: Always
+      volumes:
+        - configMap:
+            defaultMode: 420
+            name: service-vlogs-config
+          name: config-vol
+---
+apiVersion: v1
+kind: Service
+metadata:
+  labels:
+    app: service-vlogs
+  name: service-vlogs
+  namespace: sealos
+spec:
+  ports:
+    - name: http
+      port: 8428
+      protocol: TCP
+      targetPort: 8428
+  selector:
+    app: service-vlogs
diff --git a/service/vlogs/go.mod b/service/vlogs/go.mod
new file mode 100644
index 000000000000..3dda08ffcb94
--- /dev/null
+++ b/service/vlogs/go.mod
@@ -0,0 +1,10 @@
+module github.com/labring/sealos/service/vlogs
+
+go 1.22.7
+
+require (
+	github.com/labring/sealos/service v0.0.0
+	gopkg.in/yaml.v2 v2.4.0
+)
+
+replace github.com/labring/sealos/service => ../
diff --git a/service/vlogs/main.go b/service/vlogs/main.go
new file mode 100644
index 000000000000..86f8c303c0ad
--- /dev/null
+++ b/service/vlogs/main.go
@@ -0,0 +1,63 @@
+package main
+
+import (
+	"flag"
+	"fmt"
+	"log"
+	"net"
+	"net/http"
+	"os"
+
+	vlogsServer "github.com/labring/sealos/service/vlogs/server"
+)
+
+type RestartableServer struct {
+	configFile string
+}
+
+func (rs *RestartableServer) Serve(c *vlogsServer.Config) {
+	var vs, err = vlogsServer.NewVLogsServer(c)
+	if err != nil {
+		fmt.Printf("Failed to create auth server: %s\n", err)
+		return
+	}
+
+	hs := &http.Server{
+		Addr:    c.Server.ListenAddress,
+		Handler: vs,
+	}
+
+	var listener net.Listener
+	listener, err = net.Listen("tcp", c.Server.ListenAddress)
+	if err != nil {
+		fmt.Println(err)
+		return
+	}
+	fmt.Printf("Serve on %s\n", c.Server.ListenAddress)
+	if err := hs.Serve(listener); err != nil {
+		fmt.Println(err)
+		return
+	}
+}
+
+func main() {
+	log.SetOutput(os.Stdout)
+	log.SetFlags(log.LstdFlags | log.Lshortfile)
+	flag.Parse()
+
+	cf := flag.Arg(0)
+	if cf == "" {
+		fmt.Println("Config file not sepcified")
+		return
+	}
+
+	config, err := vlogsServer.InitConfig(cf)
+	if err != nil {
+		fmt.Println(err)
+		return
+	}
+	rs := RestartableServer{
+		configFile: cf,
+	}
+	rs.Serve(config)
+}
diff --git a/service/vlogs/request/req.go b/service/vlogs/request/req.go
new file mode 100644
index 000000000000..d3803ebb2047
--- /dev/null
+++ b/service/vlogs/request/req.go
@@ -0,0 +1,47 @@
+package request
+
+import (
+	"crypto/tls"
+	"fmt"
+	"net/http"
+	"net/url"
+)
+
+func generateReq(path string, username string, password string, query string) (*http.Request, error) {
+	baseURL, err := url.Parse(path + "/select/logsql/query")
+	if err != nil {
+		return nil, fmt.Errorf("can not parser API URL: %v", err)
+	}
+	params := url.Values{}
+	params.Add("query", query)
+	baseURL.RawQuery = params.Encode()
+	req, err := http.NewRequest("GET", baseURL.String(), nil)
+	if err != nil {
+		return nil, fmt.Errorf("create HTTP req error: %v", err)
+	}
+
+	req.SetBasicAuth(username, password)
+	return req, nil
+}
+
+func QueryLogsByParams(path string, username string, password string, query string) (*http.Response, error) {
+	httpClient := &http.Client{
+		Transport: &http.Transport{
+			TLSClientConfig: &tls.Config{
+				InsecureSkipVerify: true,
+			},
+		},
+	}
+	req, err := generateReq(path, username, password, query)
+	if err != nil {
+		return nil, err
+	}
+	resp, err := httpClient.Do(req)
+	if err != nil {
+		return nil, fmt.Errorf("HTTP req error: %v", err)
+	}
+	if resp.StatusCode != http.StatusOK {
+		return nil, fmt.Errorf("res error,err info: %+v", resp)
+	}
+	return resp, nil
+}
diff --git a/service/vlogs/server/config.go b/service/vlogs/server/config.go
new file mode 100644
index 000000000000..3ea17bc1a225
--- /dev/null
+++ b/service/vlogs/server/config.go
@@ -0,0 +1,31 @@
+package server
+
+import (
+	"fmt"
+	"os"
+
+	"gopkg.in/yaml.v2"
+)
+
+type Config struct {
+	Server ServeConfig `yaml:"server"`
+}
+
+type ServeConfig struct {
+	ListenAddress string `yaml:"addr"`
+	Path          string `yaml:"path"`
+	Username      string `yaml:"username"`
+	Password      string `yaml:"password"`
+}
+
+func InitConfig(configPath string) (*Config, error) {
+	configData, err := os.ReadFile(configPath)
+	if err != nil {
+		return nil, fmt.Errorf("could not read %s: %s", configPath, err)
+	}
+	c := &Config{}
+	if err := yaml.Unmarshal(configData, c); err != nil {
+		return nil, fmt.Errorf("could not parse config: %s", err)
+	}
+	return c, nil
+}
diff --git a/service/vlogs/server/server.go b/service/vlogs/server/server.go
new file mode 100644
index 000000000000..c05b919ddba0
--- /dev/null
+++ b/service/vlogs/server/server.go
@@ -0,0 +1,297 @@
+package server
+
+import (
+	"bufio"
+	"encoding/json"
+	"fmt"
+	"io"
+	"log/slog"
+	"net/http"
+	"net/url"
+	"strings"
+
+	"github.com/labring/sealos/service/pkg/api"
+	"github.com/labring/sealos/service/pkg/auth"
+	"github.com/labring/sealos/service/vlogs/request"
+)
+
+type VLogsServer struct {
+	path     string
+	username string
+	password string
+}
+
+const modeTrue = "true"
+const modeFalse = "false"
+
+func NewVLogsServer(config *Config) (*VLogsServer, error) {
+	vl := &VLogsServer{
+		path:     config.Server.Path,
+		username: config.Server.Username,
+		password: config.Server.Password,
+	}
+	return vl, nil
+}
+
+func (vl *VLogsServer) ServeHTTP(rw http.ResponseWriter, req *http.Request) {
+	query, err := vl.queryConvert(req)
+	if err != nil {
+		http.Error(rw, fmt.Sprintf("query %s error: %s", req.URL.Path, err), http.StatusInternalServerError)
+		return
+	}
+	err = query(rw, req)
+	if err != nil {
+		http.Error(rw, fmt.Sprintf("query %s error: %s", req.URL.Path, err), http.StatusInternalServerError)
+		slog.Error("%s error: %s", req.URL.Path, err)
+		return
+	}
+}
+
+func (vl *VLogsServer) queryConvert(req *http.Request) (func(rw http.ResponseWriter, req *http.Request) error, error) {
+	switch req.URL.Path {
+	case "/queryLogsByParams":
+		return vl.queryLogsByParams, nil
+	case "/queryPodList":
+		return vl.queryPodList, nil
+	default:
+		return nil, fmt.Errorf("unknown url path")
+	}
+}
+
+func (vl *VLogsServer) authenticate(req *http.Request) (string, error) {
+	kubeConfig, namespace, query, err := vl.generateParamsRequest(req)
+	if err != nil {
+		return "", fmt.Errorf("bad request (%s)", err)
+	}
+
+	err = auth.Authenticate(namespace, kubeConfig)
+	if err != nil {
+		return "", fmt.Errorf("authentication failed (%s)", err)
+	}
+	return query, nil
+}
+
+func (vl *VLogsServer) queryLogsByParams(rw http.ResponseWriter, req *http.Request) error {
+	query, err := vl.authenticate(req)
+	if err != nil {
+		return err
+	}
+	resp, err := request.QueryLogsByParams(vl.path, vl.username, vl.password, query)
+	if err != nil {
+		return fmt.Errorf("query failed (%s)", err)
+	}
+	defer resp.Body.Close()
+	_, err = io.Copy(rw, resp.Body)
+	if err != nil {
+		return err
+	}
+	return nil
+}
+
+func (vl *VLogsServer) queryPodList(rw http.ResponseWriter, req *http.Request) error {
+	query, err := vl.authenticate(req)
+	if err != nil {
+		return err
+	}
+	resp, err := request.QueryLogsByParams(vl.path, vl.username, vl.password, query)
+	if err != nil {
+		return fmt.Errorf("query failed (%s)", err)
+	}
+	defer resp.Body.Close()
+	body, err := io.ReadAll(resp.Body)
+	if err != nil {
+		return fmt.Errorf("failed to read response body: %v", err)
+	}
+	if len(body) == 0 {
+		return fmt.Errorf("response body is empty")
+	}
+
+	scanner := bufio.NewScanner(strings.NewReader(string(body)))
+	var logs []api.VlogsResponse
+
+	for scanner.Scan() {
+		var entry api.VlogsResponse
+		line := scanner.Text()
+		err := json.Unmarshal([]byte(line), &entry)
+		if err != nil {
+			continue
+		}
+		logs = append(logs, entry)
+	}
+
+	uniquePods := make(map[string]struct{})
+	for _, log := range logs {
+		uniquePods[log.Pod] = struct{}{}
+	}
+	var podList []string
+	for pod := range uniquePods {
+		podList = append(podList, pod)
+	}
+
+	rw.Header().Set("Content-Type", "application/json")
+	if err := json.NewEncoder(rw).Encode(podList); err != nil {
+		return fmt.Errorf("failed to write response: %v", err)
+	}
+	return nil
+}
+
+func (vl *VLogsServer) generateParamsRequest(req *http.Request) (string, string, string, error) {
+	kubeConfig := req.Header.Get("Authorization")
+	if config, err := url.PathUnescape(kubeConfig); err == nil {
+		kubeConfig = config
+	} else {
+		return "", "", "", fmt.Errorf("failed to PathUnescape : %s", err)
+	}
+	var query string
+	vlogsReq := &api.VlogsRequest{}
+	err := json.NewDecoder(req.Body).Decode(&vlogsReq)
+	if err != nil {
+		return "", "", "", fmt.Errorf("failed to parse request body: %s", err)
+	}
+	if vlogsReq.Namespace == "" {
+		return "", "", "", fmt.Errorf("failed to get namespace")
+	}
+	var vlogs VLogsQuery
+	query, err = vlogs.getQuery(vlogsReq)
+	if err != nil {
+		return "", "", "", fmt.Errorf("failed to parse request body: %s", err)
+	}
+	return kubeConfig, vlogsReq.Namespace, query, nil
+}
+
+type VLogsQuery struct {
+	query string
+}
+
+func (v *VLogsQuery) getQuery(req *api.VlogsRequest) (string, error) {
+	if req.PodQuery == modeTrue {
+		query := v.generatePodListQuery(req)
+		return query, nil
+	}
+	v.generateKeywordQuery(req)
+	v.generateStreamQuery(req)
+	v.generateCommonQuery(req)
+	err := v.generateJSONQuery(req)
+	if err != nil {
+		return "", err
+	}
+	v.generateStdQuery(req)
+	v.generateDropQuery()
+	v.generateNumberQuery(req)
+	return v.query, nil
+}
+
+func (v *VLogsQuery) generatePodListQuery(req *api.VlogsRequest) string {
+	var builder strings.Builder
+	item := fmt.Sprintf(`{namespace="%s"} _time:%s app:="%s" | Drop _stream_id,_stream,app,job,namespace,node`, req.Namespace, req.Time, req.App)
+	builder.WriteString(item)
+	v.query += builder.String()
+	return v.query
+}
+
+func (v *VLogsQuery) generateKeywordQuery(req *api.VlogsRequest) {
+	var builder strings.Builder
+	builder.WriteString(req.Keyword)
+	builder.WriteString(" ")
+	v.query += builder.String()
+}
+
+func (v *VLogsQuery) generateJSONQuery(req *api.VlogsRequest) error {
+	if req.JSONMode != modeTrue {
+		return nil
+	}
+	var builder strings.Builder
+	builder.WriteString(" | unpack_json")
+	if len(req.JSONQuery) > 0 {
+		for _, jsonQuery := range req.JSONQuery {
+			var item string
+			switch jsonQuery.Mode {
+			case "=":
+				item = fmt.Sprintf("| %s:=%s ", jsonQuery.Key, jsonQuery.Value)
+			case "!=":
+				item = fmt.Sprintf("| %s:(!=%s) ", jsonQuery.Key, jsonQuery.Value)
+			case "~":
+				item = fmt.Sprintf("| %s:%s ", jsonQuery.Key, jsonQuery.Value)
+			case "!~":
+				item = fmt.Sprintf("| %s:(!~%s) ", jsonQuery.Key, jsonQuery.Value)
+			default:
+				return fmt.Errorf("invalid JSON query mode: %s", jsonQuery.Mode)
+			}
+			builder.WriteString(item)
+		}
+	}
+	v.query += builder.String()
+	return nil
+}
+
+func (v *VLogsQuery) generateStreamQuery(req *api.VlogsRequest) {
+	var builder strings.Builder
+
+	if len(req.Pod) == 0 && len(req.Container) == 0 {
+		// Generate query based only on namespace
+		builder.WriteString(fmt.Sprintf(`{namespace="%s"}`, req.Namespace))
+	} else if len(req.Pod) == 0 {
+		// Generate query based on container
+		for i, container := range req.Container {
+			builder.WriteString(fmt.Sprintf(`{container="%s",namespace="%s"}`, container, req.Namespace))
+			if i != len(req.Container)-1 {
+				builder.WriteString(" OR ")
+			}
+		}
+	} else if len(req.Container) == 0 {
+		// Generate query based on pod
+		for i, pod := range req.Pod {
+			builder.WriteString(fmt.Sprintf(`{pod="%s",namespace="%s"}`, pod, req.Namespace))
+			if i != len(req.Pod)-1 {
+				builder.WriteString(" OR ")
+			}
+		}
+	} else {
+		// Generate query based on both pod and container
+		for i, container := range req.Container {
+			for j, pod := range req.Pod {
+				builder.WriteString(fmt.Sprintf(`{container="%s",namespace="%s",pod="%s"}`, container, req.Namespace, pod))
+				if i != len(req.Container)-1 || j != len(req.Pod)-1 {
+					builder.WriteString(" OR ")
+				}
+			}
+		}
+	}
+	v.query += builder.String()
+}
+
+func (v *VLogsQuery) generateStdQuery(req *api.VlogsRequest) {
+	var builder strings.Builder
+	if req.StderrMode == modeTrue {
+		item := `| stream:="stderr" `
+		builder.WriteString(item)
+	}
+	v.query += builder.String()
+}
+
+func (v *VLogsQuery) generateCommonQuery(req *api.VlogsRequest) {
+	var builder strings.Builder
+	item := fmt.Sprintf(`_time:%s app:="%s" `, req.Time, req.App)
+	builder.WriteString(item)
+	// if query number,dont use limit param
+	if req.NumberMode == modeFalse {
+		item := fmt.Sprintf(`  | limit %s  `, req.Limit)
+		builder.WriteString(item)
+	}
+	v.query += builder.String()
+}
+
+func (v *VLogsQuery) generateDropQuery() {
+	var builder strings.Builder
+	builder.WriteString("| Drop _stream_id,_stream,app,job,namespace,node")
+	v.query += builder.String()
+}
+
+func (v *VLogsQuery) generateNumberQuery(req *api.VlogsRequest) {
+	var builder strings.Builder
+	if req.NumberMode == modeTrue {
+		item := fmt.Sprintf(" | stats by (_time:1%s) count() logs_total ", req.NumberLevel)
+		builder.WriteString(item)
+		v.query += builder.String()
+	}
+}